@ramme-io/ui 3.0.0 → 4.0.0

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

@@ -6,9 +6,15 @@ export interface PageContainerProps {
     constrained?: boolean;
 }
 /**
- * @sku @chassis/layout/page-container
- * @description Standard responsive padding container for page content.
- * Allows pages to opt-in to standard spacing without templates enforcing it.
+ * @wizard
+ * @name PageContainer
+ * @description Standard responsive padding wrapper for the content inside a page. Strategic purpose: lets a page opt in to canonical spacing without the layout template imposing it, so page components stay free of layout chrome. Use this instead of hand-rolling `p-4 md:p-8` on every page. Never add `h-screen` or `overflow-hidden` here — the app shell owns the viewport.
+ * @tags layout, container, page, spacing, padding
+ * @category layout
+ * @id page-container
+ * @param {ReactNode} children - The page content.
+ * @param {boolean} constrained - Caps width at a readable maximum and centres it. Defaults to false (full width).
+ * @param {string} className - Additional CSS classes.
  */
 export declare const PageContainer: React.FC<PageContainerProps>;
 export default PageContainer;

package/dist/components/layout/PageContainer.js

@@ -0,0 +1,20 @@
+import { jsx as l } from "react/jsx-runtime";
+const o = ({
+  children: a,
+  className: e = "",
+  constrained: t = !1
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: `
+        w-full p-4 @md:p-8 
+        ${t ? "max-w-7xl mx-auto" : ""} 
+        ${e}
+      `,
+    children: a
+  }
+);
+export {
+  o as PageContainer,
+  o as default
+};

package/dist/components/layout/PageHeader.js

@@ -0,0 +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 })
+  ] }),
+  l && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: l })
+] });
+export {
+  a as PageHeader
+};

package/dist/components/layout/RammeInspectorTrigger.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as n } from "../ui/Button.js";
+const m = ({
+  className: r,
+  onClick: t,
+  children: o
+}) => /* @__PURE__ */ e(
+  n,
+  {
+    variant: "ghost",
+    size: "sm",
+    className: r,
+    onClick: t,
+    iconBefore: "settings",
+    children: o || "Inspector"
+  }
+);
+export {
+  m as RammeInspectorTrigger
+};

package/dist/components/layout/SectionHeader.js

@@ -0,0 +1,8 @@
+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 })
+] });
+export {
+  m as SectionHeader
+};

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

@@ -1,4 +1,17 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name SettingsContainer
+ * @description The canonical settings page arrangement, with a fixed slot per section so every app's settings read the same way. Strategic purpose: settings sprawl fast — this pins the section order and navigation so General, AI Gateway, Theme Lab, and About always live in the same place.
+ * @tags layout, settings, preferences, configuration, page
+ * @category layout
+ * @id settings-container
+ * @param {ReactNode} generalSlot - General application settings.
+ * @param {ReactNode} aiGatewaySlot - AI provider and key configuration — pairs with kernel's AiSettingsPanel.
+ * @param {ReactNode} themeLabSlot - Theme customisation.
+ * @param {ReactNode} aboutSlot - Version and attribution.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface SettingsContainerProps {
     /**
      * Tab A — General settings content (app name, logo, etc.).

package/dist/components/layout/SettingsContainer.js

@@ -0,0 +1,22 @@
+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 })
+  ] })
+] });
+export {
+  g as SettingsContainer
+};

package/dist/components/layout/Sidebar.js

@@ -0,0 +1,132 @@
+import { jsx as r, jsxs as d, Fragment as S } from "react/jsx-runtime";
+import { useState as N, createContext as z } from "react";
+import { cn as m } from "../../utils/cn.js";
+import { Icon as h } from "../ui/Icon.js";
+import { Avatar as $ } from "../ui/Avatar.js";
+import { UserNav as A } from "./UserNav.js";
+const F = z(void 0), P = ({ logo: e, collapsedLogo: t, title: n, collapsed: a }) => !e && !n && !t ? null : /* @__PURE__ */ r("div", { className: m("flex h-16 items-center border-b border-border/50 px-4 transition-all", a ? "justify-center px-2" : "justify-between"), children: a ? t || (n ? /* @__PURE__ */ r("span", { className: "text-xl font-bold", children: n[0] }) : null) : e || /* @__PURE__ */ r("span", { className: "text-lg font-bold tracking-tight", children: n || "App" }) }), w = ({ item: e, collapsed: t, isActive: n, onClick: a, depth: l = 0 }) => {
+  const [s, f] = N(!1), b = Array.isArray(e.subItems) && e.subItems.length > 0;
+  if (e.type === "divider") return /* @__PURE__ */ r("div", { className: "my-2 border-t border-border/50" });
+  if (e.type === "section-label")
+    return t ? null : /* @__PURE__ */ r("p", { className: "mt-3 mb-1 px-2 text-[9px] font-bold uppercase tracking-widest text-muted-foreground/60 select-none", children: e.label });
+  const u = e.variant === "primary", p = e.variant === "destructive";
+  return /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ d(
+      "button",
+      {
+        onClick: () => {
+          b ? f((i) => !i) : a();
+        },
+        style: l > 0 ? { paddingLeft: `${0.5 + l * 0.75}rem` } : void 0,
+        className: m(
+          "group flex w-full items-center gap-x-3 rounded-md p-2 text-sm font-medium transition-all duration-200",
+          n ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+          u && !n && "text-primary bg-primary/5 hover:bg-primary/10",
+          p && !n && "text-destructive hover:bg-destructive/10 hover:text-destructive",
+          t ? "justify-center" : ""
+        ),
+        title: t ? e.label : void 0,
+        children: [
+          e.icon && /* @__PURE__ */ r(h, { name: e.icon, className: m("h-5 w-5 shrink-0 transition-transform", n && "scale-110") }),
+          !t && /* @__PURE__ */ d("div", { className: "flex-1 flex items-center justify-between overflow-hidden animate-in fade-in slide-in-from-left-2 duration-200", children: [
+            /* @__PURE__ */ r("span", { className: "truncate text-left", children: e.label }),
+            /* @__PURE__ */ d("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+              e.badge && /* @__PURE__ */ r("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-bold text-primary", children: e.badge }),
+              b && /* @__PURE__ */ r(
+                h,
+                {
+                  name: s ? "chevron-down" : "chevron-right",
+                  className: "h-3.5 w-3.5 text-muted-foreground/60 transition-transform duration-200"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ),
+    b && s && !t && /* @__PURE__ */ r("div", { className: "ml-2 mt-0.5 space-y-0.5 border-l border-border/40 pl-2", children: e.subItems.map((i, x) => /* @__PURE__ */ r(
+      w,
+      {
+        item: i,
+        collapsed: !1,
+        isActive: n,
+        onClick: a,
+        depth: l + 1
+      },
+      i.id || `sub-${x}`
+    )) })
+  ] });
+}, U = ({
+  user: e,
+  collapsed: t,
+  slot: n,
+  onLogout: a,
+  onSettings: l,
+  userMenuChildren: s
+}) => {
+  const f = /* @__PURE__ */ d("div", { className: m("flex w-full items-center gap-x-3 mt-4 p-2 rounded-md hover:bg-muted cursor-pointer transition-all border border-transparent hover:border-border", t ? "justify-center" : ""), children: [
+    /* @__PURE__ */ r($, { name: (e == null ? void 0 : e.name) || "", src: e == null ? void 0 : e.avatarUrl, size: "sm" }),
+    !t && e && /* @__PURE__ */ d(S, { children: [
+      /* @__PURE__ */ d("div", { className: "flex flex-col overflow-hidden text-left flex-1", children: [
+        /* @__PURE__ */ r("span", { className: "truncate text-sm font-medium", children: e.name }),
+        /* @__PURE__ */ r("span", { className: "truncate text-xs text-muted-foreground", children: e.email })
+      ] }),
+      /* @__PURE__ */ r(h, { name: "more-vertical", className: "h-4 w-4 text-muted-foreground" })
+    ] })
+  ] });
+  return /* @__PURE__ */ d("div", { className: "mt-auto border-t border-border/50 p-4 bg-muted/5", children: [
+    n,
+    e ? /* @__PURE__ */ r(
+      A,
+      {
+        user: e,
+        trigger: f,
+        side: t ? "right" : "top",
+        align: t ? "end" : "start",
+        className: "w-full",
+        onLogout: a,
+        onSettings: l,
+        children: s
+      }
+    ) : null
+  ] });
+}, E = ({
+  items: e,
+  user: t,
+  className: n,
+  logo: a,
+  collapsedLogo: l,
+  title: s,
+  activeId: f,
+  activeItemId: b,
+  onNavigate: u,
+  footerSlot: p,
+  defaultCollapsed: i = !1,
+  onLogout: x,
+  onSettings: k,
+  userMenuChildren: C
+}) => {
+  const [c, j] = N(i), v = f || b, g = () => j((o) => !o);
+  return /* @__PURE__ */ r(F.Provider, { value: { collapsed: c, toggleCollapsed: g, activeId: v }, children: /* @__PURE__ */ d("aside", { className: m("relative flex h-full flex-col border-r border-border bg-card transition-all duration-300 ease-in-out z-30", c ? "w-16" : "w-64", n), children: [
+    /* @__PURE__ */ r(P, { logo: a, collapsedLogo: l, title: s, collapsed: c }),
+    /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto overflow-x-hidden px-3 py-4 custom-scrollbar", children: /* @__PURE__ */ r("nav", { className: "space-y-1", children: e.map((o, I) => /* @__PURE__ */ r(w, { item: o, collapsed: c, isActive: v === o.id, onClick: () => {
+      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(
+      U,
+      {
+        user: t,
+        collapsed: c,
+        slot: p,
+        onLogout: x,
+        onSettings: k,
+        userMenuChildren: C
+      }
+    )
+  ] }) });
+};
+export {
+  E as Sidebar
+};

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

@@ -1,4 +1,14 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name Statusbar
+ * @description The persistent strip pinned to the bottom of the app shell. Strategic purpose: ambient state that should always be visible but never demand attention — connection status, record counts, sync state, build version. Pass to AppShell's `statusbarSlot`. Use Toast for things the user must acknowledge.
+ * @tags layout, statusbar, chrome, status, ambient
+ * @category layout
+ * @id statusbar
+ * @param {ReactNode} children - Statusbar content.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface StatusbarProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }

package/dist/components/layout/Statusbar.js

@@ -0,0 +1,20 @@
+import { jsx as f } from "react/jsx-runtime";
+import m from "react";
+import { cn as o } from "../../utils/cn.js";
+const s = m.forwardRef(({
+  className: t,
+  children: r,
+  ...e
+}, a) => /* @__PURE__ */ f(
+  "div",
+  {
+    ref: a,
+    className: o("w-full h-full flex items-center justify-between gap-4", t),
+    ...e,
+    children: r
+  }
+));
+s.displayName = "Statusbar";
+export {
+  s as Statusbar
+};

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

@@ -1,4 +1,14 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name Toolbar
+ * @description The secondary action strip that sits beneath the header. Strategic purpose: the canonical home for filters, view switches, and bulk actions that apply to the whole page — keeps them out of the header and off the content canvas. Pass to AppShell's `toolbarSlot`.
+ * @tags layout, toolbar, actions, filters, chrome
+ * @category layout
+ * @id toolbar
+ * @param {ReactNode} children - Toolbar content, typically Buttons or a SegmentedControl.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface ToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
 }

package/dist/components/layout/Toolbar.js

@@ -0,0 +1,20 @@
+import { jsx as l } from "react/jsx-runtime";
+import m from "react";
+import { cn as t } from "../../utils/cn.js";
+const f = m.forwardRef(({
+  className: r,
+  children: o,
+  ...e
+}, a) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: a,
+    className: t("w-full h-full flex items-center gap-2", r),
+    ...e,
+    children: o
+  }
+));
+f.displayName = "Toolbar";
+export {
+  f as Toolbar
+};

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

@@ -1,5 +1,23 @@
 import React from 'react';
 import { IconName } from '../ui/Icon';
+/**
+ * @wizard
+ * @name UserNav
+ * @description The signed-in user's avatar menu — identity plus account actions. Strategic purpose: the standard account affordance for the app shell's header, with logout, settings, profile, and an optional theme toggle already wired. Compose extra entries with ButtonItem rather than rebuilding the menu.
+ * @tags layout, navigation, user, account, menu, avatar, auth
+ * @category layout
+ * @id user-nav
+ * @param {object} user - The signed-in user: `{ name, email, avatarUrl? }`. Falls back to initials when no avatar is given.
+ * @param {function} onLogout - Called when the user chooses sign out.
+ * @param {function} onSettings - Called when the user chooses settings.
+ * @param {function} onProfile - Called when the user chooses profile.
+ * @param {boolean} showThemeToggle - Adds a theme switcher inside the menu.
+ * @param {ReactNode} trigger - Replaces the default avatar trigger.
+ * @param {string} align - Menu alignment against the trigger: 'start', 'center', or 'end'.
+ * @param {string} side - Which side the menu opens on: 'top', 'bottom', 'left', or 'right'.
+ * @param {ReactNode} children - Extra menu entries, typically ButtonItem.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface UserNavProps {
     user: {
         name: string;

package/dist/components/layout/UserNav.js

@@ -0,0 +1,148 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as z, useRef as E, useEffect as I } from "react";
+import { Avatar as L } from "../ui/Avatar.js";
+import { Icon as O } from "../ui/Icon.js";
+import { cn as o } from "../../utils/cn.js";
+import { useTheme as j } from "../../contexts/ThemeContext.js";
+const R = () => {
+  const { theme: t, setTheme: l } = j();
+  return /* @__PURE__ */ e("div", { className: "flex bg-muted/50 rounded-md p-0.5 gap-0.5", children: ["light", "dark", "system"].map((r) => /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: () => l(r),
+      className: o(
+        "flex-1 text-[10px] py-1 rounded-sm capitalize font-medium transition-colors",
+        t === r ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-muted/80"
+      ),
+      children: r
+    },
+    r
+  )) });
+}, b = ({
+  icon: t,
+  label: l,
+  onClick: a,
+  variant: r = "default",
+  className: i
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    onClick: a,
+    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
+    ),
+    children: [
+      /* @__PURE__ */ e(O, { name: t, className: "mr-2 h-4 w-4" }),
+      /* @__PURE__ */ e("span", { children: l })
+    ]
+  }
+), D = ({
+  user: t,
+  trigger: l,
+  align: a = "end",
+  side: r = "bottom",
+  className: i,
+  onLogout: h,
+  onSettings: m,
+  onProfile: u,
+  showThemeToggle: w = !0,
+  children: g
+}) => {
+  var N;
+  const [d, s] = z(!1), f = E(null);
+  I(() => {
+    const k = (T) => {
+      f.current && !f.current.contains(T.target) && s(!1);
+    };
+    return d && document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
+  }, [d]);
+  const x = {
+    bottom: {
+      end: "top-full right-0 mt-2",
+      center: "top-full left-1/2 -translate-x-1/2 mt-2",
+      start: "top-full left-0 mt-2"
+    },
+    top: {
+      end: "bottom-full right-0 mb-2",
+      center: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+      start: "bottom-full left-0 mb-2"
+    },
+    right: {
+      end: "right-auto left-full bottom-0 ml-2",
+      start: "right-auto left-full top-0 ml-2",
+      center: "right-auto left-full top-1/2 -translate-y-1/2 ml-2"
+    },
+    left: {
+      end: "left-auto right-full bottom-0 mr-2",
+      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: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => s(!d),
+        className: "flex items-center w-full focus:outline-none",
+        children: l || /* @__PURE__ */ e(
+          L,
+          {
+            name: t.name,
+            src: t.avatarUrl,
+            className: "h-8 w-8 hover:ring-2 hover:ring-primary/20 transition-all cursor-pointer"
+          }
+        )
+      }
+    ),
+    d && /* @__PURE__ */ n(
+      "div",
+      {
+        className: o(
+          // 🟢 FIXED: Using card background with backdrop blur for high visibility
+          "absolute z-50 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
+          "animate-in fade-in zoom-in-95 duration-100 p-1",
+          y
+        ),
+        children: [
+          /* @__PURE__ */ n("div", { className: "flex flex-col space-y-1 p-2 border-b border-border/50 bg-muted/30", children: [
+            /* @__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: [
+            u && /* @__PURE__ */ e(b, { icon: "user", label: "Profile", onClick: () => {
+              u(), s(!1);
+            } }),
+            m && /* @__PURE__ */ e(b, { icon: "settings", label: "Settings", onClick: () => {
+              m(), s(!1);
+            } })
+          ] }),
+          p && /* @__PURE__ */ n("div", { className: o("p-2", c && "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(
+            b,
+            {
+              icon: "log-out",
+              label: "Log out",
+              onClick: () => {
+                h(), s(!1);
+              },
+              variant: "destructive"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  b as ButtonItem,
+  D as UserNav
+};

package/dist/components/molecular/ConnectorOverlay.js

@@ -0,0 +1,27 @@
+import { jsx as e, jsxs as r, Fragment as l } from "react/jsx-runtime";
+import { cn as c } from "../../utils/cn.js";
+import { Button as s } from "../ui/Button.js";
+const u = ({
+  status: n,
+  message: t,
+  onRetry: o,
+  className: i
+}) => n === "connected" ? null : /* @__PURE__ */ e("div", { className: c("absolute inset-0 z-40 flex items-center justify-center bg-background/60 backdrop-blur-sm transition-all duration-300", i), children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center justify-center p-6 bg-card rounded-xl border border-border shadow-xl max-w-sm w-full text-center", children: [
+  n === "connecting" && /* @__PURE__ */ r(l, { children: [
+    /* @__PURE__ */ r("div", { className: "relative w-16 h-16 mb-4", children: [
+      /* @__PURE__ */ e("div", { className: "absolute inset-0 border-4 border-primary/20 rounded-full" }),
+      /* @__PURE__ */ e("div", { className: "absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" })
+    ] }),
+    /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-foreground mb-2", children: "Connecting to Signal" }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: t || "Establishing secure connection..." })
+  ] }),
+  n === "error" && /* @__PURE__ */ r(l, { children: [
+    /* @__PURE__ */ e("div", { className: "w-16 h-16 mb-4 rounded-full bg-destructive/10 flex items-center justify-center", children: /* @__PURE__ */ e("svg", { className: "w-8 h-8 text-destructive", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
+    /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-foreground mb-2", children: "Connection Failed" }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-6", children: t || "Unable to reach the signal source." }),
+    o && /* @__PURE__ */ e(s, { onClick: o, variant: "secondary", className: "w-full", children: "Retry Connection" })
+  ] })
+] }) });
+export {
+  u as ConnectorOverlay
+};

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

@@ -7,4 +7,18 @@ export interface DataCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     error?: Error | string | null;
     children?: React.ReactNode;
 }
+/**
+ * @wizard
+ * @name DataCard
+ * @description A Card that owns its own loading, error, and content states. Strategic purpose: the default wrapper for anything fetched — pass `loading` and `error` straight from your data hook and it renders a skeleton or an error message without the page branching on them. Use this instead of hand-rolling `{loading ? <Skeleton/> : error ? <Error/> : <Content/>}` around a plain Card.
+ * @tags data-display, card, container, loading, error, async
+ * @category data-display
+ * @id data-card
+ * @param {ReactNode} title - Card heading. Header block is omitted entirely when both title and description are absent.
+ * @param {ReactNode} description - Sub-heading under the title.
+ * @param {boolean} loading - Renders a pulsing skeleton overlay above the content.
+ * @param {Error|string} error - Replaces the content with an error message. Accepts an Error or a plain string.
+ * @param {ReactNode} children - The content, rendered when not in an error state.
+ * @param {string} className - Additional CSS classes.
+ */
 export declare const DataCard: React.ForwardRefExoticComponent<DataCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/molecular/DataCard.js

@@ -0,0 +1,44 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import i from "react";
+import { cn as o } from "../../utils/cn.js";
+const f = i.forwardRef(({
+  className: t,
+  title: d,
+  description: s,
+  data: u,
+  loading: r,
+  error: l,
+  children: c,
+  ...m
+}, n) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: n,
+    className: o(
+      "rounded-xl border border-border bg-card text-card-foreground shadow-sm flex flex-col overflow-hidden relative",
+      t
+    ),
+    ...m,
+    children: [
+      (d || s) && /* @__PURE__ */ a("div", { className: "flex flex-col space-y-1.5 p-4 @md:p-6 pb-0", children: [
+        d && /* @__PURE__ */ e("h3", { className: "font-semibold leading-none tracking-tight", children: d }),
+        s && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: s })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "p-4 @md:p-6 flex-1 flex flex-col relative z-10", children: [
+        r ? /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-card/80 backdrop-blur-sm z-20", children: /* @__PURE__ */ a("div", { className: "w-full h-full p-4 space-y-4", children: [
+          /* @__PURE__ */ e("div", { className: "w-1/3 h-4 bg-muted rounded animate-pulse" }),
+          /* @__PURE__ */ e("div", { className: "w-full h-12 bg-muted rounded animate-pulse" }),
+          /* @__PURE__ */ e("div", { className: "w-2/3 h-4 bg-muted rounded animate-pulse" })
+        ] }) }) : null,
+        l ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center p-4 text-center h-full", children: [
+          /* @__PURE__ */ e("span", { className: "text-destructive font-semibold mb-2", children: "Error Loading Data" }),
+          /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: typeof l == "string" ? l : l.message })
+        ] }) : c
+      ] })
+    ]
+  }
+));
+f.displayName = "DataCard";
+export {
+  f as DataCard
+};

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

@@ -1,4 +1,18 @@
 import React from 'react';
+/**
+ * @wizard
+ * @name StateMatrix
+ * @description A compact grid for cross-referencing entities against attributes, where each cell is a clickable state rather than free text. Strategic purpose: permission matrices, feature-by-plan grids, device-by-status boards — cases where DataTable's row model is the wrong shape. Handles its own loading and empty states.
+ * @tags data-display, matrix, grid, table, state, permissions
+ * @category data-display
+ * @id state-matrix
+ * @param {any[]} data - Rows to render.
+ * @param {object[]} columns - Column definitions, each `{ key, label }`.
+ * @param {function} onCellClick - Called with (row, columnKey) when a cell is activated.
+ * @param {boolean} loading - Renders a loading state instead of rows.
+ * @param {string} emptyMessage - Shown when data is empty.
+ * @param {string} className - Additional CSS classes.
+ */
 export interface StateMatrixProps {
     data: any[];
     columns: {