npm - @takazudo/zdtp - Versions diffs - 0.3.0 → 0.3.2 - Mend

@takazudo/zdtp 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +16 -0
package/dist/astro/host-adapter.js +2 -2
package/dist/astro/index.js +1 -1
package/dist/index.d.ts.map +1 -1
package/dist/index.js +1180 -1117
package/dist/{panel-config-BOyB8Egg.js → panel-config-066BPYJD.js} +2 -2
package/dist/panel.d.ts.map +1 -1
package/dist/testing.js +2 -2
package/dist/{tweak-state-DMwBHPow.js → tweak-state-Do5gj6Nw.js} +1 -1
package/dist/utils/design-token-serde.d.ts +15 -1
package/dist/utils/design-token-serde.d.ts.map +1 -1
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -1,14 +1,14 @@
 import { jsxs as k, jsx as s, Fragment as ae } from "preact/jsx-runtime";
 import { createContext as jt, render as Kt } from "preact";
-import { useState as j, useRef as D, useMemo as J, useEffect as W, useId as ft, useCallback as R, useLayoutEffect as Po, useContext as Io, createPortal as Wt, memo as Ge } from "preact/compat";
-import { b as ge, i as Pn, s as zo, r as Ue, e as Ro, c as Oo, d as it, f as In, D as ln, h as Do, j as Bo, k as We, m as Vo, n as Ho, o as Fo, p as jo, l as zn, q as sn, t as cn, u as Rt, v as Ko, w as je, x as Wo, y as xt, z as dn, A as yt, B as un, C as Nt, E as Xo, a as Yo } from "./tweak-state-DMwBHPow.js";
-import { Z as Ul } from "./tweak-state-DMwBHPow.js";
-import { g as q, k as ve, n as qo, o as P, p as Go, r as Uo, q as Jo, t as pn, a as Rn, u as On, v as Zo, w as Qo, x as er, D as tr, y as nr, z as or } from "./panel-config-BOyB8Egg.js";
-import { c as Zl, s as Ql } from "./panel-config-BOyB8Egg.js";
-import { c as rr } from "./color-schemes-CgzOBqGO.js";
-import { r as ar } from "./route-tokens-to-files-1DvmWBdj.js";
-import { useContext as Xt, useCallback as Y, useRef as de, useEffect as ue, useState as _e, useMemo as lt } from "preact/hooks";
-function $e(e, t = q()) {
+import { useState as K, useRef as B, useMemo as Z, useEffect as X, useId as ht, useCallback as R, useLayoutEffect as zo, useContext as Ro, createPortal as Wt, memo as Ge } from "preact/compat";
+import { b as ge, i as Pn, s as Oo, r as Ue, e as Do, c as Vo, d as lt, f as In, D as ln, h as Bo, j as Ho, k as We, m as Fo, n as jo, o as Ko, p as Wo, l as zn, q as sn, t as cn, u as Rt, v as Xo, w as je, x as Yo, y as yt, z as dn, A as Nt, B as un, C as _t, E as qo, a as Go } from "./tweak-state-Do5gj6Nw.js";
+import { Z as es } from "./tweak-state-Do5gj6Nw.js";
+import { g as Y, k as ve, n as Uo, o as P, p as Jo, r as Zo, q as Qo, t as pn, a as Rn, u as On, v as er, w as tr, x as nr, D as or, y as Dn, z as rr } from "./panel-config-066BPYJD.js";
+import { c as ns, s as os } from "./panel-config-066BPYJD.js";
+import { c as ar } from "./color-schemes-CgzOBqGO.js";
+import { r as ir } from "./route-tokens-to-files-1DvmWBdj.js";
+import { useContext as Xt, useCallback as q, useRef as de, useEffect as ue, useState as $e, useMemo as st } from "preact/hooks";
+function xe(e, t = Y()) {
   const n = t.tabs.find((r) => r.id === e);
   if (!n) return [];
   const o = [];
@@ -17,11 +17,34 @@ function $e(e, t = q()) {
       o.push(a);
   return o;
 }
-const rt = "zudo-design-tokens/v2", _t = "zudo-design-tokens/v1";
-function Dn() {
+const Vn = /* @__PURE__ */ new Set([
+  "color",
+  "color-secondary",
+  "spacing",
+  "font",
+  "size"
+]);
+function lr(e) {
+  const t = {};
+  if (!e) return t;
+  for (const n of Object.values(e))
+    for (const [o, r] of Object.entries(n))
+      t[o] = r;
+  return t;
+}
+function sr(e, t) {
+  const n = /* @__PURE__ */ new Map(), o = t.tabs.find((r) => r.id === e);
+  if (!o) return n;
+  for (const r of o.tiers)
+    for (const a of r.items)
+      a.readonly || n.set(a.cssVar, { tierId: r.id, itemId: a.id });
+  return n;
+}
+const at = "zudo-design-tokens/v2", $t = "zudo-design-tokens/v1";
+function Bn() {
   return {};
 }
-function ir(e = q()) {
+function cr(e = Y()) {
   return e.schemaId;
 }
 class Pe extends Error {
@@ -31,20 +54,26 @@ class Pe extends Error {
     super(n), this.name = "DesignTokenSchemaError", this.reason = t, this.actualSchema = o, Object.setPrototypeOf(this, Pe.prototype);
   }
 }
-function Bn(e, t = {}, n = q()) {
+function Hn(e, t = {}, n = Y()) {
   const o = t.now ? t.now() : /* @__PURE__ */ new Date(), r = {
-    $schema: rt,
+    $schema: at,
     exportedAt: o.toISOString()
-  }, a = {}, i = lr(e.color, t, n);
+  }, a = {}, i = dr(e.color, t, n);
   i && (a.color = i);
-  const l = $t($e("spacing", n), e.spacing, t);
+  const l = Je(xe("spacing", n), e.spacing, t);
   l && (a.spacing = l);
-  const c = $t($e("font", n), e.typography, t);
+  const c = Je(xe("font", n), e.typography, t);
   c && (a.font = c);
-  const d = $t($e("size", n), e.size, t);
-  return d && (a.size = d), Object.keys(a).length > 0 && (r.tabs = a), r;
+  const d = Je(xe("size", n), e.size, t);
+  d && (a.size = d);
+  for (const u of n.tabs) {
+    if (Vn.has(u.id)) continue;
+    const p = lr(e.tabs?.[u.id]), m = Je(xe(u.id, n), p, t);
+    m && (a[u.id] = m);
+  }
+  return Object.keys(a).length > 0 && (r.tabs = a), r;
 }
-function lr(e, t, n) {
+function dr(e, t, n) {
   const o = t.colorDefaults, r = t.includeDefaults === !0, a = ge(n), i = {};
   let l = !1;
   const c = {};
@@ -64,7 +93,7 @@ function lr(e, t, n) {
   }
   return p && (i.semantic = u, l = !0), l ? i : void 0;
 }
-function $t(e, t, n) {
+function Je(e, t, n) {
   const o = n.includeDefaults === !0, r = {};
   let a = !1;
   if (o)
@@ -81,34 +110,56 @@ function $t(e, t, n) {
     }
   return a ? { raw: r } : void 0;
 }
-function sr(e, t = {}, n = q()) {
+function ur(e, t = {}, n = Y()) {
   if (e === null || typeof e != "object" || Array.isArray(e))
     throw new Pe("not-object", "Input is not a JSON object.");
   const o = e, r = o.$schema;
   if (r === void 0)
     throw new Pe(
       "schema-missing",
-      `Missing "$schema" key. Expected "${rt}" or "${_t}".`
+      `Missing "$schema" key. Expected "${at}" or "${$t}".`
     );
-  if (r === rt)
-    return cr(o, t, n);
-  if (r === _t)
-    return ur(o, t, n);
+  if (r === at)
+    return pr(o, t, n);
+  if (r === $t)
+    return hr(o, t, n);
   throw new Pe(
     "schema-mismatch",
-    `Unsupported "$schema" value: ${JSON.stringify(r)}. Expected "${rt}" or "${_t}".`,
+    `Unsupported "$schema" value: ${JSON.stringify(r)}. Expected "${at}" or "${$t}".`,
     r
   );
 }
-function cr(e, t, n) {
-  const o = [], r = [], a = t.colorDefaults ?? Vn(n), i = ge(n), l = e.tabs && typeof e.tabs == "object" && !Array.isArray(e.tabs) ? e.tabs : {}, c = l.color, d = dr(c, a, i, o), u = l.spacing, p = u && typeof u == "object" ? u.raw : void 0, m = Ct(p, $e("spacing", n), "spacing", r, o), h = l.font, v = h && typeof h == "object" ? h.raw : void 0, C = Ct(v, $e("font", n), "font.raw", r, o), b = l.size, x = b && typeof b == "object" ? b.raw : void 0, g = Ct(x, $e("size", n), "size", r, o);
+function pr(e, t, n) {
+  const o = [], r = [], a = t.colorDefaults ?? Fn(n), i = ge(n), l = e.tabs && typeof e.tabs == "object" && !Array.isArray(e.tabs) ? e.tabs : {}, c = l.color, d = fr(c, a, i, o), u = l.spacing, p = u && typeof u == "object" ? u.raw : void 0, m = Ct(p, xe("spacing", n), "spacing", r, o), h = l.font, v = h && typeof h == "object" ? h.raw : void 0, C = Ct(v, xe("font", n), "font.raw", r, o), b = l.size, N = b && typeof b == "object" ? b.raw : void 0, g = Ct(N, xe("size", n), "size", r, o);
+  let y;
+  for (const w of n.tabs) {
+    if (Vn.has(w.id)) continue;
+    const _ = l[w.id], x = _ && typeof _ == "object" && !Array.isArray(_) ? _.raw : void 0;
+    if (!x || typeof x != "object" || Array.isArray(x)) continue;
+    const f = sr(w.id, n), E = {};
+    let S = !1;
+    for (const [O, j] of Object.entries(x)) {
+      const D = f.get(O);
+      if (!D) {
+        r.push(O);
+        continue;
+      }
+      if (typeof j != "string" || j.length === 0) {
+        o.push(`${w.id}.raw.${O} is not a non-empty string; ignored.`);
+        continue;
+      }
+      const G = E[D.tierId] ?? (E[D.tierId] = {});
+      G[D.itemId] = j, S = !0;
+    }
+    S && (y || (y = {}), y[w.id] = E);
+  }
   return {
-    state: { color: d, spacing: m, typography: C, size: g },
+    state: { color: d, spacing: m, typography: C, size: g, ...y ? { tabs: y } : {} },
     unknownTokens: r,
     warnings: o
   };
 }
-function dr(e, t, n, o) {
+function fr(e, t, n, o) {
   if (!e || typeof e != "object" || Array.isArray(e))
     return { ...t, palette: [...t.palette], semanticMappings: { ...t.semanticMappings } };
   const r = e;
@@ -147,7 +198,7 @@ function dr(e, t, n, o) {
   };
 }
 function Ct(e, t, n, o, r) {
-  if (!e || typeof e != "object") return Dn();
+  if (!e || typeof e != "object") return Bn();
   const a = /* @__PURE__ */ new Map();
   for (const l of t)
     l.readonly || a.set(l.cssVar, l);
@@ -166,15 +217,15 @@ function Ct(e, t, n, o, r) {
   }
   return i;
 }
-function ur(e, t, n) {
-  const o = [], r = [], a = t.colorDefaults ?? Vn(n), i = pr(e.color, a, o), l = Et(e.spacing, $e("spacing", n), "spacing", r, o), c = Et(e.typography, $e("font", n), "typography", r, o), d = Et(e.size, $e("size", n), "size", r, o);
+function hr(e, t, n) {
+  const o = [], r = [], a = t.colorDefaults ?? Fn(n), i = gr(e.color, a, o), l = Et(e.spacing, xe("spacing", n), "spacing", r, o), c = Et(e.typography, xe("font", n), "typography", r, o), d = Et(e.size, xe("size", n), "size", r, o);
   return {
     state: { color: i, spacing: l, typography: c, size: d },
     unknownTokens: r,
     warnings: o
   };
 }
-function pr(e, t, n) {
+function gr(e, t, n) {
   if (!e || typeof e != "object")
     return {
       ...t,
@@ -194,7 +245,7 @@ function pr(e, t, n) {
       );
     }
   }
-  const a = o.base && typeof o.base == "object" ? o.base : {}, i = Be(a.bg, t.background), l = Be(a.fg, t.foreground), c = Be(a.cursor, t.cursor), d = Be(a["sel-bg"], t.selectionBg), u = Be(a["sel-fg"], t.selectionFg), p = {
+  const a = o.base && typeof o.base == "object" ? o.base : {}, i = Ve(a.bg, t.background), l = Ve(a.fg, t.foreground), c = Ve(a.cursor, t.cursor), d = Ve(a["sel-bg"], t.selectionBg), u = Ve(a["sel-fg"], t.selectionFg), p = {
     ...t.semanticMappings
   };
   if (o.semantic && typeof o.semantic == "object")
@@ -215,7 +266,7 @@ function pr(e, t, n) {
   };
 }
 function Et(e, t, n, o, r) {
-  if (!e || typeof e != "object") return Dn();
+  if (!e || typeof e != "object") return Bn();
   const a = /* @__PURE__ */ new Map();
   for (const l of t)
     l.readonly || a.set(l.cssVar, l);
@@ -234,10 +285,10 @@ function Et(e, t, n, o, r) {
   }
   return i;
 }
-function Be(e, t) {
+function Ve(e, t) {
   return typeof e == "number" && Number.isFinite(e) ? e : t;
 }
-function Vn(e = q()) {
+function Fn(e = Y()) {
   const t = ge(e), n = t && t.paletteSize > 0 ? t.paletteSize : 16, o = n - 1, r = Array.from({ length: n }, (i, l) => l === 0 ? "#000000" : l === o ? "#ffffff" : "#808080"), a = (i) => Math.min(Math.max(i, 0), o);
   return {
     palette: r,
@@ -250,14 +301,14 @@ function Vn(e = q()) {
     shikiTheme: "dracula"
   };
 }
-function fr(e, t) {
+function kr(e, t) {
   if (t) return t;
-  const n = Object.values(rr)[0];
+  const n = Object.values(ar)[0];
   return n ? Pn(n) : e;
 }
-function hr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
-  const [r, a] = j("Copy"), [i, l] = j(!1), c = D(null), d = D(null), u = D(null), p = o ?? q(), m = qo(p), h = J(() => {
-    const g = fr(t.color, n), N = Bn(
+function mr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
+  const [r, a] = K("Copy"), [i, l] = K(!1), c = B(null), d = B(null), u = B(null), p = o ?? Y(), m = Uo(p), h = Z(() => {
+    const g = kr(t.color, n), y = Hn(
       t,
       {
         includeDefaults: i,
@@ -265,9 +316,9 @@ function hr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
       },
       p
     );
-    return JSON.stringify(N, null, 2);
+    return JSON.stringify(y, null, 2);
   }, [t, n, i, p]);
-  W(() => {
+  X(() => {
     const g = c.current;
     if (g)
       return g.showModal(), window.requestAnimationFrame(() => {
@@ -275,21 +326,21 @@ function hr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
       }), () => {
         g.open && g.close();
       };
-  }, []), W(() => {
+  }, []), X(() => {
     const g = c.current;
     if (!g) return;
-    function N() {
+    function y() {
       e();
     }
-    return g.addEventListener("close", N), () => g.removeEventListener("close", N);
-  }, [e]), W(() => () => {
+    return g.addEventListener("close", y), () => g.removeEventListener("close", y);
+  }, [e]), X(() => () => {
     u.current && clearTimeout(u.current);
   }, []);
   function v(g) {
-    const N = c.current;
-    if (!N) return;
-    const y = N.getBoundingClientRect();
-    (g.clientX < y.left || g.clientX > y.right || g.clientY < y.top || g.clientY > y.bottom) && N.close();
+    const y = c.current;
+    if (!y) return;
+    const w = y.getBoundingClientRect();
+    (g.clientX < w.left || g.clientX > w.right || g.clientY < w.top || g.clientY > w.bottom) && y.close();
   }
   async function C() {
     let g = !1;
@@ -298,28 +349,28 @@ function hr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
     } catch {
     }
     if (!g) {
-      const N = c.current;
-      if (N)
+      const y = c.current;
+      if (y)
         try {
-          const y = document.createElement("textarea");
-          y.value = h, y.style.cssText = "position:fixed;opacity:0;left:-9999px", y.tabIndex = -1, y.setAttribute("aria-hidden", "true"), N.appendChild(y), y.focus(), y.select(), g = document.execCommand("copy"), N.removeChild(y);
+          const w = document.createElement("textarea");
+          w.value = h, w.style.cssText = "position:fixed;opacity:0;left:-9999px", w.tabIndex = -1, w.setAttribute("aria-hidden", "true"), y.appendChild(w), w.focus(), w.select(), g = document.execCommand("copy"), y.removeChild(w);
         } catch {
         }
     }
     a(g ? "Copied!" : "Failed"), u.current && clearTimeout(u.current), u.current = setTimeout(() => a("Copy"), 2e3);
   }
-  const b = ft(), x = `${p.modalClassPrefix}-export-title-${b}`;
+  const b = ht(), N = `${p.modalClassPrefix}-export-title-${b}`;
   return /* @__PURE__ */ k(
     "dialog",
     {
       ref: c,
       onClick: v,
-      "aria-labelledby": x,
+      "aria-labelledby": N,
       className: `${P(p, "")} ${P(p, "--export")}`,
       "data-design-token-panel-modal": "",
       "data-design-token-panel-modal-variant": "export",
       children: [
-        /* @__PURE__ */ s("div", { id: x, role: "heading", "aria-level": 2, className: P(p, "__title"), children: "Export Design Tokens" }),
+        /* @__PURE__ */ s("div", { id: N, role: "heading", "aria-level": 2, className: P(p, "__title"), children: "Export Design Tokens" }),
         /* @__PURE__ */ k("div", { className: P(p, "__hint"), children: [
           "Save as ",
           /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: m }),
@@ -370,9 +421,9 @@ function hr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
     }
   );
 }
-function gr({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
-  const [r, a] = j(""), [i, l] = j(null), c = D(null), d = D(null), u = o ?? q(), p = ir(u);
-  W(() => {
+function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
+  const [r, a] = K(""), [i, l] = K(null), c = B(null), d = B(null), u = o ?? Y(), p = cr(u);
+  X(() => {
     const b = c.current;
     if (b)
       return b.showModal(), window.requestAnimationFrame(() => {
@@ -380,19 +431,19 @@ function gr({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
       }), () => {
         b.open && b.close();
       };
-  }, []), W(() => {
+  }, []), X(() => {
     const b = c.current;
     if (!b) return;
-    function x() {
+    function N() {
       e();
     }
-    return b.addEventListener("close", x), () => b.removeEventListener("close", x);
+    return b.addEventListener("close", N), () => b.removeEventListener("close", N);
   }, [e]);
   function m(b) {
-    const x = c.current;
-    if (!x) return;
-    const g = x.getBoundingClientRect();
-    (b.clientX < g.left || b.clientX > g.right || b.clientY < g.top || b.clientY > g.bottom) && x.close();
+    const N = c.current;
+    if (!N) return;
+    const g = N.getBoundingClientRect();
+    (b.clientX < g.left || b.clientX > g.right || b.clientY < g.top || b.clientY > g.bottom) && N.close();
   }
   function h() {
     l(null);
@@ -401,38 +452,38 @@ function gr({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
       l({ kind: "error", text: "Paste a JSON blob first." });
       return;
     }
-    let x;
+    let N;
     try {
-      x = JSON.parse(b);
+      N = JSON.parse(b);
     } catch (g) {
-      const N = g instanceof Error ? g.message : String(g);
-      l({ kind: "error", text: `JSON parse error: ${N}` });
+      const y = g instanceof Error ? g.message : String(g);
+      l({ kind: "error", text: `JSON parse error: ${y}` });
       return;
     }
     try {
-      const { state: g, unknownTokens: N, warnings: y } = sr(
-        x,
+      const { state: g, unknownTokens: y, warnings: w } = ur(
+        N,
         {
           colorDefaults: n
         },
         u
       );
-      if (N.length > 0) {
+      if (y.length > 0) {
         console.groupCollapsed(
-          `[design-token-serde] ${N.length} unknown token${N.length === 1 ? "" : "s"} ignored while loading JSON`
+          `[design-token-serde] ${y.length} unknown token${y.length === 1 ? "" : "s"} ignored while loading JSON`
         );
-        for (const E of N)
+        for (const E of y)
           console.warn(E);
         console.groupEnd();
       }
-      y.length > 0 && console.warn("[design-token-serde] warnings:", y), t(g);
-      const _ = Object.keys(g.spacing).length + Object.keys(g.typography).length + Object.keys(g.size).length, w = Go(g.color, n);
-      _ === 0 && w && N.length > 0 ? l({
+      w.length > 0 && console.warn("[design-token-serde] warnings:", w), t(g);
+      const _ = Object.keys(g.spacing).length + Object.keys(g.typography).length + Object.keys(g.size).length, x = Jo(g.color, n);
+      _ === 0 && x && y.length > 0 ? l({
         kind: "error",
-        text: `Nothing applied — all ${N.length} token${N.length === 1 ? "" : "s"} in the payload were unknown. See console for the list.`
-      }) : N.length > 0 ? l({
+        text: `Nothing applied — all ${y.length} token${y.length === 1 ? "" : "s"} in the payload were unknown. See console for the list.`
+      }) : y.length > 0 ? l({
         kind: "info",
-        text: `Loaded. ${N.length} unknown token${N.length === 1 ? "" : "s"} ignored — see console for the list.`
+        text: `Loaded. ${y.length} unknown token${y.length === 1 ? "" : "s"} ignored — see console for the list.`
       }) : l({ kind: "info", text: "Loaded." });
     } catch (g) {
       if (g instanceof Pe) {
@@ -445,11 +496,11 @@ function gr({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
         }) : l({ kind: "error", text: "Input is not a JSON object." });
         return;
       }
-      const N = g instanceof Error ? g.message : String(g);
-      l({ kind: "error", text: `Load failed: ${N}` });
+      const y = g instanceof Error ? g.message : String(g);
+      l({ kind: "error", text: `Load failed: ${y}` });
     }
   }
-  const v = ft(), C = `${u.modalClassPrefix}-import-title-${v}`;
+  const v = ht(), C = `${u.modalClassPrefix}-import-title-${v}`;
   return /* @__PURE__ */ k(
     "dialog",
     {
@@ -517,7 +568,7 @@ function gr({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
     }
   );
 }
-function fn(e, t, n = ge(), o = q().tabs) {
+function fn(e, t, n = ge(), o = Y().tabs) {
   const r = {}, a = e.color, i = a.palette.length;
   for (let c = 0; c < i; c++) {
     const d = a.palette[c];
@@ -530,9 +581,9 @@ function fn(e, t, n = ge(), o = q().tabs) {
     if (u === void 0) continue;
     const p = t?.semanticMappings[c];
     if (!(t === void 0 || u !== p)) continue;
-    const h = mr(u, a);
+    const h = wr(u, a);
     if (h === null) continue;
-    const v = zo(h, a.palette.length);
+    const v = Oo(h, a.palette.length);
     v !== h && console.error(
       `[design-token-panel] paletteIndex ${h} for ${d} is out of range (palette length ${a.palette.length}); clamping to ${v}.`
     ), r[d] = `var(${ve(n, v)})`;
@@ -545,11 +596,11 @@ function fn(e, t, n = ge(), o = q().tabs) {
   for (const { tabId: c, overrides: d } of l) {
     if (Object.keys(d).length === 0) continue;
     const u = o.find((p) => p.id === c);
-    u && kr(u, d, r);
+    u && vr(u, d, r);
   }
   return r;
 }
-function kr(e, t, n) {
+function vr(e, t, n) {
   const o = {};
   for (const r of e.tiers) {
     const a = {};
@@ -566,19 +617,19 @@ function kr(e, t, n) {
       if (!(typeof i != "string" || i.length === 0))
         try {
           const l = Ue(e, r.id, a.id, o);
-          n[a.cssVar] = Ro(l);
+          n[a.cssVar] = Do(l);
         } catch {
         }
     }
 }
-function mr(e, t) {
+function wr(e, t) {
   return e === "bg" ? t.background : e === "fg" ? t.foreground : typeof e == "number" && Number.isInteger(e) ? e : null;
 }
-const br = 2e3, St = { kind: "preview" };
-function vr(e, t, n) {
-  return JSON.stringify(Bn(e, { colorDefaults: t }, n), null, 2);
+const xr = 2e3, St = { kind: "preview" };
+function yr(e, t, n) {
+  return JSON.stringify(Hn(e, { colorDefaults: t }, n), null, 2);
 }
-function wr(e) {
+function Nr(e) {
   if (Array.isArray(e.updated)) return e.updated;
   const t = e.results;
   if (Array.isArray(t)) return t;
@@ -591,7 +642,7 @@ function wr(e) {
   }
   return n;
 }
-function xr(e) {
+function _r(e) {
   return {
     dialog: `${P(e, "")} ${P(e, "--apply")}`,
     header: P(e, "__header"),
@@ -613,38 +664,38 @@ function xr(e) {
     jsonBlock: P(e, "__json")
   };
 }
-function yr(e) {
-  const { state: t, open: n, onClose: o, colorDefaults: r, onApplied: a, instanceConfig: i } = e, l = D(null), c = D(null), d = i ?? q(), u = J(() => xr(d), [d]), p = ft(), m = `${d.modalClassPrefix}-apply-title-${p}`, [h, v] = j(St), [C, b] = j("Copy pre-apply state to clipboard");
-  W(() => {
+function $r(e) {
+  const { state: t, open: n, onClose: o, colorDefaults: r, onApplied: a, instanceConfig: i } = e, l = B(null), c = B(null), d = i ?? Y(), u = Z(() => _r(d), [d]), p = ht(), m = `${d.modalClassPrefix}-apply-title-${p}`, [h, v] = K(St), [C, b] = K("Copy pre-apply state to clipboard");
+  X(() => {
     const A = l.current;
     if (!A) return;
-    const B = A.open;
-    n && !B ? (typeof A.showModal == "function" ? A.showModal() : A.setAttribute("open", ""), window.requestAnimationFrame(() => {
+    const H = A.open;
+    n && !H ? (typeof A.showModal == "function" ? A.showModal() : A.setAttribute("open", ""), window.requestAnimationFrame(() => {
       c.current?.focus();
-    })) : !n && B && (typeof A.close == "function" ? A.close() : A.removeAttribute("open"));
-  }, [n]), W(() => {
+    })) : !n && H && (typeof A.close == "function" ? A.close() : A.removeAttribute("open"));
+  }, [n]), X(() => {
     n && (v(St), b("Copy pre-apply state to clipboard"));
-  }, [n]), W(() => {
+  }, [n]), X(() => {
     if (C !== "Copied!") return;
     const A = window.setTimeout(
       () => b("Copy pre-apply state to clipboard"),
-      br
+      xr
     );
     return () => window.clearTimeout(A);
   }, [C]);
-  const x = J(() => {
-    const A = ge(d), B = fn(t, r, A, d.tabs), ee = Uo(d), be = ee && t.secondary ? fn(
+  const N = Z(() => {
+    const A = ge(d), H = fn(t, r, A, d.tabs), ee = Zo(d), be = ee && t.secondary ? fn(
       { ...t, color: t.secondary },
       void 0,
       ee,
       d.tabs
     ) : {};
-    return { ...B, ...be };
-  }, [t, r, d]), g = J(() => Jo(d), [d]), { groups: N, rejected: y, rejectedReasons: _ } = J(
-    () => ar(x, g),
-    [x, g]
-  ), w = J(() => Object.keys(x).length, [x]), f = w === 0, E = N.length > 0, S = d.applyEndpoint, V = !!S && Object.keys(g).length > 0;
-  async function X() {
+    return { ...H, ...be };
+  }, [t, r, d]), g = Z(() => Qo(d), [d]), { groups: y, rejected: w, rejectedReasons: _ } = Z(
+    () => ir(N, g),
+    [N, g]
+  ), x = Z(() => Object.keys(N).length, [N]), f = x === 0, E = y.length > 0, S = d.applyEndpoint, O = !!S && Object.keys(g).length > 0;
+  async function j() {
     if (!S) {
       v({
         kind: "error",
@@ -652,18 +703,18 @@ function yr(e) {
       });
       return;
     }
-    const A = vr(t, r, d);
+    const A = yr(t, r, d);
     v({ kind: "applying" });
     try {
-      const B = await fetch(S, {
+      const H = await fetch(S, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ tokens: x })
+        body: JSON.stringify({ tokens: N })
       });
-      if (!B.ok) {
+      if (!H.ok) {
         let be = "";
         try {
-          const I = await B.text();
+          const I = await H.text();
           if (I)
             try {
               const re = JSON.parse(I);
@@ -673,31 +724,31 @@ function yr(e) {
             }
         } catch {
         }
-        const $ = be ? `Apply failed (${B.status}): ${be}` : `Apply failed (${B.status} ${B.statusText || "error"}).`;
+        const $ = be ? `Apply failed (${H.status}): ${be}` : `Apply failed (${H.status} ${H.statusText || "error"}).`;
         v({ kind: "error", message: $ });
         return;
       }
       let ee = {};
       try {
-        ee = await B.json();
+        ee = await H.json();
       } catch {
         ee = {};
       }
       v({ kind: "success", response: ee, previewJson: A });
-    } catch (B) {
-      const ee = B instanceof Error ? B.message : String(B);
+    } catch (H) {
+      const ee = H instanceof Error ? H.message : String(H);
       v({ kind: "error", message: `Network error: ${ee}` });
     }
   }
-  function H(A) {
-    const B = typeof navigator < "u" ? navigator.clipboard : void 0;
-    B?.writeText && B.writeText(A).then(
+  function D(A) {
+    const H = typeof navigator < "u" ? navigator.clipboard : void 0;
+    H?.writeText && H.writeText(A).then(
       () => b("Copied!"),
       () => {
       }
     );
   }
-  function Z() {
+  function G() {
     a(), oe();
   }
   function ie() {
@@ -715,18 +766,18 @@ function yr(e) {
     typeof A.close == "function" ? A.close() : (A.removeAttribute("open"), o());
   }
   function me(A) {
-    const B = l.current;
-    if (!B) return;
-    const ee = B.getBoundingClientRect();
+    const H = l.current;
+    if (!H) return;
+    const ee = H.getBoundingClientRect();
     (A.clientX < ee.left || A.clientX > ee.right || A.clientY < ee.top || A.clientY > ee.bottom) && oe();
   }
-  const De = J(
+  const De = Z(
     () => Object.values(g).map((A) => {
-      const B = A.lastIndexOf("/");
-      return B >= 0 ? A.slice(B + 1) : A;
+      const H = A.lastIndexOf("/");
+      return H >= 0 ? A.slice(H + 1) : A;
     }).join(" / "),
     [g]
-  ), Ae = h.kind === "applying" ? "Applying…" : V ? `Apply to ${De}` : "Apply (host not configured)";
+  ), Ae = h.kind === "applying" ? "Applying…" : O ? `Apply to ${De}` : "Apply (host not configured)";
   return /* @__PURE__ */ k(
     "dialog",
     {
@@ -757,35 +808,35 @@ function yr(e) {
         ] }),
         /* @__PURE__ */ k("div", { children: [
           h.kind === "preview" && /* @__PURE__ */ s(
-            Nr,
+            Cr,
             {
               cls: u,
-              groups: N,
-              rejected: y,
+              groups: y,
+              rejected: w,
               rejectedReasons: _,
-              totalCount: w,
+              totalCount: x,
               isEmpty: f,
-              applyConfigured: V
+              applyConfigured: O
             }
           ),
-          h.kind === "applying" && /* @__PURE__ */ s(_r, { cls: u }),
+          h.kind === "applying" && /* @__PURE__ */ s(Er, { cls: u }),
           h.kind === "success" && /* @__PURE__ */ s(
-            $r,
+            Sr,
             {
               cls: u,
-              results: wr(h.response),
+              results: Nr(h.response),
               unknownCssVars: Array.isArray(h.response.unknownCssVars) ? h.response.unknownCssVars : [],
               previewJson: h.previewJson,
               copyLabel: C,
-              onCopy: () => H(h.previewJson)
+              onCopy: () => D(h.previewJson)
             }
           ),
-          h.kind === "error" && /* @__PURE__ */ s(Cr, { cls: u, message: h.message })
+          h.kind === "error" && /* @__PURE__ */ s(Tr, { cls: u, message: h.message })
         ] }),
         /* @__PURE__ */ k("div", { className: u.actions, children: [
           h.kind === "preview" && /* @__PURE__ */ k(ae, { children: [
             (() => {
-              const A = f || !E || !V;
+              const A = f || !E || !O;
               return /* @__PURE__ */ s(
                 "div",
                 {
@@ -794,12 +845,12 @@ function yr(e) {
                   tabIndex: 0,
                   className: u.primaryButton,
                   "aria-disabled": A || void 0,
-                  title: V ? void 0 : "Host has not configured an apply endpoint or routing map. The Apply modal can preview the diff but cannot rewrite source files.",
+                  title: O ? void 0 : "Host has not configured an apply endpoint or routing map. The Apply modal can preview the diff but cannot rewrite source files.",
                   onClick: () => {
-                    A || X();
+                    A || j();
                   },
-                  onKeyDown: (B) => {
-                    (B.key === "Enter" || B.key === " ") && (B.preventDefault(), A || X());
+                  onKeyDown: (H) => {
+                    (H.key === "Enter" || H.key === " ") && (H.preventDefault(), A || j());
                   },
                   children: Ae
                 }
@@ -826,9 +877,9 @@ function yr(e) {
               role: "button",
               tabIndex: 0,
               className: u.primaryButton,
-              onClick: Z,
+              onClick: G,
               onKeyDown: (A) => {
-                (A.key === "Enter" || A.key === " ") && (A.preventDefault(), Z());
+                (A.key === "Enter" || A.key === " ") && (A.preventDefault(), G());
               },
               children: "Done"
             }
@@ -866,7 +917,7 @@ function yr(e) {
     }
   );
 }
-function Nr({
+function Cr({
   cls: e,
   groups: t,
   rejected: n,
@@ -895,7 +946,7 @@ function Nr({
     ] }),
     t.map((c) => /* @__PURE__ */ k("div", { children: [
       /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: [
-        Er(c.relativePath),
+        Mr(c.relativePath),
         " (",
         Object.keys(c.tokens).length,
         ")"
@@ -924,13 +975,13 @@ function Nr({
     ] })
   ] });
 }
-function _r({ cls: e }) {
+function Er({ cls: e }) {
   return /* @__PURE__ */ k("div", { className: e.applying, role: "status", "aria-live": "polite", children: [
     /* @__PURE__ */ s("span", { className: e.spinner, "aria-hidden": "true" }),
     /* @__PURE__ */ s("span", { children: "Applying changes…" })
   ] });
 }
-function $r({
+function Sr({
   cls: e,
   results: t,
   unknownCssVars: n,
@@ -942,9 +993,9 @@ function $r({
     /* @__PURE__ */ s("div", { className: e.statusSuccess, role: "status", children: "Applied successfully." }),
     t.length === 0 ? /* @__PURE__ */ s("div", { className: e.hint, children: "The server returned no per-file details." }) : t.map((i) => /* @__PURE__ */ k("div", { children: [
       /* @__PURE__ */ s("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: i.file ?? "(unknown file)" }),
-      /* @__PURE__ */ s(Mt, { cls: e, label: "changed", values: i.changed }),
-      /* @__PURE__ */ s(Mt, { cls: e, label: "unknown", values: i.unknown }),
-      /* @__PURE__ */ s(Mt, { cls: e, label: "unchanged", values: i.unchanged })
+      /* @__PURE__ */ s(Tt, { cls: e, label: "changed", values: i.changed }),
+      /* @__PURE__ */ s(Tt, { cls: e, label: "unknown", values: i.unknown }),
+      /* @__PURE__ */ s(Tt, { cls: e, label: "unchanged", values: i.unchanged })
     ] }, i.file ?? "unknown-file")),
     n.length > 0 && /* @__PURE__ */ k("div", { className: e.statusWarning, children: [
       n.length,
@@ -970,7 +1021,7 @@ function $r({
     /* @__PURE__ */ s("div", { role: "none", className: e.jsonBlock, children: o })
   ] });
 }
-function Mt({ cls: e, label: t, values: n }) {
+function Tt({ cls: e, label: t, values: n }) {
   return !n || n.length === 0 ? null : /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ k("div", { className: e.hint, children: [
       t,
@@ -981,13 +1032,13 @@ function Mt({ cls: e, label: t, values: n }) {
     /* @__PURE__ */ s("div", { className: e.list, children: n.map((o) => /* @__PURE__ */ s("div", { className: e.listItem, children: /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: o }) }, o)) })
   ] });
 }
-function Cr({ cls: e, message: t }) {
+function Tr({ cls: e, message: t }) {
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ s("div", { className: e.statusError, role: "alert", children: t }),
     /* @__PURE__ */ s("div", { className: e.hint, children: "Your edits are still intact — click Retry to send the same diff again, or Close to keep editing." })
   ] });
 }
-function Er(e) {
+function Mr(e) {
   if (!e) return "(unknown file)";
   const t = e.lastIndexOf("/");
   return t >= 0 ? e.slice(t + 1) : e;
@@ -1026,21 +1077,21 @@ function Se({
     }
   );
 }
-const Sr = { h: 0, s: 0, l: 0, a: 100 };
-function Mr(e) {
+const Ar = { h: 0, s: 0, l: 0, a: 100 };
+function Lr(e) {
   const t = e.toLowerCase();
   return /^#[0-9a-f]{6}$/.test(t) || /^#[0-9a-f]{8}$/.test(t) ? t : /^#[0-9a-f]{3}$/.test(t) ? `#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}` : /^#[0-9a-f]{4}$/.test(t) ? `#${t[1]}${t[1]}${t[2]}${t[2]}${t[3]}${t[3]}${t[4]}${t[4]}` : "";
 }
-function Tr(e) {
-  const t = Mr(e);
-  if (!t) return { ...Sr };
+function Pr(e) {
+  const t = Lr(e);
+  if (!t) return { ...Ar };
   const n = parseInt(t.slice(1, 3), 16) / 255, o = parseInt(t.slice(3, 5), 16) / 255, r = parseInt(t.slice(5, 7), 16) / 255, a = t.length === 9 ? Math.round(parseInt(t.slice(7, 9), 16) / 255 * 100) : 100, i = Math.max(n, o, r), l = Math.min(n, o, r), c = (i + l) / 2;
   if (i === l) return { h: 0, s: 0, l: Math.round(c * 100), a };
   const d = i - l, u = c > 0.5 ? d / (2 - i - l) : d / (i + l);
   let p = 0;
   return i === n ? p = ((o - r) / d + (o < r ? 6 : 0)) / 6 : i === o ? p = ((r - n) / d + 2) / 6 : p = ((n - o) / d + 4) / 6, { h: Math.round(p * 360), s: Math.round(u * 100), l: Math.round(c * 100), a };
 }
-function Ar(e, t, n, o) {
+function Ir(e, t, n, o) {
   t = Math.max(0, Math.min(100, t)), n = Math.max(0, Math.min(100, n)), o = Math.max(0, Math.min(100, o)), e = (e % 360 + 360) % 360;
   const r = t / 100, a = n / 100, i = (1 - Math.abs(2 * a - 1)) * r, l = i * (1 - Math.abs(e / 60 % 2 - 1)), c = a - i / 2;
   let d = 0, u = 0, p = 0;
@@ -1050,7 +1101,7 @@ function Ar(e, t, n, o) {
   const v = Math.round(o / 100 * 255).toString(16).padStart(2, "0");
   return `${h}${v}`;
 }
-const Hn = (e, t) => {
+const jn = (e, t) => {
   if (typeof e == "number") {
     if (t === 3)
       return {
@@ -1083,7 +1134,7 @@ const Hn = (e, t) => {
         alpha: (e & 255) / 255
       };
   }
-}, Lr = {
+}, zr = {
   aliceblue: 15792383,
   antiquewhite: 16444375,
   aqua: 65535,
@@ -1234,23 +1285,23 @@ const Hn = (e, t) => {
   whitesmoke: 16119285,
   yellow: 16776960,
   yellowgreen: 10145074
-}, Pr = (e) => Hn(Lr[e.toLowerCase()], 6), Ir = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, zr = (e) => {
+}, Rr = (e) => jn(zr[e.toLowerCase()], 6), Or = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, Dr = (e) => {
   let t;
-  return (t = e.match(Ir)) ? Hn(parseInt(t[1], 16), t[1].length) : void 0;
-}, Me = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", Xe = `${Me}%`, Yt = `(?:${Me}%|${Me})`, Rr = `(?:${Me}(deg|grad|rad|turn)|${Me})`, Re = "\\s*,\\s*", Or = new RegExp(
-  `^rgba?\\(\\s*${Me}${Re}${Me}${Re}${Me}\\s*(?:,\\s*${Yt}\\s*)?\\)$`
-), Dr = new RegExp(
+  return (t = e.match(Or)) ? jn(parseInt(t[1], 16), t[1].length) : void 0;
+}, Te = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", Xe = `${Te}%`, Yt = `(?:${Te}%|${Te})`, Vr = `(?:${Te}(deg|grad|rad|turn)|${Te})`, Re = "\\s*,\\s*", Br = new RegExp(
+  `^rgba?\\(\\s*${Te}${Re}${Te}${Re}${Te}\\s*(?:,\\s*${Yt}\\s*)?\\)$`
+), Hr = new RegExp(
   `^rgba?\\(\\s*${Xe}${Re}${Xe}${Re}${Xe}\\s*(?:,\\s*${Yt}\\s*)?\\)$`
-), Br = (e) => {
+), Fr = (e) => {
   let t = { mode: "rgb" }, n;
-  if (n = e.match(Or))
+  if (n = e.match(Br))
     n[1] !== void 0 && (t.r = n[1] / 255), n[2] !== void 0 && (t.g = n[2] / 255), n[3] !== void 0 && (t.b = n[3] / 255);
-  else if (n = e.match(Dr))
+  else if (n = e.match(Hr))
     n[1] !== void 0 && (t.r = n[1] / 100), n[2] !== void 0 && (t.g = n[2] / 100), n[3] !== void 0 && (t.b = n[3] / 100);
   else
     return;
   return n[4] !== void 0 ? t.alpha = Math.max(0, Math.min(1, n[4] / 100)) : n[5] !== void 0 && (t.alpha = Math.max(0, Math.min(1, +n[5]))), t;
-}, st = (e, t) => e === void 0 ? void 0 : typeof e != "object" ? Wn(e) : e.mode !== void 0 ? e : t ? { ...e, mode: t } : void 0, xe = (e = "rgb") => (t) => (t = st(t, e)) !== void 0 ? (
+}, ct = (e, t) => e === void 0 ? void 0 : typeof e != "object" ? Yn(e) : e.mode !== void 0 ? e : t ? { ...e, mode: t } : void 0, ye = (e = "rgb") => (t) => (t = ct(t, e)) !== void 0 ? (
   // if the color's mode corresponds to our target mode
   t.mode === e ? (
     // then just return the color
@@ -1273,7 +1324,7 @@ const Hn = (e, t) => {
       )
     )
   )
-) : void 0, we = {}, Fn = {}, ct = [], jn = {}, Vr = (e) => e, qt = (e) => (we[e.mode] = {
+) : void 0, we = {}, Kn = {}, dt = [], Wn = {}, jr = (e) => e, qt = (e) => (we[e.mode] = {
   ...we[e.mode],
   ...e.toMode
 }, Object.keys(e.fromMode || {}).forEach((t) => {
@@ -1283,16 +1334,16 @@ const Hn = (e, t) => {
     throw new Error(`Missing interpolator for: ${t}`);
   typeof e.interpolate[t] == "function" && (e.interpolate[t] = {
     use: e.interpolate[t]
-  }), e.interpolate[t].fixup || (e.interpolate[t].fixup = Vr);
-}), Fn[e.mode] = e, (e.parse || []).forEach((t) => {
-  Hr(t, e.mode);
-}), xe(e.mode)), ht = (e) => Fn[e], Hr = (e, t) => {
+  }), e.interpolate[t].fixup || (e.interpolate[t].fixup = jr);
+}), Kn[e.mode] = e, (e.parse || []).forEach((t) => {
+  Kr(t, e.mode);
+}), ye(e.mode)), gt = (e) => Kn[e], Kr = (e, t) => {
   if (typeof e == "string") {
     if (!t)
       throw new Error("'mode' required when 'parser' is a string");
-    jn[e] = t;
-  } else typeof e == "function" && ct.indexOf(e) < 0 && ct.push(e);
-}, Ot = /[^\x00-\x7F]|[a-zA-Z_]/, Fr = /[^\x00-\x7F]|[-\w]/, T = {
+    Wn[e] = t;
+  } else typeof e == "function" && dt.indexOf(e) < 0 && dt.push(e);
+}, Ot = /[^\x00-\x7F]|[a-zA-Z_]/, Wr = /[^\x00-\x7F]|[-\w]/, M = {
   Function: "function",
   Ident: "ident",
   Number: "number",
@@ -1303,7 +1354,7 @@ const Hn = (e, t) => {
   Alpha: "alpha"
 };
 let L = 0;
-function Je(e) {
+function Ze(e) {
   let t = e[L], n = e[L + 1];
   return t === "-" || t === "+" ? /\d/.test(n) || n === "." && /\d/.test(e[L + 2]) : t === "." ? /\d/.test(n) : /\d/.test(t);
 }
@@ -1321,37 +1372,37 @@ function Dt(e) {
   }
   return !1;
 }
-const jr = {
+const Xr = {
   deg: 1,
   rad: 180 / Math.PI,
   grad: 9 / 10,
   turn: 360
 };
-function Ve(e) {
+function Be(e) {
   let t = "";
-  if ((e[L] === "-" || e[L] === "+") && (t += e[L++]), t += Ze(e), e[L] === "." && /\d/.test(e[L + 1]) && (t += e[L++] + Ze(e)), (e[L] === "e" || e[L] === "E") && ((e[L + 1] === "-" || e[L + 1] === "+") && /\d/.test(e[L + 2]) ? t += e[L++] + e[L++] + Ze(e) : /\d/.test(e[L + 1]) && (t += e[L++] + Ze(e))), Dt(e)) {
-    let n = dt(e);
-    return n === "deg" || n === "rad" || n === "turn" || n === "grad" ? { type: T.Hue, value: t * jr[n] } : void 0;
+  if ((e[L] === "-" || e[L] === "+") && (t += e[L++]), t += Qe(e), e[L] === "." && /\d/.test(e[L + 1]) && (t += e[L++] + Qe(e)), (e[L] === "e" || e[L] === "E") && ((e[L + 1] === "-" || e[L + 1] === "+") && /\d/.test(e[L + 2]) ? t += e[L++] + e[L++] + Qe(e) : /\d/.test(e[L + 1]) && (t += e[L++] + Qe(e))), Dt(e)) {
+    let n = ut(e);
+    return n === "deg" || n === "rad" || n === "turn" || n === "grad" ? { type: M.Hue, value: t * Xr[n] } : void 0;
   }
-  return e[L] === "%" ? (L++, { type: T.Percentage, value: +t }) : { type: T.Number, value: +t };
+  return e[L] === "%" ? (L++, { type: M.Percentage, value: +t }) : { type: M.Number, value: +t };
 }
-function Ze(e) {
+function Qe(e) {
   let t = "";
   for (; /\d/.test(e[L]); )
     t += e[L++];
   return t;
 }
-function dt(e) {
+function ut(e) {
   let t = "";
-  for (; L < e.length && Fr.test(e[L]); )
+  for (; L < e.length && Wr.test(e[L]); )
     t += e[L++];
   return t;
 }
-function Kr(e) {
-  let t = dt(e);
-  return e[L] === "(" ? (L++, { type: T.Function, value: t }) : t === "none" ? { type: T.None, value: void 0 } : { type: T.Ident, value: t };
+function Yr(e) {
+  let t = ut(e);
+  return e[L] === "(" ? (L++, { type: M.Function, value: t }) : t === "none" ? { type: M.None, value: void 0 } : { type: M.Ident, value: t };
 }
-function Wr(e = "") {
+function qr(e = "") {
   let t = e.trim(), n = [], o;
   for (L = 0; L < t.length; ) {
     if (o = t[L++], o === `
@@ -1364,30 +1415,30 @@ function Wr(e = "") {
     if (o === ",")
       return;
     if (o === ")") {
-      n.push({ type: T.ParenClose });
+      n.push({ type: M.ParenClose });
       continue;
     }
     if (o === "+") {
-      if (L--, Je(t)) {
-        n.push(Ve(t));
+      if (L--, Ze(t)) {
+        n.push(Be(t));
         continue;
       }
       return;
     }
     if (o === "-") {
-      if (L--, Je(t)) {
-        n.push(Ve(t));
+      if (L--, Ze(t)) {
+        n.push(Be(t));
         continue;
       }
       if (Dt(t)) {
-        n.push({ type: T.Ident, value: dt(t) });
+        n.push({ type: M.Ident, value: ut(t) });
         continue;
       }
       return;
     }
     if (o === ".") {
-      if (L--, Je(t)) {
-        n.push(Ve(t));
+      if (L--, Ze(t)) {
+        n.push(Be(t));
         continue;
       }
       return;
@@ -1397,56 +1448,56 @@ function Wr(e = "") {
 ` || t[L] === "	" || t[L] === " "); )
         L++;
       let r;
-      if (Je(t) && (r = Ve(t), r.type !== T.Hue)) {
-        n.push({ type: T.Alpha, value: r });
+      if (Ze(t) && (r = Be(t), r.type !== M.Hue)) {
+        n.push({ type: M.Alpha, value: r });
         continue;
       }
-      if (Dt(t) && dt(t) === "none") {
+      if (Dt(t) && ut(t) === "none") {
         n.push({
-          type: T.Alpha,
-          value: { type: T.None, value: void 0 }
+          type: M.Alpha,
+          value: { type: M.None, value: void 0 }
         });
         continue;
       }
       return;
     }
     if (/\d/.test(o)) {
-      L--, n.push(Ve(t));
+      L--, n.push(Be(t));
       continue;
     }
     if (Ot.test(o)) {
-      L--, n.push(Kr(t));
+      L--, n.push(Yr(t));
       continue;
     }
     return;
   }
   return n;
 }
-function Xr(e) {
+function Gr(e) {
   e._i = 0;
   let t = e[e._i++];
-  if (!t || t.type !== T.Function || t.value !== "color" || (t = e[e._i++], t.type !== T.Ident))
+  if (!t || t.type !== M.Function || t.value !== "color" || (t = e[e._i++], t.type !== M.Ident))
     return;
-  const n = jn[t.value];
+  const n = Wn[t.value];
   if (!n)
     return;
-  const o = { mode: n }, r = Kn(e, !1);
+  const o = { mode: n }, r = Xn(e, !1);
   if (!r)
     return;
-  const a = ht(n).channels;
+  const a = gt(n).channels;
   for (let i = 0, l, c; i < a.length; i++)
-    l = r[i], c = a[i], l.type !== T.None && (o[c] = l.type === T.Number ? l.value : l.value / 100, c === "alpha" && (o[c] = Math.max(0, Math.min(1, o[c]))));
+    l = r[i], c = a[i], l.type !== M.None && (o[c] = l.type === M.Number ? l.value : l.value / 100, c === "alpha" && (o[c] = Math.max(0, Math.min(1, o[c]))));
   return o;
 }
-function Kn(e, t) {
+function Xn(e, t) {
   const n = [];
   let o;
   for (; e._i < e.length; ) {
-    if (o = e[e._i++], o.type === T.None || o.type === T.Number || o.type === T.Alpha || o.type === T.Percentage || t && o.type === T.Hue) {
+    if (o = e[e._i++], o.type === M.None || o.type === M.Number || o.type === M.Alpha || o.type === M.Percentage || t && o.type === M.Hue) {
       n.push(o);
       continue;
     }
-    if (o.type === T.ParenClose) {
+    if (o.type === M.ParenClose) {
       if (e._i < e.length)
         return;
       continue;
@@ -1455,70 +1506,70 @@ function Kn(e, t) {
   }
   if (!(n.length < 3 || n.length > 4)) {
     if (n.length === 4) {
-      if (n[3].type !== T.Alpha)
+      if (n[3].type !== M.Alpha)
         return;
       n[3] = n[3].value;
     }
-    return n.length === 3 && n.push({ type: T.None, value: void 0 }), n.every((r) => r.type !== T.Alpha) ? n : void 0;
+    return n.length === 3 && n.push({ type: M.None, value: void 0 }), n.every((r) => r.type !== M.Alpha) ? n : void 0;
   }
 }
-function Yr(e, t) {
+function Ur(e, t) {
   e._i = 0;
   let n = e[e._i++];
-  if (!n || n.type !== T.Function)
+  if (!n || n.type !== M.Function)
     return;
-  let o = Kn(e, t);
+  let o = Xn(e, t);
   if (o)
     return o.unshift(n.value), o;
 }
-const Wn = (e) => {
+const Yn = (e) => {
   if (typeof e != "string")
     return;
-  const t = Wr(e), n = t ? Yr(t, !0) : void 0;
-  let o, r = 0, a = ct.length;
+  const t = qr(e), n = t ? Ur(t, !0) : void 0;
+  let o, r = 0, a = dt.length;
   for (; r < a; )
-    if ((o = ct[r++](e, n)) !== void 0)
+    if ((o = dt[r++](e, n)) !== void 0)
       return o;
-  return t ? Xr(t) : void 0;
+  return t ? Gr(t) : void 0;
 };
-function qr(e, t) {
+function Jr(e, t) {
   if (!t || t[0] !== "rgb" && t[0] !== "rgba")
     return;
   const n = { mode: "rgb" }, [, o, r, a, i] = t;
-  if (!(o.type === T.Hue || r.type === T.Hue || a.type === T.Hue))
-    return o.type !== T.None && (n.r = o.type === T.Number ? o.value / 255 : o.value / 100), r.type !== T.None && (n.g = r.type === T.Number ? r.value / 255 : r.value / 100), a.type !== T.None && (n.b = a.type === T.Number ? a.value / 255 : a.value / 100), i.type !== T.None && (n.alpha = Math.min(
+  if (!(o.type === M.Hue || r.type === M.Hue || a.type === M.Hue))
+    return o.type !== M.None && (n.r = o.type === M.Number ? o.value / 255 : o.value / 100), r.type !== M.None && (n.g = r.type === M.Number ? r.value / 255 : r.value / 100), a.type !== M.None && (n.b = a.type === M.Number ? a.value / 255 : a.value / 100), i.type !== M.None && (n.alpha = Math.min(
       1,
       Math.max(
         0,
-        i.type === T.Number ? i.value : i.value / 100
+        i.type === M.Number ? i.value : i.value / 100
       )
     )), n;
 }
-const Gr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha: 0 } : void 0, Ur = (e, t, n) => e + n * (t - e), Jr = (e) => {
+const Zr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha: 0 } : void 0, Qr = (e, t, n) => e + n * (t - e), ea = (e) => {
   let t = [];
   for (let n = 0; n < e.length - 1; n++) {
     let o = e[n], r = e[n + 1];
     o === void 0 && r === void 0 ? t.push(void 0) : o !== void 0 && r !== void 0 ? t.push([o, r]) : t.push(o !== void 0 ? [o, o] : [r, r]);
   }
   return t;
-}, Zr = (e) => (t) => {
-  let n = Jr(t);
+}, ta = (e) => (t) => {
+  let n = ea(t);
   return (o) => {
     let r = o * n.length, a = o >= 1 ? n.length - 1 : Math.max(Math.floor(r), 0), i = n[a];
     return i === void 0 ? void 0 : e(i[0], i[1], r - a);
   };
-}, he = Zr(Ur), Gt = (e) => {
+}, he = ta(Qr), Gt = (e) => {
   let t = !1, n = e.map((o) => o !== void 0 ? (t = !0, o) : 1);
   return t ? n : e;
-}, Qr = {
+}, na = {
   mode: "rgb",
   channels: ["r", "g", "b", "alpha"],
   parse: [
-    qr,
-    zr,
-    Br,
-    Pr,
-    Gr,
+    Jr,
+    Dr,
+    Fr,
+    Rr,
+    Zr,
     "srgb"
   ],
   serialize: "srgb",
@@ -1531,21 +1582,21 @@ const Gr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
   gamut: !0,
   white: { r: 1, g: 1, b: 1 },
   black: { r: 0, g: 0, b: 0 }
-}, Tt = (e = 0) => {
+}, Mt = (e = 0) => {
   const t = Math.abs(e);
   return t <= 0.04045 ? e / 12.92 : (Math.sign(e) || 1) * Math.pow((t + 0.055) / 1.055, 2.4);
-}, Xn = ({ r: e, g: t, b: n, alpha: o }) => {
+}, qn = ({ r: e, g: t, b: n, alpha: o }) => {
   let r = {
     mode: "lrgb",
-    r: Tt(e),
-    g: Tt(t),
-    b: Tt(n)
+    r: Mt(e),
+    g: Mt(t),
+    b: Mt(n)
   };
   return o !== void 0 && (r.alpha = o), r;
 }, At = (e = 0) => {
   const t = Math.abs(e);
   return t > 31308e-7 ? (Math.sign(e) || 1) * (1.055 * Math.pow(t, 1 / 2.4) - 0.055) : e * 12.92;
-}, Yn = ({ r: e, g: t, b: n, alpha: o }, r = "rgb") => {
+}, Gn = ({ r: e, g: t, b: n, alpha: o }, r = "rgb") => {
   let a = {
     mode: r,
     r: At(e),
@@ -1553,22 +1604,22 @@ const Gr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     b: At(n)
   };
   return o !== void 0 && (a.alpha = o), a;
-}, Te = (e) => (e = e % 360) < 0 ? e + 360 : e, ea = (e, t) => e.map((n, o, r) => {
+}, Me = (e) => (e = e % 360) < 0 ? e + 360 : e, oa = (e, t) => e.map((n, o, r) => {
   if (n === void 0)
     return n;
-  let a = Te(n);
-  return o === 0 || e[o - 1] === void 0 ? a : t(a - Te(r[o - 1]));
-}).reduce((n, o) => !n.length || o === void 0 || n[n.length - 1] === void 0 ? (n.push(o), n) : (n.push(o + n[n.length - 1]), n), []), qn = (e) => ea(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), ta = (e, t) => {
+  let a = Me(n);
+  return o === 0 || e[o - 1] === void 0 ? a : t(a - Me(r[o - 1]));
+}).reduce((n, o) => !n.length || o === void 0 || n[n.length - 1] === void 0 ? (n.push(o), n) : (n.push(o + n[n.length - 1]), n), []), Un = (e) => oa(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), ra = (e, t) => {
   if (e.h === void 0 || t.h === void 0 || !e.s || !t.s)
     return 0;
-  let n = Te(e.h), o = Te(t.h), r = Math.sin((o - n + 360) / 2 * Math.PI / 180);
+  let n = Me(e.h), o = Me(t.h), r = Math.sin((o - n + 360) / 2 * Math.PI / 180);
   return 2 * Math.sqrt(e.s * t.s) * r;
-}, na = (e, t) => {
+}, aa = (e, t) => {
   if (e.h === void 0 || t.h === void 0 || !e.c || !t.c)
     return 0;
-  let n = Te(e.h), o = Te(t.h), r = Math.sin((o - n + 360) / 2 * Math.PI / 180);
+  let n = Me(e.h), o = Me(t.h), r = Math.sin((o - n + 360) / 2 * Math.PI / 180);
   return 2 * Math.sqrt(e.c * t.c) * r;
-}, Gn = (e) => {
+}, Jn = (e) => {
   let t = e.reduce(
     (o, r) => {
       if (r !== void 0) {
@@ -1580,11 +1631,11 @@ const Gr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     { sin: 0, cos: 0 }
   ), n = Math.atan2(t.sin, t.cos) * 180 / Math.PI;
   return n < 0 ? 360 + n : n;
-}, ut = ({ l: e, a: t, b: n, alpha: o }, r = "lch") => {
+}, pt = ({ l: e, a: t, b: n, alpha: o }, r = "lch") => {
   t === void 0 && (t = 0), n === void 0 && (n = 0);
   let a = Math.sqrt(t * t + n * n), i = { mode: r, l: e, c: a };
-  return a && (i.h = Te(Math.atan2(n, t) * 180 / Math.PI)), o !== void 0 && (i.alpha = o), i;
-}, pt = ({ l: e, c: t, h: n, alpha: o }, r = "lab") => {
+  return a && (i.h = Me(Math.atan2(n, t) * 180 / Math.PI)), o !== void 0 && (i.alpha = o), i;
+}, ft = ({ l: e, c: t, h: n, alpha: o }, r = "lab") => {
   n === void 0 && (n = 0);
   let a = {
     mode: r,
@@ -1598,8 +1649,8 @@ const Gr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
   Y: 1,
   Z: (1 - 0.3457 - 0.3585) / 0.3585
 };
-function oa({ h: e, s: t, l: n, alpha: o }) {
-  e = Te(e !== void 0 ? e : 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
+function ia({ h: e, s: t, l: n, alpha: o }) {
+  e = Me(e !== void 0 ? e : 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = n + t * (n < 0.5 ? n : 1 - n), a = r - (r - n) * 2 * Math.abs(e / 60 % 2 - 1), i;
   switch (Math.floor(e / 60)) {
     case 0:
@@ -1625,7 +1676,7 @@ function oa({ h: e, s: t, l: n, alpha: o }) {
   }
   return i.mode = "rgb", o !== void 0 && (i.alpha = o), i;
 }
-function ra({ r: e, g: t, b: n, alpha: o }) {
+function la({ r: e, g: t, b: n, alpha: o }) {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = Math.max(e, t, n), a = Math.min(e, t, n), i = {
     mode: "hsl",
@@ -1634,7 +1685,7 @@ function ra({ r: e, g: t, b: n, alpha: o }) {
   };
   return r - a !== 0 && (i.h = (r === e ? (t - n) / (r - a) + (t < n) * 6 : r === t ? (n - e) / (r - a) + 2 : (e - t) / (r - a) + 4) * 60), o !== void 0 && (i.alpha = o), i;
 }
-const aa = (e, t) => {
+const sa = (e, t) => {
   switch (t) {
     case "deg":
       return +e;
@@ -1645,71 +1696,71 @@ const aa = (e, t) => {
     case "turn":
       return e * 360;
   }
-}, ia = new RegExp(
-  `^hsla?\\(\\s*${Rr}${Re}${Xe}${Re}${Xe}\\s*(?:,\\s*${Yt}\\s*)?\\)$`
-), la = (e) => {
-  let t = e.match(ia);
+}, ca = new RegExp(
+  `^hsla?\\(\\s*${Vr}${Re}${Xe}${Re}${Xe}\\s*(?:,\\s*${Yt}\\s*)?\\)$`
+), da = (e) => {
+  let t = e.match(ca);
   if (!t) return;
   let n = { mode: "hsl" };
-  return t[3] !== void 0 ? n.h = +t[3] : t[1] !== void 0 && t[2] !== void 0 && (n.h = aa(t[1], t[2])), t[4] !== void 0 && (n.s = Math.min(Math.max(0, t[4] / 100), 1)), t[5] !== void 0 && (n.l = Math.min(Math.max(0, t[5] / 100), 1)), t[6] !== void 0 ? n.alpha = Math.max(0, Math.min(1, t[6] / 100)) : t[7] !== void 0 && (n.alpha = Math.max(0, Math.min(1, +t[7]))), n;
+  return t[3] !== void 0 ? n.h = +t[3] : t[1] !== void 0 && t[2] !== void 0 && (n.h = sa(t[1], t[2])), t[4] !== void 0 && (n.s = Math.min(Math.max(0, t[4] / 100), 1)), t[5] !== void 0 && (n.l = Math.min(Math.max(0, t[5] / 100), 1)), t[6] !== void 0 ? n.alpha = Math.max(0, Math.min(1, t[6] / 100)) : t[7] !== void 0 && (n.alpha = Math.max(0, Math.min(1, +t[7]))), n;
 };
-function sa(e, t) {
+function ua(e, t) {
   if (!t || t[0] !== "hsl" && t[0] !== "hsla")
     return;
   const n = { mode: "hsl" }, [, o, r, a, i] = t;
-  if (o.type !== T.None) {
-    if (o.type === T.Percentage)
+  if (o.type !== M.None) {
+    if (o.type === M.Percentage)
       return;
     n.h = o.value;
   }
-  if (r.type !== T.None) {
-    if (r.type === T.Hue)
+  if (r.type !== M.None) {
+    if (r.type === M.Hue)
       return;
     n.s = r.value / 100;
   }
-  if (a.type !== T.None) {
-    if (a.type === T.Hue)
+  if (a.type !== M.None) {
+    if (a.type === M.Hue)
       return;
     n.l = a.value / 100;
   }
-  return i.type !== T.None && (n.alpha = Math.min(
+  return i.type !== M.None && (n.alpha = Math.min(
     1,
     Math.max(
       0,
-      i.type === T.Number ? i.value : i.value / 100
+      i.type === M.Number ? i.value : i.value / 100
     )
   )), n;
 }
-const ca = {
+const pa = {
   mode: "hsl",
   toMode: {
-    rgb: oa
+    rgb: ia
   },
   fromMode: {
-    rgb: ra
+    rgb: la
   },
   channels: ["h", "s", "l", "alpha"],
   ranges: {
     h: [0, 360]
   },
   gamut: "rgb",
-  parse: [sa, la],
+  parse: [ua, da],
   serialize: (e) => `hsl(${e.h !== void 0 ? e.h : "none"} ${e.s !== void 0 ? e.s * 100 + "%" : "none"} ${e.l !== void 0 ? e.l * 100 + "%" : "none"}${e.alpha < 1 ? ` / ${e.alpha}` : ""})`,
   interpolate: {
-    h: { use: he, fixup: qn },
+    h: { use: he, fixup: Un },
     s: he,
     l: he,
     alpha: { use: he, fixup: Gt }
   },
   difference: {
-    h: ta
+    h: ra
   },
   average: {
-    h: Gn
+    h: Jn
   }
-}, Un = Math.pow(29, 3) / Math.pow(3, 3), Jn = Math.pow(6, 3) / Math.pow(29, 3);
-let Lt = (e) => Math.pow(e, 3) > Jn ? Math.pow(e, 3) : (116 * e - 16) / Un;
-const da = ({ l: e, a: t, b: n, alpha: o }) => {
+}, Zn = Math.pow(29, 3) / Math.pow(3, 3), Qn = Math.pow(6, 3) / Math.pow(29, 3);
+let Lt = (e) => Math.pow(e, 3) > Qn ? Math.pow(e, 3) : (116 * e - 16) / Zn;
+const fa = ({ l: e, a: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = (e + 16) / 116, a = t / 500 + r, i = r - n / 200, l = {
     mode: "xyz50",
@@ -1718,23 +1769,23 @@ const da = ({ l: e, a: t, b: n, alpha: o }) => {
     z: Lt(i) * Ie.Z
   };
   return o !== void 0 && (l.alpha = o), l;
-}, ua = ({ x: e, y: t, z: n, alpha: o }) => {
+}, ha = ({ x: e, y: t, z: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
-  let r = Yn({
+  let r = Gn({
     r: e * 3.1341359569958707 - t * 1.6173863321612538 - 0.4906619460083532 * n,
     g: e * -0.978795502912089 + t * 1.916254567259524 + 0.03344273116131949 * n,
     b: e * 0.07195537988411677 - t * 0.2289768264158322 + 1.405386058324125 * n
   });
   return o !== void 0 && (r.alpha = o), r;
-}, pa = (e) => ua(da(e)), fa = (e) => {
-  let { r: t, g: n, b: o, alpha: r } = Xn(e), a = {
+}, ga = (e) => ha(fa(e)), ka = (e) => {
+  let { r: t, g: n, b: o, alpha: r } = qn(e), a = {
     mode: "xyz50",
     x: 0.436065742824811 * t + 0.3851514688337912 * n + 0.14307845442264197 * o,
     y: 0.22249319175623702 * t + 0.7168870538238823 * n + 0.06061979053616537 * o,
     z: 0.013923904500943465 * t + 0.09708128566574634 * n + 0.7140993584005155 * o
   };
   return r !== void 0 && (a.alpha = r), a;
-}, Pt = (e) => e > Jn ? Math.cbrt(e) : (Un * e + 16) / 116, ha = ({ x: e, y: t, z: n, alpha: o }) => {
+}, Pt = (e) => e > Qn ? Math.cbrt(e) : (Zn * e + 16) / 116, ma = ({ x: e, y: t, z: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = Pt(e / Ie.X), a = Pt(t / Ie.Y), i = Pt(n / Ie.Z), l = {
     mode: "lab",
@@ -1743,44 +1794,44 @@ const da = ({ l: e, a: t, b: n, alpha: o }) => {
     b: 200 * (a - i)
   };
   return o !== void 0 && (l.alpha = o), l;
-}, ga = (e) => {
-  let t = ha(fa(e));
+}, ba = (e) => {
+  let t = ma(ka(e));
   return e.r === e.b && e.b === e.g && (t.a = t.b = 0), t;
 };
-function ka(e, t) {
+function va(e, t) {
   if (!t || t[0] !== "lch")
     return;
   const n = { mode: "lch" }, [, o, r, a, i] = t;
-  if (o.type !== T.None) {
-    if (o.type === T.Hue)
+  if (o.type !== M.None) {
+    if (o.type === M.Hue)
       return;
     n.l = Math.min(Math.max(0, o.value), 100);
   }
-  if (r.type !== T.None && (n.c = Math.max(
+  if (r.type !== M.None && (n.c = Math.max(
     0,
-    r.type === T.Number ? r.value : r.value * 150 / 100
-  )), a.type !== T.None) {
-    if (a.type === T.Percentage)
+    r.type === M.Number ? r.value : r.value * 150 / 100
+  )), a.type !== M.None) {
+    if (a.type === M.Percentage)
       return;
     n.h = a.value;
   }
-  return i.type !== T.None && (n.alpha = Math.min(
+  return i.type !== M.None && (n.alpha = Math.min(
     1,
     Math.max(
       0,
-      i.type === T.Number ? i.value : i.value / 100
+      i.type === M.Number ? i.value : i.value / 100
     )
   )), n;
 }
-const ma = {
+const wa = {
   mode: "lch",
   toMode: {
-    lab: pt,
-    rgb: (e) => pa(pt(e))
+    lab: ft,
+    rgb: (e) => ga(ft(e))
   },
   fromMode: {
-    rgb: (e) => ut(ga(e)),
-    lab: ut
+    rgb: (e) => pt(ba(e)),
+    lab: pt
   },
   channels: ["l", "c", "h", "alpha"],
   ranges: {
@@ -1788,21 +1839,21 @@ const ma = {
     c: [0, 150],
     h: [0, 360]
   },
-  parse: [ka],
+  parse: [va],
   serialize: (e) => `lch(${e.l !== void 0 ? e.l : "none"} ${e.c !== void 0 ? e.c : "none"} ${e.h !== void 0 ? e.h : "none"}${e.alpha < 1 ? ` / ${e.alpha}` : ""})`,
   interpolate: {
-    h: { use: he, fixup: qn },
+    h: { use: he, fixup: Un },
     c: he,
     l: he,
     alpha: { use: he, fixup: Gt }
   },
   difference: {
-    h: na
+    h: aa
   },
   average: {
-    h: Gn
+    h: Jn
   }
-}, ba = ({ r: e, g: t, b: n, alpha: o }) => {
+}, xa = ({ r: e, g: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = Math.cbrt(
     0.412221469470763 * e + 0.5363325372617348 * t + 0.0514459932675022 * n
@@ -1817,10 +1868,10 @@ const ma = {
     b: 0.0259040424655478 * r + 0.7827717124575296 * a - 0.8086757549230774 * i
   };
   return o !== void 0 && (l.alpha = o), l;
-}, va = (e) => {
-  let t = ba(Xn(e));
+}, ya = (e) => {
+  let t = xa(qn(e));
   return e.r === e.b && e.b === e.g && (t.a = t.b = 0), t;
-}, wa = ({ l: e, a: t, b: n, alpha: o }) => {
+}, Na = ({ l: e, a: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = Math.pow(e + 0.3963377773761749 * t + 0.2158037573099136 * n, 3), a = Math.pow(e - 0.1055613458156586 * t - 0.0638541728258133 * n, 3), i = Math.pow(e - 0.0894841775298119 * t - 1.2914855480194092 * n, 3), l = {
     mode: "lrgb",
@@ -1829,64 +1880,64 @@ const ma = {
     b: -0.0041960761386756 * r - 0.7034186179359362 * a + 1.7076146940746117 * i
   };
   return o !== void 0 && (l.alpha = o), l;
-}, xa = (e) => Yn(wa(e));
-function ya(e, t) {
+}, _a = (e) => Gn(Na(e));
+function $a(e, t) {
   if (!t || t[0] !== "oklch")
     return;
   const n = { mode: "oklch" }, [, o, r, a, i] = t;
-  if (o.type !== T.None) {
-    if (o.type === T.Hue)
+  if (o.type !== M.None) {
+    if (o.type === M.Hue)
       return;
     n.l = Math.min(
-      Math.max(0, o.type === T.Number ? o.value : o.value / 100),
+      Math.max(0, o.type === M.Number ? o.value : o.value / 100),
       1
     );
   }
-  if (r.type !== T.None && (n.c = Math.max(
+  if (r.type !== M.None && (n.c = Math.max(
     0,
-    r.type === T.Number ? r.value : r.value * 0.4 / 100
-  )), a.type !== T.None) {
-    if (a.type === T.Percentage)
+    r.type === M.Number ? r.value : r.value * 0.4 / 100
+  )), a.type !== M.None) {
+    if (a.type === M.Percentage)
       return;
     n.h = a.value;
   }
-  return i.type !== T.None && (n.alpha = Math.min(
+  return i.type !== M.None && (n.alpha = Math.min(
     1,
     Math.max(
       0,
-      i.type === T.Number ? i.value : i.value / 100
+      i.type === M.Number ? i.value : i.value / 100
     )
   )), n;
 }
-const Na = {
-  ...ma,
+const Ca = {
+  ...wa,
   mode: "oklch",
   toMode: {
-    oklab: (e) => pt(e, "oklab"),
-    rgb: (e) => xa(pt(e, "oklab"))
+    oklab: (e) => ft(e, "oklab"),
+    rgb: (e) => _a(ft(e, "oklab"))
   },
   fromMode: {
-    rgb: (e) => ut(va(e), "oklch"),
-    oklab: (e) => ut(e, "oklch")
+    rgb: (e) => pt(ya(e), "oklch"),
+    oklab: (e) => pt(e, "oklch")
   },
-  parse: [ya],
+  parse: [$a],
   serialize: (e) => `oklch(${e.l !== void 0 ? e.l : "none"} ${e.c !== void 0 ? e.c : "none"} ${e.h !== void 0 ? e.h : "none"}${e.alpha < 1 ? ` / ${e.alpha}` : ""})`,
   ranges: {
     l: [0, 1],
     c: [0, 0.4],
     h: [0, 360]
   }
-}, _a = (e) => Math.max(0, Math.min(1, e || 0)), at = (e) => Math.round(_a(e) * 255), Zn = xe("rgb"), Qn = (e) => {
+}, Ea = (e) => Math.max(0, Math.min(1, e || 0)), it = (e) => Math.round(Ea(e) * 255), eo = ye("rgb"), to = (e) => {
   if (e === void 0)
     return;
-  let t = at(e.r), n = at(e.g), o = at(e.b);
+  let t = it(e.r), n = it(e.g), o = it(e.b);
   return "#" + (1 << 24 | t << 16 | n << 8 | o).toString(16).slice(1);
-}, $a = (e) => {
+}, Sa = (e) => {
   if (e === void 0)
     return;
-  let t = at(e.alpha !== void 0 ? e.alpha : 1);
-  return Qn(e) + (256 | t).toString(16).slice(1);
-}, Ca = (e) => Qn(Zn(e)), Ea = (e) => $a(Zn(e)), eo = xe("rgb"), to = (e) => {
+  let t = it(e.alpha !== void 0 ? e.alpha : 1);
+  return to(e) + (256 | t).toString(16).slice(1);
+}, Ta = (e) => to(eo(e)), Ma = (e) => Sa(eo(e)), no = ye("rgb"), oo = (e) => {
   const t = {
     mode: e.mode,
     r: Math.max(0, Math.min(e.r !== void 0 ? e.r : 0, 1)),
@@ -1894,53 +1945,53 @@ const Na = {
     b: Math.max(0, Math.min(e.b !== void 0 ? e.b : 0, 1))
   };
   return e.alpha !== void 0 && (t.alpha = e.alpha), t;
-}, Sa = (e) => to(eo(e)), no = (e) => e !== void 0 && (e.r === void 0 || e.r >= 0 && e.r <= 1) && (e.g === void 0 || e.g >= 0 && e.g <= 1) && (e.b === void 0 || e.b >= 0 && e.b <= 1);
-function Ma(e) {
-  return no(eo(e));
+}, Aa = (e) => oo(no(e)), ro = (e) => e !== void 0 && (e.r === void 0 || e.r >= 0 && e.r <= 1) && (e.g === void 0 || e.g >= 0 && e.g <= 1) && (e.b === void 0 || e.b >= 0 && e.b <= 1);
+function La(e) {
+  return ro(no(e));
 }
 function Ut(e = "rgb") {
-  const { gamut: t } = ht(e);
+  const { gamut: t } = gt(e);
   if (!t)
     return (o) => !0;
-  const n = xe(typeof t == "string" ? t : e);
-  return (o) => no(n(o));
+  const n = ye(typeof t == "string" ? t : e);
+  return (o) => ro(n(o));
 }
-function Ta(e = "rgb") {
-  const { gamut: t } = ht(e);
+function Pa(e = "rgb") {
+  const { gamut: t } = gt(e);
   if (!t)
-    return (a) => st(a);
-  const n = typeof t == "string" ? t : e, o = xe(n), r = Ut(n);
+    return (a) => ct(a);
+  const n = typeof t == "string" ? t : e, o = ye(n), r = Ut(n);
   return (a) => {
-    const i = st(a);
+    const i = ct(a);
     if (!i)
       return;
     const l = o(i);
     if (r(l))
       return i;
-    const c = to(l);
-    return i.mode === c.mode ? c : xe(i.mode)(c);
+    const c = oo(l);
+    return i.mode === c.mode ? c : ye(i.mode)(c);
   };
 }
-function Aa(e, t = "lch", n = "rgb") {
-  e = st(e);
-  let o = n === "rgb" ? Ma : Ut(n), r = n === "rgb" ? Sa : Ta(n);
+function Ia(e, t = "lch", n = "rgb") {
+  e = ct(e);
+  let o = n === "rgb" ? La : Ut(n), r = n === "rgb" ? Aa : Pa(n);
   if (e === void 0 || o(e)) return e;
-  let a = xe(e.mode);
-  e = xe(t)(e);
+  let a = ye(e.mode);
+  e = ye(t)(e);
   let i = { ...e, c: 0 };
   if (!o(i))
     return a(r(i));
-  let l = 0, c = e.c !== void 0 ? e.c : 0, d = ht(t).ranges.c, u = (d[1] - d[0]) / Math.pow(2, 13), p = i.c;
+  let l = 0, c = e.c !== void 0 ? e.c : 0, d = gt(t).ranges.c, u = (d[1] - d[0]) / Math.pow(2, 13), p = i.c;
   for (; c - l > u; )
     i.c = l + (c - l) * 0.5, o(i) ? (p = i.c, l = i.c) : c = i.c;
   return a(
     o(i) ? i : { ...i, c: p }
   );
 }
-qt(Na);
-qt(Qr);
-qt(ca);
-const oo = 0.37, ro = xe("oklch"), ao = xe("rgb"), La = Ut("rgb");
+qt(Ca);
+qt(na);
+qt(pa);
+const ao = 0.37, io = ye("oklch"), lo = ye("rgb"), za = Ut("rgb");
 function Jt(e) {
   return {
     mode: "oklch",
@@ -1950,7 +2001,7 @@ function Jt(e) {
     alpha: e.a / 100
   };
 }
-function Pa(e) {
+function Ra(e) {
   return {
     l: (e.l ?? 0) * 100,
     c: e.c ?? 0,
@@ -1965,12 +2016,12 @@ function ne(e) {
   const r = (e.a / 100).toFixed(4);
   return `oklch(${t} ${n} ${o} / ${r})`;
 }
-function Ia(e) {
+function Oa(e) {
   const t = { l: 0, c: 0, h: 0, a: 100 };
   try {
-    const n = Wn(e);
+    const n = Yn(e);
     if (!n) return t;
-    const o = ro(n);
+    const o = io(n);
     if (!o) return t;
     const r = o.alpha === void 0 ? 1 : o.alpha;
     return {
@@ -1984,8 +2035,8 @@ function Ia(e) {
   }
 }
 function hn(e, t) {
-  const n = Jt(e), o = ao(n);
-  return o ? e.a < 100 ? Ea({ ...o, alpha: e.a / 100 }) ?? "#000000ff" : Ca(o) ?? "#000000" : "#000000";
+  const n = Jt(e), o = lo(n);
+  return o ? e.a < 100 ? Ma({ ...o, alpha: e.a / 100 }) ?? "#000000ff" : Ta(o) ?? "#000000" : "#000000";
 }
 function Ee(e) {
   const t = {
@@ -1994,11 +2045,11 @@ function Ee(e) {
     s: e.s / 100,
     l: e.l / 100,
     alpha: e.a / 100
-  }, n = ro(t);
-  return n ? Pa(n) : { l: 0, c: 0, h: 0, a: e.a };
+  }, n = io(t);
+  return n ? Ra(n) : { l: 0, c: 0, h: 0, a: e.a };
 }
 function gn(e) {
-  const t = Jt(e), n = Aa(t, "oklch", "rgb");
+  const t = Jt(e), n = Ia(t, "oklch", "rgb");
   return n ? {
     l: (n.l ?? e.l / 100) * 100,
     c: n.c ?? 0,
@@ -2006,14 +2057,14 @@ function gn(e) {
     a: e.a
   } : { l: e.l, c: 0, h: e.h, a: e.a };
 }
-function za(e) {
-  const t = ao(Jt(e));
-  return t ? La(t) : !1;
+function Da(e) {
+  const t = lo(Jt(e));
+  return t ? za(t) : !1;
 }
-function Qe(e, t, n) {
+function et(e, t, n) {
   return Math.min(n, Math.max(t, e));
 }
-function Ra(e, t, n) {
+function Va(e, t, n) {
   if (n <= 0) return e;
   const o = Math.round((e - t) / n);
   return t + o * n;
@@ -2026,68 +2077,68 @@ function kn({
   onDragStart: r,
   onDragEnd: a
 }) {
-  const { label: i, ariaLabel: l, min: c, max: d, step: u, format: p } = e, m = D(u);
+  const { label: i, ariaLabel: l, min: c, max: d, step: u, format: p } = e, m = B(u);
   m.current = u;
-  const h = D(!1), v = D(null), C = Qe((t - c) / (d - c), 0, 1), b = D(o);
+  const h = B(!1), v = B(null), C = et((t - c) / (d - c), 0, 1), b = B(o);
   b.current = o;
-  const x = D(r);
-  x.current = r;
-  const g = D(a);
+  const N = B(r);
+  N.current = r;
+  const g = B(a);
   g.current = a;
-  const N = D(c);
-  N.current = c;
-  const y = D(d);
-  y.current = d;
+  const y = B(c);
+  y.current = c;
+  const w = B(d);
+  w.current = d;
   function _(f) {
     const E = v.current;
     if (!E) return null;
     const S = E.getBoundingClientRect();
     if (S.width === 0) return null;
-    const V = Qe((f - S.left) / S.width, 0, 1), X = N.current + V * (y.current - N.current), H = Ra(X, N.current, m.current);
-    return Qe(H, N.current, y.current);
+    const O = et((f - S.left) / S.width, 0, 1), j = y.current + O * (w.current - y.current), D = Va(j, y.current, m.current);
+    return et(D, y.current, w.current);
   }
-  W(() => {
+  X(() => {
     const f = v.current;
     if (!f) return;
-    function E(H) {
-      h.current = !0, x.current();
+    function E(D) {
+      h.current = !0, N.current();
       try {
-        f.setPointerCapture(H.pointerId);
+        f.setPointerCapture(D.pointerId);
       } catch {
       }
-      const Z = _(H.clientX);
-      Z !== null && b.current(Z);
+      const G = _(D.clientX);
+      G !== null && b.current(G);
     }
-    function S(H) {
+    function S(D) {
       if (!h.current) return;
-      const Z = _(H.clientX);
-      Z !== null && b.current(Z);
+      const G = _(D.clientX);
+      G !== null && b.current(G);
     }
-    function V(H) {
+    function O(D) {
       if (h.current) {
         h.current = !1;
         try {
-          f.releasePointerCapture(H.pointerId);
+          f.releasePointerCapture(D.pointerId);
         } catch {
         }
         g.current();
       }
     }
-    function X(H) {
+    function j(D) {
       if (h.current) {
         h.current = !1;
         try {
-          f.releasePointerCapture(H.pointerId);
+          f.releasePointerCapture(D.pointerId);
         } catch {
         }
         g.current();
       }
     }
-    return f.addEventListener("pointerdown", E), f.addEventListener("pointermove", S), f.addEventListener("pointerup", V), f.addEventListener("pointercancel", X), () => {
-      f.removeEventListener("pointerdown", E), f.removeEventListener("pointermove", S), f.removeEventListener("pointerup", V), f.removeEventListener("pointercancel", X);
+    return f.addEventListener("pointerdown", E), f.addEventListener("pointermove", S), f.addEventListener("pointerup", O), f.addEventListener("pointercancel", j), () => {
+      f.removeEventListener("pointerdown", E), f.removeEventListener("pointermove", S), f.removeEventListener("pointerup", O), f.removeEventListener("pointercancel", j);
     };
   }, []);
-  const w = R(
+  const x = R(
     (f) => {
       const E = u * 10;
       let S = 0;
@@ -2109,7 +2160,7 @@ function kn({
         default:
           return;
       }
-      f.preventDefault(), o(Qe(t + S, c, d));
+      f.preventDefault(), o(et(t + S, c, d));
     },
     [t, c, d, u, o]
   );
@@ -2127,7 +2178,7 @@ function kn({
         "aria-valuemax": d,
         "aria-valuenow": t,
         "aria-valuetext": p(t),
-        onKeyDown: w,
+        onKeyDown: x,
         children: [
           /* @__PURE__ */ s(
             "div",
@@ -2149,8 +2200,8 @@ function kn({
     /* @__PURE__ */ s("span", { className: "tokenpanel-color-picker-slider-value", children: p(t) })
   ] });
 }
-const io = "tokenpanel.colorPicker.mode", Bt = [95, 78, 61, 44, 27, 10], Oa = [0, 60, 120, 180, 240, 300], Da = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330], Ba = 0.18, Va = 320, Ha = 400, Fa = 520, ja = 440;
-function Ka() {
+const so = "tokenpanel.colorPicker.mode", Vt = [95, 78, 61, 44, 27, 10], Ba = [0, 60, 120, 180, 240, 300], Ha = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330], Fa = 0.18, ja = 320, Ka = 400, Wa = 520, Xa = 440;
+function Ya() {
   return [
     {
       key: "l",
@@ -2166,7 +2217,7 @@ function Ka() {
       label: "C",
       ariaLabel: "Chroma",
       min: 0,
-      max: oo,
+      max: ao,
       step: 1e-3,
       format: (e) => e.toFixed(3)
     },
@@ -2190,7 +2241,7 @@ function Ka() {
     }
   ];
 }
-function Wa() {
+function qa() {
   return [
     {
       key: "h",
@@ -2232,35 +2283,35 @@ function Wa() {
 }
 function mn(e, t, n, o) {
   return {
-    l: Bt[e] ?? 50,
-    c: Ba,
+    l: Vt[e] ?? 50,
+    c: Fa,
     h: o[t] ?? 0,
     a: n
   };
 }
-function Xa(e) {
+function Ga(e) {
   if (typeof window > "u") return e;
   try {
-    const t = window.localStorage.getItem(io);
+    const t = window.localStorage.getItem(so);
     if (t === "oklch" || t === "hsl") return t;
   } catch {
   }
   return e;
 }
-function Ya(e) {
+function Ua(e) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(io, e);
+      window.localStorage.setItem(so, e);
     } catch {
     }
 }
-function qa(e, t) {
-  const [n, o] = j(e);
-  return W(() => {
+function Ja(e, t) {
+  const [n, o] = K(e);
+  return X(() => {
     t.current || o(e);
   }, [e, t]), [n, o];
 }
-function lo(e, t, n) {
+function co(e, t, n) {
   if (!e) return { position: "fixed" };
   const o = e.getBoundingClientRect(), r = 4, a = 8, i = window.innerWidth, l = window.innerHeight, c = l - o.bottom - r - a, d = o.top - r - a, u = c < n && d > c;
   let p = o.left;
@@ -2270,9 +2321,9 @@ function lo(e, t, n) {
   const h = { position: "fixed", left: p, top: m };
   return n > l - 2 * a && (h.top = a, h.maxHeight = l - 2 * a, h.overflowY = "auto"), h;
 }
-function so(e, t) {
-  const n = D(t);
-  n.current = t, W(() => {
+function uo(e, t) {
+  const n = B(t);
+  n.current = t, X(() => {
     function o(a) {
       e.current && !e.current.contains(a.target) && n.current();
     }
@@ -2284,7 +2335,7 @@ function so(e, t) {
     };
   }, []);
 }
-function co({
+function po({
   color: e,
   onChange: t,
   label: n,
@@ -2292,18 +2343,18 @@ function co({
   anchorRef: r,
   onClose: a
 }) {
-  const i = D(null), l = D(null), c = D(!1), [d, u] = qa(e, c), [p, m] = j(
+  const i = B(null), l = B(null), c = B(!1), [d, u] = Ja(e, c), [p, m] = K(
     null
-  ), h = D(null), v = D(!1), [C, b] = j(
-    () => Xa(o)
-  ), [x, g] = j("mini"), [N, y] = j(d);
-  W(() => {
-    (/^#[0-9a-fA-F]{6}$/.test(N) || /^#[0-9a-fA-F]{8}$/.test(N)) && y(d);
-  }, [d]), so(i, a);
-  const _ = J(() => Ia(d), [d]), w = J(() => Tr(d), [d]), f = R(
+  ), h = B(null), v = B(!1), [C, b] = K(
+    () => Ga(o)
+  ), [N, g] = K("mini"), [y, w] = K(d);
+  X(() => {
+    (/^#[0-9a-fA-F]{6}$/.test(y) || /^#[0-9a-fA-F]{8}$/.test(y)) && w(d);
+  }, [d]), uo(i, a);
+  const _ = Z(() => Oa(d), [d]), x = Z(() => Pr(d), [d]), f = R(
     ($) => {
       const I = $.toLowerCase();
-      u(I), y(I), t(I);
+      u(I), w(I), t(I);
     },
     [u, t]
   ), E = R(
@@ -2320,117 +2371,117 @@ function co({
   ), S = R(
     ($) => {
       const I = {
-        h: $.h ?? w.h,
-        s: $.s ?? w.s,
-        l: $.l ?? w.l,
-        a: $.a ?? w.a
+        h: $.h ?? x.h,
+        s: $.s ?? x.s,
+        l: $.l ?? x.l,
+        a: $.a ?? x.a
       };
-      f(Ar(I.h, I.s, I.l, I.a));
+      f(Ir(I.h, I.s, I.l, I.a));
     },
-    [w, f]
-  ), V = ($) => {
-    y($), (/^#[0-9a-fA-F]{6}$/.test($) || /^#[0-9a-fA-F]{8}$/.test($)) && f($);
-  }, X = x === "expanded" ? Da : Oa, H = R(
+    [x, f]
+  ), O = ($) => {
+    w($), (/^#[0-9a-fA-F]{6}$/.test($) || /^#[0-9a-fA-F]{8}$/.test($)) && f($);
+  }, j = N === "expanded" ? Ha : Ba, D = R(
     ($, I) => {
-      const re = mn($, I, _.a, X), Q = gn(re);
+      const re = mn($, I, _.a, j), Q = gn(re);
       f(hn(Q));
     },
-    [_.a, X, f]
-  ), Z = R(
+    [_.a, j, f]
+  ), G = R(
     ($, I, re) => {
-      let Q = I, O = re;
+      let Q = I, V = re;
       if ($.key === "ArrowRight")
-        O = Math.min(X.length - 1, re + 1);
-      else if ($.key === "ArrowLeft") O = Math.max(0, re - 1);
+        V = Math.min(j.length - 1, re + 1);
+      else if ($.key === "ArrowLeft") V = Math.max(0, re - 1);
       else if ($.key === "ArrowDown")
-        Q = Math.min(Bt.length - 1, I + 1);
+        Q = Math.min(Vt.length - 1, I + 1);
       else if ($.key === "ArrowUp") Q = Math.max(0, I - 1);
       else if ($.key === "Enter" || $.key === " ") {
-        $.preventDefault(), H(I, re);
+        $.preventDefault(), D(I, re);
         return;
       } else return;
       $.preventDefault(), i.current?.querySelector(
-        `[data-grid-row="${Q}"][data-grid-col="${O}"]`
+        `[data-grid-row="${Q}"][data-grid-col="${V}"]`
       )?.focus();
     },
-    [X, H]
+    [j, D]
   ), ie = ($) => {
-    Ya($), b($);
-  }, ke = J(() => Ka(), []), oe = J(() => Wa(), []), me = J(() => C === "oklch" ? {
+    Ua($), b($);
+  }, ke = Z(() => Ya(), []), oe = Z(() => qa(), []), me = Z(() => C === "oklch" ? {
     l: `linear-gradient(90deg in oklch, ${ne({ l: 0, c: _.c, h: _.h, a: 100 })}, ${ne({ l: 100, c: _.c, h: _.h, a: 100 })})`,
-    c: `linear-gradient(90deg in oklch, ${ne({ l: _.l, c: 0, h: _.h, a: 100 })}, ${ne({ l: _.l, c: oo, h: _.h, a: 100 })})`,
+    c: `linear-gradient(90deg in oklch, ${ne({ l: _.l, c: 0, h: _.h, a: 100 })}, ${ne({ l: _.l, c: ao, h: _.h, a: 100 })})`,
     h: `linear-gradient(90deg in oklch longer hue, ${ne({ l: _.l, c: _.c, h: 0, a: 100 })}, ${ne({ l: _.l, c: _.c, h: 360, a: 100 })})`,
     a: `linear-gradient(90deg in oklch, ${ne({ ..._, a: 0 })}, ${ne({ ..._, a: 100 })})`
   } : {
-    h: `linear-gradient(90deg in oklch longer hue, ${ne(Ee({ h: 0, s: w.s, l: w.l, a: 100 }))}, ${ne(Ee({ h: 360, s: w.s, l: w.l, a: 100 }))})`,
-    s: `linear-gradient(90deg in oklch, ${ne(Ee({ h: w.h, s: 0, l: w.l, a: 100 }))}, ${ne(Ee({ h: w.h, s: 100, l: w.l, a: 100 }))})`,
-    l: `linear-gradient(90deg in oklch, ${ne(Ee({ h: w.h, s: w.s, l: 0, a: 100 }))}, ${ne(Ee({ h: w.h, s: w.s, l: 100, a: 100 }))})`,
-    a: `linear-gradient(90deg in oklch, ${ne(Ee({ ...w, a: 0 }))}, ${ne(Ee({ ...w, a: 100 }))})`
-  }, [C, _, w]), [De, Ae] = j(() => ({
+    h: `linear-gradient(90deg in oklch longer hue, ${ne(Ee({ h: 0, s: x.s, l: x.l, a: 100 }))}, ${ne(Ee({ h: 360, s: x.s, l: x.l, a: 100 }))})`,
+    s: `linear-gradient(90deg in oklch, ${ne(Ee({ h: x.h, s: 0, l: x.l, a: 100 }))}, ${ne(Ee({ h: x.h, s: 100, l: x.l, a: 100 }))})`,
+    l: `linear-gradient(90deg in oklch, ${ne(Ee({ h: x.h, s: x.s, l: 0, a: 100 }))}, ${ne(Ee({ h: x.h, s: x.s, l: 100, a: 100 }))})`,
+    a: `linear-gradient(90deg in oklch, ${ne(Ee({ ...x, a: 0 }))}, ${ne(Ee({ ...x, a: 100 }))})`
+  }, [C, _, x]), [De, Ae] = K(() => ({
     position: "fixed",
     visibility: "hidden"
   }));
-  Po(() => {
+  zo(() => {
     const $ = r.current;
     if (!$) {
       Ae({ position: "fixed", visibility: "hidden" });
       return;
     }
     Ae(
-      lo(
+      co(
         $,
-        x === "mini" ? Va : Fa,
-        x === "mini" ? Ha : ja
+        N === "mini" ? ja : Wa,
+        N === "mini" ? Ka : Xa
       )
     );
-  }, [r, x]), W(() => {
+  }, [r, N]), X(() => {
     const $ = l.current;
     if (!$) return;
-    function I(O) {
-      O.preventDefault(), O.stopPropagation();
-      const G = i.current;
-      if (!G) return;
-      const ce = G.getBoundingClientRect();
+    function I(V) {
+      V.preventDefault(), V.stopPropagation();
+      const U = i.current;
+      if (!U) return;
+      const ce = U.getBoundingClientRect();
       h.current = {
-        pointerId: O.pointerId,
-        startX: O.clientX,
-        startY: O.clientY,
+        pointerId: V.pointerId,
+        startX: V.clientX,
+        startY: V.clientY,
         baseLeft: ce.left,
         baseTop: ce.top
       }, v.current = !0;
       try {
-        $.setPointerCapture(O.pointerId);
+        $.setPointerCapture(V.pointerId);
       } catch {
       }
     }
-    function re(O) {
-      if (!v.current || !h.current || O.pointerId !== h.current.pointerId) return;
-      const { startX: G, startY: ce, baseLeft: M, baseTop: F } = h.current, K = M + (O.clientX - G), U = F + (O.clientY - ce);
-      m({ left: K, top: U });
+    function re(V) {
+      if (!v.current || !h.current || V.pointerId !== h.current.pointerId) return;
+      const { startX: U, startY: ce, baseLeft: T, baseTop: F } = h.current, W = T + (V.clientX - U), J = F + (V.clientY - ce);
+      m({ left: W, top: J });
     }
-    function Q(O) {
-      if (!v.current || !h.current || O.pointerId !== h.current.pointerId) return;
+    function Q(V) {
+      if (!v.current || !h.current || V.pointerId !== h.current.pointerId) return;
       v.current = !1, h.current = null;
       try {
-        $.releasePointerCapture(O.pointerId);
+        $.releasePointerCapture(V.pointerId);
       } catch {
       }
-      const G = i.current;
-      if (!G) return;
-      const ce = G.getBoundingClientRect(), M = 8, F = window.innerWidth, K = window.innerHeight, U = Math.max(
-        M,
-        Math.min(F - M - ce.width, ce.left)
+      const U = i.current;
+      if (!U) return;
+      const ce = U.getBoundingClientRect(), T = 8, F = window.innerWidth, W = window.innerHeight, J = Math.max(
+        T,
+        Math.min(F - T - ce.width, ce.left)
       ), z = Math.max(
-        M,
-        Math.min(K - M - ce.height, ce.top)
+        T,
+        Math.min(W - T - ce.height, ce.top)
       );
-      m({ left: U, top: z });
+      m({ left: J, top: z });
     }
     return $.addEventListener("pointerdown", I), $.addEventListener("pointermove", re), $.addEventListener("pointerup", Q), $.addEventListener("pointercancel", Q), () => {
       $.removeEventListener("pointerdown", I), $.removeEventListener("pointermove", re), $.removeEventListener("pointerup", Q), $.removeEventListener("pointercancel", Q);
     };
   }, []);
-  const A = /^#[0-9a-fA-F]{8}$/.test(d), B = R(() => {
+  const A = /^#[0-9a-fA-F]{8}$/.test(d), H = R(() => {
     c.current = !0;
   }, []), ee = R(() => {
     c.current = !1;
@@ -2440,7 +2491,7 @@ function co({
     {
       ref: i,
       className: "tokenpanel-color-picker",
-      "data-mode-shell": x,
+      "data-mode-shell": N,
       style: be,
       role: "dialog",
       "aria-label": n ? `${n} color picker` : "Color picker",
@@ -2501,13 +2552,13 @@ function co({
               role: "button",
               tabIndex: 0,
               className: "tokenpanel-color-picker-expand-btn",
-              "aria-label": x === "mini" ? "Expand picker" : "Collapse picker",
-              "aria-expanded": x === "expanded",
-              onClick: () => g(x === "mini" ? "expanded" : "mini"),
+              "aria-label": N === "mini" ? "Expand picker" : "Collapse picker",
+              "aria-expanded": N === "expanded",
+              onClick: () => g(N === "mini" ? "expanded" : "mini"),
               onKeyDown: ($) => {
-                ($.key === "Enter" || $.key === " ") && ($.preventDefault(), g(x === "mini" ? "expanded" : "mini"));
+                ($.key === "Enter" || $.key === " ") && ($.preventDefault(), g(N === "mini" ? "expanded" : "mini"));
               },
-              children: x === "mini" ? "⤢" : "⤡"
+              children: N === "mini" ? "⤢" : "⤡"
             }
           )
         ] }),
@@ -2527,8 +2578,8 @@ function co({
             {
               type: "text",
               className: "tokenpanel-color-picker-hex-input",
-              value: N,
-              onChange: ($) => V($.target.value),
+              value: y,
+              onChange: ($) => O($.target.value),
               spellcheck: !1,
               "aria-label": "Hex color value"
             }
@@ -2540,22 +2591,22 @@ function co({
             className: "tokenpanel-color-picker-grid",
             role: "grid",
             "aria-label": "Color presets",
-            children: Bt.map(($, I) => /* @__PURE__ */ s("div", { role: "row", children: X.map((re, Q) => {
-              const O = mn(I, Q, _.a, X), G = za(O), ce = ne(gn(O)), M = Math.abs(_.h - O.h) % 360, F = Math.min(M, 360 - M), K = Math.abs(_.l - O.l) < 2 && F < 5 && Math.abs(_.c - O.c) < 0.05;
+            children: Vt.map(($, I) => /* @__PURE__ */ s("div", { role: "row", children: j.map((re, Q) => {
+              const V = mn(I, Q, _.a, j), U = Da(V), ce = ne(gn(V)), T = Math.abs(_.h - V.h) % 360, F = Math.min(T, 360 - T), W = Math.abs(_.l - V.l) < 2 && F < 5 && Math.abs(_.c - V.c) < 0.05;
               return /* @__PURE__ */ s(
                 "div",
                 {
                   role: "gridcell",
                   "data-grid-row": I,
                   "data-grid-col": Q,
-                  "data-oog": G ? "false" : "true",
-                  "aria-selected": K,
-                  "aria-label": `Preset L ${O.l}% H ${O.h}°`,
+                  "data-oog": U ? "false" : "true",
+                  "aria-selected": W,
+                  "aria-label": `Preset L ${V.l}% H ${V.h}°`,
                   className: "tokenpanel-color-picker-grid-cell",
                   style: { background: ce },
                   tabIndex: I === 0 && Q === 0 ? 0 : -1,
-                  onClick: () => H(I, Q),
-                  onKeyDown: (U) => Z(U, I, Q)
+                  onClick: () => D(I, Q),
+                  onKeyDown: (J) => G(J, I, Q)
                 },
                 `${I}-${Q}`
               );
@@ -2569,7 +2620,7 @@ function co({
             value: _[$.key] ?? 0,
             gradient: me[$.key] ?? "",
             onChange: (I) => E({ [$.key]: I }),
-            onDragStart: B,
+            onDragStart: H,
             onDragEnd: ee
           },
           $.key
@@ -2577,15 +2628,15 @@ function co({
           kn,
           {
             config: $,
-            value: w[$.key] ?? 0,
+            value: x[$.key] ?? 0,
             gradient: me[$.key] ?? "",
             onChange: (I) => S({ [$.key]: I }),
-            onDragStart: B,
+            onDragStart: H,
             onDragEnd: ee
           },
           $.key
         )) }),
-        x === "expanded" && /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-readout", "aria-live": "polite", children: [
+        N === "expanded" && /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-readout", "aria-live": "polite", children: [
           "L ",
           Math.round(_.l),
           "% · C ",
@@ -2603,7 +2654,7 @@ const Zt = jt(null);
 function se({ cssVar: e }) {
   const t = Xt(Zt);
   if (t === null) return null;
-  const { state: n, toggle: o, matchCounts: r } = t, a = n.active[e], i = a !== void 0, l = i ? n.slots[a]?.color : void 0, c = r?.[e], d = Y(() => {
+  const { state: n, toggle: o, matchCounts: r } = t, a = n.active[e], i = a !== void 0, l = i ? n.slots[a]?.color : void 0, c = r?.[e], d = q(() => {
     o(e);
   }, [o, e]), u = i ? `Stop highlighting ${e}` + (c !== void 0 ? ` (${c} elements)` : "") : `Highlight elements using ${e}`;
   return /* @__PURE__ */ s(
@@ -2648,16 +2699,16 @@ function se({ cssVar: e }) {
     }
   );
 }
-function Ga({
+function Za({
   anchorRef: e,
   onClose: t
 }) {
-  const n = Io(Zt), [o, r] = j(null), a = D(Array.from({ length: 10 }, () => null)), i = D(null), l = D(null);
-  if (so(i, t), !n) return null;
+  const n = Ro(Zt), [o, r] = K(null), a = B(Array.from({ length: 10 }, () => null)), i = B(null), l = B(null);
+  if (uo(i, t), !n) return null;
   const { state: c, setSlot: d, setOutlineWidth: u, reset: p, disableAll: m } = n, h = {};
   for (const [C, b] of Object.entries(c.active))
     b in h || (h[b] = C);
-  const v = lo(e.current ?? null, 370, 520);
+  const v = co(e.current ?? null, 370, 520);
   return o !== null && (l.current = a.current[o] ?? null), /* @__PURE__ */ k(
     "div",
     {
@@ -2692,7 +2743,7 @@ function Ga({
           ] })
         ] }),
         /* @__PURE__ */ s("div", { className: "tokenpanel-highlight-settings-list", children: c.slots.map((C, b) => {
-          const x = h[b], g = x !== void 0, N = `${c.outlineWidth}px solid ${C.color}`;
+          const N = h[b], g = N !== void 0, y = `${c.outlineWidth}px solid ${C.color}`;
           return /* @__PURE__ */ k(
             "div",
             {
@@ -2702,17 +2753,17 @@ function Ga({
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    ref: (y) => {
-                      a.current[b] = y;
+                    ref: (w) => {
+                      a.current[b] = w;
                     },
                     className: "tokenpanel-highlight-settings-ring",
-                    style: { border: N },
+                    style: { border: y },
                     role: "button",
                     tabIndex: 0,
                     "aria-label": `Edit color for slot ${b + 1}`,
                     onClick: () => r(o === b ? null : b),
-                    onKeyDown: (y) => {
-                      (y.key === "Enter" || y.key === " ") && (y.preventDefault(), r(o === b ? null : b));
+                    onKeyDown: (w) => {
+                      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), r(o === b ? null : b));
                     }
                   }
                 ),
@@ -2720,7 +2771,7 @@ function Ga({
                   "div",
                   {
                     className: g ? "tokenpanel-highlight-settings-name is-active" : "tokenpanel-highlight-settings-name",
-                    children: g ? x : "available"
+                    children: g ? N : "available"
                   }
                 )
               ]
@@ -2747,7 +2798,7 @@ function Ga({
           )
         ] }),
         o !== null && /* @__PURE__ */ s(
-          co,
+          po,
           {
             color: c.slots[o]?.color ?? "#ffffff",
             onChange: (C) => {
@@ -2762,7 +2813,7 @@ function Ga({
     }
   );
 }
-const uo = [
+const fo = [
   { color: "#ff2d2d" },
   // red
   { color: "#ff2dcf" },
@@ -2783,28 +2834,28 @@ const uo = [
   // yellow
   { color: "#2d6eff" }
   // blue
-], po = 2;
-function fo() {
-  return `${q().storagePrefix}-highlight-slots`;
+], ho = 2;
+function go() {
+  return `${Y().storagePrefix}-highlight-slots`;
 }
-function ho() {
-  return `${q().storagePrefix}-highlight-active`;
+function ko() {
+  return `${Y().storagePrefix}-highlight-active`;
 }
-function go() {
-  return `${q().storagePrefix}-highlight-outline-width`;
+function mo() {
+  return `${Y().storagePrefix}-highlight-outline-width`;
 }
-function Ua(e) {
+function Qa(e) {
   const t = new Set(Object.values(e));
   for (let n = 0; n < 10; n++)
     if (!t.has(n)) return n;
   return -1;
 }
-function Ja(e, t) {
+function ei(e, t) {
   if (t in e.active) {
     const { [t]: o, ...r } = e.active;
     return { ...e, active: r };
   }
-  const n = Ua(e.active);
+  const n = Qa(e.active);
   return n === -1 ? (console.warn(
     "[zudo-design-token-panel] highlight: all 10 slots are in use; cannot highlight",
     t
@@ -2813,29 +2864,29 @@ function Ja(e, t) {
     active: { ...e.active, [t]: n }
   };
 }
-function Za(e) {
+function ti(e) {
   return {
     ...e,
-    slots: uo.map((t) => ({ ...t })),
-    outlineWidth: po
+    slots: fo.map((t) => ({ ...t })),
+    outlineWidth: ho
   };
 }
-function Qa(e) {
+function ni(e) {
   return { ...e, active: {} };
 }
-function ei(e, t, n) {
+function oi(e, t, n) {
   if (t < 0 || t >= e.slots.length) return e;
   const o = e.slots.map((r, a) => a === t ? { ...r, ...n } : r);
   return { ...e, slots: o };
 }
-function ti(e, t) {
+function ri(e, t) {
   const n = Math.max(1, t);
   return { ...e, outlineWidth: n };
 }
-function ni() {
-  let e = uo.map((o) => ({ ...o })), t = po, n = {};
+function ai() {
+  let e = fo.map((o) => ({ ...o })), t = ho, n = {};
   try {
-    const o = localStorage.getItem(fo());
+    const o = localStorage.getItem(go());
     if (o !== null) {
       const r = JSON.parse(o);
       Array.isArray(r) && r.length === 10 && (e = r.map((a) => ({ color: a.color })));
@@ -2843,7 +2894,7 @@ function ni() {
   } catch {
   }
   try {
-    const o = localStorage.getItem(go());
+    const o = localStorage.getItem(mo());
     if (o !== null) {
       const r = JSON.parse(o);
       typeof r == "number" && r >= 1 && (t = r);
@@ -2851,7 +2902,7 @@ function ni() {
   } catch {
   }
   try {
-    const o = sessionStorage.getItem(ho());
+    const o = sessionStorage.getItem(ko());
     if (o !== null) {
       const r = JSON.parse(o);
       r !== null && typeof r == "object" && !Array.isArray(r) && (n = r);
@@ -2862,15 +2913,15 @@ function ni() {
 }
 function He(e) {
   try {
-    localStorage.setItem(fo(), JSON.stringify(e.slots));
+    localStorage.setItem(go(), JSON.stringify(e.slots));
   } catch {
   }
   try {
-    localStorage.setItem(go(), JSON.stringify(e.outlineWidth));
+    localStorage.setItem(mo(), JSON.stringify(e.outlineWidth));
   } catch {
   }
   try {
-    sessionStorage.setItem(ho(), JSON.stringify(e.active));
+    sessionStorage.setItem(ko(), JSON.stringify(e.active));
   } catch {
   }
 }
@@ -3078,16 +3129,16 @@ const bn = {
     longhands: ["mask-image"],
     compounds: ["mask-image"]
   }
-}, et = [null, "::before", "::after"], ko = "tokenpanel-highlight-mount", mo = "tokenpanel-elpath-mount", Qt = `.tokenpanel-shell, [data-design-token-panel-modal], #${ko}, #${mo}`, oi = /^(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, ri = /^(rgb|rgba|hsl|hsla|color|oklch|hwb|lab|lch)\(/i, ai = /^#/, ii = /^-?\d+(\.\d+)?(px|rem|em|vh|vw|vmin|vmax|pt|pc|in|cm|mm|ex|ch|fr)%?$/, li = /^-?\d+(\.\d+)?$/, si = /^(cubic-bezier|steps|linear)\(/i, ci = /^-?(?:\d+\.?\d*|\.\d+)(ms|s)$/i, di = /^".*"$/, ui = /^url\(/i;
-function pi(e, t) {
+}, tt = [null, "::before", "::after"], bo = "tokenpanel-highlight-mount", vo = "tokenpanel-elpath-mount", Qt = `.tokenpanel-shell, [data-design-token-panel-modal], #${bo}, #${vo}`, ii = /^(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, li = /^(rgb|rgba|hsl|hsla|color|oklch|hwb|lab|lch)\(/i, si = /^#/, ci = /^-?\d+(\.\d+)?(px|rem|em|vh|vw|vmin|vmax|pt|pc|in|cm|mm|ex|ch|fr)%?$/, di = /^-?\d+(\.\d+)?$/, ui = /^(cubic-bezier|steps|linear)\(/i, pi = /^-?(?:\d+\.?\d*|\.\d+)(ms|s)$/i, fi = /^".*"$/, hi = /^url\(/i;
+function gi(e, t) {
   const n = getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-  return n ? ri.test(n) || ai.test(n) || oi.test(n) ? "color" : ii.test(n) ? "length" : li.test(n) ? "number" : si.test(n) ? "easing" : ci.test(n) ? "time" : di.test(n) ? "content" : (ui.test(n) && t.push(
+  return n ? li.test(n) || si.test(n) || ii.test(n) ? "color" : ci.test(n) ? "length" : di.test(n) ? "number" : ui.test(n) ? "easing" : pi.test(n) ? "time" : fi.test(n) ? "content" : (hi.test(n) && t.push(
     `type auto-detection inconclusive for ${e}: resolved value starts with url(); defaulting to text — supply kind:'cursor' or kind:'mask-image' explicitly if this is a cursor or mask-image token`
   ), "text") : (t.push(
     `type auto-detection inconclusive for ${e}; defaulting to color — supply kind explicitly if this is incorrect`
   ), "color");
 }
-function Vt(e, t, n) {
+function Bt(e, t, n) {
   for (const o of e)
     if (o instanceof CSSStyleRule) {
       const r = o.style;
@@ -3096,14 +3147,14 @@ function Vt(e, t, n) {
           n.add(o.selectorText);
           break;
         }
-      o.cssRules?.length && Vt(
+      o.cssRules?.length && Bt(
         o.cssRules,
         t,
         n
       );
-    } else "cssRules" in o && o.cssRules && Vt(o.cssRules, t, n);
+    } else "cssRules" in o && o.cssRules && Bt(o.cssRules, t, n);
 }
-function fi(e, t) {
+function ki(e, t) {
   const n = /* @__PURE__ */ new Set();
   for (const o of document.styleSheets) {
     let r;
@@ -3114,11 +3165,11 @@ function fi(e, t) {
       t.push(`Cross-origin stylesheet skipped: ${a}`);
       continue;
     }
-    Vt(r, e, n);
+    Bt(r, e, n);
   }
   return n;
 }
-function hi(e) {
+function mi(e) {
   const t = /* @__PURE__ */ new Set(), n = document.querySelectorAll("[style]");
   for (const o of n)
     o.style.getPropertyValue(e) !== "" && t.add(o);
@@ -3175,7 +3226,7 @@ function vn(e, t, n) {
     r[a] = o.getPropertyValue(a);
   return r;
 }
-function gi(e, t) {
+function bi(e, t) {
   if (!e || !t) return null;
   for (const n in e)
     if (e[n] !== t[n]) return n;
@@ -3184,7 +3235,7 @@ function gi(e, t) {
 function wn(e, t) {
   let n = e.trim();
   n.startsWith("var(") && (n = n.replace(/^var\(\s*/, "").replace(/\s*\)$/, "").trim());
-  const o = [], r = t?.mode ?? "equality", a = t?.kind ?? pi(n, o), i = bn[a] ?? bn.color, l = fi(n, o), c = hi(n), d = [document.body, ...document.body.querySelectorAll("*")], u = /* @__PURE__ */ new Set();
+  const o = [], r = t?.mode ?? "equality", a = t?.kind ?? gi(n, o), i = bn[a] ?? bn.color, l = ki(n, o), c = mi(n), d = [document.body, ...document.body.querySelectorAll("*")], u = /* @__PURE__ */ new Set();
   if (r === "equality") {
     const { sentinelA: m, longhands: h, compounds: v } = i, C = i.needleA ?? m, b = It(
       n,
@@ -3194,36 +3245,36 @@ function wn(e, t) {
       o
     );
     document.documentElement.offsetHeight;
-    for (const x of d)
-      for (const g of et) {
-        let N;
+    for (const N of d)
+      for (const g of tt) {
+        let y;
         try {
-          N = getComputedStyle(x, g);
+          y = getComputedStyle(N, g);
         } catch {
           continue;
         }
-        let y = !1;
+        let w = !1;
         for (const _ of h)
-          if (N.getPropertyValue(_) === m) {
-            y = !0;
+          if (y.getPropertyValue(_) === m) {
+            w = !0;
             break;
           }
-        if (!y)
+        if (!w)
           for (const _ of v) {
-            const w = N.getPropertyValue(_);
-            if (w && w.includes(C)) {
-              y = !0;
+            const x = y.getPropertyValue(_);
+            if (x && x.includes(C)) {
+              w = !0;
               break;
             }
           }
-        if (y) {
-          u.add(x);
+        if (w) {
+          u.add(N);
           break;
         }
       }
     zt(n, b);
   } else {
-    const { sentinelA: m, sentinelB: h, longhands: v, compounds: C } = i, b = [...v, ...C], x = It(
+    const { sentinelA: m, sentinelB: h, longhands: v, compounds: C } = i, b = [...v, ...C], N = It(
       n,
       m,
       l,
@@ -3232,10 +3283,10 @@ function wn(e, t) {
     );
     document.documentElement.offsetHeight;
     const g = /* @__PURE__ */ new Map();
-    for (const y of d)
-      g.set(y, et.map((_) => vn(y, _, b)));
-    zt(n, x);
-    const N = It(
+    for (const w of d)
+      g.set(w, tt.map((_) => vn(w, _, b)));
+    zt(n, N);
+    const y = It(
       n,
       h,
       l,
@@ -3243,17 +3294,17 @@ function wn(e, t) {
       o
     );
     document.documentElement.offsetHeight;
-    for (const y of d) {
-      const _ = g.get(y);
-      for (let w = 0; w < et.length; w++) {
-        const f = vn(y, et[w], b);
-        if (gi(_[w], f) !== null) {
-          u.add(y);
+    for (const w of d) {
+      const _ = g.get(w);
+      for (let x = 0; x < tt.length; x++) {
+        const f = vn(w, tt[x], b);
+        if (bi(_[x], f) !== null) {
+          u.add(w);
           break;
         }
       }
     }
-    zt(n, N);
+    zt(n, y);
   }
   const p = [];
   for (const m of u) {
@@ -3265,7 +3316,7 @@ function wn(e, t) {
   }
   return { elements: p, warnings: o };
 }
-const Le = 200, ki = 49;
+const Le = 200, vi = 49;
 function xn(e, t) {
   return {
     position: "fixed",
@@ -3279,15 +3330,15 @@ function xn(e, t) {
     // box-shadow inset draws the same ring without relying on outline.
     boxShadow: `inset 0 0 0 ${t.outlineWidth}px ${t.color}`,
     pointerEvents: "none",
-    zIndex: String(ki),
+    zIndex: String(vi),
     boxSizing: "border-box"
   };
 }
-function mi(e, t) {
+function wi(e, t) {
   for (const n of Object.keys(t))
     e.style[n] = t[n];
 }
-function bi({ items: e }) {
+function xi({ items: e }) {
   const t = e.length > Le ? e.slice(0, Le) : e, n = de(!1);
   e.length > Le && !n.current && (n.current = !0, console.warn(
     `HighlightOverlay: received ${e.length} items (max ${Le}). Only the first ${Le} overlays will be rendered.`
@@ -3301,7 +3352,7 @@ function bi({ items: e }) {
         const l = o.current[i];
         if (!l) continue;
         const c = t[i].element.getBoundingClientRect();
-        mi(l, xn(c, t[i].slot));
+        wi(l, xn(c, t[i].slot));
       }
       r = requestAnimationFrame(a);
     }
@@ -3324,8 +3375,8 @@ function bi({ items: e }) {
     );
   }) });
 }
-function bo(e) {
-  const t = de(null), [, n] = _e(0);
+function wo(e) {
+  const t = de(null), [, n] = $e(0);
   return ue(() => {
     function o() {
       if (typeof document > "u") return null;
@@ -3343,7 +3394,7 @@ function bo(e) {
     };
   }, [e]), t.current;
 }
-function vi(e) {
+function yi(e) {
   if (e)
     switch (e.kind) {
       case "color":
@@ -3374,70 +3425,70 @@ function vi(e) {
         return "mask-image";
     }
 }
-function wi() {
+function Ni() {
   const e = /* @__PURE__ */ new Map();
-  for (const t of q().tabs)
+  for (const t of Y().tabs)
     for (const n of t.tiers)
       for (const o of n.items)
         e.set(o.cssVar, o.type);
   return e;
 }
-const xi = /* @__PURE__ */ new Set(["text", "cursor", "content", "mask-image"]);
-function yi(e) {
-  return e ? !xi.has(e.kind) : !0;
+const _i = /* @__PURE__ */ new Set(["text", "cursor", "content", "mask-image"]);
+function $i(e) {
+  return e ? !_i.has(e.kind) : !0;
 }
-function Ni({ items: e }) {
-  const t = bo(ko);
-  return t ? Wt(/* @__PURE__ */ s(bi, { items: e }), t) : null;
+function Ci({ items: e }) {
+  const t = wo(bo);
+  return t ? Wt(/* @__PURE__ */ s(xi, { items: e }), t) : null;
 }
-function _i({ children: e }) {
-  const [t, n] = _e(ni), [o, r] = _e(0), [a, i] = _e(0), l = de(/* @__PURE__ */ new Map()), c = Y((b) => {
-    n((x) => {
-      const g = Ja(x, b);
+function Ei({ children: e }) {
+  const [t, n] = $e(ai), [o, r] = $e(0), [a, i] = $e(0), l = de(/* @__PURE__ */ new Map()), c = q((b) => {
+    n((N) => {
+      const g = ei(N, b);
       return He(g), g;
     });
-  }, []), d = Y((b, x) => {
+  }, []), d = q((b, N) => {
     n((g) => {
-      const N = ei(g, b, x);
-      return He(N), N;
+      const y = oi(g, b, N);
+      return He(y), y;
     });
-  }, []), u = Y((b) => {
-    n((x) => {
-      const g = ti(x, b);
+  }, []), u = q((b) => {
+    n((N) => {
+      const g = ri(N, b);
       return He(g), g;
     });
-  }, []), p = Y(() => {
+  }, []), p = q(() => {
     n((b) => {
-      const x = Za(b);
-      return He(x), x;
+      const N = ti(b);
+      return He(N), N;
     });
-  }, []), m = Y(() => {
+  }, []), m = q(() => {
     n((b) => {
-      const x = Qa(b);
-      return He(x), x;
+      const N = ni(b);
+      return He(N), N;
     });
   }, []);
   ue(() => {
     let b = null;
-    function x() {
-      b && b.disconnect(), b = new MutationObserver((N) => {
-        for (const y of N) {
-          for (const _ of y.addedNodes)
+    function N() {
+      b && b.disconnect(), b = new MutationObserver((y) => {
+        for (const w of y) {
+          for (const _ of w.addedNodes)
             if (yn(_)) {
-              r((w) => w + 1);
+              r((x) => x + 1);
               return;
             }
-          for (const _ of y.removedNodes)
+          for (const _ of w.removedNodes)
             if (yn(_)) {
-              r((w) => w + 1);
+              r((x) => x + 1);
               return;
             }
         }
       }), b.observe(document.head, { childList: !0 });
     }
-    x();
+    N();
     function g() {
-      x(), r((N) => N + 1);
+      N(), r((y) => y + 1);
     }
     return typeof window < "u" && window.addEventListener("astro:after-swap", g), () => {
       b?.disconnect(), typeof window < "u" && window.removeEventListener("astro:after-swap", g);
@@ -3445,53 +3496,53 @@ function _i({ children: e }) {
   }, []), ue(() => {
     if (typeof window > "u") return;
     const b = new MutationObserver(() => {
-      i((x) => x + 1), l.current.clear();
+      i((N) => N + 1), l.current.clear();
     });
     return b.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme", "class"]
     }), () => b.disconnect();
   }, []);
-  const { items: h, matchCounts: v } = lt(() => {
-    const b = wi();
-    function x(y) {
-      const _ = `${y}|${o}|${a}`, w = l.current.get(_);
-      if (w) return w;
-      const f = b.get(y), E = vi(f), S = E ? { kind: E } : {}, V = wn(y, S);
-      let X, H;
-      if (yi(f)) {
-        const ie = wn(y, { ...S, mode: "differential" }), ke = new Set(V.elements);
+  const { items: h, matchCounts: v } = st(() => {
+    const b = Ni();
+    function N(w) {
+      const _ = `${w}|${o}|${a}`, x = l.current.get(_);
+      if (x) return x;
+      const f = b.get(w), E = yi(f), S = E ? { kind: E } : {}, O = wn(w, S);
+      let j, D;
+      if ($i(f)) {
+        const ie = wn(w, { ...S, mode: "differential" }), ke = new Set(O.elements);
         for (const me of ie.elements) ke.add(me);
-        X = Array.from(ke);
-        const oe = new Set(V.warnings);
+        j = Array.from(ke);
+        const oe = new Set(O.warnings);
         for (const me of ie.warnings) oe.add(me);
-        H = Array.from(oe);
+        D = Array.from(oe);
       } else
-        X = V.elements, H = V.warnings;
-      const Z = { elements: X, warnings: H };
-      return l.current.set(_, Z), Z;
+        j = O.elements, D = O.warnings;
+      const G = { elements: j, warnings: D };
+      return l.current.set(_, G), G;
     }
-    const g = [], N = {};
-    for (const [y, _] of Object.entries(t.active)) {
-      const w = x(y);
-      if (w.warnings.length > 0)
-        for (const S of w.warnings)
+    const g = [], y = {};
+    for (const [w, _] of Object.entries(t.active)) {
+      const x = N(w);
+      if (x.warnings.length > 0)
+        for (const S of x.warnings)
           console.warn("[zudo-design-token-panel] highlight:", S);
-      const f = w.elements;
-      N[y] = f.length;
+      const f = x.elements;
+      y[w] = f.length;
       const E = t.slots[_];
       if (E)
         for (const S of f)
           g.push({ element: S, slot: { color: E.color, outlineWidth: t.outlineWidth } });
     }
-    return { items: g, matchCounts: N };
-  }, [t.active, t.slots, t.outlineWidth, o, a]), C = lt(
+    return { items: g, matchCounts: y };
+  }, [t.active, t.slots, t.outlineWidth, o, a]), C = st(
     () => ({ state: t, toggle: c, setSlot: d, setOutlineWidth: u, reset: p, disableAll: m, matchCounts: v }),
     [t, c, d, u, p, m, v]
   );
   return /* @__PURE__ */ k(ae, { children: [
     /* @__PURE__ */ s(Zt.Provider, { value: C, children: e }),
-    /* @__PURE__ */ s(Ni, { items: h })
+    /* @__PURE__ */ s(Ci, { items: h })
   ] });
 }
 function yn(e) {
@@ -3499,24 +3550,24 @@ function yn(e) {
   const t = e;
   return t.tagName === "STYLE" || t.tagName === "LINK" && t.getAttribute("rel") === "stylesheet";
 }
-const vo = jt(null);
-function wo() {
-  return `${q().storagePrefix}-elpath-enabled`;
+const xo = jt(null);
+function yo() {
+  return `${Y().storagePrefix}-elpath-enabled`;
 }
-function $i() {
+function Si() {
   try {
-    return localStorage.getItem(wo()) === "1";
+    return localStorage.getItem(yo()) === "1";
   } catch {
     return !1;
   }
 }
 function Nn(e) {
   try {
-    localStorage.setItem(wo(), e ? "1" : "0");
+    localStorage.setItem(yo(), e ? "1" : "0");
   } catch {
   }
 }
-const _n = 60, $n = 8, Ci = [
+const _n = 60, $n = 8, Ti = [
   "id",
   "data-testid",
   "data-test",
@@ -3528,7 +3579,7 @@ const _n = 60, $n = 8, Ci = [
   "alt",
   "placeholder",
   "title"
-], Ei = 5, Si = {
+], Mi = 5, Ai = {
   nav: "navigation",
   main: "main",
   header: "banner",
@@ -3562,11 +3613,11 @@ function Ht(e) {
   }
   return t;
 }
-function xo(e) {
+function No(e) {
   const t = (e.getAttribute("class") ?? "").trim();
   return t ? t.split(/\s+/).filter((n) => n.length > 0).filter((n) => !/__|^sc-|^css-[a-z0-9]{4,}/i.test(n)).filter((n) => !(/[a-z][0-9]|[0-9][a-z]/i.test(n) && n.length >= 6)) : [];
 }
-function tt(e, t) {
+function nt(e, t) {
   const n = t.ownerDocument;
   if (!n) return !1;
   try {
@@ -3576,21 +3627,21 @@ function tt(e, t) {
     return !1;
   }
 }
-function Mi(e) {
+function Li(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 Ti(e) {
-  return e.localName + Mi(e);
+function Pi(e) {
+  return e.localName + Li(e);
 }
-function Ai(e) {
+function Ii(e) {
   if (e.tagName === "HTML") return "html";
   const t = e.getAttribute("id");
   if (t) {
     const r = `#${Ht(t)}`;
-    if (tt(r, e)) return r;
+    if (nt(r, e)) return r;
   }
   const n = [];
   let o = e;
@@ -3598,31 +3649,31 @@ function Ai(e) {
     const r = o.getAttribute("id");
     if (r) {
       const i = `#${Ht(r)}`;
-      if (tt(i, o)) {
+      if (nt(i, o)) {
         n.unshift(i);
         const l = n.join(" > ");
-        if (tt(l, e)) return l;
+        if (nt(l, e)) return l;
         o = o.parentElement;
         continue;
       }
     }
-    n.unshift(Ti(o));
+    n.unshift(Pi(o));
     const a = n.join(" > ");
-    if (tt(a, e)) return a;
+    if (nt(a, e)) return a;
     o = o.parentElement;
   }
   return n.join(" > ");
 }
-function Li(e) {
+function zi(e) {
   const t = [];
   let n = e;
   for (; n && n.nodeType === 1 && n.tagName !== "HTML"; ) {
-    const o = n.localName, r = xo(n)[0];
+    const o = n.localName, r = No(n)[0];
     t.unshift(r ? `${o}.${r}` : o), n = n.parentElement;
   }
   return t.length > $n ? "… > " + t.slice(-$n).join(" > ") : t.join(" > ");
 }
-function Pi(e) {
+function Ri(e) {
   const t = e.getAttribute("role");
   if (t && t.trim()) return t.trim();
   const n = e.tagName.toLowerCase();
@@ -3632,16 +3683,16 @@ function Pi(e) {
     const o = (e.getAttribute("type") ?? "text").toLowerCase();
     return o === "checkbox" ? "checkbox" : o === "radio" ? "radio" : o === "button" || o === "submit" || o === "reset" ? "button" : o === "range" ? "slider" : o === "hidden" ? null : "textbox";
   }
-  return Si[n] ?? null;
+  return Ai[n] ?? null;
 }
-function Ii(e) {
+function Oi(e) {
   const t = (e.textContent ?? "").replace(/\s+/g, " ").trim();
   return t ? t.length <= _n ? t : t.slice(0, _n - 1).trimEnd() + "…" : null;
 }
-function zi(e) {
+function Di(e) {
   const t = [];
-  for (const n of Ci) {
-    if (t.length >= Ei) break;
+  for (const n of Ti) {
+    if (t.length >= Mi) break;
     const o = e.getAttribute(n);
     if (o === null) continue;
     const r = o.replace(/\s+/g, " ").trim();
@@ -3652,13 +3703,13 @@ function zi(e) {
   return t;
 }
 function Ft(e) {
-  const t = e.localName, n = e.getAttribute("id"), o = xo(e).slice(0, 2);
+  const t = e.localName, n = e.getAttribute("id"), o = No(e).slice(0, 2);
   let r = t;
   n && (r += `#${Ht(n)}`);
   for (const a of o) r += `.${a}`;
   return r;
 }
-function Ri(e) {
+function Vi(e) {
   let t = { width: 0, height: 0 };
   if (typeof e.getBoundingClientRect == "function") {
     const n = e.getBoundingClientRect();
@@ -3666,23 +3717,23 @@ function Ri(e) {
   }
   return {
     summary: Ft(e),
-    selector: Ai(e),
-    breadcrumb: Li(e),
-    role: Pi(e),
-    text: Ii(e),
-    attrs: zi(e),
+    selector: Ii(e),
+    breadcrumb: zi(e),
+    role: Ri(e),
+    text: Oi(e),
+    attrs: Di(e),
     size: t
   };
 }
-function Oi(e) {
+function Bi(e) {
   const t = [];
   return t.push(`element:  ${e.summary}`), t.push(`selector: ${e.selector}`), t.push(`path:     ${e.breadcrumb}`), e.role && t.push(`role:     ${e.role}`), e.text && t.push(`text:     "${e.text}"`), e.attrs.length > 0 && t.push(`attrs:    ${e.attrs.join(", ")}`), t.push(`size:     ${e.size.width} × ${e.size.height}`), t.join(`
 `);
 }
-function Di(e) {
-  return Oi(Ri(e));
+function Hi(e) {
+  return Bi(Vi(e));
 }
-async function Bi(e, t) {
+async function Fi(e, t) {
   try {
     if (typeof navigator < "u" && navigator.clipboard?.writeText)
       return await navigator.clipboard.writeText(e), !0;
@@ -3700,8 +3751,8 @@ async function Bi(e, t) {
     return !1;
   }
 }
-const Vi = 2147483001;
-function Hi({ message: e, ok: t }) {
+const ji = 2147483001;
+function Ki({ message: e, ok: t }) {
   return e === null ? null : /* @__PURE__ */ s(
     "div",
     {
@@ -3710,7 +3761,7 @@ function Hi({ message: e, ok: t }) {
         top: 0,
         left: 0,
         right: 0,
-        zIndex: Vi,
+        zIndex: ji,
         display: "flex",
         justifyContent: "center",
         pointerEvents: "none"
@@ -3747,26 +3798,26 @@ function Hi({ message: e, ok: t }) {
     }
   );
 }
-const Cn = 2147483e3, Fi = 2200, En = 2;
-function ji(e) {
+const Cn = 2147483e3, Wi = 2200, En = 2;
+function Xi(e) {
   try {
     return e.closest(Qt) !== null;
   } catch {
     return !1;
   }
 }
-function Ki({ enabled: e }) {
-  const [t, n] = _e(!1), [o, r] = _e(null), [a, i] = _e(null), l = de(!1);
+function Yi({ enabled: e }) {
+  const [t, n] = $e(!1), [o, r] = $e(null), [a, i] = $e(null), l = de(!1);
   l.current = t;
   const c = de(null);
   c.current = o;
-  const d = de(null), u = de(null), p = de(null), m = de(0), h = de(null), v = Y(async (g) => {
-    const N = Di(g), y = await Bi(N);
+  const d = de(null), u = de(null), p = de(null), m = de(0), h = de(null), v = q(async (g) => {
+    const y = Hi(g), w = await Fi(y);
     m.current += 1, i({
-      message: y ? `Copied path: ${Ft(g)}` : "Copy failed — clipboard unavailable",
-      ok: y,
+      message: w ? `Copied path: ${Ft(g)}` : "Copy failed — clipboard unavailable",
+      ok: w,
       key: m.current
-    }), p.current && clearTimeout(p.current), p.current = setTimeout(() => i(null), Fi);
+    }), p.current && clearTimeout(p.current), p.current = setTimeout(() => i(null), Wi);
   }, []);
   ue(() => {
     e || (n(!1), r(null));
@@ -3774,12 +3825,12 @@ function Ki({ enabled: e }) {
     if (!e) return;
     function g(f, E) {
       const S = document.elementFromPoint(f, E);
-      r(!S || ji(S) ? null : S);
+      r(!S || Xi(S) ? null : S);
     }
-    function N(f) {
+    function y(f) {
       h.current = { x: f.clientX, y: f.clientY }, l.current && g(f.clientX, f.clientY);
     }
-    function y(f) {
+    function w(f) {
       if ((f.key === "Alt" || f.altKey) && !l.current) {
         n(!0);
         const E = h.current;
@@ -3789,23 +3840,23 @@ function Ki({ enabled: e }) {
     function _(f) {
       (f.key === "Alt" || !f.altKey) && (n(!1), r(null));
     }
-    function w() {
+    function x() {
       n(!1), r(null);
     }
-    return document.addEventListener("mousemove", N, { passive: !0 }), window.addEventListener("keydown", y, !0), window.addEventListener("keyup", _, !0), window.addEventListener("blur", w), () => {
-      document.removeEventListener("mousemove", N), window.removeEventListener("keydown", y, !0), window.removeEventListener("keyup", _, !0), window.removeEventListener("blur", w);
+    return document.addEventListener("mousemove", y, { passive: !0 }), window.addEventListener("keydown", w, !0), window.addEventListener("keyup", _, !0), window.addEventListener("blur", x), () => {
+      document.removeEventListener("mousemove", y), window.removeEventListener("keydown", w, !0), window.removeEventListener("keyup", _, !0), window.removeEventListener("blur", x);
     };
   }, [e]), ue(() => {
     if (!e || !t) return;
-    function g(y) {
-      c.current && (y.preventDefault(), y.stopPropagation(), y.stopImmediatePropagation());
+    function g(w) {
+      c.current && (w.preventDefault(), w.stopPropagation(), w.stopImmediatePropagation());
     }
-    function N(y) {
+    function y(w) {
       const _ = c.current;
-      _ && (y.preventDefault(), y.stopPropagation(), y.stopImmediatePropagation(), v(_));
+      _ && (w.preventDefault(), w.stopPropagation(), w.stopImmediatePropagation(), v(_));
     }
-    return document.addEventListener("mousedown", g, !0), document.addEventListener("click", N, !0), () => {
-      document.removeEventListener("mousedown", g, !0), document.removeEventListener("click", N, !0);
+    return document.addEventListener("mousedown", g, !0), document.addEventListener("click", y, !0), () => {
+      document.removeEventListener("mousedown", g, !0), document.removeEventListener("click", y, !0);
     };
   }, [e, t, v]), ue(() => {
     if (!e || !t) return;
@@ -3816,32 +3867,32 @@ function Ki({ enabled: e }) {
   }, [e, t]), ue(() => {
     if (!t || !o) return;
     let g = 0;
-    function N() {
-      const y = c.current, _ = d.current;
-      if (y && _) {
-        if (!y.isConnected) {
+    function y() {
+      const w = c.current, _ = d.current;
+      if (w && _) {
+        if (!w.isConnected) {
           r(null);
           return;
         }
-        const w = y.getBoundingClientRect();
-        _.style.top = `${w.top}px`, _.style.left = `${w.left}px`, _.style.width = `${w.width}px`, _.style.height = `${w.height}px`;
+        const x = w.getBoundingClientRect();
+        _.style.top = `${x.top}px`, _.style.left = `${x.left}px`, _.style.width = `${x.width}px`, _.style.height = `${x.height}px`;
         const f = u.current;
         if (f) {
           const E = f.offsetHeight;
-          let S = w.top - E - En;
-          S < 0 && (S = w.top + En), f.style.left = `${Math.max(0, w.left)}px`, f.style.top = `${S}px`;
+          let S = x.top - E - En;
+          S < 0 && (S = x.top + En), f.style.left = `${Math.max(0, x.left)}px`, f.style.top = `${S}px`;
         }
       }
-      g = requestAnimationFrame(N);
+      g = requestAnimationFrame(y);
     }
-    return g = requestAnimationFrame(N), () => cancelAnimationFrame(g);
+    return g = requestAnimationFrame(y), () => cancelAnimationFrame(g);
   }, [t, o]), ue(() => () => {
     p.current && clearTimeout(p.current);
   }, []);
-  const C = e && t && o !== null, b = lt(
+  const C = e && t && o !== null, b = st(
     () => C && o ? Ft(o) : "",
     [C, o]
-  ), x = C && o ? o.getBoundingClientRect() : null;
+  ), N = C && o ? o.getBoundingClientRect() : null;
   return /* @__PURE__ */ k(ae, { children: [
     /* @__PURE__ */ s(
       "div",
@@ -3863,7 +3914,7 @@ function Ki({ enabled: e }) {
         children: a?.message ?? ""
       }
     ),
-    C && x && /* @__PURE__ */ k(ae, { children: [
+    C && N && /* @__PURE__ */ k(ae, { children: [
       /* @__PURE__ */ s(
         "div",
         {
@@ -3872,10 +3923,10 @@ function Ki({ enabled: e }) {
           "aria-hidden": "true",
           style: {
             position: "fixed",
-            top: `${x.top}px`,
-            left: `${x.left}px`,
-            width: `${x.width}px`,
-            height: `${x.height}px`,
+            top: `${N.top}px`,
+            left: `${N.left}px`,
+            width: `${N.width}px`,
+            height: `${N.height}px`,
             zIndex: Cn
           }
         }
@@ -3888,47 +3939,47 @@ function Ki({ enabled: e }) {
           "aria-hidden": "true",
           style: {
             position: "fixed",
-            top: `${x.top}px`,
-            left: `${x.left}px`,
+            top: `${N.top}px`,
+            left: `${N.left}px`,
             zIndex: Cn
           },
           children: [
             /* @__PURE__ */ s("span", { className: "tokenpanel-elpath-label-name", children: b }),
             /* @__PURE__ */ k("span", { className: "tokenpanel-elpath-label-size", children: [
-              Math.round(x.width),
+              Math.round(N.width),
               " × ",
-              Math.round(x.height)
+              Math.round(N.height)
             ] })
           ]
         }
       )
     ] }),
-    a && /* @__PURE__ */ s(Hi, { message: a.message, ok: a.ok }, a.key)
+    a && /* @__PURE__ */ s(Ki, { message: a.message, ok: a.ok }, a.key)
   ] });
 }
-function Wi({ enabled: e }) {
-  const t = bo(mo);
-  return t ? Wt(/* @__PURE__ */ s(Ki, { enabled: e }), t) : null;
+function qi({ enabled: e }) {
+  const t = wo(vo);
+  return t ? Wt(/* @__PURE__ */ s(Yi, { enabled: e }), t) : null;
 }
-function Xi({ children: e }) {
-  const [t, n] = _e($i), o = Y((i) => {
+function Gi({ children: e }) {
+  const [t, n] = $e(Si), o = q((i) => {
     n(i), Nn(i);
-  }, []), r = Y(() => {
+  }, []), r = q(() => {
     n((i) => {
       const l = !i;
       return Nn(l), l;
     });
-  }, []), a = lt(
+  }, []), a = st(
     () => ({ enabled: t, setEnabled: o, toggle: r }),
     [t, o, r]
   );
   return /* @__PURE__ */ k(ae, { children: [
-    /* @__PURE__ */ s(vo.Provider, { value: a, children: e }),
-    /* @__PURE__ */ s(Wi, { enabled: t })
+    /* @__PURE__ */ s(xo.Provider, { value: a, children: e }),
+    /* @__PURE__ */ s(qi, { enabled: t })
   ] });
 }
-function Yi() {
-  const e = Xt(vo);
+function Ui() {
+  const e = Xt(xo);
   if (e === null) return null;
   const { enabled: t, toggle: n } = e;
   return /* @__PURE__ */ s(
@@ -3964,8 +4015,8 @@ function Yi() {
     }
   );
 }
-const yo = jt(null);
-function qi({ state: e }) {
+const _o = jt(null);
+function Ji({ state: e }) {
   const t = de(null);
   return ue(() => {
     if (!e.visible || !e.triggerEl || !t.current) return;
@@ -3986,16 +4037,16 @@ function qi({ state: e }) {
     }
   );
 }
-function Gi({ children: e }) {
-  const [t, n] = _e({
+function Zi({ children: e }) {
+  const [t, n] = $e({
     visible: !1,
     text: "",
     triggerEl: null
-  }), o = de(null), r = Y((l, c) => {
+  }), o = de(null), r = q((l, c) => {
     o.current = l, n({ visible: !0, text: c, triggerEl: l });
-  }, []), a = Y((l) => {
+  }, []), a = q((l) => {
     o.current === l && (o.current = null, n({ visible: !1, text: "", triggerEl: null }));
-  }, []), i = Y(() => {
+  }, []), i = q(() => {
     o.current = null, n({ visible: !1, text: "", triggerEl: null });
   }, []);
   return ue(() => {
@@ -4008,28 +4059,28 @@ function Gi({ children: e }) {
       o.current && i();
     }
     return window.addEventListener("scroll", l, !0), () => window.removeEventListener("scroll", l, !0);
-  }, [i]), /* @__PURE__ */ k(yo.Provider, { value: { show: r, hide: a }, children: [
+  }, [i]), /* @__PURE__ */ k(_o.Provider, { value: { show: r, hide: a }, children: [
     e,
-    typeof document < "u" && Wt(/* @__PURE__ */ s(qi, { state: t }), document.body)
+    typeof document < "u" && Wt(/* @__PURE__ */ s(Ji, { state: t }), document.body)
   ] });
 }
 function en(e) {
-  const t = Xt(yo), n = Y(
+  const t = Xt(_o), n = q(
     (i) => {
       t && t.show(i.currentTarget, e);
     },
     [t, e]
-  ), o = Y(
+  ), o = q(
     (i) => {
       t && t.hide(i.currentTarget);
     },
     [t, e]
-  ), r = Y(
+  ), r = q(
     (i) => {
       t && t.show(i.currentTarget, e);
     },
     [t, e]
-  ), a = Y(
+  ), a = q(
     (i) => {
       t && t.hide(i.currentTarget);
     },
@@ -4037,8 +4088,8 @@ function en(e) {
   );
   return { onMouseEnter: n, onMouseLeave: o, onFocusIn: r, onFocusOut: a };
 }
-function Ui(e, t, n) {
-  W(() => {
+function Qi(e, t, n) {
+  X(() => {
     if (!n) return;
     function o(a) {
       e.current && !e.current.contains(a.target) && t();
@@ -4049,7 +4100,7 @@ function Ui(e, t, n) {
     return document.addEventListener("mousedown", o), document.addEventListener("keydown", r), () => {
       document.removeEventListener("mousedown", o), document.removeEventListener("keydown", r);
     };
-  }, [n, t, e]), W(() => {
+  }, [n, t, e]), X(() => {
     if (!n) return;
     function o() {
       t();
@@ -4057,7 +4108,7 @@ function Ui(e, t, n) {
     return window.addEventListener("scroll", o, !0), () => window.removeEventListener("scroll", o, !0);
   }, [n, t]);
 }
-function Ji(e, t, n, o) {
+function el(e, t, n, o) {
   if (!e) return { position: "fixed", zIndex: 70, ...o };
   const r = e.getBoundingClientRect(), a = 4, i = 8, l = window.innerHeight - r.bottom - i, c = r.top - i, d = l < n && c > l;
   let u = r.left;
@@ -4077,7 +4128,7 @@ const Sn = Ge(function({
   label: r,
   cssVar: a
 }) {
-  const [i, l] = j(!1), c = D(null), d = R(() => l(!1), []), u = R(
+  const [i, l] = K(!1), c = B(null), d = R(() => l(!1), []), u = R(
     (h) => {
       n(o, h);
     },
@@ -4102,7 +4153,7 @@ const Sn = Ge(function({
       }
     ),
     i && /* @__PURE__ */ s(
-      co,
+      po,
       {
         color: t,
         onChange: u,
@@ -4115,7 +4166,7 @@ const Sn = Ge(function({
       a && /* @__PURE__ */ s(se, { cssVar: a })
     ] })
   ] });
-}), nt = Ge(function({
+}), ot = Ge(function({
   label: t,
   idKey: n,
   value: o,
@@ -4127,11 +4178,11 @@ const Sn = Ge(function({
   foreground: d,
   cssVar: u
 }) {
-  const p = a ?? ((w) => `--zd-p${w}`), [m, h] = j(!1), v = D(null), C = D(null), b = R(() => h(!1), []), x = R(() => h((w) => !w), []), g = o === "bg" ? c ?? "#000000" : o === "fg" ? d ?? "#ffffff" : r[o] ?? "#000000", N = o === "bg" ? "bg" : o === "fg" ? "fg" : `p${o}`;
-  Ui(v, b, m);
-  const y = en(`${t}: ${N}`);
-  function _(w) {
-    i(n, w), h(!1);
+  const p = a ?? ((x) => `--zd-p${x}`), [m, h] = K(!1), v = B(null), C = B(null), b = R(() => h(!1), []), N = R(() => h((x) => !x), []), g = o === "bg" ? c ?? "#000000" : o === "fg" ? d ?? "#ffffff" : r[o] ?? "#000000", y = o === "bg" ? "bg" : o === "fg" ? "fg" : `p${o}`;
+  Qi(v, b, m);
+  const w = en(`${t}: ${y}`);
+  function _(x) {
+    i(n, x), h(!1);
   }
   return /* @__PURE__ */ k("div", { className: "tokenpanel-palette-selector", ref: v, children: [
     /* @__PURE__ */ k(
@@ -4140,14 +4191,14 @@ const Sn = Ge(function({
         ref: C,
         role: "button",
         tabIndex: 0,
-        onClick: x,
-        onKeyDown: (w) => {
-          (w.key === "Enter" || w.key === " ") && (w.preventDefault(), x());
+        onClick: N,
+        onKeyDown: (x) => {
+          (x.key === "Enter" || x.key === " ") && (x.preventDefault(), N());
         },
         className: "tokenpanel-palette-trigger",
-        "aria-label": `${t}: ${N}`,
+        "aria-label": `${t}: ${y}`,
         "aria-expanded": m,
-        ...y,
+        ...w,
         children: [
           /* @__PURE__ */ s("span", { className: "tokenpanel-palette-trigger-label", children: t }),
           /* @__PURE__ */ s(
@@ -4157,7 +4208,7 @@ const Sn = Ge(function({
               style: { backgroundColor: g }
             }
           ),
-          /* @__PURE__ */ s("span", { className: "tokenpanel-palette-trigger-value", children: N }),
+          /* @__PURE__ */ s("span", { className: "tokenpanel-palette-trigger-value", children: y }),
           /* @__PURE__ */ s(
             "svg",
             {
@@ -4181,16 +4232,16 @@ const Sn = Ge(function({
         role: "listbox",
         "aria-label": `${t} color options`,
         className: "tokenpanel-palette-options",
-        style: Ji(C.current, 440, l ? 160 : 120),
+        style: el(C.current, 440, l ? 160 : 120),
         children: [
-          l && l.length > 0 && /* @__PURE__ */ s("div", { className: "tokenpanel-palette-options-extras", children: l.map((w) => {
-            const f = w === "bg" ? c ?? "#000000" : d ?? "#ffffff", E = o === w;
+          l && l.length > 0 && /* @__PURE__ */ s("div", { className: "tokenpanel-palette-options-extras", children: l.map((x) => {
+            const f = x === "bg" ? c ?? "#000000" : d ?? "#ffffff", E = o === x;
             return /* @__PURE__ */ k(
               "div",
               {
                 role: "option",
                 "aria-selected": E,
-                onClick: () => _(w),
+                onClick: () => _(x),
                 className: E ? "tokenpanel-palette-extra-option is-selected" : "tokenpanel-palette-extra-option",
                 children: [
                   /* @__PURE__ */ s(
@@ -4200,24 +4251,24 @@ const Sn = Ge(function({
                       style: { backgroundColor: f }
                     }
                   ),
-                  /* @__PURE__ */ s("span", { className: "tokenpanel-palette-extra-label", children: w })
+                  /* @__PURE__ */ s("span", { className: "tokenpanel-palette-extra-label", children: x })
                 ]
               },
-              w
+              x
             );
           }) }),
-          /* @__PURE__ */ s("div", { className: "tokenpanel-palette-options-grid", children: r.map((w, f) => {
+          /* @__PURE__ */ s("div", { className: "tokenpanel-palette-options-grid", children: r.map((x, f) => {
             const E = o === f, S = p(f);
             return /* @__PURE__ */ s(
               "div",
               {
                 role: "option",
                 "aria-selected": E,
-                "aria-label": `${S}: ${w}`,
+                "aria-label": `${S}: ${x}`,
                 onClick: () => _(f),
-                title: `${S}: ${w}`,
+                title: `${S}: ${x}`,
                 className: E ? "tokenpanel-palette-option-button is-selected" : "tokenpanel-palette-option-button",
-                style: { backgroundColor: w }
+                style: { backgroundColor: x }
               },
               f
             );
@@ -4227,7 +4278,7 @@ const Sn = Ge(function({
     )
   ] });
 });
-function Zi({
+function tl({
   tab: e,
   state: t,
   persistColor: n,
@@ -4235,7 +4286,7 @@ function Zi({
   secondaryState: r,
   persistSecondary: a
 }) {
-  const i = J(() => pn(e), [e]), l = J(
+  const i = Z(() => pn(e), [e]), l = Z(
     () => i ?? {
       id: "stub",
       paletteSize: 0,
@@ -4249,23 +4300,23 @@ function Zi({
       panelSettings: { colorScheme: "", colorMode: !1 }
     },
     [i]
-  ), c = J(
+  ), c = Z(
     () => o ? pn(o) ?? null : null,
     [o]
-  ), d = q().colorPresets ?? {}, u = J(
+  ), d = Y().colorPresets ?? {}, u = Z(
     () => ({ ...d, ...l.colorSchemes }),
     [d, l.colorSchemes]
-  ), p = J(() => Object.keys(l.colorSchemes), [l.colorSchemes]), m = J(() => Object.keys(d).sort(), [d]), h = l.label ?? l.id.toUpperCase(), v = c?.label ?? c?.id.toUpperCase() ?? "", C = R(
+  ), p = Z(() => Object.keys(l.colorSchemes), [l.colorSchemes]), m = Z(() => Object.keys(d).sort(), [d]), h = l.label ?? l.id.toUpperCase(), v = c?.label ?? c?.id.toUpperCase() ?? "", C = R(
     (f) => ve(l, f),
     [l]
   ), b = R(
     (f) => c ? ve(c, f) : "",
     [c]
-  ), x = R(
+  ), N = R(
     (f, E) => {
       n((S) => ({
         ...S,
-        palette: S.palette.map((V, X) => X === f ? E : V)
+        palette: S.palette.map((O, j) => j === f ? E : O)
       }));
     },
     [n]
@@ -4273,11 +4324,11 @@ function Zi({
     (f, E) => {
       a((S) => S && {
         ...S,
-        palette: S.palette.map((V, X) => X === f ? E : V)
+        palette: S.palette.map((O, j) => j === f ? E : O)
       });
     },
     [a]
-  ), N = R(
+  ), y = R(
     (f, E) => {
       a((S) => S && {
         ...S,
@@ -4285,7 +4336,7 @@ function Zi({
       });
     },
     [a]
-  ), y = R(
+  ), w = R(
     (f, E) => {
       typeof E == "number" && (f !== "background" && f !== "foreground" && f !== "cursor" && f !== "selectionBg" && f !== "selectionFg" || n((S) => ({ ...S, [f]: E })));
     },
@@ -4298,12 +4349,12 @@ function Zi({
       }));
     },
     [n]
-  ), w = R(
+  ), x = R(
     (f) => {
       const E = u[f];
       if (!E) return;
       const S = Pn(E);
-      n(() => S), Oo(S.shikiTheme);
+      n(() => S), Vo(S.shikiTheme);
     },
     [n]
   );
@@ -4313,7 +4364,7 @@ function Zi({
       {
         onChange: (f) => {
           const E = f.target, S = E.value;
-          S && (w(S), E.value = "");
+          S && (x(S), E.value = "");
         },
         className: "tokenpanel-color-preset-select",
         "aria-label": "Load color scheme preset",
@@ -4341,7 +4392,7 @@ function Zi({
             index: E,
             label: ve(l, E),
             cssVar: ve(l, E),
-            onChange: x
+            onChange: N
           },
           E
         )
@@ -4355,26 +4406,26 @@ function Zi({
         ] }),
         /* @__PURE__ */ k("div", { className: "tokenpanel-color-base-grid", children: [
           /* @__PURE__ */ s(
-            nt,
+            ot,
             {
               label: "background (bg)",
               idKey: "background",
               value: t.background,
               palette: t.palette,
               paletteCssVar: C,
-              onChange: y,
+              onChange: w,
               cssVar: l.baseRoles.background
             }
           ),
           /* @__PURE__ */ s(
-            nt,
+            ot,
             {
               label: "foreground (fg)",
               idKey: "foreground",
               value: t.foreground,
               palette: t.palette,
               paletteCssVar: C,
-              onChange: y,
+              onChange: w,
               cssVar: l.baseRoles.foreground
             }
           )
@@ -4388,7 +4439,7 @@ function Zi({
         /* @__PURE__ */ s("div", { className: "tokenpanel-color-base-grid", children: Object.entries(l.semanticDefaults).map(([f, E]) => {
           const S = l.semanticCssNames[f];
           return /* @__PURE__ */ s(
-            nt,
+            ot,
             {
               label: S ?? f,
               idKey: f,
@@ -4442,14 +4493,14 @@ function Zi({
               /* @__PURE__ */ s("div", { className: "tokenpanel-color-base-grid", children: Object.entries(c.semanticDefaults).map(([f, E]) => {
                 const S = c.semanticCssNames[f];
                 return /* @__PURE__ */ s(
-                  nt,
+                  ot,
                   {
                     label: S ?? f,
                     idKey: f,
                     value: r.semanticMappings[f] ?? E,
                     palette: r.palette,
                     paletteCssVar: b,
-                    onChange: N,
+                    onChange: y,
                     cssVar: S
                   },
                   f
@@ -4462,18 +4513,18 @@ function Zi({
     ] })
   ] });
 }
-const qe = "__literal__", Mn = 28;
-function Qi(e) {
-  return e.length <= Mn ? e : e.slice(0, Mn - 1) + "…";
+const qe = "__literal__", Tn = 28;
+function nl(e) {
+  return e.length <= Tn ? e : e.slice(0, Tn - 1) + "…";
 }
-function Tn(e, t) {
+function Mn(e, t) {
   return e.tiers.find((n) => n.id === t);
 }
-function el(e, t) {
+function ol(e, t) {
   return e.items.find((n) => n.id === t);
 }
-function tl({ tab: e, tierId: t, itemId: n, value: o, onChange: r, previewValueFor: a }) {
-  const l = Tn(e, t)?.referencesTier ?? "", c = l ? Tn(e, l) : void 0, d = c?.items ?? [], u = c && el(c, o) ? o : d[0]?.id ?? "";
+function rl({ tab: e, tierId: t, itemId: n, value: o, onChange: r, previewValueFor: a }) {
+  const l = Mn(e, t)?.referencesTier ?? "", c = l ? Mn(e, l) : void 0, d = c?.items ?? [], u = c && ol(c, o) ? o : d[0]?.id ?? "";
   return /* @__PURE__ */ s("div", { className: "tokenpanel-tier-ref-selector", children: /* @__PURE__ */ k(
     "select",
     {
@@ -4485,7 +4536,7 @@ function tl({ tab: e, tierId: t, itemId: n, value: o, onChange: r, previewValueF
       "aria-label": `${n} tier reference`,
       children: [
         d.map((m) => {
-          const h = Qi(a(m.id));
+          const h = nl(a(m.id));
           return /* @__PURE__ */ k("option", { value: m.id, children: [
             m.cssVar,
             " (",
@@ -4498,18 +4549,18 @@ function tl({ tab: e, tierId: t, itemId: n, value: o, onChange: r, previewValueF
     }
   ) });
 }
-const gt = Ge(tl);
-function nl({ cssVar: e, label: t, className: n }) {
+const kt = Ge(rl);
+function al({ cssVar: e, label: t, className: n }) {
   const o = en(e);
   return /* @__PURE__ */ k("span", { className: n ?? "tokenpanel-row-label", ...o, children: [
     e,
     t && t !== e && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: t })
   ] });
 }
-const fe = Ge(nl);
-function ol({ item: e, value: t, onChange: n }) {
-  const o = e.type, r = e.readonly === !0, a = e.pill, i = a?.value ?? "", l = a?.customDefault ?? "", c = a ? t === i : !1, d = D(c ? l : t);
-  W(() => {
+const fe = Ge(al);
+function il({ item: e, value: t, onChange: n }) {
+  const o = e.type, r = e.readonly === !0, a = e.pill, i = a?.value ?? "", l = a?.customDefault ?? "", c = a ? t === i : !1, d = B(c ? l : t);
+  X(() => {
     c || (d.current = t);
   }, [c, t]);
   const u = R(
@@ -4521,19 +4572,19 @@ function ol({ item: e, value: t, onChange: n }) {
   switch (o.kind) {
     case "length":
     case "number": {
-      const p = o.kind === "length" ? o.unit : "", m = parseFloat(t), h = Number.isFinite(m) ? m : 0, [v, C] = j(String(h));
-      W(() => {
+      const p = o.kind === "length" ? o.unit : "", m = parseFloat(t), h = Number.isFinite(m) ? m : 0, [v, C] = K(String(h));
+      X(() => {
         C(String(Number.isFinite(parseFloat(t)) ? parseFloat(t) : 0));
       }, [t]);
-      const b = (y) => {
-        const _ = y.currentTarget.value;
+      const b = (w) => {
+        const _ = w.currentTarget.value;
         C(_);
-        const w = parseFloat(_);
-        Number.isFinite(w) && n(e.id, p ? `${w}${p}` : String(w));
-      }, x = () => {
-        const y = parseFloat(v);
-        Number.isFinite(y) || C(String(h));
-      }, g = r || a !== void 0 && c, N = /* @__PURE__ */ s("div", { className: "tokenpanel-row--stacked", "data-testid": `tier-item-${e.id}`, children: /* @__PURE__ */ k("div", { className: "tokenpanel-row-head", children: [
+        const x = parseFloat(_);
+        Number.isFinite(x) && n(e.id, p ? `${x}${p}` : String(x));
+      }, N = () => {
+        const w = parseFloat(v);
+        Number.isFinite(w) || C(String(h));
+      }, g = r || a !== void 0 && c, y = /* @__PURE__ */ s("div", { className: "tokenpanel-row--stacked", "data-testid": `tier-item-${e.id}`, children: /* @__PURE__ */ k("div", { className: "tokenpanel-row-head", children: [
         /* @__PURE__ */ s(fe, { cssVar: e.cssVar, label: e.label }),
         /* @__PURE__ */ k("div", { className: "tokenpanel-row-input-group", children: [
           /* @__PURE__ */ s(
@@ -4543,7 +4594,7 @@ function ol({ item: e, value: t, onChange: n }) {
               inputMode: "decimal",
               value: v,
               onChange: b,
-              onBlur: x,
+              onBlur: N,
               disabled: g,
               className: "tokenpanel-row-number-input",
               "aria-label": `${e.cssVar} value`
@@ -4571,12 +4622,12 @@ function ol({ item: e, value: t, onChange: n }) {
             ")"
           ] })
         ] }),
-        N
-      ] }) : N;
+        y
+      ] }) : y;
     }
     case "select": {
-      const p = o.options, [m, h] = j(t);
-      W(() => {
+      const p = o.options, [m, h] = K(t);
+      X(() => {
         h(t);
       }, [t]);
       const v = (C) => {
@@ -4649,8 +4700,8 @@ function ol({ item: e, value: t, onChange: n }) {
       return null;
   }
 }
-const tn = Ge(ol);
-function rl({ tab: e, state: t, persistFont: n }) {
+const tn = Ge(il);
+function ll({ tab: e, state: t, persistFont: n }) {
   const o = R(
     (a, i) => {
       if (i === qe) {
@@ -4681,7 +4732,7 @@ function rl({ tab: e, state: t, persistFont: n }) {
       }
     ) }),
     e.tiers.map((a) => /* @__PURE__ */ s(
-      al,
+      sl,
       {
         tab: e,
         tier: a,
@@ -4692,7 +4743,7 @@ function rl({ tab: e, state: t, persistFont: n }) {
     ))
   ] });
 }
-function al({ tab: e, tier: t, state: n, onChange: o }) {
+function sl({ tab: e, tier: t, state: n, onChange: o }) {
   const r = t.referencesTier !== void 0;
   return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `font-tier-${t.id}`, children: [
     /* @__PURE__ */ s(
@@ -4714,7 +4765,7 @@ function al({ tab: e, tier: t, state: n, onChange: o }) {
           children: [
             /* @__PURE__ */ s(fe, { cssVar: a.cssVar, label: a.label }),
             /* @__PURE__ */ s(
-              gt,
+              kt,
               {
                 tab: e,
                 tierId: t.id,
@@ -4745,7 +4796,7 @@ function al({ tab: e, tier: t, state: n, onChange: o }) {
     }) })
   ] });
 }
-function il({ tab: e, state: t, persistSize: n }) {
+function cl({ tab: e, state: t, persistSize: n }) {
   const o = R(
     (a, i) => {
       if (i === qe) {
@@ -4776,7 +4827,7 @@ function il({ tab: e, state: t, persistSize: n }) {
       }
     ) }),
     e.tiers.map((a) => /* @__PURE__ */ s(
-      ll,
+      dl,
       {
         tab: e,
         tier: a,
@@ -4787,7 +4838,7 @@ function il({ tab: e, state: t, persistSize: n }) {
     ))
   ] });
 }
-function ll({ tab: e, tier: t, state: n, onChange: o }) {
+function dl({ tab: e, tier: t, state: n, onChange: o }) {
   const r = t.referencesTier !== void 0;
   return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `size-tier-${t.id}`, children: [
     /* @__PURE__ */ s(
@@ -4809,7 +4860,7 @@ function ll({ tab: e, tier: t, state: n, onChange: o }) {
           children: [
             /* @__PURE__ */ s(fe, { cssVar: a.cssVar, label: a.label }),
             /* @__PURE__ */ s(
-              gt,
+              kt,
               {
                 tab: e,
                 tierId: t.id,
@@ -4840,7 +4891,7 @@ function ll({ tab: e, tier: t, state: n, onChange: o }) {
     }) })
   ] });
 }
-function sl({ tab: e, state: t, persistSpacing: n }) {
+function ul({ tab: e, state: t, persistSpacing: n }) {
   const o = R(
     (a, i) => {
       if (i === qe) {
@@ -4871,7 +4922,7 @@ function sl({ tab: e, state: t, persistSpacing: n }) {
       }
     ) }),
     e.tiers.map((a) => /* @__PURE__ */ s(
-      cl,
+      pl,
       {
         tab: e,
         tier: a,
@@ -4882,7 +4933,7 @@ function sl({ tab: e, state: t, persistSpacing: n }) {
     ))
   ] });
 }
-function cl({ tab: e, tier: t, state: n, onChange: o }) {
+function pl({ tab: e, tier: t, state: n, onChange: o }) {
   const r = t.referencesTier !== void 0;
   return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `spacing-tier-${t.id}`, children: [
     /* @__PURE__ */ s(
@@ -4904,7 +4955,7 @@ function cl({ tab: e, tier: t, state: n, onChange: o }) {
           children: [
             /* @__PURE__ */ s(fe, { cssVar: a.cssVar, label: a.label }),
             /* @__PURE__ */ s(
-              gt,
+              kt,
               {
                 tab: e,
                 tierId: t.id,
@@ -4935,13 +4986,13 @@ function cl({ tab: e, tier: t, state: n, onChange: o }) {
     }) })
   ] });
 }
-function dl({ tab: e, tier: t, item: n, value: o, overrides: r, onChange: a }) {
+function fl({ tab: e, tier: t, item: n, value: o, overrides: r, onChange: a }) {
   if (t.referencesTier !== void 0) {
     const c = t.referencesTier;
     return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-ref-row-${n.id}`, children: [
       /* @__PURE__ */ s(fe, { cssVar: n.cssVar, label: n.label }),
       /* @__PURE__ */ s(
-        gt,
+        kt,
         {
           tab: e,
           tierId: t.id,
@@ -4961,15 +5012,15 @@ function dl({ tab: e, tier: t, item: n, value: o, overrides: r, onChange: a }) {
   switch (i.kind) {
     case "length":
     case "number": {
-      const c = i.kind === "length" ? i.unit : "", d = parseFloat(o), u = Number.isFinite(d) ? d : 0, [p, m] = j(String(u));
-      W(() => {
+      const c = i.kind === "length" ? i.unit : "", d = parseFloat(o), u = Number.isFinite(d) ? d : 0, [p, m] = K(String(u));
+      X(() => {
         m(String(Number.isFinite(parseFloat(o)) ? parseFloat(o) : 0));
       }, [o]);
       const h = (C) => {
         const b = C.currentTarget.value;
         m(b);
-        const x = parseFloat(b);
-        Number.isFinite(x) && a(n.id, c ? `${x}${c}` : String(x));
+        const N = parseFloat(b);
+        Number.isFinite(N) && a(n.id, c ? `${N}${c}` : String(N));
       }, v = () => {
         const C = parseFloat(p);
         Number.isFinite(C) || m(String(u));
@@ -5066,7 +5117,7 @@ function dl({ tab: e, tier: t, item: n, value: o, overrides: r, onChange: a }) {
       return null;
   }
 }
-function ul({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: r }) {
+function hl({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: r }) {
   const a = R(
     (i, l) => {
       r(t.id, i, l);
@@ -5086,7 +5137,7 @@ function ul({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: r }
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-grid", children: t.items.map((i) => {
       const l = n[i.id] ?? i.default;
       return /* @__PURE__ */ s(
-        dl,
+        fl,
         {
           tab: e,
           tier: t,
@@ -5100,7 +5151,7 @@ function ul({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: r }
     }) })
   ] });
 }
-function pl({ tab: e, overrides: t, onChange: n }) {
+function gl({ tab: e, overrides: t, onChange: n }) {
   const o = R(
     (r, a, i) => {
       n(r, a, i);
@@ -5110,7 +5161,7 @@ function pl({ tab: e, overrides: t, onChange: n }) {
   return /* @__PURE__ */ s("div", { className: "tokenpanel-tab-content", "data-testid": `generic-tab-${e.id}`, children: e.tiers.map((r) => {
     const a = t[r.id] ?? {};
     return /* @__PURE__ */ s(
-      ul,
+      hl,
       {
         tab: e,
         tier: r,
@@ -5122,19 +5173,19 @@ function pl({ tab: e, overrides: t, onChange: n }) {
     );
   }) });
 }
-function fl(e, t) {
-  const n = Y(
+function kl(e, t) {
+  const n = q(
     (u) => {
       e((p) => {
         if (!p) return p;
         const m = u(p);
-        return it(m, t), In(m, void 0, t), m;
+        return lt(m, t), In(m, void 0, t), m;
       });
     },
     // cfg is intentionally included so the callback re-binds when the
     // config reference changes (e.g. hot-reload in dev).
     [e, t]
-  ), o = Y(
+  ), o = q(
     (u, p) => {
       n((m) => {
         const h = m.tabs?.[u] ?? {}, v = p(h);
@@ -5148,32 +5199,32 @@ function fl(e, t) {
       });
     },
     [n]
-  ), r = Y(
+  ), r = q(
     (u) => {
       n((p) => ({ ...p, color: u(p.color) }));
     },
     [n]
-  ), a = Y(
+  ), a = q(
     (u) => {
       n((p) => ({ ...p, spacing: u(p.spacing) }));
     },
     [n]
-  ), i = Y(
+  ), i = q(
     (u) => {
       n((p) => ({ ...p, typography: u(p.typography) }));
     },
     [n]
-  ), l = Y(
+  ), l = q(
     (u) => {
       n((p) => ({ ...p, size: u(p.size) }));
     },
     [n]
-  ), c = Y(
+  ), c = q(
     (u) => {
       n((p) => ({ ...p, panelPosition: u(p.panelPosition) }));
     },
     [n]
-  ), d = Y(
+  ), d = q(
     (u) => {
       n((p) => {
         const m = u(p.secondary);
@@ -5203,8 +5254,8 @@ function fl(e, t) {
     persistSecondary: d
   };
 }
-const hl = ["color", "font", "spacing", "size"], gl = "color", Ke = 900;
-function kl(e, t, n) {
+const ml = ["color", "font", "spacing", "size"], bl = "color", Ke = 900;
+function vl(e, t, n) {
   const o = e < Ke;
   return o ? {
     width: "min(calc(100vw - 16px), 500px)",
@@ -5216,201 +5267,201 @@ function kl(e, t, n) {
     narrow: o
   };
 }
-function ot(e) {
+function rt(e) {
   return {
     color: je(ge(e)),
-    spacing: Nt(),
-    typography: Nt(),
-    size: Nt(),
+    spacing: _t(),
+    typography: _t(),
+    size: _t(),
     secondary: Rt(e)
   };
 }
-function ml({
+function wl({
   instanceConfig: e
 } = {}) {
-  const t = J(
-    () => e ?? q(),
+  const t = Z(
+    () => e ?? Y(),
     [e]
-  ), n = ft(), [o, r] = j(!1), [a, i] = j(!1), [l, c] = j(!1), [d, u] = j(!1), [p, m] = j(!1), h = D(null), [v, C] = j(null), [b, x] = j(gl), [g, N] = j(ln), [y, _] = j(Do), [w, f] = j(Bo), [E, S] = j(!1), V = D(null), X = D({
+  ), n = ht(), [o, r] = K(!1), [a, i] = K(!1), [l, c] = K(!1), [d, u] = K(!1), [p, m] = K(!1), h = B(null), [v, C] = K(null), [b, N] = K(bl), [g, y] = K(ln), [w, _] = K(Bo), [x, f] = K(Ho), [E, S] = K(!1), O = B(null), j = B({
     spacing: null,
     font: null,
     size: null,
     color: null
-  }), H = D(ln);
-  H.current = g;
-  const Z = D(y);
-  Z.current = y;
-  const ie = D(null), ke = D(null), { persistColor: oe, persistSpacing: me, persistFont: De, persistSize: Ae, persistSecondary: A, persistTab: B } = fl(C, t);
-  W(() => {
+  }), D = B(ln);
+  D.current = g;
+  const G = B(w);
+  G.current = w;
+  const ie = B(null), ke = B(null), { persistColor: oe, persistSpacing: me, persistFont: De, persistSize: Ae, persistSecondary: A, persistTab: H } = kl(C, t);
+  X(() => {
     try {
       localStorage.getItem(We(t)) === "1" && r(!0);
     } catch {
     }
-    const M = Vo(t);
-    N(M), H.current = M;
-    const F = Ho(t);
-    _(F), Z.current = F, f(Fo(t)), S(window.innerWidth < Ke);
+    const T = Fo(t);
+    y(T), D.current = T;
+    const F = jo(t);
+    _(F), G.current = F, f(Ko(t)), S(window.innerWidth < Ke);
   }, []);
   const ee = R(
-    (M) => {
-      f(M), jo(M, t);
+    (T) => {
+      f(T), Wo(T, t);
     },
     [t]
   );
-  W(() => {
+  X(() => {
     try {
-      const M = We(t);
-      o ? localStorage.setItem(M, "1") : localStorage.removeItem(M);
+      const T = We(t);
+      o ? localStorage.setItem(T, "1") : localStorage.removeItem(T);
     } catch {
     }
     try {
-      const M = Rn(t);
-      localStorage.setItem(M, o ? "1" : "0");
+      const T = Rn(t);
+      localStorage.setItem(T, o ? "1" : "0");
     } catch {
     }
-  }, [o, t]), W(() => {
+  }, [o, t]), X(() => {
     if (!o) return;
-    function M(F) {
+    function T(F) {
       F.key === "Escape" && (a || l || d || (F.preventDefault(), r(!1)));
     }
-    return document.addEventListener("keydown", M), () => {
-      document.removeEventListener("keydown", M);
+    return document.addEventListener("keydown", T), () => {
+      document.removeEventListener("keydown", T);
     };
-  }, [o, a, l, d]), W(() => {
-    const M = On(t);
+  }, [o, a, l, d]), X(() => {
+    const T = On(t);
     function F() {
       try {
         r(localStorage.getItem(We(t)) === "1");
       } catch {
       }
     }
-    return window.addEventListener(M, F), () => {
-      window.removeEventListener(M, F);
+    return window.addEventListener(T, F), () => {
+      window.removeEventListener(T, F);
     };
-  }, [t]), W(() => {
-    function M() {
-      Wo(void 0, void 0, t), C(
+  }, [t]), X(() => {
+    function T() {
+      Yo(void 0, void 0, t), C(
         (F) => F ? {
           ...F,
           color: je(ge(t)),
           secondary: Rt(t)
-        } : ot(t)
+        } : rt(t)
       );
     }
-    return window.addEventListener("color-scheme-changed", M), () => window.removeEventListener("color-scheme-changed", M);
-  }, [t]), W(() => {
+    return window.addEventListener("color-scheme-changed", T), () => window.removeEventListener("color-scheme-changed", T);
+  }, [t]), X(() => {
     if (!o || v) return;
-    const M = zn(
+    const T = zn(
       void 0,
       void 0,
       ge(t),
       t
     );
-    if (M) {
-      it(M, t), C(M);
+    if (T) {
+      lt(T, t), C(T);
       return;
     }
-    C(ot(t));
+    C(rt(t));
   }, [o, v, t]);
-  const be = R((M) => {
-    if (window.innerWidth < Ke || M.target.closest("button, select, option, [role='tab'], [role='button']")) return;
-    M.preventDefault();
-    const K = M.clientX, U = M.clientY, z = H.current.left, te = H.current.top, ye = V.current?.offsetWidth ?? 600;
-    V.current?.offsetHeight;
-    function le(Ne) {
-      const Ce = Ne.clientX - K, Lo = Ne.clientY - U, wt = yt(
-        te + Lo,
+  const be = R((T) => {
+    if (window.innerWidth < Ke || T.target.closest("button, select, option, [role='tab'], [role='button']")) return;
+    T.preventDefault();
+    const W = T.clientX, J = T.clientY, z = D.current.left, te = D.current.top, Ne = O.current?.offsetWidth ?? 600;
+    O.current?.offsetHeight;
+    function le(_e) {
+      const Ce = _e.clientX - W, Io = _e.clientY - J, xt = Nt(
+        te + Io,
         z + Ce,
-        ye
+        Ne
       );
-      V.current && (V.current.style.top = `${wt.top}px`, V.current.style.left = `${wt.left}px`), H.current = wt;
+      O.current && (O.current.style.top = `${xt.top}px`, O.current.style.left = `${xt.left}px`), D.current = xt;
     }
     function pe() {
       document.removeEventListener("mousemove", le), document.removeEventListener("mouseup", pe), ie.current = null;
-      const Ne = H.current;
-      N(Ne), xt(Ne, t);
+      const _e = D.current;
+      y(_e), yt(_e, t);
     }
     document.addEventListener("mousemove", le), document.addEventListener("mouseup", pe), ie.current = () => {
       document.removeEventListener("mousemove", le), document.removeEventListener("mouseup", pe);
     };
-  }, [t]), $ = R((M) => {
+  }, [t]), $ = R((T) => {
     if (window.innerWidth < Ke) return;
-    M.preventDefault(), M.stopPropagation();
-    const F = M.clientX, K = M.clientY, U = Z.current.width, z = Z.current.height;
+    T.preventDefault(), T.stopPropagation();
+    const F = T.clientX, W = T.clientY, J = G.current.width, z = G.current.height;
     function te(le) {
-      const pe = le.clientX - F, Ne = le.clientY - K, Ce = un(U + pe, z + Ne);
-      V.current && (V.current.style.width = `${Ce.width}px`, V.current.style.height = `${Ce.height}px`), Z.current = Ce;
+      const pe = le.clientX - F, _e = le.clientY - W, Ce = un(J + pe, z + _e);
+      O.current && (O.current.style.width = `${Ce.width}px`, O.current.style.height = `${Ce.height}px`), G.current = Ce;
     }
-    function ye() {
-      document.removeEventListener("mousemove", te), document.removeEventListener("mouseup", ye), ke.current = null;
-      const le = Z.current;
+    function Ne() {
+      document.removeEventListener("mousemove", te), document.removeEventListener("mouseup", Ne), ke.current = null;
+      const le = G.current;
       _(le), dn(le, t);
-      const pe = yt(
-        H.current.top,
-        H.current.left,
+      const pe = Nt(
+        D.current.top,
+        D.current.left,
         le.width,
         le.height
       );
-      (pe.top !== H.current.top || pe.left !== H.current.left) && (N(pe), xt(pe, t));
+      (pe.top !== D.current.top || pe.left !== D.current.left) && (y(pe), yt(pe, t));
     }
-    document.addEventListener("mousemove", te), document.addEventListener("mouseup", ye), ke.current = () => {
-      document.removeEventListener("mousemove", te), document.removeEventListener("mouseup", ye);
+    document.addEventListener("mousemove", te), document.addEventListener("mouseup", Ne), ke.current = () => {
+      document.removeEventListener("mousemove", te), document.removeEventListener("mouseup", Ne);
     };
   }, [t]);
-  W(() => () => {
+  X(() => () => {
     ie.current?.(), ke.current?.();
-  }, []), W(() => {
-    function M() {
-      S(window.innerWidth < Ke), _((K) => {
-        const U = un(K.width, K.height);
-        return (U.width !== K.width || U.height !== K.height) && dn(U, t), U;
+  }, []), X(() => {
+    function T() {
+      S(window.innerWidth < Ke), _((W) => {
+        const J = un(W.width, W.height);
+        return (J.width !== W.width || J.height !== W.height) && dn(J, t), J;
       });
-      const F = V.current?.offsetWidth ?? 600;
-      V.current?.offsetHeight, N((K) => {
-        const U = yt(K.top, K.left, F);
-        return xt(U, t), U;
+      const F = O.current?.offsetWidth ?? 600;
+      O.current?.offsetHeight, y((W) => {
+        const J = Nt(W.top, W.left, F);
+        return yt(J, t), J;
       });
     }
-    return window.addEventListener("resize", M), () => window.removeEventListener("resize", M);
+    return window.addEventListener("resize", T), () => window.removeEventListener("resize", T);
   }, [t]);
   const I = R(
-    (M) => {
-      it(M, t), In(M, void 0, t), C(M);
+    (T) => {
+      lt(T, t), In(T, void 0, t), C(T);
     },
     [t]
   ), re = R(() => {
-    sn(void 0, t), cn(void 0, t), C(ot(t));
+    sn(void 0, t), cn(void 0, t), C(rt(t));
   }, [t]), Q = R(() => {
-    sn(void 0, t), cn(void 0, t), C(ot(t));
-  }, [t]), O = J(() => t.tabs.map((M) => ({ id: M.id, label: M.label })), [t]), G = J(() => {
-    const M = {};
+    sn(void 0, t), cn(void 0, t), C(rt(t));
+  }, [t]), V = Z(() => t.tabs.map((T) => ({ id: T.id, label: T.label })), [t]), U = Z(() => {
+    const T = {};
     for (const F of t.tabs)
-      M[F.id] = F;
-    return M;
-  }, []), ce = R(
-    (M) => {
-      const F = O.findIndex((z) => z.id === b);
+      T[F.id] = F;
+    return T;
+  }, [t]), ce = R(
+    (T) => {
+      const F = V.findIndex((z) => z.id === b);
       if (F === -1) return;
-      let K = null;
-      if (M.key === "ArrowRight" ? K = (F + 1) % O.length : M.key === "ArrowLeft" ? K = (F - 1 + O.length) % O.length : M.key === "Home" ? K = 0 : M.key === "End" && (K = O.length - 1), K === null) return;
-      M.preventDefault();
-      const U = O[K];
-      x(U.id), window.requestAnimationFrame(() => {
-        X.current[U.id]?.focus();
+      let W = null;
+      if (T.key === "ArrowRight" ? W = (F + 1) % V.length : T.key === "ArrowLeft" ? W = (F - 1 + V.length) % V.length : T.key === "Home" ? W = 0 : T.key === "End" && (W = V.length - 1), W === null) return;
+      T.preventDefault();
+      const J = V[W];
+      N(J.id), window.requestAnimationFrame(() => {
+        j.current[J.id]?.focus();
       });
     },
-    [b, O]
+    [b, V]
   );
-  return /* @__PURE__ */ s(_i, { children: /* @__PURE__ */ s(Xi, { children: /* @__PURE__ */ s(Gi, { children: o && (() => {
+  return /* @__PURE__ */ s(Ei, { children: /* @__PURE__ */ s(Gi, { children: /* @__PURE__ */ s(Zi, { children: o && (() => {
     const {
-      width: M,
+      width: T,
       height: F,
-      narrow: K
-    } = kl(
+      narrow: W
+    } = vl(
       typeof window < "u" ? window.innerWidth : 1024,
       typeof window < "u" ? window.innerHeight : 768,
-      y
-    ), U = K || E ? {
+      w
+    ), J = W || E ? {
       position: "fixed",
       top: 16,
       left: "50%",
@@ -5421,24 +5472,24 @@ function ml({
       /* @__PURE__ */ k(
         "div",
         {
-          ref: V,
+          ref: O,
           className: "tokenpanel-shell",
           style: {
-            ...U,
-            width: M,
+            ...J,
+            width: T,
             height: F,
             maxHeight: "calc(100vh - 32px)",
             // `--tokenpanel-grid-min` is read by .tokenpanel-tab-grid /
             // .tokenpanel-tab-advanced-grid; switching the variable rewires the
             // min-card-width without re-rendering the grids.
-            "--tokenpanel-grid-min": Ko(w)
+            "--tokenpanel-grid-min": Xo(x)
           },
           children: [
             /* @__PURE__ */ k(
               "div",
               {
                 className: "tokenpanel-header",
-                style: { cursor: K || E ? "default" : "move" },
+                style: { cursor: W || E ? "default" : "move" },
                 onMouseDown: be,
                 children: [
                   /* @__PURE__ */ s("span", { className: "tokenpanel-title", children: "Design Tokens" }),
@@ -5468,7 +5519,7 @@ function ml({
                   ),
                   /* @__PURE__ */ s(Se, { onClick: re, className: "tokenpanel-action-link", children: "Reset" }),
                   /* @__PURE__ */ s("div", { className: "tokenpanel-spacer" }),
-                  /* @__PURE__ */ s(Yi, {}),
+                  /* @__PURE__ */ s(Ui, {}),
                   /* @__PURE__ */ s(
                     "div",
                     {
@@ -5539,20 +5590,20 @@ function ml({
                   role: "tablist",
                   "aria-label": "Design token categories",
                   className: "tokenpanel-tabbar-tabs",
-                  children: O.map((z) => {
+                  children: V.map((z) => {
                     const te = b === z.id;
                     return /* @__PURE__ */ s(
                       "div",
                       {
-                        ref: (ye) => {
-                          X.current[z.id] = ye;
+                        ref: (Ne) => {
+                          j.current[z.id] = Ne;
                         },
                         role: "tab",
                         id: `dtp-tab-${n}-${z.id}`,
                         "aria-selected": te,
                         "aria-controls": `dtp-panel-${n}-${z.id}`,
                         tabIndex: te ? 0 : -1,
-                        onClick: () => x(z.id),
+                        onClick: () => N(z.id),
                         onKeyDown: ce,
                         className: te ? "tokenpanel-tab-button is-active" : "tokenpanel-tab-button",
                         children: z.label
@@ -5580,7 +5631,7 @@ function ml({
                     min: 0,
                     max: 2,
                     step: 1,
-                    value: w,
+                    value: x,
                     onInput: (z) => {
                       const te = Number(z.currentTarget.value);
                       (te === 0 || te === 1 || te === 2) && ee(te);
@@ -5591,8 +5642,8 @@ function ml({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ s("div", { className: "tokenpanel-body", children: O.map((z) => {
-              const te = b === z.id, ye = hl.includes(z.id);
+            /* @__PURE__ */ s("div", { className: "tokenpanel-body", children: V.map((z) => {
+              const te = b === z.id, Ne = ml.includes(z.id);
               return /* @__PURE__ */ k(
                 "div",
                 {
@@ -5602,52 +5653,52 @@ function ml({
                   tabIndex: 0,
                   hidden: !te,
                   children: [
-                    z.id === "color" && v && G.color && /* @__PURE__ */ s(
-                      Zi,
+                    z.id === "color" && v && U.color && /* @__PURE__ */ s(
+                      tl,
                       {
-                        tab: G.color,
+                        tab: U.color,
                         state: v.color,
                         persistColor: oe,
-                        secondaryTab: G["color-secondary"] ?? null,
+                        secondaryTab: U["color-secondary"] ?? null,
                         secondaryState: v.secondary ?? Rt(t) ?? null,
                         persistSecondary: A
                       }
                     ),
-                    z.id === "spacing" && v && G.spacing && /* @__PURE__ */ s(
-                      sl,
+                    z.id === "spacing" && v && U.spacing && /* @__PURE__ */ s(
+                      ul,
                       {
-                        tab: G.spacing,
+                        tab: U.spacing,
                         state: v.spacing,
                         persistSpacing: me
                       }
                     ),
-                    z.id === "font" && v && G.font && /* @__PURE__ */ s(
-                      rl,
+                    z.id === "font" && v && U.font && /* @__PURE__ */ s(
+                      ll,
                       {
-                        tab: G.font,
+                        tab: U.font,
                         state: v.typography,
                         persistFont: De
                       }
                     ),
-                    z.id === "size" && v && G.size && /* @__PURE__ */ s(
-                      il,
+                    z.id === "size" && v && U.size && /* @__PURE__ */ s(
+                      cl,
                       {
-                        tab: G.size,
+                        tab: U.size,
                         state: v.size,
                         persistSize: Ae
                       }
                     ),
-                    !ye && G[z.id] && v && /* @__PURE__ */ s(
-                      pl,
+                    !Ne && U[z.id] && v && /* @__PURE__ */ s(
+                      gl,
                       {
-                        tab: G[z.id],
+                        tab: U[z.id],
                         overrides: v.tabs?.[z.id] ?? {},
-                        onChange: (le, pe, Ne) => {
-                          B(z.id, (Ce) => ({
+                        onChange: (le, pe, _e) => {
+                          H(z.id, (Ce) => ({
                             ...Ce,
                             [le]: {
                               ...Ce[le] ?? {},
-                              [pe]: Ne
+                              [pe]: _e
                             }
                           }));
                         }
@@ -5658,7 +5709,7 @@ function ml({
                 z.id
               );
             }) }),
-            !(K || E) && /* @__PURE__ */ s(
+            !(W || E) && /* @__PURE__ */ s(
               "div",
               {
                 className: "tokenpanel-resize-handle",
@@ -5671,7 +5722,7 @@ function ml({
         }
       ),
       a && v && /* @__PURE__ */ s(
-        hr,
+        mr,
         {
           onClose: () => i(!1),
           state: v,
@@ -5680,7 +5731,7 @@ function ml({
         }
       ),
       l && v && /* @__PURE__ */ s(
-        gr,
+        br,
         {
           onClose: () => c(!1),
           onLoad: I,
@@ -5689,7 +5740,7 @@ function ml({
         }
       ),
       d && v && /* @__PURE__ */ s(
-        yr,
+        $r,
         {
           state: v,
           open: d,
@@ -5700,7 +5751,7 @@ function ml({
         }
       ),
       p && /* @__PURE__ */ s(
-        Ga,
+        Za,
         {
           anchorRef: h,
           onClose: () => m(!1)
@@ -5709,66 +5760,66 @@ function ml({
     ] });
   })() }) }) });
 }
-const bl = ':where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){--tokentweak-color-fg: #b8b8b8;--tokentweak-color-bg: #181818;--tokentweak-color-muted: #888888;--tokentweak-color-surface: #1c1c1c;--tokentweak-color-accent: #d69a66;--tokentweak-color-accent-hover: #a7c0e3;--tokentweak-color-code-bg: #383838;--tokentweak-color-code-fg: #e0e0e0;--tokentweak-color-success: #93bb77;--tokentweak-color-danger: #da6871;--tokentweak-color-warning: #dfbb77;--tokentweak-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tokentweak-pad-2xs: .125rem;--tokentweak-pad-xs: .375rem;--tokentweak-pad-sm: .5rem;--tokentweak-pad-md: .75rem;--tokentweak-pad-lg: 1rem;--tokentweak-pad-xl: 1.5rem;--tokentweak-pad-2xl: 2rem;--tokentweak-gap-2xs: .4375rem;--tokentweak-gap-xs: .875rem;--tokentweak-gap-sm: 1.25rem;--tokentweak-gap-md: 1.5rem;--tokentweak-gap-lg: 1.75rem;--tokentweak-gap-xl: 2.5rem;--tokentweak-gap-2xl: 3.5rem;--tokentweak-text-micro: .75rem;--tokentweak-text-caption: .875rem;--tokentweak-text-small: 1rem;--tokentweak-text-body: 1.2rem;--tokentweak-text-subheading: 1.4rem;--tokentweak-text-heading: 3rem;--tokentweak-text-display: 3.75rem;--radius-tokentweak: .25rem}.tokenpanel-color-picker{position:fixed;width:320px;padding:var(--tokentweak-pad-md);background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs);z-index:70;color:var(--tokentweak-color-fg);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker[data-mode-shell=expanded]{width:520px;padding:var(--tokentweak-pad-lg);gap:var(--tokentweak-gap-xs)}.tokenpanel-color-picker-header{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-drag-handle{flex-shrink:0;cursor:grab;color:var(--tokentweak-color-muted);font-size:var(--tokentweak-text-caption);line-height:1;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-drag-handle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-drag-handle:active{cursor:grabbing}.tokenpanel-color-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker-mode-toggle{display:flex;align-items:center;gap:2px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:999px;padding:2px;flex-shrink:0}.tokenpanel-color-picker-mode-btn{border-radius:999px;padding-inline:var(--tokentweak-pad-xs);padding-block:var(--tokentweak-pad-2xs);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;white-space:nowrap}.tokenpanel-color-picker-mode-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn[aria-pressed=true]{background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-expand-btn{flex-shrink:0;color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);transition:color .12s ease}.tokenpanel-color-picker-expand-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-expand-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-top-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-preview{position:relative;flex-shrink:0;width:3rem;height:3rem;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);overflow:hidden}.tokenpanel-color-picker-preview-checkerboard{position:absolute;inset:0;background-image:repeating-conic-gradient(gray 0% 25%,silver 0% 50%);background-size:10px 10px}.tokenpanel-color-picker-preview-color{position:absolute;inset:0}.tokenpanel-color-picker-hex-input{flex:1;min-width:0;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption);background:var(--tokentweak-color-bg);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding:var(--tokentweak-pad-2xs) var(--tokentweak-pad-xs);transition:border-color .12s ease}.tokenpanel-color-picker-hex-input:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-hex-input:focus{border-color:var(--tokentweak-color-accent);outline:none}.tokenpanel-color-picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.tokenpanel-color-picker-grid>[role=row]{display:contents}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-grid{grid-template-columns:repeat(12,1fr)}.tokenpanel-color-picker-grid-cell{position:relative;aspect-ratio:1;border-radius:var(--radius-tokentweak);cursor:pointer;transition:box-shadow .12s ease}.tokenpanel-color-picker-grid-cell:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-color-picker-grid-cell[aria-selected=true]{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-color-picker-grid-cell:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid-cell[data-oog=true]:after{content:"";position:absolute;inset:1px;border:1px dashed oklch(98% 0 0 / .4);border-radius:var(--radius-tokentweak);pointer-events:none}.tokenpanel-color-picker-sliders{display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-label{flex-shrink:0;width:1.25rem;font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);-webkit-user-select:none;user-select:none}.tokenpanel-color-picker-slider{flex:1;position:relative;height:18px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-slider:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:var(--radius-tokentweak)}.tokenpanel-color-picker-slider-track{width:100%;height:18px;border-radius:9px;overflow:hidden;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-color-picker-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--tokentweak-color-fg);border:2px solid var(--tokentweak-color-bg);box-shadow:0 0 0 1px var(--tokentweak-color-muted);pointer-events:none}.tokenpanel-color-picker-slider-value{flex-shrink:0;width:3rem;text-align:right;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-readout{display:none;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);padding-top:var(--tokentweak-pad-2xs);border-top:1px solid var(--tokentweak-color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-readout{display:block}.tokenpanel-shell{z-index:50;display:flex;flex-direction:column;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);border-radius:var(--radius-tokentweak);box-shadow:0 4px 24px #00000040}.tokenpanel-resize-handle{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;-webkit-user-select:none;user-select:none;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 2px,var(--tokentweak-color-muted) 2px,var(--tokentweak-color-muted) 3px);-webkit-mask-image:linear-gradient(135deg,transparent 50%,#000 50%);mask-image:linear-gradient(135deg,transparent 50%,#000 50%);border-bottom-right-radius:var(--radius-tokentweak);transition:opacity .15s ease;opacity:.7}.tokenpanel-resize-handle:hover,.tokenpanel-resize-handle:focus-visible{opacity:1}.tokenpanel-header{display:flex;align-items:center;gap:var(--tokentweak-pad-md);padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-xs);border-bottom:1px solid var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-title{color:var(--tokentweak-color-fg);font-weight:600;font-size:.875rem;flex-shrink:0}.tokenpanel-action-link{color:var(--tokentweak-color-accent);font-size:.75rem;background:none;border:none;padding:0;cursor:pointer;transition:color .15s ease}.tokenpanel-action-link:hover{color:var(--tokentweak-color-accent-hover)}.tokenpanel-spacer{flex:1}.tokenpanel-close-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-close-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-tabbar{display:flex;align-items:center;border-bottom:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-xl);flex-shrink:0;gap:var(--tokentweak-pad-md)}.tokenpanel-tabbar-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.tokenpanel-tab-button{border:none;background:none;padding-inline:var(--tokentweak-pad-md);padding-block:var(--tokentweak-gap-xs);font-size:.875rem;cursor:pointer;border-bottom:2px solid transparent;color:var(--tokentweak-color-muted);transition:color .15s ease,border-color .15s ease}.tokenpanel-tab-button:hover,.tokenpanel-tab-button:focus-visible{color:var(--tokentweak-color-fg);text-decoration:underline}.tokenpanel-tab-button.is-active{color:var(--tokentweak-color-fg);border-bottom-color:var(--tokentweak-color-accent);text-decoration:none}.tokenpanel-density{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-shrink:0}.tokenpanel-density-label{color:var(--tokentweak-color-muted);font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;cursor:pointer}.tokenpanel-density-slider{width:5rem;accent-color:var(--tokentweak-color-accent);cursor:pointer}.tokenpanel-body{flex:1;min-height:0;overflow-y:auto;padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-sm)}.tokenpanel-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:12rem;padding-block:var(--tokentweak-gap-md);padding-inline:var(--tokentweak-pad-xl)}.tokenpanel-empty-state-text{color:var(--tokentweak-color-muted, #a8a8a8);font-size:.8125rem;line-height:1.5;max-width:32rem;margin:0}.tokenpanel-empty-state-text code{font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:.8125rem;color:var(--tokentweak-color-fg)}.tokenpanel-empty-state-link{color:var(--tokentweak-color-accent);text-decoration:underline;transition:color .15s ease}.tokenpanel-empty-state-link:hover,.tokenpanel-empty-state-link:focus-visible{color:var(--tokentweak-color-accent-hover)}.tokenpanel-tab-content{display:flex;flex-direction:column;gap:var(--tokentweak-gap-sm)}.tokenpanel-tab-actions{display:flex;align-items:center;gap:var(--tokentweak-pad-md)}.tokenpanel-tab-section{position:relative;flex-shrink:0;border:1px solid var(--tokentweak-color-muted);border-radius:.5rem;padding:18px 14px 14px}.tokenpanel-tab-section-heading{position:absolute;top:-.625rem;left:12px;background:var(--tokentweak-color-surface);padding:0 8px;margin:0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:.8125rem;line-height:1.25rem;text-transform:none;letter-spacing:normal}.tokenpanel-tab-section-heading--color{font-size:.875rem}.tokenpanel-tab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 18rem),1fr));gap:var(--tokentweak-gap-xs)}.tokenpanel-color-preset-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:2px;font-size:.75rem;border-radius:var(--radius-tokentweak);max-width:14rem;cursor:pointer;transition:border-color .15s ease}.tokenpanel-color-preset-select:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-palette-grid,.tokenpanel-color-palette-grid--secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.5rem,1fr));gap:var(--tokentweak-pad-sm)}.tokenpanel-color-base-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 11rem),1fr));gap:6px}.tokenpanel-color-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%}.tokenpanel-color-swatch-button{display:block;border:1px solid var(--tokentweak-color-muted);cursor:pointer;width:3.5rem;height:3.5rem;border-radius:var(--radius-tokentweak);background:none;padding:0;transition:border-color .15s ease}.tokenpanel-color-swatch-button:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-swatch-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-swatch-label-row{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.tokenpanel-color-swatch-label{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:.6875rem;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tooltip{position:fixed;z-index:9999;pointer-events:none;background:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:4px;padding:4px 8px;font-family:var(--tokentweak-font-mono);font-size:11px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;opacity:0;transform:translateY(2px);transition:opacity 90ms ease,transform 90ms ease}.tokenpanel-tooltip[data-show=true]{opacity:1;transform:translateY(0)}.tokenpanel-popover{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:12px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-selector{position:relative;width:100%;display:flex;align-items:center;gap:6px}.tokenpanel-palette-trigger{display:flex;align-items:center;gap:4px;flex:1;min-width:0;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding-inline:6px;padding-block:4px;font-size:.75rem;border-radius:var(--radius-tokentweak);cursor:pointer;transition:border-color .15s ease}.tokenpanel-palette-trigger:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-palette-trigger:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-trigger-label{flex:1;min-width:0;text-align:left;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-palette-trigger-color{flex-shrink:0;border:1px solid var(--tokentweak-color-muted);width:14px;height:14px;border-radius:2px}.tokenpanel-palette-trigger-value{flex-shrink:0;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);width:2.5em}.tokenpanel-palette-trigger-icon{color:var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-palette-options{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:10px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-options-extras{display:flex;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-option{display:flex;align-items:center;gap:6px;padding-inline:8px;padding-block:4px;border-radius:4px;font-size:1rem;background:none;border:none;cursor:pointer;transition:background-color .15s ease}.tokenpanel-palette-extra-option:hover{background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-palette-extra-option.is-selected{background-color:rgb(from var(--tokentweak-color-accent) r g b / .2)}.tokenpanel-palette-extra-color{width:1.75rem;height:1.75rem;border-radius:3px;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-label{color:var(--tokentweak-color-fg)}.tokenpanel-palette-options-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.tokenpanel-palette-option-button{width:3rem;height:3rem;border-radius:3px;border:1px solid var(--tokentweak-color-muted);cursor:pointer;padding:0;transition:box-shadow .15s ease}.tokenpanel-palette-option-button:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-palette-option-button.is-selected{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-row{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row--stacked{display:flex;flex-direction:column;gap:2px}.tokenpanel-row--column{display:flex;flex-direction:column;gap:4px}.tokenpanel-row-head{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row-label{color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);flex:1;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-row-input-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-row-number-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);text-align:right;font-size:.75rem;width:5rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-number-input:disabled{opacity:.6}.tokenpanel-row-number-input--invalid{border-color:#e05252;color:#e05252}.tokenpanel-row-unit{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:.75rem;width:2rem}.tokenpanel-row-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:.75rem;width:7rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-select:disabled{opacity:.6}.tokenpanel-row-text-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:.75rem;flex:1;min-width:0;border-radius:var(--radius-tokentweak)}.tokenpanel-row-text-input:disabled{opacity:.6}.tokenpanel-pill-toggle{display:flex;align-items:center;gap:var(--tokentweak-pad-xs);flex-shrink:0;cursor:pointer}.tokenpanel-pill-toggle-checkbox{accent-color:var(--tokentweak-color-accent)}.tokenpanel-pill-toggle-text{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:.75rem}[data-design-token-panel-modal]{margin-inline:auto;width:100%;max-width:46rem;max-height:80vh;overflow-y:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);padding:var(--tokentweak-pad-xl);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}[data-design-token-panel-modal]::backdrop{background-color:rgb(from var(--tokentweak-color-bg) r g b / .8)}[data-design-token-panel-modal] [class*=__header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tokentweak-pad-md);margin-bottom:var(--tokentweak-gap-sm)}[data-design-token-panel-modal] [class*=__title]{font-size:var(--tokentweak-text-subheading);font-weight:700;color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__hint]{font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-muted);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__section-heading]{font-size:var(--tokentweak-text-small);font-weight:700;color:var(--tokentweak-color-fg);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__list]:not([class*=__list-item]){overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__list-item]{font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__actions]{display:flex;align-items:center;gap:var(--tokentweak-pad-md);margin-top:var(--tokentweak-gap-md)}[data-design-token-panel-modal] [class*=__toggle]{display:inline-flex;align-items:center;gap:var(--tokentweak-pad-xs);font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-fg);cursor:pointer;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__textarea]{width:100%;min-height:12rem;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-small);resize:vertical;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__json]{overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);white-space:pre;font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__status]{font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__status--info]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__status--error]{color:var(--tokentweak-color-danger)}[data-design-token-panel-modal] [class*=__status--warning]{color:var(--tokentweak-color-warning)}[data-design-token-panel-modal] [class*=__status--success]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__applying]{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-muted);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small)}[data-design-token-panel-modal] [class*=__spinner]{display:inline-block;width:1rem;height:1rem;border:2px solid var(--tokentweak-color-muted);border-top-color:var(--tokentweak-color-fg);border-radius:50%;animation:design-token-panel-modal-spin .75s linear infinite}@keyframes design-token-panel-modal-spin{to{transform:rotate(360deg)}}[data-design-token-panel-modal] [class*=__revert-hint]{font-size:var(--tokentweak-text-small);font-style:italic;color:var(--tokentweak-color-muted);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-lg);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}[data-design-token-panel-modal] [class*=__button]:hover,[data-design-token-panel-modal] [class*=__button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__button]:disabled{cursor:not-allowed;opacity:.5}[data-design-token-panel-modal] [class*=__button--primary]{border-color:var(--tokentweak-color-accent);background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__button--primary]:hover,[data-design-token-panel-modal] [class*=__button--primary]:focus-visible{border-color:var(--tokentweak-color-accent-hover);background-color:var(--tokentweak-color-accent-hover);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__close-button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease}[data-design-token-panel-modal] [class*=__close-button]:hover,[data-design-token-panel-modal] [class*=__close-button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}.tokenpanel-tier-ref-selector{flex:1;min-width:0}select.tokenpanel-tier-ref-select{width:100%;background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding-inline:var(--tokentweak-pad-sm);padding-block:4px;font-family:var(--tokentweak-font-mono);font-size:.75rem;cursor:pointer}select.tokenpanel-tier-ref-select:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-row-label-sub{display:block;font-size:var(--tokentweak-text-micro, .6875rem);color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);line-height:1.2}.tokenpanel-tab-section [role=heading]{display:block}.tokenpanel-code{font-family:var(--tokentweak-font-mono);font-size:inherit;background:none;color:inherit;padding:0;border:none;border-radius:0;white-space:pre-wrap}[data-design-token-panel-modal] [class*=__button][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}[data-design-token-panel-modal] [role=button]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-action-link:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-close-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-tab-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-overlay{margin:0;padding:0;border:0;background:transparent;display:block}.tokenpanel-highlight-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:var(--tokentweak-color-muted);cursor:pointer;vertical-align:middle;border-radius:2px;transition:background-color .15s ease,color .15s ease}.tokenpanel-highlight-toggle:hover{color:var(--tokentweak-color-fg);background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-highlight-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-toggle.is-active{opacity:1}:where(.tokenpanel-shell) svg{fill:currentColor;pointer-events:none;display:inline-block;overflow:visible}:where(.tokenpanel-shell) .tokenpanel-highlight-toggle svg{fill:none;stroke:currentColor}.tokenpanel-highlight-settings-popover{width:370px;background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:6px;box-shadow:0 8px 32px #00000080}.tokenpanel-highlight-settings-header{padding:10px 16px;border-bottom:1px solid var(--tokentweak-color-muted);font-weight:600;font-size:.8125rem;color:var(--tokentweak-color-fg);display:flex;align-items:center;justify-content:space-between;gap:12px}.tokenpanel-highlight-settings-header-label{flex:1;min-width:0}.tokenpanel-highlight-settings-outline-control{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-highlight-settings-outline-input{width:44px;background:#222;border:1px solid var(--tokentweak-color-muted);border-radius:3px;color:var(--tokentweak-color-fg);font-size:12px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:right}.tokenpanel-highlight-settings-outline-px{color:var(--tokentweak-color-muted);font-size:12px;font-weight:400}.tokenpanel-highlight-settings-list{padding:4px 0;display:grid;grid-template-columns:1fr 1fr}.tokenpanel-highlight-settings-row{display:grid;grid-template-columns:22px 32px 1fr;gap:8px;align-items:center;padding:8px 12px}.tokenpanel-highlight-settings-row:hover{background:#ffffff08}.tokenpanel-highlight-settings-num{color:var(--tokentweak-color-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}.tokenpanel-highlight-settings-ring{width:28px;height:28px;border-radius:3px;background:transparent;box-sizing:border-box;cursor:pointer;flex-shrink:0}.tokenpanel-highlight-settings-ring:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-highlight-settings-name{font-family:var(--tokentweak-font-mono);font-size:12px;color:var(--tokentweak-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-highlight-settings-name.is-active{color:var(--tokentweak-color-fg)}.tokenpanel-highlight-settings-footer{padding:12px 16px;border-top:1px solid var(--tokentweak-color-muted);display:flex;justify-content:flex-end;gap:var(--tokentweak-pad-sm)}.tokenpanel-highlight-settings-reset-btn{padding:6px 12px;background:#333;border:1px solid var(--tokentweak-color-muted);border-radius:3px;cursor:pointer;font-size:12px;color:var(--tokentweak-color-fg);transition:background .15s ease}.tokenpanel-highlight-settings-reset-btn:hover{background:#404040}.tokenpanel-highlight-settings-reset-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:3px}.tokenpanel-gear-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-gear-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-gear-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-elpath-toggle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-elpath-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle.is-active{color:var(--tokentweak-color-accent)}:where(.tokenpanel-shell) .tokenpanel-elpath-toggle svg{fill:none;stroke:currentColor}html.tokenpanel-elpath-inspecting,html.tokenpanel-elpath-inspecting *{cursor:crosshair!important;-webkit-user-select:none!important;user-select:none!important}.tokenpanel-elpath-box{margin:0;padding:0;border:0;pointer-events:none;box-sizing:border-box;background:#6fa8dc40;outline:1px solid rgb(111 168 220 / .9);outline-offset:-1px;box-shadow:inset 0 0 0 1px #6fa8dce6}.tokenpanel-elpath-label{pointer-events:none;display:inline-flex;align-items:baseline;gap:8px;max-width:90vw;padding:2px 6px;border-radius:3px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #0006}.tokenpanel-elpath-label-name{color:var(--tokentweak-color-accent, #d69a66);font-weight:600;overflow:hidden;text-overflow:ellipsis}.tokenpanel-elpath-label-size{color:var(--tokentweak-color-muted, #888888);flex-shrink:0}.tokenpanel-elpath-toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:8px 14px;border-radius:6px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:12px;line-height:1.4;max-width:min(90vw,520px);box-shadow:0 4px 16px #00000073;border:1px solid rgb(255 255 255 / .08)}.tokenpanel-elpath-toast .tokenpanel-elpath-toast-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-elpath-toast svg{flex-shrink:0;fill:none;stroke:var(--tokentweak-color-success, #93bb77);pointer-events:none;display:inline-block;overflow:visible}.tokenpanel-elpath-toast.is-error svg{stroke:var(--tokentweak-color-danger, #da6871)}';
-function Il(e) {
+const xl = ':where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip,.tokenpanel-elpath-label,.tokenpanel-elpath-toast){--tokentweak-color-fg: #b8b8b8;--tokentweak-color-bg: #181818;--tokentweak-color-muted: #888888;--tokentweak-color-surface: #1c1c1c;--tokentweak-color-accent: #d69a66;--tokentweak-color-accent-hover: #a7c0e3;--tokentweak-color-code-bg: #383838;--tokentweak-color-code-fg: #e0e0e0;--tokentweak-color-success: #93bb77;--tokentweak-color-danger: #da6871;--tokentweak-color-warning: #dfbb77;--tokentweak-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--tokentweak-pad-2xs: .125rem;--tokentweak-pad-xs: .375rem;--tokentweak-pad-sm: .5rem;--tokentweak-pad-md: .75rem;--tokentweak-pad-lg: 1rem;--tokentweak-pad-xl: 1.5rem;--tokentweak-pad-2xl: 2rem;--tokentweak-gap-2xs: .4375rem;--tokentweak-gap-xs: .875rem;--tokentweak-gap-sm: 1.25rem;--tokentweak-gap-md: 1.5rem;--tokentweak-gap-lg: 1.75rem;--tokentweak-gap-xl: 2.5rem;--tokentweak-gap-2xl: 3.5rem;--tokentweak-text-micro: .75rem;--tokentweak-text-caption: .875rem;--tokentweak-text-small: 1rem;--tokentweak-text-body: 1.2rem;--tokentweak-text-subheading: 1.4rem;--tokentweak-text-heading: 3rem;--tokentweak-text-display: 3.75rem;--radius-tokentweak: .25rem}.tokenpanel-color-picker{position:fixed;width:320px;padding:var(--tokentweak-pad-md);background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);box-shadow:0 8px 24px #0006;display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs);z-index:70;color:var(--tokentweak-color-fg);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker[data-mode-shell=expanded]{width:520px;padding:var(--tokentweak-pad-lg);gap:var(--tokentweak-gap-xs)}.tokenpanel-color-picker-header{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-drag-handle{flex-shrink:0;cursor:grab;color:var(--tokentweak-color-muted);font-size:var(--tokentweak-text-caption);line-height:1;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-drag-handle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-drag-handle:active{cursor:grabbing}.tokenpanel-color-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption)}.tokenpanel-color-picker-mode-toggle{display:flex;align-items:center;gap:2px;background:var(--tokentweak-color-bg);border:1px solid var(--tokentweak-color-muted);border-radius:999px;padding:2px;flex-shrink:0}.tokenpanel-color-picker-mode-btn{border-radius:999px;padding-inline:var(--tokentweak-pad-xs);padding-block:var(--tokentweak-pad-2xs);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;white-space:nowrap}.tokenpanel-color-picker-mode-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn[aria-pressed=true]{background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-mode-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-expand-btn{flex-shrink:0;color:var(--tokentweak-color-muted);cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--tokentweak-pad-2xs);border-radius:var(--radius-tokentweak);transition:color .12s ease}.tokenpanel-color-picker-expand-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-expand-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-top-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-preview{position:relative;flex-shrink:0;width:3rem;height:3rem;border-radius:var(--radius-tokentweak);border:1px solid var(--tokentweak-color-muted);overflow:hidden}.tokenpanel-color-picker-preview-checkerboard{position:absolute;inset:0;background-image:repeating-conic-gradient(gray 0% 25%,silver 0% 50%);background-size:10px 10px}.tokenpanel-color-picker-preview-color{position:absolute;inset:0}.tokenpanel-color-picker-hex-input{flex:1;min-width:0;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-caption);background:var(--tokentweak-color-bg);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding:var(--tokentweak-pad-2xs) var(--tokentweak-pad-xs);transition:border-color .12s ease}.tokenpanel-color-picker-hex-input:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-hex-input:focus{border-color:var(--tokentweak-color-accent);outline:none}.tokenpanel-color-picker-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}.tokenpanel-color-picker-grid>[role=row]{display:contents}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-grid{grid-template-columns:repeat(12,1fr)}.tokenpanel-color-picker-grid-cell{position:relative;aspect-ratio:1;border-radius:var(--radius-tokentweak);cursor:pointer;transition:box-shadow .12s ease}.tokenpanel-color-picker-grid-cell:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-color-picker-grid-cell[aria-selected=true]{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-color-picker-grid-cell:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-picker-grid-cell[data-oog=true]:after{content:"";position:absolute;inset:1px;border:1px dashed oklch(98% 0 0 / .4);border-radius:var(--radius-tokentweak);pointer-events:none}.tokenpanel-color-picker-sliders{display:flex;flex-direction:column;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-row{display:flex;align-items:center;gap:var(--tokentweak-gap-2xs)}.tokenpanel-color-picker-slider-label{flex-shrink:0;width:1.25rem;font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);-webkit-user-select:none;user-select:none}.tokenpanel-color-picker-slider{flex:1;position:relative;height:18px;display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.tokenpanel-color-picker-slider:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:var(--radius-tokentweak)}.tokenpanel-color-picker-slider-track{width:100%;height:18px;border-radius:9px;overflow:hidden;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-color-picker-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:var(--tokentweak-color-fg);border:2px solid var(--tokentweak-color-bg);box-shadow:0 0 0 1px var(--tokentweak-color-muted);pointer-events:none}.tokenpanel-color-picker-slider-value{flex-shrink:0;width:3rem;text-align:right;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-fg)}.tokenpanel-color-picker-readout{display:none;font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-micro);color:var(--tokentweak-color-muted);padding-top:var(--tokentweak-pad-2xs);border-top:1px solid var(--tokentweak-color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tokenpanel-color-picker[data-mode-shell=expanded] .tokenpanel-color-picker-readout{display:block}.tokenpanel-shell{z-index:50;display:flex;flex-direction:column;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);border-radius:var(--radius-tokentweak);box-shadow:0 4px 24px #00000040}.tokenpanel-resize-handle{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;-webkit-user-select:none;user-select:none;background-image:repeating-linear-gradient(-45deg,transparent 0,transparent 2px,var(--tokentweak-color-muted) 2px,var(--tokentweak-color-muted) 3px);-webkit-mask-image:linear-gradient(135deg,transparent 50%,#000 50%);mask-image:linear-gradient(135deg,transparent 50%,#000 50%);border-bottom-right-radius:var(--radius-tokentweak);transition:opacity .15s ease;opacity:.7}.tokenpanel-resize-handle:hover,.tokenpanel-resize-handle:focus-visible{opacity:1}.tokenpanel-header{display:flex;align-items:center;gap:var(--tokentweak-pad-md);padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-xs);border-bottom:1px solid var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-title{color:var(--tokentweak-color-fg);font-weight:600;font-size:.875rem;flex-shrink:0}.tokenpanel-action-link{color:var(--tokentweak-color-accent);font-size:.75rem;background:none;border:none;padding:0;cursor:pointer;transition:color .15s ease}.tokenpanel-action-link:hover{color:var(--tokentweak-color-accent-hover)}.tokenpanel-spacer{flex:1}.tokenpanel-close-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-close-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-tabbar{display:flex;align-items:center;border-bottom:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-xl);flex-shrink:0;gap:var(--tokentweak-pad-md)}.tokenpanel-tabbar-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.tokenpanel-tab-button{border:none;background:none;padding-inline:var(--tokentweak-pad-md);padding-block:var(--tokentweak-gap-xs);font-size:.875rem;cursor:pointer;border-bottom:2px solid transparent;color:var(--tokentweak-color-muted);transition:color .15s ease,border-color .15s ease}.tokenpanel-tab-button:hover,.tokenpanel-tab-button:focus-visible{color:var(--tokentweak-color-fg);text-decoration:underline}.tokenpanel-tab-button.is-active{color:var(--tokentweak-color-fg);border-bottom-color:var(--tokentweak-color-accent);text-decoration:none}.tokenpanel-density{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);flex-shrink:0}.tokenpanel-density-label{color:var(--tokentweak-color-muted);font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none;cursor:pointer}.tokenpanel-density-slider{width:5rem;accent-color:var(--tokentweak-color-accent);cursor:pointer}.tokenpanel-body{flex:1;min-height:0;overflow-y:auto;padding-inline:var(--tokentweak-pad-xl);padding-block:var(--tokentweak-gap-sm)}.tokenpanel-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:12rem;padding-block:var(--tokentweak-gap-md);padding-inline:var(--tokentweak-pad-xl)}.tokenpanel-empty-state-text{color:var(--tokentweak-color-muted, #a8a8a8);font-size:.8125rem;line-height:1.5;max-width:32rem;margin:0}.tokenpanel-empty-state-text code{font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:.8125rem;color:var(--tokentweak-color-fg)}.tokenpanel-empty-state-link{color:var(--tokentweak-color-accent);text-decoration:underline;transition:color .15s ease}.tokenpanel-empty-state-link:hover,.tokenpanel-empty-state-link:focus-visible{color:var(--tokentweak-color-accent-hover)}.tokenpanel-tab-content{display:flex;flex-direction:column;gap:var(--tokentweak-gap-sm)}.tokenpanel-tab-actions{display:flex;align-items:center;gap:var(--tokentweak-pad-md)}.tokenpanel-tab-section{position:relative;flex-shrink:0;border:1px solid var(--tokentweak-color-muted);border-radius:.5rem;padding:18px 14px 14px}.tokenpanel-tab-section-heading{position:absolute;top:-.625rem;left:12px;background:var(--tokentweak-color-surface);padding:0 8px;margin:0;color:var(--tokentweak-color-fg);font-family:inherit;font-weight:600;font-size:.8125rem;line-height:1.25rem;text-transform:none;letter-spacing:normal}.tokenpanel-tab-section-heading--color{font-size:.875rem}.tokenpanel-tab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 18rem),1fr));gap:var(--tokentweak-gap-xs)}.tokenpanel-color-preset-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:2px;font-size:.75rem;border-radius:var(--radius-tokentweak);max-width:14rem;cursor:pointer;transition:border-color .15s ease}.tokenpanel-color-preset-select:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-palette-grid,.tokenpanel-color-palette-grid--secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(3.5rem,1fr));gap:var(--tokentweak-pad-sm)}.tokenpanel-color-base-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--tokenpanel-grid-min, 11rem),1fr));gap:6px}.tokenpanel-color-swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%}.tokenpanel-color-swatch-button{display:block;border:1px solid var(--tokentweak-color-muted);cursor:pointer;width:3.5rem;height:3.5rem;border-radius:var(--radius-tokentweak);background:none;padding:0;transition:border-color .15s ease}.tokenpanel-color-swatch-button:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-color-swatch-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-color-swatch-label-row{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}.tokenpanel-color-swatch-label{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:.6875rem;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-tooltip{position:fixed;z-index:9999;pointer-events:none;background:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:4px;padding:4px 8px;font-family:var(--tokentweak-font-mono);font-size:11px;line-height:1.3;white-space:nowrap;box-shadow:0 4px 12px #00000080;opacity:0;transform:translateY(2px);transition:opacity 90ms ease,transform 90ms ease}.tokenpanel-tooltip[data-show=true]{opacity:1;transform:translateY(0)}.tokenpanel-popover{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:12px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-selector{position:relative;width:100%;display:flex;align-items:center;gap:6px}.tokenpanel-palette-trigger{display:flex;align-items:center;gap:4px;flex:1;min-width:0;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding-inline:6px;padding-block:4px;font-size:.75rem;border-radius:var(--radius-tokentweak);cursor:pointer;transition:border-color .15s ease}.tokenpanel-palette-trigger:hover{border-color:var(--tokentweak-color-fg)}.tokenpanel-palette-trigger:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-palette-trigger-label{flex:1;min-width:0;text-align:left;color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-palette-trigger-color{flex-shrink:0;border:1px solid var(--tokentweak-color-muted);width:14px;height:14px;border-radius:2px}.tokenpanel-palette-trigger-value{flex-shrink:0;color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);width:2.5em}.tokenpanel-palette-trigger-icon{color:var(--tokentweak-color-muted);flex-shrink:0}.tokenpanel-palette-options{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);padding:10px;border-radius:var(--radius-tokentweak);box-shadow:0 4px 12px #0000004d}.tokenpanel-palette-options-extras{display:flex;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-option{display:flex;align-items:center;gap:6px;padding-inline:8px;padding-block:4px;border-radius:4px;font-size:1rem;background:none;border:none;cursor:pointer;transition:background-color .15s ease}.tokenpanel-palette-extra-option:hover{background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-palette-extra-option.is-selected{background-color:rgb(from var(--tokentweak-color-accent) r g b / .2)}.tokenpanel-palette-extra-color{width:1.75rem;height:1.75rem;border-radius:3px;border:1px solid var(--tokentweak-color-muted)}.tokenpanel-palette-extra-label{color:var(--tokentweak-color-fg)}.tokenpanel-palette-options-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.tokenpanel-palette-option-button{width:3rem;height:3rem;border-radius:3px;border:1px solid var(--tokentweak-color-muted);cursor:pointer;padding:0;transition:box-shadow .15s ease}.tokenpanel-palette-option-button:hover{box-shadow:0 0 0 2px var(--tokentweak-color-fg)}.tokenpanel-palette-option-button.is-selected{box-shadow:0 0 0 2px var(--tokentweak-color-accent)}.tokenpanel-row{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row--stacked{display:flex;flex-direction:column;gap:2px}.tokenpanel-row--column{display:flex;flex-direction:column;gap:4px}.tokenpanel-row-head{display:flex;align-items:center;gap:var(--tokentweak-pad-sm)}.tokenpanel-row-label{color:var(--tokentweak-color-fg);font-family:var(--tokentweak-font-mono);flex:1;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-row-input-group{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-row-number-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);text-align:right;font-size:.75rem;width:5rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-number-input:disabled{opacity:.6}.tokenpanel-row-number-input--invalid{border-color:#e05252;color:#e05252}.tokenpanel-row-unit{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);-webkit-user-select:none;user-select:none;font-size:.75rem;width:2rem}.tokenpanel-row-select{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:.75rem;width:7rem;border-radius:var(--radius-tokentweak)}.tokenpanel-row-select:disabled{opacity:.6}.tokenpanel-row-text-input{background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);padding-inline:6px;padding-block:2px;font-family:var(--tokentweak-font-mono);font-size:.75rem;flex:1;min-width:0;border-radius:var(--radius-tokentweak)}.tokenpanel-row-text-input:disabled{opacity:.6}.tokenpanel-pill-toggle{display:flex;align-items:center;gap:var(--tokentweak-pad-xs);flex-shrink:0;cursor:pointer}.tokenpanel-pill-toggle-checkbox{accent-color:var(--tokentweak-color-accent)}.tokenpanel-pill-toggle-text{color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);font-size:.75rem}[data-design-token-panel-modal]{margin-inline:auto;width:100%;max-width:46rem;max-height:80vh;overflow-y:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);padding:var(--tokentweak-pad-xl);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-user-select:text;user-select:text}[data-design-token-panel-modal]::backdrop{background-color:rgb(from var(--tokentweak-color-bg) r g b / .8)}[data-design-token-panel-modal] [class*=__header]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--tokentweak-pad-md);margin-bottom:var(--tokentweak-gap-sm)}[data-design-token-panel-modal] [class*=__title]{font-size:var(--tokentweak-text-subheading);font-weight:700;color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__hint]{font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-muted);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__section-heading]{font-size:var(--tokentweak-text-small);font-weight:700;color:var(--tokentweak-color-fg);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__list]:not([class*=__list-item]){overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__list-item]{font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__actions]{display:flex;align-items:center;gap:var(--tokentweak-pad-md);margin-top:var(--tokentweak-gap-md)}[data-design-token-panel-modal] [class*=__toggle]{display:inline-flex;align-items:center;gap:var(--tokentweak-pad-xs);font-size:var(--tokentweak-text-small);color:var(--tokentweak-color-fg);cursor:pointer;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__textarea]{width:100%;min-height:12rem;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-family:var(--tokentweak-font-mono);font-size:var(--tokentweak-text-small);resize:vertical;margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__json]{overflow-x:auto;border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-code-fg);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small);white-space:pre;font-family:var(--tokentweak-font-mono)}[data-design-token-panel-modal] [class*=__status]{font-size:var(--tokentweak-text-small);margin-bottom:var(--tokentweak-gap-xs)}[data-design-token-panel-modal] [class*=__status--info]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__status--error]{color:var(--tokentweak-color-danger)}[data-design-token-panel-modal] [class*=__status--warning]{color:var(--tokentweak-color-warning)}[data-design-token-panel-modal] [class*=__status--success]{color:var(--tokentweak-color-success)}[data-design-token-panel-modal] [class*=__applying]{display:flex;align-items:center;gap:var(--tokentweak-pad-sm);border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-code-bg);color:var(--tokentweak-color-muted);padding:var(--tokentweak-pad-sm);font-size:var(--tokentweak-text-small)}[data-design-token-panel-modal] [class*=__spinner]{display:inline-block;width:1rem;height:1rem;border:2px solid var(--tokentweak-color-muted);border-top-color:var(--tokentweak-color-fg);border-radius:50%;animation:design-token-panel-modal-spin .75s linear infinite}@keyframes design-token-panel-modal-spin{to{transform:rotate(360deg)}}[data-design-token-panel-modal] [class*=__revert-hint]{font-size:var(--tokentweak-text-small);font-style:italic;color:var(--tokentweak-color-muted);margin-top:var(--tokentweak-gap-sm);margin-bottom:var(--tokentweak-gap-2xs)}[data-design-token-panel-modal] [class*=__button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-lg);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}[data-design-token-panel-modal] [class*=__button]:hover,[data-design-token-panel-modal] [class*=__button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}[data-design-token-panel-modal] [class*=__button]:disabled{cursor:not-allowed;opacity:.5}[data-design-token-panel-modal] [class*=__button--primary]{border-color:var(--tokentweak-color-accent);background-color:var(--tokentweak-color-accent);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__button--primary]:hover,[data-design-token-panel-modal] [class*=__button--primary]:focus-visible{border-color:var(--tokentweak-color-accent-hover);background-color:var(--tokentweak-color-accent-hover);color:var(--tokentweak-color-bg)}[data-design-token-panel-modal] [class*=__close-button]{border:1px solid var(--tokentweak-color-muted);background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-muted);padding-inline:var(--tokentweak-pad-sm);padding-block:var(--tokentweak-gap-2xs);font-size:var(--tokentweak-text-small);cursor:pointer;transition:color .15s ease,border-color .15s ease}[data-design-token-panel-modal] [class*=__close-button]:hover,[data-design-token-panel-modal] [class*=__close-button]:focus-visible{color:var(--tokentweak-color-fg);border-color:var(--tokentweak-color-fg)}.tokenpanel-tier-ref-selector{flex:1;min-width:0}select.tokenpanel-tier-ref-select{width:100%;background-color:var(--tokentweak-color-surface);color:var(--tokentweak-color-fg);border:1px solid var(--tokentweak-color-muted);border-radius:var(--radius-tokentweak);padding-inline:var(--tokentweak-pad-sm);padding-block:4px;font-family:var(--tokentweak-font-mono);font-size:.75rem;cursor:pointer}select.tokenpanel-tier-ref-select:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-row-label-sub{display:block;font-size:var(--tokentweak-text-micro, .6875rem);color:var(--tokentweak-color-muted);font-family:var(--tokentweak-font-mono);line-height:1.2}.tokenpanel-tab-section [role=heading]{display:block}.tokenpanel-code{font-family:var(--tokentweak-font-mono);font-size:inherit;background:none;color:inherit;padding:0;border:none;border-radius:0;white-space:pre-wrap}[data-design-token-panel-modal] [class*=__button][aria-disabled=true]{cursor:not-allowed;opacity:.5;pointer-events:none}[data-design-token-panel-modal] [role=button]:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-action-link:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-close-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-tab-button:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-overlay{margin:0;padding:0;border:0;background:transparent;display:block}.tokenpanel-highlight-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;color:var(--tokentweak-color-muted);cursor:pointer;vertical-align:middle;border-radius:2px;transition:background-color .15s ease,color .15s ease}.tokenpanel-highlight-toggle:hover{color:var(--tokentweak-color-fg);background-color:rgb(from var(--tokentweak-color-fg) r g b / .1)}.tokenpanel-highlight-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-highlight-toggle.is-active{opacity:1}:where(.tokenpanel-shell) svg{fill:currentColor;pointer-events:none;display:inline-block;overflow:visible}:where(.tokenpanel-shell) .tokenpanel-highlight-toggle svg{fill:none;stroke:currentColor}.tokenpanel-highlight-settings-popover{width:370px;background:var(--tokentweak-color-surface);border:1px solid var(--tokentweak-color-muted);border-radius:6px;box-shadow:0 8px 32px #00000080}.tokenpanel-highlight-settings-header{padding:10px 16px;border-bottom:1px solid var(--tokentweak-color-muted);font-weight:600;font-size:.8125rem;color:var(--tokentweak-color-fg);display:flex;align-items:center;justify-content:space-between;gap:12px}.tokenpanel-highlight-settings-header-label{flex:1;min-width:0}.tokenpanel-highlight-settings-outline-control{display:flex;align-items:center;gap:4px;flex-shrink:0}.tokenpanel-highlight-settings-outline-input{width:44px;background:#222;border:1px solid var(--tokentweak-color-muted);border-radius:3px;color:var(--tokentweak-color-fg);font-size:12px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:right}.tokenpanel-highlight-settings-outline-px{color:var(--tokentweak-color-muted);font-size:12px;font-weight:400}.tokenpanel-highlight-settings-list{padding:4px 0;display:grid;grid-template-columns:1fr 1fr}.tokenpanel-highlight-settings-row{display:grid;grid-template-columns:22px 32px 1fr;gap:8px;align-items:center;padding:8px 12px}.tokenpanel-highlight-settings-row:hover{background:#ffffff08}.tokenpanel-highlight-settings-num{color:var(--tokentweak-color-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11px}.tokenpanel-highlight-settings-ring{width:28px;height:28px;border-radius:3px;background:transparent;box-sizing:border-box;cursor:pointer;flex-shrink:0}.tokenpanel-highlight-settings-ring:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px}.tokenpanel-highlight-settings-name{font-family:var(--tokentweak-font-mono);font-size:12px;color:var(--tokentweak-color-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-highlight-settings-name.is-active{color:var(--tokentweak-color-fg)}.tokenpanel-highlight-settings-footer{padding:12px 16px;border-top:1px solid var(--tokentweak-color-muted);display:flex;justify-content:flex-end;gap:var(--tokentweak-pad-sm)}.tokenpanel-highlight-settings-reset-btn{padding:6px 12px;background:#333;border:1px solid var(--tokentweak-color-muted);border-radius:3px;cursor:pointer;font-size:12px;color:var(--tokentweak-color-fg);transition:background .15s ease}.tokenpanel-highlight-settings-reset-btn:hover{background:#404040}.tokenpanel-highlight-settings-reset-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:3px}.tokenpanel-gear-btn{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-gear-btn:hover{color:var(--tokentweak-color-fg)}.tokenpanel-gear-btn:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle{color:var(--tokentweak-color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .15s ease;display:inline-flex;align-items:center;justify-content:center}.tokenpanel-elpath-toggle:hover{color:var(--tokentweak-color-fg)}.tokenpanel-elpath-toggle:focus-visible{outline:2px solid var(--tokentweak-color-accent);outline-offset:2px;border-radius:2px}.tokenpanel-elpath-toggle.is-active{color:var(--tokentweak-color-accent)}:where(.tokenpanel-shell) .tokenpanel-elpath-toggle svg{fill:none;stroke:currentColor}html.tokenpanel-elpath-inspecting,html.tokenpanel-elpath-inspecting *{cursor:crosshair!important;-webkit-user-select:none!important;user-select:none!important}.tokenpanel-elpath-box{margin:0;padding:0;border:0;pointer-events:none;box-sizing:border-box;background:#6fa8dc40;outline:1px solid rgb(111 168 220 / .9);outline-offset:-1px;box-shadow:inset 0 0 0 1px #6fa8dce6}.tokenpanel-elpath-label{pointer-events:none;display:inline-flex;align-items:baseline;gap:8px;max-width:90vw;padding:2px 6px;border-radius:3px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 3px #0006}.tokenpanel-elpath-label-name{color:var(--tokentweak-color-accent, #d69a66);font-weight:600;overflow:hidden;text-overflow:ellipsis}.tokenpanel-elpath-label-size{color:var(--tokentweak-color-muted, #888888);flex-shrink:0}.tokenpanel-elpath-toast{pointer-events:none;display:inline-flex;align-items:center;gap:8px;margin:12px auto 0;padding:8px 14px;border-radius:6px;background:var(--tokentweak-color-surface, #1c1c1c);color:var(--tokentweak-color-fg, #b8b8b8);font-family:var(--tokentweak-font-mono, Menlo, Monaco, Consolas, monospace);font-size:12px;line-height:1.4;max-width:min(90vw,520px);box-shadow:0 4px 16px #00000073;border:1px solid rgb(255 255 255 / .08)}.tokenpanel-elpath-toast .tokenpanel-elpath-toast-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tokenpanel-elpath-toast svg{flex-shrink:0;fill:none;stroke:var(--tokentweak-color-success, #93bb77);pointer-events:none;display:inline-block;overflow:visible}.tokenpanel-elpath-toast.is-error svg{stroke:var(--tokentweak-color-danger, #da6871)}';
+function Dl(e) {
   return e.kind === "length";
 }
-function zl(e) {
+function Vl(e) {
   return e.kind === "number";
 }
-function Rl(e) {
+function Bl(e) {
   return e.kind === "select";
 }
-function Ol(e) {
+function Hl(e) {
   return e.kind === "text";
 }
-function Dl(e) {
+function Fl(e) {
   return e.kind === "cursor";
 }
-function Bl(e) {
+function jl(e) {
   return e.kind === "content";
 }
-function Vl(e) {
+function Kl(e) {
   return e.kind === "mask-image";
 }
-function Hl(e) {
+function Wl(e) {
   return e.kind === "color";
 }
-function No(e) {
-  return nr(e);
+function $o(e) {
+  return rr(e);
 }
-function _o(e) {
+function Co(e) {
   return Rn(e);
 }
 const An = "toggle-color-tweak-panel";
-function kt(e) {
+function mt(e) {
   typeof window > "u" || window.dispatchEvent(new CustomEvent(On(e)));
 }
-function mt(e, t) {
+function bt(e, t) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(_o(e), t ? "1" : "0");
+      window.localStorage.setItem(Co(e), t ? "1" : "0");
     } catch {
     }
 }
-function $o(e) {
+function Eo(e) {
   if (typeof window > "u") return !1;
   try {
-    return window.localStorage.getItem(_o(e)) === "1";
+    return window.localStorage.getItem(Co(e)) === "1";
   } catch {
     return !1;
   }
 }
-function vl(e) {
+function yl(e) {
   if (typeof window > "u") return !1;
   try {
     const t = window.localStorage;
-    return t.getItem(Xo(e)) !== null || t.getItem(Yo(e)) !== null;
+    return t.getItem(qo(e)) !== null || t.getItem(Go(e)) !== null;
   } catch {
     return !1;
   }
 }
-function Co(e) {
+function So(e) {
   if (typeof window > "u") return !1;
   try {
     return window.localStorage.getItem(We(e)) === "1";
@@ -5776,7 +5827,7 @@ function Co(e) {
     return !1;
   }
 }
-function bt(e, t) {
+function vt(e, t) {
   if (!(typeof window > "u"))
     try {
       const n = We(e);
@@ -5785,75 +5836,75 @@ function bt(e, t) {
     }
 }
 function Oe(e) {
-  return typeof document > "u" ? null : document.getElementById(No(e));
+  return typeof document > "u" ? null : document.getElementById($o(e));
 }
 const Ln = "zudo-design-token-panel-styles";
-function wl() {
+function Nl() {
   if (typeof document > "u" || document.getElementById(Ln)) return;
   const e = document.createElement("style");
-  e.id = Ln, e.textContent = bl, document.head.appendChild(e);
+  e.id = Ln, e.textContent = xl, document.head.appendChild(e);
 }
-function vt(e) {
+function wt(e) {
   if (typeof document > "u") return !1;
   an(e);
-  const t = No(e);
+  const t = $o(e);
   if (document.getElementById(t)) return !1;
-  wl();
+  Nl();
   const n = document.createElement("div");
-  return n.id = t, document.body.appendChild(n), Kt(/* @__PURE__ */ s(ml, { instanceConfig: e }), n), !0;
+  return n.id = t, document.body.appendChild(n), Kt(/* @__PURE__ */ s(wl, { instanceConfig: e }), n), !0;
 }
-function xl(e) {
+function _l(e) {
   const t = Oe(e);
   t && (Kt(null, t), t.remove());
 }
-function Fl() {
-  return q();
+function Xl() {
+  return Y();
 }
 function nn(e) {
   if (typeof window > "u") return;
   const t = !Oe(e);
-  bt(e, !0), vt(e), mt(e, !0), !t && kt(e);
+  vt(e, !0), wt(e), bt(e, !0), !t && mt(e);
 }
 function on(e) {
   if (typeof window > "u") return;
   const t = !Oe(e);
-  bt(e, !1), vt(e), mt(e, !1), !t && kt(e);
+  vt(e, !1), wt(e), bt(e, !1), !t && mt(e);
 }
-function Eo(e) {
+function To(e) {
   if (typeof window > "u") return;
-  const t = !Co(e), n = !Oe(e);
-  bt(e, t), vt(e), mt(e, t), !n && kt(e);
+  const t = !So(e), n = !Oe(e);
+  vt(e, t), wt(e), bt(e, t), !n && mt(e);
 }
-function jl() {
-  nn(q());
+function Yl() {
+  nn(Y());
 }
-function Kl() {
-  on(q());
+function ql() {
+  on(Y());
 }
-function Wl() {
-  Eo(q());
+function Gl() {
+  To(Y());
 }
-function So() {
+function Mo() {
   if (!(typeof window > "u"))
     try {
       const e = zn();
-      e && it(e);
+      e && lt(e);
     } catch {
     }
 }
 function Ye() {
-  const e = q(), t = Oe(e);
+  const e = Y(), t = Oe(e);
   if (!t) return;
-  const n = $o(e);
-  Kt(null, t), t.remove(), n && mt(e, !0);
+  const n = Eo(e);
+  Kt(null, t), t.remove(), n && bt(e, !0);
 }
 function ze() {
-  const e = q();
-  So(), $o(e) ? nn(e) : vl(e) && on(e);
+  const e = Y();
+  Mo(), Eo(e) ? nn(e) : yl(e) && on(e);
 }
-function yl(e) {
-  const t = !Oe(e), n = t ? !0 : !Co(e);
-  bt(e, n), vt(e), !t && kt(e);
+function $l(e) {
+  const t = !Oe(e), n = t ? !0 : !So(e);
+  vt(e, n), wt(e), !t && mt(e);
 }
 function rn() {
   const e = window;
@@ -5861,16 +5912,28 @@ function rn() {
   const t = /* @__PURE__ */ new Map();
   return e.__zudoDesignTokenPanelInstanceBindings = t, t;
 }
+function Cl(e, t, n) {
+  const o = Dn(e);
+  if (o) return o;
+  if (t) {
+    const r = Y();
+    if (r.storagePrefix !== e) return r;
+  }
+  return n;
+}
 function an(e) {
   if (typeof window > "u") return;
   const t = rn();
   if (t.has(e.storagePrefix)) return;
-  const n = er(e), o = () => yl(e);
-  window.addEventListener(n, o);
-  const r = [() => window.removeEventListener(n, o)];
-  n === tr && (window.addEventListener(An, o), r.push(() => window.removeEventListener(An, o))), t.set(e.storagePrefix, { cleanups: r });
+  const n = e.storagePrefix, o = nr(e), r = o === or, a = (l) => {
+    const c = Cl(n, r, e), d = l, u = d.__zdtpToggledPrefixes ?? /* @__PURE__ */ new Set();
+    u.has(c.storagePrefix) || (u.add(c.storagePrefix), d.__zdtpToggledPrefixes = u, $l(c));
+  };
+  window.addEventListener(o, a);
+  const i = [() => window.removeEventListener(o, a)];
+  r && (window.addEventListener(An, a), i.push(() => window.removeEventListener(An, a))), t.set(n, { cleanups: i });
 }
-function Mo(e) {
+function Ao(e) {
   if (typeof window > "u") return;
   const t = rn(), n = t.get(e);
   if (n) {
@@ -5882,19 +5945,19 @@ function Mo(e) {
     t.delete(e);
   }
 }
-function Xl() {
+function Ul() {
   if (typeof window > "u") return;
   const e = rn();
   for (const t of [...e.keys()])
-    Mo(t);
+    Ao(t);
 }
 function Fe(e) {
-  const t = or(e);
+  const t = Dn(e);
   if (t) return t;
-  const n = q();
+  const n = Y();
   return n.storagePrefix === e ? n : { ...n, storagePrefix: e };
 }
-Zo({
+er({
   // Fires once per `configurePanel` (every instance, incl. the 2nd+). Bind the
   // instance's toggle-event channel now so a host-dispatched
   // `toggle-${storagePrefix}` window event works immediately, before any
@@ -5902,19 +5965,19 @@ Zo({
   configured: (e) => an(Fe(e)),
   open: (e) => nn(Fe(e)),
   close: (e) => on(Fe(e)),
-  toggle: (e) => Eo(Fe(e)),
+  toggle: (e) => To(Fe(e)),
   destroy: (e) => {
     const t = Fe(e);
-    Mo(e), xl(t);
+    Ao(e), _l(t);
   }
 });
-function To() {
+function Lo() {
   const e = window;
   if (e.__zudoDesignTokenPanelLifecycle) return e.__zudoDesignTokenPanelLifecycle;
   const t = { bound: !1, cleanups: [], adapter: null };
   return e.__zudoDesignTokenPanelLifecycle = t, t;
 }
-function Nl(e) {
+function El(e) {
   const t = e.cleanups;
   e.cleanups = [];
   for (const n of t)
@@ -5923,13 +5986,13 @@ function Nl(e) {
     } catch {
     }
 }
-function Ao(e) {
+function Po(e) {
   typeof document > "u" || (document.addEventListener("astro:before-swap", Ye), document.addEventListener("astro:page-load", ze), e.cleanups.push(
     () => document.removeEventListener("astro:before-swap", Ye),
     () => document.removeEventListener("astro:page-load", ze)
   ));
 }
-function _l(e, t) {
+function Sl(e, t) {
   if (!(typeof document > "u") && (t.onBeforeSwap ? e.cleanups.push(t.onBeforeSwap(Ye)) : (document.addEventListener("astro:before-swap", Ye), e.cleanups.push(
     () => document.removeEventListener("astro:before-swap", Ye)
   )), t.onPageLoad ? e.cleanups.push(t.onPageLoad(ze)) : (document.addEventListener("astro:page-load", ze), e.cleanups.push(
@@ -5944,36 +6007,36 @@ function _l(e, t) {
     );
   }
 }
-function Yl(e) {
+function Jl(e) {
   if (typeof window > "u") return;
-  const t = To();
-  Nl(t), t.adapter = e, e ? _l(t, e) : Ao(t);
+  const t = Lo();
+  El(t), t.adapter = e, e ? Sl(t, e) : Po(t);
 }
-const $l = () => {
-  So(), ze();
+const Tl = () => {
+  Mo(), ze();
 };
 if (typeof window < "u") {
-  const e = To();
-  an(q()), e.bound || (e.bound = !0, Ao(e), Qo($l));
+  const e = Lo();
+  an(Y()), e.bound || (e.bound = !0, Po(e), tr(Tl));
 }
 export {
-  Ul as ZDTP_LEGACY_TYPOGRAPHY_RENAME_MAP,
-  Fl as __panelConfigForTest,
-  Xl as __resetInstanceBindingsForTests,
-  Zl as configurePanel,
-  Nt as emptyOverrides,
-  Kl as hideDesignTokenPanel,
-  Hl as isColorKind,
-  Bl as isContentKind,
-  Dl as isCursorKind,
-  Il as isLengthKind,
-  Vl as isMaskImageKind,
-  zl as isNumberKind,
-  Rl as isSelectKind,
-  Ol as isTextKind,
-  So as reapplyPersistedOverrides,
-  Yl as setLifecycleAdapter,
-  Ql as setPanelColorPresets,
-  jl as showDesignTokenPanel,
-  Wl as toggleDesignPanel
+  es as ZDTP_LEGACY_TYPOGRAPHY_RENAME_MAP,
+  Xl as __panelConfigForTest,
+  Ul as __resetInstanceBindingsForTests,
+  ns as configurePanel,
+  _t as emptyOverrides,
+  ql as hideDesignTokenPanel,
+  Wl as isColorKind,
+  jl as isContentKind,
+  Fl as isCursorKind,
+  Dl as isLengthKind,
+  Kl as isMaskImageKind,
+  Vl as isNumberKind,
+  Bl as isSelectKind,
+  Hl as isTextKind,
+  Mo as reapplyPersistedOverrides,
+  Jl as setLifecycleAdapter,
+  os as setPanelColorPresets,
+  Yl as showDesignTokenPanel,
+  Gl as toggleDesignPanel
 };