@schandlergarcia/sf-web-components 1.8.0 → 1.9.1

package/dist/components/workspace/ComponentRegistry.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import b from "react";
+import * as b from "react";
 import "../library/theme/AppThemeProvider.js";
 import u from "../library/ui/UIButton.js";
 import p from "../library/ui/Chip.js";
@@ -18,14 +18,14 @@ import "react-dom";
 import "../library/data/DataModeProvider.js";
 import "@heroicons/react/24/solid";
 const y = {
-  NarrativeSummary({ summary: t, title: a }) {
+  NarrativeSummary({ summary: r, title: a }) {
     return /* @__PURE__ */ i("div", { className: "text-sm text-slate-600 dark:text-slate-300", children: [
       a && /* @__PURE__ */ e("div", { className: "mb-1 font-medium text-slate-900 dark:text-slate-50", children: a }),
-      t
+      r
     ] });
   },
-  MetricsStrip({ metrics: t = [], title: a, collapsible: d = !1, collapsed: l = !1 }) {
-    const [o, s] = b.useState(l), n = t.length ? t : [
+  MetricsStrip({ metrics: r = [], title: a, collapsible: d = !1, collapsed: l = !1 }) {
+    const [o, s] = b.useState(l), n = r.length ? r : [
       { label: "Metric A", value: "—", trend: null },
       { label: "Metric B", value: "—", trend: null },
       { label: "Metric C", value: "—", trend: null }
@@ -40,7 +40,7 @@ const y = {
           /* @__PURE__ */ i("span", { children: [
             a ?? "Metrics",
             ": ",
-            n.map((r) => `${r.label} ${r.value}`).join(" · ")
+            n.map((t) => `${t.label} ${t.value}`).join(" · ")
           ] }),
           /* @__PURE__ */ e("span", { children: "▸" })
         ]
@@ -58,26 +58,26 @@ const y = {
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4", children: n.map((r) => /* @__PURE__ */ i("div", { className: "min-w-[80px]", children: [
-        /* @__PURE__ */ e("div", { className: "text-xs text-slate-400 dark:text-slate-500", children: r.label }),
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4", children: n.map((t) => /* @__PURE__ */ i("div", { className: "min-w-[80px]", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-slate-400 dark:text-slate-500", children: t.label }),
         /* @__PURE__ */ i("div", { className: "flex items-baseline gap-1.5", children: [
-          /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: r.value }),
-          r.trend && /* @__PURE__ */ e("span", { className: `text-xs ${String(r.trend).startsWith?.("+") || r.trend > 0 ? "text-red-500" : "text-emerald-500"}`, children: typeof r.trend == "number" && r.trend > 0 ? `+${r.trend}` : r.trend })
+          /* @__PURE__ */ e("span", { className: "text-sm font-semibold text-slate-700 dark:text-slate-200", children: t.value }),
+          t.trend && /* @__PURE__ */ e("span", { className: `text-xs ${String(t.trend).startsWith?.("+") || typeof t.trend == "number" && t.trend > 0 ? "text-red-500" : "text-emerald-500"}`, children: typeof t.trend == "number" && t.trend > 0 ? `+${t.trend}` : t.trend })
         ] })
-      ] }, r.label)) })
+      ] }, t.label)) })
     ] });
   },
-  ItemList({ items: t = [], title: a, onItemClick: d }) {
+  ItemList({ items: r = [], title: a, onItemClick: d }) {
     const [l, o] = b.useState(null);
-    return t.length ? /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+    return r.length ? /* @__PURE__ */ i("div", { className: "space-y-2", children: [
       a && /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ e("span", { className: "text-sm font-medium text-slate-900 dark:text-slate-50", children: a }),
         /* @__PURE__ */ i("span", { className: "text-xs text-slate-400 dark:text-slate-500", children: [
-          t.length,
+          r.length,
           " items"
         ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: "space-y-1.5", children: t.map((s, n) => /* @__PURE__ */ i("div", { className: "rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900", children: [
+      /* @__PURE__ */ e("div", { className: "space-y-1.5", children: r.map((s, n) => /* @__PURE__ */ i("div", { className: "rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900", children: [
         /* @__PURE__ */ e(
           "button",
           {
@@ -95,19 +95,19 @@ const y = {
             ] })
           }
         ),
-        l === (s.id ?? n) && s.actions && /* @__PURE__ */ e("div", { className: "border-t border-slate-100 px-3 py-2 dark:border-slate-800", children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: s.actions.map((r, m) => /* @__PURE__ */ e(
+        l === (s.id ?? n) && s.actions && /* @__PURE__ */ e("div", { className: "border-t border-slate-100 px-3 py-2 dark:border-slate-800", children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: s.actions.map((t, m) => /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             className: `rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${m === 0 ? "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200" : "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"}`,
-            children: typeof r == "string" ? r : r.label
+            children: typeof t == "string" ? t : t.label
           },
-          typeof r == "string" ? r : r.label
+          typeof t == "string" ? t : t.label
         )) }) })
       ] }, s.id ?? n)) })
     ] }) : /* @__PURE__ */ e("div", { className: "text-sm text-slate-500 dark:text-slate-400", children: "No items." });
   },
-  DataTable({ title: t, subtitle: a, columns: d = [], data: l = [], rows: o, searchable: s = !0, sortable: n = !0, paginated: r = !0, pageSize: m = 5 }) {
+  DataTable({ title: r, subtitle: a, columns: d = [], data: l = [], rows: o, searchable: s = !0, sortable: n = !0, paginated: t = !0, pageSize: m = 5 }) {
     const c = l.length ? l : o ?? [], x = d.length ? d : [
       { key: "name", label: "Name" },
       { key: "status", label: "Status" },
@@ -116,23 +116,23 @@ const y = {
     return /* @__PURE__ */ e(
       k,
       {
-        title: t ?? "Data",
+        title: r ?? "Data",
         subtitle: a,
         columns: x,
         data: c,
         searchable: s,
         sortable: n,
-        paginated: r,
+        paginated: t,
         pageSize: m
       }
     );
   },
-  DataChart({ title: t, subtitle: a, chartType: d = "line", data: l = [], height: o = 200 }) {
-    const s = l.length ? l : Array.from({ length: 12 }, (n, r) => ({ x: r, y: Math.random() * 100 }));
+  DataChart({ title: r, subtitle: a, chartType: d = "line", data: l = [], height: o = 200 }) {
+    const s = l.length ? l : Array.from({ length: 12 }, (n, t) => ({ x: t, y: Math.random() * 100 }));
     return /* @__PURE__ */ e(
       h,
       {
-        title: t ?? "Trend",
+        title: r ?? "Trend",
         subtitle: a ?? "Data visualization",
         chartType: d,
         height: o,
@@ -142,34 +142,34 @@ const y = {
             data: s,
             responsive: !0,
             height: o,
-            ariaLabel: t,
-            renderChart: (n, r, m, c) => N.lineChart(n, r, m, c),
+            ariaLabel: r,
+            renderChart: (n, t, m, c) => N.lineChart(n, t, m, c),
             options: { xKey: "x", yKey: "y", showGrid: !0, showAxes: !0 }
           }
         )
       }
     );
   },
-  MetricCard({ title: t, label: a, value: d, trend: l, change: o, changeType: s, color: n, icon: r, description: m }) {
+  MetricCard({ title: r, label: a, value: d, trend: l, change: o, changeType: s, color: n, icon: t, description: m }) {
     return /* @__PURE__ */ e(
       g,
       {
-        title: t ?? a,
+        title: r ?? a,
         value: d ?? "—",
         trend: l,
         change: o,
         changeType: s,
         color: n,
-        icon: r,
-        description: m
+        icon: t,
+        subtitle: m
       }
     );
   },
-  StatusCard({ title: t, subtitle: a, status: d, items: l, layout: o, showProgress: s, showTimestamp: n }) {
+  StatusCard({ title: r, subtitle: a, status: d, items: l, layout: o, showProgress: s, showTimestamp: n }) {
     return /* @__PURE__ */ e(
       f,
       {
-        title: t,
+        title: r,
         subtitle: a,
         status: d,
         items: l,
@@ -179,10 +179,10 @@ const y = {
       }
     );
   },
-  ActionList({ actions: t = [], title: a, onAction: d }) {
+  ActionList({ actions: r = [], title: a, onAction: d }) {
     return /* @__PURE__ */ i("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900", children: [
       a && /* @__PURE__ */ e("div", { className: "mb-3 text-sm font-medium text-slate-900 dark:text-slate-50", children: a }),
-      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: t.map((l, o) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: r.map((l, o) => /* @__PURE__ */ e(
         u,
         {
           size: "sm",
@@ -194,7 +194,7 @@ const y = {
       )) })
     ] });
   },
-  CalloutCard({ title: t, message: a, tone: d = "neutral" }) {
+  CalloutCard({ title: r, message: a, tone: d = "neutral" }) {
     const l = {
       neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
       success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
@@ -202,31 +202,31 @@ const y = {
       danger: "border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200"
     };
     return /* @__PURE__ */ i("div", { className: `rounded-xl border p-4 ${l[d] ?? l.neutral}`, children: [
-      t && /* @__PURE__ */ e("div", { className: "mb-1 text-sm font-semibold", children: t }),
+      r && /* @__PURE__ */ e("div", { className: "mb-1 text-sm font-semibold", children: r }),
       /* @__PURE__ */ e("div", { className: "text-sm", children: a })
     ] });
   },
   Divider() {
     return /* @__PURE__ */ e("div", { className: "h-px bg-slate-200 dark:bg-slate-800" });
   },
-  Spacer({ size: t = "md" }) {
+  Spacer({ size: r = "md" }) {
     const a = { sm: "h-2", md: "h-4", lg: "h-6" };
-    return /* @__PURE__ */ e("div", { className: a[t] ?? a.md });
+    return /* @__PURE__ */ e("div", { className: a[r] ?? a.md });
   }
 };
 let C = { ...y };
 function w() {
   return C;
 }
-function V(t, a) {
-  const l = w()[t.type];
-  return l ? /* @__PURE__ */ e(l, { ...t.props ?? {} }, t.id ?? a) : /* @__PURE__ */ i("div", { className: "rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700", children: [
+function P(r, a) {
+  const l = w()[r.type];
+  return l ? /* @__PURE__ */ e(l, { ...r.props ?? {} }, r.id ?? a) : /* @__PURE__ */ i("div", { className: "rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700", children: [
     "Unknown component: ",
-    t.type
+    r.type
   ] }, a);
 }
 export {
   w as getComponentRegistry,
-  V as renderSchemaComponent
+  P as renderSchemaComponent
 };
 //# sourceMappingURL=ComponentRegistry.js.map

package/dist/components/workspace/ComponentRegistry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentRegistry.js","sources":["../../../src/components/workspace/ComponentRegistry.jsx"],"sourcesContent":["import React from \"react\";\nimport {\n  BaseCard,\n  MetricCard,\n  TableCard,\n  ChartCard,\n  D3Chart,\n  D3ChartTemplates,\n  StatusCard,\n  ListCard,\n  UIButton,\n  UIChip,\n  UIText\n} from \"@/components/library\";\n\nconst BUILTIN_COMPONENTS = {\n  NarrativeSummary({ summary, title }) {\n    return (\n      <div className=\"text-sm text-slate-600 dark:text-slate-300\">\n        {title && <div className=\"mb-1 font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n        {summary}\n      </div>\n    );\n  },\n\n  MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }) {\n    const [collapsed, setCollapsed] = React.useState(initialCollapsed);\n\n    const items = metrics.length ? metrics : [\n      { label: \"Metric A\", value: \"—\", trend: null },\n      { label: \"Metric B\", value: \"—\", trend: null },\n      { label: \"Metric C\", value: \"—\", trend: null }\n    ];\n\n    if (collapsible && collapsed) {\n      return (\n        <button\n          type=\"button\"\n          onClick={() => setCollapsed(false)}\n          className=\"flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800\"\n        >\n          <span>{title ?? \"Metrics\"}: {items.map(m => `${m.label} ${m.value}`).join(\" · \")}</span>\n          <span>▸</span>\n        </button>\n      );\n    }\n\n    return (\n      <div className=\"rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900\">\n        {(title || collapsible) && (\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-xs font-medium text-slate-500 dark:text-slate-400\">{title ?? \"Metrics\"}</span>\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed(true)}\n                className=\"text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n              >\n                Collapse\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex flex-wrap gap-4\">\n          {items.map((m) => (\n            <div key={m.label} className=\"min-w-[80px]\">\n              <div className=\"text-xs text-slate-400 dark:text-slate-500\">{m.label}</div>\n              <div className=\"flex items-baseline gap-1.5\">\n                <span className=\"text-sm font-semibold text-slate-700 dark:text-slate-200\">{m.value}</span>\n                {m.trend && (\n                  <span className={`text-xs ${String(m.trend).startsWith?.(\"+\") || m.trend > 0 ? \"text-red-500\" : \"text-emerald-500\"}`}>\n                    {typeof m.trend === \"number\" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n\n  ItemList({ items = [], title, onItemClick }) {\n    const [expanded, setExpanded] = React.useState(null);\n    if (!items.length) {\n      return <div className=\"text-sm text-slate-500 dark:text-slate-400\">No items.</div>;\n    }\n    return (\n      <div className=\"space-y-2\">\n        {title && (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</span>\n            <span className=\"text-xs text-slate-400 dark:text-slate-500\">{items.length} items</span>\n          </div>\n        )}\n        <div className=\"space-y-1.5\">\n          {items.map((item, idx) => (\n            <div key={item.id ?? idx} className=\"rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900\">\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setExpanded(expanded === (item.id ?? idx) ? null : (item.id ?? idx));\n                  onItemClick?.(item);\n                }}\n                className=\"flex w-full items-start justify-between gap-3 p-3 text-left\"\n              >\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">\n                      {item.title ?? item.name ?? `Item ${idx + 1}`}\n                    </div>\n                    {item.status && (\n                      <UIChip tone={item.status === \"critical\" ? \"danger\" : item.status === \"warning\" ? \"warning\" : \"neutral\"} className=\"shrink-0\">\n                        {item.status}\n                      </UIChip>\n                    )}\n                  </div>\n                  {item.description && (\n                    <div className=\"mt-1 text-xs text-slate-500 dark:text-slate-400\">{item.description}</div>\n                  )}\n                </div>\n              </button>\n              {expanded === (item.id ?? idx) && item.actions && (\n                <div className=\"border-t border-slate-100 px-3 py-2 dark:border-slate-800\">\n                  <div className=\"flex flex-wrap gap-1.5\">\n                    {item.actions.map((action, i) => (\n                      <button\n                        key={typeof action === \"string\" ? action : action.label}\n                        type=\"button\"\n                        className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${\n                          i === 0\n                            ? \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200\"\n                            : \"bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700\"\n                        }`}\n                      >\n                        {typeof action === \"string\" ? action : action.label}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n\n  DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }) {\n    const tableData = data.length ? data : (rows ?? []);\n    const cols = columns.length ? columns : [\n      { key: \"name\", label: \"Name\" },\n      { key: \"status\", label: \"Status\" },\n      { key: \"value\", label: \"Value\" }\n    ];\n    return (\n      <TableCard\n        title={title ?? \"Data\"}\n        subtitle={subtitle}\n        columns={cols}\n        data={tableData}\n        searchable={searchable}\n        sortable={sortable}\n        paginated={paginated}\n        pageSize={pageSize}\n      />\n    );\n  },\n\n  DataChart({ title, subtitle, chartType = \"line\", data = [], height = 200 }) {\n    const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));\n    return (\n      <ChartCard\n        title={title ?? \"Trend\"}\n        subtitle={subtitle ?? \"Data visualization\"}\n        chartType={chartType}\n        height={height}\n        chart={\n          <D3Chart\n            data={series}\n            responsive\n            height={height}\n            ariaLabel={title}\n            renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d, dims, opts)}\n            options={{ xKey: \"x\", yKey: \"y\", showGrid: true, showAxes: true }}\n          />\n        }\n      />\n    );\n  },\n\n  MetricCard({ title, label, value, trend, change, changeType, color, icon, description }) {\n    return (\n      <MetricCard\n        title={title ?? label}\n        value={value ?? \"—\"}\n        trend={trend}\n        change={change}\n        changeType={changeType}\n        color={color}\n        icon={icon}\n        description={description}\n      />\n    );\n  },\n\n  StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }) {\n    return (\n      <StatusCard\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        items={items}\n        layout={layout}\n        showProgress={showProgress}\n        showTimestamp={showTimestamp}\n      />\n    );\n  },\n\n  ActionList({ actions = [], title, onAction }) {\n    return (\n      <div className=\"rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900\">\n        {title && <div className=\"mb-3 text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n        <div className=\"flex flex-wrap gap-2\">\n          {actions.map((action, i) => (\n            <UIButton\n              key={i}\n              size=\"sm\"\n              variant={i === 0 ? \"primary\" : \"outline\"}\n              onClick={() => onAction?.(action)}\n            >\n              {typeof action === \"string\" ? action : action.label}\n            </UIButton>\n          ))}\n        </div>\n      </div>\n    );\n  },\n\n  CalloutCard({ title, message, tone = \"neutral\" }) {\n    const toneClasses = {\n      neutral: \"border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200\",\n      success: \"border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200\",\n      warning: \"border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200\",\n      danger: \"border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200\"\n    };\n    return (\n      <div className={`rounded-xl border p-4 ${toneClasses[tone] ?? toneClasses.neutral}`}>\n        {title && <div className=\"mb-1 text-sm font-semibold\">{title}</div>}\n        <div className=\"text-sm\">{message}</div>\n      </div>\n    );\n  },\n\n  Divider() {\n    return <div className=\"h-px bg-slate-200 dark:bg-slate-800\" />;\n  },\n\n  Spacer({ size = \"md\" }) {\n    const heights = { sm: \"h-2\", md: \"h-4\", lg: \"h-6\" };\n    return <div className={heights[size] ?? heights.md} />;\n  }\n};\n\nlet _registry = { ...BUILTIN_COMPONENTS };\n\nexport function getComponentRegistry() {\n  return _registry;\n}\n\nexport function registerComponent(type, Component) {\n  _registry = { ..._registry, [type]: Component };\n}\n\nexport function registerComponents(map) {\n  _registry = { ..._registry, ...map };\n}\n\nexport function renderSchemaComponent(component, index) {\n  const registry = getComponentRegistry();\n  const Component = registry[component.type];\n  if (!Component) {\n    return (\n      <div key={index} className=\"rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700\">\n        Unknown component: {component.type}\n      </div>\n    );\n  }\n  return <Component key={component.id ?? index} {...(component.props ?? {})} />;\n}\n\nexport function renderSchema(components = []) {\n  return components.map((c, i) => renderSchemaComponent(c, i));\n}\n\nexport default BUILTIN_COMPONENTS;\n"],"names":["BUILTIN_COMPONENTS","summary","title","jsxs","jsx","metrics","collapsible","initialCollapsed","collapsed","setCollapsed","React","items","m","onItemClick","expanded","setExpanded","item","idx","UIChip","action","i","subtitle","columns","data","rows","searchable","sortable","paginated","pageSize","tableData","cols","TableCard","chartType","height","series","_","ChartCard","D3Chart","svg","d","dims","opts","D3ChartTemplates","label","value","trend","change","changeType","color","icon","description","MetricCard","status","layout","showProgress","showTimestamp","StatusCard","actions","onAction","UIButton","message","tone","toneClasses","size","heights","_registry","getComponentRegistry","renderSchemaComponent","component","index","Component"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,MAAMA,IAAqB;AAAA,EACzB,iBAAiB,EAAE,SAAAC,GAAS,OAAAC,KAAS;AACnC,WACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,8CACZ,UAAA;AAAA,MAAAD,KAAS,gBAAAE,EAAC,OAAA,EAAI,WAAU,sDAAsD,UAAAF,GAAM;AAAA,MACpFD;AAAA,IAAA,GACH;AAAA,EAEJ;AAAA,EAEA,aAAa,EAAE,SAAAI,IAAU,CAAA,GAAI,OAAAH,GAAO,aAAAI,IAAc,IAAO,WAAWC,IAAmB,MAAS;AAC9F,UAAM,CAACC,GAAWC,CAAY,IAAIC,EAAM,SAASH,CAAgB,GAE3DI,IAAQN,EAAQ,SAASA,IAAU;AAAA,MACvC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,MACxC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,MACxC,EAAE,OAAO,YAAY,OAAO,KAAK,OAAO,KAAA;AAAA,IAAK;AAG/C,WAAIC,KAAeE,IAEf,gBAAAL;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAMM,EAAa,EAAK;AAAA,QACjC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAN,EAAC,QAAA,EAAM,UAAA;AAAA,YAAAD,KAAS;AAAA,YAAU;AAAA,YAAGS,EAAM,IAAI,CAAAC,MAAK,GAAGA,EAAE,KAAK,IAAIA,EAAE,KAAK,EAAE,EAAE,KAAK,KAAK;AAAA,UAAA,GAAE;AAAA,UACjF,gBAAAR,EAAC,UAAK,UAAA,IAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAMX,gBAAAD,EAAC,OAAA,EAAI,WAAU,2FACX,UAAA;AAAA,OAAAD,KAASI,MACT,gBAAAH,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,0DAA0D,UAAAF,KAAS,WAAU;AAAA,QAC5FI,KACC,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAMK,EAAa,EAAI;AAAA,YAChC,WAAU;AAAA,YACX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,GAEJ;AAAA,MAEF,gBAAAL,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAAO,EAAM,IAAI,CAACC,MACV,gBAAAT,EAAC,OAAA,EAAkB,WAAU,gBAC3B,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,8CAA8C,UAAAQ,EAAE,OAAM;AAAA,QACrE,gBAAAT,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4DAA4D,UAAAQ,EAAE,OAAM;AAAA,UACnFA,EAAE,SACD,gBAAAR,EAAC,QAAA,EAAK,WAAW,WAAW,OAAOQ,EAAE,KAAK,EAAE,aAAa,GAAG,KAAKA,EAAE,QAAQ,IAAI,iBAAiB,kBAAkB,IAC/G,UAAA,OAAOA,EAAE,SAAU,YAAYA,EAAE,QAAQ,IAAI,IAAIA,EAAE,KAAK,KAAgBA,EAAE,MAAA,CAC7E;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,KATQA,EAAE,KAUZ,CACD,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAAA,EAEA,SAAS,EAAE,OAAAD,IAAQ,CAAA,GAAI,OAAAT,GAAO,aAAAW,KAAe;AAC3C,UAAM,CAACC,GAAUC,CAAW,IAAIL,EAAM,SAAS,IAAI;AACnD,WAAKC,EAAM,SAIT,gBAAAR,EAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,MAAAD,KACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,yDAAyD,UAAAF,GAAM;AAAA,QAC/E,gBAAAC,EAAC,QAAA,EAAK,WAAU,8CAA8C,UAAA;AAAA,UAAAQ,EAAM;AAAA,UAAO;AAAA,QAAA,EAAA,CAAM;AAAA,MAAA,GACnF;AAAA,MAEF,gBAAAP,EAAC,OAAA,EAAI,WAAU,eACZ,UAAAO,EAAM,IAAI,CAACK,GAAMC,MAChB,gBAAAd,EAAC,OAAA,EAAyB,WAAU,uFAClC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,cAAAW,EAAYD,OAAcE,EAAK,MAAMC,KAAO,OAAQD,EAAK,MAAMC,CAAI,GACnEJ,IAAcG,CAAI;AAAA,YACpB;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAb,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,cAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,gBAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,yDACZ,UAAAY,EAAK,SAASA,EAAK,QAAQ,QAAQC,IAAM,CAAC,GAAA,CAC7C;AAAA,gBACCD,EAAK,UACJ,gBAAAZ,EAACc,GAAA,EAAO,MAAMF,EAAK,WAAW,aAAa,WAAWA,EAAK,WAAW,YAAY,YAAY,WAAW,WAAU,YAChH,YAAK,OAAA,CACR;AAAA,cAAA,GAEJ;AAAA,cACCA,EAAK,eACJ,gBAAAZ,EAAC,SAAI,WAAU,mDAAmD,YAAK,YAAA,CAAY;AAAA,YAAA,EAAA,CAEvF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDU,OAAcE,EAAK,MAAMC,MAAQD,EAAK,6BACpC,OAAA,EAAI,WAAU,6DACb,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,0BACZ,UAAAY,EAAK,QAAQ,IAAI,CAACG,GAAQC,MACzB,gBAAAhB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAW,gEACTgB,MAAM,IACF,4GACA,8GACN;AAAA,YAEC,UAAA,OAAOD,KAAW,WAAWA,IAASA,EAAO;AAAA,UAAA;AAAA,UARzC,OAAOA,KAAW,WAAWA,IAASA,EAAO;AAAA,QAAA,CAUrD,GACH,EAAA,CACF;AAAA,MAAA,EAAA,GA1CMH,EAAK,MAAMC,CA4CrB,CACD,EAAA,CACH;AAAA,IAAA,GACF,IA3DO,gBAAAb,EAAC,OAAA,EAAI,WAAU,8CAA6C,UAAA,aAAS;AAAA,EA6DhF;AAAA,EAEA,UAAU,EAAE,OAAAF,GAAO,UAAAmB,GAAU,SAAAC,IAAU,CAAA,GAAI,MAAAC,IAAO,IAAI,MAAAC,GAAM,YAAAC,IAAa,IAAM,UAAAC,IAAW,IAAM,WAAAC,IAAY,IAAM,UAAAC,IAAW,KAAK;AAChI,UAAMC,IAAYN,EAAK,SAASA,IAAQC,KAAQ,CAAA,GAC1CM,IAAOR,EAAQ,SAASA,IAAU;AAAA,MACtC,EAAE,KAAK,QAAQ,OAAO,OAAA;AAAA,MACtB,EAAE,KAAK,UAAU,OAAO,SAAA;AAAA,MACxB,EAAE,KAAK,SAAS,OAAO,QAAA;AAAA,IAAQ;AAEjC,WACE,gBAAAlB;AAAA,MAAC2B;AAAA,MAAA;AAAA,QACC,OAAO7B,KAAS;AAAA,QAChB,UAAAmB;AAAA,QACA,SAASS;AAAA,QACT,MAAMD;AAAA,QACN,YAAAJ;AAAA,QACA,UAAAC;AAAA,QACA,WAAAC;AAAA,QACA,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,UAAU,EAAE,OAAA1B,GAAO,UAAAmB,GAAU,WAAAW,IAAY,QAAQ,MAAAT,IAAO,CAAA,GAAI,QAAAU,IAAS,OAAO;AAC1E,UAAMC,IAASX,EAAK,SAASA,IAAO,MAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAACY,GAAGf,OAAO,EAAE,GAAGA,GAAG,GAAG,KAAK,OAAA,IAAW,IAAA,EAAM;AAC3G,WACE,gBAAAhB;AAAA,MAACgC;AAAA,MAAA;AAAA,QACC,OAAOlC,KAAS;AAAA,QAChB,UAAUmB,KAAY;AAAA,QACtB,WAAAW;AAAA,QACA,QAAAC;AAAA,QACA,OACE,gBAAA7B;AAAA,UAACiC;AAAA,UAAA;AAAA,YACC,MAAMH;AAAA,YACN,YAAU;AAAA,YACV,QAAAD;AAAA,YACA,WAAW/B;AAAA,YACX,aAAa,CAACoC,GAAKC,GAAGC,GAAMC,MAASC,EAAiB,UAAUJ,GAAKC,GAAGC,GAAMC,CAAI;AAAA,YAClF,SAAS,EAAE,MAAM,KAAK,MAAM,KAAK,UAAU,IAAM,UAAU,GAAA;AAAA,UAAK;AAAA,QAAA;AAAA,MAClE;AAAA,IAAA;AAAA,EAIR;AAAA,EAEA,WAAW,EAAE,OAAAvC,GAAO,OAAAyC,GAAO,OAAAC,GAAO,OAAAC,GAAO,QAAAC,GAAQ,YAAAC,GAAY,OAAAC,GAAO,MAAAC,GAAM,aAAAC,EAAA,GAAe;AACvF,WACE,gBAAA9C;AAAA,MAAC+C;AAAA,MAAA;AAAA,QACC,OAAOjD,KAASyC;AAAA,QAChB,OAAOC,KAAS;AAAA,QAChB,OAAAC;AAAA,QACA,QAAAC;AAAA,QACA,YAAAC;AAAA,QACA,OAAAC;AAAA,QACA,MAAAC;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,WAAW,EAAE,OAAAhD,GAAO,UAAAmB,GAAU,QAAA+B,GAAQ,OAAAzC,GAAO,QAAA0C,GAAQ,cAAAC,GAAc,eAAAC,KAAiB;AAClF,WACE,gBAAAnD;AAAA,MAACoD;AAAA,MAAA;AAAA,QACC,OAAAtD;AAAA,QACA,UAAAmB;AAAA,QACA,QAAA+B;AAAA,QACA,OAAAzC;AAAA,QACA,QAAA0C;AAAA,QACA,cAAAC;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAAA,EAEA,WAAW,EAAE,SAAAE,IAAU,CAAA,GAAI,OAAAvD,GAAO,UAAAwD,KAAY;AAC5C,WACE,gBAAAvD,EAAC,OAAA,EAAI,WAAU,4FACZ,UAAA;AAAA,MAAAD,KAAS,gBAAAE,EAAC,OAAA,EAAI,WAAU,8DAA8D,UAAAF,GAAM;AAAA,MAC7F,gBAAAE,EAAC,SAAI,WAAU,wBACZ,YAAQ,IAAI,CAACe,GAAQC,MACpB,gBAAAhB;AAAA,QAACuD;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAASvC,MAAM,IAAI,YAAY;AAAA,UAC/B,SAAS,MAAMsC,IAAWvC,CAAM;AAAA,UAE/B,UAAA,OAAOA,KAAW,WAAWA,IAASA,EAAO;AAAA,QAAA;AAAA,QALzCC;AAAA,MAAA,CAOR,EAAA,CACH;AAAA,IAAA,GACF;AAAA,EAEJ;AAAA,EAEA,YAAY,EAAE,OAAAlB,GAAO,SAAA0D,GAAS,MAAAC,IAAO,aAAa;AAChD,UAAMC,IAAc;AAAA,MAClB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,IAAA;AAEV,WACE,gBAAA3D,EAAC,SAAI,WAAW,yBAAyB2D,EAAYD,CAAI,KAAKC,EAAY,OAAO,IAC9E,UAAA;AAAA,MAAA5D,KAAS,gBAAAE,EAAC,OAAA,EAAI,WAAU,8BAA8B,UAAAF,GAAM;AAAA,MAC7D,gBAAAE,EAAC,OAAA,EAAI,WAAU,WAAW,UAAAwD,EAAA,CAAQ;AAAA,IAAA,GACpC;AAAA,EAEJ;AAAA,EAEA,UAAU;AACR,WAAO,gBAAAxD,EAAC,OAAA,EAAI,WAAU,sCAAA,CAAsC;AAAA,EAC9D;AAAA,EAEA,OAAO,EAAE,MAAA2D,IAAO,QAAQ;AACtB,UAAMC,IAAU,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,MAAA;AAC5C,6BAAQ,OAAA,EAAI,WAAWA,EAAQD,CAAI,KAAKC,EAAQ,IAAI;AAAA,EACtD;AACF;AAEA,IAAIC,IAAY,EAAE,GAAGjE,EAAA;AAEd,SAASkE,IAAuB;AACrC,SAAOD;AACT;AAUO,SAASE,EAAsBC,GAAWC,GAAO;AAEtD,QAAMC,IADWJ,EAAA,EACUE,EAAU,IAAI;AACzC,SAAKE,IAOE,gBAAAlE,EAACkE,KAAuC,GAAIF,EAAU,SAAS,CAAA,KAA/CA,EAAU,MAAMC,CAAoC,IALvE,gBAAAlE,EAAC,OAAA,EAAgB,WAAU,qGAAoG,UAAA;AAAA,IAAA;AAAA,IACzGiE,EAAU;AAAA,EAAA,EAAA,GADtBC,CAEV;AAIN;"}
+{"version":3,"file":"ComponentRegistry.js","sources":["../../../src/components/workspace/ComponentRegistry.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  MetricCard,\n  TableCard,\n  ChartCard,\n  D3Chart,\n  D3ChartTemplates,\n  StatusCard,\n  UIButton,\n  UIChip\n} from \"@/components/library\";\n\nexport interface Metric {\n  label: string;\n  value: string | number;\n  trend?: string | number | null;\n}\n\nexport interface MetricsStripProps {\n  metrics?: Metric[];\n  title?: string;\n  collapsible?: boolean;\n  collapsed?: boolean;\n}\n\nexport interface ListItem {\n  id?: string;\n  title?: string;\n  name?: string;\n  description?: string;\n  status?: \"critical\" | \"warning\" | string;\n  actions?: Array<string | { label: string }>;\n}\n\nexport interface ItemListProps {\n  items?: ListItem[];\n  title?: string;\n  onItemClick?: (item: ListItem) => void;\n}\n\nexport interface TableColumn {\n  key: string;\n  label: string;\n}\n\nexport interface DataTableProps {\n  title?: string;\n  subtitle?: string;\n  columns?: TableColumn[];\n  data?: any[];\n  rows?: any[];\n  searchable?: boolean;\n  sortable?: boolean;\n  paginated?: boolean;\n  pageSize?: number;\n}\n\nexport interface DataPoint {\n  x: number;\n  y: number;\n  [key: string]: any;\n}\n\nexport interface DataChartProps {\n  title?: string;\n  subtitle?: string;\n  chartType?: string;\n  data?: DataPoint[];\n  height?: number;\n}\n\nexport interface MetricCardComponentProps {\n  title?: string;\n  label?: string;\n  value?: string | number;\n  trend?: string | number;\n  change?: string | number;\n  changeType?: string;\n  color?: string;\n  icon?: React.ReactNode;\n  description?: string;\n}\n\nexport interface StatusCardComponentProps {\n  title?: string;\n  subtitle?: string;\n  status?: string;\n  items?: any[];\n  layout?: string;\n  showProgress?: boolean;\n  showTimestamp?: boolean;\n}\n\nexport interface ActionListProps {\n  actions?: Array<string | { label: string }>;\n  title?: string;\n  onAction?: (action: string | { label: string }) => void;\n}\n\nexport interface CalloutCardProps {\n  title?: string;\n  message?: string;\n  tone?: \"neutral\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport interface SpacerProps {\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nexport interface NarrativeSummaryProps {\n  summary?: string;\n  title?: string;\n}\n\nexport interface SchemaComponent {\n  id?: string;\n  type: string;\n  props?: Record<string, any>;\n}\n\nconst BUILTIN_COMPONENTS = {\n  NarrativeSummary({ summary, title }: NarrativeSummaryProps) {\n    return (\n      <div className=\"text-sm text-slate-600 dark:text-slate-300\">\n        {title && <div className=\"mb-1 font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n        {summary}\n      </div>\n    );\n  },\n\n  MetricsStrip({ metrics = [], title, collapsible = false, collapsed: initialCollapsed = false }: MetricsStripProps) {\n    const [collapsed, setCollapsed] = React.useState(initialCollapsed);\n\n    const items = metrics.length ? metrics : [\n      { label: \"Metric A\", value: \"—\", trend: null },\n      { label: \"Metric B\", value: \"—\", trend: null },\n      { label: \"Metric C\", value: \"—\", trend: null }\n    ];\n\n    if (collapsible && collapsed) {\n      return (\n        <button\n          type=\"button\"\n          onClick={() => setCollapsed(false)}\n          className=\"flex w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 py-2 text-left text-xs text-slate-500 hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:hover:bg-slate-800\"\n        >\n          <span>{title ?? \"Metrics\"}: {items.map(m => `${m.label} ${m.value}`).join(\" · \")}</span>\n          <span>▸</span>\n        </button>\n      );\n    }\n\n    return (\n      <div className=\"rounded-xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-slate-900\">\n        {(title || collapsible) && (\n          <div className=\"mb-2 flex items-center justify-between\">\n            <span className=\"text-xs font-medium text-slate-500 dark:text-slate-400\">{title ?? \"Metrics\"}</span>\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed(true)}\n                className=\"text-xs text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300\"\n              >\n                Collapse\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex flex-wrap gap-4\">\n          {items.map((m) => (\n            <div key={m.label} className=\"min-w-[80px]\">\n              <div className=\"text-xs text-slate-400 dark:text-slate-500\">{m.label}</div>\n              <div className=\"flex items-baseline gap-1.5\">\n                <span className=\"text-sm font-semibold text-slate-700 dark:text-slate-200\">{m.value}</span>\n                {m.trend && (\n                  <span className={`text-xs ${String(m.trend).startsWith?.(\"+\") || (typeof m.trend === \"number\" && m.trend > 0) ? \"text-red-500\" : \"text-emerald-500\"}`}>\n                    {typeof m.trend === \"number\" ? (m.trend > 0 ? `+${m.trend}` : m.trend) : m.trend}\n                  </span>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n\n  ItemList({ items = [], title, onItemClick }: ItemListProps) {\n    const [expanded, setExpanded] = React.useState<string | number | null>(null);\n    if (!items.length) {\n      return <div className=\"text-sm text-slate-500 dark:text-slate-400\">No items.</div>;\n    }\n    return (\n      <div className=\"space-y-2\">\n        {title && (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</span>\n            <span className=\"text-xs text-slate-400 dark:text-slate-500\">{items.length} items</span>\n          </div>\n        )}\n        <div className=\"space-y-1.5\">\n          {items.map((item, idx) => (\n            <div key={item.id ?? idx} className=\"rounded-xl border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900\">\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setExpanded(expanded === (item.id ?? idx) ? null : (item.id ?? idx));\n                  onItemClick?.(item);\n                }}\n                className=\"flex w-full items-start justify-between gap-3 p-3 text-left\"\n              >\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"text-sm font-medium text-slate-900 dark:text-slate-50\">\n                      {item.title ?? item.name ?? `Item ${idx + 1}`}\n                    </div>\n                    {item.status && (\n                      <UIChip tone={item.status === \"critical\" ? \"danger\" : item.status === \"warning\" ? \"warning\" : \"neutral\"} className=\"shrink-0\">\n                        {item.status}\n                      </UIChip>\n                    )}\n                  </div>\n                  {item.description && (\n                    <div className=\"mt-1 text-xs text-slate-500 dark:text-slate-400\">{item.description}</div>\n                  )}\n                </div>\n              </button>\n              {expanded === (item.id ?? idx) && item.actions && (\n                <div className=\"border-t border-slate-100 px-3 py-2 dark:border-slate-800\">\n                  <div className=\"flex flex-wrap gap-1.5\">\n                    {item.actions.map((action, i) => (\n                      <button\n                        key={typeof action === \"string\" ? action : action.label}\n                        type=\"button\"\n                        className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${\n                          i === 0\n                            ? \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200\"\n                            : \"bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700\"\n                        }`}\n                      >\n                        {typeof action === \"string\" ? action : action.label}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  },\n\n  DataTable({ title, subtitle, columns = [], data = [], rows, searchable = true, sortable = true, paginated = true, pageSize = 5 }: DataTableProps) {\n    const tableData = data.length ? data : (rows ?? []);\n    const cols = columns.length ? columns : [\n      { key: \"name\", label: \"Name\" },\n      { key: \"status\", label: \"Status\" },\n      { key: \"value\", label: \"Value\" }\n    ];\n    return (\n      <TableCard\n        title={title ?? \"Data\"}\n        subtitle={subtitle}\n        columns={cols}\n        data={tableData}\n        searchable={searchable}\n        sortable={sortable}\n        paginated={paginated}\n        pageSize={pageSize}\n      />\n    );\n  },\n\n  DataChart({ title, subtitle, chartType = \"line\", data = [], height = 200 }: DataChartProps) {\n    const series = data.length ? data : Array.from({ length: 12 }, (_, i) => ({ x: i, y: Math.random() * 100 }));\n    return (\n      <ChartCard\n        title={title ?? \"Trend\"}\n        subtitle={subtitle ?? \"Data visualization\"}\n        chartType={chartType}\n        height={height}\n        chart={\n          <D3Chart\n            data={series as any}\n            responsive\n            height={height}\n            ariaLabel={title}\n            renderChart={(svg, d, dims, opts) => D3ChartTemplates.lineChart(svg, d as any, dims, opts)}\n            options={{ xKey: \"x\", yKey: \"y\", showGrid: true, showAxes: true }}\n          />\n        }\n      />\n    );\n  },\n\n  MetricCard({ title, label, value, trend, change, changeType, color, icon, description }: MetricCardComponentProps) {\n    return (\n      <MetricCard\n        title={(title ?? label) as any}\n        value={value ?? \"—\"}\n        trend={trend as any}\n        change={change as any}\n        changeType={changeType as any}\n        color={color as any}\n        icon={icon}\n        subtitle={description}\n      />\n    );\n  },\n\n  StatusCard({ title, subtitle, status, items, layout, showProgress, showTimestamp }: StatusCardComponentProps) {\n    return (\n      <StatusCard\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        items={items}\n        layout={layout as any}\n        showProgress={showProgress}\n        showTimestamp={showTimestamp}\n      />\n    );\n  },\n\n  ActionList({ actions = [], title, onAction }: ActionListProps) {\n    return (\n      <div className=\"rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900\">\n        {title && <div className=\"mb-3 text-sm font-medium text-slate-900 dark:text-slate-50\">{title}</div>}\n        <div className=\"flex flex-wrap gap-2\">\n          {actions.map((action, i) => (\n            <UIButton\n              key={i}\n              size=\"sm\"\n              variant={i === 0 ? \"primary\" : \"outline\"}\n              onClick={() => onAction?.(action)}\n            >\n              {typeof action === \"string\" ? action : action.label}\n            </UIButton>\n          ))}\n        </div>\n      </div>\n    );\n  },\n\n  CalloutCard({ title, message, tone = \"neutral\" }: CalloutCardProps) {\n    const toneClasses = {\n      neutral: \"border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200\",\n      success: \"border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200\",\n      warning: \"border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200\",\n      danger: \"border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-900/40 dark:bg-rose-950/20 dark:text-rose-200\"\n    };\n    return (\n      <div className={`rounded-xl border p-4 ${toneClasses[tone] ?? toneClasses.neutral}`}>\n        {title && <div className=\"mb-1 text-sm font-semibold\">{title}</div>}\n        <div className=\"text-sm\">{message}</div>\n      </div>\n    );\n  },\n\n  Divider() {\n    return <div className=\"h-px bg-slate-200 dark:bg-slate-800\" />;\n  },\n\n  Spacer({ size = \"md\" }: SpacerProps) {\n    const heights = { sm: \"h-2\", md: \"h-4\", lg: \"h-6\" };\n    return <div className={heights[size] ?? heights.md} />;\n  }\n};\n\nlet _registry: Record<string, React.ComponentType<any>> = { ...BUILTIN_COMPONENTS };\n\nexport function getComponentRegistry(): Record<string, React.ComponentType<any>> {\n  return _registry;\n}\n\nexport function registerComponent(type: string, Component: React.ComponentType<any>): void {\n  _registry = { ..._registry, [type]: Component };\n}\n\nexport function registerComponents(map: Record<string, React.ComponentType<any>>): void {\n  _registry = { ..._registry, ...map };\n}\n\nexport function renderSchemaComponent(component: SchemaComponent, index: number): React.ReactElement {\n  const registry = getComponentRegistry();\n  const Component = registry[component.type];\n  if (!Component) {\n    return (\n      <div key={index} className=\"rounded-lg border border-dashed border-slate-300 p-3 text-xs text-slate-500 dark:border-slate-700\">\n        Unknown component: {component.type}\n      </div>\n    );\n  }\n  return <Component key={component.id ?? index} {...(component.props ?? {})} />;\n}\n\nexport function renderSchema(components: SchemaComponent[] = []): React.ReactElement[] {\n  return components.map((c, i) => renderSchemaComponent(c, i));\n}\n\nexport default BUILTIN_COMPONENTS;\n"],"names":["BUILTIN_COMPONENTS","summary","title","jsxs","jsx","metrics","collapsible","initialCollapsed","collapsed","setCollapsed","React","items","m","onItemClick","expanded","setExpanded","item","idx","UIChip","action","i","subtitle","columns","data","rows","searchable","sortable","paginated","pageSize","tableData","cols","TableCard","chartType","height","series","_","ChartCard","D3Chart","svg","d","dims","opts","D3ChartTemplates","label","value","trend","change","changeType","color","icon","description","MetricCard","status","layout","showProgress","showTimestamp","StatusCard","actions","onAction","UIButton","message","tone","toneClasses","size","heights","_registry","getComponentRegistry","renderSchemaComponent","component","index","Component"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -64,7 +64,7 @@
     "world-atlas": "^2.0.0"
   },
   "dependencies": {
-    "@schandlergarcia/sf-web-components": "^1.1.1",
+    "@schandlergarcia/sf-web-components": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "glob": "^11.0.0",

package/src/components/library/cards/SemanticMetricCard.tsx

@@ -36,7 +36,7 @@ export default function SemanticMetricCard({
   loading = false,
   ...rest
 }: SemanticMetricCardProps) {
-  const metric = React.useMemo(() => getSemanticMetric(semanticId, metricId), [semanticId, metricId]);
+  const metric = React.useMemo(() => getSemanticMetric(semanticId, metricId ?? ""), [semanticId, metricId]);
 
   const resolvedTitle = title ?? metric?.title ?? metricId ?? "Metric";
   const resolvedSubtitle = subtitle ?? metric?.subtitle;

package/src/components/library/cards/SemanticTableCard.tsx

@@ -4,7 +4,7 @@ import { getSemanticDataset } from "../data/chartDataProvider";
 
 export interface SemanticTableCardProps extends Omit<TableCardProps, "data" | "columns"> {
   semanticId: string;
-  dataOverride?: unknown[];
+  dataOverride?: Record<string, unknown>[];
   columnsOverride?: TableColumn[];
   compact?: boolean;
   striped?: boolean;
@@ -35,8 +35,8 @@ export default function SemanticTableCard({
   const ds = React.useMemo(() => getSemanticDataset(semanticId), [semanticId]);
   const table = ds?.table;
 
-  const resolvedColumns = columnsOverride ?? table?.columns ?? [];
-  const resolvedData = dataOverride ?? table?.rows ?? [];
+  const resolvedColumns = (columnsOverride ?? table?.columns ?? []) as TableColumn[];
+  const resolvedData = (dataOverride ?? table?.rows ?? []) as Record<string, unknown>[];
   const resolvedTitle = title ?? table?.title ?? ds?.title ?? "Table";
   const resolvedSubtitle = subtitle ?? table?.subtitle;
 

package/src/components/library/chat/{ChatBar.jsx → ChatBar.tsx}

@@ -9,7 +9,8 @@ import {
 } from "@heroicons/react/24/outline";
 import ChatMessageList from "./ChatMessageList";
 import ChatInput from "./ChatInput";
-import useChatState from "./useChatState";
+import useChatState, { UseChatStateOptions, ChatMessage } from "./useChatState";
+import { ChatMessageData } from "./ChatMessage";
 
 const BACKDROP_VARIANTS = {
   hidden: { opacity: 0 },
@@ -23,11 +24,22 @@ const PANEL_VARIANTS = {
     opacity: 1,
     y: 0,
     scale: 1,
-    transition: { type: "spring", damping: 28, stiffness: 380 },
+    transition: { type: "spring" as const, damping: 28, stiffness: 380 },
   },
   exit: { opacity: 0, y: 10, scale: 0.97, transition: { duration: 0.12 } },
 };
 
+export interface ChatBarProps {
+  onSend?: UseChatStateOptions["onSend"];
+  suggestions?: string[];
+  placeholder?: string;
+  title?: string;
+  initialMessages?: UseChatStateOptions["initialMessages"];
+  className?: string;
+  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
+  onOpenInTab?: (messages: ChatMessage[]) => void;
+}
+
 /**
  * Command-palette style AI chat bar.
  *
@@ -41,17 +53,16 @@ const PANEL_VARIANTS = {
 export default function ChatBar({
   onSend,
   suggestions = [],
-  placeholder = "Ask a question\u2026",
+  placeholder = "Ask a question…",
   title = "AI Assistant",
   initialMessages = [],
   className = "",
-  panelHeight,
   renderAvatar,
   onOpenInTab,
-}) {
+}: ChatBarProps) {
   const [open, setOpen] = useState(false);
   const [portalVisible, setPortalVisible] = useState(false);
-  const panelRef = useRef(null);
+  const panelRef = useRef<HTMLDivElement>(null);
   const chat = useChatState({ initialMessages, onSend });
   const isEmpty = chat.messages.length === 0;
 
@@ -62,7 +73,7 @@ export default function ChatBar({
   }, [open]);
 
   useEffect(() => {
-    function onKey(e) {
+    function onKey(e: KeyboardEvent) {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
         setOpen((prev) => !prev);
@@ -79,7 +90,7 @@ export default function ChatBar({
     return () => { document.body.style.overflow = ""; };
   }, [open]);
 
-  function handleSend(content) {
+  function handleSend(content: string) {
     if (!open) setOpen(true);
     chat.sendMessage(content);
   }

package/src/components/library/chat/{ChatInput.jsx → ChatInput.tsx}

@@ -1,16 +1,18 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { PaperAirplaneIcon, StopCircleIcon } from "@heroicons/react/24/solid";
 
+export interface ChatInputProps {
+  onSend?: (content: string) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  onStop?: () => void;
+  placeholder?: string;
+  maxRows?: number;
+}
+
 /**
  * Chat input with auto-resize textarea, Send button, and keyboard shortcuts.
  * Enter sends, Shift+Enter inserts newline.
- *
- * @param {Function} onSend — (content: string) => void
- * @param {boolean}  disabled — disable input while agent is processing
- * @param {boolean}  isLoading — show stop button instead of send
- * @param {Function} onStop — optional: called when stop is clicked
- * @param {string}   placeholder
- * @param {number}   maxRows — max visible rows before scroll (default 6)
  */
 export default function ChatInput({
   onSend,
@@ -19,9 +21,9 @@ export default function ChatInput({
   onStop,
   placeholder = "Type a message…",
   maxRows = 6,
-}) {
+}: ChatInputProps) {
   const [value, setValue] = useState("");
-  const textareaRef = useRef(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
     const ta = textareaRef.current;
@@ -41,7 +43,7 @@ export default function ChatInput({
     }
   }
 
-  function handleKeyDown(e) {
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSend();

package/src/components/library/chat/{ChatMessage.jsx → ChatMessage.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
-import { renderSchemaComponent } from "@/components/workspace/ComponentRegistry";
-import ChatToolCall from "./ChatToolCall";
+import { renderSchemaComponent, type SchemaComponent } from "@/components/workspace/ComponentRegistry";
+import ChatToolCall, { ToolCall } from "./ChatToolCall";
 import { UserCircleIcon, CpuChipIcon } from "@heroicons/react/24/solid";
 
-function cx(...classes) {
+function cx(...classes: (string | boolean | undefined)[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
@@ -11,9 +11,9 @@ function cx(...classes) {
  * Lightweight inline formatter for assistant messages.
  * Handles code blocks, inline code, bold, italic, and line breaks.
  */
-function formatContent(text) {
+function formatContent(text: string): React.ReactNode {
   if (!text) return null;
-  const parts = [];
+  const parts: React.ReactNode[] = [];
   let key = 0;
 
   const codeBlockRegex = /```(\w*)\n?([\s\S]*?)```/g;
@@ -46,7 +46,7 @@ function formatContent(text) {
   return parts;
 }
 
-function formatInline(text) {
+function formatInline(text: string): React.ReactNode {
   const tokens = text.split(/(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g);
   return tokens.map((token, i) => {
     if (token.startsWith("**") && token.endsWith("**")) {
@@ -74,13 +74,26 @@ function formatInline(text) {
   });
 }
 
+export interface ChatMessageData {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content?: string;
+  components?: SchemaComponent[];
+  toolCalls?: ToolCall[];
+  isError?: boolean;
+  isStreaming?: boolean;
+  timestamp?: string;
+}
+
+export interface ChatMessageProps {
+  message: ChatMessageData;
+  avatar?: React.ReactNode;
+}
+
 /**
  * Renders a single chat message.
- *
- * @param {Object} message — { id, role, content, components?, toolCalls?, isError?, isStreaming?, timestamp? }
- * @param {React.ReactNode} avatar — custom avatar override
  */
-export default function ChatMessage({ message, avatar }) {
+export default function ChatMessage({ message, avatar }: ChatMessageProps) {
   const isUser = message.role === "user";
   const isSystem = message.role === "system";
   const isAssistant = message.role === "assistant";

package/src/components/library/chat/{ChatMessageList.jsx → ChatMessageList.tsx}

@@ -1,17 +1,19 @@
 import React, { useRef, useEffect } from "react";
-import ChatMessage from "./ChatMessage";
+import ChatMessage, { ChatMessageData } from "./ChatMessage";
 import ChatTypingIndicator from "./ChatTypingIndicator";
 import ChatSuggestions from "./ChatSuggestions";
 
+export interface ChatMessageListProps {
+  messages?: ChatMessageData[];
+  isLoading?: boolean;
+  isStreaming?: boolean;
+  suggestions?: string[];
+  onSuggestion?: (text: string) => void;
+  renderAvatar?: (message: ChatMessageData) => React.ReactNode;
+}
+
 /**
  * Scrollable message area with auto-scroll to latest message.
- *
- * @param {Array}     messages — array of message objects
- * @param {boolean}   isLoading — show typing indicator
- * @param {boolean}   isStreaming — agent is streaming (show different indicator text)
- * @param {string[]}  suggestions — follow-up suggestions shown after last assistant message
- * @param {Function}  onSuggestion — (text) => void
- * @param {Function}  renderAvatar — (message) => ReactNode, optional per-message avatar
  */
 export default function ChatMessageList({
   messages = [],
@@ -20,9 +22,9 @@ export default function ChatMessageList({
   suggestions = [],
   onSuggestion,
   renderAvatar,
-}) {
-  const bottomRef = useRef(null);
-  const containerRef = useRef(null);
+}: ChatMessageListProps) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });