create-zudo-doc 2.5.1 → 3.1.0

package/templates/features/designTokenPanel/files/src/config/design-token-panel-config.ts

@@ -1,17 +1,61 @@
 /**
  * zdtp (zudo-design-token-panel) PanelConfig for this project.
  *
- * This config object is the single source of truth passed to
- * `configurePanel(designTokenPanelConfig)` in the bootstrap module.
+ * Single source of truth passed to `bootstrapDesignTokenPanel(...)` in
+ * `src/lib/design-token-panel-bootstrap.ts`.
  *
- * Type notes:
- * - zdtp's `ColorScheme` requires a `shikiTheme: string` field that is not
- *   present in this project's local `ColorScheme` type or data (zdtp uses it
- *   only for the panel's client-side code-block preview). Rather than an unsafe
- *   `as unknown as Record<string, ZdtpColorScheme>` double-cast, every local
- *   scheme map is run through `toZdtpColorSchemes()` below, which supplies
- *   `DEFAULT_SHIKI_THEME` as the fallback so the result satisfies zdtp's
- *   required-field shape with an ordinary type-checked assignment.
+ * Ramp-native model (mirrors zudo-doc's Color Ramp Restructure —
+ * zudolab/zudo-doc#2584 / #2592; mode-scoped Color tab — #2606 / #2610)
+ * -------------------------------------------------------------------------
+ * The color model is ramp-native (`ColorScheme = { ramps, map }`, see
+ * `src/config/color-schemes.ts`). The panel surfaces it through two tabs:
+ *
+ *  - **Palette tab** (reserved id `palette`): three `kind:'color'` OKLCH tiers —
+ *    `base` (5 stops → `--palette-base-0..4`), `accent` (3 stops →
+ *    `--palette-accent-0..2`), and `state` (4 roles → `--palette-state-{role}`).
+ *    zdtp's native L/C/H curve editor renders these. Per zdtp's palette-tab
+ *    contract, a tab carrying MULTIPLE `kind:'color'` tiers MUST omit
+ *    `colorExtras` (otherwise `resolveColorClusterFromTab` cannot pick a single
+ *    palette tier). The ramps are shared across light/dark, so token defaults
+ *    are read from the active scheme's `ramps` and stay in sync with
+ *    `color-schemes.ts`. The cssVars match the `--palette-*` custom properties
+ *    the ColorSchemeProvider emits (`schemeToCssPairs`).
+ *
+ *  - **Color tab** (reserved id `color`): a single `semantic` tier holding the
+ *    4 base roles (`--zd-bg`/`--zd-fg`/`--zd-selection-{bg,fg}`) + 23 `--zd-*`
+ *    semantic roles, each rendered as a grouped ramp dropdown. The tier declares
+ *    `referencesRamps` pointing at the Palette tab's `base`/`accent`/`state`
+ *    tiers, so each row's `default` is the encoded `tierId:itemId` ramp
+ *    reference (`buildSemanticTierItems` / `rampRefToPanelDefault`), the picker
+ *    renders grouped `<optgroup>` dropdowns, and editing emits live
+ *    `var(--palette-*)`. The tier carries NO `referencesTier` — that resolves
+ *    intra-tab only; the cross-tab wiring is `referencesRamps` + `semantic:true`.
+ *
+ * Mode-scoped defaults
+ * --------------------
+ * The Color tab's semantic defaults are MODE-SCOPED: `buildDesignTokenPanelConfig(mode)`
+ * seeds the tier from the active mode's scheme (light map vs dark map). The
+ * bootstrap (`@takazudo/zudo-doc/design-token-panel-bootstrap`) destroys +
+ * reconfigures the panel on every `color-scheme-changed` toggle so its defaults
+ * follow the live light/dark mode.
+ *
+ * Caveat: a *saved* color OVERRIDE is still mode-AGNOSTIC here — but this is
+ * this project's config-shape choice, not a zdtp limitation. zdtp 0.4.5 ships
+ * per-scheme/per-mode keyed color persistence (v4 envelope,
+ * Takazudo/zudo-design-token-panel#500 / #509): the color slice is keyed by
+ * the cluster's resolved scheme identity (`panelSettings.colorScheme` /
+ * `colorMode`). This project's color cluster is scheme-less
+ * (`colorExtras.colorSchemes = {}`, no `colorMode`) and switches modes
+ * externally via the destroy+reconfigure dance above rather than zdtp's own
+ * `colorMode` field, so zdtp always resolves the same single (stub) scheme
+ * identity and an override repaints both modes until Reset. Only the
+ * DEFAULTS are mode-faithful. Do NOT work around this by reaching into zdtp's
+ * private storage keys.
+ *
+ * The color cluster is **scheme-less**: `colorExtras.colorSchemes = {}` (zdtp's
+ * documented scheme-less cluster shape) — the ramps ARE the editable source of
+ * truth, surfaced by the Palette tab, so a bundled scheme-preset registry no
+ * longer applies.
  */
 
 import type {
@@ -20,7 +64,6 @@ import type {
   TierConfig,
   TierItem,
   ColorClusterExtras,
-  ColorScheme as ZdtpColorScheme,
   TokenDef,
 } from "@takazudo/zdtp";
 import {
@@ -28,66 +71,23 @@ import {
   FONT_TOKENS,
   SIZE_TOKENS,
 } from "./design-tokens-manifest";
+import {
+  getActiveScheme,
+  STATE_ROLES,
+  type ColorScheme,
+} from "./color-scheme-utils";
+import { buildSemanticTierItems } from "@takazudo/zudo-doc/color-scheme-utils";
 import { colorSchemes } from "./color-schemes";
-import type { ColorScheme as LocalColorScheme } from "./color-schemes";
-import { SEMANTIC_DEFAULTS, SEMANTIC_CSS_NAMES } from "./color-scheme-utils";
 import { settings } from "./settings";
-import { DESIGN_TOKEN_SCHEMA } from "@takazudo/zudo-doc/theme";
 
 /**
- * Base-role fallback indices. Background defaults to palette index 0,
- * foreground to 15, cursor to 6, selection to 0/15.
- */
-const BASE_DEFAULTS = {
-  background: 0,
-  foreground: 15,
-  cursor: 6,
-  selectionBg: 0,
-  selectionFg: 15,
-} as const;
-
-/**
- * Fallback Shiki theme used when a color scheme's `shikiTheme` field is absent.
+ * Inert fallback for the still-REQUIRED `ColorClusterExtras.defaultShikiTheme`.
+ * zdtp's Shiki integration is a no-op stub, so this value has no visible
+ * effect if you highlight code some other way — but the field is typed
+ * `string`, so a value is required.
  */
 const DEFAULT_SHIKI_THEME = "github-dark";
 
-/**
- * Normalize this project's local `ColorScheme` records into zdtp's
- * `ColorScheme` shape. zdtp's type requires `shikiTheme: string`; the local
- * scheme type makes it optional. This helper fills `DEFAULT_SHIKI_THEME` only
- * when a scheme doesn't declare its own, so the result is assignable to
- * `Record<string, ZdtpColorScheme>` via an ordinary type-checked assignment —
- * replacing the previous `as unknown as` double-cast that bypassed every field
- * check. Tracked upstream at Takazudo/zudo-design-token-panel#342 (shikiTheme
- * should be optional in zdtp's `ColorScheme` type); drop this helper once that
- * lands.
- */
-function toZdtpColorSchemes(
-  schemes: Record<string, LocalColorScheme>,
-): Record<string, ZdtpColorScheme> {
-  const normalized: Record<string, ZdtpColorScheme> = {};
-  for (const [name, scheme] of Object.entries(schemes)) {
-    normalized[name] = {
-      ...scheme,
-      shikiTheme: scheme.shikiTheme ?? DEFAULT_SHIKI_THEME,
-    };
-  }
-  return normalized;
-}
-
-/**
- * Initial palette taken from the configured active scheme.
- */
-function getInitialPalette(): readonly string[] {
-  const scheme = colorSchemes[settings.colorScheme];
-  if (!scheme) {
-    throw new Error(
-      `Unknown color scheme: "${settings.colorScheme}". Available: ${Object.keys(colorSchemes).join(", ")}`,
-    );
-  }
-  return scheme.palette;
-}
-
 // ---------------------------------------------------------------------------
 // Helpers — partition flat manifest arrays into TabConfig.tiers by group.
 // ---------------------------------------------------------------------------
@@ -129,6 +129,9 @@ function toTierItem(t: TokenDef): TierItem {
 
 /**
  * Build a tier from the subset of `tokens` whose `group` matches `groupId`.
+ * The tier's items share the same kind by construction (all items in a
+ * group share the same slider/select/text shape in this project's manifest).
+ * zdtp's `assertValidTabs` validator requires this.
  */
 function tierFromGroup(
   tokens: readonly TokenDef[],
@@ -145,100 +148,203 @@ function tierFromGroup(
 }
 
 // ---------------------------------------------------------------------------
-// Color tab — palette and semantic tiers + colorExtras for cluster metadata.
+// Palette tab — three ramp tiers (base / accent / state), OKLCH curve editor.
 // ---------------------------------------------------------------------------
 
-const PALETTE_TIER_ID = "palette";
+/**
+ * Build the three ramp tiers from the active scheme's shared `ramps`. Light
+ * and dark schemes share the same Tier-1 ramps, so the active scheme's ramps
+ * are the single source of truth — read from here rather than hardcoding a
+ * second copy of the values.
+ */
+function buildRampTiers(): TierConfig[] {
+  const { ramps } = getActiveScheme();
 
-function buildPaletteTier(): TierConfig {
-  const initial = getInitialPalette();
-  const items: TierItem[] = [];
-  for (let i = 0; i < 16; i++) {
-    items.push({
-      id: `p${i}`,
-      cssVar: `--zd-${i}`,
-      label: `p${i}`,
-      default: initial[i] ?? "#808080",
-      type: { kind: "color" },
-    });
-  }
-  return {
-    id: PALETTE_TIER_ID,
-    label: "Palette",
-    items,
+  const baseTier: TierConfig = {
+    id: "base",
+    label: "Base",
+    items: ramps.base.map((color, i): TierItem => ({
+      id: `base-${i}`,
+      cssVar: `--palette-base-${i}`,
+      label: String(i),
+      default: color,
+      type: { kind: "color", format: "oklch" },
+    })),
+  };
+
+  const accentTier: TierConfig = {
+    id: "accent",
+    label: "Accent",
+    items: ramps.accent.map((color, i): TierItem => ({
+      id: `accent-${i}`,
+      cssVar: `--palette-accent-${i}`,
+      label: String(i),
+      default: color,
+      type: { kind: "color", format: "oklch" },
+    })),
+  };
+
+  const stateTier: TierConfig = {
+    id: "state",
+    label: "State",
+    items: STATE_ROLES.map((role): TierItem => ({
+      id: `state-${role}`,
+      cssVar: `--palette-state-${role}`,
+      label: role,
+      default: ramps.state[role],
+      type: { kind: "color", format: "oklch" },
+    })),
   };
+
+  return [baseTier, accentTier, stateTier];
 }
 
-function buildSemanticTier(): TierConfig {
-  const items: TierItem[] = [];
-  for (const [key, cssVar] of Object.entries(SEMANTIC_CSS_NAMES)) {
-    const idx = SEMANTIC_DEFAULTS[key];
-    if (idx === undefined) continue;
-    items.push({
-      id: key,
-      cssVar,
-      label: key,
-      default: `p${idx}`,
-      type: { kind: "color" },
-    });
-  }
+const PALETTE_TAB: TabConfig = {
+  id: "palette",
+  label: "Palette",
+  tiers: buildRampTiers(),
+  // No colorExtras: a tab with multiple kind:'color' tiers MUST omit it so
+  // resolveColorClusterFromTab is not invoked and zdtp renders the ramps with
+  // its native curve editor (zdtp palette-tab contract).
+};
+
+// ---------------------------------------------------------------------------
+// Color tab — mode-scoped semantic tier (4 base roles + 23 --zd-* roles) as
+// grouped ramp dropdowns referencing the Palette tab.
+// ---------------------------------------------------------------------------
+
+type PanelMode = "light" | "dark";
+
+/**
+ * Resolve the `ColorScheme` whose `map` seeds the semantic tier for `mode`.
+ * With a light/dark pair configured, picks `colorMode.{light,dark}Scheme`; on
+ * the single-scheme path (`settings.colorMode === false`) there is no pair, so
+ * the active `settings.colorScheme` is used for both modes (no toggle wiring).
+ */
+function schemeForMode(mode: PanelMode): ColorScheme {
+  const cm = settings.colorMode;
+  if (!cm) return getActiveScheme();
+  const name = mode === "dark" ? cm.darkScheme : cm.lightScheme;
+  return colorSchemes[name] ?? getActiveScheme();
+}
+
+/**
+ * Semantic tier — 4 base roles + 23 `--zd-*` roles, each a grouped ramp
+ * dropdown. `referencesRamps` names the Palette tab's ramp tiers this tier's
+ * `{ref}` mappings resolve against (cross-tab, resolved at mount by
+ * `resolveColorClusterFromTab`); `semantic: true` marks it so zdtp never
+ * mistakes it for the palette tier. Items come from `buildSemanticTierItems`:
+ * every `default` is an encoded `tierId:itemId` ramp reference, so a scheme
+ * with no override round-trips to the exact ramp stop (no snapping to a
+ * resolved color). Seeded from `schemeForMode(mode)` — this is the only
+ * mode-varying tier.
+ */
+function buildSemanticTier(mode: PanelMode): TierConfig {
   return {
     id: "semantic",
     label: "Semantic",
-    items,
-    referencesTier: PALETTE_TIER_ID,
+    semantic: true,
+    referencesRamps: [
+      { tab: "palette", tier: "base" },
+      { tab: "palette", tier: "accent" },
+      { tab: "palette", tier: "state" },
+    ],
+    items: buildSemanticTierItems(schemeForMode(mode)),
   };
 }
 
-const COLOR_EXTRAS: ColorClusterExtras = {
-  // Customize these values to match your project name to avoid localStorage
-  // collisions when multiple zudo-doc projects run in the same browser.
-  id: "my-doc",
-  label: "My Doc",
-  baseRoles: {
-    background: "--zd-bg",
-    foreground: "--zd-fg",
-    cursor: "--zd-cursor",
-    selectionBg: "--zd-sel-bg",
-    selectionFg: "--zd-sel-fg",
-  },
-  baseDefaults: BASE_DEFAULTS,
-  defaultShikiTheme: DEFAULT_SHIKI_THEME,
-  // toZdtpColorSchemes fills the fallback only for schemes without their own
-  // shikiTheme, so this is a type-checked assignment rather than an unsafe cast.
-  colorSchemes: toZdtpColorSchemes(colorSchemes),
-  panelSettings: {
-    colorScheme: settings.colorScheme,
-    // colorMode: strip off respectPrefersColorScheme (not in zdtp's shape).
-    colorMode: settings.colorMode
-      ? {
-          defaultMode: settings.colorMode.defaultMode,
-          lightScheme: settings.colorMode.lightScheme,
-          darkScheme: settings.colorMode.darkScheme,
-        }
-      : false,
-  },
-};
+/**
+ * Color cluster extras. Scheme-less (`colorSchemes: {}`) with no base-role
+ * editors (`baseRoles`/`baseDefaults` empty) — the Palette tab owns the ramps
+ * and the semantic tier owns the roles.
+ *
+ * `panelSettings.colorMode` is an OBJECT (not `false`) with `defaultMode = mode`.
+ * On this scheme-less cluster its only live effect is `getClusterDefaultMode()`,
+ * which drives the per-mode literal collapse/preview side — pinning it to the
+ * ACTIVE mode keeps that side following the live toggle (a bare `false` would
+ * pin it to `light` and mis-collapse per-mode literals for a dark-mode user).
+ * `colorScheme`/`lightScheme`/`darkScheme` only need to be non-empty strings
+ * (the validator requires that even with `colorSchemes: {}`; the names are not
+ * checked against the empty registry).
+ */
+function buildColorExtras(mode: PanelMode): ColorClusterExtras {
+  const cm = settings.colorMode;
+  const lightScheme = cm ? cm.lightScheme : settings.colorScheme;
+  const darkScheme = cm ? cm.darkScheme : settings.colorScheme;
+  return {
+    // Customize id/label to match your project name to avoid localStorage
+    // collisions when multiple zudo-doc-based projects run in the same browser.
+    id: "my-doc",
+    label: "My Doc",
+    baseRoles: {},
+    baseDefaults: {},
+    defaultShikiTheme: DEFAULT_SHIKI_THEME,
+    colorSchemes: {},
+    panelSettings: {
+      colorScheme: settings.colorScheme,
+      colorMode: { defaultMode: mode, lightScheme, darkScheme },
+    },
+  };
+}
 
-const COLOR_TAB: TabConfig = {
-  id: "color",
-  label: "Color",
-  tiers: [buildPaletteTier(), buildSemanticTier()],
-  colorExtras: COLOR_EXTRAS,
-};
+function buildColorTab(mode: PanelMode): TabConfig {
+  return {
+    id: "color",
+    label: "Color",
+    tiers: [buildSemanticTier(mode)],
+    colorExtras: buildColorExtras(mode),
+  };
+}
 
 // ---------------------------------------------------------------------------
-// Font tab
+// Font tab — five tiers grouped by the manifest's `group` field.
 // ---------------------------------------------------------------------------
 
 const FONT_SCALE_TIER_ID = "font-scale";
 
+/**
+ * Tier 2 semantic role → Tier 1 abstract scale item id. Mirrors the `var(--…)`
+ * wiring in `global.css` (`--text-body: var(--text-scale-md)` etc.). The role
+ * tier is a *reference* tier: each item's stored value is the id of a
+ * `font-scale` item, exactly like the Color tab's semantic→palette tier. zdtp
+ * renders these as dropdowns and emits `var(--text-scale-*)`, so editing a
+ * scale step propagates to every role live.
+ */
+const FONT_ROLE_TO_SCALE: Readonly<Record<string, string>> = {
+  "text-micro": "text-scale-2xs",
+  "text-caption": "text-scale-xs",
+  "text-small": "text-scale-sm",
+  "text-body": "text-scale-md",
+  "text-title": "text-scale-lg",
+  "text-heading": "text-scale-xl",
+  "text-display": "text-scale-2xl",
+};
+
+/**
+ * Build the semantic font-size tier as a reference tier pointing at the
+ * `font-scale` tier. Defaults are overridden to the referenced scale id (the
+ * manifest still records resolved rem values for serde / the flat-manifest
+ * generator template, so the override happens here rather than in the
+ * manifest to keep both consumers correct).
+ */
+function buildFontRoleTier(): TierConfig {
+  const base = tierFromGroup(FONT_TOKENS, "font-size", "Font size");
+  return {
+    ...base,
+    items: base.items.map((item) => {
+      const scaleId = FONT_ROLE_TO_SCALE[item.id];
+      return scaleId ? { ...item, default: scaleId } : item;
+    }),
+    referencesTier: FONT_SCALE_TIER_ID,
+  };
+}
+
 const FONT_TAB: TabConfig = {
   id: "font",
   label: "Font",
   tiers: [
     tierFromGroup(FONT_TOKENS, FONT_SCALE_TIER_ID, "Scale"),
-    tierFromGroup(FONT_TOKENS, "font-size", "Font size"),
+    buildFontRoleTier(),
     tierFromGroup(FONT_TOKENS, "line-height", "Line height"),
     tierFromGroup(FONT_TOKENS, "font-weight", "Font weight"),
     tierFromGroup(FONT_TOKENS, "font-family", "Font family"),
@@ -246,7 +352,7 @@ const FONT_TAB: TabConfig = {
 };
 
 // ---------------------------------------------------------------------------
-// Spacing tab
+// Spacing tab — four tiers grouped by the manifest's `group` field.
 // ---------------------------------------------------------------------------
 
 const SPACING_TAB: TabConfig = {
@@ -261,7 +367,7 @@ const SPACING_TAB: TabConfig = {
 };
 
 // ---------------------------------------------------------------------------
-// Size tab
+// Size tab — two tiers grouped by the manifest's `group` field.
 // ---------------------------------------------------------------------------
 
 const SIZE_TAB: TabConfig = {
@@ -273,16 +379,57 @@ const SIZE_TAB: TabConfig = {
   ],
 };
 
-export const designTokenPanelConfig: PanelConfig = {
-  // Customize these values to match your project name to avoid localStorage
-  // collisions when multiple zudo-doc projects run in the same browser.
-  storagePrefix: "my-doc-tweak",
-  consoleNamespace: "myDoc",
-  modalClassPrefix: "my-doc-design-token-panel-modal",
-  // Must match DESIGN_TOKEN_SCHEMA in @takazudo/zudo-doc/theme so that
-  // exported JSON files remain importable across panel versions.
-  schemaId: DESIGN_TOKEN_SCHEMA,
-  exportFilenameBase: "my-doc-design-tokens",
-  tabs: [COLOR_TAB, FONT_TAB, SPACING_TAB, SIZE_TAB],
-  colorPresets: {},
-};
+/**
+ * Detect the initial color-scheme mode for the first `configurePanel` call. In
+ * the browser, read `<html data-theme>` (set pre-paint by the
+ * ColorSchemeProvider bootstrap); otherwise fall back to
+ * `settings.colorMode.defaultMode` (or `light` on the single-scheme path).
+ * SSR-safe: guards `document`.
+ */
+function detectInitialMode(): PanelMode {
+  if (typeof document !== "undefined") {
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "light" || attr === "dark") return attr;
+  }
+  const cm = settings.colorMode;
+  return cm ? cm.defaultMode : "light";
+}
+
+/**
+ * Build the full PanelConfig for a given color-scheme `mode`. Only the Color
+ * tab's semantic tier and `panelSettings.colorMode.defaultMode` vary by mode;
+ * the Palette/Font/Spacing/Size tabs are mode-independent. The bootstrap calls
+ * this per mode on every `color-scheme-changed` toggle (destroy + reconfigure).
+ */
+export function buildDesignTokenPanelConfig(mode: PanelMode): PanelConfig {
+  return {
+    // Customize these values to match your project name to avoid localStorage
+    // collisions when multiple zudo-doc-based projects run in the same browser.
+    storagePrefix: "my-doc-tweak",
+    consoleNamespace: "myDoc",
+    modalClassPrefix: "my-doc-design-token-panel-modal",
+    // DISPLAY-ONLY in zdtp 0.4.5: the panel's export hard-codes
+    // `zudo-design-tokens/v2` and auto-upgrades to `.../v3` when object leaves
+    // ({ref}/{literal}/per-mode) are present — which the semantic tier's ramp
+    // refs always are, so real exports carry v3. `schemaId` does NOT gate
+    // import; it only labels the Import-modal hint. zdtp DOES export its own
+    // `SCHEMA_V1`/`SCHEMA_V2`/`SCHEMA_V3` constants (#498/#505), but those are
+    // zdtp's fixed internal schema strings, unrelated to this field. Set to v3
+    // (a literal, not one of those constants) so the hint matches what exports
+    // actually carry.
+    schemaId: "zudo-design-tokens/v3",
+    exportFilenameBase: "my-doc-design-tokens",
+    tabs: [PALETTE_TAB, buildColorTab(mode), FONT_TAB, SPACING_TAB, SIZE_TAB],
+  };
+}
+
+/**
+ * Back-compat / initial-call export: the config for the mode detected at module
+ * load. Pass the `buildDesignTokenPanelConfig` BUILDER (not this plain object)
+ * to the bootstrap for live mode-scoped rebuilds on light/dark toggle — see
+ * `src/lib/design-token-panel-bootstrap.ts`. This plain-config export remains
+ * for callers that only need a static config.
+ */
+export const designTokenPanelConfig: PanelConfig = buildDesignTokenPanelConfig(
+  detectInitialMode(),
+);

package/templates/features/designTokenPanel/files/src/lib/design-token-panel-bootstrap.ts

@@ -5,9 +5,16 @@
  * settings.designTokenPanel is truthy. The dynamic import is gated there so
  * this module is only bundled when the feature is enabled.
  *
- * The wiring MECHANISM (configurePanel + setLifecycleAdapter) now lives in the
- * package at `@takazudo/zudo-doc/design-token-panel-bootstrap`. This file
- * passes the project's PanelConfig DATA to that mechanism.
+ * The wiring MECHANISM (configurePanel + setLifecycleAdapter + the mode-scoped
+ * reconfigure) lives in the package at
+ * `@takazudo/zudo-doc/design-token-panel-bootstrap`. This file passes the
+ * project's PanelConfig DATA to that mechanism.
+ *
+ * We pass the `buildDesignTokenPanelConfig` BUILDER (not the plain
+ * `designTokenPanelConfig` object) so the bootstrap rebuilds the panel per
+ * light/dark mode on every `color-scheme-changed` toggle — keeping the Color
+ * tab's semantic defaults mode-faithful. A plain-config caller also works (see
+ * `bootstrapDesignTokenPanel`'s JSDoc) but gets no toggle listener.
  *
  * S9a package-first migration — zudolab/zudo-doc#2333.
  *
@@ -18,6 +25,6 @@
  */
 
 import { bootstrapDesignTokenPanel } from "@takazudo/zudo-doc/design-token-panel-bootstrap";
-import { designTokenPanelConfig } from "@/config/design-token-panel-config";
+import { buildDesignTokenPanelConfig } from "@/config/design-token-panel-config";
 
-bootstrapDesignTokenPanel(designTokenPanelConfig);
+bootstrapDesignTokenPanel(buildDesignTokenPanelConfig);