@arbidocs/blocks 0.3.127 → 0.3.128

package/dist/index.d.cts

@@ -520,23 +520,50 @@ interface WorkspaceCardMember {
 }
 interface WorkspaceCardProps {
     name: string;
-    /** Uppercase eyebrow above the description, e.g. the matter/project name. */
+    /** Uppercase eyebrow under the name, e.g. the matter reference. Omit to let
+     *  the name and description carry the card on their own. */
     matterRef?: string;
     description?: string;
     docCount: number;
+    /** Conversation count, shown as a third stat. Omit to hide the stat entirely. */
+    chatCount?: number;
     /** Defaults to `members.length` when omitted. */
     memberCount?: number;
-    /** Drives the overlapping avatar stack (shows up to 4, then a `+N` overflow). */
+    /** Drives the overlapping avatar stack (shows up to 3, then a `+N` overflow). */
     members?: WorkspaceCardMember[];
-    /** ISO timestamp — renders "Updated {relative} ago" when present. */
+    /**
+     * The member list is not visible to this viewer (e.g. row-level security hides
+     * the members of a public workspace you haven't joined). Renders an em dash in
+     * place of the count and drops the avatar stack, rather than lying with a `0`.
+     */
+    membersHidden?: boolean;
+    /** ISO timestamp — renders a centred "Updated {relative} ago" on the footer
+     *  line at rest, which gives way to the Open button on hover. */
     updatedAt?: string;
-    /** Marks this as the current workspace: a done-badge + disabled footer button. */
+    /** Marks this as the current workspace: a ring on the card, and the footer says
+     *  so in words instead of offering an Open button. */
     active?: boolean;
-    /** Shows a spinner in the footer button while a switch is in flight. */
+    /** Shows a spinner in the Open button while a switch is in flight. */
     busy?: boolean;
     onOpen?: () => void;
     /** Icon in the header tile. Defaults to a lock/folder glyph. */
     icon?: LucideIcon;
+    /** Replaces the whole header icon tile — for a richer, app-supplied glyph. */
+    iconSlot?: ReactNode;
+    /**
+     * Secondary context for the card (the ARBI app puts the owning project here).
+     * Sits top-right and is revealed on hover/focus, so the resting card stays
+     * about the workspace itself.
+     */
+    cornerSlot?: ReactNode;
+    /**
+     * Accent as a theme colour-token key (e.g. `emerald`, or a firm's own brand
+     * token), resolved to `var(--color-<accent>)` at render — same contract as
+     * MetricCard. Tints the icon tile and the Open button, so a firm can accent
+     * the card without its brand classes leaking into the kit. `'default'` (or
+     * omitted) uses the semantic `primary` token.
+     */
+    accent?: string;
     /** Stable id for the card root; the footer button gets `${testId}-open`. */
     testId?: string;
     /** Overrides the footer button's test id when a caller needs a specific one. */
@@ -544,16 +571,23 @@ interface WorkspaceCardProps {
     className?: string;
 }
 /**
- * The one true workspace card. A themeable, source-agnostic tile — icon,
- * Active/Encrypted badge, title + uppercase matter eyebrow, a two-line
- * description, a doc/member stat row, an overlapping member avatar stack, an
- * "Updated … ago" line and a full-width Open / Current-workspace footer button.
+ * The one true workspace card. A themeable, source-agnostic tile, in three bands:
+ *
+ *  1. header  — icon + workspace name; secondary context (`cornerSlot`) hides
+ *               top-right until hover, keeping the resting card about the workspace.
+ *  2. body    — two-line description, then one stat line: doc/chat/member counts
+ *               on the left, the member avatar stack right-justified on the same row.
+ *  3. footer  — one centred line with the full width to itself: "Updated … ago"
+ *               at rest, swapping to the Open button on hover. The current
+ *               workspace says so in words there instead.
+ *
+ * State is said once, in words. There is deliberately no status badge.
  *
  * Styled with the kit's SEMANTIC tokens only (foreground, muted-foreground,
  * primary, card, border, accent), so every firm gets it in its own colours
  * without any firm-branded classes leaking in.
  */
-declare function WorkspaceCard({ name, matterRef, description, docCount, memberCount, members, updatedAt, active, busy, onOpen, icon: Icon, testId, buttonTestId, className, }: WorkspaceCardProps): react.JSX.Element;
+declare function WorkspaceCard({ name, matterRef, description, docCount, chatCount, memberCount, members, membersHidden, updatedAt, active, busy, onOpen, icon: Icon, iconSlot, cornerSlot, accent, testId, buttonTestId, className, }: WorkspaceCardProps): react.JSX.Element;
 
 interface StatItem {
     value: string;

package/dist/index.d.ts

@@ -520,23 +520,50 @@ interface WorkspaceCardMember {
 }
 interface WorkspaceCardProps {
     name: string;
-    /** Uppercase eyebrow above the description, e.g. the matter/project name. */
+    /** Uppercase eyebrow under the name, e.g. the matter reference. Omit to let
+     *  the name and description carry the card on their own. */
     matterRef?: string;
     description?: string;
     docCount: number;
+    /** Conversation count, shown as a third stat. Omit to hide the stat entirely. */
+    chatCount?: number;
     /** Defaults to `members.length` when omitted. */
     memberCount?: number;
-    /** Drives the overlapping avatar stack (shows up to 4, then a `+N` overflow). */
+    /** Drives the overlapping avatar stack (shows up to 3, then a `+N` overflow). */
     members?: WorkspaceCardMember[];
-    /** ISO timestamp — renders "Updated {relative} ago" when present. */
+    /**
+     * The member list is not visible to this viewer (e.g. row-level security hides
+     * the members of a public workspace you haven't joined). Renders an em dash in
+     * place of the count and drops the avatar stack, rather than lying with a `0`.
+     */
+    membersHidden?: boolean;
+    /** ISO timestamp — renders a centred "Updated {relative} ago" on the footer
+     *  line at rest, which gives way to the Open button on hover. */
     updatedAt?: string;
-    /** Marks this as the current workspace: a done-badge + disabled footer button. */
+    /** Marks this as the current workspace: a ring on the card, and the footer says
+     *  so in words instead of offering an Open button. */
     active?: boolean;
-    /** Shows a spinner in the footer button while a switch is in flight. */
+    /** Shows a spinner in the Open button while a switch is in flight. */
     busy?: boolean;
     onOpen?: () => void;
     /** Icon in the header tile. Defaults to a lock/folder glyph. */
     icon?: LucideIcon;
+    /** Replaces the whole header icon tile — for a richer, app-supplied glyph. */
+    iconSlot?: ReactNode;
+    /**
+     * Secondary context for the card (the ARBI app puts the owning project here).
+     * Sits top-right and is revealed on hover/focus, so the resting card stays
+     * about the workspace itself.
+     */
+    cornerSlot?: ReactNode;
+    /**
+     * Accent as a theme colour-token key (e.g. `emerald`, or a firm's own brand
+     * token), resolved to `var(--color-<accent>)` at render — same contract as
+     * MetricCard. Tints the icon tile and the Open button, so a firm can accent
+     * the card without its brand classes leaking into the kit. `'default'` (or
+     * omitted) uses the semantic `primary` token.
+     */
+    accent?: string;
     /** Stable id for the card root; the footer button gets `${testId}-open`. */
     testId?: string;
     /** Overrides the footer button's test id when a caller needs a specific one. */
@@ -544,16 +571,23 @@ interface WorkspaceCardProps {
     className?: string;
 }
 /**
- * The one true workspace card. A themeable, source-agnostic tile — icon,
- * Active/Encrypted badge, title + uppercase matter eyebrow, a two-line
- * description, a doc/member stat row, an overlapping member avatar stack, an
- * "Updated … ago" line and a full-width Open / Current-workspace footer button.
+ * The one true workspace card. A themeable, source-agnostic tile, in three bands:
+ *
+ *  1. header  — icon + workspace name; secondary context (`cornerSlot`) hides
+ *               top-right until hover, keeping the resting card about the workspace.
+ *  2. body    — two-line description, then one stat line: doc/chat/member counts
+ *               on the left, the member avatar stack right-justified on the same row.
+ *  3. footer  — one centred line with the full width to itself: "Updated … ago"
+ *               at rest, swapping to the Open button on hover. The current
+ *               workspace says so in words there instead.
+ *
+ * State is said once, in words. There is deliberately no status badge.
  *
  * Styled with the kit's SEMANTIC tokens only (foreground, muted-foreground,
  * primary, card, border, accent), so every firm gets it in its own colours
  * without any firm-branded classes leaking in.
  */
-declare function WorkspaceCard({ name, matterRef, description, docCount, memberCount, members, updatedAt, active, busy, onOpen, icon: Icon, testId, buttonTestId, className, }: WorkspaceCardProps): react.JSX.Element;
+declare function WorkspaceCard({ name, matterRef, description, docCount, chatCount, memberCount, members, membersHidden, updatedAt, active, busy, onOpen, icon: Icon, iconSlot, cornerSlot, accent, testId, buttonTestId, className, }: WorkspaceCardProps): react.JSX.Element;
 
 interface StatItem {
     value: string;

package/dist/index.js

@@ -1,13 +1,13 @@
 import { 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, RichTextBlock, Callout, BlockImage, AvatarBlock, Navbar, Footer, ListBlock, isAssetRef, asAssetRef } from './chunk-L6GG4KN2.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, VideoEmbed, applyFontVars, applyStoredTheme, applyThemeVars, asAssetRef, assetRefId, clearFontVars, clearThemeVars, createThemeStore, daysUntil, fmtDate, fmtDateTime, fontPackages, fromNow, gbp, getFontPairing, hrs, initials, isAssetRef, matchFontPairing, pct, tid, toEmbedUrl, toHslTriplet, useAssetRenderer, useAssetResolverActive } from './chunk-L6GG4KN2.js';
 import { createContext, useState, useCallback, useMemo, useContext, useRef, useEffect } from 'react';
-import { useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Input, Card, CardHeader, Badge, CardTitle, CardDescription, CardContent, Avatar, AvatarImage, AvatarFallback, CardFooter, Button, TooltipProvider, NotificationBell, UserMenu, useThumbnails, Switch, useConfigs, useAgents, Checkbox, Tabs, TabsList, TabsTrigger, TabsContent, Separator, ArbiWebSocketProvider, useDocuments, ImageCropModal, DEFAULT_ASPECT_OPTIONS, useConversations } from '@arbidocs/react';
+import { useArbi, ArbiProvider, useAiTask, useWorkspaceDocs as useWorkspaceDocs$1, useSemanticSearch as useSemanticSearch$1, cn, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Input, Card, CardHeader, CardTitle, CardDescription, CardContent, Avatar, AvatarImage, AvatarFallback, CardFooter, Button, 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';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AgGridReact } from 'ag-grid-react';
 import { themeQuartz, AllCommunityModule } from 'ag-grid-community';
-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, Loader2, UploadCloud, Search, ArrowUpRight, ArrowDownRight, FolderLock, CheckCircle2, ArrowLeftRight, X, Menu, ArrowLeft, Palette, RotateCcw, ChevronUp, ChevronDown, BrainCircuit, Bot, LayoutGrid, FileJson, Download, Crop, ImagePlus, Upload, Link2, Check, MessagesSquare } 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, Loader2, UploadCloud, Search, ArrowUpRight, ArrowDownRight, FolderLock, MessagesSquare, CheckCircle2, ArrowLeftRight, X, Menu, ArrowLeft, Palette, RotateCcw, ChevronUp, ChevronDown, BrainCircuit, Bot, LayoutGrid, FileJson, Download, Crop, ImagePlus, Upload, Link2, Check } from 'lucide-react';
 import { useLocation, Link, useParams, NavLink } from 'react-router-dom';
 import { Puck, Render } from '@measured/puck';
 import { create } from 'zustand';
@@ -1057,82 +1057,152 @@ function MetricCard({
     ] })
   ] });
 }
-var MAX_AVATARS = 4;
+var MAX_AVATARS = 3;
+var ON_HOVER = "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100";
 function WorkspaceCard({
   name,
   matterRef,
   description,
   docCount,
+  chatCount,
   memberCount,
   members = [],
+  membersHidden = false,
   updatedAt,
   active = false,
   busy = false,
   onOpen,
   icon: Icon = FolderLock,
+  iconSlot,
+  cornerSlot,
+  accent = "default",
   testId,
   buttonTestId,
   className
 }) {
   const totalMembers = memberCount ?? members.length;
-  const shownMembers = members.slice(0, MAX_AVATARS);
+  const shownMembers = membersHidden ? [] : members.slice(0, MAX_AVATARS);
   const extraMembers = totalMembers - shownMembers.length;
   const btnTestId = buttonTestId ?? (testId ? `${testId}-open` : void 0);
+  const hue = accent && accent !== "default" ? `var(--color-${accent})` : null;
+  const tileStyle = hue ? { backgroundColor: `color-mix(in oklab, ${hue} 14%, transparent)`, color: hue } : void 0;
+  const buttonStyle = hue ? { backgroundColor: hue, color: "var(--color-primary-foreground)" } : void 0;
   return /* @__PURE__ */ jsxs(
     Card,
     {
       variant: "outline",
-      className: cn("card-hover flex flex-col p-5", className),
+      className: cn(
+        "card-hover group flex flex-col gap-3 p-4",
+        // The current workspace is marked by a ring, not a badge — the footer
+        // already says "Current workspace" in words.
+        active && "ring-1 ring-primary",
+        className
+      ),
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxs(CardHeader, { className: "p-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Icon, { className: "size-5" }) }),
-            active ? /* @__PURE__ */ jsxs(Badge, { children: [
-              /* @__PURE__ */ jsx(CheckCircle2, { className: "mr-1 size-3" }),
-              " Active"
-            ] }) : /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: "Encrypted" })
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start gap-3 p-0", children: [
+          iconSlot ?? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary",
+              style: tileStyle,
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(
+              CardTitle,
+              {
+                className: "line-clamp-2 text-base leading-tight",
+                "data-testid": testId && `${testId}-title`,
+                children: name
+              }
+            ),
+            matterRef && /* @__PURE__ */ jsx(CardDescription, { className: "mt-0.5 truncate text-xs font-medium uppercase tracking-wide text-muted-foreground", children: matterRef })
           ] }),
-          /* @__PURE__ */ jsx(CardTitle, { className: "mt-3 text-base", children: name }),
-          matterRef && /* @__PURE__ */ jsx(CardDescription, { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: matterRef })
+          cornerSlot && /* @__PURE__ */ jsx("div", { className: cn("shrink-0", ON_HOVER), children: cornerSlot })
         ] }),
-        /* @__PURE__ */ jsxs(CardContent, { className: "mt-3 flex-1 space-y-4 p-0", children: [
+        /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-1 flex-col gap-2 p-0", children: [
           description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: description }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
-            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-foreground", children: [
-              /* @__PURE__ */ jsx(FileText, { className: "size-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: docCount.toLocaleString() }),
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "docs" })
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3 text-sm", children: [
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Documents", children: [
+              /* @__PURE__ */ jsx(FileText, { className: "size-3.5 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: docCount.toLocaleString() })
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-foreground", children: [
-              /* @__PURE__ */ jsx(Users, { className: "size-4 text-muted-foreground" }),
-              /* @__PURE__ */ jsx("span", { className: "font-medium", children: totalMembers }),
-              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "members" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex -space-x-2", children: [
-              shownMembers.map((m, i) => /* @__PURE__ */ jsxs(Avatar, { className: "size-7 border-2 border-card", title: m.name, children: [
+            chatCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Chats", children: [
+              /* @__PURE__ */ jsx(MessagesSquare, { className: "size-3.5 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: chatCount.toLocaleString() })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Members", children: [
+              /* @__PURE__ */ jsx(Users, { className: "size-3.5 text-muted-foreground" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "font-medium tabular-nums",
+                  "data-testid": testId && `${testId}-member-count`,
+                  children: membersHidden ? "\u2014" : totalMembers
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex shrink-0 -space-x-2", children: [
+              shownMembers.map((m, i) => /* @__PURE__ */ jsxs(Avatar, { className: "size-6 border-2 border-card", title: m.name, children: [
                 m.picture && /* @__PURE__ */ jsx(AvatarImage, { src: m.picture, alt: m.name }),
-                /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-foreground text-[10px] font-medium text-background", children: initials(m.name || "?") })
+                /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-foreground text-[9px] font-medium text-background", children: initials(m.name || "?") })
               ] }, i)),
-              extraMembers > 0 && /* @__PURE__ */ jsx(Avatar, { className: "size-7 border-2 border-card", children: /* @__PURE__ */ jsxs(AvatarFallback, { className: "bg-accent text-[10px] font-medium text-muted-foreground", children: [
+              !membersHidden && extraMembers > 0 && /* @__PURE__ */ jsx(Avatar, { className: "size-6 border-2 border-card", children: /* @__PURE__ */ jsxs(AvatarFallback, { className: "bg-accent text-[9px] font-medium text-muted-foreground", children: [
                 "+",
                 extraMembers
               ] }) })
-            ] }),
-            updatedAt && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", title: fmtDate(updatedAt), children: [
-              "Updated ",
-              fromNow(updatedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(CardFooter, { className: "mt-4 p-0", children: active ? /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "w-full", disabled: true, "data-testid": btnTestId, children: [
-          /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4" }),
-          " Current workspace"
-        ] }) : /* @__PURE__ */ jsxs(Button, { className: "w-full", onClick: onOpen, disabled: busy, "data-testid": btnTestId, children: [
-          busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-4" }),
-          "Open"
+        /* @__PURE__ */ jsx(CardFooter, { className: "grid min-h-8 place-items-center p-0", children: active ? (
+          // Reads as a statement, not a call to action — but stays clickable, so
+          // re-entering the workspace you're already in still works.
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "col-start-1 row-start-1 h-8 whitespace-nowrap px-2 text-xs font-medium text-primary hover:bg-primary/10",
+              onClick: onOpen,
+              "data-testid": btnTestId,
+              children: [
+                /* @__PURE__ */ jsx(CheckCircle2, { className: "size-3.5" }),
+                " Current workspace"
+              ]
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          updatedAt && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "col-start-1 row-start-1 whitespace-nowrap text-xs text-muted-foreground",
+                "transition-opacity group-hover:opacity-0 group-focus-within:opacity-0"
+              ),
+              title: fmtDate(updatedAt),
+              children: [
+                "Updated ",
+                fromNow(updatedAt)
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: cn("col-start-1 row-start-1 whitespace-nowrap", ON_HOVER),
+              style: buttonStyle,
+              onClick: onOpen,
+              disabled: busy,
+              "data-testid": btnTestId,
+              children: [
+                busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-3.5" }),
+                "Open"
+              ]
+            }
+          )
         ] }) })
       ]
     }