@takazudo/zdtp 0.6.0 → 0.7.0

package/dist/dashboard/styles.css

@@ -0,0 +1,328 @@
+/* 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 {
+  --zdtp-dashboard-bg: light-dark(#f8fafc, #151b24);
+  --zdtp-dashboard-fg: light-dark(#182131, #edf2f7);
+  --zdtp-dashboard-muted: light-dark(#536174, #acb9cb);
+  --zdtp-dashboard-border: light-dark(#dce1e8, #465367);
+  --zdtp-dashboard-card-bg: light-dark(#fff, #202936);
+  --zdtp-dashboard-diag-bg: light-dark(#fff5e6, #3b2c18);
+  --zdtp-dashboard-diag-fg: light-dark(#704612, #ffdaa3);
+  --zdtp-dashboard-diag-accent: light-dark(#9d641a, #e4ad5c);
+  --zdtp-dashboard-focus: light-dark(#245caa, #6488b8);
+  --zdtp-dashboard-ruler-major: light-dark(#8290a3, #a3b2c7);
+  --zdtp-dashboard-ruler-minor: light-dark(#c4ccd7, #63748c);
+  --zdtp-dashboard-bar: light-dark(#526c92, #9dbbe6);
+  --zdtp-dashboard-sample-bg: light-dark(#fff, #39475b);
+  --zdtp-dashboard-sample-border: light-dark(#8290a3, #a3b2c7);
+  --zdtp-dashboard-transparent: light-dark(transparent, transparent);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  border: 1px solid var(--zdtp-dashboard-border);
+  border-radius: 10px;
+  background: var(--zdtp-dashboard-bg);
+  color: var(--zdtp-dashboard-fg);
+  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[data-chrome='light'] { color-scheme: light; }
+.zdtp-dashboard[data-chrome='dark'] { color-scheme: dark; }
+.zdtp-dashboard[data-chrome='host'] { color-scheme: inherit; }
+
+.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 var(--zdtp-dashboard-border);
+}
+
+.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: var(--zdtp-dashboard-muted);
+  font-size: 12px;
+}
+
+.zdtp-dashboard__count {
+  color: var(--zdtp-dashboard-fg);
+  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 var(--zdtp-dashboard-border);
+}
+
+.zdtp-dashboard__tab-title {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.zdtp-dashboard__tab-count {
+  color: var(--zdtp-dashboard-muted);
+  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 var(--zdtp-dashboard-border);
+  border-radius: 6px;
+  background: var(--zdtp-dashboard-card-bg);
+  color: var(--zdtp-dashboard-fg);
+}
+
+.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: var(--zdtp-dashboard-muted);
+}
+
+.zdtp-dashboard__value {
+  padding-block-start: 5px;
+  color: var(--zdtp-dashboard-fg);
+}
+
+.zdtp-dashboard__diagnostic {
+  margin-block-start: 3px;
+  padding: 8px;
+  border-inline-start: 2px solid var(--zdtp-dashboard-diag-accent);
+  background: var(--zdtp-dashboard-diag-bg);
+  color: var(--zdtp-dashboard-diag-fg);
+  font-size: 12px;
+}
+
+.zdtp-dashboard__preview {
+  display: flex;
+  block-size: 88px;
+  border-block-end: 1px solid var(--zdtp-dashboard-border);
+  border-start-start-radius: 5px;
+  border-start-end-radius: 5px;
+  overflow: hidden;
+}
+
+/* The inner well owns specimen paint and mode; borders and scrolling stay outside. */
+.zdtp-dashboard__preview > .zdtp-dashboard__specimen {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 16px;
+}
+
+:where(.zdtp-dashboard[data-mode='light']) .zdtp-dashboard__preview > .zdtp-dashboard__specimen {
+  background: #eef1f5;
+  color: #182131;
+}
+
+.zdtp-dashboard[data-mode='dark'] .zdtp-dashboard__preview > .zdtp-dashboard__specimen {
+  background: #222936;
+  color: #f1f5f9;
+}
+
+.zdtp-dashboard__sample {
+  display: block;
+  flex: none;
+  max-inline-size: 100%;
+}
+
+.zdtp-dashboard__preview--color > .zdtp-dashboard__specimen {
+  padding: 0;
+}
+
+:where(.zdtp-dashboard[data-mode='light']) .zdtp-dashboard__preview--color > .zdtp-dashboard__specimen {
+  background: repeating-conic-gradient(#e2e6eb 0% 25%, #fff 0% 50%) 0 / 16px 16px;
+}
+
+.zdtp-dashboard[data-mode='dark'] .zdtp-dashboard__preview--color > .zdtp-dashboard__specimen {
+  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;
+}
+
+.zdtp-dashboard__sample--radius,
+.zdtp-dashboard__sample--shadow {
+  inline-size: 64px;
+  block-size: 48px;
+  background: var(--zdtp-dashboard-sample-bg);
+  border: 1px solid var(--zdtp-dashboard-sample-border);
+}
+
+.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: var(--zdtp-dashboard-muted);
+}
+
+/* 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 var(--zdtp-dashboard-focus);
+  /* Paint outside the mode-scoped well, against surrounding chrome. */
+  outline-offset: 0;
+}
+.zdtp-dashboard__ruler-wrap { padding: 12px; }
+.zdtp-dashboard__ruler-caption,
+.zdtp-dashboard__preview-unavailable {
+  color: var(--zdtp-dashboard-muted);
+  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, var(--zdtp-dashboard-ruler-major) 0 1px, var(--zdtp-dashboard-transparent) 1px 64px) left 24px / 100% 12px no-repeat,
+    repeating-linear-gradient(to right, var(--zdtp-dashboard-ruler-minor) 0 1px, var(--zdtp-dashboard-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: var(--zdtp-dashboard-bar);
+}
+.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;
+  border: 0;
+  border-radius: 0;
+}
+.zdtp-dashboard__preview--typography > .zdtp-dashboard__specimen {
+  display: block;
+  padding: 20px;
+  min-block-size: 100%;
+}
+.zdtp-dashboard__preview--typography > .zdtp-dashboard__specimen > .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,27 @@
+import type { JSX } from 'preact';
+import type { TabConfig, TierConfig } from "../tokens/tier-model.js";
+import type { DashboardChrome, 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;
+    /** Selects chrome appearance (shell, cards, labels, borders, diagnostics and
+     * focus/scroll affordances), independently of mode's declared defaults.
+     * 'host' inherits the host's effective color-scheme. Defaults to 'light'. */
+    chrome?: DashboardChrome;
+    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, chrome, title, id, previewOverrides, previewText, }: TokenDashboardProps): JSX.Element;

package/dist/dashboard/types.d.ts

@@ -0,0 +1,64 @@
+import type { TierConfig, TierValueKind } from "../tokens/tier-model.js";
+/** Internal, render-independent description of declared token defaults. */
+export type DashboardMode = 'light' | 'dark';
+/** Appearance of the dashboard chrome, independent of declared token mode. */
+export type DashboardChrome = 'light' | 'dark' | 'host';
+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/dist/{index-LYsbHWcy.js → index-BcqHRoxf.js}

@@ -1,6 +1,6 @@
 import { jsx as y, jsxs as K, Fragment as kt } from "preact/jsx-runtime";
 import { useEffect as P, useState as Y, useRef as O, useMemo as J, useCallback as X } from "preact/hooks";
-import { b as ft, p as wt, u as ht, a as Ne, A as bt, Z as gt } from "./index-DWs1XPfy.js";
+import { b as ft, p as wt, u as ht, a as Ne, A as bt, Z as gt } from "./index-CUWkR-Gb.js";
 import { g as vt, m as j } from "./panel-config-Crn5QJGy.js";
 const xt = (e, o) => {
   const t = new Array(e.length + o.length);