lucent-ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { jsxs as h, jsx as n, Fragment as A } from "react/jsx-runtime";
-import { forwardRef as N, useRef as M, useEffect as F, useState as C, useCallback as K, useContext as D, createContext as L, useId as X, useLayoutEffect as Y } from "react";
-const J = {
+import { jsxs as m, jsx as n, Fragment as A } from "react/jsx-runtime";
+import { forwardRef as N, useRef as M, useEffect as F, useState as z, useCallback as X, useContext as V, createContext as W, useLayoutEffect as P, useId as J } from "react";
+const Q = {
   primary: {
     background: "var(--lucent-accent-default)",
     color: "var(--lucent-text-on-accent)",
@@ -21,18 +21,18 @@ const J = {
     color: "#ffffff",
     border: "1px solid var(--lucent-danger-default)"
   }
-}, Q = {
+}, Z = {
   sm: { height: "32px", padding: "0 var(--lucent-space-3)", fontSize: "var(--lucent-font-size-sm)" },
   md: { height: "38px", padding: "0 var(--lucent-space-4)", fontSize: "var(--lucent-font-size-md)" },
   lg: { height: "46px", padding: "0 var(--lucent-space-5)", fontSize: "var(--lucent-font-size-lg)" }
-}, Z = N(
-  ({ variant: t = "primary", size: e = "md", loading: a = !1, fullWidth: r = !1, spread: o = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: u = !1, children: f, disabled: p, style: m, ...c }, d) => {
-    const g = p ?? a;
-    return /* @__PURE__ */ h(
+}, ee = N(
+  ({ variant: t = "primary", size: e = "md", loading: a = !1, fullWidth: r = !1, spread: o = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: d = !1, children: p, disabled: f, style: h, ...c }, u) => {
+    const b = f ?? a;
+    return /* @__PURE__ */ m(
       "button",
       {
-        ref: d,
-        disabled: g,
+        ref: u,
+        disabled: b,
         "aria-busy": a,
         style: {
           display: "inline-flex",
@@ -44,81 +44,81 @@ const J = {
           lineHeight: 1,
           letterSpacing: "0.01em",
           borderRadius: "var(--lucent-radius-lg)",
-          cursor: g ? "not-allowed" : "pointer",
+          cursor: b ? "not-allowed" : "pointer",
           width: r ? "100%" : void 0,
           transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",
           whiteSpace: "nowrap",
           boxSizing: "border-box",
           outline: "none",
           margin: 0,
-          ...Q[e],
-          ...J[t],
-          ...m,
-          ...g && {
+          ...Z[e],
+          ...Q[t],
+          ...h,
+          ...b && {
             background: "var(--lucent-bg-muted)",
             color: "var(--lucent-text-disabled)",
             borderColor: "transparent"
           }
         },
-        onMouseEnter: (b) => {
-          var y;
-          !g && !u && ee(b.currentTarget, t), (y = c.onMouseEnter) == null || y.call(c, b);
+        onMouseEnter: (g) => {
+          var x;
+          !b && !d && te(g.currentTarget, t), (x = c.onMouseEnter) == null || x.call(c, g);
         },
-        onMouseLeave: (b) => {
-          var y;
-          !g && !u && te(b.currentTarget, t), (y = c.onMouseLeave) == null || y.call(c, b);
+        onMouseLeave: (g) => {
+          var x;
+          !b && !d && ne(g.currentTarget, t), (x = c.onMouseLeave) == null || x.call(c, g);
         },
-        onMouseDown: (b) => {
-          var y;
-          g || (b.currentTarget.style.transform = "scale(0.95)"), (y = c.onMouseDown) == null || y.call(c, b);
+        onMouseDown: (g) => {
+          var x;
+          b || (g.currentTarget.style.transform = "scale(0.95)"), (x = c.onMouseDown) == null || x.call(c, g);
         },
-        onMouseUp: (b) => {
-          var y;
-          b.currentTarget.style.transform = "", (y = c.onMouseUp) == null || y.call(c, b);
+        onMouseUp: (g) => {
+          var x;
+          g.currentTarget.style.transform = "", (x = c.onMouseUp) == null || x.call(c, g);
         },
-        onFocus: (b) => {
-          var y;
-          b.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (y = c.onFocus) == null || y.call(c, b);
+        onFocus: (g) => {
+          var x;
+          g.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (x = c.onFocus) == null || x.call(c, g);
         },
-        onBlur: (b) => {
-          var y;
-          b.currentTarget.style.boxShadow = "", (y = c.onBlur) == null || y.call(c, b);
+        onBlur: (g) => {
+          var x;
+          g.currentTarget.style.boxShadow = "", (x = c.onBlur) == null || x.call(c, g);
         },
         ...c,
         children: [
           i,
-          a ? /* @__PURE__ */ n(re, {}) : f,
+          a ? /* @__PURE__ */ n(oe, {}) : p,
           !a && l,
-          !a && s && /* @__PURE__ */ n(ae, { size: e })
+          !a && s && /* @__PURE__ */ n(re, { size: e })
         ]
       }
     );
   }
 );
-Z.displayName = "Button";
-function ee(t, e) {
+ee.displayName = "Button";
+function te(t, e) {
   e === "primary" ? (t.style.background = "var(--lucent-accent-hover)", t.style.borderColor = "var(--lucent-accent-hover)") : e === "secondary" ? t.style.background = "var(--lucent-bg-subtle)" : e === "ghost" ? t.style.background = "var(--lucent-bg-muted)" : e === "danger" && (t.style.background = "var(--lucent-danger-hover)", t.style.borderColor = "var(--lucent-danger-hover)");
 }
-function te(t, e) {
+function ne(t, e) {
   e === "primary" ? (t.style.background = "var(--lucent-accent-default)", t.style.borderColor = "var(--lucent-accent-default)") : e === "secondary" ? t.style.background = "var(--lucent-surface-default)" : e === "ghost" ? t.style.background = "transparent" : e === "danger" && (t.style.background = "var(--lucent-danger-default)", t.style.borderColor = "var(--lucent-danger-default)");
 }
-const ne = { sm: 12, md: 14, lg: 16 };
-function ae({ size: t }) {
-  const e = ne[t];
+const ae = { sm: 12, md: 14, lg: 16 };
+function re({ size: t }) {
+  const e = ae[t];
   return /* @__PURE__ */ n("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, style: { flexShrink: 0, marginLeft: -2 }, children: /* @__PURE__ */ n("polyline", { points: "6 9 12 15 18 9" }) });
 }
-function re() {
-  return /* @__PURE__ */ h("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", "aria-hidden": !0, style: { animation: "lucent-spin 0.7s linear infinite", flexShrink: 0 }, children: [
+function oe() {
+  return /* @__PURE__ */ m("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", "aria-hidden": !0, style: { animation: "lucent-spin 0.7s linear infinite", flexShrink: 0 }, children: [
     /* @__PURE__ */ n("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
     /* @__PURE__ */ n("path", { d: "M12 2a10 10 0 0 1 10 10" })
   ] });
 }
-const ot = {
+const st = {
   id: "button",
   name: "Button",
   tier: "atom",
   domain: "neutral",
-  specVersion: "0.1",
+  specVersion: "1.0",
   description: "A clickable control that triggers an action. The primary interactive primitive in Lucent UI.",
   designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in a view, "secondary" for supporting actions, "ghost" for low-emphasis actions in dense UIs, and "danger" exclusively for destructive or irreversible operations. Size should match surrounding content density — prefer "md" as the default and reserve "sm" for toolbars or tables.',
   props: [
@@ -224,14 +224,14 @@ const ot = {
     ariaAttributes: ["aria-disabled", "aria-busy"],
     keyboardInteractions: ["Enter — activates the button", "Space — activates the button"]
   }
-}, V = N(
-  ({ label: t, helperText: e, errorText: a, leftElement: r, rightElement: o, id: i, style: l, ...s }, u) => {
-    const f = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, p = !!a, m = !!s.disabled;
-    return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
+}, O = N(
+  ({ label: t, helperText: e, errorText: a, leftElement: r, rightElement: o, id: i, style: l, ...s }, d) => {
+    const p = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, f = !!a, h = !!s.disabled;
+    return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
       t && /* @__PURE__ */ n(
         "label",
         {
-          htmlFor: f,
+          htmlFor: p,
           style: {
             fontSize: "var(--lucent-font-size-sm)",
             fontWeight: "var(--lucent-font-weight-medium)",
@@ -241,11 +241,11 @@ const ot = {
           children: t
         }
       ),
-      /* @__PURE__ */ h("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ m("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
         r && /* @__PURE__ */ n("span", { style: {
           position: "absolute",
           left: "var(--lucent-space-3)",
-          color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+          color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
           display: "flex",
           alignItems: "center",
           pointerEvents: "none"
@@ -253,20 +253,20 @@ const ot = {
         /* @__PURE__ */ n(
           "input",
           {
-            ref: u,
-            id: f,
-            "aria-invalid": p,
-            "aria-describedby": p ? `${f}-error` : e ? `${f}-helper` : void 0,
+            ref: d,
+            id: p,
+            "aria-invalid": f,
+            "aria-describedby": f ? `${p}-error` : e ? `${p}-helper` : void 0,
             style: {
               width: "100%",
               height: "40px",
               padding: `0 ${o ? "var(--lucent-space-10)" : "var(--lucent-space-3)"} 0 ${r ? "var(--lucent-space-10)" : "var(--lucent-space-3)"}`,
               fontSize: "var(--lucent-font-size-md)",
               fontFamily: "var(--lucent-font-family-base)",
-              color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
-              background: m ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
-              border: `1px solid ${m ? "transparent" : p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
-              cursor: m ? "not-allowed" : void 0,
+              color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+              background: h ? "var(--lucent-bg-muted)" : "var(--lucent-surface-default)",
+              border: `1px solid ${h ? "transparent" : f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
+              cursor: h ? "not-allowed" : void 0,
               borderRadius: "var(--lucent-radius-lg)",
               outline: "none",
               boxSizing: "border-box",
@@ -274,20 +274,20 @@ const ot = {
               ...l
             },
             onMouseEnter: (c) => {
-              var d;
-              !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (d = s.onMouseEnter) == null || d.call(s, c);
+              var u;
+              !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (u = s.onMouseEnter) == null || u.call(s, c);
             },
             onMouseLeave: (c) => {
-              var d;
-              !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (d = s.onMouseLeave) == null || d.call(s, c);
+              var u;
+              !s.disabled && c.currentTarget !== document.activeElement && (c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (u = s.onMouseLeave) == null || u.call(s, c);
             },
             onFocus: (c) => {
-              var d;
-              c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", c.currentTarget.style.boxShadow = `0 0 0 3px ${p ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (d = s.onFocus) == null || d.call(s, c);
+              var u;
+              c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", c.currentTarget.style.boxShadow = `0 0 0 3px ${f ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (u = s.onFocus) == null || u.call(s, c);
             },
             onBlur: (c) => {
-              var d;
-              c.currentTarget.style.borderColor = p ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (d = s.onBlur) == null || d.call(s, c);
+              var u;
+              c.currentTarget.style.borderColor = f ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", c.currentTarget.style.boxShadow = "none", (u = s.onBlur) == null || u.call(s, c);
             },
             ...s
           }
@@ -295,15 +295,15 @@ const ot = {
         o && /* @__PURE__ */ n("span", { style: {
           position: "absolute",
           right: "var(--lucent-space-3)",
-          color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+          color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
           display: "flex",
           alignItems: "center"
         }, children: o })
       ] }),
-      p && /* @__PURE__ */ n(
+      f && /* @__PURE__ */ n(
         "span",
         {
-          id: `${f}-error`,
+          id: `${p}-error`,
           role: "alert",
           style: {
             fontSize: "var(--lucent-font-size-sm)",
@@ -313,10 +313,10 @@ const ot = {
           children: a
         }
       ),
-      !p && e && /* @__PURE__ */ n(
+      !f && e && /* @__PURE__ */ n(
         "span",
         {
-          id: `${f}-helper`,
+          id: `${p}-helper`,
           style: {
             fontSize: "var(--lucent-font-size-sm)",
             color: "var(--lucent-text-secondary)",
@@ -328,8 +328,8 @@ const ot = {
     ] });
   }
 );
-V.displayName = "Input";
-const it = {
+O.displayName = "Input";
+const ct = {
   id: "input",
   name: "Input",
   tier: "atom",
@@ -361,15 +361,15 @@ const it = {
     ariaAttributes: ["aria-invalid", "aria-describedby", "aria-label"],
     keyboardInteractions: ["Tab — focuses the input"]
   }
-}, oe = N(
-  ({ label: t, helperText: e, errorText: a, autoResize: r = !1, maxLength: o, showCount: i = !1, id: l, value: s, onChange: u, style: f, ...p }, m) => {
-    const c = M(null), d = m ?? c, g = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, b = !!a, y = typeof s == "string" ? s.length : 0;
+}, ie = N(
+  ({ label: t, helperText: e, errorText: a, autoResize: r = !1, maxLength: o, showCount: i = !1, id: l, value: s, onChange: d, style: p, ...f }, h) => {
+    const c = M(null), u = h ?? c, b = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, g = !!a, x = typeof s == "string" ? s.length : 0;
     return F(() => {
       if (!r) return;
-      const v = d.current;
-      v && (v.style.height = "auto", v.style.height = `${v.scrollHeight}px`);
-    }, [s, r, d]), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
-      t && /* @__PURE__ */ n("label", { htmlFor: g, style: {
+      const w = u.current;
+      w && (w.style.height = "auto", w.style.height = `${w.scrollHeight}px`);
+    }, [s, r, u]), /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
+      t && /* @__PURE__ */ n("label", { htmlFor: b, style: {
         fontSize: "var(--lucent-font-size-sm)",
         fontWeight: "var(--lucent-font-weight-medium)",
         color: "var(--lucent-text-primary)",
@@ -378,13 +378,13 @@ const it = {
       /* @__PURE__ */ n(
         "textarea",
         {
-          ref: d,
-          id: g,
+          ref: u,
+          id: b,
           maxLength: o,
           value: s,
-          onChange: u,
-          "aria-invalid": b,
-          "aria-describedby": b ? `${g}-error` : e ? `${g}-helper` : void 0,
+          onChange: d,
+          "aria-invalid": g,
+          "aria-describedby": g ? `${b}-error` : e ? `${b}-helper` : void 0,
           style: {
             width: "100%",
             minHeight: "100px",
@@ -393,47 +393,47 @@ const it = {
             fontFamily: "var(--lucent-font-family-base)",
             color: "var(--lucent-text-primary)",
             background: "var(--lucent-surface-default)",
-            border: `1px solid ${b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
+            border: `1px solid ${g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"}`,
             borderRadius: "var(--lucent-radius-md)",
             outline: "none",
             resize: r ? "none" : "vertical",
             boxSizing: "border-box",
             lineHeight: "var(--lucent-line-height-base)",
             transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
-            ...f
+            ...p
           },
-          onFocus: (v) => {
-            var k;
-            v.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", v.currentTarget.style.boxShadow = `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (k = p.onFocus) == null || k.call(p, v);
+          onFocus: (w) => {
+            var v;
+            w.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", w.currentTarget.style.boxShadow = `0 0 0 3px ${g ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = f.onFocus) == null || v.call(f, w);
           },
-          onBlur: (v) => {
-            var k;
-            v.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", v.currentTarget.style.boxShadow = "none", (k = p.onBlur) == null || k.call(p, v);
+          onBlur: (w) => {
+            var v;
+            w.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", w.currentTarget.style.boxShadow = "none", (v = f.onBlur) == null || v.call(f, w);
           },
-          ...p
+          ...f
         }
       ),
-      /* @__PURE__ */ h("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
-        /* @__PURE__ */ h("div", { children: [
-          b && /* @__PURE__ */ n("span", { id: `${g}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
-          !b && e && /* @__PURE__ */ n("span", { id: `${g}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: e })
+      /* @__PURE__ */ m("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ m("div", { children: [
+          g && /* @__PURE__ */ n("span", { id: `${b}-error`, role: "alert", style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-danger-text)", fontFamily: "var(--lucent-font-family-base)" }, children: a }),
+          !g && e && /* @__PURE__ */ n("span", { id: `${b}-helper`, style: { fontSize: "var(--lucent-font-size-sm)", color: "var(--lucent-text-secondary)", fontFamily: "var(--lucent-font-family-base)" }, children: e })
         ] }),
-        (i || o) && /* @__PURE__ */ h("span", { style: {
+        (i || o) && /* @__PURE__ */ m("span", { style: {
           fontSize: "var(--lucent-font-size-xs)",
-          color: o && y >= o ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
+          color: o && x >= o ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-mono)",
           flexShrink: 0,
           marginLeft: "var(--lucent-space-2)"
         }, children: [
-          y,
+          x,
           o ? `/${o}` : ""
         ] })
       ] })
     ] });
   }
 );
-oe.displayName = "Textarea";
-const st = {
+ie.displayName = "Textarea";
+const dt = {
   id: "textarea",
   name: "Textarea",
   tier: "atom",
@@ -465,7 +465,7 @@ const st = {
     ariaAttributes: ["aria-multiline", "aria-invalid", "aria-describedby"],
     keyboardInteractions: ["Tab — focuses the textarea"]
   }
-}, ie = {
+}, le = {
   neutral: { bg: "var(--lucent-bg-muted)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)" },
   accent: { bg: "var(--lucent-accent-default)", color: "var(--lucent-text-on-accent)", border: "var(--lucent-accent-default)" },
   success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)" },
@@ -476,9 +476,9 @@ const st = {
   sm: { fontSize: "var(--lucent-font-size-xs)", padding: "0 var(--lucent-space-2)", height: "18px" },
   md: { fontSize: "var(--lucent-font-size-sm)", padding: "0 var(--lucent-space-2)", height: "22px" }
 };
-function lt({ variant: t = "neutral", size: e = "md", dot: a = !1, children: r, style: o }) {
-  const i = ie[t], l = se[e];
-  return /* @__PURE__ */ h("span", { style: {
+function ut({ variant: t = "neutral", size: e = "md", dot: a = !1, children: r, style: o }) {
+  const i = le[t], l = se[e];
+  return /* @__PURE__ */ m("span", { style: {
     display: "inline-flex",
     alignItems: "center",
     gap: "var(--lucent-space-1)",
@@ -506,7 +506,7 @@ function lt({ variant: t = "neutral", size: e = "md", dot: a = !1, children: r,
     r
   ] });
 }
-const ct = {
+const pt = {
   id: "badge",
   name: "Badge",
   tier: "atom",
@@ -531,27 +531,27 @@ const ct = {
     role: "status",
     notes: "Use aria-label on the parent element when badge meaning depends on context."
   }
-}, le = {
+}, ce = {
   xs: 24,
   sm: 32,
   md: 40,
   lg: 56,
   xl: 80
-}, ce = {
+}, de = {
   xs: "var(--lucent-font-size-xs)",
   sm: "var(--lucent-font-size-xs)",
   md: "var(--lucent-font-size-sm)",
   lg: "var(--lucent-font-size-lg)",
   xl: "var(--lucent-font-size-xl)"
 };
-function de(t, e) {
+function ue(t, e) {
   var r, o, i;
   if (e) return e.slice(0, 2).toUpperCase();
   const a = t.trim().split(/\s+/);
   return a.length === 1 ? (((r = a[0]) == null ? void 0 : r[0]) ?? "").toUpperCase() : ((((o = a[0]) == null ? void 0 : o[0]) ?? "") + (((i = a[a.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
 }
-function dt({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
-  const l = le[a], s = de(e, r), u = {
+function ft({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
+  const l = ce[a], s = ue(e, r), d = {
     width: l,
     height: l,
     borderRadius: "var(--lucent-radius-full)",
@@ -571,7 +571,7 @@ function dt({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
       alt: e,
       width: l,
       height: l,
-      style: { ...u, objectFit: "cover" },
+      style: { ...d, objectFit: "cover" },
       ...i
     }
   ) : /* @__PURE__ */ n(
@@ -580,10 +580,10 @@ function dt({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
       role: "img",
       "aria-label": e,
       style: {
-        ...u,
+        ...d,
         background: "var(--lucent-accent-default)",
         color: "var(--lucent-text-on-accent)",
-        fontSize: ce[a],
+        fontSize: de[a],
         fontWeight: "var(--lucent-font-weight-semibold)",
         fontFamily: "var(--lucent-font-family-base)"
       },
@@ -591,7 +591,7 @@ function dt({ src: t, alt: e, size: a = "md", initials: r, style: o, ...i }) {
     }
   );
 }
-const ut = {
+const mt = {
   id: "avatar",
   name: "Avatar",
   tier: "atom",
@@ -617,21 +617,21 @@ const ut = {
     ariaAttributes: ["aria-label"],
     notes: 'When src is present, renders as <img> with alt. When showing initials, renders as <span role="img" aria-label>.'
   }
-}, ue = {
+}, pe = {
   xs: 12,
   sm: 16,
   md: 24,
   lg: 36
-}, pe = {
+}, fe = {
   xs: 2.5,
   sm: 2.5,
   md: 2,
   lg: 2
 };
-function fe({ size: t = "md", label: e = "Loading…", color: a }) {
-  const r = ue[t], o = pe[t];
-  return /* @__PURE__ */ h("span", { role: "status", "aria-label": e, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
-    /* @__PURE__ */ h(
+function me({ size: t = "md", label: e = "Loading…", color: a }) {
+  const r = pe[t], o = fe[t];
+  return /* @__PURE__ */ m("span", { role: "status", "aria-label": e, style: { display: "inline-flex", alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ m(
       "svg",
       {
         width: r,
@@ -658,7 +658,7 @@ function fe({ size: t = "md", label: e = "Loading…", color: a }) {
     /* @__PURE__ */ n("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap" }, children: e })
   ] });
 }
-const pt = {
+const ht = {
   id: "spinner",
   name: "Spinner",
   tier: "atom",
@@ -683,7 +683,7 @@ const pt = {
     notes: 'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'
   }
 };
-function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucent-space-4)", style: r }) {
+function gt({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucent-space-4)", style: r }) {
   return t === "vertical" ? /* @__PURE__ */ n(
     "span",
     {
@@ -699,7 +699,7 @@ function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucen
         ...r
       }
     }
-  ) : e ? /* @__PURE__ */ h(
+  ) : e ? /* @__PURE__ */ m(
     "div",
     {
       role: "separator",
@@ -738,7 +738,7 @@ function ft({ orientation: t = "horizontal", label: e, spacing: a = "var(--lucen
     }
   );
 }
-const mt = {
+const bt = {
   id: "divider",
   name: "Divider",
   tier: "atom",
@@ -761,7 +761,7 @@ const mt = {
     role: "separator",
     ariaAttributes: ["aria-orientation", "aria-label"]
   }
-}, me = { sm: 14, md: 16 }, he = `
+}, he = { sm: 14, md: 16 }, ge = `
 @keyframes lucent-cb-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.82); }
@@ -773,7 +773,7 @@ const mt = {
   60%  { transform: scale(1.15) rotate(2deg); }
   100% { opacity: 1; transform: scale(1) rotate(0deg); }
 }
-`, ge = N(
+`, be = N(
   ({
     label: t,
     size: e = "md",
@@ -783,41 +783,41 @@ const mt = {
     disabled: i,
     id: l,
     onChange: s,
-    style: u,
-    ...f
-  }, p) => {
-    const m = M(null), c = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, d = me[e], g = r !== void 0, [b, y] = C(o ?? !1), v = g ? !!r : b, k = M(v), [T, S] = C(0);
+    style: d,
+    ...p
+  }, f) => {
+    const h = M(null), c = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, u = he[e], b = r !== void 0, [g, x] = z(o ?? !1), w = b ? !!r : g, v = M(w), [k, y] = z(0);
     F(() => {
-      !i && k.current !== v && (k.current = v, S((I) => I + 1));
-    }, [v, i]);
-    const q = K(
-      (I) => {
-        m.current = I, typeof p == "function" ? p(I) : p && (p.current = I);
+      !i && v.current !== w && (v.current = w, y((q) => q + 1));
+    }, [w, i]);
+    const I = X(
+      (q) => {
+        h.current = q, typeof f == "function" ? f(q) : f && (f.current = q);
       },
-      [p]
+      [f]
     );
     F(() => {
-      m.current && (m.current.indeterminate = a);
+      h.current && (h.current.indeterminate = a);
     }, [a]);
-    const E = (I) => {
-      g || y(I.target.checked), s == null || s(I);
-    }, R = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", _ = {
-      width: d,
-      height: d,
+    const T = (q) => {
+      b || x(q.target.checked), s == null || s(q);
+    }, R = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", B = {
+      width: u,
+      height: u,
       borderRadius: "var(--lucent-radius-sm)",
-      border: `1.5px solid ${i ? "transparent" : v || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
-      background: i ? "var(--lucent-bg-muted)" : v || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
+      border: `1.5px solid ${i ? "transparent" : w || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
+      background: i ? "var(--lucent-bg-muted)" : w || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
       transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
       // Re-key forces the animation to restart on every toggle.
-      animation: T > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
+      animation: k > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
     };
-    return /* @__PURE__ */ h(A, { children: [
-      /* @__PURE__ */ n("style", { children: he }),
-      /* @__PURE__ */ h(
+    return /* @__PURE__ */ m(A, { children: [
+      /* @__PURE__ */ n("style", { children: ge }),
+      /* @__PURE__ */ m(
         "label",
         {
           style: {
@@ -829,28 +829,28 @@ const mt = {
             fontSize: e === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
             color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
             userSelect: "none",
-            ...u
+            ...d
           },
           children: [
             /* @__PURE__ */ n(
               "input",
               {
-                ref: q,
+                ref: I,
                 type: "checkbox",
                 id: c,
-                checked: g ? r : b,
+                checked: b ? r : g,
                 disabled: i,
-                onChange: E,
+                onChange: T,
                 style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-                ...f
+                ...p
               }
             ),
-            /* @__PURE__ */ h("span", { "aria-hidden": !0, style: _, children: [
-              v && !a && /* @__PURE__ */ n(
+            /* @__PURE__ */ m("span", { "aria-hidden": !0, style: B, children: [
+              w && !a && /* @__PURE__ */ n(
                 "svg",
                 {
-                  width: d - 4,
-                  height: d - 4,
+                  width: u - 4,
+                  height: u - 4,
                   viewBox: "0 0 10 10",
                   fill: "none",
                   style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -860,15 +860,15 @@ const mt = {
               a && /* @__PURE__ */ n(
                 "svg",
                 {
-                  width: d - 4,
-                  height: d - 4,
+                  width: u - 4,
+                  height: u - 4,
                   viewBox: "0 0 10 10",
                   fill: "none",
                   style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
                   children: /* @__PURE__ */ n("path", { d: "M2 5H8", stroke: R, strokeWidth: 1.5, strokeLinecap: "round" })
                 }
               )
-            ] }, T),
+            ] }, k),
             t
           ]
         }
@@ -876,8 +876,8 @@ const mt = {
     ] });
   }
 );
-ge.displayName = "Checkbox";
-const ht = {
+be.displayName = "Checkbox";
+const vt = {
   id: "checkbox",
   name: "Checkbox",
   tier: "atom",
@@ -946,7 +946,7 @@ const ht = {
     ariaAttributes: ["aria-checked", "aria-disabled"],
     keyboardInteractions: ["Space — toggles checked state"]
   }
-}, be = `
+}, ve = `
 @keyframes lucent-radio-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.82); }
@@ -958,7 +958,7 @@ const ht = {
   60%  { transform: scale(1.2); }
   100% { opacity: 1; transform: scale(1); }
 }
-`, W = L(null);
+`, H = W(null);
 function ye({
   name: t,
   value: e,
@@ -968,7 +968,7 @@ function ye({
   label: i,
   children: l
 }) {
-  return /* @__PURE__ */ n(W.Provider, { value: { name: t, value: e, onChange: a, disabled: r ?? !1 }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(H.Provider, { value: { name: t, value: e, onChange: a, disabled: r ?? !1 }, children: /* @__PURE__ */ n(
     "div",
     {
       role: "radiogroup",
@@ -983,47 +983,47 @@ function ye({
     }
   ) });
 }
-const ve = { sm: 14, md: 16 };
-function gt({ value: t, label: e, size: a = "md", disabled: r, id: o, onChange: i, checked: l, ...s }) {
-  const u = D(W), f = o ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, p = ve[a], m = r ?? (u == null ? void 0 : u.disabled) ?? !1, c = u ? u.value === t : !!l, d = M(c), [g, b] = C(0);
+const xe = { sm: 14, md: 16 };
+function yt({ value: t, label: e, size: a = "md", disabled: r, id: o, onChange: i, checked: l, ...s }) {
+  const d = V(H), p = o ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, f = xe[a], h = r ?? (d == null ? void 0 : d.disabled) ?? !1, c = d ? d.value === t : !!l, u = M(c), [b, g] = z(0);
   F(() => {
-    !m && d.current !== c && (d.current = c, b((T) => T + 1));
-  }, [c, m]);
-  const y = (T) => {
-    u == null || u.onChange(t), i == null || i(T);
-  }, v = {
-    width: p / 2,
-    height: p / 2,
+    !h && u.current !== c && (u.current = c, g((k) => k + 1));
+  }, [c, h]);
+  const x = (k) => {
+    d == null || d.onChange(t), i == null || i(k);
+  }, w = {
+    width: f / 2,
+    height: f / 2,
     borderRadius: "50%",
-    background: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
+    background: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
     animation: c ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
     opacity: c ? 1 : 0
-  }, k = {
-    width: p,
-    height: p,
+  }, v = {
+    width: f,
+    height: f,
     borderRadius: "50%",
-    border: `1.5px solid ${m ? "transparent" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
-    background: m ? "var(--lucent-bg-muted)" : c ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
+    border: `1.5px solid ${h ? "transparent" : c ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
+    background: h ? "var(--lucent-bg-muted)" : c ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
     flexShrink: 0,
     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
-    animation: g > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
+    animation: b > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
   };
-  return /* @__PURE__ */ h(A, { children: [
-    /* @__PURE__ */ n("style", { children: be }),
-    /* @__PURE__ */ h(
+  return /* @__PURE__ */ m(A, { children: [
+    /* @__PURE__ */ n("style", { children: ve }),
+    /* @__PURE__ */ m(
       "label",
       {
         style: {
           display: "inline-flex",
           alignItems: "center",
           gap: "var(--lucent-space-2)",
-          cursor: m ? "not-allowed" : "pointer",
+          cursor: h ? "not-allowed" : "pointer",
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: a === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
-          color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+          color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
           userSelect: "none"
         },
         children: [
@@ -1031,29 +1031,29 @@ function gt({ value: t, label: e, size: a = "md", disabled: r, id: o, onChange:
             "input",
             {
               type: "radio",
-              id: f,
+              id: p,
               value: t,
-              name: (u == null ? void 0 : u.name) ?? s.name,
+              name: (d == null ? void 0 : d.name) ?? s.name,
               checked: c,
-              disabled: m,
-              onChange: y,
+              disabled: h,
+              onChange: x,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
               ...s
             }
           ),
-          /* @__PURE__ */ n("span", { "aria-hidden": !0, style: k, children: /* @__PURE__ */ n("span", { style: v }) }, g),
+          /* @__PURE__ */ n("span", { "aria-hidden": !0, style: v, children: /* @__PURE__ */ n("span", { style: w }) }, b),
           e
         ]
       }
     )
   ] });
 }
-function bt({
+function xt({
   defaultValue: t = "",
   onChange: e,
   ...a
 }) {
-  const [r, o] = C(t);
+  const [r, o] = z(t);
   return /* @__PURE__ */ n(
     ye,
     {
@@ -1065,7 +1065,7 @@ function bt({
     }
   );
 }
-const yt = {
+const wt = {
   id: "radio",
   name: "Radio",
   tier: "atom",
@@ -1142,11 +1142,11 @@ const yt = {
       "Space — selects the focused radio"
     ]
   }
-}, xe = {
+}, we = {
   sm: { track: [28, 16], thumb: 12 },
   md: { track: [36, 20], thumb: 16 },
   lg: { track: [44, 24], thumb: 20 }
-}, B = "cubic-bezier(0.34, 1.56, 0.64, 1)", we = `
+}, $ = "cubic-bezier(0.34, 1.56, 0.64, 1)", ke = `
 @keyframes lucent-toggle-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.94); }
@@ -1154,7 +1154,7 @@ const yt = {
   100% { transform: scale(1); }
 }
 `;
-function vt({
+function kt({
   label: t,
   size: e = "md",
   checked: a,
@@ -1163,18 +1163,18 @@ function vt({
   id: i,
   onChange: l,
   style: s,
-  ...u
+  ...d
 }) {
-  const f = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, p = a !== void 0, [m, c] = C(r ?? !1), d = p ? !!a : m, g = M(d), [b, y] = C(0);
+  const p = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, f = a !== void 0, [h, c] = z(r ?? !1), u = f ? !!a : h, b = M(u), [g, x] = z(0);
   F(() => {
-    !o && g.current !== d && (g.current = d, y((E) => E + 1));
-  }, [d, o]);
-  const { track: [v, k], thumb: T } = xe[e], S = d ? v - T - 2 : 2, q = (E) => {
-    p || c(E.target.checked), l == null || l(E);
+    !o && b.current !== u && (b.current = u, x((T) => T + 1));
+  }, [u, o]);
+  const { track: [w, v], thumb: k } = we[e], y = u ? w - k - 2 : 2, I = (T) => {
+    f || c(T.target.checked), l == null || l(T);
   };
-  return /* @__PURE__ */ h(A, { children: [
-    /* @__PURE__ */ n("style", { children: we }),
-    /* @__PURE__ */ h(
+  return /* @__PURE__ */ m(A, { children: [
+    /* @__PURE__ */ n("style", { children: ke }),
+    /* @__PURE__ */ m(
       "label",
       {
         style: {
@@ -1194,13 +1194,13 @@ function vt({
             {
               type: "checkbox",
               role: "switch",
-              id: f,
-              checked: p ? a : m,
+              id: p,
+              checked: f ? a : h,
               disabled: o,
-              onChange: q,
-              "aria-checked": d,
+              onChange: I,
+              "aria-checked": u,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-              ...u
+              ...d
             }
           ),
           /* @__PURE__ */ n(
@@ -1209,13 +1209,13 @@ function vt({
               "aria-hidden": !0,
               style: {
                 position: "relative",
-                width: v,
-                height: k,
-                borderRadius: k / 2,
-                background: o ? "var(--lucent-bg-muted)" : d ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
+                width: w,
+                height: v,
+                borderRadius: v / 2,
+                background: o ? "var(--lucent-bg-muted)" : u ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
                 flexShrink: 0,
                 transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
-                animation: b > 0 ? `lucent-toggle-pop 240ms ${B} forwards` : void 0
+                animation: g > 0 ? `lucent-toggle-pop 240ms ${$} forwards` : void 0
               },
               children: /* @__PURE__ */ n(
                 "span",
@@ -1223,18 +1223,18 @@ function vt({
                   style: {
                     position: "absolute",
                     top: 2,
-                    left: S,
-                    width: T,
-                    height: T,
+                    left: y,
+                    width: k,
+                    height: k,
                     borderRadius: "50%",
                     background: "#ffffff",
                     boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
-                    transition: `left 260ms ${B}`
+                    transition: `left 260ms ${$}`
                   }
                 }
               )
             },
-            b
+            g
           ),
           t
         ]
@@ -1242,7 +1242,7 @@ function vt({
     )
   ] });
 }
-const xt = {
+const St = {
   id: "toggle",
   name: "Toggle",
   tier: "atom",
@@ -1306,22 +1306,22 @@ const xt = {
     ariaAttributes: ["aria-checked", "aria-disabled"],
     keyboardInteractions: ["Space — toggles the switch state"]
   }
-}, ke = {
+}, Se = {
   sm: "32px",
   md: "40px",
   lg: "46px"
-}, Se = {
+}, Te = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-lg)"
-}, Te = N(
-  ({ options: t, size: e = "md", label: a, helperText: r, errorText: o, placeholder: i, disabled: l, id: s, style: u, ...f }, p) => {
-    const m = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, c = !!o;
-    return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
+}, Ce = N(
+  ({ options: t, size: e = "md", label: a, helperText: r, errorText: o, placeholder: i, disabled: l, id: s, style: d, ...p }, f) => {
+    const h = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, c = !!o;
+    return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
       a && /* @__PURE__ */ n(
         "label",
         {
-          htmlFor: m,
+          htmlFor: h,
           style: {
             fontSize: "var(--lucent-font-size-sm)",
             fontWeight: "var(--lucent-font-weight-medium)",
@@ -1331,20 +1331,20 @@ const xt = {
           children: a
         }
       ),
-      /* @__PURE__ */ h("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
-        /* @__PURE__ */ h(
+      /* @__PURE__ */ m("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+        /* @__PURE__ */ m(
           "select",
           {
-            ref: p,
-            id: m,
+            ref: f,
+            id: h,
             disabled: l,
             "aria-invalid": c,
-            "aria-describedby": c ? `${m}-error` : r ? `${m}-helper` : void 0,
+            "aria-describedby": c ? `${h}-error` : r ? `${h}-helper` : void 0,
             style: {
               width: "100%",
-              height: ke[e],
+              height: Se[e],
               padding: "0 var(--lucent-space-8) 0 var(--lucent-space-3)",
-              fontSize: Se[e],
+              fontSize: Te[e],
               fontFamily: "var(--lucent-font-family-base)",
               color: "var(--lucent-text-primary)",
               background: "var(--lucent-surface-default)",
@@ -1355,28 +1355,28 @@ const xt = {
               appearance: "none",
               cursor: l ? "not-allowed" : "pointer",
               transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
-              ...u
+              ...d
             },
-            onMouseEnter: (d) => {
-              var g;
-              !l && d.currentTarget !== document.activeElement && (d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (g = f.onMouseEnter) == null || g.call(f, d);
+            onMouseEnter: (u) => {
+              var b;
+              !l && u.currentTarget !== document.activeElement && (u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (b = p.onMouseEnter) == null || b.call(p, u);
             },
-            onMouseLeave: (d) => {
-              var g;
-              !l && d.currentTarget !== document.activeElement && (d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (g = f.onMouseLeave) == null || g.call(f, d);
+            onMouseLeave: (u) => {
+              var b;
+              !l && u.currentTarget !== document.activeElement && (u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (b = p.onMouseLeave) == null || b.call(p, u);
             },
-            onFocus: (d) => {
-              var g;
-              d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", d.currentTarget.style.boxShadow = `0 0 0 3px ${c ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (g = f.onFocus) == null || g.call(f, d);
+            onFocus: (u) => {
+              var b;
+              u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", u.currentTarget.style.boxShadow = `0 0 0 3px ${c ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (b = p.onFocus) == null || b.call(p, u);
             },
-            onBlur: (d) => {
-              var g;
-              d.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", d.currentTarget.style.boxShadow = "none", (g = f.onBlur) == null || g.call(f, d);
+            onBlur: (u) => {
+              var b;
+              u.currentTarget.style.borderColor = c ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", u.currentTarget.style.boxShadow = "none", (b = p.onBlur) == null || b.call(p, u);
             },
-            ...f,
+            ...p,
             children: [
               i && /* @__PURE__ */ n("option", { value: "", disabled: !0, children: i }),
-              t.map((d) => /* @__PURE__ */ n("option", { value: d.value, disabled: d.disabled, children: d.label }, d.value))
+              t.map((u) => /* @__PURE__ */ n("option", { value: u.value, disabled: u.disabled, children: u.label }, u.value))
             ]
           }
         ),
@@ -1399,7 +1399,7 @@ const xt = {
       c && /* @__PURE__ */ n(
         "span",
         {
-          id: `${m}-error`,
+          id: `${h}-error`,
           role: "alert",
           style: {
             fontSize: "var(--lucent-font-size-sm)",
@@ -1412,7 +1412,7 @@ const xt = {
       !c && r && /* @__PURE__ */ n(
         "span",
         {
-          id: `${m}-helper`,
+          id: `${h}-helper`,
           style: {
             fontSize: "var(--lucent-font-size-sm)",
             color: "var(--lucent-text-secondary)",
@@ -1424,8 +1424,8 @@ const xt = {
     ] });
   }
 );
-Te.displayName = "Select";
-const wt = {
+Ce.displayName = "Select";
+const Tt = {
   id: "select",
   name: "Select",
   tier: "atom",
@@ -1523,20 +1523,20 @@ const wt = {
       "Escape — closes the list"
     ]
   }
-}, Ce = {
+}, Ie = {
   neutral: { bg: "var(--lucent-bg-muted)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)", dismissHover: "var(--lucent-border-strong)" },
   accent: { bg: "var(--lucent-accent-subtle)", color: "var(--lucent-accent-active)", border: "var(--lucent-accent-subtle)", dismissHover: "var(--lucent-accent-default)" },
   success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)", dismissHover: "var(--lucent-success-default)" },
   warning: { bg: "var(--lucent-warning-subtle)", color: "var(--lucent-warning-text)", border: "var(--lucent-warning-subtle)", dismissHover: "var(--lucent-warning-default)" },
   danger: { bg: "var(--lucent-danger-subtle)", color: "var(--lucent-danger-text)", border: "var(--lucent-danger-subtle)", dismissHover: "var(--lucent-danger-default)" },
   info: { bg: "var(--lucent-info-subtle)", color: "var(--lucent-info-text)", border: "var(--lucent-info-subtle)", dismissHover: "var(--lucent-info-default)" }
-}, Ie = {
+}, ze = {
   sm: { fontSize: "var(--lucent-font-size-xs)", height: "20px", padding: "0 var(--lucent-space-2)", iconSize: 10, gap: "var(--lucent-space-1)" },
   md: { fontSize: "var(--lucent-font-size-sm)", height: "24px", padding: "0 var(--lucent-space-2)", iconSize: 12, gap: "var(--lucent-space-1)" }
 };
-function kt({ children: t, variant: e = "neutral", size: a = "md", onDismiss: r, disabled: o }) {
-  const i = Ce[e], l = Ie[a];
-  return /* @__PURE__ */ h(
+function Ct({ children: t, variant: e = "neutral", size: a = "md", onDismiss: r, disabled: o }) {
+  const i = Ie[e], l = ze[a];
+  return /* @__PURE__ */ m(
     "span",
     {
       style: {
@@ -1594,7 +1594,7 @@ function kt({ children: t, variant: e = "neutral", size: a = "md", onDismiss: r,
     }
   );
 }
-const St = {
+const It = {
   id: "tag",
   name: "Tag",
   tier: "atom",
@@ -1651,64 +1651,64 @@ const St = {
     notes: 'The dismiss button has aria-label="Dismiss" and is keyboard-focusable.',
     keyboardInteractions: ["Enter / Space — activates the dismiss button when focused"]
   }
-}, x = 5, ze = {
-  top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: x + 3 },
-  bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: x + 3 },
-  left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: x + 3 },
-  right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: x + 3 }
-}, Me = {
+}, S = 5, Me = {
+  top: { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: S + 3 },
+  bottom: { top: "100%", left: "50%", transform: "translateX(-50%)", marginTop: S + 3 },
+  left: { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: S + 3 },
+  right: { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: S + 3 }
+}, qe = {
   top: {
-    bottom: -x,
+    bottom: -S,
     left: "50%",
     transform: "translateX(-50%)",
-    borderWidth: `${x}px ${x}px 0 ${x}px`,
+    borderWidth: `${S}px ${S}px 0 ${S}px`,
     borderColor: "var(--lucent-text-primary) transparent transparent transparent"
   },
   bottom: {
-    top: -x,
+    top: -S,
     left: "50%",
     transform: "translateX(-50%)",
-    borderWidth: `0 ${x}px ${x}px ${x}px`,
+    borderWidth: `0 ${S}px ${S}px ${S}px`,
     borderColor: "transparent transparent var(--lucent-text-primary) transparent"
   },
   left: {
-    right: -x,
+    right: -S,
     top: "50%",
     transform: "translateY(-50%)",
-    borderWidth: `${x}px 0 ${x}px ${x}px`,
+    borderWidth: `${S}px 0 ${S}px ${S}px`,
     borderColor: "transparent transparent transparent var(--lucent-text-primary)"
   },
   right: {
-    left: -x,
+    left: -S,
     top: "50%",
     transform: "translateY(-50%)",
-    borderWidth: `${x}px ${x}px ${x}px 0`,
+    borderWidth: `${S}px ${S}px ${S}px 0`,
     borderColor: "transparent var(--lucent-text-primary) transparent transparent"
   }
 };
-function Tt({ content: t, children: e, placement: a = "top", delay: r = 300 }) {
-  const [o, i] = C(!1), l = M(null), s = () => {
+function zt({ content: t, children: e, placement: a = "top", delay: r = 300 }) {
+  const [o, i] = z(!1), l = M(null), s = () => {
     l.current = setTimeout(() => i(!0), r);
-  }, u = () => {
+  }, d = () => {
     l.current && clearTimeout(l.current), i(!1);
   };
-  return t ? /* @__PURE__ */ h(
+  return t ? /* @__PURE__ */ m(
     "span",
     {
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: s,
-      onMouseLeave: u,
+      onMouseLeave: d,
       onFocus: s,
-      onBlur: u,
+      onBlur: d,
       children: [
         e,
-        o && /* @__PURE__ */ h(
+        o && /* @__PURE__ */ m(
           "span",
           {
             role: "tooltip",
             style: {
               position: "absolute",
-              ...ze[a],
+              ...Me[a],
               background: "var(--lucent-text-primary)",
               color: "var(--lucent-bg-base)",
               padding: "5px 10px",
@@ -1733,7 +1733,7 @@ function Tt({ content: t, children: e, placement: a = "top", delay: r = 300 }) {
                     width: 0,
                     height: 0,
                     borderStyle: "solid",
-                    ...Me[a]
+                    ...qe[a]
                   }
                 }
               )
@@ -1744,7 +1744,7 @@ function Tt({ content: t, children: e, placement: a = "top", delay: r = 300 }) {
     }
   ) : /* @__PURE__ */ n(A, { children: e });
 }
-const Ct = {
+const Mt = {
   id: "tooltip",
   name: "Tooltip",
   tier: "atom",
@@ -1793,15 +1793,15 @@ const Ct = {
     ariaAttributes: ['role="tooltip"'],
     notes: 'The tooltip is shown on both hover and focus, making it accessible to keyboard users. Content is exposed via role="tooltip".'
   }
-}, qe = {
+}, Ee = {
   xs: 12,
   sm: 14,
   md: 16,
   lg: 20,
   xl: 24
 };
-function It({ children: t, size: e = "md", label: a, color: r, style: o }) {
-  const i = qe[e];
+function qt({ children: t, size: e = "md", label: a, color: r, style: o }) {
+  const i = Ee[e];
   return /* @__PURE__ */ n(
     "span",
     {
@@ -1822,7 +1822,7 @@ function It({ children: t, size: e = "md", label: a, color: r, style: o }) {
     }
   );
 }
-const zt = {
+const Et = {
   id: "icon",
   name: "Icon",
   tier: "atom",
@@ -1870,7 +1870,7 @@ const zt = {
     ariaAttributes: ["aria-label", "aria-hidden"],
     notes: 'aria-hidden="true" is applied automatically when no label is given, hiding the icon from screen readers.'
   }
-}, Ee = {
+}, Ae = {
   primary: "var(--lucent-text-primary)",
   secondary: "var(--lucent-text-secondary)",
   disabled: "var(--lucent-text-disabled)",
@@ -1880,7 +1880,7 @@ const zt = {
   warning: "var(--lucent-warning-text)",
   danger: "var(--lucent-danger-text)",
   info: "var(--lucent-info-text)"
-}, Ae = {
+}, Fe = {
   xs: "var(--lucent-font-size-xs)",
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
@@ -1888,21 +1888,21 @@ const zt = {
   xl: "var(--lucent-font-size-xl)",
   "2xl": "var(--lucent-font-size-2xl)",
   "3xl": "var(--lucent-font-size-3xl)"
-}, Fe = {
+}, Re = {
   regular: "var(--lucent-font-weight-regular)",
   medium: "var(--lucent-font-weight-medium)",
   semibold: "var(--lucent-font-weight-semibold)",
   bold: "var(--lucent-font-weight-bold)"
-}, Ne = {
+}, Be = {
   tight: "var(--lucent-line-height-tight)",
   base: "var(--lucent-line-height-base)",
   relaxed: "var(--lucent-line-height-relaxed)"
-}, Re = {
+}, Ne = {
   base: "var(--lucent-font-family-base)",
   mono: "var(--lucent-font-family-mono)",
   display: "var(--lucent-font-family-display)"
 };
-function z({
+function E({
   as: t = "p",
   size: e = "md",
   weight: a = "regular",
@@ -1911,28 +1911,28 @@ function z({
   lineHeight: i = "base",
   family: l = "base",
   truncate: s = !1,
-  children: u,
-  style: f,
-  ...p
+  children: d,
+  style: p,
+  ...f
 }) {
-  const m = {
-    fontSize: Ae[e],
-    fontWeight: Fe[a],
-    color: Ee[r],
+  const h = {
+    fontSize: Fe[e],
+    fontWeight: Re[a],
+    color: Ae[r],
     textAlign: o,
-    lineHeight: Ne[i],
-    fontFamily: Re[l],
+    lineHeight: Be[i],
+    fontFamily: Ne[l],
     margin: 0,
     ...s && {
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
-    ...f
+    ...p
   };
-  return /* @__PURE__ */ n(t, { style: m, ...p, children: u });
+  return /* @__PURE__ */ n(t, { style: h, ...f, children: d });
 }
-const Mt = {
+const At = {
   id: "text",
   name: "Text",
   tier: "atom",
@@ -2030,7 +2030,55 @@ const Mt = {
     notes: 'The rendered element determines the implicit ARIA role. Use heading elements (h1–h6) for document headings so screen readers can navigate the page structure. Use `as="label"` with `htmlFor` to associate labels with form controls. Decorative text needs no additional ARIA.'
   }
 };
-function qt({
+function Ft({
+  children: t,
+  href: e,
+  isActive: a = !1,
+  icon: r,
+  disabled: o = !1,
+  onClick: i,
+  as: l,
+  style: s
+}) {
+  return /* @__PURE__ */ m(
+    l ?? "a",
+    {
+      href: o ? void 0 : e,
+      onClick: o ? void 0 : i,
+      "aria-current": a ? "page" : void 0,
+      "aria-disabled": o || void 0,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--lucent-space-2)",
+        padding: "var(--lucent-space-2) var(--lucent-space-3) var(--lucent-space-2) var(--lucent-space-4)",
+        borderRadius: "var(--lucent-radius-md)",
+        background: o ? "transparent" : a ? "var(--lucent-accent-default)" : "transparent",
+        color: o ? "var(--lucent-text-disabled)" : a ? "var(--lucent-text-on-accent)" : "var(--lucent-text-secondary)",
+        fontFamily: "var(--lucent-font-family-base)",
+        fontSize: "var(--lucent-font-size-md)",
+        fontWeight: a ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+        textDecoration: "none",
+        cursor: o ? "not-allowed" : "pointer",
+        transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)",
+        userSelect: "none",
+        boxSizing: "border-box",
+        ...s
+      },
+      onMouseEnter: (p) => {
+        !o && !a && (p.currentTarget.style.background = "var(--lucent-bg-muted)");
+      },
+      onMouseLeave: (p) => {
+        !o && !a && (p.currentTarget.style.background = "transparent");
+      },
+      children: [
+        r != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, color: "inherit" }, children: r }),
+        t
+      ]
+    }
+  );
+}
+function Rt({
   label: t,
   htmlFor: e,
   required: a = !1,
@@ -2039,17 +2087,17 @@ function qt({
   children: i,
   style: l
 }) {
-  const s = o ?? r, u = o ? "danger" : "secondary";
-  return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
-    t && /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
-      /* @__PURE__ */ n(z, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...e !== void 0 && { htmlFor: e }, children: t }),
-      a && /* @__PURE__ */ n(z, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
+  const s = o ?? r, d = o ? "danger" : "secondary";
+  return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
+    t && /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
+      /* @__PURE__ */ n(E, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...e !== void 0 && { htmlFor: e }, children: t }),
+      a && /* @__PURE__ */ n(E, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
     ] }),
     i,
-    s && /* @__PURE__ */ n(z, { size: "xs", color: u, lineHeight: "tight", children: s })
+    s && /* @__PURE__ */ n(E, { size: "xs", color: d, lineHeight: "tight", children: s })
   ] });
 }
-const Et = {
+const Bt = {
   id: "form-field",
   name: "FormField",
   tier: "molecule",
@@ -2135,11 +2183,11 @@ const Et = {
     ariaAttributes: ["aria-required", "aria-describedby"],
     notes: 'Link the wrapped control to an error message using aria-describedby on the control and a matching id on the error element for full screen reader support. The required asterisk is aria-hidden; set aria-required="true" on the control itself.'
   }
-}, Be = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+}, $e = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
   /* @__PURE__ */ n("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ n("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-] }), $e = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
-function At({
+] }), De = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+function Nt({
   value: t,
   onChange: e,
   placeholder: a = "Search…",
@@ -2148,22 +2196,22 @@ function At({
   isLoading: i = !1,
   disabled: l = !1,
   id: s,
-  style: u
+  style: d
 }) {
-  const [f, p] = C(!1), [m, c] = C(null), d = M(null), g = f && r.length > 0, b = () => {
+  const [p, f] = z(!1), [h, c] = z(null), u = M(null), b = p && r.length > 0, g = () => {
     e("");
-  }, y = (S) => {
-    o == null || o(S), p(!1);
+  }, x = (y) => {
+    o == null || o(y), f(!1);
+  }, w = () => {
+    u.current = setTimeout(() => f(!1), 150);
   }, v = () => {
-    d.current = setTimeout(() => p(!1), 150);
-  }, k = () => {
-    d.current && clearTimeout(d.current), p(!0);
-  }, T = i ? /* @__PURE__ */ n(fe, { size: "sm" }) : t ? /* @__PURE__ */ n(
+    u.current && clearTimeout(u.current), f(!0);
+  }, k = i ? /* @__PURE__ */ n(me, { size: "sm" }) : t ? /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       "aria-label": "Clear search",
-      onClick: b,
+      onClick: g,
       style: {
         display: "flex",
         alignItems: "center",
@@ -2174,32 +2222,32 @@ function At({
         borderRadius: "var(--lucent-radius-sm)",
         color: "var(--lucent-text-secondary)"
       },
-      onMouseEnter: (S) => {
-        S.currentTarget.style.color = "var(--lucent-text-primary)";
+      onMouseEnter: (y) => {
+        y.currentTarget.style.color = "var(--lucent-text-primary)";
       },
-      onMouseLeave: (S) => {
-        S.currentTarget.style.color = "var(--lucent-text-secondary)";
+      onMouseLeave: (y) => {
+        y.currentTarget.style.color = "var(--lucent-text-secondary)";
       },
-      children: /* @__PURE__ */ n($e, {})
+      children: /* @__PURE__ */ n(De, {})
     }
   ) : null;
-  return /* @__PURE__ */ h("div", { style: { position: "relative", ...u }, children: [
+  return /* @__PURE__ */ m("div", { style: { position: "relative", ...d }, children: [
     /* @__PURE__ */ n(
-      V,
+      O,
       {
         id: s,
         type: "search",
         value: t,
-        onChange: (S) => e(S.target.value),
+        onChange: (y) => e(y.target.value),
         placeholder: a,
         disabled: l,
-        leftElement: /* @__PURE__ */ n(Be, {}),
-        rightElement: T ?? void 0,
-        onFocus: k,
-        onBlur: v
+        leftElement: /* @__PURE__ */ n($e, {}),
+        rightElement: k ?? void 0,
+        onFocus: v,
+        onBlur: w
       }
     ),
-    g && /* @__PURE__ */ n(
+    b && /* @__PURE__ */ n(
       "div",
       {
         role: "listbox",
@@ -2215,29 +2263,29 @@ function At({
           boxShadow: "var(--lucent-shadow-md)",
           overflow: "hidden"
         },
-        children: r.map((S, q) => /* @__PURE__ */ n(
+        children: r.map((y, I) => /* @__PURE__ */ n(
           "div",
           {
             role: "option",
             "aria-selected": !1,
-            onMouseDown: () => y(S),
-            onMouseEnter: () => c(q),
+            onMouseDown: () => x(y),
+            onMouseEnter: () => c(I),
             onMouseLeave: () => c(null),
             style: {
               padding: "var(--lucent-space-2) var(--lucent-space-3)",
               cursor: "pointer",
-              background: m === q ? "var(--lucent-bg-subtle)" : "transparent",
+              background: h === I ? "var(--lucent-bg-subtle)" : "transparent",
               transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
             },
-            children: /* @__PURE__ */ n(z, { as: "span", size: "md", children: S.label })
+            children: /* @__PURE__ */ n(E, { as: "span", size: "md", children: y.label })
           },
-          S.id
+          y.id
         ))
       }
     )
   ] });
 }
-const Ft = {
+const $t = {
   id: "search-input",
   name: "SearchInput",
   tier: "molecule",
@@ -2333,23 +2381,23 @@ const [results, setResults] = useState([]);
     keyboardInteractions: ["Enter to select focused result", "Escape to close dropdown"],
     notes: 'The results list uses role="listbox" with role="option" items. For full keyboard navigation (arrow keys to move between results), wire up onKeyDown on the Input and manage an activeIndex state.'
   }
-}, De = {
+}, Le = {
   none: "0",
   sm: "var(--lucent-space-3)",
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-6)"
-}, Le = {
+}, Ve = {
   none: "var(--lucent-shadow-none)",
   sm: "var(--lucent-shadow-sm)",
   md: "var(--lucent-shadow-md)",
   lg: "var(--lucent-shadow-lg)"
-}, Ve = {
+}, We = {
   none: "var(--lucent-radius-none)",
   sm: "var(--lucent-radius-sm)",
   md: "var(--lucent-radius-md)",
   lg: "var(--lucent-radius-lg)"
 };
-function Nt({
+function Dt({
   header: t,
   footer: e,
   children: a,
@@ -2358,8 +2406,8 @@ function Nt({
   radius: i = "md",
   style: l
 }) {
-  const s = De[r], u = Ve[i];
-  return /* @__PURE__ */ h(
+  const s = Le[r], d = We[i];
+  return /* @__PURE__ */ m(
     "div",
     {
       style: {
@@ -2367,8 +2415,8 @@ function Nt({
         flexDirection: "column",
         background: "var(--lucent-surface-default)",
         border: "1px solid var(--lucent-border-default)",
-        borderRadius: u,
-        boxShadow: Le[o],
+        borderRadius: d,
+        boxShadow: Ve[o],
         overflow: "hidden",
         boxSizing: "border-box",
         ...l
@@ -2399,7 +2447,7 @@ function Nt({
     }
   );
 }
-const Rt = {
+const Lt = {
   id: "card",
   name: "Card",
   tier: "molecule",
@@ -2484,30 +2532,30 @@ const Rt = {
   accessibility: {
     notes: "Card has no implicit ARIA role. If the card represents a landmark, wrap it in a <section> or <article> and provide an aria-label. For interactive cards (clickable), make the wrapper a <button> or <a> and ensure focus styles are visible."
   }
-}, We = {
+}, Pe = {
   info: { bg: "var(--lucent-info-subtle)", border: "var(--lucent-info-default)", iconColor: "var(--lucent-info-text)", textColor: "info" },
   success: { bg: "var(--lucent-success-subtle)", border: "var(--lucent-success-default)", iconColor: "var(--lucent-success-text)", textColor: "success" },
   warning: { bg: "var(--lucent-warning-subtle)", border: "var(--lucent-warning-default)", iconColor: "var(--lucent-warning-text)", textColor: "warning" },
   danger: { bg: "var(--lucent-danger-subtle)", border: "var(--lucent-danger-default)", iconColor: "var(--lucent-danger-text)", textColor: "danger" }
-}, Pe = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+}, Oe = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
   /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ n("path", { d: "M8 5.5V8.5M8 10.5V11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-] }), Oe = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+] }), He = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
   /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ n("path", { d: "M5 8L7 10L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), He = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+] }), Ge = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
   /* @__PURE__ */ n("path", { d: "M8 2L14.5 13H1.5L8 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
   /* @__PURE__ */ n("path", { d: "M8 6V9M8 11V11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-] }), Ge = () => /* @__PURE__ */ h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+] }), je = () => /* @__PURE__ */ m("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
   /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ n("path", { d: "M5.5 5.5L10.5 10.5M10.5 5.5L5.5 10.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
 ] }), Ue = {
-  info: /* @__PURE__ */ n(Pe, {}),
-  success: /* @__PURE__ */ n(Oe, {}),
-  warning: /* @__PURE__ */ n(He, {}),
-  danger: /* @__PURE__ */ n(Ge, {})
-}, je = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
-function Bt({
+  info: /* @__PURE__ */ n(Oe, {}),
+  success: /* @__PURE__ */ n(He, {}),
+  warning: /* @__PURE__ */ n(Ge, {}),
+  danger: /* @__PURE__ */ n(je, {})
+}, _e = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+function Vt({
   variant: t = "info",
   title: e,
   children: a,
@@ -2515,8 +2563,8 @@ function Bt({
   icon: o,
   style: i
 }) {
-  const l = We[t], s = o ?? Ue[t];
-  return /* @__PURE__ */ h(
+  const l = Pe[t], s = o ?? Ue[t];
+  return /* @__PURE__ */ m(
     "div",
     {
       role: "alert",
@@ -2545,9 +2593,9 @@ function Bt({
             children: s
           }
         ),
-        /* @__PURE__ */ h("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
-          e && /* @__PURE__ */ n(z, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: e }),
-          a && /* @__PURE__ */ n(z, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: a })
+        /* @__PURE__ */ m("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
+          e && /* @__PURE__ */ n(E, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: e }),
+          a && /* @__PURE__ */ n(E, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: a })
         ] }),
         r && /* @__PURE__ */ n(
           "button",
@@ -2567,20 +2615,20 @@ function Bt({
               color: l.iconColor,
               opacity: 0.7
             },
-            onMouseEnter: (u) => {
-              u.currentTarget.style.opacity = "1";
+            onMouseEnter: (d) => {
+              d.currentTarget.style.opacity = "1";
             },
-            onMouseLeave: (u) => {
-              u.currentTarget.style.opacity = "0.7";
+            onMouseLeave: (d) => {
+              d.currentTarget.style.opacity = "0.7";
             },
-            children: /* @__PURE__ */ n(je, {})
+            children: /* @__PURE__ */ n(_e, {})
           }
         )
       ]
     }
   );
 }
-const $t = {
+const Wt = {
   id: "alert",
   name: "Alert",
   tier: "molecule",
@@ -2655,14 +2703,14 @@ const $t = {
     notes: 'role="alert" causes screen readers to announce the content immediately when rendered. For non-urgent status messages, consider using role="status" instead by overriding via style/wrapper.'
   }
 };
-function Dt({
+function Pt({
   illustration: t,
   title: e,
   description: a,
   action: r,
   style: o
 }) {
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ m(
     "div",
     {
       style: {
@@ -2689,16 +2737,16 @@ function Dt({
             children: t
           }
         ),
-        /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
-          /* @__PURE__ */ n(z, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: e }),
-          a && /* @__PURE__ */ n(z, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
+        /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: [
+          /* @__PURE__ */ n(E, { as: "h3", size: "lg", weight: "semibold", align: "center", lineHeight: "tight", children: e }),
+          a && /* @__PURE__ */ n(E, { size: "sm", color: "secondary", align: "center", lineHeight: "relaxed", children: a })
         ] }),
         r != null && /* @__PURE__ */ n("div", { children: r })
       ]
     }
   );
 }
-const Lt = {
+const Ot = {
   id: "empty-state",
   name: "EmptyState",
   tier: "molecule",
@@ -2769,16 +2817,16 @@ const Lt = {
   accessibility: {
     notes: "The title renders as an h3 by default. If EmptyState appears inside a section with its own heading hierarchy, override by passing a Text component as part of a custom layout. Ensure the action element has a descriptive label for screen readers."
   }
-}, _e = {
+}, Ke = {
   text: "1em",
   circle: 40,
   rectangle: 40
-}, Ke = {
+}, Ye = {
   text: "var(--lucent-radius-sm)",
   circle: "var(--lucent-radius-full)",
   rectangle: "var(--lucent-radius-md)"
 };
-function $({
+function D({
   width: t,
   height: e,
   radius: a,
@@ -2802,7 +2850,7 @@ function $({
     }
   );
 }
-function Vt({
+function Ht({
   variant: t = "rectangle",
   width: e = "100%",
   height: a,
@@ -2811,39 +2859,39 @@ function Vt({
   radius: i,
   style: l
 }) {
-  const s = a ?? _e[t], u = i ?? Ke[t], f = o ? /* @__PURE__ */ n("style", { children: `
+  const s = a ?? Ke[t], d = i ?? Ye[t], p = o ? /* @__PURE__ */ n("style", { children: `
       @keyframes lucent-skeleton-shimmer {
         0%   { background-position: 200% 0; }
         100% { background-position: -200% 0; }
       }
     ` }) : null;
-  return t === "text" && r > 1 ? /* @__PURE__ */ h(A, { children: [
-    f,
-    /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: r }).map((p, m) => /* @__PURE__ */ n(
-      $,
+  return t === "text" && r > 1 ? /* @__PURE__ */ m(A, { children: [
+    p,
+    /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: r }).map((f, h) => /* @__PURE__ */ n(
+      D,
       {
-        width: m === r - 1 ? "70%" : e,
+        width: h === r - 1 ? "70%" : e,
         height: s,
-        radius: u,
+        radius: d,
         animate: o
       },
-      m
+      h
     )) })
-  ] }) : /* @__PURE__ */ h(A, { children: [
-    f,
+  ] }) : /* @__PURE__ */ m(A, { children: [
+    p,
     /* @__PURE__ */ n(
-      $,
+      D,
       {
         width: t === "circle" ? a ?? 40 : e,
         height: s,
-        radius: u,
+        radius: d,
         animate: o,
         ...l !== void 0 && { style: l }
       }
     )
   ] });
 }
-const Wt = {
+const Gt = {
   id: "skeleton",
   name: "Skeleton",
   tier: "molecule",
@@ -2929,7 +2977,356 @@ const Wt = {
     ariaAttributes: ["aria-busy", "aria-label"],
     notes: 'Wrap loading regions with aria-busy="true" on the container so screen readers know content is loading. Individual Skeleton elements are presentational and do not need ARIA attributes themselves.'
   }
-}, P = {
+};
+function jt({ items: t, separator: e = "/", style: a }) {
+  return /* @__PURE__ */ n("nav", { "aria-label": "Breadcrumb", style: a, children: /* @__PURE__ */ n(
+    "ol",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        flexWrap: "wrap",
+        gap: "var(--lucent-space-1)",
+        listStyle: "none",
+        margin: 0,
+        padding: 0,
+        fontFamily: "var(--lucent-font-family-base)"
+      },
+      children: t.map((r, o) => {
+        const i = o === t.length - 1;
+        return /* @__PURE__ */ m("li", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
+          i ? /* @__PURE__ */ n(E, { size: "sm", color: "primary", as: "span", "aria-current": "page", children: r.label }) : r.href != null ? /* @__PURE__ */ n(
+            "a",
+            {
+              href: r.href,
+              onClick: r.onClick,
+              style: {
+                fontSize: "var(--lucent-font-size-sm)",
+                color: "var(--lucent-text-secondary)",
+                textDecoration: "none",
+                fontFamily: "var(--lucent-font-family-base)",
+                transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)"
+              },
+              onMouseEnter: (l) => {
+                l.currentTarget.style.color = "var(--lucent-text-primary)";
+              },
+              onMouseLeave: (l) => {
+                l.currentTarget.style.color = "var(--lucent-text-secondary)";
+              },
+              children: r.label
+            }
+          ) : /* @__PURE__ */ n(
+            "button",
+            {
+              onClick: r.onClick,
+              style: {
+                fontSize: "var(--lucent-font-size-sm)",
+                color: "var(--lucent-text-secondary)",
+                fontFamily: "var(--lucent-font-family-base)",
+                background: "none",
+                border: "none",
+                padding: 0,
+                cursor: "pointer",
+                transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)"
+              },
+              onMouseEnter: (l) => {
+                l.currentTarget.style.color = "var(--lucent-text-primary)";
+              },
+              onMouseLeave: (l) => {
+                l.currentTarget.style.color = "var(--lucent-text-secondary)";
+              },
+              children: r.label
+            }
+          ),
+          !i && /* @__PURE__ */ n("span", { "aria-hidden": !0, style: { color: "var(--lucent-text-disabled)", fontSize: "var(--lucent-font-size-sm)", userSelect: "none" }, children: e })
+        ] }, o);
+      })
+    }
+  ) });
+}
+function Ut({ tabs: t, defaultValue: e, value: a, onChange: r, style: o }) {
+  var w;
+  const i = a !== void 0, [l, s] = z(e ?? ((w = t[0]) == null ? void 0 : w.value) ?? ""), d = i ? a : l, [p, f] = z(null), h = M([]), [c, u] = z(null), b = M(!1);
+  P(() => {
+    const v = t.findIndex((y) => y.value === d), k = h.current[v];
+    k && (u({ left: k.offsetLeft, width: k.offsetWidth, animate: b.current }), b.current = !0);
+  }, [d, t]);
+  const g = (v) => {
+    i || s(v), r == null || r(v);
+  }, x = (v, k) => {
+    var R;
+    const y = t.map((B, q) => B.disabled ? -1 : q).filter((B) => B !== -1), I = y.indexOf(k);
+    let T = -1;
+    v.key === "ArrowRight" && (T = y[(I + 1) % y.length] ?? -1), v.key === "ArrowLeft" && (T = y[(I - 1 + y.length) % y.length] ?? -1), v.key === "Home" && (T = y[0] ?? -1), v.key === "End" && (T = y[y.length - 1] ?? -1), T !== -1 && (v.preventDefault(), (R = h.current[T]) == null || R.focus(), g(t[T].value));
+  };
+  return /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", ...o }, children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        role: "tablist",
+        style: {
+          position: "relative",
+          display: "flex",
+          borderBottom: "1px solid var(--lucent-border-default)"
+        },
+        children: [
+          t.map((v, k) => {
+            const y = v.value === d, I = v.disabled ?? !1;
+            return /* @__PURE__ */ n(
+              "button",
+              {
+                ref: (T) => {
+                  h.current[k] = T;
+                },
+                role: "tab",
+                "aria-selected": y,
+                "aria-controls": `lucent-tabpanel-${v.value}`,
+                id: `lucent-tab-${v.value}`,
+                disabled: I,
+                tabIndex: y ? 0 : -1,
+                onClick: () => {
+                  I || g(v.value);
+                },
+                onKeyDown: (T) => x(T, k),
+                onMouseEnter: () => {
+                  I || f(k);
+                },
+                onMouseLeave: () => f(null),
+                style: {
+                  padding: "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
+                  background: "none",
+                  border: "none",
+                  cursor: I ? "not-allowed" : "pointer",
+                  fontFamily: "var(--lucent-font-family-base)",
+                  fontSize: "var(--lucent-font-size-md)",
+                  fontWeight: y ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                  color: I ? "var(--lucent-text-disabled)" : y ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                  transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
+                  whiteSpace: "nowrap",
+                  outline: "none"
+                },
+                children: /* @__PURE__ */ n("span", { style: {
+                  display: "block",
+                  padding: "var(--lucent-space-1) var(--lucent-space-3)",
+                  borderRadius: "var(--lucent-radius-md)",
+                  background: p === k && !y ? "var(--lucent-bg-subtle)" : "transparent",
+                  transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
+                }, children: v.label })
+              },
+              v.value
+            );
+          }),
+          c != null && /* @__PURE__ */ n(
+            "span",
+            {
+              "aria-hidden": !0,
+              style: {
+                position: "absolute",
+                bottom: 0,
+                left: c.left,
+                width: c.width,
+                height: 2,
+                background: "var(--lucent-accent-default)",
+                borderRadius: "var(--lucent-radius-sm)",
+                transition: c.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    t.map((v) => /* @__PURE__ */ n(
+      "div",
+      {
+        role: "tabpanel",
+        id: `lucent-tabpanel-${v.value}`,
+        "aria-labelledby": `lucent-tab-${v.value}`,
+        hidden: v.value !== d,
+        style: { padding: "var(--lucent-space-4) 0", outline: "none" },
+        tabIndex: 0,
+        children: v.content
+      },
+      v.value
+    ))
+  ] });
+}
+const Xe = `
+@keyframes lucent-collapsible-open {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+`;
+function _t({ trigger: t, children: e, defaultOpen: a = !1, open: r, onOpenChange: o, style: i }) {
+  const l = r !== void 0, [s, d] = z(a), p = l ? r : s, f = M(null), [h, c] = z(p ? void 0 : 0), u = M(!1);
+  F(() => {
+    const g = f.current;
+    if (g)
+      if (p) {
+        const x = g.scrollHeight;
+        c(x), u.current = !0;
+        const w = setTimeout(() => {
+          c(void 0), u.current = !1;
+        }, 220);
+        return () => clearTimeout(w);
+      } else
+        c(g.scrollHeight), g.getBoundingClientRect(), c(0);
+  }, [p]);
+  const b = () => {
+    const g = !p;
+    l || d(g), o == null || o(g);
+  };
+  return /* @__PURE__ */ m(A, { children: [
+    /* @__PURE__ */ n("style", { children: Xe }),
+    /* @__PURE__ */ m("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...i }, children: [
+      /* @__PURE__ */ m(
+        "button",
+        {
+          onClick: b,
+          "aria-expanded": p,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+            background: "none",
+            border: "none",
+            padding: "var(--lucent-space-3) var(--lucent-space-4)",
+            cursor: "pointer",
+            textAlign: "left",
+            outline: "none",
+            fontFamily: "inherit",
+            fontSize: "inherit"
+          },
+          children: [
+            /* @__PURE__ */ n("span", { style: { flex: 1 }, children: t }),
+            /* @__PURE__ */ n(Je, { open: p })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          ref: f,
+          "aria-hidden": !p,
+          style: {
+            overflow: "hidden",
+            height: h !== void 0 ? h : "auto",
+            transition: "height 200ms var(--lucent-easing-default)"
+          },
+          children: /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-3)",
+                animation: p ? "lucent-collapsible-open 200ms var(--lucent-easing-default) forwards" : void 0
+              },
+              children: e
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function Je({ open: t }) {
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": !0,
+      style: {
+        flexShrink: 0,
+        color: "var(--lucent-text-secondary)",
+        transform: t ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform 200ms var(--lucent-easing-default)"
+      },
+      children: /* @__PURE__ */ n("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function L(t) {
+  return typeof t == "number" ? `${t}px` : t;
+}
+function Kt({
+  children: t,
+  header: e,
+  sidebar: a,
+  sidebarWidth: r = 240,
+  headerHeight: o = 48,
+  sidebarCollapsed: i = !1,
+  mainStyle: l,
+  style: s
+}) {
+  const d = L(o), p = L(r);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        overflow: "hidden",
+        fontFamily: "var(--lucent-font-family-base)",
+        ...s
+      },
+      children: [
+        e != null && /* @__PURE__ */ n(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              height: d,
+              zIndex: 10,
+              background: "var(--lucent-surface-default)"
+            },
+            children: e
+          }
+        ),
+        /* @__PURE__ */ m("div", { style: { display: "flex", flex: 1, overflow: "hidden" }, children: [
+          a != null && /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                width: i ? 0 : p,
+                flexShrink: 0,
+                overflow: "hidden",
+                overflowY: i ? "hidden" : "auto",
+                background: "var(--lucent-surface-default)",
+                transition: "width 200ms var(--lucent-easing-default)"
+              },
+              children: a
+            }
+          ),
+          /* @__PURE__ */ n(
+            "main",
+            {
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                minWidth: 0,
+                margin: "0 var(--lucent-space-3) var(--lucent-space-3) 0",
+                border: "1px solid var(--lucent-border-default)",
+                borderRadius: "var(--lucent-radius-lg)",
+                boxShadow: "var(--lucent-shadow-sm)",
+                background: "var(--lucent-surface-default)",
+                ...l
+              },
+              children: t
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const G = {
   fontFamilyBase: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontFamilyMono: '"DM Mono", "Fira Code", "Cascadia Code", monospace',
   fontFamilyDisplay: '"Georama", "DM Sans", sans-serif',
@@ -2950,7 +3347,7 @@ const Wt = {
   letterSpacingTight: "-0.02em",
   letterSpacingBase: "0em",
   letterSpacingWide: "0.04em"
-}, O = {
+}, j = {
   space0: "0px",
   space1: "0.25rem",
   space2: "0.5rem",
@@ -2964,38 +3361,38 @@ const Wt = {
   space16: "4rem",
   space20: "5rem",
   space24: "6rem"
-}, H = {
+}, U = {
   radiusNone: "0px",
   radiusSm: "0.25rem",
   radiusMd: "0.375rem",
   radiusLg: "0.5rem",
   radiusXl: "0.75rem",
   radiusFull: "9999px"
-}, G = {
+}, _ = {
   durationFast: "100ms",
   durationBase: "200ms",
   durationSlow: "350ms",
   easingDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
   easingEmphasized: "cubic-bezier(0.2, 0, 0, 1)",
   easingDecelerate: "cubic-bezier(0, 0, 0.2, 1)"
-}, Xe = {
+}, Qe = {
   shadowNone: "none",
   shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
   shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
   shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
-}, Ye = {
+}, Ze = {
   shadowNone: "none",
   shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
   shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
   shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
   shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5)"
-}, U = {
-  ...P,
-  ...O,
-  ...H,
+}, K = {
   ...G,
-  ...Xe,
+  ...j,
+  ...U,
+  ..._,
+  ...Qe,
   // Backgrounds
   bgBase: "#ffffff",
   bgSubtle: "#f9fafb",
@@ -3038,12 +3435,12 @@ const Wt = {
   infoText: "#1d4ed8",
   // Focus
   focusRing: "#111827"
-}, Je = {
-  ...P,
-  ...O,
-  ...H,
+}, et = {
   ...G,
-  ...Ye,
+  ...j,
+  ...U,
+  ..._,
+  ...Ze,
   // Backgrounds
   bgBase: "#0b0d12",
   bgSubtle: "#111318",
@@ -3087,77 +3484,77 @@ const Wt = {
   // Focus
   focusRing: "#f9fafb"
 };
-function Qe(t) {
+function tt(t) {
   return "--lucent-" + t.replace(/([A-Z])/g, (e) => `-${e.toLowerCase()}`).replace(/([a-z])(\d)/g, (e, a, r) => `${a}-${r}`);
 }
-function Ze(t, e = ":root") {
-  const a = Object.entries(t).map(([r, o]) => `  ${Qe(r)}: ${o};`).join(`
+function nt(t, e = ":root") {
+  const a = Object.entries(t).map(([r, o]) => `  ${tt(r)}: ${o};`).join(`
 `);
   return `${e} {
 ${a}
 }`;
 }
-function et(t) {
+function at(t) {
   const e = parseInt(t.slice(1, 3), 16) / 255, a = parseInt(t.slice(3, 5), 16) / 255, r = parseInt(t.slice(5, 7), 16) / 255, o = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
   return 0.2126 * o(e) + 0.7152 * o(a) + 0.0722 * o(r);
 }
-function tt(t) {
-  return et(t) < 0.179 ? "#ffffff" : "#000000";
+function rt(t) {
+  return at(t) < 0.179 ? "#ffffff" : "#000000";
 }
-const j = L({
+const Y = W({
   theme: "light",
-  tokens: U
+  tokens: K
 });
-function Pt({
+function Yt({
   theme: t = "light",
   tokens: e,
   children: a
 }) {
-  const r = X().replace(/:/g, ""), o = t === "dark" ? Je : U, i = e ? { ...o, ...e } : o, l = {
+  const r = J().replace(/:/g, ""), o = t === "dark" ? et : K, i = e ? { ...o, ...e } : o, l = {
     ...i,
-    textOnAccent: (e == null ? void 0 : e.textOnAccent) ?? tt(i.accentDefault)
+    textOnAccent: (e == null ? void 0 : e.textOnAccent) ?? rt(i.accentDefault)
   }, s = `html { font-size: 13px; }
-` + Ze(l, ":root");
-  return Y(() => {
-    let u = document.getElementById(`lucent-tokens-${r}`);
-    return u || (u = document.createElement("style"), u.id = `lucent-tokens-${r}`, document.head.appendChild(u)), u.textContent = s, () => {
-      var f;
-      (f = document.getElementById(`lucent-tokens-${r}`)) == null || f.remove();
+` + nt(l, ":root");
+  return P(() => {
+    let d = document.getElementById(`lucent-tokens-${r}`);
+    return d || (d = document.createElement("style"), d.id = `lucent-tokens-${r}`, document.head.appendChild(d)), d.textContent = s, () => {
+      var p;
+      (p = document.getElementById(`lucent-tokens-${r}`)) == null || p.remove();
     };
-  }, [r, s]), /* @__PURE__ */ n(j.Provider, { value: { theme: t, tokens: l }, children: a });
+  }, [r, s]), /* @__PURE__ */ n(Y.Provider, { value: { theme: t, tokens: l }, children: a });
 }
-function Ot() {
-  return D(j);
+function Xt() {
+  return V(Y);
 }
-const Ht = {
+const Jt = {
   accentDefault: "#e9c96b",
   accentHover: "#ddb84e",
   accentActive: "#c9a33b",
   accentSubtle: "#fef9ec",
   focusRing: "#e9c96b"
 };
-function w(t, e) {
+function C(t, e) {
   return { field: t, message: e };
 }
-function nt(t) {
+function ot(t) {
   const e = [];
   if (typeof t != "object" || t === null)
-    return { valid: !1, errors: [w("manifest", "Must be a non-null object")] };
+    return { valid: !1, errors: [C("manifest", "Must be a non-null object")] };
   const a = t, r = ["id", "name", "description", "designIntent", "specVersion"];
   for (const i of r)
-    (typeof a[i] != "string" || a[i].trim() === "") && e.push(w(i, "Must be a non-empty string"));
-  typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && e.push(w("id", 'Must be kebab-case (e.g. "button", "form-field")'));
+    (typeof a[i] != "string" || a[i].trim() === "") && e.push(C(i, "Must be a non-empty string"));
+  typeof a.id == "string" && !/^[a-z][a-z0-9-]*$/.test(a.id) && e.push(C("id", 'Must be kebab-case (e.g. "button", "form-field")'));
   const o = ["atom", "molecule", "block", "flow", "overlay"];
-  return o.includes(a.tier) || e.push(w("tier", `Must be one of: ${o.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && e.push(w("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((i, l) => {
-    const s = i, u = `props[${l}]`;
-    (typeof s.name != "string" || s.name === "") && e.push(w(`${u}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && e.push(w(`${u}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && e.push(w(`${u}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && e.push(w(`${u}.description`, "Must be a non-empty string"));
-  }) : e.push(w("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? e.push(w("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((i, l) => {
-    const s = i, u = `usageExamples[${l}]`;
-    (typeof s.title != "string" || s.title === "") && e.push(w(`${u}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && e.push(w(`${u}.code`, "Must be a non-empty string"));
-  }) : e.push(w("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || e.push(w("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && e.push(w("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: e.length === 0, errors: e };
+  return o.includes(a.tier) || e.push(C("tier", `Must be one of: ${o.join(", ")}`)), (typeof a.domain != "string" || a.domain.trim() === "") && e.push(C("domain", "Must be a non-empty string")), Array.isArray(a.props) ? a.props.forEach((i, l) => {
+    const s = i, d = `props[${l}]`;
+    (typeof s.name != "string" || s.name === "") && e.push(C(`${d}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && e.push(C(`${d}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && e.push(C(`${d}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && e.push(C(`${d}.description`, "Must be a non-empty string"));
+  }) : e.push(C("props", "Must be an array")), Array.isArray(a.usageExamples) ? a.usageExamples.length === 0 ? e.push(C("usageExamples", "Must have at least one example")) : a.usageExamples.forEach((i, l) => {
+    const s = i, d = `usageExamples[${l}]`;
+    (typeof s.title != "string" || s.title === "") && e.push(C(`${d}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && e.push(C(`${d}.code`, "Must be a non-empty string"));
+  }) : e.push(C("usageExamples", "Must be an array")), Array.isArray(a.compositionGraph) || e.push(C("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof a.specVersion == "string" && !/^\d+\.\d+$/.test(a.specVersion) && e.push(C("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: e.length === 0, errors: e };
 }
-function Gt(t) {
-  const e = nt(t);
+function Qt(t) {
+  const e = ot(t);
   if (!e.valid) {
     const a = e.errors.map((r) => `  ${r.field}: ${r.message}`).join(`
 `);
@@ -3165,67 +3562,72 @@ function Gt(t) {
 ${a}`);
   }
 }
-function Ut(t) {
+function Zt(t) {
   if (typeof t != "object" || t === null) return !1;
   const e = t;
   return typeof e.name == "string" && typeof e.type == "string" && typeof e.required == "boolean" && typeof e.description == "string";
 }
-const jt = "0.1", _t = "0.1.0";
+const en = "1.0", tn = "0.1.0";
 export {
-  Bt as Alert,
-  $t as AlertManifest,
-  dt as Avatar,
-  ut as AvatarManifest,
-  lt as Badge,
-  ct as BadgeManifest,
-  Z as Button,
-  ot as ButtonManifest,
-  Nt as Card,
-  Rt as CardManifest,
-  ge as Checkbox,
-  ht as CheckboxManifest,
-  ft as Divider,
-  mt as DividerManifest,
-  Dt as EmptyState,
-  Lt as EmptyStateManifest,
-  qt as FormField,
-  Et as FormFieldManifest,
-  It as Icon,
-  zt as IconManifest,
-  V as Input,
-  it as InputManifest,
-  _t as LUCENT_UI_VERSION,
-  Pt as LucentProvider,
-  jt as MANIFEST_SPEC_VERSION,
-  gt as Radio,
+  Vt as Alert,
+  Wt as AlertManifest,
+  ft as Avatar,
+  mt as AvatarManifest,
+  ut as Badge,
+  pt as BadgeManifest,
+  jt as Breadcrumb,
+  ee as Button,
+  st as ButtonManifest,
+  Dt as Card,
+  Lt as CardManifest,
+  be as Checkbox,
+  vt as CheckboxManifest,
+  _t as Collapsible,
+  gt as Divider,
+  bt as DividerManifest,
+  Pt as EmptyState,
+  Ot as EmptyStateManifest,
+  Rt as FormField,
+  Bt as FormFieldManifest,
+  qt as Icon,
+  Et as IconManifest,
+  O as Input,
+  ct as InputManifest,
+  tn as LUCENT_UI_VERSION,
+  Yt as LucentProvider,
+  en as MANIFEST_SPEC_VERSION,
+  Ft as NavLink,
+  Kt as PageLayout,
+  yt as Radio,
   ye as RadioGroup,
-  bt as RadioGroupUncontrolled,
-  yt as RadioManifest,
-  At as SearchInput,
-  Ft as SearchInputManifest,
-  Te as Select,
-  wt as SelectManifest,
-  Vt as Skeleton,
-  Wt as SkeletonManifest,
-  fe as Spinner,
-  pt as SpinnerManifest,
-  kt as Tag,
-  St as TagManifest,
-  z as Text,
-  Mt as TextManifest,
-  oe as Textarea,
-  st as TextareaManifest,
-  vt as Toggle,
-  xt as ToggleManifest,
-  Tt as Tooltip,
-  Ct as TooltipManifest,
-  Gt as assertManifest,
-  Ht as brandTokens,
-  Je as darkTokens,
-  tt as getContrastText,
-  Ut as isValidPropDescriptor,
-  U as lightTokens,
-  Ze as makeLibraryCSS,
-  Ot as useLucent,
-  nt as validateManifest
+  xt as RadioGroupUncontrolled,
+  wt as RadioManifest,
+  Nt as SearchInput,
+  $t as SearchInputManifest,
+  Ce as Select,
+  Tt as SelectManifest,
+  Ht as Skeleton,
+  Gt as SkeletonManifest,
+  me as Spinner,
+  ht as SpinnerManifest,
+  Ut as Tabs,
+  Ct as Tag,
+  It as TagManifest,
+  E as Text,
+  At as TextManifest,
+  ie as Textarea,
+  dt as TextareaManifest,
+  kt as Toggle,
+  St as ToggleManifest,
+  zt as Tooltip,
+  Mt as TooltipManifest,
+  Qt as assertManifest,
+  Jt as brandTokens,
+  et as darkTokens,
+  rt as getContrastText,
+  Zt as isValidPropDescriptor,
+  K as lightTokens,
+  nt as makeLibraryCSS,
+  Xt as useLucent,
+  ot as validateManifest
 };