@ai-matrx/detail 0.1.0

package/dist/react.js

@@ -0,0 +1,1553 @@
+"use client";
+
+// src/react/host.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var CONTEXT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.detail.host-context");
+var DetailHostContext = globalThis[CONTEXT_SLOT] ??= createContext(null);
+function DetailHostProvider({
+  ports,
+  children
+}) {
+  const parent = useContext(DetailHostContext);
+  const merged = {
+    ...parent ?? {},
+    ...ports,
+    shells: { ...parent?.shells ?? {}, ...ports.shells ?? {} }
+  };
+  return /* @__PURE__ */ jsx(DetailHostContext.Provider, { value: merged, children });
+}
+var REQUIRED_PORTS = [
+  "usePresentationSetting",
+  "resolvePresentation",
+  "warmPresentation",
+  "open",
+  "close",
+  "navigate",
+  "doors",
+  "associations",
+  "history",
+  "notify",
+  "copyText"
+];
+function useDetailHost() {
+  const ports = useContext(DetailHostContext);
+  if (!ports) {
+    throw new Error(
+      "[detail] No DetailHostProvider above this component. Mount the host binding \u2014 a <DetailHostProvider ports={\u2026}> carrying every required port (README \u2192 'Binding the ports') \u2014 around the tree that opens or renders record details."
+    );
+  }
+  const missing = REQUIRED_PORTS.filter((key) => ports[key] === void 0);
+  if (missing.length > 0) {
+    throw new Error(
+      `[detail] DetailHostProvider is missing the port(s): ${missing.join(", ")}. Bind them in the host binding (README \u2192 'Binding the ports').`
+    );
+  }
+  return ports;
+}
+function requireResolveType(host) {
+  if (!host.resolveType) {
+    throw new Error(
+      "[detail] No resolveType port is bound. A presentation's entry must pass `resolveType` (the host's ONE record-type map) beside its shell."
+    );
+  }
+  return host.resolveType;
+}
+function requireShell(shells, which) {
+  const shell = shells[which];
+  if (!shell) {
+    throw new Error(
+      `[detail] No ${which} shell is bound. The ${which} presentation's entry must wrap itself in <DetailHostProvider ports={{ shells: { ${which} } }}> (README \u2192 'The three shells').`
+    );
+  }
+  return shell;
+}
+
+// src/react/useDetailCore.ts
+import { useEffect as useEffect3 } from "react";
+
+// src/react/useDetailHealth.ts
+import { useEffect, useRef, useState } from "react";
+function reconnectFor(value, hostReconnect) {
+  if (value.grant === "blocked") return null;
+  if (value.onReconnect !== void 0) return value.onReconnect;
+  return hostReconnect ? () => hostReconnect(value.source) : null;
+}
+function useDetailHealth({
+  recordType,
+  row,
+  ref,
+  reconnect
+}) {
+  const [health, setHealth] = useState(null);
+  const producer = recordType?.health ?? null;
+  const key = `${ref.type}:${ref.id}`;
+  const producerRef = useRef(producer);
+  producerRef.current = producer;
+  const reconnectRef = useRef(reconnect);
+  reconnectRef.current = reconnect;
+  const producerKey = producer ? `${recordType?.type ?? ""}:${key}` : null;
+  useEffect(() => {
+    const producer2 = producerRef.current;
+    const reconnect2 = reconnectRef.current;
+    if (!producer2 || !row) {
+      setHealth(null);
+      return void 0;
+    }
+    const controller = new AbortController();
+    let settled = false;
+    const onReconnect = reconnect2 ? (source) => reconnect2(ref, source) : null;
+    const publish = (value) => {
+      if (controller.signal.aborted) return;
+      settled = true;
+      setHealth(value ? { ...value, onReconnect: reconnectFor(value, onReconnect) } : null);
+    };
+    try {
+      const answer = producer2(row, { ref, signal: controller.signal });
+      if (answer && typeof answer.then === "function") {
+        void answer.then(publish).catch(
+          (error) => {
+            if (controller.signal.aborted) return;
+            publish(unreadable(error, onReconnect));
+          }
+        );
+      } else {
+        publish(answer ?? null);
+      }
+    } catch (error) {
+      publish(unreadable(error, onReconnect));
+    }
+    return () => {
+      controller.abort();
+      if (!settled) setHealth(null);
+    };
+  }, [producerKey, row, key]);
+  return health;
+}
+function unreadable(error, onReconnect) {
+  const message = error instanceof Error ? error.message : String(error);
+  const source = "its source";
+  return {
+    source: "Source",
+    grant: "unknown",
+    grantDetail: `We could not check the connection this record refreshes through, so we cannot say whether it is still working (${message}). Reconnecting is safe and fixes it if the connection is the problem.`,
+    lastRefreshedAt: null,
+    onReconnect: onReconnect ? () => onReconnect(source) : null
+  };
+}
+
+// src/react/useDetailKeyboard.ts
+import { useCallback, useRef as useRef2 } from "react";
+var PREV_ARROWS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowLeft"]);
+var NEXT_ARROWS = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]);
+var PREV_BRACKET = "[";
+var NEXT_BRACKET = "]";
+function isTypingTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
+var NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "button",
+  "submit",
+  "reset",
+  "range",
+  "color",
+  "file",
+  "image",
+  "hidden"
+]);
+var ESCAPE_OWNING_ANCESTORS = '[data-radix-popper-content-wrapper], [role="menu"], [role="menubar"], [role="listbox"], [role="tree"], [role="grid"]';
+function isOpenTrigger(element) {
+  if (element.getAttribute("aria-expanded") !== "true") return false;
+  const role = element.getAttribute("role");
+  if (role === "combobox") return true;
+  const haspopup = element.getAttribute("aria-haspopup");
+  return haspopup !== null && haspopup !== "false" && haspopup !== "dialog";
+}
+function escapeBelongsToTheControl(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.tagName === "SELECT") return true;
+  if (isOpenTrigger(target)) return true;
+  if (target.closest(ESCAPE_OWNING_ANCESTORS)) return true;
+  if (target.isContentEditable) return true;
+  if (target instanceof HTMLTextAreaElement) return target.value !== target.defaultValue;
+  if (target instanceof HTMLInputElement) {
+    if (NON_TEXT_INPUT_TYPES.has(target.type)) return false;
+    return target.value !== target.defaultValue;
+  }
+  return false;
+}
+function isScrollTarget(element) {
+  if (element.scrollHeight - element.clientHeight <= 1) return false;
+  const overflowY = typeof window === "undefined" ? "" : window.getComputedStyle(element).overflowY;
+  return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+}
+function bodyIsTheScrollTarget(target) {
+  let node = target instanceof HTMLElement ? target : null;
+  while (node) {
+    if (isScrollTarget(node)) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+function useDetailKeyboard(handlers) {
+  const saveRef = useRef2(null);
+  const handlersRef = useRef2(handlers);
+  handlersRef.current = handlers;
+  const onKeyDownCapture = useCallback((event) => {
+    const h = handlersRef.current;
+    const meta = event.metaKey || event.ctrlKey;
+    if (meta && event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (saveRef.current) void saveRef.current();
+      else h.onSaveUnavailable?.();
+      return;
+    }
+    if (event.key === "Escape") {
+      if (!h.onClose || escapeBelongsToTheControl(event.target)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      h.onClose();
+      return;
+    }
+    if (isTypingTarget(event.target)) return;
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+    if (event.key === PREV_BRACKET && h.onPrev) {
+      event.preventDefault();
+      h.onPrev();
+      return;
+    }
+    if (event.key === NEXT_BRACKET && h.onNext) {
+      event.preventDefault();
+      h.onNext();
+      return;
+    }
+    const prev = PREV_ARROWS.has(event.key);
+    const next = NEXT_ARROWS.has(event.key);
+    if (!prev && !next) return;
+    if (bodyIsTheScrollTarget(event.target)) return;
+    if (prev && h.onPrev) {
+      event.preventDefault();
+      h.onPrev();
+      return;
+    }
+    if (next && h.onNext) {
+      event.preventDefault();
+      h.onNext();
+    }
+  }, []);
+  const registerSave = useCallback((save) => {
+    saveRef.current = save;
+    return () => {
+      if (saveRef.current === save) saveRef.current = null;
+    };
+  }, []);
+  const hasSave = useCallback(() => saveRef.current !== null, []);
+  return {
+    rootProps: { tabIndex: -1, onKeyDownCapture },
+    registerSave,
+    hasSave
+  };
+}
+
+// src/react/useDetailRecord.ts
+import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+function useDetailRecord(recordType, id) {
+  const load = recordType?.load ?? null;
+  const [state, setState] = useState2(
+    () => load && id ? { status: "loading" } : { status: "none" }
+  );
+  const requestKey = `${recordType?.type ?? ""}|${id ?? ""}|${load ? "src" : "none"}`;
+  const [seenKey, setSeenKey] = useState2(requestKey);
+  if (seenKey !== requestKey) {
+    setSeenKey(requestKey);
+    setState(load && id ? { status: "loading" } : { status: "none" });
+  }
+  const loadRef = useRef3(load);
+  loadRef.current = load;
+  useEffect2(() => {
+    const load2 = loadRef.current;
+    if (!load2 || !id) return void 0;
+    const controller = new AbortController();
+    void (async () => {
+      try {
+        const result = await load2(id, controller.signal);
+        if (controller.signal.aborted) return;
+        if ("notFound" in result) {
+          setState({ status: "not-found" });
+        } else {
+          setState({ status: "ready", row: result.row });
+        }
+      } catch (error) {
+        if (controller.signal.aborted) return;
+        const message = error instanceof Error ? error.message : String(error);
+        console.error("[detail] record load failed", { type: recordType?.type, id, error });
+        setState({ status: "error", message });
+      }
+    })();
+    return () => controller.abort();
+  }, [requestKey, id]);
+  return state;
+}
+
+// src/react/useDetailCore.ts
+function entityTokenOf(recordType) {
+  return recordType?.entityToken ?? null;
+}
+var ANNOUNCED_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.detail.announced-remedies");
+var announced = globalThis[ANNOUNCED_SLOT] ??= /* @__PURE__ */ new Set();
+function announceOnce(key, message) {
+  if (announced.has(key)) return;
+  announced.add(key);
+  console.warn(message);
+}
+function neighbour(list, delta) {
+  if (!list) return null;
+  const target = list.index + delta;
+  if (target < 0 || target >= list.items.length) return null;
+  return list.items[target] ?? null;
+}
+var DEFAULT_TYPE_MAP_REMEDY = "the host's `resolveType` map (the DetailHostProvider's record-type port)";
+function useDetailCore(data, presentation, options) {
+  const host = useDetailHost();
+  const ref = { type: data.type, id: data.id };
+  const recordType = requireResolveType(host)(data.type);
+  const state = useDetailRecord(recordType, data.id);
+  const row = state.status === "ready" ? state.row : null;
+  const typeLabel = recordType?.label ?? data.type;
+  const seedName = data.seed?.name?.trim() || null;
+  const loadedTitle = state.status === "ready" && recordType ? recordType.title(row, data.seed) : null;
+  const shortId = data.id.length > 8 ? data.id.slice(0, 8) : data.id;
+  const recordLabel = row && recordType?.labelForRow?.(row) || typeLabel;
+  const standInTitle = state.status === "not-found" ? `This ${recordLabel.toLowerCase()} could not be found` : state.status === "error" ? `This ${recordLabel.toLowerCase()} could not be loaded` : state.status === "none" ? `${recordLabel} ${shortId}` : `Loading this ${recordLabel.toLowerCase()}\u2026`;
+  const titleIsStandIn = !loadedTitle && !seedName;
+  const title = loadedTitle ?? seedName ?? standInTitle;
+  const doorsAvailable = entityTokenOf(recordType) !== null && state.status !== "not-found" && state.status !== "error";
+  const canOpenElsewhere = doorsAvailable && entityTokenOf(recordType) !== null && host.doors.hasDoor(entityTokenOf(recordType), data.id);
+  const about = data.seed?.about?.trim() || null;
+  const fields = row && recordType ? recordType.fields(row) : [];
+  const health = useDetailHealth({
+    recordType,
+    row,
+    ref,
+    reconnect: host.reconnectSource ?? null
+  });
+  const entityToken = entityTokenOf(recordType);
+  const frameCtx = recordType ? {
+    ref,
+    recordType,
+    title,
+    about,
+    status: state.status,
+    fields,
+    presentation
+  } : null;
+  const typeMapRemedy = host.remedy?.typeMap ?? DEFAULT_TYPE_MAP_REMEDY;
+  useEffect3(() => {
+    if (!recordType) {
+      announceOnce(
+        `no-type:${data.type}`,
+        `[detail] Nothing is registered for the record type "${data.type}", so its detail shows the type, the id and the doors only. Remedy: add an entry for it in ${typeMapRemedy}.`
+      );
+      return;
+    }
+    if (state.status === "none") {
+      announceOnce(
+        `no-source:${data.type}`,
+        `[detail] The record type "${data.type}" has no \`load\` (no single canonical source), so its detail can show nothing beyond what the opener already knew. Remedy: give the type a load in ${typeMapRemedy}, or leave it sourceless deliberately and say why there.`
+      );
+    }
+  }, [recordType, state.status, data.type, typeMapRemedy]);
+  const warmPresentation = host.warmPresentation;
+  useEffect3(() => {
+    warmPresentation(data.type);
+  }, [warmPresentation, data.type]);
+  const openNeighbour = (delta) => {
+    const target = neighbour(data.list, delta);
+    if (!target || !data.list) return;
+    const list = {
+      ...data.list,
+      items: data.list.items,
+      index: data.list.index + delta
+    };
+    const next = { ...target, seed: null, list };
+    if (presentation === "page") {
+      host.navigate.toPage(target, { list, replacing: ref });
+    } else {
+      host.open({ presentation, data: next });
+    }
+  };
+  const leave = () => {
+    if (host.navigate.canGoBack(ref)) host.navigate.back();
+    else host.navigate.toRecordHome(ref, entityToken);
+  };
+  const close = () => {
+    if (presentation === "page") {
+      leave();
+      return;
+    }
+    if (!options.onClose) {
+      throw new Error(
+        "[detail] The " + presentation + " presentation was mounted without an `onClose`, so nothing can dismiss it. Pass the overlay's close from the presentation's entry."
+      );
+    }
+    options.onClose();
+  };
+  const switchTo = (target) => {
+    if (target === presentation) return;
+    if (target === "page") {
+      host.navigate.toPage(ref, { seed: data.seed, list: data.list });
+      if (presentation !== "page") host.close(presentation);
+      return;
+    }
+    host.open({ presentation: target, data });
+    if (presentation !== "page") {
+      host.close(presentation);
+      return;
+    }
+    leave();
+  };
+  const hasPrev = neighbour(data.list, -1) !== null;
+  const hasNext = neighbour(data.list, 1) !== null;
+  const keyboard = useDetailKeyboard({
+    onClose: close,
+    onPrev: hasPrev ? () => openNeighbour(-1) : null,
+    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.`
+    )
+  });
+  return {
+    ref,
+    data,
+    presentation,
+    recordType,
+    status: state.status,
+    errorMessage: state.status === "error" ? state.message : null,
+    row,
+    title,
+    titleIsStandIn,
+    doorsAvailable,
+    canOpenElsewhere,
+    typeLabel,
+    recordLabel,
+    about,
+    fields,
+    health,
+    entityToken,
+    frameCtx,
+    keyboard,
+    list: {
+      context: data.list,
+      hasPrev,
+      hasNext,
+      prev: () => openNeighbour(-1),
+      next: () => openNeighbour(1)
+    },
+    switchTo,
+    leave,
+    close
+  };
+}
+
+// src/react/useOpenDetail.ts
+import { useEffect as useEffect4 } from "react";
+
+// src/types.ts
+var DETAIL_PRESENTATIONS = ["window", "docked", "page"];
+var DETAIL_PRESENTATION_KNOB = "ui.detail.default_presentation";
+var DETAIL_URL_BUDGET_BYTES = 8e3;
+
+// src/react/useOpenDetail.ts
+function useOpenDetail(warmType) {
+  const host = useDetailHost();
+  const warmPresentation = host.warmPresentation;
+  useEffect4(() => {
+    if (warmType) warmPresentation(warmType);
+  }, [warmPresentation, warmType]);
+  return async (request) => {
+    const data = {
+      type: request.type,
+      id: request.id,
+      seed: request.seed ?? null,
+      list: request.list ?? null
+    };
+    let presentation = request.presentation;
+    if (!presentation) {
+      try {
+        presentation = await host.resolvePresentation(request.type);
+      } 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.`
+        );
+        presentation = "window";
+      }
+    }
+    if (presentation === "page") {
+      host.navigate.toPage({ type: data.type, id: data.id }, { seed: data.seed, list: data.list });
+    } else {
+      host.open({ presentation, data });
+    }
+    return presentation;
+  };
+}
+
+// src/react/DetailHeader.tsx
+import { useEffect as useEffect5, useRef as useRef4, useState as useState3 } from "react";
+
+// src/react/icons.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function glyph(name, children) {
+  function Icon(props) {
+    return /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        "data-detail-icon": name,
+        ...props,
+        children
+      }
+    );
+  }
+  Icon.displayName = `DetailIcon(${name})`;
+  return Icon;
+}
+var AlertCircleIcon = glyph(
+  "alert-circle",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+    /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+  ] })
+);
+var ExternalLinkIcon = glyph(
+  "external-link",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 14 21 3" }),
+    /* @__PURE__ */ jsx2("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
+  ] })
+);
+var HistoryIcon = glyph(
+  "history",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 3v5h5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 7v5l4 2" })
+  ] })
+);
+var Link2Icon = glyph(
+  "link-2",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 17H7A5 5 0 0 1 7 7h2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15 7h2a5 5 0 1 1 0 10h-2" }),
+    /* @__PURE__ */ jsx2("line", { x1: "8", x2: "16", y1: "12", y2: "12" })
+  ] })
+);
+var RefreshCwIcon = glyph(
+  "refresh-cw",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 3v5h-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 16H3v5" })
+  ] })
+);
+var SHIELD = "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z";
+var ShieldAlertIcon = glyph(
+  "shield-alert",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: SHIELD }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 8v4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 16h.01" })
+  ] })
+);
+var ShieldCheckIcon = glyph(
+  "shield-check",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: SHIELD }),
+    /* @__PURE__ */ jsx2("path", { d: "m9 12 2 2 4-4" })
+  ] })
+);
+var AppWindowIcon = glyph(
+  "app-window",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M10 4v4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2 8h20" }),
+    /* @__PURE__ */ jsx2("path", { d: "M6 4v4" })
+  ] })
+);
+var CheckIcon = glyph("check", /* @__PURE__ */ jsx2("path", { d: "M20 6 9 17l-5-5" }));
+var ChevronLeftIcon = glyph("chevron-left", /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" }));
+var ChevronRightIcon = glyph("chevron-right", /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }));
+var CopyIcon = glyph(
+  "copy",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] })
+);
+var ExpandIcon = glyph(
+  "expand",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m15 15 6 6" }),
+    /* @__PURE__ */ jsx2("path", { d: "m15 9 6-6" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 16v5h-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M21 8V3h-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 16v5h5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m3 21 6-6" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 8V3h5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9 9 3 3" })
+  ] })
+);
+var MoreHorizontalIcon = glyph(
+  "more-horizontal",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+);
+var PanelRightIcon = glyph(
+  "panel-right",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M15 3v18" })
+  ] })
+);
+var LoaderIcon = glyph("loader", /* @__PURE__ */ jsx2("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
+var Settings2Icon = glyph(
+  "settings-2",
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M14 17H5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M19 7h-9" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "17", cy: "17", r: "3" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "7", cy: "7", r: "3" })
+  ] })
+);
+
+// src/react/DetailHeader.tsx
+import { cn } from "@ai-matrx/design-system";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ICON_BUTTON = "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 disabled:hover:bg-transparent pointer-coarse:h-10 pointer-coarse:w-10";
+var MENU_ITEM = "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:py-2.5";
+var TYPE_CHIP = "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide ring-1 ring-inset";
+var PRESENTATIONS = [
+  { value: "window", label: "Open as window", Icon: AppWindowIcon },
+  { value: "docked", label: "Open docked to the side", Icon: PanelRightIcon },
+  { value: "page", label: "Open as page", Icon: ExpandIcon }
+];
+function TypeChip({ core, className }) {
+  const accent = core.recordType?.accent ?? null;
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: cn(
+        TYPE_CHIP,
+        accent?.bg ?? "bg-muted",
+        accent?.text ?? "text-muted-foreground",
+        accent?.ring ?? "ring-border",
+        className
+      ),
+      "data-detail-type-chip": true,
+      children: core.recordLabel
+    }
+  );
+}
+function DetailTitle({ core }) {
+  const host = useDetailHost();
+  const Icon = core.recordType?.icon ?? null;
+  const accent = core.recordType?.accent ?? null;
+  const RecordDoors = host.doors.RecordDoors;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+    Icon ? /* @__PURE__ */ jsx3(Icon, { className: cn("h-4 w-4 shrink-0", accent?.text) }) : null,
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        className: cn(
+          "flex-1 truncate text-sm font-medium min-w-[6rem]",
+          core.titleIsStandIn ? "text-muted-foreground" : "text-foreground"
+        ),
+        "data-detail-title": true,
+        "data-detail-title-standin": core.titleIsStandIn ? "true" : void 0,
+        children: core.title
+      }
+    ),
+    /* @__PURE__ */ jsx3(TypeChip, { core, className: "hidden sm:inline-block" }),
+    core.entityToken && core.doorsAvailable ? /* @__PURE__ */ jsx3("span", { className: "hidden shrink-0 sm:inline-flex", children: /* @__PURE__ */ jsx3(RecordDoors, { token: core.entityToken, id: core.ref.id, name: core.title }) }) : null
+  ] });
+}
+function DetailRecordMeta({ core }) {
+  const host = useDetailHost();
+  const RecordDoors = host.doors.RecordDoors;
+  const trimmedFrom = core.list.context?.trimmedFrom;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex flex-wrap items-center gap-2 border-b border-border/60 px-4 py-2",
+      "data-detail-record-meta": true,
+      children: [
+        /* @__PURE__ */ jsx3(TypeChip, { core, className: "sm:hidden" }),
+        core.entityToken && core.doorsAvailable ? /* @__PURE__ */ jsx3("span", { className: "inline-flex sm:hidden", children: /* @__PURE__ */ jsx3(RecordDoors, { token: core.entityToken, id: core.ref.id, name: core.title }) }) : null,
+        /* @__PURE__ */ jsx3("span", { className: "truncate font-mono text-[10px] text-muted-foreground", "data-detail-id": true, children: core.ref.id }),
+        trimmedFrom ? /* @__PURE__ */ jsx3("span", { className: "w-full text-[10px] text-muted-foreground", "data-detail-list-trimmed": true, children: `Stepping through ${core.list.context?.items.length} of the ${trimmedFrom} records in the list this was opened from \u2014 a link can only carry that many, so the rest are not reachable from here. Open the list again to reach them.` }) : null
+      ]
+    }
+  );
+}
+function DetailActions({ core }) {
+  const host = useDetailHost();
+  const [copied, setCopied] = useState3(false);
+  const [menuOpen, setMenuOpen] = useState3(false);
+  const menuRef = useRef4(null);
+  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.");
+      return;
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+  useEffect5(() => {
+    if (!menuOpen) return void 0;
+    const onDown = (event) => {
+      if (!(event.target instanceof Node)) return;
+      if (menuRef.current && !menuRef.current.contains(event.target)) setMenuOpen(false);
+    };
+    const onKey = (event) => {
+      if (event.key === "Escape") setMenuOpen(false);
+    };
+    document.addEventListener("mousedown", onDown, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("mousedown", onDown, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [menuOpen]);
+  const list = core.list;
+  const others = PRESENTATIONS.filter((p) => p.value !== core.presentation);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-0.5", "data-detail-actions": true, children: [
+    list.context ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: ICON_BUTTON,
+          onClick: list.prev,
+          disabled: !list.hasPrev,
+          "aria-label": "Previous record (Up arrow, or left bracket)",
+          title: "Previous record  \u2191 or [",
+          children: /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs2("span", { className: "px-1 text-[11px] tabular-nums text-muted-foreground", children: [
+        list.context.index + 1,
+        "/",
+        list.context.items.length
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: ICON_BUTTON,
+          onClick: list.next,
+          disabled: !list.hasNext,
+          "aria-label": "Next record (Down arrow, or right bracket)",
+          title: "Next record  \u2193 or ]",
+          children: /* @__PURE__ */ jsx3(ChevronRightIcon, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { className: "mx-1 h-4 w-px bg-border", "aria-hidden": true })
+    ] }) : null,
+    /* @__PURE__ */ jsxs2(
+      "span",
+      {
+        className: "flex items-center gap-0.5 @max-[26rem]/window-header:hidden",
+        "data-detail-actions-collapsible": true,
+        children: [
+          others.map(({ value, label, Icon }) => /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: ICON_BUTTON,
+              onClick: () => core.switchTo(value),
+              "aria-label": label,
+              title: label,
+              children: /* @__PURE__ */ jsx3(Icon, { className: "h-4 w-4" })
+            },
+            value
+          )),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: () => void copyId(),
+              className: ICON_BUTTON,
+              "aria-label": "Copy record id",
+              title: "Copy record id",
+              "data-detail-copy-id": true,
+              children: copied ? /* @__PURE__ */ jsx3(CheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ jsx3(CopyIcon, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2("span", { className: "relative hidden @max-[26rem]/window-header:inline-flex", ref: menuRef, children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: cn(ICON_BUTTON, "hidden @max-[26rem]/window-header:inline-flex"),
+          onClick: () => setMenuOpen((wasOpen) => !wasOpen),
+          "aria-label": "More record actions",
+          title: "More record actions",
+          "aria-haspopup": "menu",
+          "aria-expanded": menuOpen,
+          "data-detail-actions-overflow": true,
+          children: /* @__PURE__ */ jsx3(MoreHorizontalIcon, { className: "h-4 w-4" })
+        }
+      ),
+      menuOpen ? /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          role: "menu",
+          "aria-label": "Record actions",
+          className: "absolute right-0 top-full z-50 mt-1 min-w-44 rounded-md border border-border bg-card p-1 shadow-md",
+          "data-detail-actions-menu": true,
+          children: [
+            others.map(({ value, label, Icon }) => /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: MENU_ITEM,
+                onClick: () => {
+                  setMenuOpen(false);
+                  core.switchTo(value);
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                  label
+                ]
+              },
+              value
+            )),
+            /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: MENU_ITEM,
+                onClick: () => {
+                  setMenuOpen(false);
+                  void copyId();
+                },
+                children: [
+                  /* @__PURE__ */ jsx3(CopyIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+                  "Copy record id"
+                ]
+              }
+            )
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+// src/react/DetailBody.tsx
+import { useEffect as useEffect7, useRef as useRef6, useState as useState5 } from "react";
+import { cn as cn3, Skeleton } from "@ai-matrx/design-system";
+import {
+  ASSOCIATION_TARGET_TYPES,
+  isEntityTypeToken
+} from "@ai-matrx/associations";
+import { AssociationCardGrid, PrimaryEntityProvider } from "@ai-matrx/associations/react";
+
+// src/format.ts
+function formatWhen(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString([], { dateStyle: "medium", timeStyle: "short" });
+}
+
+// src/react/DetailPresentationPane.tsx
+import { useEffect as useEffect6, useRef as useRef5, useState as useState4 } from "react";
+import { cn as cn2 } from "@ai-matrx/design-system";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var WORD = {
+  window: "a window",
+  docked: "a docked panel",
+  page: "a full page"
+};
+var LABEL = {
+  window: "Window",
+  docked: "Docked",
+  page: "Page"
+};
+function DetailPresentationPane({ core }) {
+  const host = useDetailHost();
+  const save = host.savePresentation;
+  const setting = host.usePresentationSetting(core.ref.type);
+  const [choice, setChoice] = useState4(null);
+  const [forThisType, setForThisType] = useState4(false);
+  const [open, setOpen] = useState4(false);
+  const [state, setState] = useState4({ status: "idle" });
+  const effective = setting.value ?? core.presentation;
+  const pending = choice ?? effective;
+  const registerSave = core.keyboard.registerSave;
+  const hasTypeException = setting.forType !== void 0;
+  const commit = async () => {
+    if (!save) return;
+    setState({ status: "saving" });
+    const result = await save({
+      presentation: pending,
+      forType: forThisType ? core.ref.type : null
+    });
+    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.`
+      );
+    } else {
+      setState({ status: "refused", reason: result.reason });
+    }
+  };
+  const sentenceAfterRemoval = async () => {
+    const reRead = host.reReadPresentation;
+    if (!reRead) {
+      return `Your own exception for ${core.typeLabel.toLowerCase()} records is gone. How they open now is whatever your organization and your own default say \u2014 open one to see.`;
+    }
+    try {
+      const effective2 = await reRead(core.ref.type);
+      if (effective2.forType) {
+        return `Your own exception is gone, but ${core.typeLabel.toLowerCase()} records still open as ${WORD[effective2.forType]} because your organization sets that for everyone.`;
+      }
+      if (effective2.value) {
+        return `${core.typeLabel} records now open as ${WORD[effective2.value]}, the way you normally open records.`;
+      }
+      return `Your own exception for ${core.typeLabel.toLowerCase()} records is gone. The setting that governs them now could not be read, so open one to see how it opens.`;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return `Your own exception for ${core.typeLabel.toLowerCase()} records is gone, but what governs them now could not be read (${message}), so open one to see how it opens.`;
+    }
+  };
+  const clearForType = async () => {
+    if (!save) return;
+    setState({ status: "saving" });
+    const result = await save({ presentation: pending, forType: core.ref.type, clear: true });
+    if (result.ok) {
+      setState({ status: "saved" });
+      host.notify.success(await sentenceAfterRemoval());
+    } else {
+      setState({ status: "refused", reason: result.reason });
+    }
+  };
+  const commitRef = useRef5(commit);
+  commitRef.current = commit;
+  useEffect6(() => {
+    if (!open || !save) return void 0;
+    return registerSave(() => commitRef.current());
+  }, [open, save, registerSave]);
+  if (!save) return null;
+  if (!open) {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: "flex w-full items-center gap-1.5 rounded-md px-1 py-1 text-left text-[11px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-detail-presentation-pane": "collapsed",
+        children: [
+          /* @__PURE__ */ jsx4(Settings2Icon, { className: "h-3 w-3 shrink-0" }),
+          /* @__PURE__ */ jsx4("span", { children: setting.error ? `Your "open details as" setting could not be read (${setting.error}) \u2014 details are opening as ${WORD[core.presentation]}.` : `Details open as ${WORD[effective]}.` }),
+          /* @__PURE__ */ jsx4("span", { className: "underline underline-offset-2", children: "Change" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    "section",
+    {
+      className: "space-y-2 rounded-md border border-border bg-muted/30 p-3",
+      "data-detail-presentation-pane": "open",
+      children: [
+        /* @__PURE__ */ jsxs3("h3", { className: "flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+          /* @__PURE__ */ jsx4(Settings2Icon, { className: "h-3 w-3" }),
+          "How record details open"
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", role: "group", "aria-label": "Open record details as", children: DETAIL_PRESENTATIONS.map((value) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": pending === value,
+            onClick: () => {
+              setChoice(value);
+              setState({ status: "idle" });
+            },
+            className: cn2(
+              "rounded-md px-2 py-1 text-xs transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:py-2",
+              pending === value ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:text-foreground"
+            ),
+            children: LABEL[value]
+          },
+          value
+        )) }),
+        hasTypeException ? /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            onClick: () => void clearForType(),
+            disabled: state.status === "saving",
+            className: "text-left text-[11px] text-muted-foreground underline underline-offset-2 transition-colors hover:text-foreground disabled:opacity-60",
+            "data-detail-presentation-clear-type": true,
+            children: `Use the default for ${core.typeLabel.toLowerCase()} records`
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              type: "checkbox",
+              checked: forThisType,
+              onChange: (event) => {
+                setForThisType(event.target.checked);
+                setState({ status: "idle" });
+              },
+              className: "h-3.5 w-3.5 accent-[var(--color-primary)]"
+            }
+          ),
+          "Only for ",
+          core.typeLabel.toLowerCase(),
+          " records"
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              onClick: () => void commit(),
+              disabled: state.status === "saving",
+              className: "inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60 pointer-coarse:py-2",
+              children: [
+                state.status === "saving" ? /* @__PURE__ */ jsx4(LoaderIcon, { className: "h-3 w-3 animate-spin" }) : state.status === "saved" ? /* @__PURE__ */ jsx4(CheckIcon, { className: "h-3 w-3" }) : null,
+                "Save"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "text-[11px] text-muted-foreground", children: state.status === "saved" ? "Saved. It applies to the next record you open." : "\u2318/Ctrl + Enter" }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: () => setOpen(false),
+              className: "ml-auto text-[11px] text-muted-foreground underline underline-offset-2 hover:text-foreground",
+              children: "Close"
+            }
+          )
+        ] }),
+        state.status === "refused" ? /* @__PURE__ */ jsx4("p", { className: "text-xs text-destructive", "data-detail-presentation-refusal": true, children: state.reason }) : null,
+        setting.error ? /* @__PURE__ */ jsxs3("p", { className: "text-xs text-muted-foreground", children: [
+          "The saved setting could not be read here (",
+          setting.error,
+          "), so this shows what this detail is actually doing."
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/react/DetailBody.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SLOW_LOAD_NOTICE_MS = 6e3;
+function useSlowLoadNotice(active, key) {
+  const [slow, setSlow] = useState5(false);
+  useEffect7(() => {
+    if (!active) {
+      setSlow(false);
+      return void 0;
+    }
+    setSlow(false);
+    const timer = setTimeout(() => setSlow(true), SLOW_LOAD_NOTICE_MS);
+    return () => clearTimeout(timer);
+  }, [active, key]);
+  return slow;
+}
+function SectionHeading({ icon, children }) {
+  return /* @__PURE__ */ jsxs4("h3", { className: "flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: [
+    icon,
+    children
+  ] });
+}
+function Notice({
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-2 py-8 text-center", children: [
+    /* @__PURE__ */ jsx5(
+      AlertCircleIcon,
+      {
+        className: cn3(
+          "h-6 w-6",
+          tone === "error" && "text-destructive",
+          tone === "warn" && "text-primary",
+          tone === "muted" && "text-muted-foreground/60"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx5("p", { className: "max-w-prose text-sm text-muted-foreground", children })
+  ] });
+}
+var GRANT_WORD = {
+  ok: "OK",
+  expired: "Expired",
+  revoked: "Revoked",
+  missing: "Missing",
+  unknown: "Unknown",
+  blocked: "Blocked"
+};
+function deriveOpenAtSourceLabel(source) {
+  const named = source.trim().replace(/\s+/g, " ");
+  if (!named) return "Open at source";
+  const listsSeveral = /[,&]/.test(named) || named.split(" ").length > 3;
+  const [firstWord = ""] = named.split(" ");
+  const place = listsSeveral ? firstWord.replace(/[,&]+$/, "") : named;
+  return place ? `Open in ${place}` : "Open at source";
+}
+function HealthStrip({ health }) {
+  const ok = health.grant === "ok";
+  const [refreshing, setRefreshing] = useState5(false);
+  const host = useDetailHost();
+  const refresh = async () => {
+    if (!health.onRefresh) return;
+    setRefreshing(true);
+    try {
+      await health.onRefresh();
+    } catch (error) {
+      host.notify.error(
+        `Refresh from ${health.source} failed: ${error instanceof Error ? error.message : String(error)}`
+      );
+    } finally {
+      setRefreshing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn3(
+        "flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border/60 px-4 py-2 text-xs",
+        ok ? "bg-muted/40 text-muted-foreground" : "bg-destructive/5 text-foreground"
+      ),
+      "data-detail-health": true,
+      children: [
+        ok ? /* @__PURE__ */ jsx5(ShieldCheckIcon, { className: "h-3.5 w-3.5 text-primary" }) : /* @__PURE__ */ jsx5(ShieldAlertIcon, { className: "h-3.5 w-3.5 text-destructive" }),
+        /* @__PURE__ */ jsx5("span", { className: "font-medium", children: health.source }),
+        ok ? null : /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: "rounded bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-destructive",
+            "data-detail-health-state": health.grant,
+            children: GRANT_WORD[health.grant]
+          }
+        ),
+        health.lastRefreshedAt ? /* @__PURE__ */ jsxs4("span", { children: [
+          "Refreshed ",
+          formatWhen(health.lastRefreshedAt)
+        ] }) : /* @__PURE__ */ jsx5("span", { children: "Never refreshed" }),
+        health.grantDetail ? /* @__PURE__ */ jsx5("span", { children: health.grantDetail }) : null,
+        /* @__PURE__ */ jsxs4("span", { className: "ml-auto flex items-center gap-1", children: [
+          health.onRefresh ? /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              onClick: () => void refresh(),
+              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__ */ jsx5(RefreshCwIcon, { className: cn3("h-3 w-3", refreshing && "animate-spin") }),
+                "Refresh"
+              ]
+            }
+          ) : null,
+          !ok && health.onReconnect ? /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: health.onReconnect,
+              className: "inline-flex h-6 items-center gap-1 rounded bg-primary px-2 text-primary-foreground hover:bg-primary/90 pointer-coarse:h-10",
+              children: "Reconnect"
+            }
+          ) : null,
+          health.openAtSourceHref ? /* @__PURE__ */ jsxs4(
+            "a",
+            {
+              href: health.openAtSourceHref,
+              target: "_blank",
+              rel: "noreferrer",
+              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__ */ jsx5(ExternalLinkIcon, { className: "h-3 w-3" }),
+                health.openAtSourceLabel ?? deriveOpenAtSourceLabel(health.source)
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function whatTheControlsDo(core) {
+  return core.canOpenElsewhere ? "The controls above still open it where it lives, and copy its id." : "The controls above copy its id, so you can find it wherever it came from.";
+}
+function FieldsSection({ core }) {
+  const host = useDetailHost();
+  const RefCell = host.doors.RefCell;
+  const label = core.recordType?.label.toLowerCase() ?? "record";
+  if (!core.recordType) {
+    return /* @__PURE__ */ jsx5(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__ */ jsx5(LoadingFields, { core, label });
+  }
+  if (core.status === "not-found") {
+    return /* @__PURE__ */ jsx5(Notice, { tone: "warn", children: `This ${label} couldn't be found \u2014 it may have been moved, deleted, or isn't shared with you.` });
+  }
+  if (core.status === "error") {
+    return /* @__PURE__ */ jsx5(Notice, { tone: "error", children: `Couldn't load the details for this ${label}. ${core.errorMessage ?? ""}`.trim() });
+  }
+  if (core.status === "none") {
+    return /* @__PURE__ */ jsx5(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__ */ jsx5("p", { className: "text-sm text-muted-foreground", children: "No additional fields to show." });
+  }
+  return /* @__PURE__ */ jsx5("dl", { className: "grid grid-cols-1 gap-x-4 gap-y-2.5", children: core.fields.map((field) => /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "flex flex-col gap-0.5 border-b border-border/40 pb-2 last:border-b-0",
+      children: [
+        /* @__PURE__ */ jsx5("dt", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: field.label }),
+        /* @__PURE__ */ jsx5(
+          "dd",
+          {
+            className: cn3(
+              "break-words text-sm text-foreground",
+              !field.ref && field.mono && "whitespace-pre-wrap rounded-md bg-muted px-2 py-1 font-mono text-xs"
+            ),
+            children: field.ref ? (
+              // 🚨 THE DOOR SAYS WHAT IT OPENS (chair, 2026-09-18). This rendered
+              // `field.ref.id` alone, so a field whose text was "Acme 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__ */ jsx5(
+                RefCell,
+                {
+                  value: field.ref.id,
+                  label: field.label,
+                  token: field.ref.token,
+                  name: field.ref.name ?? (field.text === field.ref.id ? null : field.text)
+                }
+              )
+            ) : field.text
+          }
+        )
+      ]
+    },
+    field.key
+  )) });
+}
+function LoadingFields({ core, label }) {
+  const slow = useSlowLoadNotice(true, `${core.ref.type}:${core.ref.id}`);
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-3", "aria-busy": "true", "aria-label": `Loading ${label} details`, children: [
+    slow ? /* @__PURE__ */ jsxs4("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",
+      " ",
+      Math.round(SLOW_LOAD_NOTICE_MS / 1e3),
+      " seconds. 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__ */ jsxs4("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx5(Skeleton, { className: "h-2.5 w-20" }),
+      /* @__PURE__ */ jsx5(Skeleton, { className: cn3("h-4", i % 2 ? "w-3/4" : "w-1/2") })
+    ] }, i))
+  ] });
+}
+function isAssociationTarget(token) {
+  return ASSOCIATION_TARGET_TYPES.includes(token);
+}
+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(isEntityTypeToken);
+  if (tokens.length === 0) return null;
+  return /* @__PURE__ */ jsxs4("section", { className: "space-y-2", "data-detail-section": "associations", children: [
+    /* @__PURE__ */ jsx5(SectionHeading, { icon: /* @__PURE__ */ jsx5(Link2Icon, { className: "h-3 w-3" }), children: "Linked" }),
+    /* @__PURE__ */ jsx5(PrimaryEntityProvider, { value: { type: token, id: core.ref.id, label: core.title }, children: /* @__PURE__ */ jsx5(AssociationCardGrid, { tokens }) })
+  ] });
+}
+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] = useState5({ status: "loading" });
+  const lastKey = useRef6(null);
+  const listHistory = host.history.list;
+  const recordId = core.ref.id;
+  useEffect7(() => {
+    if (!wanted || !token) return void 0;
+    const key = `${token}:${recordId}`;
+    if (lastKey.current !== key) {
+      lastKey.current = key;
+      setState({ status: "loading" });
+    }
+    const controller = new AbortController();
+    void listHistory(token, recordId, controller.signal).then((entries) => {
+      if (!controller.signal.aborted) setState({ status: "ready", entries });
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      setState({
+        status: "error",
+        message: error instanceof Error ? error.message : String(error)
+      });
+    });
+    return () => controller.abort();
+  }, [listHistory, wanted, token, recordId]);
+  if (!wanted || !token) return null;
+  const ActorCell = host.doors.RefCell;
+  const actorToken = ACTOR_COLUMNS.map((column) => host.doors.tokenFromColumnName(column)).find(
+    (candidate) => Boolean(candidate)
+  );
+  const ActorName = host.history.ActorName ?? null;
+  return /* @__PURE__ */ jsxs4("section", { className: "space-y-2", "data-detail-section": "history", children: [
+    /* @__PURE__ */ jsx5(SectionHeading, { icon: /* @__PURE__ */ jsx5(HistoryIcon, { className: "h-3 w-3" }), children: "History" }),
+    state.status === "loading" ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", "aria-busy": "true", "aria-label": "Loading history", children: [
+      /* @__PURE__ */ jsx5(Skeleton, { className: "h-3.5 w-2/3" }),
+      /* @__PURE__ */ jsx5(Skeleton, { className: "h-3.5 w-1/2" })
+    ] }) : state.status === "error" ? /* @__PURE__ */ jsx5("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}` }) : state.entries.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "text-xs text-muted-foreground", children: "No recorded changes yet." }) : /* @__PURE__ */ jsx5("ol", { className: "space-y-1", children: state.entries.map((entry) => /* @__PURE__ */ jsxs4(
+      "li",
+      {
+        className: "flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs",
+        children: [
+          /* @__PURE__ */ jsxs4("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground", children: [
+            "v",
+            entry.version
+          ] }),
+          /* @__PURE__ */ jsx5("span", { className: "capitalize text-foreground", children: entry.operation.toLowerCase() }),
+          /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: formatWhen(entry.occurredAt) }),
+          entry.isCurrent ? /* @__PURE__ */ jsx5("span", { className: "text-[10px] uppercase tracking-wide text-primary", children: "current" }) : null,
+          entry.actorId ? ActorName ? /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", "data-detail-history-actor-person": true, children: [
+            "Changed by ",
+            /* @__PURE__ */ jsx5(ActorName, { actorId: entry.actorId, row: core.row })
+          ] }) : actorToken ? /* @__PURE__ */ jsx5("span", { className: "inline-flex items-center", "data-detail-history-actor": true, children: /* @__PURE__ */ jsx5(ActorCell, { value: entry.actorId, label: "Changed by", token: actorToken }) }) : /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", "data-detail-history-actor-raw": true, children: [
+            "Changed by",
+            " ",
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: "font-mono text-[10px]",
+                title: "We could not find the person behind this id \u2014 this host has bound no identity resolver.",
+                children: entry.actorId
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", "data-detail-history-actor-absent": true, children: "No person recorded for this change" })
+        ]
+      },
+      `${entry.version}-${entry.occurredAt}`
+    )) })
+  ] });
+}
+function DetailBody({ core }) {
+  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__ */ jsxs4("div", { className: "flex min-h-full flex-col", children: [
+      /* @__PURE__ */ jsx5(DetailRecordMeta, { core }),
+      core.health ? /* @__PURE__ */ jsx5(HealthStrip, { health: core.health }) : null,
+      core.about ? /* @__PURE__ */ jsx5("p", { className: "line-clamp-3 border-b border-border/60 p-4 text-xs leading-snug text-muted-foreground", children: core.about }) : null,
+      /* @__PURE__ */ jsxs4("div", { className: "space-y-6 p-4", children: [
+        /* @__PURE__ */ jsx5(FieldsSection, { core }),
+        core.status === "ready" || core.status === "none" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+          /* @__PURE__ */ jsx5(AssociationsSection, { core }),
+          /* @__PURE__ */ jsx5(HistorySection, { core }),
+          extra.map((section) => /* @__PURE__ */ jsxs4("section", { className: "space-y-2", "data-detail-section": section.id, children: [
+            /* @__PURE__ */ jsx5(SectionHeading, { children: section.label }),
+            section.content
+          ] }, section.id))
+        ] }) : null,
+        /* @__PURE__ */ jsx5(DetailPresentationPane, { core })
+      ] })
+    ] })
+  );
+  if (Frame && core.frameCtx) return /* @__PURE__ */ jsx5(Frame, { ctx: core.frameCtx, children: body });
+  return body;
+}
+
+// src/react/presentations.tsx
+import { useEffect as useEffect8, useRef as useRef7 } from "react";
+
+// src/listContext.ts
+var PERCENT_ESCAPE_TOO = /[.!~*'()]/g;
+function encodeRefPart(value) {
+  return encodeURIComponent(value).replace(PERCENT_ESCAPE_TOO, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`).replace(/%/g, "~");
+}
+
+// src/presentation.ts
+function detailInstanceKey(ref) {
+  return `${encodeRefPart(ref.type)}.${encodeRefPart(ref.id)}`;
+}
+var DEFAULT_PANEL_URL_RESERVE_BYTES = Math.floor(DETAIL_URL_BUDGET_BYTES / 2);
+
+// src/react/presentations.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function KeyboardSlot({ core, children }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      onKeyDownCapture: core.keyboard.rootProps.onKeyDownCapture,
+      className: "flex min-w-0 flex-1 items-center",
+      "data-detail-keyboard-slot": true,
+      children
+    }
+  );
+}
+function KeyboardActionsSlot({ core, children }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      onKeyDownCapture: core.keyboard.rootProps.onKeyDownCapture,
+      className: "flex shrink-0 items-center",
+      "data-detail-keyboard-slot": "actions",
+      children
+    }
+  );
+}
+function KeyboardRoot({ core, children }) {
+  const rootRef = useRef7(null);
+  useEffect8(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const active = document.activeElement;
+    if (active instanceof HTMLElement && active !== document.body && root.contains(active)) return;
+    root.focus({ preventScroll: true });
+  }, [core.ref.id, core.ref.type]);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref: rootRef,
+      ...core.keyboard.rootProps,
+      className: "flex min-h-full flex-1 flex-col outline-none",
+      "data-detail-root": true,
+      "data-detail-type": core.ref.type,
+      "data-detail-presentation": core.presentation,
+      children
+    }
+  );
+}
+function DetailWindowPresentation({ data, onClose }) {
+  const host = useDetailHost();
+  const core = useDetailCore(data, "window", { onClose });
+  const Shell = requireShell(host.shells, "Window");
+  return /* @__PURE__ */ jsx6(
+    Shell,
+    {
+      instanceKey: detailInstanceKey(core.ref),
+      target: core.ref,
+      list: core.list.context,
+      title: core.title,
+      titleNode: /* @__PURE__ */ jsx6(KeyboardSlot, { core, children: /* @__PURE__ */ jsx6(DetailTitle, { core }) }),
+      actions: /* @__PURE__ */ jsx6(KeyboardActionsSlot, { core, children: /* @__PURE__ */ jsx6(DetailActions, { core }) }),
+      onClose: core.close,
+      children: /* @__PURE__ */ jsx6(KeyboardRoot, { core, children: /* @__PURE__ */ jsx6(DetailBody, { core }) })
+    }
+  );
+}
+function DetailDockedPresentation({ data, onClose }) {
+  const host = useDetailHost();
+  const core = useDetailCore(data, "docked", { onClose });
+  const Shell = requireShell(host.shells, "Docked");
+  return /* @__PURE__ */ jsx6(
+    Shell,
+    {
+      instanceKey: detailInstanceKey(core.ref),
+      target: core.ref,
+      title: core.title,
+      titleNode: /* @__PURE__ */ jsx6(KeyboardSlot, { core, children: /* @__PURE__ */ jsx6(DetailTitle, { core }) }),
+      actions: /* @__PURE__ */ jsx6(KeyboardActionsSlot, { core, children: /* @__PURE__ */ jsx6(DetailActions, { core }) }),
+      onClose: core.close,
+      children: /* @__PURE__ */ jsx6(KeyboardRoot, { core, children: /* @__PURE__ */ jsx6(DetailBody, { core }) })
+    }
+  );
+}
+function DetailPagePresentation({ data }) {
+  const host = useDetailHost();
+  const core = useDetailCore(data, "page", {});
+  const Shell = requireShell(host.shells, "Page");
+  return /* @__PURE__ */ jsx6(
+    Shell,
+    {
+      target: core.ref,
+      title: core.title,
+      titleNode: /* @__PURE__ */ jsx6(KeyboardSlot, { core, children: /* @__PURE__ */ jsx6(DetailTitle, { core }) }),
+      actions: /* @__PURE__ */ jsx6(KeyboardActionsSlot, { core, children: /* @__PURE__ */ jsx6(DetailActions, { core }) }),
+      onClose: core.close,
+      onBack: core.leave,
+      children: /* @__PURE__ */ jsx6(KeyboardRoot, { core, children: /* @__PURE__ */ jsx6(DetailBody, { core }) })
+    }
+  );
+}
+
+// src/react/headerGeometry.ts
+var DETAIL_HEADER_CONTAINER = "@container/window-header";
+var DETAIL_HEADER_COMPACT_BELOW = "@max-[26rem]/window-header";
+var DETAIL_TITLE_MIN_WIDTH_CLASS = "min-w-[6rem]";
+export {
+  DETAIL_HEADER_COMPACT_BELOW,
+  DETAIL_HEADER_CONTAINER,
+  DETAIL_TITLE_MIN_WIDTH_CLASS,
+  DetailActions,
+  DetailBody,
+  DetailDockedPresentation,
+  DetailHostProvider,
+  DetailPagePresentation,
+  DetailPresentationPane,
+  DetailRecordMeta,
+  DetailTitle,
+  DetailWindowPresentation,
+  reconnectFor,
+  requireResolveType,
+  requireShell,
+  useDetailCore,
+  useDetailHealth,
+  useDetailHost,
+  useDetailKeyboard,
+  useDetailRecord,
+  useOpenDetail
+};
+//# sourceMappingURL=react.js.map