@ai-matrx/associations 0.13.12 → 0.13.15

package/dist/react/index.cjs

@@ -2610,12 +2610,6 @@ function ExternalLinkIcon(props) {
 function ChevronDownIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { ...base(props), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" }) });
 }
-function ChevronsUpDownIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...base(props), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m7 9 5-5 5 5" })
-  ] });
-}
 function CornerDownRightIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { ...base(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "15 10 20 15 15 20" }),
@@ -3843,6 +3837,7 @@ function AttachedItemsBody({
 // src/react/components/AssociationCard.tsx
 var import_react16 = require("react");
 var import_design_system7 = require("@ai-matrx/design-system");
+var import_tap_target = require("@ai-matrx/design-system/tap-target");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function AssociationCard({
   token,
@@ -3878,12 +3873,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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
+        "data-association-card": token,
         className: (0, import_design_system7.cn)(
-          "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: [
@@ -3894,31 +3891,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: (0, import_design_system7.cn)(
-                "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__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "h-4 w-4" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "block truncate text-sm font-medium text-foreground", children: info.labelPlural }),
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "block text-xs text-muted-foreground tabular-nums", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }),
-                    "Loading\u2026"
-                  ] }) : `${count} ${container.direction === "outgoing" ? "filed under" : "attached"}` })
-                ] })
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "min-w-0 truncate text-xs font-semibold uppercase tracking-wider text-foreground", children: info.labelPlural }),
+                loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-xs tabular-nums text-muted-foreground", children: count })
               ]
             }
           ),
           canAttach && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "button",
+            import_tap_target.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__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { className: "h-4 w-4" })
+              className: "ml-auto shrink-0",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { className: "h-4 w-4" })
             }
           )
         ]
@@ -4012,6 +4004,8 @@ function getContentRoleMeta(role) {
 
 // src/react/components/AssociationCardGrid.tsx
 var import_jsx_runtime12 = require("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,
@@ -4037,20 +4031,20 @@ function AssociationCardGrid({
     const role = store.registry.getEntityInfo(token).contentRole;
     return !role || !roleIds.has(role);
   }) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_design_system8.cn)("@container space-y-5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_design_system8.cn)("@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__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "mb-2 text-sm font-semibold text-foreground", children: role.title }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap gap-2 [&>*]:min-w-[16rem] [&>*]:flex-1", children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: GROUP_LABEL, children: role.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: TILE_ROW, children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
       ] }, role.id);
     }),
     roleless.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "mb-2 text-sm font-semibold text-foreground", children: "Filed under" }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap gap-2 [&>*]:min-w-[16rem] [&>*]:flex-1", children: roleless.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: GROUP_LABEL, children: "Filed under" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: TILE_ROW, children: roleless.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
     ] })
   ] });
 }
@@ -5563,7 +5557,7 @@ function CategoryTagPicker({
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { className: "h-3.5 w-3.5" }),
             selected.length === 0 ? addLabel : "Edit",
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChevronsUpDownIcon, { className: "h-3 w-3 opacity-50" })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system13.SelectChevron, { size: "sm" })
           ]
         }
       ) }),