lucent-ui 0.31.0 → 0.32.1

package/dist/devtools.js

@@ -1,18 +1,18 @@
-import { jsxs as c, jsx as t, Fragment as ae } from "react/jsx-runtime";
-import { useState as C, useRef as de, useCallback as D, useEffect as K, useMemo as fe, createContext as ye } from "react";
-import { createPortal as ue } from "react-dom";
-import { _ as le, $ as S, T as h, C as P, B, e as $, I as re, a0 as he, a1 as pe, z as me, K as ge, M as be, m as ve, F as xe, u as Se, Y as ke, x as we, g as Ce, a2 as ze, a as z, a3 as Be, a4 as X, S as Te, d as q, p as Me, h as Fe, f as Re, b as De } from "./LucentProvider-BTy2Psol.js";
-function Oe() {
-  const { tokens: e } = le(), [n, o] = C({}), s = de(n);
+import { jsxs as c, jsx as t, Fragment as fe } from "react/jsx-runtime";
+import { useState as C, useRef as ue, useCallback as O, useEffect as N, useMemo as me, createContext as be } from "react";
+import { createPortal as ve } from "react-dom";
+import { _ as ye, $ as S, T as h, C as E, B as M, e as _, I as he, a0 as xe, a1 as Se, z as ke, K as we, M as Ce, m as ze, F as Be, u as Te, Y as Me, x as Fe, a as B, a2 as Re, a3 as ne, g as De, a4 as Oe, S as Le, d as oe, p as Pe, h as Ee, f as Ie, b as Ae } from "./LucentProvider-BAYI38i6.js";
+function Ge() {
+  const { tokens: e } = ye(), [n, o] = C({}), s = ue(n);
   s.current = n;
-  const i = D((f, d) => {
+  const i = O((f, d) => {
     document.documentElement.style.setProperty(S(f), d), o((b) => ({ ...b, [f]: d }));
-  }, []), r = D((f) => {
+  }, []), l = O((f) => {
     document.documentElement.style.removeProperty(S(f)), o((d) => {
       const b = { ...d };
       return delete b[f], b;
     });
-  }, []), u = D(() => {
+  }, []), u = O(() => {
     for (const f of Object.keys(s.current))
       document.documentElement.style.removeProperty(S(f));
     o({});
@@ -22,20 +22,20 @@ function Oe() {
     overrides: n,
     overrideCount: Object.keys(n).length,
     setOverride: i,
-    removeOverride: r,
+    removeOverride: l,
     resetAll: u
   };
 }
 function y(e) {
   return { key: e, controlType: "color" };
 }
-function g(e, n, o, s, i) {
+function m(e, n, o, s, i) {
   return { key: e, controlType: "slider", sliderConfig: { min: n, max: o, step: s, unit: i } };
 }
-function m(e) {
+function p(e) {
   return { key: e, controlType: "text" };
 }
-const V = [
+const re = [
   {
     label: "Colors",
     defaultExpanded: !0,
@@ -87,80 +87,80 @@ const V = [
   {
     label: "Typography",
     tokens: [
-      m("fontFamilyBase"),
-      m("fontFamilyMono"),
-      m("fontFamilyDisplay"),
-      g("fontSizeXs", 0.5, 2, 0.0625, "rem"),
-      g("fontSizeSm", 0.5, 2, 0.0625, "rem"),
-      g("fontSizeMd", 0.5, 2, 0.0625, "rem"),
-      g("fontSizeLg", 0.5, 3, 0.0625, "rem"),
-      g("fontSizeXl", 0.5, 3, 0.0625, "rem"),
-      g("fontSize2xl", 0.5, 4, 0.0625, "rem"),
-      g("fontSize3xl", 0.5, 4, 0.0625, "rem"),
-      m("fontWeightRegular"),
-      m("fontWeightMedium"),
-      m("fontWeightSemibold"),
-      m("fontWeightBold"),
-      m("lineHeightTight"),
-      m("lineHeightBase"),
-      m("lineHeightRelaxed"),
-      m("letterSpacingTight"),
-      m("letterSpacingBase"),
-      m("letterSpacingWide")
+      p("fontFamilyBase"),
+      p("fontFamilyMono"),
+      p("fontFamilyDisplay"),
+      m("fontSizeXs", 0.5, 2, 0.0625, "rem"),
+      m("fontSizeSm", 0.5, 2, 0.0625, "rem"),
+      m("fontSizeMd", 0.5, 2, 0.0625, "rem"),
+      m("fontSizeLg", 0.5, 3, 0.0625, "rem"),
+      m("fontSizeXl", 0.5, 3, 0.0625, "rem"),
+      m("fontSize2xl", 0.5, 4, 0.0625, "rem"),
+      m("fontSize3xl", 0.5, 4, 0.0625, "rem"),
+      p("fontWeightRegular"),
+      p("fontWeightMedium"),
+      p("fontWeightSemibold"),
+      p("fontWeightBold"),
+      p("lineHeightTight"),
+      p("lineHeightBase"),
+      p("lineHeightRelaxed"),
+      p("letterSpacingTight"),
+      p("letterSpacingBase"),
+      p("letterSpacingWide")
     ]
   },
   {
     label: "Spacing",
     tokens: [
-      g("space0", 0, 6, 0.125, "rem"),
-      g("space1", 0, 6, 0.125, "rem"),
-      g("space2", 0, 6, 0.125, "rem"),
-      g("space3", 0, 6, 0.125, "rem"),
-      g("space4", 0, 6, 0.125, "rem"),
-      g("space5", 0, 6, 0.125, "rem"),
-      g("space6", 0, 6, 0.125, "rem"),
-      g("space8", 0, 6, 0.125, "rem"),
-      g("space10", 0, 6, 0.125, "rem"),
-      g("space12", 0, 8, 0.125, "rem"),
-      g("space16", 0, 10, 0.125, "rem"),
-      g("space20", 0, 12, 0.125, "rem"),
-      g("space24", 0, 12, 0.125, "rem")
+      m("space0", 0, 6, 0.125, "rem"),
+      m("space1", 0, 6, 0.125, "rem"),
+      m("space2", 0, 6, 0.125, "rem"),
+      m("space3", 0, 6, 0.125, "rem"),
+      m("space4", 0, 6, 0.125, "rem"),
+      m("space5", 0, 6, 0.125, "rem"),
+      m("space6", 0, 6, 0.125, "rem"),
+      m("space8", 0, 6, 0.125, "rem"),
+      m("space10", 0, 6, 0.125, "rem"),
+      m("space12", 0, 8, 0.125, "rem"),
+      m("space16", 0, 10, 0.125, "rem"),
+      m("space20", 0, 12, 0.125, "rem"),
+      m("space24", 0, 12, 0.125, "rem")
     ]
   },
   {
     label: "Radius",
     tokens: [
-      m("radiusNone"),
-      g("radiusSm", 0, 2, 0.0625, "rem"),
-      g("radiusMd", 0, 2, 0.0625, "rem"),
-      g("radiusLg", 0, 2, 0.0625, "rem"),
-      g("radiusXl", 0, 3, 0.0625, "rem"),
-      m("radiusFull")
+      p("radiusNone"),
+      m("radiusSm", 0, 2, 0.0625, "rem"),
+      m("radiusMd", 0, 2, 0.0625, "rem"),
+      m("radiusLg", 0, 2, 0.0625, "rem"),
+      m("radiusXl", 0, 3, 0.0625, "rem"),
+      p("radiusFull")
     ]
   },
   {
     label: "Shadows",
     tokens: [
-      m("shadowNone"),
-      m("shadowSm"),
-      m("shadowMd"),
-      m("shadowLg"),
-      m("shadowXl")
+      p("shadowNone"),
+      p("shadowSm"),
+      p("shadowMd"),
+      p("shadowLg"),
+      p("shadowXl")
     ]
   },
   {
     label: "Motion",
     tokens: [
-      m("durationFast"),
-      m("durationBase"),
-      m("durationSlow"),
-      m("easingDefault"),
-      m("easingEmphasized"),
-      m("easingDecelerate")
+      p("durationFast"),
+      p("durationBase"),
+      p("durationSlow"),
+      p("easingDefault"),
+      p("easingEmphasized"),
+      p("easingDecelerate")
     ]
   }
 ];
-function Le(e) {
+function $e(e) {
   return Object.keys(e).length === 0 ? `<LucentProvider>
   {children}
 </LucentProvider>` : `<LucentProvider tokens={{
@@ -170,57 +170,57 @@ ${Object.entries(e).map(([o, s]) => `    ${o}: '${s}'`).join(`,
   {children}
 </LucentProvider>`;
 }
-async function Pe(e) {
+async function je(e) {
   try {
     return await navigator.clipboard.writeText(e), !0;
   } catch {
     return !1;
   }
 }
-function Ee({ label: e, value: n, isOverridden: o, onChange: s, onReset: i }) {
-  return /* @__PURE__ */ c("div", { style: Ie, children: [
+function _e({ label: e, value: n, isOverridden: o, onChange: s, onReset: i }) {
+  return /* @__PURE__ */ c("div", { style: We, children: [
     /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", color: "secondary", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginRight: 8 }, children: e }),
     /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
       /* @__PURE__ */ t(
-        P,
+        E,
         {
           value: n,
           onChange: s,
           size: "sm"
         }
       ),
-      o && /* @__PURE__ */ t(B, { variant: "ghost", size: "2xs", onClick: i, "aria-label": "Reset to default", children: /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ t("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+      o && /* @__PURE__ */ t(M, { variant: "ghost", size: "2xs", onClick: i, "aria-label": "Reset to default", children: /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ t("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
     ] })
   ] });
 }
-const Ie = {
+const We = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "4px 0",
   minHeight: 28
 };
-function Ae({
+function Ne({
   label: e,
   value: n,
   isOverridden: o,
   min: s,
   max: i,
-  step: r,
+  step: l,
   unit: u,
   onChange: f,
   onReset: d
 }) {
   const b = parseFloat(n) || 0;
-  return /* @__PURE__ */ c("div", { style: Ge, children: [
+  return /* @__PURE__ */ c("div", { style: Ke, children: [
     /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", color: "secondary", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginRight: 8 }, children: e }),
     /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
       /* @__PURE__ */ t(
-        $,
+        _,
         {
           min: s,
           max: i,
-          step: r,
+          step: l,
           value: b,
           onChange: (v) => f(`${v}${u}`),
           size: "sm",
@@ -228,54 +228,54 @@ function Ae({
         }
       ),
       /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", color: "onAccent", style: { width: 52, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: n }),
-      o && /* @__PURE__ */ t(B, { variant: "ghost", size: "2xs", onClick: d, "aria-label": "Reset to default", children: /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ t("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+      o && /* @__PURE__ */ t(M, { variant: "ghost", size: "2xs", onClick: d, "aria-label": "Reset to default", children: /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ t("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
     ] })
   ] });
 }
-const Ge = {
+const Ke = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "4px 0",
   minHeight: 28
 };
-function $e({ label: e, value: n, isOverridden: o, onChange: s, onReset: i }) {
-  return /* @__PURE__ */ c("div", { style: _e, children: [
+function Ue({ label: e, value: n, isOverridden: o, onChange: s, onReset: i }) {
+  return /* @__PURE__ */ c("div", { style: He, children: [
     /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", color: "secondary", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginRight: 8 }, children: e }),
     /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
       /* @__PURE__ */ t(
-        re,
+        he,
         {
           size: "sm",
           value: n,
-          onChange: (r) => s(r.target.value),
+          onChange: (l) => s(l.target.value),
           style: { width: 140, fontFamily: "var(--lucent-font-family-mono)" },
           spellCheck: !1
         }
       ),
-      o && /* @__PURE__ */ t(B, { variant: "ghost", size: "2xs", onClick: i, "aria-label": "Reset to default", children: /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ t("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+      o && /* @__PURE__ */ t(M, { variant: "ghost", size: "2xs", onClick: i, "aria-label": "Reset to default", children: /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ t("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
     ] })
   ] });
 }
-const _e = {
+const He = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "4px 0",
   minHeight: 28
 };
-function Y(e, n) {
-  const o = Ce(e), s = ze(e, o), i = n === "light", r = z(s, i ? 0.05 : -0.07), u = z(s, i ? 0.85 : -0.6), f = z(s, i ? -0.15 : 0.15);
+function H(e, n) {
+  const o = De(e), s = Oe(e, o), i = n === "light", l = B(s, i ? 0.05 : -0.07), u = B(s, i ? 0.85 : -0.6), f = B(s, i ? -0.15 : 0.15);
   return {
     accentDefault: s,
     accentFg: o,
-    accentHover: r,
+    accentHover: l,
     accentSubtle: u,
     accentBorder: f
   };
 }
-function je(e, n) {
-  const o = n === "light", s = z(e, o ? -0.02 : 0.02), i = z(e, o ? -0.04 : 0.03), [r, u, f] = Be(e), d = o ? X(r, u * 0.3, Math.min(1, f + (1 - f) * 0.85)) : X(r, u, Math.min(0.25, f + 0.04)), b = z(d, o ? -0.04 : 0.03), v = z(d, o ? 0 : 0.06), x = z(d, o ? 0 : 0.06);
+function J(e, n) {
+  const o = n === "light", s = B(e, o ? -0.02 : 0.02), i = B(e, o ? -0.04 : 0.03), [l, u, f] = Re(e), d = o ? ne(l, u * 0.3, Math.min(1, f + (1 - f) * 0.85)) : ne(l, u, Math.min(0.25, f + 0.04)), b = B(d, o ? -0.04 : 0.03), v = B(d, o ? 0 : 0.06), x = B(d, o ? 0 : 0.06);
   return {
     bgBase: e,
     bgSubtle: s,
@@ -286,24 +286,24 @@ function je(e, n) {
     surfaceOverlay: x
   };
 }
-function We(e, n) {
+function X(e, n) {
   const o = n === "light";
   return {
     borderDefault: e,
-    borderSubtle: z(e, o ? 0.05 : -0.02),
-    borderStrong: z(e, o ? -0.27 : 0.19)
+    borderSubtle: B(e, o ? 0.05 : -0.02),
+    borderStrong: B(e, o ? -0.27 : 0.19)
   };
 }
-function Ne(e, n) {
+function q(e, n) {
   const o = n === "light";
   return {
     surface: e,
-    surfaceSecondary: z(e, o ? -0.04 : 0.03),
-    surfaceRaised: z(e, o ? 0 : 0.06),
-    surfaceOverlay: z(e, o ? 0 : 0.06)
+    surfaceSecondary: B(e, o ? -0.04 : 0.03),
+    surfaceRaised: B(e, o ? 0 : 0.06),
+    surfaceOverlay: B(e, o ? 0 : 0.06)
   };
 }
-const Ke = [
+const Je = [
   { key: "fontSizeXs", step: -2 },
   { key: "fontSizeSm", step: -1 },
   { key: "fontSizeMd", step: 0 },
@@ -312,22 +312,22 @@ const Ke = [
   { key: "fontSize2xl", step: 3 },
   { key: "fontSize3xl", step: 4 }
 ];
-function U(e, n) {
+function Z(e, n) {
   const o = {};
-  for (const { key: s, step: i } of Ke) {
-    const r = e * Math.pow(n, i), u = Math.round(r * 1e3) / 1e3;
+  for (const { key: s, step: i } of Je) {
+    const l = e * Math.pow(n, i), u = Math.round(l * 1e3) / 1e3;
     o[s] = `${u}rem`;
   }
   return o;
 }
-const Ue = [
+const Xe = [
   { label: "Minor Second", ratio: 1.067 },
   { label: "Major Second", ratio: 1.125 },
   { label: "Minor Third", ratio: 1.2 },
   { label: "Major Third", ratio: 1.25 },
   { label: "Perfect Fourth", ratio: 1.333 },
   { label: "Golden Ratio", ratio: 1.618 }
-], He = [
+], qe = [
   { key: "space0", rem: 0 },
   { key: "space1", rem: 0.25 },
   { key: "space2", rem: 0.5 },
@@ -342,9 +342,9 @@ const Ue = [
   { key: "space20", rem: 5 },
   { key: "space24", rem: 6 }
 ];
-function Z(e) {
+function ae(e) {
   const n = {};
-  for (const { key: o, rem: s } of He) {
+  for (const { key: o, rem: s } of qe) {
     if (s === 0) {
       n[o] = "0px";
       continue;
@@ -354,38 +354,38 @@ function Z(e) {
   }
   return n;
 }
-const Je = [
+const Ve = [
   { key: "radiusSm", sharp: 0, rounded: 0.25, pill: 0.5 },
   { key: "radiusMd", sharp: 0, rounded: 0.375, pill: 0.75 },
   { key: "radiusLg", sharp: 0, rounded: 0.5, pill: 1 },
   { key: "radiusXl", sharp: 0, rounded: 0.75, pill: 1.5 }
 ];
-function Q(e) {
+function le(e) {
   const n = {};
-  for (const { key: o, sharp: s, rounded: i, pill: r } of Je) {
+  for (const { key: o, sharp: s, rounded: i, pill: l } of Ve) {
     let u;
     if (e <= 0.5) {
       const d = e / 0.5;
       u = s + (i - s) * d;
     } else {
       const d = (e - 0.5) / 0.5;
-      u = i + (r - i) * d;
+      u = i + (l - i) * d;
     }
     const f = Math.round(u * 1e3) / 1e3;
     n[o] = `${f}rem`;
   }
   return n;
 }
-const Xe = {
-  flat: we,
-  subtle: ke,
-  elevated: Se,
-  liquidGlass: xe,
-  brutalist: ve,
-  neumorphic: be,
-  natural: ge,
-  glow: me
-}, qe = [
+const Ye = {
+  flat: Fe,
+  subtle: Me,
+  elevated: Te,
+  liquidGlass: Be,
+  brutalist: ze,
+  neumorphic: Ce,
+  natural: we,
+  glow: ke
+}, Ze = [
   { value: "flat", label: "Flat" },
   { value: "default", label: "Default" },
   { value: "subtle", label: "Subtle" },
@@ -396,13 +396,13 @@ const Xe = {
   { value: "brutalist", label: "Brutalist" },
   { value: "glow", label: "Glow" }
 ];
-function ee(e, n) {
+function V(e, n) {
   if (e === "default")
-    return n === "dark" ? he : pe;
-  const o = Xe[e];
+    return n === "dark" ? xe : Se;
+  const o = Ye[e];
   return n === "dark" ? o.dark : o.light;
 }
-const te = /* @__PURE__ */ new Set(), Ve = {
+const se = /* @__PURE__ */ new Set(), Qe = {
   Inter: "Inter:wght@300;400;500;600;700",
   Geist: "Geist:wght@300;400;500;600;700",
   "Plus Jakarta Sans": "Plus+Jakarta+Sans:wght@300;400;500;600;700",
@@ -418,30 +418,120 @@ const te = /* @__PURE__ */ new Set(), Ve = {
   "DM Mono": "DM+Mono:wght@400;500",
   Georama: "Georama:wght@400;500;600;700"
 };
-function j(e) {
-  var r;
-  const n = e.match(/"([^"]+)"/), o = n ? n[1] : (r = e.split(",")[0]) == null ? void 0 : r.trim();
-  if (!o || te.has(o)) return;
-  const s = Ve[o];
+function W(e) {
+  var l;
+  const n = e.match(/"([^"]+)"/), o = n ? n[1] : (l = e.split(",")[0]) == null ? void 0 : l.trim();
+  if (!o || se.has(o)) return;
+  const s = Qe[o];
   if (!s) return;
-  te.add(o);
+  se.add(o);
   const i = document.createElement("link");
   i.rel = "stylesheet", i.href = `https://fonts.googleapis.com/css2?family=${s}&display=swap`, document.head.appendChild(i);
 }
-const Ye = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', Ze = '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', Qe = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', et = '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace', tt = '"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif', ne = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', nt = '"Outfit", -apple-system, BlinkMacSystemFont, sans-serif', ot = '"Sora", -apple-system, BlinkMacSystemFont, sans-serif', at = '"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif', lt = [
+const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', tt = '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', nt = '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', ot = '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace', rt = '"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif', ie = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', at = '"Outfit", -apple-system, BlinkMacSystemFont, sans-serif', lt = '"Sora", -apple-system, BlinkMacSystemFont, sans-serif', st = '"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif', ce = [
   // ── Foundations ──
-  { name: "Default", accent: "#111827", roundness: 0.5, density: 1, shadow: "default", typeBase: 1, typeRatio: 1.125, fontFamily: Ye },
-  { name: "Modern", accent: "#6366f1", roundness: 0.5, density: 1, shadow: "subtle", typeBase: 1, typeRatio: 1.2, fontFamily: Ze },
+  {
+    name: "Default",
+    roundness: 0.5,
+    density: 1,
+    shadow: "default",
+    typeBase: 1,
+    typeRatio: 1.125,
+    fontFamily: et,
+    colors: { light: { accent: "#111827", bg: "#f7f8f9", surface: "#ffffff", border: "#e5e7eb" }, dark: { accent: "#f9fafb", bg: "#0c0d12", surface: "#1c1e28", border: "#2e3039" } }
+  },
+  {
+    name: "Modern",
+    roundness: 0.5,
+    density: 1,
+    shadow: "subtle",
+    typeBase: 1,
+    typeRatio: 1.2,
+    fontFamily: tt,
+    colors: { light: { accent: "#6366f1", bg: "#f8f7fc", surface: "#ffffff", border: "#e0dde9" }, dark: { accent: "#818cf8", bg: "#0d0c18", surface: "#1e1c30", border: "#302e42" } }
+  },
   // ── Design Personalities ──
-  { name: "Liquid Glass", accent: "#0ea5e9", roundness: 1, density: 0.9, shadow: "liquidGlass", typeBase: 1.0625, typeRatio: 1.2, fontFamily: ne },
-  { name: "Bento", accent: "#0d9488", roundness: 0.75, density: 1, shadow: "natural", typeBase: 0.9375, typeRatio: 1.2, fontFamily: Qe },
-  { name: "Brutalist", accent: "#ef4444", roundness: 0, density: 0.8, shadow: "brutalist", typeBase: 1.125, typeRatio: 1.25, fontFamily: tt },
-  { name: "Terminal", accent: "#10b981", roundness: 0, density: 0.8, shadow: "glow", typeBase: 0.9375, typeRatio: 1.125, fontFamily: et },
-  { name: "Soft UI", accent: "#8b5cf6", roundness: 1, density: 1.25, shadow: "neumorphic", typeBase: 1, typeRatio: 1.2, fontFamily: nt },
-  { name: "Bloom", accent: "#e879f9", roundness: 0.875, density: 1.25, shadow: "glow", typeBase: 1.0625, typeRatio: 1.25, fontFamily: ot },
-  { name: "Minimal", accent: "#475569", roundness: 0.25, density: 1, shadow: "flat", typeBase: 1, typeRatio: 1.125, fontFamily: at },
-  { name: "Enterprise", accent: "#475569", roundness: 0, density: 0.75, shadow: "flat", typeBase: 0.9375, typeRatio: 1.125, fontFamily: ne }
-], rt = [
+  {
+    name: "Liquid Glass",
+    roundness: 1,
+    density: 0.9,
+    shadow: "liquidGlass",
+    typeBase: 1.0625,
+    typeRatio: 1.2,
+    fontFamily: ie,
+    colors: { light: { accent: "#0ea5e9", bg: "#f5f9fc", surface: "#ffffff", border: "#d9e4ec" }, dark: { accent: "#38bdf8", bg: "#0a0e16", surface: "#16202e", border: "#243240" } }
+  },
+  {
+    name: "Bento",
+    roundness: 0.75,
+    density: 1,
+    shadow: "natural",
+    typeBase: 0.9375,
+    typeRatio: 1.2,
+    fontFamily: nt,
+    colors: { light: { accent: "#0d9488", bg: "#f5faf8", surface: "#ffffff", border: "#d4e5e0" }, dark: { accent: "#2dd4bf", bg: "#0a110f", surface: "#162824", border: "#263e38" } }
+  },
+  {
+    name: "Brutalist",
+    roundness: 0,
+    density: 0.8,
+    shadow: "brutalist",
+    typeBase: 1.125,
+    typeRatio: 1.25,
+    fontFamily: rt,
+    colors: { light: { accent: "#ef4444", bg: "#faf6f5", surface: "#ffffff", border: "#e9ddd8" }, dark: { accent: "#f87171", bg: "#140c0a", surface: "#2c1e1a", border: "#42322c" } }
+  },
+  {
+    name: "Terminal",
+    roundness: 0,
+    density: 0.8,
+    shadow: "glow",
+    typeBase: 0.9375,
+    typeRatio: 1.125,
+    fontFamily: ot,
+    colors: { light: { accent: "#10b981", bg: "#f5faf7", surface: "#ffffff", border: "#dbe8df" }, dark: { accent: "#34d399", bg: "#0a120c", surface: "#16281e", border: "#263e30" } }
+  },
+  {
+    name: "Soft UI",
+    roundness: 1,
+    density: 1.25,
+    shadow: "neumorphic",
+    typeBase: 1,
+    typeRatio: 1.2,
+    fontFamily: at,
+    colors: { light: { accent: "#8b5cf6", bg: "#f8f6fc", surface: "#ffffff", border: "#e2dce9" }, dark: { accent: "#a78bfa", bg: "#100c1a", surface: "#221e34", border: "#362e48" } }
+  },
+  {
+    name: "Bloom",
+    roundness: 0.875,
+    density: 1.25,
+    shadow: "glow",
+    typeBase: 1.0625,
+    typeRatio: 1.25,
+    fontFamily: lt,
+    colors: { light: { accent: "#e879f9", bg: "#faf6f8", surface: "#ffffff", border: "#ecdde1" }, dark: { accent: "#f0abfc", bg: "#140a10", surface: "#2c1a24", border: "#422a36" } }
+  },
+  {
+    name: "Minimal",
+    roundness: 0.25,
+    density: 1,
+    shadow: "flat",
+    typeBase: 1,
+    typeRatio: 1.125,
+    fontFamily: st,
+    colors: { light: { accent: "#475569", bg: "#f4f5f7", surface: "#ffffff", border: "#dde1e6" }, dark: { accent: "#94a3b8", bg: "#0c0e12", surface: "#1c2028", border: "#2e3440" } }
+  },
+  {
+    name: "Enterprise",
+    roundness: 0,
+    density: 0.75,
+    shadow: "flat",
+    typeBase: 0.9375,
+    typeRatio: 1.125,
+    fontFamily: ie,
+    colors: { light: { accent: "#475569", bg: "#f4f5f7", surface: "#ffffff", border: "#dde1e6" }, dark: { accent: "#94a3b8", bg: "#0c0e12", surface: "#1c2028", border: "#2e3440" } }
+  }
+], it = [
   {
     label: "Brand",
     colors: ["#111827", "#e9c96b", "#6366f1", "#8b5cf6", "#10b981", "#0d9488", "#f43f5e", "#e8624a", "#d97706", "#0ea5e9", "#475569", "#5f8c6e"]
@@ -450,7 +540,7 @@ const Ye = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     label: "Vibrant",
     colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#a855f7", "#ec4899", "#14b8a6", "#f59e0b"]
   }
-], st = [
+], ct = [
   {
     label: "Light",
     colors: ["#ffffff", "#fafafa", "#f9fafb", "#f5f5f4", "#fef7ee", "#faf5ff", "#f0f9ff", "#f0fdf4", "#fefce8", "#fff1f2"]
@@ -459,7 +549,7 @@ const Ye = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     label: "Dark",
     colors: ["#09090b", "#0a0a0a", "#0c0c0e", "#111827", "#18181b", "#1c1917", "#1a1a2e", "#0f172a", "#171717", "#0d1117"]
   }
-], it = [
+], dt = [
   {
     label: "Light",
     colors: ["#ffffff", "#fafafa", "#f9fafb", "#f5f5f5", "#f3f4f6", "#f1f5f9", "#fef3c7", "#fce7f3", "#dbeafe", "#dcfce7"]
@@ -468,7 +558,7 @@ const Ye = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     label: "Dark",
     colors: ["#111111", "#141414", "#1a1a1a", "#1e1e2e", "#1f2937", "#1e293b", "#18181b", "#16213e", "#1c1c1c", "#0f172a"]
   }
-], ct = [
+], ft = [
   {
     label: "Light",
     colors: ["#e5e7eb", "#d1d5db", "#e2e8f0", "#f3f4f6", "#d4d4d8", "#cbd5e1", "#e7e5e4", "#fde68a", "#c7d2fe", "#bbf7d0"]
@@ -478,49 +568,67 @@ const Ye = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     colors: ["#27272a", "#374151", "#334155", "#3f3f46", "#1e293b", "#404040", "#44403c", "#1c1f2a", "#2d2d3f", "#1f2937"]
   }
 ];
-function dt({ state: e, theme: n }) {
-  const [o, s] = C(1), [i, r] = C(0.5), [u, f] = C("default"), [d, b] = C(null), v = e.overrides.accentDefault ?? e.tokens.accentDefault, x = D((l) => {
-    for (const [I, W] of Object.entries(l))
-      e.setOverride(I, W);
-  }, [e]), R = D((l) => {
-    e.resetAll(), b(l.name), s(l.density), r(l.roundness), f(l.shadow);
-    const I = {
-      ...Y(l.accent, n),
-      ...U(l.typeBase, l.typeRatio),
-      ...Z(l.density),
-      ...Q(l.roundness),
-      ...ee(l.shadow, n),
-      fontFamilyBase: l.fontFamily
+function ut({ state: e, theme: n }) {
+  const [o, s] = C(1), [i, l] = C(0.5), [u, f] = C("default"), [d, b] = C(null), v = e.overrides.accentDefault ?? e.tokens.accentDefault, x = O((a) => {
+    for (const [z, A] of Object.entries(a))
+      e.setOverride(z, A);
+  }, [e]), D = O((a) => {
+    e.resetAll(), b(a.name), s(a.density), l(a.roundness), f(a.shadow);
+    const z = a.colors[n], A = {
+      ...H(z.accent, n),
+      ...J(z.bg, n),
+      ...q(z.surface, n),
+      ...X(z.border, n),
+      ...Z(a.typeBase, a.typeRatio),
+      ...ae(a.density),
+      ...le(a.roundness),
+      ...V(a.shadow, n),
+      fontFamilyBase: a.fontFamily
     };
-    j(l.fontFamily), requestAnimationFrame(() => {
-      for (const [W, ce] of Object.entries(I))
-        e.setOverride(W, ce);
+    W(a.fontFamily), requestAnimationFrame(() => {
+      for (const [G, U] of Object.entries(A))
+        e.setOverride(G, U);
     });
-  }, [e, n]), T = (l) => {
-    O(), s(l), x(Z(l));
-  }, M = (l) => {
-    O(), r(l), x(Q(l));
-  }, F = (l) => {
-    O(), f(l), x(ee(l, n));
-  }, E = (l) => {
-    O(), /^#[0-9a-f]{6}$/i.test(l) ? x(Y(l, n)) : e.setOverride("accentDefault", l);
-  }, a = (l) => {
-    O(), /^#[0-9a-f]{6}$/i.test(l) ? x(je(l, n)) : e.setOverride("bgBase", l);
-  }, p = (l) => {
-    O(), /^#[0-9a-f]{6}$/i.test(l) ? x(Ne(l, n)) : e.setOverride("surface", l);
-  }, k = (l) => {
-    O(), /^#[0-9a-f]{6}$/i.test(l) ? x(We(l, n)) : e.setOverride("borderDefault", l);
-  }, _ = e.overrides.bgBase ?? e.tokens.bgBase, H = e.overrides.surface ?? e.tokens.surface, J = e.overrides.borderDefault ?? e.tokens.borderDefault, se = i < 0.2 ? "Sharp" : i < 0.4 ? "Subtle" : i < 0.6 ? "Rounded" : i < 0.8 ? "Soft" : "Pill", ie = o < 0.85 ? "Compact" : o < 0.95 ? "Snug" : o < 1.05 ? "Default" : o < 1.15 ? "Relaxed" : "Spacious", O = () => b(null);
+  }, [e, n]), T = ue(n);
+  N(() => {
+    if (T.current === n || (T.current = n, !d)) return;
+    const a = ce.find((G) => G.name === d);
+    if (!a) return;
+    const z = a.colors[n], A = {
+      ...H(z.accent, n),
+      ...J(z.bg, n),
+      ...q(z.surface, n),
+      ...X(z.border, n),
+      ...V(u, n)
+    };
+    for (const [G, U] of Object.entries(A))
+      e.setOverride(G, U);
+  }, [n, d, u, e]);
+  const R = (a) => {
+    L(), s(a), x(ae(a));
+  }, F = (a) => {
+    L(), l(a), x(le(a));
+  }, I = (a) => {
+    L(), f(a), x(V(a, n));
+  }, r = (a) => {
+    L(), /^#[0-9a-f]{6}$/i.test(a) ? x(H(a, n)) : e.setOverride("accentDefault", a);
+  }, g = (a) => {
+    L(), /^#[0-9a-f]{6}$/i.test(a) ? x(J(a, n)) : e.setOverride("bgBase", a);
+  }, k = (a) => {
+    L(), /^#[0-9a-f]{6}$/i.test(a) ? x(q(a, n)) : e.setOverride("surface", a);
+  }, K = (a) => {
+    L(), /^#[0-9a-f]{6}$/i.test(a) ? x(X(a, n)) : e.setOverride("borderDefault", a);
+  }, Q = e.overrides.bgBase ?? e.tokens.bgBase, ee = e.overrides.surface ?? e.tokens.surface, te = e.overrides.borderDefault ?? e.tokens.borderDefault, ge = i < 0.2 ? "Sharp" : i < 0.4 ? "Subtle" : i < 0.6 ? "Rounded" : i < 0.8 ? "Soft" : "Pill", pe = o < 0.85 ? "Compact" : o < 0.95 ? "Snug" : o < 1.05 ? "Default" : o < 1.15 ? "Relaxed" : "Spacious", L = () => b(null);
   return /* @__PURE__ */ c("div", { style: { padding: "4px 12px 12px", display: "flex", flexDirection: "column", gap: 16 }, children: [
-    /* @__PURE__ */ t(A, { label: "Presets", children: /* @__PURE__ */ t("div", { style: {
+    /* @__PURE__ */ t($, { label: "Presets", children: /* @__PURE__ */ t("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(5, 1fr)",
       gap: 6
-    }, children: lt.map((l) => /* @__PURE__ */ c(
-      B,
+    }, children: ce.map((a) => /* @__PURE__ */ c(
+      M,
       {
-        variant: d === l.name ? "secondary" : "ghost",
-        onClick: () => R(l),
+        variant: d === a.name ? "secondary" : "ghost",
+        onClick: () => D(a),
         style: {
           padding: "8px 4px 6px",
           display: "flex",
@@ -533,85 +641,85 @@ function dt({ state: e, theme: n }) {
           /* @__PURE__ */ t("div", { style: {
             width: 24,
             height: 24,
-            borderRadius: l.roundness < 0.3 ? 3 : l.roundness < 0.7 ? 6 : 12,
-            background: l.accent,
+            borderRadius: a.roundness < 0.3 ? 3 : a.roundness < 0.7 ? 6 : 12,
+            background: a.colors[n].accent,
             border: "1px solid rgba(255,255,255,0.1)"
           } }),
-          /* @__PURE__ */ t(h, { size: "xs", ...d !== l.name && { color: "secondary" }, weight: d === l.name ? "semibold" : "regular", style: { fontSize: 9, whiteSpace: "nowrap" }, children: l.name })
+          /* @__PURE__ */ t(h, { size: "xs", ...d !== a.name && { color: "secondary" }, weight: d === a.name ? "semibold" : "regular", style: { fontSize: 9, whiteSpace: "nowrap" }, children: a.name })
         ]
       },
-      l.name
+      a.name
     )) }) }),
-    /* @__PURE__ */ t(A, { label: "Colors", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ t($, { label: "Colors", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-        /* @__PURE__ */ t(P, { value: v, onChange: E, size: "sm", presetGroups: rt }),
+        /* @__PURE__ */ t(E, { value: v, onChange: r, size: "sm", presetGroups: it }),
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Accent" }),
         /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: v })
       ] }),
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-        /* @__PURE__ */ t(P, { value: _, onChange: a, size: "sm", presetGroups: st }),
+        /* @__PURE__ */ t(E, { value: Q, onChange: g, size: "sm", presetGroups: ct }),
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Background" }),
-        /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: _ })
+        /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: Q })
       ] }),
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-        /* @__PURE__ */ t(P, { value: H, onChange: p, size: "sm", presetGroups: it }),
+        /* @__PURE__ */ t(E, { value: ee, onChange: k, size: "sm", presetGroups: dt }),
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Surface" }),
-        /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: H })
+        /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: ee })
       ] }),
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-        /* @__PURE__ */ t(P, { value: J, onChange: k, size: "sm", presetGroups: ct }),
+        /* @__PURE__ */ t(E, { value: te, onChange: K, size: "sm", presetGroups: ft }),
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Border" }),
-        /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: J })
+        /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: te })
       ] })
     ] }) }),
-    /* @__PURE__ */ c(A, { label: "Density", children: [
+    /* @__PURE__ */ c($, { label: "Density", children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ t(h, { size: "xs", family: "mono", color: "secondary", style: { width: 54, flexShrink: 0 }, children: "Compact" }),
-        /* @__PURE__ */ t($, { min: 0.7, max: 1.35, step: 0.01, value: o, onChange: (l) => T(parseFloat(l.target.value)), size: "sm", style: { flex: 1 } }),
+        /* @__PURE__ */ t(_, { min: 0.7, max: 1.35, step: 0.01, value: o, onChange: (a) => R(parseFloat(a.target.value)), size: "sm", style: { flex: 1 } }),
         /* @__PURE__ */ t(h, { size: "xs", family: "mono", color: "secondary", style: { width: 54, textAlign: "right", flexShrink: 0 }, children: "Spacious" })
       ] }),
       /* @__PURE__ */ t("div", { style: { textAlign: "center", marginTop: 4 }, children: /* @__PURE__ */ c(h, { size: "xs", style: { color: "var(--lucent-accent-default)" }, children: [
-        ie,
+        pe,
         " (",
         o.toFixed(2),
         "x)"
       ] }) })
     ] }),
-    /* @__PURE__ */ c(A, { label: "Roundness", children: [
+    /* @__PURE__ */ c($, { label: "Roundness", children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ t(h, { size: "xs", family: "mono", color: "secondary", style: { width: 36, flexShrink: 0 }, children: "Sharp" }),
-        /* @__PURE__ */ t($, { min: 0, max: 1, step: 0.01, value: i, onChange: (l) => M(parseFloat(l.target.value)), size: "sm", style: { flex: 1 } }),
+        /* @__PURE__ */ t(_, { min: 0, max: 1, step: 0.01, value: i, onChange: (a) => F(parseFloat(a.target.value)), size: "sm", style: { flex: 1 } }),
         /* @__PURE__ */ t(h, { size: "xs", family: "mono", color: "secondary", style: { width: 24, textAlign: "right", flexShrink: 0 }, children: "Pill" })
       ] }),
-      /* @__PURE__ */ t("div", { style: { display: "flex", gap: 8, marginTop: 8, justifyContent: "center" }, children: [0, 0.25, 0.5, 0.75, 1].map((l) => /* @__PURE__ */ t("div", { style: {
+      /* @__PURE__ */ t("div", { style: { display: "flex", gap: 8, marginTop: 8, justifyContent: "center" }, children: [0, 0.25, 0.5, 0.75, 1].map((a) => /* @__PURE__ */ t("div", { style: {
         width: 32,
         height: 32,
         background: "var(--lucent-surface-secondary)",
-        border: `1.5px solid ${Math.abs(i - l) < 0.05 ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
-        borderRadius: l === 0 ? 2 : l < 0.5 ? 4 : l < 0.8 ? 8 : 16,
+        border: `1.5px solid ${Math.abs(i - a) < 0.05 ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
+        borderRadius: a === 0 ? 2 : a < 0.5 ? 4 : a < 0.8 ? 8 : 16,
         cursor: "pointer",
         transition: "border-color 150ms"
-      }, onClick: () => M(l) }, l)) }),
-      /* @__PURE__ */ t("div", { style: { textAlign: "center", marginTop: 4 }, children: /* @__PURE__ */ t(h, { size: "xs", style: { color: "var(--lucent-accent-default)" }, children: se }) })
+      }, onClick: () => F(a) }, a)) }),
+      /* @__PURE__ */ t("div", { style: { textAlign: "center", marginTop: 4 }, children: /* @__PURE__ */ t(h, { size: "xs", style: { color: "var(--lucent-accent-default)" }, children: ge }) })
     ] }),
-    /* @__PURE__ */ t(A, { label: "Shadow Style", children: /* @__PURE__ */ t("div", { style: {
+    /* @__PURE__ */ t($, { label: "Shadow Style", children: /* @__PURE__ */ t("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(3, 1fr)",
       gap: 4
-    }, children: qe.map(({ value: l, label: I }) => /* @__PURE__ */ t(
-      B,
+    }, children: Ze.map(({ value: a, label: z }) => /* @__PURE__ */ t(
+      M,
       {
-        variant: u === l ? "secondary" : "ghost",
+        variant: u === a ? "secondary" : "ghost",
         size: "2xs",
-        onClick: () => F(l),
+        onClick: () => I(a),
         style: { justifyContent: "center" },
-        children: I
+        children: z
       },
-      l
+      a
     )) }) })
   ] });
 }
-function A({ label: e, children: n }) {
+function $({ label: e, children: n }) {
   return /* @__PURE__ */ c("div", { style: {
     background: "var(--lucent-surface)",
     borderRadius: "var(--lucent-radius-lg)",
@@ -622,7 +730,7 @@ function A({ label: e, children: n }) {
     n
   ] });
 }
-const L = [
+const P = [
   { label: "DM Sans", family: '"DM Sans", sans-serif', category: "sans" },
   { label: "Inter", family: '"Inter", sans-serif', category: "sans" },
   { label: "System UI", family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', category: "sans" },
@@ -638,30 +746,30 @@ const L = [
   { label: "Sora", family: '"Sora", sans-serif', category: "display" },
   { label: "Georama", family: '"Georama", sans-serif', category: "display" }
 ];
-function ft({ state: e, theme: n }) {
-  const o = e.overrides.fontSizeMd ?? e.tokens.fontSizeMd, s = parseFloat(o) || 1, [i, r] = C(s), [u, f] = C(() => {
-    const a = e.overrides.fontSizeLg ?? e.tokens.fontSizeLg, p = parseFloat(a) || 1.125, k = parseFloat(o) || 1;
-    return k > 0 ? Math.round(p / k * 1e3) / 1e3 : 1.125;
+function yt({ state: e, theme: n }) {
+  const o = e.overrides.fontSizeMd ?? e.tokens.fontSizeMd, s = parseFloat(o) || 1, [i, l] = C(s), [u, f] = C(() => {
+    const r = e.overrides.fontSizeLg ?? e.tokens.fontSizeLg, g = parseFloat(r) || 1.125, k = parseFloat(o) || 1;
+    return k > 0 ? Math.round(g / k * 1e3) / 1e3 : 1.125;
   });
-  K(() => {
-    const a = parseFloat(e.overrides.fontSizeMd ?? e.tokens.fontSizeMd) || 1, p = parseFloat(e.overrides.fontSizeLg ?? e.tokens.fontSizeLg) || 1.125;
-    r(a), a > 0 && f(Math.round(p / a * 1e3) / 1e3);
+  N(() => {
+    const r = parseFloat(e.overrides.fontSizeMd ?? e.tokens.fontSizeMd) || 1, g = parseFloat(e.overrides.fontSizeLg ?? e.tokens.fontSizeLg) || 1.125;
+    l(r), r > 0 && f(Math.round(g / r * 1e3) / 1e3);
   }, [e.overrides.fontSizeMd, e.overrides.fontSizeLg, e.tokens.fontSizeMd, e.tokens.fontSizeLg]);
-  const [d, b] = C("all"), v = e.overrides.fontFamilyBase ?? e.tokens.fontFamilyBase, x = e.overrides.fontFamilyMono ?? e.tokens.fontFamilyMono, R = e.overrides.fontFamilyDisplay ?? e.tokens.fontFamilyDisplay, T = D((a) => {
-    for (const [p, k] of Object.entries(a))
-      e.setOverride(p, k);
-  }, [e]), M = (a) => {
-    r(a), T(U(a, u));
-  }, F = (a) => {
-    f(a), T(U(i, a));
-  }, E = d === "all" ? L : L.filter((a) => a.category === d);
+  const [d, b] = C("all"), v = e.overrides.fontFamilyBase ?? e.tokens.fontFamilyBase, x = e.overrides.fontFamilyMono ?? e.tokens.fontFamilyMono, D = e.overrides.fontFamilyDisplay ?? e.tokens.fontFamilyDisplay, T = O((r) => {
+    for (const [g, k] of Object.entries(r))
+      e.setOverride(g, k);
+  }, [e]), R = (r) => {
+    l(r), T(Z(r, u));
+  }, F = (r) => {
+    f(r), T(Z(i, r));
+  }, I = d === "all" ? P : P.filter((r) => r.category === d);
   return /* @__PURE__ */ c("div", { style: { padding: "4px 12px 12px", display: "flex", flexDirection: "column", gap: 16 }, children: [
-    /* @__PURE__ */ c(G, { label: "Font Family", children: [
+    /* @__PURE__ */ c(j, { label: "Font Family", children: [
       /* @__PURE__ */ t("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ t(
-        Te,
+        Le,
         {
           value: d,
-          onChange: (a) => b(a),
+          onChange: (r) => b(r),
           options: [
             { value: "all", label: "All" },
             { value: "sans", label: "Sans" },
@@ -673,14 +781,14 @@ function ft({ state: e, theme: n }) {
           fullWidth: !0
         }
       ) }),
-      /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: E.map((a) => {
-        const p = v.includes(a.label) || a.family === v;
+      /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: I.map((r) => {
+        const g = v.includes(r.label) || r.family === v;
         return /* @__PURE__ */ c(
-          B,
+          M,
           {
-            variant: p ? "secondary" : "ghost",
+            variant: g ? "secondary" : "ghost",
             onClick: () => {
-              j(a.family), e.setOverride("fontFamilyBase", a.family);
+              W(r.family), e.setOverride("fontFamilyBase", r.family);
             },
             style: {
               width: "100%",
@@ -689,41 +797,41 @@ function ft({ state: e, theme: n }) {
               padding: "8px 10px"
             },
             children: [
-              /* @__PURE__ */ t("span", { style: { fontFamily: a.family, fontSize: 14 }, children: a.label }),
-              /* @__PURE__ */ t(h, { as: "span", size: "xs", color: "secondary", style: { textTransform: "capitalize" }, children: a.category })
+              /* @__PURE__ */ t("span", { style: { fontFamily: r.family, fontSize: 14 }, children: r.label }),
+              /* @__PURE__ */ t(h, { as: "span", size: "xs", color: "secondary", style: { textTransform: "capitalize" }, children: r.category })
             ]
           },
-          a.label
+          r.label
         );
       }) }),
       /* @__PURE__ */ c("div", { style: { marginTop: 8 }, children: [
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Custom" }),
         /* @__PURE__ */ t(
-          re,
+          he,
           {
             size: "sm",
             value: v,
-            onChange: (a) => e.setOverride("fontFamilyBase", a.target.value),
+            onChange: (r) => e.setOverride("fontFamilyBase", r.target.value),
             style: { width: "100%", fontFamily: "var(--lucent-font-family-mono)" },
             spellCheck: !1
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ t(G, { label: "Code & Display Fonts", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ t(j, { label: "Code & Display Fonts", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Monospace" }),
         /* @__PURE__ */ t(
-          q,
+          oe,
           {
             size: "sm",
             value: x,
-            onChange: (a) => {
-              j(a.target.value), e.setOverride("fontFamilyMono", a.target.value);
+            onChange: (r) => {
+              W(r.target.value), e.setOverride("fontFamilyMono", r.target.value);
             },
             options: [
-              ...L.filter((a) => a.category === "mono").map((a) => ({ value: a.family, label: a.label })),
-              ...L.some((a) => a.family === x) ? [] : [{ value: x, label: "Custom" }]
+              ...P.filter((r) => r.category === "mono").map((r) => ({ value: r.family, label: r.label })),
+              ...P.some((r) => r.family === x) ? [] : [{ value: x, label: "Custom" }]
             ]
           }
         )
@@ -731,26 +839,26 @@ function ft({ state: e, theme: n }) {
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Display" }),
         /* @__PURE__ */ t(
-          q,
+          oe,
           {
             size: "sm",
-            value: R,
-            onChange: (a) => {
-              j(a.target.value), e.setOverride("fontFamilyDisplay", a.target.value);
+            value: D,
+            onChange: (r) => {
+              W(r.target.value), e.setOverride("fontFamilyDisplay", r.target.value);
             },
             options: [
-              ...L.filter((a) => a.category === "display" || a.category === "sans").map((a) => ({ value: a.family, label: a.label })),
-              ...L.some((a) => a.family === R) ? [] : [{ value: R, label: "Custom" }]
+              ...P.filter((r) => r.category === "display" || r.category === "sans").map((r) => ({ value: r.family, label: r.label })),
+              ...P.some((r) => r.family === D) ? [] : [{ value: D, label: "Custom" }]
             ]
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ t(G, { label: "Type Scale", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ t(j, { label: "Type Scale", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Base Size" }),
         /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-          /* @__PURE__ */ t($, { min: 0.75, max: 1.5, step: 0.0625, value: i, onChange: (a) => M(parseFloat(a.target.value)), size: "sm", style: { flex: 1 } }),
+          /* @__PURE__ */ t(_, { min: 0.75, max: 1.5, step: 0.0625, value: i, onChange: (r) => R(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
           /* @__PURE__ */ c(h, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: [
             i,
             "rem"
@@ -760,37 +868,37 @@ function ft({ state: e, theme: n }) {
       /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Scale Ratio" }),
         /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-          /* @__PURE__ */ t($, { min: 1, max: 1.618, step: 1e-3, value: u, onChange: (a) => F(parseFloat(a.target.value)), size: "sm", style: { flex: 1 } }),
+          /* @__PURE__ */ t(_, { min: 1, max: 1.618, step: 1e-3, value: u, onChange: (r) => F(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
           /* @__PURE__ */ t(h, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: u.toFixed(3) })
         ] }),
-        /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 6 }, children: Ue.map((a) => /* @__PURE__ */ t(
-          B,
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 6 }, children: Xe.map((r) => /* @__PURE__ */ t(
+          M,
           {
-            variant: Math.abs(u - a.ratio) < 5e-3 ? "secondary" : "ghost",
+            variant: Math.abs(u - r.ratio) < 5e-3 ? "secondary" : "ghost",
             size: "2xs",
-            onClick: () => F(a.ratio),
-            children: a.label
+            onClick: () => F(r.ratio),
+            children: r.label
           },
-          a.label
+          r.label
         )) })
       ] })
     ] }) }),
-    /* @__PURE__ */ t(G, { label: "Text Colors", children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: yt.map(({ key: a, label: p }) => {
-      const k = e.overrides[a] ?? e.tokens[a];
+    /* @__PURE__ */ t(j, { label: "Text Colors", children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: ht.map(({ key: r, label: g }) => {
+      const k = e.overrides[r] ?? e.tokens[r];
       return /* @__PURE__ */ t(
-        P,
+        E,
         {
-          label: p,
+          label: g,
           value: k,
-          onChange: (_) => e.setOverride(a, _),
+          onChange: (K) => e.setOverride(r, K),
           size: "sm",
           inline: !0
         },
-        a
+        r
       );
     }) }) }),
-    /* @__PURE__ */ t(G, { label: "Preview", children: /* @__PURE__ */ t(
-      ut,
+    /* @__PURE__ */ t(j, { label: "Preview", children: /* @__PURE__ */ t(
+      gt,
       {
         family: v,
         baseSize: i,
@@ -802,13 +910,13 @@ function ft({ state: e, theme: n }) {
     ) })
   ] });
 }
-const yt = [
+const ht = [
   { key: "textPrimary", label: "Primary" },
   { key: "textSecondary", label: "Secondary" },
   { key: "textDisabled", label: "Disabled" },
   { key: "textInverse", label: "Inverse" }
 ];
-function G({ label: e, children: n }) {
+function j({ label: e, children: n }) {
   return /* @__PURE__ */ c("div", { style: {
     background: "var(--lucent-surface)",
     borderRadius: "var(--lucent-radius-lg)",
@@ -819,10 +927,10 @@ function G({ label: e, children: n }) {
     n
   ] });
 }
-function ut({ family: e, baseSize: n, ratio: o, textPrimary: s, textSecondary: i, bgBase: r }) {
+function gt({ family: e, baseSize: n, ratio: o, textPrimary: s, textSecondary: i, bgBase: l }) {
   const u = n * Math.pow(o, 4), f = n * Math.pow(o, 2), d = n, b = n * Math.pow(o, -1);
   return /* @__PURE__ */ c("div", { style: {
-    background: r,
+    background: l,
     borderRadius: 6,
     padding: "14px 12px",
     fontFamily: e,
@@ -863,37 +971,37 @@ const w = {
   accent: "#e9c96b",
   border: "rgba(233, 201, 107, 0.1)",
   inputBg: "rgba(255, 255, 255, 0.05)"
-}, ht = ye(null);
-function pt({ children: e }) {
-  const [n, o] = C(null), s = D((r) => {
-    r && o(r);
-  }, []), i = fe(() => {
-    const r = {};
-    for (const [u, f] of Object.entries(Me))
-      r[S(u)] = f;
-    return r[S("bgBase")] = w.bg, r[S("surface")] = w.surface, r[S("surfaceSecondary")] = w.inputBg, r[S("borderDefault")] = w.border, r[S("borderSubtle")] = w.border, r[S("textPrimary")] = w.text, r[S("textSecondary")] = w.textMuted, r[S("accentDefault")] = w.accent, r[S("accentFg")] = "#0a0a0a", r[S("accentSubtle")] = "rgba(233, 201, 107, 0.12)", r[S("accentHover")] = "#d4b55a", r[S("accentBorder")] = w.accent, r;
+}, pt = be(null);
+function mt({ children: e }) {
+  const [n, o] = C(null), s = O((l) => {
+    l && o(l);
+  }, []), i = me(() => {
+    const l = {};
+    for (const [u, f] of Object.entries(Pe))
+      l[S(u)] = f;
+    return l[S("bgBase")] = w.bg, l[S("surface")] = w.surface, l[S("surfaceSecondary")] = w.inputBg, l[S("borderDefault")] = w.border, l[S("borderSubtle")] = w.border, l[S("textPrimary")] = w.text, l[S("textSecondary")] = w.textMuted, l[S("accentDefault")] = w.accent, l[S("accentFg")] = "#0a0a0a", l[S("accentSubtle")] = "rgba(233, 201, 107, 0.12)", l[S("accentHover")] = "#d4b55a", l[S("accentBorder")] = w.accent, l;
   }, []);
-  return /* @__PURE__ */ t("div", { ref: s, style: i, children: /* @__PURE__ */ t(ht.Provider, { value: n, children: e }) });
+  return /* @__PURE__ */ t("div", { ref: s, style: i, children: /* @__PURE__ */ t(pt.Provider, { value: n, children: e }) });
 }
-function mt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onThemeChange: r, onClose: u }) {
-  const [f, d] = C("design"), [b, v] = C(""), [x, R] = C(() => {
-    const p = {};
-    for (const k of V)
-      p[k.label] = k.defaultExpanded ?? !1;
-    return p;
-  }), [T, M] = C(!1), F = (p) => {
-    R((k) => ({ ...k, [p]: !k[p] }));
-  }, E = async () => {
-    const p = Le(e.overrides);
-    await Pe(p) && (M(!0), setTimeout(() => M(!1), 2e3));
-  }, a = b.toLowerCase();
-  return /* @__PURE__ */ t(pt, { children: /* @__PURE__ */ c("div", { style: {
-    ...bt,
+function bt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onThemeChange: l, onClose: u }) {
+  const [f, d] = C("design"), [b, v] = C(""), [x, D] = C(() => {
+    const g = {};
+    for (const k of re)
+      g[k.label] = k.defaultExpanded ?? !1;
+    return g;
+  }), [T, R] = C(!1), F = (g) => {
+    D((k) => ({ ...k, [g]: !k[g] }));
+  }, I = async () => {
+    const g = $e(e.overrides);
+    await je(g) && (R(!0), setTimeout(() => R(!1), 2e3));
+  }, r = b.toLowerCase();
+  return /* @__PURE__ */ t(mt, { children: /* @__PURE__ */ c("div", { style: {
+    ...xt,
     [o]: 0,
     borderLeft: o === "right" ? `1px solid ${w.border}` : void 0,
     borderRight: o === "left" ? `1px solid ${w.border}` : void 0
   }, children: [
-    /* @__PURE__ */ c("div", { style: vt, children: [
+    /* @__PURE__ */ c("div", { style: St, children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ c("svg", { width: "16", height: "16", viewBox: "0 0 60 60", fill: "none", children: [
           /* @__PURE__ */ t("rect", { x: "8", y: "8", width: "18", height: "22", rx: "2", fill: "#e9c96b", opacity: "0.92" }),
@@ -903,16 +1011,16 @@ function mt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
         /* @__PURE__ */ t(h, { size: "sm", weight: "semibold", children: "Lucent DevTools" })
       ] }),
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        r && /* @__PURE__ */ t(
-          Fe,
+        l && /* @__PURE__ */ t(
+          Ee,
           {
             checked: n === "dark",
-            onChange: () => r(n === "light" ? "dark" : "light"),
+            onChange: () => l(n === "light" ? "dark" : "light"),
             size: "sm"
           }
         ),
         /* @__PURE__ */ t(
-          B,
+          M,
           {
             variant: "ghost",
             size: "2xs",
@@ -928,14 +1036,14 @@ function mt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
             ] })
           }
         ),
-        /* @__PURE__ */ t(B, { variant: "ghost", size: "2xs", onClick: u, "aria-label": "Close", children: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ t("path", { d: "M2 2l10 10M12 2L2 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
+        /* @__PURE__ */ t(M, { variant: "ghost", size: "2xs", onClick: u, "aria-label": "Close", children: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ t("path", { d: "M2 2l10 10M12 2L2 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })
       ] })
     ] }),
     /* @__PURE__ */ t("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ t(
-      Re,
+      Ie,
       {
         value: f,
-        onChange: (p) => d(p),
+        onChange: (g) => d(g),
         tabs: [
           { value: "design", label: "Design" },
           { value: "type", label: "Typography" },
@@ -943,38 +1051,38 @@ function mt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
         ]
       }
     ) }),
-    f === "tokens" && /* @__PURE__ */ c(ae, { children: [
+    f === "tokens" && /* @__PURE__ */ c(fe, { children: [
       /* @__PURE__ */ t("div", { style: { padding: "8px 12px" }, children: /* @__PURE__ */ t(
         "input",
         {
           type: "text",
           placeholder: "Filter tokens...",
           value: b,
-          onChange: (p) => v(p.target.value),
-          style: xt,
+          onChange: (g) => v(g.target.value),
+          style: kt,
           spellCheck: !1
         }
       ) }),
-      /* @__PURE__ */ t("div", { style: N, children: V.map((p) => /* @__PURE__ */ t(
-        gt,
+      /* @__PURE__ */ t("div", { style: Y, children: re.map((g) => /* @__PURE__ */ t(
+        vt,
         {
-          group: p,
+          group: g,
           state: e,
-          filter: a,
-          expanded: x[p.label] ?? !1,
-          onToggle: () => F(p.label)
+          filter: r,
+          expanded: x[g.label] ?? !1,
+          onToggle: () => F(g.label)
         },
-        p.label
+        g.label
       )) })
     ] }),
-    f === "design" && /* @__PURE__ */ t("div", { style: N, children: /* @__PURE__ */ t(dt, { state: e, theme: n }) }),
-    f === "type" && /* @__PURE__ */ t("div", { style: N, children: /* @__PURE__ */ t(ft, { state: e, theme: n }) }),
-    /* @__PURE__ */ c("div", { style: wt, children: [
+    f === "design" && /* @__PURE__ */ t("div", { style: Y, children: /* @__PURE__ */ t(ut, { state: e, theme: n }) }),
+    f === "type" && /* @__PURE__ */ t("div", { style: Y, children: /* @__PURE__ */ t(yt, { state: e, theme: n }) }),
+    /* @__PURE__ */ c("div", { style: zt, children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", gap: 6, flex: 1 }, children: [
-        /* @__PURE__ */ t(B, { size: "xs", onClick: E, children: T ? "Copied!" : "Copy Config" }),
-        e.overrideCount > 0 && /* @__PURE__ */ t(B, { variant: "outline", size: "xs", onClick: e.resetAll, children: "Reset All" })
+        /* @__PURE__ */ t(M, { size: "xs", onClick: I, children: T ? "Copied!" : "Copy Config" }),
+        e.overrideCount > 0 && /* @__PURE__ */ t(M, { variant: "outline", size: "xs", onClick: e.resetAll, children: "Reset All" })
       ] }),
-      e.overrideCount > 0 && /* @__PURE__ */ c(De, { variant: "accent", size: "sm", children: [
+      e.overrideCount > 0 && /* @__PURE__ */ c(Ae, { variant: "accent", size: "sm", children: [
         e.overrideCount,
         " override",
         e.overrideCount !== 1 ? "s" : ""
@@ -982,12 +1090,12 @@ function mt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
     ] })
   ] }) });
 }
-function gt({ group: e, state: n, filter: o, expanded: s, onToggle: i }) {
-  const r = e.subgroups ? e.subgroups.flatMap((d) => d.tokens) : e.tokens ?? [];
-  if (!(o === "" || r.some((d) => d.key.toLowerCase().includes(o)))) return null;
+function vt({ group: e, state: n, filter: o, expanded: s, onToggle: i }) {
+  const l = e.subgroups ? e.subgroups.flatMap((d) => d.tokens) : e.tokens ?? [];
+  if (!(o === "" || l.some((d) => d.key.toLowerCase().includes(o)))) return null;
   const f = s || o !== "";
   return /* @__PURE__ */ c("div", { style: { borderBottom: `1px solid ${w.border}` }, children: [
-    /* @__PURE__ */ c("button", { onClick: i, style: St, children: [
+    /* @__PURE__ */ c("button", { onClick: i, style: wt, children: [
       /* @__PURE__ */ t(
         "svg",
         {
@@ -999,34 +1107,34 @@ function gt({ group: e, state: n, filter: o, expanded: s, onToggle: i }) {
         }
       ),
       /* @__PURE__ */ t(h, { size: "xs", weight: "semibold", children: e.label }),
-      /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginLeft: "auto" }, children: r.length })
+      /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginLeft: "auto" }, children: l.length })
     ] }),
     f && /* @__PURE__ */ t("div", { style: { padding: "0 12px 8px" }, children: e.subgroups ? e.subgroups.map((d) => {
       const b = o ? d.tokens.filter((v) => v.key.toLowerCase().includes(o)) : d.tokens;
       return b.length === 0 ? null : /* @__PURE__ */ c("div", { style: { marginBottom: 8 }, children: [
-        /* @__PURE__ */ t("div", { style: kt, children: d.label }),
-        b.map((v) => /* @__PURE__ */ t(oe, { meta: v, state: n }, v.key))
+        /* @__PURE__ */ t("div", { style: Ct, children: d.label }),
+        b.map((v) => /* @__PURE__ */ t(de, { meta: v, state: n }, v.key))
       ] }, d.label);
-    }) : (e.tokens ?? []).filter((d) => !o || d.key.toLowerCase().includes(o)).map((d) => /* @__PURE__ */ t(oe, { meta: d, state: n }, d.key)) })
+    }) : (e.tokens ?? []).filter((d) => !o || d.key.toLowerCase().includes(o)).map((d) => /* @__PURE__ */ t(de, { meta: d, state: n }, d.key)) })
   ] });
 }
-function oe({ meta: e, state: n }) {
-  const o = n.overrides[e.key] ?? n.tokens[e.key], s = e.key in n.overrides, i = (u) => n.setOverride(e.key, u), r = () => n.removeOverride(e.key);
+function de({ meta: e, state: n }) {
+  const o = n.overrides[e.key] ?? n.tokens[e.key], s = e.key in n.overrides, i = (u) => n.setOverride(e.key, u), l = () => n.removeOverride(e.key);
   switch (e.controlType) {
     case "color":
       return /* @__PURE__ */ t(
-        Ee,
+        _e,
         {
           label: e.key,
           value: o,
           isOverridden: s,
           onChange: i,
-          onReset: r
+          onReset: l
         }
       );
     case "slider":
       return /* @__PURE__ */ t(
-        Ae,
+        Ne,
         {
           label: e.key,
           value: o,
@@ -1036,23 +1144,23 @@ function oe({ meta: e, state: n }) {
           step: e.sliderConfig.step,
           unit: e.sliderConfig.unit,
           onChange: i,
-          onReset: r
+          onReset: l
         }
       );
     case "text":
       return /* @__PURE__ */ t(
-        $e,
+        Ue,
         {
           label: e.key,
           value: o,
           isOverridden: s,
           onChange: i,
-          onReset: r
+          onReset: l
         }
       );
   }
 }
-const bt = {
+const xt = {
   position: "fixed",
   top: 0,
   bottom: 0,
@@ -1065,13 +1173,13 @@ const bt = {
   flexDirection: "column",
   zIndex: 99999,
   boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.3)"
-}, vt = {
+}, St = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "10px 12px",
   flexShrink: 0
-}, xt = {
+}, kt = {
   width: "100%",
   background: "var(--lucent-surface-secondary)",
   color: "var(--lucent-text-primary)",
@@ -1082,11 +1190,11 @@ const bt = {
   outline: "none",
   fontFamily: "inherit",
   boxSizing: "border-box"
-}, N = {
+}, Y = {
   flex: 1,
   overflowY: "auto",
   minHeight: 0
-}, St = {
+}, wt = {
   display: "flex",
   alignItems: "center",
   gap: 8,
@@ -1098,7 +1206,7 @@ const bt = {
   color: "inherit",
   fontFamily: "inherit",
   textAlign: "left"
-}, kt = {
+}, Ct = {
   fontSize: 10,
   fontWeight: 600,
   textTransform: "uppercase",
@@ -1106,7 +1214,7 @@ const bt = {
   color: "var(--lucent-text-secondary)",
   marginBottom: 4,
   marginTop: 4
-}, wt = {
+}, zt = {
   display: "flex",
   alignItems: "center",
   gap: 8,
@@ -1114,7 +1222,7 @@ const bt = {
   borderTop: "1px solid var(--lucent-border-default)",
   flexShrink: 0
 };
-function Ct(e) {
+function Bt(e) {
   const n = e.toLowerCase().split("+");
   return {
     ctrl: n.includes("ctrl"),
@@ -1124,40 +1232,40 @@ function Ct(e) {
     key: n[n.length - 1] ?? ""
   };
 }
-function zt(e, n) {
+function Tt(e, n) {
   const o = navigator.platform.toUpperCase().includes("MAC");
   return (n.meta || n.ctrl ? o ? e.metaKey : e.ctrlKey : !e.ctrlKey && !e.metaKey) && n.shift === e.shiftKey && n.alt === e.altKey && e.key.toLowerCase() === n.key;
 }
-function Dt({
+function Lt({
   shortcut: e = "meta+shift+d",
   position: n = "right",
   defaultOpen: o = !1,
   onThemeChange: s,
   zIndex: i = 99999
 }) {
-  const [r, u] = C(o), [f, d] = C("overlay"), { theme: b } = le(), v = Oe(), x = D(() => u((T) => !T), []);
-  return K(() => {
-    if (!r || f !== "push") {
+  const [l, u] = C(o), [f, d] = C("overlay"), { theme: b } = ye(), v = Ge(), x = O(() => u((T) => !T), []);
+  return N(() => {
+    if (!l || f !== "push") {
       document.body.style.removeProperty(`margin-${n}`), document.body.style.removeProperty("transition");
       return;
     }
     return document.body.style.transition = "margin 200ms ease", document.body.style[n === "right" ? "marginRight" : "marginLeft"] = "320px", () => {
       document.body.style.removeProperty(`margin-${n}`), document.body.style.removeProperty("transition");
     };
-  }, [r, f, n]), K(() => {
-    const T = Ct(e), M = (F) => {
-      zt(F, T) && (F.preventDefault(), x());
+  }, [l, f, n]), N(() => {
+    const T = Bt(e), R = (F) => {
+      Tt(F, T) && (F.preventDefault(), x());
     };
-    return document.addEventListener("keydown", M), () => document.removeEventListener("keydown", M);
-  }, [e, x]), ue(
-    /* @__PURE__ */ c(ae, { children: [
-      !r && /* @__PURE__ */ t("button", { onClick: x, style: { ...Bt, [n]: 16, zIndex: i }, title: "Open Lucent DevTools", children: /* @__PURE__ */ c("svg", { width: "20", height: "20", viewBox: "0 0 60 60", fill: "none", children: [
+    return document.addEventListener("keydown", R), () => document.removeEventListener("keydown", R);
+  }, [e, x]), ve(
+    /* @__PURE__ */ c(fe, { children: [
+      !l && /* @__PURE__ */ t("button", { onClick: x, style: { ...Mt, [n]: 16, zIndex: i }, title: "Open Lucent DevTools", children: /* @__PURE__ */ c("svg", { width: "20", height: "20", viewBox: "0 0 60 60", fill: "none", children: [
         /* @__PURE__ */ t("rect", { x: "8", y: "8", width: "18", height: "22", rx: "2", fill: "#e9c96b", opacity: "0.92" }),
         /* @__PURE__ */ t("rect", { x: "8", y: "40", width: "44", height: "12", rx: "2", fill: "#e9c96b", opacity: "0.92" }),
         /* @__PURE__ */ t("rect", { x: "36", y: "8", width: "16", height: "28", rx: "2", fill: "#e9c96b", opacity: "0.08" })
       ] }) }),
-      r && /* @__PURE__ */ t("div", { style: { zIndex: i }, children: /* @__PURE__ */ t(
-        mt,
+      l && /* @__PURE__ */ t("div", { style: { zIndex: i }, children: /* @__PURE__ */ t(
+        bt,
         {
           state: v,
           theme: b,
@@ -1172,7 +1280,7 @@ function Dt({
     document.body
   );
 }
-const Bt = {
+const Mt = {
   position: "fixed",
   bottom: 16,
   width: 40,
@@ -1188,5 +1296,5 @@ const Bt = {
   transition: "transform 150ms ease, box-shadow 150ms ease"
 };
 export {
-  Dt as LucentDevTools
+  Lt as LucentDevTools
 };