// v2-ui.jsx — shared primitives for the luxury redesign const { useState: useUiState, useEffect: useUiEffect, useRef: useUiRef } = React; // ── Reveal — JS-driven entrance, settles to plain final styles ── // (capture/print-safe: after the animation window, transition is // removed entirely so static renderers always see the final state) function Reveal({ children, delay = 0, as = "div", style, className, auto = false }) { const ref = useUiRef(null); const [state, setState] = useUiState("hidden"); // hidden → shown → settled useUiEffect(() => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setState("settled"); return; } let revealed = false; let iv = null; const timers = []; const cleanup = () => { window.removeEventListener("scroll", check); window.removeEventListener("resize", check); if (iv) clearInterval(iv); }; const show = () => { if (revealed) return; revealed = true; cleanup(); setState("shown"); timers.push(setTimeout(() => setState("settled"), delay + 1400)); }; const check = () => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); if (r.top < window.innerHeight * 0.92 && r.bottom > 0) show(); }; if (auto) { timers.push(setTimeout(show, 30)); } else { check(); window.addEventListener("scroll", check, { passive: true }); window.addEventListener("resize", check); iv = setInterval(check, 700); } return () => {cleanup();timers.forEach(clearTimeout);}; }, []); const Tag = as; const hidden = state === "hidden"; const settled = state === "settled"; return ( ); } // ── Small-caps label ─────────────────────────────────────────── function Tag2({ children, tone = "dark", style }) { return ( {children}); } // ── Quiet text CTA — small caps + long arrow, underline grows ── function LineLink({ children, tone = "dark", onClick, style }) { return ( ); } // ── Gold CTA — the loud, magnetic one ─────────────────────── function GoldLink({ children, onClick, small = false, onLight = false, disabled = false, type = "button", style }) { return ( ); } // ── Boxed CTA — 1px hairline, slow ink fill ──────────────────── function BoxLink({ children, tone = "dark", onClick, style }) { return ( ); } // ── Architectural image placeholder ──────────────────────────── // Neutral, photographic gradients — awaiting the studio's real renders. const PLATE_VARIANTS = { dusk: `radial-gradient(ellipse 90% 70% at 75% 12%, rgba(214,178,140,.30) 0%, rgba(214,178,140,0) 55%), linear-gradient(178deg, rgba(255,255,255,.05) 0%, rgba(8,8,9,.6) 60%, rgba(5,5,6,.92) 100%), linear-gradient(180deg, #232126 0%, #0c0b0d 100%)`, noon: `radial-gradient(ellipse 80% 60% at 30% 18%, rgba(245,238,225,.5) 0%, rgba(245,238,225,0) 60%), linear-gradient(180deg, #b8b2a6 0%, #6f6a60 70%, #4a463f 100%)`, fog: `radial-gradient(ellipse 80% 55% at 60% 25%, rgba(225,228,232,.55) 0%, rgba(225,228,232,0) 60%), linear-gradient(180deg, #9aa0a8 0%, #5c6168 75%, #3c4046 100%)`, ember: `radial-gradient(ellipse 75% 60% at 22% 80%, rgba(196,120,66,.34) 0%, rgba(196,120,66,0) 60%), radial-gradient(ellipse 60% 45% at 80% 15%, rgba(255,214,170,.22) 0%, rgba(255,214,170,0) 55%), linear-gradient(180deg, #2a211c 0%, #100c0a 100%)`, night: `radial-gradient(ellipse 70% 55% at 70% 20%, rgba(170,190,215,.2) 0%, rgba(170,190,215,0) 55%), linear-gradient(180deg, #14171d 0%, #08090c 100%)` }; function Plate({ variant = "dusk", ratio = "4/5", tag, style, children }) { return (
{tag && {tag}} {children}
); } // ── Underline form field ─────────────────────────────────────── function Field2({ label, value, onChange, type = "text", multiline = false, tone = "light" }) { const [focus, setFocus] = useUiState(false); const up = focus || value && value.length > 0; return ( ); } // ── Checkbox — square hairline ───────────────────────────────── function Check2({ checked, onChange, children, tone = "light" }) { return ( ); } // ── Section index line: ( 01 ) STUDIO ─────────────────────── function IndexLine({ n, children, tone = "dark", style }) { return (
{n} {children}
); } // ── Lightbox ─────────────────────────────────────────────────── // Listens for window 'obx:open' CustomEvent { detail: { images:[id], index } } function Lightbox() { const [state, setState] = useUiState(null); // { images, index } | null useUiEffect(() => { const open = (e) => setState({ images: e.detail.images, index: e.detail.index || 0 }); window.addEventListener("obx:open", open); return () => window.removeEventListener("obx:open", open); }, []); useUiEffect(() => { if (!state) return; const onKey = (e) => { if (e.key === "Escape") setState(null);else if (e.key === "ArrowRight") setState((s) => ({ ...s, index: (s.index + 1) % s.images.length }));else if (e.key === "ArrowLeft") setState((s) => ({ ...s, index: (s.index - 1 + s.images.length) % s.images.length })); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => {window.removeEventListener("keydown", onKey);document.body.style.overflow = "";}; }, [state]); if (!state) return null; const { images, index } = state; const go = (d) => setState((s) => ({ ...s, index: (s.index + d + images.length) % images.length })); return (
setState(null)} role="dialog" aria-modal="true" aria-label="Image viewer"> {images.length > 1 && <> } e.stopPropagation()} /> {images.length > 1 && {String(index + 1).padStart(2, "0")} / {String(images.length).padStart(2, "0")} }
); } const openLightbox = (images, index = 0) => window.dispatchEvent(new CustomEvent("obx:open", { detail: { images, index } })); Object.assign(window, { Reveal, Tag2, LineLink, BoxLink, GoldLink, Plate, Field2, Check2, IndexLine, Lightbox, openLightbox, PLATE_VARIANTS });