/* tweaks-app.jsx — Tweaks island for SUNNY'S DINER
Controls hero variant + accent color. Applies to via data-attrs / CSS vars. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"hero": "neon",
"accent": "teal"
}/*EDITMODE-END*/;
const ACCENTS = {
teal: { main:"#1EB3B8", deep:"#0E8A8F" },
mustard: { main:"#F4B41A", deep:"#E89C0E" },
cherry: { main:"#D7263D", deep:"#A31621" },
grape: { main:"#7A5AE0", deep:"#5E3B8C" }
};
const HERO_LABELS = {
neon: "ネオン夜",
sunset: "サンセット",
interior: "店内"
};
function TweaksApp(){
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(function(){
document.body.dataset.hero = t.hero;
}, [t.hero]);
React.useEffect(function(){
const a = ACCENTS[t.accent] || ACCENTS.teal;
document.documentElement.style.setProperty('--accent', a.main);
document.documentElement.style.setProperty('--accent-deep', a.deep);
document.body.dataset.accent = t.accent;
}, [t.accent]);
return (
setTweak('hero', v)} />
{
const key = Object.keys(ACCENTS).find(k => ACCENTS[k].main === hex) || 'teal';
setTweak('accent', key);
}} />
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();