@arbidocs/blocks 0.3.129 → 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/workspace-card:opacity-100 group-focus-within/workspace-card:opacity-100";
 function WorkspaceCard({
   name,
   matterRef,
@@ -1086,6 +1085,10 @@ function WorkspaceCard({
   const extraMembers = totalMembers - shownMembers.length;
   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 openStyle = hue ? { backgroundColor: hue, color: "var(--color-background)" } : void 0;
@@ -1096,12 +1099,20 @@ function WorkspaceCard({
       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: "flat",
       className: react.cn(
-        "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",
+        "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
@@ -1115,6 +1126,12 @@ function WorkspaceCard({
       "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-center gap-3 space-y-0 p-0", children: [
           iconSlot ?? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1136,11 +1153,29 @@ function WorkspaceCard({
             ),
             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: "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: "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__ */ 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 })
@@ -1150,8 +1185,8 @@ function WorkspaceCard({
             "span",
             {
               className: react.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"
+                "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(