@takazudo/zudo-doc 2.0.1 → 2.1.1

package/bin/gen-component-tokens.mjs

@@ -0,0 +1,348 @@
+#!/usr/bin/env node
+// @takazudo/zudo-doc/bin/gen-component-tokens.mjs
+//
+// Package bin: regenerate (or check) the BEGIN/END-marked --zdc-* blocks from
+// the single source of truth in packages/zudo-doc/src/config/component-tokens.ts.
+//
+// Each token declares a `surface`, and the generator ROUTES its backing rule to
+// the matching stylesheet:
+//   - surface "content" → block in packages/zudo-doc/src/content.css
+//   - surface "chrome"  → block in packages/zudo-doc/src/features.css
+// A token missing `surface` is a hard error (the parser throws).
+//
+// Paths are resolved relative to this file's location (the package root),
+// NOT process.cwd() — this tool operates on the package's own source files
+// regardless of the working directory from which it is invoked.
+//
+// Usage (after pnpm install, via scripts in the root package.json):
+//   gen-component-tokens            # rewrite the --zdc-* blocks in both files
+//   gen-component-tokens --check    # verify committed blocks are up to date (exit 1 on drift)
+//
+// CI invokes the file by path from the repo root:
+//   node packages/zudo-doc/bin/gen-component-tokens.mjs --check
+//
+// Each block is a set of --zdc-* CSS custom-property rules grouped by selector,
+// giving consumers a single `:root` override point to rebrand component-level
+// typography/chrome without touching JSX or fighting specificity.
+//
+// Pure Node (fs only — NO npm deps). Idempotent: running twice produces no diff.
+//
+// MAINTENANCE: edit packages/zudo-doc/src/config/component-tokens.ts (the source
+// of truth), then run `pnpm gen:component-tokens` and commit the regenerated
+// content.css / features.css. Never hand-edit the block between the BEGIN/END
+// markers.
+
+import { readFileSync, writeFileSync, realpathSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// Paths are relative to this bin file's location so the generator works
+// regardless of cwd (running from the repo root, package dir, or CI).
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PKG_ROOT = resolve(__dirname, "..");
+
+const TOKENS_PATH = resolve(PKG_ROOT, "src/config/component-tokens.ts");
+const CONTENT_CSS_PATH = resolve(PKG_ROOT, "src/content.css");
+const FEATURES_CSS_PATH = resolve(PKG_ROOT, "src/features.css");
+
+// Default marker pair = the content-surface block. Kept under the original
+// names so buildBlock/replaceBlock default to the content block, preserving the
+// byte-identical content.css output (and the existing unit-test call sites).
+const BEGIN_MARKER =
+  "/* BEGIN --zdc-* component tokens (generated by gen-component-tokens; do not edit by hand) */";
+const END_MARKER = "/* END --zdc-* component tokens */";
+
+// Chrome-surface block markers — a DISTINCT pair so the two blocks never
+// collide when both live in files that the generator scans.
+const CHROME_BEGIN_MARKER =
+  "/* BEGIN --zdc-* chrome component tokens (generated by gen-component-tokens; do not edit by hand) */";
+const CHROME_END_MARKER = "/* END --zdc-* chrome component tokens */";
+
+/**
+ * Surface routing table — source order is the file-write order. Each entry maps
+ * a token `surface` to its destination stylesheet, marker pair, and a
+ * repo-relative path used in console/drift messages.
+ */
+const SURFACES = [
+  {
+    surface: "content",
+    cssPath: CONTENT_CSS_PATH,
+    relPath: "packages/zudo-doc/src/content.css",
+    beginMarker: BEGIN_MARKER,
+    endMarker: END_MARKER,
+  },
+  {
+    surface: "chrome",
+    cssPath: FEATURES_CSS_PATH,
+    relPath: "packages/zudo-doc/src/features.css",
+    beginMarker: CHROME_BEGIN_MARKER,
+    endMarker: CHROME_END_MARKER,
+  },
+];
+
+/** The set of valid `surface` values, derived from the routing table. */
+const VALID_SURFACES = new Set(SURFACES.map((s) => s.surface));
+
+/**
+ * Parse the COMPONENT_TOKENS array out of component-tokens.ts WITHOUT importing
+ * it (this bin is a dependency-free .mjs and cannot resolve TypeScript). Reads
+ * each `{ cssVar: "...", selector: "...", property: "...", default: "...",
+ * surface: "...", ... }` object literal. Throws on a malformed source — or a
+ * token missing the required `surface` field — so drift between the parser and
+ * the file surfaces loudly.
+ *
+ * Returns an array of { cssVar, selector, property, default, surface } objects
+ * in source order — iteration order is the CSS rule order.
+ *
+ * Exported for unit testing.
+ */
+export function parseTokens(src) {
+  const arrayMatch = src.match(
+    /export const COMPONENT_TOKENS[^=]*=\s*\[([\s\S]*?)\];/,
+  );
+  if (!arrayMatch) {
+    throw new Error(
+      `Could not locate "export const COMPONENT_TOKENS = [ ... ]" in ${TOKENS_PATH}`,
+    );
+  }
+  const body = arrayMatch[1];
+  const tokens = [];
+
+  // Each token is a `{ ... }` object literal; iterate top-level braces.
+  // Description strings may contain backticks and parentheses but not braces,
+  // so lazy `{...}` matching correctly isolates each object.
+  const objectRe = /\{([\s\S]*?)\}/g;
+  let m;
+  while ((m = objectRe.exec(body)) !== null) {
+    const obj = m[1];
+    const cssVarMatch = obj.match(/cssVar:\s*"([^"]+)"/);
+    const selectorMatch = obj.match(/selector:\s*"([^"]+)"/);
+    const propertyMatch = obj.match(/property:\s*"([^"]+)"/);
+    const defaultMatch = obj.match(/default:\s*"([^"]+)"/);
+
+    if (!cssVarMatch || !selectorMatch || !propertyMatch || !defaultMatch) {
+      throw new Error(
+        `Malformed token object in COMPONENT_TOKENS (missing cssVar/selector/property/default): ${obj.trim()}`,
+      );
+    }
+
+    // `surface` is REQUIRED — it routes the rule to content.css vs features.css.
+    // Fail loudly rather than silently dropping a token from both files.
+    const surfaceMatch = obj.match(/surface:\s*"([^"]+)"/);
+    if (!surfaceMatch) {
+      throw new Error(
+        `Token ${cssVarMatch[1]} in COMPONENT_TOKENS is missing the required "surface" field ` +
+          `(expected surface: "content" | "chrome").`,
+      );
+    }
+
+    tokens.push({
+      cssVar: cssVarMatch[1],
+      selector: selectorMatch[1],
+      property: propertyMatch[1],
+      default: defaultMatch[1],
+      surface: surfaceMatch[1],
+    });
+  }
+
+  if (tokens.length === 0) {
+    throw new Error(
+      `COMPONENT_TOKENS in ${TOKENS_PATH} parsed to an empty list`,
+    );
+  }
+  return tokens;
+}
+
+/**
+ * Group tokens by selector, preserving the first-appearance order of selectors
+ * and the within-selector declaration order. Deterministic (source-order stable).
+ *
+ * Exported for unit testing.
+ */
+export function groupBySelector(tokens) {
+  const map = new Map();
+  for (const token of tokens) {
+    if (!map.has(token.selector)) {
+      map.set(token.selector, []);
+    }
+    map.get(token.selector).push(token);
+  }
+  return map;
+}
+
+/**
+ * Partition tokens by their `surface`, returning a Map keyed by every known
+ * surface (in routing-table order) so callers can emit an EMPTY block for a
+ * surface that currently has no tokens (e.g. the seeded chrome block). Throws
+ * loudly on an unknown surface value — a routing typo must never silently drop
+ * a rule from both files.
+ *
+ * Exported for unit testing.
+ */
+export function routeBySurface(tokens) {
+  const routes = new Map(SURFACES.map((s) => [s.surface, []]));
+  for (const token of tokens) {
+    if (!routes.has(token.surface)) {
+      throw new Error(
+        `Token ${token.cssVar} in COMPONENT_TOKENS has unknown surface "${token.surface}" ` +
+          `(expected one of: ${[...VALID_SURFACES].map((s) => `"${s}"`).join(", ")}).`,
+      );
+    }
+    routes.get(token.surface).push(token);
+  }
+  return routes;
+}
+
+/**
+ * Build the full generated block (markers included). Selectors are emitted in
+ * source-file order; declarations within each selector are in source-file order.
+ * No trailing newline — the caller appends css.slice(lineEnd) which starts with
+ * the \n that follows the END marker line.
+ *
+ * `beginMarker`/`endMarker` default to the CONTENT block markers so existing
+ * call sites keep producing the byte-identical content.css block; the chrome
+ * surface passes its own marker pair. An empty `tokens` array yields just the
+ * marker pair separated by a blank line (the seeded-empty chrome block).
+ *
+ * Exported for unit testing.
+ */
+export function buildBlock(tokens, beginMarker = BEGIN_MARKER, endMarker = END_MARKER) {
+  const groups = groupBySelector(tokens);
+  const lines = [];
+
+  lines.push(beginMarker);
+
+  for (const [selector, entries] of groups) {
+    lines.push("");
+    lines.push(`${selector} {`);
+    for (const entry of entries) {
+      lines.push(`  ${entry.property}: var(${entry.cssVar}, ${entry.default});`);
+    }
+    lines.push("}");
+  }
+
+  lines.push("");
+  lines.push(endMarker);
+
+  return lines.join("\n");
+}
+
+/**
+ * Replace the existing BEGIN…END block in `css` with `block`. Throws if the
+ * markers are missing (the block must be seeded once by hand — see content.css
+ * / features.css). `beginMarker`/`endMarker` default to the content block; the
+ * chrome surface passes its own pair. `cssPath` only feeds the error message.
+ *
+ * Exported for unit testing.
+ */
+export function replaceBlock(
+  css,
+  block,
+  beginMarker = BEGIN_MARKER,
+  endMarker = END_MARKER,
+  cssPath = CONTENT_CSS_PATH,
+) {
+  const beginIdx = css.indexOf(beginMarker);
+  const endIdx = css.indexOf(endMarker);
+  if (beginIdx === -1 || endIdx === -1) {
+    throw new Error(
+      `Could not find BEGIN/END markers in ${cssPath}.\n` +
+        `Seed the marker block once by hand, then re-run the generator.`,
+    );
+  }
+  // Expand to the full line that opens the block and the end of the closing
+  // line so the whole region (including any per-selector comments the hand-
+  // written block may have had) is replaced cleanly.
+  const lineStart = css.lastIndexOf("\n", beginIdx) + 1;
+  const afterEnd = css.indexOf("\n", endIdx);
+  const lineEnd = afterEnd === -1 ? css.length : afterEnd;
+  return css.slice(0, lineStart) + block + css.slice(lineEnd);
+}
+
+function main() {
+  const check = process.argv.includes("--check");
+
+  const tokensSrc = readFileSync(TOKENS_PATH, "utf8");
+  const tokens = parseTokens(tokensSrc);
+  const routes = routeBySurface(tokens);
+
+  let drift = false;
+  let wroteAny = false;
+  const summaries = [];
+
+  for (const target of SURFACES) {
+    const surfaceTokens = routes.get(target.surface);
+    const selectorCount = [...groupBySelector(surfaceTokens).keys()].length;
+    summaries.push(
+      `${target.surface}: ${surfaceTokens.length} token(s), ${selectorCount} selector(s)`,
+    );
+
+    const css = readFileSync(target.cssPath, "utf8");
+    const block = buildBlock(surfaceTokens, target.beginMarker, target.endMarker);
+    const next = replaceBlock(
+      css,
+      block,
+      target.beginMarker,
+      target.endMarker,
+      target.cssPath,
+    );
+
+    if (next === css) continue;
+
+    if (check) {
+      console.error(
+        `component-tokens codegen drift detected: ${target.relPath} (${target.surface} surface) is out of date.`,
+      );
+      drift = true;
+    } else {
+      writeFileSync(target.cssPath, next);
+      wroteAny = true;
+      console.log(
+        `Wrote --zdc-* ${target.surface} component token block to ${target.relPath} ` +
+          `(${surfaceTokens.length} token(s), ${selectorCount} selector(s)).`,
+      );
+    }
+  }
+
+  if (check) {
+    if (drift) {
+      console.error("Run `pnpm gen:component-tokens` and commit the result.");
+      return 1;
+    }
+    console.log(
+      `OK — --zdc-* component token blocks up to date [${summaries.join("; ")}].`,
+    );
+    return 0;
+  }
+
+  if (!wroteAny) {
+    console.log(
+      `--zdc-* component token blocks already up to date [${summaries.join("; ")}]; no change.`,
+    );
+  }
+  return 0;
+}
+
+// Run the CLI only when executed directly, NOT when imported by tests (an
+// import must not rewrite content.css as a side effect — it would break
+// `pnpm test`). Compare REAL paths on both sides: when invoked through the
+// pnpm bin shim (root `pnpm gen:/check:component-tokens`, b4push), argv[1] is
+// the `node_modules/.bin/…` symlink, NOT the real workspace file, so a raw
+// path-equality check is always false and main() would silently no-op — the
+// drift guard would pass even on real drift. realpathSync resolves the shim/
+// symlink to the real file on both sides so direct invocation is detected
+// however the bin is launched.
+function isDirectInvocation() {
+  if (!process.argv[1]) return false;
+  try {
+    return (
+      realpathSync(fileURLToPath(import.meta.url)) === realpathSync(process.argv[1])
+    );
+  } catch {
+    return false;
+  }
+}
+
+if (isDirectInvocation()) {
+  process.exit(main());
+}

package/dist/chrome/assert-chrome-context.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Assert that `ctx` is a fully-wired 2.0 ChromeContext (i.e. has `hostBindings`).
+ *
+ * Throws an actionable Error when the caller passes a bare pre-2.0 deps-bag
+ * instead of the unified ChromeContext the 2.0 factories require. This catches
+ * runtime crashes (`Cannot read properties of undefined (reading 'tagVocabulary')`)
+ * at the factory boundary instead of deep inside the component render.
+ *
+ * See packages/zudo-doc/API.md — "Migration Notes" for upgrade instructions.
+ */
+export declare function assertChromeContext(ctx: unknown, factoryName: string): void;

package/dist/chrome/assert-chrome-context.js

@@ -0,0 +1,10 @@
+function assertChromeContext(ctx, factoryName) {
+  if (ctx == null || ctx.hostBindings == null) {
+    throw new Error(
+      `\`${factoryName}\` received a context without \`hostBindings\` \u2014 the 2.0 factories take a single ChromeContext, not the pre-2.0 deps-bag. See packages/zudo-doc/API.md.`
+    );
+  }
+}
+export {
+  assertChromeContext
+};

package/dist/config/component-tokens.d.ts

@@ -0,0 +1,56 @@
+/** Grouping category for a component token (drives docs/registry sectioning). */
+export type ComponentTokenCategory = "typography" | "shape" | "layout";
+/**
+ * Which rendering surface a token's backing rule targets — drives WHERE the
+ * generator emits the rule:
+ *   - `content` → the `.zd-content` typography surface; rule lands in the
+ *     BEGIN/END block in `src/content.css` (shipped as `…/content.css`).
+ *   - `chrome`  → the app shell (header/footer/sidebar/toc/cards); rule lands
+ *     in the BEGIN/END block in `src/features.css` (shipped as `…/features.css`).
+ * The two surfaces ship as separate stylesheets, so a token MUST declare its
+ * surface — the generator routes by it and fails loudly when it is absent.
+ */
+export type ComponentTokenSurface = "content" | "chrome";
+/**
+ * Union of every `--zdc-*` CSS custom property name in the registry.
+ * Provides autocomplete when a consumer iterates or references individual tokens.
+ * Must be kept in sync with the `cssVar` values in `COMPONENT_TOKENS` below.
+ */
+export type ComponentTokenName = "--zdc-doc-title-font" | "--zdc-doc-title-weight" | "--zdc-doc-title-tracking" | "--zdc-doc-h2-font" | "--zdc-doc-h2-weight" | "--zdc-doc-h2-tracking" | "--zdc-doc-h3-weight" | "--zdc-doc-h4-weight" | "--zdc-doc-prose-font" | "--zdc-doc-link-decoration" | "--zdc-admonition-radius" | "--zdc-admonition-border-width" | "--zdc-card-radius" | "--zdc-content-max-width" | "--zdc-toc-width" | "--zdc-nav-active-indicator-color" | "--zdc-nav-active-weight";
+export interface ComponentToken {
+    /**
+     * The CSS custom-property name the consumer redefines in `:root`, e.g.
+     * `--zdc-doc-title-font`. Always `--zdc-`-prefixed.
+     */
+    cssVar: `--zdc-${string}`;
+    /**
+     * The already-rendered, component-anchored selector the backing rule targets
+     * (the classes the component already emits — no JSX change). Tokens sharing a
+     * selector are emitted into a single CSS rule by the generator.
+     */
+    selector: string;
+    /** The CSS property this token drives, e.g. `font-family`. */
+    property: string;
+    /**
+     * Default value used as the `var(<cssVar>, <default>)` fallback. SHOULD chain
+     * to an existing design token or `inherit` so consumer `@theme` overrides flow
+     * through. Bare CSS literals (e.g. `4px`, `underline`) are allowed only when
+     * no design token exists for the property — document the exception in the
+     * snapshot test. The rendered default MUST be byte-identical to the pre-token
+     * output in every case.
+     */
+    default: string;
+    /** The component this token rebrands (e.g. `doc-title`). */
+    component: string;
+    /**
+     * Rendering surface the backing rule targets. The generator routes the rule
+     * to `content.css` (`content`) or `features.css` (`chrome`) by this field.
+     * Required — codegen throws if it is missing.
+     */
+    surface: ComponentTokenSurface;
+    /** Grouping category. */
+    category: ComponentTokenCategory;
+    /** Human-readable description for the registry/docs. */
+    description: string;
+}
+export declare const COMPONENT_TOKENS: ComponentToken[];

package/dist/config/component-tokens.js

@@ -0,0 +1,262 @@
+const COMPONENT_TOKENS = [
+  {
+    cssVar: "--zdc-doc-title-font",
+    selector: "h1.text-heading",
+    property: "font-family",
+    default: "inherit",
+    component: "doc-title",
+    surface: "content",
+    category: "typography",
+    description: "Font family of the doc-page title <h1> (and the other page-title h1s that share `text-heading`). Defaults to `inherit` so the title keeps the host's brand heading font; redefine in :root to rebrand."
+  },
+  {
+    cssVar: "--zdc-doc-title-weight",
+    selector: "h1.text-heading",
+    property: "font-weight",
+    default: "var(--font-weight-bold)",
+    component: "doc-title",
+    surface: "content",
+    category: "typography",
+    description: "Font weight of the doc-page title <h1> (and the other page-title h1s that share `text-heading`). Defaults to the `--font-weight-bold` token (matching the original `font-bold` utility)."
+  },
+  // `--tracking-normal: normal` (S2 scale token) — letter-spacing chains to the
+  // global scale so a consumer can override the entire scale in one place.
+  // Byte-identical because `normal` is the browser default for letter-spacing.
+  {
+    cssVar: "--zdc-doc-title-tracking",
+    selector: "h1.text-heading",
+    property: "letter-spacing",
+    default: "var(--tracking-normal)",
+    component: "doc-title",
+    surface: "content",
+    category: "typography",
+    description: "Letter spacing of the doc-page title <h1> (and the other page-title h1s that share `text-heading`). Defaults to `var(--tracking-normal)` (resolves to `normal` \u2014 byte-identical to the browser default); redefine in :root or tighten via `--tracking-tight`."
+  },
+  // ── Content heading h2 (HeadingH2 component, selector census: #2449) ───────
+  // `h2.text-title` matches every h2 with the `text-title` size role in the
+  // package: HeadingH2 content override (primary target), plus tag-section
+  // headings on index/locale-index pages, versions-page section headers, and
+  // modal headings (ai-chat, color-tweak-export). All share identical
+  // `text-title font-bold` styling — a semantically-consistent superset
+  // analogous to `h1.text-heading`. Byte-identical defaults produce zero
+  // computed change; a `:root` override rebrands all consistently.
+  {
+    cssVar: "--zdc-doc-h2-font",
+    selector: "h2.text-title",
+    property: "font-family",
+    default: "inherit",
+    component: "heading-h2",
+    surface: "content",
+    category: "typography",
+    description: "Font family of content h2 headings (HeadingH2 component and other h2s sharing `text-title`). Defaults to `inherit` so the heading keeps the host's brand font; redefine in :root to rebrand."
+  },
+  {
+    cssVar: "--zdc-doc-h2-weight",
+    selector: "h2.text-title",
+    property: "font-weight",
+    default: "var(--font-weight-bold)",
+    component: "heading-h2",
+    surface: "content",
+    category: "typography",
+    description: "Font weight of content h2 headings (HeadingH2 component and other h2s sharing `text-title`). Defaults to the `--font-weight-bold` token (matching the original `font-bold` utility)."
+  },
+  {
+    cssVar: "--zdc-doc-h2-tracking",
+    selector: "h2.text-title",
+    property: "letter-spacing",
+    default: "var(--tracking-normal)",
+    component: "heading-h2",
+    surface: "content",
+    category: "typography",
+    description: "Letter spacing of content h2 headings (HeadingH2 component and other h2s sharing `text-title`). Defaults to `var(--tracking-normal)` (byte-identical to the browser default); redefine in :root to tighten or widen."
+  },
+  // ── Content heading h3 (HeadingH3 component, selector census: #2449) ───────
+  // `h3.text-body.font-bold` is unique to the HeadingH3 component — no other
+  // h3 in the package emits both `text-body` and `font-bold`.
+  {
+    cssVar: "--zdc-doc-h3-weight",
+    selector: "h3.text-body.font-bold",
+    property: "font-weight",
+    default: "var(--font-weight-bold)",
+    component: "heading-h3",
+    surface: "content",
+    category: "typography",
+    description: "Font weight of content h3 headings (HeadingH3 component). Defaults to the `--font-weight-bold` token (matching the original `font-bold` utility)."
+  },
+  // ── Content heading h4 (HeadingH4 component, selector census: #2449) ───────
+  // `h4.text-body.font-semibold` is unique to the HeadingH4 component — no
+  // other h4 in the package emits both `text-body` and `font-semibold`.
+  {
+    cssVar: "--zdc-doc-h4-weight",
+    selector: "h4.text-body.font-semibold",
+    property: "font-weight",
+    default: "var(--font-weight-semibold)",
+    component: "heading-h4",
+    surface: "content",
+    category: "typography",
+    description: "Font weight of content h4 headings (HeadingH4 component). Defaults to the `--font-weight-semibold` token (matching the original `font-semibold` utility)."
+  },
+  // ── Content prose font (.zd-content, #2460) ────────────────────────────────
+  // Sets font-family on the content root so every element inside inherits it by
+  // default. The headings whose `--zdc-doc-*-font` default to `inherit` will
+  // inherit this value — safe because the current computed heading family already
+  // resolves to `var(--font-sans)` (Tailwind preflight sets it on `html`).
+  // Byte-identical: `.zd-content` currently carries no explicit font-family, so
+  // setting it to `var(--font-sans)` produces the same computed value.
+  {
+    cssVar: "--zdc-doc-prose-font",
+    selector: ".zd-content",
+    property: "font-family",
+    default: "var(--font-sans)",
+    component: "doc-prose",
+    surface: "content",
+    category: "typography",
+    description: "Font family of the prose content area (.zd-content). Defaults to `var(--font-sans)` (the inherited font \u2014 byte-identical); redefine in :root to use a distinct body font for doc content. Headings with `--zdc-doc-*-font: inherit` inherit this value."
+  },
+  // ── Content link (ContentLink component, styled path, #2460) ─────────────
+  // ContentLink returns early (unstyled) for `block` and `hash-link` classes;
+  // the styled path emits `text-accent underline hover:text-accent-hover`.
+  // Selector `a.text-accent.underline` (specificity 0,2,1) beats the `.underline`
+  // utility (0,1,0) and only matches the styled anchor — not block or hash-link
+  // variants. Default `underline` is a CSS keyword literal: no text-decoration
+  // token exists in the scale (documented exception to the prefer-var-() rule).
+  {
+    cssVar: "--zdc-doc-link-decoration",
+    selector: "a.text-accent.underline",
+    property: "text-decoration",
+    default: "underline",
+    component: "content-link",
+    surface: "content",
+    category: "typography",
+    description: "Text decoration of styled content links (the `text-accent underline` path in ContentLink; excludes block and hash-link variants). Defaults to `underline` (byte-identical to the current utility). Set to `none` to remove underlines from content links."
+  },
+  // ── Admonition block ([data-admonition], content-admonition.tsx, #2460) ───
+  // The base `[data-admonition]` rule in content.css has:
+  //   border-left: 4px solid var(--color-muted);
+  //   border-radius: 0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0;
+  // Both properties are tokenized below. The token rules land in the BEGIN/END
+  // block (after the base rule in source order), so at equal specificity the
+  // token defaults override the originals — byte-identical because the defaults
+  // ARE the original values.
+  // Exception: `4px` is a bare literal — no border-width scale token exists.
+  {
+    cssVar: "--zdc-admonition-radius",
+    selector: "[data-admonition]",
+    property: "border-radius",
+    default: "0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0",
+    component: "admonition",
+    surface: "content",
+    category: "shape",
+    description: "Border radius of the admonition/callout block. Defaults to the current value (0 on the left edges, `--radius-DEFAULT` on the right \u2014 preserving the flush-left accent look); redefine to round all corners or square them off."
+  },
+  {
+    cssVar: "--zdc-admonition-border-width",
+    selector: "[data-admonition]",
+    property: "border-left-width",
+    default: "4px",
+    component: "admonition",
+    surface: "content",
+    category: "shape",
+    description: "Width of the admonition left accent border. Defaults to `4px` (byte-identical to the current `border-left: 4px solid` rule). No border-width scale token exists \u2014 bare literal is the documented exception."
+  },
+  // ── Card radius (nav-indexing card grids, chrome, #2461) ──────────────────
+  // Selector census: `a.group.block` also appears in search-widget-script
+  // (search result link: `class="group block px-hsp-lg py-vsp-sm ..."`).
+  // Adding `.rounded` (present on all three card anchors — doc-card-grid,
+  // nav-card-grid, category-nav — and absent from the search result link)
+  // makes the selector unique to cards. `a.group.block.rounded` specificity
+  // 0,3,1 beats `.rounded` utility (0,1,0); unlayered beats layered (@layer
+  // utilities). No JSX change needed — cards already emit `rounded`.
+  // `--zdc-surface-radius` is a consumer meta-knob: NOT a registry entry
+  // (no single backing selector); it lives only in this default chain so a
+  // consumer can set `--zdc-surface-radius` in :root to round all surfaces.
+  {
+    cssVar: "--zdc-card-radius",
+    selector: "a.group.block.rounded",
+    property: "border-radius",
+    default: "var(--zdc-surface-radius, var(--radius-DEFAULT))",
+    component: "card-grid",
+    surface: "chrome",
+    category: "shape",
+    description: "Border radius of the nav/doc card anchor (doc-card-grid, nav-card-grid, category-nav). Defaults to `var(--zdc-surface-radius, var(--radius-DEFAULT))` \u2014 chains through the meta-knob so setting `--zdc-surface-radius` in :root rounds all surfaces at once."
+  },
+  // ── Content band max-width (.zd-doc-content-band, chrome, #2461) ──────────
+  // Two widths exist in doc-layout.tsx:
+  //   • showSidebar=true:  max-w-[clamp(50rem,75vw,90rem)] → tokenized here
+  //   • showSidebar=false: max-w-[80rem] → replaced by `data-zd-nosidebar`
+  //     attr on the band div + `.zd-doc-content-band[data-zd-nosidebar]` rule
+  //     in features.css (unlayered, specificity 0,2,0 > token rule 0,1,0).
+  // Token rule is unlayered and beats the Tailwind utility (layered). The
+  // `max-w-[clamp(50rem,75vw,90rem)]` JSX class is removed from the sidebar
+  // branch; default value is the transcribed literal — byte-identical.
+  // JS-toggle (html[data-sidebar-hidden]) remains covered by the existing
+  // `html[data-sidebar-hidden] .zd-doc-content-band` rule (specificity 0,2,1).
+  // Exception: `clamp(50rem,75vw,90rem)` is a bare CSS function expression —
+  // no equivalent design token exists (documented exception to the prefer-var()).
+  {
+    cssVar: "--zdc-content-max-width",
+    selector: ".zd-doc-content-band",
+    property: "max-width",
+    default: "clamp(50rem,75vw,90rem)",
+    component: "doc-content-band",
+    surface: "chrome",
+    category: "layout",
+    description: "Max width of the doc reading column (sidebar-present case). Defaults to `clamp(50rem,75vw,90rem)` (byte-identical to the current utility). The hide_sidebar 80rem variant is handled by `.zd-doc-content-band[data-zd-nosidebar]` in features.css; the JS-toggle variant by `html[data-sidebar-hidden] .zd-doc-content-band`."
+  },
+  // ── TOC width (nav[data-zd-toc], chrome, #2461) ───────────────────────────
+  // `nav[aria-label="Table of contents"]` has inner quotes so the parseTokens
+  // regex (which matches double-quoted strings) cannot handle it as a bare
+  // double-quoted field. `data-zd-toc` is added to the nav element in
+  // toc.tsx instead, making the selector parser-safe and an explicit anchor.
+  // Specificity 0,1,1 (element + attribute) beats `w-[280px]` (0,1,0);
+  // unlayered beats layered (@layer utilities).
+  // Exception: `280px` is a bare pixel literal — no fixed-width token exists
+  // (documented exception to the prefer-var-() rule).
+  {
+    cssVar: "--zdc-toc-width",
+    selector: "nav[data-zd-toc]",
+    property: "width",
+    default: "280px",
+    component: "toc",
+    surface: "chrome",
+    category: "layout",
+    description: "Width of the desktop Table of Contents right rail. Defaults to `280px` (byte-identical to the current `w-[280px]` utility in toc.tsx). No fixed-width design token exists \u2014 bare literal is the documented exception."
+  },
+  // ── Sidebar nav active item (a[data-nav-active], chrome, #2462) ───────────
+  // Targets non-root leaf active links in the SSR sidebar-tree island.
+  // `data-nav-active=""` is emitted on the `<a>` when `isActive && !isRoot`
+  // (sidebar-tree-island/index.tsx LeafNode). Root-level and category active
+  // items retain their unconditional `font-semibold` class (not conditional
+  // on active state) — targeting those with a single weight default would
+  // break byte-identity. Non-root leaf active is the canonical "current page"
+  // link: the most brand-identifying nav detail (#2462).
+  //
+  // Selector `a[data-nav-active]` specificity 0,1,1 beats the Tailwind
+  // utilities `bg-fg` (0,1,0) and `font-medium` (0,1,0); unlayered beats
+  // layered (@layer utilities). Defaults match the current classes exactly:
+  //   `bg-fg`      → background-color: var(--color-fg)  (byte-identical)
+  //   `font-medium`→ font-weight: var(--font-weight-medium)  (byte-identical)
+  {
+    cssVar: "--zdc-nav-active-indicator-color",
+    selector: "a[data-nav-active]",
+    property: "background-color",
+    default: "var(--color-fg)",
+    component: "nav-active",
+    surface: "chrome",
+    category: "typography",
+    description: "Background color of the active sidebar nav link (non-root leaf, the current page). Defaults to `var(--color-fg)` (byte-identical to the current `bg-fg` utility \u2014 the inversion fill that marks the active item). Redefine in :root to use an accent stripe or custom fill instead."
+  },
+  {
+    cssVar: "--zdc-nav-active-weight",
+    selector: "a[data-nav-active]",
+    property: "font-weight",
+    default: "var(--font-weight-medium)",
+    component: "nav-active",
+    surface: "chrome",
+    category: "typography",
+    description: "Font weight of the active sidebar nav link (non-root leaf, the current page). Defaults to `var(--font-weight-medium)` (byte-identical to the current `font-medium` utility). Redefine in :root to use semibold or bold for stronger active emphasis."
+  }
+];
+export {
+  COMPONENT_TOKENS
+};

package/dist/content.css

@@ -462,3 +462,59 @@
 .zd-content .mermaid foreignObject {
   overflow: visible;
 }
+
+/* ============================================================================
+ * Component tokens (`--zdc-*`) — epic zudolab/zudo-doc#2446
+ *
+ * Token-backed rules on EXISTING, component-anchored selectors. Each rule
+ * targets the classes the component already emits (NO JSX/class change) with
+ * specificity that beats the consumer's UNLAYERED Tailwind utilities, and is
+ * itself kept UNLAYERED (NOT in `@layer zd-flow`). Defaults chain to existing
+ * tokens / `inherit` (never literals) so the rendered default is byte-identical
+ * to the pre-token output — the #2425 route-injection byte-hash gate stays
+ * green — and consumer `@theme` overrides keep flowing through.
+ *
+ * Single source of truth: `src/config/component-tokens.ts`. Wave 2 (#2448) adds
+ * the `gen-component-tokens` generator that owns the BEGIN/END block below
+ * (mirroring `gen-z-index`); until then the block is maintained by hand to
+ * match what the generator will emit. Consumers rebrand a knob by redefining
+ * its `--zdc-*` custom property in `:root` — no specificity fight, reaches
+ * every route.
+ * ========================================================================== */
+
+/* BEGIN --zdc-* component tokens (generated by gen-component-tokens; do not edit by hand) */
+
+h1.text-heading {
+  font-family: var(--zdc-doc-title-font, inherit);
+  font-weight: var(--zdc-doc-title-weight, var(--font-weight-bold));
+  letter-spacing: var(--zdc-doc-title-tracking, var(--tracking-normal));
+}
+
+h2.text-title {
+  font-family: var(--zdc-doc-h2-font, inherit);
+  font-weight: var(--zdc-doc-h2-weight, var(--font-weight-bold));
+  letter-spacing: var(--zdc-doc-h2-tracking, var(--tracking-normal));
+}
+
+h3.text-body.font-bold {
+  font-weight: var(--zdc-doc-h3-weight, var(--font-weight-bold));
+}
+
+h4.text-body.font-semibold {
+  font-weight: var(--zdc-doc-h4-weight, var(--font-weight-semibold));
+}
+
+.zd-content {
+  font-family: var(--zdc-doc-prose-font, var(--font-sans));
+}
+
+a.text-accent.underline {
+  text-decoration: var(--zdc-doc-link-decoration, underline);
+}
+
+[data-admonition] {
+  border-radius: var(--zdc-admonition-radius, 0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0);
+  border-left-width: var(--zdc-admonition-border-width, 4px);
+}
+
+/* END --zdc-* component tokens */

package/dist/doc-body-end/index.js

@@ -1,7 +1,9 @@
 import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 import { SidebarResizerInit } from "../sidebar-resizer/index.js";
 import { deriveBodyEndIslands } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocBodyEnd(ctx) {
+  assertChromeContext(ctx, "createDocBodyEnd");
   const settings = ctx.settings;
   const BodyEndIslands = deriveBodyEndIslands(ctx);
   function DocBodyEnd() {

package/dist/doc-content-header/index.js

@@ -2,7 +2,9 @@ import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
 import { FrontmatterPreview } from "../metainfo/index.js";
 import { createDocMetainfoArea } from "../doc-metainfo-area/index.js";
 import { createDocTagsArea } from "../doc-tags-area/index.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocContentHeader(ctx) {
+  assertChromeContext(ctx, "createDocContentHeader");
   const t = ctx.t;
   const buildFrontmatterPreviewEntries = ctx.hostBindings.buildFrontmatterPreviewEntries ?? (() => []);
   const frontmatterRenderers = ctx.hostBindings.frontmatterRenderers ?? {};

package/dist/doc-history-area/index.js

@@ -4,7 +4,9 @@ import { BodyFootUtilArea } from "../body-foot-util/index.js";
 import { toHistorySlug } from "../slug/index.js";
 import { buildGitHubSourceUrl as buildGitHubSourceUrlBase } from "../github-helpers/index.js";
 import { deriveDocHistorySlot } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocHistoryArea(ctx) {
+  assertChromeContext(ctx, "createDocHistoryArea");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const docHistoryMeta = ctx.hostBindings.docHistoryMeta ?? {};

package/dist/doc-metainfo-area/index.js

@@ -1,6 +1,7 @@
 import { jsx } from "preact/jsx-runtime";
 import { DocMetainfo } from "../metainfo/index.js";
 import { toHistorySlug } from "../slug/index.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 const LOCALE_TO_BCP47 = {
   en: "en-US",
   ja: "ja-JP",
@@ -16,6 +17,7 @@ function formatDate(isoDate, locale) {
   });
 }
 function createDocMetainfoArea(ctx) {
+  assertChromeContext(ctx, "createDocMetainfoArea");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const docHistoryMeta = ctx.hostBindings.docHistoryMeta ?? {};

package/dist/doc-page-renderer/index.js

@@ -4,7 +4,9 @@ import { createDocContentHeader } from "../doc-content-header/index.js";
 import { createDocMetainfoArea } from "../doc-metainfo-area/index.js";
 import { createDocHistoryArea } from "../doc-history-area/index.js";
 import { deriveMdxComponents, deriveInlineVersionSwitcher } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createRenderDocPage(ctx) {
+  assertChromeContext(ctx, "createRenderDocPage");
   const docsUrl = ctx.docsUrl;
   const versionedDocsUrl = ctx.versionedDocsUrl;
   const absoluteUrl = ctx.absoluteUrl;

package/dist/doc-page-shell/index.js

@@ -12,7 +12,9 @@ import { createFooterWithDefaults } from "../footer-with-defaults/index.js";
 import { createDocBodyEnd } from "../doc-body-end/index.js";
 import { createDocPager } from "../doc-pager/index.js";
 import { deriveComposeMetaTitle } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocPageShell(ctx) {
+  assertChromeContext(ctx, "createDocPageShell");
   const settings = ctx.settings;
   const composeMetaTitle = deriveComposeMetaTitle(ctx);
   const HeadWithDefaults = createHeadWithDefaults(ctx);

package/dist/doc-pager/index.js

@@ -1,6 +1,8 @@
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "../icons/index.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocPager(ctx) {
+  assertChromeContext(ctx, "createDocPager");
   const t = ctx.t;
   function DocPager({ prev, next, locale }) {
     return /* @__PURE__ */ jsxs("nav", { class: "mt-vsp-2xl grid grid-cols-2 gap-hsp-xl", children: [

package/dist/doc-tags-area/index.js

@@ -1,7 +1,9 @@
 import { jsx } from "preact/jsx-runtime";
 import { DocTags } from "../metainfo/index.js";
 import { resolvePageTags } from "../tag-helpers/index.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createDocTagsArea(ctx) {
+  assertChromeContext(ctx, "createDocTagsArea");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const withBase = ctx.withBase;

package/dist/doclayout/doc-layout.js

@@ -70,7 +70,8 @@ function DocLayout(props) {
             /* @__PURE__ */ jsx("div", { class: "flex min-h-[calc(100vh-3.5rem)] justify-center", children: /* @__PURE__ */ jsxs(
               "div",
               {
-                class: `zd-doc-content-band flex w-full gap-[clamp(1.5rem,3vw,4rem)] ${showSidebar ? "max-w-[clamp(50rem,75vw,90rem)]" : "max-w-[80rem]"}`,
+                class: "zd-doc-content-band flex w-full gap-[clamp(1.5rem,3vw,4rem)]",
+                ...!showSidebar ? { "data-zd-nosidebar": "" } : {},
                 children: [
                   /* @__PURE__ */ jsxs("main", { class: "flex-1 min-w-0 px-hsp-xl py-vsp-xl lg:px-hsp-2xl lg:py-vsp-2xl", children: [
                     breadcrumb,

package/dist/features.css

@@ -309,12 +309,13 @@ pre[class^="syntect-"] .line .highlighted-word {
     margin-left: 0;
   }
 
-  /* When hidden via the toggle, narrow the content band to the
-   * hide_sidebar frontmatter width so it centers (the flex parent already
+  /* When the sidebar is hidden via the JS toggle, narrow the content band
+   * to the hide_sidebar width so it centers (the flex parent already
    * applies justify-content: center) instead of leaving a dead gap where
-   * the sidebar was. 80rem must match the `max-w-[80rem]` hide_sidebar
-   * branch in doc-layout.tsx. These rules are unlayered, so they win over
-   * the Tailwind `max-w-[clamp(...)]` utility (utilities layer). (#2002) */
+   * the sidebar was. The 80rem value mirrors the static hide_sidebar band
+   * width (see `.zd-doc-content-band[data-zd-nosidebar]` below and in the
+   * --zdc-content-max-width chrome token). These rules are unlayered, so
+   * they win over the Tailwind utilities layer. (#2002) */
   .zd-doc-content-band {
     transition: max-width var(--zd-transition-slow) ease-in-out;
   }
@@ -324,6 +325,16 @@ pre[class^="syntect-"] .line .highlighted-word {
   }
 }
 
+/* hide_sidebar band width — applies when doc-layout.tsx sets showSidebar=false
+ * (hide_sidebar frontmatter). The `max-w-[80rem]` JSX utility was replaced by a
+ * data-zd-nosidebar attr + this rule when --zdc-content-max-width was added (#2461).
+ * Specificity 0,2,0 (class + attr) beats the generated token rule (0,1,0) so
+ * hide_sidebar pages keep their narrower 80rem reading column. All-screen (not
+ * inside @media) because the band element exists at every breakpoint. */
+.zd-doc-content-band[data-zd-nosidebar] {
+  max-width: 80rem;
+}
+
 /* Sidebar toggle button — left position uses CSS variable, needs global rule */
 @media (min-width: 1024px) {
   .zd-desktop-sidebar-toggle {
@@ -880,3 +891,41 @@ dialog.zd-mermaid-dialog::backdrop {
 .diff-line-empty {
   background-color: color-mix(in oklch, var(--color-muted) 8%, transparent);
 }
+
+/* ============================================================================
+ * Chrome component tokens (`--zdc-*`) — epic zudolab/zudo-doc#2446
+ *
+ * The CHROME-surface counterpart of the content-surface `--zdc-*` block in
+ * `src/content.css`. Token-backed rules on EXISTING, component-anchored
+ * selectors for the app shell (header/footer/sidebar/toc/cards). Each rule
+ * targets the classes the component already emits (NO JSX/class change) with
+ * specificity that beats the consumer's UNLAYERED Tailwind utilities, and is
+ * itself kept UNLAYERED (mirroring the content block) so a consumer rebrands a
+ * knob by redefining its `--zdc-*` custom property in `:root`.
+ *
+ * Single source of truth: `src/config/component-tokens.ts` (tokens with
+ * `surface: "chrome"`). The `gen-component-tokens` generator owns the BEGIN/END
+ * block below — never hand-edit between the markers. Seeded empty: no chrome
+ * tokens exist yet (S1, #2458 added only the routing mechanism).
+ * ========================================================================== */
+
+/* BEGIN --zdc-* chrome component tokens (generated by gen-component-tokens; do not edit by hand) */
+
+a.group.block.rounded {
+  border-radius: var(--zdc-card-radius, var(--zdc-surface-radius, var(--radius-DEFAULT)));
+}
+
+.zd-doc-content-band {
+  max-width: var(--zdc-content-max-width, clamp(50rem,75vw,90rem));
+}
+
+nav[data-zd-toc] {
+  width: var(--zdc-toc-width, 280px);
+}
+
+a[data-nav-active] {
+  background-color: var(--zdc-nav-active-indicator-color, var(--color-fg));
+  font-weight: var(--zdc-nav-active-weight, var(--font-weight-medium));
+}
+
+/* END --zdc-* chrome component tokens */

package/dist/footer-with-defaults/index.js

@@ -1,6 +1,8 @@
 import { jsx } from "preact/jsx-runtime";
 import { Footer } from "../footer/index.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createFooterWithDefaults(ctx) {
+  assertChromeContext(ctx, "createFooterWithDefaults");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const tagVocabulary = ctx.hostBindings.tagVocabulary ?? [];

package/dist/head-with-defaults/index.js

@@ -3,7 +3,9 @@ import { OgTags, TwitterCard } from "../head/index.js";
 import { SIDEBAR_RESIZER_RESTORE_SCRIPT } from "../sidebar-resizer/index.js";
 import ColorSchemeProvider from "../theme/color-scheme-provider.js";
 import { deriveComposeMetaTitle, deriveColorSchemeGenerators } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createHeadWithDefaults(ctx) {
+  assertChromeContext(ctx, "createHeadWithDefaults");
   const settings = ctx.settings;
   const composeMetaTitle = deriveComposeMetaTitle(ctx);
   const withBase = ctx.withBase;

package/dist/header-with-defaults/index.js

@@ -8,8 +8,10 @@ import {
 import { ThemeToggle } from "../theme-toggle/index.js";
 import { SidebarToggle } from "../sidebar-toggle-island/index.js";
 import { buildGitHubRepoUrl as buildGitHubRepoUrlBase } from "../github-helpers/index.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 import { deriveNavDataPrep, deriveSearchWidgetSlot } from "../chrome/derive.js";
 function createHeaderWithDefaults(ctx) {
+  assertChromeContext(ctx, "createHeaderWithDefaults");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const locales = ctx.locales;

package/dist/safelist.css

@@ -1,2 +1,2 @@
 /* generated by gen-safelist.mjs — do not edit by hand */
-@source inline("-link -mb-px -ml-hsp-sm -noscript -translate-x-full 2xl:w-[24px] [&::-webkit-details-marker]:hidden [&_a]:text-accent [&_a]:underline [&_nav]:mb-0 [data-kbd-shortcut] [doc-history-meta] [doc-history] [doc-layout] [llms-txt] a a2 abbr about above absent absolute across activated active actual added admonition admonition- admonition-body admonition-title after after-breadcrumb after-content after-navigate after-sidebar after-title against agent agents ai-chat ai-chat-md ai-chat-trigger alert align-top all allow-same-origin allow-scripts alone already already-executed an anchor anchored and and/or animate-spin announce antialiased any application/json application/xml applies apply-css-vars approach are area arg aria-atomic aria-busy aria-controls aria-current aria-disabled aria-expanded aria-haspopup aria-hidden aria-label aria-live aria-orientation aria-pressed aria-selected aria-valuemax aria-valuemin aria-valuenow arrive arrows article as asc aside aspect-[1200/630] aspect-square asset- assets assigning assistant async at attach attribute attributes auto autogenerated available avoid await away b back backdrop:bg-bg/30 backdrop:bg-bg/80 backdrop:bg-overlay/60 backdrop:z-modal-backdrop background backtick backticks baked banner bare base base64 based batch be because before below best between bg bg-[#fff] bg-accent bg-bg bg-chat-assistant-bg bg-chat-user-bg bg-code-bg bg-fg bg-info/10 bg-info/5 bg-muted bg-overlay/30 bg-surface bg-transparent bg-warning/10 bg-warning/5 bi bigint bin blank blanks blob block blockquote blocks blur body body-end-components body-end-scripts boolean bootstrap border border-accent border-b border-b-2 border-b-[5px] border-bg/30 border-collapse border-danger border-dashed border-fg border-info/30 border-l border-l-0 border-l-[3px] border-muted border-none border-r border-solid border-t border-t-[2px] border-t-[3px] border-transparent border-warning/30 border-y both bottom-vsp-xl box-border br breadcrumb:end breadcrumb:start break-words browser browsers btn bug build bundler but button buttons by bypassed cached call caller can cancellation cannot canonical caption carry cases cat-nav- catch category catppuccin-latte caught caution center center/contain change changed changes checkbox child ci circle cite class class-less claude claude-agents claude-commands claude-md claude-skills cleaned clear clear-css-vars clearing click client client-router client-side clip clobbering close closed closing code code-block-sr-announce code-group code-group-panel col col-resize colgroup collision color color-scheme color-scheme-changed color-scheme-provider color-tweak colorization colors command commands commit compare component component:github-link component:language-switcher component:search component:theme-toggle component:version-switcher compute computed concrete configuration configure configured connect const consumer consumes container containers containing content content-admonition content-type content-wrapper:end content-wrapper:start contents context controller controls converts copy correct correctly corrupt count covered covers cp crashes created cross-component crumb- cs css cur current cursor cursor-not-allowed cursor-pointer custom danger dark data data-active data-admonition data-base data-close-search data-group-id data-header data-header-logo data-header-nav data-header-right data-kbd-shortcut data-loading-index data-mermaid-enlarge-ready data-mermaid-rendered data-mermaid-src data-nav-item data-nav-item-dropdown data-nav-more data-nav-more-menu data-nav-more-toggle data-no-results data-open-search data-pan-active data-processed data-result-count-template data-search-count data-search-count-narrow data-search-dialog data-search-input data-search-placeholder data-search-results data-search-unavailable data-sidebar-hidden data-sidebar-resizer data-site-nav data-tab-btn data-tab-default data-tab-label data-tab-value data-tabs data-taglist-group data-testid data-theme data-theme/style data-variant data-version-banner data-version-menu data-version-switcher data-version-toggle data-zfb-transition-persist dd debounced decimal declare decoration-muted default defaults del delegated desc description design design-token-panel design-token-trigger desktop desktop-sidebar desktop-sidebar-toggle desktop-sidebar-toggle-island destructive detach detached details deterministic develop dfn diagram diagrams dialog dieser diff diff-line-added diff-line-content diff-line-empty diff-line-num diff-line-removed diff-row dir directly directories directory disabled disabled:opacity-50 disc display:none dist div dl do doc doc-card- doc-history doc-history-generate doc-history-panel doc-history-trigger doc-pager docs docs- docs-v- document document-level does double-registration drag draggable drop dropdown dropdown-child dropdown-parent dropdowns dt duration-150 duration-200 during dynamically e e2e each earlier ease-in-out edge eject ejected el element elements els else em emit emitting empty empty/undefined en enable end enlarged entire entities entries entry error escape escaped even eventually every exactly excerpt existing exists exit expected export extends failed fall fallback fallbacks falls false fast feature feed fg fields fieldset figcaption figure file fill fills finally find fire fires first fixed fixtures flag flash flat flex flex-1 flex-col flex-wrap flip flipping flips focus focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 focus-visible:underline focus:border-accent focus:outline-none focus:underline font font-bold font-medium font-mono font-semibold footer footer- for form found free fresh from frontmatter frontmatter-preview frozen fs-extra full fully function further g gap-[0.3em] gap-[clamp(1.5rem,3vw,4rem)] gap-hsp-2xs gap-hsp-md gap-hsp-sm gap-hsp-xl gap-hsp-xs gap-vsp-2xs gap-vsp-lg gap-vsp-md gap-vsp-xs gap-x-hsp-2xs gap-x-hsp-lg gap-x-hsp-md gap-x-hsp-sm gap-x-hsp-xs gap-y-vsp-2xs gap-y-vsp-lg gap-y-vsp-md gap-y-vsp-xs gaps gate generate generation genuine geometry get github github-link go got graph gray-matter grid grid-cols-1 grid-cols-2 group group-focus-visible:text-accent group-focus-visible:underline group-focus-within:block group-hover:bg-fg group-hover:block group-hover:text-accent group-hover:text-bg group-hover:underline group-open:rotate-90 guard h-[0.5rem] h-[0.625rem] h-[0.875rem] h-[1.125rem] h-[1.25rem] h-[1.575rem] h-[14px] h-[1lh] h-[2rem] h-[3.5rem] h-[3rem] h-[90vh] h-[calc(100%-3rem)] h-[calc(100vh-3.5rem)] h-dvh h-full h-icon-lg h-icon-md h-icon-sm h-icon-xs h1 h2 h3 h4 h5 h6 half hand handle handled handler handlers has hash-link have head head-links head-scripts header header- header-call:end header-call:start height here hex hidden highlight highlighter history hit horizontal host hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)] hover:bg-accent-hover hover:bg-accent/10 hover:bg-surface hover:border-accent hover:border-accent-hover hover:border-fg hover:text-accent hover:text-accent-hover hover:text-fg hover:underline hr href hrefs html i i18n/theme. i2 i3 i4 icon identical idle idx if iframe image image-enlarge image/png img import important imports in inactive inbox includes index index-load info inherit initial initialised injected inline inline-block inline-flex input input-clear ins inset-0 inside install instance instanceof instead instructions intended intent into invalid inverse invoke is issues it italic item item- items items-baseline items-center items-start its itself javascript justify-between justify-center justify-end justify-start katex kbd keep keeps kept keyboard keyboard-shortcut keydown keystroke keywords khroma label landing language-switcher last:border-b-0 later launch leading-relaxed leading-snug leading-tight leaf- leak leaves leaving left left-0 left:calc legend legitimate lg lg:block lg:border lg:border-fg lg:border-solid lg:flex lg:flex-col lg:flex-row lg:gap-hsp-xl lg:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] lg:h-[90vh] lg:hidden lg:justify-start lg:m-auto lg:max-h-[90vh] lg:max-w-[52.5rem] lg:ml-[var(--zd-sidebar-w)] lg:pt-vsp-2xl lg:px-hsp-2xl lg:py-vsp-2xl lg:text-left lg:w-[90vw] lg:w-[clamp(16rem,25%,22rem)] li li2 light like likely line linger link link- links list-disc list-none listener literal literals lives llms llms-txt load local locale locales log longest-match look lostpointercapture lower lowercased luminance m m-0 m21 m6 main make malformed malicious maps mark marks matches matching math math-display math-inline max max-h-[80vh] max-h-[85vh] max-h-[90vh] max-h-full max-h-none max-w-[46rem] max-w-[80rem] max-w-[85%] max-w-[85vw] max-w-[90vw] max-w-[clamp(50rem,75vw,90rem)] max-w-full max-w-none may mb-0 mb-vsp-2xs mb-vsp-lg mb-vsp-md mb-vsp-sm mb-vsp-xl mb-vsp-xs measures measuring mechanism menu merged mermaid message messages meta metadata min-h-[60vh] min-h-[calc(100vh-3.5rem)] min-h-screen min-w-0 min-w-[10rem] min-w-[8rem] mirror mirrors missing ml-auto ml-hsp-2xl ml-hsp-lg ml-hsp-sm ml-hsp-xl mod mode mounted mouseenter mouseleave mr-hsp-sm mt-0 mt-vsp-2xl mt-vsp-2xs mt-vsp-3xs mt-vsp-lg mt-vsp-md mt-vsp-sm mt-vsp-xl must mutates mutation mutations mx-auto my-vsp-lg my-vsp-md name named native nav nav-card- navigating navigation navigations near needs new newly-swapped next no no-enlarge no-op no-repeat no-underline node node:buffer node:fs node:fs/promises node:module node:path nodes nofollow noindex non-empty non-persisted non-string none noopener noreferrer normal noscript not not-object note now null number numeric object object-contain observe observer occurred of off og:description og:image og:image:alt og:image:height og:image:width og:title og:type og:url ol old older on once one only opacity-60 open open/close option or original other others out outline-none over overflow overflow-auto overflow-hidden overflow-x-auto overflow-y-auto overflow-y:auto overwrite own p p-0 p-hsp-lg p-hsp-md p-hsp-sm p-hsp-xl package package-owned packages padding page page-loading page-loading-overlay page-loading-spinner page-navigate-end pages pages/. paint pan panel panels parent parse parsed pass passed path paths pattern pb-[50vh] pb-vsp-md pb-vsp-xl pb-vsp-xs per per-call per-link permanently persisted pi pick picked picks picocolors pins pipelines pl-[1.25rem] pl-hsp-lg pl-hsp-sm pl-hsp-xl place placeholder placeholder:text-muted plain plural plus pnpm pointer-events-none pointercancel pointerdown pointermove pointerup polite polygon polyline populates port position position:fixed pr-[4px] pr-hsp-lg pr-hsp-md pr-hsp-sm pr-hsp-xl pre pre-lowercased preact preact/compat preact/hooks preact/jsx-runtime preconnect preload pres preserved print produce produced produces production project propagating properties property props provided proxy pt-[0.15rem] pt-[2px] pt-vsp-3xs pt-vsp-md pt-vsp-sm pt-vsp-xl pt-vsp-xs ptag- public purely px px-hsp-2xl px-hsp-2xs px-hsp-lg px-hsp-md px-hsp-sm px-hsp-xl px-hsp-xs py-0 py-[2px] py-[calc(var(--spacing-vsp-xs)+0.15rem)] py-hsp-2xs py-hsp-sm py-hsp-xs py-vsp-2xs py-vsp-3xs py-vsp-lg py-vsp-md py-vsp-sm py-vsp-xl py-vsp-xs q query question r raw re-encode/decode re-lowercase re-querying re-render re-renders re-run re-running re-selects reach reached reaches read reading reads ready real real-value recorded recovers ref- references refetch refreshes regenerate regenerates reinit reinits relative reload remains remove removed render rendered renders reorder repaint repeated repeating replaced replaces repopulate requires reserved resize resize-x resolve resolved resolves response restore restores result result-click results results-area retry return returns revision revisions rewrite right- right-0 ro robots role root rotate-180 rotate-90 round round-trip rounded rounded-[0.75rem] rounded-bl-[0.25rem] rounded-bl-[1rem] rounded-br-[0.25rem] rounded-br-[1rem] rounded-full rounded-lg rounded-t-[1rem] route router routes routes-src running runs runtime s safe safer same same-locale samp scanned schema-mismatch schema-missing scheme score scored script script- script-eval script-evaluation script-injection scripts scroll scrollbar scrolled scrollend search search-index searched section section- see sel-bg sel-fg select select-none self self-start sentinel separator server server-rendered set sets setup shadow-[0_1px_3px_color-mix(in_srgb,var(--color-fg)_8%,transparent)] shadow-lg shared shiki ship ships short shortcut should show shown shrink-0 sidebar sidebar- sidebar-toggle-island sidebar-tree-island signal similarity single singular site-search site-tree-nav-island sitemap- sites size skill skills skipping skips slash slug sm:border sm:border-muted sm:flex-row sm:grid-cols-2 sm:h-auto sm:items-center sm:justify-between sm:max-h-[80vh] sm:max-w-[52rem] sm:mx-auto sm:my-[10vh] sm:rounded-lg small smooth snapshot snapshots so soft soft-nav solid some somehow source sources space-y-vsp-2xs spacing span spans spec specifier specifiers sr-only src stale start state status stay sticky still stop stored stray string strings strip stroke-linecap stroke-linejoin stroke-width strong style style-attribute styles stylesheet sub subagents subsequent success successful summary sup support survives svg swap swapped swaps synchronous synchronously syntactically syntect t tab tab-item tab-panel tabindex table tablist tabpanel tabs tabs-container tabs-content tabs-nav tag tag- tag-item- tags tags:audit tbody td temp temp-element template temporary temporary-element terminal terms test-results text text-accent text-bg text-body text-caption text-center text-chat-assistant-text text-chat-user-text text-code-fg text-danger text-display text-fg text-heading text-info text-left text-micro text-muted text-muted/50 text-right text-small text-title text-warning text/plain textarea tfoot th that the thead their them theme theme-color theme-toggle theme/token then there these they this through throw time tip title to toggle toggle-ai-chat toggle-design-token-panel toggles token tokens tolerates too toolbar top-0 top-[3.5rem] top-full top-level total touches tp tr tracked tracking-wider trade-off transition transition-[background,color,border-color] transition-[left,color] transition-colors transition-transform translate-x-0 translations transparent treats tree tree-child- tree-item- tree-top- trick trigger trigger:ai-chat trigger:design-token-panel triggers true truncate truncated try turn twitter:card twitter:creator twitter:description twitter:image twitter:site twitter:title two type u ul unavailable unchanged undefined under underline understand unknown unmaintained unobserve unreadable unrelated unreleased unreliable unset unsupported up uppercase usage use used user uses utf-8 utf8 utilities v v2 val value value-reader values var variable version version- version-menu version-switcher vertical via video viewport virtual:zudo-doc-route-context visible vitesse-dark vocabulary w w-1/2 w-[0.5rem] w-[0.625rem] w-[0.875rem] w-[1.125rem] w-[1.575rem] w-[1.5rem] w-[1.75rem] w-[14px] w-[16px] w-[16rem] w-[18px] w-[280px] w-[2rem] w-[320px] w-[90vw] w-[var(--zd-sidebar-w)] w-dvw w-full w-icon-lg w-icon-md w-icon-sm w-icon-xs want warning was watching wbr wbr- we website went were what when where whereas whether which while whitespace-nowrap whitespace-pre whole will with without word working worktrees would wrap wrapper wrappers written wrong wrote xl:flex xl:hidden y-scrollbar yet you your z-dropdown z-local-1 z-modal z-modal-backdrop z-sidebar z-toolbar zd-content zd-desktop-sidebar-toggle zd-doc-content-band zd-enlarge-btn zd-enlarge-dialog zd-enlarge-dialog-close zd-enlargeable zd-html-preview-code zd-mermaid-dialog zd-mermaid-enlargeable zd-mermaid-tool-btn zd-mermaid-toolbar zd-mermaid-transform zd-mermaid-viewport zd-sidebar-content-wrapper zd-sidebar-open zfb zfb:after-swap zfb:before-preparation zod zoom zudo-doc-design-tokens/v1 zudo-doc-sidebar-visible zudo-doc-sidebar-width zudo-doc-theme zudo-doc-theme-bridge");
+@source inline("-link -mb-px -ml-hsp-sm -noscript -translate-x-full 2xl:w-[24px] [&::-webkit-details-marker]:hidden [&_a]:text-accent [&_a]:underline [&_nav]:mb-0 [data-admonition] [data-kbd-shortcut] [doc-history-meta] [doc-history] [doc-layout] [llms-txt] a a2 abbr about above absent absolute accent across activated active actual added admonition admonition- admonition-body admonition-title admonition/callout after after-breadcrumb after-content after-navigate after-sidebar after-title against agent agents ai-chat ai-chat-md ai-chat-trigger alert align-top all allow-same-origin allow-scripts alone already already-executed an anchor anchored and and/or animate-spin announce antialiased any application/json application/xml applies apply-css-vars approach are area arg aria-atomic aria-busy aria-controls aria-current aria-disabled aria-expanded aria-haspopup aria-hidden aria-label aria-live aria-orientation aria-pressed aria-selected aria-valuemax aria-valuemin aria-valuenow arrive arrows article as asc aside aspect-[1200/630] aspect-square asset- assets assigning assistant async at attach attribute attributes auto autogenerated available avoid await away b back backdrop:bg-bg/30 backdrop:bg-bg/80 backdrop:bg-overlay/60 backdrop:z-modal-backdrop background background-color backtick backticks baked banner bare base base64 based batch be because before below best between bg bg-[#fff] bg-accent bg-bg bg-chat-assistant-bg bg-chat-user-bg bg-code-bg bg-fg bg-info/10 bg-info/5 bg-muted bg-overlay/30 bg-surface bg-transparent bg-warning/10 bg-warning/5 bi bigint bin blank blanks blob block blockquote blocks blur body body-end-components body-end-scripts bold boolean bootstrap border border-accent border-b border-b-2 border-b-[5px] border-bg/30 border-collapse border-danger border-dashed border-fg border-info/30 border-l border-l-0 border-l-[3px] border-left-width border-muted border-none border-r border-radius border-solid border-t border-t-[2px] border-t-[3px] border-transparent border-warning/30 border-width border-y both bottom-vsp-xl box-border br brand breadcrumb:end breadcrumb:start break-words browser browsers btn bug build bundler but button buttons by bypassed byte-identical cached call caller can cancellation cannot canonical caption card card-grid carry cases cat-nav- catch category catppuccin-latte caught caution center center/contain chains change changed changes checkbox child chrome ci circle cite class class-less claude claude-agents claude-commands claude-md claude-skills cleaned clear clear-css-vars clearing click client client-router client-side clip clobbering close closed closing code code-block-sr-announce code-group code-group-panel col col-resize colgroup collision color color-scheme color-scheme-changed color-scheme-provider color-tweak colorization colors column command commands commit compare component component:github-link component:language-switcher component:search component:theme-toggle component:version-switcher compute computed concrete configuration configure configured connect const consumer consumes container containers containing content content-admonition content-link content-type content-wrapper:end content-wrapper:start contents context controller controls converts copy corners correct correctly corrupt count covered covers cp crashes created cross-component crumb- cs css cur current cursor cursor-not-allowed cursor-pointer custom danger dark data data-active data-admonition data-base data-close-search data-group-id data-header data-header-logo data-header-nav data-header-right data-kbd-shortcut data-loading-index data-mermaid-enlarge-ready data-mermaid-rendered data-mermaid-src data-nav-active data-nav-item data-nav-item-dropdown data-nav-more data-nav-more-menu data-nav-more-toggle data-no-results data-open-search data-pan-active data-processed data-result-count-template data-search-count data-search-count-narrow data-search-dialog data-search-input data-search-placeholder data-search-results data-search-unavailable data-sidebar-hidden data-sidebar-resizer data-site-nav data-tab-btn data-tab-default data-tab-label data-tab-value data-tabs data-taglist-group data-testid data-theme data-theme/style data-variant data-version-banner data-version-menu data-version-switcher data-version-toggle data-zd-nosidebar data-zd-toc data-zfb-transition-persist dd debounced decimal declare decoration decoration-muted default defaults del delegated desc description design design-token-panel design-token-trigger desktop desktop-sidebar desktop-sidebar-toggle desktop-sidebar-toggle-island destructive detach detached details deterministic develop dfn diagram diagrams dialog dieser diff diff-line-added diff-line-content diff-line-empty diff-line-num diff-line-removed diff-row dir directly directories directory disabled disabled:opacity-50 disc display:none dist distinct div dl do doc doc-card- doc-content-band doc-history doc-history-generate doc-history-panel doc-history-trigger doc-page doc-pager doc-prose doc-title docs docs- docs-v- document document-level documented does double-registration drag draggable drop dropdown dropdown-child dropdown-parent dropdowns dt duration-150 duration-200 during dynamically e e2e each earlier ease-in-out edge eject ejected el element elements els else em emit emitting empty empty/undefined en enable end enlarged entire entities entries entry error escape escaped even eventually every exactly excerpt excludes existing exists exit expected export extends factories failed fall fallback fallbacks falls false family fast feature feed fg fields fieldset figcaption figure file fill fills finally find fire fires first fixed fixed-width fixtures flag flash flat flex flex-1 flex-col flex-wrap flip flipping flips flush-left focus focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2 focus-visible:underline focus:border-accent focus:outline-none focus:underline font font-bold font-family font-medium font-mono font-semibold font-weight footer footer- for form found free fresh from frontmatter frontmatter-preview frozen fs-extra full fully function further g gap-[0.3em] gap-[clamp(1.5rem,3vw,4rem)] gap-hsp-2xs gap-hsp-md gap-hsp-sm gap-hsp-xl gap-hsp-xs gap-vsp-2xs gap-vsp-lg gap-vsp-md gap-vsp-xs gap-x-hsp-2xs gap-x-hsp-lg gap-x-hsp-md gap-x-hsp-sm gap-x-hsp-xs gap-y-vsp-2xs gap-y-vsp-lg gap-y-vsp-md gap-y-vsp-xs gaps gate generate generation genuine geometry get github github-link go got graph gray-matter grid grid-cols-1 grid-cols-2 group group-focus-visible:text-accent group-focus-visible:underline group-focus-within:block group-hover:bg-fg group-hover:block group-hover:text-accent group-hover:text-bg group-hover:underline group-open:rotate-90 guard h-[0.5rem] h-[0.625rem] h-[0.875rem] h-[1.125rem] h-[1.25rem] h-[1.575rem] h-[14px] h-[1lh] h-[2rem] h-[3.5rem] h-[3rem] h-[90vh] h-[calc(100%-3rem)] h-[calc(100vh-3.5rem)] h-dvh h-full h-icon-lg h-icon-md h-icon-sm h-icon-xs h1 h1s h2 h2s h3 h4 h5 h6 half hand handle handled handler handlers has hash-link have head head-links head-scripts header header- header-call:end header-call:start heading heading-h2 heading-h3 heading-h4 headings height here hex hidden highlight highlighter history hit horizontal host hover:bg-[color-mix(in_srgb,var(--color-surface)_80%,var(--color-fg)_20%)] hover:bg-accent-hover hover:bg-accent/10 hover:bg-surface hover:border-accent hover:border-accent-hover hover:border-fg hover:text-accent hover:text-accent-hover hover:text-fg hover:underline hr href hrefs html i i18n/theme. i2 i3 i4 icon identical idle idx if iframe image image-enlarge image/png img import important imports in inactive inbox includes index index-load info inherit inherited initial initialised injected inline inline-block inline-flex input input-clear ins inset-0 inside install instance instanceof instead instructions intended intent into invalid inverse inversion invoke is issues it italic item item- items items-baseline items-center items-start its itself javascript justify-between justify-center justify-end justify-start katex kbd keep keeps kept keyboard keyboard-shortcut keydown keystroke keywords khroma label landing language-switcher last:border-b-0 later launch layout leading-relaxed leading-snug leading-tight leaf- leak leaves leaving left left-0 left:calc legend legitimate letter-spacing lg lg:block lg:border lg:border-fg lg:border-solid lg:flex lg:flex-col lg:flex-row lg:gap-hsp-xl lg:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))] lg:h-[90vh] lg:hidden lg:justify-start lg:m-auto lg:max-h-[90vh] lg:max-w-[52.5rem] lg:ml-[var(--zd-sidebar-w)] lg:pt-vsp-2xl lg:px-hsp-2xl lg:py-vsp-2xl lg:text-left lg:w-[90vw] lg:w-[clamp(16rem,25%,22rem)] li li2 light like likely line linger link link- links list-disc list-none listener literal literals lives llms llms-txt load local locale locales log longest-match look lostpointercapture lower lowercased luminance m m-0 m21 m6 main make malformed malicious maps mark marks matches matching math math-display math-inline max max-h-[80vh] max-h-[85vh] max-h-[90vh] max-h-full max-h-none max-w-[46rem] max-w-[85%] max-w-[85vw] max-w-[90vw] max-w-[clamp(50rem,75vw,90rem)] max-w-full max-w-none max-width may mb-0 mb-vsp-2xs mb-vsp-lg mb-vsp-md mb-vsp-sm mb-vsp-xl mb-vsp-xs measures measuring mechanism menu merged mermaid message messages meta meta-knob metadata min-h-[60vh] min-h-[calc(100vh-3.5rem)] min-h-screen min-w-0 min-w-[10rem] min-w-[8rem] mirror mirrors missing ml-auto ml-hsp-2xl ml-hsp-lg ml-hsp-sm ml-hsp-xl mod mode mounted mouseenter mouseleave mr-hsp-sm mt-0 mt-vsp-2xl mt-vsp-2xs mt-vsp-3xs mt-vsp-lg mt-vsp-md mt-vsp-sm mt-vsp-xl must mutates mutation mutations mx-auto my-vsp-lg my-vsp-md name named native nav nav-active nav-card- nav/doc navigating navigation navigations near needs new newly-swapped next no no-enlarge no-op no-repeat no-underline node node:buffer node:fs node:fs/promises node:module node:path nodes nofollow noindex non-empty non-persisted non-string none noopener noreferrer normal noscript not not-object note now null number numeric object object-contain observe observer occurred of off og:description og:image og:image:alt og:image:height og:image:width og:title og:type og:url ol old older on once one only opacity-60 open open/close option or original other others out outline-none over overflow overflow-auto overflow-hidden overflow-x-auto overflow-y-auto overflow-y:auto overwrite own p p-0 p-hsp-lg p-hsp-md p-hsp-sm p-hsp-xl package package-owned packages padding page page-loading page-loading-overlay page-loading-spinner page-navigate-end page-title pages pages/. paint pan panel panels parent parse parsed pass passed path paths pattern pb-[50vh] pb-vsp-md pb-vsp-xl pb-vsp-xs per per-call per-link permanently persisted pi pick picked picks picocolors pins pipelines pl-[1.25rem] pl-hsp-lg pl-hsp-sm pl-hsp-xl place placeholder placeholder:text-muted plain plural plus pnpm pointer-events-none pointercancel pointerdown pointermove pointerup polite polygon polyline populates port position position:fixed pr-[4px] pr-hsp-lg pr-hsp-md pr-hsp-sm pr-hsp-xl pre pre-lowercased preact preact/compat preact/hooks preact/jsx-runtime preconnect preload pres preserved preserving print produce produced produces production project propagating properties property props prose provided proxy pt-[0.15rem] pt-[2px] pt-vsp-3xs pt-vsp-md pt-vsp-sm pt-vsp-xl pt-vsp-xs ptag- public purely px px-hsp-2xl px-hsp-2xs px-hsp-lg px-hsp-md px-hsp-sm px-hsp-xl px-hsp-xs py-0 py-[2px] py-[calc(var(--spacing-vsp-xs)+0.15rem)] py-hsp-2xs py-hsp-sm py-hsp-xs py-vsp-2xs py-vsp-3xs py-vsp-lg py-vsp-md py-vsp-sm py-vsp-xl py-vsp-xs q query question r radius raw re-encode/decode re-lowercase re-querying re-render re-renders re-run re-running re-selects reach reached reaches read reading reads ready real real-value received recorded recovers redefine ref- references refetch refreshes regenerate regenerates reinit reinits relative reload remains remove removed render rendered renders reorder repaint repeated repeating replaced replaces repopulate requires reserved resize resize-x resolve resolved resolves response restore restores result result-click results results-area retry return returns revision revisions rewrite right right- right-0 ro robots role root rotate-180 rotate-90 round round-trip rounded rounded-[0.75rem] rounded-bl-[0.25rem] rounded-bl-[1rem] rounded-br-[0.25rem] rounded-br-[1rem] rounded-full rounded-lg rounded-t-[1rem] rounds route router routes routes-src running runs runtime s safe safer same same-locale samp scale scanned schema-mismatch schema-missing scheme score scored script script- script-eval script-evaluation script-injection scripts scroll scrollbar scrolled scrollend search search-index searched section section- see sel-bg sel-fg select select-none self self-start semibold sentinel separator server server-rendered set sets setting setup shadow-[0_1px_3px_color-mix(in_srgb,var(--color-fg)_8%,transparent)] shadow-lg shape share shared sharing shiki ship ships short shortcut should show shown shrink-0 sidebar sidebar- sidebar-toggle-island sidebar-tree-island signal similarity single singular site-search site-tree-nav-island sitemap- sites size skill skills skipping skips slash slug sm:border sm:border-muted sm:flex-row sm:grid-cols-2 sm:h-auto sm:items-center sm:justify-between sm:max-h-[80vh] sm:max-w-[52rem] sm:mx-auto sm:my-[10vh] sm:rounded-lg small smooth snapshot snapshots so soft soft-nav solid some somehow source sources space-y-vsp-2xs spacing span spans spec specifier specifiers square sr-only src stale start state status stay sticky still stop stored stray string strings strip stripe stroke-linecap stroke-linejoin stroke-width strong stronger style style-attribute styled styles stylesheet sub subagents subsequent success successful summary sup support surfaces survives svg swap swapped swaps synchronous synchronously syntactically syntect t tab tab-item tab-panel tabindex table tablist tabpanel tabs tabs-container tabs-content tabs-nav tag tag- tag-item- tags tags:audit take tbody td temp temp-element template temporary temporary-element terminal terms test-results text text-accent text-bg text-body text-caption text-center text-chat-assistant-text text-chat-user-text text-code-fg text-danger text-decoration text-display text-fg text-heading text-info text-left text-micro text-muted text-muted/50 text-right text-small text-title text-warning text/plain textarea tfoot th that the thead their them theme theme-color theme-toggle theme/token then there these they this through throw tighten time tip title to toc toggle toggle-ai-chat toggle-design-token-panel toggles token tokens tolerates too toolbar top-0 top-[3.5rem] top-full top-level total touches tp tr tracked tracking-wider trade-off transition transition-[background,color,border-color] transition-[left,color] transition-colors transition-transform translate-x-0 translations transparent treats tree tree-child- tree-item- tree-top- trick trigger trigger:ai-chat trigger:design-token-panel triggers true truncate truncated try turn twitter:card twitter:creator twitter:description twitter:image twitter:site twitter:title two type typography u ul unavailable unchanged undefined under underline underlines understand unknown unmaintained unobserve unreadable unrelated unreleased unreliable unset unsupported up uppercase usage use used user uses utf-8 utf8 utilities utility v v2 val value value-reader values var variable variant version version- version-menu version-switcher vertical via video viewport virtual:zudo-doc-route-context visible vitesse-dark vocabulary w w-1/2 w-[0.5rem] w-[0.625rem] w-[0.875rem] w-[1.125rem] w-[1.575rem] w-[1.5rem] w-[1.75rem] w-[14px] w-[16px] w-[16rem] w-[18px] w-[280px] w-[2rem] w-[320px] w-[90vw] w-[var(--zd-sidebar-w)] w-dvw w-full w-icon-lg w-icon-md w-icon-sm w-icon-xs want warning was watching wbr wbr- we website weight went were what when where whereas whether which while whitespace-nowrap whitespace-pre whole width will with without word working worktrees would wrap wrapper wrappers written wrong wrote xl:flex xl:hidden y-scrollbar yet you your z-dropdown z-local-1 z-modal z-modal-backdrop z-sidebar z-toolbar zd-content zd-desktop-sidebar-toggle zd-doc-content-band zd-enlarge-btn zd-enlarge-dialog zd-enlarge-dialog-close zd-enlargeable zd-html-preview-code zd-mermaid-dialog zd-mermaid-enlargeable zd-mermaid-tool-btn zd-mermaid-toolbar zd-mermaid-transform zd-mermaid-viewport zd-sidebar-content-wrapper zd-sidebar-open zfb zfb:after-swap zfb:before-preparation zod zoom zudo-doc-design-tokens/v1 zudo-doc-sidebar-visible zudo-doc-sidebar-width zudo-doc-theme zudo-doc-theme-bridge");

package/dist/sidebar-tree-island/index.js

@@ -439,6 +439,7 @@ const LeafNode = memo(function LeafNode2({
       {
         href: node.href,
         "aria-current": isActive ? "page" : void 0,
+        "data-nav-active": !isRoot && isActive ? "" : void 0,
         className: isRoot ? `flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)+0.15rem)] pr-[4px] text-small font-semibold break-words ${isActive ? "bg-fg text-bg" : "text-fg hover:underline focus:underline"}` : `block py-vsp-2xs pr-[4px] text-small break-words ${isActive ? "bg-fg font-medium text-bg" : "text-muted hover:underline focus:underline"}`,
         style: { paddingLeft },
         children: [

package/dist/sidebar-with-defaults/index.js

@@ -2,7 +2,9 @@ import { jsx } from "preact/jsx-runtime";
 import { Island } from "@takazudo/zfb";
 import { SidebarTree } from "../sidebar-tree-island/index.js";
 import { deriveNavDataPrep } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createSidebarWithDefaults(ctx) {
+  assertChromeContext(ctx, "createSidebarWithDefaults");
   const defaultLocale = ctx.defaultLocale;
   const localeCount = ctx.locales.length;
   const t = ctx.t;

package/dist/tag-pages/index.js

@@ -10,7 +10,9 @@ import { createHeaderWithDefaults } from "../header-with-defaults/index.js";
 import { createFooterWithDefaults } from "../footer-with-defaults/index.js";
 import { createDocHistoryArea } from "../doc-history-area/index.js";
 import { deriveComposeMetaTitle, deriveBodyEndIslands } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createTagPages(ctx) {
+  assertChromeContext(ctx, "createTagPages");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const t = ctx.t;

package/dist/toc/toc.js

@@ -14,6 +14,7 @@ function Toc({ headings, title = "On this page" }) {
     "nav",
     {
       "aria-label": "Table of contents",
+      "data-zd-toc": true,
       className: cx(
         "hidden xl:flex flex-col",
         "w-[280px] shrink-0",

package/dist/versions-page/index.js

@@ -5,7 +5,9 @@ import { createHeadWithDefaults } from "../head-with-defaults/index.js";
 import { createHeaderWithDefaults } from "../header-with-defaults/index.js";
 import { createFooterWithDefaults } from "../footer-with-defaults/index.js";
 import { deriveComposeMetaTitle, deriveBodyEndIslands } from "../chrome/derive.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 function createVersionsPageView(ctx) {
+  assertChromeContext(ctx, "createVersionsPageView");
   const settings = ctx.settings;
   const defaultLocale = ctx.defaultLocale;
   const t = ctx.t;

package/eject/doc-pager/index.tsx

@@ -11,6 +11,7 @@ import type { JSX } from "preact";
 import { ChevronLeft, ChevronRight } from "../icons/index.js";
 import type { ChromeContext } from "../factory-context/index.js";
 import type { Settings } from "../settings.js";
+import { assertChromeContext } from "../chrome/assert-chrome-context.js";
 
 // NavNode is a superset; we only need the fields the pager uses.
 interface PagerNode {
@@ -35,6 +36,7 @@ export interface DocPagerProps {
 export function createDocPager<S extends Settings = Settings>(
   ctx: ChromeContext<S>,
 ): (props: DocPagerProps) => JSX.Element {
+  assertChromeContext(ctx, "createDocPager");
   const t = ctx.t;
 
   /**

package/eject/sidebar-tree-island/index.tsx

@@ -564,6 +564,7 @@ const LeafNode = memo(function LeafNode({
         <a
           href={node.href}
           aria-current={isActive ? "page" : undefined}
+          data-nav-active={!isRoot && isActive ? "" : undefined}
           className={isRoot
             ? `flex items-start gap-hsp-xs py-[calc(var(--spacing-vsp-xs)+0.15rem)] pr-[4px] text-small font-semibold break-words ${
                 isActive ? "bg-fg text-bg" : "text-fg hover:underline focus:underline"

package/eject/toc/toc.tsx

@@ -70,6 +70,7 @@ export function Toc({ headings, title = "On this page" }: TocProps): VNode {
   return (
     <nav
       aria-label="Table of contents"
+      data-zd-toc
       className={cx(
         "hidden xl:flex flex-col",
         "w-[280px] shrink-0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/zudo-doc",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "type": "module",
   "description": "zudo-doc framework primitives layer that sits on top of zfb's engine — sidebar, theme, TOC, breadcrumb, layouts, head injection, View Transitions, SSR-skip wrappers (per ADR-003).",
   "license": "MIT",
@@ -163,6 +163,10 @@
       "types": "./dist/preset.d.ts",
       "default": "./dist/preset.js"
     },
+    "./component-tokens": {
+      "types": "./dist/config/component-tokens.d.ts",
+      "default": "./dist/config/component-tokens.js"
+    },
     "./plugins/doc-history": {
       "types": "./dist/plugins/doc-history.d.ts",
       "default": "./dist/plugins/doc-history.js"
@@ -510,6 +514,7 @@
     }
   },
   "bin": {
+    "gen-component-tokens": "./bin/gen-component-tokens.mjs",
     "gen-z-index": "./bin/gen-z-index.mjs",
     "tags-audit": "./bin/tags-audit.mjs",
     "zudo-doc": "./bin/zudo-doc.mjs"
@@ -525,8 +530,8 @@
     "preact": "^10.29.1",
     "@takazudo/zfb": "^0.1.0-next.71",
     "@takazudo/zfb-runtime": "^0.1.0-next.71",
-    "@takazudo/zudo-doc-history-server": "^1.2.0",
-    "@takazudo/zdtp": "^0.3.3",
+    "@takazudo/zudo-doc-history-server": "^2.1.0",
+    "@takazudo/zdtp": "^0.4.1",
     "shiki": "^4.0.2",
     "zod": "^4.3.6",
     "katex": "^0.16.0",