// app-tweaks.jsx — Tweaks UI for O! Fryzjer redesign demo
// Three expressive controls that reshape the WHOLE feel of the page:
// • Paleta — full color palette swap (terracotta / olive / plum)
// • Nastrój — typography + density + radius mood (warm / editorial / modern)
// • Hero — layout variant (magazine / split / fullbleed)
//
// State is written to data-attrs on , which the CSS in styles.css
// keys all variables off. Persists across reload via the EDITMODE block.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "terracotta",
"mood": "warm",
"hero": "magazine"
}/*EDITMODE-END*/;
// Apply tweak state to BEFORE React mounts so the first paint already
// matches — no flash-of-default-style on reload.
(function applyEarly() {
const html = document.documentElement;
html.setAttribute('data-palette', TWEAK_DEFAULTS.palette);
html.setAttribute('data-mood', TWEAK_DEFAULTS.mood);
html.setAttribute('data-hero', TWEAK_DEFAULTS.hero);
})();
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Sync data-attrs whenever a tweak changes.
React.useEffect(() => { document.documentElement.setAttribute('data-palette', t.palette); }, [t.palette]);
React.useEffect(() => { document.documentElement.setAttribute('data-mood', t.mood); }, [t.mood]);
React.useEffect(() => { document.documentElement.setAttribute('data-hero', t.hero); }, [t.hero]);
return (
{
const map = {
'#a64a26': 'terracotta',
'#4f5d30': 'olive',
'#7d2a48': 'plum',
};
setTweak('palette', map[arr[0]] || 'terracotta');
}}
/>
setTweak('mood', v)}
/>
setTweak('hero', v)}
/>
);
}
// Mount into its own root so it doesn't touch any static markup.
const tweakRoot = document.createElement('div');
tweakRoot.id = 'tweaks-root';
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render();