@takazudo/zudo-doc 0.1.0

package/dist/sidebar-tree/build-tree.js

@@ -0,0 +1,127 @@
+function toRouteSlug(id) {
+  return id.replace(/\/index$/, "");
+}
+function toTitleCase(str) {
+  return str.split("-").map((word) => word.length === 0 ? word : word[0].toUpperCase() + word.slice(1)).join(" ");
+}
+const defaultBuildHref = (slug, locale) => {
+  const prefix = locale ? `/${locale}/docs/` : "/docs/";
+  return slug ? `${prefix}${slug}/` : prefix;
+};
+function defaultIsNavVisible(entry) {
+  return !entry.data.unlisted && !entry.data.standalone;
+}
+function buildSidebarTree(entries, locale, options = {}) {
+  const {
+    categoryMeta,
+    buildHref = defaultBuildHref,
+    isNavVisible = defaultIsNavVisible
+  } = options;
+  const root = {
+    segment: "",
+    fullPath: "",
+    children: /* @__PURE__ */ new Map()
+  };
+  for (const entry of entries) {
+    if (!isNavVisible(entry)) continue;
+    const slug = entry.data.slug ?? entry.slug ?? toRouteSlug(entry.id);
+    if (!slug) continue;
+    const parts = slug.split("/");
+    if (parts.length <= 1) {
+      const segment = slug;
+      let node = root.children.get(segment);
+      if (!node) {
+        node = { segment, fullPath: segment, children: /* @__PURE__ */ new Map() };
+        root.children.set(segment, node);
+      }
+      node.doc = entry;
+    } else {
+      let current = root;
+      for (let i = 0; i < parts.length; i++) {
+        const segment = parts[i];
+        const fullPath = parts.slice(0, i + 1).join("/");
+        let next = current.children.get(segment);
+        if (!next) {
+          next = { segment, fullPath, children: /* @__PURE__ */ new Map() };
+          current.children.set(segment, next);
+        }
+        if (i === parts.length - 1) {
+          next.doc = entry;
+        }
+        current = next;
+      }
+    }
+  }
+  return toSidebarNodes(root, locale, buildHref, categoryMeta);
+}
+function toSidebarNodes(parent, locale, buildHref, categoryMeta, parentSortOrder) {
+  const nodes = [];
+  for (const child of parent.children.values()) {
+    const doc = child.doc;
+    const meta = categoryMeta?.get(child.fullPath);
+    const sortOrder = meta?.sortOrder ?? "asc";
+    const children = toSidebarNodes(
+      child,
+      locale,
+      buildHref,
+      categoryMeta,
+      sortOrder
+    );
+    const hasPage = !!doc;
+    const isCategory = !hasPage && children.length > 0;
+    const label = doc?.data.sidebar_label ?? doc?.data.title ?? meta?.label ?? toTitleCase(child.segment);
+    const description = doc?.data.description ?? meta?.description;
+    const positionRaw = doc?.data.sidebar_position ?? meta?.position;
+    const position = positionRaw ?? 999;
+    const href = meta?.noPage ? void 0 : doc || children.length > 0 ? buildHref(child.fullPath, locale) : void 0;
+    nodes.push({
+      type: isCategory ? "category" : "doc",
+      id: child.fullPath,
+      label,
+      ...description !== void 0 ? { description } : {},
+      ...positionRaw !== void 0 ? { sidebar_position: positionRaw } : {},
+      ...href !== void 0 ? { href } : {},
+      hasPage,
+      ...meta?.sortOrder ? { sortOrder } : {},
+      children
+    });
+    Object.defineProperty(nodes[nodes.length - 1], "__sortPosition", {
+      value: position,
+      enumerable: false
+    });
+  }
+  const order = parentSortOrder ?? "asc";
+  nodes.sort((a, b) => {
+    const aPos = a.__sortPosition;
+    const bPos = b.__sortPosition;
+    const posCompare = aPos - bPos;
+    if (posCompare !== 0) return order === "desc" ? -posCompare : posCompare;
+    const slugCompare = a.id.localeCompare(b.id);
+    return order === "desc" ? -slugCompare : slugCompare;
+  });
+  return nodes;
+}
+function findSidebarNode(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const found = findSidebarNode(node.children, id);
+    if (found) return found;
+  }
+  return void 0;
+}
+function flattenSidebarTree(nodes) {
+  const acc = [];
+  flattenInto(nodes, acc);
+  return acc;
+}
+function flattenInto(nodes, acc) {
+  for (const node of nodes) {
+    if (node.hasPage) acc.push(node);
+    flattenInto(node.children, acc);
+  }
+}
+export {
+  buildSidebarTree,
+  findSidebarNode,
+  flattenSidebarTree
+};

package/dist/sidebar-tree/category-meta.d.ts

@@ -0,0 +1,19 @@
+import { CategoryMeta } from './types.js';
+
+/**
+ * Scan `contentDir` recursively for `_category_.json` files. Each file's
+ * parent directory becomes a map key, expressed as a path relative to
+ * `contentDir` and joined with the platform separator (`scanDir` uses
+ * `path.relative`, which yields forward slashes on POSIX and backslashes
+ * on Windows — that matches the keys produced by the legacy implementation
+ * and is what the build-tree code re-uses verbatim).
+ *
+ * Results are memoised per `contentDir` because Astro builds resolve every
+ * page route in the same process; re-reading thousands of `_category_.json`
+ * files for each page is wasteful.
+ */
+declare function loadCategoryMeta(contentDir: string): Map<string, CategoryMeta>;
+/** Test/HMR escape hatch — clears the per-directory cache. */
+declare function clearCategoryMetaCache(): void;
+
+export { clearCategoryMetaCache, loadCategoryMeta };

package/dist/sidebar-tree/category-meta.js

@@ -0,0 +1,63 @@
+import fs from "node:fs";
+import path from "node:path";
+const cache = /* @__PURE__ */ new Map();
+function loadCategoryMeta(contentDir) {
+  const absolute = path.resolve(contentDir);
+  const cached = cache.get(absolute);
+  if (cached) return cached;
+  const result = /* @__PURE__ */ new Map();
+  scanDir(absolute, absolute, result);
+  cache.set(absolute, result);
+  return result;
+}
+function clearCategoryMetaCache() {
+  cache.clear();
+}
+function scanDir(baseDir, currentDir, result) {
+  let entries;
+  try {
+    entries = fs.readdirSync(currentDir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const fullPath = path.join(currentDir, entry.name);
+    const categoryFile = path.join(fullPath, "_category_.json");
+    if (fs.existsSync(categoryFile)) {
+      const meta = readCategoryFile(categoryFile);
+      if (meta) {
+        const relativePath = path.relative(baseDir, fullPath);
+        result.set(relativePath, meta);
+      }
+    }
+    scanDir(baseDir, fullPath, result);
+  }
+}
+function readCategoryFile(filePath) {
+  let raw;
+  try {
+    raw = fs.readFileSync(filePath, "utf-8");
+  } catch {
+    return void 0;
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+  if (typeof parsed !== "object" || parsed === null) return void 0;
+  const obj = parsed;
+  return {
+    label: typeof obj["label"] === "string" ? obj["label"] : void 0,
+    position: typeof obj["position"] === "number" ? obj["position"] : void 0,
+    description: typeof obj["description"] === "string" ? obj["description"] : void 0,
+    sortOrder: obj["sortOrder"] === "asc" || obj["sortOrder"] === "desc" ? obj["sortOrder"] : void 0,
+    noPage: obj["noPage"] === true ? true : void 0
+  };
+}
+export {
+  clearCategoryMetaCache,
+  loadCategoryMeta
+};

package/dist/sidebar-tree/index.d.ts

@@ -0,0 +1,3 @@
+export { buildSidebarTree, findSidebarNode, flattenSidebarTree } from './build-tree.js';
+export { clearCategoryMetaCache, loadCategoryMeta } from './category-meta.js';
+export { BuildHref, BuildSidebarTreeOptions, CategoryMeta, CollectionEntryLike, SidebarFrontmatter, SidebarNode } from './types.js';

package/dist/sidebar-tree/index.js

@@ -0,0 +1,13 @@
+import {
+  buildSidebarTree,
+  findSidebarNode,
+  flattenSidebarTree
+} from "./build-tree.js";
+import { loadCategoryMeta, clearCategoryMetaCache } from "./category-meta.js";
+export {
+  buildSidebarTree,
+  clearCategoryMetaCache,
+  findSidebarNode,
+  flattenSidebarTree,
+  loadCategoryMeta
+};

package/dist/sidebar-tree/types.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Public types for the framework-agnostic sidebar tree builder.
+ *
+ * These types are deliberately decoupled from astro:content so the helper
+ * can run on top of any content collection that exposes a similar shape
+ * (Astro, zfb, plain Node fixtures, etc.).
+ */
+/**
+ * Frontmatter fields the builder reads off of each entry's `data` object.
+ * Callers are free to extend this; unrecognised fields are ignored.
+ */
+interface SidebarFrontmatter {
+    title: string;
+    description?: string;
+    sidebar_position?: number;
+    sidebar_label?: string;
+    draft?: boolean;
+    unlisted?: boolean;
+    hide_sidebar?: boolean;
+    /**
+     * Set to `true` for pages that exist outside the doc tree (404, top-level
+     * standalone pages, etc.). The builder skips these entries entirely.
+     */
+    standalone?: boolean;
+    /**
+     * Optional override for the route slug. When omitted, the builder derives
+     * the slug from the entry's id (stripping a trailing `/index`).
+     */
+    slug?: string;
+}
+/**
+ * Minimum shape required of a content collection entry. Designed to be a
+ * structural superset of both Astro's `CollectionEntry` and zfb's
+ * `CollectionEntry<T>` so callers can pass either through unchanged.
+ */
+interface CollectionEntryLike<T extends SidebarFrontmatter = SidebarFrontmatter> {
+    /**
+     * Stable identifier. For Astro entries this is the file path without the
+     * extension (e.g. `getting-started/index`). For zfb entries the project
+     * convention is to put the cleaned slug here too — either form is fine
+     * because the builder strips a trailing `/index`.
+     */
+    id: string;
+    /**
+     * Optional pre-computed slug. When present it wins over the id-derived
+     * value. zfb entries always populate this field; Astro callers can leave
+     * it undefined.
+     */
+    slug?: string;
+    data: T;
+    /** Free-form fields kept for forward compatibility — never read here. */
+    collection?: string;
+    body?: string;
+}
+/**
+ * Metadata supplied by a directory's `_category_.json` file.
+ */
+interface CategoryMeta {
+    label?: string;
+    position?: number;
+    description?: string;
+    sortOrder?: "asc" | "desc";
+    /**
+     * When true, the category renders as a collapsible header with no link of
+     * its own — useful for purely structural groupings.
+     */
+    noPage?: boolean;
+}
+/**
+ * One node in the sidebar tree. `type` distinguishes leaves (single docs)
+ * from categories (groups with children). The fields beyond the manager's
+ * sketch — `description`, `hasPage`, `sortOrder`, `collapsed` — are kept
+ * because downstream consumers (sidebar config layer, breadcrumb builder)
+ * need them. They are all optional from a caller's perspective.
+ */
+interface SidebarNode {
+    type: "doc" | "category";
+    /** Path-style slug, e.g. `getting-started/introduction`. */
+    id: string;
+    label: string;
+    description?: string;
+    href?: string;
+    sidebar_position?: number;
+    /** True when an actual MDX file backs this slug (vs. directory-only). */
+    hasPage: boolean;
+    sortOrder?: "asc" | "desc";
+    collapsed?: boolean;
+    children: SidebarNode[];
+}
+/**
+ * Resolve an href for a given route slug. Defaults to `/<locale>/docs/<slug>/`
+ * for non-default locales and `/docs/<slug>/` otherwise — but most projects
+ * will inject their own to honour `base`, `trailingSlash`, etc.
+ */
+type BuildHref = (slug: string, locale: string) => string;
+interface BuildSidebarTreeOptions {
+    /**
+     * Map keyed by slash-joined directory path → category meta. Typically
+     * produced by {@link CategoryMetaLoader}.
+     */
+    categoryMeta?: Map<string, CategoryMeta>;
+    /**
+     * Default locale. When the supplied `locale` matches this, the helper
+     * skips the locale prefix in default href construction. When omitted,
+     * defaults to `"en"`.
+     */
+    defaultLocale?: string;
+    /**
+     * Override the default href builder. Receives the route slug and locale.
+     */
+    buildHref?: BuildHref;
+    /**
+     * Filter predicate run on every entry before tree construction. Defaults
+     * to dropping `unlisted` and `standalone` docs. Override to integrate
+     * with a project's own visibility rules.
+     */
+    isNavVisible?: (entry: CollectionEntryLike<SidebarFrontmatter>) => boolean;
+}
+
+export type { BuildHref, BuildSidebarTreeOptions, CategoryMeta, CollectionEntryLike, SidebarFrontmatter, SidebarNode };

package/dist/tab-item/index.d.ts

@@ -0,0 +1,2 @@
+export { TabItem, TabItemProps, TabItem as default } from './tab-item.js';
+import 'preact';

package/dist/tab-item/index.js

@@ -0,0 +1,5 @@
+import { TabItem, default as default2 } from "./tab-item.js";
+export {
+  TabItem,
+  default2 as default
+};

package/dist/tab-item/tab-item.d.ts

@@ -0,0 +1,38 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+interface TabItemProps {
+    /** Human-readable label rendered by the parent Tabs trigger row. */
+    label: string;
+    /**
+     * Optional stable value for the tab. Falls back to `label` when
+     * omitted, matching the Astro original's `value ?? label`.
+     */
+    value?: string;
+    /**
+     * When true, this panel is the initially-active one. Encoded as the
+     * empty-string `data-tab-default` attribute so plain attribute
+     * selectors (`[data-tab-default]`) still match.
+     */
+    default?: boolean;
+    /** Panel body. */
+    children?: ComponentChildren;
+}
+/**
+ * One tab panel.
+ *
+ * Wave 11 (zudolab/zudo-doc#1355): the default panel is rendered
+ * **without** the `hidden` attribute so the SSR HTML already shows the
+ * correct active panel before any JS runs. Non-default panels keep
+ * `hidden`. This avoids the post-Wave-10 regression where the tabs
+ * init script could land after first paint and flash an empty tab
+ * group; it also gives the no-JS path a usable default tab.
+ *
+ * The companion `TabsInit` script remains the source of truth at
+ * runtime — it re-derives the active tab from `localStorage` and
+ * `[data-tab-default]` and reapplies `hidden` / `aria-selected` so
+ * the SSR-rendered defaults survive group sync and View Transitions.
+ */
+declare function TabItem({ label, value, default: isDefault, children, }: TabItemProps): preact.JSX.Element;
+
+export { TabItem, type TabItemProps, TabItem as default };

package/dist/tab-item/tab-item.js

@@ -0,0 +1,25 @@
+import { jsx } from "preact/jsx-runtime";
+function TabItem({
+  label,
+  value,
+  default: isDefault,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      class: "tab-panel",
+      role: "tabpanel",
+      "data-tab-value": value ?? label,
+      "data-tab-label": label,
+      "data-tab-default": isDefault ? "" : void 0,
+      hidden: isDefault ? void 0 : true,
+      children
+    }
+  );
+}
+var tab_item_default = TabItem;
+export {
+  TabItem,
+  tab_item_default as default
+};

package/dist/theme/color-scheme-provider.d.ts

@@ -0,0 +1,32 @@
+import * as preact from 'preact';
+import { ComponentChildren } from 'preact';
+
+/**
+ * Subset of the host's `ColorModeConfig` that the v2 provider actually
+ * consumes. Kept locally so the v2 package does not need to import a host
+ * type module — the caller maps its own settings into this shape (or
+ * passes `null` for the persisted-tweak / no-light-dark path).
+ */
+interface ColorSchemeProviderColorMode {
+    defaultMode: "light" | "dark";
+    respectPrefersColorScheme: boolean;
+}
+interface ColorSchemeProviderProps {
+    /**
+     * Pre-computed `:root { --zd-* }` CSS string. The caller resolves the
+     * active color scheme (or the configured light+dark pair) and renders
+     * the `<style>` body for us — this component just emits it.
+     */
+    cssText: string;
+    /**
+     * Active light/dark mode config, or `null` for the persisted-tweak
+     * bootstrap path (no light/dark; the in-browser tweak panel may inject
+     * custom CSS vars from localStorage instead).
+     */
+    colorMode: ColorSchemeProviderColorMode | null;
+    /** Optional children; preserved for forward compatibility. */
+    children?: ComponentChildren;
+}
+declare function ColorSchemeProvider({ cssText, colorMode, }: ColorSchemeProviderProps): preact.JSX.Element;
+
+export { type ColorSchemeProviderColorMode, type ColorSchemeProviderProps, ColorSchemeProvider as default };

package/dist/theme/color-scheme-provider.js

@@ -0,0 +1,43 @@
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { AFTER_NAVIGATE_EVENT } from "../transitions/page-events.js";
+function buildColorModeBootstrap(defaultMode, respectPrefersColorScheme) {
+  const dm = JSON.stringify(defaultMode);
+  const rp = JSON.stringify(Boolean(respectPrefersColorScheme));
+  const afterNav = JSON.stringify(AFTER_NAVIGATE_EVENT);
+  return `(function(){
+var defaultMode=${dm};
+var respectPrefersColorScheme=${rp};
+var STORAGE_KEY="zudo-doc-theme";
+function getSystemMode(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";}
+function applyTheme(mode){document.documentElement.setAttribute("data-theme",mode);document.documentElement.style.colorScheme=mode;}
+function getEffectiveMode(choice){if(choice==="light"||choice==="dark")return choice;return respectPrefersColorScheme?getSystemMode():defaultMode;}
+var stored=null;try{stored=localStorage.getItem(STORAGE_KEY);}catch(e){}
+applyTheme(getEffectiveMode(stored));
+document.addEventListener(${afterNav},function(){var s=null;try{s=localStorage.getItem(STORAGE_KEY);}catch(e){}applyTheme(getEffectiveMode(s));});
+if(respectPrefersColorScheme){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",function(){var s=null;try{s=localStorage.getItem(STORAGE_KEY);}catch(e){}if(!s)applyTheme(getSystemMode());});}
+})();`;
+}
+function buildPersistedTweakBootstrap() {
+  const afterNav = JSON.stringify(AFTER_NAVIGATE_EVENT);
+  return `(function(){
+function applyStoredScheme(){var css=localStorage.getItem("zudo-doc-color-scheme-css");if(!css)return;try{var pairs=JSON.parse(css);var root=document.documentElement;for(var i=0;i<pairs.length;i++){root.style.setProperty(pairs[i][0],pairs[i][1]);}}catch(e){localStorage.removeItem("zudo-doc-color-scheme-css");}}
+applyStoredScheme();
+document.addEventListener(${afterNav},applyStoredScheme);
+})();`;
+}
+function ColorSchemeProvider({
+  cssText,
+  colorMode
+}) {
+  const bootstrap = colorMode ? buildColorModeBootstrap(
+    colorMode.defaultMode,
+    Boolean(colorMode.respectPrefersColorScheme)
+  ) : buildPersistedTweakBootstrap();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: cssText } }),
+    /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: bootstrap } })
+  ] });
+}
+export {
+  ColorSchemeProvider as default
+};

package/dist/theme/color-tweak-export-modal.d.ts

@@ -0,0 +1,20 @@
+import * as preact from 'preact';
+import { DesignTokenManifest } from './design-token-serde.js';
+import { TweakState, ColorTweakState } from './design-token-types.js';
+import '@takazudo/zdtp';
+
+interface DesignTokenExportModalProps {
+    onClose: () => void;
+    /** Full unified tweak state — the modal serializes all four categories. */
+    state: TweakState;
+    /** Token manifest (spacing / font / size arrays) used by serialize() to
+     *  compute diff-only output. The caller is expected to forward the same
+     *  manifest the panel was configured with. */
+    manifest: DesignTokenManifest;
+    /** Color baseline used for diff-only output. Optional: callers without DOM
+     *  access (tests) can omit and we'll treat the entire color block as changed. */
+    colorDefaults?: ColorTweakState;
+}
+declare function ColorTweakExportModal({ onClose, state, manifest, colorDefaults, }: DesignTokenExportModalProps): preact.JSX.Element;
+
+export { ColorTweakExportModal as default };

package/dist/theme/color-tweak-export-modal.js

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from "preact/hooks";
+import { serialize } from "./design-token-serde.js";
+import {
+} from "./design-token-types.js";
+const EXPORT_FILENAME_HINT = "zudo-doc-tokens.json";
+function resolveColorDefaults(fallback, explicit) {
+  return explicit ?? fallback;
+}
+function ColorTweakExportModal({
+  onClose,
+  state,
+  manifest,
+  colorDefaults
+}) {
+  const [copyLabel, setCopyLabel] = useState("Copy");
+  const [includeDefaults, setIncludeDefaults] = useState(false);
+  const dialogRef = useRef(null);
+  const copyTimerRef = useRef(null);
+  const code = useMemo(() => {
+    const baseline = resolveColorDefaults(state.color, colorDefaults);
+    const json = serialize(state, {
+      manifest,
+      includeDefaults,
+      colorDefaults: baseline
+    });
+    return JSON.stringify(json, null, 2);
+  }, [state, manifest, colorDefaults, includeDefaults]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    dialog.showModal();
+    return () => {
+      if (dialog.open) dialog.close();
+    };
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    function handleClose() {
+      onClose();
+    }
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [onClose]);
+  useEffect(() => {
+    return () => {
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    };
+  }, []);
+  function handleBackdropClick(e) {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {
+      dialog.close();
+    }
+  }
+  async function handleCopy() {
+    let ok = false;
+    const dialog = dialogRef.current;
+    if (dialog) {
+      try {
+        const textarea = document.createElement("textarea");
+        textarea.value = code;
+        textarea.style.cssText = "position:fixed;opacity:0;left:-9999px";
+        dialog.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        ok = document.execCommand("copy");
+        dialog.removeChild(textarea);
+      } catch {
+      }
+    }
+    if (!ok) {
+      try {
+        await navigator.clipboard.writeText(code);
+        ok = true;
+      } catch {
+      }
+    }
+    setCopyLabel(ok ? "Copied!" : "Failed");
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    copyTimerRef.current = setTimeout(() => setCopyLabel("Copy"), 2e3);
+  }
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref: dialogRef,
+      onClick: handleBackdropClick,
+      className: "mx-auto max-h-[80vh] w-full max-w-[46rem] overflow-y-auto border border-muted bg-surface p-hsp-xl backdrop:bg-bg/80",
+      style: { color: "var(--color-fg)", position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", userSelect: "text" },
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: "mb-vsp-sm text-title font-bold text-fg", children: "Export Design Tokens" }),
+        /* @__PURE__ */ jsxs("p", { className: "mb-vsp-xs text-small text-muted", children: [
+          "Save as ",
+          /* @__PURE__ */ jsx("code", { className: "text-fg", children: EXPORT_FILENAME_HINT }),
+          " to feed this blob back into the panel (or hand to an AI assistant)."
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "mb-vsp-xs flex items-center gap-x-hsp-sm text-small text-fg", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: includeDefaults,
+              onChange: (e) => setIncludeDefaults(e.currentTarget.checked)
+            }
+          ),
+          "Show defaults too"
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto border border-muted bg-code-bg p-hsp-lg text-small text-code-fg", children: /* @__PURE__ */ jsx("code", { children: code }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-vsp-sm flex items-center gap-x-hsp-md", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCopy,
+              className: "border border-muted bg-surface px-hsp-lg py-vsp-2xs text-small text-fg transition-colors hover:border-accent hover:text-accent",
+              children: copyLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => dialogRef.current?.close(),
+              className: "border border-muted bg-surface px-hsp-lg py-vsp-2xs text-small text-muted transition-colors hover:border-fg hover:text-fg",
+              children: "Close"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ColorTweakExportModal as default
+};