// ───────────────────────────────────────────────────────────
// App: compose nav + hero + sections + modal + tweaks
// ───────────────────────────────────────────────────────────
function Nav() {
return (
);
}
function App() {
const [tk, update, tweaksVisible] = useTweaks(window.TWEAK_DEFAULTS);
const [openId, setOpenId] = React.useState(null);
// apply theme + accent to
React.useEffect(() => {
const r = document.documentElement;
r.dataset.theme = tk.theme;
r.style.setProperty('--accent-hue', tk.accentHue);
}, [tk.theme, tk.accentHue]);
const navProject = React.useCallback((dir) => {
setOpenId(cur => {
const idx = PROJECTS.findIndex(p => p.id === cur);
const next = (idx + dir + PROJECTS.length) % PROJECTS.length;
return PROJECTS[next].id;
});
}, []);
return (
<>
{tk.showStats && (
)}
{tk.showWorkshop && (
)}
{openId && (
setOpenId(null)} onNav={navProject} />
)}
{tweaksVisible && }
);
}
ReactDOM.createRoot(document.getElementById('root')).render();