@nendlabs/docpage 0.1.0

package/dist/index.js

@@ -0,0 +1,832 @@
+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 "api":
+      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
+};