@arbidocs/blocks 0.3.114 → 0.3.116

package/dist/index.js

@@ -1,14 +1,14 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { createContext, useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
-import { MessageSquare, Cpu, Code, Cloud, Layers, Target, Award, MapPin, Phone, Mail, Lock, Globe, Heart, Star, Rocket, Shield, Zap, Sparkles, Gavel, Scale, Bell, Activity, BarChart3, DollarSign, TrendingUp, Info, AlertCircle, CheckCircle, Clock, Calendar, Briefcase, Users, Folder, FileText, RotateCcw, Palette, Search, ArrowUpRight, ArrowDownRight, ImageIcon, ArrowRight, Quote, ChevronDown, XCircle, AlertTriangle, CheckCircle2, Check, ArrowLeft, Loader2, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Save, Download, ImagePlus, Upload, Link2 } from 'lucide-react';
-import { Input, Card, CardHeader, CardTitle, CardContent, useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Button, Avatar, AvatarImage, AvatarFallback, AiMarkdown, Badge, Switch, useConfigs, useAgents, Checkbox, Tabs as Tabs$1, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider, useDocuments, useThumbnails } from '@arbidocs/react';
+import { MessageSquare, Cpu, Code, Cloud, Layers, Target, Award, MapPin, Phone, Mail, Lock, Globe, Heart, Star, Rocket, Shield, Zap, Sparkles, Gavel, Scale, Bell, Activity, BarChart3, DollarSign, TrendingUp, Info, AlertCircle, CheckCircle, Clock, Calendar, Briefcase, Users, Folder, FileText, RotateCcw, Palette, Search, ArrowUpRight, ArrowDownRight, ImageIcon, ArrowRight, Quote, ChevronDown, XCircle, AlertTriangle, CheckCircle2, Check, X, Menu, ArrowLeft, Loader2, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Save, Download, ImagePlus, Upload, Link2, MessagesSquare } from 'lucide-react';
+import { Input, Card, CardHeader, CardTitle, CardContent, useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Button, Avatar, AvatarImage, AvatarFallback, AiMarkdown, Badge, Switch, useConfigs, useAgents, Checkbox, Tabs as Tabs$1, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider, useDocuments, useThumbnails, useConversations } from '@arbidocs/react';
 export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, redlineStats, textToArtifact, toRedlineMarkdown } from '@arbidocs/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AgGridReact } from 'ag-grid-react';
 import { themeQuartz, AllCommunityModule } from 'ag-grid-community';
-import { Link, useParams } from 'react-router-dom';
+import { useLocation, Link, useParams, NavLink } from 'react-router-dom';
 import { Puck, Render } from '@measured/puck';
 
 // src/prompts.ts
@@ -2297,6 +2297,322 @@ function TestimonialGrid({ items, columns = "3", testId }) {
     i
   )) });
 }
+function NavItemLink({ item, onNavigate }) {
+  return /* @__PURE__ */ jsxs(
+    NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      onClick: onNavigate,
+      "data-testid": tid("sidebar-nav", item.id),
+      className: ({ isActive }) => cn(
+        "group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+        isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(item.icon, { className: "size-[18px] shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+        item.arbi && /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5 text-sidebar-primary", "aria-label": "Powered by ARBI" })
+      ]
+    }
+  );
+}
+function SidebarBody({
+  sections,
+  footerItems,
+  logo,
+  logoHref,
+  logoLabel,
+  sidebarFooter,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    logo && /* @__PURE__ */ jsx("div", { className: "flex h-16 items-center border-b border-sidebar-border px-5", children: logoHref ? /* @__PURE__ */ jsx(Link, { to: logoHref, "aria-label": logoLabel, onClick: onNavigate, children: logo }) : logo }),
+    /* @__PURE__ */ jsx("nav", { className: "flex-1 space-y-6 overflow-y-auto px-3 py-5", children: sections.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "px-3 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55", children: section.heading }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx(NavItemLink, { item, onNavigate }, item.id)) })
+    ] }, section.heading)) }),
+    (footerItems?.length || sidebarFooter) && /* @__PURE__ */ jsxs("div", { className: "border-t border-sidebar-border px-3 py-3", children: [
+      footerItems?.map((item) => /* @__PURE__ */ jsx(NavItemLink, { item, onNavigate }, item.id)),
+      sidebarFooter
+    ] })
+  ] });
+}
+function AppShell({
+  sections,
+  footerItems,
+  logo,
+  logoHref,
+  logoLabel,
+  sidebarFooter,
+  topbar,
+  rightRail,
+  children,
+  mainClassName,
+  testIdPrefix = "app"
+}) {
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+  useEffect(() => {
+    setOpen(false);
+  }, [location.pathname]);
+  const body = (onNavigate) => /* @__PURE__ */ jsx(
+    SidebarBody,
+    {
+      sections,
+      footerItems,
+      logo,
+      logoHref,
+      logoLabel,
+      sidebarFooter,
+      onNavigate
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex h-screen overflow-hidden bg-background",
+      "data-testid": `${testIdPrefix}-shell`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: "hidden h-full w-64 shrink-0 flex-col border-r border-sidebar-border bg-sidebar lg:flex",
+            "data-testid": `${testIdPrefix}-sidebar`,
+            children: body()
+          }
+        ),
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "fixed inset-0 z-50 lg:hidden",
+            "data-testid": `${testIdPrefix}-sidebar-mobile`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
+                  onClick: () => setOpen(false),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxs("aside", { className: "absolute inset-y-0 left-0 flex w-64 max-w-[82%] flex-col border-r border-sidebar-border bg-sidebar shadow-xl", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setOpen(false),
+                    className: "absolute right-3 top-4 z-10 flex size-8 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
+                    "aria-label": "Close menu",
+                    "data-testid": `${testIdPrefix}-sidebar-close`,
+                    children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+                  }
+                ),
+                body(() => setOpen(false))
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs(
+            "header",
+            {
+              className: "flex h-16 shrink-0 items-center gap-4 border-b border-border bg-card/80 px-6 backdrop-blur",
+              "data-testid": `${testIdPrefix}-topbar`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setOpen(true),
+                    className: "flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground lg:hidden",
+                    "data-testid": `${testIdPrefix}-nav-toggle`,
+                    "aria-label": "Open menu",
+                    children: /* @__PURE__ */ jsx(Menu, { className: "size-5" })
+                  }
+                ),
+                topbar
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: cn("flex-1 overflow-y-auto", mainClassName),
+              "data-testid": `${testIdPrefix}-main`,
+              children
+            }
+          )
+        ] }),
+        rightRail
+      ]
+    }
+  );
+}
+var LiveDataContext = createContext(false);
+function useLiveDataActive() {
+  return useContext(LiveDataContext);
+}
+function LiveDataProvider({ children }) {
+  return /* @__PURE__ */ jsx(LiveDataContext.Provider, { value: true, children });
+}
+function WidgetPlaceholder({
+  label,
+  icon: Icon = Sparkles,
+  testId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-3 rounded-xl border border-dashed border-border bg-muted/30 px-5 py-6 text-sm text-muted-foreground",
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "ml-1", children: "\xB7 live in the app" })
+        ] })
+      ]
+    }
+  );
+}
+function useActiveWorkspaceId() {
+  const { workspaceId, fallbackWorkspaceId } = useConnection();
+  return workspaceId ?? fallbackWorkspaceId ?? void 0;
+}
+function timeAgo(iso) {
+  if (!iso) return "";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const s = Math.max(0, Math.round((Date.now() - then) / 1e3));
+  if (s < 60) return "just now";
+  const m = Math.round(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.round(h / 24)}d ago`;
+}
+var METRIC_SOURCES = {
+  documents: { label: "Documents", icon: FileText },
+  conversations: { label: "Agent threads", icon: Bot }
+};
+var asMetricSource = (s) => s in METRIC_SOURCES ? s : "documents";
+function AgentActivityLive({
+  title,
+  limit,
+  testId
+}) {
+  const wsId = useActiveWorkspaceId();
+  const { data, isLoading } = useConversations(wsId);
+  const rows = [...data ?? []].sort((a, b) => +new Date(b.updated_at ?? 0) - +new Date(a.updated_at ?? 0)).slice(0, limit);
+  return /* @__PURE__ */ jsxs(Card, { variant: "elevated", className: "rounded-xl p-5", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Bot, { className: "size-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": `${testId}-loading`, children: "Loading agent threads\u2026" }) : rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", "data-testid": `${testId}-empty`, children: "No agent threads yet." }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", "data-testid": `${testId}-list`, children: rows.map((c, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center justify-between gap-3",
+        "data-testid": `${testId}-item-${i}`,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 truncate", children: [
+            /* @__PURE__ */ jsx(MessagesSquare, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-foreground", children: c.title?.trim() || "Untitled thread" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: timeAgo(c.updated_at) })
+        ]
+      },
+      c.external_id ?? i
+    )) })
+  ] });
+}
+function LiveMetricInner({
+  label,
+  source,
+  accent,
+  testId
+}) {
+  const wsId = useActiveWorkspaceId();
+  const docs = useDocuments(wsId, { enabled: source === "documents" });
+  const convos = useConversations(wsId, { enabled: source === "conversations" });
+  const query = source === "documents" ? docs : convos;
+  const count = Array.isArray(query.data) ? query.data.length : 0;
+  return /* @__PURE__ */ jsx(
+    MetricCard,
+    {
+      label: label || METRIC_SOURCES[source].label,
+      value: query.isLoading ? "\u2014" : String(count),
+      accent,
+      icon: METRIC_SOURCES[source].icon,
+      testId
+    }
+  );
+}
+function AgentActivityBlock({
+  title,
+  limit,
+  testId
+}) {
+  return useLiveDataActive() ? /* @__PURE__ */ jsx(AgentActivityLive, { title, limit, testId }) : /* @__PURE__ */ jsx(WidgetPlaceholder, { label: String(title || "Agent activity"), icon: Bot, testId });
+}
+function LiveMetricBlock({
+  label,
+  source,
+  accent,
+  testId
+}) {
+  const src = asMetricSource(source);
+  return useLiveDataActive() ? /* @__PURE__ */ jsx(LiveMetricInner, { label, source: src, accent, testId }) : /* @__PURE__ */ jsx(
+    WidgetPlaceholder,
+    {
+      label: String(label || METRIC_SOURCES[src].label),
+      icon: METRIC_SOURCES[src].icon,
+      testId
+    }
+  );
+}
+function createLiveWidgets(kit) {
+  const { blockTestId } = kit;
+  const AgentActivityWidget = {
+    label: "Agent activity (live)",
+    fields: {
+      title: { type: "text", label: "Title" },
+      limit: { type: "number", label: "Rows", min: 1, max: 8 }
+    },
+    defaultProps: { title: "Recent agent activity", limit: 4 },
+    render: ({ id, title, limit }) => /* @__PURE__ */ jsx(AgentActivityBlock, { title, limit, testId: blockTestId(id) })
+  };
+  const LiveMetricWidget = {
+    label: "Live metric",
+    fields: {
+      label: { type: "text", label: "Label" },
+      source: {
+        type: "select",
+        label: "Source",
+        options: [
+          { label: "Documents", value: "documents" },
+          { label: "Agent threads", value: "conversations" }
+        ]
+      },
+      accent: {
+        type: "radio",
+        label: "Accent",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Primary", value: "primary" },
+          { label: "Success", value: "success" }
+        ]
+      }
+    },
+    defaultProps: { label: "", source: "documents", accent: "primary" },
+    render: ({ id, label, source, accent }) => /* @__PURE__ */ jsx(LiveMetricBlock, { label, source, accent, testId: blockTestId(id) })
+  };
+  return {
+    AgentActivity: AgentActivityWidget,
+    LiveMetric: LiveMetricWidget
+  };
+}
 
 // src/studio/publish.ts
 function blobToDataUrl(blob) {
@@ -2375,7 +2691,8 @@ function StudioEditor({
   live,
   initialSlug,
   testIdPrefix = "studio",
-  publishAsset
+  publishAsset,
+  resetSeam = false
 }) {
   const arbi = useArbi();
   const materialize = useMemo(
@@ -2406,6 +2723,14 @@ function StudioEditor({
       cancelled = true;
     };
   }, [slug, live]);
+  useEffect(() => {
+    if (!resetSeam) return;
+    const w = window;
+    w.__studioResetSlug = (s) => persistence.deletePage(arbi, live, s);
+    return () => {
+      delete w.__studioResetSlug;
+    };
+  }, [resetSeam, arbi, live, persistence]);
   const persist4 = useCallback(
     async (toSave) => {
       setSaving(true);
@@ -2562,34 +2887,36 @@ function PageRenderer({
   live,
   slug: slugProp,
   emptyState,
-  testIdPrefix = "studio"
+  testIdPrefix = "studio",
+  liveData = false,
+  initialData,
+  applyTheme = true
 }) {
   const params = useParams();
   const slug = slugProp ?? params.slug ?? "home";
   const arbi = useArbi();
-  const [data, setData] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const [data, setData] = useState(initialData ?? null);
+  const [loading, setLoading] = useState(!initialData);
   useEffect(() => {
     let cancelled = false;
-    setLoading(true);
+    setLoading(!initialData);
     void (async () => {
-      const [{ data: published }, { data: theme }] = await Promise.all([
-        persistence.loadPublished(arbi, live, slug),
-        persistence.loadTheme(arbi, live)
-      ]);
+      const theme = applyTheme ? (await persistence.loadTheme(arbi, live)).data : void 0;
       if (cancelled) return;
-      const page = published ?? (await persistence.loadPage(arbi, live, slug)).data;
+      const page = initialData ?? (await persistence.loadPublished(arbi, live, slug)).data ?? (await persistence.loadPage(arbi, live, slug)).data;
       if (cancelled) return;
-      applyThemeVars(
-        theme ? { ...defaultTheme, ...theme, colors: { ...defaultTheme.colors, ...theme.colors } } : defaultTheme
-      );
+      if (applyTheme) {
+        applyThemeVars(
+          theme ? { ...defaultTheme, ...theme, colors: { ...defaultTheme.colors, ...theme.colors } } : defaultTheme
+        );
+      }
       setData(page);
       setLoading(false);
     })();
     return () => {
       cancelled = true;
     };
-  }, [arbi, live, slug, persistence, defaultTheme]);
+  }, [arbi, live, slug, persistence, defaultTheme, initialData, applyTheme]);
   if (loading) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -2615,7 +2942,8 @@ function PageRenderer({
       }
     );
   }
-  return /* @__PURE__ */ jsx("main", { "data-testid": `page-${testIdPrefix}-render`, children: /* @__PURE__ */ jsx(Render, { config, data }) });
+  const rendered = /* @__PURE__ */ jsx(Render, { config, data });
+  return /* @__PURE__ */ jsx("main", { "data-testid": `page-${testIdPrefix}-render`, children: liveData ? /* @__PURE__ */ jsx(LiveDataProvider, { children: rendered }) : rendered });
 }
 
 // src/studio/persistence.ts
@@ -2691,6 +3019,26 @@ function createStudioPersistence(cfg) {
   function loadPublished(arbi, live, slug) {
     return readPage(arbi, live, publishedKey(slug), publishedFile(slug));
   }
+  async function deletePage(arbi, live, slug) {
+    try {
+      localStorage.removeItem(pageKey(slug));
+      localStorage.removeItem(publishedKey(slug));
+    } catch {
+    }
+    if (!canUseArbi(arbi, live)) return;
+    try {
+      await arbi.selectWorkspace(WORKSPACE_ID);
+      const docs = await arbi.documents.list();
+      const names = [pageFile(slug), publishedFile(slug)];
+      const ids = docs.filter(
+        (d) => (d.folder ?? "").includes(FOLDER) && names.some((n) => (d.file_name ?? "").endsWith(n))
+      ).map((d) => d.external_id);
+      if (ids.length) await arbi.documents.delete(ids);
+      console.info(`[studio] deleted ${ids.length} doc(s) for "${slug}" from ARBI`);
+    } catch (e) {
+      console.warn(`[studio] ARBI delete failed for "${slug}"`, e);
+    }
+  }
   async function saveTheme(arbi, live, theme) {
     try {
       localStorage.setItem(THEME_KEY, JSON.stringify(theme));
@@ -2727,7 +3075,7 @@ function createStudioPersistence(cfg) {
       return null;
     }
   }
-  return { savePage, loadPage, savePublished, loadPublished, saveTheme, loadTheme };
+  return { savePage, loadPage, savePublished, loadPublished, deletePage, saveTheme, loadTheme };
 }
 function AiTextField({
   value,
@@ -2967,7 +3315,7 @@ function ImageFieldControl({
               {
                 src: thumb,
                 alt: d.file_name ?? "",
-                className: "aspect-square w-full object-cover"
+                className: "aspect-square w-full bg-muted object-contain"
               }
             ) : /* @__PURE__ */ jsx("span", { className: "flex aspect-square w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(ImagePlus, { className: "size-4" }) })
           },
@@ -3127,7 +3475,7 @@ function Section({
   ] });
 }
 var iconMap = {
-  FileText,
+  FileText: FileText,
   Folder,
   Users,
   Briefcase,
@@ -4203,6 +4551,13 @@ function createSiteBlocks(kit) {
     TestimonialGrid: TestimonialGridBlock
   };
 }
+var emptySlot2 = [];
+var METRIC_COLS = {
+  "2": "sm:grid-cols-2",
+  "3": "sm:grid-cols-2 lg:grid-cols-3",
+  "4": "sm:grid-cols-2 lg:grid-cols-4"
+};
+var METRIC_GAP = { sm: "gap-3", md: "gap-4", lg: "gap-6" };
 function createArbiBlocksConfig(opts = {}) {
   const kit = createBlockKit(opts.aiFields, opts.imageField, opts.eyebrowClassName);
   const { textField, textareaField, boolRadio, iconField, resolveIcon, blockTestId } = kit;
@@ -4240,16 +4595,19 @@ function createArbiBlocksConfig(opts = {}) {
     fields: {
       title: textField("Title"),
       eyebrow: textField("Eyebrow"),
-      description: textareaField("Description", void 0, "description")
+      description: textareaField("Description", void 0, "description"),
+      // `actions` is a slot so the top band can host real buttons/badges authored
+      // as blocks (drop a Button in), while the interactive body stays bespoke.
+      actions: { type: "slot", allow: ["Button", "Badge"] }
     },
-    defaultProps: { title: "Page title" },
-    // `actions` (ReactNode) is deferred for v1 — see module notes.
-    render: ({ id, title, eyebrow, description }) => /* @__PURE__ */ jsx(
+    defaultProps: { title: "Page title", actions: emptySlot2 },
+    render: ({ id, title, eyebrow, description, actions: Actions }) => /* @__PURE__ */ jsx(
       PageHeader,
       {
         title,
         eyebrow,
         description,
+        actions: /* @__PURE__ */ jsx(Actions, { className: "flex items-center gap-2" }),
         testId: blockTestId(id)
       }
     )
@@ -4259,16 +4617,18 @@ function createArbiBlocksConfig(opts = {}) {
     fields: {
       title: textField("Title"),
       description: textareaField("Description", void 0, "description"),
-      icon: iconField()
+      icon: iconField(),
+      // `action` is a slot so an empty state can offer a real call-to-action button.
+      action: { type: "slot", allow: ["Button"] }
     },
-    defaultProps: { title: "Nothing here yet" },
-    // `action` (ReactNode) is deferred for v1 — see module notes.
-    render: ({ id, title, description, icon }) => /* @__PURE__ */ jsx(
+    defaultProps: { title: "Nothing here yet", action: emptySlot2 },
+    render: ({ id, title, description, icon, action: Action }) => /* @__PURE__ */ jsx(
       EmptyState,
       {
         title,
         description,
         icon: resolveIcon(icon),
+        action: /* @__PURE__ */ jsx(Action, {}),
         testId: blockTestId(id)
       }
     )
@@ -4321,6 +4681,42 @@ function createArbiBlocksConfig(opts = {}) {
       }
     )
   };
+  const MetricRowBlock = {
+    label: "Metric row",
+    fields: {
+      columns: {
+        type: "radio",
+        label: "Columns",
+        options: [
+          { label: "2", value: "2" },
+          { label: "3", value: "3" },
+          { label: "4", value: "4" }
+        ]
+      },
+      gap: {
+        type: "radio",
+        label: "Gap",
+        options: [
+          { label: "S", value: "sm" },
+          { label: "M", value: "md" },
+          { label: "L", value: "lg" }
+        ]
+      },
+      // Static KPI tiles and (when registered) live metric widgets both belong in a band.
+      items: { type: "slot", allow: ["MetricCard", "LiveMetric"] }
+    },
+    defaultProps: { columns: "3", gap: "md", items: emptySlot2 },
+    render: ({ id, columns, gap, items: Items }) => /* @__PURE__ */ jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsx(
+      Items,
+      {
+        className: cn(
+          "grid grid-cols-1",
+          METRIC_COLS[columns] ?? METRIC_COLS["3"],
+          METRIC_GAP[gap] ?? METRIC_GAP.md
+        )
+      }
+    ) })
+  };
   const DataTableBlockConfig = {
     label: "Data table",
     fields: {
@@ -4519,11 +4915,13 @@ function createArbiBlocksConfig(opts = {}) {
   };
   const website = createWebsiteBlocks(kit);
   const site = createSiteBlocks(kit);
+  const widgets = opts.liveWidgets ? createLiveWidgets(kit) : {};
   const components = {
     SectionHeading: SectionHeadingBlock,
     PageHeader: PageHeaderBlock,
     EmptyState: EmptyStateBlock,
     MetricCard: MetricCardBlock,
+    MetricRow: MetricRowBlock,
     DataTable: DataTableBlockConfig,
     Section: SectionBlock,
     Card: CardBlock,
@@ -4531,7 +4929,8 @@ function createArbiBlocksConfig(opts = {}) {
     Badge: BadgeBlock,
     Separator: SeparatorBlock,
     ...website,
-    ...site
+    ...site,
+    ...widgets
   };
   const config = {
     categories: {
@@ -4565,7 +4964,8 @@ function createArbiBlocksConfig(opts = {}) {
       Commerce: { title: "Commerce", components: ["Pricing"] },
       Forms: { title: "Forms", components: ["ContactForm"] },
       Navigation: { title: "Navigation", components: ["Navbar", "Footer"] },
-      Data: { title: "Data", components: ["MetricCard", "DataTable"] },
+      Data: { title: "Data", components: ["MetricRow", "MetricCard", "DataTable"] },
+      ...opts.liveWidgets ? { Widgets: { title: "Widgets", components: ["AgentActivity", "LiveMetric"] } } : {},
       Primitives: { title: "Primitives", components: ["Button", "Badge", "Separator"] }
     },
     components,
@@ -5050,6 +5450,6 @@ function VerticalBuilder({
   ] });
 }
 
-export { ASSET_REF_PREFIX, Accordion, AgentsPanel, AssetResolverProvider, AvatarBlock, Banner, BlockImage, CTABanner, Callout, Columns, ConnectionProvider, ContactForm, Container, DataTable, DataTableBlock, EmptyState, FAQ, FeatureGrid, Footer, Gallery, GridView, Hero, LegalArbiProvider, ListBlock, LogoCloud, MediaText, MetricCard, ModuleManager, Navbar, PageHeader, PageRenderer, PricingTable, RichTextBlock, Section, SectionHeading, Spacer, StatGroup, Steps, StudioEditor, THEME_STYLE_ID, Tabs, TeamGrid, Testimonial, TestimonialGrid, ThemeEditor, Toolbar, VerticalBuilder, VideoEmbed, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearThemeVars, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createThemeStore, createVerticalExport, createWebsiteBlocks, daysUntil, fmtDate, fmtDateTime, fromNow, gbp, hrs, iconMap, initials, isAssetRef, isAuthenticated, materializePageData, matterToContext, pct, tid, toEmbedUrl, toHslTriplet, useAssetResolverActive, useConnection, useFirmAiTask, useImageGen, useSemanticSearch, useWorkspaceDocs };
+export { ASSET_REF_PREFIX, Accordion, AgentsPanel, AppShell, AssetResolverProvider, AvatarBlock, Banner, BlockImage, CTABanner, Callout, Columns, ConnectionProvider, ContactForm, Container, DataTable, DataTableBlock, EmptyState, FAQ, FeatureGrid, Footer, Gallery, GridView, Hero, LegalArbiProvider, ListBlock, LiveDataProvider, LogoCloud, MediaText, MetricCard, ModuleManager, Navbar, PageHeader, PageRenderer, PricingTable, RichTextBlock, Section, SectionHeading, Spacer, StatGroup, Steps, StudioEditor, THEME_STYLE_ID, Tabs, TeamGrid, Testimonial, TestimonialGrid, ThemeEditor, Toolbar, VerticalBuilder, VideoEmbed, WidgetPlaceholder, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearThemeVars, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createLiveWidgets, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createThemeStore, createVerticalExport, createWebsiteBlocks, daysUntil, fmtDate, fmtDateTime, fromNow, gbp, hrs, iconMap, initials, isAssetRef, isAuthenticated, materializePageData, matterToContext, pct, tid, toEmbedUrl, toHslTriplet, useAssetResolverActive, useConnection, useFirmAiTask, useImageGen, useLiveDataActive, useSemanticSearch, useWorkspaceDocs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map