{Object.entries(THEMES).map(([key, th]) => {
const on = key === value;
return (
);
})}
);
}
function App() {
const [route, setRoute] = useState(parseHash);
const [demoOpen, setDemoOpen] = useState(false);
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Routing
useEffect(() => {
const on = () => { setRoute(parseHash()); window.scrollTo(0, 0); };
window.addEventListener("hashchange", on);
return () => window.removeEventListener("hashchange", on);
}, []);
// Theme / tweaks
useEffect(() => { applyTheme(t); }, [t.theme, t.typo, t.nav, t.hero, t.heroBg, t.reveals, t.grain, t.grainIntensity]);
// Reveal-on-scroll: re-observe after each route render
useEffect(() => {
const els = document.querySelectorAll(".reveal:not(.visible)");
if (document.body.classList.contains("no-reveal")) {
els.forEach((el) => el.classList.add("visible"));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("visible"); io.unobserve(e.target); } });
}, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, [route, t.reveals]);
// Redraw lucide icons after route change (new DOM)
useEffect(() => { if (window.lucide) { try { window.lucide.createIcons({ nameAttr: "data-lucide" }); } catch (e) {} } }, [route, demoOpen]);
const openDemo = useCallback(() => setDemoOpen(true), []);
const closeDemo = useCallback(() => setDemoOpen(false), []);
const Page = ROUTES[route] || HomePage;
return (