@takazudo/zdtp 0.4.7 → 0.4.9

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 0.4.9
+
+### Features
+
+- feat: add color picker close button ([#542](https://github.com/Takazudo/zudo-design-token-panel/pull/542)) (8596353)
+- feat(zdtp): clean up semantic color rows ([#544](https://github.com/Takazudo/zudo-design-token-panel/pull/544)) (849e0ad)
+
+### Fixed
+
+- fix: enforce color picker close hit target ([#546](https://github.com/Takazudo/zudo-design-token-panel/pull/546)) (85c9acd)
+- fix(panel): add palette check view styles ([#543](https://github.com/Takazudo/zudo-design-token-panel/pull/543)) (a6a1fa2)
+
+### Other Changes
+
+- docs: fix apply pipeline heading anchor ([#554](https://github.com/Takazudo/zudo-design-token-panel/pull/554)) (13afef6)
+- docs: refresh palette check mode guide ([#545](https://github.com/Takazudo/zudo-design-token-panel/pull/545)) (4ab2ce3)
+- test: record color picker close control VRT (aa66eba)
+- chore: start panel UI tweaks 540 (57fb4c7)
+
+## 0.4.8
+
+### Features
+
+- DOM Tweaker — live Tailwind class editor with element picker, suggestions, edit-session state, confirmation gates, and runtime orchestration ([#539](https://github.com/Takazudo/zudo-design-token-panel/pull/539)) (46f4524, 67e695e, b8bafeb, 5de9ae8, 6e4baab, 376d390, eef4c2, 75f14c7)
+
+### Other Changes
+
+- docs(zdtp): add DOM Tweaker reference ([#539](https://github.com/Takazudo/zudo-design-token-panel/pull/539)) (b2b2ed3)
+- chore(dom-tweaker): remove consumed prototype resource ([#539](https://github.com/Takazudo/zudo-design-token-panel/pull/539)) (9a0ac51)
+- docs(l-make-release): add autonomy-after-the-gate principle (7f64206)
+
 ## 0.4.7
 
 ### Fixed

package/dist/astro/host-adapter.js

@@ -1,8 +1,8 @@
-import { c as h, g as u, a as g, b as y, d as P, e as b, f as _, i as A } from "../panel-config-Bw7D-25C.js";
-import { g as c, Z as k } from "../tweak-state-CD1y56zR.js";
-import { s as I, l as E, a as d, c as C, b as S } from "../autoload-state-D26ML6sW.js";
+import { c as h, g as u, a as g, b as y, d as P, e as b, f as _, i as A } from "../panel-config-BNLlUc_r.js";
+import { g as d, Z as k } from "../tweak-state-Dti6XMoQ.js";
+import { s as I, l as E, a as T, b as c, c as C, d as S } from "../autoload-state-CFmRjtD-.js";
 const r = "tokenpanel-config";
-function T() {
+function v() {
   if (typeof document > "u")
     throw new Error(
       "[design-token-panel] host-adapter loaded without a document; expected to run in a browser context."
@@ -12,45 +12,45 @@ function T() {
     throw new Error(
       `[design-token-panel] Inline config script #${r} not found. Ensure <DesignTokenPanelHost config={...} /> is rendered on this page before the host script runs.`
     );
-  const t = e.textContent ?? "";
+  const o = e.textContent ?? "";
   let n;
   try {
-    n = JSON.parse(t);
-  } catch (o) {
+    n = JSON.parse(o);
+  } catch (a) {
     throw new Error(
-      `[design-token-panel] Failed to parse inline config from #${r}: ${o.message}`
+      `[design-token-panel] Failed to parse inline config from #${r}: ${a.message}`
     );
   }
   return _(n), n;
 }
-function V(e) {
+function D(e) {
   return e.__zudoDesignTokenPanelAdapter || (e.__zudoDesignTokenPanelAdapter = {}), e.__zudoDesignTokenPanelAdapter;
 }
-function v(e, t) {
-  const n = V(e);
-  let o = n[t];
-  return o || (o = { bound: !1, modulePromise: null }, n[t] = o), o;
+function V(e, o) {
+  const n = D(e);
+  let a = n[o];
+  return a || (a = { bound: !1, modulePromise: null }, n[o] = a), a;
 }
-function D(e) {
+function K(e) {
   try {
     return window.localStorage.getItem(e) === "1";
   } catch {
     return !1;
   }
 }
-function K(e, t, n) {
+function M(e, o, n) {
   try {
-    const o = window.localStorage;
-    return o.getItem(n) !== null || o.getItem(t) !== null || o.getItem(e) !== null;
+    const a = window.localStorage;
+    return a.getItem(n) !== null || a.getItem(o) !== null || a.getItem(e) !== null;
   } catch {
     return !1;
   }
 }
 async function i(e) {
-  return e.modulePromise === null && (e.modulePromise = import("@takazudo/zdtp").then((t) => {
+  return e.modulePromise === null && (e.modulePromise = import("@takazudo/zdtp").then((o) => {
     try {
-      const n = u(), o = t.__panelConfigForTest();
-      n !== o && console.warn(
+      const n = u(), a = o.__panelConfigForTest();
+      n !== a && console.warn(
         "[design-token-panel] Singleton-sharing check failed: the host adapter and the panel module observed different PanelConfig singletons. This indicates the package's `config/panel-config` module is no longer code-split into a single shared chunk. The panel may behave correctly today, but storage keys / namespaces / branding could diverge between the two surfaces in future bundles."
       );
     } catch (n) {
@@ -58,58 +58,58 @@ async function i(e) {
         "[design-token-panel] Singleton-sharing check could not run (likely an older dist without the __panelConfigForTest accessor): " + n.message
       );
     }
-    return t;
+    return o;
   })), e.modulePromise;
 }
-function M(e, t, n, o, a) {
-  const l = e[t] ?? {};
+function O(e, o, n, a, t) {
+  const l = e[o] ?? {};
   l.showDesignPanel = async () => {
-    d(a, !0), await i(n), o.open();
+    c(t, !0), await i(n), a.open();
   }, l.hideDesignPanel = async () => {
-    await i(n), o.close();
+    await i(n), a.close();
   }, l.toggleDesignPanel = async () => {
-    await i(n), o.toggle();
+    await i(n), a.toggle();
     let s = !1;
     try {
-      s = window.localStorage.getItem(c(a)) === "1";
+      s = window.localStorage.getItem(d(t)) === "1";
     } catch {
     }
-    s && d(a, !0);
+    s && c(t, !0);
   }, l.enableAutoload = async () => {
-    (await i(n)).enableAutoload(a);
+    (await i(n)).enableAutoload(t);
   }, l.disableAutoload = async () => {
     if (n.modulePromise !== null) {
-      (await i(n)).disableAutoload(a);
+      (await i(n)).disableAutoload(t);
       return;
     }
-    C(a), S(!1, a);
+    C(t), S(!1, t);
     try {
-      window.localStorage.setItem(g(a), "0");
+      window.localStorage.setItem(g(t), "0");
     } catch {
     }
     try {
-      window.localStorage.removeItem(c(a));
+      window.localStorage.removeItem(d(t));
     } catch {
     }
-  }, e[t] = l;
+  }, e[o] = l;
 }
-function O(e, t) {
+function x(e, o) {
   A({
     show: async () => {
-      await i(e), t.open();
+      await i(e), o.open();
     },
     hide: async () => {
-      await i(e), t.close();
+      await i(e), o.close();
     },
     toggle: async () => {
-      await i(e), t.toggle();
+      await i(e), o.toggle();
     }
   });
 }
 (function() {
-  const t = T(), n = t.legacyIdRenameMap ? t : { ...t, legacyIdRenameMap: { ...k } }, o = h(n), a = u(), l = window, s = v(l, a.storagePrefix);
-  if (M(l, a.consoleNamespace, s, o, a), O(s, o), s.bound) return;
+  const o = v(), n = o.legacyIdRenameMap ? o : { ...o, legacyIdRenameMap: { ...k } }, a = h(n), t = u(), l = window, s = V(l, t.storagePrefix);
+  if (O(l, t.consoleNamespace, s, a, t), x(s, a), s.bound) return;
   s.bound = !0;
-  const p = g(a), f = y(a), m = P(a), w = b(a);
-  (D(p) || K(f, m, w) || I(a) || E(a)) && i(s);
+  const p = g(t), f = y(t), m = P(t), w = b(t);
+  (K(p) || M(f, m, w) || I(t) || E(t) || t.domTweaker !== void 0 && T(t)) && i(s);
 })();

package/dist/astro/index.js

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

package/dist/autoload-state-CFmRjtD-.js

@@ -0,0 +1,64 @@
+import { g as t, l as o } from "./panel-config-BNLlUc_r.js";
+function n(e = t()) {
+  return `${e.storagePrefix}-elpath-enabled`;
+}
+function c(e = t()) {
+  try {
+    return localStorage.getItem(n(e)) === "1";
+  } catch {
+    return !1;
+  }
+}
+function d(e, a = t()) {
+  try {
+    localStorage.setItem(n(a), e ? "1" : "0");
+  } catch {
+  }
+}
+function r(e = t()) {
+  return `${e.storagePrefix}-domtweaker-enabled`;
+}
+function u(e = t()) {
+  try {
+    return localStorage.getItem(r(e)) === "1";
+  } catch {
+    return !1;
+  }
+}
+function f(e, a = t()) {
+  try {
+    localStorage.setItem(r(a), e ? "1" : "0");
+  } catch {
+  }
+}
+function s(e) {
+  if (typeof window > "u") return !1;
+  try {
+    return window.localStorage.getItem(o(e)) === "1";
+  } catch {
+    return !1;
+  }
+}
+function i(e, a) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(o(e), a ? "1" : "0");
+    } catch {
+    }
+}
+function g(e) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.removeItem(o(e));
+    } catch {
+    }
+}
+export {
+  u as a,
+  i as b,
+  g as c,
+  d,
+  f as e,
+  c as l,
+  s
+};

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

@@ -60,6 +60,18 @@ import type { TabConfig } from '../tokens/tier-model';
  * (JSON-serializable constraint).
  */
 export type ApplyRoutingMap = Record<string, string>;
+/**
+ * DOM Tweaker opt-in config.
+ *
+ * Presence enables the eager-side DOM Tweaker scaffold. The object must stay
+ * pure JSON data because Astro serialises `PanelConfig` through an inline JSON
+ * script. `themeCss` is host-supplied Tailwind v4 theme CSS used by the lazy
+ * side to derive suggestions; `@import` is deliberately rejected by the
+ * validator so the lazy boundary never receives network-loading CSS.
+ */
+export interface DomTweakerConfig {
+    themeCss?: string;
+}
 /**
  * Apply sink interface — allows routing CSS-var writes somewhere other than
  * the host `:root` (e.g. a shadow root, an iframe document, or a spy in
@@ -129,6 +141,15 @@ export interface PanelConfig {
      * routing map).
      */
     applyRouting?: ApplyRoutingMap;
+    /**
+     * Optional DOM Tweaker feature config.
+     *
+     * Presence enables the header toggle and persisted revival path. The value
+     * is JSON-serializable only; the lazy DOM Tweaker boundary receives the
+     * specific scalar config values it needs instead of reading module-global
+     * panel config.
+     */
+    domTweaker?: DomTweakerConfig;
     /**
      * Host-supplied tab configuration for the data-driven tab strip.
      *

package/dist/controls/actions-menu-popover.d.ts

@@ -9,7 +9,7 @@
  * gear-settings popover's dialog + outside-click/Escape wiring instead
  * (usePopoverClose, shared with highlight/highlight-settings-popover.tsx).
  */
-import type { JSX } from 'preact';
+import type { ComponentChildren, JSX } from 'preact';
 export interface ActionsMenuAction {
     label: string;
     onSelect: () => void;
@@ -21,6 +21,7 @@ interface ActionsMenuPopoverProps {
     anchorRef: React.RefObject<HTMLElement | null>;
     actions: readonly ActionsMenuAction[];
     onClose: () => void;
+    children?: ComponentChildren;
 }
-export declare function ActionsMenuPopover({ anchorRef, actions, onClose, }: ActionsMenuPopoverProps): JSX.Element;
+export declare function ActionsMenuPopover({ anchorRef, actions, onClose, children, }: ActionsMenuPopoverProps): JSX.Element;
 export {};

package/dist/controls/help-icon.d.ts

@@ -1,6 +1,6 @@
 /**
- * HelpIcon — small round "?" badge that explains a nearby control via the
- * shared `.tokenpanel-tooltip--help` variant (issue #520).
+ * HelpIcon — small round "?" badge that explains a panel concept via the
+ * shared `.tokenpanel-tooltip--help` variant (issues #520 and #544).
  *
  * Chrome-button policy (CLAUDE.md): implemented as
  * `<div role="button" tabIndex={0}>` with explicit Enter/Space handling —
@@ -13,10 +13,8 @@
  *    hover, so a tap must be able to reveal and hold the tip. A second
  *    activation, or pressing Escape anywhere on the page, unpins it.
  *
- * Callers place this as a SIBLING of the control it explains (e.g. after a
- * `<select>`, or after a `<label>` wrapping a checkbox) — never nested
- * inside a `<label>`, where a click would also toggle the label's own
- * control.
+ * Callers must never nest this inside a `<label>`, where activating the icon
+ * would also toggle the label's control.
  *
  * Known trade-off: `tooltip.tsx` renders a single shared tooltip DOM node,
  * so pinning icon A then hovering/pinning icon B silently replaces A's
@@ -31,8 +29,7 @@
  * visible until the next activation. Same accepted single-tooltip trade-off.
  */
 import type { JSX } from 'preact';
-export declare const LITERAL_HELP_TEXT = "Literal sets a fixed color just for this token \u2014 it won't update if you edit a palette/ramp swatch later. Pick a ramp option to keep it linked live.";
-export declare const PER_MODE_HELP_TEXT = "Per-mode gives this token two colors \u2014 one for light mode, one for dark. The browser picks the right one automatically via CSS light-dark().";
+export declare const SEMANTIC_TOKENS_HELP_TEXT = "Ramp options stay linked live to palette edits. Literal sets a fixed color that is not linked. Per-mode sets independent light and dark colors emitted with CSS light-dark().";
 export interface HelpIconProps {
     /** The help text shown in the tooltip (wrapped, multi-line). */
     text: string;

package/dist/dom-tweaker/dom-tweaker-context.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DomTweakerContext — shared eager-side state for the DOM Tweaker feature.
+ *
+ * Provided by `DomTweakerOrchestrator`; consumed by the header toggle button.
+ * The lazy feature runtime is intentionally not exposed here yet — this slice
+ * only owns the enabled bit and the first-enable lazy-boundary trigger.
+ */
+export type DomTweakerRuntimeStatus = 'idle' | 'loading' | 'ready' | 'error';
+export interface DomTweakerContextValue {
+    /** Whether DOM Tweaker is enabled for this panel instance. */
+    enabled: boolean;
+    /** Enable / disable DOM Tweaker. */
+    setEnabled: (enabled: boolean) => void;
+    /** Toggle DOM Tweaker. */
+    toggle: () => void;
+    /** Page-lifetime Tailwind runtime status. */
+    runtimeStatus: DomTweakerRuntimeStatus;
+    /** Open the lazy diff-export modal from the header toggle area. */
+    openDiffExport: () => void;
+}
+export declare const DomTweakerContext: import("preact").Context<DomTweakerContextValue | null>;

package/dist/dom-tweaker/dom-tweaker-diff-action-link.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'preact';
+import type { PanelConfig } from '../config/panel-config';
+export interface DomTweakerDiffActionLinkProps {
+    instanceConfig: PanelConfig;
+    onSelected?: () => void;
+}
+export declare function DomTweakerDiffActionLink({ instanceConfig, onSelected, }: DomTweakerDiffActionLinkProps): JSX.Element | null;

package/dist/dom-tweaker/dom-tweaker-orchestrator.d.ts

@@ -0,0 +1,17 @@
+/**
+ * DomTweakerOrchestrator — eager-side scaffold for DOM Tweaker.
+ *
+ * Responsibilities:
+ *   1. Lifts and persists the `enabled` flag.
+ *   2. Provides DomTweakerContext to descendants (the header toggle button).
+ *   3. Enforces the document-global single-active-instance guard.
+ *   4. Creates the body-level portal mount for the future lazy UI/runtime.
+ *   5. Dynamically imports the lazy boundary on first enable and passes only
+ *      explicit scalar config values into that boundary.
+ */
+import type { ComponentChildren, JSX } from 'preact';
+import type { PanelConfig } from '../config/panel-config';
+export declare function DomTweakerOrchestrator({ children, instanceConfig, }: {
+    children: ComponentChildren;
+    instanceConfig: PanelConfig;
+}): JSX.Element;

package/dist/dom-tweaker/dom-tweaker-state.d.ts

@@ -0,0 +1,18 @@
+/**
+ * DOM Tweaker — persisted feature state.
+ *
+ * The eager shell owns one persisted bit: whether DOM Tweaker is enabled for
+ * this panel instance. The storage key is derived from PanelConfig at call
+ * time (never at module init), so a late `configurePanel({ storagePrefix })`
+ * is respected by no-arg callers.
+ */
+import { type PanelConfig } from '../config/panel-config';
+export declare function storageKey_domTweakerEnabled(cfg?: PanelConfig): string;
+/**
+ * Load the persisted enabled flag from localStorage. Defaults to `false` on
+ * missing storage, denied storage access, or any value other than the literal
+ * string `'1'`.
+ */
+export declare function loadDomTweakerEnabled(cfg?: PanelConfig): boolean;
+/** Persist the enabled flag to localStorage. Degrades silently when unavailable. */
+export declare function saveDomTweakerEnabled(enabled: boolean, cfg?: PanelConfig): void;

package/dist/dom-tweaker/dom-tweaker-toggle-button.d.ts

@@ -0,0 +1,9 @@
+/**
+ * DomTweakerToggleButton — header button that enables/disables DOM Tweaker.
+ *
+ * The full DOM editing UI/runtime lives behind the lazy boundary. This eager
+ * control only flips the persisted enabled bit and triggers the first lazy
+ * import through DomTweakerOrchestrator.
+ */
+import type { JSX } from 'preact';
+export declare function DomTweakerToggleButton(): JSX.Element | null;

package/dist/dom-tweaker/lazy/class-editor-popup.d.ts

@@ -0,0 +1,14 @@
+import type { JSX } from 'preact';
+import { type TrackedElementRect } from './pinned-selection-overlay';
+export interface ClassEditorPopupProps {
+    target: Element | null;
+    selectorSummary: string;
+    currentClasses: readonly string[];
+    suggestions: readonly string[];
+    onAddClass: (className: string) => void;
+    onRemoveClass: (className: string) => void;
+    onClose: () => void;
+    visible?: boolean;
+}
+export declare function computeClassEditorPosition(rect: TrackedElementRect): JSX.CSSProperties;
+export declare function ClassEditorPopup({ target, selectorSummary, currentClasses, suggestions, onAddClass, onRemoveClass, onClose, visible, }: ClassEditorPopupProps): JSX.Element | null;

package/dist/dom-tweaker/lazy/diff-export-modal.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'preact';
+import { type PanelConfig } from '../../config/panel-config';
+export interface DiffExportModalProps {
+    diffText: string;
+    onClose: () => void;
+    onCopy?: (text: string) => void | Promise<void>;
+    onResetAll: () => void;
+    instanceConfig?: PanelConfig;
+}
+export declare function DiffExportModal({ diffText, onClose, onCopy, onResetAll, instanceConfig, }: DiffExportModalProps): JSX.Element;

package/dist/dom-tweaker/lazy/edit-session.d.ts

@@ -0,0 +1,19 @@
+export interface EditSessionRecord {
+    selector: string;
+    summary: string;
+    originalClasses: string[];
+    currentClasses: string[];
+}
+export interface EditSessionDiff extends EditSessionRecord {
+    addedClasses: string[];
+    removedClasses: string[];
+    isConnected: boolean;
+}
+export declare function addClass(el: Element, cls: string): void;
+export declare function removeClass(el: Element, cls: string): void;
+export declare function resetElement(el: Element): void;
+export declare function resetAll(): void;
+export declare function getElementRecord(el: Element): EditSessionRecord | null;
+export declare function getSessionRecords(): EditSessionRecord[];
+export declare function getSessionDiff(): EditSessionDiff[];
+export declare function formatSessionDiff(): string;

package/dist/dom-tweaker/lazy/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * DOM Tweaker lazy boundary.
+ *
+ * The eager orchestrator dynamically imports this boundary on first enable. This
+ * file owns every heavy dependency and browser-only surface: Tailwind browser
+ * runtime startup, Alt-click picking, pinned selection, class editing, and
+ * diff export. The eager side passes scalar config values explicitly so the
+ * lazy boundary does not read global panel config.
+ */
+import type { JSX } from 'preact';
+import type { DomTweakerRuntimeStatus } from '../dom-tweaker-context';
+export { buildStaticSuggestions, buildSuggestions, buildThemeSuggestions, filterSuggestions, STATIC_SUGGESTIONS, } from './suggestions';
+export interface DomTweakerLazyBoundaryProps {
+    enabled: boolean;
+    storagePrefix: string;
+    themeCss?: string;
+    consoleNamespace: string;
+    modalClassPrefix: string;
+    showDiffExport: boolean;
+    onCloseDiffExport: () => void;
+    onRuntimeStatusChange: (status: DomTweakerRuntimeStatus) => void;
+    onArmingRevoked: () => void;
+}
+export declare function DomTweakerLazyBoundary({ enabled, storagePrefix, themeCss, consoleNamespace, modalClassPrefix, showDiffExport, onCloseDiffExport, onRuntimeStatusChange, onArmingRevoked, }: DomTweakerLazyBoundaryProps): JSX.Element | null;

package/dist/dom-tweaker/lazy/pinned-selection-overlay.d.ts

@@ -0,0 +1,31 @@
+import type { JSX } from 'preact';
+export interface TrackedElementRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface PinnedSelectionOverlayProps {
+    /** Element picked by the DOM Tweaker coordinator. */
+    target: Element | null;
+    /** Defaults to true. Passing false keeps the component mounted but inert. */
+    visible?: boolean;
+    /** Fired once when the pinned element leaves the document. */
+    onTargetDisconnected?: () => void;
+}
+export interface EditIconButtonProps {
+    /** Element picked by the DOM Tweaker coordinator. */
+    target: Element | null;
+    /** Defaults to true. Passing false keeps the component mounted but inert. */
+    visible?: boolean;
+    /** Opens the class editor popover. */
+    onOpenEditor: () => void;
+    /** Accessible label for the icon-only control. */
+    label?: string;
+}
+export declare function useTrackedElementRect(target: Element | null, visible?: boolean, onTargetDisconnected?: () => void): TrackedElementRect | null;
+export declare function rectToFixedStyle(rect: TrackedElementRect): JSX.CSSProperties;
+export declare function PinnedSelectionOverlay({ target, visible, onTargetDisconnected, }: PinnedSelectionOverlayProps): JSX.Element | null;
+export declare function EditIconButton({ target, visible, onOpenEditor, label, }: EditIconButtonProps): JSX.Element | null;

package/dist/dom-tweaker/lazy/style-injection.d.ts

@@ -0,0 +1,2 @@
+export declare const DOM_TWEAKER_STYLE_ID = "tokenpanel-domtweaker-style";
+export declare function ensureDomTweakerStyles(doc?: Document): HTMLStyleElement;

package/dist/dom-tweaker/lazy/suggestions.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Pure Tailwind-class suggestion generation for the DOM Tweaker lazy chunk.
+ *
+ * This module deliberately has no DOM reads, IO, global state mutation, or
+ * eager package-root export. The prototype-sized static list lives behind the
+ * DOM Tweaker lazy boundary, and callers may merge in host `@theme` CSS when
+ * the tweaker runtime is already active.
+ */
+/**
+ * Prototype-sized static Tailwind candidate list, carried forward from the
+ * DOM Tweaker feasibility prototype's `buildSuggestions()` coverage.
+ */
+export declare function buildStaticSuggestions(): string[];
+export declare const STATIC_SUGGESTIONS: readonly string[];
+/**
+ * Derive DOM Tweaker candidates from Tailwind v4 `@theme` custom properties.
+ *
+ * Supported namespaces:
+ * - `--color-X` -> `bg-X`, `text-X`, `border-X`
+ * - `--spacing-X` -> spacing-family utilities such as `p-X`, `px-X`,
+ *   `gap-X`, `w-X`, `space-x-X`, etc.
+ *
+ * Unknown namespaces are ignored.
+ */
+export declare function buildThemeSuggestions(themeCss: string): string[];
+/**
+ * Build the full suggestion list from the static prototype list and optional
+ * host theme CSS. The result is always sorted and deduped.
+ */
+export declare function buildSuggestions(themeCss?: string): string[];
+export declare function filterSuggestions(query: string, limit: number): string[];
+export declare function filterSuggestions(query: string, limit: number, suggestions: readonly string[]): string[];

package/dist/dom-tweaker/lazy/tailwind-runtime.d.ts

@@ -0,0 +1,20 @@
+export interface RuntimeOptions {
+    readonly themeCss?: string;
+}
+export type RuntimeStartMode = 'module-import' | 'blob-script';
+export interface RuntimeHandle {
+    readonly ready: true;
+    readonly startMode: RuntimeStartMode;
+    readonly styleElement: HTMLStyleElement;
+    readonly themeCss: string;
+}
+/**
+ * Starts the DOM Tweaker Tailwind runtime once per page.
+ *
+ * There is intentionally no teardown API in v1. `@tailwindcss/browser` installs
+ * document-level MutationObservers and appends its generated utility stylesheet
+ * without exposing a public cleanup hook. Reusing the first promise avoids
+ * stacking observers/styles across panel open-close cycles, and matches the
+ * runtime's page-lifetime design.
+ */
+export declare function ensureRuntime(opts?: RuntimeOptions): Promise<RuntimeHandle>;

package/dist/element-path/inspector-overlay.d.ts

@@ -2,18 +2,17 @@
  * InspectorOverlay — the interactive heart of Element Path Copy.
  *
  * Behaviour (only while the feature is `enabled`):
- *   1. Holding **Alt** arms the inspector. While Alt is down, the element under
- *      the cursor is resolved via `document.elementFromPoint` (panel surfaces
- *      excluded) and drawn with a DevTools-style box + an attached label tag
- *      (`tag#id.class  W × H`) on its top-left edge.
+ *   1. Holding **Alt** arms the inspector via the shared AltClickPicker
+ *      primitive. While Alt is down, the element under the cursor is resolved
+ *      via `document.elementFromPoint` (panel surfaces excluded) and drawn with
+ *      a DevTools-style box + attached label tag (`tag#id.class  W × H`).
  *   2. **Clicking** while armed copies the annotated path block for that element
  *      to the clipboard (the click is swallowed so host links/handlers don't
  *      fire) and shows a transient top-center toast.
  *
- * Rendering follows the highlight-overlay convention: the box + label positions
- * are written imperatively from a RAF loop (so they track scroll/reflow without
- * a Preact re-render per frame). Preact only re-renders when the hovered element
- * or armed/toast state changes.
+ * Rendering follows the highlight-overlay convention inside AltClickPicker: the
+ * box + label positions are written imperatively from a RAF loop (so they track
+ * scroll/reflow without a Preact re-render per frame).
  *
  * Self-contained — does NOT own its portal mount; the orchestrator decides where
  * in the DOM this renders.
@@ -22,5 +21,7 @@ import type { JSX } from 'preact';
 export interface InspectorOverlayProps {
     /** Whether inspect mode is enabled. When false the overlay is fully inert. */
     enabled: boolean;
+    /** Called when another real picker feature takes coordinator ownership. */
+    onArmingRevoked?: () => void;
 }
-export declare function InspectorOverlay({ enabled }: InspectorOverlayProps): JSX.Element | null;
+export declare function InspectorOverlay({ enabled, onArmingRevoked, }: InspectorOverlayProps): JSX.Element | null;

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

@@ -75,13 +75,14 @@ export interface FindElementsOptions {
  */
 export declare const HIGHLIGHT_PORTAL_MOUNT_ID = "tokenpanel-highlight-mount";
 export declare const ELPATH_PORTAL_MOUNT_ID = "tokenpanel-elpath-mount";
+export declare const DOM_TWEAKER_PORTAL_MOUNT_ID = "tokenpanel-domtweaker-mount";
 /**
  * Selector matching every panel-owned surface that must NEVER be treated as a
- * host element (the shell, modals, and the highlight/element-path portal mounts).
- * Exported so the Element Path Copy inspector can skip the same surfaces when
+ * host element (the shell, modals, and the highlight/element-path/dom-tweaker
+ * portal mounts). Exported so picker features can skip the same surfaces when
  * resolving the element under the cursor.
  */
-export declare const PANEL_EXCLUSION_SELECTOR = ".tokenpanel-shell, [data-design-token-panel-modal], #tokenpanel-highlight-mount, #tokenpanel-elpath-mount";
+export declare const PANEL_EXCLUSION_SELECTOR = ".tokenpanel-shell, [data-design-token-panel-modal], #tokenpanel-highlight-mount, #tokenpanel-elpath-mount, #tokenpanel-domtweaker-mount";
 /**
  * Find all DOM elements whose computed style reflects the given CSS custom
  * property.