@arbidocs/blocks 0.3.128 → 0.3.129

package/dist/index.d.cts

@@ -537,19 +537,19 @@ interface WorkspaceCardProps {
      * 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. */
+    /** ISO timestamp — renders "Updated {relative} ago" at the footer's right edge. */
     updatedAt?: string;
-    /** Marks this as the current workspace: a ring on the card, and the footer says
-     *  so in words instead of offering an Open button. */
+    /** Marks this as the current workspace: an accented card surface and a footer label. */
     active?: boolean;
-    /** Shows a spinner in the Open button while a switch is in flight. */
+    /** Shows a spinner in the Open affordance 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;
+    /** Canonical workspace entity pill shown at the top of the description tooltip. */
+    tooltipEntitySlot?: 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
@@ -559,14 +559,14 @@ interface WorkspaceCardProps {
     /**
      * 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
+     * MetricCard. Tints the icon tile and the Open affordance, 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`. */
+    /** Stable id for the card root; the footer action gets `${testId}-open`. */
     testId?: string;
-    /** Overrides the footer button's test id when a caller needs a specific one. */
+    /** Overrides the footer action's test id when a caller needs a specific one. */
     buttonTestId?: string;
     className?: string;
 }
@@ -575,11 +575,10 @@ interface WorkspaceCardProps {
  *
  *  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.
+ *  2. body    — an expanded description area with the centred Open/current
+ *               affordance layered over it only on hover or keyboard focus.
+ *  3. footer  — doc/chat counts stay left and membership stays right, followed
+ *               by a final left-aligned update timestamp.
  *
  * State is said once, in words. There is deliberately no status badge.
  *
@@ -587,7 +586,7 @@ interface WorkspaceCardProps {
  * 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, chatCount, memberCount, members, membersHidden, updatedAt, active, busy, onOpen, icon: Icon, iconSlot, cornerSlot, accent, 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, tooltipEntitySlot, cornerSlot, accent, testId, buttonTestId, className, }: WorkspaceCardProps): react.JSX.Element;
 
 interface StatItem {
     value: string;

package/dist/index.d.ts

@@ -537,19 +537,19 @@ interface WorkspaceCardProps {
      * 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. */
+    /** ISO timestamp — renders "Updated {relative} ago" at the footer's right edge. */
     updatedAt?: string;
-    /** Marks this as the current workspace: a ring on the card, and the footer says
-     *  so in words instead of offering an Open button. */
+    /** Marks this as the current workspace: an accented card surface and a footer label. */
     active?: boolean;
-    /** Shows a spinner in the Open button while a switch is in flight. */
+    /** Shows a spinner in the Open affordance 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;
+    /** Canonical workspace entity pill shown at the top of the description tooltip. */
+    tooltipEntitySlot?: 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
@@ -559,14 +559,14 @@ interface WorkspaceCardProps {
     /**
      * 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
+     * MetricCard. Tints the icon tile and the Open affordance, 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`. */
+    /** Stable id for the card root; the footer action gets `${testId}-open`. */
     testId?: string;
-    /** Overrides the footer button's test id when a caller needs a specific one. */
+    /** Overrides the footer action's test id when a caller needs a specific one. */
     buttonTestId?: string;
     className?: string;
 }
@@ -575,11 +575,10 @@ interface WorkspaceCardProps {
  *
  *  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.
+ *  2. body    — an expanded description area with the centred Open/current
+ *               affordance layered over it only on hover or keyboard focus.
+ *  3. footer  — doc/chat counts stay left and membership stays right, followed
+ *               by a final left-aligned update timestamp.
  *
  * State is said once, in words. There is deliberately no status badge.
  *
@@ -587,7 +586,7 @@ interface WorkspaceCardProps {
  * 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, chatCount, memberCount, members, membersHidden, updatedAt, active, busy, onOpen, icon: Icon, iconSlot, cornerSlot, accent, 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, tooltipEntitySlot, 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, 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';
+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, Tooltip, TooltipTrigger, TooltipContent, CardFooter, Avatar, AvatarImage, AvatarFallback, TooltipProvider, Button, 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, MessagesSquare, CheckCircle2, ArrowLeftRight, X, Menu, ArrowLeft, Palette, RotateCcw, ChevronUp, ChevronDown, 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, Loader2, UploadCloud, Search, ArrowUpRight, ArrowDownRight, FolderLock, CheckCircle2, ArrowLeftRight, MessagesSquare, 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';
@@ -1058,7 +1058,7 @@ function MetricCard({
   ] });
 }
 var MAX_AVATARS = 3;
-var ON_HOVER = "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100";
+var ON_HOVER = "opacity-0 transition-opacity group-hover/workspace-card:opacity-100 group-focus-within/workspace-card:opacity-100";
 function WorkspaceCard({
   name,
   matterRef,
@@ -1074,6 +1074,7 @@ function WorkspaceCard({
   onOpen,
   icon: Icon = FolderLock,
   iconSlot,
+  tooltipEntitySlot,
   cornerSlot,
   accent = "default",
   testId,
@@ -1083,24 +1084,39 @@ function WorkspaceCard({
   const totalMembers = memberCount ?? members.length;
   const shownMembers = membersHidden ? [] : members.slice(0, MAX_AVATARS);
   const extraMembers = totalMembers - shownMembers.length;
-  const btnTestId = buttonTestId ?? (testId ? `${testId}-open` : void 0);
+  const actionTestId = buttonTestId ?? (testId ? `${testId}-open` : void 0);
+  const canOpen = Boolean(onOpen) && !busy;
   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;
+  const openStyle = hue ? { backgroundColor: hue, color: "var(--color-background)" } : void 0;
+  const handleKeyDown = (event) => {
+    if (!canOpen || event.target !== event.currentTarget) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onOpen?.();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      variant: "outline",
+      variant: "flat",
       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",
+        "card-hover group/workspace-card relative flex h-48 w-full flex-col gap-3 overflow-hidden rounded-xl bg-card p-4 shadow-sm",
+        canOpen && "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+        active && "bg-primary/10 shadow-md",
         className
       ),
       "data-testid": testId,
+      "data-active": active || void 0,
+      role: canOpen ? "button" : void 0,
+      tabIndex: canOpen ? 0 : void 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-label": canOpen ? `Open workspace ${name}` : void 0,
+      "aria-busy": busy || void 0,
+      onClick: canOpen ? onOpen : void 0,
+      onKeyDown: handleKeyDown,
       children: [
-        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-start gap-3 p-0", children: [
+        /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-row items-center gap-3 space-y-0 p-0", children: [
           iconSlot ?? /* @__PURE__ */ jsx(
             "div",
             {
@@ -1113,7 +1129,7 @@ function WorkspaceCard({
             /* @__PURE__ */ jsx(
               CardTitle,
               {
-                className: "line-clamp-2 text-base leading-tight",
+                className: "line-clamp-2 text-base font-bold leading-tight",
                 "data-testid": testId && `${testId}-title`,
                 children: name
               }
@@ -1122,88 +1138,98 @@ function WorkspaceCard({
           ] }),
           cornerSlot && /* @__PURE__ */ jsx("div", { className: cn("shrink-0", ON_HOVER), children: cornerSlot })
         ] }),
-        /* @__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-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() })
-            ] }),
-            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(
+        /* @__PURE__ */ jsxs(CardContent, { className: "relative flex min-h-0 flex-1 flex-col p-0", children: [
+          description && /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground transition-opacity group-hover/workspace-card:opacity-0 group-focus-within/workspace-card:opacity-0", children: description }) }),
+            /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "max-w-sm p-0", children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-md", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center bg-muted/70 px-3 py-2.5", children: tooltipEntitySlot ?? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: name }) }),
+              /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-sm leading-relaxed text-foreground/90", children: description })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none absolute inset-0 z-10 inline-flex items-center justify-center whitespace-nowrap",
+                !busy && "opacity-0 transition-opacity group-hover/workspace-card:opacity-100 group-focus-within/workspace-card:opacity-100"
+              ),
+              "data-testid": actionTestId,
+              children: /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: "font-medium tabular-nums",
-                  "data-testid": testId && `${testId}-member-count`,
-                  children: membersHidden ? "\u2014" : totalMembers
+                  className: cn(
+                    "inline-flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-base font-semibold shadow-md",
+                    active ? "bg-muted-foreground text-background" : "bg-primary text-primary-foreground"
+                  ),
+                  style: active ? void 0 : openStyle,
+                  children: active ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4" }),
+                    " Current workspace"
+                  ] }) : busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+                    " Opening"
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ArrowLeftRight, { className: "size-4" }),
+                    " Open"
+                  ] })
                 }
               )
-            ] }),
-            /* @__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-[9px] font-medium text-background", children: initials(m.name || "?") })
-              ] }, i)),
-              !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
-              ] }) })
-            ] })
-          ] })
-        ] }),
-        /* @__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: [
+        ] }),
+        /* @__PURE__ */ jsxs(CardFooter, { className: "mt-auto flex w-full min-w-0 flex-col items-stretch gap-3 overflow-hidden p-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-x-3 text-sm", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", 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() })
+              ] }),
+              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",
+                "data-testid": testId && `${testId}-member-avatars`,
+                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-[9px] font-medium text-background", children: initials(m.name || "?") })
+                  ] }, i)),
+                  !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: 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"
-              ),
+              className: "min-w-0 max-w-full self-start truncate text-left text-xs text-muted-foreground",
               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"
-              ]
-            }
           )
-        ] }) })
+        ] })
       ]
     }
   );