@nendlabs/docpage 0.1.1 → 0.1.3

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/components/api-tabs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "../cn";
+import { CodeBlock } from "./code-block";
+function getInitialTabId(tabs, defaultTabId) {
+    if (defaultTabId && tabs.some((tab) => tab.id === defaultTabId)) {
+        return defaultTabId;
+    }
+    return tabs[0]?.id ?? "";
+}
+function getTabLabel(tab) {
+    if (tab.label)
+        return tab.label;
+    return tab.id.toUpperCase();
+}
+export function ApiTabs({ tabs, defaultTabId, className }) {
+    const [activeId, setActiveId] = useState(() => getInitialTabId(tabs, defaultTabId));
+    const activeTab = useMemo(() => {
+        return tabs.find((tab) => tab.id === activeId) ?? tabs[0];
+    }, [tabs, activeId]);
+    if (!activeTab)
+        return null;
+    return (_jsxs("div", { className: cn("docpage-api space-y-3", className), children: [_jsx("div", { className: "inline-flex rounded border border-border/80 bg-background/60 p-1", children: tabs.map((tab) => {
+                    const isActive = activeTab.id === tab.id;
+                    return (_jsx("button", { type: "button", onClick: () => setActiveId(tab.id), className: cn("rounded px-3 py-1 text-[11px] font-semibold tracking-[0.12em] transition-colors", isActive
+                            ? "bg-foreground text-background"
+                            : "text-muted-foreground hover:text-foreground"), "aria-pressed": isActive, "data-docpage-tab": tab.id, children: getTabLabel(tab) }, tab.id));
+                }) }), _jsx(CodeBlock, { code: activeTab.code, language: activeTab.language ?? activeTab.id, preClassName: "text-xs" })] }));
+}

package/dist/components/code-block.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import hljs from "highlight.js/lib/core";
+import bash from "highlight.js/lib/languages/bash";
+import diff from "highlight.js/lib/languages/diff";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+import typescript from "highlight.js/lib/languages/typescript";
+import yaml from "highlight.js/lib/languages/yaml";
+import { useEffect, useMemo, useRef } from "react";
+import { cn } from "../cn";
+let registered = false;
+function registerLanguagesOnce() {
+    if (registered)
+        return;
+    hljs.registerLanguage("bash", bash);
+    hljs.registerLanguage("sh", bash);
+    hljs.registerLanguage("shell", bash);
+    hljs.registerLanguage("diff", diff);
+    hljs.registerLanguage("javascript", javascript);
+    hljs.registerLanguage("js", javascript);
+    hljs.registerLanguage("typescript", typescript);
+    hljs.registerLanguage("ts", typescript);
+    hljs.registerLanguage("json", json);
+    hljs.registerLanguage("yaml", yaml);
+    hljs.registerLanguage("yml", yaml);
+    registered = true;
+}
+export function CodeBlock({ code, language, caption, className, preClassName, codeClassName, }) {
+    const codeRef = useRef(null);
+    const languageClass = useMemo(() => {
+        if (!language)
+            return undefined;
+        return language.startsWith("language-") ? language : `language-${language}`;
+    }, [language]);
+    useEffect(() => {
+        registerLanguagesOnce();
+        const el = codeRef.current;
+        if (!el)
+            return;
+        try {
+            if (el.dataset.highlighted) {
+                delete el.dataset.highlighted;
+            }
+            hljs.highlightElement(el);
+        }
+        catch (error) {
+            if (import.meta.env?.DEV) {
+                console.error("docpage: highlight.js failed", error);
+            }
+        }
+    }, [code, languageClass]);
+    return (_jsxs("figure", { className: cn("docpage-code", className), children: [_jsx("pre", { className: cn("bg-muted/40 overflow-x-auto whitespace-pre-wrap rounded p-3 text-xs leading-6", preClassName), children: _jsx("code", { ref: codeRef, className: cn("hljs", languageClass, codeClassName), children: code }) }), caption ? (_jsx("figcaption", { className: "mt-2 text-xs text-muted-foreground", children: caption })) : null] }));
+}

package/dist/components/mermaid.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from "react";
+export function Mermaid({ chart }) {
+    const ref = useRef(null);
+    const ridRaw = useId();
+    const rid = ridRaw.replace(/:/g, "");
+    useEffect(() => {
+        let cancelled = false;
+        const mql = typeof window !== "undefined" && window.matchMedia
+            ? window.matchMedia("(prefers-color-scheme: dark)")
+            : null;
+        async function render() {
+            try {
+                const mermaid = (await import("mermaid")).default;
+                const theme = mql?.matches ? "dark" : "default";
+                mermaid.initialize({ startOnLoad: false, theme });
+                const { svg } = await mermaid.render(`mmd-${rid}`, chart);
+                if (!cancelled && ref.current) {
+                    ref.current.innerHTML = svg;
+                }
+            }
+            catch (error) {
+                if (ref.current) {
+                    const safeChart = chart.replaceAll("<", "&lt;");
+                    ref.current.innerHTML = `<pre class="text-xs p-3 rounded bg-muted/40 overflow-x-auto">${safeChart}</pre>`;
+                }
+                if (import.meta.env?.DEV) {
+                    console.error("docpage: failed to render mermaid", error);
+                }
+            }
+        }
+        void render();
+        const onChange = () => {
+            if (!cancelled)
+                void render();
+        };
+        mql?.addEventListener?.("change", onChange);
+        return () => {
+            cancelled = true;
+            mql?.removeEventListener?.("change", onChange);
+        };
+    }, [chart, rid]);
+    return _jsx("div", { ref: ref, "data-docpage-mermaid": true });
+}

package/dist/docpage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"docpage.d.ts","sourceRoot":"","sources":["../src/docpage.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAKV,YAAY,EAIb,MAAM,SAAS,CAAC;AA6OjB,KAAK,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAiBF,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,2CAmBjD;AAqPD,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,YAAY,2CAiD1D"}
+{"version":3,"file":"docpage.d.ts","sourceRoot":"","sources":["../src/docpage.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAKV,YAAY,EAIb,MAAM,SAAS,CAAC;AA6OjB,KAAK,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAiBF,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,2CAmBjD;AA0PD,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,YAAY,2CAqD1D"}

package/dist/docpage.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRight } from "lucide-react";
+import { Children, isValidElement, useEffect, useMemo, useState, } from "react";
+import { MDXProvider } from "@mdx-js/react";
+import { cn } from "./cn";
+import { ApiTabs } from "./components/api-tabs";
+import { CodeBlock } from "./components/code-block";
+import { Mermaid } from "./components/mermaid";
+import { useActiveScrollSectionIds } from "./hooks/use-active-scroll-section-ids";
+import { useColorScheme } from "./hooks/use-color-scheme";
+const TOKEN_VAR_MAP = {
+    background: "background",
+    foreground: "foreground",
+    card: "card",
+    cardForeground: "card-foreground",
+    popover: "popover",
+    popoverForeground: "popover-foreground",
+    primary: "primary",
+    primaryForeground: "primary-foreground",
+    secondary: "secondary",
+    secondaryForeground: "secondary-foreground",
+    muted: "muted",
+    mutedForeground: "muted-foreground",
+    accent: "accent",
+    accentForeground: "accent-foreground",
+    destructive: "destructive",
+    destructiveForeground: "destructive-foreground",
+    border: "border",
+    input: "input",
+    ring: "ring",
+    chart1: "chart-1",
+    chart2: "chart-2",
+    chart3: "chart-3",
+    chart4: "chart-4",
+    chart5: "chart-5",
+    radius: "radius",
+};
+function setTokenVars(style, tokens, scheme) {
+    if (!tokens)
+        return;
+    Object.keys(tokens).forEach((key) => {
+        const value = tokens[key];
+        if (!value)
+            return;
+        const varKey = TOKEN_VAR_MAP[key];
+        style[`--docpage-${varKey}-${scheme}`] = value;
+    });
+}
+function themeToStyle(config) {
+    const style = {};
+    setTokenVars(style, config.theme?.light, "light");
+    setTokenVars(style, config.theme?.dark, "dark");
+    return style;
+}
+function startCaseId(id) {
+    const withSpaces = id.replace(/[-_]/g, " ").trim();
+    if (!withSpaces)
+        return id;
+    return withSpaces.replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function deriveToc(config) {
+    if (config.toc && config.toc.length > 0)
+        return config.toc;
+    return config.sections.map((section) => {
+        const labelFromTitle = typeof section.title === "string" ? section.title : undefined;
+        return {
+            id: section.id,
+            label: section.label ?? labelFromTitle ?? startCaseId(section.id),
+        };
+    });
+}
+function useIsWide(minWidthPx) {
+    const [isWide, setIsWide] = useState(() => {
+        if (typeof window === "undefined" || !window.matchMedia)
+            return true;
+        return window.matchMedia(`(min-width: ${minWidthPx}px)`).matches;
+    });
+    useEffect(() => {
+        if (!window.matchMedia)
+            return;
+        const mql = window.matchMedia(`(min-width: ${minWidthPx}px)`);
+        const update = (event) => {
+            if (event) {
+                setIsWide(event.matches);
+                return;
+            }
+            setIsWide(mql.matches);
+        };
+        update();
+        mql.addEventListener?.("change", update);
+        return () => mql.removeEventListener?.("change", update);
+    }, [minWidthPx]);
+    return isWide;
+}
+function Container({ children }) {
+    return (_jsx("div", { className: "mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8", children: children }));
+}
+function Prose({ children }) {
+    return (_jsx("div", { className: cn("docpage-prose mx-auto max-w-3xl text-base leading-7 text-foreground/80", "[&>section>h2]:text-foreground [&_p]:text-foreground/80 [&_li]:text-foreground/80", "[&>section>h2]:mb-6 [&>section>h2]:text-2xl [&>section>h2]:font-semibold [&>section>h2]:tracking-tight", "[&>section>p]:my-4 [&_code]:font-mono [&_code]:text-[0.85em]", "[&_pre]:rounded [&_pre]:p-0 [&_pre]:text-xs [&_pre]:leading-6"), children: children }));
+}
+function getCalloutToneClasses(tone) {
+    switch (tone) {
+        case "info":
+            return "border-primary/30 bg-primary/5";
+        case "warn":
+            return "border-amber-500/40 bg-amber-500/10";
+        case "danger":
+            return "border-destructive/50 bg-destructive/10";
+        case "neutral":
+        default:
+            return "border-border/70 bg-muted/20";
+    }
+}
+function renderBlock(block) {
+    switch (block.kind) {
+        case "p":
+            return _jsx("p", { className: "my-4", children: block.text });
+        case "ul":
+            return (_jsx("ul", { className: "marker:text-muted-foreground list-disc pl-6", children: block.items.map((item, index) => (_jsx("li", { className: "my-2", children: item }, index))) }));
+        case "ol":
+            return (_jsx("ol", { className: "marker:text-muted-foreground list-decimal pl-6", children: block.items.map((item, index) => (_jsx("li", { className: "my-2", children: item }, index))) }));
+        case "labeled-list":
+            return (_jsx("ul", { className: "marker:text-muted-foreground list-disc pl-6", children: block.items.map((item, index) => (_jsxs("li", { className: "my-2", children: [_jsxs("strong", { children: [item.label, ":"] }), " ", item.text] }, index))) }));
+        case "code":
+            return (_jsx("div", { className: "my-6", children: _jsx(CodeBlock, { code: block.code, language: block.language, caption: block.caption }) }));
+        case "pre":
+            return (_jsx("pre", { className: "bg-muted/40 my-6 whitespace-pre-wrap rounded p-3 text-xs", children: block.code }));
+        case "mermaid":
+            return (_jsxs("figure", { className: "my-6", children: [_jsx("div", { className: "bg-background rounded border border-border/80 p-4", children: _jsx(Mermaid, { chart: block.chart }) }), block.caption ? (_jsx("figcaption", { className: "mt-2 text-xs text-muted-foreground", children: block.caption })) : null] }));
+        case "callout":
+            return (_jsxs("div", { className: cn("my-6 rounded-lg border p-4", getCalloutToneClasses(block.tone)), children: [block.title ? (_jsx("div", { className: "text-sm font-semibold text-foreground", children: block.title })) : null, _jsx("div", { className: cn("text-sm leading-relaxed", block.title ? "mt-1" : undefined), children: block.body })] }));
+        case "node":
+            return _jsx("div", { className: "my-4", children: block.node });
+        default:
+            return null;
+    }
+}
+function getLanguageFromClassName(className) {
+    if (!className)
+        return undefined;
+    if (className.startsWith("language-")) {
+        return className.replace("language-", "");
+    }
+    return className;
+}
+function toCodeString(value) {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    if (value == null)
+        return "";
+    return String(value);
+}
+export function MdxCodeBlockPre(props) {
+    const child = Children.count(props.children) === 1 ? Children.only(props.children) : null;
+    if (child && isValidElement(child)) {
+        const codeChild = child;
+        const language = getLanguageFromClassName(codeChild.props.className);
+        const code = toCodeString(codeChild.props.children);
+        return _jsx(CodeBlock, { code: code, language: language });
+    }
+    return (_jsx("pre", { ...props, className: cn("bg-muted/40 overflow-x-auto whitespace-pre-wrap rounded p-3 text-xs leading-6", props.className) }));
+}
+function buildMdxComponents(section) {
+    const defaults = {
+        pre: MdxCodeBlockPre,
+    };
+    return {
+        ...defaults,
+        ...(section.components ?? {}),
+    };
+}
+function getSectionTitle(section, tocMap) {
+    if (section.title)
+        return section.title;
+    const fromToc = tocMap.get(section.id);
+    return fromToc ?? startCaseId(section.id);
+}
+function SectionHeading({ title, titleBorder, }) {
+    return (_jsx("h2", { className: cn("mb-8 mt-12 text-2xl font-semibold tracking-tight first:mt-0", titleBorder ? "border-muted border-b pb-2" : "pb-2"), children: title }));
+}
+function Nav({ config }) {
+    const [scrolled, setScrolled] = useState(false);
+    useEffect(() => {
+        const onScroll = () => setScrolled(window.scrollY > 8);
+        onScroll();
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, []);
+    const signInLabel = config.nav?.signInLabel ?? "sign in";
+    const signInHref = config.nav?.signInHref ?? "/login";
+    const signInTarget = config.nav?.signInTarget;
+    const signInRel = config.nav?.signInRel ?? (signInTarget === "_blank" ? "noreferrer" : undefined);
+    return (_jsx("div", { className: cn("sticky top-0 z-40 w-full backdrop-blur", scrolled ? "border-b border-border/80 bg-background/80" : "bg-background/60"), "data-docpage-nav": true, children: _jsx(Container, { children: _jsxs("div", { className: "flex h-14 items-center justify-between", children: [_jsx(Brand, { brand: config.brand }), config.nav?.rightSlot ? (config.nav.rightSlot) : (_jsxs("a", { href: signInHref, target: signInTarget, rel: signInRel, className: cn("group inline-flex h-8 items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-xs font-medium shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "bg-primary text-primary-foreground hover:bg-primary/90"), "data-docpage-signin": true, children: [signInLabel, _jsx(ArrowRight, { className: "ml-1 h-4 w-4 transition-transform group-hover:translate-x-0.5" })] }))] }) }) }));
+}
+function Brand({ brand }) {
+    const content = brand.logo ? (_jsx("div", { className: "flex items-center gap-2", children: brand.logo })) : (_jsx("span", { className: "text-sm font-semibold tracking-[0.2em] uppercase", children: brand.name }));
+    if (!brand.href)
+        return content;
+    return (_jsx("a", { href: brand.href, className: "inline-flex items-center text-foreground", "data-docpage-brand": true, children: content }));
+}
+function Toc({ entries, activeId, title, }) {
+    return (_jsxs("nav", { "aria-label": "Table of contents", className: "text-sm", "data-docpage-toc": true, children: [_jsx("div", { className: "mb-2 font-medium text-foreground", children: title }), _jsx("ol", { className: "space-y-1", children: entries.map((entry) => {
+                    const isActive = activeId === entry.id;
+                    return (_jsx("li", { children: _jsx("a", { href: `#${entry.id}`, className: cn("block rounded px-2 py-1 transition-colors", isActive
+                                ? "font-semibold text-foreground"
+                                : "text-muted-foreground hover:text-foreground"), onClick: () => history.replaceState(null, "", `#${entry.id}`), "data-docpage-toc-link": entry.id, "aria-current": isActive ? "true" : undefined, children: entry.label }) }, entry.id));
+                }) })] }));
+}
+function Header({ config }) {
+    return (_jsx(Container, { children: _jsxs("header", { className: "py-12", "data-docpage-header": true, children: [config.header.kicker ? (_jsx("div", { className: "mb-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground", children: config.header.kicker })) : null, _jsx("h1", { className: "mb-2 text-4xl font-bold tracking-tight", children: config.header.title }), config.header.subtitle ? (_jsx("p", { className: "max-w-2xl text-lg text-muted-foreground", children: config.header.subtitle })) : null] }) }));
+}
+function renderSection(section, tocMap) {
+    const title = getSectionTitle(section, tocMap);
+    switch (section.kind) {
+        case "prose":
+            return (_jsxs("section", { id: section.id, className: cn("scroll-mt-24", section.className), "data-docpage-section": section.id, children: [!section.hideTitle ? (_jsx(SectionHeading, { title: title, titleBorder: section.titleBorder })) : null, _jsx("div", { className: "space-y-4", children: section.blocks.map((block, index) => _jsx("div", { children: renderBlock(block) }, index)) })] }, section.id));
+        case "tabs":
+            return (_jsxs("section", { id: section.id, className: cn("scroll-mt-24", section.className), "data-docpage-section": section.id, children: [!section.hideTitle ? (_jsx(SectionHeading, { title: title, titleBorder: section.titleBorder })) : null, section.intro ? _jsx("p", { className: "mt-4", children: section.intro }) : null, _jsx("div", { className: "mt-4", children: _jsx(ApiTabs, { tabs: section.tabs, defaultTabId: section.defaultTabId }) })] }, section.id));
+        case "mdx": {
+            const components = buildMdxComponents(section);
+            return (_jsxs("section", { id: section.id, className: cn("scroll-mt-24", section.className), "data-docpage-section": section.id, children: [!section.hideTitle ? (_jsx(SectionHeading, { title: title, titleBorder: section.titleBorder })) : null, _jsx("div", { className: "docpage-mdx", children: _jsx(MDXProvider, { components: components, children: _jsx(section.Component, {}) }) })] }, section.id));
+        }
+        default:
+            return null;
+    }
+}
+function Footer({ config }) {
+    const footer = config.footer;
+    if (!footer)
+        return null;
+    const year = new Date().getFullYear();
+    return (_jsx("footer", { className: "border-t border-border/80 py-10 text-sm text-muted-foreground", "data-docpage-footer": true, children: _jsx(Container, { children: _jsxs("div", { className: "flex flex-col items-start justify-between gap-4 md:flex-row md:items-center", children: [footer.links && footer.links.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-4", children: footer.links.map((link) => (_jsx("a", { className: "hover:text-foreground", href: link.href, children: link.label }, link.href))) })) : null, _jsxs("div", { className: "flex flex-col gap-1 md:items-end", children: [_jsxs("div", { children: ["\u00A9 ", year, " ", footer.copyrightName ?? config.brand.name] }), footer.note ? _jsx("div", { className: "text-xs", children: footer.note }) : null] })] }) }) }));
+}
+export function DocPage({ config, className }) {
+    const tocEntries = useMemo(() => deriveToc(config), [config]);
+    const tocIds = tocEntries.map((entry) => entry.id);
+    const tocTitle = config.tocTitle ?? "Contents";
+    const tocMap = useMemo(() => {
+        return new Map(tocEntries.map((entry) => [entry.id, entry.label]));
+    }, [tocEntries]);
+    const tocActiveId = useActiveScrollSectionIds(tocIds, {
+        rootMargin: config.options?.tocRootMargin,
+        threshold: config.options?.tocThreshold,
+        syncToUrl: config.options?.syncTocToUrl ?? true,
+    });
+    const tocMinWidthPx = config.options?.tocMinWidthPx ?? 768;
+    const isWide = useIsWide(tocMinWidthPx);
+    const scheme = useColorScheme();
+    const themeStyle = themeToStyle(config);
+    const mergedStyle = { ...themeStyle, ...(config.style ?? {}) };
+    return (_jsxs("div", { className: cn("docpage min-h-[100dvh] overflow-x-hidden bg-background text-foreground", config.className, className), style: mergedStyle, "data-docpage": true, "data-docpage-theme": scheme, children: [_jsx(Nav, { config: config }), _jsx(Header, { config: config }), _jsx(Container, { children: _jsxs("div", { className: "grid grid-cols-1 gap-10 md:grid-cols-[260px_minmax(0,1fr)]", "data-docpage-body": true, children: [_jsx("aside", { className: "hidden max-h-[calc(100vh-7rem)] overflow-auto pr-4 md:sticky md:top-24 md:block", style: isWide ? undefined : { display: "none" }, children: _jsx(Toc, { entries: tocEntries, activeId: tocActiveId, title: tocTitle }) }), _jsx("main", { className: "min-w-0 pb-24", children: _jsx(Prose, { children: config.sections.map((section) => renderSection(section, tocMap)) }) })] }) }), _jsx(Footer, { config: config })] }));
+}

package/dist/hooks/use-active-scroll-section-ids.js

@@ -0,0 +1,45 @@
+import { useEffect, useMemo, useState } from "react";
+function getInitialActiveId(ids) {
+    if (typeof window === "undefined") {
+        return ids[0] ?? "";
+    }
+    const hash = window.location.hash.replace("#", "");
+    return hash && ids.includes(hash) ? hash : ids[0] ?? "";
+}
+export function useActiveScrollSectionIds(ids, options) {
+    const memoIds = useMemo(() => ids.filter(Boolean), [ids]);
+    const [active, setActive] = useState(() => getInitialActiveId(memoIds));
+    useEffect(() => {
+        if (memoIds.length === 0)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            const visible = entries
+                .filter((entry) => entry.isIntersecting)
+                .sort((a, b) => a.boundingClientRect.top > b.boundingClientRect.top ? 1 : -1);
+            if (!visible[0])
+                return;
+            const id = visible[0].target.id;
+            if (!id)
+                return;
+            setActive((prev) => (prev === id ? prev : id));
+        }, {
+            rootMargin: options?.rootMargin ?? "-20% 0px -70% 0px",
+            threshold: options?.threshold ?? [0, 1],
+        });
+        memoIds.forEach((id) => {
+            const el = document.getElementById(id);
+            if (el)
+                observer.observe(el);
+        });
+        return () => observer.disconnect();
+    }, [memoIds, options?.rootMargin, options?.threshold]);
+    useEffect(() => {
+        if (!options?.syncToUrl || !active)
+            return;
+        const current = window.location.hash.replace("#", "");
+        if (current !== active) {
+            history.replaceState(null, "", `#${active}`);
+        }
+    }, [active, options?.syncToUrl]);
+    return active;
+}

package/dist/hooks/use-color-scheme.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+function getInitialScheme() {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+}
+export function useColorScheme() {
+    const [scheme, setScheme] = useState(() => getInitialScheme());
+    useEffect(() => {
+        if (!window.matchMedia)
+            return;
+        const mql = window.matchMedia("(prefers-color-scheme: dark)");
+        const update = (event) => {
+            if (event) {
+                setScheme(event.matches ? "dark" : "light");
+                return;
+            }
+            setScheme(mql.matches ? "dark" : "light");
+        };
+        update();
+        mql.addEventListener?.("change", update);
+        return () => mql.removeEventListener?.("change", update);
+    }, []);
+    return scheme;
+}