/* Tweaks app — theming controls only. Mutates data-* attrs on . */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "accent": "cyan", "density": "comfortable", "decor": "none" }/*EDITMODE-END*/; function TweaksApp() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); React.useEffect(() => { const root = document.documentElement; root.setAttribute('data-theme', t.theme); root.setAttribute('data-accent', t.accent); root.setAttribute('data-density', t.density); root.setAttribute('data-decor', t.decor); }, [t.theme, t.accent, t.density, t.decor]); return ( setTweak('theme', v)} />

Accent{t.accent}

{[ { v: 'cyan', c: '#007CA8' }, { v: 'red', c: '#B81212' }, { v: 'amber', c: '#C66F00' }, { v: 'purple', c: '#502078' }, { v: 'ink', c: '#1A1A1A' } ].map(o => (

setTweak('density', v)} /> setTweak('decor', v)} /> ); } // Mount into a dedicated div so we don't touch the main page DOM. const _twkRoot = document.createElement('div'); document.body.appendChild(_twkRoot); ReactDOM.createRoot(_twkRoot).render();