@ai-matrx/detail 0.1.176 → 0.1.178

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, {
@@ -466,9 +498,7 @@ function useDetailCore(data, presentation, options) {
     onNext: hasNext ? () => openNeighbour(1) : null,
     // 🚨 NEW-22 — Cmd+Enter is one of the three promised bindings; on a record
     // with no editor open it ANSWERS rather than doing nothing in silence.
-    onSaveUnavailable: () => host.notify.error(
-      `There is nothing to save on this ${typeLabel.toLowerCase()} \u2014 nothing here is being edited. Changes to the record are made where it lives.`
-    )
+    onSaveUnavailable: () => host.notify.error("Nothing to save", { description: `Edit this ${typeLabel.toLowerCase()} where it lives` })
   });
   return {
     ref,
@@ -532,9 +562,7 @@ function useOpenDetail(warmType) {
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
         console.error(`[detail] ${DETAIL_PRESENTATION_KNOB} could not be resolved`, error);
-        host.notify.error(
-          `Your detail presentation setting could not be read (${DETAIL_PRESENTATION_KNOB}: ${message}). Opening as a window until it can be read; an administrator can register or repair the setting.`
-        );
+        host.notify.error("Opened as a window", { description: "Detail setting couldn't be read" });
         presentation = "window";
       }
     }
@@ -654,7 +682,7 @@ function useDetailMenuActions(core) {
       onSelect: () => {
         void host.copyText(core.ref.id).then((ok) => {
           if (ok) host.notify.success("Record id copied");
-          else host.notify.error("Could not copy the record id to the clipboard.");
+          else host.notify.error("Record id not copied");
         });
       }
     }
@@ -667,7 +695,7 @@ function DetailActions({ core, optional = "inline" }) {
   const copyId = async () => {
     const ok = await host.copyText(core.ref.id);
     if (!ok) {
-      host.notify.error("Could not copy the record id to the clipboard.");
+      host.notify.error("Record id not copied");
       return;
     }
     host.notify.success("Record id copied");
@@ -811,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
@@ -861,9 +888,9 @@ function DetailPresentationPane({ core }) {
     });
     if (result.ok) {
       setState({ status: "saved" });
-      host.notify.success(
-        forThisType ? `Every ${core.typeLabel.toLowerCase()} now opens as ${WORD[pending]} for you.` : `Record details now open as ${WORD[pending]} for you.`
-      );
+      host.notify.success("Saved", {
+        description: forThisType ? `Every ${core.typeLabel.toLowerCase()} opens as ${WORD[pending]}` : `Details open as ${WORD[pending]}`
+      });
     } else {
       setState({ status: "refused", reason: result.reason });
     }
@@ -1025,11 +1052,12 @@ function DetailPresentationPane({ core }) {
 // src/react/DetailBody.tsx
 var import_icons7 = require("@ai-matrx/design-system/icons");
 var import_outbound_react = require("@ai-matrx/kit/outbound-react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_error_sentence = require("@ai-matrx/design-system/error-sentence");
+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;
@@ -1041,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
   ] });
@@ -1050,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)(
@@ -1062,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 = {
@@ -1083,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;
@@ -1091,14 +1119,12 @@ function HealthStrip({ health }) {
     try {
       await health.onRefresh();
     } catch (error) {
-      host.notify.error(
-        `Refresh from ${health.source} failed: ${error instanceof Error ? error.message : String(error)}`
-      );
+      host.notify.error("Not refreshed", { description: `${health.source}: ${(0, import_error_sentence.peopleErrorSentence)(error, null, { card: true })}` });
     } finally {
       setRefreshing(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: (0, import_design_system3.cn)(
@@ -1107,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",
@@ -1117,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",
@@ -1131,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",
@@ -1145,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)
               ]
             }
@@ -1169,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",
@@ -1190,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)(
@@ -1219,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,
@@ -1238,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",
@@ -1247,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) {
@@ -1303,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]",
@@ -1337,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}`
@@ -1349,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;
 }
 
@@ -1399,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,
@@ -1412,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,
@@ -1431,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,
@@ -1449,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 }) })
     }
   );
 }
@@ -1470,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 }) })
     }
   );
 }
@@ -1490,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 }) })
     }
   );
 }