@ai-matrx/associations 0.13.22 → 0.13.23

package/CHANGELOG.md

@@ -1,8 +1,22 @@
 # Changelog — @ai-matrx/associations
 
+## 0.13.23
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/associations/v0.13.22..npm/associations/v0.13.23 -- apps/shared/associations`).
+No source changes intended and no consumer action required.
+
 ## 0.13.22
 ### Unreleased
 
+- **Resources grid restored to its own look (Arman, 2026-09-29).** `AssociationCardGrid` and
+  `AssociationCard` again draw the colored group dot, the one-line group description, the colored
+  top bar, the tinted icon chip, the "N attached" line and the square "+" — undoing the 2026-09-27
+  page-pass restyle (0b7ed5ee91, ab22ca7f10, 8ab54b828c). The 12px count line (6fb9d79138) stays.
+- New opt-in `look?: "tiles" | "simplified"` on both (default `"tiles"`). `"simplified"` is the
+  one-line uppercase look, with the "+" glyph now centered in its circle (an `ml-auto` meant for
+  the button was landing on the icon). Not used by any page until Arman picks it.
+  Consumer action: none.
 - Root now exports `isRegisteredPair(source, target)` and `registeredEdgeLabel(source, target)`
   from the generated association registry, so a host decides an edge's direction from the package
   instead of reading `platform.association_types` itself (A3-F, the Source input's file filing).

package/dist/{CommentThread-DIGM3P6_.d.cts → CommentThread-oaeNU_5g.d.cts}

@@ -1696,18 +1696,31 @@ interface AssociationCardProps {
     token: EntityTypeToken;
     /** Override the page's primary entity. Defaults to PrimaryEntityProvider. */
     container?: PrimaryEntity;
+    /**
+     * "tiles" (default): the tinted icon chip, role-colored top bar, "N attached"
+     * line and square "+". "simplified": one uppercase header line with a round
+     * ghost "+" — opt-in only.
+     */
+    look?: AssociationCardLook;
     className?: string;
 }
-declare function AssociationCard({ token, container: containerProp, className, }: AssociationCardProps): react.JSX.Element | null;
+type AssociationCardLook = "tiles" | "simplified";
+declare function AssociationCard({ token, container: containerProp, look, className, }: AssociationCardProps): react.JSX.Element | null;
 
 interface AssociationCardGridProps {
     /** Tokens to show. Defaults to every registry-listable token. */
     tokens?: EntityTypeToken[];
     /** Registry tokens this surface cannot honestly support yet. */
     excludeTokens?: EntityTypeToken[];
+    /**
+     * "tiles" (default): each group has a colored dot, its title and a one-line
+     * description; cards sit in a 1/2/3-column grid. "simplified": an uppercase
+     * eyebrow over wrapping one-line cards — opt-in only.
+     */
+    look?: AssociationCardLook;
     className?: string;
 }
-declare function AssociationCardGrid({ tokens, excludeTokens, className, }: AssociationCardGridProps): react.JSX.Element;
+declare function AssociationCardGrid({ tokens, excludeTokens, look, className, }: AssociationCardGridProps): react.JSX.Element;
 
 /** One attached resource, as the list renders it. Tokens are CANONICAL. */
 interface ContainerResourceRow {
@@ -1993,4 +2006,4 @@ declare function buildCommentTree(comments: readonly PlatformComment[]): {
 };
 declare function CommentThread({ token, id, orgId, showHeader, className, }: CommentThreadProps): react.JSX.Element;
 
-export { DefaultEntityIcon as $, type AssociationCaptureToolbarProps as A, AssociationCaptureToolbar as B, type CategorySelectProps as C, AssociationCard as D, type EntityDoorsPort as E, AssociationCardGrid as F, AssociationEntitySelect as G, type AssociationEntitySelectAdapter as H, type AssociationEntitySelectItem as I, AssociationList as J, AssociationWindow as K, type AssociationWriteResult as L, AttachedItemsSheet as M, type CaptureAttach as N, type CaptureAttachResult as O, type PickerOverrideMap as P, CaptureToolbarAction as Q, CategorySelect as R, CategoryTagPicker as S, CommentComposer as T, type UniversalAssociationPickerProps as U, type CommentComposerProps as V, type WindowShellPort as W, CommentThread as X, type ContainerLink as Y, type ContainerResourceRow as Z, type ContainerResourcesAdapter as _, type AssociationCardProps as a, type PrimaryContainerEntity as a0, type PrimaryEntity as a1, PrimaryEntityProvider as a2, type PrimaryFiledEntity as a3, type TagPickerIcon as a4, UniversalAssociationPicker as a5, type UseAssociationEntitySelectAdapterArgs as a6, type UseAssociationsArgs as a7, type UseAssociationsReturn as a8, type UseContainerLinksArgs as a9, type UseContainerLinksReturn as aa, attachedKey as ab, buildCommentTree as ac, containerLinksArgs as ad, linkDirection as ae, useAssociationEntitySelectAdapter as af, useAssociations as ag, useContainerLinks as ah, useContainerLinksAdapter as ai, useEntityRelationships as aj, usePrimaryEntity as ak, type AssociationCardGridProps as b, type AssociationEntitySelectProps as c, type AssociationListProps as d, type AssociationPickerProps as e, type AssociationWindowProps as f, type AttachedItemsSheetProps as g, type CategoryTagPickerProps as h, type CommentThreadProps as i, type AssociationsNotifier as j, type CapturePort as k, type AuthorDisplayPort as l, type AssociationsStore as m, type CategoryMutationResult as n, type CategoryDimension as o, type PlatformCategory as p, type CategoriesEntry as q, type EntityTypeToken as r, type UniversalCandidate as s, type CandidateRecord as t, type PlatformComment as u, type CommentsEntry as v, type CommentMutationResult as w, type EntityDoorProps as x, type EntityRefProps as y, type ContentRole as z };
+export { type ContainerResourcesAdapter as $, type AssociationCaptureToolbarProps as A, AssociationCaptureToolbar as B, type CategorySelectProps as C, AssociationCard as D, type EntityDoorsPort as E, AssociationCardGrid as F, type AssociationCardLook as G, AssociationEntitySelect as H, type AssociationEntitySelectAdapter as I, type AssociationEntitySelectItem as J, AssociationList as K, AssociationWindow as L, type AssociationWriteResult as M, AttachedItemsSheet as N, type CaptureAttach as O, type PickerOverrideMap as P, type CaptureAttachResult as Q, CaptureToolbarAction as R, CategorySelect as S, CategoryTagPicker as T, type UniversalAssociationPickerProps as U, CommentComposer as V, type WindowShellPort as W, type CommentComposerProps as X, CommentThread as Y, type ContainerLink as Z, type ContainerResourceRow as _, type AssociationCardProps as a, DefaultEntityIcon as a0, type PrimaryContainerEntity as a1, type PrimaryEntity as a2, PrimaryEntityProvider as a3, type PrimaryFiledEntity as a4, type TagPickerIcon as a5, UniversalAssociationPicker as a6, type UseAssociationEntitySelectAdapterArgs as a7, type UseAssociationsArgs as a8, type UseAssociationsReturn as a9, type UseContainerLinksArgs as aa, type UseContainerLinksReturn as ab, attachedKey as ac, buildCommentTree as ad, containerLinksArgs as ae, linkDirection as af, useAssociationEntitySelectAdapter as ag, useAssociations as ah, useContainerLinks as ai, useContainerLinksAdapter as aj, useEntityRelationships as ak, usePrimaryEntity as al, type AssociationCardGridProps as b, type AssociationEntitySelectProps as c, type AssociationListProps as d, type AssociationPickerProps as e, type AssociationWindowProps as f, type AttachedItemsSheetProps as g, type CategoryTagPickerProps as h, type CommentThreadProps as i, type AssociationsNotifier as j, type CapturePort as k, type AuthorDisplayPort as l, type AssociationsStore as m, type CategoryMutationResult as n, type CategoryDimension as o, type PlatformCategory as p, type CategoriesEntry as q, type EntityTypeToken as r, type UniversalCandidate as s, type CandidateRecord as t, type PlatformComment as u, type CommentsEntry as v, type CommentMutationResult as w, type EntityDoorProps as x, type EntityRefProps as y, type ContentRole as z };

package/dist/{CommentThread-DIGM3P6_.d.ts → CommentThread-oaeNU_5g.d.ts}

@@ -1696,18 +1696,31 @@ interface AssociationCardProps {
     token: EntityTypeToken;
     /** Override the page's primary entity. Defaults to PrimaryEntityProvider. */
     container?: PrimaryEntity;
+    /**
+     * "tiles" (default): the tinted icon chip, role-colored top bar, "N attached"
+     * line and square "+". "simplified": one uppercase header line with a round
+     * ghost "+" — opt-in only.
+     */
+    look?: AssociationCardLook;
     className?: string;
 }
-declare function AssociationCard({ token, container: containerProp, className, }: AssociationCardProps): react.JSX.Element | null;
+type AssociationCardLook = "tiles" | "simplified";
+declare function AssociationCard({ token, container: containerProp, look, className, }: AssociationCardProps): react.JSX.Element | null;
 
 interface AssociationCardGridProps {
     /** Tokens to show. Defaults to every registry-listable token. */
     tokens?: EntityTypeToken[];
     /** Registry tokens this surface cannot honestly support yet. */
     excludeTokens?: EntityTypeToken[];
+    /**
+     * "tiles" (default): each group has a colored dot, its title and a one-line
+     * description; cards sit in a 1/2/3-column grid. "simplified": an uppercase
+     * eyebrow over wrapping one-line cards — opt-in only.
+     */
+    look?: AssociationCardLook;
     className?: string;
 }
-declare function AssociationCardGrid({ tokens, excludeTokens, className, }: AssociationCardGridProps): react.JSX.Element;
+declare function AssociationCardGrid({ tokens, excludeTokens, look, className, }: AssociationCardGridProps): react.JSX.Element;
 
 /** One attached resource, as the list renders it. Tokens are CANONICAL. */
 interface ContainerResourceRow {
@@ -1993,4 +2006,4 @@ declare function buildCommentTree(comments: readonly PlatformComment[]): {
 };
 declare function CommentThread({ token, id, orgId, showHeader, className, }: CommentThreadProps): react.JSX.Element;
 
-export { DefaultEntityIcon as $, type AssociationCaptureToolbarProps as A, AssociationCaptureToolbar as B, type CategorySelectProps as C, AssociationCard as D, type EntityDoorsPort as E, AssociationCardGrid as F, AssociationEntitySelect as G, type AssociationEntitySelectAdapter as H, type AssociationEntitySelectItem as I, AssociationList as J, AssociationWindow as K, type AssociationWriteResult as L, AttachedItemsSheet as M, type CaptureAttach as N, type CaptureAttachResult as O, type PickerOverrideMap as P, CaptureToolbarAction as Q, CategorySelect as R, CategoryTagPicker as S, CommentComposer as T, type UniversalAssociationPickerProps as U, type CommentComposerProps as V, type WindowShellPort as W, CommentThread as X, type ContainerLink as Y, type ContainerResourceRow as Z, type ContainerResourcesAdapter as _, type AssociationCardProps as a, type PrimaryContainerEntity as a0, type PrimaryEntity as a1, PrimaryEntityProvider as a2, type PrimaryFiledEntity as a3, type TagPickerIcon as a4, UniversalAssociationPicker as a5, type UseAssociationEntitySelectAdapterArgs as a6, type UseAssociationsArgs as a7, type UseAssociationsReturn as a8, type UseContainerLinksArgs as a9, type UseContainerLinksReturn as aa, attachedKey as ab, buildCommentTree as ac, containerLinksArgs as ad, linkDirection as ae, useAssociationEntitySelectAdapter as af, useAssociations as ag, useContainerLinks as ah, useContainerLinksAdapter as ai, useEntityRelationships as aj, usePrimaryEntity as ak, type AssociationCardGridProps as b, type AssociationEntitySelectProps as c, type AssociationListProps as d, type AssociationPickerProps as e, type AssociationWindowProps as f, type AttachedItemsSheetProps as g, type CategoryTagPickerProps as h, type CommentThreadProps as i, type AssociationsNotifier as j, type CapturePort as k, type AuthorDisplayPort as l, type AssociationsStore as m, type CategoryMutationResult as n, type CategoryDimension as o, type PlatformCategory as p, type CategoriesEntry as q, type EntityTypeToken as r, type UniversalCandidate as s, type CandidateRecord as t, type PlatformComment as u, type CommentsEntry as v, type CommentMutationResult as w, type EntityDoorProps as x, type EntityRefProps as y, type ContentRole as z };
+export { type ContainerResourcesAdapter as $, type AssociationCaptureToolbarProps as A, AssociationCaptureToolbar as B, type CategorySelectProps as C, AssociationCard as D, type EntityDoorsPort as E, AssociationCardGrid as F, type AssociationCardLook as G, AssociationEntitySelect as H, type AssociationEntitySelectAdapter as I, type AssociationEntitySelectItem as J, AssociationList as K, AssociationWindow as L, type AssociationWriteResult as M, AttachedItemsSheet as N, type CaptureAttach as O, type PickerOverrideMap as P, type CaptureAttachResult as Q, CaptureToolbarAction as R, CategorySelect as S, CategoryTagPicker as T, type UniversalAssociationPickerProps as U, CommentComposer as V, type WindowShellPort as W, type CommentComposerProps as X, CommentThread as Y, type ContainerLink as Z, type ContainerResourceRow as _, type AssociationCardProps as a, DefaultEntityIcon as a0, type PrimaryContainerEntity as a1, type PrimaryEntity as a2, PrimaryEntityProvider as a3, type PrimaryFiledEntity as a4, type TagPickerIcon as a5, UniversalAssociationPicker as a6, type UseAssociationEntitySelectAdapterArgs as a7, type UseAssociationsArgs as a8, type UseAssociationsReturn as a9, type UseContainerLinksArgs as aa, type UseContainerLinksReturn as ab, attachedKey as ac, buildCommentTree as ad, containerLinksArgs as ae, linkDirection as af, useAssociationEntitySelectAdapter as ag, useAssociations as ah, useContainerLinks as ai, useContainerLinksAdapter as aj, useEntityRelationships as ak, usePrimaryEntity as al, type AssociationCardGridProps as b, type AssociationEntitySelectProps as c, type AssociationListProps as d, type AssociationPickerProps as e, type AssociationWindowProps as f, type AttachedItemsSheetProps as g, type CategoryTagPickerProps as h, type CommentThreadProps as i, type AssociationsNotifier as j, type CapturePort as k, type AuthorDisplayPort as l, type AssociationsStore as m, type CategoryMutationResult as n, type CategoryDimension as o, type PlatformCategory as p, type CategoriesEntry as q, type EntityTypeToken as r, type UniversalCandidate as s, type CandidateRecord as t, type PlatformComment as u, type CommentsEntry as v, type CommentMutationResult as w, type EntityDoorProps as x, type EntityRefProps as y, type ContentRole as z };

package/dist/react/index.cjs

@@ -3868,10 +3868,60 @@ function AttachedItemsBody({
 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");
+
+// 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,
   container: containerProp,
+  look = "tiles",
   className
 }) {
   const store = useAssociationsStore();
@@ -3879,6 +3929,7 @@ 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 {
@@ -3904,43 +3955,118 @@ function AssociationCard({
   const canAttach = info.canListCandidates && (!filing || isAssociationTargetType(token));
   const canDrillIn = count > 0;
   const countWord = filing ? "filed under" : "attached";
+  const drillTitle = canDrillIn ? `View the ${info.labelPlural.toLowerCase()} attached to ${container.label ?? "this"}` : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    look === "simplified" ? (
+      // SIMPLIFIED (opt-in, off by default): one header line — small icon,
+      // UPPERCASE name, count, round ghost "+" — the same geometry as the
+      // CRM record's SectionCard header, so the two sit flush together.
+      // TapTargetButton puts `className` on its ICON, not the button: never
+      // pass layout classes there (an `ml-auto` pushed the "+" glyph off
+      // center inside its circle). The flex-1 drill button already puts the
+      // "+" at the end of the row.
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          "data-association-card": token,
+          "data-association-card-look": "simplified",
+          className: (0, import_design_system7.cn)(
+            "flex min-h-8 items-center gap-x-1.5 rounded-md border border-border bg-card px-2.5 py-1 sm:py-0 lg:pointer-fine:[--matrx-tap-target-size:1.75rem]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "button",
+              {
+                type: "button",
+                disabled: !canDrillIn,
+                onClick: () => setListOpen(true),
+                title: drillTitle,
+                "aria-label": loading ? info.labelPlural : `${info.labelPlural}: ${count} ${countWord}`,
+                className: (0, import_design_system7.cn)(
+                  "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)(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)(
+              import_tap_target.TapTargetButton,
+              {
+                ariaLabel: `Attach ${info.labelPlural.toLowerCase()}`,
+                tooltip: false,
+                onClick: () => setOpen(true),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { className: "h-4 w-4" })
+              }
+            )
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         "data-association-card": token,
+        "data-association-card-look": "tiles",
         className: (0, import_design_system7.cn)(
-          "flex min-h-8 items-center gap-x-1.5 rounded-md border border-border bg-card px-2.5 py-1 sm:py-0 lg:pointer-fine:[--matrx-tap-target-size:1.75rem]",
+          "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",
           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",
             {
               type: "button",
               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}`,
+              title: drillTitle,
               className: (0, import_design_system7.cn)(
-                "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"
+                "flex min-w-0 flex-1 items-center gap-3 px-3 py-2.5 text-left",
+                canDrillIn ? "cursor-pointer" : "cursor-default"
               ),
               children: [
-                /* @__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 })
+                /* @__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.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} ${countWord}` })
+                ] })
               ]
             }
           ),
           canAttach && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_tap_target.TapTargetButton,
+            "button",
             {
-              ariaLabel: `Attach ${info.labelPlural.toLowerCase()}`,
-              tooltip: false,
+              type: "button",
               onClick: () => setOpen(true),
-              className: "ml-auto shrink-0",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { className: "h-4 w-4" })
+              "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" })
             }
           )
         ]
@@ -3961,8 +4087,8 @@ function AssociationCard({
             setOpen(true);
           }
         } : {},
-        onDetach: (resourceId, role) => detach(token, resourceId, role ?? void 0),
-        onSetPinned: (resourceId, pinned, role) => setPinned(token, resourceId, pinned, role ?? void 0)
+        onDetach: (resourceId, role2) => detach(token, resourceId, role2 ?? void 0),
+        onSetPinned: (resourceId, pinned, role2) => setPinned(token, resourceId, pinned, role2 ?? void 0)
       }
     ),
     canAttach && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3984,61 +4110,29 @@ 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");
-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";
+var SIMPLE_GROUP_LABEL = "mb-1 text-xs font-medium uppercase tracking-wider text-muted-foreground";
+var SIMPLE_TILE_ROW = "flex flex-wrap gap-2 [&>*]:min-w-[16rem] [&>*]:flex-1";
+var TILE_GRID = "grid grid-cols-1 gap-2 @md:grid-cols-2 @3xl:grid-cols-3";
+function GroupHeader({
+  look,
+  title,
+  tagline,
+  dotClassName
+}) {
+  if (look === "simplified") return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: SIMPLE_GROUP_LABEL, children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mb-2.5 flex items-baseline gap-3 pl-1.5", children: [
+    dotClassName ? /* @__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", dotClassName) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: tagline })
+  ] });
+}
 function AssociationCardGrid({
   tokens,
   excludeTokens,
+  look = "tiles",
   className
 }) {
   const store = useAssociationsStore();
@@ -4061,22 +4155,45 @@ 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-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: 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: 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)) })
-    ] })
-  ] });
+  const rowClass = look === "simplified" ? SIMPLE_TILE_ROW : TILE_GRID;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "div",
+    {
+      "data-association-grid-look": look,
+      className: (0, import_design_system8.cn)("@container", look === "simplified" ? "space-y-3" : "space-y-5", 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)(
+              GroupHeader,
+              {
+                look,
+                title: role.title,
+                tagline: role.tagline,
+                dotClassName: role.accentBar
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: rowClass, children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token, look }, token)) })
+          ] }, role.id);
+        }),
+        roleless.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            GroupHeader,
+            {
+              look,
+              title: "Filed under",
+              tagline: "Libraries, topics and other places this is kept."
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: rowClass, children: roleless.map((token) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AssociationCard, { token, look }, token)) })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/react/components/AssociationList.tsx