@ai-matrx/associations 0.13.22 → 0.13.25

package/dist/{ports-D2Im-Tjl.d.cts → ports-vvtD75Sp.d.cts}

@@ -1,6 +1,6 @@
 import { ElementType, ComponentType, ReactNode } from 'react';
 
-declare const ASSOCIATION_TARGET_TYPES: readonly ["organization", "scope", "scope_type", "project", "task", "context_item", "thread", "war_room", "category", "conversation", "fc_set", "fc_card", "study_media", "assessment", "note", "file", "quiz_session", "agent", "agent_term_list", "research_tag", "skill", "surface", "plan_entity", "plan_node", "web_site", "seo_topic", "seo_keyword", "web_page", "web_screenshot", "party", "crm_outreach_list", "crm_deal", "rulebook", "research_topic", "media_source_library"];
+declare const ASSOCIATION_TARGET_TYPES: readonly ["organization", "scope", "scope_type", "project", "task", "context_item", "thread", "war_room", "category", "conversation", "fc_set", "fc_card", "study_media", "assessment", "note", "file", "processed_document", "quiz_session", "agent", "agent_term_list", "research_tag", "skill", "surface", "plan_entity", "plan_node", "web_site", "seo_topic", "seo_keyword", "web_page", "web_screenshot", "party", "crm_outreach_list", "crm_deal", "rulebook", "research_topic", "media_source_library"];
 type AssociationTargetType = (typeof ASSOCIATION_TARGET_TYPES)[number];
 /** Runtime guard: is this token one of the deliberate container (target) types? */
 declare function isAssociationTargetType(value: unknown): value is AssociationTargetType;

package/dist/{ports-D2Im-Tjl.d.ts → ports-vvtD75Sp.d.ts}

@@ -1,6 +1,6 @@
 import { ElementType, ComponentType, ReactNode } from 'react';
 
-declare const ASSOCIATION_TARGET_TYPES: readonly ["organization", "scope", "scope_type", "project", "task", "context_item", "thread", "war_room", "category", "conversation", "fc_set", "fc_card", "study_media", "assessment", "note", "file", "quiz_session", "agent", "agent_term_list", "research_tag", "skill", "surface", "plan_entity", "plan_node", "web_site", "seo_topic", "seo_keyword", "web_page", "web_screenshot", "party", "crm_outreach_list", "crm_deal", "rulebook", "research_topic", "media_source_library"];
+declare const ASSOCIATION_TARGET_TYPES: readonly ["organization", "scope", "scope_type", "project", "task", "context_item", "thread", "war_room", "category", "conversation", "fc_set", "fc_card", "study_media", "assessment", "note", "file", "processed_document", "quiz_session", "agent", "agent_term_list", "research_tag", "skill", "surface", "plan_entity", "plan_node", "web_site", "seo_topic", "seo_keyword", "web_page", "web_screenshot", "party", "crm_outreach_list", "crm_deal", "rulebook", "research_topic", "media_source_library"];
 type AssociationTargetType = (typeof ASSOCIATION_TARGET_TYPES)[number];
 /** Runtime guard: is this token one of the deliberate container (target) types? */
 declare function isAssociationTargetType(value: unknown): value is AssociationTargetType;

package/dist/react/index.cjs

@@ -1755,6 +1755,8 @@ var ASSOCIATION_TARGET_TYPES = [
   //                 a note — the origin a converted study artifact links back to (artifact→note 'source' lineage, P4)
   "file",
   //                 a file (card→file media + source lineage)
+  "processed_document",
+  //   a processed source document (study-aid source lineage and kit membership)
   "quiz_session",
   //         a quiz a card is used in
   "agent",
@@ -3867,11 +3869,61 @@ 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_buttons = require("@ai-matrx/tap-target/buttons");
+
+// 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 +3931,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 +3957,132 @@ 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 !== "tiles" ? (
+      // ONE-LINE LOOKS (opt-in, off by default): small icon, UPPERCASE name,
+      // count, then the "+".
+      //  - "simplified": the classic square "+" (the same button the tiles
+      //    use), 6px from the card edge on every side at every width.
+      //  - "compact": the real PlusTapButton in its OUTLINE variant (never
+      //    glass — glass only reads over a see-through surface). Nothing
+      //    around it: no card padding on its side and no vertical padding,
+      //    so the tap target's own 44px box centers the 28px circle with
+      //    8px on every side. Never pass a layout class to a tap button —
+      //    its className lands on the ICON (the 2026-09-27 crooked "+").
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          "data-association-card": token,
+          "data-association-card-look": look,
+          className: (0, import_design_system7.cn)(
+            "flex items-center gap-x-1.5 rounded-md border border-border bg-card pl-2.5",
+            look === "simplified" ? "py-1.5 pr-1.5" : "py-0 pr-0",
+            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-7 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 && (look === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_buttons.PlusTapButton,
+              {
+                variant: "outline",
+                ariaLabel: `Attach ${info.labelPlural.toLowerCase()}`,
+                tooltip: false,
+                onClick: () => setOpen(true)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setOpen(true),
+                "aria-label": `Attach ${info.labelPlural.toLowerCase()}`,
+                title: `Attach ${info.labelPlural.toLowerCase()}`,
+                className: "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:h-7 lg:w-7",
+                children: /* @__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 +4103,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 +4126,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 !== "tiles") 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 +4171,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 !== "tiles" ? 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 !== "tiles" ? "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