// tweaks-app.jsx — Redthorn site tweaks // Exposes palette / density / hero tweaks via the TweaksPanel starter. const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "parchment", "density": "regular", "showMarquee": true, "navCta": "Order →", "heroTilt": true }/*EDITMODE-END*/; const PALETTE_OPTIONS = [ { id: 'parchment', label: 'Parchment', swatch: ['#ede5cf', '#6b1d14', '#43543a'] }, { id: 'forest', label: 'Forest', swatch: ['#1c2419', '#d4513a', '#9bb088'] }, { id: 'oxblood', label: 'Oxblood', swatch: ['#e8e0c8', '#5a1a14', '#2d3a26'] }, { id: 'bright', label: 'Bright', swatch: ['#faf8f1', '#a83a2a', '#5b7745'] }, ]; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // apply tweaks to data attrs / DOM React.useEffect(() => { document.body.dataset.palette = t.palette; document.body.dataset.density = t.density; }, [t.palette, t.density]); React.useEffect(() => { const m = document.querySelector('.marquee'); if (m) m.style.display = t.showMarquee ? '' : 'none'; }, [t.showMarquee]); React.useEffect(() => { const cta = document.querySelector('.nav-cta'); if (cta) cta.textContent = t.navCta; }, [t.navCta]); React.useEffect(() => { const photo = document.querySelector('.hero-photo'); const craft = document.querySelector('.craft-photo'); if (photo) photo.style.transform = t.heroTilt ? '' : 'rotate(0deg)'; if (craft) craft.style.transform = t.heroTilt ? '' : 'rotate(0deg)'; }, [t.heroTilt]); return (

{PALETTE_OPTIONS.map(opt => { const active = t.palette === opt.id; return ( ); })}

setTweak('density', v)} /> setTweak('heroTilt', v)} /> setTweak('showMarquee', v)} /> setTweak('navCta', v)} /> ); } ReactDOM.createRoot(document.getElementById('tweaks-root')).render();