@takazudo/zdtp 0.3.2 → 0.4.0

package/dist/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAkG/B;;;;;;;;;;;GAWG;AACH,UAAU,0BAA0B;IAClC,cAAc,CAAC,EAAE,WAAW,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,cAAc,EAAE,kBAAkB,GACnC,GAAE,0BAA+B,gCAouBjC;AAED,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../src/panel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,uBAAuB,CAAC;AAkG/B;;;;;;;;;;;GAWG;AACH,UAAU,0BAA0B;IAClC,cAAc,CAAC,EAAE,WAAW,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,cAAc,EAAE,kBAAkB,GACnC,GAAE,0BAA+B,gCA0vBjC;AAED,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/tabs/_generic-item-editor.d.ts

@@ -6,6 +6,9 @@
  * For pill items (item.pill is set), a pill toggle is rendered above the
  * number input row.
  *
+ * For color items: native <input type="color"> by default; with format:'oklch' →
+ * OKLCH picker emitting oklch() (rendering wired in later sub-tasks).
+ *
  * This is an internal helper; not exported from the package index.
  */
 import type { TierItem } from '../tokens/tier-model';

package/dist/tabs/_generic-item-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_generic-item-editor.d.ts","sourceRoot":"","sources":["../../src/tabs/_generic-item-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAC;AAIpE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,iBAAS,sBAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,sBAAsB,uCA6LhF;;AAED,wBAA4C"}
+{"version":3,"file":"_generic-item-editor.d.ts","sourceRoot":"","sources":["../../src/tabs/_generic-item-editor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAC;AAKpE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,iBAAS,sBAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,sBAAsB,uCAgNhF;;AAED,wBAA4C"}

package/dist/tabs/generic-tab.d.ts

@@ -9,7 +9,7 @@
  *   length / number → number input with unit suffix (numeric range)
  *   select          → native <select>
  *   text            → free-form text input
- *   color           → <input type="color"> (native OS color picker)
+ *   color           → native <input type="color"> by default; with format:'oklch' → OKLCH picker emitting oklch()
  *
  * For items in a tier with `referencesTier`, TierRefSelector is rendered
  * instead, so the user can either pick a tier-1 item id (emitted as

package/dist/tabs/generic-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"generic-tab.d.ts","sourceRoot":"","sources":["../../src/tabs/generic-tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAuC,MAAM,sBAAsB,CAAC;AAC3F,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,wBAAwB,CAAC;AAmPjF,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,GAAG,EAAE,SAAS,CAAC;IACf;;;;;;OAMG;IACH,SAAS,EAAE,YAAY,CAAC;IACxB,yDAAyD;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAMD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,gCAyB/E"}
+{"version":3,"file":"generic-tab.d.ts","sourceRoot":"","sources":["../../src/tabs/generic-tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAuC,MAAM,sBAAsB,CAAC;AAC3F,OAAO,EAAE,KAAK,YAAY,EAAwB,MAAM,wBAAwB,CAAC;AAuQjF,MAAM,WAAW,eAAe;IAC9B,kEAAkE;IAClE,GAAG,EAAE,SAAS,CAAC;IACf;;;;;;OAMG;IACH,SAAS,EAAE,YAAY,CAAC;IACxB,yDAAyD;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAMD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,gCAyB/E"}

package/dist/tabs/palette/palette-check-view.d.ts

@@ -0,0 +1,22 @@
+/**
+ * PaletteCheckView — Check mode Left/Right contrast checker (#394).
+ *
+ * Left column: full palette as selectable base rows (div[role="button"]).
+ * Right column: every palette color annotated against the selected base:
+ *   - Live "Aa" sample (candidate foreground on base background)
+ *   - WCAG ratio (contrastRatio)
+ *   - Fail/AA/AAA chip using fixed semantic colors (not theme tokens)
+ *
+ * WCAG contrast is symmetric; ratio is computed once per candidate pair.
+ *
+ * Toggles: grouped↔flat listing; normal/large text thresholds.
+ */
+import type { TabConfig } from '../../tokens/tier-model';
+import type { TabOverrides } from '../../apply/tier-resolver';
+export interface PaletteCheckViewProps {
+    tab: TabConfig;
+    overrides: TabOverrides;
+    onChange: (tierId: string, itemId: string, next: string) => void;
+}
+export default function PaletteCheckView({ tab, overrides }: PaletteCheckViewProps): import("preact").JSX.Element;
+//# sourceMappingURL=palette-check-view.d.ts.map

package/dist/tabs/palette/palette-check-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-check-view.d.ts","sourceRoot":"","sources":["../../../src/tabs/palette/palette-check-view.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAkB9D,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,SAAS,CAAC;IACf,SAAS,EAAE,YAAY,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AA6MD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,qBAAqB,gCAwKjF"}

package/dist/tabs/palette/palette-edit-view.d.ts

@@ -0,0 +1,57 @@
+/**
+ * PaletteEditView — Edit mode: grouped grid navigator + per-group OKLCH curve
+ * editor + readout + batched persistence (#395).
+ *
+ * Layout (matches the agreed design sketch):
+ *   - One section per tier (group). The tier `label` is the ONE section heading
+ *     (div[role="heading" aria-level={3}] — one-tier-one-heading policy).
+ *   - A row of step swatches; clicking a swatch selects that group + step.
+ *   - The active group reveals its <PaletteChart> below the swatches, plus a
+ *     channel toggle (L/C/H) and a <PaletteReadout> for the selected step.
+ *
+ * Two write paths:
+ *   1. Direct edit — clicking the selected swatch opens a <ColorField> with
+ *      valueFormat='oklch'; its onChange writes ONE step via `onChange`
+ *      (one change → one persist is fine for a single field).
+ *   2. Graph drag — handled by the BATCHED COMMIT path below.
+ *
+ * ── Batched commit (LOAD-BEARING) ────────────────────────────────────────────
+ * A graph drag fires PaletteChart's onChangeStart → many onChange → onChangeEnd.
+ * Calling the per-item `onChange` (→ persistTab) on every frame would rewrite the
+ * whole tab and re-serialise localStorage on EVERY pointermove. Instead:
+ *   • onChangeStart  — begin a transient session (clear the accumulator).
+ *   • onChange       — accumulate the changed channel into LOCAL state
+ *                      (`transient`) and repaint live; do NOT persist.
+ *   • onChangeEnd    — flush the accumulated steps as ONE `onCommitBatch` call
+ *                      ({ [itemId]: oklchString } for every changed step), then
+ *                      clear the accumulator.
+ * The single `onCommitBatch` lands as exactly one `persistTab('palette', …)` in
+ * the shell — one DOM apply + one savePersistedState per gesture, not per frame.
+ *
+ * ── Persist raw OKLCH — never clamp ──────────────────────────────────────────
+ * Out-of-gamut steps are PERSISTED with their raw OKLCH value. Gamut clamping
+ * happens ONLY at the hex-conversion boundary (`oklchaToHex`) for swatch fills
+ * and the readout — the stored token keeps the exact authored color so a later
+ * wide-gamut display (or a different clamp strategy) loses nothing.
+ */
+import type { TabConfig } from '../../tokens/tier-model';
+import type { TabOverrides } from '../../apply/tier-resolver';
+import './palette-edit-view.css';
+export interface PaletteEditViewProps {
+    tab: TabConfig;
+    overrides: TabOverrides;
+    /**
+     * Single-item write (direct ColorField edit). One change → one persist.
+     */
+    onChange: (tierId: string, itemId: string, next: string) => void;
+    /**
+     * Batched write for a whole drag gesture. Fires ONCE on pointer-up with the
+     * full `{ [itemId]: oklchString }` patch for every changed step in `tierId`.
+     * The shell merges the whole patch into a single `persistTab` call. Optional
+     * so the stub/tests that don't supply it still type-check (falls back to
+     * per-item `onChange`).
+     */
+    onCommitBatch?: (tierId: string, patch: Record<string, string>) => void;
+}
+export default function PaletteEditView({ tab, overrides, onChange, onCommitBatch }: PaletteEditViewProps): import("preact").JSX.Element;
+//# sourceMappingURL=palette-edit-view.d.ts.map

package/dist/tabs/palette/palette-edit-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-edit-view.d.ts","sourceRoot":"","sources":["../../../src/tabs/palette/palette-edit-view.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAa9D,OAAO,yBAAyB,CAAC;AAMjC,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,SAAS,CAAC;IACf,SAAS,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACzE;AAsHD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,oBAAoB,gCAuLxG"}

package/dist/tabs/palette/palette-readout.d.ts

@@ -0,0 +1,23 @@
+/**
+ * PaletteReadout — the per-step color readout shown beneath the active group's
+ * curve editor (#395).
+ *
+ * Shows the selected step's token name plus its value in three notations:
+ * OKLCH (the raw stored value, even when out of gamut), Hex, and RGB. Hex/RGB
+ * are derived through `oklchaToHex`, which clamps at the sRGB boundary — so the
+ * displayed hex/rgb may differ from the raw OKLCH when the step is out of gamut.
+ *
+ * DOM-hygiene: no banned semantic tags. Token/value rows are plain <div>s; the
+ * monospace styling is carried by the companion CSS class, not a <code>/<pre>.
+ */
+import type { Oklcha } from '../../utils/color-oklch';
+export interface PaletteReadoutProps {
+    /** The selected step's raw OKLCH value (never gamut-clamped). */
+    oklcha: Oklcha;
+    /** CSS custom-property name of the selected step (e.g. `--palette-gray-3`). */
+    cssVar: string;
+    /** True when the raw OKLCH value falls outside the sRGB gamut. */
+    outOfGamut: boolean;
+}
+export default function PaletteReadout({ oklcha, cssVar, outOfGamut }: PaletteReadoutProps): import("preact").JSX.Element;
+//# sourceMappingURL=palette-readout.d.ts.map

package/dist/tabs/palette/palette-readout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-readout.d.ts","sourceRoot":"","sources":["../../../src/tabs/palette/palette-readout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,UAAU,EAAE,OAAO,CAAC;CACrB;AAsBD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,mBAAmB,gCA0CzF"}

package/dist/tabs/palette/palette-tab.d.ts

@@ -0,0 +1,37 @@
+/**
+ * PaletteTab — thin shell for the palette tab.
+ *
+ * Data-model convention:
+ *   - Each group = a TierConfig (its label = group heading).
+ *   - Each step = a TierItem with:
+ *       cssVar: '--palette-{group}-{n}'
+ *       type: { kind: 'color', format: 'oklch' }
+ *   - Tab MUST omit `colorExtras` so resolveColorClusterFromTab is not invoked;
+ *     multiple kind:'color' tiers are safe in one tab only when colorExtras is absent.
+ *
+ * Shared helpers:
+ *   - flattenPaletteTiers(tab): returns all items across all tiers as flat array
+ *   - groupPaletteTiers(tab): returns tiers in declaration order (alias for tab.tiers)
+ */
+import type { TabConfig, TierConfig, TierItem } from '../../tokens/tier-model';
+import type { TabOverrides } from '../../apply/tier-resolver';
+/** Returns tiers in declaration order — the canonical group ordering. */
+export declare function groupPaletteTiers(tab: TabConfig): readonly TierConfig[];
+/** Returns all items across all tiers flattened into a single array. */
+export declare function flattenPaletteTiers(tab: TabConfig): TierItem[];
+export interface PaletteTabProps {
+    tab: TabConfig;
+    overrides: TabOverrides;
+    /** Single-item write (mode-toggle direct edits + Check-mode handoff). */
+    onChange: (tierId: string, itemId: string, next: string) => void;
+    /**
+     * Batched write for a whole Edit-mode graph drag. Fires ONCE on pointer-up
+     * with `{ [itemId]: oklchString }` for every changed step in `tierId`. The
+     * panel folds the whole patch into a single `persistTab('palette', …)` so a
+     * drag costs one DOM apply + one localStorage write, not one per frame.
+     * Optional — Check mode and older callers don't supply it.
+     */
+    onCommitBatch?: (tierId: string, patch: Record<string, string>) => void;
+}
+export default function PaletteTab({ tab, overrides, onChange, onCommitBatch }: PaletteTabProps): import("preact").JSX.Element;
+//# sourceMappingURL=palette-tab.d.ts.map

package/dist/tabs/palette/palette-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-tab.d.ts","sourceRoot":"","sources":["../../../src/tabs/palette/palette-tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAQ9D,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,SAAS,GAAG,SAAS,UAAU,EAAE,CAEvE;AAED,wEAAwE;AACxE,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,SAAS,GAAG,QAAQ,EAAE,CAQ9D;AAYD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,SAAS,CAAC;IACf,SAAS,EAAE,YAAY,CAAC;IACxB,yEAAyE;IACzE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACzE;AAMD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,eAAe,gCAyE9F"}

package/dist/tokens/tier-model.d.ts

@@ -18,8 +18,15 @@ export type TierValueKind = {
     kind: 'content';
 } | {
     kind: 'mask-image';
-} | {
+}
+/**
+ * Omitting `format` (or passing `'hex'`) uses the native `<input type="color">`
+ * (today's behavior, emits a hex string). Passing `'oklch'` opts into the OKLCH
+ * picker that emits an `oklch(...)` string (rendering wired in later sub-tasks).
+ */
+ | {
     kind: 'color';
+    format?: 'hex' | 'oklch';
 };
 export declare function isLengthKind(v: TierValueKind): v is Extract<TierValueKind, {
     kind: 'length';

package/dist/tokens/tier-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tier-model.d.ts","sourceRoot":"","sources":["../../src/tokens/tier-model.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tier-model.d.ts","sourceRoot":"","sources":["../../src/tokens/tier-model.ts"],"names":[],"mappings":"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"}

package/dist/utils/color-oklch.d.ts

@@ -48,4 +48,21 @@ export declare function hslaToOklcha(h: Hsla): Oklcha;
 export declare function clampToSrgbGamut(o: Oklcha): Oklcha;
 /** Return true if the Oklcha value is within the sRGB gamut. */
 export declare function isInSrgbGamut(o: Oklcha): boolean;
+/**
+ * Parse a CSS Color 4 `oklch()` string into the panel's `Oklcha` shape.
+ *
+ * Supported syntax:
+ *   oklch(L C H)
+ *   oklch(L C H / A)
+ *
+ * L: number (0–1) or percentage (0%–100% → 0–1), stored as 0–100 internally.
+ * C: number in culori-native units, OR percentage where 100% = 0.4
+ *    (CSS Color 4 reference range). Wide-gamut chroma is NOT clamped.
+ * H: number (degrees) or angle with deg/rad/grad/turn unit; normalized to [0,360).
+ * A: number (0–1) or percentage (0%–100%); stored as 0–100 internally.
+ * `none` per channel is treated as 0.
+ *
+ * Returns null for non-oklch or unparseable input.
+ */
+export declare function cssToOklcha(css: string): Oklcha | null;
 //# sourceMappingURL=color-oklch.d.ts.map

package/dist/utils/color-oklch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-oklch.d.ts","sourceRoot":"","sources":["../../src/utils/color-oklch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAiBH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASzC,YAAY,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,iEAAiE;AACjE,MAAM,WAAW,MAAM;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,0DAA0D;AAC1D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAkDrC;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAS7C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAiB/C;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,MAAM,EACT,IAAI,CAAC,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,MAAM,CAQR;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAU5C;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAW5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAclD;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAIhD"}
+{"version":3,"file":"color-oklch.d.ts","sourceRoot":"","sources":["../../src/utils/color-oklch.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAiBH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AASzC,YAAY,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,iEAAiE;AACjE,MAAM,WAAW,MAAM;IACrB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,0DAA0D;AAC1D,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAkDrC;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAS7C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAiB/C;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CACzB,CAAC,EAAE,MAAM,EACT,IAAI,CAAC,EAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,GAC/B,MAAM,CAQR;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAU5C;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,CAW5C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAclD;AAED,gEAAgE;AAChE,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAIhD;AAgCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA2EtD"}

package/dist/utils/palette-curve.d.ts

@@ -0,0 +1,62 @@
+/**
+ * OKLCH channel-curve math for the palette generator chart.
+ *
+ * Coordinate conventions:
+ *   X axis — normalized band position in [0, 1]; a node at index i is centered
+ *             at (i + 0.5) / count via `stepX`.
+ *   Y axis — normalized [0, 1] where 0 = top (maximum channel value) and
+ *             1 = bottom (minimum channel value = 0); consistent with SVG/canvas
+ *             coordinate systems where Y increases downward.
+ */
+/** Maximum value for each OKLCH channel (defines the Y=0 ceiling). */
+export declare const CHANNEL_MAX: {
+    readonly l: 100;
+    readonly c: 0.37;
+    readonly h: 360;
+};
+export type Channel = 'l' | 'c' | 'h';
+/**
+ * Return the centered X coordinate for node at index `i` across `count` bands.
+ * X is in [0, 1]; each band has width 1/count and is centered at (i+0.5)/count.
+ */
+export declare function stepX(i: number, count: number): number;
+/**
+ * Map a channel value to a normalized Y coordinate in [0, 1].
+ *
+ * Y=0 corresponds to the channel maximum (top of axis).
+ * Y=1 corresponds to zero (bottom of axis).
+ *
+ * H note: 0° and 360° are the same hue, but we clamp (not wrap) to keep the
+ * polyline continuous — matching the pgen chart convention.
+ */
+export declare function valueToY(value: number, channel: Channel): number;
+/**
+ * Map a normalized Y coordinate in [0, 1] back to a channel value.
+ *
+ * Inverse of `valueToY`. Y is clamped to [0, 1] before conversion.
+ *
+ * H note: 0° ≡ 360° (top and bottom of the Y axis are the same hue) — this is
+ * a deliberate clamp-not-wrap decision to avoid polyline discontinuity,
+ * matching pgen.
+ */
+export declare function yToValue(y: number, channel: Channel): number;
+/**
+ * Largest hue (degrees) that survives a CSS `oklch()` round-trip.
+ *
+ * The chart axis spans the full [0, 360] (CHANNEL_MAX.h), so a node dragged to
+ * the very top of the hue axis (or the End key) yields h=360. But CSS hue angles
+ * normalize into [0, 360) when an `oklch(… 360)` string is parsed back
+ * (`cssToOklcha` → `((deg % 360) + 360) % 360`), so a persisted 360 reads back as
+ * 0 and the node teleports to the bottom on reload. Committed hues are therefore
+ * capped at this value: just below 360, and chosen so `oklchaToCss`'s 2-decimal
+ * formatting (`toFixed(2)`) preserves it rather than rounding back up to 360.00.
+ */
+export declare const HUE_PERSIST_MAX = 359.99;
+/**
+ * Cap a hue for persistence so an `oklch()` round-trip stays stable.
+ * Hues at/above 360° collapse to {@link HUE_PERSIST_MAX}; everything else is
+ * returned unchanged. Apply this only at the commit boundary — the live axis
+ * math (`valueToY`/`yToValue`) intentionally keeps the full [0, 360] range.
+ */
+export declare function clampHueForPersist(h: number): number;
+//# sourceMappingURL=palette-curve.d.ts.map

package/dist/utils/palette-curve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-curve.d.ts","sourceRoot":"","sources":["../../src/utils/palette-curve.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,sEAAsE;AACtE,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtC;;;GAGG;AACH,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAIhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAI5D;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,SAAS,CAAC;AAEtC;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEpD"}

package/dist/utils/wcag-contrast.d.ts

@@ -0,0 +1,32 @@
+/**
+ * WCAG 2.1 contrast ratio and score helpers.
+ *
+ * Implements the WCAG 2.1 relative-luminance formula:
+ * https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+ *
+ * Score thresholds:
+ *   Normal text:  ratio < 4.5 → 'Fail', 4.5 ≤ ratio < 7 → 'AA', ratio ≥ 7 → 'AAA'
+ *   Large text:   ratio < 3.0 → 'Fail', 3.0 ≤ ratio < 4.5 → 'AA', ratio ≥ 4.5 → 'AAA'
+ */
+/** Contrast score bucket — three values matching the WCAG AA·AAA·Fail model. */
+export type ContrastScoreLabel = 'Fail' | 'AA' | 'AAA';
+/**
+ * Compute WCAG 2.1 contrast ratio between two hex colors.
+ * Result is in [1, 21]. The order of arguments does not matter.
+ *
+ * Examples:
+ *   contrastRatio('#000000', '#ffffff') === 21
+ *   contrastRatio('#ffffff', '#000000') === 21
+ */
+export declare function contrastRatio(hexA: string, hexB: string): number;
+/**
+ * Map a WCAG 2.1 contrast ratio to a score label.
+ *
+ * Normal text thresholds (default): 4.5 (AA), 7 (AAA).
+ * Large text thresholds (large: true): 3.0 (AA), 4.5 (AAA).
+ * Large text is defined as ≥ 18pt regular or ≥ 14pt bold (WCAG 2.1 §1.4.3).
+ */
+export declare function contrastScore(ratio: number, opts?: {
+    large?: boolean;
+}): ContrastScoreLabel;
+//# sourceMappingURL=wcag-contrast.d.ts.map

package/dist/utils/wcag-contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wcag-contrast.d.ts","sourceRoot":"","sources":["../../src/utils/wcag-contrast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;AAgCvD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAOhE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GACzB,kBAAkB,CAWpB"}

package/dist/zdtp.css

@@ -1 +1 @@
-:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){--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(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-number-input--invalid{border-color:#e05252;color:#e05252}.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{flex:1;min-width:0}select.tokenpanel-tier-ref-select{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;cursor:pointer}select.tokenpanel-tier-ref-select:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.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-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}.tokenpanel-elpath-toggle{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-elpath-toggle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-elpath-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle.is-active{color:var(--tokentweak-color-accent)}:where(.tokenpanel-shell) .tokenpanel-elpath-toggle svg{fill:none;stroke:currentColor}html.tokenpanel-elpath-inspecting,html.tokenpanel-elpath-inspecting *{cursor:crosshair!important;-webkit-user-select:none!important;user-select:none!important}.tokenpanel-elpath-box{margin:0;padding:0;border:0;pointer-events:none;box-sizing:border-box;background:#6fa8dc40;outline:1px solid rgb(111 168 220 / .9);outline-offset:-1px;box-shadow:inset 0 0 0 1px #6fa8dce6}.tokenpanel-elpath-label{pointer-events:none;display:inline-flex;align-items:baseline;gap:8px;max-width:90vw;padding:2px 6px;border-radius:3px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #0006}.tokenpanel-elpath-label-name{color:var(--tokentweak-color-accent, #d69a66);font-weight:600;overflow:hidden;text-overflow:ellipsis}.tokenpanel-elpath-label-size{color:var(--tokentweak-color-muted, #888888);flex-shrink:0}.tokenpanel-elpath-toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:8px 14px;border-radius:6px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:12px;line-height:1.4;max-width:min(90vw,520px);box-shadow:0 4px 16px #00000073;border:1px solid rgb(255 255 255 / .08)}.tokenpanel-elpath-toast .tokenpanel-elpath-toast-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-elpath-toast svg{flex-shrink:0;fill:none;stroke:var(--tokentweak-color-success, #93bb77);pointer-events:none;display:inline-block;overflow:visible}.tokenpanel-elpath-toast.is-error svg{stroke:var(--tokentweak-color-danger, #da6871)}
+.tokenpanel-palette-chart svg{fill:currentColor;overflow:visible}.tokenpanel-palette-chart{position:relative;width:100%;height:280px;border-radius:var(--radius-tokentweak);overflow:hidden;touch-action:none}.tokenpanel-palette-chart-bands{position:absolute;inset:0;display:block;width:100%;height:100%}.tokenpanel-palette-chart-curve{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;overflow:visible}.tokenpanel-palette-chart-hit-line{fill:none;pointer-events:stroke;cursor:grab}.tokenpanel-palette-chart-hit-line:active{cursor:grabbing}.tokenpanel-palette-chart-line{fill:none}.tokenpanel-palette-chart-curve--l .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-accent)}.tokenpanel-palette-chart-curve--c .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-success)}.tokenpanel-palette-chart-curve--h .tokenpanel-palette-chart-line{stroke:var(--tokentweak-color-warning)}.tokenpanel-palette-chart-node-visual{fill:var(--tokentweak-color-bg)}.tokenpanel-palette-chart-curve--l .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-accent)}.tokenpanel-palette-chart-curve--c .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-success)}.tokenpanel-palette-chart-curve--h .tokenpanel-palette-chart-node-visual{stroke:var(--tokentweak-color-warning)}.tokenpanel-palette-chart-node-hit{pointer-events:all;cursor:grab;outline:none}.tokenpanel-palette-chart-node-hit:active{cursor:grabbing}.tokenpanel-palette-chart-node-hit:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-edit-view{display:flex;flex-direction:column;gap:.875rem}.tokenpanel-palette-edit-group{display:flex;flex-direction:column;gap:.375rem}.tokenpanel-palette-edit-swatches{display:flex;gap:.25rem}.tokenpanel-palette-edit-swatch{position:relative;flex:1 1 0;height:30px;border-radius:var(--radius-tokentweak);border:1px solid rgba(255,255,255,.08);outline:0 solid transparent;cursor:pointer;transition:outline-width .08s ease}.tokenpanel-palette-edit-swatch.is-selected{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-edit-swatch:focus-visible{outline:2px solid var(--tokentweak-color-accent-hover);outline-offset:1px}.tokenpanel-palette-edit-swatch[data-out-of-gamut]{border-style:dashed;border-color:var(--tokentweak-color-danger);border-width:2px}.tokenpanel-palette-edit-swatch-idx{position:absolute;inset:auto 0 2px;text-align:center;font-size:9px;color:#0000008c;text-shadow:0 0 2px rgba(255,255,255,.4);pointer-events:none}.tokenpanel-palette-edit-editor{margin-top:.375rem;border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);background:var(--tokentweak-color-surface)}.tokenpanel-palette-edit-editor-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-editor-title{flex:1 1 auto;font-size:11px;color:var(--tokentweak-color-muted)}.tokenpanel-palette-edit-channels{display:flex;gap:.1875rem}.tokenpanel-palette-edit-channel{padding:.25rem .5625rem;font-size:11px;font-weight:650;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.tokenpanel-palette-edit-channel:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:1px}.tokenpanel-palette-edit-channel--l.is-on{border-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-accent)}.tokenpanel-palette-edit-channel--c.is-on{border-color:var(--tokentweak-color-success);color:var(--tokentweak-color-success)}.tokenpanel-palette-edit-channel--h.is-on{border-color:var(--tokentweak-color-warning);color:var(--tokentweak-color-warning)}.tokenpanel-palette-edit-direct{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-top:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-edit-direct-hint{font-size:11px;color:var(--tokentweak-color-muted)}.tokenpanel-palette-readout{display:flex;gap:.625rem;align-items:center;padding:.5rem .625rem .625rem;border-top:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-readout-swatch{flex:none;width:40px;height:40px;border-radius:var(--radius-tokentweak);border:1px solid rgba(255,255,255,.12)}.tokenpanel-palette-readout-rows{font-family:var(--tokentweak-font-mono);font-size:10.5px;color:var(--tokentweak-color-fg);line-height:1.5}.tokenpanel-palette-readout-key{display:inline-block;width:42px;color:var(--tokentweak-color-muted);font-weight:600}.tokenpanel-palette-readout-gamut{margin-top:.25rem;color:var(--tokentweak-color-danger);font-size:10px}:where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){--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(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-field{display:inline-flex}.tokenpanel-color-field-swatch{display:block;width:2.75rem;height:1.75rem;border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);cursor:pointer;padding:0;transition:border-color .15s ease}.tokenpanel-color-field-swatch:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-field-swatch:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-field-swatch[aria-disabled=true]{cursor:default;opacity:.6}.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-number-input--invalid{border-color:#e05252;color:#e05252}.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{flex:1;min-width:0}select.tokenpanel-tier-ref-select{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;cursor:pointer}select.tokenpanel-tier-ref-select:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.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-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}.tokenpanel-elpath-toggle{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-elpath-toggle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-elpath-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle.is-active{color:var(--tokentweak-color-accent)}:where(.tokenpanel-shell) .tokenpanel-elpath-toggle svg{fill:none;stroke:currentColor}html.tokenpanel-elpath-inspecting,html.tokenpanel-elpath-inspecting *{cursor:crosshair!important;-webkit-user-select:none!important;user-select:none!important}.tokenpanel-elpath-box{margin:0;padding:0;border:0;pointer-events:none;box-sizing:border-box;background:#6fa8dc40;outline:1px solid rgb(111 168 220 / .9);outline-offset:-1px;box-shadow:inset 0 0 0 1px #6fa8dce6}.tokenpanel-elpath-label{pointer-events:none;display:inline-flex;align-items:baseline;gap:8px;max-width:90vw;padding:2px 6px;border-radius:3px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #0006}.tokenpanel-elpath-label-name{color:var(--tokentweak-color-accent, #d69a66);font-weight:600;overflow:hidden;text-overflow:ellipsis}.tokenpanel-elpath-label-size{color:var(--tokentweak-color-muted, #888888);flex-shrink:0}.tokenpanel-elpath-toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:8px 14px;border-radius:6px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:12px;line-height:1.4;max-width:min(90vw,520px);box-shadow:0 4px 16px #00000073;border:1px solid rgb(255 255 255 / .08)}.tokenpanel-elpath-toast .tokenpanel-elpath-toast-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-elpath-toast svg{flex-shrink:0;fill:none;stroke:var(--tokentweak-color-success, #93bb77);pointer-events:none;display:inline-block;overflow:visible}.tokenpanel-elpath-toast.is-error svg{stroke:var(--tokentweak-color-danger, #da6871)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takazudo/zdtp",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Dynamic design-token tweak panel — host-config-driven, framework-agnostic Preact UI.",
   "private": false,
   "license": "MIT",
@@ -25,7 +25,7 @@
     "url": "git+https://github.com/Takazudo/zudo-design-token-panel.git",
     "directory": "packages/zdtp"
   },
-  "homepage": "https://takazudomodular.com/pj/zudo-design-token-panel/",
+  "homepage": "https://zudo-design-token-panel.takazudomodular.com/",
   "bugs": {
     "url": "https://github.com/Takazudo/zudo-design-token-panel/issues"
   },