@ai-matrx/associations 0.13.21 → 0.13.23

package/dist/react/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
-import { j as AssociationsNotifier, W as WindowShellPort, k as CapturePort, P as PickerOverrideMap, E as EntityDoorsPort, l as AuthorDisplayPort, m as AssociationsStore, n as CategoryMutationResult, o as CategoryDimension, p as PlatformCategory, q as CategoriesEntry, r as EntityTypeToken, s as UniversalCandidate, t as CandidateRecord, u as PlatformComment, v as CommentsEntry, w as CommentMutationResult, e as AssociationPickerProps, x as EntityDoorProps, y as EntityRefProps, z as ContentRole } from '../CommentThread-DIGM3P6_.cjs';
-export { B as AssociationCaptureToolbar, A as AssociationCaptureToolbarProps, D as AssociationCard, F as AssociationCardGrid, b as AssociationCardGridProps, a as AssociationCardProps, G as AssociationEntitySelect, H as AssociationEntitySelectAdapter, I as AssociationEntitySelectItem, c as AssociationEntitySelectProps, J as AssociationList, d as AssociationListProps, K as AssociationWindow, f as AssociationWindowProps, L as AssociationWriteResult, M as AttachedItemsSheet, g as AttachedItemsSheetProps, N as CaptureAttach, O as CaptureAttachResult, Q as CaptureToolbarAction, R as CategorySelect, C as CategorySelectProps, S as CategoryTagPicker, h as CategoryTagPickerProps, T as CommentComposer, V as CommentComposerProps, X as CommentThread, i as CommentThreadProps, Y as ContainerLink, Z as ContainerResourceRow, _ as ContainerResourcesAdapter, $ as DefaultEntityIcon, a0 as PrimaryContainerEntity, a1 as PrimaryEntity, a2 as PrimaryEntityProvider, a3 as PrimaryFiledEntity, a4 as TagPickerIcon, a5 as UniversalAssociationPicker, U as UniversalAssociationPickerProps, a6 as UseAssociationEntitySelectAdapterArgs, a7 as UseAssociationsArgs, a8 as UseAssociationsReturn, a9 as UseContainerLinksArgs, aa as UseContainerLinksReturn, ab as attachedKey, ac as buildCommentTree, ad as containerLinksArgs, ae as linkDirection, af as useAssociationEntitySelectAdapter, ag as useAssociations, ah as useContainerLinks, ai as useContainerLinksAdapter, aj as useEntityRelationships, ak as usePrimaryEntity } from '../CommentThread-DIGM3P6_.cjs';
+import { j as AssociationsNotifier, W as WindowShellPort, k as CapturePort, P as PickerOverrideMap, E as EntityDoorsPort, l as AuthorDisplayPort, m as AssociationsStore, n as CategoryMutationResult, o as CategoryDimension, p as PlatformCategory, q as CategoriesEntry, r as EntityTypeToken, s as UniversalCandidate, t as CandidateRecord, u as PlatformComment, v as CommentsEntry, w as CommentMutationResult, e as AssociationPickerProps, x as EntityDoorProps, y as EntityRefProps, z as ContentRole } from '../CommentThread-oaeNU_5g.cjs';
+export { B as AssociationCaptureToolbar, A as AssociationCaptureToolbarProps, D as AssociationCard, F as AssociationCardGrid, b as AssociationCardGridProps, G as AssociationCardLook, a as AssociationCardProps, H as AssociationEntitySelect, I as AssociationEntitySelectAdapter, J as AssociationEntitySelectItem, c as AssociationEntitySelectProps, K as AssociationList, d as AssociationListProps, L as AssociationWindow, f as AssociationWindowProps, M as AssociationWriteResult, N as AttachedItemsSheet, g as AttachedItemsSheetProps, O as CaptureAttach, Q as CaptureAttachResult, R as CaptureToolbarAction, S as CategorySelect, C as CategorySelectProps, T as CategoryTagPicker, h as CategoryTagPickerProps, V as CommentComposer, X as CommentComposerProps, Y as CommentThread, i as CommentThreadProps, Z as ContainerLink, _ as ContainerResourceRow, $ as ContainerResourcesAdapter, a0 as DefaultEntityIcon, a1 as PrimaryContainerEntity, a2 as PrimaryEntity, a3 as PrimaryEntityProvider, a4 as PrimaryFiledEntity, a5 as TagPickerIcon, a6 as UniversalAssociationPicker, U as UniversalAssociationPickerProps, a7 as UseAssociationEntitySelectAdapterArgs, a8 as UseAssociationsArgs, a9 as UseAssociationsReturn, aa as UseContainerLinksArgs, ab as UseContainerLinksReturn, ac as attachedKey, ad as buildCommentTree, ae as containerLinksArgs, af as linkDirection, ag as useAssociationEntitySelectAdapter, ah as useAssociations, ai as useContainerLinks, aj as useContainerLinksAdapter, ak as useEntityRelationships, al as usePrimaryEntity } from '../CommentThread-oaeNU_5g.cjs';
 
 interface AssociationsUiPorts {
     notifier?: AssociationsNotifier;

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
-import { j as AssociationsNotifier, W as WindowShellPort, k as CapturePort, P as PickerOverrideMap, E as EntityDoorsPort, l as AuthorDisplayPort, m as AssociationsStore, n as CategoryMutationResult, o as CategoryDimension, p as PlatformCategory, q as CategoriesEntry, r as EntityTypeToken, s as UniversalCandidate, t as CandidateRecord, u as PlatformComment, v as CommentsEntry, w as CommentMutationResult, e as AssociationPickerProps, x as EntityDoorProps, y as EntityRefProps, z as ContentRole } from '../CommentThread-DIGM3P6_.js';
-export { B as AssociationCaptureToolbar, A as AssociationCaptureToolbarProps, D as AssociationCard, F as AssociationCardGrid, b as AssociationCardGridProps, a as AssociationCardProps, G as AssociationEntitySelect, H as AssociationEntitySelectAdapter, I as AssociationEntitySelectItem, c as AssociationEntitySelectProps, J as AssociationList, d as AssociationListProps, K as AssociationWindow, f as AssociationWindowProps, L as AssociationWriteResult, M as AttachedItemsSheet, g as AttachedItemsSheetProps, N as CaptureAttach, O as CaptureAttachResult, Q as CaptureToolbarAction, R as CategorySelect, C as CategorySelectProps, S as CategoryTagPicker, h as CategoryTagPickerProps, T as CommentComposer, V as CommentComposerProps, X as CommentThread, i as CommentThreadProps, Y as ContainerLink, Z as ContainerResourceRow, _ as ContainerResourcesAdapter, $ as DefaultEntityIcon, a0 as PrimaryContainerEntity, a1 as PrimaryEntity, a2 as PrimaryEntityProvider, a3 as PrimaryFiledEntity, a4 as TagPickerIcon, a5 as UniversalAssociationPicker, U as UniversalAssociationPickerProps, a6 as UseAssociationEntitySelectAdapterArgs, a7 as UseAssociationsArgs, a8 as UseAssociationsReturn, a9 as UseContainerLinksArgs, aa as UseContainerLinksReturn, ab as attachedKey, ac as buildCommentTree, ad as containerLinksArgs, ae as linkDirection, af as useAssociationEntitySelectAdapter, ag as useAssociations, ah as useContainerLinks, ai as useContainerLinksAdapter, aj as useEntityRelationships, ak as usePrimaryEntity } from '../CommentThread-DIGM3P6_.js';
+import { j as AssociationsNotifier, W as WindowShellPort, k as CapturePort, P as PickerOverrideMap, E as EntityDoorsPort, l as AuthorDisplayPort, m as AssociationsStore, n as CategoryMutationResult, o as CategoryDimension, p as PlatformCategory, q as CategoriesEntry, r as EntityTypeToken, s as UniversalCandidate, t as CandidateRecord, u as PlatformComment, v as CommentsEntry, w as CommentMutationResult, e as AssociationPickerProps, x as EntityDoorProps, y as EntityRefProps, z as ContentRole } from '../CommentThread-oaeNU_5g.js';
+export { B as AssociationCaptureToolbar, A as AssociationCaptureToolbarProps, D as AssociationCard, F as AssociationCardGrid, b as AssociationCardGridProps, G as AssociationCardLook, a as AssociationCardProps, H as AssociationEntitySelect, I as AssociationEntitySelectAdapter, J as AssociationEntitySelectItem, c as AssociationEntitySelectProps, K as AssociationList, d as AssociationListProps, L as AssociationWindow, f as AssociationWindowProps, M as AssociationWriteResult, N as AttachedItemsSheet, g as AttachedItemsSheetProps, O as CaptureAttach, Q as CaptureAttachResult, R as CaptureToolbarAction, S as CategorySelect, C as CategorySelectProps, T as CategoryTagPicker, h as CategoryTagPickerProps, V as CommentComposer, X as CommentComposerProps, Y as CommentThread, i as CommentThreadProps, Z as ContainerLink, _ as ContainerResourceRow, $ as ContainerResourcesAdapter, a0 as DefaultEntityIcon, a1 as PrimaryContainerEntity, a2 as PrimaryEntity, a3 as PrimaryEntityProvider, a4 as PrimaryFiledEntity, a5 as TagPickerIcon, a6 as UniversalAssociationPicker, U as UniversalAssociationPickerProps, a7 as UseAssociationEntitySelectAdapterArgs, a8 as UseAssociationsArgs, a9 as UseAssociationsReturn, aa as UseContainerLinksArgs, ab as UseContainerLinksReturn, ac as attachedKey, ad as buildCommentTree, ae as containerLinksArgs, af as linkDirection, ag as useAssociationEntitySelectAdapter, ah as useAssociations, ai as useContainerLinks, aj as useContainerLinksAdapter, ak as useEntityRelationships, al as usePrimaryEntity } from '../CommentThread-oaeNU_5g.js';
 
 interface AssociationsUiPorts {
     notifier?: AssociationsNotifier;

package/dist/react/index.js

@@ -3809,10 +3809,60 @@ function AttachedItemsBody({
 import { useState as useState10 } from "react";
 import { cn as cn7 } from "@ai-matrx/design-system";
 import { TapTargetButton } from "@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
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function AssociationCard({
   token,
   container: containerProp,
+  look = "tiles",
   className
 }) {
   const store = useAssociationsStore();
@@ -3820,6 +3870,7 @@ function AssociationCard({
   const container = containerProp ?? fromCtx;
   const [open, setOpen] = useState10(false);
   const info = store.registry.getEntityInfo(token);
+  const role = getContentRoleMeta(info.contentRole);
   const Icon = info.Icon ?? DefaultEntityIcon;
   const [listOpen, setListOpen] = useState10(false);
   const {
@@ -3845,43 +3896,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__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsxs9(
+    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__ */ jsxs9(
+        "div",
+        {
+          "data-association-card": token,
+          "data-association-card-look": "simplified",
+          className: cn7(
+            "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__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                disabled: !canDrillIn,
+                onClick: () => setListOpen(true),
+                title: drillTitle,
+                "aria-label": loading ? info.labelPlural : `${info.labelPlural}: ${count} ${countWord}`,
+                className: cn7(
+                  "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(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(
+              TapTargetButton,
+              {
+                ariaLabel: `Attach ${info.labelPlural.toLowerCase()}`,
+                tooltip: false,
+                onClick: () => setOpen(true),
+                icon: /* @__PURE__ */ jsx11(PlusIcon, { className: "h-4 w-4" })
+              }
+            )
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxs9(
       "div",
       {
         "data-association-card": token,
+        "data-association-card-look": "tiles",
         className: cn7(
-          "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__ */ jsx11(
+            "span",
+            {
+              className: cn7(
+                "absolute inset-x-0 top-0 h-0.5 opacity-60",
+                role.accentBar
+              )
+            }
+          ),
           /* @__PURE__ */ jsxs9(
             "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: cn7(
-                "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__ */ 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 })
+                /* @__PURE__ */ jsx11(
+                  "span",
+                  {
+                    className: cn7(
+                      "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+                      role.accentBg,
+                      role.accentText
+                    ),
+                    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} ${countWord}` })
+                ] })
               ]
             }
           ),
           canAttach && /* @__PURE__ */ jsx11(
-            TapTargetButton,
+            "button",
             {
-              ariaLabel: `Attach ${info.labelPlural.toLowerCase()}`,
-              tooltip: false,
+              type: "button",
               onClick: () => setOpen(true),
-              className: "ml-auto shrink-0",
-              icon: /* @__PURE__ */ jsx11(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__ */ jsx11(PlusIcon, { className: "h-4 w-4" })
             }
           )
         ]
@@ -3902,8 +4028,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__ */ jsx11(
@@ -3925,61 +4051,29 @@ function AssociationCard({
 
 // src/react/components/AssociationCardGrid.tsx
 import { cn as cn8 } from "@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
 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";
+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__ */ jsx12("h3", { className: SIMPLE_GROUP_LABEL, children: title });
+  return /* @__PURE__ */ jsxs10("div", { className: "mb-2.5 flex items-baseline gap-3 pl-1.5", children: [
+    dotClassName ? /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx12("span", { className: cn8("h-2.5 w-2.5 rounded-full", dotClassName) }),
+      /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }) : /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsx12("p", { className: "hidden text-xs text-muted-foreground sm:block", children: tagline })
+  ] });
+}
 function AssociationCardGrid({
   tokens,
   excludeTokens,
+  look = "tiles",
   className
 }) {
   const store = useAssociationsStore();
@@ -4002,22 +4096,45 @@ function AssociationCardGrid({
     const role = store.registry.getEntityInfo(token).contentRole;
     return !role || !roleIds.has(role);
   }) : [];
-  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: 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: GROUP_LABEL, children: "Filed under" }),
-      /* @__PURE__ */ jsx12("div", { className: TILE_ROW, children: roleless.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token }, token)) })
-    ] })
-  ] });
+  const rowClass = look === "simplified" ? SIMPLE_TILE_ROW : TILE_GRID;
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      "data-association-grid-look": look,
+      className: cn8("@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__ */ jsxs10("section", { children: [
+            /* @__PURE__ */ jsx12(
+              GroupHeader,
+              {
+                look,
+                title: role.title,
+                tagline: role.tagline,
+                dotClassName: role.accentBar
+              }
+            ),
+            /* @__PURE__ */ jsx12("div", { className: rowClass, children: inRole.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token, look }, token)) })
+          ] }, role.id);
+        }),
+        roleless.length > 0 && /* @__PURE__ */ jsxs10("section", { children: [
+          /* @__PURE__ */ jsx12(
+            GroupHeader,
+            {
+              look,
+              title: "Filed under",
+              tagline: "Libraries, topics and other places this is kept."
+            }
+          ),
+          /* @__PURE__ */ jsx12("div", { className: rowClass, children: roleless.map((token) => /* @__PURE__ */ jsx12(AssociationCard, { token, look }, token)) })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/react/components/AssociationList.tsx