@ramme-io/ui 4.0.1 → 4.1.1

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,34 @@
-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,
+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: i,
   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 })
+  themeLabSlot: n,
+  aboutSlot: d = /* @__PURE__ */ e(s, {}),
+  defaultTab: o = "general",
+  title: a = "Settings",
+  className: m
+}) => (
+  /* @container so the padding answers to the space this panel was GIVEN,
+         not the size of the screen it happens to be on.
+  
+         No horizontal padding when narrow. Nested in a Sheet or a drawer, the
+         host already supplies the gutter, and adding a second one is how the
+         Theme Studio lost 21% of a 390px screen to three stacked insets before a
+         single label was drawn. Vertical padding is kept: it separates, it does
+         not compete. */
+  /* @__PURE__ */ t("div", { className: c("@container w-full py-fluid-md px-0 @md:p-fluid-lg", m), children: [
+    a !== null && /* @__PURE__ */ e("h2", { className: "text-2xl font-bold tracking-tight text-foreground mb-4", children: a }),
+    /* @__PURE__ */ t(b, { defaultActiveTab: o, size: "sm", children: [
+      /* @__PURE__ */ e(l, { id: "general", label: "General", children: i }),
+      /* @__PURE__ */ e(l, { id: "ai-gateway", label: "AI Gateway", children: r }),
+      /* @__PURE__ */ e(l, { id: "theme-lab", label: "Theme Lab", children: n }),
+      /* @__PURE__ */ e(l, { id: "about", label: "About", children: d })
+    ] })
   ] })
-] });
+);
 export {
-  g as SettingsContainer
+  p as SettingsContainer
 };

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

@@ -0,0 +1,58 @@
+import React from 'react';
+/**
+ * @wizard
+ * @name Sheet
+ * @description A bottom sheet that opens at a partial height and grows to full screen as you drag or scroll it up. Strategic purpose: the native-feeling surface for mobile navigation, settings and pickers — reachable by thumb, dismissed by flicking down. Use instead of Drawer when the surface is primarily touched.
+ * @tags layout, overlay, sheet, mobile, touch, drawer, ui
+ * @category layout
+ * @id sheet
+ * @param {boolean} isOpen - Controls the open/closed state. Required.
+ * @param {function} onClose - Fired when the sheet requests dismissal (flick down, drag below the smallest detent, Escape, overlay tap, or the close button). Required.
+ * @param {number[]} detents - Resting heights as fractions of the viewport, ascending. Defaults to [0.6, 1] — opens at 60%, expands to full.
+ * @param {number} initialDetent - Index into detents to open at. Defaults to 0.
+ * @param {string} title - Optional title in the sticky header, beside the close button.
+ * @param {ReactNode} footer - Optional sticky footer, kept clear of the home indicator.
+ * @param {boolean} overlayDismiss - Tap the dimmed backdrop to close. Defaults to true.
+ * @param {string} className - Extra classes for the sheet panel.
+ */
+export interface SheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    detents?: number[];
+    initialDetent?: number;
+    title?: string;
+    footer?: React.ReactNode;
+    overlayDismiss?: boolean;
+    className?: string;
+}
+/**
+ * WHY THIS EXISTS ALONGSIDE Drawer
+ *
+ * `Drawer` already slides in from any edge, including the bottom, and it is
+ * used in 18 places across five products. It is a *static* panel: it animates
+ * to one size and stays there. The sheet pattern is a different interaction —
+ * detents, a drag that tracks your finger, and a body whose scroll is coupled
+ * to the sheet's height — and bolting that onto Drawer would put a gesture
+ * state machine into a component whose other three positions can never use it,
+ * destabilising every existing call site for a behaviour only `bottom` has.
+ *
+ * So Drawer stays as it is. Reach for Sheet when the surface is primarily
+ * touched; reach for Drawer when it is a desktop side panel.
+ *
+ * ZERO JANK
+ *
+ * - Height is driven by `transform: translateY`, never by animating `height`,
+ *   so no frame triggers layout (rule 3). The panel is laid out at full
+ *   viewport height once and slid down to reveal only the part in use.
+ * - `100dvh`, never `vh` (rule 5) — a sheet measured against `vh` is wrong by
+ *   the height of the toolbar on every mobile browser that retracts one.
+ * - The transition is dropped entirely while a finger is down, so the sheet
+ *   tracks the pointer exactly instead of lagging behind it by the duration.
+ * - `prefers-reduced-motion` disables the drag and the animation; the sheet
+ *   opens at its largest detent and closes, which is the same functionality
+ *   without the movement (rule 4).
+ * - Safe-area insets are honoured so the footer clears the home indicator.
+ */
+export declare const Sheet: React.FC<SheetProps>;
+export default Sheet;

package/dist/components/layout/Sheet.js

@@ -0,0 +1,144 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { useState as m, useRef as E, useEffect as w, useCallback as S } from "react";
+import { createPortal as j } from "react-dom";
+import { Icon as A } from "../ui/Icon.js";
+import { cn as x } from "../../utils/cn.js";
+import { useBodyScrollLock as R } from "../../lib/hooks/useBodyScrollLock.js";
+import { useSheetGesture as B } from "../../lib/hooks/useSheetGesture.js";
+const G = ({
+  isOpen: o,
+  onClose: r,
+  children: y,
+  detents: v = [0.6, 1],
+  initialDetent: f = 0,
+  title: s,
+  footer: h,
+  overlayDismiss: k = !0,
+  className: N
+}) => {
+  const [d, b] = m(!1), [g, p] = m(!1), D = E(null), [l] = m(
+    () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  ), i = [...v].sort((n, a) => n - a), t = B({
+    detents: i,
+    // Under reduced motion there is no drag, so a partial height would be a
+    // height the reader can never change. Open fully instead.
+    initialDetent: l ? i.length - 1 : f,
+    onDismiss: r,
+    reducedMotion: l
+  });
+  R(o), w(() => {
+    let n, a;
+    return o ? (b(!0), t.setHeight(i[l ? i.length - 1 : f] ?? i[0]), n = requestAnimationFrame(() => {
+      a = window.setTimeout(() => p(!0), 10);
+    })) : (p(!1), a = window.setTimeout(() => b(!1), 320)), () => {
+      cancelAnimationFrame(n), clearTimeout(a);
+    };
+  }, [o]);
+  const c = S(
+    (n) => {
+      n.key === "Escape" && o && r();
+    },
+    [o, r]
+  );
+  if (w(() => {
+    if (d)
+      return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
+  }, [d, c]), !d) return null;
+  const P = g ? 1 - t.height : 1;
+  return j(
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: x(
+          "fixed inset-0 z-drawer",
+          "transition-opacity duration-300 ease-out",
+          g ? "opacity-100" : "opacity-0"
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50",
+              onClick: k ? r : void 0,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              ref: D,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": s ?? "Sheet",
+              style: {
+                transform: `translateY(${P * 100}%)`,
+                // Laid out at full height and slid down; only transform animates.
+                height: "100dvh",
+                paddingBottom: "env(safe-area-inset-bottom)"
+              },
+              className: x(
+                "absolute inset-x-0 bottom-0 flex flex-col",
+                "bg-card text-foreground border-t border-border shadow-xl",
+                // The corners round while the sheet is partial and square off once it
+                // owns the whole screen — the cue that tells you it is fully open.
+                t.expanded ? "rounded-t-none" : "rounded-t-2xl",
+                // No transition while dragging: the sheet must sit exactly under the
+                // finger, not chase it.
+                t.dragging ? "transition-none" : "transition-transform duration-300 ease-out",
+                "motion-reduce:transition-none",
+                N
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    onPointerDown: t.onPointerDown,
+                    style: { touchAction: "none" },
+                    className: "flex h-11 w-full shrink-0 cursor-grab items-center justify-center active:cursor-grabbing",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ e("div", { className: "h-1 w-10 rounded-full bg-muted-foreground/40" })
+                  }
+                ),
+                /* @__PURE__ */ u(
+                  "div",
+                  {
+                    onPointerDown: t.onPointerDown,
+                    style: { touchAction: "none" },
+                    className: "flex shrink-0 items-center justify-between gap-3 px-4 pb-3",
+                    children: [
+                      s ? /* @__PURE__ */ e("h2", { className: "text-lg font-semibold leading-tight", children: s }) : /* @__PURE__ */ e("span", {}),
+                      /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: r,
+                          "aria-label": "Close",
+                          className: "-mr-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground",
+                          children: /* @__PURE__ */ e(A, { name: "x", size: 22 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    onPointerDown: t.onBodyPointerDown,
+                    className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4",
+                    children: y
+                  }
+                ),
+                h && /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-border bg-card px-4 py-3", children: h })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+};
+export {
+  G as Sheet,
+  G as default
+};

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

package/dist/components/navigation/Menu.js

@@ -1,6 +1,6 @@
 import { jsx as n, jsxs as p, Fragment as b } from "react/jsx-runtime";
-import m, { useState as v, useRef as d, useCallback as f, useEffect as x } from "react";
-import { Slot as w } from "@radix-ui/react-slot";
+import m, { useState as v, useRef as d, useCallback as f, useEffect as w } from "react";
+import { Slot as x } from "@radix-ui/react-slot";
 import { cn as E } from "../../utils/cn.js";
 const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", role: "separator" }), R = ({
   children: s,
@@ -11,14 +11,14 @@ const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", rol
 }) => {
   const o = E(
     "flex items-center w-full text-left px-3 py-1.5 text-sm cursor-pointer transition-colors duration-150 ease-in-out whitespace-nowrap rounded-md",
-    "hover:bg-accent hover:text-accent-foreground text-text",
+    "hover:bg-accent hover:text-accent-foreground text-foreground",
     l && "opacity-50 cursor-not-allowed"
   ), r = e && m.isValidElement(e) ? m.cloneElement(e, {
     size: 14,
     className: "mr-2 text-muted-foreground"
   }) : null;
   return /* @__PURE__ */ n(
-    t ? w : "button",
+    t ? x : "button",
     {
       onClick: c,
       disabled: l,
@@ -42,7 +42,7 @@ const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", rol
   }, h = f(() => t((a) => !a), []), i = f((a) => {
     o.current && !o.current.contains(a.target) && t(!1);
   }, []);
-  return x(() => (e ? document.addEventListener("mousedown", i) : document.removeEventListener("mousedown", i), () => {
+  return w(() => (e ? document.addEventListener("mousedown", i) : document.removeEventListener("mousedown", i), () => {
     document.removeEventListener("mousedown", i);
   }), [e, i]), /* @__PURE__ */ p(
     "div",
@@ -57,7 +57,7 @@ const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", rol
           "div",
           {
             onMouseEnter: u,
-            className: `origin-top-right absolute z-50 rounded-md shadow-lg bg-card border border-border ring-1 ring-black ring-opacity-5 focus:outline-none min-w-[12rem] w-max ${(() => {
+            className: `origin-top-right absolute z-popover rounded-md shadow-lg bg-card border border-border ring-1 ring-black ring-opacity-5 focus:outline-none min-w-[12rem] w-max ${(() => {
               switch (l) {
                 case "bottom-left":
                   return "top-full left-0 mt-1";