@ai-matrx/associations 0.13.7 → 0.13.8

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog — @ai-matrx/associations
 
+## 0.13.8
+### (2026-09-27 — the standard section look)
+
+- **`AssociationCardGrid` draws the standard section look**: a heading and its cards — the colored role dot, the tagline under each heading ("Incoming sources of truth (Knowledge In).", "How work is organized."), each card's colored top bar and its tinted icon chip are gone; the icon sits on the neutral muted chip. Rows wrap by the card's own minimum width, so a lone card fills its row instead of sitting at half width. Seen on `/crm/<id>` (page-pass).
+- Proof: `src/react/__tests__/outgoing-links.test.tsx` — "the standard section look".
+
+### Consumer action
+
+None.
+
 ## 0.13.7
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/react/index.cjs

@@ -3394,55 +3394,6 @@ function AttachedItemsBody({
 // src/react/components/AssociationCard.tsx
 var import_react16 = require("react");
 var import_design_system7 = require("@ai-matrx/design-system");
-
-// src/react/contentRoles.ts
-var CONTENT_ROLES = [
-  {
-    id: "utility",
-    title: "Utilities",
-    tagline: "The agents and tools that act on your knowledge.",
-    accentText: "text-violet-600 dark:text-violet-400",
-    accentBg: "bg-violet-500/10",
-    accentBar: "bg-violet-500"
-  },
-  {
-    id: "source",
-    title: "Sources",
-    tagline: "Incoming sources of truth (Knowledge In).",
-    accentText: "text-sky-600 dark:text-sky-400",
-    accentBg: "bg-sky-500/10",
-    accentBar: "bg-sky-500"
-  },
-  {
-    id: "destination",
-    title: "Outputs",
-    tagline: "Knowledge your team produces.",
-    accentText: "text-emerald-600 dark:text-emerald-400",
-    accentBg: "bg-emerald-500/10",
-    accentBar: "bg-emerald-500"
-  },
-  {
-    id: "hybrid",
-    title: "Sources & Outputs",
-    tagline: "Read from and written to.",
-    accentText: "text-teal-600 dark:text-teal-400",
-    accentBg: "bg-teal-500/10",
-    accentBar: "bg-gradient-to-r from-sky-500 to-emerald-500"
-  },
-  {
-    id: "container",
-    title: "Workspaces",
-    tagline: "How work is organized.",
-    accentText: "text-amber-600 dark:text-amber-400",
-    accentBg: "bg-amber-500/10",
-    accentBar: "bg-amber-500"
-  }
-];
-function getContentRoleMeta(role) {
-  return CONTENT_ROLES.find((r) => r.id === role) ?? CONTENT_ROLES[2];
-}
-
-// src/react/components/AssociationCard.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function AssociationCard({
   token,
@@ -3454,7 +3405,6 @@ function AssociationCard({
   const container = containerProp ?? fromCtx;
   const [open, setOpen] = (0, import_react16.useState)(false);
   const info = store.registry.getEntityInfo(token);
-  const role = getContentRoleMeta(info.contentRole);
   const Icon = info.Icon ?? DefaultEntityIcon;
   const [listOpen, setListOpen] = (0, import_react16.useState)(false);
   const {
@@ -3488,15 +3438,6 @@ function AssociationCard({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            "span",
-            {
-              className: (0, import_design_system7.cn)(
-                "absolute inset-x-0 top-0 h-0.5 opacity-60",
-                role.accentBar
-              )
-            }
-          ),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             "button",
             {
@@ -3509,17 +3450,7 @@ function AssociationCard({
                 canDrillIn ? "cursor-pointer" : "cursor-default"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  "span",
-                  {
-                    className: (0, import_design_system7.cn)(
-                      "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
-                      role.accentBg,
-                      role.accentText
-                    ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "h-4 w-4" })
-                  }
-                ),
+                /* @__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-[11px] text-muted-foreground tabular-nums", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
@@ -3559,8 +3490,8 @@ function AssociationCard({
             setOpen(true);
           }
         } : {},
-        onDetach: (resourceId, role2) => detach(token, resourceId, role2 ?? void 0),
-        onSetPinned: (resourceId, pinned, role2) => setPinned(token, resourceId, pinned, role2 ?? void 0)
+        onDetach: (resourceId, role) => detach(token, resourceId, role ?? void 0),
+        onSetPinned: (resourceId, pinned, role) => setPinned(token, resourceId, pinned, role ?? void 0)
       }
     ),
     canAttach && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3582,6 +3513,55 @@ function AssociationCard({
 
 // src/react/components/AssociationCardGrid.tsx
 var import_design_system8 = require("@ai-matrx/design-system");
+
+// src/react/contentRoles.ts
+var CONTENT_ROLES = [
+  {
+    id: "utility",
+    title: "Utilities",
+    tagline: "The agents and tools that act on your knowledge.",
+    accentText: "text-violet-600 dark:text-violet-400",
+    accentBg: "bg-violet-500/10",
+    accentBar: "bg-violet-500"
+  },
+  {
+    id: "source",
+    title: "Sources",
+    tagline: "Incoming sources of truth (Knowledge In).",
+    accentText: "text-sky-600 dark:text-sky-400",
+    accentBg: "bg-sky-500/10",
+    accentBar: "bg-sky-500"
+  },
+  {
+    id: "destination",
+    title: "Outputs",
+    tagline: "Knowledge your team produces.",
+    accentText: "text-emerald-600 dark:text-emerald-400",
+    accentBg: "bg-emerald-500/10",
+    accentBar: "bg-emerald-500"
+  },
+  {
+    id: "hybrid",
+    title: "Sources & Outputs",
+    tagline: "Read from and written to.",
+    accentText: "text-teal-600 dark:text-teal-400",
+    accentBg: "bg-teal-500/10",
+    accentBar: "bg-gradient-to-r from-sky-500 to-emerald-500"
+  },
+  {
+    id: "container",
+    title: "Workspaces",
+    tagline: "How work is organized.",
+    accentText: "text-amber-600 dark:text-amber-400",
+    accentBg: "bg-amber-500/10",
+    accentBar: "bg-amber-500"
+  }
+];
+function getContentRoleMeta(role) {
+  return CONTENT_ROLES.find((r) => r.id === role) ?? CONTENT_ROLES[2];
+}
+
+// src/react/components/AssociationCardGrid.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function AssociationCardGrid({
   tokens,
@@ -3615,27 +3595,13 @@ function AssociationCardGrid({
       );
       if (inRole.length === 0) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-2.5 flex items-baseline gap-3 pl-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "span",
-              {
-                className: (0, import_design_system8.cn)("h-2.5 w-2.5 rounded-full", role.accentBar)
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: role.title })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: role.tagline })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
+        /* @__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)) })
       ] }, role.id);
     }),
     roleless.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-2.5 flex items-baseline gap-3 pl-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Filed under" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: "Libraries, topics and other places this is kept." })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3", children: roleless.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token }, token)) })
+      /* @__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)) })
     ] })
   ] });
 }