@takazudo/zdtp 0.1.0-next.0

package/dist/utils/design-token-serde.d.ts

@@ -0,0 +1,193 @@
+/**
+ * Design-token SerDe — unified JSON export / import for the design-token panel.
+ *
+ * Supersedes the legacy flat-cssVar-map v1 serde. The JSON format is a single
+ * document covering all token categories (color, spacing, typography/font, size)
+ * so an AI assistant can consume or emit a whole design-token tweak in one
+ * round-trip.
+ *
+ * ## Schema versioning
+ *
+ * | `$schema` value            | Status   | Structure                                |
+ * |----------------------------|----------|------------------------------------------|
+ * | `zudo-design-tokens/v1`    | Legacy   | Flat top-level `color`/`spacing`/`typography`/`size` keys |
+ * | `zudo-design-tokens/v2`    | Current  | `tabs` wrapper keyed by tab id; cssVar-keyed leaves |
+ *
+ * `serialize()` always emits v2. `deserialize()` accepts both v1 and v2 and
+ * normalises to an internal `TweakState` regardless of which schema was in the
+ * payload. Hosts that export v1 docs (custom `schemaId`) get a `schema-mismatch`
+ * error on import unless they have opted into the dual-accept path (see below).
+ *
+ * ## v2 format
+ *
+ * ```jsonc
+ * {
+ *   "$schema": "zudo-design-tokens/v2",
+ *   "exportedAt": "...",
+ *   "tabs": {
+ *     "spacing": {
+ *       "raw": { "--zfb-spacing-md": "1.25rem" }
+ *     },
+ *     "font": {
+ *       "raw":      { "--zfb-scale-base": "1rem" },
+ *       "semantic": { "--zfb-text-base": "var(--zfb-scale-base)" }
+ *     },
+ *     "color": {
+ *       "palette":  { "--zfb-palette-1": "#2d6cdf" },
+ *       "semantic": { "--zfb-color-primary": 1 }   // palette-index integer
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * Key decisions (issue #74):
+ * - cssVar-keyed leaves for portability across host id renames.
+ * - Tier-2 ref values are stored as the literal `var(--tier1-cssvar)` CSS
+ *   string (no discriminated union — keeps the format flat and hand-editable).
+ * - Color `semantic` values are palette-index integers (preserved from v1 so
+ *   the swatch UI can render the resolved color).
+ *
+ * ## Diff-only by default
+ *
+ * `serialize()` only emits tokens the user has actually changed relative to the
+ * provided `colorDefaults` (for the color block) and the manifest defaults (for
+ * spacing / typography / size). Pass `includeDefaults: true` to dump the full
+ * state instead. A tab key is omitted entirely when nothing in it differs.
+ *
+ * ## cssVar keys
+ *
+ * Spacing / typography / size overrides use CSS variable names
+ * (`"--zd-spacing-hgap-md"`) — the external schema — rather than the internal
+ * token id (`"hsp-md"`). This keeps the file human-readable and agnostic of our
+ * internal manifest. `deserialize()` maps them back; unknown CSS vars are
+ * reported via `unknownTokens` so the UI can surface them.
+ *
+ * Read-only manifest tokens are skipped in both directions.
+ */
+import type { ColorTweakState, TweakState } from '../state/tweak-state';
+/** The canonical v2 schema identifier emitted by serialize(). */
+export declare const SCHEMA_V2 = "zudo-design-tokens/v2";
+/** The legacy v1 schema identifier accepted by deserialize() for back-compat. */
+export declare const SCHEMA_V1 = "zudo-design-tokens/v1";
+/**
+ * Read the active design-token schema id at call time.
+ *
+ * Returns the host-configured schema id from `panelConfig.schemaId`. Used as
+ * the `$schema` value in legacy v1 exports (for hosts that have not upgraded
+ * their config to v2). The canonical v2 serialize path always emits `SCHEMA_V2`.
+ */
+export declare function getDesignTokenSchema(): string;
+/** External JSON value for a base-color / semantic-color entry (v1). */
+type ColorSlotValue = number | 'bg' | 'fg';
+export interface DesignTokenJsonColorBase {
+    bg?: number;
+    fg?: number;
+    cursor?: number;
+    /** Dashed keys mirror the external docs; they are quoted in source. */
+    'sel-bg'?: number;
+    'sel-fg'?: number;
+}
+export interface DesignTokenJsonColor {
+    palette?: string[];
+    base?: DesignTokenJsonColorBase;
+    /** Palette-index (or "bg"/"fg") mappings, same keys as `SEMANTIC_DEFAULTS`. */
+    semantic?: Record<string, ColorSlotValue>;
+    shikiTheme?: string;
+}
+/** External token map keyed by CSS var name. */
+export type DesignTokenJsonOverrides = Record<string, string>;
+/** Legacy v1 external JSON document shape. */
+export interface DesignTokenJson {
+    $schema: string;
+    exportedAt: string;
+    color?: DesignTokenJsonColor;
+    spacing?: DesignTokenJsonOverrides;
+    typography?: DesignTokenJsonOverrides;
+    size?: DesignTokenJsonOverrides;
+}
+/**
+ * A single tier's cssVar-keyed overrides.
+ *
+ * For token tiers (spacing/font/size raw): values are CSS length/value strings.
+ * For reference tiers (font semantic, etc.): values are `var(--tier1-cssvar)` strings.
+ * For color palette: values are hex color strings.
+ * For color semantic: values are palette-index integers.
+ */
+export type V2TierMap = Record<string, string | number>;
+/** Per-tab overrides in v2 format. Key is tier id. */
+export type V2TabEntry = Record<string, V2TierMap>;
+/** v2 external JSON document shape. */
+export interface DesignTokenJsonV2 {
+    $schema: string;
+    exportedAt: string;
+    tabs?: Record<string, V2TabEntry>;
+}
+export interface SerializeOptions {
+    /** When true, dump full state (all palette entries, all token manifest
+     *  defaults merged in). Default: diff-only. */
+    includeDefaults?: boolean;
+    /** Color baseline to diff against — typically the current scheme's initial
+     *  state. Required for meaningful color-diff output; callers that don't have
+     *  it available (e.g. tests without DOM) can omit it and we'll treat the
+     *  whole color block as changed. */
+    colorDefaults?: ColorTweakState;
+    /** Override the `exportedAt` stamp (test-only). */
+    now?: () => Date;
+}
+export interface DeserializeResult {
+    /** The reconstructed tweak state, with unknown-token values dropped. */
+    state: TweakState;
+    /** CSS var names present in the payload that don't match any known token. */
+    unknownTokens: string[];
+    /** Human-readable errors that did not prevent a state from being produced
+     *  (e.g. "semantic mapping dropped because value isn't a number"). */
+    warnings: string[];
+}
+export interface DeserializeOptions {
+    /** Color baseline used to fill in fields absent from the payload (diff-only
+     *  exports are missing most fields by design). Typically the current
+     *  scheme's initial state. */
+    colorDefaults?: ColorTweakState;
+}
+/**
+ * Thrown when the payload is not a v1 or v2 schema object. The error `.reason`
+ * helps the UI render a precise inline message.
+ *
+ * Note: `schema-mismatch` is thrown only when the schema is present but does
+ * not match either the v1 or v2 schema. v1 schemas are silently accepted and
+ * lifted to v2 internally.
+ */
+export declare class DesignTokenSchemaError extends Error {
+    readonly reason: 'not-object' | 'schema-missing' | 'schema-mismatch';
+    readonly actualSchema?: unknown;
+    constructor(reason: 'not-object' | 'schema-missing' | 'schema-mismatch', message: string, actualSchema?: unknown);
+}
+/**
+ * Produce the external JSON document (v2 format) for a given tweak state.
+ *
+ * By default this is diff-only against `opts.colorDefaults` + manifest
+ * defaults; set `opts.includeDefaults = true` to dump everything.
+ *
+ * The output `$schema` is always `SCHEMA_V2` ("zudo-design-tokens/v2").
+ */
+export declare function serialize(state: TweakState, opts?: SerializeOptions): DesignTokenJsonV2;
+/**
+ * Parse a design-token JSON document and lift it back into a tweak state.
+ *
+ * Accepted schema values:
+ *  - `SCHEMA_V2` ("zudo-design-tokens/v2") — parsed directly.
+ *  - `SCHEMA_V1` ("zudo-design-tokens/v1") — lifted to equivalent internal
+ *    state (one-way migration; v1 is no longer a valid OUTPUT format).
+ *  - Any other value (including custom host schema ids) — throws
+ *    `DesignTokenSchemaError` with reason `schema-mismatch`.
+ *
+ * Throws `DesignTokenSchemaError` on schema mismatch / non-object input. Any
+ * CSS var name that doesn't match a known manifest entry is collected into
+ * `unknownTokens` (the caller can surface these as a warning).
+ *
+ * Missing fields fall back to `opts.colorDefaults` (or, absent that, a
+ * minimal neutral default) so the result is always a valid `TweakState`.
+ */
+export declare function deserialize(input: unknown, opts?: DeserializeOptions): DeserializeResult;
+export {};
+//# sourceMappingURL=design-token-serde.d.ts.map

package/dist/utils/design-token-serde.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-token-serde.d.ts","sourceRoot":"","sources":["../../src/utils/design-token-serde.ts"],"names":[],"mappings":"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"}

package/dist/utils/structural-equal.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Structural deep-equality for plain JSON-shaped values.
+ *
+ * Used by `configurePanel`'s re-init guard so a
+ * second `configurePanel(parsedConfig)` call from Astro view-transition reruns
+ * — which produces a freshly-parsed object that is byte-for-byte identical to
+ * the previous one but referentially distinct — does not throw.
+ *
+ * Scope:
+ *  - Primitives compared with `Object.is` (so `NaN === NaN` and `+0 !== -0`,
+ *    matching the JSON serialization round-trip behaviour we care about).
+ *  - Arrays compared element-wise (length-first short-circuit).
+ *  - Plain objects compared key-set-then-value (own enumerable string keys).
+ *  - Functions, class instances, Maps, Sets, Symbols are NOT supported. The
+ *    panel config contract (PORTABLE-CONTRACT.md §1, §4.2) bans these from
+ *    `PanelConfig`, so a structural compare that bails on them is fine.
+ *
+ * Returns `false` for any value that is `null` vs. non-null or whose typeof
+ * differs (string vs. number etc.).
+ */
+export declare function structuralEqual(a: unknown, b: unknown): boolean;
+//# sourceMappingURL=structural-equal.d.ts.map

package/dist/utils/structural-equal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"structural-equal.d.ts","sourceRoot":"","sources":["../../src/utils/structural-equal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CA6B/D"}

package/dist/zdtp.css

@@ -0,0 +1 @@
+:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker){--tokentweak-color-fg: #b8b8b8;--tokentweak-color-bg: #181818;--tokentweak-color-muted: #888888;--tokentweak-color-surface: #1c1c1c;--tokentweak-color-accent: #d69a66;--tokentweak-color-accent-hover: #a7c0e3;--tokentweak-color-code-bg: #383838;--tokentweak-color-code-fg: #e0e0e0;--tokentweak-color-success: #93bb77;--tokentweak-color-danger: #da6871;--tokentweak-color-warning: #dfbb77;--tokentweak-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tokentweak-pad-2xs: .125rem;--tokentweak-pad-xs: .375rem;--tokentweak-pad-sm: .5rem;--tokentweak-pad-md: .75rem;--tokentweak-pad-lg: 1rem;--tokentweak-pad-xl: 1.5rem;--tokentweak-pad-2xl: 2rem;--tokentweak-gap-2xs: .4375rem;--tokentweak-gap-xs: .875rem;--tokentweak-gap-sm: 1.25rem;--tokentweak-gap-md: 1.5rem;--tokentweak-gap-lg: 1.75rem;--tokentweak-gap-xl: 2.5rem;--tokentweak-gap-2xl: 3.5rem;--tokentweak-text-micro: .75rem;--tokentweak-text-caption: .875rem;--tokentweak-text-small: 1rem;--tokentweak-text-body: 1.2rem;--tokentweak-text-subheading: 1.4rem;--tokentweak-text-heading: 3rem;--tokentweak-text-display: 3.75rem;--radius-tokentweak: .25rem}.tokenpanel-color-picker{position:fixed;width:320px;padding:var(--tokentweak-pad-md);background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs);z-index:70;color:var(--tokentweak-color-fg);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker[data-mode-shell=expanded]{width:520px;padding:var(--tokentweak-pad-lg);gap:var(--tokentweak-gap-xs)}.tokenpanel-color-picker-header{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-drag-handle{flex-shrink:0;cursor:grab;color:var(--tokentweak-color-muted);font-size:var(--tokentweak-text-caption);line-height:1;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-drag-handle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-drag-handle:active{cursor:grabbing}.tokenpanel-color-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker-mode-toggle{display:flex;align-items:center;gap:2px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:999px;padding:2px;flex-shrink:0}.tokenpanel-color-picker-mode-btn{border-radius:999px;padding-inline:var(--tokentweak-pad-xs);padding-block:var(--tokentweak-pad-2xs);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;white-space:nowrap}.tokenpanel-color-picker-mode-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn[aria-pressed=true]{background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-expand-btn{flex-shrink:0;color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);transition:color .12s ease}.tokenpanel-color-picker-expand-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-expand-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-top-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-preview{position:relative;flex-shrink:0;width:3rem;height:3rem;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);overflow:hidden}.tokenpanel-color-picker-preview-checkerboard{position:absolute;inset:0;background-image:repeating-conic-gradient(gray 0% 25%,silver 0% 50%);background-size:10px 10px}.tokenpanel-color-picker-preview-color{position:absolute;inset:0}.tokenpanel-color-picker-hex-input{flex:1;min-width:0;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption);background:var(--tokentweak-color-bg);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding:var(--tokentweak-pad-2xs) var(--tokentweak-pad-xs);transition:border-color .12s ease}.tokenpanel-color-picker-hex-input:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-hex-input:focus{border-color:var(--tokentweak-color-accent);outline:none}.tokenpanel-color-picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.tokenpanel-color-picker-grid>[role=row]{display:contents}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-grid{grid-template-columns:repeat(12,1fr)}.tokenpanel-color-picker-grid-cell{position:relative;aspect-ratio:1;border-radius:var(--radius-tokentweak);cursor:pointer;transition:box-shadow .12s ease}.tokenpanel-color-picker-grid-cell:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-color-picker-grid-cell[aria-selected=true]{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-color-picker-grid-cell:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid-cell[data-oog=true]:after{content:"";position:absolute;inset:1px;border:1px dashed oklch(98% 0 0 / .4);border-radius:var(--radius-tokentweak);pointer-events:none}.tokenpanel-color-picker-sliders{display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-label{flex-shrink:0;width:1.25rem;font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);-webkit-user-select:none;user-select:none}.tokenpanel-color-picker-slider{flex:1;position:relative;height:18px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-slider:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:var(--radius-tokentweak)}.tokenpanel-color-picker-slider-track{width:100%;height:18px;border-radius:9px;overflow:hidden;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-color-picker-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--tokentweak-color-fg);border:2px solid var(--tokentweak-color-bg);box-shadow:0 0 0 1px var(--tokentweak-color-muted);pointer-events:none}.tokenpanel-color-picker-slider-value{flex-shrink:0;width:3rem;text-align:right;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-readout{display:none;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);padding-top:var(--tokentweak-pad-2xs);border-top:1px solid var(--tokentweak-color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-readout{display:block}.tokenpanel-shell{z-index:50;display:flex;flex-direction:column;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);border-radius:var(--radius-tokentweak);box-shadow:0 4px 24px #00000040}.tokenpanel-resize-handle{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;-webkit-user-select:none;user-select:none;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 2px,var(--tokentweak-color-muted) 2px,var(--tokentweak-color-muted) 3px);-webkit-mask-image:linear-gradient(135deg,transparent 50%,#000 50%);mask-image:linear-gradient(135deg,transparent 50%,#000 50%);border-bottom-right-radius:var(--radius-tokentweak);transition:opacity .15s ease;opacity:.7}.tokenpanel-resize-handle:hover,.tokenpanel-resize-handle:focus-visible{opacity:1}.tokenpanel-header{display:flex;align-items:center;gap:var(--tokentweak-pad-md);padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-xs);border-bottom:1px solid var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-title{color:var(--tokentweak-color-fg);font-weight:600;font-size:.875rem;flex-shrink:0}.tokenpanel-action-link{color:var(--tokentweak-color-accent);font-size:.75rem;background:none;border:none;padding:0;cursor:pointer;transition:color .15s ease}.tokenpanel-action-link:hover{color:var(--tokentweak-color-accent-hover)}.tokenpanel-spacer{flex:1}.tokenpanel-close-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-close-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-tabbar{display:flex;align-items:center;border-bottom:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-xl);flex-shrink:0;gap:var(--tokentweak-pad-md)}.tokenpanel-tabbar-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.tokenpanel-tab-button{border:none;background:none;padding-inline:var(--tokentweak-pad-md);padding-block:var(--tokentweak-gap-xs);font-size:.875rem;cursor:pointer;border-bottom:2px solid transparent;color:var(--tokentweak-color-muted);transition:color .15s ease,border-color .15s ease}.tokenpanel-tab-button:hover,.tokenpanel-tab-button:focus-visible{color:var(--tokentweak-color-fg);text-decoration:underline}.tokenpanel-tab-button.is-active{color:var(--tokentweak-color-fg);border-bottom-color:var(--tokentweak-color-accent);text-decoration:none}.tokenpanel-density{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-shrink:0}.tokenpanel-density-label{color:var(--tokentweak-color-muted);font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;cursor:pointer}.tokenpanel-density-slider{width:5rem;accent-color:var(--tokentweak-color-accent);cursor:pointer}.tokenpanel-body{flex:1;min-height:0;overflow-y:auto;padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-sm)}.tokenpanel-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:12rem;padding-block:var(--tokentweak-gap-md);padding-inline:var(--tokentweak-pad-xl)}.tokenpanel-empty-state-text{color:var(--tokentweak-color-muted, #a8a8a8);font-size:.8125rem;line-height:1.5;max-width:32rem;margin:0}.tokenpanel-empty-state-text code{font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:.8125rem;color:var(--tokentweak-color-fg)}.tokenpanel-empty-state-link{color:var(--tokentweak-color-accent);text-decoration:underline;transition:color .15s ease}.tokenpanel-empty-state-link:hover,.tokenpanel-empty-state-link:focus-visible{color:var(--tokentweak-color-accent-hover)}.tokenpanel-tab-content{display:flex;flex-direction:column;gap:var(--tokentweak-gap-sm)}.tokenpanel-tab-actions{display:flex;align-items:center;gap:var(--tokentweak-pad-md)}.tokenpanel-tab-section{position:relative;flex-shrink:0;border:1px solid var(--tokentweak-color-muted);border-radius:.5rem;padding:18px 14px 14px}.tokenpanel-tab-section-heading{position:absolute;top:-.625rem;left:12px;background:var(--tokentweak-color-surface);padding:0 8px;margin:0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:.8125rem;line-height:1.25rem;text-transform:none;letter-spacing:normal}.tokenpanel-tab-section-heading--color{font-size:.875rem}.tokenpanel-tab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 18rem),1fr));gap:var(--tokentweak-gap-xs)}.tokenpanel-color-preset-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:2px;font-size:.75rem;border-radius:var(--radius-tokentweak);max-width:14rem;cursor:pointer;transition:border-color .15s ease}.tokenpanel-color-preset-select:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-palette-grid,.tokenpanel-color-palette-grid--secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 3.5rem),1fr));gap:var(--tokentweak-pad-sm)}.tokenpanel-color-base-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 11rem),1fr));gap:6px}.tokenpanel-color-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%}.tokenpanel-color-swatch-button{display:block;border:1px solid var(--tokentweak-color-muted);cursor:pointer;width:3.5rem;height:3.5rem;border-radius:var(--radius-tokentweak);background:none;padding:0;transition:border-color .15s ease}.tokenpanel-color-swatch-button:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-swatch-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-swatch-label-row{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.tokenpanel-color-swatch-label{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:.6875rem;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tooltip{position:fixed;z-index:9999;pointer-events:none;background:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:4px;padding:4px 8px;font-family:var(--tokentweak-font-mono);font-size:11px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;opacity:0;transform:translateY(2px);transition:opacity 90ms ease,transform 90ms ease}.tokenpanel-tooltip[data-show=true]{opacity:1;transform:translateY(0)}.tokenpanel-popover{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:12px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-selector{position:relative;width:100%;display:flex;align-items:center;gap:6px}.tokenpanel-palette-trigger{display:flex;align-items:center;gap:4px;flex:1;min-width:0;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding-inline:6px;padding-block:4px;font-size:.75rem;border-radius:var(--radius-tokentweak);cursor:pointer;transition:border-color .15s ease}.tokenpanel-palette-trigger:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-palette-trigger:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-trigger-label{flex:1;min-width:0;text-align:left;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-palette-trigger-color{flex-shrink:0;border:1px solid var(--tokentweak-color-muted);width:14px;height:14px;border-radius:2px}.tokenpanel-palette-trigger-value{flex-shrink:0;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);width:2.5em}.tokenpanel-palette-trigger-icon{color:var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-palette-options{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:10px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-options-extras{display:flex;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-option{display:flex;align-items:center;gap:6px;padding-inline:8px;padding-block:4px;border-radius:4px;font-size:1rem;background:none;border:none;cursor:pointer;transition:background-color .15s ease}.tokenpanel-palette-extra-option:hover{background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-palette-extra-option.is-selected{background-color:rgb(from var(--tokentweak-color-accent) r g b / .2)}.tokenpanel-palette-extra-color{width:1.75rem;height:1.75rem;border-radius:3px;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-label{color:var(--tokentweak-color-fg)}.tokenpanel-palette-options-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.tokenpanel-palette-option-button{width:3rem;height:3rem;border-radius:3px;border:1px solid var(--tokentweak-color-muted);cursor:pointer;padding:0;transition:box-shadow .15s ease}.tokenpanel-palette-option-button:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-palette-option-button.is-selected{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-row{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row--stacked{display:flex;flex-direction:column;gap:2px}.tokenpanel-row--column{display:flex;flex-direction:column;gap:4px}.tokenpanel-row-head{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row-label{color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);flex:1;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-row-input-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-row-number-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);text-align:right;font-size:.75rem;width:5rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-number-input:disabled{opacity:.6}.tokenpanel-row-unit{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:.75rem;width:2rem}.tokenpanel-row-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:.75rem;width:7rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-select:disabled{opacity:.6}.tokenpanel-row-text-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:.75rem;flex:1;min-width:0;border-radius:var(--radius-tokentweak)}.tokenpanel-row-text-input:disabled{opacity:.6}.tokenpanel-pill-toggle{display:flex;align-items:center;gap:var(--tokentweak-pad-xs);flex-shrink:0;cursor:pointer}.tokenpanel-pill-toggle-checkbox{accent-color:var(--tokentweak-color-accent)}.tokenpanel-pill-toggle-text{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:.75rem}[data-design-token-panel-modal]{margin-inline:auto;width:100%;max-width:46rem;max-height:80vh;overflow-y:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);padding:var(--tokentweak-pad-xl);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}[data-design-token-panel-modal]::backdrop{background-color:rgb(from var(--tokentweak-color-bg) r g b / .8)}[data-design-token-panel-modal] [class*=__header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tokentweak-pad-md);margin-bottom:var(--tokentweak-gap-sm)}[data-design-token-panel-modal] [class*=__title]{font-size:var(--tokentweak-text-subheading);font-weight:700;color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__hint]{font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-muted);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__section-heading]{font-size:var(--tokentweak-text-small);font-weight:700;color:var(--tokentweak-color-fg);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__list]:not([class*=__list-item]){overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__list-item]{font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__actions]{display:flex;align-items:center;gap:var(--tokentweak-pad-md);margin-top:var(--tokentweak-gap-md)}[data-design-token-panel-modal] [class*=__toggle]{display:inline-flex;align-items:center;gap:var(--tokentweak-pad-xs);font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-fg);cursor:pointer;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__textarea]{width:100%;min-height:12rem;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-small);resize:vertical;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__json]{overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);white-space:pre;font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__status]{font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__status--info]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__status--error]{color:var(--tokentweak-color-danger)}[data-design-token-panel-modal] [class*=__status--warning]{color:var(--tokentweak-color-warning)}[data-design-token-panel-modal] [class*=__status--success]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__applying]{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-muted);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small)}[data-design-token-panel-modal] [class*=__spinner]{display:inline-block;width:1rem;height:1rem;border:2px solid var(--tokentweak-color-muted);border-top-color:var(--tokentweak-color-fg);border-radius:50%;animation:design-token-panel-modal-spin .75s linear infinite}@keyframes design-token-panel-modal-spin{to{transform:rotate(360deg)}}[data-design-token-panel-modal] [class*=__revert-hint]{font-size:var(--tokentweak-text-small);font-style:italic;color:var(--tokentweak-color-muted);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-lg);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}[data-design-token-panel-modal] [class*=__button]:hover,[data-design-token-panel-modal] [class*=__button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__button]:disabled{cursor:not-allowed;opacity:.5}[data-design-token-panel-modal] [class*=__button--primary]{border-color:var(--tokentweak-color-accent);background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__button--primary]:hover,[data-design-token-panel-modal] [class*=__button--primary]:focus-visible{border-color:var(--tokentweak-color-accent-hover);background-color:var(--tokentweak-color-accent-hover);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__close-button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease}[data-design-token-panel-modal] [class*=__close-button]:hover,[data-design-token-panel-modal] [class*=__close-button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}.tokenpanel-tier-ref-selector{position:relative;flex:1;min-width:0}.tokenpanel-tier-ref-trigger{display:flex;align-items:center;gap:6px;width:100%;background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding-inline:var(--tokentweak-pad-sm);padding-block:4px;font-family:var(--tokentweak-font-mono);font-size:.75rem;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.tokenpanel-tier-ref-trigger:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-tier-ref-trigger[aria-expanded=true]{border-color:var(--tokentweak-color-accent);box-shadow:0 0 0 2px rgb(from var(--tokentweak-color-accent) r g b / .16)}.tokenpanel-tier-ref-trigger-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tier-ref-trigger-arrow{color:var(--tokentweak-color-muted);font-size:9px;flex-shrink:0}.tokenpanel-tier-ref-listbox{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;margin:0;padding:4px;list-style:none;background-color:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);box-shadow:0 12px 28px #00000080;outline:none}.tokenpanel-tier-ref-listbox:before{content:"";position:absolute;top:-7px;left:22px;width:12px;height:12px;background-color:var(--tokentweak-color-surface);border-left:1px solid var(--tokentweak-color-muted);border-top:1px solid var(--tokentweak-color-muted);transform:rotate(45deg)}.tokenpanel-tier-ref-option{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;padding:5px 8px;border-radius:3px;cursor:pointer;font-family:var(--tokentweak-font-mono);font-size:.8125rem;color:var(--tokentweak-color-fg);list-style:none}.tokenpanel-tier-ref-option:before{content:"✓";font-size:11px;color:transparent;line-height:1}.tokenpanel-tier-ref-option[aria-selected=true]:before{color:var(--tokentweak-color-accent)}.tokenpanel-tier-ref-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tier-ref-option-preview{font-size:.6875rem;color:var(--tokentweak-color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:10rem}.tokenpanel-tier-ref-option--focused{background-color:rgb(from var(--tokentweak-color-accent) r g b / .16)}.tokenpanel-tier-ref-option--literal{font-style:italic;color:var(--tokentweak-color-muted);border-top:1px solid var(--tokentweak-color-muted);margin-top:4px;padding-top:8px}.tokenpanel-row-label-sub{display:block;font-size:var(--tokentweak-text-micro, .6875rem);color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);line-height:1.2}.tokenpanel-tab-section [role=heading]{display:block}.tokenpanel-code{font-family:var(--tokentweak-font-mono);font-size:inherit;background:none;color:inherit;padding:0;border:none;border-radius:0;white-space:pre-wrap}[data-design-token-panel-modal] [class*=__button][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}[data-design-token-panel-modal] [role=button]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-action-link:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-close-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-tier-ref-trigger:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-tier-ref-listbox[role=listbox]{list-style:none}.tokenpanel-tab-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-overlay{margin:0;padding:0;border:0;background:transparent;display:block}.tokenpanel-highlight-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:var(--tokentweak-color-muted);cursor:pointer;vertical-align:middle;border-radius:2px;transition:background-color .15s ease,color .15s ease}.tokenpanel-highlight-toggle:hover{color:var(--tokentweak-color-fg);background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-highlight-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-toggle.is-active{opacity:1}:where(.tokenpanel-shell) svg{fill:currentColor;pointer-events:none;display:inline-block;overflow:visible}:where(.tokenpanel-shell) .tokenpanel-highlight-toggle svg{fill:none;stroke:currentColor}.tokenpanel-highlight-settings-popover{width:370px;background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:6px;box-shadow:0 8px 32px #00000080}.tokenpanel-highlight-settings-header{padding:10px 16px;border-bottom:1px solid var(--tokentweak-color-muted);font-weight:600;font-size:.8125rem;color:var(--tokentweak-color-fg);display:flex;align-items:center;justify-content:space-between;gap:12px}.tokenpanel-highlight-settings-header-label{flex:1;min-width:0}.tokenpanel-highlight-settings-outline-control{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-highlight-settings-outline-input{width:44px;background:#222;border:1px solid var(--tokentweak-color-muted);border-radius:3px;color:var(--tokentweak-color-fg);font-size:12px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:right}.tokenpanel-highlight-settings-outline-px{color:var(--tokentweak-color-muted);font-size:12px;font-weight:400}.tokenpanel-highlight-settings-list{padding:4px 0;display:grid;grid-template-columns:1fr 1fr}.tokenpanel-highlight-settings-row{display:grid;grid-template-columns:22px 32px 1fr;gap:8px;align-items:center;padding:8px 12px}.tokenpanel-highlight-settings-row:hover{background:#ffffff08}.tokenpanel-highlight-settings-num{color:var(--tokentweak-color-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}.tokenpanel-highlight-settings-ring{width:28px;height:28px;border-radius:3px;background:transparent;box-sizing:border-box;cursor:pointer;flex-shrink:0}.tokenpanel-highlight-settings-ring:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-highlight-settings-name{font-family:var(--tokentweak-font-mono);font-size:12px;color:var(--tokentweak-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-highlight-settings-name.is-active{color:var(--tokentweak-color-fg)}.tokenpanel-highlight-settings-footer{padding:12px 16px;border-top:1px solid var(--tokentweak-color-muted);display:flex;justify-content:flex-end;gap:var(--tokentweak-pad-sm)}.tokenpanel-highlight-settings-reset-btn{padding:6px 12px;background:#333;border:1px solid var(--tokentweak-color-muted);border-radius:3px;cursor:pointer;font-size:12px;color:var(--tokentweak-color-fg);transition:background .15s ease}.tokenpanel-highlight-settings-reset-btn:hover{background:#404040}.tokenpanel-highlight-settings-reset-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:3px}.tokenpanel-gear-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-gear-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-gear-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@takazudo/zdtp",
+  "version": "0.1.0-next.0",
+  "description": "Dynamic design-token tweak panel — host-config-driven, framework-agnostic Preact UI.",
+  "private": false,
+  "license": "MIT",
+  "type": "module",
+  "author": "Takeshi Takatsudo <takazudo@gmail.com> (https://github.com/Takazudo)",
+  "keywords": [
+    "design-tokens",
+    "design-token",
+    "design-system",
+    "theming",
+    "tweak-panel",
+    "preact",
+    "react",
+    "css-variables",
+    "framework-agnostic"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Takazudo/zudo-design-token-panel.git",
+    "directory": "packages/zdtp"
+  },
+  "homepage": "https://takazudomodular.com/pj/zudo-design-token-panel/",
+  "bugs": {
+    "url": "https://github.com/Takazudo/zudo-design-token-panel/issues"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "zdtp-server": "./dist/bin/server.js"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "./dist/astro/host-adapter.js",
+    "**/host-adapter.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./astro": {
+      "types": "./dist/astro/index.d.ts",
+      "import": "./dist/astro/index.js"
+    },
+    "./astro/host-adapter": {
+      "types": "./dist/astro/host-adapter.d.ts",
+      "import": "./dist/astro/host-adapter.js"
+    },
+    "./astro/DesignTokenPanelHost.astro": "./dist/astro/DesignTokenPanelHost.astro",
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "import": "./dist/server/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js"
+    },
+    "./styles": "./dist/zdtp.css",
+    "./styles.css": "./dist/zdtp.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22.0.0",
+    "pnpm": ">=10.0.0"
+  },
+  "peerDependencies": {
+    "preact": "^10.29.1"
+  },
+  "dependencies": {
+    "culori": "^4.0.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@types/culori": "^4.0.1",
+    "@types/node": "^22.0.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "jsdom": "^25.0.0",
+    "playwright": "^1.60.0",
+    "preact": "^10.29.1",
+    "typescript": "^5.6.0",
+    "vite": "^7.3.2",
+    "vitest": "^4.1.4"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json && node scripts/copy-astro-assets.mjs && chmod +x dist/bin/server.js",
+    "// prepublishOnly": "build-only gate. The full test suite needs Playwright Chromium (browser tests) and is run upstream in ci.yml / pr-checks.yml on every PR, not at publish time.",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}