@takazudo/zdtp 0.2.0-next.1 → 0.2.0

package/dist/index.js

@@ -1,14 +1,14 @@
-import { jsxs as g, jsx as s, Fragment as de } from "preact/jsx-runtime";
-import { createContext as pn, render as fn } from "preact";
-import { useState as K, useRef as O, useMemo as Z, useEffect as X, useId as at, useCallback as R, useLayoutEffect as uo, useContext as po, createPortal as hn, memo as it } from "preact/compat";
-import { b as lt, i as gn, s as fo, r as Fe, e as ho, c as go, d as Qe, f as kn, D as Ft, h as ko, j as mo, k as Oe, m as bo, n as vo, o as wo, p as xo, l as mn, q as Kt, t as gt, u as bn, v as yo, w as Je, x as kt, y as jt, z as mt, A as Wt, B as bt, C as No, a as _o } from "./tweak-state-DSJa5csL.js";
-import { Z as Qi } from "./tweak-state-DSJa5csL.js";
-import { g as ne, j as pe, n as Co, o as P, p as $o, r as Eo, q as So, t as Xt, a as vn, u as Mo, v as To } from "./panel-config-DP2_P7dD.js";
-import { c as tl, s as nl } from "./panel-config-DP2_P7dD.js";
-import { c as Ao } from "./color-schemes-CgzOBqGO.js";
-import { r as Lo } from "./route-tokens-to-files-1DvmWBdj.js";
-import { useContext as wn, useCallback as J, useRef as Te, useEffect as _e, useState as De, useMemo as Yt } from "preact/hooks";
-function me(e) {
+import { jsxs as k, jsx as s, Fragment as ue } from "preact/jsx-runtime";
+import { createContext as hn, render as gn } from "preact";
+import { useState as K, useRef as O, useMemo as Z, useEffect as X, useId as lt, useCallback as R, useLayoutEffect as po, useContext as fo, createPortal as kn, memo as Ke } from "preact/compat";
+import { b as st, i as mn, s as ho, r as je, e as go, c as ko, d as tt, f as bn, D as jt, h as mo, j as bo, k as De, m as vo, n as wo, o as xo, p as yo, l as vn, q as Wt, t as kt, u as wn, v as No, w as Ze, x as mt, y as Xt, z as bt, A as Yt, B as vt, C as _o, a as Co } from "./tweak-state-DSJa5csL.js";
+import { Z as tl } from "./tweak-state-DSJa5csL.js";
+import { g as ne, j as fe, n as $o, o as P, p as Eo, r as So, q as Mo, t as qt, a as xn, u as To, v as Ao } from "./panel-config-DP2_P7dD.js";
+import { c as ol, s as rl } from "./panel-config-DP2_P7dD.js";
+import { c as Lo } from "./color-schemes-CgzOBqGO.js";
+import { r as Po } from "./route-tokens-to-files-1DvmWBdj.js";
+import { useContext as yn, useCallback as J, useRef as Ae, useEffect as Ce, useState as Ve, useMemo as Gt } from "preact/hooks";
+function be(e) {
   const t = ne().tabs.find((o) => o.id === e);
   if (!t) return [];
   const n = [];
@@ -17,54 +17,54 @@ function me(e) {
       n.push(a);
   return n;
 }
-const Ue = "zudo-design-tokens/v2", vt = "zudo-design-tokens/v1";
-function xn() {
+const Qe = "zudo-design-tokens/v2", wt = "zudo-design-tokens/v1";
+function Nn() {
   return {};
 }
-function Po() {
+function Io() {
   return ne().schemaId;
 }
-class Ee extends Error {
+class Se extends Error {
   reason;
   actualSchema;
   constructor(t, n, o) {
-    super(n), this.name = "DesignTokenSchemaError", this.reason = t, this.actualSchema = o, Object.setPrototypeOf(this, Ee.prototype);
+    super(n), this.name = "DesignTokenSchemaError", this.reason = t, this.actualSchema = o, Object.setPrototypeOf(this, Se.prototype);
   }
 }
-function yn(e, t = {}) {
+function _n(e, t = {}) {
   const n = t.now ? t.now() : /* @__PURE__ */ new Date(), o = {
-    $schema: Ue,
+    $schema: Qe,
     exportedAt: n.toISOString()
-  }, a = {}, r = Io(e.color, t);
+  }, a = {}, r = zo(e.color, t);
   r && (a.color = r);
-  const i = wt(me("spacing"), e.spacing, t);
+  const i = xt(be("spacing"), e.spacing, t);
   i && (a.spacing = i);
-  const l = wt(me("font"), e.typography, t);
+  const l = xt(be("font"), e.typography, t);
   l && (a.font = l);
-  const d = wt(me("size"), e.size, t);
+  const d = xt(be("size"), e.size, t);
   return d && (a.size = d), Object.keys(a).length > 0 && (o.tabs = a), o;
 }
-function Io(e, t) {
-  const n = t.colorDefaults, o = t.includeDefaults === !0, a = lt(), r = {};
+function zo(e, t) {
+  const n = t.colorDefaults, o = t.includeDefaults === !0, a = st(), r = {};
   let i = !1;
   const l = {};
   let d = !1;
   for (let p = 0; p < e.palette.length; p++) {
     const f = n?.palette[p];
-    (o || f === void 0 || e.palette[p] !== f) && (l[pe(a, p)] = e.palette[p], d = !0);
+    (o || f === void 0 || e.palette[p] !== f) && (l[fe(a, p)] = e.palette[p], d = !0);
   }
   d && (r.palette = l, i = !0);
   const c = {};
   let u = !1;
   for (const [p, f] of Object.entries(a.semanticCssNames)) {
-    const k = e.semanticMappings[p];
-    if (k === void 0 || typeof k != "number") continue;
+    const g = e.semanticMappings[p];
+    if (g === void 0 || typeof g != "number") continue;
     const _ = n?.semanticMappings[p];
-    (o || _ === void 0 || k !== _) && (c[f] = k, u = !0);
+    (o || _ === void 0 || g !== _) && (c[f] = g, u = !0);
   }
   return u && (r.semantic = c, i = !0), i ? r : void 0;
 }
-function wt(e, t, n) {
+function xt(e, t, n) {
   const o = n.includeDefaults === !0, a = {};
   let r = !1;
   if (o)
@@ -81,34 +81,34 @@ function wt(e, t, n) {
     }
   return r ? { raw: a } : void 0;
 }
-function zo(e, t = {}) {
+function Ro(e, t = {}) {
   if (e === null || typeof e != "object" || Array.isArray(e))
-    throw new Ee("not-object", "Input is not a JSON object.");
+    throw new Se("not-object", "Input is not a JSON object.");
   const n = e, o = n.$schema;
   if (o === void 0)
-    throw new Ee(
+    throw new Se(
       "schema-missing",
-      `Missing "$schema" key. Expected "${Ue}" or "${vt}".`
+      `Missing "$schema" key. Expected "${Qe}" or "${wt}".`
     );
-  if (o === Ue)
-    return Ro(n, t);
-  if (o === vt)
-    return Do(n, t);
-  throw new Ee(
+  if (o === Qe)
+    return Oo(n, t);
+  if (o === wt)
+    return Vo(n, t);
+  throw new Se(
     "schema-mismatch",
-    `Unsupported "$schema" value: ${JSON.stringify(o)}. Expected "${Ue}" or "${vt}".`,
+    `Unsupported "$schema" value: ${JSON.stringify(o)}. Expected "${Qe}" or "${wt}".`,
     o
   );
 }
-function Ro(e, t) {
-  const n = [], o = [], a = t.colorDefaults ?? Nn(), r = lt(), i = e.tabs && typeof e.tabs == "object" && !Array.isArray(e.tabs) ? e.tabs : {}, l = i.color, d = Oo(l, a, r, n), c = i.spacing, u = c && typeof c == "object" ? c.raw : void 0, p = xt(u, me("spacing"), "spacing", o, n), f = i.font, k = f && typeof f == "object" ? f.raw : void 0, _ = xt(k, me("font"), "font.raw", o, n), b = i.size, v = b && typeof b == "object" ? b.raw : void 0, h = xt(v, me("size"), "size", o, n);
+function Oo(e, t) {
+  const n = [], o = [], a = t.colorDefaults ?? Cn(), r = st(), i = e.tabs && typeof e.tabs == "object" && !Array.isArray(e.tabs) ? e.tabs : {}, l = i.color, d = Do(l, a, r, n), c = i.spacing, u = c && typeof c == "object" ? c.raw : void 0, p = yt(u, be("spacing"), "spacing", o, n), f = i.font, g = f && typeof f == "object" ? f.raw : void 0, _ = yt(g, be("font"), "font.raw", o, n), b = i.size, v = b && typeof b == "object" ? b.raw : void 0, h = yt(v, be("size"), "size", o, n);
   return {
     state: { color: d, spacing: p, typography: _, size: h },
     unknownTokens: o,
     warnings: n
   };
 }
-function Oo(e, t, n, o) {
+function Do(e, t, n, o) {
   if (!e || typeof e != "object" || Array.isArray(e))
     return { ...t, palette: [...t.palette], semanticMappings: { ...t.semanticMappings } };
   const a = e;
@@ -116,7 +116,7 @@ function Oo(e, t, n, o) {
   if (a.palette && typeof a.palette == "object" && !Array.isArray(a.palette)) {
     const l = a.palette, d = [...t.palette];
     for (let c = 0; c < n.paletteSize; c++) {
-      const u = pe(n, c), p = l[u];
+      const u = fe(n, c), p = l[u];
       typeof p == "string" && (d[c] = p);
     }
     r = d;
@@ -146,8 +146,8 @@ function Oo(e, t, n, o) {
     shikiTheme: t.shikiTheme
   };
 }
-function xt(e, t, n, o, a) {
-  if (!e || typeof e != "object") return xn();
+function yt(e, t, n, o, a) {
+  if (!e || typeof e != "object") return Nn();
   const r = /* @__PURE__ */ new Map();
   for (const l of t)
     l.readonly || r.set(l.cssVar, l);
@@ -166,15 +166,15 @@ function xt(e, t, n, o, a) {
   }
   return i;
 }
-function Do(e, t) {
-  const n = [], o = [], a = t.colorDefaults ?? Nn(), r = Vo(e.color, a, n), i = yt(e.spacing, me("spacing"), "spacing", o, n), l = yt(e.typography, me("font"), "typography", o, n), d = yt(e.size, me("size"), "size", o, n);
+function Vo(e, t) {
+  const n = [], o = [], a = t.colorDefaults ?? Cn(), r = Ho(e.color, a, n), i = Nt(e.spacing, be("spacing"), "spacing", o, n), l = Nt(e.typography, be("font"), "typography", o, n), d = Nt(e.size, be("size"), "size", o, n);
   return {
     state: { color: r, spacing: i, typography: l, size: d },
     unknownTokens: o,
     warnings: n
   };
 }
-function Vo(e, t, n) {
+function Ho(e, t, n) {
   if (!e || typeof e != "object")
     return {
       ...t,
@@ -184,23 +184,23 @@ function Vo(e, t, n) {
   const o = e;
   let a = [...t.palette];
   if (Array.isArray(o.palette)) {
-    const k = o.palette.filter((_) => typeof _ == "string");
-    if (k.length === t.palette.length && k.length === o.palette.length)
-      a = k;
+    const g = o.palette.filter((_) => typeof _ == "string");
+    if (g.length === t.palette.length && g.length === o.palette.length)
+      a = g;
     else if (o.palette.length > 0) {
-      const _ = k.length < o.palette.length ? `${o.palette.length - k.length} non-string entries dropped, leaving ${k.length}` : `${o.palette.length} entries`;
+      const _ = g.length < o.palette.length ? `${o.palette.length - g.length} non-string entries dropped, leaving ${g.length}` : `${o.palette.length} entries`;
       n.push(
         `color.palette: expected ${t.palette.length} string entries; got ${_}. Palette ignored.`
       );
     }
   }
-  const r = o.base && typeof o.base == "object" ? o.base : {}, i = Pe(r.bg, t.background), l = Pe(r.fg, t.foreground), d = Pe(r.cursor, t.cursor), c = Pe(r["sel-bg"], t.selectionBg), u = Pe(r["sel-fg"], t.selectionFg), p = {
+  const r = o.base && typeof o.base == "object" ? o.base : {}, i = Ie(r.bg, t.background), l = Ie(r.fg, t.foreground), d = Ie(r.cursor, t.cursor), c = Ie(r["sel-bg"], t.selectionBg), u = Ie(r["sel-fg"], t.selectionFg), p = {
     ...t.semanticMappings
   };
   if (o.semantic && typeof o.semantic == "object")
-    for (const [k, _] of Object.entries(o.semantic))
-      typeof _ == "number" || _ === "bg" || _ === "fg" ? p[k] = _ : n.push(
-        `color.semantic.${k} has unsupported value ${JSON.stringify(_)}; kept baseline.`
+    for (const [g, _] of Object.entries(o.semantic))
+      typeof _ == "number" || _ === "bg" || _ === "fg" ? p[g] = _ : n.push(
+        `color.semantic.${g} has unsupported value ${JSON.stringify(_)}; kept baseline.`
       );
   const f = typeof o.shikiTheme == "string" && o.shikiTheme.length > 0 ? o.shikiTheme : t.shikiTheme;
   return {
@@ -214,8 +214,8 @@ function Vo(e, t, n) {
     shikiTheme: f
   };
 }
-function yt(e, t, n, o, a) {
-  if (!e || typeof e != "object") return xn();
+function Nt(e, t, n, o, a) {
+  if (!e || typeof e != "object") return Nn();
   const r = /* @__PURE__ */ new Map();
   for (const l of t)
     l.readonly || r.set(l.cssVar, l);
@@ -234,11 +234,11 @@ function yt(e, t, n, o, a) {
   }
   return i;
 }
-function Pe(e, t) {
+function Ie(e, t) {
   return typeof e == "number" && Number.isFinite(e) ? e : t;
 }
-function Nn() {
-  const e = lt(), t = e && e.paletteSize > 0 ? e.paletteSize : 16, n = t - 1, o = Array.from({ length: t }, (r, i) => i === 0 ? "#000000" : i === n ? "#ffffff" : "#808080"), a = (r) => Math.min(Math.max(r, 0), n);
+function Cn() {
+  const e = st(), t = e && e.paletteSize > 0 ? e.paletteSize : 16, n = t - 1, o = Array.from({ length: t }, (r, i) => i === 0 ? "#000000" : i === n ? "#ffffff" : "#808080"), a = (r) => Math.min(Math.max(r, 0), n);
   return {
     palette: o,
     background: a(0),
@@ -250,14 +250,14 @@ function Nn() {
     shikiTheme: "dracula"
   };
 }
-function Ho(e, t) {
+function Bo(e, t) {
   if (t) return t;
-  const n = Object.values(Ao)[0];
-  return n ? gn(n) : e;
+  const n = Object.values(Lo)[0];
+  return n ? mn(n) : e;
 }
-function Bo({ onClose: e, state: t, colorDefaults: n }) {
-  const [o, a] = K("Copy"), [r, i] = K(!1), l = O(null), d = O(null), c = O(null), u = ne(), p = Co(u), f = Z(() => {
-    const h = Ho(t.color, n), y = yn(t, {
+function Fo({ onClose: e, state: t, colorDefaults: n }) {
+  const [o, a] = K("Copy"), [r, i] = K(!1), l = O(null), d = O(null), c = O(null), u = ne(), p = $o(u), f = Z(() => {
+    const h = Bo(t.color, n), y = _n(t, {
       includeDefaults: r,
       colorDefaults: h
     });
@@ -281,7 +281,7 @@ function Bo({ onClose: e, state: t, colorDefaults: n }) {
   }, [e]), X(() => () => {
     c.current && clearTimeout(c.current);
   }, []);
-  function k(h) {
+  function g(h) {
     const y = l.current;
     if (!y) return;
     const M = y.getBoundingClientRect();
@@ -304,24 +304,24 @@ function Bo({ onClose: e, state: t, colorDefaults: n }) {
     }
     a(h ? "Copied!" : "Failed"), c.current && clearTimeout(c.current), c.current = setTimeout(() => a("Copy"), 2e3);
   }
-  const b = at(), v = `${u.modalClassPrefix}-export-title-${b}`;
-  return /* @__PURE__ */ g(
+  const b = lt(), v = `${u.modalClassPrefix}-export-title-${b}`;
+  return /* @__PURE__ */ k(
     "dialog",
     {
       ref: l,
-      onClick: k,
+      onClick: g,
       "aria-labelledby": v,
       className: `${P(u, "")} ${P(u, "--export")}`,
       "data-design-token-panel-modal": "",
       "data-design-token-panel-modal-variant": "export",
       children: [
         /* @__PURE__ */ s("div", { id: v, role: "heading", "aria-level": 2, className: P(u, "__title"), children: "Export Design Tokens" }),
-        /* @__PURE__ */ g("div", { className: P(u, "__hint"), children: [
+        /* @__PURE__ */ k("div", { className: P(u, "__hint"), children: [
           "Save as ",
           /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: p }),
           " to feed this blob back into the panel (or hand to an AI assistant)."
         ] }),
-        /* @__PURE__ */ g("label", { className: P(u, "__toggle"), children: [
+        /* @__PURE__ */ k("label", { className: P(u, "__toggle"), children: [
           /* @__PURE__ */ s(
             "input",
             {
@@ -333,7 +333,7 @@ function Bo({ onClose: e, state: t, colorDefaults: n }) {
           "Show defaults too"
         ] }),
         /* @__PURE__ */ s("div", { role: "none", className: P(u, "__json"), children: f }),
-        /* @__PURE__ */ g("div", { className: P(u, "__actions"), children: [
+        /* @__PURE__ */ k("div", { className: P(u, "__actions"), children: [
           /* @__PURE__ */ s(
             "div",
             {
@@ -366,8 +366,8 @@ function Bo({ onClose: e, state: t, colorDefaults: n }) {
     }
   );
 }
-function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
-  const [o, a] = K(""), [r, i] = K(null), l = O(null), d = O(null), c = ne(), u = Po();
+function Ko({ onClose: e, onLoad: t, colorDefaults: n }) {
+  const [o, a] = K(""), [r, i] = K(null), l = O(null), d = O(null), c = ne(), u = Io();
   X(() => {
     const b = l.current;
     if (b)
@@ -406,7 +406,7 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
       return;
     }
     try {
-      const { state: h, unknownTokens: y, warnings: M } = zo(v, {
+      const { state: h, unknownTokens: y, warnings: M } = Ro(v, {
         colorDefaults: n
       });
       if (y.length > 0) {
@@ -418,7 +418,7 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
         console.groupEnd();
       }
       M.length > 0 && console.warn("[design-token-serde] warnings:", M), t(h);
-      const A = Object.keys(h.spacing).length + Object.keys(h.typography).length + Object.keys(h.size).length, C = $o(h.color, n);
+      const A = Object.keys(h.spacing).length + Object.keys(h.typography).length + Object.keys(h.size).length, C = Eo(h.color, n);
       A === 0 && C && y.length > 0 ? i({
         kind: "error",
         text: `Nothing applied — all ${y.length} token${y.length === 1 ? "" : "s"} in the payload were unknown. See console for the list.`
@@ -427,7 +427,7 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
         text: `Loaded. ${y.length} unknown token${y.length === 1 ? "" : "s"} ignored — see console for the list.`
       }) : i({ kind: "info", text: "Loaded." });
     } catch (h) {
-      if (h instanceof Ee) {
+      if (h instanceof Se) {
         h.reason === "schema-mismatch" ? i({
           kind: "error",
           text: `Schema mismatch: this panel expects "${u}".`
@@ -441,8 +441,8 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
       i({ kind: "error", text: `Load failed: ${y}` });
     }
   }
-  const k = at(), _ = `${c.modalClassPrefix}-import-title-${k}`;
-  return /* @__PURE__ */ g(
+  const g = lt(), _ = `${c.modalClassPrefix}-import-title-${g}`;
+  return /* @__PURE__ */ k(
     "dialog",
     {
       ref: l,
@@ -453,7 +453,7 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
       "data-design-token-panel-modal-variant": "import",
       children: [
         /* @__PURE__ */ s("div", { id: _, role: "heading", "aria-level": 2, className: P(c, "__title"), children: "Load Design Tokens" }),
-        /* @__PURE__ */ g("div", { className: P(c, "__hint"), children: [
+        /* @__PURE__ */ k("div", { className: P(c, "__hint"), children: [
           "Paste a ",
           /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: u }),
           " JSON blob. Unknown tokens are ignored; schema mismatch aborts the load."
@@ -477,7 +477,7 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
             children: r.text
           }
         ),
-        /* @__PURE__ */ g("div", { className: P(c, "__actions"), children: [
+        /* @__PURE__ */ k("div", { className: P(c, "__actions"), children: [
           /* @__PURE__ */ s(
             "div",
             {
@@ -509,25 +509,25 @@ function Fo({ onClose: e, onLoad: t, colorDefaults: n }) {
     }
   );
 }
-function qt(e, t, n = lt(), o = ne().tabs) {
+function Jt(e, t, n = st(), o = ne().tabs) {
   const a = {}, r = e.color, i = r.palette.length;
   for (let d = 0; d < i; d++) {
     const c = r.palette[d];
     if (typeof c != "string" || c.length === 0) continue;
     const u = t?.palette[d];
-    (t === void 0 || c !== u) && (a[pe(n, d)] = c);
+    (t === void 0 || c !== u) && (a[fe(n, d)] = c);
   }
   for (const [d, c] of Object.entries(n.semanticCssNames)) {
     const u = r.semanticMappings[d];
     if (u === void 0) continue;
     const p = t?.semanticMappings[d];
     if (!(t === void 0 || u !== p)) continue;
-    const k = jo(u, r);
-    if (k === null) continue;
-    const _ = fo(k, r.palette.length);
-    _ !== k && console.error(
-      `[design-token-panel] paletteIndex ${k} for ${c} is out of range (palette length ${r.palette.length}); clamping to ${_}.`
-    ), a[c] = `var(${pe(n, _)})`;
+    const g = Wo(u, r);
+    if (g === null) continue;
+    const _ = ho(g, r.palette.length);
+    _ !== g && console.error(
+      `[design-token-panel] paletteIndex ${g} for ${c} is out of range (palette length ${r.palette.length}); clamping to ${_}.`
+    ), a[c] = `var(${fe(n, _)})`;
   }
   const l = [
     { tabId: "spacing", overrides: e.spacing },
@@ -537,11 +537,11 @@ function qt(e, t, n = lt(), o = ne().tabs) {
   for (const { tabId: d, overrides: c } of l) {
     if (Object.keys(c).length === 0) continue;
     const u = o.find((p) => p.id === d);
-    u && Ko(u, c, a);
+    u && jo(u, c, a);
   }
   return a;
 }
-function Ko(e, t, n) {
+function jo(e, t, n) {
   const o = {};
   for (const a of e.tiers) {
     const r = {};
@@ -557,20 +557,20 @@ function Ko(e, t, n) {
       const i = t[r.id];
       if (!(typeof i != "string" || i.length === 0))
         try {
-          const l = Fe(e, a.id, r.id, o);
-          n[r.cssVar] = ho(l);
+          const l = je(e, a.id, r.id, o);
+          n[r.cssVar] = go(l);
         } catch {
         }
     }
 }
-function jo(e, t) {
+function Wo(e, t) {
   return e === "bg" ? t.background : e === "fg" ? t.foreground : typeof e == "number" && Number.isInteger(e) ? e : null;
 }
-const Wo = 2e3, Nt = { kind: "preview" };
-function Xo(e, t) {
-  return JSON.stringify(yn(e, { colorDefaults: t }), null, 2);
+const Xo = 2e3, _t = { kind: "preview" };
+function Yo(e, t) {
+  return JSON.stringify(_n(e, { colorDefaults: t }), null, 2);
 }
-function Yo(e) {
+function qo(e) {
   if (Array.isArray(e.updated)) return e.updated;
   const t = e.results;
   if (Array.isArray(t)) return t;
@@ -583,7 +583,7 @@ function Yo(e) {
   }
   return n;
 }
-function qo(e) {
+function Go(e) {
   return {
     dialog: `${P(e, "")} ${P(e, "--apply")}`,
     header: P(e, "__header"),
@@ -605,8 +605,8 @@ function qo(e) {
     jsonBlock: P(e, "__json")
   };
 }
-function Go(e) {
-  const { state: t, open: n, onClose: o, colorDefaults: a, onApplied: r } = e, i = O(null), l = O(null), d = ne(), c = Z(() => qo(d), [d]), u = at(), p = `${d.modalClassPrefix}-apply-title-${u}`, [f, k] = K(Nt), [_, b] = K("Copy pre-apply state to clipboard");
+function Jo(e) {
+  const { state: t, open: n, onClose: o, colorDefaults: a, onApplied: r } = e, i = O(null), l = O(null), d = ne(), c = Z(() => Go(d), [d]), u = lt(), p = `${d.modalClassPrefix}-apply-title-${u}`, [f, g] = K(_t), [_, b] = K("Copy pre-apply state to clipboard");
   X(() => {
     const T = i.current;
     if (!T) return;
@@ -615,32 +615,32 @@ function Go(e) {
       l.current?.focus();
     })) : !n && D && (typeof T.close == "function" ? T.close() : T.removeAttribute("open"));
   }, [n]), X(() => {
-    n && (k(Nt), b("Copy pre-apply state to clipboard"));
+    n && (g(_t), b("Copy pre-apply state to clipboard"));
   }, [n]), X(() => {
     if (_ !== "Copied!") return;
     const T = window.setTimeout(
       () => b("Copy pre-apply state to clipboard"),
-      Wo
+      Xo
     );
     return () => window.clearTimeout(T);
   }, [_]);
   const v = Z(() => {
-    const T = qt(t, a), D = Eo(d), ee = D && t.secondary ? qt({ ...t, color: t.secondary }, void 0, D) : {};
+    const T = Jt(t, a), D = So(d), ee = D && t.secondary ? Jt({ ...t, color: t.secondary }, void 0, D) : {};
     return { ...T, ...ee };
-  }, [t, a, d]), h = Z(() => So(d), [d]), { groups: y, rejected: M, rejectedReasons: A } = Z(
-    () => Lo(v, h),
+  }, [t, a, d]), h = Z(() => Mo(d), [d]), { groups: y, rejected: M, rejectedReasons: A } = Z(
+    () => Po(v, h),
     [v, h]
   ), C = Z(() => Object.keys(v).length, [v]), x = C === 0, m = y.length > 0, N = d.applyEndpoint, S = !!N && Object.keys(h).length > 0;
   async function B() {
     if (!N) {
-      k({
+      g({
         kind: "error",
         message: "Apply is not configured: PanelConfig.applyEndpoint is missing."
       });
       return;
     }
-    const T = Xo(t, a);
-    k({ kind: "applying" });
+    const T = Yo(t, a);
+    g({ kind: "applying" });
     try {
       const D = await fetch(N, {
         method: "POST",
@@ -648,20 +648,20 @@ function Go(e) {
         body: JSON.stringify({ tokens: v })
       });
       if (!D.ok) {
-        let ge = "";
+        let ke = "";
         try {
           const w = await D.text();
           if (w)
             try {
               const z = JSON.parse(w);
-              ge = z.error ?? z.message ?? w;
+              ke = z.error ?? z.message ?? w;
             } catch {
-              ge = w;
+              ke = w;
             }
         } catch {
         }
-        const Le = ge ? `Apply failed (${D.status}): ${ge}` : `Apply failed (${D.status} ${D.statusText || "error"}).`;
-        k({ kind: "error", message: Le });
+        const Pe = ke ? `Apply failed (${D.status}): ${ke}` : `Apply failed (${D.status} ${D.statusText || "error"}).`;
+        g({ kind: "error", message: Pe });
         return;
       }
       let ee = {};
@@ -670,10 +670,10 @@ function Go(e) {
       } catch {
         ee = {};
       }
-      k({ kind: "success", response: ee, previewJson: T });
+      g({ kind: "success", response: ee, previewJson: T });
     } catch (D) {
       const ee = D instanceof Error ? D.message : String(D);
-      k({ kind: "error", message: `Network error: ${ee}` });
+      g({ kind: "error", message: `Network error: ${ee}` });
     }
   }
   function j(T) {
@@ -688,9 +688,9 @@ function Go(e) {
     r(), oe();
   }
   function Q() {
-    k(Nt);
+    g(_t);
   }
-  function se() {
+  function ce() {
     o();
   }
   function oe() {
@@ -701,20 +701,20 @@ function Go(e) {
     }
     typeof T.close == "function" ? T.close() : (T.removeAttribute("open"), o());
   }
-  function be(T) {
+  function ve(T) {
     const D = i.current;
     if (!D) return;
     const ee = D.getBoundingClientRect();
     (T.clientX < ee.left || T.clientX > ee.right || T.clientY < ee.top || T.clientY > ee.bottom) && oe();
   }
-  const ue = Z(
+  const pe = Z(
     () => Object.values(h).map((T) => {
       const D = T.lastIndexOf("/");
       return D >= 0 ? T.slice(D + 1) : T;
     }).join(" / "),
     [h]
-  ), Ce = f.kind === "applying" ? "Applying…" : S ? `Apply to ${ue}` : "Apply (host not configured)";
-  return /* @__PURE__ */ g(
+  ), $e = f.kind === "applying" ? "Applying…" : S ? `Apply to ${pe}` : "Apply (host not configured)";
+  return /* @__PURE__ */ k(
     "dialog",
     {
       ref: i,
@@ -722,10 +722,10 @@ function Go(e) {
       "data-design-token-panel-modal": "",
       "data-design-token-panel-modal-variant": "apply",
       "aria-labelledby": p,
-      onClose: se,
-      onClick: be,
+      onClose: ce,
+      onClick: ve,
       children: [
-        /* @__PURE__ */ g("div", { className: c.header, children: [
+        /* @__PURE__ */ k("div", { className: c.header, children: [
           /* @__PURE__ */ s("div", { id: p, role: "heading", "aria-level": 2, className: c.title, children: "Apply design tokens to codebase" }),
           /* @__PURE__ */ s(
             "div",
@@ -742,9 +742,9 @@ function Go(e) {
             }
           )
         ] }),
-        /* @__PURE__ */ g("div", { children: [
+        /* @__PURE__ */ k("div", { children: [
           f.kind === "preview" && /* @__PURE__ */ s(
-            Jo,
+            Uo,
             {
               cls: c,
               groups: y,
@@ -755,22 +755,22 @@ function Go(e) {
               applyConfigured: S
             }
           ),
-          f.kind === "applying" && /* @__PURE__ */ s(Uo, { cls: c }),
+          f.kind === "applying" && /* @__PURE__ */ s(Zo, { cls: c }),
           f.kind === "success" && /* @__PURE__ */ s(
-            Zo,
+            Qo,
             {
               cls: c,
-              results: Yo(f.response),
+              results: qo(f.response),
               unknownCssVars: Array.isArray(f.response.unknownCssVars) ? f.response.unknownCssVars : [],
               previewJson: f.previewJson,
               copyLabel: _,
               onCopy: () => j(f.previewJson)
             }
           ),
-          f.kind === "error" && /* @__PURE__ */ s(Qo, { cls: c, message: f.message })
+          f.kind === "error" && /* @__PURE__ */ s(er, { cls: c, message: f.message })
         ] }),
-        /* @__PURE__ */ g("div", { className: c.actions, children: [
-          f.kind === "preview" && /* @__PURE__ */ g(de, { children: [
+        /* @__PURE__ */ k("div", { className: c.actions, children: [
+          f.kind === "preview" && /* @__PURE__ */ k(ue, { children: [
             (() => {
               const T = x || !m || !S;
               return /* @__PURE__ */ s(
@@ -788,7 +788,7 @@ function Go(e) {
                   onKeyDown: (D) => {
                     (D.key === "Enter" || D.key === " ") && (D.preventDefault(), T || B());
                   },
-                  children: Ce
+                  children: $e
                 }
               );
             })(),
@@ -806,7 +806,7 @@ function Go(e) {
               }
             )
           ] }),
-          f.kind === "applying" && /* @__PURE__ */ s("div", { role: "button", tabIndex: -1, className: c.primaryButton, "aria-disabled": !0, children: Ce }),
+          f.kind === "applying" && /* @__PURE__ */ s("div", { role: "button", tabIndex: -1, className: c.primaryButton, "aria-disabled": !0, children: $e }),
           f.kind === "success" && /* @__PURE__ */ s(
             "div",
             {
@@ -820,7 +820,7 @@ function Go(e) {
               children: "Done"
             }
           ),
-          f.kind === "error" && /* @__PURE__ */ g(de, { children: [
+          f.kind === "error" && /* @__PURE__ */ k(ue, { children: [
             /* @__PURE__ */ s(
               "div",
               {
@@ -853,7 +853,7 @@ function Go(e) {
     }
   );
 }
-function Jo({
+function Uo({
   cls: e,
   groups: t,
   rejected: n,
@@ -865,14 +865,14 @@ function Jo({
   if (r)
     return /* @__PURE__ */ s("div", { className: e.statusWarning, children: "No overrides to apply — make a change first, then come back." });
   const l = t.reduce((d, c) => d + Object.keys(c.tokens).length, 0);
-  return /* @__PURE__ */ g(de, { children: [
+  return /* @__PURE__ */ k(ue, { children: [
     !i && /* @__PURE__ */ s("div", { className: e.statusWarning, children: "The host has not configured an apply endpoint or routing map. The diff below is read-only — the Apply button will stay disabled." }),
-    /* @__PURE__ */ g("div", { className: e.hint, children: [
+    /* @__PURE__ */ k("div", { className: e.hint, children: [
       l,
       " override",
       l === 1 ? "" : "s",
       " will be written to disk.",
-      l !== a && /* @__PURE__ */ g(de, { children: [
+      l !== a && /* @__PURE__ */ k(ue, { children: [
         " ",
         a - l,
         " entr",
@@ -880,29 +880,29 @@ function Jo({
         " were skipped (no route configured)."
       ] })
     ] }),
-    t.map((d) => /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: [
-        er(d.relativePath),
+    t.map((d) => /* @__PURE__ */ k("div", { children: [
+      /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: [
+        tr(d.relativePath),
         " (",
         Object.keys(d.tokens).length,
         ")"
       ] }),
-      /* @__PURE__ */ s("div", { className: e.list, children: Object.entries(d.tokens).map(([c, u]) => /* @__PURE__ */ g("div", { className: e.listItem, children: [
+      /* @__PURE__ */ s("div", { className: e.list, children: Object.entries(d.tokens).map(([c, u]) => /* @__PURE__ */ k("div", { className: e.listItem, children: [
         /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: c }),
         ":",
         " ",
         /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: u })
       ] }, c)) })
     ] }, d.prefix)),
-    n.length > 0 && /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: [
+    n.length > 0 && /* @__PURE__ */ k("div", { children: [
+      /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: [
         "Skipped — no route configured (",
         n.length,
         ")"
       ] }),
-      /* @__PURE__ */ s("div", { className: e.list, children: n.map((d, c) => /* @__PURE__ */ g("div", { className: e.listItem, children: [
+      /* @__PURE__ */ s("div", { className: e.list, children: n.map((d, c) => /* @__PURE__ */ k("div", { className: e.listItem, children: [
         /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: d }),
-        o[c] ? /* @__PURE__ */ g(de, { children: [
+        o[c] ? /* @__PURE__ */ k(ue, { children: [
           " ",
           "— ",
           /* @__PURE__ */ s("span", { children: o[c] })
@@ -911,13 +911,13 @@ function Jo({
     ] })
   ] });
 }
-function Uo({ cls: e }) {
-  return /* @__PURE__ */ g("div", { className: e.applying, role: "status", "aria-live": "polite", children: [
+function Zo({ cls: e }) {
+  return /* @__PURE__ */ k("div", { className: e.applying, role: "status", "aria-live": "polite", children: [
     /* @__PURE__ */ s("span", { className: e.spinner, "aria-hidden": "true" }),
     /* @__PURE__ */ s("span", { children: "Applying changes…" })
   ] });
 }
-function Zo({
+function Qo({
   cls: e,
   results: t,
   unknownCssVars: n,
@@ -925,15 +925,15 @@ function Zo({
   copyLabel: a,
   onCopy: r
 }) {
-  return /* @__PURE__ */ g("div", { children: [
+  return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ s("div", { className: e.statusSuccess, role: "status", children: "Applied successfully." }),
-    t.length === 0 ? /* @__PURE__ */ s("div", { className: e.hint, children: "The server returned no per-file details." }) : t.map((i) => /* @__PURE__ */ g("div", { children: [
+    t.length === 0 ? /* @__PURE__ */ s("div", { className: e.hint, children: "The server returned no per-file details." }) : t.map((i) => /* @__PURE__ */ k("div", { children: [
       /* @__PURE__ */ s("div", { role: "heading", "aria-level": 3, className: e.sectionHeading, children: i.file ?? "(unknown file)" }),
-      /* @__PURE__ */ s(_t, { cls: e, label: "changed", values: i.changed }),
-      /* @__PURE__ */ s(_t, { cls: e, label: "unknown", values: i.unknown }),
-      /* @__PURE__ */ s(_t, { cls: e, label: "unchanged", values: i.unchanged })
+      /* @__PURE__ */ s(Ct, { cls: e, label: "changed", values: i.changed }),
+      /* @__PURE__ */ s(Ct, { cls: e, label: "unknown", values: i.unknown }),
+      /* @__PURE__ */ s(Ct, { cls: e, label: "unchanged", values: i.unchanged })
     ] }, i.file ?? "unknown-file")),
-    n.length > 0 && /* @__PURE__ */ g("div", { className: e.statusWarning, children: [
+    n.length > 0 && /* @__PURE__ */ k("div", { className: e.statusWarning, children: [
       n.length,
       " cssVar",
       n.length === 1 ? "" : "s",
@@ -957,9 +957,9 @@ function Zo({
     /* @__PURE__ */ s("div", { role: "none", className: e.jsonBlock, children: o })
   ] });
 }
-function _t({ cls: e, label: t, values: n }) {
-  return !n || n.length === 0 ? null : /* @__PURE__ */ g("div", { children: [
-    /* @__PURE__ */ g("div", { className: e.hint, children: [
+function Ct({ cls: e, label: t, values: n }) {
+  return !n || n.length === 0 ? null : /* @__PURE__ */ k("div", { children: [
+    /* @__PURE__ */ k("div", { className: e.hint, children: [
       t,
       " (",
       n.length,
@@ -968,18 +968,18 @@ function _t({ cls: e, label: t, values: n }) {
     /* @__PURE__ */ s("div", { className: e.list, children: n.map((o) => /* @__PURE__ */ s("div", { className: e.listItem, children: /* @__PURE__ */ s("span", { className: "tokenpanel-code", children: o }) }, o)) })
   ] });
 }
-function Qo({ cls: e, message: t }) {
-  return /* @__PURE__ */ g("div", { children: [
+function er({ cls: e, message: t }) {
+  return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ s("div", { className: e.statusError, role: "alert", children: t }),
     /* @__PURE__ */ s("div", { className: e.hint, children: "Your edits are still intact — click Retry to send the same diff again, or Close to keep editing." })
   ] });
 }
-function er(e) {
+function tr(e) {
   if (!e) return "(unknown file)";
   const t = e.lastIndexOf("/");
   return t >= 0 ? e.slice(t + 1) : e;
 }
-function Ne({
+function _e({
   children: e,
   onClick: t,
   className: n,
@@ -1013,31 +1013,31 @@ function Ne({
     }
   );
 }
-const tr = { h: 0, s: 0, l: 0, a: 100 };
-function nr(e) {
+const nr = { h: 0, s: 0, l: 0, a: 100 };
+function or(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 or(e) {
-  const t = nr(e);
-  if (!t) return { ...tr };
+function rr(e) {
+  const t = or(e);
+  if (!t) return { ...nr };
   const n = parseInt(t.slice(1, 3), 16) / 255, o = parseInt(t.slice(3, 5), 16) / 255, a = parseInt(t.slice(5, 7), 16) / 255, r = t.length === 9 ? Math.round(parseInt(t.slice(7, 9), 16) / 255 * 100) : 100, i = Math.max(n, o, a), l = Math.min(n, o, a), d = (i + l) / 2;
   if (i === l) return { h: 0, s: 0, l: Math.round(d * 100), a: r };
   const c = i - l, u = d > 0.5 ? c / (2 - i - l) : c / (i + l);
   let p = 0;
   return i === n ? p = ((o - a) / c + (o < a ? 6 : 0)) / 6 : i === o ? p = ((a - n) / c + 2) / 6 : p = ((n - o) / c + 4) / 6, { h: Math.round(p * 360), s: Math.round(u * 100), l: Math.round(d * 100), a: r };
 }
-function rr(e, t, n, o) {
+function ar(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 a = t / 100, r = n / 100, i = (1 - Math.abs(2 * r - 1)) * a, l = i * (1 - Math.abs(e / 60 % 2 - 1)), d = r - i / 2;
   let c = 0, u = 0, p = 0;
   e < 60 ? (c = i, u = l) : e < 120 ? (c = l, u = i) : e < 180 ? (u = i, p = l) : e < 240 ? (u = l, p = i) : e < 300 ? (c = l, p = i) : (c = i, p = l);
-  const f = (b) => Math.round((b + d) * 255).toString(16).padStart(2, "0"), k = `#${f(c)}${f(u)}${f(p)}`;
-  if (o === 100) return k;
+  const f = (b) => Math.round((b + d) * 255).toString(16).padStart(2, "0"), g = `#${f(c)}${f(u)}${f(p)}`;
+  if (o === 100) return g;
   const _ = Math.round(o / 100 * 255).toString(16).padStart(2, "0");
-  return `${k}${_}`;
+  return `${g}${_}`;
 }
-const _n = (e, t) => {
+const $n = (e, t) => {
   if (typeof e == "number") {
     if (t === 3)
       return {
@@ -1070,7 +1070,7 @@ const _n = (e, t) => {
         alpha: (e & 255) / 255
       };
   }
-}, ar = {
+}, ir = {
   aliceblue: 15792383,
   antiquewhite: 16444375,
   aqua: 65535,
@@ -1221,23 +1221,23 @@ const _n = (e, t) => {
   whitesmoke: 16119285,
   yellow: 16776960,
   yellowgreen: 10145074
-}, ir = (e) => _n(ar[e.toLowerCase()], 6), lr = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, sr = (e) => {
+}, lr = (e) => $n(ir[e.toLowerCase()], 6), sr = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, cr = (e) => {
   let t;
-  return (t = e.match(lr)) ? _n(parseInt(t[1], 16), t[1].length) : void 0;
-}, xe = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", Ve = `${xe}%`, zt = `(?:${xe}%|${xe})`, cr = `(?:${xe}(deg|grad|rad|turn)|${xe})`, Ae = "\\s*,\\s*", dr = new RegExp(
-  `^rgba?\\(\\s*${xe}${Ae}${xe}${Ae}${xe}\\s*(?:,\\s*${zt}\\s*)?\\)$`
-), ur = new RegExp(
-  `^rgba?\\(\\s*${Ve}${Ae}${Ve}${Ae}${Ve}\\s*(?:,\\s*${zt}\\s*)?\\)$`
-), pr = (e) => {
+  return (t = e.match(sr)) ? $n(parseInt(t[1], 16), t[1].length) : void 0;
+}, ye = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", He = `${ye}%`, Rt = `(?:${ye}%|${ye})`, dr = `(?:${ye}(deg|grad|rad|turn)|${ye})`, Le = "\\s*,\\s*", ur = new RegExp(
+  `^rgba?\\(\\s*${ye}${Le}${ye}${Le}${ye}\\s*(?:,\\s*${Rt}\\s*)?\\)$`
+), pr = new RegExp(
+  `^rgba?\\(\\s*${He}${Le}${He}${Le}${He}\\s*(?:,\\s*${Rt}\\s*)?\\)$`
+), fr = (e) => {
   let t = { mode: "rgb" }, n;
-  if (n = e.match(dr))
+  if (n = e.match(ur))
     n[1] !== void 0 && (t.r = n[1] / 255), n[2] !== void 0 && (t.g = n[2] / 255), n[3] !== void 0 && (t.b = n[3] / 255);
-  else if (n = e.match(ur))
+  else if (n = e.match(pr))
     n[1] !== void 0 && (t.r = n[1] / 100), n[2] !== void 0 && (t.g = n[2] / 100), n[3] !== void 0 && (t.b = n[3] / 100);
   else
     return;
   return n[4] !== void 0 ? t.alpha = Math.max(0, Math.min(1, n[4] / 100)) : n[5] !== void 0 && (t.alpha = Math.max(0, Math.min(1, +n[5]))), t;
-}, et = (e, t) => e === void 0 ? void 0 : typeof e != "object" ? Sn(e) : e.mode !== void 0 ? e : t ? { ...e, mode: t } : void 0, he = (e = "rgb") => (t) => (t = et(t, e)) !== void 0 ? (
+}, nt = (e, t) => e === void 0 ? void 0 : typeof e != "object" ? Tn(e) : e.mode !== void 0 ? e : t ? { ...e, mode: t } : void 0, ge = (e = "rgb") => (t) => (t = nt(t, e)) !== void 0 ? (
   // if the color's mode corresponds to our target mode
   t.mode === e ? (
     // then just return the color
@@ -1245,41 +1245,41 @@ const _n = (e, t) => {
   ) : (
     // otherwise check to see if we have a dedicated
     // converter for the target mode
-    fe[t.mode][e] ? (
+    he[t.mode][e] ? (
       // and return its result...
-      fe[t.mode][e](t)
+      he[t.mode][e](t)
     ) : (
       // ...otherwise pass through RGB as an intermediary step.
       // if the target mode is RGB...
       e === "rgb" ? (
         // just return the RGB
-        fe[t.mode].rgb(t)
+        he[t.mode].rgb(t)
       ) : (
         // otherwise convert color.mode -> RGB -> target_mode
-        fe.rgb[e](fe[t.mode].rgb(t))
+        he.rgb[e](he[t.mode].rgb(t))
       )
     )
   )
-) : void 0, fe = {}, Cn = {}, tt = [], $n = {}, fr = (e) => e, Rt = (e) => (fe[e.mode] = {
-  ...fe[e.mode],
+) : void 0, he = {}, En = {}, ot = [], Sn = {}, hr = (e) => e, Ot = (e) => (he[e.mode] = {
+  ...he[e.mode],
   ...e.toMode
 }, Object.keys(e.fromMode || {}).forEach((t) => {
-  fe[t] || (fe[t] = {}), fe[t][e.mode] = e.fromMode[t];
+  he[t] || (he[t] = {}), he[t][e.mode] = e.fromMode[t];
 }), e.ranges || (e.ranges = {}), e.difference || (e.difference = {}), e.channels.forEach((t) => {
   if (e.ranges[t] === void 0 && (e.ranges[t] = [0, 1]), !e.interpolate[t])
     throw new Error(`Missing interpolator for: ${t}`);
   typeof e.interpolate[t] == "function" && (e.interpolate[t] = {
     use: e.interpolate[t]
-  }), e.interpolate[t].fixup || (e.interpolate[t].fixup = fr);
-}), Cn[e.mode] = e, (e.parse || []).forEach((t) => {
-  hr(t, e.mode);
-}), he(e.mode)), st = (e) => Cn[e], hr = (e, t) => {
+  }), e.interpolate[t].fixup || (e.interpolate[t].fixup = hr);
+}), En[e.mode] = e, (e.parse || []).forEach((t) => {
+  gr(t, e.mode);
+}), ge(e.mode)), ct = (e) => En[e], gr = (e, t) => {
   if (typeof e == "string") {
     if (!t)
       throw new Error("'mode' required when 'parser' is a string");
-    $n[e] = t;
-  } else typeof e == "function" && tt.indexOf(e) < 0 && tt.push(e);
-}, At = /[^\x00-\x7F]|[a-zA-Z_]/, gr = /[^\x00-\x7F]|[-\w]/, E = {
+    Sn[e] = t;
+  } else typeof e == "function" && ot.indexOf(e) < 0 && ot.push(e);
+}, Lt = /[^\x00-\x7F]|[a-zA-Z_]/, kr = /[^\x00-\x7F]|[-\w]/, E = {
   Function: "function",
   Ident: "ident",
   Number: "number",
@@ -1290,55 +1290,55 @@ const _n = (e, t) => {
   Alpha: "alpha"
 };
 let L = 0;
-function je(e) {
+function Xe(e) {
   let t = e[L], n = e[L + 1];
   return t === "-" || t === "+" ? /\d/.test(n) || n === "." && /\d/.test(e[L + 2]) : t === "." ? /\d/.test(n) : /\d/.test(t);
 }
-function Lt(e) {
+function Pt(e) {
   if (L >= e.length)
     return !1;
   let t = e[L];
-  if (At.test(t))
+  if (Lt.test(t))
     return !0;
   if (t === "-") {
     if (e.length - L < 2)
       return !1;
     let n = e[L + 1];
-    return !!(n === "-" || At.test(n));
+    return !!(n === "-" || Lt.test(n));
   }
   return !1;
 }
-const kr = {
+const mr = {
   deg: 1,
   rad: 180 / Math.PI,
   grad: 9 / 10,
   turn: 360
 };
-function Ie(e) {
+function ze(e) {
   let t = "";
-  if ((e[L] === "-" || e[L] === "+") && (t += e[L++]), t += We(e), e[L] === "." && /\d/.test(e[L + 1]) && (t += e[L++] + We(e)), (e[L] === "e" || e[L] === "E") && ((e[L + 1] === "-" || e[L + 1] === "+") && /\d/.test(e[L + 2]) ? t += e[L++] + e[L++] + We(e) : /\d/.test(e[L + 1]) && (t += e[L++] + We(e))), Lt(e)) {
-    let n = nt(e);
-    return n === "deg" || n === "rad" || n === "turn" || n === "grad" ? { type: E.Hue, value: t * kr[n] } : void 0;
+  if ((e[L] === "-" || e[L] === "+") && (t += e[L++]), t += Ye(e), e[L] === "." && /\d/.test(e[L + 1]) && (t += e[L++] + Ye(e)), (e[L] === "e" || e[L] === "E") && ((e[L + 1] === "-" || e[L + 1] === "+") && /\d/.test(e[L + 2]) ? t += e[L++] + e[L++] + Ye(e) : /\d/.test(e[L + 1]) && (t += e[L++] + Ye(e))), Pt(e)) {
+    let n = rt(e);
+    return n === "deg" || n === "rad" || n === "turn" || n === "grad" ? { type: E.Hue, value: t * mr[n] } : void 0;
   }
   return e[L] === "%" ? (L++, { type: E.Percentage, value: +t }) : { type: E.Number, value: +t };
 }
-function We(e) {
+function Ye(e) {
   let t = "";
   for (; /\d/.test(e[L]); )
     t += e[L++];
   return t;
 }
-function nt(e) {
+function rt(e) {
   let t = "";
-  for (; L < e.length && gr.test(e[L]); )
+  for (; L < e.length && kr.test(e[L]); )
     t += e[L++];
   return t;
 }
-function mr(e) {
-  let t = nt(e);
+function br(e) {
+  let t = rt(e);
   return e[L] === "(" ? (L++, { type: E.Function, value: t }) : t === "none" ? { type: E.None, value: void 0 } : { type: E.Ident, value: t };
 }
-function br(e = "") {
+function vr(e = "") {
   let t = e.trim(), n = [], o;
   for (L = 0; L < t.length; ) {
     if (o = t[L++], o === `
@@ -1355,26 +1355,26 @@ function br(e = "") {
       continue;
     }
     if (o === "+") {
-      if (L--, je(t)) {
-        n.push(Ie(t));
+      if (L--, Xe(t)) {
+        n.push(ze(t));
         continue;
       }
       return;
     }
     if (o === "-") {
-      if (L--, je(t)) {
-        n.push(Ie(t));
+      if (L--, Xe(t)) {
+        n.push(ze(t));
         continue;
       }
-      if (Lt(t)) {
-        n.push({ type: E.Ident, value: nt(t) });
+      if (Pt(t)) {
+        n.push({ type: E.Ident, value: rt(t) });
         continue;
       }
       return;
     }
     if (o === ".") {
-      if (L--, je(t)) {
-        n.push(Ie(t));
+      if (L--, Xe(t)) {
+        n.push(ze(t));
         continue;
       }
       return;
@@ -1384,11 +1384,11 @@ function br(e = "") {
 ` || t[L] === "	" || t[L] === " "); )
         L++;
       let a;
-      if (je(t) && (a = Ie(t), a.type !== E.Hue)) {
+      if (Xe(t) && (a = ze(t), a.type !== E.Hue)) {
         n.push({ type: E.Alpha, value: a });
         continue;
       }
-      if (Lt(t) && nt(t) === "none") {
+      if (Pt(t) && rt(t) === "none") {
         n.push({
           type: E.Alpha,
           value: { type: E.None, value: void 0 }
@@ -1398,34 +1398,34 @@ function br(e = "") {
       return;
     }
     if (/\d/.test(o)) {
-      L--, n.push(Ie(t));
+      L--, n.push(ze(t));
       continue;
     }
-    if (At.test(o)) {
-      L--, n.push(mr(t));
+    if (Lt.test(o)) {
+      L--, n.push(br(t));
       continue;
     }
     return;
   }
   return n;
 }
-function vr(e) {
+function wr(e) {
   e._i = 0;
   let t = e[e._i++];
   if (!t || t.type !== E.Function || t.value !== "color" || (t = e[e._i++], t.type !== E.Ident))
     return;
-  const n = $n[t.value];
+  const n = Sn[t.value];
   if (!n)
     return;
-  const o = { mode: n }, a = En(e, !1);
+  const o = { mode: n }, a = Mn(e, !1);
   if (!a)
     return;
-  const r = st(n).channels;
+  const r = ct(n).channels;
   for (let i = 0, l, d; i < r.length; i++)
     l = a[i], d = r[i], l.type !== E.None && (o[d] = l.type === E.Number ? l.value : l.value / 100, d === "alpha" && (o[d] = Math.max(0, Math.min(1, o[d]))));
   return o;
 }
-function En(e, t) {
+function Mn(e, t) {
   const n = [];
   let o;
   for (; e._i < e.length; ) {
@@ -1449,26 +1449,26 @@ function En(e, t) {
     return n.length === 3 && n.push({ type: E.None, value: void 0 }), n.every((a) => a.type !== E.Alpha) ? n : void 0;
   }
 }
-function wr(e, t) {
+function xr(e, t) {
   e._i = 0;
   let n = e[e._i++];
   if (!n || n.type !== E.Function)
     return;
-  let o = En(e, t);
+  let o = Mn(e, t);
   if (o)
     return o.unshift(n.value), o;
 }
-const Sn = (e) => {
+const Tn = (e) => {
   if (typeof e != "string")
     return;
-  const t = br(e), n = t ? wr(t, !0) : void 0;
-  let o, a = 0, r = tt.length;
+  const t = vr(e), n = t ? xr(t, !0) : void 0;
+  let o, a = 0, r = ot.length;
   for (; a < r; )
-    if ((o = tt[a++](e, n)) !== void 0)
+    if ((o = ot[a++](e, n)) !== void 0)
       return o;
-  return t ? vr(t) : void 0;
+  return t ? wr(t) : void 0;
 };
-function xr(e, t) {
+function yr(e, t) {
   if (!t || t[0] !== "rgb" && t[0] !== "rgba")
     return;
   const n = { mode: "rgb" }, [, o, a, r, i] = t;
@@ -1481,81 +1481,81 @@ function xr(e, t) {
       )
     )), n;
 }
-const yr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha: 0 } : void 0, Nr = (e, t, n) => e + n * (t - e), _r = (e) => {
+const Nr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha: 0 } : void 0, _r = (e, t, n) => e + n * (t - e), Cr = (e) => {
   let t = [];
   for (let n = 0; n < e.length - 1; n++) {
     let o = e[n], a = e[n + 1];
     o === void 0 && a === void 0 ? t.push(void 0) : o !== void 0 && a !== void 0 ? t.push([o, a]) : t.push(o !== void 0 ? [o, o] : [a, a]);
   }
   return t;
-}, Cr = (e) => (t) => {
-  let n = _r(t);
+}, $r = (e) => (t) => {
+  let n = Cr(t);
   return (o) => {
     let a = o * n.length, r = o >= 1 ? n.length - 1 : Math.max(Math.floor(a), 0), i = n[r];
     return i === void 0 ? void 0 : e(i[0], i[1], a - r);
   };
-}, le = Cr(Nr), Ot = (e) => {
+}, se = $r(_r), Dt = (e) => {
   let t = !1, n = e.map((o) => o !== void 0 ? (t = !0, o) : 1);
   return t ? n : e;
-}, $r = {
+}, Er = {
   mode: "rgb",
   channels: ["r", "g", "b", "alpha"],
   parse: [
-    xr,
-    sr,
-    pr,
-    ir,
     yr,
+    cr,
+    fr,
+    lr,
+    Nr,
     "srgb"
   ],
   serialize: "srgb",
   interpolate: {
-    r: le,
-    g: le,
-    b: le,
-    alpha: { use: le, fixup: Ot }
+    r: se,
+    g: se,
+    b: se,
+    alpha: { use: se, fixup: Dt }
   },
   gamut: !0,
   white: { r: 1, g: 1, b: 1 },
   black: { r: 0, g: 0, b: 0 }
-}, Ct = (e = 0) => {
+}, $t = (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);
-}, Mn = ({ r: e, g: t, b: n, alpha: o }) => {
+}, An = ({ r: e, g: t, b: n, alpha: o }) => {
   let a = {
     mode: "lrgb",
-    r: Ct(e),
-    g: Ct(t),
-    b: Ct(n)
+    r: $t(e),
+    g: $t(t),
+    b: $t(n)
   };
   return o !== void 0 && (a.alpha = o), a;
-}, $t = (e = 0) => {
+}, Et = (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;
-}, Tn = ({ r: e, g: t, b: n, alpha: o }, a = "rgb") => {
+}, Ln = ({ r: e, g: t, b: n, alpha: o }, a = "rgb") => {
   let r = {
     mode: a,
-    r: $t(e),
-    g: $t(t),
-    b: $t(n)
+    r: Et(e),
+    g: Et(t),
+    b: Et(n)
   };
   return o !== void 0 && (r.alpha = o), r;
-}, ye = (e) => (e = e % 360) < 0 ? e + 360 : e, Er = (e, t) => e.map((n, o, a) => {
+}, Ne = (e) => (e = e % 360) < 0 ? e + 360 : e, Sr = (e, t) => e.map((n, o, a) => {
   if (n === void 0)
     return n;
-  let r = ye(n);
-  return o === 0 || e[o - 1] === void 0 ? r : t(r - ye(a[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), []), An = (e) => Er(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), Sr = (e, t) => {
+  let r = Ne(n);
+  return o === 0 || e[o - 1] === void 0 ? r : t(r - Ne(a[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), []), Pn = (e) => Sr(e, (t) => Math.abs(t) <= 180 ? t : t - 360 * Math.sign(t)), Mr = (e, t) => {
   if (e.h === void 0 || t.h === void 0 || !e.s || !t.s)
     return 0;
-  let n = ye(e.h), o = ye(t.h), a = Math.sin((o - n + 360) / 2 * Math.PI / 180);
+  let n = Ne(e.h), o = Ne(t.h), a = Math.sin((o - n + 360) / 2 * Math.PI / 180);
   return 2 * Math.sqrt(e.s * t.s) * a;
-}, Mr = (e, t) => {
+}, Tr = (e, t) => {
   if (e.h === void 0 || t.h === void 0 || !e.c || !t.c)
     return 0;
-  let n = ye(e.h), o = ye(t.h), a = Math.sin((o - n + 360) / 2 * Math.PI / 180);
+  let n = Ne(e.h), o = Ne(t.h), a = Math.sin((o - n + 360) / 2 * Math.PI / 180);
   return 2 * Math.sqrt(e.c * t.c) * a;
-}, Ln = (e) => {
+}, In = (e) => {
   let t = e.reduce(
     (o, a) => {
       if (a !== void 0) {
@@ -1567,11 +1567,11 @@ const yr = (e) => e === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha:
     { sin: 0, cos: 0 }
   ), n = Math.atan2(t.sin, t.cos) * 180 / Math.PI;
   return n < 0 ? 360 + n : n;
-}, ot = ({ l: e, a: t, b: n, alpha: o }, a = "lch") => {
+}, at = ({ l: e, a: t, b: n, alpha: o }, a = "lch") => {
   t === void 0 && (t = 0), n === void 0 && (n = 0);
   let r = Math.sqrt(t * t + n * n), i = { mode: a, l: e, c: r };
-  return r && (i.h = ye(Math.atan2(n, t) * 180 / Math.PI)), o !== void 0 && (i.alpha = o), i;
-}, rt = ({ l: e, c: t, h: n, alpha: o }, a = "lab") => {
+  return r && (i.h = Ne(Math.atan2(n, t) * 180 / Math.PI)), o !== void 0 && (i.alpha = o), i;
+}, it = ({ l: e, c: t, h: n, alpha: o }, a = "lab") => {
   n === void 0 && (n = 0);
   let r = {
     mode: a,
@@ -1580,13 +1580,13 @@ const yr = (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 && (r.alpha = o), r;
-}, Se = {
+}, Me = {
   X: 0.3457 / 0.3585,
   Y: 1,
   Z: (1 - 0.3457 - 0.3585) / 0.3585
 };
-function Tr({ h: e, s: t, l: n, alpha: o }) {
-  e = ye(e !== void 0 ? e : 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
+function Ar({ h: e, s: t, l: n, alpha: o }) {
+  e = Ne(e !== void 0 ? e : 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let a = n + t * (n < 0.5 ? n : 1 - n), r = a - (a - n) * 2 * Math.abs(e / 60 % 2 - 1), i;
   switch (Math.floor(e / 60)) {
     case 0:
@@ -1612,7 +1612,7 @@ function Tr({ h: e, s: t, l: n, alpha: o }) {
   }
   return i.mode = "rgb", o !== void 0 && (i.alpha = o), i;
 }
-function Ar({ r: e, g: t, b: n, alpha: o }) {
+function Lr({ r: e, g: t, b: n, alpha: o }) {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let a = Math.max(e, t, n), r = Math.min(e, t, n), i = {
     mode: "hsl",
@@ -1621,7 +1621,7 @@ function Ar({ r: e, g: t, b: n, alpha: o }) {
   };
   return a - r !== 0 && (i.h = (a === e ? (t - n) / (a - r) + (t < n) * 6 : a === t ? (n - e) / (a - r) + 2 : (e - t) / (a - r) + 4) * 60), o !== void 0 && (i.alpha = o), i;
 }
-const Lr = (e, t) => {
+const Pr = (e, t) => {
   switch (t) {
     case "deg":
       return +e;
@@ -1632,15 +1632,15 @@ const Lr = (e, t) => {
     case "turn":
       return e * 360;
   }
-}, Pr = new RegExp(
-  `^hsla?\\(\\s*${cr}${Ae}${Ve}${Ae}${Ve}\\s*(?:,\\s*${zt}\\s*)?\\)$`
-), Ir = (e) => {
-  let t = e.match(Pr);
+}, Ir = new RegExp(
+  `^hsla?\\(\\s*${dr}${Le}${He}${Le}${He}\\s*(?:,\\s*${Rt}\\s*)?\\)$`
+), zr = (e) => {
+  let t = e.match(Ir);
   if (!t) return;
   let n = { mode: "hsl" };
-  return t[3] !== void 0 ? n.h = +t[3] : t[1] !== void 0 && t[2] !== void 0 && (n.h = Lr(t[1], t[2])), t[4] !== void 0 && (n.s = Math.min(Math.max(0, t[4] / 100), 1)), t[5] !== void 0 && (n.l = Math.min(Math.max(0, t[5] / 100), 1)), t[6] !== void 0 ? n.alpha = Math.max(0, Math.min(1, t[6] / 100)) : t[7] !== void 0 && (n.alpha = Math.max(0, Math.min(1, +t[7]))), n;
+  return t[3] !== void 0 ? n.h = +t[3] : t[1] !== void 0 && t[2] !== void 0 && (n.h = Pr(t[1], t[2])), t[4] !== void 0 && (n.s = Math.min(Math.max(0, t[4] / 100), 1)), t[5] !== void 0 && (n.l = Math.min(Math.max(0, t[5] / 100), 1)), t[6] !== void 0 ? n.alpha = Math.max(0, Math.min(1, t[6] / 100)) : t[7] !== void 0 && (n.alpha = Math.max(0, Math.min(1, +t[7]))), n;
 };
-function zr(e, t) {
+function Rr(e, t) {
   if (!t || t[0] !== "hsl" && t[0] !== "hsla")
     return;
   const n = { mode: "hsl" }, [, o, a, r, i] = t;
@@ -1667,74 +1667,74 @@ function zr(e, t) {
     )
   )), n;
 }
-const Rr = {
+const Or = {
   mode: "hsl",
   toMode: {
-    rgb: Tr
+    rgb: Ar
   },
   fromMode: {
-    rgb: Ar
+    rgb: Lr
   },
   channels: ["h", "s", "l", "alpha"],
   ranges: {
     h: [0, 360]
   },
   gamut: "rgb",
-  parse: [zr, Ir],
+  parse: [Rr, zr],
   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: le, fixup: An },
-    s: le,
-    l: le,
-    alpha: { use: le, fixup: Ot }
+    h: { use: se, fixup: Pn },
+    s: se,
+    l: se,
+    alpha: { use: se, fixup: Dt }
   },
   difference: {
-    h: Sr
+    h: Mr
   },
   average: {
-    h: Ln
+    h: In
   }
-}, Pn = Math.pow(29, 3) / Math.pow(3, 3), In = Math.pow(6, 3) / Math.pow(29, 3);
-let Et = (e) => Math.pow(e, 3) > In ? Math.pow(e, 3) : (116 * e - 16) / Pn;
-const Or = ({ l: e, a: t, b: n, alpha: o }) => {
+}, zn = Math.pow(29, 3) / Math.pow(3, 3), Rn = Math.pow(6, 3) / Math.pow(29, 3);
+let St = (e) => Math.pow(e, 3) > Rn ? Math.pow(e, 3) : (116 * e - 16) / zn;
+const Dr = ({ l: e, a: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let a = (e + 16) / 116, r = t / 500 + a, i = a - n / 200, l = {
     mode: "xyz50",
-    x: Et(r) * Se.X,
-    y: Et(a) * Se.Y,
-    z: Et(i) * Se.Z
+    x: St(r) * Me.X,
+    y: St(a) * Me.Y,
+    z: St(i) * Me.Z
   };
   return o !== void 0 && (l.alpha = o), l;
-}, Dr = ({ x: e, y: t, z: n, alpha: o }) => {
+}, Vr = ({ x: e, y: t, z: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
-  let a = Tn({
+  let a = Ln({
     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 && (a.alpha = o), a;
-}, Vr = (e) => Dr(Or(e)), Hr = (e) => {
-  let { r: t, g: n, b: o, alpha: a } = Mn(e), r = {
+}, Hr = (e) => Vr(Dr(e)), Br = (e) => {
+  let { r: t, g: n, b: o, alpha: a } = An(e), r = {
     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 a !== void 0 && (r.alpha = a), r;
-}, St = (e) => e > In ? Math.cbrt(e) : (Pn * e + 16) / 116, Br = ({ x: e, y: t, z: n, alpha: o }) => {
+}, Mt = (e) => e > Rn ? Math.cbrt(e) : (zn * e + 16) / 116, Fr = ({ x: e, y: t, z: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
-  let a = St(e / Se.X), r = St(t / Se.Y), i = St(n / Se.Z), l = {
+  let a = Mt(e / Me.X), r = Mt(t / Me.Y), i = Mt(n / Me.Z), l = {
     mode: "lab",
     l: 116 * r - 16,
     a: 500 * (a - r),
     b: 200 * (r - i)
   };
   return o !== void 0 && (l.alpha = o), l;
-}, Fr = (e) => {
-  let t = Br(Hr(e));
+}, Kr = (e) => {
+  let t = Fr(Br(e));
   return e.r === e.b && e.b === e.g && (t.a = t.b = 0), t;
 };
-function Kr(e, t) {
+function jr(e, t) {
   if (!t || t[0] !== "lch")
     return;
   const n = { mode: "lch" }, [, o, a, r, i] = t;
@@ -1759,15 +1759,15 @@ function Kr(e, t) {
     )
   )), n;
 }
-const jr = {
+const Wr = {
   mode: "lch",
   toMode: {
-    lab: rt,
-    rgb: (e) => Vr(rt(e))
+    lab: it,
+    rgb: (e) => Hr(it(e))
   },
   fromMode: {
-    rgb: (e) => ot(Fr(e)),
-    lab: ot
+    rgb: (e) => at(Kr(e)),
+    lab: at
   },
   channels: ["l", "c", "h", "alpha"],
   ranges: {
@@ -1775,21 +1775,21 @@ const jr = {
     c: [0, 150],
     h: [0, 360]
   },
-  parse: [Kr],
+  parse: [jr],
   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: le, fixup: An },
-    c: le,
-    l: le,
-    alpha: { use: le, fixup: Ot }
+    h: { use: se, fixup: Pn },
+    c: se,
+    l: se,
+    alpha: { use: se, fixup: Dt }
   },
   difference: {
-    h: Mr
+    h: Tr
   },
   average: {
-    h: Ln
+    h: In
   }
-}, Wr = ({ r: e, g: t, b: n, alpha: o }) => {
+}, Xr = ({ r: e, g: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let a = Math.cbrt(
     0.412221469470763 * e + 0.5363325372617348 * t + 0.0514459932675022 * n
@@ -1804,10 +1804,10 @@ const jr = {
     b: 0.0259040424655478 * a + 0.7827717124575296 * r - 0.8086757549230774 * i
   };
   return o !== void 0 && (l.alpha = o), l;
-}, Xr = (e) => {
-  let t = Wr(Mn(e));
+}, Yr = (e) => {
+  let t = Xr(An(e));
   return e.r === e.b && e.b === e.g && (t.a = t.b = 0), t;
-}, Yr = ({ l: e, a: t, b: n, alpha: o }) => {
+}, qr = ({ l: e, a: t, b: n, alpha: o }) => {
   e === void 0 && (e = 0), t === void 0 && (t = 0), n === void 0 && (n = 0);
   let a = Math.pow(e + 0.3963377773761749 * t + 0.2158037573099136 * n, 3), r = Math.pow(e - 0.1055613458156586 * t - 0.0638541728258133 * n, 3), i = Math.pow(e - 0.0894841775298119 * t - 1.2914855480194092 * n, 3), l = {
     mode: "lrgb",
@@ -1816,8 +1816,8 @@ const jr = {
     b: -0.0041960761386756 * a - 0.7034186179359362 * r + 1.7076146940746117 * i
   };
   return o !== void 0 && (l.alpha = o), l;
-}, qr = (e) => Tn(Yr(e));
-function Gr(e, t) {
+}, Gr = (e) => Ln(qr(e));
+function Jr(e, t) {
   if (!t || t[0] !== "oklch")
     return;
   const n = { mode: "oklch" }, [, o, a, r, i] = t;
@@ -1845,35 +1845,35 @@ function Gr(e, t) {
     )
   )), n;
 }
-const Jr = {
-  ...jr,
+const Ur = {
+  ...Wr,
   mode: "oklch",
   toMode: {
-    oklab: (e) => rt(e, "oklab"),
-    rgb: (e) => qr(rt(e, "oklab"))
+    oklab: (e) => it(e, "oklab"),
+    rgb: (e) => Gr(it(e, "oklab"))
   },
   fromMode: {
-    rgb: (e) => ot(Xr(e), "oklch"),
-    oklab: (e) => ot(e, "oklch")
+    rgb: (e) => at(Yr(e), "oklch"),
+    oklab: (e) => at(e, "oklch")
   },
-  parse: [Gr],
+  parse: [Jr],
   serialize: (e) => `oklch(${e.l !== void 0 ? e.l : "none"} ${e.c !== void 0 ? e.c : "none"} ${e.h !== void 0 ? e.h : "none"}${e.alpha < 1 ? ` / ${e.alpha}` : ""})`,
   ranges: {
     l: [0, 1],
     c: [0, 0.4],
     h: [0, 360]
   }
-}, Ur = (e) => Math.max(0, Math.min(1, e || 0)), Ze = (e) => Math.round(Ur(e) * 255), zn = he("rgb"), Rn = (e) => {
+}, Zr = (e) => Math.max(0, Math.min(1, e || 0)), et = (e) => Math.round(Zr(e) * 255), On = ge("rgb"), Dn = (e) => {
   if (e === void 0)
     return;
-  let t = Ze(e.r), n = Ze(e.g), o = Ze(e.b);
+  let t = et(e.r), n = et(e.g), o = et(e.b);
   return "#" + (1 << 24 | t << 16 | n << 8 | o).toString(16).slice(1);
-}, Zr = (e) => {
+}, Qr = (e) => {
   if (e === void 0)
     return;
-  let t = Ze(e.alpha !== void 0 ? e.alpha : 1);
-  return Rn(e) + (256 | t).toString(16).slice(1);
-}, Qr = (e) => Rn(zn(e)), ea = (e) => Zr(zn(e)), On = he("rgb"), Dn = (e) => {
+  let t = et(e.alpha !== void 0 ? e.alpha : 1);
+  return Dn(e) + (256 | t).toString(16).slice(1);
+}, ea = (e) => Dn(On(e)), ta = (e) => Qr(On(e)), Vn = ge("rgb"), Hn = (e) => {
   const t = {
     mode: e.mode,
     r: Math.max(0, Math.min(e.r !== void 0 ? e.r : 0, 1)),
@@ -1881,54 +1881,54 @@ const Jr = {
     b: Math.max(0, Math.min(e.b !== void 0 ? e.b : 0, 1))
   };
   return e.alpha !== void 0 && (t.alpha = e.alpha), t;
-}, ta = (e) => Dn(On(e)), Vn = (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 na(e) {
-  return Vn(On(e));
+}, na = (e) => Hn(Vn(e)), Bn = (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 oa(e) {
+  return Bn(Vn(e));
 }
-function Dt(e = "rgb") {
-  const { gamut: t } = st(e);
+function Vt(e = "rgb") {
+  const { gamut: t } = ct(e);
   if (!t)
     return (o) => !0;
-  const n = he(typeof t == "string" ? t : e);
-  return (o) => Vn(n(o));
+  const n = ge(typeof t == "string" ? t : e);
+  return (o) => Bn(n(o));
 }
-function oa(e = "rgb") {
-  const { gamut: t } = st(e);
+function ra(e = "rgb") {
+  const { gamut: t } = ct(e);
   if (!t)
-    return (r) => et(r);
-  const n = typeof t == "string" ? t : e, o = he(n), a = Dt(n);
+    return (r) => nt(r);
+  const n = typeof t == "string" ? t : e, o = ge(n), a = Vt(n);
   return (r) => {
-    const i = et(r);
+    const i = nt(r);
     if (!i)
       return;
     const l = o(i);
     if (a(l))
       return i;
-    const d = Dn(l);
-    return i.mode === d.mode ? d : he(i.mode)(d);
+    const d = Hn(l);
+    return i.mode === d.mode ? d : ge(i.mode)(d);
   };
 }
-function ra(e, t = "lch", n = "rgb") {
-  e = et(e);
-  let o = n === "rgb" ? na : Dt(n), a = n === "rgb" ? ta : oa(n);
+function aa(e, t = "lch", n = "rgb") {
+  e = nt(e);
+  let o = n === "rgb" ? oa : Vt(n), a = n === "rgb" ? na : ra(n);
   if (e === void 0 || o(e)) return e;
-  let r = he(e.mode);
-  e = he(t)(e);
+  let r = ge(e.mode);
+  e = ge(t)(e);
   let i = { ...e, c: 0 };
   if (!o(i))
     return r(a(i));
-  let l = 0, d = e.c !== void 0 ? e.c : 0, c = st(t).ranges.c, u = (c[1] - c[0]) / Math.pow(2, 13), p = i.c;
+  let l = 0, d = e.c !== void 0 ? e.c : 0, c = ct(t).ranges.c, u = (c[1] - c[0]) / Math.pow(2, 13), p = i.c;
   for (; d - l > u; )
     i.c = l + (d - l) * 0.5, o(i) ? (p = i.c, l = i.c) : d = i.c;
   return r(
     o(i) ? i : { ...i, c: p }
   );
 }
-Rt(Jr);
-Rt($r);
-Rt(Rr);
-const Hn = 0.37, Bn = he("oklch"), Fn = he("rgb"), aa = Dt("rgb");
-function Vt(e) {
+Ot(Ur);
+Ot(Er);
+Ot(Or);
+const Fn = 0.37, Kn = ge("oklch"), jn = ge("rgb"), ia = Vt("rgb");
+function Ht(e) {
   return {
     mode: "oklch",
     l: e.l / 100,
@@ -1937,7 +1937,7 @@ function Vt(e) {
     alpha: e.a / 100
   };
 }
-function ia(e) {
+function la(e) {
   return {
     l: (e.l ?? 0) * 100,
     c: e.c ?? 0,
@@ -1952,12 +1952,12 @@ function te(e) {
   const a = (e.a / 100).toFixed(4);
   return `oklch(${t} ${n} ${o} / ${a})`;
 }
-function la(e) {
+function sa(e) {
   const t = { l: 0, c: 0, h: 0, a: 100 };
   try {
-    const n = Sn(e);
+    const n = Tn(e);
     if (!n) return t;
-    const o = Bn(n);
+    const o = Kn(n);
     if (!o) return t;
     const a = o.alpha === void 0 ? 1 : o.alpha;
     return {
@@ -1970,22 +1970,22 @@ function la(e) {
     return t;
   }
 }
-function Gt(e, t) {
-  const n = Vt(e), o = Fn(n);
-  return o ? e.a < 100 ? ea({ ...o, alpha: e.a / 100 }) ?? "#000000ff" : Qr(o) ?? "#000000" : "#000000";
+function Ut(e, t) {
+  const n = Ht(e), o = jn(n);
+  return o ? e.a < 100 ? ta({ ...o, alpha: e.a / 100 }) ?? "#000000ff" : ea(o) ?? "#000000" : "#000000";
 }
-function we(e) {
+function xe(e) {
   const t = {
     mode: "hsl",
     h: e.h,
     s: e.s / 100,
     l: e.l / 100,
     alpha: e.a / 100
-  }, n = Bn(t);
-  return n ? ia(n) : { l: 0, c: 0, h: 0, a: e.a };
+  }, n = Kn(t);
+  return n ? la(n) : { l: 0, c: 0, h: 0, a: e.a };
 }
-function Jt(e) {
-  const t = Vt(e), n = ra(t, "oklch", "rgb");
+function Zt(e) {
+  const t = Ht(e), n = aa(t, "oklch", "rgb");
   return n ? {
     l: (n.l ?? e.l / 100) * 100,
     c: n.c ?? 0,
@@ -1993,19 +1993,19 @@ function Jt(e) {
     a: e.a
   } : { l: e.l, c: 0, h: e.h, a: e.a };
 }
-function sa(e) {
-  const t = Fn(Vt(e));
-  return t ? aa(t) : !1;
+function ca(e) {
+  const t = jn(Ht(e));
+  return t ? ia(t) : !1;
 }
-function Xe(e, t, n) {
+function qe(e, t, n) {
   return Math.min(n, Math.max(t, e));
 }
-function ca(e, t, n) {
+function da(e, t, n) {
   if (n <= 0) return e;
   const o = Math.round((e - t) / n);
   return t + o * n;
 }
-function Ut({
+function Qt({
   config: e,
   value: t,
   gradient: n,
@@ -2015,7 +2015,7 @@ function Ut({
 }) {
   const { label: i, ariaLabel: l, min: d, max: c, step: u, format: p } = e, f = O(u);
   f.current = u;
-  const k = O(!1), _ = O(null), b = Xe((t - d) / (c - d), 0, 1), v = O(o);
+  const g = O(!1), _ = O(null), b = qe((t - d) / (c - d), 0, 1), v = O(o);
   v.current = o;
   const h = O(a);
   h.current = a;
@@ -2030,14 +2030,14 @@ function Ut({
     if (!N) return null;
     const S = N.getBoundingClientRect();
     if (S.width === 0) return null;
-    const B = Xe((m - S.left) / S.width, 0, 1), j = M.current + B * (A.current - M.current), Y = ca(j, M.current, f.current);
-    return Xe(Y, M.current, A.current);
+    const B = qe((m - S.left) / S.width, 0, 1), j = M.current + B * (A.current - M.current), Y = da(j, M.current, f.current);
+    return qe(Y, M.current, A.current);
   }
   X(() => {
     const m = _.current;
     if (!m) return;
     function N(Y) {
-      k.current = !0, h.current();
+      g.current = !0, h.current();
       try {
         m.setPointerCapture(Y.pointerId);
       } catch {
@@ -2046,13 +2046,13 @@ function Ut({
       Q !== null && v.current(Q);
     }
     function S(Y) {
-      if (!k.current) return;
+      if (!g.current) return;
       const Q = C(Y.clientX);
       Q !== null && v.current(Q);
     }
     function B(Y) {
-      if (k.current) {
-        k.current = !1;
+      if (g.current) {
+        g.current = !1;
         try {
           m.releasePointerCapture(Y.pointerId);
         } catch {
@@ -2061,8 +2061,8 @@ function Ut({
       }
     }
     function j(Y) {
-      if (k.current) {
-        k.current = !1;
+      if (g.current) {
+        g.current = !1;
         try {
           m.releasePointerCapture(Y.pointerId);
         } catch {
@@ -2096,13 +2096,13 @@ function Ut({
         default:
           return;
       }
-      m.preventDefault(), o(Xe(t + S, d, c));
+      m.preventDefault(), o(qe(t + S, d, c));
     },
     [t, d, c, u, o]
   );
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-color-picker-slider-row", children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-slider-row", children: [
     /* @__PURE__ */ s("span", { className: "tokenpanel-color-picker-slider-label", children: i }),
-    /* @__PURE__ */ g(
+    /* @__PURE__ */ k(
       "div",
       {
         ref: _,
@@ -2136,8 +2136,8 @@ function Ut({
     /* @__PURE__ */ s("span", { className: "tokenpanel-color-picker-slider-value", children: p(t) })
   ] });
 }
-const Kn = "tokenpanel.colorPicker.mode", Pt = [95, 78, 61, 44, 27, 10], da = [0, 60, 120, 180, 240, 300], ua = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330], pa = 0.18, fa = 320, ha = 400, ga = 520, ka = 440;
-function ma() {
+const Wn = "tokenpanel.colorPicker.mode", It = [95, 78, 61, 44, 27, 10], ua = [0, 60, 120, 180, 240, 300], pa = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330], fa = 0.18, ha = 320, ga = 400, ka = 520, ma = 440;
+function ba() {
   return [
     {
       key: "l",
@@ -2153,7 +2153,7 @@ function ma() {
       label: "C",
       ariaLabel: "Chroma",
       min: 0,
-      max: Hn,
+      max: Fn,
       step: 1e-3,
       format: (e) => e.toFixed(3)
     },
@@ -2177,7 +2177,7 @@ function ma() {
     }
   ];
 }
-function ba() {
+function va() {
   return [
     {
       key: "h",
@@ -2217,47 +2217,47 @@ function ba() {
     }
   ];
 }
-function Zt(e, t, n, o) {
+function en(e, t, n, o) {
   return {
-    l: Pt[e] ?? 50,
-    c: pa,
+    l: It[e] ?? 50,
+    c: fa,
     h: o[t] ?? 0,
     a: n
   };
 }
-function va(e) {
+function wa(e) {
   if (typeof window > "u") return e;
   try {
-    const t = window.localStorage.getItem(Kn);
+    const t = window.localStorage.getItem(Wn);
     if (t === "oklch" || t === "hsl") return t;
   } catch {
   }
   return e;
 }
-function wa(e) {
+function xa(e) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(Kn, e);
+      window.localStorage.setItem(Wn, e);
     } catch {
     }
 }
-function xa(e, t) {
+function ya(e, t) {
   const [n, o] = K(e);
   return X(() => {
     t.current || o(e);
   }, [e, t]), [n, o];
 }
-function jn(e, t, n) {
+function Xn(e, t, n) {
   if (!e) return { position: "fixed" };
   const o = e.getBoundingClientRect(), a = 4, r = 8, i = window.innerWidth, l = window.innerHeight, d = l - o.bottom - a - r, c = o.top - a - r, u = d < n && c > d;
   let p = o.left;
   p + t > i - r && (p = i - r - t), p < r && (p = r);
   let f;
   u ? f = o.top - a - n : f = o.bottom + a, f < r && (f = r), f + n > l - r && (f = l - r - n);
-  const k = { position: "fixed", left: p, top: f };
-  return n > l - 2 * r && (k.top = r, k.maxHeight = l - 2 * r, k.overflowY = "auto"), k;
+  const g = { position: "fixed", left: p, top: f };
+  return n > l - 2 * r && (g.top = r, g.maxHeight = l - 2 * r, g.overflowY = "auto"), g;
 }
-function Wn(e, t) {
+function Yn(e, t) {
   const n = O(t);
   n.current = t, X(() => {
     function o(r) {
@@ -2271,7 +2271,7 @@ function Wn(e, t) {
     };
   }, []);
 }
-function Xn({
+function qn({
   color: e,
   onChange: t,
   label: n,
@@ -2279,15 +2279,15 @@ function Xn({
   anchorRef: a,
   onClose: r
 }) {
-  const i = O(null), l = O(null), d = O(!1), [c, u] = xa(e, d), [p, f] = K(
+  const i = O(null), l = O(null), d = O(!1), [c, u] = ya(e, d), [p, f] = K(
     null
-  ), k = O(null), _ = O(!1), [b, v] = K(
-    () => va(o)
+  ), g = O(null), _ = O(!1), [b, v] = K(
+    () => wa(o)
   ), [h, y] = K("mini"), [M, A] = K(c);
   X(() => {
     (/^#[0-9a-fA-F]{6}$/.test(M) || /^#[0-9a-fA-F]{8}$/.test(M)) && A(c);
-  }, [c]), Wn(i, r);
-  const C = Z(() => la(c), [c]), x = Z(() => or(c), [c]), m = R(
+  }, [c]), Yn(i, r);
+  const C = Z(() => sa(c), [c]), x = Z(() => rr(c), [c]), m = R(
     (w) => {
       const z = w.toLowerCase();
       u(z), A(z), t(z);
@@ -2301,7 +2301,7 @@ function Xn({
         h: w.h ?? C.h,
         a: w.a ?? C.a
       };
-      m(Gt(z));
+      m(Ut(z));
     },
     [C, m]
   ), S = R(
@@ -2312,15 +2312,15 @@ function Xn({
         l: w.l ?? x.l,
         a: w.a ?? x.a
       };
-      m(rr(z.h, z.s, z.l, z.a));
+      m(ar(z.h, z.s, z.l, z.a));
     },
     [x, m]
   ), B = (w) => {
     A(w), (/^#[0-9a-fA-F]{6}$/.test(w) || /^#[0-9a-fA-F]{8}$/.test(w)) && m(w);
-  }, j = h === "expanded" ? ua : da, Y = R(
+  }, j = h === "expanded" ? pa : ua, Y = R(
     (w, z) => {
-      const U = Zt(w, z, C.a, j), F = Jt(U);
-      m(Gt(F));
+      const U = en(w, z, C.a, j), F = Zt(U);
+      m(Ut(F));
     },
     [C.a, j, m]
   ), Q = R(
@@ -2330,7 +2330,7 @@ function Xn({
         W = Math.min(j.length - 1, U + 1);
       else if (w.key === "ArrowLeft") W = Math.max(0, U - 1);
       else if (w.key === "ArrowDown")
-        F = Math.min(Pt.length - 1, z + 1);
+        F = Math.min(It.length - 1, z + 1);
       else if (w.key === "ArrowUp") F = Math.max(0, z - 1);
       else if (w.key === "Enter" || w.key === " ") {
         w.preventDefault(), Y(z, U);
@@ -2341,33 +2341,33 @@ function Xn({
       )?.focus();
     },
     [j, Y]
-  ), se = (w) => {
-    wa(w), v(w);
-  }, oe = Z(() => ma(), []), be = Z(() => ba(), []), ue = Z(() => b === "oklch" ? {
+  ), ce = (w) => {
+    xa(w), v(w);
+  }, oe = Z(() => ba(), []), ve = Z(() => va(), []), pe = Z(() => b === "oklch" ? {
     l: `linear-gradient(90deg in oklch, ${te({ l: 0, c: C.c, h: C.h, a: 100 })}, ${te({ l: 100, c: C.c, h: C.h, a: 100 })})`,
-    c: `linear-gradient(90deg in oklch, ${te({ l: C.l, c: 0, h: C.h, a: 100 })}, ${te({ l: C.l, c: Hn, h: C.h, a: 100 })})`,
+    c: `linear-gradient(90deg in oklch, ${te({ l: C.l, c: 0, h: C.h, a: 100 })}, ${te({ l: C.l, c: Fn, h: C.h, a: 100 })})`,
     h: `linear-gradient(90deg in oklch longer hue, ${te({ l: C.l, c: C.c, h: 0, a: 100 })}, ${te({ l: C.l, c: C.c, h: 360, a: 100 })})`,
     a: `linear-gradient(90deg in oklch, ${te({ ...C, a: 0 })}, ${te({ ...C, a: 100 })})`
   } : {
-    h: `linear-gradient(90deg in oklch longer hue, ${te(we({ h: 0, s: x.s, l: x.l, a: 100 }))}, ${te(we({ h: 360, s: x.s, l: x.l, a: 100 }))})`,
-    s: `linear-gradient(90deg in oklch, ${te(we({ h: x.h, s: 0, l: x.l, a: 100 }))}, ${te(we({ h: x.h, s: 100, l: x.l, a: 100 }))})`,
-    l: `linear-gradient(90deg in oklch, ${te(we({ h: x.h, s: x.s, l: 0, a: 100 }))}, ${te(we({ h: x.h, s: x.s, l: 100, a: 100 }))})`,
-    a: `linear-gradient(90deg in oklch, ${te(we({ ...x, a: 0 }))}, ${te(we({ ...x, a: 100 }))})`
-  }, [b, C, x]), [Ce, T] = K(() => ({
+    h: `linear-gradient(90deg in oklch longer hue, ${te(xe({ h: 0, s: x.s, l: x.l, a: 100 }))}, ${te(xe({ h: 360, s: x.s, l: x.l, a: 100 }))})`,
+    s: `linear-gradient(90deg in oklch, ${te(xe({ h: x.h, s: 0, l: x.l, a: 100 }))}, ${te(xe({ h: x.h, s: 100, l: x.l, a: 100 }))})`,
+    l: `linear-gradient(90deg in oklch, ${te(xe({ h: x.h, s: x.s, l: 0, a: 100 }))}, ${te(xe({ h: x.h, s: x.s, l: 100, a: 100 }))})`,
+    a: `linear-gradient(90deg in oklch, ${te(xe({ ...x, a: 0 }))}, ${te(xe({ ...x, a: 100 }))})`
+  }, [b, C, x]), [$e, T] = K(() => ({
     position: "fixed",
     visibility: "hidden"
   }));
-  uo(() => {
+  po(() => {
     const w = a.current;
     if (!w) {
       T({ position: "fixed", visibility: "hidden" });
       return;
     }
     T(
-      jn(
+      Xn(
         w,
-        h === "mini" ? fa : ga,
-        h === "mini" ? ha : ka
+        h === "mini" ? ha : ka,
+        h === "mini" ? ga : ma
       )
     );
   }, [a, h]), X(() => {
@@ -2378,7 +2378,7 @@ function Xn({
       const $ = i.current;
       if (!$) return;
       const H = $.getBoundingClientRect();
-      k.current = {
+      g.current = {
         pointerId: W.pointerId,
         startX: W.clientX,
         startY: W.clientY,
@@ -2391,13 +2391,13 @@ function Xn({
       }
     }
     function U(W) {
-      if (!_.current || !k.current || W.pointerId !== k.current.pointerId) return;
-      const { startX: $, startY: H, baseLeft: V, baseTop: G } = k.current, I = V + (W.clientX - $), q = G + (W.clientY - H);
+      if (!_.current || !g.current || W.pointerId !== g.current.pointerId) return;
+      const { startX: $, startY: H, baseLeft: V, baseTop: G } = g.current, I = V + (W.clientX - $), q = G + (W.clientY - H);
       f({ left: I, top: q });
     }
     function F(W) {
-      if (!_.current || !k.current || W.pointerId !== k.current.pointerId) return;
-      _.current = !1, k.current = null;
+      if (!_.current || !g.current || W.pointerId !== g.current.pointerId) return;
+      _.current = !1, g.current = null;
       try {
         w.releasePointerCapture(W.pointerId);
       } catch {
@@ -2407,11 +2407,11 @@ function Xn({
       const H = $.getBoundingClientRect(), V = 8, G = window.innerWidth, I = window.innerHeight, q = Math.max(
         V,
         Math.min(G - V - H.width, H.left)
-      ), ce = Math.max(
+      ), de = Math.max(
         V,
         Math.min(I - V - H.height, H.top)
       );
-      f({ left: q, top: ce });
+      f({ left: q, top: de });
     }
     return w.addEventListener("pointerdown", z), w.addEventListener("pointermove", U), w.addEventListener("pointerup", F), w.addEventListener("pointercancel", F), () => {
       w.removeEventListener("pointerdown", z), w.removeEventListener("pointermove", U), w.removeEventListener("pointerup", F), w.removeEventListener("pointercancel", F);
@@ -2419,20 +2419,20 @@ function Xn({
   }, []);
   const D = /^#[0-9a-fA-F]{8}$/.test(c), ee = R(() => {
     d.current = !0;
-  }, []), ge = R(() => {
+  }, []), ke = R(() => {
     d.current = !1;
-  }, []), Le = p ? { position: "fixed", left: p.left, top: p.top } : Ce;
-  return /* @__PURE__ */ g(
+  }, []), Pe = p ? { position: "fixed", left: p.left, top: p.top } : $e;
+  return /* @__PURE__ */ k(
     "div",
     {
       ref: i,
       className: "tokenpanel-color-picker",
       "data-mode-shell": h,
-      style: Le,
+      style: Pe,
       role: "dialog",
       "aria-label": n ? `${n} color picker` : "Color picker",
       children: [
-        /* @__PURE__ */ g("div", { className: "tokenpanel-color-picker-header", children: [
+        /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-header", children: [
           /* @__PURE__ */ s(
             "span",
             {
@@ -2444,7 +2444,7 @@ function Xn({
             }
           ),
           /* @__PURE__ */ s("span", { className: "tokenpanel-color-picker-label", children: n ?? "Color" }),
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ k(
             "div",
             {
               className: "tokenpanel-color-picker-mode-toggle",
@@ -2458,9 +2458,9 @@ function Xn({
                     tabIndex: 0,
                     className: "tokenpanel-color-picker-mode-btn",
                     "aria-pressed": b === "oklch",
-                    onClick: () => se("oklch"),
+                    onClick: () => ce("oklch"),
                     onKeyDown: (w) => {
-                      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), se("oklch"));
+                      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), ce("oklch"));
                     },
                     children: "OKLCH"
                   }
@@ -2472,9 +2472,9 @@ function Xn({
                     tabIndex: 0,
                     className: "tokenpanel-color-picker-mode-btn",
                     "aria-pressed": b === "hsl",
-                    onClick: () => se("hsl"),
+                    onClick: () => ce("hsl"),
                     onKeyDown: (w) => {
-                      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), se("hsl"));
+                      (w.key === "Enter" || w.key === " ") && (w.preventDefault(), ce("hsl"));
                     },
                     children: "HSL"
                   }
@@ -2498,8 +2498,8 @@ function Xn({
             }
           )
         ] }),
-        /* @__PURE__ */ g("div", { className: "tokenpanel-color-picker-top-row", children: [
-          /* @__PURE__ */ g("div", { className: "tokenpanel-color-picker-preview", children: [
+        /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-top-row", children: [
+          /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-preview", children: [
             D && /* @__PURE__ */ s("div", { className: "tokenpanel-color-picker-preview-checkerboard" }),
             /* @__PURE__ */ s(
               "div",
@@ -2527,8 +2527,8 @@ function Xn({
             className: "tokenpanel-color-picker-grid",
             role: "grid",
             "aria-label": "Color presets",
-            children: Pt.map((w, z) => /* @__PURE__ */ s("div", { role: "row", children: j.map((U, F) => {
-              const W = Zt(z, F, C.a, j), $ = sa(W), H = te(Jt(W)), V = Math.abs(C.h - W.h) % 360, G = Math.min(V, 360 - V), I = Math.abs(C.l - W.l) < 2 && G < 5 && Math.abs(C.c - W.c) < 0.05;
+            children: It.map((w, z) => /* @__PURE__ */ s("div", { role: "row", children: j.map((U, F) => {
+              const W = en(z, F, C.a, j), $ = ca(W), H = te(Zt(W)), V = Math.abs(C.h - W.h) % 360, G = Math.min(V, 360 - V), I = Math.abs(C.l - W.l) < 2 && G < 5 && Math.abs(C.c - W.c) < 0.05;
               return /* @__PURE__ */ s(
                 "div",
                 {
@@ -2550,29 +2550,29 @@ function Xn({
           }
         ),
         /* @__PURE__ */ s("div", { className: "tokenpanel-color-picker-sliders", children: b === "oklch" ? oe.map((w) => /* @__PURE__ */ s(
-          Ut,
+          Qt,
           {
             config: w,
             value: C[w.key] ?? 0,
-            gradient: ue[w.key] ?? "",
+            gradient: pe[w.key] ?? "",
             onChange: (z) => N({ [w.key]: z }),
             onDragStart: ee,
-            onDragEnd: ge
+            onDragEnd: ke
           },
           w.key
-        )) : be.map((w) => /* @__PURE__ */ s(
-          Ut,
+        )) : ve.map((w) => /* @__PURE__ */ s(
+          Qt,
           {
             config: w,
             value: x[w.key] ?? 0,
-            gradient: ue[w.key] ?? "",
+            gradient: pe[w.key] ?? "",
             onChange: (z) => S({ [w.key]: z }),
             onDragStart: ee,
-            onDragEnd: ge
+            onDragEnd: ke
           },
           w.key
         )) }),
-        h === "expanded" && /* @__PURE__ */ g("div", { className: "tokenpanel-color-picker-readout", "aria-live": "polite", children: [
+        h === "expanded" && /* @__PURE__ */ k("div", { className: "tokenpanel-color-picker-readout", "aria-live": "polite", children: [
           "L ",
           Math.round(C.l),
           "% · C ",
@@ -2586,9 +2586,9 @@ function Xn({
     }
   );
 }
-const Ht = pn(null);
+const Bt = hn(null);
 function ae({ cssVar: e }) {
-  const t = wn(Ht);
+  const t = yn(Bt);
   if (t === null) return null;
   const { state: n, toggle: o, matchCounts: a } = t, r = n.active[e], i = r !== void 0, l = i ? n.slots[r]?.color : void 0, d = a?.[e], c = J(() => {
     o(e);
@@ -2619,13 +2619,13 @@ function ae({ cssVar: e }) {
           "aria-hidden": "true",
           children: i ? (
             // eye-open: outer path + pupil circle
-            /* @__PURE__ */ g(de, { children: [
+            /* @__PURE__ */ k(ue, { children: [
               /* @__PURE__ */ s("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
               /* @__PURE__ */ s("circle", { cx: "12", cy: "12", r: "3" })
             ] })
           ) : (
             // eye-off: slashed eye
-            /* @__PURE__ */ g(de, { children: [
+            /* @__PURE__ */ k(ue, { children: [
               /* @__PURE__ */ s("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
               /* @__PURE__ */ s("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
             ] })
@@ -2635,17 +2635,17 @@ function ae({ cssVar: e }) {
     }
   );
 }
-function ya({
+function Na({
   anchorRef: e,
   onClose: t
 }) {
-  const n = po(Ht), [o, a] = K(null), r = O(Array.from({ length: 10 }, () => null)), i = O(null), l = O(null);
-  if (Wn(i, t), !n) return null;
-  const { state: d, setSlot: c, setOutlineWidth: u, reset: p, disableAll: f } = n, k = {};
+  const n = fo(Bt), [o, a] = K(null), r = O(Array.from({ length: 10 }, () => null)), i = O(null), l = O(null);
+  if (Yn(i, t), !n) return null;
+  const { state: d, setSlot: c, setOutlineWidth: u, reset: p, disableAll: f } = n, g = {};
   for (const [b, v] of Object.entries(d.active))
-    v in k || (k[v] = b);
-  const _ = jn(e.current ?? null, 370, 520);
-  return o !== null && (l.current = r.current[o] ?? null), /* @__PURE__ */ g(
+    v in g || (g[v] = b);
+  const _ = Xn(e.current ?? null, 370, 520);
+  return o !== null && (l.current = r.current[o] ?? null), /* @__PURE__ */ k(
     "div",
     {
       ref: i,
@@ -2654,9 +2654,9 @@ function ya({
       className: "tokenpanel-highlight-settings-popover",
       style: { ..._, zIndex: 65 },
       children: [
-        /* @__PURE__ */ g("div", { className: "tokenpanel-highlight-settings-header", children: [
+        /* @__PURE__ */ k("div", { className: "tokenpanel-highlight-settings-header", children: [
           /* @__PURE__ */ s("span", { className: "tokenpanel-highlight-settings-header-label", children: "Highlight outline settings" }),
-          /* @__PURE__ */ g("div", { className: "tokenpanel-highlight-settings-outline-control", children: [
+          /* @__PURE__ */ k("div", { className: "tokenpanel-highlight-settings-outline-control", children: [
             /* @__PURE__ */ s(
               "input",
               {
@@ -2679,8 +2679,8 @@ function ya({
           ] })
         ] }),
         /* @__PURE__ */ s("div", { className: "tokenpanel-highlight-settings-list", children: d.slots.map((b, v) => {
-          const h = k[v], y = h !== void 0, M = `${d.outlineWidth}px solid ${b.color}`;
-          return /* @__PURE__ */ g(
+          const h = g[v], y = h !== void 0, M = `${d.outlineWidth}px solid ${b.color}`;
+          return /* @__PURE__ */ k(
             "div",
             {
               className: "tokenpanel-highlight-settings-row",
@@ -2715,9 +2715,9 @@ function ya({
             v
           );
         }) }),
-        /* @__PURE__ */ g("div", { className: "tokenpanel-highlight-settings-footer", children: [
+        /* @__PURE__ */ k("div", { className: "tokenpanel-highlight-settings-footer", children: [
           /* @__PURE__ */ s(
-            Ne,
+            _e,
             {
               onClick: () => f && f(),
               className: "tokenpanel-highlight-settings-reset-btn",
@@ -2725,7 +2725,7 @@ function ya({
             }
           ),
           /* @__PURE__ */ s(
-            Ne,
+            _e,
             {
               onClick: () => p && p(),
               className: "tokenpanel-highlight-settings-reset-btn",
@@ -2734,7 +2734,7 @@ function ya({
           )
         ] }),
         o !== null && /* @__PURE__ */ s(
-          Xn,
+          qn,
           {
             color: d.slots[o]?.color ?? "#ffffff",
             onChange: (b) => {
@@ -2749,7 +2749,7 @@ function ya({
     }
   );
 }
-const Yn = [
+const Gn = [
   { color: "#ff2d2d" },
   // red
   { color: "#ff2dcf" },
@@ -2770,28 +2770,28 @@ const Yn = [
   // yellow
   { color: "#2d6eff" }
   // blue
-], qn = 2;
-function Gn() {
+], Jn = 2;
+function Un() {
   return `${ne().storagePrefix}-highlight-slots`;
 }
-function Jn() {
+function Zn() {
   return `${ne().storagePrefix}-highlight-active`;
 }
-function Un() {
+function Qn() {
   return `${ne().storagePrefix}-highlight-outline-width`;
 }
-function Na(e) {
+function _a(e) {
   const t = new Set(Object.values(e));
   for (let n = 0; n < 10; n++)
     if (!t.has(n)) return n;
   return -1;
 }
-function _a(e, t) {
+function Ca(e, t) {
   if (t in e.active) {
     const { [t]: o, ...a } = e.active;
     return { ...e, active: a };
   }
-  const n = Na(e.active);
+  const n = _a(e.active);
   return n === -1 ? (console.warn(
     "[zudo-design-token-panel] highlight: all 10 slots are in use; cannot highlight",
     t
@@ -2800,29 +2800,29 @@ function _a(e, t) {
     active: { ...e.active, [t]: n }
   };
 }
-function Ca(e) {
+function $a(e) {
   return {
     ...e,
-    slots: Yn.map((t) => ({ ...t })),
-    outlineWidth: qn
+    slots: Gn.map((t) => ({ ...t })),
+    outlineWidth: Jn
   };
 }
-function $a(e) {
+function Ea(e) {
   return { ...e, active: {} };
 }
-function Ea(e, t, n) {
+function Sa(e, t, n) {
   if (t < 0 || t >= e.slots.length) return e;
   const o = e.slots.map((a, r) => r === t ? { ...a, ...n } : a);
   return { ...e, slots: o };
 }
-function Sa(e, t) {
+function Ma(e, t) {
   const n = Math.max(1, t);
   return { ...e, outlineWidth: n };
 }
-function Ma() {
-  let e = Yn.map((o) => ({ ...o })), t = qn, n = {};
+function Ta() {
+  let e = Gn.map((o) => ({ ...o })), t = Jn, n = {};
   try {
-    const o = localStorage.getItem(Gn());
+    const o = localStorage.getItem(Un());
     if (o !== null) {
       const a = JSON.parse(o);
       Array.isArray(a) && a.length === 10 && (e = a.map((r) => ({ color: r.color })));
@@ -2830,7 +2830,7 @@ function Ma() {
   } catch {
   }
   try {
-    const o = localStorage.getItem(Un());
+    const o = localStorage.getItem(Qn());
     if (o !== null) {
       const a = JSON.parse(o);
       typeof a == "number" && a >= 1 && (t = a);
@@ -2838,7 +2838,7 @@ function Ma() {
   } catch {
   }
   try {
-    const o = sessionStorage.getItem(Jn());
+    const o = sessionStorage.getItem(Zn());
     if (o !== null) {
       const a = JSON.parse(o);
       a !== null && typeof a == "object" && !Array.isArray(a) && (n = a);
@@ -2847,21 +2847,21 @@ function Ma() {
   }
   return { slots: e, outlineWidth: t, active: n };
 }
-function ze(e) {
+function Re(e) {
   try {
-    localStorage.setItem(Gn(), JSON.stringify(e.slots));
+    localStorage.setItem(Un(), JSON.stringify(e.slots));
   } catch {
   }
   try {
-    localStorage.setItem(Un(), JSON.stringify(e.outlineWidth));
+    localStorage.setItem(Qn(), JSON.stringify(e.outlineWidth));
   } catch {
   }
   try {
-    sessionStorage.setItem(Jn(), JSON.stringify(e.active));
+    sessionStorage.setItem(Zn(), JSON.stringify(e.active));
   } catch {
   }
 }
-const Qt = {
+const tn = {
   color: {
     sentinelA: "rgb(123, 234, 17)",
     sentinelB: "rgb(231, 17, 234)",
@@ -3065,16 +3065,16 @@ const Qt = {
     longhands: ["mask-image"],
     compounds: ["mask-image"]
   }
-}, Ye = [null, "::before", "::after"], Zn = ".tokenpanel-shell, [data-design-token-panel-modal], #tokenpanel-highlight-mount", Ta = /^(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, Aa = /^(rgb|rgba|hsl|hsla|color|oklch|hwb|lab|lch)\(/i, La = /^#/, Pa = /^-?\d+(\.\d+)?(px|rem|em|vh|vw|vmin|vmax|pt|pc|in|cm|mm|ex|ch|fr)%?$/, Ia = /^-?\d+(\.\d+)?$/, za = /^(cubic-bezier|steps|linear)\(/i, Ra = /^-?(?:\d+\.?\d*|\.\d+)(ms|s)$/i, Oa = /^".*"$/, Da = /^url\(/i;
-function Va(e, t) {
+}, Ge = [null, "::before", "::after"], eo = ".tokenpanel-shell, [data-design-token-panel-modal], #tokenpanel-highlight-mount", Aa = /^(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, La = /^(rgb|rgba|hsl|hsla|color|oklch|hwb|lab|lch)\(/i, Pa = /^#/, Ia = /^-?\d+(\.\d+)?(px|rem|em|vh|vw|vmin|vmax|pt|pc|in|cm|mm|ex|ch|fr)%?$/, za = /^-?\d+(\.\d+)?$/, Ra = /^(cubic-bezier|steps|linear)\(/i, Oa = /^-?(?:\d+\.?\d*|\.\d+)(ms|s)$/i, Da = /^".*"$/, Va = /^url\(/i;
+function Ha(e, t) {
   const n = getComputedStyle(document.documentElement).getPropertyValue(e).trim();
-  return n ? Aa.test(n) || La.test(n) || Ta.test(n) ? "color" : Pa.test(n) ? "length" : Ia.test(n) ? "number" : za.test(n) ? "easing" : Ra.test(n) ? "time" : Oa.test(n) ? "content" : (Da.test(n) && t.push(
+  return n ? La.test(n) || Pa.test(n) || Aa.test(n) ? "color" : Ia.test(n) ? "length" : za.test(n) ? "number" : Ra.test(n) ? "easing" : Oa.test(n) ? "time" : Da.test(n) ? "content" : (Va.test(n) && t.push(
     `type auto-detection inconclusive for ${e}: resolved value starts with url(); defaulting to text — supply kind:'cursor' or kind:'mask-image' explicitly if this is a cursor or mask-image token`
   ), "text") : (t.push(
     `type auto-detection inconclusive for ${e}; defaulting to color — supply kind explicitly if this is incorrect`
   ), "color");
 }
-function It(e, t, n) {
+function zt(e, t, n) {
   for (const o of e)
     if (o instanceof CSSStyleRule) {
       const a = o.style;
@@ -3083,14 +3083,14 @@ function It(e, t, n) {
           n.add(o.selectorText);
           break;
         }
-      o.cssRules?.length && It(
+      o.cssRules?.length && zt(
         o.cssRules,
         t,
         n
       );
-    } else "cssRules" in o && o.cssRules && It(o.cssRules, t, n);
+    } else "cssRules" in o && o.cssRules && zt(o.cssRules, t, n);
 }
-function Ha(e, t) {
+function Ba(e, t) {
   const n = /* @__PURE__ */ new Set();
   for (const o of document.styleSheets) {
     let a;
@@ -3101,17 +3101,17 @@ function Ha(e, t) {
       t.push(`Cross-origin stylesheet skipped: ${r}`);
       continue;
     }
-    It(a, e, n);
+    zt(a, e, n);
   }
   return n;
 }
-function Ba(e) {
+function Fa(e) {
   const t = /* @__PURE__ */ new Set(), n = document.querySelectorAll("[style]");
   for (const o of n)
     o.style.getPropertyValue(e) !== "" && t.add(o);
   return t;
 }
-function Mt(e, t, n, o, a) {
+function Tt(e, t, n, o, a) {
   const r = [], i = document.documentElement, l = /* @__PURE__ */ new WeakSet();
   r.push({
     el: i,
@@ -3121,7 +3121,7 @@ function Mt(e, t, n, o, a) {
   const d = (c) => {
     if (!l.has(c)) {
       try {
-        if (c.closest(Zn) !== null) return;
+        if (c.closest(eo) !== null) return;
       } catch {
       }
       r.push({
@@ -3144,13 +3144,13 @@ function Mt(e, t, n, o, a) {
   for (const c of o) d(c);
   return r;
 }
-function Tt(e, t) {
+function At(e, t) {
   for (let n = t.length - 1; n >= 0; n--) {
     const { el: o, original: a, originalPriority: r } = t[n];
     a ? o.style.setProperty(e, a, r) : o.style.removeProperty(e);
   }
 }
-function en(e, t, n) {
+function nn(e, t, n) {
   let o;
   try {
     o = getComputedStyle(e, t);
@@ -3162,18 +3162,18 @@ function en(e, t, n) {
     a[r] = o.getPropertyValue(r);
   return a;
 }
-function Fa(e, t) {
+function Ka(e, t) {
   if (!e || !t) return null;
   for (const n in e)
     if (e[n] !== t[n]) return n;
   return null;
 }
-function tn(e, t) {
+function on(e, t) {
   let n = e.trim();
   n.startsWith("var(") && (n = n.replace(/^var\(\s*/, "").replace(/\s*\)$/, "").trim());
-  const o = [], a = t?.mode ?? "equality", r = t?.kind ?? Va(n, o), i = Qt[r] ?? Qt.color, l = Ha(n, o), d = Ba(n), c = [document.body, ...document.body.querySelectorAll("*")], u = /* @__PURE__ */ new Set();
+  const o = [], a = t?.mode ?? "equality", r = t?.kind ?? Ha(n, o), i = tn[r] ?? tn.color, l = Ba(n, o), d = Fa(n), c = [document.body, ...document.body.querySelectorAll("*")], u = /* @__PURE__ */ new Set();
   if (a === "equality") {
-    const { sentinelA: f, longhands: k, compounds: _ } = i, b = i.needleA ?? f, v = Mt(
+    const { sentinelA: f, longhands: g, compounds: _ } = i, b = i.needleA ?? f, v = Tt(
       n,
       f,
       l,
@@ -3182,7 +3182,7 @@ function tn(e, t) {
     );
     document.documentElement.offsetHeight;
     for (const h of c)
-      for (const y of Ye) {
+      for (const y of Ge) {
         let M;
         try {
           M = getComputedStyle(h, y);
@@ -3190,7 +3190,7 @@ function tn(e, t) {
           continue;
         }
         let A = !1;
-        for (const C of k)
+        for (const C of g)
           if (M.getPropertyValue(C) === f) {
             A = !0;
             break;
@@ -3208,9 +3208,9 @@ function tn(e, t) {
           break;
         }
       }
-    Tt(n, v);
+    At(n, v);
   } else {
-    const { sentinelA: f, sentinelB: k, longhands: _, compounds: b } = i, v = [..._, ...b], h = Mt(
+    const { sentinelA: f, sentinelB: g, longhands: _, compounds: b } = i, v = [..._, ...b], h = Tt(
       n,
       f,
       l,
@@ -3220,11 +3220,11 @@ function tn(e, t) {
     document.documentElement.offsetHeight;
     const y = /* @__PURE__ */ new Map();
     for (const A of c)
-      y.set(A, Ye.map((C) => en(A, C, v)));
-    Tt(n, h);
-    const M = Mt(
+      y.set(A, Ge.map((C) => nn(A, C, v)));
+    At(n, h);
+    const M = Tt(
       n,
-      k,
+      g,
       l,
       d,
       o
@@ -3232,28 +3232,28 @@ function tn(e, t) {
     document.documentElement.offsetHeight;
     for (const A of c) {
       const C = y.get(A);
-      for (let x = 0; x < Ye.length; x++) {
-        const m = en(A, Ye[x], v);
-        if (Fa(C[x], m) !== null) {
+      for (let x = 0; x < Ge.length; x++) {
+        const m = nn(A, Ge[x], v);
+        if (Ka(C[x], m) !== null) {
           u.add(A);
           break;
         }
       }
     }
-    Tt(n, M);
+    At(n, M);
   }
   const p = [];
   for (const f of u) {
     try {
-      if (f.closest(Zn) !== null) continue;
+      if (f.closest(eo) !== null) continue;
     } catch {
     }
     p.push(f);
   }
   return { elements: p, warnings: o };
 }
-const $e = 200, Ka = 49;
-function nn(e, t) {
+const Ee = 200, ja = 49;
+function rn(e, t) {
   return {
     position: "fixed",
     top: `${e.top}px`,
@@ -3266,21 +3266,21 @@ function nn(e, t) {
     // box-shadow inset draws the same ring without relying on outline.
     boxShadow: `inset 0 0 0 ${t.outlineWidth}px ${t.color}`,
     pointerEvents: "none",
-    zIndex: String(Ka),
+    zIndex: String(ja),
     boxSizing: "border-box"
   };
 }
-function ja(e, t) {
+function Wa(e, t) {
   for (const n of Object.keys(t))
     e.style[n] = t[n];
 }
-function Wa({ items: e }) {
-  const t = e.length > $e ? e.slice(0, $e) : e, n = Te(!1);
-  e.length > $e && !n.current && (n.current = !0, console.warn(
-    `HighlightOverlay: received ${e.length} items (max ${$e}). Only the first ${$e} overlays will be rendered.`
-  )), e.length <= $e && (n.current = !1);
-  const o = Te([]);
-  return _e(() => {
+function Xa({ items: e }) {
+  const t = e.length > Ee ? e.slice(0, Ee) : e, n = Ae(!1);
+  e.length > Ee && !n.current && (n.current = !0, console.warn(
+    `HighlightOverlay: received ${e.length} items (max ${Ee}). Only the first ${Ee} overlays will be rendered.`
+  )), e.length <= Ee && (n.current = !1);
+  const o = Ae([]);
+  return Ce(() => {
     if (t.length === 0) return;
     let a;
     function r() {
@@ -3288,15 +3288,15 @@ function Wa({ items: e }) {
         const l = o.current[i];
         if (!l) continue;
         const d = t[i].element.getBoundingClientRect();
-        ja(l, nn(d, t[i].slot));
+        Wa(l, rn(d, t[i].slot));
       }
       a = requestAnimationFrame(r);
     }
     return a = requestAnimationFrame(r), () => {
       cancelAnimationFrame(a);
     };
-  }, [t]), t.length === 0 ? null : /* @__PURE__ */ s(de, { children: t.map((a, r) => {
-    const i = a.element.getBoundingClientRect(), l = nn(i, a.slot);
+  }, [t]), t.length === 0 ? null : /* @__PURE__ */ s(ue, { children: t.map((a, r) => {
+    const i = a.element.getBoundingClientRect(), l = rn(i, a.slot);
     return /* @__PURE__ */ s(
       "div",
       {
@@ -3311,7 +3311,7 @@ function Wa({ items: e }) {
     );
   }) });
 }
-function Xa(e) {
+function Ya(e) {
   if (e)
     switch (e.kind) {
       case "color":
@@ -3342,7 +3342,7 @@ function Xa(e) {
         return "mask-image";
     }
 }
-function Ya() {
+function qa() {
   const e = /* @__PURE__ */ new Map();
   for (const t of ne().tabs)
     for (const n of t.tiers)
@@ -3350,69 +3350,69 @@ function Ya() {
         e.set(o.cssVar, o.type);
   return e;
 }
-const qa = /* @__PURE__ */ new Set(["text", "cursor", "content", "mask-image"]);
-function Ga(e) {
-  return e ? !qa.has(e.kind) : !0;
+const Ga = /* @__PURE__ */ new Set(["text", "cursor", "content", "mask-image"]);
+function Ja(e) {
+  return e ? !Ga.has(e.kind) : !0;
 }
-const on = "tokenpanel-highlight-mount";
-function rn() {
+const an = "tokenpanel-highlight-mount";
+function ln() {
   if (typeof document > "u") return null;
-  const e = document.getElementById(on);
+  const e = document.getElementById(an);
   if (e) return e;
   const t = document.createElement("div");
-  return t.id = on, document.body.appendChild(t), t;
+  return t.id = an, document.body.appendChild(t), t;
 }
-function Ja({ items: e }) {
-  const t = Te(null), [n, o] = De(0);
-  return _e(() => {
-    (!t.current || !t.current.isConnected) && (t.current = rn(), o((r) => r + 1));
+function Ua({ items: e }) {
+  const t = Ae(null), [n, o] = Ve(0);
+  return Ce(() => {
+    (!t.current || !t.current.isConnected) && (t.current = ln(), o((r) => r + 1));
     function a() {
-      (!t.current || !t.current.isConnected) && (t.current = rn(), o((r) => r + 1));
+      (!t.current || !t.current.isConnected) && (t.current = ln(), o((r) => r + 1));
     }
     return typeof window < "u" && window.addEventListener("astro:after-swap", a), () => {
       typeof window < "u" && window.removeEventListener("astro:after-swap", a);
     };
-  }, []), t.current ? hn(/* @__PURE__ */ s(Wa, { items: e }), t.current) : null;
+  }, []), t.current ? kn(/* @__PURE__ */ s(Xa, { items: e }), t.current) : null;
 }
-function Ua({ children: e }) {
-  const [t, n] = De(Ma), [o, a] = De(0), [r, i] = De(0), l = Te(/* @__PURE__ */ new Map()), d = J((v) => {
+function Za({ children: e }) {
+  const [t, n] = Ve(Ta), [o, a] = Ve(0), [r, i] = Ve(0), l = Ae(/* @__PURE__ */ new Map()), d = J((v) => {
     n((h) => {
-      const y = _a(h, v);
-      return ze(y), y;
+      const y = Ca(h, v);
+      return Re(y), y;
     });
   }, []), c = J((v, h) => {
     n((y) => {
-      const M = Ea(y, v, h);
-      return ze(M), M;
+      const M = Sa(y, v, h);
+      return Re(M), M;
     });
   }, []), u = J((v) => {
     n((h) => {
-      const y = Sa(h, v);
-      return ze(y), y;
+      const y = Ma(h, v);
+      return Re(y), y;
     });
   }, []), p = J(() => {
     n((v) => {
-      const h = Ca(v);
-      return ze(h), h;
+      const h = $a(v);
+      return Re(h), h;
     });
   }, []), f = J(() => {
     n((v) => {
-      const h = $a(v);
-      return ze(h), h;
+      const h = Ea(v);
+      return Re(h), h;
     });
   }, []);
-  _e(() => {
+  Ce(() => {
     let v = null;
     function h() {
       v && v.disconnect(), v = new MutationObserver((M) => {
         for (const A of M) {
           for (const C of A.addedNodes)
-            if (an(C)) {
+            if (sn(C)) {
               a((x) => x + 1);
               return;
             }
           for (const C of A.removedNodes)
-            if (an(C)) {
+            if (sn(C)) {
               a((x) => x + 1);
               return;
             }
@@ -3426,7 +3426,7 @@ function Ua({ children: e }) {
     return typeof window < "u" && window.addEventListener("astro:after-swap", y), () => {
       v?.disconnect(), typeof window < "u" && window.removeEventListener("astro:after-swap", y);
     };
-  }, []), _e(() => {
+  }, []), Ce(() => {
     if (typeof window > "u") return;
     const v = new MutationObserver(() => {
       i((h) => h + 1), l.current.clear();
@@ -3436,20 +3436,20 @@ function Ua({ children: e }) {
       attributeFilter: ["data-theme", "class"]
     }), () => v.disconnect();
   }, []);
-  const { items: k, matchCounts: _ } = Yt(() => {
-    const v = Ya();
+  const { items: g, matchCounts: _ } = Gt(() => {
+    const v = qa();
     function h(A) {
       const C = `${A}|${o}|${r}`, x = l.current.get(C);
       if (x) return x;
-      const m = v.get(A), N = Xa(m), S = N ? { kind: N } : {}, B = tn(A, S);
+      const m = v.get(A), N = Ya(m), S = N ? { kind: N } : {}, B = on(A, S);
       let j, Y;
-      if (Ga(m)) {
-        const se = tn(A, { ...S, mode: "differential" }), oe = new Set(B.elements);
-        for (const ue of se.elements) oe.add(ue);
+      if (Ja(m)) {
+        const ce = on(A, { ...S, mode: "differential" }), oe = new Set(B.elements);
+        for (const pe of ce.elements) oe.add(pe);
         j = Array.from(oe);
-        const be = new Set(B.warnings);
-        for (const ue of se.warnings) be.add(ue);
-        Y = Array.from(be);
+        const ve = new Set(B.warnings);
+        for (const pe of ce.warnings) ve.add(pe);
+        Y = Array.from(ve);
       } else
         j = B.elements, Y = B.warnings;
       const Q = { elements: j, warnings: Y };
@@ -3469,24 +3469,24 @@ function Ua({ children: e }) {
           y.push({ element: S, slot: { color: N.color, outlineWidth: t.outlineWidth } });
     }
     return { items: y, matchCounts: M };
-  }, [t.active, t.slots, t.outlineWidth, o, r]), b = Yt(
+  }, [t.active, t.slots, t.outlineWidth, o, r]), b = Gt(
     () => ({ state: t, toggle: d, setSlot: c, setOutlineWidth: u, reset: p, disableAll: f, matchCounts: _ }),
     [t, d, c, u, p, f, _]
   );
-  return /* @__PURE__ */ g(de, { children: [
-    /* @__PURE__ */ s(Ht.Provider, { value: b, children: e }),
-    /* @__PURE__ */ s(Ja, { items: k })
+  return /* @__PURE__ */ k(ue, { children: [
+    /* @__PURE__ */ s(Bt.Provider, { value: b, children: e }),
+    /* @__PURE__ */ s(Ua, { items: g })
   ] });
 }
-function an(e) {
+function sn(e) {
   if (e.nodeType !== Node.ELEMENT_NODE) return !1;
   const t = e;
   return t.tagName === "STYLE" || t.tagName === "LINK" && t.getAttribute("rel") === "stylesheet";
 }
-const Qn = pn(null);
-function Za({ state: e }) {
-  const t = Te(null);
-  return _e(() => {
+const to = hn(null);
+function Qa({ state: e }) {
+  const t = Ae(null);
+  return Ce(() => {
     if (!e.visible || !e.triggerEl || !t.current) return;
     const n = e.triggerEl, o = t.current, a = n.getBoundingClientRect(), r = o.offsetWidth, i = o.offsetHeight, l = 6, d = 6;
     let c = a.left + a.width / 2 - r / 2;
@@ -3505,35 +3505,35 @@ function Za({ state: e }) {
     }
   );
 }
-function Qa({ children: e }) {
-  const [t, n] = De({
+function ei({ children: e }) {
+  const [t, n] = Ve({
     visible: !1,
     text: "",
     triggerEl: null
-  }), o = Te(null), a = J((l, d) => {
+  }), o = Ae(null), a = J((l, d) => {
     o.current = l, n({ visible: !0, text: d, triggerEl: l });
   }, []), r = J((l) => {
     o.current === l && (o.current = null, n({ visible: !1, text: "", triggerEl: null }));
   }, []), i = J(() => {
     o.current = null, n({ visible: !1, text: "", triggerEl: null });
   }, []);
-  return _e(() => {
+  return Ce(() => {
     function l(d) {
       d.key === "Escape" && i();
     }
     return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
-  }, [i]), _e(() => {
+  }, [i]), Ce(() => {
     function l() {
       o.current && i();
     }
     return window.addEventListener("scroll", l, !0), () => window.removeEventListener("scroll", l, !0);
-  }, [i]), /* @__PURE__ */ g(Qn.Provider, { value: { show: a, hide: r }, children: [
+  }, [i]), /* @__PURE__ */ k(to.Provider, { value: { show: a, hide: r }, children: [
     e,
-    typeof document < "u" && hn(/* @__PURE__ */ s(Za, { state: t }), document.body)
+    typeof document < "u" && kn(/* @__PURE__ */ s(Qa, { state: t }), document.body)
   ] });
 }
-function eo(e) {
-  const t = wn(Qn), n = J(
+function Ft(e) {
+  const t = yn(to), n = J(
     (i) => {
       t && t.show(i.currentTarget, e);
     },
@@ -3556,7 +3556,7 @@ function eo(e) {
   );
   return { onMouseEnter: n, onMouseLeave: o, onFocusIn: a, onFocusOut: r };
 }
-function ei(e, t, n) {
+function ti(e, t, n) {
   X(() => {
     if (!n) return;
     function o(r) {
@@ -3576,7 +3576,7 @@ function ei(e, t, n) {
     return window.addEventListener("scroll", o, !0), () => window.removeEventListener("scroll", o, !0);
   }, [n, t]);
 }
-function ti(e, t, n, o) {
+function ni(e, t, n, o) {
   if (!e) return { position: "fixed", zIndex: 70, ...o };
   const a = e.getBoundingClientRect(), r = 4, i = 8, l = window.innerHeight - a.bottom - i, d = a.top - i, c = l < n && d > l;
   let u = a.left;
@@ -3589,7 +3589,7 @@ function ti(e, t, n, o) {
   };
   return c ? p.bottom = window.innerHeight - a.top + r : p.top = a.bottom + r, p;
 }
-const ln = it(function({
+const cn = Ke(function({
   color: t,
   onChange: n,
   index: o,
@@ -3597,12 +3597,12 @@ const ln = it(function({
   cssVar: r
 }) {
   const [i, l] = K(!1), d = O(null), c = R(() => l(!1), []), u = R(
-    (k) => {
-      n(o, k);
+    (g) => {
+      n(o, g);
     },
     [n, o]
-  ), p = R(() => l((k) => !k), []), f = eo(`${a}: ${t}`);
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-color-swatch-wrap", children: [
+  ), p = R(() => l((g) => !g), []), f = Ft(`${a}: ${t}`);
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-color-swatch-wrap", children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -3612,8 +3612,8 @@ const ln = it(function({
         className: "tokenpanel-color-swatch-button",
         style: { backgroundColor: t },
         onClick: p,
-        onKeyDown: (k) => {
-          (k.key === "Enter" || k.key === " ") && (k.preventDefault(), p());
+        onKeyDown: (g) => {
+          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), p());
         },
         "aria-label": `${a}: ${t}`,
         "aria-expanded": i,
@@ -3621,7 +3621,7 @@ const ln = it(function({
       }
     ),
     i && /* @__PURE__ */ s(
-      Xn,
+      qn,
       {
         color: t,
         onChange: u,
@@ -3629,12 +3629,12 @@ const ln = it(function({
         anchorRef: d
       }
     ),
-    /* @__PURE__ */ g("div", { className: "tokenpanel-color-swatch-label-row", children: [
+    /* @__PURE__ */ k("div", { className: "tokenpanel-color-swatch-label-row", children: [
       /* @__PURE__ */ s("span", { className: "tokenpanel-color-swatch-label", children: a }),
       r && /* @__PURE__ */ s(ae, { cssVar: r })
     ] })
   ] });
-}), qe = it(function({
+}), Je = Ke(function({
   label: t,
   idKey: n,
   value: o,
@@ -3646,14 +3646,14 @@ const ln = it(function({
   foreground: c,
   cssVar: u
 }) {
-  const p = r ?? ((x) => `--zd-p${x}`), [f, k] = K(!1), _ = O(null), b = O(null), v = R(() => k(!1), []), h = R(() => k((x) => !x), []), y = o === "bg" ? d ?? "#000000" : o === "fg" ? c ?? "#ffffff" : a[o] ?? "#000000", M = o === "bg" ? "bg" : o === "fg" ? "fg" : `p${o}`;
-  ei(_, v, f);
-  const A = eo(`${t}: ${M}`);
+  const p = r ?? ((x) => `--zd-p${x}`), [f, g] = K(!1), _ = O(null), b = O(null), v = R(() => g(!1), []), h = R(() => g((x) => !x), []), y = o === "bg" ? d ?? "#000000" : o === "fg" ? c ?? "#ffffff" : a[o] ?? "#000000", M = o === "bg" ? "bg" : o === "fg" ? "fg" : `p${o}`;
+  ti(_, v, f);
+  const A = Ft(`${t}: ${M}`);
   function C(x) {
-    i(n, x), k(!1);
+    i(n, x), g(!1);
   }
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-palette-selector", ref: _, children: [
-    /* @__PURE__ */ g(
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-palette-selector", ref: _, children: [
+    /* @__PURE__ */ k(
       "div",
       {
         ref: b,
@@ -3694,17 +3694,17 @@ const ln = it(function({
       }
     ),
     u && /* @__PURE__ */ s(ae, { cssVar: u }),
-    f && /* @__PURE__ */ g(
+    f && /* @__PURE__ */ k(
       "div",
       {
         role: "listbox",
         "aria-label": `${t} color options`,
         className: "tokenpanel-palette-options",
-        style: ti(b.current, 440, l ? 160 : 120),
+        style: ni(b.current, 440, l ? 160 : 120),
         children: [
           l && l.length > 0 && /* @__PURE__ */ s("div", { className: "tokenpanel-palette-options-extras", children: l.map((x) => {
             const m = x === "bg" ? d ?? "#000000" : c ?? "#ffffff", N = o === x;
-            return /* @__PURE__ */ g(
+            return /* @__PURE__ */ k(
               "div",
               {
                 role: "option",
@@ -3746,7 +3746,7 @@ const ln = it(function({
     )
   ] });
 });
-function ni({
+function oi({
   tab: e,
   state: t,
   persistColor: n,
@@ -3754,7 +3754,7 @@ function ni({
   secondaryState: a,
   persistSecondary: r
 }) {
-  const i = Z(() => Xt(e), [e]), l = Z(
+  const i = Z(() => qt(e), [e]), l = Z(
     () => i ?? {
       id: "stub",
       paletteSize: 0,
@@ -3769,16 +3769,16 @@ function ni({
     },
     [i]
   ), d = Z(
-    () => o ? Xt(o) ?? null : null,
+    () => o ? qt(o) ?? null : null,
     [o]
   ), c = ne().colorPresets ?? {}, u = Z(
     () => ({ ...c, ...l.colorSchemes }),
     [c, l.colorSchemes]
-  ), p = Z(() => Object.keys(l.colorSchemes), [l.colorSchemes]), f = Z(() => Object.keys(c).sort(), [c]), k = l.label ?? l.id.toUpperCase(), _ = d?.label ?? d?.id.toUpperCase() ?? "", b = R(
-    (m) => pe(l, m),
+  ), p = Z(() => Object.keys(l.colorSchemes), [l.colorSchemes]), f = Z(() => Object.keys(c).sort(), [c]), g = l.label ?? l.id.toUpperCase(), _ = d?.label ?? d?.id.toUpperCase() ?? "", b = R(
+    (m) => fe(l, m),
     [l]
   ), v = R(
-    (m) => d ? pe(d, m) : "",
+    (m) => d ? fe(d, m) : "",
     [d]
   ), h = R(
     (m, N) => {
@@ -3821,13 +3821,13 @@ function ni({
     (m) => {
       const N = u[m];
       if (!N) return;
-      const S = gn(N);
-      n(() => S), go(S.shikiTheme);
+      const S = mn(N);
+      n(() => S), ko(S.shikiTheme);
     },
     [n]
   );
-  return /* @__PURE__ */ s(Qa, { children: /* @__PURE__ */ g("div", { className: "tokenpanel-tab-content", children: [
-    /* @__PURE__ */ s("div", { className: "tokenpanel-tab-actions", children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-content", children: [
+    /* @__PURE__ */ s("div", { className: "tokenpanel-tab-actions", children: /* @__PURE__ */ k(
       "select",
       {
         onChange: (m) => {
@@ -3844,9 +3844,9 @@ function ni({
         ]
       }
     ) }),
-    /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", children: [
-      /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
-        k,
+    /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", children: [
+      /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
+        g,
         " — Palette"
       ] }),
       /* @__PURE__ */ s("div", { className: "tokenpanel-color-palette-grid", children: t.palette.map((m, N) => (
@@ -3854,27 +3854,27 @@ function ni({
         // hand `handlePaletteChange` directly — no inline arrow, memo
         // stays effective.
         /* @__PURE__ */ s(
-          ln,
+          cn,
           {
             color: m,
             index: N,
-            label: pe(l, N),
-            cssVar: pe(l, N),
+            label: fe(l, N),
+            cssVar: fe(l, N),
             onChange: h
           },
           N
         )
       )) })
     ] }),
-    /* @__PURE__ */ g("div", { className: "tokenpanel-tab-content", children: [
-      /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", children: [
-        /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
-          k,
+    /* @__PURE__ */ k("div", { className: "tokenpanel-tab-content", children: [
+      /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", children: [
+        /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
+          g,
           " — Base"
         ] }),
-        /* @__PURE__ */ g("div", { className: "tokenpanel-color-base-grid", children: [
+        /* @__PURE__ */ k("div", { className: "tokenpanel-color-base-grid", children: [
           /* @__PURE__ */ s(
-            qe,
+            Je,
             {
               label: "background (bg)",
               idKey: "background",
@@ -3886,7 +3886,7 @@ function ni({
             }
           ),
           /* @__PURE__ */ s(
-            qe,
+            Je,
             {
               label: "foreground (fg)",
               idKey: "foreground",
@@ -3899,15 +3899,15 @@ function ni({
           )
         ] })
       ] }),
-      /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", children: [
-        /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
-          k,
+      /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", children: [
+        /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
+          g,
           " — Semantic Tokens"
         ] }),
         /* @__PURE__ */ s("div", { className: "tokenpanel-color-base-grid", children: Object.entries(l.semanticDefaults).map(([m, N]) => {
           const S = l.semanticCssNames[m];
           return /* @__PURE__ */ s(
-            qe,
+            Je,
             {
               label: S ?? m,
               idKey: m,
@@ -3923,24 +3923,24 @@ function ni({
           );
         }) })
       ] }),
-      d && a && /* @__PURE__ */ g(de, { children: [
-        /* @__PURE__ */ g(
+      d && a && /* @__PURE__ */ k(ue, { children: [
+        /* @__PURE__ */ k(
           "div",
           {
             className: "tokenpanel-tab-section",
             "data-testid": "tokenpanel-secondary-palette-section",
             children: [
-              /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
+              /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
                 _,
                 " — Palette"
               ] }),
               /* @__PURE__ */ s("div", { className: "tokenpanel-color-palette-grid--secondary", children: a.palette.map((m, N) => /* @__PURE__ */ s(
-                ln,
+                cn,
                 {
                   color: m,
                   index: N,
-                  label: pe(d, N),
-                  cssVar: pe(d, N),
+                  label: fe(d, N),
+                  cssVar: fe(d, N),
                   onChange: y
                 },
                 N
@@ -3948,20 +3948,20 @@ function ni({
             ]
           }
         ),
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ k(
           "div",
           {
             className: "tokenpanel-tab-section",
             "data-testid": "tokenpanel-secondary-semantic-section",
             children: [
-              /* @__PURE__ */ g("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
+              /* @__PURE__ */ k("div", { role: "heading", "aria-level": 3, className: "tokenpanel-tab-section-heading tokenpanel-tab-section-heading--color", children: [
                 _,
                 " — Semantic Tokens"
               ] }),
               /* @__PURE__ */ s("div", { className: "tokenpanel-color-base-grid", children: Object.entries(d.semanticDefaults).map(([m, N]) => {
                 const S = d.semanticCssNames[m];
                 return /* @__PURE__ */ s(
-                  qe,
+                  Je,
                   {
                     label: S ?? m,
                     idKey: m,
@@ -3979,46 +3979,54 @@ function ni({
         )
       ] })
     ] })
-  ] }) });
+  ] });
 }
-const Be = "__literal__", sn = 28;
-function oi(e) {
-  return e.length <= sn ? e : e.slice(0, sn - 1) + "…";
+const Fe = "__literal__", dn = 28;
+function ri(e) {
+  return e.length <= dn ? e : e.slice(0, dn - 1) + "…";
 }
-function cn(e, t) {
+function un(e, t) {
   return e.tiers.find((n) => n.id === t);
 }
-function ri(e, t) {
+function ai(e, t) {
   return e.items.find((n) => n.id === t);
 }
-function ai({ tab: e, tierId: t, itemId: n, value: o, onChange: a, previewValueFor: r }) {
-  const l = cn(e, t)?.referencesTier ?? "", d = l ? cn(e, l) : void 0, c = d?.items ?? [], u = d && ri(d, o) ? o : c[0]?.id ?? "";
-  return /* @__PURE__ */ s("div", { className: "tokenpanel-tier-ref-selector", children: /* @__PURE__ */ g(
+function ii({ tab: e, tierId: t, itemId: n, value: o, onChange: a, previewValueFor: r }) {
+  const l = un(e, t)?.referencesTier ?? "", d = l ? un(e, l) : void 0, c = d?.items ?? [], u = d && ai(d, o) ? o : c[0]?.id ?? "";
+  return /* @__PURE__ */ s("div", { className: "tokenpanel-tier-ref-selector", children: /* @__PURE__ */ k(
     "select",
     {
       className: "tokenpanel-tier-ref-select",
-      value: u === "" ? Be : u,
+      value: u === "" ? Fe : u,
       onChange: (f) => {
         a(n, f.currentTarget.value);
       },
       "aria-label": `${n} tier reference`,
       children: [
         c.map((f) => {
-          const k = oi(r(f.id));
-          return /* @__PURE__ */ g("option", { value: f.id, children: [
+          const g = ri(r(f.id));
+          return /* @__PURE__ */ k("option", { value: f.id, children: [
             f.cssVar,
             " (",
-            k,
+            g,
             ")"
           ] }, f.id);
         }),
-        /* @__PURE__ */ s("option", { value: Be, children: "Literal…" })
+        /* @__PURE__ */ s("option", { value: Fe, children: "Literal…" })
       ]
     }
   ) });
 }
-const ct = it(ai);
-function ii({ item: e, value: t, onChange: n }) {
+const dt = Ke(ii);
+function li({ cssVar: e, label: t, className: n }) {
+  const o = Ft(e);
+  return /* @__PURE__ */ k("span", { className: n ?? "tokenpanel-row-label", ...o, children: [
+    e,
+    t && t !== e && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: t })
+  ] });
+}
+const le = Ke(li);
+function si({ item: e, value: t, onChange: n }) {
   const o = e.type, a = e.readonly === !0, r = e.pill, i = r?.value ?? "", l = r?.customDefault ?? "", d = r ? t === i : !1, c = O(d ? l : t);
   X(() => {
     d || (c.current = t);
@@ -4032,7 +4040,7 @@ function ii({ item: e, value: t, onChange: n }) {
   switch (o.kind) {
     case "length":
     case "number": {
-      const p = o.kind === "length" ? o.unit : "", f = parseFloat(t), k = Number.isFinite(f) ? f : 0, [_, b] = K(String(k));
+      const p = o.kind === "length" ? o.unit : "", f = parseFloat(t), g = Number.isFinite(f) ? f : 0, [_, b] = K(String(g));
       X(() => {
         b(String(Number.isFinite(parseFloat(t)) ? parseFloat(t) : 0));
       }, [t]);
@@ -4043,13 +4051,10 @@ function ii({ item: e, value: t, onChange: n }) {
         Number.isFinite(x) && n(e.id, p ? `${x}${p}` : String(x));
       }, h = () => {
         const A = parseFloat(_);
-        Number.isFinite(A) || b(String(k));
-      }, y = a || r !== void 0 && d, M = /* @__PURE__ */ s("div", { className: "tokenpanel-row--stacked", "data-testid": `tier-item-${e.id}`, children: /* @__PURE__ */ g("div", { className: "tokenpanel-row-head", children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: e.cssVar, children: [
-          e.cssVar,
-          e.label !== e.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: e.label })
-        ] }),
-        /* @__PURE__ */ g("div", { className: "tokenpanel-row-input-group", children: [
+        Number.isFinite(A) || b(String(g));
+      }, y = a || r !== void 0 && d, M = /* @__PURE__ */ s("div", { className: "tokenpanel-row--stacked", "data-testid": `tier-item-${e.id}`, children: /* @__PURE__ */ k("div", { className: "tokenpanel-row-head", children: [
+        /* @__PURE__ */ s(le, { cssVar: e.cssVar, label: e.label }),
+        /* @__PURE__ */ k("div", { className: "tokenpanel-row-input-group", children: [
           /* @__PURE__ */ s(
             "input",
             {
@@ -4067,8 +4072,8 @@ function ii({ item: e, value: t, onChange: n }) {
         ] }),
         /* @__PURE__ */ s(ae, { cssVar: e.cssVar })
       ] }) });
-      return r ? /* @__PURE__ */ g("div", { className: "tokenpanel-row--column", children: [
-        /* @__PURE__ */ g("label", { className: "tokenpanel-pill-toggle", children: [
+      return r ? /* @__PURE__ */ k("div", { className: "tokenpanel-row--column", children: [
+        /* @__PURE__ */ k("label", { className: "tokenpanel-pill-toggle", children: [
           /* @__PURE__ */ s(
             "input",
             {
@@ -4079,7 +4084,7 @@ function ii({ item: e, value: t, onChange: n }) {
               "aria-label": `${e.cssVar} pill toggle`
             }
           ),
-          /* @__PURE__ */ g("span", { className: "tokenpanel-pill-toggle-text", children: [
+          /* @__PURE__ */ k("span", { className: "tokenpanel-pill-toggle-text", children: [
             "Pill (",
             i,
             ")"
@@ -4089,18 +4094,15 @@ function ii({ item: e, value: t, onChange: n }) {
       ] }) : M;
     }
     case "select": {
-      const p = o.options, [f, k] = K(t);
+      const p = o.options, [f, g] = K(t);
       X(() => {
-        k(t);
+        g(t);
       }, [t]);
       const _ = (b) => {
-        n(e.id, b.currentTarget.value), k(b.currentTarget.value);
+        n(e.id, b.currentTarget.value), g(b.currentTarget.value);
       };
-      return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-item-${e.id}`, children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: e.cssVar, children: [
-          e.cssVar,
-          e.label !== e.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: e.label })
-        ] }),
+      return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-item-${e.id}`, children: [
+        /* @__PURE__ */ s(le, { cssVar: e.cssVar, label: e.label }),
         /* @__PURE__ */ s(
           "select",
           {
@@ -4122,11 +4124,8 @@ function ii({ item: e, value: t, onChange: n }) {
       const p = (f) => {
         n(e.id, f.currentTarget.value);
       };
-      return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-item-${e.id}`, children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: e.cssVar, children: [
-          e.cssVar,
-          e.label !== e.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: e.label })
-        ] }),
+      return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-item-${e.id}`, children: [
+        /* @__PURE__ */ s(le, { cssVar: e.cssVar, label: e.label }),
         /* @__PURE__ */ s(
           "input",
           {
@@ -4149,11 +4148,8 @@ function ii({ item: e, value: t, onChange: n }) {
       const p = (f) => {
         n(e.id, f.currentTarget.value);
       };
-      return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-item-${e.id}`, children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: e.cssVar, children: [
-          e.cssVar,
-          e.label !== e.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: e.label })
-        ] }),
+      return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-item-${e.id}`, children: [
+        /* @__PURE__ */ s(le, { cssVar: e.cssVar, label: e.label }),
         /* @__PURE__ */ s(
           "input",
           {
@@ -4172,11 +4168,11 @@ function ii({ item: e, value: t, onChange: n }) {
       return null;
   }
 }
-const Bt = it(ii);
-function li({ tab: e, state: t, persistFont: n }) {
+const Kt = Ke(si);
+function ci({ tab: e, state: t, persistFont: n }) {
   const o = R(
     (r, i) => {
-      if (i === Be) {
+      if (i === Fe) {
         n((l) => {
           const d = { ...l };
           return delete d[r], d;
@@ -4189,7 +4185,7 @@ function li({ tab: e, state: t, persistFont: n }) {
   ), a = R(() => {
     n(() => ({}));
   }, [n]);
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-content", children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-content", children: [
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-actions", children: /* @__PURE__ */ s(
       "div",
       {
@@ -4204,7 +4200,7 @@ function li({ tab: e, state: t, persistFont: n }) {
       }
     ) }),
     e.tiers.map((r) => /* @__PURE__ */ s(
-      si,
+      di,
       {
         tab: e,
         tier: r,
@@ -4215,9 +4211,9 @@ function li({ tab: e, state: t, persistFont: n }) {
     ))
   ] });
 }
-function si({ tab: e, tier: t, state: n, onChange: o }) {
+function di({ tab: e, tier: t, state: n, onChange: o }) {
   const a = t.referencesTier !== void 0;
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", "data-testid": `font-tier-${t.id}`, children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `font-tier-${t.id}`, children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -4229,18 +4225,15 @@ function si({ tab: e, tier: t, state: n, onChange: o }) {
     ),
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-grid", children: t.items.map((r) => {
       const i = n[r.id] ?? r.default;
-      return a ? /* @__PURE__ */ g(
+      return a ? /* @__PURE__ */ k(
         "div",
         {
           className: "tokenpanel-row",
           "data-testid": `tier-ref-row-${r.id}`,
           children: [
-            /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: r.cssVar, children: [
-              r.cssVar,
-              r.label !== r.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: r.label })
-            ] }),
+            /* @__PURE__ */ s(le, { cssVar: r.cssVar, label: r.label }),
             /* @__PURE__ */ s(
-              ct,
+              dt,
               {
                 tab: e,
                 tierId: t.id,
@@ -4248,7 +4241,7 @@ function si({ tab: e, tier: t, state: n, onChange: o }) {
                 value: i,
                 onChange: o,
                 previewValueFor: (l) => {
-                  const d = t.referencesTier, c = Fe(e, d, l, {
+                  const d = t.referencesTier, c = je(e, d, l, {
                     [d]: n
                   });
                   return c.kind === "literal" ? c.value : c.targetCssVar;
@@ -4260,7 +4253,7 @@ function si({ tab: e, tier: t, state: n, onChange: o }) {
         },
         r.id
       ) : /* @__PURE__ */ s(
-        Bt,
+        Kt,
         {
           item: r,
           value: i,
@@ -4271,10 +4264,10 @@ function si({ tab: e, tier: t, state: n, onChange: o }) {
     }) })
   ] });
 }
-function ci({ tab: e, state: t, persistSize: n }) {
+function ui({ tab: e, state: t, persistSize: n }) {
   const o = R(
     (r, i) => {
-      if (i === Be) {
+      if (i === Fe) {
         n((l) => {
           const d = { ...l };
           return delete d[r], d;
@@ -4287,7 +4280,7 @@ function ci({ tab: e, state: t, persistSize: n }) {
   ), a = R(() => {
     n(() => ({}));
   }, [n]);
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-content", children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-content", children: [
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-actions", children: /* @__PURE__ */ s(
       "div",
       {
@@ -4302,7 +4295,7 @@ function ci({ tab: e, state: t, persistSize: n }) {
       }
     ) }),
     e.tiers.map((r) => /* @__PURE__ */ s(
-      di,
+      pi,
       {
         tab: e,
         tier: r,
@@ -4313,9 +4306,9 @@ function ci({ tab: e, state: t, persistSize: n }) {
     ))
   ] });
 }
-function di({ tab: e, tier: t, state: n, onChange: o }) {
+function pi({ tab: e, tier: t, state: n, onChange: o }) {
   const a = t.referencesTier !== void 0;
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", "data-testid": `size-tier-${t.id}`, children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `size-tier-${t.id}`, children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -4327,18 +4320,15 @@ function di({ tab: e, tier: t, state: n, onChange: o }) {
     ),
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-grid", children: t.items.map((r) => {
       const i = n[r.id] ?? r.default;
-      return a ? /* @__PURE__ */ g(
+      return a ? /* @__PURE__ */ k(
         "div",
         {
           className: "tokenpanel-row",
           "data-testid": `tier-ref-row-${r.id}`,
           children: [
-            /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: r.cssVar, children: [
-              r.cssVar,
-              r.label !== r.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: r.label })
-            ] }),
+            /* @__PURE__ */ s(le, { cssVar: r.cssVar, label: r.label }),
             /* @__PURE__ */ s(
-              ct,
+              dt,
               {
                 tab: e,
                 tierId: t.id,
@@ -4346,7 +4336,7 @@ function di({ tab: e, tier: t, state: n, onChange: o }) {
                 value: i,
                 onChange: o,
                 previewValueFor: (l) => {
-                  const d = t.referencesTier, c = Fe(e, d, l, {
+                  const d = t.referencesTier, c = je(e, d, l, {
                     [d]: n
                   });
                   return c.kind === "literal" ? c.value : c.targetCssVar;
@@ -4358,7 +4348,7 @@ function di({ tab: e, tier: t, state: n, onChange: o }) {
         },
         r.id
       ) : /* @__PURE__ */ s(
-        Bt,
+        Kt,
         {
           item: r,
           value: i,
@@ -4369,10 +4359,10 @@ function di({ tab: e, tier: t, state: n, onChange: o }) {
     }) })
   ] });
 }
-function ui({ tab: e, state: t, persistSpacing: n }) {
+function fi({ tab: e, state: t, persistSpacing: n }) {
   const o = R(
     (r, i) => {
-      if (i === Be) {
+      if (i === Fe) {
         n((l) => {
           const d = { ...l };
           return delete d[r], d;
@@ -4385,7 +4375,7 @@ function ui({ tab: e, state: t, persistSpacing: n }) {
   ), a = R(() => {
     n(() => ({}));
   }, [n]);
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-content", children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-content", children: [
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-actions", children: /* @__PURE__ */ s(
       "div",
       {
@@ -4400,7 +4390,7 @@ function ui({ tab: e, state: t, persistSpacing: n }) {
       }
     ) }),
     e.tiers.map((r) => /* @__PURE__ */ s(
-      pi,
+      hi,
       {
         tab: e,
         tier: r,
@@ -4411,9 +4401,9 @@ function ui({ tab: e, state: t, persistSpacing: n }) {
     ))
   ] });
 }
-function pi({ tab: e, tier: t, state: n, onChange: o }) {
+function hi({ tab: e, tier: t, state: n, onChange: o }) {
   const a = t.referencesTier !== void 0;
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", "data-testid": `spacing-tier-${t.id}`, children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `spacing-tier-${t.id}`, children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -4425,18 +4415,15 @@ function pi({ tab: e, tier: t, state: n, onChange: o }) {
     ),
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-grid", children: t.items.map((r) => {
       const i = n[r.id] ?? r.default;
-      return a ? /* @__PURE__ */ g(
+      return a ? /* @__PURE__ */ k(
         "div",
         {
           className: "tokenpanel-row",
           "data-testid": `tier-ref-row-${r.id}`,
           children: [
-            /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: r.cssVar, children: [
-              r.cssVar,
-              r.label !== r.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: r.label })
-            ] }),
+            /* @__PURE__ */ s(le, { cssVar: r.cssVar, label: r.label }),
             /* @__PURE__ */ s(
-              ct,
+              dt,
               {
                 tab: e,
                 tierId: t.id,
@@ -4444,7 +4431,7 @@ function pi({ tab: e, tier: t, state: n, onChange: o }) {
                 value: i,
                 onChange: o,
                 previewValueFor: (l) => {
-                  const d = t.referencesTier, c = Fe(e, d, l, {
+                  const d = t.referencesTier, c = je(e, d, l, {
                     [d]: n
                   });
                   return c.kind === "literal" ? c.value : c.targetCssVar;
@@ -4456,7 +4443,7 @@ function pi({ tab: e, tier: t, state: n, onChange: o }) {
         },
         r.id
       ) : /* @__PURE__ */ s(
-        Bt,
+        Kt,
         {
           item: r,
           value: i,
@@ -4467,16 +4454,13 @@ function pi({ tab: e, tier: t, state: n, onChange: o }) {
     }) })
   ] });
 }
-function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
+function gi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
   if (t.referencesTier !== void 0) {
     const d = t.referencesTier;
-    return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-ref-row-${n.id}`, children: [
-      /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: n.cssVar, children: [
-        n.cssVar,
-        n.label !== n.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: n.label })
-      ] }),
+    return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-ref-row-${n.id}`, children: [
+      /* @__PURE__ */ s(le, { cssVar: n.cssVar, label: n.label }),
       /* @__PURE__ */ s(
-        ct,
+        dt,
         {
           tab: e,
           tierId: t.id,
@@ -4484,7 +4468,7 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
           value: o,
           onChange: r,
           previewValueFor: (c) => {
-            const u = Fe(e, d, c, a);
+            const u = je(e, d, c, a);
             return u.kind === "literal" ? u.value : u.targetCssVar;
           }
         }
@@ -4500,7 +4484,7 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
       X(() => {
         f(String(Number.isFinite(parseFloat(o)) ? parseFloat(o) : 0));
       }, [o]);
-      const k = (b) => {
+      const g = (b) => {
         const v = b.currentTarget.value;
         f(v);
         const h = parseFloat(v);
@@ -4509,19 +4493,16 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
         const b = parseFloat(p);
         Number.isFinite(b) || f(String(u));
       };
-      return /* @__PURE__ */ s("div", { className: "tokenpanel-row--stacked", "data-testid": `tier-item-${n.id}`, children: /* @__PURE__ */ g("div", { className: "tokenpanel-row-head", children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: n.cssVar, children: [
-          n.cssVar,
-          n.label !== n.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: n.label })
-        ] }),
-        /* @__PURE__ */ g("div", { className: "tokenpanel-row-input-group", children: [
+      return /* @__PURE__ */ s("div", { className: "tokenpanel-row--stacked", "data-testid": `tier-item-${n.id}`, children: /* @__PURE__ */ k("div", { className: "tokenpanel-row-head", children: [
+        /* @__PURE__ */ s(le, { cssVar: n.cssVar, label: n.label }),
+        /* @__PURE__ */ k("div", { className: "tokenpanel-row-input-group", children: [
           /* @__PURE__ */ s(
             "input",
             {
               type: "text",
               inputMode: "decimal",
               value: p,
-              onChange: k,
+              onChange: g,
               onBlur: _,
               disabled: l,
               className: "tokenpanel-row-number-input",
@@ -4537,11 +4518,8 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
       const d = i.options, c = (u) => {
         r(n.id, u.currentTarget.value);
       };
-      return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-item-${n.id}`, children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: n.cssVar, children: [
-          n.cssVar,
-          n.label !== n.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: n.label })
-        ] }),
+      return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-item-${n.id}`, children: [
+        /* @__PURE__ */ s(le, { cssVar: n.cssVar, label: n.label }),
         /* @__PURE__ */ s(
           "select",
           {
@@ -4563,11 +4541,8 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
       const d = (c) => {
         r(n.id, c.currentTarget.value);
       };
-      return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-item-${n.id}`, children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: n.cssVar, children: [
-          n.cssVar,
-          n.label !== n.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: n.label })
-        ] }),
+      return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-item-${n.id}`, children: [
+        /* @__PURE__ */ s(le, { cssVar: n.cssVar, label: n.label }),
         /* @__PURE__ */ s(
           "input",
           {
@@ -4590,11 +4565,8 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
       const d = (c) => {
         r(n.id, c.currentTarget.value);
       };
-      return /* @__PURE__ */ g("div", { className: "tokenpanel-row", "data-testid": `tier-item-${n.id}`, children: [
-        /* @__PURE__ */ g("span", { className: "tokenpanel-row-label", title: n.cssVar, children: [
-          n.cssVar,
-          n.label !== n.cssVar && /* @__PURE__ */ s("span", { className: "tokenpanel-row-label-sub", children: n.label })
-        ] }),
+      return /* @__PURE__ */ k("div", { className: "tokenpanel-row", "data-testid": `tier-item-${n.id}`, children: [
+        /* @__PURE__ */ s(le, { cssVar: n.cssVar, label: n.label }),
         /* @__PURE__ */ s(
           "input",
           {
@@ -4613,14 +4585,14 @@ function fi({ tab: e, tier: t, item: n, value: o, overrides: a, onChange: r }) {
       return null;
   }
 }
-function hi({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: a }) {
+function ki({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: a }) {
   const r = R(
     (i, l) => {
       a(t.id, i, l);
     },
     [a, t.id]
   );
-  return /* @__PURE__ */ g("div", { className: "tokenpanel-tab-section", "data-testid": `tier-section-${t.id}`, children: [
+  return /* @__PURE__ */ k("div", { className: "tokenpanel-tab-section", "data-testid": `tier-section-${t.id}`, children: [
     /* @__PURE__ */ s(
       "div",
       {
@@ -4633,7 +4605,7 @@ function hi({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: a }
     /* @__PURE__ */ s("div", { className: "tokenpanel-tab-grid", children: t.items.map((i) => {
       const l = n[i.id] ?? i.default;
       return /* @__PURE__ */ s(
-        fi,
+        gi,
         {
           tab: e,
           tier: t,
@@ -4647,7 +4619,7 @@ function hi({ tab: e, tier: t, overrides: n, fullOverrides: o, onItemChange: a }
     }) })
   ] });
 }
-function gi({ tab: e, overrides: t, onChange: n }) {
+function mi({ tab: e, overrides: t, onChange: n }) {
   const o = R(
     (a, r, i) => {
       n(a, r, i);
@@ -4657,7 +4629,7 @@ function gi({ tab: e, overrides: t, onChange: n }) {
   return /* @__PURE__ */ s("div", { className: "tokenpanel-tab-content", "data-testid": `generic-tab-${e.id}`, children: e.tiers.map((a) => {
     const r = t[a.id] ?? {};
     return /* @__PURE__ */ s(
-      hi,
+      ki,
       {
         tab: e,
         tier: a,
@@ -4669,25 +4641,25 @@ function gi({ tab: e, overrides: t, onChange: n }) {
     );
   }) });
 }
-function ki(e) {
+function bi(e) {
   const t = J(
     (c) => {
       e((u) => {
         if (!u) return u;
         const p = c(u);
-        return Qe(p), kn(p), p;
+        return tt(p), bn(p), p;
       });
     },
     [e]
   ), n = J(
     (c, u) => {
       t((p) => {
-        const f = p.tabs?.[c] ?? {}, k = u(f);
+        const f = p.tabs?.[c] ?? {}, g = u(f);
         return {
           ...p,
           tabs: {
             ...p.tabs,
-            [c]: k
+            [c]: g
           }
         };
       });
@@ -4723,8 +4695,8 @@ function ki(e) {
       t((u) => {
         const p = c(u.secondary);
         if (p === void 0) {
-          const { secondary: f, ...k } = u;
-          return k;
+          const { secondary: f, ...g } = u;
+          return g;
         }
         return { ...u, secondary: p };
       });
@@ -4748,9 +4720,9 @@ function ki(e) {
     persistSecondary: d
   };
 }
-const mi = ["color", "font", "spacing", "size"], bi = "color", Re = 900;
-function vi(e, t, n) {
-  const o = e < Re;
+const vi = ["color", "font", "spacing", "size"], wi = "color", Oe = 900;
+function xi(e, t, n) {
+  const o = e < Oe;
   return o ? {
     width: "min(calc(100vw - 16px), 500px)",
     height: "min(800px, calc(100vh - 32px))",
@@ -4761,47 +4733,47 @@ function vi(e, t, n) {
     narrow: o
   };
 }
-function Ge() {
+function Ue() {
   return {
-    color: Je(),
-    spacing: bt(),
-    typography: bt(),
-    size: bt(),
-    secondary: bn()
+    color: Ze(),
+    spacing: vt(),
+    typography: vt(),
+    size: vt(),
+    secondary: wn()
   };
 }
-function wi() {
-  const e = at(), [t, n] = K(!1), [o, a] = K(!1), [r, i] = K(!1), [l, d] = K(!1), [c, u] = K(!1), p = O(null), [f, k] = K(null), [_, b] = K(bi), [v, h] = K(Ft), [y, M] = K(ko), [A, C] = K(mo), [x, m] = K(!1), N = O(null), S = O({
+function yi() {
+  const e = lt(), [t, n] = K(!1), [o, a] = K(!1), [r, i] = K(!1), [l, d] = K(!1), [c, u] = K(!1), p = O(null), [f, g] = K(null), [_, b] = K(wi), [v, h] = K(jt), [y, M] = K(mo), [A, C] = K(bo), [x, m] = K(!1), N = O(null), S = O({
     spacing: null,
     font: null,
     size: null,
     color: null
-  }), B = O(Ft);
+  }), B = O(jt);
   B.current = v;
   const j = O(y);
   j.current = y;
-  const Y = O(null), Q = O(null), { persistColor: se, persistSpacing: oe, persistFont: be, persistSize: ue, persistSecondary: Ce, persistTab: T } = ki(k);
+  const Y = O(null), Q = O(null), { persistColor: ce, persistSpacing: oe, persistFont: ve, persistSize: pe, persistSecondary: $e, persistTab: T } = bi(g);
   X(() => {
     try {
-      localStorage.getItem(Oe()) === "1" && n(!0);
+      localStorage.getItem(De()) === "1" && n(!0);
     } catch {
     }
-    const $ = bo();
+    const $ = vo();
     h($), B.current = $;
-    const H = vo();
-    M(H), j.current = H, C(wo()), m(window.innerWidth < Re);
+    const H = wo();
+    M(H), j.current = H, C(xo()), m(window.innerWidth < Oe);
   }, []);
   const D = R(($) => {
-    C($), xo($);
+    C($), yo($);
   }, []);
   X(() => {
     try {
-      const $ = Oe();
+      const $ = De();
       t ? localStorage.setItem($, "1") : localStorage.removeItem($);
     } catch {
     }
     try {
-      const $ = vn(ne());
+      const $ = xn(ne());
       localStorage.setItem($, t ? "1" : "0");
     } catch {
     }
@@ -4816,7 +4788,7 @@ function wi() {
   }, [t, o, r, l]), X(() => {
     function $() {
       try {
-        n(localStorage.getItem(Oe()) === "1");
+        n(localStorage.getItem(De()) === "1");
       } catch {
       }
     }
@@ -4825,85 +4797,85 @@ function wi() {
     };
   }, []), X(() => {
     function $() {
-      gt(), k(Ge());
+      kt(), g(Ue());
     }
     return window.addEventListener("color-scheme-changed", $), () => window.removeEventListener("color-scheme-changed", $);
   }, []), X(() => {
     if (!t || f) return;
-    const $ = mn();
+    const $ = vn();
     if ($) {
-      Qe($), k($);
+      tt($), g($);
       return;
     }
-    k(Ge());
+    g(Ue());
   }, [t, f]);
   const ee = R(($) => {
-    if (window.innerWidth < Re || $.target.closest("button, select, option, [role='tab'], [role='button']")) return;
+    if (window.innerWidth < Oe || $.target.closest("button, select, option, [role='tab'], [role='button']")) return;
     $.preventDefault();
-    const V = $.clientX, G = $.clientY, I = B.current.left, q = B.current.top, ce = N.current?.offsetWidth ?? 600;
+    const V = $.clientX, G = $.clientY, I = B.current.left, q = B.current.top, de = N.current?.offsetWidth ?? 600;
     N.current?.offsetHeight;
-    function re(ke) {
-      const ve = ke.clientX - V, co = ke.clientY - G, ht = mt(
-        q + co,
-        I + ve,
-        ce
+    function re(me) {
+      const we = me.clientX - V, uo = me.clientY - G, gt = bt(
+        q + uo,
+        I + we,
+        de
       );
-      N.current && (N.current.style.top = `${ht.top}px`, N.current.style.left = `${ht.left}px`), B.current = ht;
+      N.current && (N.current.style.top = `${gt.top}px`, N.current.style.left = `${gt.left}px`), B.current = gt;
     }
     function ie() {
       document.removeEventListener("mousemove", re), document.removeEventListener("mouseup", ie), Y.current = null;
-      const ke = B.current;
-      h(ke), kt(ke);
+      const me = B.current;
+      h(me), mt(me);
     }
     document.addEventListener("mousemove", re), document.addEventListener("mouseup", ie), Y.current = () => {
       document.removeEventListener("mousemove", re), document.removeEventListener("mouseup", ie);
     };
-  }, []), ge = R(($) => {
-    if (window.innerWidth < Re) return;
+  }, []), ke = R(($) => {
+    if (window.innerWidth < Oe) return;
     $.preventDefault(), $.stopPropagation();
     const H = $.clientX, V = $.clientY, G = j.current.width, I = j.current.height;
     function q(re) {
-      const ie = re.clientX - H, ke = re.clientY - V, ve = Wt(G + ie, I + ke);
-      N.current && (N.current.style.width = `${ve.width}px`, N.current.style.height = `${ve.height}px`), j.current = ve;
+      const ie = re.clientX - H, me = re.clientY - V, we = Yt(G + ie, I + me);
+      N.current && (N.current.style.width = `${we.width}px`, N.current.style.height = `${we.height}px`), j.current = we;
     }
-    function ce() {
-      document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", ce), Q.current = null;
+    function de() {
+      document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", de), Q.current = null;
       const re = j.current;
-      M(re), jt(re);
-      const ie = mt(
+      M(re), Xt(re);
+      const ie = bt(
         B.current.top,
         B.current.left,
         re.width,
         re.height
       );
-      (ie.top !== B.current.top || ie.left !== B.current.left) && (h(ie), kt(ie));
+      (ie.top !== B.current.top || ie.left !== B.current.left) && (h(ie), mt(ie));
     }
-    document.addEventListener("mousemove", q), document.addEventListener("mouseup", ce), Q.current = () => {
-      document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", ce);
+    document.addEventListener("mousemove", q), document.addEventListener("mouseup", de), Q.current = () => {
+      document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", de);
     };
   }, []);
   X(() => () => {
     Y.current?.(), Q.current?.();
   }, []), X(() => {
     function $() {
-      m(window.innerWidth < Re), M((V) => {
-        const G = Wt(V.width, V.height);
-        return (G.width !== V.width || G.height !== V.height) && jt(G), G;
+      m(window.innerWidth < Oe), M((V) => {
+        const G = Yt(V.width, V.height);
+        return (G.width !== V.width || G.height !== V.height) && Xt(G), G;
       });
       const H = N.current?.offsetWidth ?? 600;
       N.current?.offsetHeight, h((V) => {
-        const G = mt(V.top, V.left, H);
-        return kt(G), G;
+        const G = bt(V.top, V.left, H);
+        return mt(G), G;
       });
     }
     return window.addEventListener("resize", $), () => window.removeEventListener("resize", $);
   }, []);
-  const Le = R(($) => {
-    Qe($), kn($), k($);
+  const Pe = R(($) => {
+    tt($), bn($), g($);
   }, []), w = R(() => {
-    Kt(), gt(), k(Ge());
+    Wt(), kt(), g(Ue());
   }, []), z = R(() => {
-    Kt(), gt(), k(Ge());
+    Wt(), kt(), g(Ue());
   }, []), U = Z(() => ne().tabs.map(($) => ({ id: $.id, label: $.label })), []), F = Z(() => {
     const $ = {};
     for (const H of ne().tabs)
@@ -4923,12 +4895,12 @@ function wi() {
     },
     [_, U]
   );
-  return /* @__PURE__ */ s(Ua, { children: t && (() => {
+  return /* @__PURE__ */ s(Za, { children: /* @__PURE__ */ s(ei, { children: t && (() => {
     const {
       width: $,
       height: H,
       narrow: V
-    } = vi(
+    } = xi(
       typeof window < "u" ? window.innerWidth : 1024,
       typeof window < "u" ? window.innerHeight : 768,
       y
@@ -4939,8 +4911,8 @@ function wi() {
       transform: "translateX(-50%)",
       right: "auto"
     } : { position: "fixed", top: v.top, left: v.left };
-    return /* @__PURE__ */ g(de, { children: [
-      /* @__PURE__ */ g(
+    return /* @__PURE__ */ k(ue, { children: [
+      /* @__PURE__ */ k(
         "div",
         {
           ref: N,
@@ -4953,10 +4925,10 @@ function wi() {
             // `--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": yo(A)
+            "--tokenpanel-grid-min": No(A)
           },
           children: [
-            /* @__PURE__ */ g(
+            /* @__PURE__ */ k(
               "div",
               {
                 className: "tokenpanel-header",
@@ -4965,7 +4937,7 @@ function wi() {
                 children: [
                   /* @__PURE__ */ s("span", { className: "tokenpanel-title", children: "Design Tokens" }),
                   /* @__PURE__ */ s(
-                    Ne,
+                    _e,
                     {
                       onClick: () => a(!0),
                       className: "tokenpanel-action-link",
@@ -4973,7 +4945,7 @@ function wi() {
                     }
                   ),
                   /* @__PURE__ */ s(
-                    Ne,
+                    _e,
                     {
                       onClick: () => i(!0),
                       className: "tokenpanel-action-link",
@@ -4981,14 +4953,14 @@ function wi() {
                     }
                   ),
                   /* @__PURE__ */ s(
-                    Ne,
+                    _e,
                     {
                       onClick: () => d(!0),
                       className: "tokenpanel-action-link",
                       children: "Apply"
                     }
                   ),
-                  /* @__PURE__ */ s(Ne, { onClick: w, className: "tokenpanel-action-link", children: "Reset" }),
+                  /* @__PURE__ */ s(_e, { onClick: w, className: "tokenpanel-action-link", children: "Reset" }),
                   /* @__PURE__ */ s("div", { className: "tokenpanel-spacer" }),
                   /* @__PURE__ */ s(
                     "div",
@@ -5004,7 +4976,7 @@ function wi() {
                       onKeyDown: (I) => {
                         (I.key === "Enter" || I.key === " ") && (I.preventDefault(), u((q) => !q));
                       },
-                      children: /* @__PURE__ */ g(
+                      children: /* @__PURE__ */ k(
                         "svg",
                         {
                           width: "14",
@@ -5025,12 +4997,12 @@ function wi() {
                     }
                   ),
                   /* @__PURE__ */ s(
-                    Ne,
+                    _e,
                     {
                       onClick: () => n(!1),
                       className: "tokenpanel-close-btn",
                       "aria-label": "Close panel",
-                      children: /* @__PURE__ */ g(
+                      children: /* @__PURE__ */ k(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -5053,7 +5025,7 @@ function wi() {
                 ]
               }
             ),
-            /* @__PURE__ */ g("div", { className: "tokenpanel-tabbar", children: [
+            /* @__PURE__ */ k("div", { className: "tokenpanel-tabbar", children: [
               /* @__PURE__ */ s(
                 "div",
                 {
@@ -5065,8 +5037,8 @@ function wi() {
                     return /* @__PURE__ */ s(
                       "div",
                       {
-                        ref: (ce) => {
-                          S.current[I.id] = ce;
+                        ref: (de) => {
+                          S.current[I.id] = de;
                         },
                         role: "tab",
                         id: `dtp-tab-${e}-${I.id}`,
@@ -5083,7 +5055,7 @@ function wi() {
                   })
                 }
               ),
-              /* @__PURE__ */ g("div", { className: "tokenpanel-density", children: [
+              /* @__PURE__ */ k("div", { className: "tokenpanel-density", children: [
                 /* @__PURE__ */ s(
                   "label",
                   {
@@ -5113,8 +5085,8 @@ function wi() {
               ] })
             ] }),
             /* @__PURE__ */ s("div", { className: "tokenpanel-body", children: U.map((I) => {
-              const q = _ === I.id, ce = mi.includes(I.id);
-              return /* @__PURE__ */ g(
+              const q = _ === I.id, de = vi.includes(I.id);
+              return /* @__PURE__ */ k(
                 "div",
                 {
                   role: "tabpanel",
@@ -5124,18 +5096,18 @@ function wi() {
                   hidden: !q,
                   children: [
                     I.id === "color" && f && F.color && /* @__PURE__ */ s(
-                      ni,
+                      oi,
                       {
                         tab: F.color,
                         state: f.color,
-                        persistColor: se,
+                        persistColor: ce,
                         secondaryTab: F["color-secondary"] ?? null,
-                        secondaryState: f.secondary ?? bn() ?? null,
-                        persistSecondary: Ce
+                        secondaryState: f.secondary ?? wn() ?? null,
+                        persistSecondary: $e
                       }
                     ),
                     I.id === "spacing" && f && F.spacing && /* @__PURE__ */ s(
-                      ui,
+                      fi,
                       {
                         tab: F.spacing,
                         state: f.spacing,
@@ -5143,32 +5115,32 @@ function wi() {
                       }
                     ),
                     I.id === "font" && f && F.font && /* @__PURE__ */ s(
-                      li,
+                      ci,
                       {
                         tab: F.font,
                         state: f.typography,
-                        persistFont: be
+                        persistFont: ve
                       }
                     ),
                     I.id === "size" && f && F.size && /* @__PURE__ */ s(
-                      ci,
+                      ui,
                       {
                         tab: F.size,
                         state: f.size,
-                        persistSize: ue
+                        persistSize: pe
                       }
                     ),
-                    !ce && F[I.id] && f && /* @__PURE__ */ s(
-                      gi,
+                    !de && F[I.id] && f && /* @__PURE__ */ s(
+                      mi,
                       {
                         tab: F[I.id],
                         overrides: f.tabs?.[I.id] ?? {},
-                        onChange: (re, ie, ke) => {
-                          T(I.id, (ve) => ({
-                            ...ve,
+                        onChange: (re, ie, me) => {
+                          T(I.id, (we) => ({
+                            ...we,
                             [re]: {
-                              ...ve[re] ?? {},
-                              [ie]: ke
+                              ...we[re] ?? {},
+                              [ie]: me
                             }
                           }));
                         }
@@ -5183,7 +5155,7 @@ function wi() {
               "div",
               {
                 className: "tokenpanel-resize-handle",
-                onMouseDown: ge,
+                onMouseDown: ke,
                 "aria-label": "Resize panel",
                 title: "Drag to resize"
               }
@@ -5192,180 +5164,180 @@ function wi() {
         }
       ),
       o && f && /* @__PURE__ */ s(
-        Bo,
+        Fo,
         {
           onClose: () => a(!1),
           state: f,
-          colorDefaults: Je()
+          colorDefaults: Ze()
         }
       ),
       r && f && /* @__PURE__ */ s(
-        Fo,
+        Ko,
         {
           onClose: () => i(!1),
-          onLoad: Le,
-          colorDefaults: Je()
+          onLoad: Pe,
+          colorDefaults: Ze()
         }
       ),
       l && f && /* @__PURE__ */ s(
-        Go,
+        Jo,
         {
           state: f,
           open: l,
           onClose: () => d(!1),
-          colorDefaults: Je(),
+          colorDefaults: Ze(),
           onApplied: z
         }
       ),
       c && /* @__PURE__ */ s(
-        ya,
+        Na,
         {
           anchorRef: p,
           onClose: () => u(!1)
         }
       )
     ] });
-  })() });
+  })() }) });
 }
-const xi = ':where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip){--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}';
-function Vi(e) {
+const Ni = ':where(.tokenpanel-shell,[data-design-token-panel-modal],.tokenpanel-highlight-settings-popover,.tokenpanel-color-picker,.tokenpanel-tooltip){--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}';
+function Bi(e) {
   return e.kind === "length";
 }
-function Hi(e) {
+function Fi(e) {
   return e.kind === "number";
 }
-function Bi(e) {
+function Ki(e) {
   return e.kind === "select";
 }
-function Fi(e) {
+function ji(e) {
   return e.kind === "text";
 }
-function Ki(e) {
+function Wi(e) {
   return e.kind === "cursor";
 }
-function ji(e) {
+function Xi(e) {
   return e.kind === "content";
 }
-function Wi(e) {
+function Yi(e) {
   return e.kind === "mask-image";
 }
-function Xi(e) {
+function qi(e) {
   return e.kind === "color";
 }
-function to() {
-  return To(ne());
-}
 function no() {
-  return vn(ne());
+  return Ao(ne());
+}
+function oo() {
+  return xn(ne());
 }
-const yi = "toggle-design-token-panel", Ni = "toggle-color-tweak-panel", oo = "__zdtp:open-state-changed";
-function dt() {
-  typeof window > "u" || window.dispatchEvent(new CustomEvent(oo));
+const _i = "toggle-design-token-panel", Ci = "toggle-color-tweak-panel", ro = "__zdtp:open-state-changed";
+function ut() {
+  typeof window > "u" || window.dispatchEvent(new CustomEvent(ro));
 }
-const Yi = oo;
-function ut(e) {
+const Gi = ro;
+function pt(e) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(no(), e ? "1" : "0");
+      window.localStorage.setItem(oo(), e ? "1" : "0");
     } catch {
     }
 }
-function ro() {
+function ao() {
   if (typeof window > "u") return !1;
   try {
-    return window.localStorage.getItem(no()) === "1";
+    return window.localStorage.getItem(oo()) === "1";
   } catch {
     return !1;
   }
 }
-function _i() {
+function $i() {
   if (typeof window > "u") return !1;
   try {
     const e = window.localStorage;
-    return e.getItem(No()) !== null || e.getItem(_o()) !== null;
+    return e.getItem(_o()) !== null || e.getItem(Co()) !== null;
   } catch {
     return !1;
   }
 }
-function ao() {
+function io() {
   if (typeof window > "u") return !1;
   try {
-    return window.localStorage.getItem(Oe()) === "1";
+    return window.localStorage.getItem(De()) === "1";
   } catch {
     return !1;
   }
 }
-function pt(e) {
+function ft(e) {
   if (!(typeof window > "u"))
     try {
-      const t = Oe();
+      const t = De();
       e ? window.localStorage.setItem(t, "1") : window.localStorage.removeItem(t);
     } catch {
     }
 }
-function Ke() {
-  return typeof document > "u" ? null : document.getElementById(to());
+function We() {
+  return typeof document > "u" ? null : document.getElementById(no());
 }
-const dn = "zudo-design-token-panel-styles";
-function Ci() {
-  if (typeof document > "u" || document.getElementById(dn)) return;
+const pn = "zudo-design-token-panel-styles";
+function Ei() {
+  if (typeof document > "u" || document.getElementById(pn)) return;
   const e = document.createElement("style");
-  e.id = dn, e.textContent = xi, document.head.appendChild(e);
+  e.id = pn, e.textContent = Ni, document.head.appendChild(e);
 }
-function ft() {
+function ht() {
   if (typeof document > "u") return !1;
-  const e = to();
+  const e = no();
   if (document.getElementById(e)) return !1;
-  Ci();
+  Ei();
   const t = document.createElement("div");
-  return t.id = e, document.body.appendChild(t), fn(/* @__PURE__ */ s(wi, {}), t), !0;
+  return t.id = e, document.body.appendChild(t), gn(/* @__PURE__ */ s(yi, {}), t), !0;
 }
-function qi() {
+function Ji() {
   return ne();
 }
-function $i() {
+function Si() {
   if (typeof window > "u") return;
-  const e = !Ke();
-  pt(!0), ft(), ut(!0), !e && dt();
+  const e = !We();
+  ft(!0), ht(), pt(!0), !e && ut();
 }
-function Ei() {
+function Mi() {
   if (typeof window > "u") return;
-  const e = !Ke();
-  pt(!1), ft(), ut(!1), !e && dt();
+  const e = !We();
+  ft(!1), ht(), pt(!1), !e && ut();
 }
-function Gi() {
+function Ui() {
   if (typeof window > "u") return;
-  const e = !ao(), t = !Ke();
-  pt(e), ft(), ut(e), !t && dt();
+  const e = !io(), t = !We();
+  ft(e), ht(), pt(e), !t && ut();
 }
-function io() {
+function lo() {
   if (!(typeof window > "u"))
     try {
-      const e = mn();
-      e && Qe(e);
+      const e = vn();
+      e && tt(e);
     } catch {
     }
 }
-function He() {
-  const e = Ke();
+function Be() {
+  const e = We();
   if (!e) return;
-  const t = ro();
-  fn(null, e), e.remove(), t && ut(!0);
+  const t = ao();
+  gn(null, e), e.remove(), t && pt(!0);
 }
-function Me() {
-  io(), ro() ? $i() : _i() && Ei();
+function Te() {
+  lo(), ao() ? Si() : $i() && Mi();
 }
-function un() {
-  const e = !Ke(), t = e ? !0 : !ao();
-  pt(t), ft(), !e && dt();
+function fn() {
+  const e = !We(), t = e ? !0 : !io();
+  ft(t), ht(), !e && ut();
 }
-function lo() {
+function so() {
   const e = window;
   if (e.__zudoDesignTokenPanelLifecycle) return e.__zudoDesignTokenPanelLifecycle;
   const t = { bound: !1, cleanups: [], adapter: null };
   return e.__zudoDesignTokenPanelLifecycle = t, t;
 }
-function Si(e) {
+function Ti(e) {
   const t = e.cleanups;
   e.cleanups = [];
   for (const n of t)
@@ -5374,17 +5346,17 @@ function Si(e) {
     } catch {
     }
 }
-function so(e) {
-  typeof document > "u" || (document.addEventListener("astro:before-swap", He), document.addEventListener("astro:page-load", Me), e.cleanups.push(
-    () => document.removeEventListener("astro:before-swap", He),
-    () => document.removeEventListener("astro:page-load", Me)
+function co(e) {
+  typeof document > "u" || (document.addEventListener("astro:before-swap", Be), document.addEventListener("astro:page-load", Te), e.cleanups.push(
+    () => document.removeEventListener("astro:before-swap", Be),
+    () => document.removeEventListener("astro:page-load", Te)
   ));
 }
-function Mi(e, t) {
-  if (!(typeof document > "u") && (t.onBeforeSwap ? e.cleanups.push(t.onBeforeSwap(He)) : (document.addEventListener("astro:before-swap", He), e.cleanups.push(
-    () => document.removeEventListener("astro:before-swap", He)
-  )), t.onPageLoad ? e.cleanups.push(t.onPageLoad(Me)) : (document.addEventListener("astro:page-load", Me), e.cleanups.push(
-    () => document.removeEventListener("astro:page-load", Me)
+function Ai(e, t) {
+  if (!(typeof document > "u") && (t.onBeforeSwap ? e.cleanups.push(t.onBeforeSwap(Be)) : (document.addEventListener("astro:before-swap", Be), e.cleanups.push(
+    () => document.removeEventListener("astro:before-swap", Be)
+  )), t.onPageLoad ? e.cleanups.push(t.onPageLoad(Te)) : (document.addEventListener("astro:page-load", Te), e.cleanups.push(
+    () => document.removeEventListener("astro:page-load", Te)
   )), !t.onBeforeSwap || !t.onPageLoad)) {
     const n = [
       t.onBeforeSwap ? null : "onBeforeSwap",
@@ -5395,36 +5367,36 @@ function Mi(e, t) {
     );
   }
 }
-function Ji(e) {
+function Zi(e) {
   if (typeof window > "u") return;
-  const t = lo();
-  Si(t), t.adapter = e, e ? Mi(t, e) : so(t);
+  const t = so();
+  Ti(t), t.adapter = e, e ? Ai(t, e) : co(t);
 }
-const Ti = () => {
-  io(), Me();
+const Li = () => {
+  lo(), Te();
 };
 if (typeof window < "u") {
-  const e = lo();
-  e.bound || (e.bound = !0, window.addEventListener(yi, un), window.addEventListener(Ni, un), so(e), Mo(Ti));
+  const e = so();
+  e.bound || (e.bound = !0, window.addEventListener(_i, fn), window.addEventListener(Ci, fn), co(e), To(Li));
 }
 export {
-  Qi as ZDTP_LEGACY_TYPOGRAPHY_RENAME_MAP,
-  Yi as __OPEN_STATE_CHANGED_EVENT_FOR_TEST,
-  qi as __panelConfigForTest,
-  tl as configurePanel,
-  bt as emptyOverrides,
-  Ei as hideDesignTokenPanel,
-  Xi as isColorKind,
-  ji as isContentKind,
-  Ki as isCursorKind,
-  Vi as isLengthKind,
-  Wi as isMaskImageKind,
-  Hi as isNumberKind,
-  Bi as isSelectKind,
-  Fi as isTextKind,
-  io as reapplyPersistedOverrides,
-  Ji as setLifecycleAdapter,
-  nl as setPanelColorPresets,
-  $i as showDesignTokenPanel,
-  Gi as toggleDesignPanel
+  tl as ZDTP_LEGACY_TYPOGRAPHY_RENAME_MAP,
+  Gi as __OPEN_STATE_CHANGED_EVENT_FOR_TEST,
+  Ji as __panelConfigForTest,
+  ol as configurePanel,
+  vt as emptyOverrides,
+  Mi as hideDesignTokenPanel,
+  qi as isColorKind,
+  Xi as isContentKind,
+  Wi as isCursorKind,
+  Bi as isLengthKind,
+  Yi as isMaskImageKind,
+  Fi as isNumberKind,
+  Ki as isSelectKind,
+  ji as isTextKind,
+  lo as reapplyPersistedOverrides,
+  Zi as setLifecycleAdapter,
+  rl as setPanelColorPresets,
+  Si as showDesignTokenPanel,
+  Ui as toggleDesignPanel
 };