/* global React */
/* 7151 Johnston Road — shared building blocks.
Reads DS primitives off the compiled bundle namespace; only composition
and the swappable media system live here. Exported to window for the
section files. */
const EE = window.EstablishedEstateDesignSystem_03388c;
const { Eyebrow, Rule, Button, StatBlock, EstateIcon } = EE;
/* ---------- type helpers (mirror the DS display/body voice) ---------- */
const dsp = (size, extra = {}) => ({
fontFamily: 'var(--font-display)', fontWeight: 500, lineHeight: 1.08,
letterSpacing: '-0.012em', color: 'var(--text-primary)', margin: 0,
fontSize: size, textWrap: 'pretty', ...extra,
});
/* Responsive display sizes — the DS fixed 56px/42px choke in split columns,
so headlines scale fluidly between mobile and the 1480px editorial width. */
const EE_DISPLAY = 'clamp(2rem, 1.05rem + 2.4vw, 3.4rem)'; /* section openers */
const EE_DISPLAY_3 = 'clamp(1.7rem, 1.05rem + 1.7vw, 2.6rem)'; /* story / thesis */
const bdy = (extra = {}) => ({
fontFamily: 'var(--font-body)', fontSize: 'var(--type-body)',
lineHeight: 'var(--leading-body)', color: 'var(--text-muted)',
margin: 0, textWrap: 'pretty', ...extra,
});
/* ============================================================ MONOGRAM === */
function Monogram({ size = 44, color = 'var(--color-leather)' }) {
return (
);
}
/* ===================================================== REVEAL ON SCROLL === */
/* Wraps children in a div that fades + rises into view once. Calm, single-shot. */
function Reveal({ children, as = 'div', delay = 0, className = '', style, ...rest }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
el.classList.add('is-in');
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { el.classList.add('is-in'); io.unobserve(el); }
});
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
const Tag = as;
return (
{children}
);
}
/* ======================================================= PHOTO TONES ====== */
const PHOTO_TONES = {
dawn: ['#e8d9c2', '#c7ad84'], pasture: ['#909c74', '#5e6a47'],
ridge: ['#9aa6a0', '#6e7c75'], oak: ['#bcab8b', '#897556'],
leather: ['#8a5d3a', '#5b3a21'], eucalyptus: ['#3a4738', '#222b21'],
oat: ['#ddd1bf', '#c2b49a'], gold: ['#d8b878', '#a8823f'],
};
/* ============================================================ PHOTOSLOT === */
/* A REAL image slot for finalized photography. Pass `src` to drop the real
curated photo in with zero layout change; until then it renders a refined
golden-hour tonal placeholder, labelled as a photo slot. `ratio` keeps the
frame fixed so swapping changes nothing around it. */
function PhotoSlot({
id, src, alt, caption, tone = 'oak', icon, ratio = '4 / 3',
scrim = false, rounded = true, compact = false, children, className = '', style,
}) {
const [a, b] = PHOTO_TONES[tone] || PHOTO_TONES.oak;
return (
{src ? : null}
{!src && icon ? (
) : null}
{!src && !compact ? (
Photo slot
) : null}
{scrim ? : null}
{children ?
{children}
: null}
{caption ? (
{caption}
) : null}
);
}
/* ============================================================ MEDIASLOT === */
/* The reusable SWAPPABLE placeholder wrapper for every unfinished asset
(film, floor plan, estate map, CubiCasa). One named slot, one aspect ratio,
one config reference — dropping in the final asset later changes nothing
around it. `label` is the visible PLACEHOLDER chip; `src` (image) swaps it. */
function MediaSlot({
id, label, note, ratio = '16 / 9', icon, src, alt,
onDeep = false, children, className = '', style,
}) {
return (
{src ? (
) : (
{icon ? (
) : null}
{note ?
{note}
: null}
)}
{label ? (
{label}
) : null}
{children}
);
}
/* ===================================================== GALLERY LIGHTBOX ===
Reusable full-screen gallery modal shared by the Lived-Moments, Interiors,
and Floor-Plan galleries. `items` = [{ src, caption, alt }]; `index` is the
open slide. Proper modal: role="dialog", aria-modal, labelled by the live
caption; traps focus, locks scroll, restores focus to the trigger on close;
← → keys / arrows / swipe navigate; neighbouring images preload. */
const EE_WEB = '../Assets/web/'; /* web-optimized photo root (rel. to page) */
function GalleryLightbox({ items, index, onClose, onNav, restoreEl, frame = false }) {
const dialogRef = React.useRef(null);
const closeRef = React.useRef(null);
const touchX = React.useRef(null);
const item = items[index];
React.useEffect(() => {
const prevFocus = restoreEl || document.activeElement;
document.body.style.overflow = 'hidden';
const raf = requestAnimationFrame(() => closeRef.current && closeRef.current.focus());
const onKey = (e) => {
if (e.key === 'Escape') { e.preventDefault(); onClose(); return; }
if (e.key === 'ArrowRight') { e.preventDefault(); onNav(1); return; }
if (e.key === 'ArrowLeft') { e.preventDefault(); onNav(-1); return; }
if (e.key === 'Tab') {
const root = dialogRef.current; if (!root) return;
const f = root.querySelectorAll('button, [href], [tabindex]:not([tabindex="-1"])');
if (!f.length) return;
const first = f[0], last = f[f.length - 1];
if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
}
};
document.addEventListener('keydown', onKey, true);
return () => {
document.removeEventListener('keydown', onKey, true);
document.body.style.overflow = '';
cancelAnimationFrame(raf);
if (prevFocus && prevFocus.focus) prevFocus.focus();
};
}, [onClose, onNav, restoreEl]);
React.useEffect(() => {
[1, -1].forEach((d) => {
const n = (index + d + items.length) % items.length;
const img = new Image(); img.src = items[n].src;
});
}, [index, items]);
const multi = items.length > 1;
const onTouchStart = (e) => { touchX.current = e.changedTouches[0].clientX; };
const onTouchEnd = (e) => {
if (touchX.current == null) return;
const dx = e.changedTouches[0].clientX - touchX.current;
if (Math.abs(dx) > 44) onNav(dx < 0 ? 1 : -1);
touchX.current = null;
};
return (