@takazudo/zdtp 0.5.1 → 0.5.2

package/dist/{index-D4NR_eYT.js → index-ChsJ5u4d.js}

@@ -3,9 +3,9 @@ import { createContext as lt, Fragment as Xe, render as Za } from "preact";
 import { useRef as U, useCallback as L, useState as J, useMemo as G, useEffect as oe, useId as vn, useLayoutEffect as Qa, useContext as xn, createPortal as Vt, forwardRef as Ql, memo as St } from "preact/compat";
 import { i as bt, c as fn, d as vt, e as ht, s as tr, f as Fe, n as nr, h as ei, j as Kt, o as ot, k as ti, m as es, p as xo, q as Le, r as dt, M as or, t as rr, u as ts, v as yn, w as cn, x as Or, y as ns, z as rn, A as Wn, B as Br, C as Vo, D as Vr, E as os, F as rs, G as as, H as is, g as dn, I as ls, J as ss, K as An, L as cs, N as ds, O as jr, P as ps, Q as us, R as yo, l as jo, S as Fo, T as ni, U as ks, V as hs, W as an, X as fs, Y as ms, _ as No, $ as Fr, a0 as gs, a1 as Hr, a2 as Co, a3 as ws, a4 as bs, b as vs } from "./tweak-state-c53KtLHq.js";
 import { B as Un, x as je, C as Ct, q as oi, p as ar, A as ir, g as Ee, D as xs, m as le, o as ys, E as Ns, F as ri, G as ai, H as Cs, I as ii, a as li, J as si, K as Ss, i as Es, L as $s, M as Is, N as lr, O as ci, P as Ts, Q as di } from "./panel-config-CqbuB0nh.js";
-import { c as _s } from "./color-schemes-CgzOBqGO.js";
-import { r as zs } from "./route-tokens-to-files-1DvmWBdj.js";
-import { useContext as st, useCallback as te, useRef as $e, useEffect as ye, useState as _e, useMemo as Ve, useImperativeHandle as As } from "preact/hooks";
+import { c as zs } from "./color-schemes-CgzOBqGO.js";
+import { r as _s } from "./route-tokens-to-files-1DvmWBdj.js";
+import { useContext as st, useCallback as te, useRef as $e, useEffect as ye, useState as ze, useMemo as Ve, useImperativeHandle as As } from "preact/hooks";
 import { e as Pe, l as pi, b as qn, a as ui, f as Ls, s as ki, r as sr, c as Ms, g as Ps } from "./autoload-state-BI4-9A58.js";
 import { f as Rs } from "./manifest-DvuKi7I4.js";
 import { DEFAULT_TOGGLE_EVENT as Ds } from "./constants.js";
@@ -371,8 +371,8 @@ function xi(e, t, n, o) {
         o.push(`${g.id}.raw.${C} is not a non-empty string; ignored.`);
         continue;
       }
-      const _ = S[E.tierId] ?? (S[E.tierId] = {});
-      _[E.itemId] = A, M = !0;
+      const z = S[E.tierId] ?? (S[E.tierId] = {});
+      z[E.itemId] = A, M = !0;
     }
     M && (f || (f = {}), f[g.id] = S);
   }
@@ -635,7 +635,7 @@ function ur(e = Ee()) {
 }
 function rc(e, t) {
   if (t) return t;
-  const n = Object.values(_s)[0];
+  const n = Object.values(zs)[0];
   return n ? ei(n) : e;
 }
 function ac({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
@@ -799,8 +799,8 @@ function ic({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
         console.groupCollapsed(
           `[design-token-serde] ${S.length} unknown token${S.length === 1 ? "" : "s"} ignored while loading JSON`
         );
-        for (const _ of S)
-          console.warn(_);
+        for (const z of S)
+          console.warn(z);
         console.groupEnd();
       }
       M.length > 0 && console.warn("[design-token-serde] warnings:", M), t(T);
@@ -1087,15 +1087,15 @@ function yi(e, t, n) {
 function fc(e) {
   const { state: t, open: n, onClose: o, colorDefaults: r, onApplied: a } = e, s = e.instanceConfig ?? Ee(), l = G(() => kc(s), [s]), p = U(null), c = U(null), d = `${s.modalClassPrefix}-apply-title-${vn()}`, [u, k] = J({ kind: "preview" }), f = U(u);
   f.current = u;
-  const [g, m] = J(null), [b, T] = J(null), [S, M] = J(null), [C, A] = J(!1), [E, _] = J(/* @__PURE__ */ new Set()), [B, P] = J(0), [x, y] = J(null), [N, w] = J("Copy pre-apply state to clipboard"), q = U(0), $ = U(null), V = U(null), R = U(!1), X = U(!1), z = G(() => yi(t, r, s), [t, r, s]), W = G(() => Ns(s), [s]), Y = G(() => zs(z, W), [z, W]), re = s.applyEndpoint, K = ri(s);
+  const [g, m] = J(null), [b, T] = J(null), [S, M] = J(null), [C, A] = J(!1), [E, z] = J(/* @__PURE__ */ new Set()), [B, P] = J(0), [x, y] = J(null), [N, w] = J("Copy pre-apply state to clipboard"), q = U(0), $ = U(null), V = U(null), R = U(!1), X = U(!1), _ = G(() => yi(t, r, s), [t, r, s]), W = G(() => Ns(s), [s]), Y = G(() => _s(_, W), [_, W]), re = s.applyEndpoint, K = ri(s);
   oe(() => {
     const Q = p.current;
     Q && (n && !Q.open ? (typeof Q.showModal == "function" ? Q.showModal() : Q.setAttribute("open", ""), requestAnimationFrame(() => c.current?.focus())) : !n && Q.open && (typeof Q.close == "function" ? Q.close() : Q.removeAttribute("open")));
   }, [n]), oe(() => {
     if (!n) return;
     const Q = Y.groups.flatMap((ie) => Object.keys(ie.tokens));
-    k({ kind: "preview" }), m(null), $.current = null, T(null), M(null), _(new Set(Q)), P(0), y(null), w("Copy pre-apply state to clipboard"), q.current++, V.current = null, R.current = !1, X.current = !1, K && Object.keys(z).length > 0 && (V.current = F(z));
-  }, [n, z, Y]);
+    k({ kind: "preview" }), m(null), $.current = null, T(null), M(null), z(new Set(Q)), P(0), y(null), w("Copy pre-apply state to clipboard"), q.current++, V.current = null, R.current = !1, X.current = !1, K && Object.keys(_).length > 0 && (V.current = F(_));
+  }, [n, _, Y]);
   async function F(Q, ie) {
     if (!re || Object.keys(Q).length === 0) return null;
     const be = ++q.current;
@@ -1113,7 +1113,7 @@ function fc(e) {
   }
   oe(() => {
     if (!n || !K || u.kind !== "preview" || B === 0) return;
-    const Q = Object.fromEntries(Object.entries(z).filter(([be]) => E.has(be)));
+    const Q = Object.fromEntries(Object.entries(_).filter(([be]) => E.has(be)));
     if (Object.keys(Q).length === 0) {
       q.current++, V.current = null, $.current = null, R.current = !1, m(null), A(!1);
       return;
@@ -1122,7 +1122,7 @@ function fc(e) {
       V.current = F(Q);
     }, uc);
     return () => clearTimeout(ie);
-  }, [n, K, u.kind, z, E, B]);
+  }, [n, K, u.kind, _, E, B]);
   function ne() {
     const Q = f.current;
     Q.kind === "success" && !X.current && (X.current = !0, a(Q.written)), o();
@@ -1135,7 +1135,7 @@ function fc(e) {
   const ke = cr(p, ce);
   async function Z() {
     if (!re || C || R.current) return;
-    const Q = Object.fromEntries(Object.entries(z).filter(([ie]) => E.has(ie)));
+    const Q = Object.fromEntries(Object.entries(_).filter(([ie]) => E.has(ie)));
     k({ kind: "applying" });
     try {
       const ie = await (V.current ?? Promise.resolve($.current)), be = Object.fromEntries((ie?.files ?? []).filter((O) => O.file && O.digest).map((O) => [O.file, O.digest])), Ne = await fetch(re, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ tokens: Q, expectDigests: be }) }), ve = await Ne.json();
@@ -1153,8 +1153,8 @@ function fc(e) {
       k({ kind: "error", message: `Network error: ${ie instanceof Error ? ie.message : String(ie)}` });
     }
   }
-  const de = b?.files ?? g?.files ?? Y.groups.map((Q) => ({ file: Q.relativePath, blockKind: Q.prefix, changed: Object.keys(Q.tokens), hunks: [] })), ze = b?.rejected ?? g?.rejected ?? Y.rejected, j = b?.rejectedReasons ?? g?.rejectedReasons ?? Y.rejectedReasons, ae = de.find((Q) => Q.file === x) ?? de[0], pe = de.filter((Q) => Q.changed?.some((ie) => E.has(ie))).length, fe = !K || C || E.size === 0 || pe === 0, we = (Q, ie) => {
-    q.current++, V.current = null, $.current = null, R.current = K, K && A(!0), _((be) => {
+  const de = b?.files ?? g?.files ?? Y.groups.map((Q) => ({ file: Q.relativePath, blockKind: Q.prefix, changed: Object.keys(Q.tokens), hunks: [] })), _e = b?.rejected ?? g?.rejected ?? Y.rejected, j = b?.rejectedReasons ?? g?.rejectedReasons ?? Y.rejectedReasons, ae = de.find((Q) => Q.file === x) ?? de[0], pe = de.filter((Q) => Q.changed?.some((ie) => E.has(ie))).length, fe = !K || C || E.size === 0 || pe === 0, we = (Q, ie) => {
+    q.current++, V.current = null, $.current = null, R.current = K, K && A(!0), z((be) => {
       const Ne = new Set(be);
       for (const ve of Q)
         ie ? Ne.add(ve) : Ne.delete(ve);
@@ -1186,11 +1186,11 @@ function fc(e) {
             {
               cls: l,
               configured: K,
-              overrides: z,
+              overrides: _,
               files: de,
               activeFile: ae,
               selected: E,
-              rejected: ze,
+              rejected: _e,
               rejectedReasons: j,
               notice: S,
               loading: C,
@@ -1364,13 +1364,14 @@ function ue({
   id: l,
   title: p,
   "aria-label": c,
-  "data-testid": d
+  "data-testid": d,
+  "data-zdtp-action": u
 }) {
-  function u(f) {
-    (f.key === "Enter" || f.key === " ") && (f.preventDefault(), o || t(f));
+  function k(g) {
+    (g.key === "Enter" || g.key === " ") && (g.preventDefault(), o || t(g));
   }
-  function k(f) {
-    o || t(f);
+  function f(g) {
+    o || t(g);
   }
   return /* @__PURE__ */ i(
     "div",
@@ -1379,13 +1380,14 @@ function ue({
       ref: s,
       tabIndex: a,
       className: n,
-      onClick: k,
-      onKeyDown: u,
+      onClick: f,
+      onKeyDown: k,
       "aria-disabled": o,
       id: l,
       title: p,
       "aria-label": c,
       "data-testid": d,
+      "data-zdtp-action": u,
       ...r,
       children: e
     }
@@ -1443,21 +1445,21 @@ function qr({
   M.current = p;
   const C = U(c);
   C.current = c;
-  function A(_) {
+  function A(z) {
     const B = g.current;
     if (!B) return null;
     const P = B.getBoundingClientRect();
     if (P.width === 0) return null;
-    const x = Rn((_ - P.left) / P.width, 0, 1), y = M.current + x * (C.current - M.current), N = Sc(y, M.current, k.current);
+    const x = Rn((z - P.left) / P.width, 0, 1), y = M.current + x * (C.current - M.current), N = Sc(y, M.current, k.current);
     return Rn(N, M.current, C.current);
   }
   oe(() => {
-    const _ = g.current;
-    if (!_) return;
+    const z = g.current;
+    if (!z) return;
     function B(N) {
       f.current = !0, T.current();
       try {
-        _.setPointerCapture(N.pointerId);
+        z.setPointerCapture(N.pointerId);
       } catch {
       }
       const w = A(N.clientX);
@@ -1472,7 +1474,7 @@ function qr({
       if (f.current) {
         f.current = !1;
         try {
-          _.releasePointerCapture(N.pointerId);
+          z.releasePointerCapture(N.pointerId);
         } catch {
         }
         S.current();
@@ -1482,39 +1484,39 @@ function qr({
       if (f.current) {
         f.current = !1;
         try {
-          _.releasePointerCapture(N.pointerId);
+          z.releasePointerCapture(N.pointerId);
         } catch {
         }
         S.current();
       }
     }
-    return _.addEventListener("pointerdown", B), _.addEventListener("pointermove", P), _.addEventListener("pointerup", x), _.addEventListener("pointercancel", y), () => {
-      _.removeEventListener("pointerdown", B), _.removeEventListener("pointermove", P), _.removeEventListener("pointerup", x), _.removeEventListener("pointercancel", y);
+    return z.addEventListener("pointerdown", B), z.addEventListener("pointermove", P), z.addEventListener("pointerup", x), z.addEventListener("pointercancel", y), () => {
+      z.removeEventListener("pointerdown", B), z.removeEventListener("pointermove", P), z.removeEventListener("pointerup", x), z.removeEventListener("pointercancel", y);
     };
   }, []);
   const E = L(
-    (_) => {
+    (z) => {
       const B = d * 10;
       let P = 0;
-      switch (_.key) {
+      switch (z.key) {
         case "ArrowRight":
         case "ArrowUp":
-          P = _.shiftKey ? B : d;
+          P = z.shiftKey ? B : d;
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          P = _.shiftKey ? -B : -d;
+          P = z.shiftKey ? -B : -d;
           break;
         case "Home":
-          o(p), _.preventDefault();
+          o(p), z.preventDefault();
           return;
         case "End":
-          o(c), _.preventDefault();
+          o(c), z.preventDefault();
           return;
         default:
           return;
       }
-      _.preventDefault(), o(Rn(t + P, p, c));
+      z.preventDefault(), o(Rn(t + P, p, c));
     },
     [t, p, c, d, o]
   );
@@ -1587,7 +1589,7 @@ function kr(e) {
     o !== -1 && gt.splice(o, 1);
   };
 }
-const Ni = "tokenpanel.colorPicker.mode", Ko = [95, 78, 61, 44, 27, 10], _c = [0, 60, 120, 180, 240, 300], zc = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330], Ac = 0.18, Lc = 320, Mc = 400, Pc = 520, Rc = 440;
+const Ni = "tokenpanel.colorPicker.mode", Ko = [95, 78, 61, 44, 27, 10], zc = [0, 60, 120, 180, 240, 300], _c = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330], Ac = 0.18, Lc = 320, Mc = 400, Pc = 520, Rc = 440;
 function Dc() {
   return [
     {
@@ -1753,7 +1755,7 @@ function fr({
     null
   ), S = U(null), M = U(!1), [C, A] = J(
     () => Bc(r)
-  ), [E, _] = J("mini"), [B, P] = J(m);
+  ), [E, z] = J("mini"), [B, P] = J(m);
   oe(() => {
     (/^#[0-9a-fA-F]{6}$/.test(B) || /^#[0-9a-fA-F]{8}$/.test(B)) && P(m);
   }, [m]), Nn(p, s, a);
@@ -1804,7 +1806,7 @@ function fr({
     [y, l, w, N]
   ), V = (j) => {
     P(j), (/^#[0-9a-fA-F]{6}$/.test(j) || /^#[0-9a-fA-F]{8}$/.test(j)) && N(j);
-  }, R = E === "expanded" ? zc : _c, X = L(
+  }, R = E === "expanded" ? _c : zc, X = L(
     (j, ae) => {
       const pe = Yr(j, ae, x.a, R);
       if (l)
@@ -1815,7 +1817,7 @@ function fr({
       }
     },
     [x.a, R, l, w, N]
-  ), z = L(
+  ), _ = L(
     (j, ae, pe) => {
       let fe = ae, we = pe;
       if (j.key === "ArrowRight")
@@ -1913,14 +1915,14 @@ function fr({
     d.current = !0;
   }, []), de = L(() => {
     d.current = !1;
-  }, []), ze = b ? { position: "fixed", left: b.left, top: b.top } : F;
+  }, []), _e = b ? { position: "fixed", left: b.left, top: b.top } : F;
   return /* @__PURE__ */ h(
     "div",
     {
       ref: p,
       className: "tokenpanel-color-picker",
       "data-mode-shell": E,
-      style: ze,
+      style: _e,
       role: "dialog",
       "aria-label": o ? `${o} color picker` : "Color picker",
       children: [
@@ -1982,9 +1984,9 @@ function fr({
               className: "tokenpanel-color-picker-expand-btn",
               "aria-label": E === "mini" ? "Expand picker" : "Collapse picker",
               "aria-expanded": E === "expanded",
-              onClick: () => _(E === "mini" ? "expanded" : "mini"),
+              onClick: () => z(E === "mini" ? "expanded" : "mini"),
               onKeyDown: (j) => {
-                (j.key === "Enter" || j.key === " ") && (j.preventDefault(), _(E === "mini" ? "expanded" : "mini"));
+                (j.key === "Enter" || j.key === " ") && (j.preventDefault(), z(E === "mini" ? "expanded" : "mini"));
               },
               children: E === "mini" ? "⤢" : "⤡"
             }
@@ -2048,7 +2050,7 @@ function fr({
                   style: { background: ie },
                   tabIndex: ae === 0 && fe === 0 ? 0 : -1,
                   onClick: () => X(ae, fe),
-                  onKeyDown: (Re) => z(Re, ae, fe)
+                  onKeyDown: (Re) => _(Re, ae, fe)
                 },
                 `${ae}-${fe}`
               );
@@ -2600,7 +2602,7 @@ const Jn = {
     longhands: ["mask-image"],
     compounds: ["mask-image"]
   }
-}, Dn = [null, "::before", "::after"], Ti = "tokenpanel-highlight-mount", _i = "tokenpanel-elpath-mount", zi = "tokenpanel-domtweaker-mount", Ai = "tokenpanel-element-inspect-mount", Xc = "[data-zdtp-specimen]", to = `.tokenpanel-shell, [data-design-token-panel-modal], .tokenpanel-chain-popover, #${Ti}, #${_i}, #${zi}, #${Ai}, ${Xc}`, Zc = /^(transparent|currentcolor|currentColor|inherit|initial|unset|red|blue|green|black|white|gray|grey|silver|yellow|orange|purple|pink|brown|cyan|magenta|lime|olive|navy|maroon|teal|aqua|fuchsia|coral|salmon|gold|khaki|violet|indigo|crimson|lavender|beige|ivory|chocolate|tomato|orchid|plum|turquoise|tan|sienna|peru|papayawhip|peachpuff|moccasin|mistyrose|linen|lemonchiffon|honeydew|gainsboro)$/i, Qc = /^(rgb|rgba|hsl|hsla|color|oklch|hwb|lab|lch)\(/i, ed = /^#/, td = /^-?(?:\d+\.?\d*|\.\d+)(px|rem|em|vh|vw|vmin|vmax|pt|pc|in|cm|mm|ex|ch|fr|%)$/, nd = /^-?\d+(\.\d+)?$/, od = /^(cubic-bezier|steps|linear)\(/i, rd = /^-?(?:\d+\.?\d*|\.\d+)(ms|s)$/i, ad = /^".*"$/, id = /^url\(/i;
+}, Dn = [null, "::before", "::after"], Ti = "tokenpanel-highlight-mount", zi = "tokenpanel-elpath-mount", _i = "tokenpanel-domtweaker-mount", Ai = "tokenpanel-element-inspect-mount", Xc = "[data-zdtp-specimen]", to = `.tokenpanel-shell, [data-design-token-panel-modal], .tokenpanel-chain-popover, #${Ti}, #${zi}, #${_i}, #${Ai}, ${Xc}`, Zc = /^(transparent|currentcolor|currentColor|inherit|initial|unset|red|blue|green|black|white|gray|grey|silver|yellow|orange|purple|pink|brown|cyan|magenta|lime|olive|navy|maroon|teal|aqua|fuchsia|coral|salmon|gold|khaki|violet|indigo|crimson|lavender|beige|ivory|chocolate|tomato|orchid|plum|turquoise|tan|sienna|peru|papayawhip|peachpuff|moccasin|mistyrose|linen|lemonchiffon|honeydew|gainsboro)$/i, Qc = /^(rgb|rgba|hsl|hsla|color|oklch|hwb|lab|lch)\(/i, ed = /^#/, td = /^-?(?:\d+\.?\d*|\.\d+)(px|rem|em|vh|vw|vmin|vmax|pt|pc|in|cm|mm|ex|ch|fr|%)$/, nd = /^-?\d+(\.\d+)?$/, od = /^(cubic-bezier|steps|linear)\(/i, rd = /^-?(?:\d+\.?\d*|\.\d+)(ms|s)$/i, ad = /^".*"$/, id = /^url\(/i;
 function Li(e, t) {
   const n = getComputedStyle(document.documentElement).getPropertyValue(e).trim();
   return n ? Qc.test(n) || ed.test(n) || Zc.test(n) ? "color" : td.test(n) ? "length" : nd.test(n) ? "number" : od.test(n) ? "easing" : rd.test(n) ? "time" : ad.test(n) ? "content" : (id.test(n) && t.push(
@@ -2790,8 +2792,8 @@ function Jr(e, t) {
     for (const C of c) {
       const A = S.get(C);
       for (let E = 0; E < Dn.length; E++) {
-        const _ = Xn(C, Dn[E], b);
-        if (ld(A[E], _) !== null) {
+        const z = Xn(C, Dn[E], b);
+        if (ld(A[E], z) !== null) {
           d.add(C);
           break;
         }
@@ -2874,7 +2876,7 @@ function pd({ items: e }) {
   }) });
 }
 function no(e) {
-  const t = $e(null), [, n] = _e(0);
+  const t = $e(null), [, n] = ze(0);
   return ye(() => {
     function o() {
       if (!Pe() || !document.body) return null;
@@ -2950,7 +2952,7 @@ function gd({
   const n = t ?? Ee(), o = Ve(() => Jt(n), [n]), r = Ve(
     () => kd(n, o),
     [n, o]
-  ), [a, s] = _e(() => Jc(n)), [l, p] = _e(0), [c, d] = _e(0), u = $e(/* @__PURE__ */ new Map()), [k, f] = _e({});
+  ), [a, s] = ze(() => Jc(n)), [l, p] = ze(0), [c, d] = ze(0), u = $e(/* @__PURE__ */ new Map()), [k, f] = ze({});
   ye(() => {
     u.current.clear(), f({});
   }, [n.storagePrefix]);
@@ -3018,18 +3020,18 @@ function gd({
   const M = te((x) => {
     const y = `${n.storagePrefix}|${x}|${l}|${c}`, N = u.current.get(y);
     if (N) {
-      if (N.elements.every((z) => z.isConnected))
+      if (N.elements.every((_) => _.isConnected))
         return N;
       u.current.delete(y);
     }
     const w = r.get(x), q = ud(w), $ = q ? { kind: q } : {};
     let V, R;
     if (fd(w)) {
-      const z = Jr(x, { ...$, mode: "differential" });
-      V = z.elements, R = z.warnings;
+      const _ = Jr(x, { ...$, mode: "differential" });
+      V = _.elements, R = _.warnings;
     } else {
-      const z = Jr(x, $);
-      V = z.elements, R = z.warnings;
+      const _ = Jr(x, $);
+      V = _.elements, R = _.warnings;
     }
     const X = { elements: V, warnings: R };
     return u.current.set(y, X), X;
@@ -3044,7 +3046,7 @@ function gd({
     C(N);
     const w = N.elements.length, q = Be(x);
     return f(($) => $[q] === w && $[y.cssVar] === w ? $ : { ...$, [q]: w, [y.cssVar]: w }), w;
-  }, [C, M, o]), { items: E, matchCounts: _ } = Ve(() => {
+  }, [C, M, o]), { items: E, matchCounts: z } = Ve(() => {
     const x = [], y = {};
     for (const [N, w] of Object.entries(a.active)) {
       const q = M(N);
@@ -3062,8 +3064,8 @@ function gd({
     f({});
   }, [l, c]);
   const B = Ve(
-    () => ({ ...k, ..._ }),
-    [_, k]
+    () => ({ ...k, ...z }),
+    [z, k]
   ), P = Ve(
     () => ({
       state: a,
@@ -3129,7 +3131,7 @@ function Oi(e, t) {
 function Bi(e, t, n) {
   return Oi(t, e.address.tabId)?.semanticMappings[e.address.itemId] ?? (e.address.tabId, void 0)?.semanticMappings[e.address.itemId] ?? e.default;
 }
-function _o(e, t, n, o) {
+function zo(e, t, n, o) {
   return e.find(
     (r) => r.address.tabId === t && r.address.tierId === n && r.address.itemId === o
   )?.address;
@@ -3158,7 +3160,7 @@ function vd(e, t, n) {
         if (ht(k))
           l(
             c.address,
-            _o(
+            zo(
               o.entries,
               k.ref.tab ?? d.id,
               k.ref.tier,
@@ -3173,7 +3175,7 @@ function vd(e, t, n) {
           );
           if (!f || !g || g.items.length === 0) continue;
           const m = k === "bg" ? f.background : k === "fg" ? f.foreground : k, b = g.items[tr(m, g.items.length)];
-          l(c.address, _o(o.entries, d.id, g.id, b.id));
+          l(c.address, zo(o.entries, d.id, g.id, b.id));
         }
         continue;
       }
@@ -3181,7 +3183,7 @@ function vd(e, t, n) {
         const k = c.address.tabId === "spacing" ? t.spacing[c.address.itemId] : c.address.tabId === "font" ? t.typography[c.address.itemId] : c.address.tabId === "size" ? t.size[c.address.itemId] : t.tabs?.[d.id]?.[u.id]?.[c.address.itemId], f = d.tiers.find((b) => b.id === u.referencesTier);
         if (!f || f.items.length === 0) continue;
         const g = k ?? c.address.itemId, m = f.items.find((b) => b.id === g) ?? f.items.find((b) => b.id === c.default) ?? f.items.find((b) => b.id === c.address.itemId) ?? f.items[0];
-        l(c.address, _o(o.entries, d.id, f.id, m.id));
+        l(c.address, zo(o.entries, d.id, f.id, m.id));
       }
     }
   }
@@ -3292,10 +3294,10 @@ function Sd({
   anchorRef: t,
   onClose: n
 }) {
-  const o = ji(), r = st(eo), a = $e(null), [s, l] = _e(void 0), [p, c] = _e(void 0), d = Be(e);
+  const o = ji(), r = st(eo), a = $e(null), [s, l] = ze(void 0), [p, c] = ze(void 0), d = Be(e);
   Nn(a, n, t), yt(`token-chain-${d}`, !0);
   const u = o ? ln(o.graph.entries, e) : void 0, k = u ? o.graph.resolutionChain(e) : [], f = u ? o.graph.dependentsOf(e) : [], g = u ? o.graph.rampSiblings(e) : [], m = Nd(k), b = r?.requestMatchCount, T = te(
-    (E, _) => b ? b(E) : r?.matchCounts?.[_.cssVar],
+    (E, z) => b ? b(E) : r?.matchCounts?.[z.cssVar],
     [r?.matchCounts, b]
   );
   ye(() => {
@@ -3308,14 +3310,14 @@ function Sd({
       c(f.length === 0 ? 0 : void 0);
       return;
     }
-    let E = 0, _ = !0;
+    let E = 0, z = !0;
     for (const B of f) {
       const P = ln(o.graph.entries, B);
       if (!P) continue;
       const x = T(B, P);
-      x === void 0 ? _ = !1 : E += x;
+      x === void 0 ? z = !1 : E += x;
     }
-    c(_ ? E : void 0);
+    c(z ? E : void 0);
   }, [o, S, f, T]);
   if (ye(() => {
     M();
@@ -3332,10 +3334,10 @@ function Sd({
       style: { ...hr(t.current, 460, 440), zIndex: it.settingsPopover },
       "data-layer-active": "true",
       children: [
-        /* @__PURE__ */ i("div", { className: "tokenpanel-chain-hops", "aria-label": "Resolution chain", children: k.map((E, _) => /* @__PURE__ */ h("span", { className: "tokenpanel-chain-hop-wrap", children: [
-          _ > 0 && /* @__PURE__ */ i("span", { className: "tokenpanel-chain-arrow", "aria-hidden": "true", children: "→" }),
+        /* @__PURE__ */ i("div", { className: "tokenpanel-chain-hops", "aria-label": "Resolution chain", children: k.map((E, z) => /* @__PURE__ */ h("span", { className: "tokenpanel-chain-hop-wrap", children: [
+          z > 0 && /* @__PURE__ */ i("span", { className: "tokenpanel-chain-arrow", "aria-hidden": "true", children: "→" }),
           /* @__PURE__ */ i(Cd, { hop: E, color: E.kind === "token" && u.kind === "color" ? m : void 0 })
-        ] }, `${E.kind}-${_}`)) }),
+        ] }, `${E.kind}-${z}`)) }),
         /* @__PURE__ */ h("div", { className: "tokenpanel-chain-row tokenpanel-chain-used-row", children: [
           /* @__PURE__ */ i("span", { className: "tokenpanel-chain-row-label", children: "used on page" }),
           /* @__PURE__ */ i("span", { className: "tokenpanel-chain-row-value", children: s === void 0 ? "…" : `${s} element${s === 1 ? "" : "s"}` }),
@@ -3347,11 +3349,11 @@ function Sd({
         /* @__PURE__ */ h("div", { className: "tokenpanel-chain-row", children: [
           /* @__PURE__ */ i("span", { className: "tokenpanel-chain-row-label", children: "depended on by" }),
           /* @__PURE__ */ i("span", { className: "tokenpanel-chain-chip-list", children: f.length === 0 ? /* @__PURE__ */ i("span", { className: "tokenpanel-chain-empty", children: "—" }) : f.map((E) => {
-            const _ = ln(o.graph.entries, E);
-            return _ ? /* @__PURE__ */ i(
+            const z = ln(o.graph.entries, E);
+            return z ? /* @__PURE__ */ i(
               Qr,
               {
-                entry: _,
+                entry: z,
                 onClick: () => C(E)
               },
               Be(E)
@@ -3362,11 +3364,11 @@ function Sd({
           /* @__PURE__ */ h("div", { className: "tokenpanel-chain-row", children: [
             /* @__PURE__ */ i("span", { className: "tokenpanel-chain-row-label", children: "ramp siblings" }),
             /* @__PURE__ */ i("span", { className: "tokenpanel-chain-chip-list", children: g.length === 0 ? /* @__PURE__ */ i("span", { className: "tokenpanel-chain-empty", children: "—" }) : g.map((E) => {
-              const _ = ln(o.graph.entries, E);
-              return _ ? /* @__PURE__ */ i(
+              const z = ln(o.graph.entries, E);
+              return z ? /* @__PURE__ */ i(
                 Qr,
                 {
-                  entry: _,
+                  entry: z,
                   onClick: () => C(E)
                 },
                 Be(E)
@@ -3384,7 +3386,7 @@ function Sd({
   return typeof document > "u" || !document.body ? null : Vt(A, document.body);
 }
 function Cn({ address: e }) {
-  const t = ji(), n = t ? ln(t.graph.entries, e) : void 0, [o, r] = _e(!1), a = $e(null);
+  const t = ji(), n = t ? ln(t.graph.entries, e) : void 0, [o, r] = ze(!1), a = $e(null);
   return n ? /* @__PURE__ */ h(me, { children: [
     /* @__PURE__ */ i(
       ue,
@@ -3488,14 +3490,14 @@ function On(e, t) {
     return !1;
   }
 }
-function _d(e) {
+function zd(e) {
   const t = e.parentElement;
   if (!t) return "";
   const n = e.tagName, o = Array.from(t.children).filter((a) => a.tagName === n);
   return o.length <= 1 ? "" : `:nth-of-type(${o.indexOf(e) + 1})`;
 }
-function zd(e) {
-  return e.localName + _d(e);
+function _d(e) {
+  return e.localName + zd(e);
 }
 function Ad(e) {
   if (e.tagName === "HTML") return "html";
@@ -3518,7 +3520,7 @@ function Ad(e) {
         continue;
       }
     }
-    n.unshift(zd(o));
+    n.unshift(_d(o));
     const a = n.join(" > ");
     if (On(a, e)) return a;
     o = o.parentElement;
@@ -3667,7 +3669,7 @@ function Fd(e, t) {
     Kn.get(e) === t && (Kn.delete(e), Rt === e && (Rt = null));
   };
 }
-function zo(e) {
+function _o(e) {
   if (Rt === e) return;
   const t = Rt;
   Rt = e, t !== null && Kn.get(t)?.onArmingRevoked();
@@ -3706,13 +3708,13 @@ function Gd({
   zIndex: c = it.inspectorBox,
   labelGap: d = Kd
 }, u) {
-  const [k, f] = _e(!1), [g, m] = _e(null), b = $e(!1);
+  const [k, f] = ze(!1), [g, m] = ze(null), b = $e(!1);
   b.current = k;
   const T = $e(null);
   T.current = g;
   const S = $e(null), M = $e(null), C = $e(null), A = $e(!1), E = $e(o);
   E.current = o;
-  const _ = Ve(
+  const z = Ve(
     () => ({ ...Wd, ...p }),
     [p]
   ), B = te(() => {
@@ -3722,7 +3724,7 @@ function Gd({
     m(!V || qd(V, l) ? null : V);
   }, [l]), x = te(() => {
     if (!e) return;
-    A.current = !0, zo(t), f(!0);
+    A.current = !0, _o(t), f(!0);
     const q = C.current;
     q && P(q.x, q.y);
   }, [e, t, P]);
@@ -3731,7 +3733,7 @@ function Gd({
       A.current = !1, f(!1), m(null), E.current?.();
     }
   }), [t]), ye(() => {
-    !e || !r || zo(t);
+    !e || !r || _o(t);
   }, [r, e, t]), ye(() => {
     e || B();
   }, [B, e]), ye(() => {
@@ -3741,7 +3743,7 @@ function Gd({
     }
     function $(R) {
       if ((R.key === "Alt" || R.altKey) && !b.current) {
-        A.current = !1, zo(t), f(!0);
+        A.current = !1, _o(t), f(!0);
         const X = C.current;
         X && P(X.x, X.y);
       }
@@ -3767,10 +3769,10 @@ function Gd({
   }, [k, e, n]), ye(() => {
     if (!e || !k) return;
     const q = document.documentElement;
-    return q.classList.add(_.inspectingRoot), () => {
-      q.classList.remove(_.inspectingRoot);
+    return q.classList.add(z.inspectingRoot), () => {
+      q.classList.remove(z.inspectingRoot);
     };
-  }, [k, _.inspectingRoot, e]), ye(() => {
+  }, [k, z.inspectingRoot, e]), ye(() => {
     if (!k || !g) return;
     let q = 0;
     function $() {
@@ -3782,11 +3784,11 @@ function Gd({
         }
         const X = V.getBoundingClientRect();
         R.style.top = `${X.top}px`, R.style.left = `${X.left}px`, R.style.width = `${X.width}px`, R.style.height = `${X.height}px`;
-        const z = M.current;
-        if (z) {
-          const W = z.offsetHeight;
+        const _ = M.current;
+        if (_) {
+          const W = _.offsetHeight;
           let Y = X.top - W - d;
-          Y < 0 && (Y = X.top + d), z.style.left = `${Math.max(0, X.left)}px`, z.style.top = `${Y}px`;
+          Y < 0 && (Y = X.top + d), _.style.left = `${Math.max(0, X.left)}px`, _.style.top = `${Y}px`;
         }
       }
       q = requestAnimationFrame($);
@@ -3823,7 +3825,7 @@ function Gd({
         "div",
         {
           ref: S,
-          className: _.box,
+          className: z.box,
           "aria-hidden": "true",
           style: {
             position: "fixed",
@@ -3840,7 +3842,7 @@ function Gd({
         "div",
         {
           ref: M,
-          className: _.label,
+          className: z.label,
           "aria-hidden": "true",
           style: {
             position: "fixed",
@@ -3850,8 +3852,8 @@ function Gd({
             pointerEvents: "none"
           },
           children: [
-            /* @__PURE__ */ i("span", { className: _.labelName, children: N }),
-            /* @__PURE__ */ h("span", { className: _.labelSize, children: [
+            /* @__PURE__ */ i("span", { className: z.labelName, children: N }),
+            /* @__PURE__ */ h("span", { className: z.labelSize, children: [
               Math.round(w.width),
               " × ",
               Math.round(w.height)
@@ -3875,7 +3877,7 @@ function Zd({
   enabled: e,
   onArmingRevoked: t
 }) {
-  const [n, o] = _e(null), r = $e(null), a = $e(0), s = te(async (l) => {
+  const [n, o] = ze(null), r = $e(null), a = $e(0), s = te(async (l) => {
     const p = Od(l), c = await Wi(p);
     a.current += 1, o({
       message: c ? `Copied path: ${at(l)}` : "Copy failed — clipboard unavailable",
@@ -3904,14 +3906,14 @@ function Zd({
   ] });
 }
 function Qd({ enabled: e, onArmingRevoked: t }) {
-  const n = no(_i);
+  const n = no(zi);
   return n ? Vt(
     /* @__PURE__ */ i(Zd, { enabled: e, onArmingRevoked: t }),
     n
   ) : null;
 }
 function ep({ children: e }) {
-  const [t, n] = _e(pi), o = te((s) => {
+  const [t, n] = ze(pi), o = te((s) => {
     n(s), qn(s);
   }, []), r = te(() => {
     n((s) => {
@@ -4315,7 +4317,7 @@ function gp({
   onJumpToColorTab: s,
   panelOpen: l = !0
 }) {
-  const p = Ve(() => Jt(t), [t]), [c, d] = _e(!1), [u, k] = _e(null), [f, g] = _e(null), m = $e(null), b = te((w) => {
+  const p = Ve(() => Jt(t), [t]), [c, d] = ze(!1), [u, k] = ze(null), [f, g] = ze(null), m = $e(null), b = te((w) => {
     w.isConnected && (k(w), g(sp(w, p)), r());
   }, [r, p]), T = te(() => d(!0), []), S = te(() => {
     m.current?.disarm(), d(!1);
@@ -4338,7 +4340,7 @@ function gp({
     m.current?.disarm(), d(!1), k(null), g(null), a();
   }, [a]), E = te(() => {
     d(!1);
-  }, []), _ = te(() => {
+  }, []), z = te(() => {
     k(null), g(null), a();
   }, [a]), B = te((w, q) => {
     o(
@@ -4375,7 +4377,7 @@ function gp({
             pickerRef: m,
             pinned: u,
             onElementPicked: C,
-            onPinnedDetached: _,
+            onPinnedDetached: z,
             onArmingRevoked: E
           }
         )
@@ -4525,7 +4527,7 @@ function Cp({
   address: e,
   onJumpToColorTab: t
 }) {
-  const n = Yi(e), { entry: o } = n, r = n.readonly || o.item.readonly === !0, [a, s] = _e(() => Ao(n.value));
+  const n = Yi(e), { entry: o } = n, r = n.readonly || o.item.readonly === !0, [a, s] = ze(() => Ao(n.value));
   if (ye(() => s(Ao(n.value)), [n.value]), n.readonly) {
     const p = n.jumpTo ?? t;
     return /* @__PURE__ */ h("div", { className: "tokenpanel-element-inspect-color-value", children: [
@@ -4756,7 +4758,7 @@ function Tp({
   onRuntimeStatusChange: a,
   onArmingRevoked: s
 }) {
-  const l = no(zi);
+  const l = no(_i);
   return !l || n === null || t.domTweaker === void 0 ? null : Vt(
     /* @__PURE__ */ i(
       n,
@@ -4775,11 +4777,11 @@ function Tp({
     l
   );
 }
-function _p({
+function zp({
   children: e,
   instanceConfig: t
 }) {
-  const [n, o] = _e(() => t.domTweaker === void 0 || !ui(t) ? !1 : pa(t)), [r, a] = _e(null), [s, l] = _e("idle"), [p, c] = _e(!1), d = $e(null), u = te(
+  const [n, o] = ze(() => t.domTweaker === void 0 || !ui(t) ? !1 : pa(t)), [r, a] = ze(null), [s, l] = ze("idle"), [p, c] = ze(!1), d = $e(null), u = te(
     (b) => {
       if (b) {
         if (t.domTweaker === void 0 || !pa(t)) return;
@@ -4798,7 +4800,7 @@ function _p({
   ye(() => () => {
     ua(t);
   }, [t]), ye(() => {
-    !n && !p || r !== null || d.current !== null || (n && l("loading"), d.current = import("./index-RLAXfjv2.js").then((b) => {
+    !n && !p || r !== null || d.current !== null || (n && l("loading"), d.current = import("./index-CAQf4HKm.js").then((b) => {
       a(() => b.DomTweakerLazyBoundary);
     }).catch((b) => {
       d.current = null, n && l("error"), console.warn(
@@ -4827,7 +4829,7 @@ function _p({
     )
   ] });
 }
-function zp({ compact: e = !1 } = {}) {
+function _p({ compact: e = !1 } = {}) {
   const t = st(br);
   if (t === null) return null;
   const { enabled: n, openDiffExport: o, runtimeStatus: r, toggle: a } = t, s = r === "loading" ? "runtime loading" : r === "ready" ? "runtime ready" : r === "error" ? "runtime failed" : "runtime not loaded", l = n ? `DOM Tweaker: ON (${s}) — click to turn off.` : `DOM Tweaker: OFF (${s}) — click to enable.`;
@@ -4926,13 +4928,14 @@ function Lp({
           {
             "aria-disabled": a.disabled,
             title: a.disabledReason,
+            "data-zdtp-action": a.id,
             onClick: () => {
               a.onSelect(), n();
             },
             className: "tokenpanel-action-link",
             children: a.label
           },
-          a.label
+          a.id
         )),
         o
       ]
@@ -5159,9 +5162,9 @@ function jp({
     (A) => {
       const E = e.findIndex((P) => P.id === t);
       if (E === -1) return;
-      let _ = E;
-      A.key === "ArrowRight" ? _ = (E + 1) % e.length : A.key === "ArrowLeft" ? _ = (E - 1 + e.length) % e.length : A.key === "Home" ? _ = 0 : A.key === "End" && (_ = e.length - 1), A.preventDefault();
-      const B = e[_];
+      let z = E;
+      A.key === "ArrowRight" ? z = (E + 1) % e.length : A.key === "ArrowLeft" ? z = (E - 1 + e.length) % e.length : A.key === "Home" ? z = 0 : A.key === "End" && (z = e.length - 1), A.preventDefault();
+      const B = e[z];
       n(B.id), window.requestAnimationFrame(() => r.current?.[B.id]?.focus());
     },
     l
@@ -5190,14 +5193,14 @@ function jp({
     }
     if (E(), A.addEventListener("scroll", E), typeof ResizeObserver > "u")
       return () => A.removeEventListener("scroll", E);
-    const _ = new ResizeObserver(E);
-    _.observe(A);
+    const z = new ResizeObserver(E);
+    z.observe(A);
     for (const B of e) {
       const P = r.current?.[B.id];
-      P && _.observe(P);
+      P && z.observe(P);
     }
     return () => {
-      _.disconnect(), A.removeEventListener("scroll", E);
+      z.disconnect(), A.removeEventListener("scroll", E);
     };
   }, [t, l, r, e]), oe(() => {
     if (!g) return;
@@ -5225,8 +5228,8 @@ function jp({
           return /* @__PURE__ */ h(
             "div",
             {
-              ref: (_) => {
-                r.current && (r.current[A.id] = _);
+              ref: (z) => {
+                r.current && (r.current[A.id] = z);
               },
               role: "tab",
               id: `dtp-tab-${o}-${A.id}`,
@@ -5932,7 +5935,7 @@ function du(e, t, n, o) {
   };
 }
 function pu(e) {
-  const [t, n] = _e(() => lu(e)), o = te(
+  const [t, n] = ze(() => lu(e)), o = te(
     (a, s, l, p) => {
       const c = {
         state: s,
@@ -6146,8 +6149,8 @@ function vu({
     getElement: () => c.current
   }) : void 0, [n, e]);
   const m = G(() => gu(o, r ?? void 0), [o, r]), b = G(() => {
-    const C = u.trim(), A = wu(m, C), E = a.filter((P) => C ? ol(C, P.label) : !0), _ = A.map((P) => ({ kind: "token", token: P })), B = E.map((P) => ({ kind: "action", action: P }));
-    return C ? [..._, ...B] : [...B, ..._.slice(0, 16)];
+    const C = u.trim(), A = wu(m, C), E = a.filter((P) => C ? ol(C, P.label) : !0), z = A.map((P) => ({ kind: "token", token: P })), B = E.map((P) => ({ kind: "action", action: P }));
+    return C ? [...z, ...B] : [...B, ...z.slice(0, 16)];
   }, [a, u, m]);
   oe(() => {
     g((C) => Math.min(C, Math.max(0, b.length - 1)));
@@ -6228,11 +6231,11 @@ function vu({
                 onKeyDown: S,
                 children: [
                   b.map((C, A) => {
-                    const E = C.kind === "token" ? "Tokens" : "Actions", _ = C.kind !== M ? /* @__PURE__ */ i("div", { className: "tokenpanel-command-palette-group", role: "presentation", children: E }, `heading-${E}`) : null;
+                    const E = C.kind === "token" ? "Tokens" : "Actions", z = C.kind !== M ? /* @__PURE__ */ i("div", { className: "tokenpanel-command-palette-group", role: "presentation", children: E }, `heading-${E}`) : null;
                     M = C.kind;
                     const B = A === f;
                     return C.kind === "token" ? /* @__PURE__ */ h(Xe, { children: [
-                      _,
+                      z,
                       /* @__PURE__ */ h(
                         "div",
                         {
@@ -6254,7 +6257,7 @@ function vu({
                         }
                       )
                     ] }, `token-result-${A}`) : /* @__PURE__ */ h(Xe, { children: [
-                      _,
+                      z,
                       /* @__PURE__ */ h(
                         "div",
                         {
@@ -6519,7 +6522,7 @@ function Iu({ state: e }) {
   );
 }
 function Tu({ children: e }) {
-  const [t, n] = _e({
+  const [t, n] = ze({
     visible: !1,
     text: "",
     triggerEl: null
@@ -6609,18 +6612,18 @@ function ao(e, t) {
   );
   return { onMouseEnter: a, onMouseLeave: s, onFocusIn: l, onFocusOut: p, show: c, hide: d };
 }
-function _u({ cssVar: e, label: t, className: n }) {
+function zu({ cssVar: e, label: t, className: n }) {
   const o = ao(e, { anchor: "text" });
   return /* @__PURE__ */ h("span", { className: n ?? "tokenpanel-row-label", ...o, children: [
     e,
     t && t !== e && /* @__PURE__ */ i("span", { className: "tokenpanel-row-label-sub", children: t })
   ] });
 }
-const At = St(_u), xa = "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().";
+const At = St(zu), xa = "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().";
 function ya({ text: e, ariaLabel: t }) {
   const { onMouseEnter: n, onMouseLeave: o, onFocusIn: r, onFocusOut: a, show: s, hide: l } = ao(e, {
     variant: "help"
-  }), [p, c] = _e(!1), d = $e(null), u = te(() => {
+  }), [p, c] = ze(!1), d = $e(null), u = te(() => {
     const m = d.current, b = !p;
     c(b), m && (b ? s(m) : l(m));
   }, [p, s, l]), k = te(
@@ -6674,7 +6677,7 @@ function Ca(e) {
 function qo(e, t) {
   return e.tiers.find((n) => n.id === t);
 }
-function zu(e, t) {
+function _u(e, t) {
   return (e.tab ?? "") === (t.tab ?? "") && e.tier === t.tier && e.item === t.item;
 }
 const Sa = /* @__PURE__ */ new Set();
@@ -6721,7 +6724,7 @@ function Pu({
   const d = qo(e, n), u = d?.referencesRamps, k = !!u && u.length > 0, g = k ? Lu(u, e, t ?? [e]) : (() => {
     const x = d?.referencesTier ?? "", y = x ? qo(e, x) : void 0;
     return y ? [{ label: y.label, options: Mu(y) }] : [];
-  })(), m = g.flatMap((x) => x.options), b = pt(r) ? void 0 : m.find((x) => zu(x.ref, r.ref)), T = !pt(r) && !b ? r.ref : void 0;
+  })(), m = g.flatMap((x) => x.options), b = pt(r) ? void 0 : m.find((x) => _u(x.ref, r.ref)), T = !pt(r) && !b ? r.ref : void 0;
   T && Au(T);
   const S = pt(r) ? Lo : b?.key ?? Mo, M = l ?? o, C = k ? pt(r) ? typeof r.literal == "string" ? r.literal : cn({ literal: r.literal }, c) : s ? s(r.ref) : b?.item.default ?? "" : void 0, A = (x) => {
     const y = x.currentTarget.value;
@@ -6735,7 +6738,7 @@ function Pu({
     N && a(o, { ref: N.ref });
   }, E = (x) => {
     a(o, { literal: x });
-  }, _ = () => {
+  }, z = () => {
     if (!pt(r)) return;
     const x = r.literal;
     typeof x == "object" && x !== null ? a(o, { literal: cn({ literal: x }, c) }) : a(o, { literal: { light: x, dark: x } });
@@ -6809,7 +6812,7 @@ function Pu({
               {
                 type: "checkbox",
                 checked: typeof r.literal == "object" && r.literal !== null,
-                onChange: _,
+                onChange: z,
                 "aria-label": `${M} per-mode (light/dark)`
               }
             ),
@@ -6919,11 +6922,11 @@ function Ta(e) {
     (t) => !t.referencesTier && !t.semantic && t.items.length > 0 && t.items[0].type.kind === "color"
   );
 }
-function _a(e, t) {
+function za(e, t) {
   const n = e?.items[t];
   return n && n.type.kind === "color" && n.type.format === "oklch" ? "oklch" : "hex";
 }
-const za = St(function({
+const _a = St(function({
   color: t,
   onChange: n,
   index: o,
@@ -7025,35 +7028,35 @@ const za = St(function({
   isChanged: k = !1,
   onRevert: f
 }) {
-  const g = a ?? ((z) => `--zd-p${z}`), [m, b] = J(!1), T = U(null), S = U(null), M = U(null), C = L(() => b(!1), []), A = L(() => b((z) => !z), []), E = L(() => {
+  const g = a ?? ((_) => `--zd-p${_}`), [m, b] = J(!1), T = U(null), S = U(null), M = U(null), C = L(() => b(!1), []), A = L(() => b((_) => !_), []), E = L(() => {
     b(!1), S.current?.focus();
-  }, []), _ = o === "bg" ? p ?? "#000000" : o === "fg" ? c ?? "#ffffff" : r[o] ?? "#000000", B = o === "bg" ? "bg" : o === "fg" ? "fg" : `p${o}`;
+  }, []), z = o === "bg" ? p ?? "#000000" : o === "fg" ? c ?? "#ffffff" : r[o] ?? "#000000", B = o === "bg" ? "bg" : o === "fg" ? "fg" : `p${o}`;
   Ru(T, C, m, E);
   const P = ao(`${t}: ${B}`), x = G(
-    () => [...l ?? [], ...r.map((z, W) => W)],
+    () => [...l ?? [], ...r.map((_, W) => W)],
     [l, r]
-  ), y = l?.length ?? 0, N = vn(), w = (z) => `${N}-opt-${z}`, [q, $] = J(0), V = x[q];
+  ), y = l?.length ?? 0, N = vn(), w = (_) => `${N}-opt-${_}`, [q, $] = J(0), V = x[q];
   oe(() => {
     if (!m) return;
-    const z = x.findIndex((W) => W === o);
-    $(z >= 0 ? z : 0), M.current?.focus();
+    const _ = x.findIndex((W) => W === o);
+    $(_ >= 0 ? _ : 0), M.current?.focus();
   }, [m]);
-  function R(z) {
-    s(n, z), b(!1);
+  function R(_) {
+    s(n, _), b(!1);
   }
-  function X(z) {
+  function X(_) {
     const W = x.length;
     if (W !== 0) {
-      if (z.key === "ArrowDown" || z.key === "ArrowRight")
-        z.preventDefault(), $((Y) => Math.min(W - 1, Y + 1));
-      else if (z.key === "ArrowUp" || z.key === "ArrowLeft")
-        z.preventDefault(), $((Y) => Math.max(0, Y - 1));
-      else if (z.key === "Home")
-        z.preventDefault(), $(0);
-      else if (z.key === "End")
-        z.preventDefault(), $(W - 1);
-      else if (z.key === "Enter" || z.key === " ") {
-        z.preventDefault();
+      if (_.key === "ArrowDown" || _.key === "ArrowRight")
+        _.preventDefault(), $((Y) => Math.min(W - 1, Y + 1));
+      else if (_.key === "ArrowUp" || _.key === "ArrowLeft")
+        _.preventDefault(), $((Y) => Math.max(0, Y - 1));
+      else if (_.key === "Home")
+        _.preventDefault(), $(0);
+      else if (_.key === "End")
+        _.preventDefault(), $(W - 1);
+      else if (_.key === "Enter" || _.key === " ") {
+        _.preventDefault();
         const Y = x[q];
         Y !== void 0 && (R(Y), S.current?.focus());
       }
@@ -7073,8 +7076,8 @@ const za = St(function({
             role: "button",
             tabIndex: 0,
             onClick: A,
-            onKeyDown: (z) => {
-              z.key === "Enter" || z.key === " " ? (z.preventDefault(), A()) : z.key === "ArrowDown" && (z.preventDefault(), m || b(!0));
+            onKeyDown: (_) => {
+              _.key === "Enter" || _.key === " " ? (_.preventDefault(), A()) : _.key === "ArrowDown" && (_.preventDefault(), m || b(!0));
             },
             className: "tokenpanel-palette-trigger",
             "aria-label": `${t}: ${B}`,
@@ -7087,7 +7090,7 @@ const za = St(function({
                 "div",
                 {
                   className: "tokenpanel-palette-trigger-color",
-                  style: { backgroundColor: _ }
+                  style: { backgroundColor: z }
                 }
               ),
               /* @__PURE__ */ i("span", { className: "tokenpanel-palette-trigger-value", children: B }),
@@ -7150,15 +7153,15 @@ const za = St(function({
             className: "tokenpanel-palette-options",
             style: Du(S.current, 440, l ? 160 : 120),
             children: [
-              l && l.length > 0 && /* @__PURE__ */ i("div", { className: "tokenpanel-palette-options-extras", children: l.map((z, W) => {
-                const Y = z === "bg" ? p ?? "#000000" : c ?? "#ffffff", re = o === z, K = q === W;
+              l && l.length > 0 && /* @__PURE__ */ i("div", { className: "tokenpanel-palette-options-extras", children: l.map((_, W) => {
+                const Y = _ === "bg" ? p ?? "#000000" : c ?? "#ffffff", re = o === _, K = q === W;
                 return /* @__PURE__ */ h(
                   "div",
                   {
-                    id: w(z),
+                    id: w(_),
                     role: "option",
                     "aria-selected": re,
-                    onClick: () => R(z),
+                    onClick: () => R(_),
                     className: [
                       "tokenpanel-palette-extra-option",
                       re ? "is-selected" : "",
@@ -7172,13 +7175,13 @@ const za = St(function({
                           style: { backgroundColor: Y }
                         }
                       ),
-                      /* @__PURE__ */ i("span", { className: "tokenpanel-palette-extra-label", children: z })
+                      /* @__PURE__ */ i("span", { className: "tokenpanel-palette-extra-label", children: _ })
                     ]
                   },
-                  z
+                  _
                 );
               }) }),
-              /* @__PURE__ */ i("div", { className: "tokenpanel-palette-options-grid", children: r.map((z, W) => {
+              /* @__PURE__ */ i("div", { className: "tokenpanel-palette-options-grid", children: r.map((_, W) => {
                 const Y = o === W, re = q === y + W, K = g(W);
                 return /* @__PURE__ */ i(
                   "div",
@@ -7186,15 +7189,15 @@ const za = St(function({
                     id: w(W),
                     role: "option",
                     "aria-selected": Y,
-                    "aria-label": `${K}: ${z}`,
+                    "aria-label": `${K}: ${_}`,
                     onClick: () => R(W),
-                    title: `${K}: ${z}`,
+                    title: `${K}: ${_}`,
                     className: [
                       "tokenpanel-palette-option-button",
                       Y ? "is-selected" : "",
                       re ? "is-active" : ""
                     ].filter(Boolean).join(" "),
-                    style: { backgroundColor: z }
+                    style: { backgroundColor: _ }
                   },
                   W
                 );
@@ -7455,7 +7458,7 @@ function Ou({
   ), M = k.colorPresets ?? {}, C = G(
     () => ({ ...M, ...m.colorSchemes }),
     [M, m.colorSchemes]
-  ), A = G(() => Object.keys(m.colorSchemes), [m.colorSchemes]), E = G(() => Object.keys(M).sort(), [M]), _ = m.label ?? m.id.toUpperCase(), B = b?.label ?? b?.id.toUpperCase() ?? "", P = L(
+  ), A = G(() => Object.keys(m.colorSchemes), [m.colorSchemes]), E = G(() => Object.keys(M).sort(), [M]), z = m.label ?? m.id.toUpperCase(), B = b?.label ?? b?.id.toUpperCase() ?? "", P = L(
     (I) => je(m, I),
     [m]
   ), x = L(
@@ -7517,7 +7520,7 @@ function Ou({
       tierLabel: N.label
     })) : [],
     [w, b, N, r]
-  ), z = G(
+  ), _ = G(
     () => $.map(({ key: I, mapping: O, semanticTier: H, cssVar: se, label: Ie }) => Vn(w, {
       cssVar: se,
       id: I,
@@ -7549,15 +7552,15 @@ function Ou({
   ), F = G(
     () => $.map(({ key: I, semanticTier: O }) => o && O ? W({ tabId: o.id, tierId: O.id, itemId: I }) : !1),
     [W, $, o]
-  ), ne = (!w || V.some(Boolean)) && (!d || Y.some(Boolean)), ce = (!w || R.some(Boolean)) && (!d || re.some(Boolean)), ke = (!w || X.some(Boolean)) && (!d || K.some(Boolean)), Z = (!w || z.some(Boolean)) && (!d || F.some(Boolean)), de = Y.some(
+  ), ne = (!w || V.some(Boolean)) && (!d || Y.some(Boolean)), ce = (!w || R.some(Boolean)) && (!d || re.some(Boolean)), ke = (!w || X.some(Boolean)) && (!d || K.some(Boolean)), Z = (!w || _.some(Boolean)) && (!d || F.some(Boolean)), de = Y.some(
     (I, O) => I && (!w || V[O] === !0)
   ) || re.some(
     (I, O) => I && (!w || R[O] === !0)
   ) || K.some(
     (I, O) => I && (!w || X[O] === !0)
   ) || F.some(
-    (I, O) => I && (!w || z[O] === !0)
-  ), ze = L(
+    (I, O) => I && (!w || _[O] === !0)
+  ), _e = L(
     (I, O) => {
       n((H) => ({
         ...H,
@@ -7670,7 +7673,7 @@ function Ou({
     ) }),
     t.palette.length > 0 && ne && /* @__PURE__ */ h("div", { className: "tokenpanel-tab-section", children: [
       /* @__PURE__ */ h("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
-        _,
+        z,
         " — Palette"
       ] }),
       /* @__PURE__ */ i("div", { className: "tokenpanel-color-palette-grid", children: t.palette.map((I, O) => {
@@ -7683,14 +7686,14 @@ function Ou({
           // stays effective. `valueFormat` routes oklch-format slots through
           // the lossless OKLCH editor; absent/`'hex'` slots stay hex.
           /* @__PURE__ */ i(
-            za,
+            _a,
             {
               color: I,
               index: O,
               label: je(m, O),
               cssVar: je(m, O),
-              valueFormat: _a(y, O),
-              onChange: ze,
+              valueFormat: za(y, O),
+              onChange: _e,
               address: se,
               isChanged: !!Y[O],
               onRevert: se && u ? () => u(se) : void 0
@@ -7703,7 +7706,7 @@ function Ou({
     /* @__PURE__ */ h("div", { className: "tokenpanel-tab-content", children: [
       t.palette.length > 0 && !d && /* @__PURE__ */ h("div", { className: "tokenpanel-tab-section", children: [
         /* @__PURE__ */ h("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
-          _,
+          z,
           " — Base"
         ] }),
         /* @__PURE__ */ h("div", { className: "tokenpanel-color-base-grid", children: [
@@ -7743,13 +7746,13 @@ function Ou({
             "aria-level": 3,
             className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color tokenpanel-tab-section-heading--with-help",
             children: [
-              _,
+              z,
               " — Semantic Tokens",
               /* @__PURE__ */ i(
                 ya,
                 {
                   text: xa,
-                  ariaLabel: `${_} Semantic Tokens help`
+                  ariaLabel: `${z} Semantic Tokens help`
                 }
               )
             ]
@@ -7833,13 +7836,13 @@ function Ou({
                 if (w && !X[O] || d && !K[O]) return null;
                 const se = H ? { tabId: o.id, tierId: N?.id ?? "palette", itemId: H.id } : void 0;
                 return /* @__PURE__ */ i(
-                  za,
+                  _a,
                   {
                     color: I,
                     index: O,
                     label: je(b, O),
                     cssVar: je(b, O),
-                    valueFormat: _a(N, O),
+                    valueFormat: za(N, O),
                     onChange: j,
                     address: se,
                     isChanged: !!K[O],
@@ -7878,7 +7881,7 @@ function Ou({
               ),
               /* @__PURE__ */ i("div", { className: "tokenpanel-color-base-grid", children: $.map(({ key: I, mapping: O, semanticTier: H }) => {
                 const se = b.semanticCssNames[I], Ie = $.findIndex((Et) => Et.key === I);
-                if (w && !z[Ie]) return null;
+                if (w && !_[Ie]) return null;
                 const xe = H ? { tabId: o.id, tierId: H.id, itemId: I } : void 0, Ge = xe ? W(xe) : !1;
                 if (d && !Ge) return null;
                 const We = O, ct = $a(o, I), et = ct?.referencesRamps;
@@ -8352,7 +8355,7 @@ function Qu({ tab: e, state: t, valueFor: n }) {
   ] });
 }
 function ek(e) {
-  const { enabled: t, instanceConfig: n } = e, o = lo(n), [r, a] = _e(null);
+  const { enabled: t, instanceConfig: n } = e, o = lo(n), [r, a] = ze(null);
   return ye(() => {
     if (!t) return;
     const s = Zu(o);
@@ -8757,12 +8760,12 @@ function dk({
       o(e.address, N.currentTarget.checked ? k : m.current || f);
     },
     [f, e.address, o, k]
-  ), _ = Te(e.address), B = n.map((N) => N.className?.(e)).filter((N) => !!N), P = (N) => [N, ...B].join(" "), x = (N) => /* @__PURE__ */ i(Xe, { children: n.map((w) => {
+  ), z = Te(e.address), B = n.map((N) => N.className?.(e)).filter((N) => !!N), P = (N) => [N, ...B].join(" "), x = (N) => /* @__PURE__ */ i(Xe, { children: n.map((w) => {
     const q = w[N];
     return q ? /* @__PURE__ */ i(Xe, { children: q(e) }, w.id) : null;
   }) }), y = {
     "data-css-var": l.cssVar,
-    "data-address": _
+    "data-address": z
   };
   if (s.referencesTier !== void 0) {
     const N = s.referencesTier, w = (q, $) => {
@@ -8814,7 +8817,7 @@ function dk({
         M(K);
         const F = parseFloat(K);
         Number.isFinite(F) && o(e.address, $ ? `${F}${$}` : String(F));
-      }, z = () => {
+      }, _ = () => {
         Number.isFinite(parseFloat(S)) || M(String(T));
       }, W = () => {
         if (!w || w.length < 2) return;
@@ -8839,7 +8842,7 @@ function dk({
                   inputMode: "decimal",
                   value: S,
                   onChange: X,
-                  onBlur: z,
+                  onBlur: _,
                   disabled: R,
                   className: "tokenpanel-row-number-input",
                   "aria-label": `${l.cssVar} value`
@@ -9043,47 +9046,47 @@ function co({
   const m = G(
     () => s.trim() ? [...a, ck(s)] : a,
     [a, s]
-  ), b = G(() => new Map(e.tiers.map((z) => [
-    z.id,
-    z.items.map((W) => {
-      const Y = { tabId: e.id, tierId: z.id, itemId: W.id };
-      return { address: Y, tab: e, tier: z, item: W, value: t(Y, W), kind: W.type.kind };
+  ), b = G(() => new Map(e.tiers.map((_) => [
+    _.id,
+    _.items.map((W) => {
+      const Y = { tabId: e.id, tierId: _.id, itemId: W.id };
+      return { address: Y, tab: e, tier: _, item: W, value: t(Y, W), kind: W.type.kind };
     })
   ])), [t, e]), T = G(() => {
-    const z = /* @__PURE__ */ new Map();
+    const _ = /* @__PURE__ */ new Map();
     for (const W of b.values())
-      for (const Y of W) z.set(Te(Y.address), Y);
-    return z;
+      for (const Y of W) _.set(Te(Y.address), Y);
+    return _;
   }, [b]), S = G(() => new Map(
-    [...b].map(([z, W]) => [
-      z,
+    [...b].map(([_, W]) => [
+      _,
       W.filter((Y) => m.every((re) => re.filter?.(Y) !== !1))
     ])
-  ), [m, b]), [M, C] = J(() => /* @__PURE__ */ new Set()), [A, E] = J(rk), _ = G(
+  ), [m, b]), [M, C] = J(() => /* @__PURE__ */ new Set()), [A, E] = J(rk), z = G(
     () => [...S.values()].flat().filter(Ot),
     [S]
   ), B = G(
-    () => _.filter((z) => M.has(Te(z.address))),
-    [_, M]
+    () => z.filter((_) => M.has(Te(_.address))),
+    [z, M]
   );
   oe(() => {
-    const z = new Set(_.map((W) => Te(W.address)));
+    const _ = new Set(z.map((W) => Te(W.address)));
     C((W) => {
       let Y = !1;
       const re = /* @__PURE__ */ new Set();
       for (const K of W)
-        z.has(K) ? re.add(K) : Y = !0;
+        _.has(K) ? re.add(K) : Y = !0;
       return Y ? re : W;
     });
-  }, [_]);
-  const P = L((z, W) => {
-    const Y = Te(z.address);
+  }, [z]);
+  const P = L((_, W) => {
+    const Y = Te(_.address);
     C((re) => {
       const K = new Set(re);
       return W ? K.add(Y) : K.delete(Y), K;
     });
-  }, []), x = L((z, W) => {
-    const Y = S.get(z.id) ?? [];
+  }, []), x = L((_, W) => {
+    const Y = S.get(_.id) ?? [];
     C((re) => {
       const K = new Set(re);
       for (const F of Y) {
@@ -9093,8 +9096,8 @@ function co({
       }
       return K;
     });
-  }, [S]), y = L((z, W) => {
-    x(z, !0), E((Y) => ({
+  }, [S]), y = L((_, W) => {
+    x(_, !0), E((Y) => ({
       ...Y,
       multiply: String(W),
       add: "0",
@@ -9102,8 +9105,8 @@ function co({
     }));
   }, [x]), N = L(() => {
     C(/* @__PURE__ */ new Set());
-  }, []), w = L((z) => {
-    !g || z.length === 0 || (g(z), E((W) => ({
+  }, []), w = L((_) => {
+    !g || _.length === 0 || (g(_), E((W) => ({
       ...W,
       multiply: "1",
       add: "0",
@@ -9131,7 +9134,7 @@ function co({
     () => [...$, Ed],
     [$]
   ), R = G(
-    () => [...S.values()].some((z) => z.length > 0),
+    () => [...S.values()].some((_) => _.length > 0),
     [S]
   ), X = ["tokenpanel-tab-content", c].filter(Boolean).join(" ");
   return /* @__PURE__ */ i(
@@ -9143,21 +9146,21 @@ function co({
       jumpTo: f,
       children: /* @__PURE__ */ h("div", { className: X, ...d ? { "data-testid": d } : {}, children: [
         p,
-        e.tiers.map((z) => {
-          const W = (b.get(z.id) ?? []).filter((Y) => $.every((re) => re.filter?.(Y) !== !1));
+        e.tiers.map((_) => {
+          const W = (b.get(_.id) ?? []).filter((Y) => $.every((re) => re.filter?.(Y) !== !1));
           return W.length === 0 ? null : /* @__PURE__ */ i(
             kk,
             {
-              tier: z,
+              tier: _,
               entries: W,
               overrides: r,
               contributions: V,
-              testId: u?.(z),
+              testId: u?.(_),
               setValue: n,
               deleteValue: o,
               renderTierBody: k
             },
-            z.id
+            _.id
           );
         }),
         g && B.length > 0 && /* @__PURE__ */ i(
@@ -9200,10 +9203,10 @@ function hk({
   oe(() => {
     m && Uu(o, T);
   }, [m, o, T]);
-  const _ = L((y) => t[y.id] ?? y.default, [t]), B = G(() => [
+  const z = L((y) => t[y.id] ?? y.default, [t]), B = G(() => [
     io(),
-    Fu({ tab: e, state: T, valueFor: _, onPage: A })
-  ], [A, T, e, _]), P = L((y, N) => Hu(y, N, { tab: e, valueFor: _ }), [T, e, _]), x = p ? [...B, p] : B;
+    Fu({ tab: e, state: T, valueFor: z, onPage: A })
+  ], [A, T, e, z]), P = L((y, N) => Hu(y, N, { tab: e, valueFor: z }), [T, e, z]), x = p ? [...B, p] : B;
   return /* @__PURE__ */ h(me, { children: [
     m && /* @__PURE__ */ i(
       ek,
@@ -9211,7 +9214,7 @@ function hk({
         enabled: A,
         tab: e,
         state: T,
-        valueFor: _,
+        valueFor: z,
         instanceConfig: o
       }
     ),
@@ -9400,7 +9403,7 @@ const xk = 359.99;
 function yk(e) {
   return e >= 360 ? xk : e;
 }
-const kt = 300, zt = 200, ja = 4, Nk = 11, Ck = 2, pl = 16, Fa = pl / 2 + 2, Ro = ["l", "c", "h"], ul = { l: 1, c: 1e-3, h: 1 };
+const kt = 300, _t = 200, ja = 4, Nk = 11, Ck = 2, pl = 16, Fa = pl / 2 + 2, Ro = ["l", "c", "h"], ul = { l: 1, c: 1e-3, h: 1 };
 function Do(e, t) {
   const n = ul[t];
   return Math.round(e / n) * n;
@@ -9412,7 +9415,7 @@ function wn(e, t) {
   return t <= 0 ? kt / 2 : wk(e, t) * kt;
 }
 function bn(e, t) {
-  return bk(e, t) * zt;
+  return bk(e, t) * _t;
 }
 function Gt(e, t) {
   return e[t];
@@ -9468,21 +9471,21 @@ function $k({
     l: U(null),
     c: U(null),
     h: U(null)
-  }, d = U(null), [u, k] = J({ w: kt, h: zt });
+  }, d = U(null), [u, k] = J({ w: kt, h: _t });
   Qa(() => {
     const $ = d.current;
     if (!$) return;
     const V = () => {
       const X = $.getBoundingClientRect();
       X.width > 0 && X.height > 0 && k(
-        (z) => z.w === X.width && z.h === X.height ? z : { w: X.width, h: X.height }
+        (_) => _.w === X.width && _.h === X.height ? _ : { w: X.width, h: X.height }
       );
     };
     if (V(), typeof ResizeObserver > "u") return;
     const R = new ResizeObserver(V);
     return R.observe($), () => R.disconnect();
   }, []);
-  const f = u.w > 0 ? u.w / kt : 1, g = u.h > 0 ? u.h / zt : 1, m = ja / f, b = ja / g, T = Fa / f, S = Fa / g, M = U(a);
+  const f = u.w > 0 ? u.w / kt : 1, g = u.h > 0 ? u.h / _t : 1, m = ja / f, b = ja / g, T = Fa / f, S = Fa / g, M = U(a);
   M.current = a;
   const C = U(s);
   C.current = s;
@@ -9490,8 +9493,8 @@ function $k({
   A.current = l;
   const E = U(p);
   E.current = p;
-  const _ = U(e);
-  _.current = e;
+  const z = U(e);
+  z.current = e;
   const B = U(t);
   B.current = t;
   const P = U(n);
@@ -9510,7 +9513,7 @@ function $k({
     ($, V) => {
       const R = c[V].current;
       if (!R) return 0;
-      const X = R.getBoundingClientRect(), z = X.height > 0 ? ($ - X.top) / X.height : 0, W = vk(z, V);
+      const X = R.getBoundingClientRect(), _ = X.height > 0 ? ($ - X.top) / X.height : 0, W = vk(_, V);
       return Do(W, V);
     },
     // svgRefs is a stable object of stable refs — read at call time.
@@ -9525,7 +9528,7 @@ function $k({
         const F = K.closest("[data-node-hit]"), ne = K.closest("[data-hit-line]");
         if (F) {
           const ce = Number(F.getAttribute("data-node-hit"));
-          if (!_.current[ce] || !B.current[ce]) return;
+          if (!z.current[ce] || !B.current[ce]) return;
           const ke = P.current[ce];
           if (!ke) return;
           re.preventDefault(), re.stopPropagation();
@@ -9542,7 +9545,7 @@ function $k({
             ne.setPointerCapture(re.pointerId);
           } catch {
           }
-          const ce = _.current.map(
+          const ce = z.current.map(
             (Z, de) => Z && B.current[de] ? Gt(Z, R) : null
           ), ke = ce.map(
             (Z, de) => Z === null ? null : P.current[de] ?? null
@@ -9556,11 +9559,11 @@ function $k({
             startIdentities: ke
           }, A.current?.();
         }
-      }, z = function(re) {
+      }, _ = function(re) {
         const K = x.current;
         if (!K || K.channel !== R) return;
         if (K.kind === "node") {
-          if (!_.current[K.index] || !B.current[K.index] || P.current[K.index] !== K.identity) return;
+          if (!z.current[K.index] || !B.current[K.index] || P.current[K.index] !== K.identity) return;
           M.current(
             K.index,
             R,
@@ -9571,19 +9574,19 @@ function $k({
         const { startValues: F, startIdentities: ne, startPointerValue: ce } = K;
         if (F.length === 0) return;
         const ke = kn[R], Z = N(re.clientY, R) - ce, de = F.filter(
-          (pe, fe) => pe !== null && !!_.current[fe] && !!B.current[fe] && P.current[fe] === ne[fe]
+          (pe, fe) => pe !== null && !!z.current[fe] && !!B.current[fe] && P.current[fe] === ne[fe]
         );
         if (de.length === 0) return;
-        const ze = Math.min(...de), j = Math.max(...de), ae = Ha(Z, -ze, ke - j);
+        const _e = Math.min(...de), j = Math.max(...de), ae = Ha(Z, -_e, ke - j);
         F.forEach((pe, fe) => {
-          pe === null || !_.current[fe] || !B.current[fe] || P.current[fe] !== ne[fe] || M.current(fe, R, Do(pe + ae, R));
+          pe === null || !z.current[fe] || !B.current[fe] || P.current[fe] !== ne[fe] || M.current(fe, R, Do(pe + ae, R));
         });
       }, W = function() {
         !x.current || x.current.channel !== R || (x.current = null, E.current?.());
       };
       const Y = c[R].current;
-      Y && (Y.addEventListener("pointerdown", X), Y.addEventListener("pointermove", z), Y.addEventListener("pointerup", W), Y.addEventListener("pointercancel", W), V.push(() => {
-        Y.removeEventListener("pointerdown", X), Y.removeEventListener("pointermove", z), Y.removeEventListener("pointerup", W), Y.removeEventListener("pointercancel", W);
+      Y && (Y.addEventListener("pointerdown", X), Y.addEventListener("pointermove", _), Y.addEventListener("pointerup", W), Y.addEventListener("pointercancel", W), V.push(() => {
+        Y.removeEventListener("pointerdown", X), Y.removeEventListener("pointermove", _), Y.removeEventListener("pointerup", W), Y.removeEventListener("pointercancel", W);
       }));
     }
     return () => {
@@ -9591,18 +9594,18 @@ function $k({
     };
   }, [r.l, r.c, r.h, N]);
   const w = L(
-    ($, V, R, X, z) => {
-      if (!_.current[V] || !B.current[V] || P.current[V] !== R) return;
+    ($, V, R, X, _) => {
+      if (!z.current[V] || !B.current[V] || P.current[V] !== R) return;
       const W = kn[X], Y = ul[X], re = Y * 10;
       let K = null;
       switch ($.key) {
         case "ArrowUp":
         case "ArrowRight":
-          K = z + ($.shiftKey ? re : Y);
+          K = _ + ($.shiftKey ? re : Y);
           break;
         case "ArrowDown":
         case "ArrowLeft":
-          K = z - ($.shiftKey ? re : Y);
+          K = _ - ($.shiftKey ? re : Y);
           break;
         case "Home":
           K = 0;
@@ -9628,7 +9631,7 @@ function $k({
           "svg",
           {
             className: "tokenpanel-palette-chart-bands",
-            viewBox: `0 0 ${kt} ${zt}`,
+            viewBox: `0 0 ${kt} ${_t}`,
             preserveAspectRatio: "none",
             role: "presentation",
             "data-testid": "palette-chart-bands",
@@ -9638,7 +9641,7 @@ function $k({
                 x: $.x,
                 y: 0,
                 width: $.width,
-                height: zt,
+                height: _t,
                 fill: $.fill,
                 "data-band-index": $.index,
                 "data-invalid": $.valid ? void 0 : !0,
@@ -9655,7 +9658,7 @@ function $k({
           {
             ref: c[$],
             className: `tokenpanel-palette-chart-curve tokenpanel-palette-chart-curve--${$}`,
-            viewBox: `0 0 ${kt} ${zt}`,
+            viewBox: `0 0 ${kt} ${_t}`,
             preserveAspectRatio: "none",
             role: "presentation",
             "data-testid": `palette-chart-curve-${$}`,
@@ -9691,7 +9694,7 @@ function $k({
               ) }, `segment-${$}-${R}`)),
               e.map((V, R) => {
                 if (!V) return null;
-                const X = Gt(V, $), z = wn(R, e.length), W = bn(X, $), Y = R === o, re = !!t[R];
+                const X = Gt(V, $), _ = wn(R, e.length), W = bn(X, $), Y = R === o, re = !!t[R];
                 return /* @__PURE__ */ h(
                   "g",
                   {
@@ -9702,7 +9705,7 @@ function $k({
                         "ellipse",
                         {
                           className: re ? "tokenpanel-palette-chart-node-visual" : "tokenpanel-palette-chart-node-visual is-readonly",
-                          cx: z,
+                          cx: _,
                           cy: W,
                           rx: m,
                           ry: b,
@@ -9716,7 +9719,7 @@ function $k({
                         "circle",
                         {
                           className: "tokenpanel-palette-chart-node-hit",
-                          cx: z,
+                          cx: _,
                           cy: W,
                           r: Nk,
                           fill: "transparent",
@@ -9745,7 +9748,7 @@ function $k({
           "svg",
           {
             className: "tokenpanel-palette-chart-blockers",
-            viewBox: `0 0 ${kt} ${zt}`,
+            viewBox: `0 0 ${kt} ${_t}`,
             preserveAspectRatio: "none",
             role: "presentation",
             "aria-hidden": "true",
@@ -9777,14 +9780,14 @@ function Tk(e) {
   const n = parseInt(t[1], 16), o = parseInt(t[2], 16), r = parseInt(t[3], 16);
   return `rgb(${n}, ${o}, ${r})`;
 }
-function _k(e) {
+function zk(e) {
   const t = e.l.toFixed(1), n = e.c.toFixed(3), o = e.h.toFixed(0);
   if (e.a >= 100) return `oklch(${t}% ${n} ${o})`;
   const r = (e.a / 100).toFixed(2);
   return `oklch(${t}% ${n} ${o} / ${r})`;
 }
-function zk({ oklcha: e, cssVar: t, outOfGamut: n }) {
-  const o = ot(e), r = Tk(o), a = _k(e);
+function _k({ oklcha: e, cssVar: t, outOfGamut: n }) {
+  const o = ot(e), r = Tk(o), a = zk(e);
   return /* @__PURE__ */ h("div", { className: "tokenpanel-palette-readout", "data-testid": "palette-readout", children: [
     /* @__PURE__ */ i(
       "div",
@@ -9937,7 +9940,7 @@ function Dk({
     l: !0,
     c: !0,
     h: !0
-  }), [M, C] = J({}), A = U({}), E = U(null), _ = L((F) => {
+  }), [M, C] = J({}), A = U({}), E = U(null), z = L((F) => {
     A.current = F, C(F);
   }, []), B = L((F) => {
     S((ne) => ({ ...ne, [F]: !ne[F] }));
@@ -9945,10 +9948,10 @@ function Dk({
   oe(() => {
     if (!l || l.tabId !== e.id) return;
     const F = c.find((ke) => ke.id === l.tierId), ne = F?.items.findIndex((ke) => ke.id === l.itemId) ?? -1;
-    if (!F || ne < 0 || (g(F.id), b(ne), E.current = null, _({}), !p)) return;
+    if (!F || ne < 0 || (g(F.id), b(ne), E.current = null, z({}), !p)) return;
     const ce = window.requestAnimationFrame(() => p(l));
     return () => window.cancelAnimationFrame(ce);
-  }, [c, l, p, e.id, _]);
+  }, [c, l, p, e.id, z]);
   const x = U(P);
   x.current = P;
   const y = U(m);
@@ -9961,14 +9964,14 @@ function Dk({
   }) : [], [P, t, M]), q = L((F) => {
     g((ce) => ce === F ? null : F);
     const ne = k.find((ce) => ce.id === F);
-    b(ne ? Ak(ne, t) : 0), E.current = null, _({});
-  }, [t, k, _]), $ = L((F, ne) => {
+    b(ne ? Ak(ne, t) : 0), E.current = null, z({});
+  }, [t, k, z]), $ = L((F, ne) => {
     g(F), b(ne);
   }, []), V = L((F) => {
     b(F);
   }, []), R = L(() => {
-    E.current = P ? { tierId: P.id, itemIds: P.items.map((F) => F.id) } : null, _({});
-  }, [P, _]), X = L(
+    E.current = P ? { tierId: P.id, itemIds: P.items.map((F) => F.id) } : null, z({});
+  }, [P, z]), X = L(
     (F, ne, ce) => {
       if (!P) return;
       const ke = E.current;
@@ -9977,30 +9980,30 @@ function Dk({
       if (!Z || ke.itemIds[F] !== Z.id) return;
       const de = Lt(Z, P.id, t);
       if (!Fn(Z, de)) return;
-      const ze = A.current, j = ze[Z.id] ?? de.color, ae = ne === "h" ? yk(ce) : ce;
-      _({ ...ze, [Z.id]: { ...j, [ne]: ae } });
+      const _e = A.current, j = _e[Z.id] ?? de.color, ae = ne === "h" ? yk(ce) : ce;
+      z({ ..._e, [Z.id]: { ...j, [ne]: ae } });
     },
-    [P, t, _]
-  ), z = L(() => {
+    [P, t, z]
+  ), _ = L(() => {
     const F = A.current, ne = Object.keys(F), ce = E.current, ke = !!(P && ce && P.id === ce.tierId && P.items.length === ce.itemIds.length && P.items.every((Z, de) => Z.id === ce.itemIds[de]));
     if (P && ke && ne.length > 0) {
       const Z = {};
       for (const de of ne) {
-        const ze = P.items.find((j) => j.id === de);
-        Fn(ze, ze && Lt(ze, P.id, t)) && (Z[de] = Le(F[de]));
+        const _e = P.items.find((j) => j.id === de);
+        Fn(_e, _e && Lt(_e, P.id, t)) && (Z[de] = Le(F[de]));
       }
       if (Object.keys(Z).length === 0) {
-        E.current = null, _({});
+        E.current = null, z({});
         return;
       }
       if (o)
         o(P.id, Z);
       else
-        for (const [de, ze] of Object.entries(Z))
-          n(P.id, de, ze);
+        for (const [de, _e] of Object.entries(Z))
+          n(P.id, de, _e);
     }
-    E.current = null, _({});
-  }, [P, n, o, t, _]), W = L(
+    E.current = null, z({});
+  }, [P, n, o, t, z]), W = L(
     (F, ne, ce) => {
       const ke = x.current;
       if (!ke || ke.id !== F) return;
@@ -10075,8 +10078,8 @@ function Dk({
                   className: "tokenpanel-palette-edit-swatches",
                   "data-testid": `palette-edit-swatches-${F.id}`,
                   children: F.items.map((Z, de) => {
-                    const ze = { tabId: e.id, tierId: F.id, itemId: Z.id };
-                    return a && !u(ze) ? null : /* @__PURE__ */ i(
+                    const _e = { tabId: e.id, tierId: F.id, itemId: Z.id };
+                    return a && !u(_e) ? null : /* @__PURE__ */ i(
                       Mk,
                       {
                         item: Z,
@@ -10109,7 +10112,7 @@ function Dk({
                   onChartSelectIndex: V,
                   onToggleChannel: B,
                   onChangeStart: R,
-                  onChangeEnd: z,
+                  onChangeEnd: _,
                   onDirectEdit: W
                 }
               )
@@ -10175,7 +10178,7 @@ function Ok({
       /* @__PURE__ */ i("div", { className: "tokenpanel-palette-edit-direct-hint", children: S ? "Locked · read-only inspection" : l ? "edit selected step exactly" : "N/A · unsupported color is read-only" })
     ] }),
     s && l ? /* @__PURE__ */ i(
-      zk,
+      _k,
       {
         oklcha: l,
         cssVar: s.cssVar,
@@ -10312,7 +10315,7 @@ function Gk({
     [l, o, s, e.id, a]
   ), c = G(() => new Map(p.map((N) => [N.id, N.items.filter((w) => !o || l({ tabId: e.id, tierId: N.id, itemId: w.id })).map((w) => Kk(e.id, w, N.id, t))])), [l, o, t, e.id, p]), d = p.flatMap((N) => c.get(N.id) ?? []), u = d.find((N) => N.opaque) ?? null, [k, f] = J(() => u ? Mt(u) : ""), [g, m] = J(!0), [b, T] = J(!1), S = d.find((N) => N.opaque && Mt(N) === k) ?? u, M = S ? Mt(S) : "", C = L((N) => {
     N.opaque && f(Mt(N));
-  }, []), A = L((N) => m(!N.target.checked), []), E = L((N) => T(N.target.checked), []), _ = b ? 3 : 4.5, B = S ? d.filter((N) => N.opaque && N.hex) : [], P = B.filter((N) => hl(S.hex, N.hex) >= _).length, x = { id: "__flat__", label: "Palette", items: [] }, y = (N) => g ? p.map((w) => /* @__PURE__ */ i(Wa, { tier: w, entries: c.get(w.id) ?? [], side: N, showHeading: !0, selectedKey: M, onSelect: C, base: S, isLarge: b }, `${N}-${w.id}`)) : /* @__PURE__ */ i(Wa, { tier: x, entries: d, side: N, showHeading: !1, selectedKey: M, onSelect: C, base: S, isLarge: b });
+  }, []), A = L((N) => m(!N.target.checked), []), E = L((N) => T(N.target.checked), []), z = b ? 3 : 4.5, B = S ? d.filter((N) => N.opaque && N.hex) : [], P = B.filter((N) => hl(S.hex, N.hex) >= z).length, x = { id: "__flat__", label: "Palette", items: [] }, y = (N) => g ? p.map((w) => /* @__PURE__ */ i(Wa, { tier: w, entries: c.get(w.id) ?? [], side: N, showHeading: !0, selectedKey: M, onSelect: C, base: S, isLarge: b }, `${N}-${w.id}`)) : /* @__PURE__ */ i(Wa, { tier: x, entries: d, side: N, showHeading: !1, selectedKey: M, onSelect: C, base: S, isLarge: b });
   return /* @__PURE__ */ h("div", { className: "tokenpanel-palette-check-view", "data-testid": "palette-check-view", children: [
     /* @__PURE__ */ h("div", { className: "tokenpanel-palette-check-toolbar", "data-testid": "palette-check-toolbar", children: [
       /* @__PURE__ */ h("label", { className: "tokenpanel-palette-check-switch", children: [
@@ -10662,7 +10665,7 @@ function lh() {
   return new ih();
 }
 function sh(e) {
-  const [t, n] = _e(() => e.getSnapshot());
+  const [t, n] = ze(() => e.getSnapshot());
   return ye(() => e.subscribe(() => n(e.getSnapshot())), [e]), {
     ...t,
     undo: () => e.undo(),
@@ -10804,9 +10807,9 @@ function mh({
   const n = G(
     () => e ?? Ee(),
     [e]
-  ), o = vn(), [r, a] = J(!1), [s, l] = J(!1), [p, c] = J(!1), [d, u] = J(!1), [k, f] = J(!1), [g, m] = J(!1), [b, T] = J(null), [S, M] = J(null), [C, A] = J(!1), [E, _] = J(""), [B, P] = J(!1), [x, y] = J(null), N = U(null), [w, q] = J(null), [$, V] = J(
+  ), o = vn(), [r, a] = J(!1), [s, l] = J(!1), [p, c] = J(!1), [d, u] = J(!1), [k, f] = J(!1), [g, m] = J(!1), [b, T] = J(null), [S, M] = J(null), [C, A] = J(!1), [E, z] = J(""), [B, P] = J(!1), [x, y] = J(null), N = U(null), [w, q] = J(null), [$, V] = J(
     n.tabs[0]?.id ?? Ga
-  ), [R, X] = J(Vr), [z, W] = J(os), [Y, re] = J(rs), [K, F] = J(as), [ne, ce] = J(is), [ke, Z] = J(!1), de = U(null), [ze, j] = J(!1), ae = U(null), pe = U(null), fe = U(null), we = L((v) => {
+  ), [R, X] = J(Vr), [_, W] = J(os), [Y, re] = J(rs), [K, F] = J(as), [ne, ce] = J(is), [ke, Z] = J(!1), de = U(null), [_e, j] = J(!1), ae = U(null), pe = U(null), fe = U(null), we = L((v) => {
     pe.current = v, fe.current = v;
   }, []), Q = U({
     spacing: null,
@@ -10815,19 +10818,19 @@ function mh({
     color: null
   }), ie = U(Vr);
   ie.current = R;
-  const be = U(z);
-  be.current = z;
+  const be = U(_);
+  be.current = _;
   const Ne = U(ne);
   Ne.current = ne;
   const ve = U(K);
   ve.current = K;
-  const Re = U("float"), I = U(null), O = U(null), { commitTweakState: H, history: se } = ch(w, q, n), Ie = sh(se), { snapshots: xe, save: Ge } = pu(n), { persistColor: We, persistSpacing: ct, persistFont: et, persistSize: Et, persistSecondary: _l, persistTab: Zt } = rh(H, n), jt = G(
+  const Re = U("float"), I = U(null), O = U(null), { commitTweakState: H, history: se } = ch(w, q, n), Ie = sh(se), { snapshots: xe, save: Ge } = pu(n), { persistColor: We, persistSpacing: ct, persistFont: et, persistSize: Et, persistSecondary: zl, persistTab: Zt } = rh(H, n), jt = G(
     () => {
       const v = Fe(n);
       return typeof document > "u" || !document.documentElement ? v.panelSettings.colorScheme : Vo(v, n);
     },
     [n, w]
-  ), zl = L((v) => {
+  ), _l = L((v) => {
     v.length !== 0 && H("bulk", (D) => ({
       ...D,
       spacing: v.reduce(
@@ -11104,7 +11107,7 @@ function mh({
     []
   ), go = L(() => {
     Ie.canUndo && Ft(se.undo());
-  }, [Ft, se, Ie.canUndo]), _r = L(() => {
+  }, [Ft, se, Ie.canUndo]), zr = L(() => {
     Ie.canRedo && Ft(se.redo());
   }, [Ft, se, Ie.canRedo]), Vl = L(
     (v) => {
@@ -11132,7 +11135,7 @@ function mh({
       return;
     }
     wo(b === "A" ? "B" : "A");
-  }, [wo, b, xe.A, xe.B]), zr = L((v) => {
+  }, [wo, b, xe.A, xe.B]), _r = L((v) => {
     if (v === "color") {
       H("reset-color", (D) => ({
         ...D,
@@ -11157,15 +11160,16 @@ function mh({
     v === "notes" || v === "color-secondary" || Zt(v, () => ({}));
   }, [H, n, et, Et, ct, Zt]), ft = ri(n), Tt = G(
     () => [
-      { label: "Export", onSelect: () => l(!0) },
-      { label: "Load from JSON…", onSelect: () => c(!0) },
+      { id: "export", label: "Export", onSelect: () => l(!0) },
+      { id: "import", label: "Load from JSON…", onSelect: () => c(!0) },
       {
+        id: "apply",
         label: "Apply",
         onSelect: () => u(!0),
         disabled: !ft,
         disabledReason: ft ? void 0 : Bo
       },
-      { label: "Reset", onSelect: In }
+      { id: "reset", label: "Reset", onSelect: In }
     ],
     [ft, In]
   ), mt = G(
@@ -11208,13 +11212,13 @@ function mh({
   }, [n]), Ye = G(() => Jt(n), [n]), tt = G(() => ({
     color: mt,
     ...Qt ? { secondary: Qt } : {}
-  }), [mt, Qt]), _t = G(
+  }), [mt, Qt]), zt = G(
     () => w ? Vs(Ye.entries, w, tt, n) : {},
     [tt, n, Ye.entries, w]
   ), Pr = G(
-    () => Object.values(_t).reduce((v, D) => v + D, 0),
-    [_t]
-  ), bo = $ === "color" ? (_t.color ?? 0) + (_t["color-secondary"] ?? 0) : _t[$] ?? 0, Rr = L((v) => {
+    () => Object.values(zt).reduce((v, D) => v + D, 0),
+    [zt]
+  ), bo = $ === "color" ? (zt.color ?? 0) + (zt["color-secondary"] ?? 0) : zt[$] ?? 0, Rr = L((v) => {
     const D = Ye.entry(v);
     return !!(D && w && Qn(D, w, tt, n));
   }, [tt, n, Ye, w]), vo = L((v) => {
@@ -11223,7 +11227,7 @@ function mh({
     D && H("revert", mi(D, tt, n), {
       address: Be(v)
     });
-  }, [tt, H, n, Ye, w]), _n = G(
+  }, [tt, H, n, Ye, w]), zn = G(
     () => w ? Cu({
       index: Ye,
       state: w,
@@ -11242,19 +11246,19 @@ function mh({
     }
     const D = Ye.entries.filter((Ce) => Ce.address.tabId === v.id), ee = D.length, he = D.filter((Ce) => mu(Ce, E, w ?? void 0, n)).length;
     return { tab: De[v.id] ?? { id: v.id, label: v.label, tiers: [] }, total: ee, matches: he };
-  }), [Ze, n, Ye, E, w, De]), zn = L((v) => {
+  }), [Ze, n, Ye, E, w, De]), _n = L((v) => {
     const D = pe.current ? Di(pe.current, v) : null, ee = 'input:not([type="hidden"]), select, textarea, [role="button"]';
     (D?.matches(ee) ? D : D?.querySelector(ee))?.focus();
   }, []), Yl = L((v) => {
     const D = v.tabId === "color-secondary" ? "color" : v.tabId;
-    if (_(""), V(D), v.tabId === "palette") {
+    if (z(""), V(D), v.tabId === "palette") {
       y(v);
       return;
     }
-    window.requestAnimationFrame(() => zn(v));
-  }, [zn]), Jl = L((v) => {
-    y(null), window.requestAnimationFrame(() => zn(v));
-  }, [zn]), Xl = G(() => {
+    window.requestAnimationFrame(() => _n(v));
+  }, [_n]), Jl = L((v) => {
+    y(null), window.requestAnimationFrame(() => _n(v));
+  }, [_n]), Xl = G(() => {
     const v = [
       { id: "export", label: "Export", onSelect: () => l(!0) },
       { id: "import", label: "Load from JSON…", onSelect: () => c(!0) },
@@ -11270,7 +11274,7 @@ function mh({
       D.id === "notes" || D.id === "color-secondary" || v.push({
         id: `reset-${D.id}`,
         label: `Reset ${D.label}`,
-        onSelect: () => zr(D.id)
+        onSelect: () => _r(D.id)
       });
     for (const D of Ze)
       D.id !== "color-secondary" && v.push({
@@ -11283,7 +11287,7 @@ function mh({
       label: "Highlight settings",
       onSelect: () => f(!0)
     }), v;
-  }, [Ze, ft, zr]), Zl = G(
+  }, [Ze, ft, _r]), Zl = G(
     () => ({
       "header-actions": [
         {
@@ -11293,14 +11297,14 @@ function mh({
             ku,
             {
               query: E,
-              onQueryChange: _,
+              onQueryChange: z,
               onOpenPalette: () => A(!0)
             }
           )
         },
         ...Tt.map(
           (v, D) => ({
-            id: `panel-action-${v.label}`,
+            id: `panel-action-${v.id}`,
             order: D,
             compactAction: v,
             render: () => /* @__PURE__ */ i(
@@ -11310,6 +11314,7 @@ function mh({
                 className: "tokenpanel-action-link",
                 "aria-disabled": v.disabled,
                 title: v.disabledReason,
+                "data-zdtp-action": v.id,
                 children: v.label
               }
             )
@@ -11349,7 +11354,7 @@ function mh({
           render: ({ compact: v }) => v ? /* @__PURE__ */ i(
             Ya,
             {
-              enabled: ze,
+              enabled: _e,
               onChange: mo,
               compact: !0
             }
@@ -11428,7 +11433,7 @@ function mh({
             id: "dom-tweaker",
             order: 2,
             renderInCompactMenu: !0,
-            render: ({ compact: v }) => /* @__PURE__ */ i(zp, { compact: v })
+            render: ({ compact: v }) => /* @__PURE__ */ i(_p, { compact: v })
           }
         ] : [],
         {
@@ -11504,7 +11509,7 @@ function mh({
         {
           id: "ghost-idle",
           order: 0,
-          render: () => /* @__PURE__ */ i(Ya, { enabled: ze, onChange: mo })
+          render: () => /* @__PURE__ */ i(Ya, { enabled: _e, onChange: mo })
         },
         {
           id: "changed-only",
@@ -11540,10 +11545,10 @@ function mh({
       tt,
       B,
       bo,
-      _t,
+      zt,
       Y,
       K,
-      ze,
+      _e,
       fo,
       $t,
       mo,
@@ -11574,7 +11579,7 @@ function mh({
         history: Ie,
         railOpen: g,
         onUndo: go,
-        onRedo: _r,
+        onRedo: zr,
         onToggleRail: () => m((v) => !v)
       }
     ),
@@ -11583,7 +11588,7 @@ function mh({
       {
         enabled: r,
         onUndo: go,
-        onRedo: _r,
+        onRedo: zr,
         onFlipSnapshots: Fl
       }
     ),
@@ -11598,8 +11603,8 @@ function mh({
         onInspectTabClear: ql,
         onJumpToColorTab: Mr,
         panelOpen: r,
-        children: /* @__PURE__ */ i(_p, { instanceConfig: n, children: /* @__PURE__ */ i(xd, { instanceConfig: n, state: w, children: /* @__PURE__ */ i(Tu, { children: r && (() => {
-          const { width: v, height: D } = ph(z), ee = K === "mini" ? "float" : K, he = ee === "right" ? { position: "fixed", top: 0, right: 0, bottom: 0, left: "auto" } : ee === "bottom" ? { position: "fixed", top: "auto", right: 0, bottom: 0, left: 0 } : { position: "fixed", top: R.top, left: R.left }, Ce = ee === "right" ? ne.right : ee === "bottom" ? "100vw" : v, Se = ee === "bottom" ? ne.bottom : ee === "right" ? "100vh" : D;
+        children: /* @__PURE__ */ i(zp, { instanceConfig: n, children: /* @__PURE__ */ i(xd, { instanceConfig: n, state: w, children: /* @__PURE__ */ i(Tu, { children: r && (() => {
+          const { width: v, height: D } = ph(_), ee = K === "mini" ? "float" : K, he = ee === "right" ? { position: "fixed", top: 0, right: 0, bottom: 0, left: "auto" } : ee === "bottom" ? { position: "fixed", top: "auto", right: 0, bottom: 0, left: 0 } : { position: "fixed", top: R.top, left: R.left }, Ce = ee === "right" ? ne.right : ee === "bottom" ? "100vw" : v, Se = ee === "bottom" ? ne.bottom : ee === "right" ? "100vh" : D;
           return /* @__PURE__ */ h(me, { children: [
             K === "mini" ? /* @__PURE__ */ i(
               Wp,
@@ -11634,7 +11639,7 @@ function mh({
                   "--tokenpanel-grid-min": fs(Y)
                 },
                 children: [
-                  /* @__PURE__ */ i(fh, { enabled: ze, targetRef: pe }),
+                  /* @__PURE__ */ i(fh, { enabled: _e, targetRef: pe }),
                   /* @__PURE__ */ i(Dp, { onMouseDown: Pl }),
                   /* @__PURE__ */ i(
                     jp,
@@ -11647,7 +11652,7 @@ function mh({
                       density: Y,
                       onDensityChange: fo,
                       open: r,
-                      changedCounts: _t
+                      changedCounts: zt
                     }
                   ),
                   /* @__PURE__ */ i(
@@ -11679,7 +11684,7 @@ function mh({
                               persistColor: We,
                               secondaryTab: De["color-secondary"] ?? null,
                               secondaryState: w.secondary ?? Kt(n) ?? null,
-                              persistSecondary: _l,
+                              persistSecondary: zl,
                               instanceConfig: n,
                               tabOverrides: w.tabs ?? {},
                               searchQuery: E,
@@ -11695,8 +11700,8 @@ function mh({
                               state: w.spacing,
                               persistSpacing: ct,
                               searchQuery: E,
-                              onBulkApply: zl,
-                              changedContribution: _n,
+                              onBulkApply: _l,
+                              changedContribution: zn,
                               changedOnly: B
                             }
                           ),
@@ -11711,7 +11716,7 @@ function mh({
                               onRenderOnPageChange: Ol,
                               searchQuery: E,
                               onBulkApply: Al,
-                              changedContribution: _n,
+                              changedContribution: zn,
                               changedOnly: B
                             }
                           ),
@@ -11723,7 +11728,7 @@ function mh({
                               persistSize: Et,
                               searchQuery: E,
                               onBulkApply: Ll,
-                              changedContribution: _n,
+                              changedContribution: zn,
                               changedOnly: B
                             }
                           ),
@@ -11764,7 +11769,7 @@ function mh({
                               overrides: w.tabs?.[ge.id] ?? {},
                               searchQuery: E,
                               onBulkApply: (Ae) => Ml(ge.id, Ae),
-                              changedContribution: _n,
+                              changedContribution: zn,
                               changedOnly: B,
                               onChange: (Ae, He, Ke) => {
                                 Zt(ge.id, (Ue) => {
@@ -12200,7 +12205,7 @@ function af(e) {
   const t = Il();
   Ih(t), t.adapter = e, e ? Th(t, e) : Tl(t);
 }
-const _h = () => {
+const zh = () => {
   El(), Bt();
 };
 if (typeof window < "u") {
@@ -12209,7 +12214,7 @@ if (typeof window < "u") {
     show: Nh,
     hide: Ch,
     toggle: Sh
-  }), e.bound || (e.bound = !0, Tl(e), $s(_h));
+  }), e.bound || (e.bound = !0, Tl(e), $s(zh));
 }
 export {
   Ui as A,