@takazudo/zdtp 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All notable changes to `@takazudo/zdtp` are documented in this file.
 
 The format is based on Keep a Changelog, and release notes are generated from the changelog MDX pages.
 
+## [0.6.1] - 2026-09-08
+
+### Features
+
+- feat: model declared token defaults for static dashboards (422643b)
+- feat: expose a static Preact token dashboard (5b6c0f8)
+- feat(playground): add static token dashboard demo and docs (2edd98b)
+- feat(dashboard): render rulers, palette strips and wide type specimens (7cdf01f)
+
+### Fixed
+
+- fix: preserve semantic literals alongside legacy palette references (b813c8a)
+
+### Other Changes
+
+- test: account for standalone dashboard stylesheet delivery (a00541a)
+- test: verify packed dashboard SSR and public stylesheet consumption (6cd8157)
+- test: cover static dashboard list-view geometry in browser (e07d69e)
+- chore: normalize dashboard browser test file mode (0ec8217)
+- docs: demonstrate dashboard rulers ramps and reading specimens (859d3a4)
+- test: verify packed dashboard list views and preview text (7ebf4cf)
+- test: prove isolated dashboard package consumption (fdb3906)
+- fix(test): compare Preact package identity across module conditions (bb280ee)
+- Fix static browser harness loading and polling (3fe6203)
+
 ## [0.6.0] - 2026-09-08
 
 ### Breaking Changes

package/PORTABLE-CONTRACT.md

@@ -1741,6 +1741,107 @@ on across a release bump.
 
 ---
 
+## 12. Static token dashboard
+
+This entry is available from v0.6.1. It does
+not change the `configurePanel` or persistence contracts above.
+
+`@takazudo/zdtp/dashboard` exports the Preact `TokenDashboard` component and
+`TokenDashboardProps`, `DashboardMode`, `DashboardPreviewKind`, `TabConfig`,
+`TierConfig`, and `TierItem` types. The internal value model is not a public API.
+
+```ts
+export type DashboardMode = 'light' | 'dark';
+export type DashboardPreviewKind =
+  | 'bar' | 'size' | 'line-height' | 'family' | 'weight' | 'radius' | 'duration'
+  | 'color' | 'shadow' | 'text';
+
+export interface TokenDashboardProps {
+  tabs: readonly TabConfig[];
+  mode?: DashboardMode; // default: light
+  title?: string; // default: Token dashboard
+  previewText?: string; // static typography passage; default English/Japanese prose
+  id?: string; // optional root ID; caller owns uniqueness
+  previewOverrides?: Readonly<Record<string, DashboardPreviewKind>>;
+}
+```
+
+### Rendering and package boundary
+
+- Ordinary Preact rendering and server rendering are supported. The component
+  has no browser-global, panel-runtime, persistence, host-adapter, bin-server,
+  or browser Tailwind compiler dependency. No hydration is required.
+- `@takazudo/zdtp/dashboard/styles.css` is a separate public asset. Dashboard
+  JavaScript has no CSS side-effect import; the host must include this asset
+  through its CSS build or a static stylesheet link. It is not appended to the
+  existing panel stylesheet, which is unnecessary for a dashboard-only page.
+- Each instance declares known token variables inside its inventory and sets
+  `color-scheme` to its explicit `mode`. It never writes to `:root` or host
+  state. Dashboard chrome styles are independent of inventory variables.
+- Tabs, tiers, and rows render in input order. All token rows remain visible;
+  no collapsed sections or automatic IDs are introduced. Empty input is valid.
+  Notes-only tabs are omitted, and arbitrary notes HTML is never injected.
+
+### Layouts for spacing, color, and typography
+
+Spacing (`bar`) uses wide rows with aligned ruler origins. Nonnegative `px` or
+`rem` lengths, unitless zero, and resolved direct local aliases get an actual-size
+sample. Ticks mark 8 CSS px, with major ticks every 64 CSS px. The browser sizes
+`rem` against the host root font size; the dashboard does not assume a conversion.
+Large lengths scroll inside the focusable ruler instead of shrinking or clamping.
+Zero has zero width. Negative lengths, `em`, percentages, `calc()` and other
+unsupported expressions retain their declaration with a ruler-unavailable
+explanation. Missing references also retain their diagnostics.
+
+A nonsemantic, non-reference tier whose source items are all colors becomes a
+discrete palette strip. Stops stay in declared order, with every label and value
+visible; narrow containers scroll horizontally. Grouping uses tier structure,
+not name matching or generated intermediate colors. Semantic and reference tiers
+keep independent color samples. Per-variable preview overrides remain authoritative
+and retain each token's slot and order, including mixed overrides within a strip.
+
+`size`, `family`, `weight`, and `line-height` use wide, multiline specimens with
+auto height outside palette strips. Overrides inside a palette retain their stop slot. The baseline is 18px text with 1.6 line height; each sample changes
+only its intended property. A resolved `previewBase` can supply the font size of
+a line-height sample. Font families use locally available fonts and their CSS
+fallbacks; the dashboard does not download fonts.
+
+`previewText` supplies one static passage for all typography samples in an
+instance. Its default is longer English/Japanese prose. Newlines and white space
+are preserved, text is escaped, and an explicit empty string stays empty.
+Long text wraps; unusually large glyphs can scroll locally without scaling.
+There is no built-in editable text workbench or connection to panel state.
+
+### Values and previews
+
+- Inputs describe **declared defaults**: item defaults, selected-mode
+  `colorExtras.semanticDefaults`, and explicit `colorExtras.baseDefaults` for
+  base-role rows. Named presets, panel initialization, and saved/current panel
+  state are not applied. Pill rows preserve `item.default`, not `customDefault`.
+- Reference tiers, cross-tab ramps, aliases, and legacy palette indices resolve
+  against actual declared IDs and `cssVar` names. Rows retain declared values
+  and display CSS/reference text. Missing/ambiguous mappings, duplicate
+  variables, cycles, and unsafe declarations remain visible with diagnostics
+  and no misleading sample.
+- CSS expressions remain expressions. Resolution is not universal CSS grammar
+  validation or browser computed-style inspection. External dependencies may
+  be context-dependent; unresolved dependencies suppress samples and expose
+  diagnostics. Browser layout, units, and available fonts affect previews.
+- Preview choice is `previewOverrides[cssVar]`, then `TierConfig.preview`, then
+  color for color-editor rows or text for other rows. `duration` and `text`
+  display values without animated/visual samples. A resolved `previewBase`
+  token can supply font size for a line-height sample. Subsets must include
+  referenced tiers to retain resolved samples.
+- Preact escapes text. URL/mask assets and unsafe resource-bearing expressions
+  are not automatically loaded through samples.
+
+Keep shared token definitions in a build-safe data module using type-only
+imports. Pass the same tabs to `PanelConfig` and `TokenDashboard`; no automatic
+state synchronization follows from sharing them. A React adapter and an
+HTML-export function or CLI are outside this checkpoint.
+
+---
+
 ## Appendix A — section index
 
 Cross-reference table — what each section pins down.
@@ -1772,6 +1873,7 @@ Cross-reference table — what each section pins down.
 | `data-zdtp-action` stable header-action hook (ids stable, labels not; two matches while the compact popover is open) | §7.6 |
 | v4 envelope precedence, v1/v2/v3 storage migration, and typography-id rename map             | §2, §8.3, §8.4 |
 | JSON export/import schemas v1/v2/v3 (serde)                                                  | §9            |
+| Static Preact dashboard props, defaults, previews, isolation, and CSS export | §12 |
 | Out-of-scope / deferred concerns                                                            | §10           |
 | Versioning promise, breaking-change signalling, and consumer guidance for mirroring the eager-load gate registries | §11 |
 | Feature walkthrough and shortcut table                                                     | [Panel UX tour](/docs/recipes/panel-ux-tour) |

package/README.md

@@ -32,12 +32,94 @@ The authoritative API spec is [`PORTABLE-CONTRACT.md`](./PORTABLE-CONTRACT.md).
   partial reconciliation, and JSON export/import when disk apply is not
   configured.
 - Owner autoload for developer-only loading across page visits.
+- A separate Preact `TokenDashboard` for a static, read-only token inventory
+  (available from v0.6.1).
 
 See the [Panel UX tour](/docs/recipes/panel-ux-tour) for a feature-by-feature
 walkthrough and the shortcut table.
 
 ---
 
+## Static token dashboard
+
+Import `TokenDashboard` from `@takazudo/zdtp/dashboard` to render the same tab
+manifest on a plain page. This entry is available from v0.6.1. The [live workspace demo](https://zdtp-playground.zudolab.dev/dashboard/)
+shows both modes and a compact embedded instance.
+
+```tsx
+import { TokenDashboard } from '@takazudo/zdtp/dashboard';
+import { tokenTabs } from './token-tabs'; // Shared data module; type-only imports.
+
+export default function TokenPage() {
+  return <TokenDashboard tabs={tokenTabs} mode="light" title="Site tokens" />;
+}
+```
+
+For example, keep the definitions in a module that is safe to import at build time:
+
+```ts
+// token-tabs.ts — data only; safe to import during a site build.
+import type { TabConfig } from '@takazudo/zdtp/dashboard';
+
+export const tokenTabs: readonly TabConfig[] = [{
+  id: 'space',
+  label: 'Spacing',
+  tiers: [{
+    id: 'scale',
+    label: 'Scale',
+    preview: 'bar',
+    items: [{
+      id: 'space-md',
+      cssVar: '--site-space-md',
+      label: 'Medium',
+      default: '1rem',
+      type: { kind: 'length', step: 0.25, unit: 'rem' },
+    }],
+  }],
+}];
+```
+
+Also pass `tokenTabs` as `tabs` in your panel's config. Keep panel initialization
+and browser/storage code out of this data module.
+The component requires Preact and can render during the host's static build
+without hydration; no panel initialization is needed.
+
+Include **`@takazudo/zdtp/dashboard/styles.css`** separately. The dashboard JS
+does not import CSS and does not need the panel stylesheet. A CSS-emitting
+bundler can import this asset from its layout; strict static hosts should use
+a supported global CSS `@import` or copy the resolved public export to their
+public assets directory and add a stylesheet link. The
+[static dashboard recipe](https://zdtp.zudolab.dev/docs/recipes/static-token-dashboard/)
+provides complete data and CSS-copy examples.
+
+Optional props are `mode` (`light` by default), `title`, caller-owned unique
+`id`, `previewText`, and `previewOverrides` keyed by CSS variable (for example,
+a text-editor shadow can use `'shadow'`). Existing `TierConfig.preview` metadata is reused.
+
+Spacing uses actual-size rulers with local scrolling. Nonnegative px/rem, zero,
+and resolved direct aliases are supported; other lengths keep a readable fallback.
+Color-only nonsemantic, non-reference tiers form discrete strips in source order.
+Typography uses wide multiline specimens; `previewText` supplies your static
+passage (default: English/Japanese prose; an explicit empty string stays empty).
+The baseline is 18px/1.6, with only the intended property changed and resolved
+`previewBase` honored for line-height. Fonts use local availability and CSS
+fallbacks. There is no editable text workbench.
+
+The inventory uses **declared defaults**: item defaults, per-mode
+`semanticDefaults`, and explicit base-role `baseDefaults`. It does not apply
+named color presets, panel initialization, or persisted edits. CSS expressions
+remain expressions; samples depend on browser layout and available fonts.
+Missing/context-dependent references and invalid declarations remain readable
+with diagnostics rather than misleading samples. Preview variables and
+`color-scheme` are local to each instance; the component never writes to
+`:root`. Arbitrary notes HTML and URL/mask assets are not rendered or loaded.
+
+This checkpoint provides a Preact component. An HTML-export API/CLI, React
+adapter, and automatic panel-state synchronization are outside its scope.
+See [`PORTABLE-CONTRACT.md` §12](./PORTABLE-CONTRACT.md#12-static-token-dashboard).
+
+---
+
 ## 0. Architecture at a glance
 
 The design-token panel is a browser-based UI that writes token overrides to

package/dist/dashboard/index.d.ts

@@ -0,0 +1,4 @@
+export { TokenDashboard } from "./token-dashboard.js";
+export type { TokenDashboardProps, DashboardPreviewKind } from "./token-dashboard.js";
+export type { DashboardMode } from "./types.js";
+export type { TabConfig, TierConfig, TierItem } from "../tokens/tier-model.js";

package/dist/dashboard/index.js

@@ -0,0 +1,407 @@
+import { jsxs as m, jsx as y } from "preact/jsx-runtime";
+const q = new Set("aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgreen darkgrey darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray green greenyellow grey honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple rebeccapurple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen transparent currentcolor inherit initial unset revert revert-layer".split(" "));
+function C(l) {
+  return l.startsWith("#") || l.includes("(") || q.has(l.toLowerCase());
+}
+const O = [
+  "background",
+  "foreground",
+  "cursor",
+  "selectionBg",
+  "selectionFg"
+], j = /^--[\w\u0080-\uffff-]+$/u;
+function A(l) {
+  let u = "", o = 0;
+  for (let a = 0; a < l.length; a++) {
+    const g = l[a];
+    if (g === '"' || g === "'") {
+      const f = g;
+      let r = !1;
+      for (a++; a < l.length; a++)
+        if (l[a] === "\\") a++;
+        else if (l[a] === f) {
+          r = !0;
+          break;
+        } else if (/[\n\r\f]/.test(l[a])) return { syntax: u, safe: !1 };
+      if (!r) return { syntax: u, safe: !1 };
+      u += '""';
+    } else if (g === "/" && l[a + 1] === "*") {
+      const f = l.indexOf("*/", a + 2);
+      if (f === -1) return { syntax: u, safe: !1 };
+      u += " ", a = f + 1;
+    } else {
+      const f = g.charCodeAt(0);
+      if (/[;{}\\@]/.test(g) || f <= 8 || f === 11 || f >= 14 && f <= 31 || f === 127)
+        return { syntax: u, safe: !1 };
+      if (g === "(" && o++, g === ")" && --o < 0) return { syntax: u, safe: !1 };
+      u += g;
+    }
+  }
+  return {
+    syntax: u,
+    safe: o === 0 && !/\b(?:url|(?:-webkit-)?image-set|image|cross-fade|element|paint|src)\s*\(/i.test(u) && !/!\s*important\b/i.test(u)
+  };
+}
+function D(l, u) {
+  const o = /* @__PURE__ */ new Map();
+  for (const a of l) {
+    const g = u(a), f = o.get(g) ?? [];
+    f.push(a), o.set(g, f);
+  }
+  return o;
+}
+function B(l, u = "light") {
+  const o = {
+    mode: u,
+    tabs: [],
+    rows: [],
+    declarations: /* @__PURE__ */ Object.create(null),
+    diagnostics: []
+  }, a = [], g = l.filter((e) => e.id !== "notes"), f = D(g, (e) => e.id);
+  function r(e, t, s, n = "error") {
+    const d = { code: t, severity: n, message: s, ...e ? { rowKey: e.row.key } : {} };
+    e?.row.diagnostics.some((i) => i.code === t && i.message === s) || (e?.row.diagnostics.push(d), o.diagnostics.push(d));
+  }
+  function _(e, t, s, n, d, i) {
+    t.rows.push(s), o.rows.push(s), a.push({ row: s, tab: e, tier: d, item: n, baseRole: i, dependencies: [], contextDependent: !1 });
+  }
+  g.forEach((e, t) => {
+    const s = { key: `tab-${t}`, id: e.id, label: e.label, tiers: [] };
+    o.tabs.push(s), e.tiers.forEach((i, w) => {
+      const b = {
+        key: `${s.key}-tier-${w}`,
+        id: i.id,
+        label: i.label,
+        palette: !i.semantic && !i.referencesTier && !i.referencesRamps?.length && i.items.length > 0 && i.items.every((h) => h.type.kind === "color"),
+        preview: i.preview,
+        previewBase: i.previewBase,
+        rows: []
+      };
+      s.tiers.push(b), i.items.forEach((h, V) => _(e, b, {
+        key: `${b.key}-item-${V}`,
+        tabId: e.id,
+        tierId: i.id,
+        itemId: h.id,
+        label: h.label,
+        cssVar: h.cssVar,
+        kind: h.type.kind,
+        source: "item",
+        defaultValue: h.default,
+        declaredValue: h.default,
+        cssValue: null,
+        resolvedValue: null,
+        references: [],
+        diagnostics: []
+      }, h, i));
+    });
+    const n = e.colorExtras;
+    if (!n) return;
+    const d = {
+      key: `${s.key}-base-roles`,
+      id: "base-roles",
+      label: "Base roles",
+      rows: []
+    };
+    for (const i of O) {
+      const w = n.baseRoles[i];
+      if (w === void 0) continue;
+      const b = n.baseDefaults[i];
+      _(e, d, {
+        key: `${d.key}-${i}`,
+        tabId: e.id,
+        tierId: d.id,
+        itemId: i,
+        label: i,
+        cssVar: w,
+        kind: "color",
+        source: "base-role",
+        defaultValue: b === void 0 ? "" : String(b),
+        declaredValue: b === void 0 ? "(no declared default)" : `palette[${b}]`,
+        cssValue: null,
+        resolvedValue: null,
+        references: [],
+        diagnostics: []
+      }, void 0, void 0, i);
+    }
+    d.rows.length > 0 && s.tiers.push(d);
+  });
+  const v = D(a, (e) => e.row.cssVar);
+  for (const e of a)
+    j.test(e.row.cssVar) || r(e, "invalid-variable", `Unsupported CSS custom property name: ${e.row.cssVar}.`), v.get(e.row.cssVar).length > 1 && r(e, "duplicate-variable", `Multiple declarations use ${e.row.cssVar}; none is selected.`), f.get(e.tab.id).length > 1 && r(e, "duplicate-tab", `Multiple tabs use the id ${e.tab.id}.`), e.tier && (e.tab.tiers.filter((t) => t.id === e.tier.id).length > 1 && r(e, "duplicate-tier", `Multiple tiers use the id ${e.tier.id} in tab ${e.tab.id}.`), e.tier.items.filter((t) => t.id === e.item.id).length > 1 && r(e, "duplicate-item", `Multiple items use the id ${e.item.id} in tier ${e.tier.id}.`));
+  function c(e, t) {
+    e.directReference = t, e.row.cssValue = `var(${t.row.cssVar})`;
+  }
+  function p(e, t, s, n) {
+    const d = f.get(t) ?? [];
+    if (d.length !== 1) {
+      r(e, d.length ? "ambiguous-reference" : "missing-reference", `Reference tab ${t} ${d.length ? "is ambiguous" : "does not exist"}.`);
+      return;
+    }
+    const i = d[0].tiers.filter((b) => b.id === s);
+    if (i.length !== 1) {
+      r(e, i.length ? "ambiguous-reference" : "missing-reference", `Reference tier ${t}/${s} ${i.length ? "is ambiguous" : "does not exist"}.`);
+      return;
+    }
+    const w = a.filter((b) => b.tab === d[0] && b.tier === i[0] && b.item?.id === n);
+    if (w.length !== 1) {
+      r(e, w.length ? "ambiguous-reference" : "missing-reference", `Reference item ${t}/${s}/${n} ${w.length ? "is ambiguous" : "does not exist"}.`);
+      return;
+    }
+    return w[0];
+  }
+  function $(e) {
+    return e.tab.tiers.filter((t) => !t.semantic && !t.referencesTier && t.items.length > 0 && t.items.every((s) => s.type.kind === "color"));
+  }
+  function z(e, t) {
+    const s = $(e), n = e.tier?.referencesTier ? s.filter((w) => w.id === e.tier.referencesTier) : s;
+    if (n.length !== 1) {
+      r(e, "unsupported-palette", `A palette index requires one unambiguous declared palette tier; found ${n.length}.`);
+      return;
+    }
+    if (!Number.isInteger(t) || t < 0 || t >= n[0].items.length) {
+      r(e, "invalid-palette-index", `Palette index ${t} is outside the declared palette.`);
+      return;
+    }
+    const d = n[0].items[t], i = p(e, e.tab.id, n[0].id, d.id);
+    i && c(e, i);
+  }
+  function k(e, t) {
+    const s = e.tab.colorExtras?.baseDefaults[t];
+    if (s === void 0) {
+      r(e, "missing-base-default", `Base role ${t} has no explicit baseDefaults mapping.`);
+      return;
+    }
+    z(e, s);
+  }
+  function S(e, t) {
+    if (typeof t == "number")
+      e.row.declaredValue = `palette[${t}]`, z(e, t);
+    else if (t === "bg" || t === "fg")
+      e.row.declaredValue = t, k(e, t === "bg" ? "background" : "foreground");
+    else if (typeof t == "object" && t !== null && "literal" in t) {
+      const s = typeof t.literal == "string" ? t.literal : t.literal[u];
+      e.row.declaredValue = s, e.row.cssValue = s;
+    } else if (typeof t == "object" && t !== null && "ref" in t) {
+      const { tab: s = e.tab.id, tier: n, item: d } = t.ref;
+      e.row.declaredValue = `${s}/${n}/${d}`;
+      const i = p(e, s, n, d);
+      i && c(e, i);
+    } else
+      r(e, "invalid-semantic-default", "Unsupported semantic default mapping.");
+  }
+  for (const e of a) {
+    if (e.baseRole) {
+      k(e, e.baseRole);
+      continue;
+    }
+    const t = e.tier, s = e.item, n = $(e), d = t.semantic || e.tab.colorExtras && n.some((h) => h.id === t.referencesTier), w = (t.referencesTier === void 0 ? n : n.filter((h) => h.id === t.referencesTier)).flatMap((h) => h.items.filter((V) => V.id === s.default).map(() => h)), b = e.tab.colorExtras?.semanticDefaults;
+    if (d && b && Object.hasOwn(b, s.id))
+      S(e, b[s.id]);
+    else if (d && w.length > 0)
+      if (w.length > 1)
+        r(e, "ambiguous-reference", `Default ${s.default} names multiple palette items.`);
+      else {
+        const h = p(e, e.tab.id, w[0].id, s.default);
+        h && c(e, h);
+      }
+    else if (d && (s.default === "bg" || s.default === "fg"))
+      k(e, s.default === "bg" ? "background" : "foreground");
+    else if (t.referencesTier !== void 0 && !(d && t.referencesRamps?.length) && !(t.semantic && C(s.default))) {
+      const h = p(e, e.tab.id, t.referencesTier, s.default);
+      h && c(e, h);
+    } else if (d)
+      if (t.referencesRamps?.length && !C(s.default)) {
+        const h = s.default.indexOf(":"), V = h === -1 ? [t.referencesRamps[0]] : t.referencesRamps.filter((N) => N.tier === s.default.slice(0, h));
+        if (V.length !== 1)
+          r(e, V.length ? "ambiguous-reference" : "missing-reference", `Ramp source for ${s.default} ${V.length ? "is ambiguous" : "does not exist"}.`);
+        else {
+          const N = p(e, V[0].tab ?? e.tab.id, V[0].tier, h === -1 ? s.default : s.default.slice(h + 1));
+          N && c(e, N);
+        }
+      } else
+        e.row.cssValue = s.default;
+    else
+      e.row.cssValue = s.default;
+  }
+  for (const e of a) {
+    const t = e.row.cssValue;
+    if (t === null) continue;
+    const s = A(t);
+    if (!s.safe) {
+      r(e, "unsafe-css", "This declaration contains unsupported CSS syntax or a resource-loading function; preview omitted.");
+      continue;
+    }
+    e.directReference && e.dependencies.push(e.directReference);
+    for (const n of s.syntax.matchAll(/\bvar\(\s*(--[\w\u0080-\uffff-]+)\s*(?=[,)])/giu)) {
+      const d = v.get(n[1]) ?? [];
+      d.length > 1 ? r(e, "ambiguous-reference", `CSS reference ${n[1]} has multiple declarations.`) : d.length === 1 ? e.dependencies.push(d[0]) : (e.contextDependent = !0, r(e, "external-reference", `CSS reference ${n[1]} is not in this inventory; its value depends on the host context or fallback.`, "warning"));
+    }
+    e.dependencies = [...new Set(e.dependencies)], e.row.references = e.dependencies.map(({ row: n }) => ({ key: n.key, cssVar: n.cssVar, label: n.label })), /(?:^|[^\w-])(?:currentcolor|initial|inherit|unset|revert|revert-layer)(?=$|[^\w-])|\b(?:env|attr)\s*\(/i.test(s.syntax) && (e.contextDependent = !0, r(e, "context-dependent", "This CSS value depends on the surrounding document; no computed preview is claimed.", "warning"));
+  }
+  const R = /* @__PURE__ */ new Set(), x = [];
+  function T(e) {
+    if (R.has(e)) return;
+    const t = x.indexOf(e);
+    if (t !== -1) {
+      for (const s of x.slice(t)) r(s, "cyclic-reference", "Declared references form a cycle.");
+      return;
+    }
+    x.push(e);
+    for (const s of e.dependencies)
+      T(s), s.row.diagnostics.some((n) => n.severity === "error") ? r(e, "invalid-reference", `Referenced declaration ${s.row.cssVar} is invalid.`) : s.contextDependent && (e.contextDependent = !0, r(e, "context-dependent", `Referenced declaration ${s.row.cssVar} depends on the host context.`, "warning"));
+    x.pop(), R.add(e), e.row.diagnostics.some((s) => s.severity === "error") ? e.row.cssValue = null : e.contextDependent || (e.row.resolvedValue = e.directReference?.row.resolvedValue ?? e.row.cssValue);
+  }
+  for (const e of a) T(e);
+  return o.declarations = Object.fromEntries(a.filter((e) => e.row.cssValue !== null).map((e) => [e.row.cssVar, e.row.cssValue])), o;
+}
+function L(l, u, o) {
+  return o?.[l.cssVar] ?? u.preview ?? (l.kind === "color" ? "color" : "text");
+}
+const M = `Good typography gives every idea room to breathe. Compare the rhythm of several lines, the shapes of letters, and the distance between words. A token becomes useful when you can see it in context.
+
+読みやすさは、文字の大きさだけでは決まりません。行間と余白を比べて、心地よいリズムを探しましょう。0123456789`;
+function E(l) {
+  return ["size", "family", "weight", "line-height"].includes(l);
+}
+function I(l, u) {
+  const o = /* @__PURE__ */ new Set();
+  let a = l;
+  for (; a.cssValue !== null && a.resolvedValue !== null && !o.has(a.key); ) {
+    o.add(a.key);
+    const g = a.resolvedValue.trim();
+    if (/^(?:0|\+?(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem))$/i.test(g)) return g;
+    const f = /^var\(\s*(--[a-zA-Z0-9_-]+)\s*\)$/.exec(g);
+    if (!f) return null;
+    const r = u.rows.filter((_) => _.cssVar === f[1]);
+    if (r.length !== 1) return null;
+    a = r[0];
+  }
+  return null;
+}
+function P({ row: l, tier: u, kind: o, model: a, previewText: g }) {
+  if (o === "bar") {
+    const c = I(l, a);
+    return c === null ? /* @__PURE__ */ y("div", { className: "zdtp-dashboard__preview-unavailable", children: "Ruler unavailable: requires a nonnegative px/rem length or a resolved direct alias." }) : /* @__PURE__ */ m("div", { className: "zdtp-dashboard__ruler-wrap", children: [
+      /* @__PURE__ */ y("div", { className: "zdtp-dashboard__ruler-caption", children: "Actual size · ticks every 8 CSS px · major ticks every 64 CSS px" }),
+      /* @__PURE__ */ y("div", { className: "zdtp-dashboard__scroll zdtp-dashboard__ruler-scroll", role: "region", tabIndex: 0, "aria-label": `${l.label} (${l.cssVar}) actual-size ruler`, children: /* @__PURE__ */ m("div", { className: "zdtp-dashboard__ruler", style: { inlineSize: `max(100%, ${c})` }, children: [
+        /* @__PURE__ */ y("div", { className: "zdtp-dashboard__ruler-origin", children: "0" }),
+        /* @__PURE__ */ y("span", { className: "zdtp-dashboard__sample zdtp-dashboard__sample--bar", style: { inlineSize: c }, "aria-hidden": "true" })
+      ] }) })
+    ] });
+  }
+  if (l.cssValue === null || l.resolvedValue === null || o === "text" || o === "duration") return null;
+  const f = l.resolvedValue.trim().toLowerCase();
+  if (!f || (o === "radius" || o === "size") && (/^(?:auto|none|normal|(?:min|max)-content|stretch|content)$|^fit-content(?:\(|$)/.test(f) || /^[+-]?(?:\d*\.)?\d+(?:ms|s)$/.test(f) || /^[+-]?(?:\d*\.)?\d+$/.test(f) && Number(f) !== 0))
+    return null;
+  const r = l.cssValue;
+  let _;
+  switch (o) {
+    case "color":
+      _ = { backgroundColor: r };
+      break;
+    case "radius":
+      _ = { borderRadius: r };
+      break;
+    case "shadow":
+      _ = { boxShadow: r };
+      break;
+    case "size":
+      _ = { fontSize: r };
+      break;
+    case "family":
+      _ = { fontFamily: r };
+      break;
+    case "weight":
+      _ = { fontWeight: r };
+      break;
+    case "line-height": {
+      const c = a.rows.find((p) => p.cssVar === u.previewBase);
+      _ = { lineHeight: r, ...c?.cssValue !== null && c?.resolvedValue != null ? { fontSize: `var(${c.cssVar})` } : {} };
+      break;
+    }
+  }
+  const v = E(o);
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: `zdtp-dashboard__preview zdtp-dashboard__preview--${o}${v ? " zdtp-dashboard__preview--typography zdtp-dashboard__scroll" : ""}`,
+      "aria-hidden": v ? void 0 : "true",
+      role: v ? "region" : void 0,
+      tabIndex: v ? 0 : void 0,
+      "aria-label": v ? `${l.label} (${l.cssVar}) typography specimen` : void 0,
+      children: /* @__PURE__ */ y("span", { className: `zdtp-dashboard__sample zdtp-dashboard__sample--${o}`, style: _, children: v ? g : "" })
+    }
+  );
+}
+function W({
+  tabs: l,
+  mode: u = "light",
+  title: o = "Token dashboard",
+  id: a,
+  previewOverrides: g,
+  previewText: f = M
+}) {
+  const r = B(l, u), _ = r.rows.filter((v) => v.diagnostics.length > 0).length;
+  return /* @__PURE__ */ m("div", { id: a, className: "zdtp-dashboard", role: "region", "aria-label": o, "data-mode": u, children: [
+    /* @__PURE__ */ m("div", { className: "zdtp-dashboard__header", children: [
+      /* @__PURE__ */ y("div", { role: "heading", "aria-level": 2, className: "zdtp-dashboard__title", children: o }),
+      /* @__PURE__ */ m("div", { className: "zdtp-dashboard__summary", children: [
+        /* @__PURE__ */ m("span", { className: "zdtp-dashboard__count", children: [
+          r.rows.length,
+          " tokens"
+        ] }),
+        /* @__PURE__ */ m("span", { children: [
+          "Declared defaults · ",
+          u,
+          " mode"
+        ] }),
+        _ > 0 && /* @__PURE__ */ m("span", { children: [
+          _,
+          " with diagnostics"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "zdtp-dashboard__inventory", style: { ...r.declarations, colorScheme: u }, children: [
+      r.rows.length === 0 && /* @__PURE__ */ y("div", { className: "zdtp-dashboard__empty", children: "No tokens declared." }),
+      r.tabs.map((v) => /* @__PURE__ */ m("div", { className: "zdtp-dashboard__tab", role: "group", "aria-label": v.label, children: [
+        /* @__PURE__ */ m("div", { className: "zdtp-dashboard__tab-header", children: [
+          /* @__PURE__ */ y("div", { role: "heading", "aria-level": 3, className: "zdtp-dashboard__tab-title", children: v.label }),
+          /* @__PURE__ */ m("span", { className: "zdtp-dashboard__tab-count", children: [
+            v.tiers.reduce((c, p) => c + p.rows.length, 0),
+            " tokens"
+          ] })
+        ] }),
+        v.tiers.map((c) => /* @__PURE__ */ m("div", { className: "zdtp-dashboard__tier", children: [
+          /* @__PURE__ */ y("div", { role: "heading", "aria-level": 4, className: "zdtp-dashboard__tier-title", children: c.label }),
+          /* @__PURE__ */ y("div", { className: c.palette ? "zdtp-dashboard__scroll zdtp-dashboard__palette-scroll" : void 0, role: c.palette ? "region" : void 0, tabIndex: c.palette ? 0 : void 0, "aria-label": c.palette ? `${c.label} palette stops` : void 0, children: /* @__PURE__ */ y("div", { className: `zdtp-dashboard__grid${c.palette ? " zdtp-dashboard__palette" : ""}`, role: "list", "aria-label": c.label, children: c.rows.map((p) => {
+            const $ = L(p, c, g), z = !c.palette && ($ === "bar" || E($));
+            return /* @__PURE__ */ m("div", { className: `zdtp-dashboard__token${z ? " zdtp-dashboard__token--wide" : ""}`, role: "listitem", "data-css-var": p.cssVar, children: [
+              /* @__PURE__ */ y(P, { row: p, tier: c, kind: $, model: r, previewText: f }),
+              /* @__PURE__ */ m("div", { className: "zdtp-dashboard__token-content", children: [
+                /* @__PURE__ */ y("div", { className: "zdtp-dashboard__name", children: p.label }),
+                /* @__PURE__ */ y("div", { className: "zdtp-dashboard__variable", children: p.cssVar }),
+                /* @__PURE__ */ y("div", { className: "zdtp-dashboard__value", children: p.declaredValue || "(empty)" }),
+                p.cssValue !== null && p.cssValue !== p.declaredValue && /* @__PURE__ */ m("div", { className: "zdtp-dashboard__reference", children: [
+                  "CSS: ",
+                  p.cssValue
+                ] }),
+                p.references.length > 0 && /* @__PURE__ */ m("div", { className: "zdtp-dashboard__reference", children: [
+                  "References: ",
+                  p.references.map((k) => k.cssVar).join(", ")
+                ] }),
+                p.diagnostics.map((k, S) => /* @__PURE__ */ m("div", { className: "zdtp-dashboard__diagnostic", "data-diagnostic": k.code, children: [
+                  k.severity === "error" ? "Unavailable" : "Context needed",
+                  ": ",
+                  k.message
+                ] }, S))
+              ] })
+            ] }, p.key);
+          }) }) })
+        ] }, c.key))
+      ] }, v.key))
+    ] })
+  ] });
+}
+export {
+  W as TokenDashboard
+};

package/dist/dashboard/model.d.ts

@@ -0,0 +1,7 @@
+import type { TabConfig } from "../tokens/tier-model.js";
+import type { DashboardMode, DashboardModel } from "./types.js";
+/**
+ * Normalize the authored inventory for a static dashboard. Named color schemes,
+ * stored changes, editor fallback values and pill.customDefault are not inputs.
+ */
+export declare function buildDashboardModel(tabs: readonly TabConfig[], mode?: DashboardMode): DashboardModel;

package/dist/dashboard/styles.css

@@ -0,0 +1,294 @@
+/* Static dashboard chrome deliberately uses no inventory custom properties.
+   The namespace and div/span markup protect documentation hosts from tag resets. */
+.zdtp-dashboard,
+.zdtp-dashboard * {
+  box-sizing: border-box;
+}
+
+.zdtp-dashboard {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  border: 1px solid #dce1e8;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #182131;
+  color-scheme: light;
+  font: 400 14px/1.5 system-ui, sans-serif;
+  letter-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.zdtp-dashboard :where(div, span) {
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: none;
+  box-shadow: none;
+}
+
+.zdtp-dashboard__header {
+  display: grid;
+  gap: 8px;
+  padding: 20px;
+  border-block-end: 1px solid #dce1e8;
+}
+
+.zdtp-dashboard__title {
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.zdtp-dashboard__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 16px;
+  color: #536174;
+  font-size: 12px;
+}
+
+.zdtp-dashboard__count {
+  color: #182131;
+  font-weight: 600;
+}
+
+.zdtp-dashboard__inventory {
+  display: grid;
+  gap: 32px;
+  padding: 20px;
+}
+
+.zdtp-dashboard__tab {
+  display: grid;
+  gap: 20px;
+}
+
+.zdtp-dashboard__tab-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 12px;
+  padding-block-end: 8px;
+  border-block-end: 1px solid #dce1e8;
+}
+
+.zdtp-dashboard__tab-title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.zdtp-dashboard__tab-count {
+  color: #536174;
+  font-size: 12px;
+}
+
+.zdtp-dashboard__tier {
+  display: grid;
+  gap: 10px;
+}
+
+.zdtp-dashboard__tier-title {
+  font-weight: 600;
+}
+
+.zdtp-dashboard__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
+  gap: 12px;
+}
+
+.zdtp-dashboard__token {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #dce1e8;
+  border-radius: 6px;
+  background: #fff;
+  color: #182131;
+}
+
+.zdtp-dashboard__token-content {
+  display: grid;
+  align-content: start;
+  gap: 5px;
+  padding: 12px;
+}
+
+.zdtp-dashboard__name {
+  font-weight: 600;
+}
+
+.zdtp-dashboard__variable,
+.zdtp-dashboard__value,
+.zdtp-dashboard__reference {
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+
+.zdtp-dashboard__variable,
+.zdtp-dashboard__reference {
+  color: #536174;
+}
+
+.zdtp-dashboard__value {
+  padding-block-start: 5px;
+  color: #182131;
+}
+
+.zdtp-dashboard__diagnostic {
+  margin-block-start: 3px;
+  padding: 8px;
+  border-inline-start: 2px solid #9d641a;
+  background: #fff5e6;
+  color: #704612;
+  font-size: 12px;
+}
+
+.zdtp-dashboard__preview {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  block-size: 88px;
+  border-block-end: 1px solid #dce1e8;
+  border-start-start-radius: 5px;
+  border-start-end-radius: 5px;
+  background: #eef1f5;
+  color: #182131;
+  overflow: hidden;
+}
+
+.zdtp-dashboard[data-mode='dark'] .zdtp-dashboard__preview {
+  background: #222936;
+  color: #f1f5f9;
+}
+
+.zdtp-dashboard__sample {
+  display: block;
+  flex: none;
+  max-inline-size: 100%;
+}
+
+.zdtp-dashboard__preview--color {
+  padding: 0;
+  background: repeating-conic-gradient(#e2e6eb 0% 25%, #fff 0% 50%) 0 / 16px 16px;
+}
+
+.zdtp-dashboard[data-mode='dark'] .zdtp-dashboard__preview--color {
+  background: repeating-conic-gradient(#3e4652 0% 25%, #252c37 0% 50%) 0 / 16px 16px;
+}
+
+.zdtp-dashboard__sample--color {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.zdtp-dashboard__sample--bar {
+  block-size: 16px;
+  background: currentColor;
+}
+
+.zdtp-dashboard__sample--radius,
+.zdtp-dashboard__sample--shadow {
+  inline-size: 64px;
+  block-size: 48px;
+  background: #fff;
+  border: 1px solid #8290a3;
+}
+
+.zdtp-dashboard__sample--family,
+.zdtp-dashboard__sample--weight,
+.zdtp-dashboard__sample--line-height {
+  font-size: 18px;
+}
+
+.zdtp-dashboard__sample--line-height {
+  white-space: pre-line;
+}
+
+.zdtp-dashboard__empty {
+  color: #536174;
+}
+
+/* Wide rows use their embedding width, including narrow documentation columns. */
+.zdtp-dashboard { container: zdtp-dashboard / inline-size; }
+.zdtp-dashboard__token--wide {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  border-radius: 0;
+}
+.zdtp-dashboard__token--wide > .zdtp-dashboard__token-content { order: -1; }
+.zdtp-dashboard__scroll {
+  max-inline-size: 100%;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+}
+.zdtp-dashboard__scroll:focus-visible {
+  outline: 2px solid #245caa;
+  outline-offset: -2px;
+}
+.zdtp-dashboard__ruler-wrap { padding: 12px; }
+.zdtp-dashboard__ruler-caption,
+.zdtp-dashboard__preview-unavailable {
+  color: #536174;
+  font-size: 12px;
+  padding: 12px;
+}
+.zdtp-dashboard__ruler-caption { padding: 0 0 8px; }
+.zdtp-dashboard__ruler {
+  position: relative;
+  block-size: 64px;
+  padding-block-start: 36px;
+  background:
+    repeating-linear-gradient(to right, #8290a3 0 1px, transparent 1px 64px) left 24px / 100% 12px no-repeat,
+    repeating-linear-gradient(to right, #c4ccd7 0 1px, transparent 1px 8px) left 30px / 100% 6px no-repeat;
+}
+.zdtp-dashboard__ruler-origin { position: absolute; inset-block-start: 0; inset-inline-start: 0; font-size: 12px; }
+.zdtp-dashboard__sample--bar {
+  max-inline-size: none;
+  min-inline-size: 0;
+  border: 0;
+  padding: 0;
+  background: #526c92;
+}
+.zdtp-dashboard__palette {
+  display: flex;
+  gap: 0;
+  inline-size: max-content;
+  min-inline-size: 100%;
+}
+.zdtp-dashboard__palette > .zdtp-dashboard__token {
+  display: grid;
+  grid-template-rows: minmax(88px, auto) 1fr;
+  align-content: start;
+  flex: 1 0 156px;
+  inline-size: 156px;
+  border-radius: 0;
+}
+.zdtp-dashboard__palette > .zdtp-dashboard__token > .zdtp-dashboard__token-content { grid-row: 2; }
+.zdtp-dashboard__palette .zdtp-dashboard__preview { border-radius: 0; }
+.zdtp-dashboard__preview--typography {
+  display: block;
+  block-size: auto;
+  padding: 20px;
+  border: 0;
+  border-radius: 0;
+}
+.zdtp-dashboard__preview--typography > .zdtp-dashboard__sample {
+  font: 400 18px/1.6 system-ui, sans-serif;
+  letter-spacing: normal;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  max-inline-size: 100%;
+}
+@container zdtp-dashboard (min-width: 640px) {
+  .zdtp-dashboard__token--wide { grid-template-columns: 220px minmax(0, 1fr); }
+}

package/dist/dashboard/token-dashboard.d.ts

@@ -0,0 +1,23 @@
+import type { JSX } from 'preact';
+import type { TabConfig, TierConfig } from "../tokens/tier-model.js";
+import type { DashboardMode } from "./types.js";
+/** Visual samples are independent from the panel's editor kind. */
+export type DashboardPreviewKind = NonNullable<TierConfig['preview']> | 'color' | 'shadow' | 'text';
+export interface TokenDashboardProps {
+    tabs: readonly TabConfig[];
+    /** Selects declared per-mode defaults. Does not read the host or panel mode. */
+    mode?: DashboardMode;
+    title?: string;
+    /** Static multiline typography specimen. Empty strings are preserved. */
+    previewText?: string;
+    /** Optional root ID. Supply distinct IDs when rendering multiple instances. */
+    id?: string;
+    /** Per-variable sample choices, including text-editor colors and shadows. */
+    previewOverrides?: Readonly<Record<string, DashboardPreviewKind>>;
+}
+/**
+ * A complete, read-only inventory of declared defaults. Works with Preact's
+ * server renderer without hydration, browser globals, or panel configuration.
+ * Include @takazudo/zdtp/dashboard/styles.css through the host's CSS pipeline.
+ */
+export declare function TokenDashboard({ tabs, mode, title, id, previewOverrides, previewText, }: TokenDashboardProps): JSX.Element;

package/dist/dashboard/types.d.ts

@@ -0,0 +1,62 @@
+import type { TierConfig, TierValueKind } from "../tokens/tier-model.js";
+/** Internal, render-independent description of declared token defaults. */
+export type DashboardMode = 'light' | 'dark';
+export interface DashboardDiagnostic {
+    code: string;
+    severity: 'warning' | 'error';
+    message: string;
+    rowKey?: string;
+}
+export interface DashboardReference {
+    key: string;
+    cssVar: string;
+    label: string;
+}
+export interface DashboardRow {
+    /** Positional identity stays unique even when a manifest repeats identifiers. */
+    key: string;
+    tabId: string;
+    tierId: string;
+    itemId: string;
+    label: string;
+    cssVar: string;
+    kind: TierValueKind['kind'];
+    source: 'item' | 'base-role';
+    defaultValue: string;
+    /** Human-readable selected-mode declaration, including explicit semantic overrides. */
+    declaredValue: string;
+    /** Safe local CSS declaration; null for an invalid or ambiguous declaration. */
+    cssValue: string | null;
+    /**
+     * Follows direct declared references only, never computes CSS. Expressions
+     * remain expressions. Null means invalid or dependent on unknown context;
+     * the renderer must not show a value preview in that case.
+     */
+    resolvedValue: string | null;
+    references: DashboardReference[];
+    diagnostics: DashboardDiagnostic[];
+}
+export interface DashboardTier {
+    key: string;
+    id: string;
+    label: string;
+    /** Nonsemantic, non-reference, color-only source tier. */
+    palette?: boolean;
+    preview?: TierConfig['preview'];
+    previewBase?: string;
+    rows: DashboardRow[];
+}
+export interface DashboardTab {
+    key: string;
+    id: string;
+    label: string;
+    tiers: DashboardTier[];
+}
+export interface DashboardModel {
+    mode: DashboardMode;
+    tabs: DashboardTab[];
+    rows: DashboardRow[];
+    /** Declare these on each preview scope, never on :root or the document. */
+    declarations: Readonly<Record<string, string>>;
+    diagnostics: DashboardDiagnostic[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/zdtp",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Dynamic design-token tweak panel — host-config-driven, framework-agnostic Preact UI.",
   "private": false,
   "license": "MIT",
@@ -71,6 +71,12 @@
       "import": "./dist/constants.js",
       "default": "./dist/constants.js"
     },
+    "./dashboard": {
+      "types": "./dist/dashboard/index.d.ts",
+      "import": "./dist/dashboard/index.js",
+      "default": "./dist/dashboard/index.js"
+    },
+    "./dashboard/styles.css": "./dist/dashboard/styles.css",
     "./styles": "./dist/zdtp.css",
     "./styles.css": "./dist/zdtp.css",
     "./package.json": "./package.json"
@@ -102,6 +108,7 @@
     "jsdom": "^25.0.0",
     "playwright": "^1.60.0",
     "preact": "^10.29.1",
+    "preact-render-to-string": "^6.6.6",
     "typescript": "^5.6.0",
     "vite": "^7.3.5",
     "vitest": "^4.1.8",