@takazudo/zdtp 0.7.0 → 0.8.0

package/dist/dashboard/model.d.ts

@@ -1,7 +1,9 @@
 import type { TabConfig } from "../tokens/tier-model.js";
-import type { DashboardMode, DashboardModel } from "./types.js";
+import type { DashboardMode, DashboardModel, DashboardModelOptions } 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[], options?: DashboardModelOptions): DashboardModel;
+/** Compatibility for consumers passing the declared mode positionally. */
 export declare function buildDashboardModel(tabs: readonly TabConfig[], mode?: DashboardMode): DashboardModel;

package/dist/dashboard/styles.css

@@ -1,3 +1,41 @@
+/*
+ * Public chrome inputs. Hosts may set these four variables on the dashboard or
+ * on an ancestor. The registered initial values keep the dashboard usable when
+ * no host value is supplied; the `inherit` declarations below preserve an
+ * ancestor override instead of shadowing it.
+ *
+ * --zdtp-dashboard-light-bg: light-mode page and shell background.
+ * --zdtp-dashboard-light-fg: light-mode primary text and foreground.
+ * --zdtp-dashboard-dark-bg: dark-mode page and shell background.
+ * --zdtp-dashboard-dark-fg: dark-mode primary text and foreground.
+ *
+ * All other chrome colors are derived from these inputs with light-dark() and
+ * color-mix().
+ */
+@property --zdtp-dashboard-light-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f8fafc;
+}
+
+@property --zdtp-dashboard-light-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #182131;
+}
+
+@property --zdtp-dashboard-dark-bg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #151b24;
+}
+
+@property --zdtp-dashboard-dark-fg {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #edf2f7;
+}
+
 /* Static dashboard chrome deliberately uses no inventory custom properties.
    The namespace and div/span markup protect documentation hosts from tag resets. */
 .zdtp-dashboard,
@@ -6,27 +44,60 @@
 }
 
 .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);
+  /* Keep these inputs inheritable so a wrapper can theme the dashboard. */
+  --zdtp-dashboard-light-bg: inherit;
+  --zdtp-dashboard-light-fg: inherit;
+  --zdtp-dashboard-dark-bg: inherit;
+  --zdtp-dashboard-dark-fg: inherit;
+
+  --zdtp-dashboard-bg: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 0%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 0%)
+  );
+  --zdtp-dashboard-fg: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 100%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 100%)
+  );
+  --zdtp-dashboard-muted: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 58%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 58%)
+  );
+  --zdtp-dashboard-border: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 16%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 22%)
+  );
+  --zdtp-dashboard-card-bg: light-dark(
+    color-mix(in oklab, color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 0%), white 20%),
+    color-mix(in oklab, color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 0%), black 8%)
+  );
   --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-ruler-major: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 48%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 52%)
+  );
+  --zdtp-dashboard-ruler-minor: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 22%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 26%)
+  );
   --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);
+  --zdtp-dashboard-sample-bg: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 4%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 6%)
+  );
+  --zdtp-dashboard-sample-border: light-dark(
+    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 48%),
+    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 52%)
+  );
+  --zdtp-dashboard-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);
+  background: transparent;
+  color: inherit;
   font: 400 14px/1.5 system-ui, sans-serif;
   letter-spacing: normal;
   text-align: start;
@@ -35,10 +106,15 @@
   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; }
 
+/* Shell chrome is scoped to the header and the mode-independent region. This
+   leaves a mode-dependent `data-scheme="host"` region able to inherit from the
+   page ancestor, even when the shell itself is fixed to light or dark. */
+.zdtp-dashboard[data-chrome='light'] > .zdtp-dashboard__header { color-scheme: light; }
+.zdtp-dashboard[data-chrome='dark'] > .zdtp-dashboard__header { color-scheme: dark; }
+.zdtp-dashboard[data-chrome='host'] > .zdtp-dashboard__header { color-scheme: inherit; }
+
 .zdtp-dashboard :where(div, span) {
   min-inline-size: 0;
   margin: 0;
@@ -56,8 +132,21 @@
   gap: 8px;
   padding: 20px;
   border-block-end: 1px solid var(--zdtp-dashboard-border);
+  background: var(--zdtp-dashboard-bg);
+  color: var(--zdtp-dashboard-fg);
+}
+
+.zdtp-dashboard__region {
+  display: grid;
+  gap: 32px;
+  background: var(--zdtp-dashboard-bg);
+  color: var(--zdtp-dashboard-fg);
 }
 
+.zdtp-dashboard__region[data-scheme='light'] { color-scheme: light; }
+.zdtp-dashboard__region[data-scheme='dark'] { color-scheme: dark; }
+.zdtp-dashboard__region[data-scheme='host'] { color-scheme: inherit; }
+
 .zdtp-dashboard__title {
   font-size: 22px;
   font-weight: 700;
@@ -185,16 +274,8 @@
   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;
+  background: light-dark(#eef1f5, #222936);
+  color: light-dark(#182131, #f1f5f9);
 }
 
 .zdtp-dashboard__sample {
@@ -205,14 +286,7 @@
 
 .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;
+  background: repeating-conic-gradient(light-dark(#e2e6eb, #3e4652) 0% 25%, light-dark(#fff, #252c37) 0% 50%) 0 / 16px 16px;
 }
 
 .zdtp-dashboard__sample--color {
@@ -243,6 +317,7 @@
 }
 
 .zdtp-dashboard__empty {
+  background: var(--zdtp-dashboard-bg);
   color: var(--zdtp-dashboard-muted);
 }
 

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

@@ -1,14 +1,17 @@
 import type { JSX } from 'preact';
 import type { TabConfig, TierConfig } from "../tokens/tier-model.js";
-import type { DashboardChrome, DashboardMode } from "./types.js";
+import type { DashboardChrome, DashboardInclude, 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. */
+    /** Selects declared per-mode defaults. 'host' follows the inherited CSS
+     * color-scheme without reading browser or panel state. Defaults to 'light'. */
     mode?: DashboardMode;
-    /** Selects chrome appearance (shell, cards, labels, borders, diagnostics and
-     * focus/scroll affordances), independently of mode's declared defaults.
+    /** Selects visible rows by mode dependence. Defaults to 'all'. */
+    include?: DashboardInclude;
+    /** Selects the shell and mode-independent region's appearance, including
+     * cards, labels, borders, diagnostics and focus/scroll affordances.
      * 'host' inherits the host's effective color-scheme. Defaults to 'light'. */
     chrome?: DashboardChrome;
     title?: string;
@@ -24,4 +27,4 @@ export interface TokenDashboardProps {
  * 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;
+export declare function TokenDashboard({ tabs, mode, include, chrome, title, id, previewOverrides, previewText, }: TokenDashboardProps): JSX.Element;

package/dist/dashboard/types.d.ts

@@ -1,6 +1,11 @@
 import type { TierConfig, TierValueKind } from "../tokens/tier-model.js";
 /** Internal, render-independent description of declared token defaults. */
-export type DashboardMode = 'light' | 'dark';
+export type DashboardMode = 'light' | 'dark' | 'host';
+export type DashboardInclude = 'all' | 'mode-dependent' | 'mode-independent';
+export interface DashboardModelOptions {
+    mode?: DashboardMode;
+    include?: DashboardInclude;
+}
 /** Appearance of the dashboard chrome, independent of declared token mode. */
 export type DashboardChrome = 'light' | 'dark' | 'host';
 export interface DashboardDiagnostic {
@@ -24,6 +29,13 @@ export interface DashboardRow {
     cssVar: string;
     kind: TierValueKind['kind'];
     source: 'item' | 'base-role';
+    modeDependent: boolean;
+    /** Direct authored pair; reference-derived dependence has no local pair. */
+    sides: {
+        light: string;
+        dark: string;
+    } | null;
+    origin: 'modes' | 'semantic' | 'default' | 'reference' | null;
     defaultValue: string;
     /** Human-readable selected-mode declaration, including explicit semantic overrides. */
     declaredValue: string;
@@ -31,8 +43,9 @@ export interface DashboardRow {
     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.
+     * remain expressions. Null means invalid or dependent on unknown context.
+     * In host mode, mode-dependent rows stay null while cssValue retains the
+     * declarations needed for the browser to resolve the inherited scheme.
      */
     resolvedValue: string | null;
     references: DashboardReference[];
@@ -56,7 +69,10 @@ export interface DashboardTab {
 }
 export interface DashboardModel {
     mode: DashboardMode;
+    include: DashboardInclude;
+    /** Visible inventory, with empty tiers and tabs omitted. */
     tabs: DashboardTab[];
+    /** Complete graph, including rows hidden by include. */
     rows: DashboardRow[];
     /** Declare these on each preview scope, never on :root or the document. */
     declarations: Readonly<Record<string, string>>;

package/dist/import-modal.d.ts

@@ -1,40 +1,39 @@
 /**
- * Import modal — accepts a pasted design-tokens JSON document and lifts it
- * into a `TweakState` via `deserialize()`. `deserialize()` validates the
- * `$schema` key against the fixed `SCHEMA_V1`/`SCHEMA_V2`/`SCHEMA_V3`
- * constants exported by the serde — `panelConfig.schemaId` plays no part in
- * that validation; it is a UI-label-only field (#498). This component does
- * not read `schemaId` at all; the hint/placeholder/error copy below names
- * the actual accepted constants directly.
+ * Import modal — accepts a pasted design-tokens JSON document and guides the
+ * user through paste → analyze → scope → load.
  *
- * Ported verbatim from zudo-doc's
- * `src/components/design-token-tweak/import-modal.tsx`. Intentional deltas:
- *  - `deserialize` / `DesignTokenSchemaError` come from this package's serde
- *    (`./utils/design-token-serde`).
- *  - State types import from this package's state envelope.
- *  - Modal class names are derived from `panelConfig.modalClassPrefix` via
- *    `modalClass(...)` so a single config swap re-themes every dialog.
+ * `analyzeDesignTokenJson()` is deliberately state-free, so the first step
+ * can inspect a document without applying values or touching storage. The
+ * selected tabs and mode/merge choices are passed to `deserialize()` only
+ * after the user explicitly chooses Load.
  *
  * Modal lifecycle uses the native `<dialog>` element via `showModal()` /
- * `close()`. Every dismissal path (× button, backdrop click, Escape key, the
- * programmatic "Close" button) routes through `dialog.close()` so the native
- * `close` event — and thus `onClose` — fires exactly once per dismissal.
+ * `close()`. Every dismissal path routes through `dialog.close()` so the
+ * native `close` event — and thus `onClose` — fires exactly once per
+ * dismissal.
  */
 import type { ColorTweakState, TweakState } from "./state/tweak-state.js";
 import { type PanelConfig } from "./config/panel-config.js";
 export interface ImportModalProps {
     onClose: () => void;
     /** Called with the parsed state when the user hits "Load". The caller is
-     *  responsible for applying it to the panel + persisting it. */
+     * responsible for applying it to the panel + persisting it. */
     onLoad: (state: TweakState) => void;
     /** Color baseline filled in for fields absent from the payload. */
     colorDefaults: ColorTweakState;
+    /**
+     * The mounted panel instance's live state. It is used by scoped merge and
+     * one-side imports to preserve values from the instance being edited.
+     * Omitted for backwards-compatible direct renders; serde then falls back to
+     * manifest/default values for those options.
+     */
+    current?: TweakState;
     /**
      * The mounted panel instance's config (multi-instance, #357). When supplied,
-     * the modal derives its modal classes + title id from THIS instance rather
-     * than the active default instance. Omitted (e.g. a direct test render) →
-     * `getPanelConfig()`, preserving the single-panel path.
+     * the modal derives its modal classes + title id and serde lookups from THIS
+     * instance rather than the active default instance. Omitted (e.g. a direct
+     * test render) → `getPanelConfig()`, preserving the single-panel path.
      */
     instanceConfig?: PanelConfig;
 }
-export declare function ImportModal({ onClose, onLoad, colorDefaults, instanceConfig }: ImportModalProps): import("preact").JSX.Element;
+export declare function ImportModal({ onClose, onLoad, colorDefaults, current, instanceConfig, }: ImportModalProps): import("preact").JSX.Element;

package/dist/{index-BcqHRoxf.js → index-BH_IJp9W.js}

@@ -1,7 +1,7 @@
 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-CUWkR-Gb.js";
-import { g as vt, m as j } from "./panel-config-Crn5QJGy.js";
+import { b as ft, p as wt, u as ht, a as Ne, A as bt, Z as gt } from "./index-blRjSavc.js";
+import { g as vt, m as j } from "./panel-config-DKfob-1r.js";
 const xt = (e, o) => {
   const t = new Array(e.length + o.length);
   for (let r = 0; r < e.length; r++)