@ai-matrx/associations 0.13.21 → 0.13.23

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