@arbidocs/blocks 0.3.160 → 0.3.162

package/dist/index.js

@@ -1,7 +1,7 @@
 import { formatPageRefs, tid, initials, fromNow, fmtDate, assetRefId, applyStoredTheme, AssetResolverProvider, ThemeEditor, applyThemeVars, SectionHeading, PricingTable, Tabs as Tabs$1, Accordion, Gallery, VideoEmbed, ContactForm, Banner, MediaText, TeamGrid, Steps, TestimonialGrid, Columns, Spacer, Container, Hero, FeatureGrid, Testimonial, CTABanner, LogoCloud, FAQ, Timeline, RichTextBlock, Callout, BlockImage, AvatarBlock, Navbar, Footer, ListBlock, isAssetRef, asAssetRef } from './chunk-27Q4AST5.js';
 export { ASSET_REF_PREFIX, Accordion, AssetResolverProvider, AvatarBlock, Banner, BlockImage, BlockLink, CTABanner, Callout, Columns, ContactForm, Container, FAQ, FONT_PAIRINGS, FeatureGrid, Footer, Gallery, Hero, ListBlock, LogoCloud, MediaText, Navbar, PricingTable, RichTextBlock, SectionHeading, Spacer, Steps, THEME_STYLE_ID, Tabs, TeamGrid, Testimonial, TestimonialGrid, ThemeEditor, Timeline, TimelineCalendar, TimelineGantt, VideoEmbed, applyFontVars, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearFontVars, clearThemeVars, createThemeStore, dayKey, daysUntil, fmtDate, fmtDateTime, fontPackages, formatPageRefs, formatSpan, fromNow, gbp, getFontPairing, hrs, initials, isAssetRef, matchFontPairing, monthLabel, parseIso, pct, tid, toEmbedUrl, toHslTriplet, useAssetRenderer, useAssetResolverActive, utcDay } from './chunk-27Q4AST5.js';
 import { createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } 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, X, Loader2, UploadCloud, Search, Pencil, ChevronDown, ArrowUpRight, ArrowDownRight, ChevronRight, Plus, FolderLock, CheckCircle2, ArrowLeftRight, MessagesSquare, Menu, ArrowLeft, Palette, RotateCcw, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Download, Crop, ImagePlus, Upload, Link2, Check } from 'lucide-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, X, Loader2, UploadCloud, Search, Pencil, ChevronDown, ArrowUpRight, ArrowDownRight, Plus, FolderLock, CheckCircle2, ArrowLeftRight, MessagesSquare, Menu, ArrowLeft, Palette, RotateCcw, ChevronUp, BrainCircuit, Bot, LayoutGrid, FileJson, Download, Crop, ImagePlus, Upload, Link2, Check } from 'lucide-react';
 import { cn, DocumentEntity, useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Input, Textarea, Avatar, AvatarImage, AvatarFallback, Card, Button, CardHeader, CardTitle, CardDescription, CardContent, Tooltip, TooltipTrigger, TooltipContent, CardFooter, TooltipProvider, NotificationBell, UserMenu, useThumbnails, Badge, Switch, useConfigs, useAgents, Checkbox, Tabs, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider, useDocuments, ImageCropModal, DEFAULT_ASPECT_OPTIONS, useConversations } from '@arbidocs/react';
 export { DocumentCard, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, redlineStats, textToArtifact, toRedlineMarkdown } from '@arbidocs/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -643,10 +643,10 @@ function DataTableBlock({ columns, rows, caption, emptyText, testId }) {
   ] });
 }
 var arbiTheme = themeQuartz.withParams({
-  // Font settings
-  fontFamily: {
-    googleFont: "Nunito"
-  },
+  // Font settings — inherit the host app's font. A googleFont here never
+  // loaded under the apps' CSP, so every grid silently fell back to the
+  // browser's default SERIF and read as unstyled.
+  fontFamily: "inherit",
   fontSize: 14,
   headerFontSize: 13,
   headerFontWeight: 600,
@@ -1039,6 +1039,42 @@ function GridView({
     }
   ) });
 }
+function UsageMeter({
+  icon: Icon,
+  label,
+  value,
+  pct: pct2,
+  hint,
+  className,
+  testId
+}) {
+  const clamped = Math.max(0, Math.min(100, pct2));
+  const tone = clamped >= 100 ? "bg-destructive" : clamped >= 80 ? "bg-amber-500" : "bg-primary";
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-1.5", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-muted-foreground", children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+          label,
+          hint ? ` (${hint})` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium tabular-nums text-foreground", children: value })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("h-full rounded-full transition-[width]", tone),
+        style: { width: `${clamped}%` },
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label
+      }
+    ) })
+  ] });
+}
 function UploadDropzone({
   onFiles,
   accept,
@@ -1304,21 +1340,26 @@ function IdentityFieldRow({ field, canEdit }) {
             children: charsLeft < 0 ? `${-charsLeft} over` : `${charsLeft} left`
           }
         )
-      ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: cn("px-1.5 py-0.5", valueClassName), "data-testid": testId, children: value || /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: placeholder }) }),
-        canEdit && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setIsEditing(true),
-            "aria-label": `Edit ${label.toLowerCase()}`,
-            title: `Edit ${label.toLowerCase()}`,
-            className: "shrink-0 cursor-pointer rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-            "data-testid": testId && `${testId}-edit`,
-            children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" })
-          }
-        )
-      ] }),
+      ] }) : (
+        // `identity-field` (not the generic `group`) scopes the pencil's hover
+        // to THIS field only — an ancestor card also carries `group`, so a
+        // `.group:hover` rule would reveal every field's pencil at once.
+        /* @__PURE__ */ jsxs("span", { className: "identity-field flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("px-1.5 py-0.5", valueClassName), "data-testid": testId, children: value || /* @__PURE__ */ jsx("span", { className: "italic text-muted-foreground", children: placeholder }) }),
+          canEdit && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setIsEditing(true),
+              "aria-label": `Edit ${label.toLowerCase()}`,
+              title: `Edit ${label.toLowerCase()}`,
+              className: "shrink-0 cursor-pointer rounded p-1 text-muted-foreground opacity-0 transition-[color,background-color,opacity] hover:bg-accent hover:text-foreground focus-visible:opacity-100 [.identity-field:hover_&]:opacity-100",
+              "data-testid": testId && `${testId}-edit`,
+              children: /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" })
+            }
+          )
+        ] })
+      ),
       trailing ? /* @__PURE__ */ jsx("div", { className: "ml-auto shrink-0", children: trailing }) : null
     ] })
   ] });
@@ -1427,6 +1468,7 @@ function RecentActivityCard({
   actionLabel,
   actionIcon: ActionIcon,
   onAction,
+  action,
   rows,
   caption,
   emptyText,
@@ -1443,7 +1485,11 @@ function RecentActivityCard({
         // scrolling inside a fixed-height card puts a scrollbar in the middle
         // of the page, where every other page in the app scrolls at its outer
         // edge. The page is the scroll container; the card is just tall.
-        "card-hover flex flex-col overflow-hidden rounded-xl bg-card p-0 shadow-sm",
+        //
+        // No `card-hover` lift: the card is a container, not a single link — its
+        // header and each row have their OWN hover, so a whole-card lift on any
+        // hover would highlight the section instead of the item under the cursor.
+        "flex flex-col overflow-hidden rounded-xl bg-card p-0 shadow-sm",
         className
       ),
       "data-testid": testId,
@@ -1460,12 +1506,11 @@ function RecentActivityCard({
               children: [
                 Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
                 /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-sm font-semibold text-foreground", children: title }),
-                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count }),
-                onOpen && /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" })
+                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count })
               ]
             }
           ),
-          actionLabel ? /* @__PURE__ */ jsxs(
+          action ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action }) : actionLabel ? /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "ghost",
@@ -1489,10 +1534,10 @@ function RecentActivityCard({
             {
               type: "button",
               onClick: onAction,
-              className: "group m-3 flex flex-1 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 text-center transition-colors hover:border-primary/40 hover:bg-primary/5 focus-visible:border-primary/40 focus-visible:bg-primary/5 focus-visible:outline-none",
+              className: "group m-3 flex flex-1 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
               "data-testid": testId && `${testId}-empty-action`,
               children: [
-                /* @__PURE__ */ jsx("span", { className: "flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: ActionIcon ? /* @__PURE__ */ jsx(ActionIcon, { className: "size-5" }) : /* @__PURE__ */ jsx(Plus, { className: "size-5" }) }),
+                /* @__PURE__ */ jsx("span", { className: "mt-6 flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: ActionIcon ? /* @__PURE__ */ jsx(ActionIcon, { className: "size-5" }) : /* @__PURE__ */ jsx(Plus, { className: "size-5" }) }),
                 /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: emptyActionLabel ?? actionLabel }),
                 /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: emptyText })
               ]
@@ -1514,12 +1559,13 @@ function RecentActivityCard({
             {
               className: cn(
                 "group relative flex items-center border-b border-border/60 transition-colors last:border-b-0",
-                // A row is a link to somewhere, so hovering it has to look
-                // like one. A 40%-alpha accent wash was too faint to read as
-                // an affordance at all — this is a definite tint plus an
-                // accent bar down the leading edge.
-                "hover:bg-primary/10 has-[button:focus-visible]:bg-primary/10",
-                "before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:bg-primary before:opacity-0 before:transition-opacity hover:before:opacity-100"
+                // Clearly highlight the row under the cursor so it's obvious
+                // which item will be clicked. Use the ungated `[&:hover]`
+                // selector rather than `hover:` — the latter compiles behind
+                // `@media (hover: hover)`, so on a touchscreen (primary pointer
+                // reports `hover: none`) the highlight never shows even with a
+                // real mouse attached.
+                "[&:hover]:bg-primary/10 has-[button:focus-visible]:bg-primary/10"
               ),
               children: [
                 /* @__PURE__ */ jsxs(
@@ -1555,6 +1601,272 @@ function RecentActivityCard({
     }
   );
 }
+function AskBar({
+  onAsk,
+  onSearch,
+  suggestions = [],
+  placeholder = "Ask anything\u2026",
+  askLabel = "Ask",
+  searchLabel = "Search",
+  value,
+  onValueChange,
+  onInputKeyDown,
+  menu,
+  inputRef: externalInputRef,
+  className,
+  testId = "ask-bar"
+}) {
+  const [innerText, setInnerText] = useState("");
+  const text = value !== void 0 ? value : innerText;
+  const setText = (next) => {
+    onValueChange?.(next);
+    if (value === void 0) setInnerText(next);
+  };
+  const localInputRef = useRef(null);
+  const inputRef = externalInputRef ?? localInputRef;
+  const submitTo = (handler) => {
+    const question = text.trim();
+    if (!question) return;
+    handler(question);
+    setText("");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      menu,
+      /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            submitTo(onAsk);
+          },
+          className: "flex h-12 items-center gap-1.5 rounded-md border border-border/50 bg-background pl-3 pr-1.5 transition-colors focus-within:border-border",
+          children: [
+            /* @__PURE__ */ jsx(Search, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: text,
+                onChange: (e) => setText(e.target.value),
+                onKeyDown: onInputKeyDown,
+                placeholder,
+                className: "h-8 min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground",
+                "data-testid": testId && `${testId}-input`
+              }
+            ),
+            onSearch && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled: !text.trim(),
+                onClick: () => submitTo(onSearch),
+                className: "h-8 shrink-0 px-2.5 text-xs font-medium text-muted-foreground hover:text-foreground",
+                "data-testid": testId && `${testId}-search`,
+                children: searchLabel
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "submit",
+                size: "sm",
+                disabled: !text.trim(),
+                className: "h-8 shrink-0 px-3 text-xs font-medium",
+                "data-testid": testId && `${testId}-submit`,
+                children: [
+                  /* @__PURE__ */ jsx(Sparkles, { className: "size-3.5" }),
+                  askLabel
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    suggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: suggestions.map((s) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setText(s);
+          inputRef.current?.focus();
+        },
+        className: "rounded-full border border-border/50 bg-card px-3 py-1 text-xs text-muted-foreground transition-colors hover:border-border hover:bg-accent hover:text-foreground",
+        "data-testid": testId && `${testId}-suggestion`,
+        children: s
+      },
+      s
+    )) })
+  ] });
+}
+function ResumeStrip({
+  items,
+  caption = "Pick up where you left off",
+  className,
+  testId = "resume-strip"
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), "data-testid": testId, children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: caption }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: item.onClick,
+        title: item.title,
+        className: "group flex min-w-0 items-center gap-2 rounded-lg border border-border/50 bg-card py-2 pl-2.5 pr-3 shadow-sm transition-colors hover:border-border hover:bg-accent/50",
+        "data-testid": testId && `${testId}-item`,
+        children: [
+          item.leading,
+          /* @__PURE__ */ jsx("span", { className: "max-w-[14rem] truncate text-sm font-medium text-foreground group-hover:text-primary", children: item.title }),
+          item.meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground", children: item.meta })
+        ]
+      },
+      item.id
+    )) })
+  ] });
+}
+function SectionStrip({
+  icon: Icon,
+  title,
+  count,
+  onOpen,
+  actions = [],
+  groups,
+  empty,
+  className,
+  testId = "section-strip"
+}) {
+  const filledGroups = groups.filter((g) => g.rows.length > 0);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("rounded-xl border border-border/60 bg-card p-2 shadow-sm", className),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onOpen,
+              disabled: !onOpen,
+              className: "group flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-primary/10 disabled:cursor-default disabled:hover:bg-transparent",
+              "data-testid": testId && `${testId}-open`,
+              children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-sm font-semibold text-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count })
+              ]
+            }
+          ),
+          actions.map(
+            (action) => action.node ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: action.node }, action.label) : /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 shrink-0 px-2 text-xs font-medium text-muted-foreground hover:text-foreground",
+                onClick: action.onClick,
+                title: action.label,
+                "data-testid": action.testId,
+                children: [
+                  action.icon && /* @__PURE__ */ jsx(action.icon, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only @md:not-sr-only @md:ml-1.5", children: action.label })
+                ]
+              },
+              action.label
+            )
+          )
+        ] }),
+        filledGroups.length === 0 ? empty ? empty.icon ? (
+          // Fuller dashed empty state, matching a card's — an invitation, not
+          // just a note. The icon glyph rides a tinted circle that fills on
+          // hover, exactly like RecentActivityCard's empty card.
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: empty.onClick,
+              className: "group mt-2 flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border px-4 py-8 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
+              "data-testid": empty.testId,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "mt-2 flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsx(empty.icon, { className: "size-5" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: empty.label }),
+                empty.description && /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: empty.description })
+              ]
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: empty.onClick,
+            className: "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted-foreground transition-colors hover:bg-primary/5 hover:text-foreground",
+            "data-testid": empty.testId,
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-3.5 shrink-0" }),
+              empty.label
+            ]
+          }
+        ) : null : /* @__PURE__ */ jsx("div", { className: "grid gap-x-4 @2xl:grid-cols-2", children: filledGroups.map((group) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "mt-1 px-2 pb-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.caption }),
+          /* @__PURE__ */ jsx("ul", { children: group.rows.map((row) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: row.onClick,
+              title: row.title,
+              className: "group flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors [&:hover]:bg-primary/10",
+              "data-testid": group.rowTestId ?? (testId && `${testId}-row`),
+              children: [
+                row.leading,
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground group-hover:text-primary", children: row.title }),
+                row.meta && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground", children: row.meta })
+              ]
+            }
+          ) }, row.id)) })
+        ] }, group.caption)) })
+      ]
+    }
+  );
+}
+function StartHero({
+  title,
+  subtitle,
+  children,
+  tile,
+  footer,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("py-6", className), "data-testid": testId, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-2xl flex-col gap-5 text-center", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: subtitle })
+    ] }),
+    children,
+    tile && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: tile.onClick,
+        className: "group flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-border px-4 py-6 text-center transition-colors hover:border-border hover:bg-accent/50 focus-visible:border-border focus-visible:bg-accent/50 focus-visible:outline-none",
+        "data-testid": tile.testId,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground", children: /* @__PURE__ */ jsx(tile.icon, { className: "size-5" }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: tile.label }),
+          tile.description && /* @__PURE__ */ jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: tile.description })
+        ]
+      }
+    ),
+    footer && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: footer })
+  ] }) });
+}
 var MAX_AVATARS = 3;
 function WorkspaceCard({
   name,
@@ -5192,6 +5504,6 @@ function VerticalBuilder({
   ] });
 }
 
-export { AgentsPanel, AppHeader, AppShell, AssetThumb, CitationEditor, ConnectionProvider, DataTable, DataTableBlock, EmptyState, EntityIdentityBar, GridView, IDENTITY_NAME_MAX_LENGTH, LegalArbiProvider, LiveDataProvider, MemberAvatarStack, MetricCard, ModuleManager, PageHeader, PageRenderer, RecentActivityCard, Section, StatGroup, StudioEditor, Toolbar, UploadDropzone, VerticalBuilder, WidgetPlaceholder, WorkspaceCard, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createLiveWidgets, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createVerticalExport, createWebsiteBlocks, iconMap, isAuthenticated, materializePageData, matterToContext, useAssetImage, useConnection, useFirmAiTask, useImageGen, useLiveDataActive, useSemanticSearch, useWorkspaceDocs };
+export { AgentsPanel, AppHeader, AppShell, AskBar, AssetThumb, CitationEditor, ConnectionProvider, DataTable, DataTableBlock, EmptyState, EntityIdentityBar, GridView, IDENTITY_NAME_MAX_LENGTH, LegalArbiProvider, LiveDataProvider, MemberAvatarStack, MetricCard, ModuleManager, PageHeader, PageRenderer, RecentActivityCard, ResumeStrip, Section, SectionStrip, StartHero, StatGroup, StudioEditor, Toolbar, UploadDropzone, UsageMeter, VerticalBuilder, WidgetPlaceholder, WorkspaceCard, createAgentSelectionStore, createAiFields, createArbiBlocksConfig, createArbiMaterializer, createBlockKit, createImageField, createLiveWidgets, createModuleRegistry, createModuleStore, createPromptLibrary, createSiteBlocks, createStudioPersistence, createVerticalExport, createWebsiteBlocks, iconMap, isAuthenticated, materializePageData, matterToContext, useAssetImage, useConnection, useFirmAiTask, useImageGen, useLiveDataActive, useSemanticSearch, useWorkspaceDocs };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map