@jfrader/storybook-docs 0.0.0-stage → 0.4.4

package/dist/index.js

@@ -0,0 +1,1971 @@
+// src/start.tsx
+import "virtual:storybook-docs/global-styles";
+import { StrictMode, createElement as createElement3 } from "react";
+import { createRoot } from "react-dom/client";
+import { site as site3, themeCss, theme as theme2 } from "virtual:storybook-docs/site";
+
+// src/app.tsx
+import { useEffect as useEffect7, useRef as useRef5, useState as useState8 } from "react";
+import { catalog as catalog3, groups as groups2 } from "virtual:storybook-docs/catalog";
+import { pages, site as site2, theme } from "virtual:storybook-docs/site";
+
+// src/pages/component-page.tsx
+import { useMemo as useMemo3 } from "react";
+import { storySource as storySource2 } from "virtual:storybook-docs/catalog";
+
+// src/guidance.tsx
+import { createElement, useEffect, useMemo as useMemo2, useState } from "react";
+import { loadGuidance } from "virtual:storybook-docs/guidance";
+
+// src/code.tsx
+import { Component, Suspense, useMemo } from "react";
+import { Code as ProvidedCode, provided as hasProvidedCode } from "virtual:storybook-docs/code";
+import { jsx } from "react/jsx-runtime";
+var CodeBoundary = class extends Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    if (this.state.failed) return /* @__PURE__ */ jsx(PlainCode, { code: this.props.code, language: this.props.language, label: this.props.label });
+    return this.props.children;
+  }
+};
+function PlainCode({ code, language, label }) {
+  return /* @__PURE__ */ jsx("pre", { className: "code", "data-lang": language || void 0, "aria-label": label, children: code });
+}
+function CodeBlock({ code, language, label }) {
+  const Provided = ProvidedCode;
+  const trimmed = useMemo(() => code.trim(), [code]);
+  if (!hasProvidedCode || !Provided) return /* @__PURE__ */ jsx(PlainCode, { code: trimmed, language, label });
+  return /* @__PURE__ */ jsx(CodeBoundary, { code: trimmed, language, label, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(PlainCode, { code: trimmed, language, label }), children: /* @__PURE__ */ jsx(Provided, { code: trimmed, language, label }) }) });
+}
+
+// src/guidance-model.ts
+import { marked } from "marked";
+var DO_SYMBOLS = ["\u2705", "\u2713", "\u2714"];
+var SYMBOL = /^(✅|✓|✔|⛔|✗|✘|❌|🚫)\uFE0F?\s*/u;
+var WORD = /^(\*\*|__|\*|_)?(don['’]t|do not|do)\1(?![\p{L}\p{N}'’])/iu;
+var SEPARATOR = /^[ \t]*(?:[—–:]|-(?=\s))[ \t]*/u;
+var LINE_END = /^[ \t]*(?:\n|$)/;
+var MIN_HEADING_DEPTH = 2;
+var SAFE_SCHEMES = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+var SCHEME = /^([a-z][a-z\d+.-]*:)/i;
+var EXTERNAL = /^(?:https?:)?\/\//i;
+function readCallout(text) {
+  let rest = text.trimStart();
+  let tone = "note";
+  const symbol = SYMBOL.exec(rest);
+  if (symbol?.[1]) {
+    tone = DO_SYMBOLS.includes(symbol[1]) ? "do" : "dont";
+    rest = rest.slice(symbol[0].length);
+  }
+  const word = WORD.exec(rest);
+  if (word?.[2]) {
+    const wordTone = word[2].toLowerCase() === "do" ? "do" : "dont";
+    const after = rest.slice(word[0].length);
+    const delimited = Boolean(word[1]) || SEPARATOR.test(after) || LINE_END.test(after);
+    if (symbol ? tone === wordTone : delimited) {
+      tone = wordTone;
+      rest = after;
+    }
+  }
+  if (tone === "note") return { tone, body: text };
+  return { tone, body: rest.replace(SEPARATOR, "").trimStart() };
+}
+function safeHref(href) {
+  const scheme = SCHEME.exec(href)?.[1]?.toLowerCase();
+  return scheme && !SAFE_SCHEMES.has(scheme) ? null : href;
+}
+function toInline(tokens = []) {
+  return tokens.flatMap((token4) => {
+    switch (token4.type) {
+      case "text":
+        return token4.tokens ? toInline(token4.tokens) : [{ kind: "text", text: token4.text }];
+      case "escape":
+        return [{ kind: "text", text: token4.text }];
+      case "strong":
+      case "em":
+      case "del":
+        return [{ kind: token4.type, children: toInline(token4.tokens) }];
+      case "codespan":
+        return [{ kind: "code", text: token4.text }];
+      case "br":
+        return [{ kind: "br" }];
+      case "link": {
+        const href = safeHref(token4.href);
+        const children = toInline(token4.tokens);
+        return href ? [{ kind: "link", href, external: EXTERNAL.test(href), children }] : children;
+      }
+      case "image": {
+        const src = safeHref(token4.href);
+        return src ? [{ kind: "image", src, alt: token4.text }] : [];
+      }
+      default:
+        return [];
+    }
+  });
+}
+function toCell(cell) {
+  return toInline(cell.tokens);
+}
+function toBlocks(tokens) {
+  return tokens.flatMap((token4) => {
+    switch (token4.type) {
+      case "heading":
+        return [{ kind: "heading", depth: Math.max(MIN_HEADING_DEPTH, token4.depth), children: toInline(token4.tokens) }];
+      case "paragraph":
+        return [{ kind: "paragraph", children: toInline(token4.tokens) }];
+      case "text":
+        return [{ kind: "text", children: toInline([token4]) }];
+      case "list":
+        return [
+          {
+            kind: "list",
+            ordered: token4.ordered,
+            start: token4.start === "" ? 1 : token4.start,
+            items: token4.items.map((item) => toBlocks(item.tokens))
+          }
+        ];
+      case "code":
+        return [{ kind: "code", lang: token4.lang ?? "", text: token4.text }];
+      case "table":
+        return [{ kind: "table", align: token4.align, header: token4.header.map(toCell), rows: token4.rows.map((row) => row.map(toCell)) }];
+      case "blockquote": {
+        const { tone, body } = readCallout(token4.text);
+        const children = tone === "note" ? toBlocks(token4.tokens) : toBlocks(marked.lexer(body));
+        return [{ kind: "callout", tone, children }];
+      }
+      case "hr":
+        return [{ kind: "rule" }];
+      default:
+        return [];
+    }
+  });
+}
+function parseGuidance(markdown) {
+  return toBlocks(marked.lexer(markdown));
+}
+
+// src/skeleton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Skeleton({
+  width = "100%",
+  height = 12,
+  lines = 1
+}) {
+  if (lines > 1) {
+    return /* @__PURE__ */ jsx2("span", { className: "skeleton-stack", "aria-hidden": "true", children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: "skeleton",
+        style: { width: index === lines - 1 ? "62%" : width, height }
+      },
+      index
+    )) });
+  }
+  return /* @__PURE__ */ jsx2("span", { className: "skeleton", "aria-hidden": "true", style: { width, height } });
+}
+
+// src/guidance.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CALLOUT_LABELS = { do: "Do", dont: "Don't", note: null };
+function renderInline(nodes) {
+  return nodes.map((node, index) => {
+    switch (node.kind) {
+      case "text":
+        return node.text;
+      case "strong":
+      case "em":
+      case "del":
+        return createElement(node.kind, { key: index }, renderInline(node.children));
+      case "code":
+        return /* @__PURE__ */ jsx3("code", { children: node.text }, index);
+      case "br":
+        return /* @__PURE__ */ jsx3("br", {}, index);
+      case "image":
+        return /* @__PURE__ */ jsx3("img", { src: node.src, alt: node.alt }, index);
+      case "link":
+        return node.external ? /* @__PURE__ */ jsx3("a", { href: node.href, target: "_blank", rel: "noreferrer noopener", children: renderInline(node.children) }, index) : /* @__PURE__ */ jsx3("a", { href: node.href, children: renderInline(node.children) }, index);
+    }
+  });
+}
+function renderBlocks(blocks) {
+  return blocks.map((block, index) => {
+    switch (block.kind) {
+      case "heading":
+        return createElement(`h${Math.min(block.depth, 6)}`, { key: index }, renderInline(block.children));
+      case "paragraph":
+        return /* @__PURE__ */ jsx3("p", { children: renderInline(block.children) }, index);
+      case "text":
+        return /* @__PURE__ */ jsx3("span", { children: renderInline(block.children) }, index);
+      case "list": {
+        const items = block.items.map((item, itemIndex) => /* @__PURE__ */ jsx3("li", { children: renderBlocks(item) }, itemIndex));
+        return block.ordered ? /* @__PURE__ */ jsx3("ol", { start: block.start, children: items }, index) : /* @__PURE__ */ jsx3("ul", { children: items }, index);
+      }
+      case "code":
+        return /* @__PURE__ */ jsx3(CodeBlock, { code: block.text, language: block.lang || void 0 }, index);
+      case "table":
+        return /* @__PURE__ */ jsx3("div", { className: "guidance-table", children: /* @__PURE__ */ jsxs("table", { children: [
+          /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: block.header.map((cell, cellIndex) => /* @__PURE__ */ jsx3("th", { style: { textAlign: block.align[cellIndex] ?? void 0 }, children: renderInline(cell) }, cellIndex)) }) }),
+          /* @__PURE__ */ jsx3("tbody", { children: block.rows.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx3("td", { style: { textAlign: block.align[cellIndex] ?? void 0 }, children: renderInline(cell) }, cellIndex)) }, rowIndex)) })
+        ] }) }, index);
+      case "callout": {
+        const label = CALLOUT_LABELS[block.tone];
+        return /* @__PURE__ */ jsxs("aside", { className: `guidance-callout guidance-callout-${block.tone}`, children: [
+          label ? /* @__PURE__ */ jsx3("p", { className: "guidance-callout-label", children: label }) : null,
+          renderBlocks(block.children)
+        ] }, index);
+      }
+      case "rule":
+        return /* @__PURE__ */ jsx3("hr", {}, index);
+    }
+  });
+}
+function MarkdownView({ markdown, className = "guidance" }) {
+  const blocks = useMemo2(() => parseGuidance(markdown), [markdown]);
+  return /* @__PURE__ */ jsx3("section", { className, children: renderBlocks(blocks) });
+}
+function Guidance({ slug }) {
+  const [blocks, setBlocks] = useState(null);
+  const [missing, setMissing] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    setBlocks(null);
+    setMissing(false);
+    loadGuidance(slug).then((module) => {
+      if (!alive) return;
+      const markdown = module.markdown;
+      if (!markdown) {
+        setMissing(true);
+        return;
+      }
+      setBlocks(parseGuidance(markdown));
+    }).catch(() => {
+      if (alive) setMissing(true);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [slug]);
+  if (missing) return null;
+  if (blocks === null) return /* @__PURE__ */ jsx3("section", { className: "guidance", "aria-busy": "true", children: /* @__PURE__ */ jsx3(Skeleton, { lines: 3 }) });
+  return /* @__PURE__ */ jsx3("section", { className: "guidance", children: renderBlocks(blocks) });
+}
+
+// src/controls.tsx
+import { useState as useState5 } from "react";
+
+// src/component-demo.tsx
+import { useCallback as useCallback2, useEffect as useEffect4, useId, useRef as useRef3, useState as useState4 } from "react";
+
+// src/story-view.tsx
+import { Component as Component2, createElement as createElement2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// src/sections.ts
+function mergeAnnotations(...values) {
+  const merged = {};
+  const isRecord = (value) => value !== null && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype;
+  for (const value of values) {
+    for (const [key, next] of Object.entries(value ?? {})) {
+      if (next === void 0) continue;
+      const previous = merged[key];
+      merged[key] = isRecord(previous) && isRecord(next) ? mergeAnnotations(previous, next) : next;
+    }
+  }
+  return merged;
+}
+var SECTIONS = [
+  {
+    title: "Environments",
+    match: /rtl|ltr|dir|theme|forced|reduced|motion|dark|light|contrast|a11y|aria|screen|zoom|locale|intl/i
+  },
+  {
+    title: "Variants & sizes",
+    match: /variant|tone|size|appearance|density|style|colour|color|emphasis|shape|level|orientation|align|position|placement/i
+  },
+  {
+    title: "States",
+    match: /loading|disabled|error|invalid|required|readonly|pending|selected|checked|open|closed|active|focus|hover|pressed|busy|empty|filled|failed|success|indeterminate/i
+  },
+  {
+    title: "Interaction & keyboard",
+    match: /keyboard|pointer|drag|click|typeahead|escape|tab|enter|space|arrow|scroll|wheel|swipe|gesture|hold|capture|press|navigate|activat/i
+  },
+  {
+    title: "Content & layout",
+    match: /long|short|narrow|wide|wrap|overflow|label|children|content|text|icon|image|avatar|number|value|truncat|clamp|stack/i
+  },
+  {
+    title: "Edge cases",
+    match: /error|reject|cancel|unmount|reset|guard|edge|stress|zero|invalid|falsy|boolean|external|controlled|uncontrolled|ref|slot|sx|default|initial|missing|duplicate|unknown|null/i
+  }
+];
+function sectionStories(stories) {
+  const overview = stories.filter((story) => /^default$/i.test(story));
+  const rest = stories.filter((story) => !/^default$/i.test(story));
+  const buckets = SECTIONS.map((section) => ({ ...section, stories: [] }));
+  const more = [];
+  for (const story of rest) {
+    const bucket = buckets.find((candidate) => candidate.match.test(story));
+    (bucket ? bucket.stories : more).push(story);
+  }
+  const sections = [];
+  if (overview.length > 0) {
+    sections.push({ title: "Overview", stories: overview });
+  }
+  for (const bucket of buckets) {
+    if (bucket.stories.length > 0) {
+      sections.push({ title: bucket.title, stories: bucket.stories });
+    }
+  }
+  if (more.length > 0) {
+    sections.push({ title: "More stories", stories: more });
+  }
+  return sections;
+}
+var DEBUG_STORY = /\b(?:loading|disabled|error|invalid|pending|failure|failed|reject(?:ed)?|rtl|ltr|forced|keyboard|light|dark|theme|motion|controlled|uncontrolled|empty|missing|boundary|boundaries|ref|veto|open|closed|focus|hover|pressed|busy|checked|selected|readonly|read only|indeterminate|success|a11y|aria|contrast|locale|zoom)\b/i;
+var SHOWCASE_STORY = /^(highlighted|card|patterns?|composition|showcase|playground)$/i;
+var CONTENT_STORY = /withicons|sizes|variants|patterns|composition|example|content/i;
+var OPEN_SHOWCASE = /^(?:open|persistent)\b/i;
+var OVERLAY_FIXTURE = /\b(?:debug|test|fixture|zero|falsy|external|refs?|styling|sx|isolation|cleanup|unmount|broken|escape|outside|scroll|prevent|veto|rebase|no description)\b/i;
+function storyWords(name) {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ");
+}
+function selectExample(stories, parts = [], defaults = {}) {
+  const anatomy = parts.some((part) => /^(trigger|target|input)$/i.test(part)) && parts.some((part) => /^(content|panel|popup|list)$/i.test(part));
+  const isOpenShowcase = (story) => OPEN_SHOWCASE.test(storyWords(story.name)) && !DEBUG_STORY.test(storyWords(story.name).replace(/\b(?:open|persistent)\b/gi, "")) && !OVERLAY_FIXTURE.test(storyWords(story.name));
+  const isOpen = (story) => story.args?.open !== false && (story.args?.open === true || story.args?.defaultOpen === true || /^(?:open|persistent(?: open)?)$/i.test(storyWords(story.name)) && story.args?.defaultOpen !== false);
+  const candidates = stories.filter((story) => !DEBUG_STORY.test(storyWords(story.name)) && (!anatomy || !OVERLAY_FIXTURE.test(storyWords(story.name))));
+  const current = candidates.find((story) => SHOWCASE_STORY.test(story.name)) ?? candidates.find((story) => /^(default|primary)$/i.test(story.name)) ?? candidates.find((story) => story.description?.trim()) ?? candidates.find((story) => CONTENT_STORY.test(story.name)) ?? candidates.find((story) => /^initial(snapshot|state)$/i.test(story.name)) ?? candidates[0];
+  const currentArgs = { ...defaults, ...current?.args };
+  const standaloneOpen = (story) => /^(?:open|persistent open)$/i.test(storyWords(story.name)) && isOpen(story) && !(typeof story.play === "function" && /\b(?:userEvent|fireEvent)\b/.test(Function.prototype.toString.call(story.play)));
+  const widget = defaults !== null && !(currentArgs.open === true || currentArgs.open === void 0 && currentArgs.defaultOpen === true) && stories.some(standaloneOpen) && stories.some(({ args }) => typeof args?.onOpenChange === "function" && (typeof args.open === "boolean" || typeof args.defaultOpen === "boolean"));
+  const overlay = anatomy || widget;
+  if (overlay) {
+    const open = stories.find((story) => isOpenShowcase(story) && isOpen(story) && (anatomy || standaloneOpen(story))) ?? (anatomy ? candidates.find(isOpen) : void 0);
+    if (open) return open.name;
+  }
+  return current?.name ?? null;
+}
+function serializable(value, ancestors = /* @__PURE__ */ new Set()) {
+  if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value !== "object" || ancestors.has(value)) return false;
+  if (!Array.isArray(value) && (Object.getPrototypeOf(value) !== Object.prototype || "$$typeof" in value)) return false;
+  ancestors.add(value);
+  const result = Object.values(value).every((item) => serializable(item, ancestors));
+  ancestors.delete(value);
+  return result;
+}
+function usageSnippet(componentName, args) {
+  if (!args || Object.keys(args).length === 0) return null;
+  const attributes = [];
+  for (const [key, value] of Object.entries(args)) {
+    if (key === "children" || /^on[A-Z]/.test(key) || value === void 0) continue;
+    if (!serializable(value)) return null;
+    if (typeof value === "string" && !/["&<>\n\r]/.test(value)) attributes.push(`${key}="${value}"`);
+    else if (value === true) attributes.push(key);
+    else attributes.push(`${key}={${JSON.stringify(value)}}`);
+  }
+  const opening = `<${componentName}${attributes.length ? ` ${attributes.join(" ")}` : ""}`;
+  if (args.children === void 0) return attributes.length ? `${opening} />` : null;
+  if (!serializable(args.children) || args.children !== null && typeof args.children === "object") return null;
+  const children = typeof args.children === "string" && !/[&<>{}]/.test(args.children) ? args.children : `{${JSON.stringify(args.children)}}`;
+  return `${opening}>${children}</${componentName}>`;
+}
+function buildUsageSnippet({ componentName, from, args, source, jsxName, component }) {
+  const rootName = componentName.split(".")[0];
+  const identity = component;
+  const tag = jsxName ?? (typeof identity?.displayName === "string" && identity.displayName.startsWith(`${rootName}.`) ? identity.displayName : componentName);
+  const compound = component != null && Object.entries(component).some(([name, part]) => /^[A-Z]/.test(name) && (typeof part === "function" || part !== null && typeof part === "object" && "$$typeof" in part));
+  const example = source?.trim() || (compound && !tag.includes(".") ? null : usageSnippet(tag, args));
+  if (!example) return null;
+  const imports = [...example.matchAll(/import\s*\{([^}]+)\}\s*from\s*(['"])(.*?)\2/g)];
+  const imported = imports.some((match) => match[3] === from && match[1].split(",").some((name) => name.trim() === rootName));
+  return imported ? example : `import { ${rootName} } from '${from}';
+
+${example}`;
+}
+
+// src/story-view.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var StoryBoundary = class extends Component2 {
+  state = { failed: false, message: "" };
+  static getDerivedStateFromError(error) {
+    return { failed: true, message: error instanceof Error ? error.message : String(error) };
+  }
+  componentDidUpdate(previous) {
+    if (this.state.failed && (previous.module !== this.props.module || previous.overrides !== this.props.overrides)) {
+      this.setState({ failed: false, message: "" });
+    }
+  }
+  render() {
+    if (this.state.failed) {
+      return /* @__PURE__ */ jsxs2("div", { className: "story-failed", children: [
+        "\u201C",
+        this.props.story,
+        "\u201D failed to render here: ",
+        this.state.message.slice(0, 240)
+      ] });
+    }
+    return this.props.children;
+  }
+};
+function StoryView({
+  module,
+  story,
+  overrides
+}) {
+  return /* @__PURE__ */ jsx4(StoryBoundary, { story, module, overrides, children: /* @__PURE__ */ jsx4(StoryContent, { module, story, overrides }) }, story);
+}
+function StoryContent({ module, story, overrides }) {
+  const meta = module.default ?? {};
+  const definition = module[story] ?? {};
+  const args = { ...meta.args, ...definition.args, ...overrides };
+  const argTypes = mergeAnnotations(meta.argTypes, definition.argTypes);
+  for (const [name, type] of Object.entries(argTypes)) {
+    const mapping = type.mapping;
+    const map = (value) => {
+      const key = typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : null;
+      return mapping && key !== null && Object.hasOwn(mapping, key) ? mapping[key] : value;
+    };
+    if (Object.hasOwn(args, name)) args[name] = Array.isArray(args[name]) ? args[name].map(map) : map(args[name]);
+  }
+  const context = {
+    args,
+    initialArgs: { ...meta.args, ...definition.args },
+    argTypes,
+    globals: { ...meta.globals, ...definition.globals },
+    parameters: mergeAnnotations(meta.parameters, definition.parameters),
+    name: definition.name ?? story,
+    story: definition.name ?? story,
+    title: meta.title,
+    component: meta.component,
+    viewMode: "story",
+    loaded: {}
+  };
+  const render = definition.render ?? meta.render;
+  const renderStory = (current) => typeof render === "function" ? render(current.args, current) : meta.component ? createElement2(meta.component, current.args) : null;
+  if (!render && !meta.component) return /* @__PURE__ */ jsxs2("div", { className: "story-failed", children: [
+    "Story \u201C",
+    story,
+    "\u201D has nothing to render."
+  ] });
+  const decorators = [
+    ...definition.decorators ?? [],
+    ...meta.decorators ?? []
+  ];
+  const decorated = decorators.reduce(
+    (inner, decorator) => (current) => decorator(
+      (update) => inner({ ...current, ...update }),
+      current
+    ),
+    renderStory
+  );
+  return decorated(context);
+}
+function useStoryModule(entry) {
+  const [module, setModule] = useState2(null);
+  const [error, setError] = useState2(null);
+  useEffect2(() => {
+    let alive = true;
+    setModule(null);
+    setError(null);
+    entry.load().then((loaded) => {
+      if (alive) setModule(loaded);
+    }).catch((cause) => {
+      if (alive) setError(cause instanceof Error ? cause.message : String(cause));
+    });
+    return () => {
+      alive = false;
+    };
+  }, [entry]);
+  return { module, error };
+}
+function LazySection({ children, placeholder = "\u2026" }) {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState2(false);
+  useEffect2(() => {
+    const element = ref.current;
+    if (!element || visible) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setVisible(true);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "640px 0px" }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [visible]);
+  return /* @__PURE__ */ jsx4("div", { ref, children: visible ? children : /* @__PURE__ */ jsx4("div", { className: "lazy-placeholder", children: /* @__PURE__ */ jsx4(Skeleton, { width: 190 }) }) });
+}
+
+// src/toc.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var STORY_PARAM = "story";
+var SCROLL_OFFSET_PX = 76;
+var SETTLE_TICK_MS = 250;
+var SETTLE_TICKS = 16;
+var SETTLE_TOLERANCE_PX = 4;
+var FLASH_MS = 2600;
+var ACTIVE_ROOT_MARGIN = `-${SCROLL_OFFSET_PX}px 0px -60% 0px`;
+function hashPath(hash) {
+  const query = hash.indexOf("?");
+  return query === -1 ? hash : hash.slice(0, query);
+}
+function storyFromHash(hash) {
+  const query = hash.indexOf("?");
+  return query === -1 ? null : new URLSearchParams(hash.slice(query + 1)).get(STORY_PARAM);
+}
+function storyLink(location, story) {
+  const base = `${location.origin}${location.pathname}${location.search}`;
+  return `${base}${hashPath(location.hash)}?${new URLSearchParams({ [STORY_PARAM]: story })}`;
+}
+var slugify = (text) => text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+function useRailFollow(ref, ready = true) {
+  useEffect3(() => {
+    const element = ref.current;
+    if (!element) return;
+    let frame = 0;
+    let applied = 0;
+    const limit = () => window.innerHeight - (Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--sd-header-height")) || 56) - 20;
+    const apply = () => {
+      frame = 0;
+      const bottomInDocument = element.getBoundingClientRect().bottom + window.scrollY - applied;
+      const crossing = bottomInDocument - limit();
+      const next = Math.max(0, window.scrollY - crossing);
+      if (next !== applied) {
+        applied = next;
+        element.style.setProperty("--sd-rail-follow", `${next}px`);
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(apply);
+    };
+    apply();
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    const observer = new ResizeObserver(schedule);
+    observer.observe(element);
+    return () => {
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [ready, ref]);
+}
+function scanPage(root, pageKey) {
+  const used = /* @__PURE__ */ new Set();
+  const unique = (prefix, text) => {
+    const base = `${prefix}-${slugify(text) || "x"}`;
+    let id = base;
+    for (let n = 2; used.has(id); n += 1) id = `${base}-${n}`;
+    used.add(id);
+    return id;
+  };
+  const sections = [];
+  const frames = [];
+  const subHeadings = [...root.querySelectorAll("h3")].filter(
+    (heading) => heading.textContent && !heading.closest(".story-lane") && !heading.closest(".frame")
+  );
+  root.querySelectorAll("h2").forEach((heading) => {
+    if (!heading.textContent) return;
+    if (heading.closest(".story-lane") || heading.closest(".frame")) return;
+    heading.id ||= unique("section", heading.textContent);
+    heading.dataset.toc = "";
+    const section = heading.parentElement?.tagName === "SECTION" ? heading.parentElement : null;
+    const stories = [];
+    section?.querySelectorAll(":scope > .frame").forEach((frame) => {
+      const header = frame.querySelector(":scope > header");
+      const name = header?.querySelector("span")?.textContent;
+      if (!header || !name) return;
+      const story = frame.dataset.story ?? name;
+      frame.id ||= unique("story", story);
+      frame.dataset.toc = "";
+      const item = { id: frame.id, name, story, element: frame };
+      stories.push(item);
+      frames.push(item);
+    });
+    const following = [...root.querySelectorAll("h2, h3")];
+    const start2 = following.indexOf(heading);
+    const end = following.findIndex((candidate, index) => index > start2 && candidate.tagName === "H2");
+    const subs = following.slice(start2 + 1, end === -1 ? void 0 : end).filter((candidate) => candidate.tagName === "H3" && subHeadings.includes(candidate)).map((candidate) => {
+      candidate.id ||= unique("sub", candidate.textContent ?? "");
+      candidate.dataset.toc = "";
+      return { id: candidate.id, title: candidate.textContent ?? "", element: candidate };
+    });
+    sections.push({ id: heading.id, title: heading.textContent, element: section ?? heading, heading, stories, subs });
+  });
+  const counts = /* @__PURE__ */ new Map();
+  for (const item of frames) counts.set(item.name, (counts.get(item.name) ?? 0) + 1);
+  for (const item of frames) {
+    if ((counts.get(item.name) ?? 0) > 1 && item.story && item.story !== item.name) {
+      item.name = `${item.name} \xB7 ${item.story}`;
+    }
+  }
+  return { pageKey, sections, frames };
+}
+var signature = (scan) => `${scan.pageKey}|${scan.sections.map((s) => `${s.id}(${s.subs.map((sub) => sub.id).join("+")}):${s.stories.map((st) => `${st.id}:${st.name}`).join(",")}`).join(";")}`;
+var prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function scrollToElement(element) {
+  element.scrollIntoView({ behavior: prefersReducedMotion() ? "auto" : "smooth", block: "start" });
+  let ticks = SETTLE_TICKS;
+  let lastY = window.scrollY;
+  const settle = () => {
+    if (!element.isConnected || ticks === 0) return;
+    ticks -= 1;
+    const moving = window.scrollY !== lastY;
+    lastY = window.scrollY;
+    if (!moving && Math.abs(element.getBoundingClientRect().top - SCROLL_OFFSET_PX) > SETTLE_TOLERANCE_PX) {
+      element.scrollIntoView({ behavior: "auto", block: "start" });
+      lastY = window.scrollY;
+    }
+    window.setTimeout(settle, SETTLE_TICK_MS);
+  };
+  window.setTimeout(settle, SETTLE_TICK_MS);
+}
+function useActiveIds(scan) {
+  const [active, setActive] = useState3({ section: null, story: null });
+  useEffect3(() => {
+    if (!scan) return;
+    const targets = [...scan.sections.map((s) => s.element), ...scan.frames.map((f) => f.element)];
+    const order = new Map(targets.map((element, index) => [element, index]));
+    const visible = /* @__PURE__ */ new Set();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) entry.isIntersecting ? visible.add(entry.target) : visible.delete(entry.target);
+        const inView = [...visible].sort((a, b) => order.get(a) - order.get(b));
+        const section = scan.sections.find((s) => inView.includes(s.element));
+        const story = scan.frames.find((f) => inView.includes(f.element));
+        if (section || story) setActive((previous) => ({ section: section?.id ?? previous.section, story: story?.id ?? null }));
+      },
+      { rootMargin: ACTIVE_ROOT_MARGIN }
+    );
+    targets.forEach((element) => observer.observe(element));
+    return () => observer.disconnect();
+  }, [scan]);
+  return active;
+}
+function PageRail({ pageKey }) {
+  const [scan, setScan] = useState3(null);
+  const pageKeyRef = useRef2(pageKey);
+  pageKeyRef.current = pageKey;
+  const [target, setTarget] = useState3(() => storyFromHash(window.location.hash));
+  const flashed = useRef2(null);
+  useEffect3(() => {
+    const main = document.querySelector(".main");
+    if (!main) return;
+    let frame = 0;
+    const rescan = () => {
+      frame = 0;
+      setScan((previous) => {
+        const next = scanPage(main, pageKeyRef.current);
+        return previous && signature(previous) === signature(next) ? previous : next;
+      });
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(rescan);
+    };
+    const observer = new MutationObserver(schedule);
+    observer.observe(main, { childList: true, subtree: true });
+    schedule();
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [pageKey]);
+  useEffect3(() => {
+    const onHash = () => setTarget(storyFromHash(window.location.hash));
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+  useEffect3(() => {
+    if (!target || !scan || scan.pageKey !== pageKey) return;
+    const match = scan.frames.find((frame) => frame.story === target) ?? scan.frames.find((frame) => frame.story.toLowerCase() === target.toLowerCase()) ?? scan.frames.find((frame) => frame.name === target) ?? scan.frames.find((frame) => frame.name.toLowerCase() === target.toLowerCase());
+    if (!match) return;
+    scrollToElement(match.element);
+    flashed.current?.classList.remove("toc-flash");
+    match.element.classList.add("toc-flash");
+    flashed.current = match.element;
+    window.setTimeout(() => match.element.classList.remove("toc-flash"), FLASH_MS);
+    setTarget(null);
+  }, [target, scan, pageKey]);
+  const railRef = useRef2(null);
+  useRailFollow(railRef, scan !== null);
+  const active = useActiveIds(scan);
+  const go = useCallback((element) => scrollToElement(element), []);
+  if (!scan) return null;
+  return /* @__PURE__ */ jsx5(Fragment, { children: scan.sections.length > 0 ? /* @__PURE__ */ jsxs3("aside", { className: "toc", "aria-label": "On this page", ref: railRef, children: [
+    /* @__PURE__ */ jsx5("div", { className: "toc-title", children: "On this page" }),
+    /* @__PURE__ */ jsx5("ul", { children: scan.sections.map((section) => /* @__PURE__ */ jsxs3("li", { children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "toc-link",
+          "aria-current": active.section === section.id ? "location" : void 0,
+          onClick: () => go(section.heading),
+          children: section.title
+        }
+      ),
+      section.subs.length > 0 ? /* @__PURE__ */ jsx5("ul", { children: section.subs.map((sub) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5("button", { type: "button", className: "toc-link toc-sub", onClick: () => go(sub.element), children: sub.title }) }, sub.id)) }) : null,
+      section.stories.length > 0 ? /* @__PURE__ */ jsx5("ul", { children: section.stories.map((story) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          className: "toc-link toc-story",
+          "aria-current": active.story === story.id ? "location" : void 0,
+          onClick: () => go(story.element),
+          children: story.name
+        }
+      ) }, story.id)) }) : null
+    ] }, section.id)) })
+  ] }) : null });
+}
+
+// src/component-demo.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var COPIED_MS = 1800;
+async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.className = "toc-clipboard";
+    document.body.append(area);
+    area.select();
+    const copied = document.execCommand("copy");
+    area.remove();
+    return copied;
+  }
+}
+function CopyLink({ name, story }) {
+  const [copied, setCopied] = useState4(false);
+  useEffect4(() => {
+    if (!copied) return;
+    const timer = window.setTimeout(() => setCopied(false), COPIED_MS);
+    return () => window.clearTimeout(timer);
+  }, [copied]);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        className: "toc-copy",
+        "aria-label": `Copy link to ${name}`,
+        onClick: async () => setCopied(await copyText(storyLink(window.location, story))),
+        children: copied ? "Copied" : "Copy link"
+      }
+    ),
+    /* @__PURE__ */ jsx6("span", { role: "status", className: "toc-sr", children: copied ? `Link to ${name} copied` : "" })
+  ] });
+}
+function ControlInput({ control, value, onChange }) {
+  const id = useId();
+  const [invalid, setInvalid] = useState4(false);
+  useEffect4(() => setInvalid(false), [value]);
+  return /* @__PURE__ */ jsxs4("div", { className: "sd-control", children: [
+    /* @__PURE__ */ jsx6("label", { htmlFor: id, children: control.name }),
+    control.type === "select" ? /* @__PURE__ */ jsxs4(
+      "select",
+      {
+        id,
+        value: String(control.options?.findIndex((option) => Object.is(option, value)) ?? -1),
+        onChange: (event) => onChange(control.options?.[Number(event.target.value)]),
+        children: [
+          /* @__PURE__ */ jsx6("option", { value: "-1", disabled: true, children: "\u2014" }),
+          control.options?.map((option, index) => /* @__PURE__ */ jsx6("option", { value: index, children: String(option) }, index))
+        ]
+      }
+    ) : control.type === "boolean" ? /* @__PURE__ */ jsx6("input", { id, type: "checkbox", checked: Boolean(value), onChange: (event) => onChange(event.target.checked) }) : control.type === "object" ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(
+        "textarea",
+        {
+          id,
+          defaultValue: JSON.stringify(value, null, 2) ?? "",
+          "aria-invalid": invalid,
+          "aria-describedby": invalid ? `${id}-error` : void 0,
+          onBlur: (event) => {
+            try {
+              onChange(JSON.parse(event.target.value));
+              setInvalid(false);
+            } catch {
+              setInvalid(true);
+            }
+          }
+        },
+        JSON.stringify(value)
+      ),
+      invalid ? /* @__PURE__ */ jsx6("span", { id: `${id}-error`, role: "status", children: "Enter valid JSON." }) : null
+    ] }) : /* @__PURE__ */ jsx6(
+      "input",
+      {
+        id,
+        type: control.type === "number" || control.type === "range" ? control.type : "text",
+        min: control.min,
+        max: control.max,
+        step: control.step ?? (control.type === "number" ? "any" : void 0),
+        value: typeof value === "string" || typeof value === "number" ? value : "",
+        onChange: (event) => onChange(control.type === "number" || control.type === "range" ? event.target.value === "" ? void 0 : event.target.valueAsNumber : event.target.value)
+      }
+    )
+  ] });
+}
+function hasHorizontalOverflow({ scrollWidth, clientWidth }) {
+  return scrollWidth > clientWidth;
+}
+function ComponentDemo({
+  story,
+  storyName,
+  authoredStory,
+  skipped,
+  controls,
+  args,
+  unavailable,
+  changed,
+  onControlChange,
+  onReset,
+  storyLayout,
+  snippet,
+  codeLanguage,
+  children
+}) {
+  const [codeOpen, setCodeOpen] = useState4(false);
+  const controlsLabelId = useId();
+  const canvasRef = useRef3(null);
+  const [scrollable, setScrollable] = useState4(false);
+  useEffect4(() => {
+    const canvas = canvasRef.current;
+    const content = canvas?.firstElementChild;
+    if (!canvas || !content) return;
+    const measure = () => setScrollable(hasHorizontalOverflow(canvas));
+    let frame = 0;
+    const scheduleMeasure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    measure();
+    const resize = new ResizeObserver(scheduleMeasure);
+    resize.observe(canvas);
+    resize.observe(content);
+    const mutations = new MutationObserver(scheduleMeasure);
+    mutations.observe(content, { childList: true, subtree: true, attributes: true, characterData: true });
+    return () => {
+      resize.disconnect();
+      mutations.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [children, story]);
+  const [laneLayout, setLaneLayout] = useState4(storyLayout);
+  const laneRef = useCallback2(
+    (node) => {
+      if (!node) return;
+      const content = node.firstElementChild;
+      if (!(content instanceof HTMLElement)) return;
+      setLaneLayout(storyLayout !== "fullscreen" && /^inline/.test(getComputedStyle(content).display) ? "inline" : storyLayout);
+    },
+    [storyLayout]
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "frame", "data-story": story, children: [
+    /* @__PURE__ */ jsxs4("header", { children: [
+      /* @__PURE__ */ jsx6("span", { children: storyName }),
+      /* @__PURE__ */ jsx6("span", { "data-toc-slot": "", children: /* @__PURE__ */ jsx6(CopyLink, { name: storyName, story }) })
+    ] }),
+    authoredStory ? /* @__PURE__ */ jsx6("p", { className: "story-blurb", children: authoredStory }) : null,
+    skipped.length ? /* @__PURE__ */ jsxs4("p", { className: "sd-controls-note", children: [
+      "Not run here: ",
+      skipped.join(", "),
+      ". See it in Storybook."
+    ] }) : null,
+    unavailable ? /* @__PURE__ */ jsx6("p", { className: "sd-controls-note", children: unavailable }) : /* @__PURE__ */ jsxs4("div", { className: "sd-controls", role: "group", "aria-labelledby": controlsLabelId, children: [
+      /* @__PURE__ */ jsxs4("p", { className: "sd-controls-label", id: controlsLabelId, children: [
+        "Controls for ",
+        storyName
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "sd-controls-fields", children: [
+        controls.map((control) => /* @__PURE__ */ jsx6(
+          ControlInput,
+          {
+            control,
+            value: args[control.name],
+            onChange: (value) => onControlChange(control.name, value)
+          },
+          control.name
+        )),
+        /* @__PURE__ */ jsx6("button", { className: "sd-controls-reset", type: "button", disabled: !changed, onClick: onReset, children: "Reset" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "shot",
+        "data-layout": storyLayout,
+        ref: canvasRef,
+        tabIndex: scrollable ? 0 : void 0,
+        role: scrollable ? "region" : void 0,
+        "aria-label": scrollable ? storyName : void 0,
+        children: /* @__PURE__ */ jsx6(LazySection, { children: /* @__PURE__ */ jsx6("div", { className: "story-lane", "data-layout": laneLayout, ref: laneRef, children }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs4("details", { className: "code-toggle", onToggle: (event) => setCodeOpen(event.currentTarget.open), children: [
+      /* @__PURE__ */ jsx6("summary", { children: /* @__PURE__ */ jsx6("span", { className: "sd-demo-code-actions", children: "Code" }) }),
+      codeOpen ? /* @__PURE__ */ jsx6("div", { className: "sd-demo-code", children: snippet ? /* @__PURE__ */ jsx6(CodeBlock, { code: snippet, language: codeLanguage, label: `${storyName} code` }) : /* @__PURE__ */ jsx6("p", { children: "No usage code is authored for this component." }) }) : null
+    ] })
+  ] });
+}
+
+// src/controls.tsx
+import { storySource } from "virtual:storybook-docs/catalog";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function parseDefault(value) {
+  const text = value.trim();
+  if (text === "undefined" || text === "") return void 0;
+  try {
+    return JSON.parse(text);
+  } catch {
+    if (text.startsWith("'") && text.endsWith("'") && !text.slice(1, -1).includes("'")) return text.slice(1, -1);
+  }
+  return void 0;
+}
+function defaultsFromProps(props = []) {
+  const defaults = {};
+  for (const prop of Array.isArray(props) ? props : []) {
+    const declared = prop?.defaultValue;
+    const text = typeof declared === "string" ? declared : declared?.value;
+    if (typeof text === "string") {
+      const value = parseDefault(text);
+      if (value !== void 0) defaults[prop.name] = value;
+    }
+  }
+  return defaults;
+}
+function getStoryControls(meta, story, componentDefaults = {}) {
+  const args = { ...componentDefaults, ...meta.args, ...story.args };
+  const controls = [];
+  for (const [name, raw] of Object.entries(mergeAnnotations(meta.argTypes, story.argTypes))) {
+    const definition = raw;
+    const control = definition.control;
+    if (control === false || control === null) continue;
+    const type = typeof control === "string" ? control : control && typeof control === "object" && "type" in control ? control.type : void 0;
+    if (type === "boolean" || type === "number" || type === "text" || type === "string") {
+      controls.push({ name, type: type === "string" ? "text" : type });
+    } else if ((type === "select" || type === "radio" || type === "inline-radio") && Array.isArray(definition.options) && definition.options.length > 0) {
+      controls.push({ name, type: "select", options: definition.options });
+    } else if (type === "range") {
+      const settings = control;
+      controls.push({ name, type, min: settings.min, max: settings.max, step: settings.step });
+    } else if (type === "object") {
+      controls.push({ name, type });
+    } else {
+      continue;
+    }
+    if (!Object.hasOwn(args, name) && Object.hasOwn(definition, "defaultValue")) args[name] = definition.defaultValue;
+  }
+  return {
+    args,
+    controls,
+    unavailable: controls.length === 0 ? "No controls." : null
+  };
+}
+function ControlledStoryFrame({ module, story, componentName, componentDefaults }) {
+  const meta = module.default ?? {};
+  const definition = module[story] ?? {};
+  const { args: defaults, controls, unavailable } = getStoryControls(meta, definition, componentDefaults);
+  const [edits, setEdits] = useState5({});
+  const args = { ...defaults, ...edits };
+  const changed = Object.entries(edits).some(([name, value]) => !Object.is(value, defaults[name]));
+  const requestedLayout = definition.parameters?.layout ?? meta.parameters?.layout;
+  const storyLayout = requestedLayout === "centered" || requestedLayout === "fullscreen" ? requestedLayout : "padded";
+  const docsOverride = definition.parameters?.docs;
+  const docsMeta = meta.parameters?.docs;
+  const authoredCode = docsOverride?.source?.code ?? docsMeta?.source?.code;
+  const authoredStory = docsOverride?.description?.story ?? docsMeta?.description?.story;
+  const storyName = definition.name ?? story;
+  const skipped = ["loaders", "beforeEach"].filter((key) => meta[key] || definition[key]);
+  if (definition.parameters?.viewport ?? meta.parameters?.viewport) skipped.push("viewport");
+  const codeLanguage = docsOverride?.source?.language ?? docsMeta?.source?.language ?? "tsx";
+  const snippet = buildUsageSnippet({
+    componentName,
+    from: storySource,
+    args: { ...meta.args, ...definition.args, ...edits },
+    source: authoredCode,
+    // A story name is not a component name: only a part-qualified name (the rare `Dialog.Content`
+    // story) is worth using as the JSX tag, otherwise the component's own name is the honest one.
+    jsxName: storyName.includes(".") ? storyName : void 0,
+    component: meta.component
+  });
+  return /* @__PURE__ */ jsx7(
+    ComponentDemo,
+    {
+      story,
+      storyName,
+      authoredStory,
+      skipped,
+      controls,
+      args,
+      unavailable,
+      changed,
+      storyLayout,
+      snippet,
+      codeLanguage,
+      onControlChange: (name, value) => setEdits((current) => ({ ...current, [name]: value })),
+      onReset: () => setEdits({}),
+      children: /* @__PURE__ */ jsx7(StoryView, { module, story, overrides: edits })
+    }
+  );
+}
+
+// src/props.ts
+import { useEffect as useEffect5, useState as useState6 } from "react";
+import { loadProps } from "virtual:storybook-docs/props";
+function useProps(slug) {
+  const [components, setComponents] = useState6(null);
+  useEffect5(() => {
+    let alive = true;
+    setComponents(null);
+    loadProps(slug).then((module) => {
+      if (alive) setComponents(module.components);
+    }).catch(() => {
+      if (alive) setComponents([]);
+    });
+    return () => {
+      alive = false;
+    };
+  }, [slug]);
+  return components;
+}
+
+// src/pages/component-page.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function formatValue(value) {
+  if (value === void 0) return "\u2014";
+  if (typeof value === "function") return "fn()";
+  if (typeof value === "string") return value.length > 40 ? `${value.slice(0, 37)}\u2026` : value;
+  if (typeof value === "object" && value !== null) {
+    if ("$$typeof" in value) return "<ReactNode>";
+    if (Array.isArray(value)) return `[${value.length}]`;
+    return "{\u2026}";
+  }
+  return String(value);
+}
+function TableFrame({ label, children }) {
+  return /* @__PURE__ */ jsx8("div", { className: "table-scroll", role: "region", "aria-label": label, tabIndex: 0, children: /* @__PURE__ */ jsxs5("table", { children: [
+    /* @__PURE__ */ jsx8("caption", { className: "sr-only", children: label }),
+    children
+  ] }) });
+}
+function PropNotes({ prop }) {
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    prop.description ? /* @__PURE__ */ jsx8(MarkdownView, { markdown: prop.description }) : null,
+    prop.tags?.map((tag, index) => /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8("strong", { children: tag.name === "deprecated" ? "Deprecated" : tag.name === "since" ? "Since" : "Example" }),
+      tag.name === "example" ? /* @__PURE__ */ jsx8("pre", { children: /* @__PURE__ */ jsx8("code", { children: tag.text }) }) : tag.text ? /* @__PURE__ */ jsx8(MarkdownView, { markdown: tag.text }) : null
+    ] }, `${tag.name}:${index}`)),
+    prop.inheritedFrom ? /* @__PURE__ */ jsxs5("small", { children: [
+      "Inherited from ",
+      /* @__PURE__ */ jsx8("code", { children: prop.inheritedFrom })
+    ] }) : null,
+    !prop.description && !prop.tags?.length && !prop.inheritedFrom ? "\u2014" : null
+  ] });
+}
+function PropRows({ props }) {
+  return props.map((prop) => /* @__PURE__ */ jsxs5("tr", { children: [
+    /* @__PURE__ */ jsxs5("th", { scope: "row", children: [
+      /* @__PURE__ */ jsx8("code", { children: prop.name }),
+      prop.required ? /* @__PURE__ */ jsx8("span", { className: "req", children: "required" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs5("td", { children: [
+      /* @__PURE__ */ jsx8("code", { className: "type", children: prop.typeUnavailable ? "Not resolved" : prop.type }),
+      prop.members?.length ? /* @__PURE__ */ jsxs5("details", { children: [
+        /* @__PURE__ */ jsx8("summary", { children: prop.name === "slotProps" ? "Slots" : "Fields" }),
+        /* @__PURE__ */ jsx8("dl", { children: prop.members.map((member) => /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsxs5("dt", { children: [
+            /* @__PURE__ */ jsx8("code", { children: member.name }),
+            member.required ? " (required)" : ""
+          ] }),
+          /* @__PURE__ */ jsxs5("dd", { children: [
+            /* @__PURE__ */ jsx8("code", { children: member.type }),
+            /* @__PURE__ */ jsx8(PropNotes, { prop: member })
+          ] })
+        ] }, member.name)) })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx8("td", { children: /* @__PURE__ */ jsx8("code", { children: prop.defaultValue === "undefined" ? "\u2014" : prop.defaultValue ?? "\u2014" }) }),
+    /* @__PURE__ */ jsx8("td", { children: /* @__PURE__ */ jsx8(PropNotes, { prop }) })
+  ] }, prop.name));
+}
+function PropsTable({
+  components,
+  argTypes,
+  defaultArgs
+}) {
+  if (components === null) {
+    return /* @__PURE__ */ jsx8("div", { className: "skeleton-page", "aria-busy": "true", children: /* @__PURE__ */ jsx8(Skeleton, { lines: 4, height: 14 }) });
+  }
+  if (components && components.length > 0) {
+    const single = components.length === 1;
+    return /* @__PURE__ */ jsx8(Fragment3, { children: components.map((component) => /* @__PURE__ */ jsxs5("section", { children: [
+      !single ? /* @__PURE__ */ jsx8("h3", { children: component.name }) : null,
+      component.native ? /* @__PURE__ */ jsxs5("p", { className: "hint", children: [
+        "Native element: ",
+        /* @__PURE__ */ jsxs5("code", { children: [
+          "<",
+          component.native,
+          ">"
+        ] }),
+        "."
+      ] }) : null,
+      component.props.some((prop) => !prop.inheritedFrom) ? /* @__PURE__ */ jsxs5(TableFrame, { label: `${component.name} props`, children: [
+        /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+          /* @__PURE__ */ jsx8("th", { scope: "col", children: "Prop" }),
+          /* @__PURE__ */ jsx8("th", { scope: "col", children: "Type" }),
+          /* @__PURE__ */ jsx8("th", { scope: "col", children: "Default" }),
+          /* @__PURE__ */ jsx8("th", { scope: "col", children: "Notes" })
+        ] }) }),
+        /* @__PURE__ */ jsx8("tbody", { children: /* @__PURE__ */ jsx8(PropRows, { props: component.props.filter((prop) => !prop.inheritedFrom) }) })
+      ] }) : /* @__PURE__ */ jsx8("p", { children: "No component-specific props." }),
+      component.props.some((prop) => prop.inheritedFrom) ? /* @__PURE__ */ jsxs5("details", { children: [
+        /* @__PURE__ */ jsxs5("summary", { children: [
+          "Inherited props (",
+          component.props.filter((prop) => prop.inheritedFrom).length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs5(TableFrame, { label: `${component.name} inherited props`, children: [
+          /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+            /* @__PURE__ */ jsx8("th", { scope: "col", children: "Prop" }),
+            /* @__PURE__ */ jsx8("th", { scope: "col", children: "Type" }),
+            /* @__PURE__ */ jsx8("th", { scope: "col", children: "Default" }),
+            /* @__PURE__ */ jsx8("th", { scope: "col", children: "Notes" })
+          ] }) }),
+          /* @__PURE__ */ jsx8("tbody", { children: /* @__PURE__ */ jsx8(PropRows, { props: component.props.filter((prop) => prop.inheritedFrom) }) })
+        ] })
+      ] }) : null
+    ] }, component.name)) });
+  }
+  if (Object.keys(argTypes).length > 0) {
+    return /* @__PURE__ */ jsxs5(TableFrame, { label: "Props", children: [
+      /* @__PURE__ */ jsx8("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+        /* @__PURE__ */ jsx8("th", { scope: "col", children: "Prop" }),
+        /* @__PURE__ */ jsx8("th", { scope: "col", children: "Control" }),
+        /* @__PURE__ */ jsx8("th", { scope: "col", children: "Options" }),
+        /* @__PURE__ */ jsx8("th", { scope: "col", children: "Default" })
+      ] }) }),
+      /* @__PURE__ */ jsx8("tbody", { children: Object.entries(argTypes).map(([prop, definition]) => /* @__PURE__ */ jsxs5("tr", { children: [
+        /* @__PURE__ */ jsx8("th", { scope: "row", children: /* @__PURE__ */ jsx8("code", { children: prop }) }),
+        /* @__PURE__ */ jsx8("td", { children: formatValue(definition.control) }),
+        /* @__PURE__ */ jsx8("td", { children: Array.isArray(definition.options) ? definition.options.map((option) => formatValue(option)).join(" | ") : "\u2014" }),
+        /* @__PURE__ */ jsx8("td", { children: formatValue(defaultArgs[prop]) })
+      ] }, prop)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx8("p", { children: "No props." });
+}
+function ComponentPage({ entry }) {
+  const { module, error } = useStoryModule(entry);
+  const props = useProps(entry.slug);
+  const meta = module?.default ?? {};
+  const argTypes = meta.argTypes ?? {};
+  const defaultArgs = meta.args ?? {};
+  const description = meta.parameters?.docs?.description?.component;
+  const usage = meta.parameters?.docs?.usage;
+  const visibleStories = useMemo3(() => {
+    if (!module) return entry.stories;
+    const metaTags = (meta.tags ?? []).map(String);
+    return entry.stories.filter((name) => {
+      const storyTags = (module[name]?.tags ?? []).map(String);
+      return ![...metaTags, ...storyTags].includes("!autodocs");
+    });
+  }, [entry.stories, meta, module]);
+  const componentDefaults = useMemo3(
+    () => defaultsFromProps(props?.find((component) => component.name === entry.name)?.props ?? []),
+    [props, entry.name]
+  );
+  const example = selectExample(visibleStories.map((name) => ({
+    name,
+    description: module?.[name]?.parameters?.docs?.description?.story,
+    args: { ...defaultArgs, ...module?.[name]?.args },
+    play: module?.[name]?.play
+  })), Object.keys(meta.component ?? {}), props === null ? null : componentDefaults);
+  const sections = useMemo3(() => sectionStories(visibleStories.filter((story) => story !== example)), [visibleStories, example]);
+  const defaultStory = module?.[visibleStories.find((name) => /^default$/i.test(name)) ?? example ?? ""] ?? {};
+  const fallbackSource = visibleStories.map((name) => module?.[name]?.parameters?.docs?.source).find((source2) => source2?.code?.trim());
+  const source = {
+    code: defaultStory.parameters?.docs?.source?.code ?? meta.parameters?.docs?.source?.code ?? fallbackSource?.code,
+    language: defaultStory.parameters?.docs?.source?.language ?? meta.parameters?.docs?.source?.language ?? fallbackSource?.language
+  };
+  const codeLanguage = source?.language ?? "tsx";
+  const snippet = useMemo3(
+    () => entry.hasComponent ? buildUsageSnippet({
+      componentName: entry.name,
+      from: storySource2,
+      component: meta.component,
+      source: source?.code,
+      args: { ...defaultArgs, ...defaultStory.args }
+    }) : null,
+    [source?.code, entry.name, entry.hasComponent, defaultArgs, defaultStory.args, meta.component]
+  );
+  const propCount = props ? props.reduce((total, component) => total + component.props.filter((prop) => !prop.inheritedFrom).length, 0) : Object.keys(argTypes).length;
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "crumb", children: [
+      entry.group,
+      " / ",
+      entry.name
+    ] }),
+    /* @__PURE__ */ jsx8("h1", { children: entry.name }),
+    /* @__PURE__ */ jsxs5("div", { className: "summary-row", children: [
+      /* @__PURE__ */ jsxs5("span", { className: "chip", children: [
+        module ? visibleStories.length : entry.stories.length,
+        " stories"
+      ] }),
+      /* @__PURE__ */ jsxs5("span", { className: "chip", children: [
+        propCount,
+        " props"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8("p", { className: "lede", children: description ?? `${entry.name} \u2014 every story in ${entry.storybookTitle} is rendered below, in sections.` }),
+    error ? /* @__PURE__ */ jsxs5("div", { className: "story-failed", children: [
+      "Could not load the story module: ",
+      error
+    ] }) : null,
+    !module && !error ? /* @__PURE__ */ jsxs5("div", { className: "skeleton-page", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsx8(Skeleton, { width: 260, height: 16 }),
+      /* @__PURE__ */ jsx8(Skeleton, { height: 150 }),
+      /* @__PURE__ */ jsx8(Skeleton, { height: 150 })
+    ] }) : null,
+    module ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      example ? /* @__PURE__ */ jsx8(ControlledStoryFrame, { module, story: example, componentName: entry.name, componentDefaults }, `${entry.slug}:${example}`) : null,
+      entry.hasComponent ? /* @__PURE__ */ jsx8("h2", { children: "Usage" }) : null,
+      snippet ? /* @__PURE__ */ jsx8(CodeBlock, { code: snippet, language: codeLanguage }) : entry.hasComponent ? /* @__PURE__ */ jsx8("p", { children: "No usage code is authored for this component." }) : null,
+      usage ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        entry.hasComponent ? null : /* @__PURE__ */ jsx8("h2", { children: "Usage" }),
+        /* @__PURE__ */ jsx8(MarkdownView, { markdown: usage })
+      ] }) : null,
+      /* @__PURE__ */ jsx8(Guidance, { slug: entry.slug }),
+      sections.map((section) => /* @__PURE__ */ jsxs5("section", { children: [
+        /* @__PURE__ */ jsx8("h2", { children: section.title }),
+        section.stories.map((story) => /* @__PURE__ */ jsx8(ControlledStoryFrame, { module, story, componentName: entry.name, componentDefaults }, `${entry.slug}:${story}`))
+      ] }, section.title))
+    ] }) : null,
+    /* @__PURE__ */ jsx8("h2", { children: "Props" }),
+    /* @__PURE__ */ jsx8(PropsTable, { components: props, argTypes, defaultArgs }),
+    /* @__PURE__ */ jsx8("h2", { children: "Notes" }),
+    /* @__PURE__ */ jsx8("p", { children: "Everything above is generated from this component\u2019s story module and source files. Editorial judgement \u2014 when to reach for it, when not to \u2014 is written next to the code and rendered as guidance above." })
+  ] });
+}
+
+// src/pages/foundations-color.tsx
+import { vars } from "virtual:storybook-docs/tokens";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var colorSection = vars.color;
+var roles = Object.entries(colorSection ?? {}).sort(([a], [b]) => a.localeCompare(b));
+function ColorPage() {
+  return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    /* @__PURE__ */ jsx9("div", { className: "crumb", children: "Foundations / Color" }),
+    /* @__PURE__ */ jsx9("h1", { children: "Color" }),
+    /* @__PURE__ */ jsx9("p", { className: "lede", children: "The design system's colour roles." }),
+    /* @__PURE__ */ jsx9("h2", { children: "Roles" }),
+    /* @__PURE__ */ jsx9("div", { className: "swatches", children: roles.map(([role, reference]) => /* @__PURE__ */ jsxs6("div", { className: "sw", children: [
+      /* @__PURE__ */ jsx9("div", { className: "c", style: { background: reference } }),
+      /* @__PURE__ */ jsxs6("div", { className: "n", children: [
+        /* @__PURE__ */ jsx9("b", { children: role }),
+        reference
+      ] })
+    ] }, role)) }),
+    /* @__PURE__ */ jsx9("h2", { children: "Rules" }),
+    /* @__PURE__ */ jsxs6("ul", { children: [
+      /* @__PURE__ */ jsx9("li", { children: "Components read token roles; the application decides the theme (an attribute on the root, or a scoped theme wrapper)." }),
+      /* @__PURE__ */ jsx9("li", { children: "Control boundaries hold \u22653:1 against both the page and the control interior (WCAG 1.4.11)." }),
+      /* @__PURE__ */ jsx9("li", { children: "Raw values live in the token source only \u2014 this page is where they are allowed to be visible." }),
+      /* @__PURE__ */ jsx9("li", { children: "State is never signalled by color alone; tones pair with glyphs, text or outlines." })
+    ] })
+  ] });
+}
+
+// src/pages/foundations-effects.tsx
+import { vars as vars2 } from "virtual:storybook-docs/tokens";
+import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var token = vars2;
+var shadow = Object.entries(token.shadow ?? {});
+var motion = token.motion ?? {};
+var duration = Object.entries(motion.duration ?? {});
+var easing = Object.entries(motion.ease ?? motion.easing ?? {});
+function EffectsPage() {
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    /* @__PURE__ */ jsx10("div", { className: "crumb", children: "Foundations / Elevation & motion" }),
+    /* @__PURE__ */ jsx10("h1", { children: "Elevation & motion" }),
+    /* @__PURE__ */ jsx10("p", { className: "lede", children: "Shadow roles and motion timings." }),
+    shadow.length > 0 ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsx10("h2", { children: "Elevation" }),
+      /* @__PURE__ */ jsx10("div", { className: "shadow-row", children: shadow.map(([name, reference]) => /* @__PURE__ */ jsxs7("div", { className: "shadow-cell", children: [
+        /* @__PURE__ */ jsx10("span", { className: "shadow-box", style: { boxShadow: reference } }),
+        /* @__PURE__ */ jsxs7("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] })
+      ] }, name)) })
+    ] }) : null,
+    duration.length > 0 ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsx10("h2", { children: "Durations" }),
+      /* @__PURE__ */ jsx10("div", { className: "scale-rows", children: duration.map(([name, reference]) => /* @__PURE__ */ jsxs7("div", { className: "space-row", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] }),
+        /* @__PURE__ */ jsx10("span", { className: "motion-demo", style: { animationDuration: reference } })
+      ] }, name)) })
+    ] }) : null,
+    easing.length > 0 ? /* @__PURE__ */ jsxs7(Fragment5, { children: [
+      /* @__PURE__ */ jsx10("h2", { children: "Easing" }),
+      /* @__PURE__ */ jsx10("div", { className: "scale-rows", children: easing.map(([name, reference]) => /* @__PURE__ */ jsxs7("div", { className: "space-row", children: [
+        /* @__PURE__ */ jsxs7("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] }),
+        /* @__PURE__ */ jsx10("code", { children: reference })
+      ] }, name)) })
+    ] }) : null,
+    /* @__PURE__ */ jsx10("h2", { children: "Rules" }),
+    /* @__PURE__ */ jsxs7("ul", { children: [
+      /* @__PURE__ */ jsx10("li", { children: "Motion is a hint, never a requirement: every animation needs a reduced-motion branch that still completes the lifecycle." }),
+      /* @__PURE__ */ jsxs7("li", { children: [
+        "Transitions list the properties they animate \u2014 never ",
+        /* @__PURE__ */ jsx10("code", { children: "transition: all" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsx10("li", { children: "Elevation encodes layering, not decoration: overlays sit above content, and the shadow role says how far." })
+    ] })
+  ] });
+}
+
+// src/pages/foundations-spacing.tsx
+import { vars as vars3 } from "virtual:storybook-docs/tokens";
+import { Fragment as Fragment6, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var token2 = vars3;
+var space = Object.entries(token2.space ?? {});
+var radius = Object.entries(token2.radius ?? {});
+var sizes = Object.entries(token2.size ?? {});
+function SpacingPage() {
+  return /* @__PURE__ */ jsxs8(Fragment6, { children: [
+    /* @__PURE__ */ jsx11("div", { className: "crumb", children: "Foundations / Spacing & shape" }),
+    /* @__PURE__ */ jsx11("h1", { children: "Spacing & shape" }),
+    /* @__PURE__ */ jsx11("p", { className: "lede", children: "The space scale, corner radii and fixed sizes." }),
+    space.length > 0 ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
+      /* @__PURE__ */ jsx11("h2", { children: "Space scale" }),
+      /* @__PURE__ */ jsx11("div", { className: "scale-rows", children: space.map(([name, reference]) => /* @__PURE__ */ jsxs8("div", { className: "space-row", children: [
+        /* @__PURE__ */ jsxs8("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] }),
+        /* @__PURE__ */ jsx11("span", { className: "bar", style: { width: reference, background: "var(--sd-accent)" } }),
+        /* @__PURE__ */ jsx11("span", { className: "bar-outline", style: { width: reference } })
+      ] }, name)) })
+    ] }) : /* @__PURE__ */ jsx11("p", { children: "No space tokens were found in the configured token module." }),
+    radius.length > 0 ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
+      /* @__PURE__ */ jsx11("h2", { children: "Radii" }),
+      /* @__PURE__ */ jsx11("div", { className: "radius-row", children: radius.map(([name, reference]) => /* @__PURE__ */ jsxs8("div", { className: "radius-cell", children: [
+        /* @__PURE__ */ jsx11("span", { className: "radius-box", style: { borderRadius: reference } }),
+        /* @__PURE__ */ jsxs8("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] })
+      ] }, name)) })
+    ] }) : null,
+    sizes.length > 0 ? /* @__PURE__ */ jsxs8(Fragment6, { children: [
+      /* @__PURE__ */ jsx11("h2", { children: "Sizes" }),
+      /* @__PURE__ */ jsx11("div", { className: "scale-rows", children: sizes.map(([name, reference]) => /* @__PURE__ */ jsxs8("div", { className: "space-row", children: [
+        /* @__PURE__ */ jsxs8("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] }),
+        /* @__PURE__ */ jsx11("span", { className: "bar-outline", style: { width: reference } })
+      ] }, name)) })
+    ] }) : null,
+    /* @__PURE__ */ jsx11("h2", { children: "Rules" }),
+    /* @__PURE__ */ jsxs8("ul", { children: [
+      /* @__PURE__ */ jsx11("li", { children: "Spacing between siblings comes from the scale; arbitrary pixel gaps are a smell." }),
+      /* @__PURE__ */ jsx11("li", { children: "Radii follow the token roles so dense and roomy surfaces stay consistent." }),
+      /* @__PURE__ */ jsx11("li", { children: "Fixed sizes exist for hit targets \u2014 interactive controls stay at or above the minimum target size." })
+    ] })
+  ] });
+}
+
+// src/pages/foundations-type.tsx
+import { vars as vars4 } from "virtual:storybook-docs/tokens";
+import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var token3 = vars4;
+var sizes2 = Object.entries(token3.textSize ?? {});
+var weights = Object.entries(token3.fontWeight ?? {});
+var families = Object.entries(token3.font ?? {});
+function TypePage() {
+  return /* @__PURE__ */ jsxs9(Fragment7, { children: [
+    /* @__PURE__ */ jsx12("div", { className: "crumb", children: "Foundations / Typography" }),
+    /* @__PURE__ */ jsx12("h1", { children: "Typography" }),
+    /* @__PURE__ */ jsx12("p", { className: "lede", children: "The type scale, weights and families." }),
+    families.length > 0 ? /* @__PURE__ */ jsxs9(Fragment7, { children: [
+      /* @__PURE__ */ jsx12("h2", { children: "Family" }),
+      families.map(([name, reference]) => /* @__PURE__ */ jsxs9("div", { className: "scale-row", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] }),
+        /* @__PURE__ */ jsx12("span", { style: { fontFamily: reference, fontSize: "20px" }, children: "The quick brown fox jumps over the lazy dog" })
+      ] }, name))
+    ] }) : null,
+    /* @__PURE__ */ jsx12("h2", { children: "Scale" }),
+    sizes2.length > 0 ? sizes2.map(([name, reference]) => /* @__PURE__ */ jsxs9("div", { className: "scale-row", children: [
+      /* @__PURE__ */ jsxs9("span", { className: "meta", children: [
+        name,
+        " \xB7 ",
+        reference
+      ] }),
+      /* @__PURE__ */ jsx12("span", { style: { fontSize: reference }, children: "Save changes \xB7 0123456789" })
+    ] }, name)) : /* @__PURE__ */ jsx12("p", { children: "No text-size tokens were found in the configured token module." }),
+    weights.length > 0 ? /* @__PURE__ */ jsxs9(Fragment7, { children: [
+      /* @__PURE__ */ jsx12("h2", { children: "Weights" }),
+      weights.map(([name, reference]) => /* @__PURE__ */ jsxs9("div", { className: "scale-row", children: [
+        /* @__PURE__ */ jsxs9("span", { className: "meta", children: [
+          name,
+          " \xB7 ",
+          reference
+        ] }),
+        /* @__PURE__ */ jsx12("span", { style: { fontWeight: reference, fontSize: "18px" }, children: "Design system documentation" })
+      ] }, name))
+    ] }) : null,
+    /* @__PURE__ */ jsx12("h2", { children: "Rules" }),
+    /* @__PURE__ */ jsxs9("ul", { children: [
+      /* @__PURE__ */ jsx12("li", { children: "Sizes and line-heights come from tokens; components never set raw font sizes." }),
+      /* @__PURE__ */ jsx12("li", { children: "Numbers that update live use tabular figures so they do not jitter." })
+    ] })
+  ] });
+}
+
+// src/pages/overview.tsx
+import { catalog, groups, stats } from "virtual:storybook-docs/catalog";
+import { site } from "virtual:storybook-docs/site";
+
+// src/base.ts
+var STORYBOOK_DOCS_BASE = (() => {
+  const globalBase = globalThis.__STORYBOOK_DOCS_BASE__;
+  if (globalBase) return globalBase.replace(/\/$/, "");
+  const { pathname } = window.location;
+  return pathname === "/" || pathname.endsWith(".html") ? "" : pathname.replace(/\/$/, "");
+})();
+var hrefFor = (path) => `${STORYBOOK_DOCS_BASE}${path}`;
+
+// src/pages/overview.tsx
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function OverviewPage() {
+  const startHere = catalog.slice(0, 6);
+  return /* @__PURE__ */ jsxs10(Fragment8, { children: [
+    /* @__PURE__ */ jsx13("div", { className: "crumb", children: "Overview" }),
+    /* @__PURE__ */ jsx13("h1", { children: site.title }),
+    site.tagline ? /* @__PURE__ */ jsx13("p", { className: "lede", children: site.tagline }) : null,
+    /* @__PURE__ */ jsx13(Guidance, { slug: "index" }),
+    /* @__PURE__ */ jsxs10("div", { className: "tiles", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "card tile", children: [
+        /* @__PURE__ */ jsx13("div", { className: "num", children: stats.components }),
+        /* @__PURE__ */ jsx13("b", { children: "Components" })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "card tile", children: [
+        /* @__PURE__ */ jsx13("div", { className: "num", children: stats.stories }),
+        /* @__PURE__ */ jsx13("b", { children: "Stories" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13("h2", { children: "Browse by area" }),
+    /* @__PURE__ */ jsx13("div", { className: "group-grid", children: groups.map((group) => {
+      const inGroup = catalog.filter((entry) => entry.group === group);
+      const shown = inGroup.slice(0, 6);
+      return /* @__PURE__ */ jsxs10("div", { className: "card group-card", children: [
+        /* @__PURE__ */ jsxs10("h3", { children: [
+          group,
+          " ",
+          /* @__PURE__ */ jsx13("span", { className: "count", children: inGroup.length })
+        ] }),
+        /* @__PURE__ */ jsx13("ul", { children: shown.map((entry) => /* @__PURE__ */ jsx13("li", { children: /* @__PURE__ */ jsx13("a", { href: `#${hrefFor(`/components/${entry.slug}`)}`, children: entry.name }) }, entry.slug)) }),
+        inGroup.length > shown.length ? /* @__PURE__ */ jsxs10("p", { className: "hint", children: [
+          "+ ",
+          inGroup.length - shown.length,
+          " more in this area"
+        ] }) : null
+      ] }, group);
+    }) }),
+    /* @__PURE__ */ jsx13("h2", { children: "How this works" }),
+    /* @__PURE__ */ jsxs10("div", { className: "grid2", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "card", children: [
+        /* @__PURE__ */ jsx13("h3", { children: "1 \xB7 The config points at the stories" }),
+        /* @__PURE__ */ jsxs10("p", { children: [
+          "The host app declares where its story files live (a package name or a path) and a glob inside it. The Vite plugin reads them, takes each module's ",
+          /* @__PURE__ */ jsx13("code", { children: "title" }),
+          " and exported stories, and builds the sidebar \u2014 including any group renames, so authored titles can stay as they are."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "card", children: [
+        /* @__PURE__ */ jsx13("h3", { children: "2 \xB7 Examples are the story modules" }),
+        /* @__PURE__ */ jsxs10("p", { children: [
+          "Opening a component lazily imports the same module Storybook renders and evaluates it here: the meta's",
+          " ",
+          /* @__PURE__ */ jsx13("code", { children: "component" }),
+          ", merged ",
+          /* @__PURE__ */ jsx13("code", { children: "args" }),
+          ", or the story's own ",
+          /* @__PURE__ */ jsx13("code", { children: "render" }),
+          ". A design system gets a docs page without writing one."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "card", children: [
+        /* @__PURE__ */ jsx13("h3", { children: "3 \xB7 API tables are argTypes" }),
+        /* @__PURE__ */ jsxs10("p", { children: [
+          "Each page's prop table is derived from the story meta's ",
+          /* @__PURE__ */ jsx13("code", { children: "argTypes" }),
+          " and default",
+          " ",
+          /* @__PURE__ */ jsx13("code", { children: "args" }),
+          " at runtime. Add a control to a story and the table follows."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "card", children: [
+        /* @__PURE__ */ jsx13("h3", { children: "4 \xB7 The chrome uses the system's tokens" }),
+        /* @__PURE__ */ jsx13("p", { children: "Optional theme and token bridges map the engine's semantic roles to the design system's CSS variables and token module \u2014 which is why the theme toggle restyles this site through the system's own theme attribute." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13("h2", { children: "Start here" }),
+    /* @__PURE__ */ jsx13("ul", { children: startHere.map((entry) => /* @__PURE__ */ jsxs10("li", { children: [
+      /* @__PURE__ */ jsx13("a", { href: `#${hrefFor(`/components/${entry.slug}`)}`, children: entry.name }),
+      " \u2014 ",
+      entry.stories.length,
+      " stories"
+    ] }, entry.slug)) })
+  ] });
+}
+
+// src/pages/releases.tsx
+import { releases } from "virtual:storybook-docs/releases";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function ReleasesPage() {
+  return /* @__PURE__ */ jsxs11(Fragment9, { children: [
+    /* @__PURE__ */ jsx14("div", { className: "crumb", children: "Releases" }),
+    /* @__PURE__ */ jsx14("h1", { children: "Releases" }),
+    releases.version ? /* @__PURE__ */ jsxs11("p", { className: "lede", children: [
+      "Current release ",
+      /* @__PURE__ */ jsxs11("span", { className: "chip", children: [
+        "v",
+        releases.version
+      ] })
+    ] }) : null,
+    releases.changelog ? /* @__PURE__ */ jsx14(MarkdownView, { markdown: releases.changelog }) : null
+  ] });
+}
+
+// src/search.tsx
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState7 } from "react";
+import { catalog as catalog2 } from "virtual:storybook-docs/catalog";
+
+// src/search-match.ts
+var MAX_COMPONENTS = 10;
+var MAX_STORIES_PER_COMPONENT = 2;
+function highlightSegments(text, needle) {
+  const term = needle.trim().toLowerCase();
+  const lower = text.toLowerCase();
+  const start2 = term && lower.length === text.length ? lower.indexOf(term) : -1;
+  if (start2 < 0) return [{ text, match: false }];
+  const end = start2 + term.length;
+  return [
+    { text: text.slice(0, start2), match: false },
+    { text: text.slice(start2, end), match: true },
+    { text: text.slice(end), match: false }
+  ].filter((segment) => segment.text);
+}
+function scoreEntry(entry, needle) {
+  const name = entry.name.toLowerCase();
+  if (name === needle) return 100;
+  if (name.startsWith(needle)) return 80;
+  if (name.includes(needle)) return 60;
+  if (entry.group.toLowerCase().includes(needle)) return 40;
+  if (entry.storybookTitle.toLowerCase().includes(needle)) return 30;
+  return -1;
+}
+function searchCatalog(catalog4, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [];
+  return catalog4.map((entry) => {
+    const stories = entry.stories.filter((story) => story.toLowerCase().includes(needle)).slice(0, MAX_STORIES_PER_COMPONENT);
+    const score = scoreEntry(entry, needle);
+    return { entry, stories, score: score >= 0 ? score : stories.length ? 20 : -1, componentHit: score >= 0 };
+  }).filter((candidate) => candidate.score >= 0).sort((a, b) => b.score - a.score || a.entry.name.localeCompare(b.entry.name)).slice(0, MAX_COMPONENTS).flatMap(({ entry, stories, componentHit }) => [
+    ...componentHit ? [{ entry }] : [],
+    ...stories.map((story) => ({ entry, story }))
+  ]);
+}
+var rowKey = (row) => row.story ? `${row.entry.slug}--${row.story}` : row.entry.slug;
+var rowPath = (row) => `/components/${row.entry.slug}${row.story ? `?story=${encodeURIComponent(row.story)}` : ""}`;
+
+// src/search.tsx
+import { Fragment as Fragment10, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function renderHighlighted(text, query) {
+  const segments = highlightSegments(text, query);
+  return segments.map(
+    (segment, index) => segment.match ? /* @__PURE__ */ jsx15("mark", { children: segment.text }, index) : segment.text
+  );
+}
+function SearchBox() {
+  const [query, setQuery] = useState7("");
+  const [open, setOpen] = useState7(false);
+  const [active, setActive] = useState7(0);
+  const inputRef = useRef4(null);
+  const listId = "storybook-docs-search-results";
+  const optionId = (key) => `${listId}-${key}`;
+  const results = useMemo4(() => {
+    return searchCatalog(catalog2, query);
+  }, [query]);
+  useEffect6(() => {
+    setActive(0);
+  }, [query]);
+  useEffect6(() => {
+    const onGlobalKeyDown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        inputRef.current?.focus();
+        inputRef.current?.select();
+        setOpen(true);
+      }
+    };
+    window.addEventListener("keydown", onGlobalKeyDown);
+    return () => window.removeEventListener("keydown", onGlobalKeyDown);
+  }, []);
+  const go = (row) => {
+    window.location.hash = hrefFor(rowPath(row));
+    setOpen(false);
+    setQuery("");
+    inputRef.current?.blur();
+  };
+  const hasQuery = query.trim().length > 0;
+  const hasResults = results.length > 0;
+  const showDropdown = open && (hasResults || hasQuery);
+  const activeRow = hasResults && results[active] ? results[active] : void 0;
+  const activeOptionId = activeRow ? optionId(rowKey(activeRow)) : void 0;
+  useEffect6(() => {
+    if (showDropdown && activeOptionId) {
+      const el = document.getElementById(activeOptionId);
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeOptionId, showDropdown]);
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      if (results.length === 0) return;
+      setActive((current) => {
+        const next = event.key === "ArrowDown" ? current + 1 : current - 1;
+        return (next + results.length) % results.length;
+      });
+      return;
+    }
+    if (event.key === "Enter") {
+      if (activeRow) {
+        event.preventDefault();
+        go(activeRow);
+      }
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+      setQuery("");
+      inputRef.current?.blur();
+    }
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: "search", children: [
+    /* @__PURE__ */ jsx15(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": showDropdown,
+        "aria-controls": hasResults ? listId : void 0,
+        "aria-activedescendant": showDropdown ? activeOptionId : void 0,
+        "aria-autocomplete": "list",
+        "aria-label": `Search ${catalog2.length} components`,
+        placeholder: `Search ${catalog2.length} components\u2026  \u2318K`,
+        value: query,
+        onChange: (event) => {
+          setQuery(event.target.value);
+          setOpen(true);
+        },
+        onFocus: () => setOpen(true),
+        onBlur: () => window.setTimeout(() => setOpen(false), 150),
+        onKeyDown
+      }
+    ),
+    showDropdown ? /* @__PURE__ */ jsxs12("div", { className: "search-dropdown", children: [
+      hasResults ? /* @__PURE__ */ jsx15("ul", { id: listId, role: "listbox", "aria-label": "Components", className: "search-results", children: results.map((row, index) => {
+        const key = rowKey(row);
+        const optId = optionId(key);
+        return /* @__PURE__ */ jsxs12(
+          "li",
+          {
+            id: optId,
+            role: "option",
+            "aria-selected": index === active,
+            onMouseEnter: () => {
+              setActive(index);
+              void row.entry.load();
+            },
+            onFocus: () => {
+              setActive(index);
+              void row.entry.load();
+            },
+            onMouseDown: (event) => {
+              event.preventDefault();
+              go(row);
+            },
+            children: [
+              /* @__PURE__ */ jsxs12("span", { className: "search-result-main", children: [
+                /* @__PURE__ */ jsx15("b", { className: "search-result-name", children: renderHighlighted(row.entry.name, query) }),
+                row.story ? /* @__PURE__ */ jsxs12(Fragment10, { children: [
+                  /* @__PURE__ */ jsx15("span", { className: "search-result-sep", "aria-hidden": "true", children: " \u203A " }),
+                  /* @__PURE__ */ jsx15("span", { className: "search-result-story", children: renderHighlighted(row.story, query) })
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsx15("span", { className: "search-result-meta", children: row.story ? row.entry.group : `${row.entry.group} \xB7 ${row.entry.stories.length} stories` })
+            ]
+          },
+          key
+        );
+      }) }) : /* @__PURE__ */ jsxs12("div", { className: "search-empty", role: "status", children: [
+        "No components match \u2018",
+        query.trim(),
+        "\u2019"
+      ] }),
+      /* @__PURE__ */ jsxs12("div", { className: "search-footer", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxs12("span", { className: "search-footer-item", children: [
+          /* @__PURE__ */ jsx15("kbd", { children: "\u2191" }),
+          /* @__PURE__ */ jsx15("kbd", { children: "\u2193" }),
+          " navigate"
+        ] }),
+        /* @__PURE__ */ jsx15("span", { className: "search-footer-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsxs12("span", { className: "search-footer-item", children: [
+          /* @__PURE__ */ jsx15("kbd", { children: "Enter" }),
+          " open"
+        ] }),
+        /* @__PURE__ */ jsx15("span", { className: "search-footer-sep", children: "\xB7" }),
+        /* @__PURE__ */ jsxs12("span", { className: "search-footer-item", children: [
+          /* @__PURE__ */ jsx15("kbd", { children: "Esc" }),
+          " close"
+        ] })
+      ] })
+    ] }) : null
+  ] });
+}
+
+// src/app.tsx
+import { releases as releases2 } from "virtual:storybook-docs/releases";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+var routeHref = (path) => `#${hrefFor(path)}`;
+function parseRoute(hash) {
+  const path = hashPath(hash).replace(new RegExp(`^#?\\/?${STORYBOOK_DOCS_BASE}`), "").replace(/^\/+/, "");
+  if (path.startsWith("components/")) {
+    const slug = path.slice("components/".length);
+    if (catalog3.some((entry) => entry.slug === slug)) return { kind: "component", slug };
+  }
+  if (path === "releases" && releases2.changelog) return { kind: "releases" };
+  if (path === "tokens/color") return { kind: "color" };
+  if (path === "tokens/typography") return { kind: "typography" };
+  if (path === "tokens/spacing") return { kind: "spacing" };
+  if (path === "tokens/effects") return { kind: "effects" };
+  return { kind: "overview" };
+}
+function DocsApp() {
+  const [route, setRoute] = useState8(() => parseRoute(window.location.hash));
+  const [mode, setMode] = useState8(theme.values?.[0] ?? "dark");
+  const [navOpen, setNavOpen] = useState8(false);
+  const navRef = useRef5(null);
+  useRailFollow(navRef);
+  const headerRef = useRef5(null);
+  const mainRef = useRef5(null);
+  useEffect7(() => {
+    const header = headerRef.current;
+    if (!header) return;
+    const root = document.documentElement;
+    const previousHeight = root.style.getPropertyValue("--sd-header-height");
+    const measure = () => root.style.setProperty("--sd-header-height", `${header.getBoundingClientRect().height}px`);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(header);
+    return () => {
+      observer.disconnect();
+      if (previousHeight) root.style.setProperty("--sd-header-height", previousHeight);
+      else root.style.removeProperty("--sd-header-height");
+    };
+  }, []);
+  useEffect7(() => {
+    const onHash = () => {
+      setRoute(parseRoute(window.location.hash));
+      setNavOpen(false);
+      window.scrollTo(0, 0);
+      mainRef.current?.focus({ preventScroll: true });
+    };
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+  useEffect7(() => {
+    document.documentElement.setAttribute(theme.attribute ?? "data-theme", mode);
+  }, [mode]);
+  const [darkMode, lightMode] = theme.values ?? ["dark", "light"];
+  const activeSlug = route.kind === "component" ? route.slug : null;
+  const foundations = [
+    ...pages.color ? [{ href: routeHref(`/tokens/color`), label: "Color", kind: "color" }] : [],
+    ...pages.typography ? [{ href: routeHref(`/tokens/typography`), label: "Typography", kind: "typography" }] : [],
+    ...pages.spacing ? [{ href: routeHref(`/tokens/spacing`), label: "Spacing & shape", kind: "spacing" }] : [],
+    ...pages.effects ? [{ href: routeHref(`/tokens/effects`), label: "Elevation & motion", kind: "effects" }] : []
+  ];
+  return /* @__PURE__ */ jsxs13("div", { className: route.kind === "overview" ? "app" : "app has-toc", children: [
+    /* @__PURE__ */ jsx16(
+      "a",
+      {
+        className: "skip",
+        href: "#main",
+        onClick: (event) => {
+          event.preventDefault();
+          mainRef.current?.focus();
+        },
+        children: "Skip to content"
+      }
+    ),
+    /* @__PURE__ */ jsxs13("header", { className: "top", ref: headerRef, children: [
+      /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "tool nav-toggle",
+          "aria-expanded": navOpen,
+          "aria-controls": "docs-nav",
+          onClick: () => setNavOpen(!navOpen),
+          children: "Menu"
+        }
+      ),
+      /* @__PURE__ */ jsxs13("a", { className: "brand-link", href: routeHref("/"), children: [
+        /* @__PURE__ */ jsx16("span", { className: "mark", "aria-hidden": "true", children: site2.mark ?? site2.title.slice(0, 1).toUpperCase() }),
+        /* @__PURE__ */ jsx16("span", { className: "brand", children: site2.title })
+      ] }),
+      /* @__PURE__ */ jsxs13("span", { className: "chip", children: [
+        "docs",
+        releases2.version ? ` \xB7 v${releases2.version}` : ""
+      ] }),
+      /* @__PURE__ */ jsx16(SearchBox, {}),
+      /* @__PURE__ */ jsx16("span", { className: "spacer" }),
+      /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "tool",
+          "aria-label": `Switch to ${mode === darkMode ? lightMode : darkMode} theme`,
+          onClick: () => setMode(mode === darkMode ? lightMode : darkMode),
+          children: mode === darkMode ? lightMode : darkMode
+        }
+      ),
+      (site2.links ?? []).map((link) => /* @__PURE__ */ jsxs13("a", { className: "tool", href: link.href, children: [
+        link.label,
+        " ",
+        /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "\u2197" })
+      ] }, link.href))
+    ] }),
+    /* @__PURE__ */ jsxs13("nav", { id: "docs-nav", className: navOpen ? "nav open" : "nav", "aria-label": "Documentation", ref: navRef, children: [
+      /* @__PURE__ */ jsx16("a", { href: routeHref("/"), className: route.kind === "overview" ? "on" : void 0, "aria-current": route.kind === "overview" ? "page" : void 0, children: "Overview" }),
+      releases2.changelog ? /* @__PURE__ */ jsxs13(
+        "a",
+        {
+          href: routeHref("/releases"),
+          className: route.kind === "releases" ? "on" : void 0,
+          "aria-current": route.kind === "releases" ? "page" : void 0,
+          children: [
+            "Releases",
+            releases2.version ? /* @__PURE__ */ jsxs13("span", { className: "nav-count", children: [
+              "v",
+              releases2.version
+            ] }) : null
+          ]
+        }
+      ) : null,
+      foundations.length > 0 ? /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": "nav-grp-foundations", children: [
+        /* @__PURE__ */ jsx16("div", { className: "grp", id: "nav-grp-foundations", children: "Foundations" }),
+        foundations.map((item) => /* @__PURE__ */ jsx16(
+          "a",
+          {
+            href: item.href,
+            className: route.kind === item.kind ? "on" : void 0,
+            "aria-current": route.kind === item.kind ? "page" : void 0,
+            children: item.label
+          },
+          item.href
+        ))
+      ] }) : null,
+      groups2.map((group, index) => /* @__PURE__ */ jsxs13("div", { role: "group", "aria-labelledby": `nav-grp-${index}`, children: [
+        /* @__PURE__ */ jsx16("div", { className: "grp", id: `nav-grp-${index}`, children: group }),
+        catalog3.filter((entry) => entry.group === group).map((entry) => /* @__PURE__ */ jsx16(
+          "a",
+          {
+            href: routeHref(`/components/${entry.slug}`),
+            className: activeSlug === entry.slug ? "on" : void 0,
+            "aria-current": activeSlug === entry.slug ? "page" : void 0,
+            onMouseEnter: () => void entry.load(),
+            onFocus: () => void entry.load(),
+            children: entry.name
+          },
+          entry.slug
+        ))
+      ] }, group))
+    ] }),
+    /* @__PURE__ */ jsx16("main", { id: "main", className: "main", tabIndex: -1, ref: mainRef, children: route.kind === "component" ? /* @__PURE__ */ jsx16(ComponentPage, { entry: catalog3.find((entry) => entry.slug === route.slug) }) : route.kind === "color" ? /* @__PURE__ */ jsx16(ColorPage, {}) : route.kind === "typography" ? /* @__PURE__ */ jsx16(TypePage, {}) : route.kind === "spacing" ? /* @__PURE__ */ jsx16(SpacingPage, {}) : route.kind === "effects" ? /* @__PURE__ */ jsx16(EffectsPage, {}) : route.kind === "releases" ? /* @__PURE__ */ jsx16(ReleasesPage, {}) : /* @__PURE__ */ jsx16(OverviewPage, {}) }),
+    route.kind !== "overview" ? /* @__PURE__ */ jsx16(PageRail, { pageKey: activeSlug ?? route.kind }) : null
+  ] });
+}
+
+// src/start.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function start() {
+  let container = document.getElementById("root");
+  if (!container) {
+    container = document.createElement("div");
+    container.id = "root";
+    document.body.append(container);
+  }
+  const attribute = theme2.attribute ?? "data-theme";
+  document.documentElement.setAttribute(attribute, theme2.values?.[0] ?? "dark");
+  if (themeCss) {
+    const style = document.createElement("style");
+    style.dataset.storybookDocs = "theme";
+    style.textContent = themeCss;
+    document.head.append(style);
+  }
+  document.title = site3.title;
+  createRoot(container).render(/* @__PURE__ */ jsx17(StrictMode, { children: createElement3(DocsApp) }));
+}
+export {
+  ComponentDemo,
+  start
+};
+import './index.css';