// app.jsx — Cata Haus tweaks panel
// Drives data-attributes on + a CSS variable for marquee speed.
const { useEffect } = React;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweak values to data-attrs + CSS vars on every change.
useEffect(() => {
const r = document.documentElement;
r.setAttribute('data-palette', t.palette);
r.setAttribute('data-display-font', t.displayFont);
r.setAttribute('data-mode', t.dark ? 'dark' : 'light');
r.setAttribute('data-hero', t.heroLayout);
r.setAttribute('data-phone', t.phoneColor);
r.style.setProperty('--marquee-duration', `${t.marqueeSpeed}s`);
r.style.setProperty('--wordmark-scale', t.wordmarkScale);
const wm = document.getElementById('wordmark-text');
if (wm && wm.textContent !== t.wordmarkText) wm.textContent = t.wordmarkText;
}, [t.palette, t.displayFont, t.dark, t.heroLayout, t.phoneColor, t.marqueeSpeed, t.wordmarkScale, t.wordmarkText]);
return (
setTweak('palette', v)}
/>
setTweak('dark', v)} />
setTweak('displayFont', v)}
/>
setTweak('wordmarkText', v)}
/>
setTweak('wordmarkScale', v)}
/>
setTweak('heroLayout', v)}
/>
setTweak('phoneColor', v)}
/>
setTweak('marqueeSpeed', v)}
/>
);
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();