/*
* OG Nails — Tweaks panel mount
* Three expressive controls that reshape the design:
* • Mood — palette: rose gold / mocha noir / bordeaux
* • Voice — type pairing: editorial / couture / bold
* • Photo — film treatment: natural / warm / hushed
*
* Each control sets a data-* attribute on ; CSS in the main file
* does the heavy lifting via attribute selectors.
*/
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mood": "rose",
"voice": "editorial",
"photo": "natural"
}/*EDITMODE-END*/;
function applyAttrs(t) {
const root = document.documentElement;
root.setAttribute('data-mood', t.mood);
root.setAttribute('data-voice', t.voice);
root.setAttribute('data-photo', t.photo);
}
// Apply once on first paint so the panel doesn't flash the default.
applyAttrs(TWEAK_DEFAULTS);
// Tiny preview swatches — three colours stacked, matches the palette feel.
function MoodSwatch({colors}) {
return (
{colors.map((c, i) => (
))}
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => { applyAttrs(t); }, [t.mood, t.voice, t.photo]);
return (
setTweak('mood', v)}
/>
setTweak('voice', v)}
/>
setTweak('photo', v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render();