@takazudo/zdtp 0.3.1 → 0.3.2

package/dist/index.js

@@ -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 K, useRef as B, useMemo as Z, useEffect as X, useId as ht, useCallback as R, useLayoutEffect as Po, useContext as zo, createPortal as Wt, memo as Ge } from "preact/compat";
-import { b as ge, i as In, s as Ro, r as Ue, e as Oo, c as Do, d as lt, f as Pn, D as ln, h as Vo, j as Bo, k as We, m as Ho, n as Fo, o as jo, p as Ko, l as zn, q as sn, t as cn, u as Rt, v as Wo, w as je, x as Xo, y as yt, z as dn, A as Nt, B as un, C as _t, E as Yo, a as qo } from "./tweak-state-DMwBHPow.js";
-import { Z as Ql } from "./tweak-state-DMwBHPow.js";
-import { g as q, k as ve, n as Go, o as I, p as Uo, r as Jo, q as Zo, t as pn, a as Rn, u as On, v as Qo, w as er, x as tr, D as nr, y as or, z as rr } from "./panel-config-BOyB8Egg.js";
-import { c as ts, s as ns } from "./panel-config-BOyB8Egg.js";
+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 Y, useRef as de, useEffect as ue, useState as $e, useMemo as st } from "preact/hooks";
-function xe(e, t = q()) {
+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,7 +17,7 @@ function xe(e, t = q()) {
       o.push(a);
   return o;
 }
-const Dn = /* @__PURE__ */ new Set([
+const Vn = /* @__PURE__ */ new Set([
   "color",
   "color-secondary",
   "spacing",
@@ -41,20 +41,20 @@ function sr(e, t) {
   return n;
 }
 const at = "zudo-design-tokens/v2", $t = "zudo-design-tokens/v1";
-function Vn() {
+function Bn() {
   return {};
 }
-function cr(e = q()) {
+function cr(e = Y()) {
   return e.schemaId;
 }
-class Ie extends Error {
+class Pe extends Error {
   reason;
   actualSchema;
   constructor(t, n, o) {
-    super(n), this.name = "DesignTokenSchemaError", this.reason = t, this.actualSchema = o, Object.setPrototypeOf(this, Ie.prototype);
+    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: at,
     exportedAt: o.toISOString()
@@ -67,7 +67,7 @@ function Bn(e, t = {}, n = q()) {
   const d = Je(xe("size", n), e.size, t);
   d && (a.size = d);
   for (const u of n.tabs) {
-    if (Dn.has(u.id)) continue;
+    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);
   }
@@ -110,12 +110,12 @@ function Je(e, t, n) {
     }
   return a ? { raw: r } : void 0;
 }
-function ur(e, t = {}, n = q()) {
+function ur(e, t = {}, n = Y()) {
   if (e === null || typeof e != "object" || Array.isArray(e))
-    throw new Ie("not-object", "Input is not a JSON object.");
+    throw new Pe("not-object", "Input is not a JSON object.");
   const o = e, r = o.$schema;
   if (r === void 0)
-    throw new Ie(
+    throw new Pe(
       "schema-missing",
       `Missing "$schema" key. Expected "${at}" or "${$t}".`
     );
@@ -123,17 +123,17 @@ function ur(e, t = {}, n = q()) {
     return pr(o, t, n);
   if (r === $t)
     return hr(o, t, n);
-  throw new Ie(
+  throw new Pe(
     "schema-mismatch",
     `Unsupported "$schema" value: ${JSON.stringify(r)}. Expected "${at}" or "${$t}".`,
     r
   );
 }
 function pr(e, t, n) {
-  const o = [], r = [], a = t.colorDefaults ?? Hn(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);
+  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 (Dn.has(w.id)) continue;
+    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 = {};
@@ -198,7 +198,7 @@ function fr(e, t, n, o) {
   };
 }
 function Ct(e, t, n, o, r) {
-  if (!e || typeof e != "object") return Vn();
+  if (!e || typeof e != "object") return Bn();
   const a = /* @__PURE__ */ new Map();
   for (const l of t)
     l.readonly || a.set(l.cssVar, l);
@@ -218,7 +218,7 @@ function Ct(e, t, n, o, r) {
   return i;
 }
 function hr(e, t, n) {
-  const o = [], r = [], a = t.colorDefaults ?? Hn(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);
+  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,
@@ -266,7 +266,7 @@ function gr(e, t, n) {
   };
 }
 function Et(e, t, n, o, r) {
-  if (!e || typeof e != "object") return Vn();
+  if (!e || typeof e != "object") return Bn();
   const a = /* @__PURE__ */ new Map();
   for (const l of t)
     l.readonly || a.set(l.cssVar, l);
@@ -288,7 +288,7 @@ function Et(e, t, n, o, r) {
 function Ve(e, t) {
   return typeof e == "number" && Number.isFinite(e) ? e : t;
 }
-function Hn(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,
@@ -304,11 +304,11 @@ function Hn(e = q()) {
 function kr(e, t) {
   if (t) return t;
   const n = Object.values(ar)[0];
-  return n ? In(n) : e;
+  return n ? Pn(n) : e;
 }
 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 ?? q(), m = Go(p), h = Z(() => {
-    const g = kr(t.color, n), y = Bn(
+  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,
@@ -366,17 +366,17 @@ function mr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
       ref: c,
       onClick: v,
       "aria-labelledby": N,
-      className: `${I(p, "")} ${I(p, "--export")}`,
+      className: `${P(p, "")} ${P(p, "--export")}`,
       "data-design-token-panel-modal": "",
       "data-design-token-panel-modal-variant": "export",
       children: [
-        /* @__PURE__ */ s("div", { id: N, role: "heading", "aria-level": 2, className: I(p, "__title"), children: "Export Design Tokens" }),
-        /* @__PURE__ */ k("div", { className: I(p, "__hint"), children: [
+        /* @__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 }),
           " to feed this blob back into the panel (or hand to an AI assistant)."
         ] }),
-        /* @__PURE__ */ k("label", { className: I(p, "__toggle"), children: [
+        /* @__PURE__ */ k("label", { className: P(p, "__toggle"), children: [
           /* @__PURE__ */ s(
             "input",
             {
@@ -387,8 +387,8 @@ function mr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
           ),
           "Show defaults too"
         ] }),
-        /* @__PURE__ */ s("div", { role: "none", className: I(p, "__json"), children: h }),
-        /* @__PURE__ */ k("div", { className: I(p, "__actions"), children: [
+        /* @__PURE__ */ s("div", { role: "none", className: P(p, "__json"), children: h }),
+        /* @__PURE__ */ k("div", { className: P(p, "__actions"), children: [
           /* @__PURE__ */ s(
             "div",
             {
@@ -399,7 +399,7 @@ function mr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
               onKeyDown: (g) => {
                 (g.key === "Enter" || g.key === " ") && (g.preventDefault(), C());
               },
-              className: `${I(p, "__button")} ${I(p, "__button--primary")}`,
+              className: `${P(p, "__button")} ${P(p, "__button--primary")}`,
               children: r
             }
           ),
@@ -412,7 +412,7 @@ function mr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
               onKeyDown: (g) => {
                 (g.key === "Enter" || g.key === " ") && (g.preventDefault(), c.current?.close());
               },
-              className: I(p, "__button"),
+              className: P(p, "__button"),
               children: "Close"
             }
           )
@@ -422,7 +422,7 @@ function mr({ onClose: e, state: t, colorDefaults: n, instanceConfig: o }) {
   );
 }
 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 ?? q(), p = cr(u);
+  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)
@@ -477,7 +477,7 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
         console.groupEnd();
       }
       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 = Uo(g.color, n);
+      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 ${y.length} token${y.length === 1 ? "" : "s"} in the payload were unknown. See console for the list.`
@@ -486,7 +486,7 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
         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 Ie) {
+      if (g instanceof Pe) {
         g.reason === "schema-mismatch" ? l({
           kind: "error",
           text: `Schema mismatch: this panel expects "${p}".`
@@ -507,12 +507,12 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
       ref: c,
       onClick: m,
       "aria-labelledby": C,
-      className: `${I(u, "")} ${I(u, "--import")}`,
+      className: `${P(u, "")} ${P(u, "--import")}`,
       "data-design-token-panel-modal": "",
       "data-design-token-panel-modal-variant": "import",
       children: [
-        /* @__PURE__ */ s("div", { id: C, role: "heading", "aria-level": 2, className: I(u, "__title"), children: "Load Design Tokens" }),
-        /* @__PURE__ */ k("div", { className: I(u, "__hint"), children: [
+        /* @__PURE__ */ s("div", { id: C, role: "heading", "aria-level": 2, className: P(u, "__title"), children: "Load Design Tokens" }),
+        /* @__PURE__ */ k("div", { className: P(u, "__hint"), children: [
           "Paste a ",
           /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: p }),
           " JSON blob. Unknown tokens are ignored; schema mismatch aborts the load."
@@ -524,7 +524,7 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
             value: r,
             onChange: (b) => a(b.currentTarget.value),
             spellcheck: !1,
-            className: I(u, "__textarea"),
+            className: P(u, "__textarea"),
             placeholder: `{ "$schema": "${p}", ... }`
           }
         ),
@@ -532,11 +532,11 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
           "div",
           {
             role: i.kind === "error" ? "alert" : "status",
-            className: `${I(u, "__status")} ${I(u, `__status--${i.kind}`)}`,
+            className: `${P(u, "__status")} ${P(u, `__status--${i.kind}`)}`,
             children: i.text
           }
         ),
-        /* @__PURE__ */ k("div", { className: I(u, "__actions"), children: [
+        /* @__PURE__ */ k("div", { className: P(u, "__actions"), children: [
           /* @__PURE__ */ s(
             "div",
             {
@@ -546,7 +546,7 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
               onKeyDown: (b) => {
                 (b.key === "Enter" || b.key === " ") && (b.preventDefault(), h());
               },
-              className: `${I(u, "__button")} ${I(u, "__button--primary")}`,
+              className: `${P(u, "__button")} ${P(u, "__button--primary")}`,
               children: "Load"
             }
           ),
@@ -559,7 +559,7 @@ function br({ onClose: e, onLoad: t, colorDefaults: n, instanceConfig: o }) {
               onKeyDown: (b) => {
                 (b.key === "Enter" || b.key === " ") && (b.preventDefault(), c.current?.close());
               },
-              className: I(u, "__button"),
+              className: P(u, "__button"),
               children: "Close"
             }
           )
@@ -568,7 +568,7 @@ function br({ 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];
@@ -583,7 +583,7 @@ function fn(e, t, n = ge(), o = q().tabs) {
     if (!(t === void 0 || u !== p)) continue;
     const h = wr(u, a);
     if (h === null) continue;
-    const v = Ro(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)})`;
@@ -617,7 +617,7 @@ function vr(e, t, n) {
       if (!(typeof i != "string" || i.length === 0))
         try {
           const l = Ue(e, r.id, a.id, o);
-          n[a.cssVar] = Oo(l);
+          n[a.cssVar] = Do(l);
         } catch {
         }
     }
@@ -627,7 +627,7 @@ function wr(e, t) {
 }
 const xr = 2e3, St = { kind: "preview" };
 function yr(e, t, n) {
-  return JSON.stringify(Bn(e, { colorDefaults: t }, n), null, 2);
+  return JSON.stringify(Hn(e, { colorDefaults: t }, n), null, 2);
 }
 function Nr(e) {
   if (Array.isArray(e.updated)) return e.updated;
@@ -644,28 +644,28 @@ function Nr(e) {
 }
 function _r(e) {
   return {
-    dialog: `${I(e, "")} ${I(e, "--apply")}`,
-    header: I(e, "__header"),
-    title: I(e, "__title"),
-    closeButton: I(e, "__close-button"),
-    hint: I(e, "__hint"),
-    sectionHeading: I(e, "__section-heading"),
-    list: I(e, "__list"),
-    listItem: I(e, "__list-item"),
-    actions: I(e, "__actions"),
-    primaryButton: `${I(e, "__button")} ${I(e, "__button--primary")}`,
-    neutralButton: I(e, "__button"),
-    statusWarning: `${I(e, "__status")} ${I(e, "__status--warning")}`,
-    statusSuccess: `${I(e, "__status")} ${I(e, "__status--success")}`,
-    statusError: `${I(e, "__status")} ${I(e, "__status--error")}`,
-    applying: I(e, "__applying"),
-    spinner: I(e, "__spinner"),
-    revertHint: I(e, "__revert-hint"),
-    jsonBlock: I(e, "__json")
+    dialog: `${P(e, "")} ${P(e, "--apply")}`,
+    header: P(e, "__header"),
+    title: P(e, "__title"),
+    closeButton: P(e, "__close-button"),
+    hint: P(e, "__hint"),
+    sectionHeading: P(e, "__section-heading"),
+    list: P(e, "__list"),
+    listItem: P(e, "__list-item"),
+    actions: P(e, "__actions"),
+    primaryButton: `${P(e, "__button")} ${P(e, "__button--primary")}`,
+    neutralButton: P(e, "__button"),
+    statusWarning: `${P(e, "__status")} ${P(e, "__status--warning")}`,
+    statusSuccess: `${P(e, "__status")} ${P(e, "__status--success")}`,
+    statusError: `${P(e, "__status")} ${P(e, "__status--error")}`,
+    applying: P(e, "__applying"),
+    spinner: P(e, "__spinner"),
+    revertHint: P(e, "__revert-hint"),
+    jsonBlock: P(e, "__json")
   };
 }
 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 ?? q(), 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");
+  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;
@@ -684,14 +684,14 @@ function $r(e) {
     return () => window.clearTimeout(A);
   }, [C]);
   const N = Z(() => {
-    const A = ge(d), H = fn(t, r, A, d.tabs), ee = Jo(d), be = ee && t.secondary ? fn(
+    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 { ...H, ...be };
-  }, [t, r, d]), g = Z(() => Zo(d), [d]), { groups: y, rejected: w, rejectedReasons: _ } = Z(
+  }, [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;
@@ -714,13 +714,13 @@ function $r(e) {
       if (!H.ok) {
         let be = "";
         try {
-          const P = await H.text();
-          if (P)
+          const I = await H.text();
+          if (I)
             try {
-              const re = JSON.parse(P);
-              be = re.error ?? re.message ?? P;
+              const re = JSON.parse(I);
+              be = re.error ?? re.message ?? I;
             } catch {
-              be = P;
+              be = I;
             }
         } catch {
         }
@@ -1082,7 +1082,7 @@ 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 Ir(e) {
+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;
@@ -1091,7 +1091,7 @@ function Ir(e) {
   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 Pr(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;
@@ -1101,7 +1101,7 @@ function Pr(e, t, n, o) {
   const v = Math.round(o / 100 * 255).toString(16).padStart(2, "0");
   return `${h}${v}`;
 }
-const Fn = (e, t) => {
+const jn = (e, t) => {
   if (typeof e == "number") {
     if (t === 3)
       return {
@@ -1285,9 +1285,9 @@ const Fn = (e, t) => {
   whitesmoke: 16119285,
   yellow: 16776960,
   yellowgreen: 10145074
-}, Rr = (e) => Fn(zr[e.toLowerCase()], 6), Or = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, Dr = (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(Or)) ? Fn(parseInt(t[1], 16), t[1].length) : void 0;
+  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(
@@ -1301,7 +1301,7 @@ const Fn = (e, t) => {
   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;
-}, ct = (e, t) => e === void 0 ? void 0 : typeof e != "object" ? Xn(e) : e.mode !== void 0 ? e : t ? { ...e, mode: t } : void 0, ye = (e = "rgb") => (t) => (t = ct(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
@@ -1324,7 +1324,7 @@ const Fn = (e, t) => {
       )
     )
   )
-) : void 0, we = {}, jn = {}, dt = [], Kn = {}, jr = (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) => {
@@ -1335,13 +1335,13 @@ const Fn = (e, t) => {
   typeof e.interpolate[t] == "function" && (e.interpolate[t] = {
     use: e.interpolate[t]
   }), e.interpolate[t].fixup || (e.interpolate[t].fixup = jr);
-}), jn[e.mode] = e, (e.parse || []).forEach((t) => {
+}), Kn[e.mode] = e, (e.parse || []).forEach((t) => {
   Kr(t, e.mode);
-}), ye(e.mode)), gt = (e) => jn[e], Kr = (e, t) => {
+}), 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");
-    Kn[e] = 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",
@@ -1478,10 +1478,10 @@ function Gr(e) {
   let t = e[e._i++];
   if (!t || t.type !== M.Function || t.value !== "color" || (t = e[e._i++], t.type !== M.Ident))
     return;
-  const n = Kn[t.value];
+  const n = Wn[t.value];
   if (!n)
     return;
-  const o = { mode: n }, r = Wn(e, !1);
+  const o = { mode: n }, r = Xn(e, !1);
   if (!r)
     return;
   const a = gt(n).channels;
@@ -1489,7 +1489,7 @@ function Gr(e) {
     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 Wn(e, t) {
+function Xn(e, t) {
   const n = [];
   let o;
   for (; e._i < e.length; ) {
@@ -1518,11 +1518,11 @@ function Ur(e, t) {
   let n = e[e._i++];
   if (!n || n.type !== M.Function)
     return;
-  let o = Wn(e, t);
+  let o = Xn(e, t);
   if (o)
     return o.unshift(n.value), o;
 }
-const Xn = (e) => {
+const Yn = (e) => {
   if (typeof e != "string")
     return;
   const t = qr(e), n = t ? Ur(t, !0) : void 0;
@@ -1585,7 +1585,7 @@ const Zr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
 }, 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);
-}, Yn = ({ r: e, g: t, b: n, alpha: o }) => {
+}, qn = ({ r: e, g: t, b: n, alpha: o }) => {
   let r = {
     mode: "lrgb",
     r: Mt(e),
@@ -1596,7 +1596,7 @@ const Zr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
 }, 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;
-}, qn = ({ 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),
@@ -1609,7 +1609,7 @@ const Zr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     return n;
   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), []), Gn = (e) => oa(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), ra = (e, t) => {
+}).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 = Me(e.h), o = Me(t.h), r = Math.sin((o - n + 360) / 2 * Math.PI / 180);
@@ -1619,7 +1619,7 @@ const Zr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     return 0;
   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;
-}, Un = (e) => {
+}, Jn = (e) => {
   let t = e.reduce(
     (o, r) => {
       if (r !== void 0) {
@@ -1644,7 +1644,7 @@ const Zr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     b: t ? t * Math.sin(n / 180 * Math.PI) : 0
   };
   return o !== void 0 && (a.alpha = o), a;
-}, Pe = {
+}, Ie = {
   X: 0.3457 / 0.3585,
   Y: 1,
   Z: (1 - 0.3457 - 0.3585) / 0.3585
@@ -1747,7 +1747,7 @@ const pa = {
   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: Gn },
+    h: { use: he, fixup: Un },
     s: he,
     l: he,
     alpha: { use: he, fixup: Gt }
@@ -1756,38 +1756,38 @@ const pa = {
     h: ra
   },
   average: {
-    h: Un
+    h: Jn
   }
-}, Jn = Math.pow(29, 3) / Math.pow(3, 3), Zn = Math.pow(6, 3) / Math.pow(29, 3);
-let Lt = (e) => Math.pow(e, 3) > Zn ? Math.pow(e, 3) : (116 * e - 16) / Jn;
+}, 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",
-    x: Lt(a) * Pe.X,
-    y: Lt(r) * Pe.Y,
-    z: Lt(i) * Pe.Z
+    x: Lt(a) * Ie.X,
+    y: Lt(r) * Ie.Y,
+    z: Lt(i) * Ie.Z
   };
   return o !== void 0 && (l.alpha = o), l;
 }, 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 = qn({
+  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;
 }, ga = (e) => ha(fa(e)), ka = (e) => {
-  let { r: t, g: n, b: o, alpha: r } = Yn(e), a = {
+  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;
-}, It = (e) => e > Zn ? Math.cbrt(e) : (Jn * e + 16) / 116, ma = ({ 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 = It(e / Pe.X), a = It(t / Pe.Y), i = It(n / Pe.Z), l = {
+  let r = Pt(e / Ie.X), a = Pt(t / Ie.Y), i = Pt(n / Ie.Z), l = {
     mode: "lab",
     l: 116 * a - 16,
     a: 500 * (r - a),
@@ -1842,7 +1842,7 @@ const wa = {
   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: Gn },
+    h: { use: he, fixup: Un },
     c: he,
     l: he,
     alpha: { use: he, fixup: Gt }
@@ -1851,7 +1851,7 @@ const wa = {
     h: aa
   },
   average: {
-    h: Un
+    h: Jn
   }
 }, xa = ({ r: e, g: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
@@ -1869,7 +1869,7 @@ const wa = {
   };
   return o !== void 0 && (l.alpha = o), l;
 }, ya = (e) => {
-  let t = xa(Yn(e));
+  let t = xa(qn(e));
   return e.r === e.b && e.b === e.g && (t.a = t.b = 0), t;
 }, Na = ({ l: e, a: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
@@ -1880,7 +1880,7 @@ const wa = {
     b: -0.0041960761386756 * r - 0.7034186179359362 * a + 1.7076146940746117 * i
   };
   return o !== void 0 && (l.alpha = o), l;
-}, _a = (e) => qn(Na(e));
+}, _a = (e) => Gn(Na(e));
 function $a(e, t) {
   if (!t || t[0] !== "oklch")
     return;
@@ -1927,7 +1927,7 @@ const Ca = {
     c: [0, 0.4],
     h: [0, 360]
   }
-}, Ea = (e) => Math.max(0, Math.min(1, e || 0)), it = (e) => Math.round(Ea(e) * 255), Qn = ye("rgb"), eo = (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 = it(e.r), n = it(e.g), o = it(e.b);
@@ -1936,8 +1936,8 @@ const Ca = {
   if (e === void 0)
     return;
   let t = it(e.alpha !== void 0 ? e.alpha : 1);
-  return eo(e) + (256 | t).toString(16).slice(1);
-}, Ta = (e) => eo(Qn(e)), Ma = (e) => Sa(Qn(e)), to = ye("rgb"), no = (e) => {
+  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)),
@@ -1945,18 +1945,18 @@ const Ca = {
     b: Math.max(0, Math.min(e.b !== void 0 ? e.b : 0, 1))
   };
   return e.alpha !== void 0 && (t.alpha = e.alpha), t;
-}, Aa = (e) => no(to(e)), oo = (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);
+}, 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 oo(to(e));
+  return ro(no(e));
 }
 function Ut(e = "rgb") {
   const { gamut: t } = gt(e);
   if (!t)
     return (o) => !0;
   const n = ye(typeof t == "string" ? t : e);
-  return (o) => oo(n(o));
+  return (o) => ro(n(o));
 }
-function Ia(e = "rgb") {
+function Pa(e = "rgb") {
   const { gamut: t } = gt(e);
   if (!t)
     return (a) => ct(a);
@@ -1968,13 +1968,13 @@ function Ia(e = "rgb") {
     const l = o(i);
     if (r(l))
       return i;
-    const c = no(l);
+    const c = oo(l);
     return i.mode === c.mode ? c : ye(i.mode)(c);
   };
 }
-function Pa(e, t = "lch", n = "rgb") {
+function Ia(e, t = "lch", n = "rgb") {
   e = ct(e);
-  let o = n === "rgb" ? La : Ut(n), r = n === "rgb" ? Aa : Ia(n);
+  let o = n === "rgb" ? La : Ut(n), r = n === "rgb" ? Aa : Pa(n);
   if (e === void 0 || o(e)) return e;
   let a = ye(e.mode);
   e = ye(t)(e);
@@ -1991,7 +1991,7 @@ function Pa(e, t = "lch", n = "rgb") {
 qt(Ca);
 qt(na);
 qt(pa);
-const ro = 0.37, ao = ye("oklch"), io = ye("rgb"), za = Ut("rgb");
+const ao = 0.37, io = ye("oklch"), lo = ye("rgb"), za = Ut("rgb");
 function Jt(e) {
   return {
     mode: "oklch",
@@ -2019,9 +2019,9 @@ function ne(e) {
 function Oa(e) {
   const t = { l: 0, c: 0, h: 0, a: 100 };
   try {
-    const n = Xn(e);
+    const n = Yn(e);
     if (!n) return t;
-    const o = ao(n);
+    const o = io(n);
     if (!o) return t;
     const r = o.alpha === void 0 ? 1 : o.alpha;
     return {
@@ -2035,7 +2035,7 @@ function Oa(e) {
   }
 }
 function hn(e, t) {
-  const n = Jt(e), o = io(n);
+  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) {
@@ -2045,11 +2045,11 @@ function Ee(e) {
     s: e.s / 100,
     l: e.l / 100,
     alpha: e.a / 100
-  }, n = ao(t);
+  }, n = io(t);
   return n ? Ra(n) : { l: 0, c: 0, h: 0, a: e.a };
 }
 function gn(e) {
-  const t = Jt(e), n = Pa(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,
@@ -2058,7 +2058,7 @@ function gn(e) {
   } : { l: e.l, c: 0, h: e.h, a: e.a };
 }
 function Da(e) {
-  const t = io(Jt(e));
+  const t = lo(Jt(e));
   return t ? za(t) : !1;
 }
 function et(e, t, n) {
@@ -2200,7 +2200,7 @@ function kn({
     /* @__PURE__ */ s("span", { className: "tokenpanel-color-picker-slider-value", children: p(t) })
   ] });
 }
-const lo = "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;
+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 [
     {
@@ -2217,7 +2217,7 @@ function Ya() {
       label: "C",
       ariaLabel: "Chroma",
       min: 0,
-      max: ro,
+      max: ao,
       step: 1e-3,
       format: (e) => e.toFixed(3)
     },
@@ -2292,7 +2292,7 @@ function mn(e, t, n, o) {
 function Ga(e) {
   if (typeof window > "u") return e;
   try {
-    const t = window.localStorage.getItem(lo);
+    const t = window.localStorage.getItem(so);
     if (t === "oklch" || t === "hsl") return t;
   } catch {
   }
@@ -2301,7 +2301,7 @@ function Ga(e) {
 function Ua(e) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(lo, e);
+      window.localStorage.setItem(so, e);
     } catch {
     }
 }
@@ -2311,7 +2311,7 @@ function Ja(e, t) {
     t.current || o(e);
   }, [e, t]), [n, o];
 }
-function so(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;
@@ -2321,7 +2321,7 @@ function so(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 co(e, t) {
+function uo(e, t) {
   const n = B(t);
   n.current = t, X(() => {
     function o(a) {
@@ -2335,7 +2335,7 @@ function co(e, t) {
     };
   }, []);
 }
-function uo({
+function po({
   color: e,
   onChange: t,
   label: n,
@@ -2350,54 +2350,54 @@ function uo({
   ), [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]), co(i, a);
-  const _ = Z(() => Oa(d), [d]), x = Z(() => Ir(d), [d]), f = R(
+  }, [d]), uo(i, a);
+  const _ = Z(() => Oa(d), [d]), x = Z(() => Pr(d), [d]), f = R(
     ($) => {
-      const P = $.toLowerCase();
-      u(P), w(P), t(P);
+      const I = $.toLowerCase();
+      u(I), w(I), t(I);
     },
     [u, t]
   ), E = R(
     ($) => {
-      const P = {
+      const I = {
         l: $.l ?? _.l,
         c: $.c ?? _.c,
         h: $.h ?? _.h,
         a: $.a ?? _.a
       };
-      f(hn(P));
+      f(hn(I));
     },
     [_, f]
   ), S = R(
     ($) => {
-      const P = {
+      const I = {
         h: $.h ?? x.h,
         s: $.s ?? x.s,
         l: $.l ?? x.l,
         a: $.a ?? x.a
       };
-      f(Pr(P.h, P.s, P.l, P.a));
+      f(Ir(I.h, I.s, I.l, I.a));
     },
     [x, f]
   ), O = ($) => {
     w($), (/^#[0-9a-fA-F]{6}$/.test($) || /^#[0-9a-fA-F]{8}$/.test($)) && f($);
   }, j = N === "expanded" ? Ha : Ba, D = R(
-    ($, P) => {
-      const re = mn($, P, _.a, j), Q = gn(re);
+    ($, I) => {
+      const re = mn($, I, _.a, j), Q = gn(re);
       f(hn(Q));
     },
     [_.a, j, f]
   ), G = R(
-    ($, P, re) => {
-      let Q = P, V = re;
+    ($, I, re) => {
+      let Q = I, V = re;
       if ($.key === "ArrowRight")
         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(Vt.length - 1, P + 1);
-      else if ($.key === "ArrowUp") Q = Math.max(0, P - 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(), D(P, re);
+        $.preventDefault(), D(I, re);
         return;
       } else return;
       $.preventDefault(), i.current?.querySelector(
@@ -2409,7 +2409,7 @@ function uo({
     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: ro, 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 })})`
   } : {
@@ -2421,14 +2421,14 @@ function uo({
     position: "fixed",
     visibility: "hidden"
   }));
-  Po(() => {
+  zo(() => {
     const $ = r.current;
     if (!$) {
       Ae({ position: "fixed", visibility: "hidden" });
       return;
     }
     Ae(
-      so(
+      co(
         $,
         N === "mini" ? ja : Wa,
         N === "mini" ? Ka : Xa
@@ -2437,7 +2437,7 @@ function uo({
   }, [r, N]), X(() => {
     const $ = l.current;
     if (!$) return;
-    function P(V) {
+    function I(V) {
       V.preventDefault(), V.stopPropagation();
       const U = i.current;
       if (!U) return;
@@ -2477,8 +2477,8 @@ function uo({
       );
       m({ left: J, top: z });
     }
-    return $.addEventListener("pointerdown", P), $.addEventListener("pointermove", re), $.addEventListener("pointerup", Q), $.addEventListener("pointercancel", Q), () => {
-      $.removeEventListener("pointerdown", P), $.removeEventListener("pointermove", re), $.removeEventListener("pointerup", Q), $.removeEventListener("pointercancel", Q);
+    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), H = R(() => {
@@ -2591,26 +2591,26 @@ function uo({
             className: "tokenpanel-color-picker-grid",
             role: "grid",
             "aria-label": "Color presets",
-            children: Vt.map(($, P) => /* @__PURE__ */ s("div", { role: "row", children: j.map((re, Q) => {
-              const V = mn(P, 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;
+            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": P,
+                  "data-grid-row": I,
                   "data-grid-col": Q,
                   "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: P === 0 && Q === 0 ? 0 : -1,
-                  onClick: () => D(P, Q),
-                  onKeyDown: (J) => G(J, P, Q)
+                  tabIndex: I === 0 && Q === 0 ? 0 : -1,
+                  onClick: () => D(I, Q),
+                  onKeyDown: (J) => G(J, I, Q)
                 },
-                `${P}-${Q}`
+                `${I}-${Q}`
               );
-            }) }, `row-${P}`))
+            }) }, `row-${I}`))
           }
         ),
         /* @__PURE__ */ s("div", { className: "tokenpanel-color-picker-sliders", children: C === "oklch" ? ke.map(($) => /* @__PURE__ */ s(
@@ -2619,7 +2619,7 @@ function uo({
             config: $,
             value: _[$.key] ?? 0,
             gradient: me[$.key] ?? "",
-            onChange: (P) => E({ [$.key]: P }),
+            onChange: (I) => E({ [$.key]: I }),
             onDragStart: H,
             onDragEnd: ee
           },
@@ -2630,7 +2630,7 @@ function uo({
             config: $,
             value: x[$.key] ?? 0,
             gradient: me[$.key] ?? "",
-            onChange: (P) => S({ [$.key]: P }),
+            onChange: (I) => S({ [$.key]: I }),
             onDragStart: H,
             onDragEnd: ee
           },
@@ -2654,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(
@@ -2703,12 +2703,12 @@ function Za({
   anchorRef: e,
   onClose: t
 }) {
-  const n = zo(Zt), [o, r] = K(null), a = B(Array.from({ length: 10 }, () => null)), i = B(null), l = B(null);
-  if (co(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 = so(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",
     {
@@ -2798,7 +2798,7 @@ function Za({
           )
         ] }),
         o !== null && /* @__PURE__ */ s(
-          uo,
+          po,
           {
             color: c.slots[o]?.color ?? "#ffffff",
             onChange: (C) => {
@@ -2813,7 +2813,7 @@ function Za({
     }
   );
 }
-const po = [
+const fo = [
   { color: "#ff2d2d" },
   // red
   { color: "#ff2dcf" },
@@ -2834,15 +2834,15 @@ const po = [
   // yellow
   { color: "#2d6eff" }
   // blue
-], fo = 2;
-function ho() {
-  return `${q().storagePrefix}-highlight-slots`;
-}
+], ho = 2;
 function go() {
-  return `${q().storagePrefix}-highlight-active`;
+  return `${Y().storagePrefix}-highlight-slots`;
 }
 function ko() {
-  return `${q().storagePrefix}-highlight-outline-width`;
+  return `${Y().storagePrefix}-highlight-active`;
+}
+function mo() {
+  return `${Y().storagePrefix}-highlight-outline-width`;
 }
 function Qa(e) {
   const t = new Set(Object.values(e));
@@ -2867,8 +2867,8 @@ function ei(e, t) {
 function ti(e) {
   return {
     ...e,
-    slots: po.map((t) => ({ ...t })),
-    outlineWidth: fo
+    slots: fo.map((t) => ({ ...t })),
+    outlineWidth: ho
   };
 }
 function ni(e) {
@@ -2884,9 +2884,9 @@ function ri(e, t) {
   return { ...e, outlineWidth: n };
 }
 function ai() {
-  let e = po.map((o) => ({ ...o })), t = fo, n = {};
+  let e = fo.map((o) => ({ ...o })), t = ho, n = {};
   try {
-    const o = localStorage.getItem(ho());
+    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 })));
@@ -2894,7 +2894,7 @@ function ai() {
   } catch {
   }
   try {
-    const o = localStorage.getItem(ko());
+    const o = localStorage.getItem(mo());
     if (o !== null) {
       const r = JSON.parse(o);
       typeof r == "number" && r >= 1 && (t = r);
@@ -2902,7 +2902,7 @@ function ai() {
   } catch {
   }
   try {
-    const o = sessionStorage.getItem(go());
+    const o = sessionStorage.getItem(ko());
     if (o !== null) {
       const r = JSON.parse(o);
       r !== null && typeof r == "object" && !Array.isArray(r) && (n = r);
@@ -2913,15 +2913,15 @@ function ai() {
 }
 function He(e) {
   try {
-    localStorage.setItem(ho(), JSON.stringify(e.slots));
+    localStorage.setItem(go(), JSON.stringify(e.slots));
   } catch {
   }
   try {
-    localStorage.setItem(ko(), JSON.stringify(e.outlineWidth));
+    localStorage.setItem(mo(), JSON.stringify(e.outlineWidth));
   } catch {
   }
   try {
-    sessionStorage.setItem(go(), JSON.stringify(e.active));
+    sessionStorage.setItem(ko(), JSON.stringify(e.active));
   } catch {
   }
 }
@@ -3129,7 +3129,7 @@ const bn = {
     longhands: ["mask-image"],
     compounds: ["mask-image"]
   }
-}, tt = [null, "::before", "::after"], mo = "tokenpanel-highlight-mount", bo = "tokenpanel-elpath-mount", Qt = `.tokenpanel-shell, [data-design-token-panel-modal], #${mo}, #${bo}`, 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;
+}, 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 ? 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(
@@ -3175,7 +3175,7 @@ function mi(e) {
     o.style.getPropertyValue(e) !== "" && t.add(o);
   return t;
 }
-function Pt(e, t, n, o, r) {
+function It(e, t, n, o, r) {
   const a = [], i = document.documentElement, l = /* @__PURE__ */ new WeakSet();
   a.push({
     el: i,
@@ -3237,7 +3237,7 @@ function wn(e, t) {
   n.startsWith("var(") && (n = n.replace(/^var\(\s*/, "").replace(/\s*\)$/, "").trim());
   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 = Pt(
+    const { sentinelA: m, longhands: h, compounds: v } = i, C = i.needleA ?? m, b = It(
       n,
       m,
       l,
@@ -3274,7 +3274,7 @@ function wn(e, t) {
       }
     zt(n, b);
   } else {
-    const { sentinelA: m, sentinelB: h, longhands: v, compounds: C } = i, b = [...v, ...C], N = Pt(
+    const { sentinelA: m, sentinelB: h, longhands: v, compounds: C } = i, b = [...v, ...C], N = It(
       n,
       m,
       l,
@@ -3286,7 +3286,7 @@ function wn(e, t) {
     for (const w of d)
       g.set(w, tt.map((_) => vn(w, _, b)));
     zt(n, N);
-    const y = Pt(
+    const y = It(
       n,
       h,
       l,
@@ -3375,7 +3375,7 @@ function xi({ items: e }) {
     );
   }) });
 }
-function vo(e) {
+function wo(e) {
   const t = de(null), [, n] = $e(0);
   return ue(() => {
     function o() {
@@ -3427,7 +3427,7 @@ function yi(e) {
 }
 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);
@@ -3438,31 +3438,31 @@ function $i(e) {
   return e ? !_i.has(e.kind) : !0;
 }
 function Ci({ items: e }) {
-  const t = vo(mo);
+  const t = wo(bo);
   return t ? Wt(/* @__PURE__ */ s(xi, { items: e }), t) : null;
 }
 function Ei({ children: e }) {
-  const [t, n] = $e(ai), [o, r] = $e(0), [a, i] = $e(0), l = de(/* @__PURE__ */ new Map()), c = Y((b) => {
+  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, N) => {
+  }, []), d = q((b, N) => {
     n((g) => {
       const y = oi(g, b, N);
       return He(y), y;
     });
-  }, []), u = Y((b) => {
+  }, []), u = q((b) => {
     n((N) => {
       const g = ri(N, b);
       return He(g), g;
     });
-  }, []), p = Y(() => {
+  }, []), p = q(() => {
     n((b) => {
       const N = ti(b);
       return He(N), N;
     });
-  }, []), m = Y(() => {
+  }, []), m = q(() => {
     n((b) => {
       const N = ni(b);
       return He(N), N;
@@ -3550,20 +3550,20 @@ function yn(e) {
   const t = e;
   return t.tagName === "STYLE" || t.tagName === "LINK" && t.getAttribute("rel") === "stylesheet";
 }
-const wo = jt(null);
-function xo() {
-  return `${q().storagePrefix}-elpath-enabled`;
+const xo = jt(null);
+function yo() {
+  return `${Y().storagePrefix}-elpath-enabled`;
 }
 function Si() {
   try {
-    return localStorage.getItem(xo()) === "1";
+    return localStorage.getItem(yo()) === "1";
   } catch {
     return !1;
   }
 }
 function Nn(e) {
   try {
-    localStorage.setItem(xo(), e ? "1" : "0");
+    localStorage.setItem(yo(), e ? "1" : "0");
   } catch {
   }
 }
@@ -3613,7 +3613,7 @@ function Ht(e) {
   }
   return t;
 }
-function yo(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)) : [];
 }
@@ -3633,10 +3633,10 @@ function Li(e) {
   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 Ii(e) {
+function Pi(e) {
   return e.localName + Li(e);
 }
-function Pi(e) {
+function Ii(e) {
   if (e.tagName === "HTML") return "html";
   const t = e.getAttribute("id");
   if (t) {
@@ -3657,7 +3657,7 @@ function Pi(e) {
         continue;
       }
     }
-    n.unshift(Ii(o));
+    n.unshift(Pi(o));
     const a = n.join(" > ");
     if (nt(a, e)) return a;
     o = o.parentElement;
@@ -3668,7 +3668,7 @@ function zi(e) {
   const t = [];
   let n = e;
   for (; n && n.nodeType === 1 && n.tagName !== "HTML"; ) {
-    const o = n.localName, r = yo(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(" > ");
@@ -3703,7 +3703,7 @@ function Di(e) {
   return t;
 }
 function Ft(e) {
-  const t = e.localName, n = e.getAttribute("id"), o = yo(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}`;
@@ -3717,7 +3717,7 @@ function Vi(e) {
   }
   return {
     summary: Ft(e),
-    selector: Pi(e),
+    selector: Ii(e),
     breadcrumb: zi(e),
     role: Ri(e),
     text: Oi(e),
@@ -3811,7 +3811,7 @@ function Yi({ enabled: e }) {
   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 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: w ? `Copied path: ${Ft(g)}` : "Copy failed — clipboard unavailable",
@@ -3958,13 +3958,13 @@ function Yi({ enabled: e }) {
   ] });
 }
 function qi({ enabled: e }) {
-  const t = vo(bo);
+  const t = wo(vo);
   return t ? Wt(/* @__PURE__ */ s(Yi, { enabled: e }), t) : null;
 }
 function Gi({ children: e }) {
-  const [t, n] = $e(Si), o = Y((i) => {
+  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;
@@ -3974,12 +3974,12 @@ function Gi({ children: e }) {
     [t, o, r]
   );
   return /* @__PURE__ */ k(ae, { children: [
-    /* @__PURE__ */ s(wo.Provider, { value: a, children: e }),
+    /* @__PURE__ */ s(xo.Provider, { value: a, children: e }),
     /* @__PURE__ */ s(qi, { enabled: t })
   ] });
 }
 function Ui() {
-  const e = Xt(wo);
+  const e = Xt(xo);
   if (e === null) return null;
   const { enabled: t, toggle: n } = e;
   return /* @__PURE__ */ s(
@@ -4015,7 +4015,7 @@ function Ui() {
     }
   );
 }
-const No = jt(null);
+const _o = jt(null);
 function Ji({ state: e }) {
   const t = de(null);
   return ue(() => {
@@ -4042,11 +4042,11 @@ function Zi({ children: 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(() => {
@@ -4059,28 +4059,28 @@ function Zi({ children: e }) {
       o.current && i();
     }
     return window.addEventListener("scroll", l, !0), () => window.removeEventListener("scroll", l, !0);
-  }, [i]), /* @__PURE__ */ k(No.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(Ji, { state: t }), document.body)
   ] });
 }
 function en(e) {
-  const t = Xt(No), 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);
     },
@@ -4153,7 +4153,7 @@ const Sn = Ge(function({
       }
     ),
     i && /* @__PURE__ */ s(
-      uo,
+      po,
       {
         color: t,
         onChange: u,
@@ -4303,7 +4303,7 @@ function tl({
   ), c = Z(
     () => o ? pn(o) ?? null : null,
     [o]
-  ), d = q().colorPresets ?? {}, u = Z(
+  ), d = Y().colorPresets ?? {}, u = Z(
     () => ({ ...d, ...l.colorSchemes }),
     [d, l.colorSchemes]
   ), 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(
@@ -4353,8 +4353,8 @@ function tl({
     (f) => {
       const E = u[f];
       if (!E) return;
-      const S = In(E);
-      n(() => S), Do(S.shikiTheme);
+      const S = Pn(E);
+      n(() => S), Vo(S.shikiTheme);
     },
     [n]
   );
@@ -5174,18 +5174,18 @@ function gl({ tab: e, overrides: t, onChange: n }) {
   }) });
 }
 function kl(e, t) {
-  const n = Y(
+  const n = q(
     (u) => {
       e((p) => {
         if (!p) return p;
         const m = u(p);
-        return lt(m, t), Pn(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);
@@ -5199,32 +5199,32 @@ function kl(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);
@@ -5280,9 +5280,9 @@ function wl({
   instanceConfig: e
 } = {}) {
   const t = Z(
-    () => e ?? q(),
+    () => e ?? Y(),
     [e]
-  ), 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(Vo), [x, f] = K(Bo), [E, S] = K(!1), O = B(null), j = B({
+  ), 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,
@@ -5297,14 +5297,14 @@ function wl({
       localStorage.getItem(We(t)) === "1" && r(!0);
     } catch {
     }
-    const T = Ho(t);
+    const T = Fo(t);
     y(T), D.current = T;
-    const F = Fo(t);
-    _(F), G.current = F, f(jo(t)), S(window.innerWidth < Ke);
+    const F = jo(t);
+    _(F), G.current = F, f(Ko(t)), S(window.innerWidth < Ke);
   }, []);
   const ee = R(
     (T) => {
-      f(T), Ko(T, t);
+      f(T), Wo(T, t);
     },
     [t]
   );
@@ -5340,7 +5340,7 @@ function wl({
     };
   }, [t]), X(() => {
     function T() {
-      Xo(void 0, void 0, t), C(
+      Yo(void 0, void 0, t), C(
         (F) => F ? {
           ...F,
           color: je(ge(t)),
@@ -5424,9 +5424,9 @@ function wl({
     }
     return window.addEventListener("resize", T), () => window.removeEventListener("resize", T);
   }, [t]);
-  const P = R(
+  const I = R(
     (T) => {
-      lt(T, t), Pn(T, void 0, t), C(T);
+      lt(T, t), In(T, void 0, t), C(T);
     },
     [t]
   ), re = R(() => {
@@ -5438,7 +5438,7 @@ function wl({
     for (const F of t.tabs)
       T[F.id] = F;
     return T;
-  }, []), ce = R(
+  }, [t]), ce = R(
     (T) => {
       const F = V.findIndex((z) => z.id === b);
       if (F === -1) return;
@@ -5482,7 +5482,7 @@ function wl({
             // `--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": Wo(x)
+            "--tokenpanel-grid-min": Xo(x)
           },
           children: [
             /* @__PURE__ */ k(
@@ -5734,7 +5734,7 @@ function wl({
         br,
         {
           onClose: () => c(!1),
-          onLoad: P,
+          onLoad: I,
           colorDefaults: je(ge(t)),
           instanceConfig: t
         }
@@ -5761,34 +5761,34 @@ function wl({
   })() }) }) });
 }
 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 Ol(e) {
+function Dl(e) {
   return e.kind === "length";
 }
-function Dl(e) {
+function Vl(e) {
   return e.kind === "number";
 }
-function Vl(e) {
+function Bl(e) {
   return e.kind === "select";
 }
-function Bl(e) {
+function Hl(e) {
   return e.kind === "text";
 }
-function Hl(e) {
+function Fl(e) {
   return e.kind === "cursor";
 }
-function Fl(e) {
+function jl(e) {
   return e.kind === "content";
 }
-function jl(e) {
+function Kl(e) {
   return e.kind === "mask-image";
 }
-function Kl(e) {
+function Wl(e) {
   return e.kind === "color";
 }
-function _o(e) {
-  return or(e);
-}
 function $o(e) {
+  return rr(e);
+}
+function Co(e) {
   return Rn(e);
 }
 const An = "toggle-color-tweak-panel";
@@ -5798,14 +5798,14 @@ function mt(e) {
 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 Co(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;
   }
@@ -5814,12 +5814,12 @@ function yl(e) {
   if (typeof window > "u") return !1;
   try {
     const t = window.localStorage;
-    return t.getItem(Yo(e)) !== null || t.getItem(qo(e)) !== null;
+    return t.getItem(qo(e)) !== null || t.getItem(Go(e)) !== null;
   } catch {
     return !1;
   }
 }
-function Eo(e) {
+function So(e) {
   if (typeof window > "u") return !1;
   try {
     return window.localStorage.getItem(We(e)) === "1";
@@ -5836,7 +5836,7 @@ function vt(e, t) {
     }
 }
 function Oe(e) {
-  return typeof document > "u" ? null : document.getElementById(_o(e));
+  return typeof document > "u" ? null : document.getElementById($o(e));
 }
 const Ln = "zudo-design-token-panel-styles";
 function Nl() {
@@ -5847,7 +5847,7 @@ function Nl() {
 function wt(e) {
   if (typeof document > "u") return !1;
   an(e);
-  const t = _o(e);
+  const t = $o(e);
   if (document.getElementById(t)) return !1;
   Nl();
   const n = document.createElement("div");
@@ -5857,8 +5857,8 @@ function _l(e) {
   const t = Oe(e);
   t && (Kt(null, t), t.remove());
 }
-function Wl() {
-  return q();
+function Xl() {
+  return Y();
 }
 function nn(e) {
   if (typeof window > "u") return;
@@ -5870,21 +5870,21 @@ function on(e) {
   const t = !Oe(e);
   vt(e, !1), wt(e), bt(e, !1), !t && mt(e);
 }
-function So(e) {
+function To(e) {
   if (typeof window > "u") return;
-  const t = !Eo(e), n = !Oe(e);
+  const t = !So(e), n = !Oe(e);
   vt(e, t), wt(e), bt(e, t), !n && mt(e);
 }
-function Xl() {
-  nn(q());
-}
 function Yl() {
-  on(q());
+  nn(Y());
 }
 function ql() {
-  So(q());
+  on(Y());
+}
+function Gl() {
+  To(Y());
 }
-function To() {
+function Mo() {
   if (!(typeof window > "u"))
     try {
       const e = zn();
@@ -5893,17 +5893,17 @@ function To() {
     }
 }
 function Ye() {
-  const e = q(), t = Oe(e);
+  const e = Y(), t = Oe(e);
   if (!t) return;
-  const n = Co(e);
+  const n = Eo(e);
   Kt(null, t), t.remove(), n && bt(e, !0);
 }
 function ze() {
-  const e = q();
-  To(), Co(e) ? nn(e) : yl(e) && on(e);
+  const e = Y();
+  Mo(), Eo(e) ? nn(e) : yl(e) && on(e);
 }
 function $l(e) {
-  const t = !Oe(e), n = t ? !0 : !Eo(e);
+  const t = !Oe(e), n = t ? !0 : !So(e);
   vt(e, n), wt(e), !t && mt(e);
 }
 function rn() {
@@ -5912,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 = tr(e), o = () => $l(e);
-  window.addEventListener(n, o);
-  const r = [() => window.removeEventListener(n, o)];
-  n === nr && (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) {
@@ -5933,19 +5945,19 @@ function Mo(e) {
     t.delete(e);
   }
 }
-function Gl() {
+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 = rr(e);
+  const t = Dn(e);
   if (t) return t;
-  const n = q();
+  const n = Y();
   return n.storagePrefix === e ? n : { ...n, storagePrefix: e };
 }
-Qo({
+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
@@ -5953,19 +5965,19 @@ Qo({
   configured: (e) => an(Fe(e)),
   open: (e) => nn(Fe(e)),
   close: (e) => on(Fe(e)),
-  toggle: (e) => So(Fe(e)),
+  toggle: (e) => To(Fe(e)),
   destroy: (e) => {
     const t = Fe(e);
-    Mo(e), _l(t);
+    Ao(e), _l(t);
   }
 });
-function Ao() {
+function Lo() {
   const e = window;
   if (e.__zudoDesignTokenPanelLifecycle) return e.__zudoDesignTokenPanelLifecycle;
   const t = { bound: !1, cleanups: [], adapter: null };
   return e.__zudoDesignTokenPanelLifecycle = t, t;
 }
-function Cl(e) {
+function El(e) {
   const t = e.cleanups;
   e.cleanups = [];
   for (const n of t)
@@ -5974,13 +5986,13 @@ function Cl(e) {
     } catch {
     }
 }
-function Lo(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 El(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(
@@ -5995,36 +6007,36 @@ function El(e, t) {
     );
   }
 }
-function Ul(e) {
+function Jl(e) {
   if (typeof window > "u") return;
-  const t = Ao();
-  Cl(t), t.adapter = e, e ? El(t, e) : Lo(t);
+  const t = Lo();
+  El(t), t.adapter = e, e ? Sl(t, e) : Po(t);
 }
-const Sl = () => {
-  To(), ze();
+const Tl = () => {
+  Mo(), ze();
 };
 if (typeof window < "u") {
-  const e = Ao();
-  an(q()), e.bound || (e.bound = !0, Lo(e), er(Sl));
+  const e = Lo();
+  an(Y()), e.bound || (e.bound = !0, Po(e), tr(Tl));
 }
 export {
-  Ql as ZDTP_LEGACY_TYPOGRAPHY_RENAME_MAP,
-  Wl as __panelConfigForTest,
-  Gl as __resetInstanceBindingsForTests,
-  ts as configurePanel,
+  es as ZDTP_LEGACY_TYPOGRAPHY_RENAME_MAP,
+  Xl as __panelConfigForTest,
+  Ul as __resetInstanceBindingsForTests,
+  ns as configurePanel,
   _t as emptyOverrides,
-  Yl as hideDesignTokenPanel,
-  Kl as isColorKind,
-  Fl as isContentKind,
-  Hl as isCursorKind,
-  Ol as isLengthKind,
-  jl as isMaskImageKind,
-  Dl as isNumberKind,
-  Vl as isSelectKind,
-  Bl as isTextKind,
-  To as reapplyPersistedOverrides,
-  Ul as setLifecycleAdapter,
-  ns as setPanelColorPresets,
-  Xl as showDesignTokenPanel,
-  ql as toggleDesignPanel
+  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
 };