@arbidocs/blocks 0.3.161 → 0.3.162

package/dist/index.d.cts

@@ -722,6 +722,12 @@ interface RecentActivityCardProps {
     actionLabel?: string;
     actionIcon?: LucideIcon;
     onAction?: () => void;
+    /**
+     * A custom header action node — rendered in the action slot INSTEAD of the
+     * built-in label button. For actions that aren't a single click (e.g. a
+     * source dropdown). The empty-card CTA still uses `onAction`/`emptyActionLabel`.
+     */
+    action?: ReactNode;
     rows: RecentActivityRow[];
     /** Says what the list is — "Recent", "Recently joined". */
     caption?: string;
@@ -764,7 +770,7 @@ interface RecentActivityCardProps {
  * Styled with SEMANTIC tokens only (card, border, foreground, muted-foreground,
  * primary, accent), so every firm gets it in its own colours.
  */
-declare function RecentActivityCard({ icon: Icon, title, count, onOpen, actionLabel, actionIcon: ActionIcon, onAction, rows, caption, emptyText, emptyActionLabel, className, testId, }: RecentActivityCardProps): react.JSX.Element;
+declare function RecentActivityCard({ icon: Icon, title, count, onOpen, actionLabel, actionIcon: ActionIcon, onAction, action, rows, caption, emptyText, emptyActionLabel, className, testId, }: RecentActivityCardProps): react.JSX.Element;
 
 interface AskBarProps {
     /** Receives the trimmed question; the caller owns what asking means. */
@@ -835,6 +841,11 @@ interface SectionStripAction {
     label: string;
     onClick: () => void;
     testId?: string;
+    /**
+     * A custom element rendered in place of the default ghost button — for a
+     * primary/emphasised action that shouldn't look like the quiet header doors.
+     */
+    node?: ReactNode;
 }
 interface SectionStripProps {
     /** Glyph beside the title, in the header. */
@@ -849,11 +860,18 @@ interface SectionStripProps {
     actions?: SectionStripAction[];
     /** Captioned row groups; groups with no rows are skipped. */
     groups: SectionStripGroup[];
-    /** The one quiet row shown when every group is empty. */
+    /**
+     * Shown when every group is empty. By default a single quiet row. Supply an
+     * `icon` (and optional `description`) to render the fuller dashed empty state
+     * instead — the same shape a card uses, for sections that want the empty
+     * state to invite rather than just note.
+     */
     empty?: {
         label: ReactNode;
         onClick?: () => void;
         testId?: string;
+        icon?: LucideIcon;
+        description?: ReactNode;
     };
     className?: string;
     /** Root test id; children derive `-open` and per-action/per-group ids. */

package/dist/index.d.ts

@@ -722,6 +722,12 @@ interface RecentActivityCardProps {
     actionLabel?: string;
     actionIcon?: LucideIcon;
     onAction?: () => void;
+    /**
+     * A custom header action node — rendered in the action slot INSTEAD of the
+     * built-in label button. For actions that aren't a single click (e.g. a
+     * source dropdown). The empty-card CTA still uses `onAction`/`emptyActionLabel`.
+     */
+    action?: ReactNode;
     rows: RecentActivityRow[];
     /** Says what the list is — "Recent", "Recently joined". */
     caption?: string;
@@ -764,7 +770,7 @@ interface RecentActivityCardProps {
  * Styled with SEMANTIC tokens only (card, border, foreground, muted-foreground,
  * primary, accent), so every firm gets it in its own colours.
  */
-declare function RecentActivityCard({ icon: Icon, title, count, onOpen, actionLabel, actionIcon: ActionIcon, onAction, rows, caption, emptyText, emptyActionLabel, className, testId, }: RecentActivityCardProps): react.JSX.Element;
+declare function RecentActivityCard({ icon: Icon, title, count, onOpen, actionLabel, actionIcon: ActionIcon, onAction, action, rows, caption, emptyText, emptyActionLabel, className, testId, }: RecentActivityCardProps): react.JSX.Element;
 
 interface AskBarProps {
     /** Receives the trimmed question; the caller owns what asking means. */
@@ -835,6 +841,11 @@ interface SectionStripAction {
     label: string;
     onClick: () => void;
     testId?: string;
+    /**
+     * A custom element rendered in place of the default ghost button — for a
+     * primary/emphasised action that shouldn't look like the quiet header doors.
+     */
+    node?: ReactNode;
 }
 interface SectionStripProps {
     /** Glyph beside the title, in the header. */
@@ -849,11 +860,18 @@ interface SectionStripProps {
     actions?: SectionStripAction[];
     /** Captioned row groups; groups with no rows are skipped. */
     groups: SectionStripGroup[];
-    /** The one quiet row shown when every group is empty. */
+    /**
+     * Shown when every group is empty. By default a single quiet row. Supply an
+     * `icon` (and optional `description`) to render the fuller dashed empty state
+     * instead — the same shape a card uses, for sections that want the empty
+     * state to invite rather than just note.
+     */
     empty?: {
         label: ReactNode;
         onClick?: () => void;
         testId?: string;
+        icon?: LucideIcon;
+        description?: ReactNode;
     };
     className?: string;
     /** Root test id; children derive `-open` and per-action/per-group ids. */

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';
@@ -1340,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
     ] })
   ] });
@@ -1463,6 +1468,7 @@ function RecentActivityCard({
   actionLabel,
   actionIcon: ActionIcon,
   onAction,
+  action,
   rows,
   caption,
   emptyText,
@@ -1479,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,
@@ -1496,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",
@@ -1528,7 +1537,7 @@ function RecentActivityCard({
               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 })
               ]
@@ -1550,11 +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 — but quietly: a neutral wash plus the title
-                // turning primary. Loud primary tints and edge bars read as
-                // selection chrome, not hover.
-                "hover:bg-accent/60 has-[button:focus-visible]:bg-accent/60"
+                // 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(
@@ -1749,29 +1760,48 @@ function SectionStrip({
               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 })
               ]
             }
           ),
-          actions.map((action) => /* @__PURE__ */ jsxs(
-            Button,
+          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",
             {
-              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,
+              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: [
-                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 })
+                /* @__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 })
               ]
-            },
-            action.label
-          ))
-        ] }),
-        filledGroups.length === 0 ? empty ? /* @__PURE__ */ jsxs(
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -1791,7 +1821,7 @@ function SectionStrip({
               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",
+              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,