@ramme-io/ui 3.1.0 → 4.0.1

package/dist/components/molecular/StateMatrix.js

@@ -0,0 +1,34 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { cn as t } from "../../utils/cn.js";
+const x = ({
+  data: o,
+  columns: s,
+  onCellClick: a,
+  className: l,
+  emptyMessage: b = "No data available",
+  loading: c = !1
+}) => c ? /* @__PURE__ */ e("div", { className: t("w-full overflow-hidden rounded-xl border border-border bg-card", l), children: /* @__PURE__ */ e("div", { className: "p-4 space-y-4", children: Array.from({ length: 5 }).map((r, i) => /* @__PURE__ */ e("div", { className: "flex gap-4", children: s.map((d, h) => /* @__PURE__ */ e("div", { className: "h-6 flex-1 bg-muted rounded animate-pulse" }, h)) }, i)) }) }) : !o || o.length === 0 ? /* @__PURE__ */ n("div", { className: t("w-full flex flex-col items-center justify-center p-12 rounded-xl border border-dashed border-border bg-card/50 text-muted-foreground", l), children: [
+  /* @__PURE__ */ e("svg", { className: "w-12 h-12 mb-4 text-muted", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" }) }),
+  /* @__PURE__ */ e("span", { className: "text-sm", children: b })
+] }) : /* @__PURE__ */ e("div", { className: t("w-full overflow-x-auto rounded-xl border border-border bg-card", l), children: /* @__PURE__ */ n("table", { className: "w-full text-sm text-left", children: [
+  /* @__PURE__ */ e("thead", { className: "text-xs text-table-header-text uppercase bg-table-header border-b border-border", children: /* @__PURE__ */ e("tr", { children: s.map((r) => /* @__PURE__ */ e("th", { className: "px-6 py-3 font-semibold tracking-wider", children: r.label }, r.key)) }) }),
+  /* @__PURE__ */ e("tbody", { children: o.map((r, i) => /* @__PURE__ */ e(
+    "tr",
+    {
+      className: "border-b border-border last:border-b-0 hover:bg-table-hover transition-colors",
+      children: s.map((d) => /* @__PURE__ */ e(
+        "td",
+        {
+          className: t("px-6 py-4 whitespace-nowrap text-foreground", a && "cursor-pointer"),
+          onClick: () => a == null ? void 0 : a(r, d.key),
+          children: r[d.key] !== void 0 ? String(r[d.key]) : "-"
+        },
+        d.key
+      ))
+    },
+    i
+  )) })
+] }) });
+export {
+  x as StateMatrix
+};

package/dist/components/navigation/Breadcrumbs.js

@@ -0,0 +1,21 @@
+import { jsx as e, jsxs as a, Fragment as p } 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, {
+    size: 14,
+    // This is equivalent to Tailwind's h-3.5/w-3.5
+    className: "mr-1.5"
+  }) : null, r = /* @__PURE__ */ a(p, { children: [
+    x,
+    s
+  ] });
+  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 }),
+    !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 }) });
+export {
+  b as BreadcrumbItem,
+  y as Breadcrumbs
+};

package/dist/components/navigation/Menu.js

@@ -0,0 +1,87 @@
+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 { cn as E } from "../../utils/cn.js";
+const y = () => /* @__PURE__ */ n("div", { className: "my-1 h-px bg-border", role: "separator" }), R = ({
+  children: s,
+  onClick: c,
+  disabled: l,
+  icon: e,
+  asChild: t = !1
+}) => {
+  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",
+    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",
+    {
+      onClick: c,
+      disabled: l,
+      className: o,
+      role: "menuitem",
+      children: t ? s : /* @__PURE__ */ p(b, { children: [
+        r,
+        s
+      ] })
+    }
+  );
+}, O = ({
+  trigger: s,
+  children: c,
+  position: l = "bottom-right"
+}) => {
+  const [e, t] = v(!1), o = d(null), r = d(null), u = () => {
+    r.current && clearTimeout(r.current), t(!0);
+  }, g = () => {
+    r.current = window.setTimeout(() => t(!1), 150);
+  }, 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), () => {
+    document.removeEventListener("mousedown", i);
+  }), [e, i]), /* @__PURE__ */ p(
+    "div",
+    {
+      className: "relative inline-block text-left",
+      ref: o,
+      onMouseEnter: u,
+      onMouseLeave: g,
+      children: [
+        /* @__PURE__ */ n("div", { onClick: h, className: "cursor-pointer", children: s }),
+        e && /* @__PURE__ */ n(
+          "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 ${(() => {
+              switch (l) {
+                case "bottom-left":
+                  return "top-full left-0 mt-1";
+                case "bottom-right":
+                  return "top-full right-0 mt-1";
+                case "top-left":
+                  return "bottom-full left-0 mb-1";
+                case "top-right":
+                  return "bottom-full right-0 mb-1";
+                default:
+                  return "top-full right-0 mt-2";
+              }
+            })()}`,
+            role: "menu",
+            "aria-orientation": "vertical",
+            children: /* @__PURE__ */ n("div", { className: "p-2", role: "none", children: c })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  O as Menu,
+  y as MenuDivider,
+  R as MenuItem
+};

package/dist/components/navigation/MobileNav.js

@@ -0,0 +1,130 @@
+import { jsxs as l, Fragment as g, jsx as r } from "react/jsx-runtime";
+import { useState as w, useCallback as f } from "react";
+import { cn as c } from "../../utils/cn.js";
+import { Icon as a } from "../ui/Icon.js";
+import { Drawer as y } from "../layout/Drawer.js";
+const C = ({ tab: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
+  "button",
+  {
+    onClick: s,
+    className: c(
+      "flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 transition-colors duration-150",
+      o ? "text-primary" : "text-muted-foreground active:text-foreground"
+    ),
+    children: [
+      /* @__PURE__ */ r(
+        a,
+        {
+          name: n.icon,
+          className: c(
+            "h-5 w-5 transition-transform duration-150",
+            o && "scale-110"
+          )
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: n.label })
+    ]
+  }
+), D = ({ item: n, isActive: o, onTap: s }) => /* @__PURE__ */ l(
+  "button",
+  {
+    onClick: s,
+    className: c(
+      "flex w-full items-center gap-3 rounded-lg p-3 text-left transition-colors duration-150",
+      o ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted active:bg-muted"
+    ),
+    children: [
+      /* @__PURE__ */ r(a, { name: n.icon, className: "h-5 w-5 shrink-0" }),
+      /* @__PURE__ */ r("span", { className: "text-fluid-base font-medium", children: n.label })
+    ]
+  }
+), z = ({
+  tabs: n,
+  secondaryItems: o = [],
+  activeTabId: s,
+  onNavigate: t,
+  drawerTitle: u = "Menu",
+  drawerHeader: m,
+  drawerFooter: x,
+  className: h
+}) => {
+  const [p, d] = w(!1), b = f(
+    (e) => {
+      var i;
+      (i = e.onClick) == null || i.call(e), t == null || t(e);
+    },
+    [t]
+  ), k = f(
+    (e) => {
+      var i;
+      (i = e.onClick) == null || i.call(e), t == null || t(e), d(!1);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ l(g, { children: [
+    /* @__PURE__ */ r(
+      "nav",
+      {
+        className: c(
+          "fixed inset-x-0 bottom-0 z-40 md:hidden",
+          "border-t border-border bg-card/95 backdrop-blur-md",
+          "supports-[backdrop-filter]:bg-card/80",
+          // Safe area for notched phones (iPhone etc.)
+          "pb-[env(safe-area-inset-bottom,0px)]",
+          h
+        ),
+        children: /* @__PURE__ */ l("div", { className: "flex items-stretch", children: [
+          n.map((e) => /* @__PURE__ */ r(
+            C,
+            {
+              tab: e,
+              isActive: s === e.id,
+              onTap: () => b(e)
+            },
+            e.id
+          )),
+          o.length > 0 && /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: () => d(!0),
+              className: c(
+                "flex flex-1 flex-col items-center justify-center gap-0.5 py-1.5 transition-colors duration-150",
+                p ? "text-primary" : "text-muted-foreground active:text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ r(a, { name: "menu", className: "h-5 w-5" }),
+                /* @__PURE__ */ r("span", { className: "text-[10px] font-medium leading-tight", children: "More" })
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ l(
+      y,
+      {
+        isOpen: p,
+        onClose: () => d(!1),
+        position: "bottom",
+        size: "85dvh",
+        title: u,
+        footer: x,
+        children: [
+          m && /* @__PURE__ */ r("div", { className: "mb-fluid-md pb-fluid-sm border-b border-border", children: m }),
+          /* @__PURE__ */ r("div", { className: "space-y-1", children: o.map((e) => /* @__PURE__ */ r(
+            D,
+            {
+              item: e,
+              isActive: s === e.id,
+              onTap: () => k(e)
+            },
+            e.id
+          )) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  z as MobileNav
+};

package/dist/components/navigation/Pagination.js

@@ -0,0 +1,71 @@
+import { jsxs as x, jsx as m } from "react/jsx-runtime";
+import { useMemo as N, useCallback as o } from "react";
+import { Button as e } from "../ui/Button.js";
+const j = ({
+  currentPage: s,
+  totalPages: l,
+  onPageChange: n,
+  maxPageButtons: c = 5,
+  className: p
+}) => {
+  const t = N(() => {
+    const i = [];
+    if (l <= c) {
+      for (let f = 1; f <= l; f++)
+        i.push(f);
+      return i;
+    }
+    const r = Math.floor(c / 2);
+    let h = Math.max(1, s - r), d = Math.min(l, s + r);
+    s - r <= 1 && (d = c), s + r >= l && (h = l - c + 1), h > 1 && (i.push(1), h > 2 && i.push("..."));
+    for (let f = h; f <= d; f++)
+      i.push(f);
+    return d < l && (d < l - 1 && i.push("..."), i.push(l)), i;
+  }, [s, l, c]), v = o((i) => {
+    n(i);
+  }, [n]), k = o(() => {
+    n(s - 1);
+  }, [s, n]), u = o(() => {
+    n(s + 1);
+  }, [s, n]);
+  return l <= 1 ? null : /* @__PURE__ */ x("nav", { className: `flex items-center justify-center gap-2 ${p || ""}`, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ m(
+      e,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: k,
+        disabled: s === 1,
+        iconLeft: "chevron-left",
+        children: "Previous"
+      }
+    ),
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-1", children: t.map(
+      (i, r) => typeof i == "number" ? /* @__PURE__ */ m(
+        e,
+        {
+          variant: s === i ? "primary" : "ghost",
+          size: "sm",
+          onClick: () => v(i),
+          className: "w-10",
+          children: i
+        },
+        i
+      ) : /* @__PURE__ */ m("span", { className: "px-2 py-1 text-sm text-muted-foreground", children: "..." }, `ellipsis-${r}`)
+    ) }),
+    /* @__PURE__ */ m(
+      e,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: u,
+        disabled: s === l,
+        iconRight: "chevron-right",
+        children: "Next"
+      }
+    )
+  ] });
+};
+export {
+  j as Pagination
+};

package/dist/components/navigation/Stepper.js

@@ -0,0 +1,34 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import n from "react";
+import { Icon as d } from "../ui/Icon.js";
+const b = ({ steps: i, currentStep: r, className: c }) => /* @__PURE__ */ e("div", { className: `flex justify-between items-start ${c || ""}`, children: i.map((l, t) => {
+  const s = t < r, m = t === r, o = t > r;
+  return /* @__PURE__ */ a(n.Fragment, { children: [
+    /* @__PURE__ */ a("div", { className: "flex flex-col items-center text-center", children: [
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: `w-8 h-8 rounded-full flex items-center justify-center border-2 transition-all duration-300
+                  ${s ? "bg-primary border-primary text-white" : ""}
+                  ${m ? "bg-card border-primary text-primary" : ""}
+                  ${o ? "bg-card border-border text-text-light" : ""}
+                `,
+          children: s ? /* @__PURE__ */ e(d, { name: "check", size: 16 }) : /* @__PURE__ */ e("span", { children: t + 1 })
+        }
+      ),
+      /* @__PURE__ */ a("div", { className: "mt-2", children: [
+        /* @__PURE__ */ e("p", { className: `font-semibold text-sm ${m ? "text-primary" : "text-text"}`, children: l.label }),
+        l.summary && /* @__PURE__ */ e("p", { className: "text-xs text-text-light mt-1", children: l.summary })
+      ] })
+    ] }),
+    t < i.length - 1 && /* @__PURE__ */ e("div", { className: "flex-1 mt-4 mx-2 h-0.5", children: /* @__PURE__ */ e(
+      "div",
+      {
+        className: `h-full w-full rounded-full transition-colors duration-300 ${t < r ? "bg-primary" : "bg-border"}`
+      }
+    ) })
+  ] }, t);
+}) });
+export {
+  b as Stepper
+};

package/dist/components/navigation/Tabs.js

@@ -0,0 +1,40 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import p, { useMemo as f, useState as g, useCallback as v } from "react";
+import { cn as l } from "../../utils/cn.js";
+const k = ({ children: o }) => /* @__PURE__ */ a("div", { role: "tabpanel", className: "p-4 bg-card rounded-b-lg border border-t-0 border-border", children: o }), C = ({ children: o, defaultActiveTab: e, className: c, size: s = "md" }) => {
+  const d = f(() => e || (o.length > 0 ? o[0].props.id : ""), [o, e]), [n, m] = g(d), b = v((r) => m(r), []);
+  return /* @__PURE__ */ i("div", { className: c, children: [
+    /* @__PURE__ */ a("div", { className: "flex border-b border-border mb-px", role: "tablist", children: o.map((r) => {
+      const t = r.props.icon, u = s === "sm" ? 14 : 16, x = t && p.isValidElement(t) ? p.cloneElement(t, {
+        size: u,
+        className: l("mr-2", s === "sm" ? "mt-[1px]" : "")
+        // slight alignment tweak for smaller text
+      }) : null;
+      return /* @__PURE__ */ i(
+        "button",
+        {
+          id: `tab-${r.props.id}`,
+          role: "tab",
+          "aria-controls": r.props.id,
+          "aria-selected": n === r.props.id,
+          onClick: () => b(r.props.id),
+          className: l(
+            "inline-flex items-center text-text font-medium border-b-2 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+            s === "sm" ? "px-3 py-1.5 text-sm" : "px-4 py-2 text-lg",
+            n === r.props.id ? "border-primary" : "border-transparent hover:border-border"
+          ),
+          children: [
+            x,
+            r.props.label
+          ]
+        },
+        r.props.id
+      );
+    }) }),
+    o.find((r) => r.props.id === n)
+  ] });
+};
+export {
+  k as TabPanel,
+  C as Tabs
+};

package/dist/components/showroom/ShowroomCanvas.js

@@ -0,0 +1,121 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+import { Icon as m } from "../ui/Icon.js";
+import { SkuBadge as c } from "./SkuBadge.js";
+const x = ({
+  name: r,
+  type: d,
+  description: o,
+  defaultVal: s
+}) => /* @__PURE__ */ a("tr", { className: "border-b border-border/50 last:border-0", children: [
+  /* @__PURE__ */ e("td", { className: "py-2 pr-4 align-top", children: /* @__PURE__ */ e("code", { className: "text-xs font-mono text-foreground", children: r }) }),
+  /* @__PURE__ */ e("td", { className: "py-2 pr-4 align-top", children: /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-cyan-400 bg-cyan-500/5 border border-cyan-500/15 rounded px-1 py-0.5", children: d }) }),
+  /* @__PURE__ */ e("td", { className: "py-2 pr-4 align-top text-xs text-muted-foreground", children: o }),
+  /* @__PURE__ */ e("td", { className: "py-2 align-top text-[10px] text-muted-foreground/60 font-mono", children: s ?? "—" })
+] }), h = () => /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-center h-full gap-4 text-center p-8", children: /* @__PURE__ */ a("div", { className: "rounded-xl border border-dashed border-border p-6", children: [
+  /* @__PURE__ */ e(m, { name: "component", className: "h-8 w-8 text-muted-foreground/40 mx-auto mb-3" }),
+  /* @__PURE__ */ e("p", { className: "text-sm font-medium text-muted-foreground", children: "Select a component" }),
+  /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground/60 mt-1 max-w-xs", children: "Choose any item from the sidebar to inspect its SKU, metadata, props, and live preview." })
+] }) }), v = ({
+  entry: r,
+  renderComponent: d,
+  className: o
+}) => {
+  if (!r) return /* @__PURE__ */ e(h, {});
+  const s = r.props && r.props.length > 0, p = !!d;
+  return /* @__PURE__ */ a("div", { className: i("flex flex-col h-full overflow-y-auto custom-scrollbar", o), children: [
+    /* @__PURE__ */ e("div", { className: "flex-shrink-0 border-b border-border bg-background/80 backdrop-blur-sm px-6 py-4 sticky top-0 z-10", children: /* @__PURE__ */ a("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ a("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 flex-wrap", children: [
+          /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-foreground leading-none", children: r.humanLabel ?? r.name }),
+          /* @__PURE__ */ a("span", { className: "text-xs text-muted-foreground/60 bg-muted rounded px-1.5 py-0.5 font-mono leading-none", children: [
+            "v",
+            r.version
+          ] })
+        ] }),
+        r.sku && /* @__PURE__ */ e("div", { className: "mt-1.5", children: /* @__PURE__ */ e(c, { sku: r.sku, size: "md" }) })
+      ] }),
+      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 justify-end flex-shrink-0 max-w-[40%]", children: r.tags.slice(0, 5).map((t) => /* @__PURE__ */ e(
+        "span",
+        {
+          className: "text-[9px] uppercase tracking-wider font-medium text-muted-foreground/60 bg-muted/50 border border-border/50 rounded px-1.5 py-0.5",
+          children: t
+        },
+        t
+      )) })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "flex-1 p-6 space-y-6", children: [
+      (r.humanDescription ?? r.description) && /* @__PURE__ */ e("section", { children: /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground leading-relaxed", children: r.humanDescription ?? r.description }) }),
+      /* @__PURE__ */ a("section", { className: "grid grid-cols-2 md:grid-cols-3 gap-3", children: [
+        /* @__PURE__ */ e(l, { label: "Component ID", value: r.id, mono: !0 }),
+        /* @__PURE__ */ e(l, { label: "Category", value: r.category }),
+        /* @__PURE__ */ e(l, { label: "Import Path", value: r.importPath ?? r.filePath, mono: !0, truncate: !0 })
+      ] }),
+      p && /* @__PURE__ */ a("section", { children: [
+        /* @__PURE__ */ e(n, { icon: "eye", label: "Live Preview" }),
+        /* @__PURE__ */ e("div", { className: "mt-3 rounded-lg border border-dashed border-border bg-muted/20 p-6 flex items-center justify-center min-h-[120px]", children: d(r) })
+      ] }),
+      s && /* @__PURE__ */ a("section", { children: [
+        /* @__PURE__ */ e(n, { icon: "list", label: "Props API" }),
+        /* @__PURE__ */ e("div", { className: "mt-3 overflow-x-auto rounded-lg border border-border bg-card", children: /* @__PURE__ */ a("table", { className: "w-full text-left", children: [
+          /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-border bg-muted/30", children: [
+            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Name" }),
+            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Type" }),
+            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Description" }),
+            /* @__PURE__ */ e("th", { className: "px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Default" })
+          ] }) }),
+          /* @__PURE__ */ e("tbody", { className: "px-3", children: r.props.map((t, u) => /* @__PURE__ */ e(
+            x,
+            {
+              name: t.name,
+              type: t.type,
+              description: t.description,
+              defaultVal: t.default
+            },
+            `${t.name}-${u}`
+          )) })
+        ] }) })
+      ] }),
+      r.sku && /* @__PURE__ */ a("section", { children: [
+        /* @__PURE__ */ e(n, { icon: "cpu", label: "Machine Identity" }),
+        /* @__PURE__ */ a("div", { className: "mt-3 rounded-lg border border-border bg-card p-4 font-mono text-xs space-y-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ e("span", { className: "text-muted-foreground/50 w-32 flex-shrink-0", children: "sku" }),
+            /* @__PURE__ */ e(c, { sku: r.sku, size: "sm" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ e("span", { className: "text-muted-foreground/50 w-32 flex-shrink-0", children: "name" }),
+            /* @__PURE__ */ e("span", { className: "text-foreground", children: r.name })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ e("span", { className: "text-muted-foreground/50 w-32 flex-shrink-0", children: "humanLabel" }),
+            /* @__PURE__ */ e("span", { className: "text-foreground", children: r.humanLabel ?? r.name })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ e("span", { className: "text-muted-foreground/50 w-32 flex-shrink-0", children: "version" }),
+            /* @__PURE__ */ e("span", { className: "text-foreground", children: r.version })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ e("span", { className: "text-muted-foreground/50 w-32 flex-shrink-0", children: "category" }),
+            /* @__PURE__ */ e("span", { className: "text-foreground", children: r.category })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}, l = ({
+  label: r,
+  value: d,
+  mono: o,
+  truncate: s
+}) => /* @__PURE__ */ a("div", { className: "rounded-md border border-border bg-card p-3", children: [
+  /* @__PURE__ */ e("p", { className: "text-[9px] uppercase tracking-wider text-muted-foreground/60 font-semibold mb-1", children: r }),
+  /* @__PURE__ */ e("p", { className: i("text-xs text-foreground leading-snug", o && "font-mono", s && "truncate"), title: s ? d : void 0, children: d })
+] }), n = ({ icon: r, label: d }) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-1", children: [
+  /* @__PURE__ */ e(m, { name: r, className: "h-3.5 w-3.5 text-muted-foreground" }),
+  /* @__PURE__ */ e("span", { className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: d }),
+  /* @__PURE__ */ e("div", { className: "flex-1 border-t border-border/50" })
+] });
+export {
+  v as ShowroomCanvas
+};

package/dist/components/showroom/ShowroomContainer.js

@@ -0,0 +1,103 @@
+import { jsxs as r, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { useMemo as h, useState as f, useCallback as b } from "react";
+import { cn as N } from "../../utils/cn.js";
+import { Icon as a } from "../ui/Icon.js";
+import { Badge as y } from "../ui/Badge.js";
+import { SkuBadge as v } from "./SkuBadge.js";
+import { ShowroomSidebar as w } from "./ShowroomSidebar.js";
+import { ShowroomCanvas as k } from "./ShowroomCanvas.js";
+const S = (s) => [
+  "components",
+  "layouts",
+  "hooks",
+  "utils",
+  "data"
+].flatMap((o) => s[o] ?? []), A = ({
+  manifest: s,
+  renderComponent: d,
+  title: o = "Ramme Showroom",
+  className: x
+}) => {
+  const n = h(() => S(s), [s]), [l, u] = f(null), [c, p] = f(""), t = h(
+    () => n.find((i) => i.id === l) ?? null,
+    [n, l]
+  ), g = b((i) => {
+    u(i.id);
+  }, []);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: N(
+        "flex h-full w-full overflow-hidden bg-background text-foreground text-sm font-sans transition-colors duration-300",
+        x
+      ),
+      children: [
+        /* @__PURE__ */ e("aside", { className: "w-60 flex-shrink-0 flex flex-col z-20", children: /* @__PURE__ */ e(
+          w,
+          {
+            entries: n,
+            activeEntryId: l,
+            onSelectEntry: g,
+            searchQuery: c,
+            onSearchChange: p
+          }
+        ) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col flex-1 min-w-0 h-full", children: [
+          /* @__PURE__ */ r("header", { className: "h-14 flex-shrink-0 flex items-center justify-between px-5 border-b border-border bg-background/80 backdrop-blur-md z-30", children: [
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e(a, { name: "component", className: "h-4 w-4 text-primary" }),
+              /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-foreground", children: o }),
+              /* @__PURE__ */ r(y, { variant: "secondary", className: "text-[10px] px-1.5 py-0 h-4 leading-none", children: [
+                n.length,
+                " assets"
+              ] })
+            ] }),
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ e(a, { name: "cpu", className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ e("span", { children: "SKU Catalog" })
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-9 flex-shrink-0 flex items-center gap-3 px-5 border-b border-border bg-muted/20 z-20", children: t ? /* @__PURE__ */ r(m, { children: [
+            /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: t.category }),
+            /* @__PURE__ */ e(a, { name: "chevron-right", className: "h-3 w-3 text-muted-foreground/50" }),
+            /* @__PURE__ */ e("span", { className: "text-xs text-foreground font-medium", children: t.humanLabel ?? t.name }),
+            t.sku && /* @__PURE__ */ r(m, { children: [
+              /* @__PURE__ */ e(a, { name: "chevron-right", className: "h-3 w-3 text-muted-foreground/50" }),
+              /* @__PURE__ */ e(v, { sku: t.sku, size: "sm" })
+            ] })
+          ] }) : /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground/60 italic", children: "No component selected — pick one from the sidebar" }) }),
+          /* @__PURE__ */ e("main", { className: "flex-1 overflow-hidden relative", children: /* @__PURE__ */ e(
+            k,
+            {
+              entry: t,
+              renderComponent: d,
+              className: "h-full"
+            }
+          ) }),
+          /* @__PURE__ */ r("footer", { className: "h-6 flex-shrink-0 flex items-center justify-between px-4 border-t border-border bg-card text-[10px] text-muted-foreground z-20", children: [
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ r("span", { children: [
+                n.length,
+                " entries across ",
+                Object.keys(s).length,
+                " sections"
+              ] }),
+              c && /* @__PURE__ */ r("span", { className: "text-primary/70", children: [
+                '· filtered by "',
+                c,
+                '"'
+              ] })
+            ] }),
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e("span", { className: "uppercase tracking-wider opacity-50", children: "@ramme-io/ui" }),
+              /* @__PURE__ */ e(a, { name: "layers", className: "h-3 w-3 opacity-40" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  A as ShowroomContainer
+};