/* global React */ const { useState, useEffect, useRef, useMemo, createContext, useContext } = React; /* ------------------------------------------------------------------ */ /* Kerai logo — uses the official wordmark SVG via CSS mask so it */ /* picks up the parent text color cleanly. */ /* ------------------------------------------------------------------ */ function KeraiMark({ size = 26, color = "currentColor" }) { // Logo aspect: 373.24 × 207.58; KERAI portion is ~70% of total height // so size (the visual scale of KERAI letters) ~= 0.7 of total height const totalHeight = size / 0.7; const totalWidth = totalHeight * (373.24 / 207.58); return ( ); } /* ------------------------------------------------------------------ */ /* Theme context — dark (deep brown) vs ivory */ /* ------------------------------------------------------------------ */ const ThemeCtx = createContext("dark"); const useTheme = () => useContext(ThemeCtx); const PALETTE = { brown: "#281c16", brownDeep: "#140d0b", brownSoft: "#3a2a21", ivory: "#f6f1ea", ivoryWarm: "#ede4d4", ivoryDeep: "#e7dccb", gold: "#968269", goldLight: "#b9a787", orange: "#e67725", grey: "#cecac8", white: "#ffffff", }; // Light: the brand's white and light grey with deep-brown type and flat // gold accents. Dark: deep brown with ivory type and lifted gold. function themeTokens(theme) { if (theme === "light" || theme === "ivory") { return { bg: PALETTE.white, bgSoft: "#f5f4f3", // light grey at ~20% on white bgDeep: "#ecebea", // light grey at ~40% on white fg: PALETTE.brown, fgMuted: "rgba(40,28,22,0.62)", fgFaint: "rgba(40,28,22,0.38)", line: "rgba(40,28,22,0.14)", gold: PALETTE.gold, goldLight: PALETTE.goldLight, orange: PALETTE.orange, placeholder: "rgba(40,28,22,0.05)", placeholderStripe: "rgba(40,28,22,0.09)", hover: "rgba(40,28,22,0.05)", subtle: "rgba(40,28,22,0.06)", subtleHover: "rgba(40,28,22,0.1)", shadow: "rgba(40,28,22,0.16)", glass: "rgba(255,255,255,0.62)", glassDense: "rgba(255,255,255,0.86)", swatchEdge: "rgba(40,28,22,0.22)", }; } return { bg: PALETTE.brown, bgSoft: "#2f211a", bgDeep: PALETTE.brownDeep, fg: PALETTE.ivory, fgMuted: "rgba(246,241,234,0.62)", fgFaint: "rgba(246,241,234,0.32)", line: "rgba(246,241,234,0.13)", gold: PALETTE.goldLight, goldLight: "#d2bf9c", orange: PALETTE.orange, placeholder: "rgba(246,241,234,0.04)", placeholderStripe: "rgba(246,241,234,0.08)", hover: "rgba(246,241,234,0.06)", subtle: "rgba(246,241,234,0.08)", subtleHover: "rgba(246,241,234,0.12)", shadow: "rgba(0,0,0,0.55)", glass: "rgba(40,28,22,0.55)", glassDense: "rgba(40,28,22,0.84)", swatchEdge: "transparent", }; } /* ------------------------------------------------------------------ */ /* Type scale. Two families only: Elysian for names, prices and */ /* headings; Season Sans for everything else. Nothing on the kiosk is */ /* set below 24px, which reads from a standing or seated position. */ /* ------------------------------------------------------------------ */ const SANS = "'Season Sans', 'Arial', sans-serif"; const SERIF = "'Elysian', 'Times New Roman', serif"; const TYPE = { min: 24, // Uppercase labels: eyebrows, section labels, buttons. label: { fontFamily: SANS, fontSize: 24, fontWeight: 400, letterSpacing: "0.16em", textTransform: "uppercase", lineHeight: 1.2 }, // Sentence-case controls: filter choices, option names. control: { fontFamily: SANS, fontSize: 26, fontWeight: 400, letterSpacing: "0.01em", lineHeight: 1.2 }, small: { fontFamily: SANS, fontSize: 24, fontWeight: 300, letterSpacing: "0.01em", lineHeight: 1.45 }, body: { fontFamily: SANS, fontSize: 28, fontWeight: 300, letterSpacing: "0.01em", lineHeight: 1.5 }, }; function Display({ children, size = 96, weight = 400, style = {}, as: As = "h1" }) { return ( {children} ); } function Eyebrow({ children, style = {} }) { return
{children}
; } function Body({ children, size = 28, style = {}, muted = false }) { return (

{children}

); } /* ------------------------------------------------------------------ */ /* Hairline divider */ /* ------------------------------------------------------------------ */ function Hairline({ color, style = {} }) { const t = themeTokens(useTheme()); return (
); } /* ------------------------------------------------------------------ */ /* Primary CTA — large, generous tap target, gold underline accent */ /* ------------------------------------------------------------------ */ function PrimaryButton({ children, onClick, fullWidth = true, variant = "fill", disabled = false, dense = false, ariaLabel }) { const theme = useTheme(); const t = themeTokens(theme); const [hoverRaw, setHover] = useState(false); const hover = hoverRaw && !disabled; const fillBg = t.fg; const fillFg = t.bg; // Auto-prepend a back-arrow if the label starts with "Back". // The editor environment wraps text children in s so we have // to extract the textual content from React children rather than // checking `typeof children === "string"`. const extractText = (node) => { if (node == null || typeof node === "boolean") return ""; if (typeof node === "string" || typeof node === "number") return String(node); if (Array.isArray(node)) return node.map(extractText).join(""); if (typeof node === "object" && node.props) return extractText(node.props.children); return ""; }; const labelText = extractText(children).trim(); const isBack = /^back/i.test(labelText); // Use an SVG arrow so we get exact vertical centering — the unicode // "←" character sits awkwardly above its font baseline in Arial. const BackArrow = ( ); if (variant === "ghost") { return ( ); } return ( ); } /* ------------------------------------------------------------------ */ /* Choice — one tap selects. The selected choice is outlined in */ /* orange, so it is never mistaken for the primary button. */ /* ------------------------------------------------------------------ */ function Choice({ selected = false, disabled = false, onClick, children, ariaLabel, style = {} }) { const t = themeTokens(useTheme()); return ( ); } /* ------------------------------------------------------------------ */ /* Sheet — the one modal surface. Rises from the bottom so its content */ /* and its close control sit in easy reach; tapping outside closes it. */ /* ------------------------------------------------------------------ */ const SHEET_EASE = "cubic-bezier(.22,.7,.2,1)"; const SHEET_FOOT_H = 200; function Sheet({ open, onClose, eyebrow, title, children, closeLabel = "Close", maxHeight = 1640, footer = null, ariaLabel }) { const t = themeTokens(useTheme()); const reduced = useReducedMotion(); const [mounted, setMounted] = useState(open); const [shown, setShown] = useState(false); useEffect(() => { if (open) { setMounted(true); const id = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true))); return () => cancelAnimationFrame(id); } setShown(false); const id = setTimeout(() => setMounted(false), reduced ? 0 : 420); return () => clearTimeout(id); }, [open]); if (!mounted) return null; const dur = reduced ? "0s" : "0.55s"; return (
{(eyebrow || title) && (
{eyebrow && {eyebrow}} {title && {title}}
)}
{children}
{/* Glass, so the content scrolling behind shows there is more. */}
{footer}
{closeLabel}
); } /* QR code drawn from its text. Dark modules on an ivory plate with a quiet zone, which phone cameras read at arm's length. */ function QrCode({ text, size = 300, label }) { const shape = React.useMemo(() => { if (!window.qrcode || !text) return null; const qr = window.qrcode(0, "M"); qr.addData(text); qr.make(); const n = qr.getModuleCount(); let d = ""; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (qr.isDark(r, c)) d += `M${c} ${r}h1v1h-1z`; return { n, d }; }, [text]); return (
{shape && ( )}
); } /* WhatsApp mark, one colour so it takes the button's ink. */ function WhatsAppGlyph({ size = 30 }) { return ( ); } /* ------------------------------------------------------------------ */ /* Subtle progress / step indicator */ /* ------------------------------------------------------------------ */ function StepDots({ total, current }) { const t = themeTokens(useTheme()); const HIGHLIGHT = "#e67725"; return (
{Array.from({ length: total }).map((_, i) => { const active = i === current; return (
); })}
); } /* ------------------------------------------------------------------ */ /* Frame — every screen is rendered inside this 1080x1920 frame. */ /* Bottom dock has been removed — each screen owns its own bottom */ /* shelf with its action buttons (Back lives in those shelves). */ /* ------------------------------------------------------------------ */ const DOCK_HEIGHT = 0; function ScreenFrame({ theme, children }) { const t = themeTokens(theme); return (
{/* Content layer */}
{children}
); } /* ------------------------------------------------------------------ */ /* TopBar — shared header (wordmark or screen title). */ /* ------------------------------------------------------------------ */ function TopBar({ title, right, left }) { const t = themeTokens(useTheme()); return (
{left}
{title ? ( {title} ) : ( )}
{right}
); } /* ------------------------------------------------------------------ */ /* ImageSlot wrapper */ /* (Falls back to a tinted placeholder if no image dropped yet) */ /* ------------------------------------------------------------------ */ function HeroImage({ id, placeholder, src, fit = "cover", width = "100%", height = "100%", shape = "rect", radius = 0, style = {}, initialOrbit, tilt = -22, studio = false, metalColor, fallbackSrc, onInteract, imgStyle = {} }) { const t = themeTokens(useTheme()); const mvRef = useRef(null); const [modelFailed, setModelFailed] = useState(false); const isModel = !!src && /\.(glb|gltf)$/i.test(src) && !modelFailed; // Colour the model's metal from the selected metal. Stone materials // are left alone. useEffect(() => { const el = mvRef.current; if (!isModel || !el || !metalColor) return; const apply = () => { const materials = (el.model && el.model.materials) || []; materials .filter((m) => !/diamond|stone|gem/i.test(m.name || "")) .forEach(async (m) => { try { if (m.ensureLoaded) await m.ensureLoaded(); m.pbrMetallicRoughness.setBaseColorFactor([...metalColor, 1]); } catch {} }); }; if (el.loaded) apply(); el.addEventListener("load", apply); return () => el.removeEventListener("load", apply); }, [isModel, metalColor && metalColor.join(",")]); useEffect(() => { const el = mvRef.current; if (!isModel || !el) return; const fail = () => setModelFailed(true); el.addEventListener("error", fail); return () => el.removeEventListener("error", fail); }, [isModel]); // 3D model branch — render when src is a .glb/.gltf. // No upload UI; auto-rotates with soft shadows. // `tilt` rotates the host so the spin axis reads diagonal on screen. // `studio` swaps in a jewellery lighting setup: a bright HDR so the // stones catch highlights, a little extra exposure, and a slow orbit. // `initialOrbit` (if provided) starts the auto-rotation from a // specific angle so navigations between screens feel continuous. // If the model fails to load, `fallbackSrc` is shown instead. if (modelFailed && fallbackSrc) { src = fallbackSrc; fit = "contain"; } if (isModel) { const mv = studio ? { "environment-image": "https://modelviewer.dev/shared-assets/environments/lightroom_14b.hdr", exposure: "1.1", "shadow-intensity": "0.5", "shadow-softness": "1", "rotation-per-second": "10deg", "camera-orbit": initialOrbit || "0deg 38deg 68%", "camera-target": "0m 0m 0m", "min-camera-orbit": "auto 20deg 55%", "max-camera-orbit": "auto 70deg 110%", "field-of-view": "24deg", "tone-mapping": "aces", } : { "environment-image": "neutral", exposure: "1", "shadow-intensity": "1", "shadow-softness": "0.8", "rotation-per-second": "20deg", "camera-orbit": initialOrbit || "0deg 80deg auto", "field-of-view": "30deg", }; return (
{React.createElement("model-viewer", { ref: mvRef, src, "camera-controls": true, "auto-rotate": true, "auto-rotate-delay": studio ? "3000" : "0", "interaction-prompt": "none", "disable-zoom": studio ? true : undefined, ...mv, style: { width: "100%", height: "100%", background: "transparent", "--poster-color": "transparent", }, })}
); } // When an explicit image src is supplied, render a plain — no upload UI, // no drag/drop affordance. (Falls back to for any slot // without a default image so wholesale placeholders still show.) if (src) { return (
); } const attrs = { id, placeholder, shape, radius: String(radius), fit, style: { width: "100%", height: "100%", display: "block", "--bg": t.placeholder, "--stripe": t.placeholderStripe, "--fg": t.fgMuted, }, }; return (
{React.createElement("image-slot", attrs)}
); } function useReducedMotion() { const query = "(prefers-reduced-motion: reduce)"; const [reduced, setReduced] = useState(() => window.matchMedia && window.matchMedia(query).matches); useEffect(() => { if (!window.matchMedia) return; const mq = window.matchMedia(query); const onChange = () => setReduced(mq.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduced; } /* Make components globally available */ Object.assign(window, { useReducedMotion, TYPE, SANS, SERIF, Choice, Sheet, QrCode, WhatsAppGlyph, KeraiMark, ThemeCtx, useTheme, PALETTE, themeTokens, Display, Eyebrow, Body, Hairline, PrimaryButton, StepDots, ScreenFrame, TopBar, HeroImage, DOCK_HEIGHT, });