// site-app.jsx — Composes the page + wires Tweaks panel.
function App() {
const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS__);
// Reflect every tweak onto so CSS does the work.
React.useEffect(() => {
const html = document.documentElement;
html.setAttribute('data-theme', t.theme);
html.setAttribute('data-display', t.display);
html.setAttribute('data-hero', t.hero);
html.setAttribute('data-accent', t.accent);
html.setAttribute('data-gradient', t.gradient);
}, [t.theme, t.display, t.hero, t.accent, t.gradient]);
// Accent color → CSS variable swap (brand-derived options)
React.useEffect(() => {
const root = document.documentElement;
const map = {
graphite: { warm: '#3F4348', cool: '#3F4348' }, // brand charcoal
orange: { warm: '#EE6A3C', cool: '#EE6A3C' }, // evening orange
blue: { warm: '#1A4DC9', cool: '#1A4DC9' }, // earth blue
magenta: { warm: '#B83ACA', cool: '#B83ACA' }, // evening magenta
prism: { warm: '#EE6A3C', cool: '#1A4DC9' }, // brand bookends
};
const pick = map[t.accent] || map.prism;
root.style.setProperty('--accent-warm', pick.warm);
root.style.setProperty('--accent-cool', pick.cool);
}, [t.accent]);
return (
setTweak('theme', v)}
/>
setTweak('display', v)}
/>
setTweak('hero', v)}
/>
{
const name = v === '#3F4348' ? 'graphite'
: v === '#EE6A3C' ? 'orange'
: v === '#1A4DC9' ? 'blue'
: v === '#B83ACA' ? 'magenta'
: 'prism';
setTweak('accent', name);
}}
/>
setTweak('gradient', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('root')).render();