// app.jsx — root, routing, tweaks const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "clay", "heroIntensity": "lively", "density": "regular" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = React.useState('home'); const [cart, setCart] = React.useState([]); const [inquireRug, setInquireRug] = React.useState(null); const [flash, setFlash] = React.useState(null); // Apply palette + density to React.useEffect(() => { document.body.dataset.palette = t.palette; document.body.dataset.density = t.density; // hero speed const speedMap = { off:0, calm:0.55, lively:1, eager:1.7 }; document.documentElement.style.setProperty('--hero-speed', speedMap[t.heroIntensity] ?? 1); }, [t.palette, t.density, t.heroIntensity]); const go = (r) => { setRoute(r); window.scrollTo({ top:0, behavior:'instant' }); }; const openInquire = (r) => setInquireRug(r); const addToCart = (item) => { setCart(c => { const existing = c.find(i => i.key === item.key); if (existing) return c.map(i => i.key === item.key ? { ...i, qty: i.qty + 1 } : i); return [...c, item]; }); setFlash(`Reserved: ${item.name}${item.italic ? ' · ' + item.italic : ''}, ${item.size}`); }; const screens = { home: , browse: , pdp: , shop: , cart: , checkout:, }; return ( <>