/* ===================================================================
TWEAKS — bridges panel controls to the design via attributes
=================================================================== */
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "olive",
"font": "helvetica",
"sidebar": "light"
}/*EDITMODE-END*/;
function TweaksApp() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useEffect(() => {
const r = document.documentElement;
r.setAttribute('data-accent', t.accent);
r.setAttribute('data-font', t.font);
r.setAttribute('data-side', t.sidebar);
}, [t.accent, t.font, t.sidebar]);
return (
setTweak('accent', v)}
/>
setTweak('sidebar', v)}
/>
setTweak('font', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();