@takazudo/zdtp 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -4,6 +4,76 @@ 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.
 
+## [Unreleased]
+
+No unreleased changes yet.
+
+## [0.8.0] - 2026-09-12
+
+### Breaking Changes
+
+- feat(dashboard): render mode-aware token regions (bd8fb6b). Mode-dependent rows now precede independent rows in separate regions. Independent specimens follow `chrome`, while dependent specimens follow `mode`. **Migration**: update custom DOM/CSS integrations to target `.zdtp-dashboard__region`; set both `mode="dark"` and `chrome="dark"` for uniformly dark output, or compose filtered instances with `include="mode-dependent"` and `include="mode-independent"`.
+- feat(dashboard): derive chrome colors from theme inputs (495af9f). The outer root is transparent and derived chrome paints the header and regions. **Migration**: provide any surrounding page background on your wrapper and customize the four inherited `--zdtp-dashboard-light-bg`, `--zdtp-dashboard-light-fg`, `--zdtp-dashboard-dark-bg`, and `--zdtp-dashboard-dark-fg` inputs instead of relying on the former fixed palette.
+- feat(dashboard): model mode dependence per row (d570b9b). Existing top-level `light-dark()` defaults display and emit the selected side in light/dark snapshots; empty inventory groups are omitted. **Migration**: use `mode="host"` when the declaration should remain a browser-selected pair, and read the authored manifest when you need unfiltered source order or empty groups. The internal model helper's positional-mode overload remains available.
+- feat(zdtp): add scoped import modal flow (a8223ba). Load becomes available after JSON analysis. **Migration**: in UI automation, choose **Analyze** or wait for **Import scope**, select the desired tabs/options, and then choose **Load**.
+
+### Features
+
+- feat(zdtp): add mode-dependent token helpers (28cceb8)
+- feat(zdtp): add scoped token import analysis and mode mapping (e2ea25a)
+- feat(zdtp): apply manifest color modes across panel lifecycle (08bfb52)
+- feat(zdtp): render and serialize manifest mode rows (2b501bf)
+
+Mode pairs are display-only in the panel. Per-mode editing is tracked in [#953](https://github.com/Takazudo/zudo-design-token-panel/issues/953). Diff-only export retains its comparison against `item.default`; use `includeDefaults: true` for a complete export.
+
+### Fixed
+
+- fix: preserve current references during single-side imports (87dc04b)
+
+### Other Changes
+
+- test: clean up host adapter alias lifecycle (9361c48)
+- test: drain host adapter autoload lifecycle (d8f7f2c)
+- test(dashboard): guard against hostile host styles (070ae9b)
+- test: verify mode pairs on real browser apply targets (def8853)
+- test: align packed dashboard SSR with region chrome (d836407)
+- test: analyze imports in the browser header workflow (50d1953)
+- docs: cover mode-aware dashboard consumers (b2496d6)
+- docs: capture mode-aware dashboard browser evidence (42ca61a)
+- docs(deps): sync vendored zudo-doc scaffold to v5.21.0 ([#937](https://github.com/Takazudo/zudo-design-token-panel/pull/937)) (a7c56e2)
+- docs(deps): sync pin comment, vendored manifest, and doc prose to 0.7.0 ([#936](https://github.com/Takazudo/zudo-design-token-panel/pull/936)) (7966f0b)
+- chore(deps): bump @takazudo/* registry deps to frozen targets ([#936](https://github.com/Takazudo/zudo-design-token-panel/pull/936)) (af2f40f)
+
+## [0.7.0] - 2026-09-09
+
+### Breaking Changes
+
+- feat(dashboard): separate chrome theme from specimen mode (84d4d8a). `TokenDashboard` no longer derives its chrome appearance from `mode`: with `mode="dark"` the inventory scope previously carried `color-scheme: dark`, and now only `.zdtp-dashboard__specimen` does, with chrome defaulting to light. **Migration**: pass the new `chrome="dark"` prop alongside `mode="dark"` to restore the previous dark chrome, or `chrome="host"` to inherit the host's effective color scheme.
+
+### Features
+
+- feat: resolve CSS color expressions in host context ([#919](https://github.com/Takazudo/zudo-design-token-panel/issues/919)) (30dbabc)
+- feat: require explicit conversion before editing color expressions (ffad163)
+
+### Fixed
+
+- Fix invalid CSS color probe fallback (a1d468f)
+- Reject unchanged invalid color declarations before measurement (27fbc70)
+
+### Other Changes
+
+- docs(dashboard): document host chrome and add static theme examples (1b8e26d)
+- docs(dashboard): document chrome contract (83778e8)
+- test: cover dashboard chrome themes in browser (5682c72)
+- test: strengthen dashboard specimen isolation assertions (cc62be6)
+- test: prove dashboard host chrome from packed consumer (7a251f0)
+- test(evidence): record dashboard chrome integration proof (690af1f)
+- test: wire semantic expression picker modes (90af515)
+- Cover empty CSS color resolution (18f45ba)
+- docs: record reference-aware color picker fix (b1bb048)
+- test: record reference-aware picker confirmation (045603b)
+- docs: correct picker evidence provenance (89e0322)
+
 ## [0.6.1] - 2026-09-08
 
 ### Features

package/PORTABLE-CONTRACT.md

@@ -1743,15 +1743,18 @@ 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.
+This entry is available from v0.6.1. The `chrome` prop is **unreleased (next
+release)** and is not supported in 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.
+`TokenDashboardProps`, `DashboardMode`, `DashboardChrome`,
+`DashboardPreviewKind`, `TabConfig`, `TierConfig`, and `TierItem` types. The
+internal value model is not a public API.
 
 ```ts
 export type DashboardMode = 'light' | 'dark';
+export type DashboardChrome = 'light' | 'dark' | 'host';
 export type DashboardPreviewKind =
   | 'bar' | 'size' | 'line-height' | 'family' | 'weight' | 'radius' | 'duration'
   | 'color' | 'shadow' | 'text';
@@ -1759,6 +1762,7 @@ export type DashboardPreviewKind =
 export interface TokenDashboardProps {
   tabs: readonly TabConfig[];
   mode?: DashboardMode; // default: light
+  chrome?: DashboardChrome; // default: light; unreleased (next release)
   title?: string; // default: Token dashboard
   previewText?: string; // static typography passage; default English/Japanese prose
   id?: string; // optional root ID; caller owns uniqueness
@@ -1775,9 +1779,15 @@ export interface TokenDashboardProps {
   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.
+- The dashboard root's chrome appearance follows `chrome`: `light` and `dark`
+  fix the shell scheme, while `host` inherits the host's effective
+  `color-scheme` and requires the host to set it on an ancestor. The dashboard
+  uses no media query, so an explicit application theme takes precedence over
+  the OS preference. Inventory specimens retain their own `color-scheme` from
+  `mode`, which also selects declared per-mode defaults. Chrome and specimens
+  are independent; chrome uses package-owned CSS custom properties and never
+  reads inventory variables. The component never writes to `:root` or host
+  state.
 - 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.

package/README.md

@@ -43,7 +43,8 @@ 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/)
+manifest on a plain page. This entry is available from v0.6.1. The `chrome`
+prop is **unreleased (next release)** and is not supported in v0.6.1. The [live workspace demo](https://zdtp-playground.zudolab.dev/dashboard/)
 shows both modes and a compact embedded instance.
 
 ```tsx
@@ -92,9 +93,18 @@ 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.
+Optional props are `mode` (`light` by default), `chrome` (`light` by default;
+**unreleased for the next release**), `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.
+
+`chrome="light"` and `chrome="dark"` fix the dashboard shell appearance;
+`chrome="host"` inherits the host's effective `color-scheme` and requires the
+host to set it on an ancestor. Chrome is independent of `mode`: `mode` selects
+declared per-mode defaults and each specimen's own `color-scheme`, while chrome
+uses package-owned CSS custom properties and never reads inventory variables.
+The dashboard uses no media query, so an explicit application theme wins over
+the OS preference.
 
 Spacing uses actual-size rulers with local scrolling. Nonnegative px/rem, zero,
 and resolved direct aliases are supported; other lengths keep a readable fallback.
@@ -110,9 +120,10 @@ The inventory uses **declared defaults**: item defaults, per-mode
 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.
+with diagnostics rather than misleading samples. The dashboard root's chrome
+scheme follows `chrome`, while each specimen's `color-scheme` follows `mode`;
+both are local to the instance, and 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.

package/dist/apply/build-apply-overrides.d.ts

@@ -57,6 +57,8 @@
  *
  * For non-color tokens, the sparse maps may retain empty or default-equal
  * values. Those entries are omitted so Apply matches UI and diff-only export.
+ * Explicit `modes` rows are also emitted without an override, so their manifest
+ * pair is materialized on disk; existing overrides still take precedence.
  *
  * Pure / no IO — safe to import anywhere (browser, Node, tests).
  */

package/dist/astro/host-adapter.js

@@ -1,6 +1,6 @@
-import { c as y, g as m, a as w, b, i as P } from "../panel-config-Crn5QJGy.js";
-import { g, Z as A } from "../tweak-state-Dzr5kDhX.js";
-import { s as D, l as E, a as _, i as c, r as f, c as k, b as S, d } from "../autoload-state-CGnis85c.js";
+import { c as y, g as m, a as w, b, i as P } from "../panel-config-DKfob-1r.js";
+import { g, Z as A } from "../tweak-state-BiaKbhXN.js";
+import { s as D, l as E, a as _, i as c, r as f, c as k, b as S, d } from "../autoload-state-CtB0e8mY.js";
 import { READABLE_STATE_KEY_SUFFIXES as T } from "../constants.js";
 const u = "tokenpanel-config";
 function I() {

package/dist/astro/index.js

@@ -1,4 +1,4 @@
-import { s as t } from "../panel-config-Crn5QJGy.js";
+import { s as t } from "../panel-config-DKfob-1r.js";
 import { c as d } from "../color-schemes-CgzOBqGO.js";
 import { F as r, G as m, a as g, S as z } from "../manifest-DvuKi7I4.js";
 const e = {

package/dist/{autoload-state-CGnis85c.js → autoload-state-CtB0e8mY.js}

@@ -1,4 +1,4 @@
-import { g as n, j as o } from "./panel-config-Crn5QJGy.js";
+import { g as n, j as o } from "./panel-config-DKfob-1r.js";
 function c() {
   return typeof document < "u" && document !== null && typeof document.getElementById == "function";
 }

package/dist/components/color-picker/color-field.d.ts

@@ -18,6 +18,8 @@ export interface ColorFieldProps {
      * with the native <input type="color"> path).
      */
     valueFormat?: ColorPickerValueFormat;
+    /** Host color scheme used to resolve CSS expressions. */
+    resolveMode?: 'light' | 'dark';
     /** Display label shown in the picker header and aria-label. */
     label: string;
     /** Optional CSS custom property name (e.g. `--my-color`). Used for aria-label. */
@@ -33,5 +35,5 @@ export interface ColorFieldProps {
  *
  * Readonly items show the swatch but do not open the picker on interaction.
  */
-export declare function ColorField({ value, onChange, valueFormat, label, cssVar, readonly: isReadonly, }: ColorFieldProps): import("preact").JSX.Element;
+export declare function ColorField({ value, onChange, valueFormat, resolveMode, label, cssVar, readonly: isReadonly, }: ColorFieldProps): import("preact").JSX.Element;
 export default ColorField;

package/dist/components/color-picker/color-picker.d.ts

@@ -48,6 +48,8 @@ export interface ColorPickerProps {
      * with existing callers that pass no value).
      */
     valueFormat?: ColorPickerValueFormat;
+    /** Host color scheme used to resolve CSS expressions. */
+    resolveMode?: 'light' | 'dark';
     /** Optional label rendered in the picker header. */
     label?: string;
     /**
@@ -93,5 +95,5 @@ export declare function usePopoverClose(containerRef: React.RefObject<HTMLElemen
  * The parent renders `{isOpen && <ColorPicker ... />}`. This component does
  * NOT render a trigger swatch and does NOT use createPortal.
  */
-export declare function ColorPicker({ color, onChange, valueFormat, label, defaultMode, anchorRef, onClose, }: ColorPickerProps): JSX.Element;
+export declare function ColorPicker({ color, onChange, valueFormat, resolveMode, label, defaultMode, anchorRef, onClose, }: ColorPickerProps): JSX.Element;
 export default ColorPicker;

package/dist/components/color-picker/custom-slider.d.ts

@@ -12,6 +12,7 @@ export interface SliderConfig {
     format: (v: number) => string;
 }
 export interface CustomSliderProps {
+    disabled?: boolean;
     config: SliderConfig;
     value: number;
     /** CSS gradient string applied to the track div's background. */
@@ -20,5 +21,5 @@ export interface CustomSliderProps {
     onDragStart: () => void;
     onDragEnd: () => void;
 }
-export declare function CustomSlider({ config, value, gradient, onChange, onDragStart, onDragEnd, }: CustomSliderProps): JSX.Element;
+export declare function CustomSlider({ disabled, config, value, gradient, onChange, onDragStart, onDragEnd, }: CustomSliderProps): JSX.Element;
 export default CustomSlider;

package/dist/config/cluster-config.d.ts

@@ -69,6 +69,11 @@ export interface ColorClusterDataConfig {
     label?: string;
     /** Expected palette size. Used for init + v1 validation. */
     paletteSize: number;
+    /** Manifest mode pairs keyed by palette slot; used to seed dense state. */
+    paletteModes?: Record<number, {
+        light: string;
+        dark: string;
+    }>;
     /** Map of base-role name → CSS custom-property name. Partial: a cluster
      *  declares only the roles it actually has. */
     baseRoles: Partial<Record<BaseRoleKey, string>>;
@@ -114,8 +119,9 @@ import type { TabConfig } from "../tokens/tier-model.js";
 /**
  * Derive a `ColorClusterDataConfig` from a color `TabConfig`.
  *
- * - Palette items: the first tier whose items all have `kind: 'color'` and
- *   are not `semantic: true`. Each item's `cssVar` becomes a palette slot;
+ * - Palette items: the first non-reference, non-semantic tier beginning with
+ *   a color-kind item or an explicit `modes` pair. Each item's `cssVar`
+ *   becomes a palette slot;
  *   `paletteCssVarTemplate` is synthesised as `"{item.cssVar}"` with `{n}`
  *   replaced by the slot index. Because item cssVars are explicit (e.g.
  *   `--zfb-palette-0`) rather than template-based, we derive the template
@@ -133,6 +139,8 @@ import type { TabConfig } from "../tokens/tier-model.js";
  *   render) but `semanticDefaults`/`semanticCssNames` are populated from the
  *   semantic tier so the Semantic Tokens section isn't left empty (#463).
  *
+ * - Explicit mode pairs in additional tiers become literal semantic defaults
+ *   so they participate in the cluster's apply and clear paths as well.
  * - Metadata comes from `tab.colorExtras` (required on a color tab).
  *
  * `tabs` is the panel config's full tabs array, used to resolve a semantic

package/dist/dashboard/index.d.ts

@@ -1,4 +1,5 @@
 export { TokenDashboard } from "./token-dashboard.js";
 export type { TokenDashboardProps, DashboardPreviewKind } from "./token-dashboard.js";
-export type { DashboardMode } from "./types.js";
+export type { DashboardMode, DashboardInclude, DashboardChrome } from "./types.js";
 export type { TabConfig, TierConfig, TierItem } from "../tokens/tier-model.js";
+export { splitLightDark, resolveModeSides, isModeDependent } from "../tokens/mode-dependence.js";