@arbidocs/blocks 0.3.115 → 0.3.117

package/dist/index.cjs

@@ -604,7 +604,25 @@ function ConnectionProvider({
           await arbi.selectWorkspace(target.external_id);
           setWorkspaceId(target.external_id);
         }
-        setUser({ name: email.split("@")[0], email });
+        let resolved = { name: email.split("@")[0], email };
+        try {
+          const me = arbi.user.identity();
+          const members = await arbi.workspaces.listUsers();
+          const self = members.find((m) => m.user.external_id === me?.externalId)?.user;
+          if (self) {
+            const fullName = [self.given_name, self.family_name].filter(Boolean).join(" ").trim();
+            resolved = {
+              name: fullName || email.split("@")[0],
+              email: self.email || email,
+              externalId: self.external_id,
+              picture: self.picture ?? null
+            };
+          } else if (me?.externalId) {
+            resolved.externalId = me.externalId;
+          }
+        } catch {
+        }
+        setUser(resolved);
         setStatus("authenticated");
       } catch (e) {
         setError(e instanceof Error ? e.message : "Sign-in failed. Check your credentials.");
@@ -2298,6 +2316,390 @@ function TestimonialGrid({ items, columns = "3", testId }) {
     i
   )) });
 }
+function NavItemLink({ item, onNavigate }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactRouterDom.NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      onClick: onNavigate,
+      "data-testid": tid("sidebar-nav", item.id),
+      className: ({ isActive }) => react.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__ */ jsxRuntime.jsx(item.icon, { className: "size-[18px] shrink-0" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+        item.arbi && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-3.5 text-sidebar-primary", "aria-label": "Powered by ARBI" })
+      ]
+    }
+  );
+}
+function SidebarBody({
+  sections,
+  footerItems,
+  logo,
+  logoHref,
+  logoLabel,
+  sidebarFooter,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-16 items-center border-b border-sidebar-border px-5", children: logoHref ? /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: logoHref, "aria-label": logoLabel, onClick: onNavigate, children: logo }) : logo }),
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex-1 space-y-6 overflow-y-auto px-3 py-5", children: sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-sidebar-foreground/55", children: section.heading }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NavItemLink, { item, onNavigate }, item.id)) })
+    ] }, section.heading)) }),
+    (footerItems?.length || sidebarFooter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-sidebar-border px-3 py-3", children: [
+      footerItems?.map((item) => /* @__PURE__ */ jsxRuntime.jsx(NavItemLink, { item, onNavigate }, item.id)),
+      sidebarFooter
+    ] })
+  ] });
+}
+function AppShell({
+  sections,
+  footerItems,
+  logo,
+  logoHref,
+  logoLabel,
+  sidebarFooter,
+  topbar,
+  rightRail,
+  children,
+  mainClassName,
+  testIdPrefix = "app"
+}) {
+  const [open, setOpen] = react$1.useState(false);
+  const location = reactRouterDom.useLocation();
+  react$1.useEffect(() => {
+    setOpen(false);
+  }, [location.pathname]);
+  const body = (onNavigate) => /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarBody,
+    {
+      sections,
+      footerItems,
+      logo,
+      logoHref,
+      logoLabel,
+      sidebarFooter,
+      onNavigate
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex h-screen overflow-hidden bg-background",
+      "data-testid": `${testIdPrefix}-shell`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "fixed inset-0 z-50 lg:hidden",
+            "data-testid": `${testIdPrefix}-sidebar-mobile`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 bg-black/60 backdrop-blur-sm",
+                  onClick: () => setOpen(false),
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5" })
+                  }
+                ),
+                body(() => setOpen(false))
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "size-5" })
+                  }
+                ),
+                topbar
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "main",
+            {
+              className: react.cn("flex-1 overflow-y-auto", mainClassName),
+              "data-testid": `${testIdPrefix}-main`,
+              children
+            }
+          )
+        ] }),
+        rightRail
+      ]
+    }
+  );
+}
+function AppHeader({
+  onSearch,
+  onAsk,
+  searchPlaceholder = "Ask AI or search\u2026",
+  searchKbd = "\u2318K",
+  askLabel = "Ask AI",
+  leading,
+  actions,
+  user,
+  userItems,
+  onLogout,
+  onNotificationNavigate,
+  notificationTones,
+  classNames,
+  testIdPrefix = "app"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onSearch,
+        className: classNames?.search ?? "relative hidden max-w-md flex-1 items-center rounded-md border border-input bg-background py-2 pl-9 pr-3 text-left text-sm text-muted-foreground transition-colors hover:bg-accent md:flex",
+        "data-testid": tid(testIdPrefix, "global-search"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: searchPlaceholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-[10px]", children: searchKbd })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-3", children: [
+      leading,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        react.Button,
+        {
+          size: "sm",
+          onClick: onAsk ?? onSearch,
+          className: classNames?.askButton,
+          "data-testid": tid(testIdPrefix, "ask-ai"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "size-4" }),
+            askLabel
+          ]
+        }
+      ),
+      actions,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.NotificationBell,
+        {
+          testId: tid(testIdPrefix, "notifications"),
+          onNavigate: onNotificationNavigate,
+          toneClassNames: notificationTones
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        react.UserMenu,
+        {
+          user,
+          items: userItems,
+          onLogout,
+          testId: tid(testIdPrefix, "user-menu"),
+          logoutTestId: tid(testIdPrefix, "logout")
+        }
+      )
+    ] })
+  ] });
+}
+var LiveDataContext = react$1.createContext(false);
+function useLiveDataActive() {
+  return react$1.useContext(LiveDataContext);
+}
+function LiveDataProvider({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(LiveDataContext.Provider, { value: true, children });
+}
+function WidgetPlaceholder({
+  label,
+  icon: Icon = lucideReact.Sparkles,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: label }),
+          /* @__PURE__ */ jsxRuntime.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: lucideReact.FileText },
+  conversations: { label: "Agent threads", icon: lucideReact.Bot }
+};
+var asMetricSource = (s) => s in METRIC_SOURCES ? s : "documents";
+function AgentActivityLive({
+  title,
+  limit,
+  testId
+}) {
+  const wsId = useActiveWorkspaceId();
+  const { data, isLoading } = react.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__ */ jsxRuntime.jsxs(react.Card, { variant: "elevated", className: "rounded-xl p-5", "data-testid": testId, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bot, { className: "size-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", "data-testid": `${testId}-loading`, children: "Loading agent threads\u2026" }) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", "data-testid": `${testId}-empty`, children: "No agent threads yet." }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", "data-testid": `${testId}-list`, children: rows.map((c, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: "flex items-center justify-between gap-3",
+        "data-testid": `${testId}-item-${i}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 truncate", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessagesSquare, { className: "size-3.5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm text-foreground", children: c.title?.trim() || "Untitled thread" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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 = react.useDocuments(wsId, { enabled: source === "documents" });
+  const convos = react.useConversations(wsId, { enabled: source === "conversations" });
+  const query = source === "documents" ? docs : convos;
+  const count = Array.isArray(query.data) ? query.data.length : 0;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AgentActivityLive, { title, limit, testId }) : /* @__PURE__ */ jsxRuntime.jsx(WidgetPlaceholder, { label: String(title || "Agent activity"), icon: lucideReact.Bot, testId });
+}
+function LiveMetricBlock({
+  label,
+  source,
+  accent,
+  testId
+}) {
+  const src = asMetricSource(source);
+  return useLiveDataActive() ? /* @__PURE__ */ jsxRuntime.jsx(LiveMetricInner, { label, source: src, accent, testId }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LiveMetricBlock, { label, source, accent, testId: blockTestId(id) })
+  };
+  return {
+    AgentActivity: AgentActivityWidget,
+    LiveMetric: LiveMetricWidget
+  };
+}
 
 // src/studio/publish.ts
 function blobToDataUrl(blob) {
@@ -2572,34 +2974,36 @@ function PageRenderer({
   live,
   slug: slugProp,
   emptyState,
-  testIdPrefix = "studio"
+  testIdPrefix = "studio",
+  liveData = false,
+  initialData,
+  applyTheme = true
 }) {
   const params = reactRouterDom.useParams();
   const slug = slugProp ?? params.slug ?? "home";
   const arbi = react.useArbi();
-  const [data, setData] = react$1.useState(null);
-  const [loading, setLoading] = react$1.useState(true);
+  const [data, setData] = react$1.useState(initialData ?? null);
+  const [loading, setLoading] = react$1.useState(!initialData);
   react$1.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__ */ jsxRuntime.jsx(
       "div",
@@ -2625,7 +3029,8 @@ function PageRenderer({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { "data-testid": `page-${testIdPrefix}-render`, children: /* @__PURE__ */ jsxRuntime.jsx(puck.Render, { config, data }) });
+  const rendered = /* @__PURE__ */ jsxRuntime.jsx(puck.Render, { config, data });
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { "data-testid": `page-${testIdPrefix}-render`, children: liveData ? /* @__PURE__ */ jsxRuntime.jsx(LiveDataProvider, { children: rendered }) : rendered });
 }
 
 // src/studio/persistence.ts
@@ -2900,6 +3305,9 @@ function useImageGen() {
     reset: task.reset
   };
 }
+function toJpgName(name) {
+  return name.replace(/\.[^.]+$/, "") + ".jpg";
+}
 var IMAGE_EXT = /\.(png|jpe?g|webp|gif|avif|svg)$/i;
 function ImageFieldControl({
   value,
@@ -2913,9 +3321,12 @@ function ImageFieldControl({
   const [url, setUrl] = react$1.useState("");
   const [prompt, setPrompt] = react$1.useState("");
   const [busy, setBusy] = react$1.useState(false);
+  const [cropSrc, setCropSrc] = react$1.useState(null);
+  const [cropName, setCropName] = react$1.useState("image.jpg");
   const arbi = react.useArbi();
   const gen = useImageGen();
   const queryClient = reactQuery.useQueryClient();
+  const currentAssetImage = useAssetImage(isAssetRef(value) ? assetRefId(value) : "");
   const tp = (...q) => tid(`${testIdPrefix}-image`, name, ...q);
   const refreshAssets = () => queryClient.invalidateQueries({ queryKey: ["arbi", "documents", workspaceId] });
   const { data: docs } = react.useDocuments(workspaceId);
@@ -2930,13 +3341,24 @@ function ImageFieldControl({
     [imageDocs]
   );
   const { data: thumbs } = react.useThumbnails(imageIds);
-  const onUpload = async (e) => {
+  const onUpload = (e) => {
     const file = e.target.files?.[0];
     if (!file) return;
+    setCropName(toJpgName(file.name));
+    setCropSrc(URL.createObjectURL(file));
+    e.target.value = "";
+  };
+  const openReframe = () => {
+    if (!currentAssetImage) return;
+    setCropName("reframe.jpg");
+    setCropSrc(currentAssetImage);
+  };
+  const uploadBlobAsAsset = async (blob, name2) => {
     setBusy(true);
     try {
       await arbi.selectWorkspace(workspaceId);
-      const res = await arbi.documents.uploadFile(file, file.name, { folder });
+      const file = new File([blob], name2, { type: blob.type });
+      const res = await arbi.documents.uploadFile(file, name2, { folder });
       const id = res.doc_ext_ids?.[0];
       if (id) {
         onChange(asAssetRef(id));
@@ -2946,6 +3368,12 @@ function ImageFieldControl({
       setBusy(false);
     }
   };
+  const onCropComplete = async (result) => {
+    const src = cropSrc;
+    setCropSrc(null);
+    await uploadBlobAsAsset(result.blob, cropName);
+    if (src?.startsWith("blob:")) URL.revokeObjectURL(src);
+  };
   const onGenerate = async () => {
     if (!prompt.trim() || gen.isGenerating) return;
     const id = await gen.generate(prompt);
@@ -2963,7 +3391,22 @@ function ImageFieldControl({
   const inputClass = "w-full rounded-md border border-border bg-card px-2.5 py-1.5 text-sm text-foreground outline-none focus:border-primary";
   const tabClass = (on) => `inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium ${on ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", "data-testid": tp(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BlockImage, { src: value, aspect: "16:9", rounded: "md", testId: tp("preview") }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BlockImage, { src: value, aspect: "16:9", rounded: "md", testId: tp("preview") }),
+      currentAssetImage ? /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: openReframe,
+          className: "absolute right-1.5 top-1.5 inline-flex items-center gap-1 rounded-md bg-background/85 px-2 py-1 text-xs font-medium text-foreground shadow-sm backdrop-blur hover:bg-background",
+          "data-testid": tp("reframe"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Crop, { className: "size-3" }),
+            " Crop"
+          ]
+        }
+      ) : null
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: MODES.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -3080,6 +3523,19 @@ function ImageFieldControl({
         "data-testid": tp("clear"),
         children: "Clear"
       }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.ImageCropModal,
+      {
+        open: !!cropSrc,
+        image: cropSrc,
+        title: "Frame your image",
+        aspectOptions: react.DEFAULT_ASPECT_OPTIONS,
+        cropShape: "rect",
+        output: { maxSize: 1600 },
+        onComplete: onCropComplete,
+        onCancel: () => setCropSrc(null)
+      }
     )
   ] });
 }
@@ -4233,6 +4689,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;
@@ -4270,16 +4733,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__ */ jsxRuntime.jsx(
+    defaultProps: { title: "Page title", actions: emptySlot2 },
+    render: ({ id, title, eyebrow, description, actions: Actions }) => /* @__PURE__ */ jsxRuntime.jsx(
       PageHeader,
       {
         title,
         eyebrow,
         description,
+        actions: /* @__PURE__ */ jsxRuntime.jsx(Actions, { className: "flex items-center gap-2" }),
         testId: blockTestId(id)
       }
     )
@@ -4289,16 +4755,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__ */ jsxRuntime.jsx(
+    defaultProps: { title: "Nothing here yet", action: emptySlot2 },
+    render: ({ id, title, description, icon, action: Action }) => /* @__PURE__ */ jsxRuntime.jsx(
       EmptyState,
       {
         title,
         description,
         icon: resolveIcon(icon),
+        action: /* @__PURE__ */ jsxRuntime.jsx(Action, {}),
         testId: blockTestId(id)
       }
     )
@@ -4351,6 +4819,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__ */ jsxRuntime.jsx("div", { "data-testid": blockTestId(id), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Items,
+      {
+        className: react.cn(
+          "grid grid-cols-1",
+          METRIC_COLS[columns] ?? METRIC_COLS["3"],
+          METRIC_GAP[gap] ?? METRIC_GAP.md
+        )
+      }
+    ) })
+  };
   const DataTableBlockConfig = {
     label: "Data table",
     fields: {
@@ -4549,11 +5053,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,
@@ -4561,7 +5067,8 @@ function createArbiBlocksConfig(opts = {}) {
     Badge: BadgeBlock,
     Separator: SeparatorBlock,
     ...website,
-    ...site
+    ...site,
+    ...widgets
   };
   const config = {
     categories: {
@@ -4595,7 +5102,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,
@@ -5119,6 +5627,8 @@ Object.defineProperty(exports, "toRedlineMarkdown", {
 exports.ASSET_REF_PREFIX = ASSET_REF_PREFIX;
 exports.Accordion = Accordion;
 exports.AgentsPanel = AgentsPanel;
+exports.AppHeader = AppHeader;
+exports.AppShell = AppShell;
 exports.AssetResolverProvider = AssetResolverProvider;
 exports.AvatarBlock = AvatarBlock;
 exports.Banner = Banner;
@@ -5140,6 +5650,7 @@ exports.GridView = GridView;
 exports.Hero = Hero;
 exports.LegalArbiProvider = LegalArbiProvider;
 exports.ListBlock = ListBlock;
+exports.LiveDataProvider = LiveDataProvider;
 exports.LogoCloud = LogoCloud;
 exports.MediaText = MediaText;
 exports.MetricCard = MetricCard;
@@ -5164,6 +5675,7 @@ exports.ThemeEditor = ThemeEditor;
 exports.Toolbar = Toolbar;
 exports.VerticalBuilder = VerticalBuilder;
 exports.VideoEmbed = VideoEmbed;
+exports.WidgetPlaceholder = WidgetPlaceholder;
 exports.applyStoredTheme = applyStoredTheme;
 exports.applyThemeVars = applyThemeVars;
 exports.asAssetRef = asAssetRef;
@@ -5175,6 +5687,7 @@ exports.createArbiBlocksConfig = createArbiBlocksConfig;
 exports.createArbiMaterializer = createArbiMaterializer;
 exports.createBlockKit = createBlockKit;
 exports.createImageField = createImageField;
+exports.createLiveWidgets = createLiveWidgets;
 exports.createModuleRegistry = createModuleRegistry;
 exports.createModuleStore = createModuleStore;
 exports.createPromptLibrary = createPromptLibrary;
@@ -5203,6 +5716,7 @@ exports.useAssetResolverActive = useAssetResolverActive;
 exports.useConnection = useConnection;
 exports.useFirmAiTask = useFirmAiTask;
 exports.useImageGen = useImageGen;
+exports.useLiveDataActive = useLiveDataActive;
 exports.useSemanticSearch = useSemanticSearch;
 exports.useWorkspaceDocs = useWorkspaceDocs;
 //# sourceMappingURL=index.cjs.map