@arbidocs/blocks 0.3.161 → 0.3.162

package/dist/index.cjs

@@ -1340,21 +1340,26 @@ function IdentityFieldRow({ field, canEdit }) {
             children: charsLeft < 0 ? `${-charsLeft} over` : `${charsLeft} left`
           }
         )
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: react.cn("px-1.5 py-0.5", valueClassName), "data-testid": testId, children: value || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: placeholder }) }),
-        canEdit && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsxs("span", { className: "identity-field flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: react.cn("px-1.5 py-0.5", valueClassName), "data-testid": testId, children: value || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "italic text-muted-foreground", children: placeholder }) }),
+          canEdit && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "size-3.5" })
+            }
+          )
+        ] })
+      ),
       trailing ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm font-semibold text-foreground", children: title }),
-                count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count }),
-                onOpen && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count })
               ]
             }
           ),
-          actionLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
+          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action }) : actionLabel ? /* @__PURE__ */ jsxRuntime.jsxs(
             react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ActionIcon, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-5" }) }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ActionIcon, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "size-5" }) }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: emptyActionLabel ?? actionLabel }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: emptyText })
               ]
@@ -1550,11 +1559,13 @@ function RecentActivityCard({
             {
               className: react.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__ */ jsxRuntime.jsxs(
@@ -1749,29 +1760,48 @@ function SectionStrip({
               children: [
                 Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap text-sm font-semibold text-foreground", children: title }),
-                count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count }),
-                onOpen && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: count })
               ]
             }
           ),
-          actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
-            react.Button,
+          actions.map(
+            (action) => action.node ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action.node }, action.label) : /* @__PURE__ */ jsxRuntime.jsxs(
+              react.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__ */ jsxRuntime.jsx(action.icon, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(action.icon, { className: "size-3.5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only @md:not-sr-only @md:ml-1.5", children: action.label })
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(empty.icon, { className: "size-5" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-foreground", children: empty.label }),
+                empty.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs leading-relaxed text-muted-foreground", children: empty.description })
               ]
-            },
-            action.label
-          ))
-        ] }),
-        filledGroups.length === 0 ? empty ? /* @__PURE__ */ jsxRuntime.jsxs(
+            }
+          )
+        ) : /* @__PURE__ */ jsxRuntime.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,