@takazudo/zdtp 0.1.0-next.0

package/dist/controls/role-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-button.d.ts","sourceRoot":"","sources":["../../src/controls/role-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAelC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC;IAC/C,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;qEAEiE;IACjE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAe,EAAE,YAAY,EAC7B,SAAS,EACT,QAAY,EACZ,EAAE,EACF,KAAK,EACL,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA4B/B"}

package/dist/controls/sanitize-css-value.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Strip characters that could break out of a CSS property-value context.
+ *
+ * Used by `<TextRow>` for free-form token inputs like `--font-sans` /
+ * `--font-mono`. Dropped characters:
+ *
+ *   - newlines (`\r`, `\n`) — would split the declaration in raw CSS text
+ *     output and are treated as whitespace anyway by `style.setProperty`.
+ *   - backslashes (`\\`)    — CSS-escape prefix; strip so the raw string the
+ *     user sees equals the raw string written back out on export.
+ *   - semicolons (`;`)      — safe for `style.setProperty` (it writes a single
+ *     declaration) but would break the exported CSS snippet.
+ *   - braces (`{`, `}`)     — would close the surrounding `:root { … }` block
+ *     when the bin writes a sanitised value back out to disk, corrupting the
+ *     target CSS file. Always invalid in a property-value context.
+ *
+ * `style.setProperty` on its own is already injection-safe — it writes a single
+ * property/value pair and never parses the value as a rule. This sanitiser
+ * guards the **exported** CSS snippet and keeps stored state tidy.
+ */
+export declare function sanitizeCssValue(input: string): string;
+//# sourceMappingURL=sanitize-css-value.d.ts.map

package/dist/controls/sanitize-css-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-css-value.d.ts","sourceRoot":"","sources":["../../src/controls/sanitize-css-value.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEtD"}

package/dist/controls/select-row.d.ts

@@ -0,0 +1,26 @@
+import type { TokenDef } from '../tokens/manifest';
+/**
+ * One manifest-driven token row backed by a native `<select>`.
+ *
+ *   [label]                                     [  400 ▾]
+ *
+ * Used for tokens whose value is one of a small, enumerated set — e.g.
+ * `--font-weight-*` (100..900). The selected option string is stored verbatim
+ * in persisted state (no numeric round-tripping; font-weight values are
+ * conventionally written as bare numbers in CSS).
+ *
+ * `onChange` is `(id, next)` — the row passes its own `token.id` back so the
+ * parent can use a single stable handler across every row, keeping React.memo
+ * effective.
+ */
+export interface SelectRowProps {
+    token: TokenDef;
+    /** Current persisted value (or the token's default if no override). */
+    value: string;
+    /** Called with the row's `token.id` and the newly selected option value. */
+    onChange: (id: string, next: string) => void;
+}
+declare function SelectRow({ token, value, onChange }: SelectRowProps): import("preact").JSX.Element;
+declare const _default: typeof SelectRow;
+export default _default;
+//# sourceMappingURL=select-row.d.ts.map

package/dist/controls/select-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-row.d.ts","sourceRoot":"","sources":["../../src/controls/select-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,gCAuC5D;;AAID,wBAA+B"}

package/dist/controls/slider-row.d.ts

@@ -0,0 +1,34 @@
+import { type TokenDef } from '../tokens/manifest';
+/**
+ * One manifest-driven token row:
+ *
+ *   [label]  ... [  1.25 rem]   ← label + number input (unit suffix inside)
+ *   [=========o==================]  ← full-width range slider
+ *
+ * Range input and number input are two-way bound: dragging the slider fills
+ * the number input live, and typing a value moves the slider once it parses.
+ *
+ * The parent owns the persisted value (stored as a string like `"1.25rem"`);
+ * this row keeps a local "draft" string only for the number input, so users
+ * can type partial values (`"1."`) without the component thrashing.
+ *
+ * Read-only tokens render a disabled compact form that still shows the
+ * resolved value from the stylesheet.
+ *
+ * `onChange` is `(id, next)` — the row passes its own `token.id` back so the
+ * parent can use a single stable handler across every row, keeping React.memo
+ * effective.
+ */
+export interface SliderRowProps {
+    token: TokenDef;
+    /** Current persisted value (or the token's default if no override). */
+    value: string;
+    /** Called with the row's `token.id` and the new CSS string (e.g.
+     *  `"0.75rem"`) whenever the user commits a change via slider or a
+     *  parseable number input. */
+    onChange: (id: string, next: string) => void;
+}
+declare function SliderRow({ token, value, onChange }: SliderRowProps): import("preact").JSX.Element;
+declare const _default: typeof SliderRow;
+export default _default;
+//# sourceMappingURL=slider-row.d.ts.map

package/dist/controls/slider-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-row.d.ts","sourceRoot":"","sources":["../../src/controls/slider-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAkC,MAAM,oBAAoB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,QAAQ,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;;kCAE8B;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,gCA6E5D;;AAKD,wBAA+B"}

package/dist/controls/text-row.d.ts

@@ -0,0 +1,28 @@
+import type { TokenDef } from '../tokens/manifest';
+/**
+ * One manifest-driven token row backed by a free-form text input.
+ *
+ *   [label]              [ "Inter", system-ui, sans-serif        ]
+ *
+ * Used for tokens whose value is a CSS string the user types directly — e.g.
+ * `--font-sans` / `--font-mono`. The stored value is sanitised (see
+ * `sanitize-css-value.ts`) before it leaves this component so newlines,
+ * backslashes, and semicolons never reach stored state or the exported CSS
+ * snippet. `style.setProperty` is already injection-safe on its own.
+ *
+ * `onChange` is `(id, next)` — the row passes its own `token.id` back so the
+ * parent can use a single stable handler across every row, keeping React.memo
+ * effective.
+ */
+export interface TextRowProps {
+    token: TokenDef;
+    /** Current persisted value (or the token's default if no override). */
+    value: string;
+    /** Called with the row's `token.id` and the sanitised new value on every
+     *  edit. */
+    onChange: (id: string, next: string) => void;
+}
+declare function TextRow({ token, value, onChange }: TextRowProps): import("preact").JSX.Element;
+declare const _default: typeof TextRow;
+export default _default;
+//# sourceMappingURL=text-row.d.ts.map

package/dist/controls/text-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-row.d.ts","sourceRoot":"","sources":["../../src/controls/text-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAGnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,QAAQ,CAAC;IAChB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd;gBACY;IACZ,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,iBAAS,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,YAAY,gCAuCxD;;AAID,wBAA6B"}

package/dist/controls/tier-ref-selector.d.ts

@@ -0,0 +1,33 @@
+import type { TabConfig } from '../tokens/tier-model';
+/**
+ * Sentinel string passed to `onChange` when the user picks "Literal...".
+ * The parent component (Wave 5) interprets this as a request to flip the
+ * item back into its kind-specific editor (slider / text / select) writing a
+ * literal CSS override.
+ */
+export declare const TIER_REF_LITERAL_SIGNAL: "__literal__";
+export interface TierRefSelectorProps {
+    /** Full tab config — needed to look up the referenced tier and its items. */
+    tab: TabConfig;
+    /** The tier whose item is being edited (the "semantic" / reference tier). */
+    tierId: string;
+    /** The item being edited within `tierId`. */
+    itemId: string;
+    /**
+     * The current stored value for this item — an item id within the
+     * referenced (tier-1) tier. Empty string or an unrecognised id is treated
+     * as "pick the first item" (mirrors resolver fallback).
+     */
+    value: string;
+    /**
+     * Called when the user commits a selection.
+     *
+     * - Picking a tier-1 item: `onChange(itemId, selectedRefItemId)`
+     * - Picking "Literal...": `onChange(itemId, TIER_REF_LITERAL_SIGNAL)`
+     */
+    onChange: (itemId: string, next: string) => void;
+}
+declare function TierRefSelector({ tab, tierId, itemId, value, onChange }: TierRefSelectorProps): import("preact").JSX.Element;
+declare const _default: typeof TierRefSelector;
+export default _default;
+//# sourceMappingURL=tier-ref-selector.d.ts.map

package/dist/controls/tier-ref-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tier-ref-selector.d.ts","sourceRoot":"","sources":["../../src/controls/tier-ref-selector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAwB,MAAM,sBAAsB,CAAC;AAM5E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAG,aAAsB,CAAC;AA0C9D,MAAM,WAAW,oBAAoB;IACnC,6EAA6E;IAC7E,GAAG,EAAE,SAAS,CAAC;IACf,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAMD,iBAAS,eAAe,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,gCA4NtF;;AAED,wBAAqC"}

package/dist/controls/tooltip.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Tooltip controller — single shared DOM tooltip for truncated token names.
+ *
+ * Architecture: Context + hook pattern with a single `.tokenpanel-tooltip`
+ * element rendered in a portal to `document.body` so that panel overflow
+ * clipping cannot hide it.
+ *
+ * Usage:
+ *   // Wrap the tree:
+ *   <TooltipProvider>
+ *     <YourContent />
+ *   </TooltipProvider>
+ *
+ *   // Inside any descendant:
+ *   const tooltipProps = useTooltip(label);
+ *   <div {...tooltipProps}>...</div>
+ */
+import type { ComponentChildren, JSX } from 'preact';
+interface TooltipProviderProps {
+    children: ComponentChildren;
+}
+/**
+ * TooltipProvider — owns tooltip state and renders the single shared tooltip
+ * element via a portal to document.body.
+ *
+ * Escape and scroll-capture listeners are mounted once here and hide the
+ * tooltip globally.
+ */
+export declare function TooltipProvider({ children }: TooltipProviderProps): JSX.Element;
+/**
+ * Returns event handler props to spread onto the tooltip trigger element.
+ *
+ * @param text - The full text to show in the tooltip.
+ * @returns An object of `onMouseEnter`, `onMouseLeave`, `onFocusIn`, `onFocusOut`
+ *          handlers to spread onto the trigger element.
+ */
+export declare function useTooltip(text: string): {
+    onMouseEnter: JSX.MouseEventHandler<HTMLElement>;
+    onMouseLeave: JSX.MouseEventHandler<HTMLElement>;
+    onFocusIn: JSX.FocusEventHandler<HTMLElement>;
+    onFocusOut: JSX.FocusEventHandler<HTMLElement>;
+};
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/controls/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/controls/tooltip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAKH,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AA4ErD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,eAqDjE;AAMD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG;IACxC,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACjD,YAAY,EAAE,GAAG,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACjD,SAAS,EAAE,GAAG,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAoCA"}

package/dist/export-modal.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Export modal — renders the current `TweakState` as a design-tokens JSON
+ * document (default schema: `zudo-design-tokens/v1`; configurable via
+ * `panelConfig.schemaId`) with a diff-only toggle and a copy-to-clipboard
+ * button.
+ *
+ * Ported verbatim from zudo-doc's
+ * `src/components/design-token-tweak/export-modal.tsx`. Intentional deltas:
+ *  - `serialize` is imported from this package's serde
+ *    (`./utils/design-token-serde`).
+ *  - `colorSchemes` / `initColorFromSchemeData` come from this package's
+ *    config.
+ *  - The filename hint is derived from `panelConfig.exportFilenameBase` via
+ *    `exportFilename(...)` (default `zudo-design-tokens.json`).
+ *  - Modal class names are derived from `panelConfig.modalClassPrefix` via
+ *    `modalClass(...)` so a single config swap re-themes every dialog.
+ *
+ * Modal lifecycle uses the native `<dialog>` element via `showModal()` /
+ * `close()`. Every dismissal path (× button, backdrop click, Escape key, the
+ * programmatic "Close" button) routes through `dialog.close()` so the native
+ * `close` event — and thus `onClose` — fires exactly once per dismissal.
+ */
+import { type ColorTweakState, type TweakState } from './state/tweak-state';
+export interface ExportModalProps {
+    onClose: () => void;
+    /** Full unified tweak state — the modal serializes all four categories. */
+    state: TweakState;
+    /** Color baseline used for diff-only output. Optional: callers without DOM
+     *  access (tests) can omit and we'll treat the entire color block as changed. */
+    colorDefaults?: ColorTweakState;
+}
+export declare function ExportModal({ onClose, state, colorDefaults }: ExportModalProps): import("preact").JSX.Element;
+//# sourceMappingURL=export-modal.d.ts.map

package/dist/export-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-modal.d.ts","sourceRoot":"","sources":["../src/export-modal.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,UAAU,EAEhB,MAAM,qBAAqB,CAAC;AAI7B,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,UAAU,CAAC;IAClB;qFACiF;IACjF,aAAa,CAAC,EAAE,eAAe,CAAC;CACjC;AAgBD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,gBAAgB,gCAoL9E"}

package/dist/highlight/find-elements.d.ts

@@ -0,0 +1,113 @@
+/**
+ * findElementsUsingToken — uses a sentinel-substitution probe to find every
+ * DOM element whose computed style reflects a given CSS custom property.
+ *
+ * ## How it works (high level)
+ *
+ * 1. **Type detection.** If `options.kind` is supplied, use it. Otherwise
+ *    read `getComputedStyle(documentElement).getPropertyValue(cssVar)` and
+ *    classify the resolved value via regex to determine which sentinel values
+ *    and property lists to use.
+ *
+ * 2. **Definer discovery (v2).** Walk all `document.styleSheets` looking for
+ *    every `CSSStyleRule` that directly declares `cssVar` in its declaration
+ *    block. Each matched `selectorText` becomes a "definer selector".
+ *    Cross-origin sheets that throw on `.cssRules` are skipped with a warning.
+ *
+ * 3. **Override apply.** The sentinel value is written (via `setProperty` with
+ *    `important` priority) on `:root` and on every element matched by a
+ *    definer selector. This ensures cascade overrides (e.g. `[data-theme]`
+ *    blocks) are also covered. Panel-internal elements are skipped.
+ *
+ * 4. **Force layout.** `void document.documentElement.offsetHeight` flushes
+ *    style recalculation so computed styles are current.
+ *
+ * 5. **DOM walk.** Every element in `document.body` (including `body` itself)
+ *    and their `::before` / `::after` pseudo-elements are inspected:
+ *    - *Equality mode*: checks whether any type-relevant longhand equals the
+ *      sentinel, or whether any compound property substring-contains it.
+ *    - *Differential mode*: probes twice (sentinel A then B); elements whose
+ *      computed properties differ between A and B are consumers. Catches
+ *      calc/min/max/clamp transforms that equality mode misses.
+ *
+ * 6. **Restore.** Inline overrides are removed in LIFO order, fully
+ *    synchronously — no `await`, `setTimeout`, or `requestAnimationFrame`
+ *    between apply and restore.
+ *
+ * ## Known limitations
+ *
+ * - **Cross-origin stylesheets**: sheets from a different origin throw on
+ *   `.cssRules` and are skipped (a warning is emitted). Tokens defined only in
+ *   cross-origin sheets will not have their definer selectors discovered; the
+ *   `:root` override is still applied, so root-level consumers are still found.
+ * - **adoptedStyleSheets**: not iterated; tokens defined only via the
+ *   `adoptedStyleSheets` API will not be discovered.
+ * - **Shadow DOM**: elements inside shadow roots are not walked; tokens
+ *   consumed inside shadow trees are not found.
+ * - **Pseudo-elements**: only `::before` and `::after` are checked. Other
+ *   pseudo-elements (e.g. `::placeholder`, `::selection`, `::marker`) are not
+ *   inspected.
+ * - **Browser min-font-size preference**: if `font-size` is overridden by the
+ *   browser's minimum-font-size setting, the length sentinel (7.137951px) may
+ *   be floored and equality mode will fail to detect `font-size` consumers.
+ *   Differential mode is more robust in this case.
+ */
+export interface FindElementsResult {
+    elements: Element[];
+    warnings: string[];
+}
+export interface FindElementsOptions {
+    /** Explicit token type. Skips auto-detection when supplied. */
+    kind?: 'color' | 'length' | 'number' | 'text' | 'easing' | 'time' | 'cursor' | 'content' | 'mask-image';
+    /**
+     * Probe mode.
+     *   equality (default): single sentinel; fast; misses calc/min/max/clamp.
+     *   differential: two sentinels; catches transforms; ~4–6× slower.
+     */
+    mode?: 'equality' | 'differential';
+}
+/**
+ * Find all DOM elements whose computed style reflects the given CSS custom
+ * property.
+ *
+ * Uses a **sentinel-substitution probe**:
+ * 1. Override `cssVar` with a high-entropy sentinel value on `:root` and every
+ *    stylesheet definer (v2 algorithm).
+ * 2. Force a style recalculation.
+ * 3. Walk the DOM checking which elements absorbed the sentinel.
+ * 4. Restore all overrides synchronously.
+ *
+ * @param cssVar  The full custom-property name including leading dashes,
+ *   e.g. `"--brand"`. Accepts `"var(--brand)"` defensively.
+ * @param options  Optional configuration:
+ *   - `kind`: explicit token type (`'color' | 'length' | 'number' | 'text' | 'easing' | 'time' | 'cursor' | 'content' | 'mask-image'`).
+ *     `text` covers any property accepting an arbitrary custom-ident
+ *     (font-family, animation-name, transition-property, will-change).
+ *     `easing` covers timing-function properties (transition-timing-function,
+ *     animation-timing-function). `time` covers duration and delay properties
+ *     (transition-duration, transition-delay, animation-duration, animation-delay).
+ *     `cursor` covers the cursor property using keyword sentinels (Chrome drops
+ *     url() from cursor computed style). `content` covers the content property
+ *     using quoted-string sentinels. `mask-image` covers the mask-image property
+ *     using url() sentinels.
+ *     When omitted the type is auto-detected from the resolved value on
+ *     `documentElement`. `url()` resolved values auto-detect as `text` with
+ *     a warning — supply kind:'cursor' or kind:'mask-image' explicitly for
+ *     url()-typed tokens. If the token has no value on `:root` (empty resolved
+ *     value) a warning is emitted and `color` is assumed.
+ *   - `mode`: `'equality'` (default, fast) checks whether computed longhands
+ *     equal the sentinel; `'differential'` probes twice (sentinels A and B)
+ *     and marks consumers where any property differs — catches `calc()`,
+ *     `min()`, `max()`, `clamp()` transforms that equality mode misses.
+ *
+ * ## Known limitations
+ *
+ * - Cross-origin stylesheets are skipped (a warning is emitted).
+ * - `adoptedStyleSheets` are not iterated.
+ * - Shadow DOM elements are not walked.
+ * - Only `::before` and `::after` pseudo-elements are checked.
+ * - Browser min-font-size preference may floor the length sentinel (7.137951px),
+ *   causing equality mode to miss `font-size` consumers.
+ */
+export declare function findElementsUsingToken(cssVar: string, options?: FindElementsOptions): FindElementsResult;
+//# sourceMappingURL=find-elements.d.ts.map

package/dist/highlight/find-elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-elements.d.ts","sourceRoot":"","sources":["../../src/highlight/find-elements.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;IACxG;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;CACpC;AAkhBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,mBAAmB,GAC5B,kBAAkB,CAiIpB"}

package/dist/highlight/highlight-orchestrator.d.ts

@@ -0,0 +1,24 @@
+/**
+ * HighlightOrchestrator — integration layer for the highlight feature.
+ *
+ * Responsibilities:
+ * 1. Lifts and persists HighlightState.
+ * 2. Provides HighlightContext to all descendants.
+ * 3. Mounts an overlay portal at document.body (above the panel-closed gate).
+ * 4. Observes document.head for stylesheet changes so newly injected CSS is
+ *    picked up by re-resolving elements.
+ * 5. Handles astro:after-swap — recreates the portal mount and re-attaches the
+ *    MutationObserver when Astro replaces the body/head.
+ *
+ * Self-contained — panel.tsx wraps its existing JSX in this component so the
+ * overlay persists even when the panel is closed.
+ */
+import type { ComponentChildren } from 'preact';
+import type { TierValueKind } from '../tokens/tier-model';
+type ProbeKind = 'color' | 'length' | 'number' | 'text' | 'easing' | 'cursor' | 'content' | 'mask-image';
+export declare function tierKindToProbeKind(t: TierValueKind | undefined): ProbeKind | undefined;
+export declare function HighlightOrchestrator({ children }: {
+    children: ComponentChildren;
+}): import("preact").JSX.Element;
+export {};
+//# sourceMappingURL=highlight-orchestrator.d.ts.map

package/dist/highlight/highlight-orchestrator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-orchestrator.d.ts","sourceRoot":"","sources":["../../src/highlight/highlight-orchestrator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAqBhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAM1D,KAAK,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAEzG,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAqBvF;AA8GD,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,iBAAiB,CAAA;CAAE,gCA0NlF"}

package/dist/highlight/highlight-overlay.d.ts

@@ -0,0 +1,43 @@
+/**
+ * HighlightOverlay — absolutely-positioned div rings around host elements.
+ *
+ * Renders one overlay <div> per {element, slot} item, using
+ * getBoundingClientRect() + position:fixed so the outlines track the element
+ * regardless of page scroll or layout reflow.
+ *
+ * Reposition strategy
+ * -------------------
+ * A single RAF loop runs while items.length > 0.  Each tick reads
+ * getBoundingClientRect() for every item and updates the corresponding overlay
+ * div's inline style IMPERATIVELY (direct DOM mutation — no Preact re-render
+ * per frame). This keeps animation cost O(items) DOM writes per frame rather
+ * than O(items) VDOM diffs.
+ *
+ * Hostile-host fallback
+ * ---------------------
+ * Some hosts reset `outline: none !important`.  We also apply
+ * `box-shadow: inset 0 0 0 <w>px <color>` so the visual cue survives even
+ * when outline is killed.
+ *
+ * Self-contained — does NOT manage its own portal mount.
+ * The orchestrator (#232) owns where in the DOM this component is rendered.
+ */
+import type { JSX } from 'preact';
+/**
+ * Inline copy of HighlightSlotSpec.  After sub-issue #227 merges, the
+ * orchestrator (#232) can import from either source — the shapes are
+ * identical so TypeScript will accept either.
+ */
+export interface HighlightSlotSpec {
+    color: string;
+    outlineWidth: number;
+}
+export interface HighlightOverlayItem {
+    element: Element;
+    slot: HighlightSlotSpec;
+}
+export interface HighlightOverlayProps {
+    items: ReadonlyArray<HighlightOverlayItem>;
+}
+export declare function HighlightOverlay({ items }: HighlightOverlayProps): JSX.Element | null;
+//# sourceMappingURL=highlight-overlay.d.ts.map

package/dist/highlight/highlight-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-overlay.d.ts","sourceRoot":"","sources":["../../src/highlight/highlight-overlay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAMlC;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;CAC5C;AAgDD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAiErF"}

package/dist/highlight/highlight-settings-popover.d.ts

@@ -0,0 +1,25 @@
+/**
+ * HighlightSettingsPopover — 2-column color-only grid + global outline px input.
+ *
+ * Header row: "Highlight outline settings" label (left) + global outline-width
+ * number input with "px" suffix (right).
+ *
+ * Slot list: 10 slots in a 2-column grid; each cell = [num] [ring swatch]
+ * [token name / "available"]. The ring opens the ColorPicker for per-slot
+ * color. Per-row slider and px readout are removed.
+ *
+ * Footer: "Disable all highlights" and "Reset to defaults" buttons.
+ *
+ * Must be rendered inside a HighlightContext.Provider. Gracefully returns
+ * null if context is absent.
+ */
+import type { JSX } from 'preact';
+interface HighlightSettingsPopoverProps {
+    /** The anchor element (gear button) for initial positioning. */
+    anchorRef: React.RefObject<HTMLElement | null>;
+    /** Called when the popover requests to close. */
+    onClose: () => void;
+}
+export declare function HighlightSettingsPopover({ anchorRef, onClose, }: HighlightSettingsPopoverProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=highlight-settings-popover.d.ts.map

package/dist/highlight/highlight-settings-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-settings-popover.d.ts","sourceRoot":"","sources":["../../src/highlight/highlight-settings-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AASlC,UAAU,6BAA6B;IACrC,gEAAgE;IAChE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC/C,iDAAiD;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAMD,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,OAAO,GACR,EAAE,6BAA6B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA8JpD"}

package/dist/highlight/highlight-state.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Highlight state slice — reservation-sheet model.
+ *
+ * 10 colour slots ({color}) are pre-defined. A cssVar can be mapped to a slot
+ * (0..9) via toggleHighlight. The slot is reserved until the same cssVar is
+ * toggled off, giving a stable colour across inspect sessions (the
+ * "reservation-sheet" property: slot 2 always means the same colour regardless
+ * of toggle order).
+ *
+ * A single global `outlineWidth` applies to all overlay rings simultaneously.
+ *
+ * Persistence is split:
+ *   slots        → localStorage  (survives full page reload — user colour edits kept)
+ *   outlineWidth → localStorage  (survives full page reload — user width setting kept)
+ *   active       → sessionStorage (cleared on reload — inspection set is ephemeral)
+ */
+export interface HighlightSlotSpec {
+    color: string;
+}
+export interface HighlightState {
+    /** Fixed-length array of 10 slot specs. */
+    slots: HighlightSlotSpec[];
+    /** Global outline width in px applied to all overlay rings. Default 2. */
+    outlineWidth: number;
+    /** cssVar → slotIndex (0..9) for every currently-highlighted token. */
+    active: Record<string, number>;
+}
+export declare const DEFAULT_HIGHLIGHT_SLOTS: HighlightSlotSpec[];
+/**
+ * Return the lowest slot index (0..9) not present in `active`, or -1 if all
+ * 10 slots are already in use.
+ */
+export declare function allocateSlot(active: Record<string, number>): number;
+/**
+ * Toggle highlight for `cssVar`.
+ *
+ * - If `cssVar` is already active, remove it (release the slot).
+ * - Otherwise allocate the lowest free slot and add the mapping.
+ * - If no slots are free, return `state` unchanged (referentially equal) and
+ *   emit a console.warn.
+ */
+export declare function toggleHighlight(state: HighlightState, cssVar: string): HighlightState;
+/**
+ * Reset slot specs to the defaults and restore global outlineWidth to 2.
+ * The `active` map is preserved — the user is resetting slot colours, not
+ * their inspection set.
+ */
+export declare function resetSlots(state: HighlightState): HighlightState;
+/**
+ * Clear all active highlights. Returns a new state with an empty `active` map;
+ * `slots` (colors) and `outlineWidth` are left untouched.
+ */
+export declare function clearAllActive(state: HighlightState): HighlightState;
+/**
+ * Merge `partial` into the slot at `index`. Out-of-range index returns
+ * `state` unchanged.
+ */
+export declare function setSlot(state: HighlightState, index: number, partial: Partial<HighlightSlotSpec>): HighlightState;
+/**
+ * Set the global outline width. Width is clamped to >= 1.
+ */
+export declare function setOutlineWidth(state: HighlightState, width: number): HighlightState;
+/**
+ * Load highlight state from the split storage backends.
+ *
+ * - slots        ← localStorage  (key: `${storagePrefix}-highlight-slots`)
+ * - outlineWidth ← localStorage  (key: `${storagePrefix}-highlight-outline-width`)
+ * - active       ← sessionStorage (key: `${storagePrefix}-highlight-active`)
+ *
+ * On any parse / access failure the affected slice falls back to its default
+ * (`DEFAULT_HIGHLIGHT_SLOTS` / 2 / `{}`).
+ *
+ * Migration: existing localStorage `slots` arrays may carry a per-slot
+ * `outlineWidth` field — the extra field is simply ignored on load.
+ */
+export declare function loadHighlightState(): HighlightState;
+/**
+ * Persist highlight state to the split storage backends.
+ *
+ * - slots        → localStorage
+ * - outlineWidth → localStorage
+ * - active       → sessionStorage
+ *
+ * Gracefully handles environments where storage is unavailable.
+ */
+export declare function saveHighlightState(state: HighlightState): void;
+//# sourceMappingURL=highlight-state.d.ts.map

package/dist/highlight/highlight-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-state.d.ts","sourceRoot":"","sources":["../../src/highlight/highlight-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAQH,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,2CAA2C;IAC3C,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,0EAA0E;IAC1E,YAAY,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAMD,eAAO,MAAM,uBAAuB,EAAE,iBAAiB,EAWtD,CAAC;AAwBF;;;GAGG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAMnE;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,cAAc,CAmBrF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAMhE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAEpE;AAED;;;GAGG;AACH,wBAAgB,OAAO,CACrB,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,GAClC,cAAc,CAIhB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc,CAGpF;AAMD;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,IAAI,cAAc,CA2CnD;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAkB9D"}

package/dist/highlight/highlight-toggle-button.d.ts

@@ -0,0 +1,34 @@
+/**
+ * HighlightToggleButton — eye icon that toggles CSS-variable-based highlighting.
+ *
+ * Reads HighlightContext to determine active state and slot colour.  When the
+ * context is null (component rendered outside the orchestrator's provider —
+ * e.g. in unit tests without a wrapper), the component renders nothing so
+ * rows degrade gracefully.
+ *
+ * HighlightContext is the single source of truth for the context type so both
+ * consumers (this button) and the orchestrator (#232) import from the same
+ * module.
+ */
+import type { JSX } from 'preact';
+import type { HighlightState, HighlightSlotSpec } from './highlight-state';
+export interface HighlightContextValue {
+    state: HighlightState;
+    toggle: (cssVar: string) => void;
+    /** Optional — when the orchestrator computes match counts it injects them here for title attributes. */
+    matchCounts?: Record<string, number>;
+    /** Optional — orchestrator may expose setSlot for slot colour editing. */
+    setSlot?: (index: number, partial: Partial<HighlightSlotSpec>) => void;
+    /** Optional — orchestrator may expose setOutlineWidth for global outline width editing. */
+    setOutlineWidth?: (width: number) => void;
+    /** Optional — orchestrator may expose reset to clear all active highlights. */
+    reset?: () => void;
+    /** Optional — orchestrator may expose disableAll to clear the active map while preserving slot colours. */
+    disableAll?: () => void;
+}
+export declare const HighlightContext: import("preact").Context<HighlightContextValue | null>;
+export interface HighlightToggleButtonProps {
+    cssVar: string;
+}
+export declare function HighlightToggleButton({ cssVar }: HighlightToggleButtonProps): JSX.Element | null;
+//# sourceMappingURL=highlight-toggle-button.d.ts.map

package/dist/highlight/highlight-toggle-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-toggle-button.d.ts","sourceRoot":"","sources":["../../src/highlight/highlight-toggle-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAM3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,wGAAwG;IACxG,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,0EAA0E;IAC1E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACvE,2FAA2F;IAC3F,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,2GAA2G;IAC3G,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB,wDAAoD,CAAC;AAMlF,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+DhG"}