/* ============================================================ Tweaks panel — controls the live design tokens on . Renders only the panel; the page itself is plain HTML/CSS. ============================================================ */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "forest", "motion": "full" }/*EDITMODE-END*/; const THEMES = { forest: { name: "Forest & Clay", swatch: ["#2F4A37", "#C96F47", "#F6F1E7"] }, charcoal: { name: "Charcoal & Honey", swatch: ["#2B2924", "#C68F38", "#F4F1EC"] }, slate: { name: "Slate & Blush", swatch: ["#3A4654", "#BE8581", "#F1F1F4"] } }; function TweaksApp() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const root = document.documentElement; React.useEffect(() => { root.setAttribute("data-theme", t.theme); }, [t.theme]); React.useEffect(() => { root.setAttribute("data-motion", t.motion); root.style.setProperty("--reveal-dur", t.motion === "subtle" ? ".42s" : ".8s"); if (t.motion === "off" && window.__revealAll) window.__revealAll(); }, [t.motion]); return (

{Object.keys(THEMES).map((key) => { const th = THEMES[key]; const active = t.theme === key; return ( ); })}

setTweak("motion", v)} /> ); } ReactDOM.createRoot(document.getElementById("tweaks-root")).render();