@ai-matrx/associations 0.13.13 → 0.13.15

package/dist/react/index.js

@@ -2551,12 +2551,6 @@ function ExternalLinkIcon(props) {
 function ChevronDownIcon(props) {
   return /* @__PURE__ */ jsx4("svg", { ...base(props), children: /* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" }) });
 }
-function ChevronsUpDownIcon(props) {
-  return /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
-    /* @__PURE__ */ jsx4("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ jsx4("path", { d: "m7 9 5-5 5 5" })
-  ] });
-}
 function CornerDownRightIcon(props) {
   return /* @__PURE__ */ jsxs2("svg", { ...base(props), children: [
     /* @__PURE__ */ jsx4("polyline", { points: "15 10 20 15 15 20" }),
@@ -3784,6 +3778,7 @@ function AttachedItemsBody({
 // src/react/components/AssociationCard.tsx
 import { useState as useState10 } from "react";
 import { cn as cn7 } from "@ai-matrx/design-system";
+import { TapTargetButton } from "@ai-matrx/design-system/tap-target";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function AssociationCard({
   token,
@@ -3819,12 +3814,14 @@ function AssociationCard({
   const filing = container.direction === "outgoing";
   const canAttach = info.canListCandidates && (!filing || isAssociationTargetType(token));
   const canDrillIn = count > 0;
+  const countWord = filing ? "filed under" : "attached";
   return /* @__PURE__ */ jsxs9(Fragment3, { children: [
     /* @__PURE__ */ jsxs9(
       "div",
       {
+        "data-association-card": token,
         className: cn7(
-          "group relative flex items-center gap-3 overflow-hidden rounded-xl border border-border bg-card transition-all hover:border-primary/30 hover:bg-accent/40",
+          "flex min-h-8 items-center gap-x-1.5 rounded-md border border-border bg-card px-2.5 py-1 lg:pointer-fine:[--matrx-tap-target-size:1.75rem]",
           className
         ),
         children: [
@@ -3835,31 +3832,26 @@ function AssociationCard({
               disabled: !canDrillIn,
               onClick: () => setListOpen(true),
               title: canDrillIn ? `View the ${info.labelPlural.toLowerCase()} attached to ${container.label ?? "this"}` : void 0,
+              "aria-label": loading ? info.labelPlural : `${info.labelPlural}: ${count} ${countWord}`,
               className: cn7(
-                "flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-left",
-                canDrillIn ? "cursor-pointer" : "cursor-default"
+                "flex min-h-8 min-w-0 flex-1 items-center gap-x-1.5 text-left",
+                canDrillIn ? "cursor-pointer hover:text-foreground" : "cursor-default"
               ),
               children: [
-                /* @__PURE__ */ jsx11("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx11(Icon, { className: "h-4 w-4" }) }),
-                /* @__PURE__ */ jsxs9("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsx11("span", { className: "block truncate text-sm font-medium text-foreground", children: info.labelPlural }),
-                  /* @__PURE__ */ jsx11("span", { className: "block text-xs text-muted-foreground tabular-nums", children: loading ? /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx11(SpinnerIcon, { className: "h-3 w-3 animate-spin" }),
-                    "Loading\u2026"
-                  ] }) : `${count} ${container.direction === "outgoing" ? "filed under" : "attached"}` })
-                ] })
+                /* @__PURE__ */ jsx11(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx11("span", { className: "min-w-0 truncate text-xs font-semibold uppercase tracking-wider text-foreground", children: info.labelPlural }),
+                loading ? /* @__PURE__ */ jsx11(SpinnerIcon, { className: "h-3 w-3 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsx11("span", { className: "text-xs tabular-nums text-muted-foreground", children: count })
               ]
             }
           ),
           canAttach && /* @__PURE__ */ jsx11(
-            "button",
+            TapTargetButton,
             {
-              type: "button",
+              ariaLabel: `Attach ${info.labelPlural.toLowerCase()}`,
+              tooltip: false,
               onClick: () => setOpen(true),
-              "aria-label": `Attach ${info.labelPlural.toLowerCase()}`,
-              title: `Attach ${info.labelPlural.toLowerCase()}`,
-              className: "mr-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:border-primary/60 hover:text-foreground lg:mr-3 lg:h-7 lg:w-7",
-              children: /* @__PURE__ */ jsx11(PlusIcon, { className: "h-4 w-4" })
+              className: "ml-auto shrink-0",
+              icon: /* @__PURE__ */ jsx11(PlusIcon, { className: "h-4 w-4" })
             }
           )
         ]
@@ -3953,6 +3945,8 @@ function getContentRoleMeta(role) {
 
 // src/react/components/AssociationCardGrid.tsx
 import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var GROUP_LABEL = "mb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground";
+var TILE_ROW = "flex flex-wrap gap-2 [&>*]:min-w-[16rem] [&>*]:flex-1";
 function AssociationCardGrid({
   tokens,
   excludeTokens,
@@ -3978,20 +3972,20 @@ function AssociationCardGrid({
     const role = store.registry.getEntityInfo(token).contentRole;
     return !role || !roleIds.has(role);
   }) : [];
-  return /* @__PURE__ */ jsxs10("div", { className: cn8("@container space-y-5", className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn8("@container space-y-3", className), children: [
     CONTENT_ROLES.map((role) => {
       const inRole = list.filter(
         (token) => store.registry.getEntityInfo(token).contentRole === role.id
       );
       if (inRole.length === 0) return null;
       return /* @__PURE__ */ jsxs10("section", { children: [
-        /* @__PURE__ */ jsx12("h3", { className: "mb-2 text-sm font-semibold text-foreground", children: role.title }),
-        /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-2 [&>*]:min-w-[16rem] [&>*]:flex-1", children: inRole.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
+        /* @__PURE__ */ jsx12("h3", { className: GROUP_LABEL, children: role.title }),
+        /* @__PURE__ */ jsx12("div", { className: TILE_ROW, children: inRole.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
       ] }, role.id);
     }),
     roleless.length > 0 && /* @__PURE__ */ jsxs10("section", { children: [
-      /* @__PURE__ */ jsx12("h3", { className: "mb-2 text-sm font-semibold text-foreground", children: "Filed under" }),
-      /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-2 [&>*]:min-w-[16rem] [&>*]:flex-1", children: roleless.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
+      /* @__PURE__ */ jsx12("h3", { className: GROUP_LABEL, children: "Filed under" }),
+      /* @__PURE__ */ jsx12("div", { className: TILE_ROW, children: roleless.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
     ] })
   ] });
 }
@@ -5383,7 +5377,8 @@ import {
   SelectContent as SelectContent2,
   SelectItem as SelectItem2,
   SelectTrigger as SelectTrigger2,
-  SelectValue as SelectValue2
+  SelectValue as SelectValue2,
+  SelectChevron
 } from "@ai-matrx/design-system";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 var ROOT_PARENT2 = "__root__";
@@ -5541,7 +5536,7 @@ function CategoryTagPicker({
           children: [
             /* @__PURE__ */ jsx18(Icon, { className: "h-3.5 w-3.5" }),
             selected.length === 0 ? addLabel : "Edit",
-            /* @__PURE__ */ jsx18(ChevronsUpDownIcon, { className: "h-3 w-3 opacity-50" })
+            /* @__PURE__ */ jsx18(SelectChevron, { size: "sm" })
           ]
         }
       ) }),