@arbidocs/blocks 0.3.128 → 0.3.130

package/dist/index.cjs

@@ -1058,7 +1058,6 @@ function MetricCard({
   ] });
 }
 var MAX_AVATARS = 3;
-var ON_HOVER = "opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100";
 function WorkspaceCard({
   name,
   matterRef,
@@ -1074,6 +1073,7 @@ function WorkspaceCard({
   onOpen,
   icon: Icon = lucideReact.FolderLock,
   iconSlot,
+  tooltipEntitySlot,
   cornerSlot,
   accent = "default",
   testId,
@@ -1083,24 +1083,57 @@ 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 [isHoverPointerActive, setIsHoverPointerActive] = react$1.useState(false);
+  const [isKeyboardFocused, setIsKeyboardFocused] = react$1.useState(false);
+  const revealInteractiveContent = isHoverPointerActive || isKeyboardFocused;
+  const showOpenAction = busy || revealInteractiveContent;
   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?.();
+    }
+  };
+  const handleFocusCapture = (event) => {
+    setIsKeyboardFocused(event.target instanceof Element && event.target.matches(":focus-visible"));
+  };
+  const handleBlurCapture = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setIsKeyboardFocused(false);
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.Card,
     {
-      variant: "outline",
+      variant: "flat",
       className: react.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 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,
+      onPointerEnter: (event) => {
+        if (event.pointerType !== "touch") setIsHoverPointerActive(true);
+      },
+      onPointerLeave: () => setIsHoverPointerActive(false),
+      onFocusCapture: handleFocusCapture,
+      onBlurCapture: handleBlurCapture,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(react.CardHeader, { className: "flex flex-row items-start gap-3 p-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.CardHeader, { className: "flex flex-row items-center gap-3 space-y-0 p-0", children: [
           iconSlot ?? /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -1113,97 +1146,125 @@ function WorkspaceCard({
             /* @__PURE__ */ jsxRuntime.jsx(
               react.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
               }
             ),
             matterRef && /* @__PURE__ */ jsxRuntime.jsx(react.CardDescription, { className: "mt-0.5 truncate text-xs font-medium uppercase tracking-wide text-muted-foreground", children: matterRef })
           ] }),
-          cornerSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: react.cn("shrink-0", ON_HOVER), children: cornerSlot })
+          cornerSlot && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: react.cn(
+                "shrink-0 opacity-0 transition-opacity",
+                revealInteractiveContent && "opacity-100"
+              ),
+              children: cornerSlot
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.CardContent, { className: "flex flex-1 flex-col gap-2 p-0", children: [
-          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: description }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3 text-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Documents", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-3.5 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: docCount.toLocaleString() })
-            ] }),
-            chatCount !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Chats", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessagesSquare, { className: "size-3.5 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: chatCount.toLocaleString() })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Members", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-3.5 text-muted-foreground" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(react.CardContent, { className: "relative flex min-h-0 flex-1 flex-col p-0", children: [
+          description && /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: react.cn(
+                  "line-clamp-2 text-sm text-muted-foreground opacity-100 transition-opacity",
+                  showOpenAction && "opacity-0"
+                ),
+                children: description
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(react.TooltipContent, { side: "top", className: "max-w-sm p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-md", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center bg-muted/70 px-3 py-2.5", children: tooltipEntitySlot ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: name }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 py-3 text-sm leading-relaxed text-foreground/90", children: description })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: react.cn(
+                "pointer-events-none absolute inset-0 z-10 inline-flex items-center justify-center whitespace-nowrap opacity-0 transition-opacity",
+                showOpenAction && "opacity-100"
+              ),
+              "data-testid": actionTestId,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: "font-medium tabular-nums",
-                  "data-testid": testId && `${testId}-member-count`,
-                  children: membersHidden ? "\u2014" : totalMembers
+                  className: react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "size-4" }),
+                    " Current workspace"
+                  ] }) : busy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-4 animate-spin" }),
+                    " Opening"
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftRight, { className: "size-4" }),
+                    " Open"
+                  ] })
                 }
               )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex shrink-0 -space-x-2", children: [
-              shownMembers.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Avatar, { className: "size-6 border-2 border-card", title: m.name, children: [
-                m.picture && /* @__PURE__ */ jsxRuntime.jsx(react.AvatarImage, { src: m.picture, alt: m.name }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.AvatarFallback, { className: "bg-foreground text-[9px] font-medium text-background", children: chunkAHWIZJ4M_cjs.initials(m.name || "?") })
-              ] }, i)),
-              !membersHidden && extraMembers > 0 && /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { className: "size-6 border-2 border-card", children: /* @__PURE__ */ jsxRuntime.jsxs(react.AvatarFallback, { className: "bg-accent text-[9px] font-medium text-muted-foreground", children: [
-                "+",
-                extraMembers
-              ] }) })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.jsxs(
-            react.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__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "size-3.5" }),
-                " Current workspace"
-              ]
             }
           )
-        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.CardFooter, { className: "mt-auto flex w-full min-w-0 flex-col items-stretch gap-3 overflow-hidden p-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-x-3 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Documents", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "size-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: docCount.toLocaleString() })
+              ] }),
+              chatCount !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Chats", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessagesSquare, { className: "size-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium tabular-nums", children: chatCount.toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-foreground", title: "Members", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Users, { className: "size-3.5 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "font-medium tabular-nums",
+                    "data-testid": testId && `${testId}-member-count`,
+                    children: membersHidden ? "\u2014" : totalMembers
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "ml-auto flex shrink-0 -space-x-2",
+                "data-testid": testId && `${testId}-member-avatars`,
+                children: [
+                  shownMembers.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(react.Avatar, { className: "size-6 border-2 border-card", title: m.name, children: [
+                    m.picture && /* @__PURE__ */ jsxRuntime.jsx(react.AvatarImage, { src: m.picture, alt: m.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(react.AvatarFallback, { className: "bg-foreground text-[9px] font-medium text-background", children: chunkAHWIZJ4M_cjs.initials(m.name || "?") })
+                  ] }, i)),
+                  !membersHidden && extraMembers > 0 && /* @__PURE__ */ jsxRuntime.jsx(react.Avatar, { className: "size-6 border-2 border-card", children: /* @__PURE__ */ jsxRuntime.jsxs(react.AvatarFallback, { className: "bg-accent text-[9px] font-medium text-muted-foreground", children: [
+                    "+",
+                    extraMembers
+                  ] }) })
+                ]
+              }
+            )
+          ] }),
           updatedAt && /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: react.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: chunkAHWIZJ4M_cjs.fmtDate(updatedAt),
               children: [
                 "Updated ",
                 chunkAHWIZJ4M_cjs.fromNow(updatedAt)
               ]
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            react.Button,
-            {
-              size: "sm",
-              className: react.cn("col-start-1 row-start-1 whitespace-nowrap", ON_HOVER),
-              style: buttonStyle,
-              onClick: onOpen,
-              disabled: busy,
-              "data-testid": btnTestId,
-              children: [
-                busy ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftRight, { className: "size-3.5" }),
-                "Open"
-              ]
-            }
           )
-        ] }) })
+        ] })
       ]
     }
   );