@nendlabs/docpage 0.1.1 → 0.1.2

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.js

@@ -0,0 +1,252 @@
+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";
+    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, className: cn("group inline-flex items-center rounded-md border border-border/80 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.2em]", "text-foreground transition hover:border-foreground/60 hover:bg-foreground hover:text-background"), "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 sm:text-5xl lg:text-6xl", 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] 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: "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;
+}

package/dist/index.js

@@ -1,832 +1,7 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-
-// src/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-// src/docpage.tsx
-import { ArrowRight } from "lucide-react";
-import {
-  Children,
-  isValidElement,
-  useEffect as useEffect5,
-  useMemo as useMemo4,
-  useState as useState4
-} from "react";
-import { MDXProvider } from "@mdx-js/react";
-
-// src/components/api-tabs.tsx
-import { useMemo as useMemo2, useState } from "react";
-
-// src/components/code-block.tsx
-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 { jsxDEV } from "react/jsx-dev-runtime";
-var 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;
-}
-function CodeBlock({
-  code,
-  language,
-  caption,
-  className,
-  preClassName,
-  codeClassName
-}) {
-  const codeRef = useRef(null);
-  const languageClass = useMemo(() => {
-    if (!language)
-      return;
-    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 /* @__PURE__ */ jsxDEV("figure", {
-    className: cn("docpage-code", className),
-    children: [
-      /* @__PURE__ */ jsxDEV("pre", {
-        className: cn("bg-muted/40 overflow-x-auto whitespace-pre-wrap rounded p-3 text-xs leading-6", preClassName),
-        children: /* @__PURE__ */ jsxDEV("code", {
-          ref: codeRef,
-          className: cn("hljs", languageClass, codeClassName),
-          children: code
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      caption ? /* @__PURE__ */ jsxDEV("figcaption", {
-        className: "mt-2 text-xs text-muted-foreground",
-        children: caption
-      }, undefined, false, undefined, this) : null
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/api-tabs.tsx
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-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();
-}
-function ApiTabs({ tabs, defaultTabId, className }) {
-  const [activeId, setActiveId] = useState(() => getInitialTabId(tabs, defaultTabId));
-  const activeTab = useMemo2(() => {
-    return tabs.find((tab) => tab.id === activeId) ?? tabs[0];
-  }, [tabs, activeId]);
-  if (!activeTab)
-    return null;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: cn("docpage-api space-y-3", className),
-    children: [
-      /* @__PURE__ */ jsxDEV2("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 /* @__PURE__ */ jsxDEV2("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, false, undefined, this);
-        })
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV2(CodeBlock, {
-        code: activeTab.code,
-        language: activeTab.language ?? activeTab.id,
-        preClassName: "text-xs"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-
-// src/components/mermaid.tsx
-import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
-import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-function Mermaid({ chart }) {
-  const ref = useRef2(null);
-  const ridRaw = useId();
-  const rid = ridRaw.replace(/:/g, "");
-  useEffect2(() => {
-    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);
-        }
-      }
-    }
-    render();
-    const onChange = () => {
-      if (!cancelled)
-        render();
-    };
-    mql?.addEventListener?.("change", onChange);
-    return () => {
-      cancelled = true;
-      mql?.removeEventListener?.("change", onChange);
-    };
-  }, [chart, rid]);
-  return /* @__PURE__ */ jsxDEV3("div", {
-    ref,
-    "data-docpage-mermaid": true
-  }, undefined, false, undefined, this);
-}
-
-// src/hooks/use-active-scroll-section-ids.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } 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] ?? "";
-}
-function useActiveScrollSectionIds(ids, options) {
-  const memoIds = useMemo3(() => ids.filter(Boolean), [ids]);
-  const [active, setActive] = useState2(() => getInitialActiveId(memoIds));
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    if (!options?.syncToUrl || !active)
-      return;
-    const current = window.location.hash.replace("#", "");
-    if (current !== active) {
-      history.replaceState(null, "", `#${active}`);
-    }
-  }, [active, options?.syncToUrl]);
-  return active;
-}
-
-// src/hooks/use-color-scheme.tsx
-import { useEffect as useEffect4, useState as useState3 } from "react";
-function getInitialScheme() {
-  if (typeof window === "undefined" || !window.matchMedia)
-    return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function useColorScheme() {
-  const [scheme, setScheme] = useState3(() => getInitialScheme());
-  useEffect4(() => {
-    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;
-}
-
-// src/docpage.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
-var 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] = useState4(() => {
-    if (typeof window === "undefined" || !window.matchMedia)
-      return true;
-    return window.matchMedia(`(min-width: ${minWidthPx}px)`).matches;
-  });
-  useEffect5(() => {
-    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 /* @__PURE__ */ jsxDEV4("div", {
-    className: "mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8",
-    children
-  }, undefined, false, undefined, this);
-}
-function Prose({ children }) {
-  return /* @__PURE__ */ jsxDEV4("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
-  }, undefined, false, undefined, this);
-}
-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 /* @__PURE__ */ jsxDEV4("p", {
-        className: "my-4",
-        children: block.text
-      }, undefined, false, undefined, this);
-    case "ul":
-      return /* @__PURE__ */ jsxDEV4("ul", {
-        className: "marker:text-muted-foreground list-disc pl-6",
-        children: block.items.map((item, index) => /* @__PURE__ */ jsxDEV4("li", {
-          className: "my-2",
-          children: item
-        }, index, false, undefined, this))
-      }, undefined, false, undefined, this);
-    case "ol":
-      return /* @__PURE__ */ jsxDEV4("ol", {
-        className: "marker:text-muted-foreground list-decimal pl-6",
-        children: block.items.map((item, index) => /* @__PURE__ */ jsxDEV4("li", {
-          className: "my-2",
-          children: item
-        }, index, false, undefined, this))
-      }, undefined, false, undefined, this);
-    case "labeled-list":
-      return /* @__PURE__ */ jsxDEV4("ul", {
-        className: "marker:text-muted-foreground list-disc pl-6",
-        children: block.items.map((item, index) => /* @__PURE__ */ jsxDEV4("li", {
-          className: "my-2",
-          children: [
-            /* @__PURE__ */ jsxDEV4("strong", {
-              children: [
-                item.label,
-                ":"
-              ]
-            }, undefined, true, undefined, this),
-            " ",
-            item.text
-          ]
-        }, index, true, undefined, this))
-      }, undefined, false, undefined, this);
-    case "code":
-      return /* @__PURE__ */ jsxDEV4("div", {
-        className: "my-6",
-        children: /* @__PURE__ */ jsxDEV4(CodeBlock, {
-          code: block.code,
-          language: block.language,
-          caption: block.caption
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this);
-    case "pre":
-      return /* @__PURE__ */ jsxDEV4("pre", {
-        className: "bg-muted/40 my-6 whitespace-pre-wrap rounded p-3 text-xs",
-        children: block.code
-      }, undefined, false, undefined, this);
-    case "mermaid":
-      return /* @__PURE__ */ jsxDEV4("figure", {
-        className: "my-6",
-        children: [
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "bg-background rounded border border-border/80 p-4",
-            children: /* @__PURE__ */ jsxDEV4(Mermaid, {
-              chart: block.chart
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this),
-          block.caption ? /* @__PURE__ */ jsxDEV4("figcaption", {
-            className: "mt-2 text-xs text-muted-foreground",
-            children: block.caption
-          }, undefined, false, undefined, this) : null
-        ]
-      }, undefined, true, undefined, this);
-    case "callout":
-      return /* @__PURE__ */ jsxDEV4("div", {
-        className: cn("my-6 rounded-lg border p-4", getCalloutToneClasses(block.tone)),
-        children: [
-          block.title ? /* @__PURE__ */ jsxDEV4("div", {
-            className: "text-sm font-semibold text-foreground",
-            children: block.title
-          }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: cn("text-sm leading-relaxed", block.title ? "mt-1" : undefined),
-            children: block.body
-          }, undefined, false, undefined, this)
-        ]
-      }, undefined, true, undefined, this);
-    case "node":
-      return /* @__PURE__ */ jsxDEV4("div", {
-        className: "my-4",
-        children: block.node
-      }, undefined, false, undefined, this);
-    default:
-      return null;
-  }
-}
-function getLanguageFromClassName(className) {
-  if (!className)
-    return;
-  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);
-}
-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 /* @__PURE__ */ jsxDEV4(CodeBlock, {
-      code,
-      language
-    }, undefined, false, undefined, this);
-  }
-  return /* @__PURE__ */ jsxDEV4("pre", {
-    ...props,
-    className: cn("bg-muted/40 overflow-x-auto whitespace-pre-wrap rounded p-3 text-xs leading-6", props.className)
-  }, undefined, false, undefined, this);
-}
-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 /* @__PURE__ */ jsxDEV4("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
-  }, undefined, false, undefined, this);
-}
-function Nav({ config }) {
-  const [scrolled, setScrolled] = useState4(false);
-  useEffect5(() => {
-    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";
-  return /* @__PURE__ */ jsxDEV4("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: /* @__PURE__ */ jsxDEV4(Container, {
-      children: /* @__PURE__ */ jsxDEV4("div", {
-        className: "flex h-14 items-center justify-between",
-        children: [
-          /* @__PURE__ */ jsxDEV4(Brand, {
-            brand: config.brand
-          }, undefined, false, undefined, this),
-          config.nav?.rightSlot ? config.nav.rightSlot : /* @__PURE__ */ jsxDEV4("a", {
-            href: signInHref,
-            className: cn("group inline-flex items-center rounded-md border border-border/80 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.2em]", "text-foreground transition hover:border-foreground/60 hover:bg-foreground hover:text-background"),
-            "data-docpage-signin": true,
-            children: [
-              signInLabel,
-              /* @__PURE__ */ jsxDEV4(ArrowRight, {
-                className: "ml-1 h-4 w-4 transition-transform group-hover:translate-x-0.5"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-function Brand({ brand }) {
-  const content = brand.logo ? /* @__PURE__ */ jsxDEV4("div", {
-    className: "flex items-center gap-2",
-    children: brand.logo
-  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4("span", {
-    className: "text-sm font-semibold tracking-[0.2em] uppercase",
-    children: brand.name
-  }, undefined, false, undefined, this);
-  if (!brand.href)
-    return content;
-  return /* @__PURE__ */ jsxDEV4("a", {
-    href: brand.href,
-    className: "inline-flex items-center text-foreground",
-    "data-docpage-brand": true,
-    children: content
-  }, undefined, false, undefined, this);
-}
-function Toc({
-  entries,
-  activeId,
-  title
-}) {
-  return /* @__PURE__ */ jsxDEV4("nav", {
-    "aria-label": "Table of contents",
-    className: "text-sm",
-    "data-docpage-toc": true,
-    children: [
-      /* @__PURE__ */ jsxDEV4("div", {
-        className: "mb-2 font-medium text-foreground",
-        children: title
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4("ol", {
-        className: "space-y-1",
-        children: entries.map((entry) => {
-          const isActive = activeId === entry.id;
-          return /* @__PURE__ */ jsxDEV4("li", {
-            children: /* @__PURE__ */ jsxDEV4("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
-            }, undefined, false, undefined, this)
-          }, entry.id, false, undefined, this);
-        })
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-function Header({ config }) {
-  return /* @__PURE__ */ jsxDEV4(Container, {
-    children: /* @__PURE__ */ jsxDEV4("header", {
-      className: "py-12",
-      "data-docpage-header": true,
-      children: [
-        config.header.kicker ? /* @__PURE__ */ jsxDEV4("div", {
-          className: "mb-3 text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground",
-          children: config.header.kicker
-        }, undefined, false, undefined, this) : null,
-        /* @__PURE__ */ jsxDEV4("h1", {
-          className: "mb-2 text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl",
-          children: config.header.title
-        }, undefined, false, undefined, this),
-        config.header.subtitle ? /* @__PURE__ */ jsxDEV4("p", {
-          className: "max-w-2xl text-lg text-muted-foreground",
-          children: config.header.subtitle
-        }, undefined, false, undefined, this) : null
-      ]
-    }, undefined, true, undefined, this)
-  }, undefined, false, undefined, this);
-}
-function renderSection(section, tocMap) {
-  const title = getSectionTitle(section, tocMap);
-  switch (section.kind) {
-    case "prose":
-      return /* @__PURE__ */ jsxDEV4("section", {
-        id: section.id,
-        className: cn("scroll-mt-24", section.className),
-        "data-docpage-section": section.id,
-        children: [
-          !section.hideTitle ? /* @__PURE__ */ jsxDEV4(SectionHeading, {
-            title,
-            titleBorder: section.titleBorder
-          }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "space-y-4",
-            children: section.blocks.map((block, index) => /* @__PURE__ */ jsxDEV4("div", {
-              children: renderBlock(block)
-            }, index, false, undefined, this))
-          }, undefined, false, undefined, this)
-        ]
-      }, section.id, true, undefined, this);
-    case "tabs":
-      return /* @__PURE__ */ jsxDEV4("section", {
-        id: section.id,
-        className: cn("scroll-mt-24", section.className),
-        "data-docpage-section": section.id,
-        children: [
-          !section.hideTitle ? /* @__PURE__ */ jsxDEV4(SectionHeading, {
-            title,
-            titleBorder: section.titleBorder
-          }, undefined, false, undefined, this) : null,
-          section.intro ? /* @__PURE__ */ jsxDEV4("p", {
-            className: "mt-4",
-            children: section.intro
-          }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "mt-4",
-            children: /* @__PURE__ */ jsxDEV4(ApiTabs, {
-              tabs: section.tabs,
-              defaultTabId: section.defaultTabId
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, section.id, true, undefined, this);
-    case "mdx": {
-      const components = buildMdxComponents(section);
-      return /* @__PURE__ */ jsxDEV4("section", {
-        id: section.id,
-        className: cn("scroll-mt-24", section.className),
-        "data-docpage-section": section.id,
-        children: [
-          !section.hideTitle ? /* @__PURE__ */ jsxDEV4(SectionHeading, {
-            title,
-            titleBorder: section.titleBorder
-          }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "docpage-mdx",
-            children: /* @__PURE__ */ jsxDEV4(MDXProvider, {
-              components,
-              children: /* @__PURE__ */ jsxDEV4(section.Component, {}, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          }, undefined, false, undefined, this)
-        ]
-      }, section.id, true, undefined, this);
-    }
-    default:
-      return null;
-  }
-}
-function Footer({ config }) {
-  const footer = config.footer;
-  if (!footer)
-    return null;
-  const year = new Date().getFullYear();
-  return /* @__PURE__ */ jsxDEV4("footer", {
-    className: "border-t border-border/80 py-10 text-sm text-muted-foreground",
-    "data-docpage-footer": true,
-    children: /* @__PURE__ */ jsxDEV4(Container, {
-      children: /* @__PURE__ */ jsxDEV4("div", {
-        className: "flex flex-col items-start justify-between gap-4 md:flex-row md:items-center",
-        children: [
-          footer.links && footer.links.length > 0 ? /* @__PURE__ */ jsxDEV4("div", {
-            className: "flex flex-wrap items-center gap-4",
-            children: footer.links.map((link) => /* @__PURE__ */ jsxDEV4("a", {
-              className: "hover:text-foreground",
-              href: link.href,
-              children: link.label
-            }, link.href, false, undefined, this))
-          }, undefined, false, undefined, this) : null,
-          /* @__PURE__ */ jsxDEV4("div", {
-            className: "flex flex-col gap-1 md:items-end",
-            children: [
-              /* @__PURE__ */ jsxDEV4("div", {
-                children: [
-                  "© ",
-                  year,
-                  " ",
-                  footer.copyrightName ?? config.brand.name
-                ]
-              }, undefined, true, undefined, this),
-              footer.note ? /* @__PURE__ */ jsxDEV4("div", {
-                className: "text-xs",
-                children: footer.note
-              }, undefined, false, undefined, this) : null
-            ]
-          }, undefined, true, undefined, this)
-        ]
-      }, undefined, true, undefined, this)
-    }, undefined, false, undefined, this)
-  }, undefined, false, undefined, this);
-}
-function DocPage({ config, className }) {
-  const tocEntries = useMemo4(() => deriveToc(config), [config]);
-  const tocIds = tocEntries.map((entry) => entry.id);
-  const tocTitle = config.tocTitle ?? "Contents";
-  const tocMap = useMemo4(() => {
-    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 /* @__PURE__ */ jsxDEV4("div", {
-    className: cn("docpage min-h-[100dvh] bg-background text-foreground", config.className, className),
-    style: mergedStyle,
-    "data-docpage": true,
-    "data-docpage-theme": scheme,
-    children: [
-      /* @__PURE__ */ jsxDEV4(Nav, {
-        config
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Header, {
-        config
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Container, {
-        children: /* @__PURE__ */ jsxDEV4("div", {
-          className: "grid grid-cols-1 gap-10 md:grid-cols-[260px_minmax(0,1fr)]",
-          "data-docpage-body": true,
-          children: [
-            /* @__PURE__ */ jsxDEV4("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: /* @__PURE__ */ jsxDEV4(Toc, {
-                entries: tocEntries,
-                activeId: tocActiveId,
-                title: tocTitle
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV4("main", {
-              className: "pb-24",
-              children: /* @__PURE__ */ jsxDEV4(Prose, {
-                children: config.sections.map((section) => renderSection(section, tocMap))
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV4(Footer, {
-        config
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
-export {
-  useColorScheme,
-  useActiveScrollSectionIds,
-  cn,
-  Mermaid,
-  MdxCodeBlockPre,
-  DocPage,
-  CodeBlock,
-  ApiTabs
-};
+export { cn } from "./cn";
+export { DocPage, MdxCodeBlockPre } from "./docpage";
+export { ApiTabs } from "./components/api-tabs";
+export { CodeBlock } from "./components/code-block";
+export { Mermaid } from "./components/mermaid";
+export { useActiveScrollSectionIds } from "./hooks/use-active-scroll-section-ids";
+export { useColorScheme } from "./hooks/use-color-scheme";

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nendlabs/docpage",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "an interactive paper-style project page renderer",
   "type": "module",
   "license": "MIT",
@@ -24,8 +24,8 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist",
-    "build:js": "bun build ./src/index.ts --outdir ./dist --target browser --format esm --external react --external react-dom --packages external",
-    "build:types": "tsc -p ./tsconfig.build.json",
+    "build:js": "tsc -p ./tsconfig.build.js.json",
+    "build:types": "tsc -p ./tsconfig.build.types.json",
     "build:styles": "mkdir -p dist/styles && ./node_modules/.bin/tailwindcss -i ./styles/tailwind.css -o ./dist/styles/docpage.css",
     "build:docs": "mkdir -p dist && cp docs/package.md dist/package.md",
     "build": "bun run clean && bun run build:js && bun run build:types && bun run build:styles && bun run build:docs",