// Site header with active section tracking + scroll progress
const NAV = [
{ id: "hero", label: "Overview" },
{ id: "problem", label: "Problem" },
{ id: "scope", label: "Scope" },
{ id: "flow", label: "Workflow" },
{ id: "quickstart", label: "Quickstart" },
{ id: "capabilities", label: "Capabilities" },
{ id: "profiles", label: "Profiles" },
{ id: "states", label: "Evaluation" },
{ id: "differentiators", label: "Why" },
{ id: "examples", label: "Signals" },
{ id: "roadmap", label: "Roadmap" },
{ id: "architecture", label: "Repo" },
{ id: "cta", label: "Get started" },
];
function ScrollProgress() {
const [w, setW] = useState(0);
useEffect(() => {
const onScroll = () => {
const h = document.documentElement;
const total = h.scrollHeight - h.clientHeight;
setW(total > 0 ? (h.scrollTop / total) * 100 : 0);
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
);
}
function SiteHeader() {
const [open, setOpen] = useState(false);
const [active, setActive] = useState("hero");
useEffect(() => {
const ids = NAV.map((n) => n.id);
const els = ids
.map((id) => document.getElementById(id))
.filter(Boolean);
if (!els.length) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) setActive(e.target.id);
});
},
{ rootMargin: "-40% 0px -50% 0px", threshold: 0 }
);
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
return (
{open && (
{NAV.map((s) => (
))}
View on GitHub
)}
);
}
window.SiteHeader = SiteHeader;