/* global React, ReactDOM */
// Mounts the Tweaks panel for the Swapps Home page.
// Reads window.TWEAK_DEFAULTS (set inline in index.html with EDITMODE markers),
// and syncs each value to `data-*` attributes on so the override CSS
// in #tweaks-overrides re-skins the entire page.
(() => {
const { useTweaks, TweaksPanel, TweakSection, TweakRadio } = window;
const defaults = window.TWEAK_DEFAULTS;
if (!defaults || !TweaksPanel) return;
function applyToDOM(t) {
const r = document.documentElement;
r.dataset.palette = t.palette;
r.dataset.shape = t.shape;
r.dataset.voice = t.voice;
}
function TweaksApp() {
const [t, setTweak] = useTweaks(defaults);
React.useEffect(() => { applyToDOM(t); }, [t.palette, t.shape, t.voice]);
return (
setTweak('palette', v)}
/>
setTweak('shape', v)}
/>
setTweak('voice', v)}
/>
);
}
// Apply defaults immediately for first paint (the useEffect runs after mount).
applyToDOM(defaults);
// Mount into its own root so it never re-renders the page tree.
const host = document.getElementById('tweaks-root');
if (host) {
ReactDOM.createRoot(host).render();
}
})();