@ramme-io/ui 4.0.0 → 4.1.0

package/dist/components/layout/Accordion.js

@@ -1,8 +1,8 @@
-import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
 import d, { useState as u, useCallback as f } from "react";
-const g = ({ id: e, header: r, children: i, isOpen: t, onToggle: a }) => {
-  const [c, o] = u(t !== void 0 ? t : !1), s = t !== void 0, l = s ? t : c, h = f(() => {
-    s && a ? a(e, !l) : o((v) => !v);
+const x = ({ id: e, header: r, children: i, isOpen: n, onToggle: a }) => {
+  const [c, o] = u(n !== void 0 ? n : !1), s = n !== void 0, l = s ? n : c, h = f(() => {
+    s && a ? a(e, !l) : o((g) => !g);
   }, [e, l, s, a]), p = `transform transition-transform duration-300 ${l ? "rotate-180" : "rotate-0"}`;
   return /* @__PURE__ */ m("div", { className: "border border-border rounded-md overflow-hidden", children: [
     /* @__PURE__ */ m(
@@ -12,16 +12,16 @@ const g = ({ id: e, header: r, children: i, isOpen: t, onToggle: a }) => {
         "aria-expanded": l,
         "aria-controls": `accordion-panel-${e}`,
         onClick: h,
-        className: "flex items-center justify-between w-full p-4 text-text bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+        className: "flex items-center justify-between w-full p-4 text-foreground bg-background hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
         role: "heading",
         "aria-level": 3,
         children: [
-          /* @__PURE__ */ n("span", { className: "text-xl font-semibold", children: r }),
-          /* @__PURE__ */ n("svg", { className: `w-6 h-6 text-text ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
+          /* @__PURE__ */ t("span", { className: "text-xl font-semibold", children: r }),
+          /* @__PURE__ */ t("svg", { className: `w-6 h-6 text-foreground ${p}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" }) })
         ]
       }
     ),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "div",
       {
         id: `accordion-panel-${e}`,
@@ -33,20 +33,20 @@ const g = ({ id: e, header: r, children: i, isOpen: t, onToggle: a }) => {
           overflow: "hidden",
           transition: "max-height 0.3s ease-in-out"
         },
-        children: /* @__PURE__ */ n("div", { className: "p-4 bg-card", children: i })
+        children: /* @__PURE__ */ t("div", { className: "p-4 bg-card", children: i })
       }
     )
   ] });
 }, w = ({ children: e, singleOpen: r = !1, className: i }) => {
-  const [t, a] = u(null), c = f((o, s) => {
+  const [n, a] = u(null), c = f((o, s) => {
     r && a(s ? o : null);
   }, [r]);
-  return /* @__PURE__ */ n("div", { className: `space-y-4 ${i || ""}`, children: d.Children.map(e, (o) => d.isValidElement(o) ? d.cloneElement(o, {
-    isOpen: r ? o.props.id === t : void 0,
+  return /* @__PURE__ */ t("div", { className: `space-y-4 ${i || ""}`, children: d.Children.map(e, (o) => d.isValidElement(o) ? d.cloneElement(o, {
+    isOpen: r ? o.props.id === n : void 0,
     onToggle: r ? c : void 0
   }) : o) });
 };
 export {
   w as Accordion,
-  g as AccordionItem
+  x as AccordionItem
 };

package/dist/components/layout/AppShell.js

@@ -6,9 +6,9 @@ import { useIsMobile as A } from "../../lib/hooks/useMediaQuery.js";
 const M = D.forwardRef(({
   className: p,
   layoutPreset: s = "dashboard",
-  sidebarSlot: c,
-  headerSlot: a,
-  toolbarSlot: i,
+  sidebarSlot: a,
+  headerSlot: i,
+  toolbarSlot: c,
   statusbarSlot: d,
   inspectorSlot: w,
   onLogoTrigger: o,
@@ -36,15 +36,15 @@ const M = D.forwardRef(({
     {
       ref: C,
       className: x(
-        "flex h-screen w-screen overflow-hidden bg-background text-foreground text-sm font-sans transition-colors duration-300",
+        "flex h-dvh w-full overflow-hidden bg-background text-foreground text-sm font-sans transition-colors duration-300",
         p
       ),
       ...z,
       children: [
-        !l && c && /* @__PURE__ */ e("aside", { className: "w-sidebar flex-shrink-0 flex flex-col border-r border-border bg-card shadow-sm z-20", children: c }),
+        !l && a && /* @__PURE__ */ e("aside", { className: "w-sidebar flex-shrink-0 flex flex-col border-r border-border bg-card shadow-sm z-20", children: a }),
         /* @__PURE__ */ b("div", { className: "flex flex-col flex-1 min-w-0 h-full relative z-10", children: [
-          !l && a && /* @__PURE__ */ e("header", { className: "h-header flex-shrink-0 w-full border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-30 flex items-center px-4", children: a }),
-          !l && i && /* @__PURE__ */ e("div", { className: "h-toolbar flex-shrink-0 w-full border-b border-border bg-muted/30 flex items-center px-4 shadow-sm z-20", children: i }),
+          !l && i && /* @__PURE__ */ e("header", { className: "h-header flex-shrink-0 w-full border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-30 flex items-center px-4", children: i }),
+          !l && c && /* @__PURE__ */ e("div", { className: "h-toolbar flex-shrink-0 w-full border-b border-border bg-muted/30 flex items-center px-4 shadow-sm z-20", children: c }),
           /* @__PURE__ */ e("main", { className: x(
             "flex-1 overflow-y-auto custom-scrollbar relative @container",
             E ? "p-0" : "p-fluid-md @md:p-fluid-lg"

package/dist/components/layout/DetailDrawer.js

@@ -41,7 +41,7 @@ const S = ({
     {
       className: h(
         "flex flex-col border-border bg-card shadow-2xl transition-transform duration-300",
-        l ? `fixed inset-y-0 ${w} z-50 w-full sm:w-[420px] animate-in ${t === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${w}`
+        l ? `fixed inset-y-0 ${w} z-drawer w-full sm:w-[420px] animate-in ${t === "right" ? "slide-in-from-right" : "slide-in-from-left"}` : `relative h-full flex-shrink-0 ${w}`
       ),
       style: l ? void 0 : { width: `min(100vw, ${p}px)` },
       children: [
@@ -75,7 +75,7 @@ const S = ({
       /* @__PURE__ */ r(
         "div",
         {
-          className: "fixed inset-0 z-40 bg-background/80 backdrop-blur-sm transition-opacity",
+          className: "fixed inset-0 z-scrim bg-background/80 backdrop-blur-sm transition-opacity",
           onClick: n
         }
       ),

package/dist/components/layout/Drawer.js

@@ -1,27 +1,28 @@
-import { jsx as o, jsxs as b } from "react/jsx-runtime";
-import { useState as g, useRef as z, useCallback as s, useEffect as c } from "react";
-import { createPortal as F } from "react-dom";
-import { Icon as L } from "../ui/Icon.js";
-import { cn as p } from "../../utils/cn.js";
-const A = {
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { useState as p, useRef as L, useCallback as s, useEffect as y } from "react";
+import { createPortal as z } from "react-dom";
+import { Icon as F } from "../ui/Icon.js";
+import { cn as g } from "../../utils/cn.js";
+import { useBodyScrollLock as A } from "../../lib/hooks/useBodyScrollLock.js";
+const P = {
   sm: "320px",
   md: "480px",
   lg: "640px",
   xl: "80vw",
   full: "100vw"
-}, V = ({
-  isOpen: t,
-  onClose: l,
+}, W = ({
+  isOpen: o,
+  onClose: n,
   children: v,
-  footer: f,
-  position: n = "right",
-  size: u = "md",
+  footer: d,
+  position: l = "right",
+  size: f = "md",
   title: m,
   className: k,
-  overlayDismiss: h = !0
+  overlayDismiss: u = !0
 }) => {
-  const [i, x] = g(!1), [w, y] = g(!1), d = z(null), C = (e) => A[e] || e, E = s(() => {
-    switch (n) {
+  const [i, x] = p(!1), [h, w] = p(!1), c = L(null), S = (e) => P[e] || e, C = s(() => {
+    switch (l) {
       case "left":
         return { from: "-translate-x-full", to: "translate-x-0", positionClass: "left-0 top-0 h-full" };
       case "right":
@@ -33,62 +34,60 @@ const A = {
       default:
         return { from: "translate-x-full", to: "translate-x-0", positionClass: "right-0 top-0 h-full" };
     }
-  }, [n]), S = s(() => {
-    const e = {}, r = C(u);
-    return n === "left" || n === "right" ? (e.width = r, e.maxWidth = "100dvw") : (e.height = r, e.maxHeight = "100dvh"), e;
-  }, [n, u]), { from: N, to: T, positionClass: R } = E(), I = S();
-  c(() => (t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [t]), c(() => {
-    let e, r;
-    return t ? (x(!0), e = requestAnimationFrame(() => {
-      r = window.setTimeout(() => y(!0), 10);
-    })) : (y(!1), r = window.setTimeout(() => x(!1), 500)), () => {
-      cancelAnimationFrame(e), clearTimeout(r);
+  }, [l]), E = s(() => {
+    const e = {}, t = S(f);
+    return l === "left" || l === "right" ? (e.width = t, e.maxWidth = "100dvw") : (e.height = t, e.maxHeight = "100dvh"), e;
+  }, [l, f]), { from: N, to: T, positionClass: R } = C(), j = E();
+  A(o), y(() => {
+    let e, t;
+    return o ? (x(!0), e = requestAnimationFrame(() => {
+      t = window.setTimeout(() => w(!0), 10);
+    })) : (w(!1), t = window.setTimeout(() => x(!1), 500)), () => {
+      cancelAnimationFrame(e), clearTimeout(t);
     };
-  }, [t]);
-  const j = s((e) => {
-    h && d.current && !d.current.contains(e.target) && l();
-  }, [l, h]), a = s((e) => {
-    e.key === "Escape" && t && l();
-  }, [t, l]);
-  return c(() => (i ? document.addEventListener("keydown", a) : document.removeEventListener("keydown", a), () => document.removeEventListener("keydown", a)), [i, a]), i ? F(
-    /* @__PURE__ */ o(
+  }, [o]);
+  const I = s((e) => {
+    u && c.current && !c.current.contains(e.target) && n();
+  }, [n, u]), a = s((e) => {
+    e.key === "Escape" && o && n();
+  }, [o, n]);
+  return y(() => (i ? document.addEventListener("keydown", a) : document.removeEventListener("keydown", a), () => document.removeEventListener("keydown", a)), [i, a]), i ? z(
+    /* @__PURE__ */ r(
       "div",
       {
-        className: p(
-          "fixed inset-0 z-50 flex transition-opacity duration-500 ease-in-out",
-          w ? "opacity-100" : "opacity-0",
+        className: g(
+          "fixed inset-0 z-drawer flex transition-opacity duration-500 ease-in-out",
+          h ? "opacity-100" : "opacity-0",
           "bg-black/50"
         ),
-        onClick: j,
+        onClick: I,
         children: /* @__PURE__ */ b(
           "div",
           {
-            ref: d,
-            style: I,
-            className: p(
+            ref: c,
+            style: j,
+            className: g(
               "fixed bg-card border-border text-foreground shadow-xl flex flex-col",
               "transform transition-transform duration-500 ease-out",
               R,
-              w ? T : N,
+              h ? T : N,
               k
             ),
             children: [
               /* @__PURE__ */ b("div", { className: "flex justify-between items-center p-4 border-b border-border flex-shrink-0", children: [
-                m && /* @__PURE__ */ o("h3", { className: "text-xl font-semibold", children: m }),
-                /* @__PURE__ */ o(
+                m && /* @__PURE__ */ r("h3", { className: "text-xl font-semibold", children: m }),
+                /* @__PURE__ */ r(
                   "button",
                   {
-                    onClick: l,
-                    className: "text-muted-foreground hover:text-foreground transition-colors",
+                    onClick: n,
+                    className: "-mr-2 inline-flex min-h-11 min-w-11 items-center justify-center text-muted-foreground hover:text-foreground transition-colors",
                     "aria-label": "Close drawer",
-                    children: /* @__PURE__ */ o(L, { name: "x", size: 24 })
+                    children: /* @__PURE__ */ r(F, { name: "x", size: 24 })
                   }
                 )
               ] }),
-              /* @__PURE__ */ o("div", { className: "flex-grow p-4 overflow-y-auto", children: v }),
-              f && /* @__PURE__ */ o("div", { className: "p-4 border-t border-border flex-shrink-0 bg-card", children: f })
+              /* @__PURE__ */ r("div", { className: "flex-grow p-4 overflow-y-auto overscroll-contain", children: v }),
+              d && /* @__PURE__ */ r("div", { className: "p-4 border-t border-border flex-shrink-0 bg-card", children: d })
             ]
           }
         )
@@ -98,5 +97,5 @@ const A = {
   ) : null;
 };
 export {
-  V as Drawer
+  W as Drawer
 };

package/dist/components/layout/List.js

@@ -1,16 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
-import i from "react";
-const y = ({ children: t, className: e, ...s }) => /* @__PURE__ */ n("li", { className: `mb-1 last:mb-0 text-text ${e || ""}`, ...s, children: t }), b = ({ type: t = "ul", children: e, className: s, ...l }) => {
-  const o = "space-y-1", a = "text-text", c = t === "ol" ? "ol" : "ul";
-  return i.createElement(
-    c,
-    { className: `${o} ${a} ${s || ""}`, ...l },
-    e
+import c from "react";
+const y = ({ children: e, className: t, ...s }) => /* @__PURE__ */ n("li", { className: `mb-1 last:mb-0 text-foreground ${t || ""}`, ...s, children: e }), b = ({ type: e = "ul", children: t, className: s, ...o }) => {
+  const l = "space-y-1", r = "text-foreground", a = e === "ol" ? "ol" : "ul";
+  return c.createElement(
+    a,
+    { className: `${l} ${r} ${s || ""}`, ...o },
+    t
   );
-}, S = ({ children: t, className: e, ...s }) => /* @__PURE__ */ n("dt", { className: `font-semibold text-text ${e || ""}`, ...s, children: t }), $ = ({ children: t, className: e, ...s }) => /* @__PURE__ */ n("dd", { className: `ml-4 text-text ${e || ""}`, ...s, children: t }), x = ({ children: t, className: e, ...s }) => /* @__PURE__ */ n("dl", { className: `space-y-2 ${e || ""}`, ...s, children: t });
+}, S = ({ children: e, className: t, ...s }) => /* @__PURE__ */ n("dt", { className: `font-semibold text-foreground ${t || ""}`, ...s, children: e }), $ = ({ children: e, className: t, ...s }) => /* @__PURE__ */ n("dd", { className: `ml-4 text-foreground ${t || ""}`, ...s, children: e }), u = ({ children: e, className: t, ...s }) => /* @__PURE__ */ n("dl", { className: `space-y-2 ${t || ""}`, ...s, children: e });
 export {
   $ as DefinitionDescription,
-  x as DefinitionList,
+  u as DefinitionList,
   S as DefinitionTerm,
   b as List,
   y as ListItem

package/dist/components/layout/Modal.js

@@ -1,16 +1,16 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { useRef as m, useCallback as f, useEffect as u } from "react";
 import { createPortal as b } from "react-dom";
 import { Icon as x } from "../ui/Icon.js";
 import { cn as v } from "../../utils/cn.js";
-const N = ({ isOpen: r, onClose: o, children: n, title: d, footer: t, className: i }) => {
+const N = ({ isOpen: r, onClose: o, children: n, title: d, footer: a, className: i }) => {
   const s = m(null), l = f((c) => {
     c.key === "Escape" && r && o();
   }, [r, o]);
   return u(() => (document.addEventListener("keydown", l, !1), () => {
     document.removeEventListener("keydown", l, !1);
   }), [l]), r ? b(
-    /* @__PURE__ */ e("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50", children: /* @__PURE__ */ a(
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 z-drawer flex items-center justify-center p-4 bg-black/50", children: /* @__PURE__ */ t(
       "div",
       {
         ref: s,
@@ -23,7 +23,7 @@ const N = ({ isOpen: r, onClose: o, children: n, title: d, footer: t, className:
         "aria-modal": "true",
         "aria-labelledby": d ? "modal-title" : void 0,
         children: [
-          /* @__PURE__ */ a("div", { className: "flex justify-between items-center p-4 border-b border-border", children: [
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-4 border-b border-border", children: [
             d && /* @__PURE__ */ e("h3", { id: "modal-title", className: "text-xl font-semibold", children: d }),
             /* @__PURE__ */ e(
               "button",
@@ -36,7 +36,7 @@ const N = ({ isOpen: r, onClose: o, children: n, title: d, footer: t, className:
             )
           ] }),
           /* @__PURE__ */ e("div", { className: "p-4", children: n }),
-          t && /* @__PURE__ */ e("div", { className: "p-4 border-t border-border flex justify-end space-x-2", children: t })
+          a && /* @__PURE__ */ e("div", { className: "p-4 border-t border-border flex justify-end space-x-2", children: a })
         ]
       }
     ) }),

package/dist/components/layout/PageHeader.js

@@ -1,11 +1,11 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-const a = ({ title: d, description: r, actions: l, className: s }) => /* @__PURE__ */ t("div", { className: `flex flex-col @md:flex-row @md:items-center @md:justify-between gap-4 py-4 border-b border-border ${s || ""}`, children: [
-  /* @__PURE__ */ t("div", { className: "flex-grow", children: [
-    /* @__PURE__ */ e("h1", { className: "text-3xl font-bold text-text", children: d }),
-    r && /* @__PURE__ */ e("p", { className: "mt-1 text-text-light", children: r })
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+const m = ({ title: s, description: r, actions: d, className: t }) => /* @__PURE__ */ l("div", { className: `flex flex-col @md:flex-row @md:items-center @md:justify-between gap-4 py-4 border-b border-border ${t || ""}`, children: [
+  /* @__PURE__ */ l("div", { className: "flex-grow", children: [
+    /* @__PURE__ */ e("h1", { className: "text-3xl font-bold text-foreground", children: s }),
+    r && /* @__PURE__ */ e("p", { className: "mt-1 text-muted-foreground", children: r })
   ] }),
-  l && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: l })
+  d && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: d })
 ] });
 export {
-  a as PageHeader
+  m as PageHeader
 };

package/dist/components/layout/SectionHeader.js

@@ -1,7 +1,7 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-const m = ({ title: r, description: e, className: o }) => /* @__PURE__ */ s("div", { className: `pb-2 border-b border-border mb-6 ${o || ""}`, children: [
-  /* @__PURE__ */ t("h2", { className: "text-xl font-semibold text-text", children: r }),
-  e && /* @__PURE__ */ t("p", { className: "mt-1 text-sm text-muted-foreground opacity-70", children: e })
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+const m = ({ title: t, description: e, className: o }) => /* @__PURE__ */ d("div", { className: `pb-2 border-b border-border mb-6 ${o || ""}`, children: [
+  /* @__PURE__ */ r("h2", { className: "text-xl font-semibold text-foreground", children: t }),
+  e && /* @__PURE__ */ r("p", { className: "mt-1 text-sm text-muted-foreground opacity-70", children: e })
 ] });
 export {
   m as SectionHeader

package/dist/components/layout/SettingsContainer.d.ts

@@ -33,6 +33,18 @@ export interface SettingsContainerProps {
      * Override to inject custom about content.
      */
     aboutSlot?: React.ReactNode;
+    /**
+     * Which tab opens first. Defaults to 'general' so existing callers are
+     * unchanged; a theme-focused surface passes 'theme-lab' so the editor is not
+     * one click behind an app-name form.
+     */
+    defaultTab?: 'general' | 'ai-gateway' | 'theme-lab' | 'about';
+    /**
+     * Heading above the tabs. Pass `null` when the container that holds this
+     * already has a title — a drawer labelled "Theme Studio" does not need a
+     * second heading reading "Settings".
+     */
+    title?: React.ReactNode;
     /** Additional CSS classes for the outermost container. */
     className?: string;
 }

package/dist/components/layout/SettingsContainer.js

@@ -1,22 +1,24 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Tabs as m, TabPanel as t } from "../navigation/Tabs.js";
-import { cn as d } from "../../utils/cn.js";
-import { AboutRamme as b } from "./AboutRamme.js";
-const g = ({
-  generalSlot: l,
-  aiGatewaySlot: r,
-  themeLabSlot: i,
-  aboutSlot: n = /* @__PURE__ */ e(b, {}),
-  className: o
-}) => /* @__PURE__ */ a("div", { className: d("w-full p-4 md:p-6", o), children: [
-  /* @__PURE__ */ e("h2", { className: "text-2xl font-bold tracking-tight text-foreground mb-4", children: "Settings" }),
-  /* @__PURE__ */ a(m, { defaultActiveTab: "general", size: "sm", children: [
-    /* @__PURE__ */ e(t, { id: "general", label: "General", children: l }),
-    /* @__PURE__ */ e(t, { id: "ai-gateway", label: "AI Gateway", children: r }),
-    /* @__PURE__ */ e(t, { id: "theme-lab", label: "Theme Lab", children: i }),
-    /* @__PURE__ */ e(t, { id: "about", label: "About", children: n })
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Tabs as b, TabPanel as l } from "../navigation/Tabs.js";
+import { cn as c } from "../../utils/cn.js";
+import { AboutRamme as s } from "./AboutRamme.js";
+const p = ({
+  generalSlot: r,
+  aiGatewaySlot: i,
+  themeLabSlot: n,
+  aboutSlot: o = /* @__PURE__ */ e(s, {}),
+  defaultTab: m = "general",
+  title: a = "Settings",
+  className: d
+}) => /* @__PURE__ */ t("div", { className: c("w-full p-4 md:p-6", d), children: [
+  a !== null && /* @__PURE__ */ e("h2", { className: "text-2xl font-bold tracking-tight text-foreground mb-4", children: a }),
+  /* @__PURE__ */ t(b, { defaultActiveTab: m, size: "sm", children: [
+    /* @__PURE__ */ e(l, { id: "general", label: "General", children: r }),
+    /* @__PURE__ */ e(l, { id: "ai-gateway", label: "AI Gateway", children: i }),
+    /* @__PURE__ */ e(l, { id: "theme-lab", label: "Theme Lab", children: n }),
+    /* @__PURE__ */ e(l, { id: "about", label: "About", children: o })
   ] })
 ] });
 export {
-  g as SettingsContainer
+  p as SettingsContainer
 };

package/dist/components/layout/Sidebar.js

@@ -113,7 +113,7 @@ const F = z(void 0), P = ({ logo: e, collapsedLogo: t, title: n, collapsed: a })
       var y;
       (y = o.onClick) == null || y.call(o), u == null || u(o);
     } }, o.id || `item-${I}`)) }) }),
-    /* @__PURE__ */ r("button", { onClick: g, className: m("absolute -right-3 z-50 rounded-full border border-border bg-background p-1 text-muted-foreground shadow-sm hover:text-foreground transition-all hover:scale-110", a || s ? "top-20" : "top-4"), children: /* @__PURE__ */ r(h, { name: c ? "chevron-right" : "chevron-left", className: "h-3 w-3" }) }),
+    /* @__PURE__ */ r("button", { onClick: g, className: m("absolute -right-3 z-drawer rounded-full border border-border bg-background p-1 text-muted-foreground shadow-sm hover:text-foreground transition-all hover:scale-110", a || s ? "top-20" : "top-4"), children: /* @__PURE__ */ r(h, { name: c ? "chevron-right" : "chevron-left", className: "h-3 w-3" }) }),
     /* @__PURE__ */ r(
       U,
       {

package/dist/components/layout/UserNav.d.ts

@@ -34,6 +34,19 @@ export interface UserNavProps {
     showThemeToggle?: boolean;
     children?: React.ReactNode;
 }
+/**
+ * @wizard
+ * @name ButtonItem
+ * @description A single row inside a UserNav menu — icon, label, action. Strategic purpose: the sanctioned way to add an entry to the account menu, so extra actions match the built-in ones instead of arriving as a hand-styled button. Use `variant="destructive"` for anything that removes or signs out.
+ * @tags layout, navigation, menu, item, user-nav
+ * @category layout
+ * @id button-item
+ * @param {string} icon - Lucide icon name shown before the label.
+ * @param {string} label - The menu entry text.
+ * @param {function} onClick - Called when the entry is activated.
+ * @param {string} variant - 'default' | 'destructive'. Destructive tints the row for sign-out and delete.
+ * @param {string} className - Additional CSS classes.
+ */
 /**
  * 🟢 Component: ButtonItem
  * Extracted from main component for performance and clean scoping.

package/dist/components/layout/UserNav.js

@@ -23,7 +23,7 @@ const R = () => {
   label: l,
   onClick: a,
   variant: r = "default",
-  className: i
+  className: m
 }) => /* @__PURE__ */ n(
   "button",
   {
@@ -31,7 +31,7 @@ const R = () => {
     className: o(
       "relative flex w-full cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
       r === "destructive" ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-accent hover:text-accent-foreground",
-      i
+      m
     ),
     children: [
       /* @__PURE__ */ e(O, { name: t, className: "mr-2 h-4 w-4" }),
@@ -43,20 +43,20 @@ const R = () => {
   trigger: l,
   align: a = "end",
   side: r = "bottom",
-  className: i,
+  className: m,
   onLogout: h,
-  onSettings: m,
+  onSettings: c,
   onProfile: u,
-  showThemeToggle: w = !0,
+  showThemeToggle: k = !0,
   children: g
 }) => {
   var N;
   const [d, s] = z(!1), f = E(null);
   I(() => {
-    const k = (T) => {
+    const w = (T) => {
       f.current && !f.current.contains(T.target) && s(!1);
     };
-    return d && document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
+    return d && document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
   }, [d]);
   const x = {
     bottom: {
@@ -79,13 +79,13 @@ const R = () => {
       start: "left-auto right-full top-0 mr-2",
       center: "left-auto right-full top-1/2 -translate-y-1/2 mr-2"
     }
-  }, y = ((N = x[r]) == null ? void 0 : N[a]) || x.bottom.end, c = !!(u || m), p = !!w, v = !!g, C = !!h;
-  return /* @__PURE__ */ n("div", { className: o("relative", i), ref: f, children: [
+  }, y = ((N = x[r]) == null ? void 0 : N[a]) || x.bottom.end, i = !!(u || c), p = !!k, v = !!g, C = !!h;
+  return /* @__PURE__ */ n("div", { className: o("relative", m), ref: f, children: [
     /* @__PURE__ */ e(
       "button",
       {
         onClick: () => s(!d),
-        className: "flex items-center w-full focus:outline-none",
+        className: "flex min-h-11 min-w-11 w-full items-center focus:outline-none",
         children: l || /* @__PURE__ */ e(
           L,
           {
@@ -101,7 +101,7 @@ const R = () => {
       {
         className: o(
           // 🟢 FIXED: Using card background with backdrop blur for high visibility
-          "absolute z-50 w-56 rounded-md border border-border shadow-2xl",
+          "absolute z-popover w-56 rounded-md border border-border shadow-2xl",
           "bg-[rgb(var(--app-card-bg-color))] text-[rgb(var(--app-text-color))]",
           "backdrop-blur-md",
           // Ensures content behind doesn't make text unreadable
@@ -113,20 +113,20 @@ const R = () => {
             /* @__PURE__ */ e("p", { className: "text-sm font-medium leading-none text-foreground", children: t.name }),
             /* @__PURE__ */ e("p", { className: "text-xs leading-none text-muted-foreground truncate", children: t.email })
           ] }),
-          c && /* @__PURE__ */ n("div", { className: "p-1 space-y-0.5", children: [
+          i && /* @__PURE__ */ n("div", { className: "p-1 space-y-0.5", children: [
             u && /* @__PURE__ */ e(b, { icon: "user", label: "Profile", onClick: () => {
               u(), s(!1);
             } }),
-            m && /* @__PURE__ */ e(b, { icon: "settings", label: "Settings", onClick: () => {
-              m(), s(!1);
+            c && /* @__PURE__ */ e(b, { icon: "settings", label: "Settings", onClick: () => {
+              c(), s(!1);
             } })
           ] }),
-          p && /* @__PURE__ */ n("div", { className: o("p-2", c && "border-t border-border/50"), children: [
+          p && /* @__PURE__ */ n("div", { className: o("p-2", i && "border-t border-border/50"), children: [
             /* @__PURE__ */ e("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-1", children: "Theme" }),
             /* @__PURE__ */ e(R, {})
           ] }),
-          v && /* @__PURE__ */ e("div", { className: o("p-1 space-y-0.5", (c || p) && "border-t border-border/50"), children: g }),
-          C && /* @__PURE__ */ e("div", { className: o("p-1", (c || p || v) && "border-t border-border/50"), children: /* @__PURE__ */ e(
+          v && /* @__PURE__ */ e("div", { className: o("p-1 space-y-0.5", (i || p) && "border-t border-border/50"), children: g }),
+          C && /* @__PURE__ */ e("div", { className: o("p-1", (i || p || v) && "border-t border-border/50"), children: /* @__PURE__ */ e(
             b,
             {
               icon: "log-out",

package/dist/components/molecular/ConnectorOverlay.d.ts

@@ -1,4 +1,16 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name ConnectorOverlay
+ * @description Covers a panel while its data source is connecting, and explains itself when the connection fails. Strategic purpose: the standard treatment for a live region that has no data yet — telemetry panels, market feeds, device dashboards — so every product says the same thing about a dead socket instead of inventing a spinner. Renders nothing once status is 'connected', so it can stay mounted.
+ * @tags feedback, overlay, connection, realtime, loading, error
+ * @category feedback
+ * @id connector-overlay
+ * @param {string} status - 'connecting' | 'connected' | 'error'. Renders null when connected.
+ * @param {ReactNode} message - Replaces the default copy for the current status.
+ * @param {function} onRetry - Shows a retry action in the error state when provided.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface ConnectorOverlayProps {
     status: 'connecting' | 'connected' | 'error';
     message?: React.ReactNode;

package/dist/components/navigation/Breadcrumbs.js

@@ -1,20 +1,20 @@
-import { jsx as e, jsxs as a, Fragment as p } from "react/jsx-runtime";
+import { jsx as e, jsxs as a, Fragment as f } from "react/jsx-runtime";
 import m from "react";
-import { Link as f } from "react-router-dom";
-const b = ({ label: s, to: t, isCurrent: n, className: c, icon: l }) => {
-  const i = "inline-flex items-center text-sm font-medium", o = n ? "text-text" : "text-primary hover:text-secondary", d = "ml-2 text-muted-foreground", x = l && m.isValidElement(l) ? m.cloneElement(l, {
+import { Link as p } from "react-router-dom";
+const b = ({ label: r, to: t, isCurrent: n, className: c, icon: s }) => {
+  const i = "inline-flex items-center text-sm font-medium", o = n ? "text-foreground" : "text-primary hover:text-secondary", d = "ml-2 text-muted-foreground", x = s && m.isValidElement(s) ? m.cloneElement(s, {
     size: 14,
     // This is equivalent to Tailwind's h-3.5/w-3.5
     className: "mr-1.5"
-  }) : null, r = /* @__PURE__ */ a(p, { children: [
+  }) : null, l = /* @__PURE__ */ a(f, { children: [
     x,
-    s
+    r
   ] });
   return /* @__PURE__ */ a("li", { className: `${i} ${o} ${c || ""}`, "aria-current": n ? "page" : void 0, children: [
-    t && !n ? /* @__PURE__ */ e(f, { to: t, className: "inline-flex items-center hover:underline", children: r }) : /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: r }),
+    t && !n ? /* @__PURE__ */ e(p, { to: t, className: "inline-flex items-center hover:underline", children: l }) : /* @__PURE__ */ e("span", { className: "inline-flex items-center", children: l }),
     !n && /* @__PURE__ */ e("span", { className: d, children: "/" })
   ] });
-}, y = ({ children: s, className: t }) => /* @__PURE__ */ e("nav", { className: `flex ${t || ""}`, "aria-label": "Breadcrumb", children: /* @__PURE__ */ e("ol", { className: "inline-flex items-center space-x-1 md:space-x-2", children: s }) });
+}, y = ({ children: r, className: t }) => /* @__PURE__ */ e("nav", { className: `flex ${t || ""}`, "aria-label": "Breadcrumb", children: /* @__PURE__ */ e("ol", { className: "inline-flex items-center space-x-1 md:space-x-2", children: r }) });
 export {
   b as BreadcrumbItem,
   y as Breadcrumbs