@ai-matrx/detail 0.1.177 → 0.1.178

package/CHANGELOG.md

@@ -1,9 +1,22 @@
 # Changelog — @ai-matrx/detail
 
+## 0.1.178
+
+- **The Linked section loads behind one lazy edge (2026-10-27).** `DetailLinked` (the associations grid, its provider and the entity-token filter) is a separate chunk that `DetailBody` starts on mount, beside the record's read, so it is normally in before the record answers; while it is not, the section shows its heading and a skeleton. `@ai-matrx/detail/react` drops from 395 KB to 166 KB up front (Rolldown) and no longer ships the generated association/entity tables. Consumer action: none.
+
 ## 0.1.177
 
-UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
-Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/detail/src`.
+SOURCE CHANGED WITH NO RELEASE NOTE. This release shipped source changes that nobody described in an Unreleased entry,
+so they may include breaking API changes. Consumer action is UNKNOWN: read the diff before upgrading.
+Diff: `git diff f1984cb2e2 eabc648b2b -- apps/shared/detail/src`
+
+Changed shipped source files (6):
+- `apps/shared/detail/src/react/DetailBody.tsx`
+- `apps/shared/detail/src/react/DetailHeader.tsx`
+- `apps/shared/detail/src/react/DetailPresentationPane.tsx`
+- `apps/shared/detail/src/react/host.tsx`
+- `apps/shared/detail/src/react/useDetailCore.ts`
+- `apps/shared/detail/src/react/useOpenDetail.ts`
 
 ## 0.1.176
 

package/dist/DetailLinked-57SRZLYJ.js

@@ -0,0 +1,18 @@
+"use client";
+
+// src/react/DetailLinked.tsx
+import { isEntityTypeToken } from "@ai-matrx/associations/contracts";
+import { AssociationCardGrid, PrimaryEntityProvider } from "@ai-matrx/associations/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DetailLinked({ token, id, label, wanted, heading }) {
+  const tokens = wanted.filter(isEntityTypeToken);
+  if (tokens.length === 0) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "space-y-2", "data-detail-section": "associations", children: [
+    heading,
+    /* @__PURE__ */ jsx(PrimaryEntityProvider, { value: { type: token, id, label }, children: /* @__PURE__ */ jsx(AssociationCardGrid, { tokens }) })
+  ] });
+}
+export {
+  DetailLinked as default
+};
+//# sourceMappingURL=DetailLinked-57SRZLYJ.js.map

package/dist/DetailLinked-57SRZLYJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/DetailLinked.tsx"],"sourcesContent":["// @ai-matrx/detail — src/react/DetailLinked.tsx\n//\n// The body of a record's \"Linked\" section, loaded behind ONE lazy edge from\n// DetailBody. It is the only part of the panel that needs the associations\n// faces and the generated entity-token vocabulary, so a details panel that\n// opens pays for neither until it has a record that can anchor links\n// (importing the panel does no work). DetailBody starts this chunk on mount, so\n// it is normally in before the record's read answers.\n\n\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { isEntityTypeToken, type AssociationTargetType } from \"@ai-matrx/associations/contracts\";\nimport { AssociationCardGrid, PrimaryEntityProvider } from \"@ai-matrx/associations/react\";\n\nexport interface DetailLinkedProps {\n  token: AssociationTargetType;\n  id: string;\n  label: string;\n  /** Candidate tokens (host or record-type), the record's own token already removed. */\n  wanted: readonly string[];\n  heading: ReactNode;\n}\n\nexport default function DetailLinked({ token, id, label, wanted, heading }: DetailLinkedProps) {\n  const tokens = wanted.filter(isEntityTypeToken);\n  if (tokens.length === 0) return null;\n  return (\n    <section className=\"space-y-2\" data-detail-section=\"associations\">\n      {heading}\n      <PrimaryEntityProvider value={{ type: token, id, label }}>\n        <AssociationCardGrid tokens={tokens} />\n      </PrimaryEntityProvider>\n    </section>\n  );\n}\n"],"mappings":";;;AAYA,SAAS,yBAAqD;AAC9D,SAAS,qBAAqB,6BAA6B;AAevD,SAGI,KAHJ;AAJW,SAAR,aAA8B,EAAE,OAAO,IAAI,OAAO,QAAQ,QAAQ,GAAsB;AAC7F,QAAM,SAAS,OAAO,OAAO,iBAAiB;AAC9C,MAAI,OAAO,WAAW,EAAG,QAAO;AAChC,SACE,qBAAC,aAAQ,WAAU,aAAY,uBAAoB,gBAChD;AAAA;AAAA,IACD,oBAAC,yBAAsB,OAAO,EAAE,MAAM,OAAO,IAAI,MAAM,GACrD,8BAAC,uBAAoB,QAAgB,GACvC;AAAA,KACF;AAEJ;","names":[]}

package/dist/react.cjs

@@ -4,6 +4,14 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,6 +26,30 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/react/DetailLinked.tsx
+var DetailLinked_exports = {};
+__export(DetailLinked_exports, {
+  default: () => DetailLinked
+});
+function DetailLinked({ token, id, label, wanted, heading }) {
+  const tokens = wanted.filter(import_contracts.isEntityTypeToken);
+  if (tokens.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "space-y-2", "data-detail-section": "associations", children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.PrimaryEntityProvider, { value: { type: token, id, label }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react9.AssociationCardGrid, { tokens }) })
+  ] });
+}
+var import_contracts, import_react9, import_jsx_runtime4;
+var init_DetailLinked = __esm({
+  "src/react/DetailLinked.tsx"() {
+    "use strict";
+    "use client";
+    import_contracts = require("@ai-matrx/associations/contracts");
+    import_react9 = require("@ai-matrx/associations/react");
+    import_jsx_runtime4 = require("react/jsx-runtime");
+  }
+});
+
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
@@ -807,10 +839,9 @@ function DetailActions({ core, optional = "inline" }) {
 }
 
 // src/react/DetailBody.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_design_system3 = require("@ai-matrx/design-system");
-var import_associations = require("@ai-matrx/associations");
-var import_react10 = require("@ai-matrx/associations/react");
+var import_contracts2 = require("@ai-matrx/associations/contracts");
 var import_format = require("@ai-matrx/kit/format");
 
 // src/format.ts
@@ -1022,11 +1053,11 @@ function DetailPresentationPane({ core }) {
 var import_icons7 = require("@ai-matrx/design-system/icons");
 var import_outbound_react = require("@ai-matrx/kit/outbound-react");
 var import_error_sentence = require("@ai-matrx/design-system/error-sentence");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var SLOW_LOAD_NOTICE_MS = 6e3;
 function useSlowLoadNotice(active, key) {
-  const [slow, setSlow] = (0, import_react9.useState)(false);
-  (0, import_react9.useEffect)(() => {
+  const [slow, setSlow] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     if (!active) {
       setSlow(false);
       return void 0;
@@ -1038,7 +1069,7 @@ function useSlowLoadNotice(active, key) {
   return slow;
 }
 function SectionHeading({ icon, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h3", { className: "flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { className: "flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
     icon,
     children
   ] });
@@ -1047,8 +1078,8 @@ function Notice({
   tone,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-2 py-8 text-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex flex-col items-center gap-2 py-8 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       AlertCircleIcon,
       {
         className: (0, import_design_system3.cn)(
@@ -1059,7 +1090,7 @@ function Notice({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "max-w-prose text-sm text-muted-foreground", children })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "max-w-prose text-sm text-muted-foreground", children })
   ] });
 }
 var GRANT_WORD = {
@@ -1080,7 +1111,7 @@ function deriveOpenAtSourceLabel(source) {
 }
 function HealthStrip({ health }) {
   const ok = health.grant === "ok";
-  const [refreshing, setRefreshing] = (0, import_react9.useState)(false);
+  const [refreshing, setRefreshing] = (0, import_react10.useState)(false);
   const host = useDetailHost();
   const refresh = async () => {
     if (!health.onRefresh) return;
@@ -1093,7 +1124,7 @@ function HealthStrip({ health }) {
       setRefreshing(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: (0, import_design_system3.cn)(
@@ -1102,9 +1133,9 @@ function HealthStrip({ health }) {
       ),
       "data-detail-health": true,
       children: [
-        ok ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShieldCheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ShieldAlertIcon, { className: "h-3.5 w-3.5 text-destructive" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium", children: health.source }),
-        ok ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ok ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShieldCheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ShieldAlertIcon, { className: "h-3.5 w-3.5 text-destructive" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium", children: health.source }),
+        ok ? null : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "span",
           {
             className: "rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-destructive",
@@ -1112,13 +1143,13 @@ function HealthStrip({ health }) {
             children: GRANT_WORD[health.grant]
           }
         ),
-        health.lastRefreshedAt ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+        health.lastRefreshedAt ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
           "Refreshed ",
           formatWhen(health.lastRefreshedAt)
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Never refreshed" }),
-        health.grantDetail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: health.grantDetail }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "ml-auto flex items-center gap-1", children: [
-          health.onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Never refreshed" }),
+        health.grantDetail ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: health.grantDetail }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "ml-auto flex items-center gap-1", children: [
+          health.onRefresh ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             "button",
             {
               type: "button",
@@ -1126,12 +1157,12 @@ function HealthStrip({ health }) {
               disabled: refreshing,
               className: "inline-flex h-6 items-center gap-1 rounded px-1.5 hover:bg-accent hover:text-foreground disabled:opacity-50 pointer-coarse:h-10",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons7.RefreshCwIcon, { className: (0, import_design_system3.cn)("h-3 w-3", refreshing && "animate-spin") }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons7.RefreshCwIcon, { className: (0, import_design_system3.cn)("h-3 w-3", refreshing && "animate-spin") }),
                 "Refresh"
               ]
             }
           ) : null,
-          !ok && health.onReconnect ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          !ok && health.onReconnect ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
@@ -1140,13 +1171,13 @@ function HealthStrip({ health }) {
               children: "Reconnect"
             }
           ) : null,
-          health.openAtSourceHref ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          health.openAtSourceHref ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
             import_outbound_react.OutboundLink,
             {
               href: health.openAtSourceHref,
               className: "inline-flex h-6 items-center gap-1 rounded px-1.5 hover:bg-accent hover:text-foreground pointer-coarse:h-10",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons7.ExternalLinkIcon, { className: "h-3 w-3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons7.ExternalLinkIcon, { className: "h-3 w-3" }),
                 health.openAtSourceLabel ?? deriveOpenAtSourceLabel(health.source)
               ]
             }
@@ -1164,16 +1195,16 @@ function FieldsSection({ core }) {
   const RefCell = host.doors.RefCell;
   const label = core.recordType?.label.toLowerCase() ?? "record";
   if (!core.recordType) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { tone: "warn", children: `This is a ${core.ref.type} record. Nothing more about it is stored here yet, so there is nothing else to show. ${whatTheControlsDo(core)}` });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { tone: "warn", children: `This is a ${core.ref.type} record. Nothing more about it is stored here yet, so there is nothing else to show. ${whatTheControlsDo(core)}` });
   }
   if (core.status === "loading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoadingFields, { core, label });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingFields, { core, label });
   }
   if (core.status === "not-found") {
     const sentence = `This ${label} couldn't be found \u2014 it may have been moved, deleted, or isn't shared with you.`;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Notice, { tone: "warn", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Notice, { tone: "warn", children: [
       sentence,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_design_system3.ErrorActions,
         {
           origin: "detail/DetailBody",
@@ -1185,24 +1216,24 @@ function FieldsSection({ core }) {
     ] });
   }
   if (core.status === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Notice, { tone: "error", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Notice, { tone: "error", children: [
       `Couldn't load the details for this ${label}. ${core.errorMessage ?? ""}`.trim(),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.ErrorActions, { origin: "detail/DetailBody", operation: `Load this ${label}`, error: core.errorMessage })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.ErrorActions, { origin: "detail/DetailBody", operation: `Load this ${label}`, error: core.errorMessage })
     ] });
   }
   if (core.status === "none") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Notice, { tone: "muted", children: `Nothing more about this ${label} is stored here, so there is nothing else to show. ` + whatTheControlsDo(core) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Notice, { tone: "muted", children: `Nothing more about this ${label} is stored here, so there is nothing else to show. ` + whatTheControlsDo(core) });
   }
   if (core.fields.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm text-muted-foreground", children: "No additional fields to show." });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-muted-foreground", children: "No additional fields to show." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dl", { className: "grid grid-cols-1 gap-x-4 gap-y-2.5", children: core.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dl", { className: "grid grid-cols-1 gap-x-4 gap-y-2.5", children: core.fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: "flex flex-col gap-0.5 border-b border-border/40 pb-2 last:border-b-0",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: field.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: field.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "dd",
           {
             className: (0, import_design_system3.cn)(
@@ -1214,7 +1245,7 @@ function FieldsSection({ core }) {
               // `field.ref.id` alone, so a field whose text was "Brightwater Robotics"
               // printed a truncated uuid. The ref's own `name` wins; otherwise the
               // field's text, unless that text IS the id and says nothing more.
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 RefCell,
                 {
                   value: field.ref.id,
@@ -1233,8 +1264,8 @@ function FieldsSection({ core }) {
 }
 function LoadingFields({ core, label }) {
   const slow = useSlowLoadNotice(true, `${core.ref.type}:${core.ref.id}`);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-3", "aria-busy": "true", "aria-label": `Loading ${label} details`, children: [
-    slow ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-muted-foreground", "data-detail-slow-load": true, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-3", "aria-busy": "true", "aria-label": `Loading ${label} details`, children: [
+    slow ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xs text-muted-foreground", "data-detail-slow-load": true, children: [
       "Still loading this ",
       label,
       " \u2014 the read has been running for more than",
@@ -1242,38 +1273,48 @@ function LoadingFields({ core, label }) {
       (0, import_format.formatDurationMs)(SLOW_LOAD_NOTICE_MS, { style: "long" }),
       ". If nothing appears, the record may be unreachable from here; closing and reopening it starts a fresh read."
     ] }) : null,
-    Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Skeleton, { className: "h-2.5 w-20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Skeleton, { className: (0, import_design_system3.cn)("h-4", i % 2 ? "w-3/4" : "w-1/2") })
+    Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Skeleton, { className: "h-2.5 w-20" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Skeleton, { className: (0, import_design_system3.cn)("h-4", i % 2 ? "w-3/4" : "w-1/2") })
     ] }, i))
   ] });
 }
 function isAssociationTarget(token) {
-  return import_associations.ASSOCIATION_TARGET_TYPES.includes(token);
+  return import_contracts2.ASSOCIATION_TARGET_TYPES.includes(token);
 }
+var loadDetailLinked = () => Promise.resolve().then(() => (init_DetailLinked(), DetailLinked_exports));
+var DetailLinked2 = (0, import_react10.lazy)(loadDetailLinked);
 function AssociationsSection({ core }) {
   const host = useDetailHost();
   const token = core.entityToken;
   if (!token || !isAssociationTarget(token) || !host.associations.canAnchor(token)) return null;
   if (core.recordType?.associationTokens === null) return null;
-  const wanted = core.recordType?.associationTokens ?? host.associations.defaultTokens;
-  const tokens = wanted.filter((t) => t !== token).filter(import_associations.isEntityTypeToken);
-  if (tokens.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "space-y-2", "data-detail-section": "associations", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SectionHeading, { icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link2Icon, { className: "h-3 w-3" }), children: "Linked" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.PrimaryEntityProvider, { value: { type: token, id: core.ref.id, label: core.title }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react10.AssociationCardGrid, { tokens }) })
-  ] });
+  const wanted = (core.recordType?.associationTokens ?? host.associations.defaultTokens).filter(
+    (t) => t !== token
+  );
+  if (wanted.length === 0) return null;
+  const heading = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionHeading, { icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Link2Icon, { className: "h-3 w-3" }), children: "Linked" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react10.Suspense,
+    {
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "space-y-2", "data-detail-section": "associations", "aria-busy": "true", children: [
+        heading,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Skeleton, { className: "h-16 w-full" })
+      ] }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailLinked2, { token, id: core.ref.id, label: core.title, wanted, heading })
+    }
+  );
 }
 var ACTOR_COLUMNS = ["actor_id", "user_id", "person_id", "created_by_id"];
 function HistorySection({ core }) {
   const host = useDetailHost();
   const token = core.entityToken;
   const wanted = core.recordType?.history ?? Boolean(token);
-  const [state, setState] = (0, import_react9.useState)({ status: "loading" });
-  const lastKey = (0, import_react9.useRef)(null);
+  const [state, setState] = (0, import_react10.useState)({ status: "loading" });
+  const lastKey = (0, import_react10.useRef)(null);
   const listHistory = host.history.list;
   const recordId = core.ref.id;
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!wanted || !token) return void 0;
     const key = `${token}:${recordId}`;
     if (lastKey.current !== key) {
@@ -1298,33 +1339,33 @@ function HistorySection({ core }) {
     (candidate) => Boolean(candidate)
   );
   const ActorName = host.history.ActorName ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "space-y-2", "data-detail-section": "history", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SectionHeading, { icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HistoryIcon, { className: "h-3 w-3" }), children: "History" }),
-    state.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-1.5", "aria-busy": "true", "aria-label": "Loading history", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Skeleton, { className: "h-3.5 w-2/3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.Skeleton, { className: "h-3.5 w-1/2" })
-    ] }) : state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "space-y-2", "data-detail-section": "history", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionHeading, { icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HistoryIcon, { className: "h-3 w-3" }), children: "History" }),
+    state.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1.5", "aria-busy": "true", "aria-label": "Loading history", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Skeleton, { className: "h-3.5 w-2/3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.Skeleton, { className: "h-3.5 w-1/2" })
+    ] }) : state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
       state.message.toLowerCase().includes("access denied") ? "History is only shown to people who can view this record." : `History could not be read: ${state.message}`,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_design_system3.ErrorActions, { origin: "detail/DetailBody", operation: "Read the history", error: state.message })
-    ] }) : state.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs text-muted-foreground", children: "No recorded changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ol", { className: "space-y-1", children: state.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_design_system3.ErrorActions, { origin: "detail/DetailBody", operation: "Read the history", error: state.message })
+    ] }) : state.entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-muted-foreground", children: "No recorded changes yet." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ol", { className: "space-y-1", children: state.entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "li",
       {
         className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: [
             "v",
             entry.version
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "capitalize text-foreground", children: entry.operation.toLowerCase() }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", children: formatWhen(entry.occurredAt) }),
-          entry.isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-primary", children: "current" }) : null,
-          entry.actorId ? ActorName ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-muted-foreground", "data-detail-history-actor-person": true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "capitalize text-foreground", children: entry.operation.toLowerCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground", children: formatWhen(entry.occurredAt) }),
+          entry.isCurrent ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-primary", children: "current" }) : null,
+          entry.actorId ? ActorName ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-muted-foreground", "data-detail-history-actor-person": true, children: [
             "Changed by ",
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActorName, { actorId: entry.actorId, row: core.row })
-          ] }) : actorToken ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-flex items-center", "data-detail-history-actor": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActorCell, { value: entry.actorId, label: "Changed by", token: actorToken }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-muted-foreground", "data-detail-history-actor-raw": true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActorName, { actorId: entry.actorId, row: core.row })
+          ] }) : actorToken ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "inline-flex items-center", "data-detail-history-actor": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActorCell, { value: entry.actorId, label: "Changed by", token: actorToken }) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "text-muted-foreground", "data-detail-history-actor-raw": true, children: [
             "Changed by",
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "span",
               {
                 className: "font-mono text-[10px]",
@@ -1332,7 +1373,7 @@ function HistorySection({ core }) {
                 children: entry.actorId
               }
             )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", "data-detail-history-actor-absent": true, children: "No person recorded for this change" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground", "data-detail-history-actor-absent": true, children: "No person recorded for this change" })
         ]
       },
       `${entry.version}-${entry.occurredAt}`
@@ -1344,34 +1385,37 @@ function CustomFieldsPort({ core }) {
   const Section = host.customFields?.Section;
   const token = core.entityToken;
   if (!Section || !token) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Section, { token, id: core.ref.id });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Section, { token, id: core.ref.id });
 }
 function DetailBody({ core }) {
+  (0, import_react10.useEffect)(() => {
+    loadDetailLinked().catch(() => void 0);
+  }, []);
   const extra = core.recordType?.extraSections && core.frameCtx ? core.recordType.extraSections(core.row, core.frameCtx) : [];
   const Frame = core.recordType?.Frame ?? null;
   const body = (
     // `min-h-full` so a Frame's right-click menu answers anywhere in the body,
     // not only on the rows — a short dossier otherwise leaves a dead band.
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-h-full flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DetailRecordMeta, { core }),
-      core.health ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HealthStrip, { health: core.health }) : null,
-      core.about ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "line-clamp-3 border-b border-border/60 p-4 text-xs leading-snug text-muted-foreground", children: core.about }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-6 p-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldsSection, { core }),
-        core.status === "ready" || core.status === "none" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CustomFieldsPort, { core }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AssociationsSection, { core }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HistorySection, { core }),
-          extra.map((section) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("section", { className: "space-y-2", "data-detail-section": section.id, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SectionHeading, { children: section.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-full flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailRecordMeta, { core }),
+      core.health ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HealthStrip, { health: core.health }) : null,
+      core.about ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "line-clamp-3 border-b border-border/60 p-4 text-xs leading-snug text-muted-foreground", children: core.about }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-6 p-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldsSection, { core }),
+        core.status === "ready" || core.status === "none" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CustomFieldsPort, { core }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AssociationsSection, { core }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HistorySection, { core }),
+          extra.map((section) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "space-y-2", "data-detail-section": section.id, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SectionHeading, { children: section.label }),
             section.content
           ] }, section.id))
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DetailPresentationPane, { core })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailPresentationPane, { core })
       ] })
     ] })
   );
-  if (Frame && core.frameCtx) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Frame, { ctx: core.frameCtx, children: body });
+  if (Frame && core.frameCtx) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Frame, { ctx: core.frameCtx, children: body });
   return body;
 }
 
@@ -1394,9 +1438,9 @@ function detailInstanceKey(ref) {
 var DEFAULT_PANEL_URL_RESERVE_BYTES = Math.floor(DETAIL_URL_BUDGET_BYTES / 2);
 
 // src/react/presentations.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function KeyboardSlot({ core, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       onKeyDownCapture: core.keyboard.rootProps.onKeyDownCapture,
@@ -1407,7 +1451,7 @@ function KeyboardSlot({ core, children }) {
   );
 }
 function KeyboardActionsSlot({ core, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       onKeyDownCapture: core.keyboard.rootProps.onKeyDownCapture,
@@ -1426,7 +1470,7 @@ function KeyboardRoot({ core, children }) {
     if (active instanceof HTMLElement && active !== document.body && root.contains(active)) return;
     root.focus({ preventScroll: true });
   }, [core.ref.id, core.ref.type]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       ref: rootRef,
@@ -1444,19 +1488,19 @@ function DetailWindowPresentation({ data, onClose }) {
   const core = useDetailCore(data, "window", { onClose });
   const menuActions = useDetailMenuActions(core);
   const Shell = requireShell(host.shells, "Window");
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Shell,
     {
       instanceKey: detailInstanceKey(core.ref),
       target: core.ref,
       list: core.list.context,
       title: core.title,
-      titleNode: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailTitle, { core }) }),
-      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailActions, { core }) }),
-      navActions: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailActions, { core, optional: "none" }) }),
+      titleNode: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailTitle, { core }) }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core }) }),
+      navActions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core, optional: "none" }) }),
       menuActions,
       onClose: core.close,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailBody, { core }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailBody, { core }) })
     }
   );
 }
@@ -1465,18 +1509,18 @@ function DetailDockedPresentation({ data, onClose }) {
   const core = useDetailCore(data, "docked", { onClose });
   const menuActions = useDetailMenuActions(core);
   const Shell = requireShell(host.shells, "Docked");
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Shell,
     {
       instanceKey: detailInstanceKey(core.ref),
       target: core.ref,
       title: core.title,
-      titleNode: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailTitle, { core }) }),
-      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailActions, { core }) }),
-      navActions: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailActions, { core, optional: "none" }) }),
+      titleNode: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailTitle, { core }) }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core }) }),
+      navActions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core, optional: "none" }) }),
       menuActions,
       onClose: core.close,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailBody, { core }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailBody, { core }) })
     }
   );
 }
@@ -1485,18 +1529,18 @@ function DetailPagePresentation({ data }) {
   const core = useDetailCore(data, "page", {});
   const menuActions = useDetailMenuActions(core);
   const Shell = requireShell(host.shells, "Page");
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Shell,
     {
       target: core.ref,
       title: core.title,
-      titleNode: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailTitle, { core }) }),
-      actions: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailActions, { core }) }),
-      navActions: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailActions, { core, optional: "none" }) }),
+      titleNode: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailTitle, { core }) }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core }) }),
+      navActions: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardActionsSlot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailActions, { core, optional: "none" }) }),
       menuActions,
       onClose: core.close,
       onBack: core.leave,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DetailBody, { core }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(KeyboardRoot, { core, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DetailBody, { core }) })
     }
   );
 }