lucent-ui 0.35.0 → 0.37.0

package/dist/devtools.js

@@ -1,86 +1,90 @@
 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-BoiXYqA4.js";
+import { useState as z, useRef as ue, useCallback as L, useEffect as W, useMemo as be, createContext as ve } from "react";
+import { createPortal as xe } from "react-dom";
+import { _ as ye, $ as S, T as y, C as P, B as F, e as j, I as ge, a0 as Se, a1 as ke, z as we, K as Ce, M as ze, m as Be, F as Fe, u as Te, Y as Me, x as Re, a as M, g as De, a2 as Oe, S as Le, d as ae, p as Pe, h as Ee, f as Ie, b as Ae } from "./LucentProvider-F0EN_7TD.js";
 function Ge() {
-  const { tokens: e } = ye(), [n, o] = C({}), s = ue(n);
-  s.current = n;
-  const i = O((f, d) => {
-    document.documentElement.style.setProperty(S(f), d), o((b) => ({ ...b, [f]: d }));
-  }, []), l = O((f) => {
-    document.documentElement.style.removeProperty(S(f)), o((d) => {
+  const { tokens: e } = ye(), [n, a] = z({}), l = ue(n);
+  l.current = n;
+  const s = L((f, d) => {
+    document.documentElement.style.setProperty(S(f), d), a((b) => ({ ...b, [f]: d }));
+  }, []), i = L((f) => {
+    document.documentElement.style.removeProperty(S(f)), a((d) => {
       const b = { ...d };
       return delete b[f], b;
     });
-  }, []), u = O(() => {
-    for (const f of Object.keys(s.current))
+  }, []), g = L(() => {
+    for (const f of Object.keys(l.current))
       document.documentElement.style.removeProperty(S(f));
-    o({});
+    a({});
   }, []);
   return {
     tokens: e,
     overrides: n,
     overrideCount: Object.keys(n).length,
-    setOverride: i,
-    removeOverride: l,
-    resetAll: u
+    setOverride: s,
+    removeOverride: i,
+    resetAll: g
   };
 }
-function y(e) {
+function u(e) {
   return { key: e, controlType: "color" };
 }
-function m(e, n, o, s, i) {
-  return { key: e, controlType: "slider", sliderConfig: { min: n, max: o, step: s, unit: i } };
+function m(e, n, a, l, s) {
+  return { key: e, controlType: "slider", sliderConfig: { min: n, max: a, step: l, unit: s } };
 }
 function p(e) {
   return { key: e, controlType: "text" };
 }
-const re = [
+const oe = [
   {
     label: "Colors",
     defaultExpanded: !0,
     subgroups: [
+      {
+        label: "Navigation",
+        tokens: [u("navigation")]
+      },
       {
         label: "Background",
-        tokens: [y("bgBase"), y("bgSubtle"), y("bgOverlay")]
+        tokens: [u("bgBase"), u("bgSubtle"), u("bgOverlay")]
       },
       {
         label: "Surface",
         tokens: [
-          y("surface"),
-          y("surfaceSecondary"),
-          y("surfaceRaised"),
-          y("surfaceOverlay"),
-          y("surfaceTint")
+          u("surface"),
+          u("surfaceSecondary"),
+          u("surfaceRaised"),
+          u("surfaceOverlay"),
+          u("surfaceTint")
         ]
       },
       {
         label: "Border",
-        tokens: [y("borderDefault"), y("borderSubtle"), y("borderStrong"), y("controlTrack")]
+        tokens: [u("borderDefault"), u("borderSubtle"), u("borderStrong"), u("controlTrack")]
       },
       {
         label: "Text",
-        tokens: [y("textPrimary"), y("textSecondary"), y("textDisabled"), y("textInverse")]
+        tokens: [u("textPrimary"), u("textSecondary"), u("textDisabled"), u("textInverse")]
       },
       {
         label: "Accent",
-        tokens: [y("accentDefault"), y("accentHover"), y("accentSubtle"), y("accentBorder"), y("accentFg")]
+        tokens: [u("accentDefault"), u("accentHover"), u("accentSubtle"), u("accentBorder"), u("accentFg")]
       },
       {
         label: "Success",
-        tokens: [y("successDefault"), y("successSubtle"), y("successText")]
+        tokens: [u("successDefault"), u("successSubtle"), u("successText")]
       },
       {
         label: "Warning",
-        tokens: [y("warningDefault"), y("warningSubtle"), y("warningText")]
+        tokens: [u("warningDefault"), u("warningSubtle"), u("warningText")]
       },
       {
         label: "Danger",
-        tokens: [y("dangerDefault"), y("dangerHover"), y("dangerSubtle"), y("dangerText")]
+        tokens: [u("dangerDefault"), u("dangerHover"), u("dangerSubtle"), u("dangerText")]
       },
       {
         label: "Info",
-        tokens: [y("infoDefault"), y("infoSubtle"), y("infoText")]
+        tokens: [u("infoDefault"), u("infoSubtle"), u("infoText")]
       }
     ]
   },
@@ -164,71 +168,71 @@ function $e(e) {
   return Object.keys(e).length === 0 ? `<LucentProvider>
   {children}
 </LucentProvider>` : `<LucentProvider tokens={{
-${Object.entries(e).map(([o, s]) => `    ${o}: '${s}'`).join(`,
+${Object.entries(e).map(([a, l]) => `    ${a}: '${l}'`).join(`,
 `)}
 }}>
   {children}
 </LucentProvider>`;
 }
-async function je(e) {
+async function _e(e) {
   try {
     return await navigator.clipboard.writeText(e), !0;
   } catch {
     return !1;
   }
 }
-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 }),
+function je({ label: e, value: n, isOverridden: a, onChange: l, onReset: s }) {
+  return /* @__PURE__ */ c("div", { style: Ne, children: [
+    /* @__PURE__ */ t(y, { 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(
-        E,
+        P,
         {
           value: n,
-          onChange: s,
+          onChange: l,
           size: "sm"
         }
       ),
-      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" }) }) })
+      a && /* @__PURE__ */ t(F, { variant: "ghost", size: "2xs", onClick: s, "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 We = {
+const Ne = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "4px 0",
   minHeight: 28
 };
-function Ne({
+function We({
   label: e,
   value: n,
-  isOverridden: o,
-  min: s,
-  max: i,
-  step: l,
-  unit: u,
+  isOverridden: a,
+  min: l,
+  max: s,
+  step: i,
+  unit: g,
   onChange: f,
   onReset: d
 }) {
   const b = parseFloat(n) || 0;
   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__ */ t(y, { 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(
-        _,
+        j,
         {
-          min: s,
-          max: i,
-          step: l,
+          min: l,
+          max: s,
+          step: i,
           value: b,
-          onChange: (v) => f(`${v}${u}`),
+          onChange: (v) => f(`${v}${g}`),
           size: "sm",
           style: { width: 80 }
         }
       ),
-      /* @__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(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" }) }) })
+      /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", color: "onAccent", style: { width: 52, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: n }),
+      a && /* @__PURE__ */ t(F, { 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" }) }) })
     ] })
   ] });
 }
@@ -239,71 +243,67 @@ const Ke = {
   padding: "4px 0",
   minHeight: 28
 };
-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 }),
+function Ue({ label: e, value: n, isOverridden: a, onChange: l, onReset: s }) {
+  return /* @__PURE__ */ c("div", { style: Je, children: [
+    /* @__PURE__ */ t(y, { 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(
-        he,
+        ge,
         {
           size: "sm",
           value: n,
-          onChange: (l) => s(l.target.value),
+          onChange: (i) => l(i.target.value),
           style: { width: 140, fontFamily: "var(--lucent-font-family-mono)" },
           spellCheck: !1
         }
       ),
-      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" }) }) })
+      a && /* @__PURE__ */ t(F, { variant: "ghost", size: "2xs", onClick: s, "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 He = {
+const Je = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "4px 0",
   minHeight: 28
 };
-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);
+function J(e, n) {
+  const a = De(e), l = Oe(e, a), s = n === "light", i = M(l, s ? 0.05 : -0.07), g = M(l, s ? 0.85 : -0.6), f = M(l, s ? -0.15 : 0.15);
   return {
-    accentDefault: s,
-    accentFg: o,
-    accentHover: l,
-    accentSubtle: u,
+    accentDefault: l,
+    accentFg: a,
+    accentHover: i,
+    accentSubtle: g,
     accentBorder: f
   };
 }
-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);
+function H(e, n) {
+  const a = n === "light", l = M(e, a ? -0.02 : 0.02), s = M(e, a ? -0.04 : 0.03);
   return {
     bgBase: e,
-    bgSubtle: s,
-    surfaceTint: i,
-    surface: d,
-    surfaceSecondary: b,
-    surfaceRaised: v,
-    surfaceOverlay: x
+    bgSubtle: l,
+    surfaceTint: s
   };
 }
-function X(e, n) {
-  const o = n === "light";
+function q(e, n) {
+  const a = n === "light";
   return {
     borderDefault: e,
-    borderSubtle: B(e, o ? 0.05 : -0.02),
-    borderStrong: B(e, o ? -0.27 : 0.19)
+    borderSubtle: M(e, a ? 0.05 : -0.02),
+    borderStrong: M(e, a ? -0.27 : 0.19)
   };
 }
-function q(e, n) {
-  const o = n === "light";
+function X(e, n) {
+  const a = n === "light";
   return {
     surface: e,
-    surfaceSecondary: B(e, o ? -0.04 : 0.03),
-    surfaceRaised: B(e, o ? 0 : 0.06),
-    surfaceOverlay: B(e, o ? 0 : 0.06)
+    surfaceSecondary: M(e, a ? -0.04 : 0.03),
+    surfaceRaised: M(e, a ? 0 : 0.06),
+    surfaceOverlay: M(e, a ? 0 : 0.06)
   };
 }
-const Je = [
+const He = [
   { key: "fontSizeXs", step: -2 },
   { key: "fontSizeSm", step: -1 },
   { key: "fontSizeMd", step: 0 },
@@ -313,21 +313,21 @@ const Je = [
   { key: "fontSize3xl", step: 4 }
 ];
 function Z(e, n) {
-  const o = {};
-  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`;
+  const a = {};
+  for (const { key: l, step: s } of He) {
+    const i = e * Math.pow(n, s), g = Math.round(i * 1e3) / 1e3;
+    a[l] = `${g}rem`;
   }
-  return o;
+  return a;
 }
-const Xe = [
+const qe = [
   { 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 }
-], qe = [
+], Xe = [
   { key: "space0", rem: 0 },
   { key: "space1", rem: 0.25 },
   { key: "space2", rem: 0.5 },
@@ -342,15 +342,15 @@ const Xe = [
   { key: "space20", rem: 5 },
   { key: "space24", rem: 6 }
 ];
-function ae(e) {
+function re(e) {
   const n = {};
-  for (const { key: o, rem: s } of qe) {
-    if (s === 0) {
-      n[o] = "0px";
+  for (const { key: a, rem: l } of Xe) {
+    if (l === 0) {
+      n[a] = "0px";
       continue;
     }
-    const i = Math.round(s * e * 1e3) / 1e3;
-    n[o] = `${i}rem`;
+    const s = Math.round(l * e * 1e3) / 1e3;
+    n[a] = `${s}rem`;
   }
   return n;
 }
@@ -362,29 +362,29 @@ const Ve = [
 ];
 function le(e) {
   const n = {};
-  for (const { key: o, sharp: s, rounded: i, pill: l } of Ve) {
-    let u;
+  for (const { key: a, sharp: l, rounded: s, pill: i } of Ve) {
+    let g;
     if (e <= 0.5) {
       const d = e / 0.5;
-      u = s + (i - s) * d;
+      g = l + (s - l) * d;
     } else {
       const d = (e - 0.5) / 0.5;
-      u = i + (l - i) * d;
+      g = s + (i - s) * d;
     }
-    const f = Math.round(u * 1e3) / 1e3;
-    n[o] = `${f}rem`;
+    const f = Math.round(g * 1e3) / 1e3;
+    n[a] = `${f}rem`;
   }
   return n;
 }
 const Ye = {
-  flat: Fe,
+  flat: Re,
   subtle: Me,
   elevated: Te,
-  liquidGlass: Be,
-  brutalist: ze,
-  neumorphic: Ce,
-  natural: we,
-  glow: ke
+  liquidGlass: Fe,
+  brutalist: Be,
+  neumorphic: ze,
+  natural: Ce,
+  glow: we
 }, Ze = [
   { value: "flat", label: "Flat" },
   { value: "default", label: "Default" },
@@ -398,11 +398,11 @@ const Ye = {
 ];
 function V(e, n) {
   if (e === "default")
-    return n === "dark" ? xe : Se;
-  const o = Ye[e];
-  return n === "dark" ? o.dark : o.light;
+    return n === "dark" ? Se : ke;
+  const a = Ye[e];
+  return n === "dark" ? a.dark : a.light;
 }
-const se = /* @__PURE__ */ new Set(), Qe = {
+const ie = /* @__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,17 +418,17 @@ const se = /* @__PURE__ */ new Set(), Qe = {
   "DM Mono": "DM+Mono:wght@400;500",
   Georama: "Georama:wght@400;500;600;700"
 };
-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;
-  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);
+function N(e) {
+  var i;
+  const n = e.match(/"([^"]+)"/), a = n ? n[1] : (i = e.split(",")[0]) == null ? void 0 : i.trim();
+  if (!a || ie.has(a)) return;
+  const l = Qe[a];
+  if (!l) return;
+  ie.add(a);
+  const s = document.createElement("link");
+  s.rel = "stylesheet", s.href = `https://fonts.googleapis.com/css2?family=${l}&display=swap`, document.head.appendChild(s);
 }
-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 = [
+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', at = '"JetBrains Mono", "Fira Code", "Cascadia Code", monospace', ot = '"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif', se = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', rt = '"Outfit", -apple-system, BlinkMacSystemFont, sans-serif', lt = '"Sora", -apple-system, BlinkMacSystemFont, sans-serif', it = '"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif', ce = [
   // ── Foundations ──
   {
     name: "Default",
@@ -438,17 +438,17 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    colors: { light: { accent: "#111827", navigation: "#f4f6f8", bg: "#ffffff", surface: "#ffffff", border: "#e5e7eb" }, dark: { accent: "#f9fafb", navigation: "#0e1015", bg: "#111318", surface: "#191c22", border: "#252830" } }
   },
   {
     name: "Modern",
-    roundness: 0.5,
-    density: 1,
-    shadow: "subtle",
+    roundness: 0.75,
+    density: 0.99,
+    shadow: "liquidGlass",
     typeBase: 1,
-    typeRatio: 1.2,
+    typeRatio: 1.25,
     fontFamily: tt,
-    colors: { light: { accent: "#6366f1", bg: "#f8f7fc", surface: "#ffffff", border: "#e0dde9" }, dark: { accent: "#818cf8", bg: "#0d0c18", surface: "#1e1c30", border: "#302e42" } }
+    colors: { light: { accent: "#978AE7", navigation: "#dbd8e9", bg: "#FFFFFF", surface: "#f7f7f7", border: "#e0e0e0" }, dark: { accent: "#b8aef0", navigation: "#110f1c", bg: "#131118", surface: "#1c1a24", border: "#2a2834" } }
   },
   // ── Design Personalities ──
   {
@@ -458,8 +458,8 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    fontFamily: se,
+    colors: { light: { accent: "#0c8fca", navigation: "#ebf1ff", bg: "#f1f4ff", surface: "#ffffff", border: "#d9e4ec" }, dark: { accent: "#38bdf8", navigation: "#0a0e16", bg: "#0e1420", surface: "#16202c", border: "#1e2c38" } }
   },
   {
     name: "Bento",
@@ -469,7 +469,7 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    colors: { light: { accent: "#0d9488", navigation: "#f9fbfc", bg: "#eef2f5", surface: "#ffffff", border: "#d4e5e0" }, dark: { accent: "#2dd4bf", navigation: "#0c1210", bg: "#101a16", surface: "#182822", border: "#263e36" } }
   },
   {
     name: "Brutalist",
@@ -478,18 +478,18 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    fontFamily: ot,
+    colors: { light: { accent: "#ef4444", navigation: "#fff9f7", bg: "#f0ebe8", surface: "#ffffff", border: "#e9ddd8" }, dark: { accent: "#f87171", navigation: "#14100e", bg: "#1a1512", surface: "#26201c", border: "#3a302a" } }
   },
   {
     name: "Terminal",
     roundness: 0,
     density: 0.8,
-    shadow: "glow",
-    typeBase: 0.9375,
+    shadow: "flat",
+    typeBase: 0.875,
     typeRatio: 1.125,
-    fontFamily: ot,
-    colors: { light: { accent: "#10b981", bg: "#f5faf7", surface: "#ffffff", border: "#dbe8df" }, dark: { accent: "#34d399", bg: "#0a120c", surface: "#16281e", border: "#263e30" } }
+    fontFamily: at,
+    colors: { light: { accent: "#12d091", navigation: "#f8f8fa", bg: "#ffffff", surface: "#ffffff", border: "#dbe8df" }, dark: { accent: "#34d399", navigation: "#0e1012", bg: "#111318", surface: "#191c22", border: "#1e2e24" } }
   },
   {
     name: "Soft UI",
@@ -498,8 +498,8 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    fontFamily: rt,
+    colors: { light: { accent: "#8b5cf6", navigation: "#eee8fa", bg: "#f8f4ff", surface: "#ffffff", border: "#e2dce9" }, dark: { accent: "#a78bfa", navigation: "#120e1a", bg: "#141020", surface: "#1e1a2c", border: "#302a3e" } }
   },
   {
     name: "Bloom",
@@ -509,7 +509,7 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    colors: { light: { accent: "#e879f9", navigation: "#f5e8f0", bg: "#fff4f9", surface: "#ffffff", border: "#ecdde1" }, dark: { accent: "#f0abfc", navigation: "#160e14", bg: "#1a1018", surface: "#261c24", border: "#3a2c34" } }
   },
   {
     name: "Minimal",
@@ -518,8 +518,8 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    fontFamily: it,
+    colors: { light: { accent: "#475569", navigation: "#eceef2", bg: "#f7f8fa", surface: "#ffffff", border: "#dde1e6" }, dark: { accent: "#94a3b8", navigation: "#0e1016", bg: "#11141a", surface: "#191e26", border: "#262c36" } }
   },
   {
     name: "Enterprise",
@@ -528,10 +528,10 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     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" } }
+    fontFamily: se,
+    colors: { light: { accent: "#4182eb", navigation: "#ffffff", bg: "#f6f8fa", surface: "#ffffff", border: "#dde1e6" }, dark: { accent: "#6da6f0", navigation: "#0e1015", bg: "#111418", surface: "#181e26", border: "#262c36" } }
   }
-], it = [
+], st = [
   {
     label: "Brand",
     colors: ["#111827", "#e9c96b", "#6366f1", "#8b5cf6", "#10b981", "#0d9488", "#f43f5e", "#e8624a", "#d97706", "#0ea5e9", "#475569", "#5f8c6e"]
@@ -543,13 +543,22 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
 ], ct = [
   {
     label: "Light",
-    colors: ["#ffffff", "#fafafa", "#f9fafb", "#f5f5f4", "#fef7ee", "#faf5ff", "#f0f9ff", "#f0fdf4", "#fefce8", "#fff1f2"]
+    colors: ["#ffffff", "#fdfcff", "#fbfdff", "#fbfefc", "#fffcfb", "#fafbfd", "#fffbfd", "#fdfbff", "#fafafa", "#f9fafb"]
   },
   {
     label: "Dark",
-    colors: ["#09090b", "#0a0a0a", "#0c0c0e", "#111827", "#18181b", "#1c1917", "#1a1a2e", "#0f172a", "#171717", "#0d1117"]
+    colors: ["#08090e", "#090814", "#060a12", "#060d0b", "#100806", "#060e08", "#0c0816", "#10060c", "#080a0e", "#0a0a0a"]
   }
 ], dt = [
+  {
+    label: "Light",
+    colors: ["#f7f8f9", "#f9fafb", "#f8f7fc", "#f5f9fc", "#f5faf8", "#faf6f5", "#f5faf7", "#f8f6fc", "#f4f5f7", "#fafafa"]
+  },
+  {
+    label: "Dark",
+    colors: ["#0c0d12", "#0d0c18", "#0a0e16", "#0a110f", "#140c0a", "#0a120c", "#100c1a", "#140a10", "#0c0e12", "#0d1117"]
+  }
+], ft = [
   {
     label: "Light",
     colors: ["#ffffff", "#fafafa", "#f9fafb", "#f5f5f5", "#f3f4f6", "#f1f5f9", "#fef3c7", "#fce7f3", "#dbeafe", "#dcfce7"]
@@ -558,7 +567,7 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     label: "Dark",
     colors: ["#111111", "#141414", "#1a1a1a", "#1e1e2e", "#1f2937", "#1e293b", "#18181b", "#16213e", "#1c1c1c", "#0f172a"]
   }
-], ft = [
+], ut = [
   {
     label: "Light",
     colors: ["#e5e7eb", "#d1d5db", "#e2e8f0", "#f3f4f6", "#d4d4d8", "#cbd5e1", "#e7e5e4", "#fde68a", "#c7d2fe", "#bbf7d0"]
@@ -568,67 +577,71 @@ const et = '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sa
     colors: ["#27272a", "#374151", "#334155", "#3f3f46", "#1e293b", "#404040", "#44403c", "#1c1f2a", "#2d2d3f", "#1f2937"]
   }
 ];
-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
+function yt({ state: e, theme: n }) {
+  const [a, l] = z(1), [s, i] = z(0.5), [g, f] = z("default"), [d, b] = z(null), v = e.overrides.accentDefault ?? e.tokens.accentDefault, x = L((o) => {
+    for (const [C, A] of Object.entries(o))
+      e.setOverride(C, A);
+  }, [e]), D = L((o) => {
+    e.resetAll(), b(o.name), l(o.density), i(o.roundness), f(o.shadow);
+    const C = o.colors[n], A = {
+      navigation: C.navigation,
+      ...J(C.accent, n),
+      ...H(C.bg, n),
+      ...X(C.surface, n),
+      ...q(C.border, n),
+      ...Z(o.typeBase, o.typeRatio),
+      ...re(o.density),
+      ...le(o.roundness),
+      ...V(o.shadow, n),
+      fontFamilyBase: o.fontFamily
     };
-    W(a.fontFamily), requestAnimationFrame(() => {
+    N(o.fontFamily), requestAnimationFrame(() => {
       for (const [G, U] of Object.entries(A))
         e.setOverride(G, U);
     });
-  }, [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)
+  }, [e, n]), B = ue(n);
+  W(() => {
+    if (B.current === n || (B.current = n, e.resetAll(), !d)) return;
+    const o = ce.find((G) => G.name === d);
+    if (!o) return;
+    const C = o.colors[n], A = {
+      navigation: C.navigation,
+      ...J(C.accent, n),
+      ...H(C.bg, n),
+      ...X(C.surface, n),
+      ...q(C.border, n),
+      ...V(g, 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);
+  }, [n, d, g, e]);
+  const R = (o) => {
+    O(), l(o), x(re(o));
+  }, T = (o) => {
+    O(), i(o), x(le(o));
+  }, I = (o) => {
+    O(), f(o), x(V(o, n));
+  }, r = (o) => {
+    O(), /^#[0-9a-f]{6}$/i.test(o) ? x(J(o, n)) : e.setOverride("accentDefault", o);
+  }, h = (o) => {
+    O(), e.setOverride("navigation", o);
+  }, w = (o) => {
+    O(), /^#[0-9a-f]{6}$/i.test(o) ? x(H(o, n)) : e.setOverride("bgBase", o);
+  }, K = (o) => {
+    O(), /^#[0-9a-f]{6}$/i.test(o) ? x(X(o, n)) : e.setOverride("surface", o);
+  }, he = (o) => {
+    O(), /^#[0-9a-f]{6}$/i.test(o) ? x(q(o, n)) : e.setOverride("borderDefault", o);
+  }, Q = e.overrides.navigation ?? e.tokens.navigation, ee = e.overrides.bgBase ?? e.tokens.bgBase, te = e.overrides.surface ?? e.tokens.surface, ne = e.overrides.borderDefault ?? e.tokens.borderDefault, pe = s < 0.2 ? "Sharp" : s < 0.4 ? "Subtle" : s < 0.6 ? "Rounded" : s < 0.8 ? "Soft" : "Pill", me = a < 0.85 ? "Compact" : a < 0.95 ? "Snug" : a < 1.05 ? "Default" : a < 1.15 ? "Relaxed" : "Spacious", O = () => b(null);
   return /* @__PURE__ */ c("div", { style: { padding: "4px 12px 12px", display: "flex", flexDirection: "column", gap: 16 }, children: [
     /* @__PURE__ */ t($, { label: "Presets", children: /* @__PURE__ */ t("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(5, 1fr)",
       gap: 6
-    }, children: ce.map((a) => /* @__PURE__ */ c(
-      M,
+    }, children: ce.map((o) => /* @__PURE__ */ c(
+      F,
       {
-        variant: d === a.name ? "secondary" : "ghost",
-        onClick: () => D(a),
+        variant: d === o.name ? "secondary" : "ghost",
+        onClick: () => D(o),
         style: {
           padding: "8px 4px 6px",
           display: "flex",
@@ -641,81 +654,86 @@ function ut({ state: e, theme: n }) {
           /* @__PURE__ */ t("div", { style: {
             width: 24,
             height: 24,
-            borderRadius: a.roundness < 0.3 ? 3 : a.roundness < 0.7 ? 6 : 12,
-            background: a.colors[n].accent,
+            borderRadius: o.roundness < 0.3 ? 3 : o.roundness < 0.7 ? 6 : 12,
+            background: o.colors[n].accent,
             border: "1px solid rgba(255,255,255,0.1)"
           } }),
-          /* @__PURE__ */ t(h, { size: "xs", ...d !== a.name && { color: "secondary" }, weight: d === a.name ? "semibold" : "regular", style: { fontSize: 9, whiteSpace: "nowrap" }, children: a.name })
+          /* @__PURE__ */ t(y, { size: "xs", ...d !== o.name && { color: "secondary" }, weight: d === o.name ? "semibold" : "regular", style: { fontSize: 9, whiteSpace: "nowrap" }, children: o.name })
         ]
       },
-      a.name
+      o.name
     )) }) }),
     /* @__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(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__ */ t(P, { value: v, onChange: r, size: "sm", presetGroups: st }),
+        /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Accent" }),
+        /* @__PURE__ */ t(y, { 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(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: Q })
+        /* @__PURE__ */ t(P, { value: Q, onChange: h, size: "sm", presetGroups: ct }),
+        /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Navigation" }),
+        /* @__PURE__ */ t(y, { 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(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: ee })
+        /* @__PURE__ */ t(P, { value: ee, onChange: w, size: "sm", presetGroups: dt }),
+        /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Background" }),
+        /* @__PURE__ */ t(y, { 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(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: te })
+        /* @__PURE__ */ t(P, { value: te, onChange: K, size: "sm", presetGroups: ft }),
+        /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Surface" }),
+        /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: te })
+      ] }),
+      /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ t(P, { value: ne, onChange: he, size: "sm", presetGroups: ut }),
+        /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { flex: 1 }, children: "Border" }),
+        /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", style: { color: "var(--lucent-accent-default)" }, children: ne })
       ] })
     ] }) }),
     /* @__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: (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(y, { size: "xs", family: "mono", color: "secondary", style: { width: 54, flexShrink: 0 }, children: "Compact" }),
+        /* @__PURE__ */ t(j, { min: 0.7, max: 1.35, step: 0.01, value: a, onChange: (o) => R(parseFloat(o.target.value)), size: "sm", style: { flex: 1 } }),
+        /* @__PURE__ */ t(y, { 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: [
-        pe,
+      /* @__PURE__ */ t("div", { style: { textAlign: "center", marginTop: 4 }, children: /* @__PURE__ */ c(y, { size: "xs", style: { color: "var(--lucent-accent-default)" }, children: [
+        me,
         " (",
-        o.toFixed(2),
+        a.toFixed(2),
         "x)"
       ] }) })
     ] }),
     /* @__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: (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(y, { size: "xs", family: "mono", color: "secondary", style: { width: 36, flexShrink: 0 }, children: "Sharp" }),
+        /* @__PURE__ */ t(j, { min: 0, max: 1, step: 0.01, value: s, onChange: (o) => T(parseFloat(o.target.value)), size: "sm", style: { flex: 1 } }),
+        /* @__PURE__ */ t(y, { 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((a) => /* @__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((o) => /* @__PURE__ */ t("div", { style: {
         width: 32,
         height: 32,
         background: "var(--lucent-surface-secondary)",
-        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,
+        border: `1.5px solid ${Math.abs(s - o) < 0.05 ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
+        borderRadius: o === 0 ? 2 : o < 0.5 ? 4 : o < 0.8 ? 8 : 16,
         cursor: "pointer",
         transition: "border-color 150ms"
-      }, 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 }) })
+      }, onClick: () => T(o) }, o)) }),
+      /* @__PURE__ */ t("div", { style: { textAlign: "center", marginTop: 4 }, children: /* @__PURE__ */ t(y, { size: "xs", style: { color: "var(--lucent-accent-default)" }, children: pe }) })
     ] }),
     /* @__PURE__ */ t($, { label: "Shadow Style", children: /* @__PURE__ */ t("div", { style: {
       display: "grid",
       gridTemplateColumns: "repeat(3, 1fr)",
       gap: 4
-    }, children: Ze.map(({ value: a, label: z }) => /* @__PURE__ */ t(
-      M,
+    }, children: Ze.map(({ value: o, label: C }) => /* @__PURE__ */ t(
+      F,
       {
-        variant: u === a ? "secondary" : "ghost",
+        variant: g === o ? "secondary" : "ghost",
         size: "2xs",
-        onClick: () => I(a),
+        onClick: () => I(o),
         style: { justifyContent: "center" },
-        children: z
+        children: C
       },
-      a
+      o
     )) }) })
   ] });
 }
@@ -726,11 +744,11 @@ function $({ label: e, children: n }) {
     padding: "10px 12px",
     border: "1px solid var(--lucent-border-default)"
   }, children: [
-    /* @__PURE__ */ t(h, { size: "xs", weight: "semibold", style: { marginBottom: 10, display: "block" }, children: e }),
+    /* @__PURE__ */ t(y, { size: "xs", weight: "semibold", style: { marginBottom: 10, display: "block" }, children: e }),
     n
   ] });
 }
-const P = [
+const E = [
   { 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" },
@@ -746,25 +764,25 @@ const P = [
   { label: "Sora", family: '"Sora", sans-serif', category: "display" },
   { label: "Georama", family: '"Georama", sans-serif', category: "display" }
 ];
-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;
+function gt({ state: e, theme: n }) {
+  const a = e.overrides.fontSizeMd ?? e.tokens.fontSizeMd, l = parseFloat(a) || 1, [s, i] = z(l), [g, f] = z(() => {
+    const r = e.overrides.fontSizeLg ?? e.tokens.fontSizeLg, h = parseFloat(r) || 1.125, w = parseFloat(a) || 1;
+    return w > 0 ? Math.round(h / w * 1e3) / 1e3 : 1.125;
   });
-  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);
+  W(() => {
+    const r = parseFloat(e.overrides.fontSizeMd ?? e.tokens.fontSizeMd) || 1, h = parseFloat(e.overrides.fontSizeLg ?? e.tokens.fontSizeLg) || 1.125;
+    i(r), r > 0 && f(Math.round(h / 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, D = e.overrides.fontFamilyDisplay ?? e.tokens.fontFamilyDisplay, T = O((r) => {
-    for (const [g, k] of Object.entries(r))
-      e.setOverride(g, k);
+  const [d, b] = z("all"), v = e.overrides.fontFamilyBase ?? e.tokens.fontFamilyBase, x = e.overrides.fontFamilyMono ?? e.tokens.fontFamilyMono, D = e.overrides.fontFamilyDisplay ?? e.tokens.fontFamilyDisplay, B = L((r) => {
+    for (const [h, w] of Object.entries(r))
+      e.setOverride(h, w);
   }, [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);
+    i(r), B(Z(r, g));
+  }, T = (r) => {
+    f(r), B(Z(s, r));
+  }, I = d === "all" ? E : E.filter((r) => r.category === d);
   return /* @__PURE__ */ c("div", { style: { padding: "4px 12px 12px", display: "flex", flexDirection: "column", gap: 16 }, children: [
-    /* @__PURE__ */ c(j, { label: "Font Family", children: [
+    /* @__PURE__ */ c(_, { label: "Font Family", children: [
       /* @__PURE__ */ t("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ t(
         Le,
         {
@@ -782,13 +800,13 @@ function yt({ state: e, theme: n }) {
         }
       ) }),
       /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: I.map((r) => {
-        const g = v.includes(r.label) || r.family === v;
+        const h = v.includes(r.label) || r.family === v;
         return /* @__PURE__ */ c(
-          M,
+          F,
           {
-            variant: g ? "secondary" : "ghost",
+            variant: h ? "secondary" : "ghost",
             onClick: () => {
-              W(r.family), e.setOverride("fontFamilyBase", r.family);
+              N(r.family), e.setOverride("fontFamilyBase", r.family);
             },
             style: {
               width: "100%",
@@ -798,16 +816,16 @@ function yt({ state: e, theme: n }) {
             },
             children: [
               /* @__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 })
+              /* @__PURE__ */ t(y, { as: "span", size: "xs", color: "secondary", style: { textTransform: "capitalize" }, children: r.category })
             ]
           },
           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(y, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Custom" }),
         /* @__PURE__ */ t(
-          he,
+          ge,
           {
             size: "sm",
             value: v,
@@ -818,78 +836,78 @@ function yt({ state: e, theme: n }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ t(j, { label: "Code & Display Fonts", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ t(_, { 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(y, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Monospace" }),
         /* @__PURE__ */ t(
-          oe,
+          ae,
           {
             size: "sm",
             value: x,
             onChange: (r) => {
-              W(r.target.value), e.setOverride("fontFamilyMono", r.target.value);
+              N(r.target.value), e.setOverride("fontFamilyMono", r.target.value);
             },
             options: [
-              ...P.filter((r) => r.category === "mono").map((r) => ({ value: r.family, label: r.label })),
-              ...P.some((r) => r.family === x) ? [] : [{ value: x, label: "Custom" }]
+              ...E.filter((r) => r.category === "mono").map((r) => ({ value: r.family, label: r.label })),
+              ...E.some((r) => r.family === x) ? [] : [{ value: x, label: "Custom" }]
             ]
           }
         )
       ] }),
       /* @__PURE__ */ c("div", { children: [
-        /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Display" }),
+        /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Display" }),
         /* @__PURE__ */ t(
-          oe,
+          ae,
           {
             size: "sm",
             value: D,
             onChange: (r) => {
-              W(r.target.value), e.setOverride("fontFamilyDisplay", r.target.value);
+              N(r.target.value), e.setOverride("fontFamilyDisplay", r.target.value);
             },
             options: [
-              ...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" }]
+              ...E.filter((r) => r.category === "display" || r.category === "sans").map((r) => ({ value: r.family, label: r.label })),
+              ...E.some((r) => r.family === D) ? [] : [{ value: D, label: "Custom" }]
             ]
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ t(j, { label: "Type Scale", children: /* @__PURE__ */ c("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ t(_, { 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__ */ t(y, { 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: (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,
+          /* @__PURE__ */ t(j, { min: 0.75, max: 1.5, step: 0.0625, value: s, onChange: (r) => R(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
+          /* @__PURE__ */ c(y, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: [
+            s,
             "rem"
           ] })
         ] })
       ] }),
       /* @__PURE__ */ c("div", { children: [
-        /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Scale Ratio" }),
+        /* @__PURE__ */ t(y, { 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: (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(j, { min: 1, max: 1.618, step: 1e-3, value: g, onChange: (r) => T(parseFloat(r.target.value)), size: "sm", style: { flex: 1 } }),
+          /* @__PURE__ */ t(y, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: g.toFixed(3) })
         ] }),
-        /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 6 }, children: Xe.map((r) => /* @__PURE__ */ t(
-          M,
+        /* @__PURE__ */ t("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 6 }, children: qe.map((r) => /* @__PURE__ */ t(
+          F,
           {
-            variant: Math.abs(u - r.ratio) < 5e-3 ? "secondary" : "ghost",
+            variant: Math.abs(g - r.ratio) < 5e-3 ? "secondary" : "ghost",
             size: "2xs",
-            onClick: () => F(r.ratio),
+            onClick: () => T(r.ratio),
             children: r.label
           },
           r.label
         )) })
       ] })
     ] }) }),
-    /* @__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];
+    /* @__PURE__ */ t(_, { label: "Text Colors", children: /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: ht.map(({ key: r, label: h }) => {
+      const w = e.overrides[r] ?? e.tokens[r];
       return /* @__PURE__ */ t(
-        E,
+        P,
         {
-          label: g,
-          value: k,
+          label: h,
+          value: w,
           onChange: (K) => e.setOverride(r, K),
           size: "sm",
           inline: !0
@@ -897,12 +915,12 @@ function yt({ state: e, theme: n }) {
         r
       );
     }) }) }),
-    /* @__PURE__ */ t(j, { label: "Preview", children: /* @__PURE__ */ t(
-      gt,
+    /* @__PURE__ */ t(_, { label: "Preview", children: /* @__PURE__ */ t(
+      pt,
       {
         family: v,
-        baseSize: i,
-        ratio: u,
+        baseSize: s,
+        ratio: g,
         textPrimary: e.overrides.textPrimary ?? e.tokens.textPrimary,
         textSecondary: e.overrides.textSecondary ?? e.tokens.textSecondary,
         bgBase: e.overrides.bgBase ?? e.tokens.bgBase
@@ -916,54 +934,54 @@ const ht = [
   { key: "textDisabled", label: "Disabled" },
   { key: "textInverse", label: "Inverse" }
 ];
-function j({ label: e, children: n }) {
+function _({ label: e, children: n }) {
   return /* @__PURE__ */ c("div", { style: {
     background: "var(--lucent-surface)",
     borderRadius: "var(--lucent-radius-lg)",
     padding: "10px 12px",
     border: "1px solid var(--lucent-border-default)"
   }, children: [
-    /* @__PURE__ */ t(h, { size: "xs", weight: "semibold", style: { marginBottom: 10, display: "block" }, children: e }),
+    /* @__PURE__ */ t(y, { size: "xs", weight: "semibold", style: { marginBottom: 10, display: "block" }, children: e }),
     n
   ] });
 }
-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);
+function pt({ family: e, baseSize: n, ratio: a, textPrimary: l, textSecondary: s, bgBase: i }) {
+  const g = n * Math.pow(a, 4), f = n * Math.pow(a, 2), d = n, b = n * Math.pow(a, -1);
   return /* @__PURE__ */ c("div", { style: {
-    background: l,
+    background: i,
     borderRadius: 6,
     padding: "14px 12px",
     fontFamily: e,
     border: "1px solid var(--lucent-border-default)"
   }, children: [
     /* @__PURE__ */ t("div", { style: {
-      fontSize: `${u}rem`,
+      fontSize: `${g}rem`,
       fontWeight: 700,
-      color: s,
+      color: l,
       lineHeight: 1.2,
       marginBottom: 6
     }, children: "Heading" }),
     /* @__PURE__ */ t("div", { style: {
       fontSize: `${f}rem`,
       fontWeight: 600,
-      color: s,
+      color: l,
       lineHeight: 1.3,
       marginBottom: 8
     }, children: "Subheading text" }),
     /* @__PURE__ */ t("div", { style: {
       fontSize: `${d}rem`,
-      color: s,
+      color: l,
       lineHeight: 1.5,
       marginBottom: 6
     }, children: "Body text looks like this. It should be comfortable to read at any size with good line height and spacing." }),
     /* @__PURE__ */ t("div", { style: {
       fontSize: `${b}rem`,
-      color: i,
+      color: s,
       lineHeight: 1.5
     }, children: "Secondary caption — smaller, muted for supplemental information." })
   ] });
 }
-const w = {
+const k = {
   bg: "#0a0a0a",
   surface: "#141414",
   text: "#f0ead6",
@@ -971,63 +989,63 @@ const w = {
   accent: "#e9c96b",
   border: "rgba(233, 201, 107, 0.1)",
   inputBg: "rgba(255, 255, 255, 0.05)"
-}, 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;
+}, mt = ve(null);
+function bt({ children: e }) {
+  const [n, a] = z(null), l = L((i) => {
+    i && a(i);
+  }, []), s = be(() => {
+    const i = {};
+    for (const [g, f] of Object.entries(Pe))
+      i[S(g)] = f;
+    return i[S("navigation")] = k.bg, i[S("bgBase")] = k.bg, i[S("surface")] = k.surface, i[S("surfaceSecondary")] = k.inputBg, i[S("borderDefault")] = k.border, i[S("borderSubtle")] = k.border, i[S("textPrimary")] = k.text, i[S("textSecondary")] = k.textMuted, i[S("accentDefault")] = k.accent, i[S("accentFg")] = "#0a0a0a", i[S("accentSubtle")] = "rgba(233, 201, 107, 0.12)", i[S("accentHover")] = "#d4b55a", i[S("accentBorder")] = k.accent, i;
   }, []);
-  return /* @__PURE__ */ t("div", { ref: s, style: i, children: /* @__PURE__ */ t(pt.Provider, { value: n, children: e }) });
+  return /* @__PURE__ */ t("div", { ref: l, style: s, children: /* @__PURE__ */ t(mt.Provider, { value: n, children: e }) });
 }
-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] }));
+function vt({ state: e, theme: n, position: a, mode: l, onModeChange: s, onThemeChange: i, onClose: g }) {
+  const [f, d] = z("design"), [b, v] = z(""), [x, D] = z(() => {
+    const h = {};
+    for (const w of oe)
+      h[w.label] = w.defaultExpanded ?? !1;
+    return h;
+  }), [B, R] = z(!1), T = (h) => {
+    D((w) => ({ ...w, [h]: !w[h] }));
   }, I = async () => {
-    const g = $e(e.overrides);
-    await je(g) && (R(!0), setTimeout(() => R(!1), 2e3));
+    const h = $e(e.overrides);
+    await _e(h) && (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
+  return /* @__PURE__ */ t(bt, { children: /* @__PURE__ */ c("div", { style: {
+    ...St,
+    [a]: 0,
+    borderLeft: a === "right" ? `1px solid ${k.border}` : void 0,
+    borderRight: a === "left" ? `1px solid ${k.border}` : void 0
   }, children: [
-    /* @__PURE__ */ c("div", { style: St, children: [
+    /* @__PURE__ */ c("div", { style: kt, 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" }),
           /* @__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" })
         ] }),
-        /* @__PURE__ */ t(h, { size: "sm", weight: "semibold", children: "Lucent DevTools" })
+        /* @__PURE__ */ t(y, { size: "sm", weight: "semibold", children: "Lucent DevTools" })
       ] }),
       /* @__PURE__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        l && /* @__PURE__ */ t(
+        i && /* @__PURE__ */ t(
           Ee,
           {
             checked: n === "dark",
-            onChange: () => l(n === "light" ? "dark" : "light"),
+            onChange: () => i(n === "light" ? "dark" : "light"),
             size: "sm"
           }
         ),
         /* @__PURE__ */ t(
-          M,
+          F,
           {
             variant: "ghost",
             size: "2xs",
-            onClick: () => i(s === "overlay" ? "push" : "overlay"),
-            "aria-label": s === "overlay" ? "Push content" : "Overlay",
-            title: s === "overlay" ? "Push content" : "Overlay",
-            children: s === "overlay" ? /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
+            onClick: () => s(l === "overlay" ? "push" : "overlay"),
+            "aria-label": l === "overlay" ? "Push content" : "Overlay",
+            title: l === "overlay" ? "Push content" : "Overlay",
+            children: l === "overlay" ? /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
               /* @__PURE__ */ t("rect", { x: "1", y: "1", width: "8", height: "12", rx: "1", stroke: "currentColor", strokeWidth: "1.2" }),
               /* @__PURE__ */ t("rect", { x: "10", y: "1", width: "3", height: "12", rx: "0.5", fill: "currentColor", opacity: "0.5" })
             ] }) : /* @__PURE__ */ c("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
@@ -1036,14 +1054,14 @@ function bt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
             ] })
           }
         ),
-        /* @__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(F, { variant: "ghost", size: "2xs", onClick: g, "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(
       Ie,
       {
         value: f,
-        onChange: (g) => d(g),
+        onChange: (h) => d(h),
         tabs: [
           { value: "design", label: "Design" },
           { value: "type", label: "Typography" },
@@ -1058,29 +1076,29 @@ function bt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
           type: "text",
           placeholder: "Filter tokens...",
           value: b,
-          onChange: (g) => v(g.target.value),
-          style: kt,
+          onChange: (h) => v(h.target.value),
+          style: wt,
           spellCheck: !1
         }
       ) }),
-      /* @__PURE__ */ t("div", { style: Y, children: re.map((g) => /* @__PURE__ */ t(
-        vt,
+      /* @__PURE__ */ t("div", { style: Y, children: oe.map((h) => /* @__PURE__ */ t(
+        xt,
         {
-          group: g,
+          group: h,
           state: e,
           filter: r,
-          expanded: x[g.label] ?? !1,
-          onToggle: () => F(g.label)
+          expanded: x[h.label] ?? !1,
+          onToggle: () => T(h.label)
         },
-        g.label
+        h.label
       )) })
     ] }),
-    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: [
+    f === "design" && /* @__PURE__ */ t("div", { style: Y, children: /* @__PURE__ */ t(yt, { state: e, theme: n }) }),
+    f === "type" && /* @__PURE__ */ t("div", { style: Y, children: /* @__PURE__ */ t(gt, { state: e, theme: n }) }),
+    /* @__PURE__ */ c("div", { style: Bt, children: [
       /* @__PURE__ */ c("div", { style: { display: "flex", gap: 6, flex: 1 }, children: [
-        /* @__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" })
+        /* @__PURE__ */ t(F, { size: "xs", onClick: I, children: B ? "Copied!" : "Copy Config" }),
+        e.overrideCount > 0 && /* @__PURE__ */ t(F, { variant: "outline", size: "xs", onClick: e.resetAll, children: "Reset All" })
       ] }),
       e.overrideCount > 0 && /* @__PURE__ */ c(Ae, { variant: "accent", size: "sm", children: [
         e.overrideCount,
@@ -1090,12 +1108,12 @@ function bt({ state: e, theme: n, position: o, mode: s, onModeChange: i, onTheme
     ] })
   ] }) });
 }
-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: wt, children: [
+function xt({ group: e, state: n, filter: a, expanded: l, onToggle: s }) {
+  const i = e.subgroups ? e.subgroups.flatMap((d) => d.tokens) : e.tokens ?? [];
+  if (!(a === "" || i.some((d) => d.key.toLowerCase().includes(a)))) return null;
+  const f = l || a !== "";
+  return /* @__PURE__ */ c("div", { style: { borderBottom: `1px solid ${k.border}` }, children: [
+    /* @__PURE__ */ c("button", { onClick: s, style: Ct, children: [
       /* @__PURE__ */ t(
         "svg",
         {
@@ -1103,48 +1121,48 @@ function vt({ group: e, state: n, filter: o, expanded: s, onToggle: i }) {
           height: "10",
           viewBox: "0 0 10 10",
           style: { transform: f ? "rotate(90deg)" : "none", transition: "transform 150ms" },
-          children: /* @__PURE__ */ t("path", { d: "M3 1l4 4-4 4", stroke: w.textMuted, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
+          children: /* @__PURE__ */ t("path", { d: "M3 1l4 4-4 4", stroke: k.textMuted, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })
         }
       ),
-      /* @__PURE__ */ t(h, { size: "xs", weight: "semibold", children: e.label }),
-      /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginLeft: "auto" }, children: l.length })
+      /* @__PURE__ */ t(y, { size: "xs", weight: "semibold", children: e.label }),
+      /* @__PURE__ */ t(y, { size: "xs", color: "secondary", style: { marginLeft: "auto" }, children: i.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;
+      const b = a ? d.tokens.filter((v) => v.key.toLowerCase().includes(a)) : d.tokens;
       return b.length === 0 ? null : /* @__PURE__ */ c("div", { style: { marginBottom: 8 }, children: [
-        /* @__PURE__ */ t("div", { style: Ct, children: d.label }),
+        /* @__PURE__ */ t("div", { style: zt, 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(de, { meta: d, state: n }, d.key)) })
+    }) : (e.tokens ?? []).filter((d) => !a || d.key.toLowerCase().includes(a)).map((d) => /* @__PURE__ */ t(de, { meta: d, state: n }, d.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);
+  const a = n.overrides[e.key] ?? n.tokens[e.key], l = e.key in n.overrides, s = (g) => n.setOverride(e.key, g), i = () => n.removeOverride(e.key);
   switch (e.controlType) {
     case "color":
       return /* @__PURE__ */ t(
-        _e,
+        je,
         {
           label: e.key,
-          value: o,
-          isOverridden: s,
-          onChange: i,
-          onReset: l
+          value: a,
+          isOverridden: l,
+          onChange: s,
+          onReset: i
         }
       );
     case "slider":
       return /* @__PURE__ */ t(
-        Ne,
+        We,
         {
           label: e.key,
-          value: o,
-          isOverridden: s,
+          value: a,
+          isOverridden: l,
           min: e.sliderConfig.min,
           max: e.sliderConfig.max,
           step: e.sliderConfig.step,
           unit: e.sliderConfig.unit,
-          onChange: i,
-          onReset: l
+          onChange: s,
+          onReset: i
         }
       );
     case "text":
@@ -1152,15 +1170,15 @@ function de({ meta: e, state: n }) {
         Ue,
         {
           label: e.key,
-          value: o,
-          isOverridden: s,
-          onChange: i,
-          onReset: l
+          value: a,
+          isOverridden: l,
+          onChange: s,
+          onReset: i
         }
       );
   }
 }
-const xt = {
+const St = {
   position: "fixed",
   top: 0,
   bottom: 0,
@@ -1173,13 +1191,13 @@ const xt = {
   flexDirection: "column",
   zIndex: 99999,
   boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.3)"
-}, St = {
+}, kt = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
   padding: "10px 12px",
   flexShrink: 0
-}, kt = {
+}, wt = {
   width: "100%",
   background: "var(--lucent-surface-secondary)",
   color: "var(--lucent-text-primary)",
@@ -1194,7 +1212,7 @@ const xt = {
   flex: 1,
   overflowY: "auto",
   minHeight: 0
-}, wt = {
+}, Ct = {
   display: "flex",
   alignItems: "center",
   gap: 8,
@@ -1206,7 +1224,7 @@ const xt = {
   color: "inherit",
   fontFamily: "inherit",
   textAlign: "left"
-}, Ct = {
+}, zt = {
   fontSize: 10,
   fontWeight: 600,
   textTransform: "uppercase",
@@ -1214,7 +1232,7 @@ const xt = {
   color: "var(--lucent-text-secondary)",
   marginBottom: 4,
   marginTop: 4
-}, zt = {
+}, Bt = {
   display: "flex",
   alignItems: "center",
   gap: 8,
@@ -1222,7 +1240,7 @@ const xt = {
   borderTop: "1px solid var(--lucent-border-default)",
   flexShrink: 0
 };
-function Bt(e) {
+function Ft(e) {
   const n = e.toLowerCase().split("+");
   return {
     ctrl: n.includes("ctrl"),
@@ -1233,46 +1251,46 @@ function Bt(e) {
   };
 }
 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;
+  const a = navigator.platform.toUpperCase().includes("MAC");
+  return (n.meta || n.ctrl ? a ? e.metaKey : e.ctrlKey : !e.ctrlKey && !e.metaKey) && n.shift === e.shiftKey && n.alt === e.altKey && e.key.toLowerCase() === n.key;
 }
-function Lt({
+function Pt({
   shortcut: e = "meta+shift+d",
   position: n = "right",
-  defaultOpen: o = !1,
-  onThemeChange: s,
-  zIndex: i = 99999
+  defaultOpen: a = !1,
+  onThemeChange: l,
+  zIndex: s = 99999
 }) {
-  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") {
+  const [i, g] = z(a), [f, d] = z("overlay"), { theme: b } = ye(), v = Ge(), x = L(() => g((B) => !B), []);
+  return W(() => {
+    if (!i || 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");
     };
-  }, [l, f, n]), N(() => {
-    const T = Bt(e), R = (F) => {
-      Tt(F, T) && (F.preventDefault(), x());
+  }, [i, f, n]), W(() => {
+    const B = Ft(e), R = (T) => {
+      Tt(T, B) && (T.preventDefault(), x());
     };
     return document.addEventListener("keydown", R), () => document.removeEventListener("keydown", R);
-  }, [e, x]), ve(
+  }, [e, x]), xe(
     /* @__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: [
+      !i && /* @__PURE__ */ t("button", { onClick: x, style: { ...Mt, [n]: 16, zIndex: s }, 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" })
       ] }) }),
-      l && /* @__PURE__ */ t("div", { style: { zIndex: i }, children: /* @__PURE__ */ t(
-        bt,
+      i && /* @__PURE__ */ t("div", { style: { zIndex: s }, children: /* @__PURE__ */ t(
+        vt,
         {
           state: v,
           theme: b,
           position: n,
           mode: f,
           onModeChange: d,
-          ...s !== void 0 && { onThemeChange: s },
+          ...l !== void 0 && { onThemeChange: l },
           onClose: x
         }
       ) })
@@ -1286,8 +1304,8 @@ const Mt = {
   width: 40,
   height: 40,
   borderRadius: "50%",
-  background: w.bg,
-  border: `1px solid ${w.border}`,
+  background: k.bg,
+  border: `1px solid ${k.border}`,
   cursor: "pointer",
   display: "flex",
   alignItems: "center",
@@ -1296,5 +1314,5 @@ const Mt = {
   transition: "transform 150ms ease, box-shadow 150ms ease"
 };
 export {
-  Lt as LucentDevTools
+  Pt as LucentDevTools
 };