/* Phở You — Tweaks panel.
Drives theme / type / accent via data-attrs. The page itself is
plain HTML; this island only toggles presentation. Defaults match the brief. */
const PY_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "Broth cream",
"headline": "Italic",
"accents": true,
"grain": true
}/*EDITMODE-END*/;
const PY_THEME_MAP = { "Broth cream": "broth", "Night service": "night" };
const PY_TYPE_MAP = { "Italic": "italic", "Upright": "upright" };
function PhoTweaks() {
const [t, setTweak] = useTweaks(PY_DEFAULTS);
React.useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-theme', PY_THEME_MAP[t.theme] || 'broth');
root.setAttribute('data-type', PY_TYPE_MAP[t.headline] || 'italic');
root.setAttribute('data-accent', t.accents ? 'on' : 'off');
if (t.grain) root.style.removeProperty('--grain');
else root.style.setProperty('--grain', '0');
}, [t.theme, t.headline, t.accents, t.grain]);
return (
setTweak('theme', v)}
/>
setTweak('accents', v)}
/>
setTweak('headline', v)}
/>
setTweak('grain', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();