// app.jsx — composition root with Tweaks integration const { useState, useEffect } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "pearl", "display": "cormorant", "heroIdx": 0, "heroScale": "regular", "showPedigree": true }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [bookingOpen, setBookingOpen] = useState(false); const [lookIdx, setLookIdx] = useState(null); // Apply palette + display via data attrs on useEffect(() => { document.documentElement.dataset.palette = t.palette; }, [t.palette]); useEffect(() => { document.documentElement.dataset.display = t.display; }, [t.display]); const openBooking = () => setBookingOpen(true); const closeBooking = () => setBookingOpen(false); const openLook = (look) => { const i = window.LOOKS.findIndex((l) => l.n === look.n); setLookIdx(i >= 0 ? i : 0); }; const closeLook = () => setLookIdx(null); const prevLook = () => setLookIdx((i) => (i === null ? null : (i - 1 + window.LOOKS.length) % window.LOOKS.length)); const nextLook = () => setLookIdx((i) => (i === null ? null : (i + 1) % window.LOOKS.length)); return ( <>