lucent-ui 0.27.1 → 0.28.0

package/dist/devtools.js

@@ -0,0 +1,1192 @@
+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-Du0kOaZK.js";
+function Oe() {
+  const { tokens: e } = le(), [n, o] = C({}), s = de(n);
+  s.current = n;
+  const i = D((f, d) => {
+    document.documentElement.style.setProperty(S(f), d), o((b) => ({ ...b, [f]: d }));
+  }, []), r = D((f) => {
+    document.documentElement.style.removeProperty(S(f)), o((d) => {
+      const b = { ...d };
+      return delete b[f], b;
+    });
+  }, []), u = D(() => {
+    for (const f of Object.keys(s.current))
+      document.documentElement.style.removeProperty(S(f));
+    o({});
+  }, []);
+  return {
+    tokens: e,
+    overrides: n,
+    overrideCount: Object.keys(n).length,
+    setOverride: i,
+    removeOverride: r,
+    resetAll: u
+  };
+}
+function y(e) {
+  return { key: e, controlType: "color" };
+}
+function g(e, n, o, s, i) {
+  return { key: e, controlType: "slider", sliderConfig: { min: n, max: o, step: s, unit: i } };
+}
+function m(e) {
+  return { key: e, controlType: "text" };
+}
+const V = [
+  {
+    label: "Colors",
+    defaultExpanded: !0,
+    subgroups: [
+      {
+        label: "Background",
+        tokens: [y("bgBase"), y("bgSubtle"), y("bgOverlay")]
+      },
+      {
+        label: "Surface",
+        tokens: [
+          y("surface"),
+          y("surfaceSecondary"),
+          y("surfaceRaised"),
+          y("surfaceOverlay"),
+          y("surfaceTint")
+        ]
+      },
+      {
+        label: "Border",
+        tokens: [y("borderDefault"), y("borderSubtle"), y("borderStrong"), y("controlTrack")]
+      },
+      {
+        label: "Text",
+        tokens: [y("textPrimary"), y("textSecondary"), y("textDisabled"), y("textInverse")]
+      },
+      {
+        label: "Accent",
+        tokens: [y("accentDefault"), y("accentHover"), y("accentSubtle"), y("accentBorder"), y("accentFg")]
+      },
+      {
+        label: "Success",
+        tokens: [y("successDefault"), y("successSubtle"), y("successText")]
+      },
+      {
+        label: "Warning",
+        tokens: [y("warningDefault"), y("warningSubtle"), y("warningText")]
+      },
+      {
+        label: "Danger",
+        tokens: [y("dangerDefault"), y("dangerHover"), y("dangerSubtle"), y("dangerText")]
+      },
+      {
+        label: "Info",
+        tokens: [y("infoDefault"), y("infoSubtle"), y("infoText")]
+      }
+    ]
+  },
+  {
+    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")
+    ]
+  },
+  {
+    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")
+    ]
+  },
+  {
+    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")
+    ]
+  },
+  {
+    label: "Shadows",
+    tokens: [
+      m("shadowNone"),
+      m("shadowSm"),
+      m("shadowMd"),
+      m("shadowLg"),
+      m("shadowXl")
+    ]
+  },
+  {
+    label: "Motion",
+    tokens: [
+      m("durationFast"),
+      m("durationBase"),
+      m("durationSlow"),
+      m("easingDefault"),
+      m("easingEmphasized"),
+      m("easingDecelerate")
+    ]
+  }
+];
+function Le(e) {
+  return Object.keys(e).length === 0 ? `<LucentProvider>
+  {children}
+</LucentProvider>` : `<LucentProvider tokens={{
+${Object.entries(e).map(([o, s]) => `    ${o}: '${s}'`).join(`,
+`)}
+}}>
+  {children}
+</LucentProvider>`;
+}
+async function Pe(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: [
+    /* @__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,
+        {
+          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" }) }) })
+    ] })
+  ] });
+}
+const Ie = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "4px 0",
+  minHeight: 28
+};
+function Ae({
+  label: e,
+  value: n,
+  isOverridden: o,
+  min: s,
+  max: i,
+  step: r,
+  unit: u,
+  onChange: f,
+  onReset: d
+}) {
+  const b = parseFloat(n) || 0;
+  return /* @__PURE__ */ c("div", { style: Ge, 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,
+          value: b,
+          onChange: (v) => f(`${v}${u}`),
+          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(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" }) }) })
+    ] })
+  ] });
+}
+const Ge = {
+  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: [
+    /* @__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,
+        {
+          size: "sm",
+          value: n,
+          onChange: (r) => s(r.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" }) }) })
+    ] })
+  ] });
+}
+const _e = {
+  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);
+  return {
+    accentDefault: s,
+    accentFg: o,
+    accentHover: r,
+    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);
+  return {
+    bgBase: e,
+    bgSubtle: s,
+    surfaceTint: i,
+    surface: d,
+    surfaceSecondary: b,
+    surfaceRaised: v,
+    surfaceOverlay: x
+  };
+}
+function We(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)
+  };
+}
+function Ne(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)
+  };
+}
+const Ke = [
+  { key: "fontSizeXs", step: -2 },
+  { key: "fontSizeSm", step: -1 },
+  { key: "fontSizeMd", step: 0 },
+  { key: "fontSizeLg", step: 1 },
+  { key: "fontSizeXl", step: 2 },
+  { key: "fontSize2xl", step: 3 },
+  { key: "fontSize3xl", step: 4 }
+];
+function U(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;
+    o[s] = `${u}rem`;
+  }
+  return o;
+}
+const Ue = [
+  { 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 = [
+  { key: "space0", rem: 0 },
+  { key: "space1", rem: 0.25 },
+  { key: "space2", rem: 0.5 },
+  { key: "space3", rem: 0.75 },
+  { key: "space4", rem: 1 },
+  { key: "space5", rem: 1.25 },
+  { key: "space6", rem: 1.5 },
+  { key: "space8", rem: 2 },
+  { key: "space10", rem: 2.5 },
+  { key: "space12", rem: 3 },
+  { key: "space16", rem: 4 },
+  { key: "space20", rem: 5 },
+  { key: "space24", rem: 6 }
+];
+function Z(e) {
+  const n = {};
+  for (const { key: o, rem: s } of He) {
+    if (s === 0) {
+      n[o] = "0px";
+      continue;
+    }
+    const i = Math.round(s * e * 1e3) / 1e3;
+    n[o] = `${i}rem`;
+  }
+  return n;
+}
+const Je = [
+  { 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) {
+  const n = {};
+  for (const { key: o, sharp: s, rounded: i, pill: r } of Je) {
+    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;
+    }
+    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 = [
+  { value: "flat", label: "Flat" },
+  { value: "default", label: "Default" },
+  { value: "subtle", label: "Subtle" },
+  { value: "elevated", label: "Elevated" },
+  { value: "natural", label: "Natural" },
+  { value: "liquidGlass", label: "Liquid Glass" },
+  { value: "neumorphic", label: "Neumorphic" },
+  { value: "brutalist", label: "Brutalist" },
+  { value: "glow", label: "Glow" }
+];
+function ee(e, n) {
+  if (e === "default")
+    return n === "dark" ? he : pe;
+  const o = Xe[e];
+  return n === "dark" ? o.dark : o.light;
+}
+const te = /* @__PURE__ */ new Set(), Ve = {
+  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",
+  Outfit: "Outfit:wght@300;400;500;600;700",
+  Sora: "Sora:wght@300;400;500;600;700",
+  "Space Grotesk": "Space+Grotesk:wght@400;500;600;700",
+  Lora: "Lora:wght@400;500;600;700",
+  Merriweather: "Merriweather:wght@300;400;700",
+  "Playfair Display": "Playfair+Display:wght@400;500;600;700",
+  "JetBrains Mono": "JetBrains+Mono:wght@400;500;600;700",
+  "Fira Code": "Fira+Code:wght@400;500;600;700",
+  "DM Sans": "DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700",
+  "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];
+  if (!s) return;
+  te.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 = [
+  // ── 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 },
+  // ── 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 = [
+  {
+    label: "Brand",
+    colors: ["#111827", "#e9c96b", "#6366f1", "#8b5cf6", "#10b981", "#0d9488", "#f43f5e", "#e8624a", "#d97706", "#0ea5e9", "#475569", "#5f8c6e"]
+  },
+  {
+    label: "Vibrant",
+    colors: ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#a855f7", "#ec4899", "#14b8a6", "#f59e0b"]
+  }
+], st = [
+  {
+    label: "Light",
+    colors: ["#ffffff", "#fafafa", "#f9fafb", "#f5f5f4", "#fef7ee", "#faf5ff", "#f0f9ff", "#f0fdf4", "#fefce8", "#fff1f2"]
+  },
+  {
+    label: "Dark",
+    colors: ["#09090b", "#0a0a0a", "#0c0c0e", "#111827", "#18181b", "#1c1917", "#1a1a2e", "#0f172a", "#171717", "#0d1117"]
+  }
+], it = [
+  {
+    label: "Light",
+    colors: ["#ffffff", "#fafafa", "#f9fafb", "#f5f5f5", "#f3f4f6", "#f1f5f9", "#fef3c7", "#fce7f3", "#dbeafe", "#dcfce7"]
+  },
+  {
+    label: "Dark",
+    colors: ["#111111", "#141414", "#1a1a1a", "#1e1e2e", "#1f2937", "#1e293b", "#18181b", "#16213e", "#1c1c1c", "#0f172a"]
+  }
+], ct = [
+  {
+    label: "Light",
+    colors: ["#e5e7eb", "#d1d5db", "#e2e8f0", "#f3f4f6", "#d4d4d8", "#cbd5e1", "#e7e5e4", "#fde68a", "#c7d2fe", "#bbf7d0"]
+  },
+  {
+    label: "Dark",
+    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
+    };
+    j(l.fontFamily), requestAnimationFrame(() => {
+      for (const [W, ce] of Object.entries(I))
+        e.setOverride(W, ce);
+    });
+  }, [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);
+  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: {
+      display: "grid",
+      gridTemplateColumns: "repeat(5, 1fr)",
+      gap: 6
+    }, children: lt.map((l) => /* @__PURE__ */ c(
+      B,
+      {
+        variant: d === l.name ? "secondary" : "ghost",
+        onClick: () => R(l),
+        style: {
+          padding: "8px 4px 6px",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 5,
+          height: "auto"
+        },
+        children: [
+          /* @__PURE__ */ t("div", { style: {
+            width: 24,
+            height: 24,
+            borderRadius: l.roundness < 0.3 ? 3 : l.roundness < 0.7 ? 6 : 12,
+            background: l.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 })
+        ]
+      },
+      l.name
+    )) }) }),
+    /* @__PURE__ */ t(A, { 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(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(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__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ t(P, { value: H, onChange: p, size: "sm", presetGroups: it }),
+        /* @__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__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ t(P, { value: J, onChange: k, size: "sm", presetGroups: ct }),
+        /* @__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__ */ c(A, { 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(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,
+        " (",
+        o.toFixed(2),
+        "x)"
+      ] }) })
+    ] }),
+    /* @__PURE__ */ c(A, { 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(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: {
+        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,
+        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 }) })
+    ] }),
+    /* @__PURE__ */ t(A, { 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,
+      {
+        variant: u === l ? "secondary" : "ghost",
+        size: "2xs",
+        onClick: () => F(l),
+        style: { justifyContent: "center" },
+        children: I
+      },
+      l
+    )) }) })
+  ] });
+}
+function A({ 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 }),
+    n
+  ] });
+}
+const L = [
+  { 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" },
+  { label: "Geist", family: '"Geist", sans-serif', category: "sans" },
+  { label: "Plus Jakarta", family: '"Plus Jakarta Sans", sans-serif', category: "sans" },
+  { label: "Outfit", family: '"Outfit", sans-serif', category: "sans" },
+  { label: "Lora", family: '"Lora", serif', category: "serif" },
+  { label: "Merriweather", family: '"Merriweather", serif', category: "serif" },
+  { label: "Playfair", family: '"Playfair Display", serif', category: "serif" },
+  { label: "JetBrains Mono", family: '"JetBrains Mono", monospace', category: "mono" },
+  { label: "Fira Code", family: '"Fira Code", monospace', category: "mono" },
+  { label: "Space Grotesk", family: '"Space Grotesk", sans-serif', category: "display" },
+  { 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;
+  });
+  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);
+  }, [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);
+  return /* @__PURE__ */ c("div", { style: { padding: "4px 12px 12px", display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ c(G, { label: "Font Family", children: [
+      /* @__PURE__ */ t("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ t(
+        Te,
+        {
+          value: d,
+          onChange: (a) => b(a),
+          options: [
+            { value: "all", label: "All" },
+            { value: "sans", label: "Sans" },
+            { value: "serif", label: "Serif" },
+            { value: "mono", label: "Mono" },
+            { value: "display", label: "Display" }
+          ],
+          size: "sm",
+          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;
+        return /* @__PURE__ */ c(
+          B,
+          {
+            variant: p ? "secondary" : "ghost",
+            onClick: () => {
+              j(a.family), e.setOverride("fontFamilyBase", a.family);
+            },
+            style: {
+              width: "100%",
+              justifyContent: "space-between",
+              height: "auto",
+              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 })
+            ]
+          },
+          a.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,
+          {
+            size: "sm",
+            value: v,
+            onChange: (a) => e.setOverride("fontFamilyBase", a.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__ */ c("div", { children: [
+        /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Monospace" }),
+        /* @__PURE__ */ t(
+          q,
+          {
+            size: "sm",
+            value: x,
+            onChange: (a) => {
+              j(a.target.value), e.setOverride("fontFamilyMono", a.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" }]
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginBottom: 4, display: "block" }, children: "Display" }),
+        /* @__PURE__ */ t(
+          q,
+          {
+            size: "sm",
+            value: R,
+            onChange: (a) => {
+              j(a.target.value), e.setOverride("fontFamilyDisplay", a.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" }]
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ t(G, { 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__ */ c(h, { as: "code", size: "xs", family: "mono", style: { width: 56, textAlign: "right", flexShrink: 0, color: "var(--lucent-accent-default)" }, children: [
+            i,
+            "rem"
+          ] })
+        ] })
+      ] }),
+      /* @__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(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,
+          {
+            variant: Math.abs(u - a.ratio) < 5e-3 ? "secondary" : "ghost",
+            size: "2xs",
+            onClick: () => F(a.ratio),
+            children: a.label
+          },
+          a.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];
+      return /* @__PURE__ */ t(
+        P,
+        {
+          label: p,
+          value: k,
+          onChange: (_) => e.setOverride(a, _),
+          size: "sm",
+          inline: !0
+        },
+        a
+      );
+    }) }) }),
+    /* @__PURE__ */ t(G, { label: "Preview", children: /* @__PURE__ */ t(
+      ut,
+      {
+        family: v,
+        baseSize: i,
+        ratio: u,
+        textPrimary: e.overrides.textPrimary ?? e.tokens.textPrimary,
+        textSecondary: e.overrides.textSecondary ?? e.tokens.textSecondary,
+        bgBase: e.overrides.bgBase ?? e.tokens.bgBase
+      }
+    ) })
+  ] });
+}
+const yt = [
+  { key: "textPrimary", label: "Primary" },
+  { key: "textSecondary", label: "Secondary" },
+  { key: "textDisabled", label: "Disabled" },
+  { key: "textInverse", label: "Inverse" }
+];
+function G({ 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 }),
+    n
+  ] });
+}
+function ut({ family: e, baseSize: n, ratio: o, textPrimary: s, textSecondary: i, bgBase: r }) {
+  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,
+    borderRadius: 6,
+    padding: "14px 12px",
+    fontFamily: e,
+    border: "1px solid var(--lucent-border-default)"
+  }, children: [
+    /* @__PURE__ */ t("div", { style: {
+      fontSize: `${u}rem`,
+      fontWeight: 700,
+      color: s,
+      lineHeight: 1.2,
+      marginBottom: 6
+    }, children: "Heading" }),
+    /* @__PURE__ */ t("div", { style: {
+      fontSize: `${f}rem`,
+      fontWeight: 600,
+      color: s,
+      lineHeight: 1.3,
+      marginBottom: 8
+    }, children: "Subheading text" }),
+    /* @__PURE__ */ t("div", { style: {
+      fontSize: `${d}rem`,
+      color: s,
+      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,
+      lineHeight: 1.5
+    }, children: "Secondary caption — smaller, muted for supplemental information." })
+  ] });
+}
+const w = {
+  bg: "#0a0a0a",
+  surface: "#141414",
+  text: "#f0ead6",
+  textMuted: "#8a8473",
+  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;
+  }, []);
+  return /* @__PURE__ */ t("div", { ref: s, style: i, children: /* @__PURE__ */ t(ht.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,
+    [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: { 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__ */ c("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        r && /* @__PURE__ */ t(
+          Fe,
+          {
+            checked: n === "dark",
+            onChange: () => r(n === "light" ? "dark" : "light"),
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ t(
+          B,
+          {
+            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: [
+              /* @__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: [
+              /* @__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" })
+            ] })
+          }
+        ),
+        /* @__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("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ t(
+      Re,
+      {
+        value: f,
+        onChange: (p) => d(p),
+        tabs: [
+          { value: "design", label: "Design" },
+          { value: "type", label: "Typography" },
+          { value: "tokens", label: "Tokens" }
+        ]
+      }
+    ) }),
+    f === "tokens" && /* @__PURE__ */ c(ae, { 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,
+          spellCheck: !1
+        }
+      ) }),
+      /* @__PURE__ */ t("div", { style: N, children: V.map((p) => /* @__PURE__ */ t(
+        gt,
+        {
+          group: p,
+          state: e,
+          filter: a,
+          expanded: x[p.label] ?? !1,
+          onToggle: () => F(p.label)
+        },
+        p.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: [
+      /* @__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" })
+      ] }),
+      e.overrideCount > 0 && /* @__PURE__ */ c(De, { variant: "accent", size: "sm", children: [
+        e.overrideCount,
+        " override",
+        e.overrideCount !== 1 ? "s" : ""
+      ] })
+    ] })
+  ] }) });
+}
+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;
+  const f = s || o !== "";
+  return /* @__PURE__ */ c("div", { style: { borderBottom: `1px solid ${w.border}` }, children: [
+    /* @__PURE__ */ c("button", { onClick: i, style: St, children: [
+      /* @__PURE__ */ t(
+        "svg",
+        {
+          width: "10",
+          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" })
+        }
+      ),
+      /* @__PURE__ */ t(h, { size: "xs", weight: "semibold", children: e.label }),
+      /* @__PURE__ */ t(h, { size: "xs", color: "secondary", style: { marginLeft: "auto" }, children: r.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))
+      ] }, d.label);
+    }) : (e.tokens ?? []).filter((d) => !o || d.key.toLowerCase().includes(o)).map((d) => /* @__PURE__ */ t(oe, { 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);
+  switch (e.controlType) {
+    case "color":
+      return /* @__PURE__ */ t(
+        Ee,
+        {
+          label: e.key,
+          value: o,
+          isOverridden: s,
+          onChange: i,
+          onReset: r
+        }
+      );
+    case "slider":
+      return /* @__PURE__ */ t(
+        Ae,
+        {
+          label: e.key,
+          value: o,
+          isOverridden: s,
+          min: e.sliderConfig.min,
+          max: e.sliderConfig.max,
+          step: e.sliderConfig.step,
+          unit: e.sliderConfig.unit,
+          onChange: i,
+          onReset: r
+        }
+      );
+    case "text":
+      return /* @__PURE__ */ t(
+        $e,
+        {
+          label: e.key,
+          value: o,
+          isOverridden: s,
+          onChange: i,
+          onReset: r
+        }
+      );
+  }
+}
+const bt = {
+  position: "fixed",
+  top: 0,
+  bottom: 0,
+  width: 320,
+  background: "var(--lucent-bg-base)",
+  color: "var(--lucent-text-primary)",
+  fontFamily: "var(--lucent-font-family-base)",
+  fontSize: "var(--lucent-font-size-sm)",
+  display: "flex",
+  flexDirection: "column",
+  zIndex: 99999,
+  boxShadow: "-4px 0 24px rgba(0, 0, 0, 0.3)"
+}, vt = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 12px",
+  flexShrink: 0
+}, xt = {
+  width: "100%",
+  background: "var(--lucent-surface-secondary)",
+  color: "var(--lucent-text-primary)",
+  border: "1px solid var(--lucent-border-default)",
+  borderRadius: "var(--lucent-radius-md)",
+  padding: "6px 10px",
+  fontSize: "var(--lucent-font-size-xs)",
+  outline: "none",
+  fontFamily: "inherit",
+  boxSizing: "border-box"
+}, N = {
+  flex: 1,
+  overflowY: "auto",
+  minHeight: 0
+}, St = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "10px 12px",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: "inherit",
+  fontFamily: "inherit",
+  textAlign: "left"
+}, kt = {
+  fontSize: 10,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--lucent-text-secondary)",
+  marginBottom: 4,
+  marginTop: 4
+}, wt = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "10px 12px",
+  borderTop: "1px solid var(--lucent-border-default)",
+  flexShrink: 0
+};
+function Ct(e) {
+  const n = e.toLowerCase().split("+");
+  return {
+    ctrl: n.includes("ctrl"),
+    meta: n.includes("meta") || n.includes("cmd"),
+    shift: n.includes("shift"),
+    alt: n.includes("alt"),
+    key: n[n.length - 1] ?? ""
+  };
+}
+function zt(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({
+  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") {
+      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());
+    };
+    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: [
+        /* @__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,
+        {
+          state: v,
+          theme: b,
+          position: n,
+          mode: f,
+          onModeChange: d,
+          ...s !== void 0 && { onThemeChange: s },
+          onClose: x
+        }
+      ) })
+    ] }),
+    document.body
+  );
+}
+const Bt = {
+  position: "fixed",
+  bottom: 16,
+  width: 40,
+  height: 40,
+  borderRadius: "50%",
+  background: w.bg,
+  border: `1px solid ${w.border}`,
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxShadow: "0 2px 12px rgba(0, 0, 0, 0.4)",
+  transition: "transform 150ms ease, box-shadow 150ms ease"
+};
+export {
+  Dt as LucentDevTools
+};