/* Tweaks app for Home — three expressive controls that reshape the feel.
Effects are applied as data-attributes on ; assets/tweaks-fx.css
does the heavy lifting so the whole vanilla page responds. */
const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"mood": "terracotta",
"motion": "lively",
"texture": "subtle"
}/*EDITMODE-END*/;
function HomeTweaks(){
const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);
React.useEffect(()=>{
const r = document.documentElement;
r.dataset.mood = t.mood;
r.dataset.motion = t.motion;
r.dataset.texture = t.texture;
}, [t.mood, t.motion, t.texture]);
return (
MOOD_SWATCH[m])}
onChange={(v)=>{ const m = MOOD_ORDER.find(k=>MOOD_SWATCH[k]===v) || 'terracotta'; setTweak('mood', m); }} />
setTweak('motion', v)} />
setTweak('texture', v)} />
);
}
const MOOD_ORDER = ['terracotta','olive','plum','indigo'];
const MOOD_SWATCH = {
terracotta:'#B5623C', olive:'#6F7A3C', plum:'#9A4E6B', indigo:'#46618A'
};
(function mount(){
const el = document.getElementById('tweaks-root');
if(!el || !window.useTweaks){ return setTimeout(mount, 60); }
ReactDOM.createRoot(el).render();
})();