@ai-matrx/associations 0.5.2 → 0.6.0

package/dist/react/index.cjs

@@ -38,6 +38,8 @@ __export(react_exports, {
   CommentComposer: () => CommentComposer,
   CommentThread: () => CommentThread,
   DefaultEntityIcon: () => DefaultEntityIcon,
+  DefaultWindowShell: () => DefaultWindowShell,
+  DoorControlsSlot: () => DoorControlsSlot,
   DoorRef: () => DoorRef,
   PrimaryEntityProvider: () => PrimaryEntityProvider,
   UniversalAssociationPicker: () => UniversalAssociationPicker,
@@ -46,8 +48,11 @@ __export(react_exports, {
   buildCommentTree: () => buildCommentTree,
   formatRelativeTime: () => formatRelativeTime,
   getContentRoleMeta: () => getContentRoleMeta,
+  lazyPickerOverride: () => lazyPickerOverride,
+  lazyWindowShell: () => lazyWindowShell,
   useAssociationCandidates: () => useAssociationCandidates,
   useAssociationEntitySelectAdapter: () => useAssociationEntitySelectAdapter,
+  useAssociationPickerBridge: () => useAssociationPickerBridge,
   useAssociations: () => useAssociations,
   useAssociationsStore: () => useAssociationsStore,
   useAssociationsUiPorts: () => useAssociationsUiPorts,
@@ -65,12 +70,185 @@ module.exports = __toCommonJS(react_exports);
 
 // src/react/context.tsx
 var import_react = require("react");
+
+// src/demanded-rpcs.generated.ts
+var DEMANDED_RPC_NAMES = [
+  "assoc_add",
+  "assoc_remove",
+  "assoc_set_targets",
+  "assoc_remove_for_entity",
+  "assoc_for_entity",
+  "assoc_for_targets",
+  "assoc_for_sources",
+  "assoc_members_visible",
+  "conversation_file_add",
+  "conversation_file_remove",
+  "conversation_files",
+  "agent_resource_add",
+  "agent_resource_remove",
+  "cat_list",
+  "cat_create",
+  "cat_update",
+  "cat_reparent",
+  "cat_delete",
+  "ues_set",
+  "ues_list",
+  "ues_get_bulk",
+  "ues_touch",
+  "reference_search_candidates",
+  "cmt_list",
+  "cmt_add",
+  "cmt_edit",
+  "cmt_delete"
+];
+
+// src/core/assertDemandedSchema.ts
+var BAD_UUID = "__not_a_uuid__";
+var SELF_TEST_MISSING_RPC = "assoc_probe_self_test_missing_fn";
+var PROBE_ARGS = {
+  // edges — writes
+  assoc_add: {
+    p_source_type: "note",
+    p_source_id: BAD_UUID,
+    p_target_type: "task",
+    p_target_id: BAD_UUID
+  },
+  assoc_remove: {
+    p_source_type: "note",
+    p_source_id: BAD_UUID,
+    p_target_type: "task",
+    p_target_id: BAD_UUID
+  },
+  assoc_set_targets: {
+    p_source_type: "note",
+    p_source_id: BAD_UUID,
+    p_target_type: "task",
+    p_target_ids: [BAD_UUID]
+  },
+  assoc_remove_for_entity: { p_type: "note", p_id: BAD_UUID },
+  // edges — reads
+  assoc_for_entity: { p_type: "note", p_id: BAD_UUID },
+  assoc_for_targets: { p_target_type: "task", p_target_ids: [BAD_UUID] },
+  assoc_for_sources: { p_source_type: "note", p_source_ids: [BAD_UUID] },
+  assoc_members_visible: { p_target_type: "task", p_target_ids: [BAD_UUID] },
+  // conversation files
+  conversation_file_add: {
+    p_conversation_id: BAD_UUID,
+    p_file_id: BAD_UUID
+  },
+  conversation_file_remove: {
+    p_conversation_id: BAD_UUID,
+    p_file_id: BAD_UUID
+  },
+  conversation_files: { p_conversation_id: BAD_UUID },
+  // agent resources
+  agent_resource_add: {
+    p_agent_id: BAD_UUID,
+    p_source_type: "note",
+    p_source_id: BAD_UUID
+  },
+  agent_resource_remove: {
+    p_agent_id: BAD_UUID,
+    p_source_type: "note",
+    p_source_id: BAD_UUID
+  },
+  // categories
+  cat_list: {},
+  cat_create: { p_dimension: "", p_name: "", p_org_id: BAD_UUID },
+  cat_update: { p_category_id: BAD_UUID, p_name: "__probe__" },
+  cat_reparent: { p_category_id: BAD_UUID },
+  cat_delete: { p_category_id: BAD_UUID },
+  // favorites / recents
+  ues_set: { p_entity_type: "__probe__", p_entity_id: BAD_UUID },
+  ues_list: {},
+  ues_get_bulk: { p_entity_type: "__probe__", p_entity_ids: [BAD_UUID] },
+  ues_touch: { p_entity_type: "__probe__", p_entity_id: BAD_UUID },
+  // candidates
+  reference_search_candidates: { p_token: "__probe__", p_limit: 1 },
+  // comments (W6) — every fn takes a uuid arg, so the unparseable sentinel
+  // guarantees 22P02 before any SECURITY DEFINER body runs (no write occurs).
+  cmt_list: { p_entity_type: "__probe__", p_entity_id: BAD_UUID },
+  cmt_add: {
+    p_entity_type: "__probe__",
+    p_entity_id: BAD_UUID,
+    p_body: "__probe__"
+  },
+  cmt_edit: { p_id: BAD_UUID, p_body: "__probe__" },
+  cmt_delete: { p_id: BAD_UUID }
+};
+function isMissingFunctionError(error) {
+  if (!error || typeof error !== "object") return false;
+  return error.code === "PGRST202";
+}
+async function assertDemandedSchema(dataSource, options = {}) {
+  const { selfTest = false, concurrency = 6, throwOnViolation = true } = options;
+  const names = [...DEMANDED_RPC_NAMES];
+  if (selfTest) names.push(SELF_TEST_MISSING_RPC);
+  const missing = [];
+  const unreachable = [];
+  const answered = [];
+  let cursor = 0;
+  async function worker() {
+    while (cursor < names.length) {
+      const fn = names[cursor];
+      cursor += 1;
+      if (!fn) continue;
+      const args = fn === SELF_TEST_MISSING_RPC ? {} : PROBE_ARGS[fn];
+      try {
+        const { error } = await dataSource.rpc(fn, args);
+        if (error == null) answered.push(fn);
+        else if (isMissingFunctionError(error)) missing.push(fn);
+        else answered.push(fn);
+      } catch (e) {
+        unreachable.push({ fn, error: e });
+      }
+    }
+  }
+  await Promise.all(
+    Array.from({ length: Math.min(concurrency, names.length) }, worker)
+  );
+  if (selfTest) {
+    const selfTestMissing = missing.includes(SELF_TEST_MISSING_RPC);
+    const idx = missing.indexOf(SELF_TEST_MISSING_RPC);
+    if (idx >= 0) missing.splice(idx, 1);
+    const answeredIdx = answered.indexOf(SELF_TEST_MISSING_RPC);
+    if (answeredIdx >= 0) answered.splice(answeredIdx, 1);
+    if (!selfTestMissing) {
+      throw new Error(
+        `assertDemandedSchema self-test FAILED: the fabricated function "${SELF_TEST_MISSING_RPC}" did not come back as missing (PGRST202). This probe cannot currently fail, so its green result proves nothing \u2014 the dataSource is swallowing or faking errors.`
+      );
+    }
+  }
+  if (unreachable.length > 0) {
+    throw new Error(
+      `assertDemandedSchema could not complete: ${unreachable.length} probe call(s) failed to reach the database (${unreachable.map((u) => u.fn).join(", ")}). This is NOT a schema verdict \u2014 fix connectivity and re-run.`
+    );
+  }
+  const ok = missing.length === 0;
+  const report = { ok, missing, unreachable, answered };
+  if (!ok && throwOnViolation) {
+    throw new Error(
+      `DEMANDED SCHEMA VIOLATION: the database this dataSource points at cannot answer ${missing.length} demanded @ai-matrx/associations function(s): ${missing.join(", ")}. This package demands the AI Matrx platform schema (README \xA7 The demanded schema); a database without it is not this package's database.`
+    );
+  }
+  return report;
+}
+
+// src/react/context.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var AssociationsReactContext = (0, import_react.createContext)(
   null
 );
+function isDevelopmentBuild() {
+  try {
+    return typeof process !== "undefined" && true;
+  } catch {
+    return false;
+  }
+}
 function AssociationsProvider({
   store,
+  probeSchema,
   notifier,
   windowShell,
   capture,
@@ -80,6 +258,28 @@ function AssociationsProvider({
   children
 }) {
   const notifierWarned = (0, import_react.useRef)(false);
+  const shouldProbe = probeSchema ?? isDevelopmentBuild();
+  (0, import_react.useEffect)(() => {
+    if (!shouldProbe) return;
+    let stale = false;
+    void (async () => {
+      try {
+        await assertDemandedSchema(store.dataSource);
+      } catch (error) {
+        if (stale) return;
+        store.errorSink({
+          code: "demanded_schema_violation",
+          message: error instanceof Error ? error.message : "assertDemandedSchema failed",
+          context: {
+            remedy: "Run the platform.associations schema (README \xA7 The demanded schema) on the database this dataSource points at."
+          }
+        });
+      }
+    })();
+    return () => {
+      stale = true;
+    };
+  }, [shouldProbe, store]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     AssociationsReactContext.Provider,
     {
@@ -1471,7 +1671,11 @@ function usePrimaryEntity() {
 }
 
 // src/react/components/AssociationWindow.tsx
+var import_react12 = require("react");
+
+// src/react/components/DefaultWindowShell.tsx
 var import_react11 = require("react");
+var import_react_dom = require("react-dom");
 var import_design_system = require("@ai-matrx/design-system");
 
 // src/react/icons.tsx
@@ -1590,9 +1794,246 @@ function DefaultEntityIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 13.5V8" })
   ] });
 }
+function MaximizeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 3h6v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M9 21H3v-6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 3l-7 7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 21l7-7" })
+  ] });
+}
+function RestoreIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 14h6v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 10h-6V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M14 10l7-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M3 21l7-7" })
+  ] });
+}
+function GripResizeIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15 15 21" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 20 20 21" })
+  ] });
+}
 
-// src/react/components/AssociationWindow.tsx
+// src/react/components/DefaultWindowShell.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_WIDTH = 440;
+var DEFAULT_HEIGHT = 580;
+var MIN_WIDTH = 330;
+var MIN_HEIGHT = 380;
+var MOBILE_MAX_WIDTH = 640;
+var EDGE_KEEP = 48;
+function viewport() {
+  if (typeof window === "undefined") {
+    return { width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT };
+  }
+  return { width: window.innerWidth, height: window.innerHeight };
+}
+function clamp(rect) {
+  const { width: vw, height: vh } = viewport();
+  const width = Math.min(Math.max(rect.width, MIN_WIDTH), Math.max(vw, MIN_WIDTH));
+  const height = Math.min(
+    Math.max(rect.height, MIN_HEIGHT),
+    Math.max(vh, MIN_HEIGHT)
+  );
+  return {
+    width,
+    height,
+    x: Math.min(Math.max(rect.x, EDGE_KEEP - width), Math.max(vw - EDGE_KEEP, 0)),
+    y: Math.min(Math.max(rect.y, 0), Math.max(vh - EDGE_KEEP, 0))
+  };
+}
+function centred() {
+  const { width: vw, height: vh } = viewport();
+  const width = Math.min(DEFAULT_WIDTH, Math.max(vw - 32, MIN_WIDTH));
+  const height = Math.min(DEFAULT_HEIGHT, Math.max(vh - 32, MIN_HEIGHT));
+  return clamp({
+    width,
+    height,
+    x: Math.round((vw - width) / 2),
+    y: Math.round((vh - height) / 2)
+  });
+}
+function DefaultWindowShell({
+  id,
+  title,
+  onClose,
+  icon,
+  children,
+  className
+}) {
+  const panelRef = (0, import_react11.useRef)(null);
+  const [mounted, setMounted] = (0, import_react11.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react11.useState)(false);
+  const [rect, setRect] = (0, import_react11.useState)(() => centred());
+  const [maximized, setMaximized] = (0, import_react11.useState)(false);
+  const gesture = (0, import_react11.useRef)(null);
+  (0, import_react11.useLayoutEffect)(() => {
+    setMounted(true);
+    setIsMobile(window.innerWidth < MOBILE_MAX_WIDTH);
+    setRect(centred());
+  }, []);
+  (0, import_react11.useEffect)(() => {
+    if (!mounted) return;
+    const onResize = () => {
+      setIsMobile(window.innerWidth < MOBILE_MAX_WIDTH);
+      setRect((current) => clamp(current));
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [mounted]);
+  (0, import_react11.useEffect)(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+  (0, import_react11.useEffect)(() => {
+    panelRef.current?.focus({ preventScroll: true });
+  }, [mounted]);
+  const beginGesture = (0, import_react11.useCallback)(
+    (mode) => (event) => {
+      if (isMobile || maximized || event.button !== 0) return;
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      gesture.current = {
+        mode,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        origin: rect
+      };
+    },
+    [isMobile, maximized, rect]
+  );
+  const onPointerMove = (0, import_react11.useCallback)((event) => {
+    const active = gesture.current;
+    if (!active || active.pointerId !== event.pointerId) return;
+    const dx = event.clientX - active.startX;
+    const dy = event.clientY - active.startY;
+    setRect(
+      clamp(
+        active.mode === "move" ? { ...active.origin, x: active.origin.x + dx, y: active.origin.y + dy } : {
+          ...active.origin,
+          width: active.origin.width + dx,
+          height: active.origin.height + dy
+        }
+      )
+    );
+  }, []);
+  const endGesture = (0, import_react11.useCallback)((event) => {
+    const active = gesture.current;
+    if (!active || active.pointerId !== event.pointerId) return;
+    gesture.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  }, []);
+  if (!mounted || typeof document === "undefined") return null;
+  const labelId = `assoc-window-title:${id}`;
+  const style = isMobile ? {} : maximized ? { inset: "1rem", width: "auto", height: "auto" } : {
+    left: rect.x,
+    top: rect.y,
+    width: rect.width,
+    height: rect.height
+  };
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-labelledby": labelId,
+        tabIndex: -1,
+        style,
+        className: (0, import_design_system.cn)(
+          // Non-modal by design: no backdrop element exists, so the page
+          // behind keeps every click. `pointer-events-auto` re-asserts our
+          // own subtree in case a Radix surface left <body> inert.
+          "pointer-events-auto fixed z-50 flex flex-col overflow-hidden border border-border bg-card text-card-foreground shadow-xl outline-none",
+          isMobile ? "inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl" : "rounded-xl",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "header",
+            {
+              onPointerDown: beginGesture("move"),
+              onPointerMove,
+              onPointerUp: endGesture,
+              onPointerCancel: endGesture,
+              onDoubleClick: () => {
+                if (!isMobile) setMaximized((v) => !v);
+              },
+              className: (0, import_design_system.cn)(
+                "flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2 select-none",
+                isMobile ? "" : "cursor-move touch-none"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "span",
+                  {
+                    id: labelId,
+                    className: "flex min-w-0 items-center gap-1.5 text-sm font-medium text-foreground",
+                    children: [
+                      icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: title })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex shrink-0 items-center gap-0.5", children: [
+                  isMobile ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onPointerDown: (event) => event.stopPropagation(),
+                      onClick: () => setMaximized((v) => !v),
+                      "aria-label": maximized ? "Restore window" : "Maximize window",
+                      className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                      children: maximized ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RestoreIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MaximizeIcon, { className: "h-3.5 w-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onPointerDown: (event) => event.stopPropagation(),
+                      onClick: onClose,
+                      "aria-label": "Close",
+                      className: "flex h-6 w-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XIcon, { className: "h-3.5 w-3.5" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 overflow-hidden", children }),
+          isMobile || maximized ? null : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Resize window",
+              onPointerDown: beginGesture("resize"),
+              onPointerMove,
+              onPointerUp: endGesture,
+              onPointerCancel: endGesture,
+              className: "absolute bottom-0 right-0 flex h-4 w-4 cursor-nwse-resize touch-none items-center justify-center text-muted-foreground/60 hover:text-foreground",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GripResizeIcon, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+
+// src/react/components/AssociationWindow.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function AssociationWindow({
   open,
   onClose,
@@ -1602,81 +2043,54 @@ function AssociationWindow({
   subtitle,
   children
 }) {
-  const instanceId = (0, import_react11.useId)();
+  const instanceId = (0, import_react12.useId)();
   const { windowShell } = useAssociationsUiPorts();
   if (!open) return null;
-  const body = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full min-h-0 flex-col gap-2 p-3", children: [
-    subtitle ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "shrink-0 text-xs text-muted-foreground", children: subtitle }) : null,
+  const body = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex h-full min-h-0 flex-col gap-2 p-3", children: [
+    subtitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "shrink-0 text-xs text-muted-foreground", children: subtitle }) : null,
     children
   ] });
+  const windowId = `association:${scopeId}:${instanceId}`;
   if (windowShell) {
     const HostWindow = windowShell.Window;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      HostWindow,
-      {
-        id: `association:${scopeId}:${instanceId}`,
-        title,
-        onClose,
-        children: body
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HostWindow, { id: windowId, title, onClose, children: body });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    DefaultWindowShell,
     {
-      role: "dialog",
-      "aria-label": title,
-      className: (0, import_design_system.cn)(
-        "pointer-events-auto fixed left-1/2 top-1/2 z-50 flex max-h-[85dvh] w-[min(440px,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-xl"
-      ),
-      style: { height: "min(580px, 85dvh)" },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-border px-3 py-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5 text-sm font-medium text-foreground", children: [
-            icon,
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: title })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              "aria-label": "Close",
-              className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(XIcon, { className: "h-3.5 w-3.5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1", children: body })
-      ]
+      id: windowId,
+      title,
+      onClose,
+      ...icon !== void 0 ? { icon } : {},
+      children: body
     }
   );
 }
 
 // src/react/components/AssociationPicker.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_design_system2 = require("@ai-matrx/design-system");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function AssociationPicker(props) {
   const store = useAssociationsStore();
   const { pickerOverrides } = useAssociationsUiPorts();
   const info = store.registry.getEntityInfo(props.token);
   const Icon = info.Icon ?? DefaultEntityIcon;
   const Override = pickerOverrides?.[props.token];
-  if (Override) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Override, { ...props });
+  if (Override) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Override, { ...props });
   const title = `Add ${info.labelPlural}`;
   const subtitle = props.containerLabel ? `Attach to ${props.containerLabel}` : "Click an item to attach or detach it";
   if (!props.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     AssociationWindow,
     {
       open: props.open,
       onClose: () => props.onOpenChange(false),
       scopeId: `picker:${props.token}`,
       title,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "size-3.5 text-primary" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "size-3.5 text-primary" }),
       subtitle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         AssociationCandidateBody,
         {
           token: props.token,
@@ -1701,7 +2115,7 @@ function AssociationCandidateBody({
   onClose
 }) {
   void onClose;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     EntityCandidateList,
     {
       token,
@@ -1723,8 +2137,8 @@ function EntityCandidateList({
 }) {
   const store = useAssociationsStore();
   const notifier = useNotifier();
-  const [search, setSearch] = (0, import_react12.useState)("");
-  const [busyId, setBusyId] = (0, import_react12.useState)(null);
+  const [search, setSearch] = (0, import_react13.useState)("");
+  const [busyId, setBusyId] = (0, import_react13.useState)(null);
   const info = store.registry.getEntityInfo(token);
   const Icon = info.Icon ?? DefaultEntityIcon;
   const { candidates, loading, error, reload } = useAssociationCandidates({
@@ -1748,10 +2162,10 @@ function EntityCandidateList({
       setBusyId(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SearchIcon, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_design_system2.Input,
         {
           value: search,
@@ -1762,13 +2176,13 @@ function EntityCandidateList({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto -mx-1 px-1", children: loading && candidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ListMessage, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto -mx-1 px-1", children: loading && candidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ListMessage, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
       "Loading\u2026"
-    ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] text-destructive", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-medium", children: "Couldn\u2019t load items" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "opacity-80", children: error }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ] }) : error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] text-destructive", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-medium", children: "Couldn\u2019t load items" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "opacity-80", children: error }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "button",
         {
           type: "button",
@@ -1777,10 +2191,10 @@ function EntityCandidateList({
           children: "Retry"
         }
       )
-    ] }) : candidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListMessage, { children: canCreate ? `Nothing to attach yet \u2014 create a new ${info.label.toLowerCase()} below.` : "Nothing to attach." }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "space-y-0.5", children: candidates.map((c) => {
+    ] }) : candidates.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListMessage, { children: canCreate ? `Nothing to attach yet \u2014 create a new ${info.label.toLowerCase()} below.` : "Nothing to attach." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "space-y-0.5", children: candidates.map((c) => {
       const attached = attachedIds.has(c.id);
       const busy = busyId === c.id;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
@@ -1792,23 +2206,23 @@ function EntityCandidateList({
             attached && "bg-accent/40"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "flex-1 min-w-0 truncate text-foreground", children: c.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-1 min-w-0 truncate text-foreground", children: c.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "span",
               {
                 className: (0, import_design_system2.cn)(
                   "flex h-5 w-5 items-center justify-center rounded-full shrink-0",
                   attached ? "bg-primary text-primary-foreground" : "border border-border text-muted-foreground group-hover:border-primary/60"
                 ),
-                children: busy ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }) : attached ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, { className: "h-3 w-3" })
+                children: busy ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }) : attached ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, { className: "h-3 w-3" })
               }
             )
           ]
         }
       ) }, c.id);
     }) }) }),
-    canCreate && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    canCreate && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       CreateAndAttachFooter,
       {
         token,
@@ -1830,9 +2244,9 @@ function CreateAndAttachFooter({
   const store = useAssociationsStore();
   const notifier = useNotifier();
   const info = store.registry.getEntityInfo(token);
-  const [editing, setEditing] = (0, import_react12.useState)(false);
-  const [name, setName] = (0, import_react12.useState)("");
-  const [busy, setBusy] = (0, import_react12.useState)(false);
+  const [editing, setEditing] = (0, import_react13.useState)(false);
+  const [name, setName] = (0, import_react13.useState)("");
+  const [busy, setBusy] = (0, import_react13.useState)(false);
   const submit = async () => {
     const title = name.trim();
     if (!title || busy) return;
@@ -1867,7 +2281,7 @@ function CreateAndAttachFooter({
     }
   };
   if (!editing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "button",
       {
         type: "button",
@@ -1877,10 +2291,10 @@ function CreateAndAttachFooter({
         },
         className: "mt-2 flex min-h-11 w-full shrink-0 items-center justify-center gap-1.5 rounded-md border border-dashed border-border px-3 py-2 text-sm text-muted-foreground transition-colors hover:border-primary/60 hover:text-foreground md:min-h-0",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PlusIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, { className: "h-4 w-4" }),
           "New ",
           info.label,
-          seed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "max-w-40 truncate text-muted-foreground/70", children: [
+          seed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "max-w-40 truncate text-muted-foreground/70", children: [
             "\u201C",
             seed,
             "\u201D"
@@ -1889,8 +2303,8 @@ function CreateAndAttachFooter({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "mt-2 flex shrink-0 items-center gap-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-2 flex shrink-0 items-center gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_design_system2.Input,
       {
         autoFocus: true,
@@ -1909,17 +2323,17 @@ function CreateAndAttachFooter({
         style: { fontSize: 16 }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
         disabled: busy || !name.trim(),
         onClick: () => void submit(),
         className: "flex h-11 items-center gap-1 rounded-md bg-primary px-2.5 text-sm font-medium text-primary-foreground transition-opacity disabled:opacity-50 md:h-8",
-        children: busy ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : "Create"
+        children: busy ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : "Create"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -1930,38 +2344,122 @@ function CreateAndAttachFooter({
         },
         title: "Cancel",
         className: "flex h-11 w-11 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 md:h-8 md:w-8",
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(XIcon, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(XIcon, { className: "h-4 w-4" })
       }
     )
   ] });
 }
 function ListMessage({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center justify-center gap-2 py-8 text-[13px] text-muted-foreground", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center justify-center gap-2 py-8 text-[13px] text-muted-foreground", children });
 }
 
 // src/react/components/UniversalAssociationPicker.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
+var import_design_system4 = require("@ai-matrx/design-system");
+
+// src/react/components/entityDoors.tsx
 var import_design_system3 = require("@ai-matrx/design-system");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function DoorRef(props) {
+  const { onOpen, ...refProps } = props;
+  const { entityDoors } = useAssociationsUiPorts();
+  const store = useAssociationsStore();
+  const HostRef = entityDoors?.EntityRef;
+  if (HostRef) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HostRef, { ...refProps });
+  const name = refProps.name ?? null;
+  const href = store.registry.tryGetEntityInfo(refProps.token)?.hrefFor?.(refProps.id) ?? null;
+  if (onOpen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onOpen,
+        className: (0, import_design_system3.cn)(
+          "min-w-0 truncate text-left underline-offset-2 hover:underline",
+          refProps.className
+        ),
+        children: name
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "a",
+      {
+        href,
+        target: refProps.openInNewTab === false ? void 0 : "_blank",
+        rel: "noopener noreferrer",
+        className: (0, import_design_system3.cn)(
+          "inline-flex min-w-0 items-center gap-1 truncate underline-offset-2 hover:underline",
+          refProps.className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 truncate", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExternalLinkIcon, { className: "h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-60" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_design_system3.cn)("min-w-0 truncate", refProps.className), children: name });
+}
+function UnresolvedRef({ token, id }) {
+  const { entityDoors } = useAssociationsUiPorts();
+  const HostUnresolved = entityDoors?.UnresolvedRef;
+  if (HostUnresolved) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HostUnresolved, { token, id });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "span",
+    {
+      className: "inline-flex items-center rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[11px] text-muted-foreground",
+      title: `This ${token} could not be read \u2014 it may be deleted or not shared with you.`,
+      children: "Unavailable"
+    }
+  );
+}
+function DoorControlsSlot(props) {
+  const { entityDoors } = useAssociationsUiPorts();
+  const store = useAssociationsStore();
+  const HostControls = entityDoors?.DoorControls;
+  if (HostControls) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HostControls, { ...props });
+  const href = store.registry.tryGetEntityInfo(props.token)?.hrefFor?.(props.id) ?? null;
+  if (!href) return null;
+  const label = props.name ? `Open ${props.name}` : `Open this ${props.token}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": label,
+      title: label,
+      className: (0, import_design_system3.cn)(
+        "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        props.className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExternalLinkIcon, { className: "h-3 w-3" })
+    }
+  );
+}
+
+// src/react/components/UniversalAssociationPicker.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function attachedKey(token, id) {
   return `${token}:${id}`;
 }
 function UniversalAssociationPicker(props) {
   const { attachedKeys, onAttach, onDetach, ownerId, orgId, className } = props;
   const store = useAssociationsStore();
-  const { entityDoors, pickerOverrides } = useAssociationsUiPorts();
+  const { pickerOverrides } = useAssociationsUiPorts();
   const notifier = useNotifier();
   const tokens = props.tokens ?? store.registry.curatedTokens();
-  const [query, setQuery] = (0, import_react13.useState)("");
-  const [browseToken, setBrowseToken] = (0, import_react13.useState)(null);
-  const [busyKey, setBusyKey] = (0, import_react13.useState)(null);
+  const [query, setQuery] = (0, import_react14.useState)("");
+  const [browseToken, setBrowseToken] = (0, import_react14.useState)(null);
+  const [busyKey, setBusyKey] = (0, import_react14.useState)(null);
   const { results, loading, isRecents } = useUniversalEntitySearch({
     query,
     tokens,
     ownerId: ownerId ?? null,
     enabled: browseToken === null
   });
-  const DoorControls = entityDoors?.DoorControls;
   const toggle = async (c) => {
     const key = attachedKey(c.token, c.id);
     if (busyKey) return;
@@ -1985,11 +2483,11 @@ function UniversalAssociationPicker(props) {
     groups.set(r.token, list);
   }
   const BrowseOverride = browseToken ? pickerOverrides?.[browseToken] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_design_system3.cn)("flex min-h-0 flex-1 flex-col gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SearchIcon, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        import_design_system3.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_design_system4.cn)("flex min-h-0 flex-1 flex-col gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SearchIcon, { className: "absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_design_system4.Input,
         {
           value: query,
           onChange: (e) => {
@@ -2001,23 +2499,23 @@ function UniversalAssociationPicker(props) {
           style: { fontSize: 16 }
         }
       ),
-      loading && browseToken === null && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerIcon, { className: "absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
+      loading && browseToken === null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpinnerIcon, { className: "absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap gap-1", children: tokens.map((t) => {
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-wrap gap-1", children: tokens.map((t) => {
       const info = store.registry.getEntityInfo(t);
       const ChipIcon = info.Icon ?? DefaultEntityIcon;
       const active = browseToken === t;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "button",
         {
           type: "button",
           onClick: () => setBrowseToken(active ? null : t),
-          className: (0, import_design_system3.cn)(
+          className: (0, import_design_system4.cn)(
             "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[11px] transition-colors",
             active ? "border-primary/50 bg-primary/10 text-foreground" : "border-border text-muted-foreground hover:text-foreground hover:bg-accent"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChipIcon, { className: "h-3 w-3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChipIcon, { className: "h-3 w-3" }),
             info.labelPlural
           ]
         },
@@ -2027,7 +2525,7 @@ function UniversalAssociationPicker(props) {
     browseToken && BrowseOverride ? (
       // The token's canonical host picker (e.g. the stored-files browser)
       // owns per-token browsing when registered — never a plain list twin.
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         BrowseOverride,
         {
           open: true,
@@ -2043,7 +2541,7 @@ function UniversalAssociationPicker(props) {
           onDetach: (id) => onDetach(browseToken, id)
         }
       )
-    ) : browseToken ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ) : browseToken ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex min-h-0 flex-1 flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       AssociationCandidateBody,
       {
         token: browseToken,
@@ -2056,63 +2554,63 @@ function UniversalAssociationPicker(props) {
         onAttach: (id, title) => onAttach(browseToken, id, title),
         onDetach: (id) => onDetach(browseToken, id)
       }
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "-mx-1 min-h-0 flex-1 overflow-y-auto px-1", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "py-6 text-center text-[12px] text-muted-foreground", children: loading ? "Searching\u2026" : query.trim() ? "No matches \u2014 narrow with a type chip to browse." : "No recent items. Type to search, or pick a type to browse." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-2", children: [
-      isRecents && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "px-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60", children: "Recent" }),
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "-mx-1 min-h-0 flex-1 overflow-y-auto px-1", children: results.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "py-6 text-center text-[12px] text-muted-foreground", children: loading ? "Searching\u2026" : query.trim() ? "No matches \u2014 narrow with a type chip to browse." : "No recent items. Type to search, or pick a type to browse." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-2", children: [
+      isRecents && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "px-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60", children: "Recent" }),
       [...groups.entries()].map(([token, items]) => {
         const info = store.registry.getEntityInfo(token);
         const GroupIcon = info.Icon ?? DefaultEntityIcon;
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "flex items-center gap-1 px-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(GroupIcon, { className: "h-3 w-3" }),
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "flex items-center gap-1 px-1 text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GroupIcon, { className: "h-3 w-3" }),
             info.labelPlural
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "space-y-0.5", children: items.map((c) => {
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "space-y-0.5", children: items.map((c) => {
             const key = attachedKey(c.token, c.id);
             const attached = attachedKeys.has(key);
             const busy = busyKey === key;
-            return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "li",
               {
-                className: (0, import_design_system3.cn)(
+                className: (0, import_design_system4.cn)(
                   "group/entity-ref group flex items-center gap-1 rounded-md pr-1.5 transition-colors",
                   "hover:bg-accent",
                   attached && "bg-accent/40"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                     "button",
                     {
                       type: "button",
                       disabled: busy,
                       onClick: () => toggle(c),
                       title: attached ? `Detach "${c.title}"` : `Attach "${c.title}"`,
-                      className: (0, import_design_system3.cn)(
+                      className: (0, import_design_system4.cn)(
                         "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm",
                         "disabled:opacity-50"
                       ),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 flex-1 truncate text-foreground", children: c.title }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "min-w-0 flex-1 truncate text-foreground", children: c.title }),
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "span",
                           {
-                            className: (0, import_design_system3.cn)(
+                            className: (0, import_design_system4.cn)(
                               "flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
                               attached ? "bg-primary text-primary-foreground" : "border border-border text-muted-foreground group-hover:border-primary/60"
                             ),
-                            children: busy ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }) : attached ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlusIcon, { className: "h-3 w-3" })
+                            children: busy ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }) : attached ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlusIcon, { className: "h-3 w-3" })
                           }
                         )
                       ]
                     }
                   ),
-                  DoorControls ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                    DoorControls,
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    DoorControlsSlot,
                     {
                       token: c.token,
                       id: c.id,
                       name: c.title
                     }
-                  ) : null
+                  )
                 ]
               },
               key
@@ -2125,79 +2623,18 @@ function UniversalAssociationPicker(props) {
 }
 
 // src/react/components/AttachedItemsSheet.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_design_system5 = require("@ai-matrx/design-system");
-
-// src/react/components/entityDoors.tsx
-var import_design_system4 = require("@ai-matrx/design-system");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function DoorRef(props) {
-  const { onOpen, ...refProps } = props;
-  const { entityDoors } = useAssociationsUiPorts();
-  const store = useAssociationsStore();
-  const HostRef = entityDoors?.EntityRef;
-  if (HostRef) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HostRef, { ...refProps });
-  const name = refProps.name ?? null;
-  const href = store.registry.tryGetEntityInfo(refProps.token)?.hrefFor?.(refProps.id) ?? null;
-  if (onOpen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: onOpen,
-        className: (0, import_design_system4.cn)(
-          "min-w-0 truncate text-left underline-offset-2 hover:underline",
-          refProps.className
-        ),
-        children: name
-      }
-    );
-  }
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "a",
-      {
-        href,
-        target: refProps.openInNewTab === false ? void 0 : "_blank",
-        rel: "noopener noreferrer",
-        className: (0, import_design_system4.cn)(
-          "inline-flex min-w-0 items-center gap-1 truncate underline-offset-2 hover:underline",
-          refProps.className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 truncate", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExternalLinkIcon, { className: "h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-60" })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_design_system4.cn)("min-w-0 truncate", refProps.className), children: name });
-}
-function UnresolvedRef({ token, id }) {
-  const { entityDoors } = useAssociationsUiPorts();
-  const HostUnresolved = entityDoors?.UnresolvedRef;
-  if (HostUnresolved) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HostUnresolved, { token, id });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "span",
-    {
-      className: "inline-flex items-center rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 text-[11px] text-muted-foreground",
-      title: `This ${token} could not be read \u2014 it may be deleted or not shared with you.`,
-      children: "Unavailable"
-    }
-  );
-}
-
-// src/react/components/AttachedItemsSheet.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function AttachedItemsSheet(props) {
   const store = useAssociationsStore();
   const info = store.registry.getEntityInfo(props.token);
   const Icon = info.Icon ?? DefaultEntityIcon;
   const title = info.labelPlural;
   const containerName = props.container?.label ?? props.containerLabel;
-  const subtitle = props.container ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-center gap-1", children: [
+  const subtitle = props.container ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex min-w-0 max-w-full items-center gap-1", children: [
     "Attached to",
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       DoorRef,
       {
         token: props.container.type,
@@ -2208,16 +2645,16 @@ function AttachedItemsSheet(props) {
     )
   ] }) : props.containerLabel ? `Attached to ${props.containerLabel}` : "Attached items";
   if (!props.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     AssociationWindow,
     {
       open: props.open,
       onClose: () => props.onOpenChange(false),
       scopeId: `attached:${props.token}`,
       title,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "size-3.5 text-primary" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "size-3.5 text-primary" }),
       subtitle,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         AttachedItemsBody,
         {
           token: props.token,
@@ -2241,11 +2678,11 @@ function AttachedItemsBody({
   const notifier = useNotifier();
   const info = store.registry.getEntityInfo(token);
   const Icon = info.Icon ?? DefaultEntityIcon;
-  const [titles, setTitles] = (0, import_react14.useState)(null);
-  const [titleError, setTitleError] = (0, import_react14.useState)(null);
-  const [busyId, setBusyId] = (0, import_react14.useState)(null);
+  const [titles, setTitles] = (0, import_react15.useState)(null);
+  const [titleError, setTitleError] = (0, import_react15.useState)(null);
+  const [busyId, setBusyId] = (0, import_react15.useState)(null);
   const idKey = links.map((l) => l.resourceId).sort().join(",");
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!enabled) return;
     const ids = idKey ? idKey.split(",") : [];
     if (ids.length === 0) {
@@ -2289,30 +2726,30 @@ function AttachedItemsBody({
       setBusyId(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    titleError ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mb-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] text-destructive", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    titleError ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "mb-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-[12px] text-destructive", children: [
       "Showing names recorded at attach time \u2014 they may be out of date.",
       " ",
       titleError
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto -mx-1 px-1", children: links.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex items-center justify-center py-8 text-[13px] text-muted-foreground", children: "Nothing attached yet." }) : titles === null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-center gap-2 py-8 text-[13px] text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto -mx-1 px-1", children: links.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex items-center justify-center py-8 text-[13px] text-muted-foreground", children: "Nothing attached yet." }) : titles === null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-center gap-2 py-8 text-[13px] text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
       "Loading\u2026"
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "space-y-0.5", children: links.map((link) => {
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "space-y-0.5", children: links.map((link) => {
       const resolved = titles.get(link.resourceId);
       const missing = !titles.has(link.resourceId);
       const name = resolved ?? link.label ?? (missing ? null : "Untitled");
       const busy = busyId === link.resourceId;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "li",
         {
           className: "group/entity-ref group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors hover:bg-accent",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex-1 min-w-0 truncate", children: name === null ? (
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1 min-w-0 truncate", children: name === null ? (
               // The X beside the row stays the one-click detach.
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(UnresolvedRef, { token, id: link.resourceId })
-            ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UnresolvedRef, { token, id: link.resourceId })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               DoorRef,
               {
                 token,
@@ -2322,7 +2759,7 @@ function AttachedItemsBody({
                 className: "text-foreground"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 type: "button",
@@ -2333,7 +2770,7 @@ function AttachedItemsBody({
                   "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors",
                   "hover:bg-destructive/10 hover:text-destructive disabled:opacity-50"
                 ),
-                children: busy ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(XIcon, { className: "h-3.5 w-3.5" })
+                children: busy ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(XIcon, { className: "h-3.5 w-3.5" })
               }
             )
           ]
@@ -2341,14 +2778,14 @@ function AttachedItemsBody({
         link.edgeId
       );
     }) }) }),
-    onAdd ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    onAdd ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
         type: "button",
         onClick: onAdd,
         className: "mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm text-muted-foreground transition-colors hover:border-primary/60 hover:text-foreground",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlusIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon, { className: "h-4 w-4" }),
           "Attach ",
           info.labelPlural.toLowerCase()
         ]
@@ -2358,7 +2795,7 @@ function AttachedItemsBody({
 }
 
 // src/react/components/AssociationCard.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_design_system6 = require("@ai-matrx/design-system");
 
 // src/react/contentRoles.ts
@@ -2409,7 +2846,7 @@ function getContentRoleMeta(role) {
 }
 
 // src/react/components/AssociationCard.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function AssociationCard({
   token,
   container: containerProp,
@@ -2418,11 +2855,11 @@ function AssociationCard({
   const store = useAssociationsStore();
   const fromCtx = usePrimaryEntity();
   const container = containerProp ?? fromCtx;
-  const [open, setOpen] = (0, import_react15.useState)(false);
+  const [open, setOpen] = (0, import_react16.useState)(false);
   const info = store.registry.getEntityInfo(token);
   const role = getContentRoleMeta(info.contentRole);
   const Icon = info.Icon ?? DefaultEntityIcon;
-  const [listOpen, setListOpen] = (0, import_react15.useState)(false);
+  const [listOpen, setListOpen] = (0, import_react16.useState)(false);
   const { status, countFor, attachedIdsFor, linksFor, attach, detach } = useContainerLinks({
     containerType: container?.type ?? "organization",
     containerId: container?.id ?? null,
@@ -2440,8 +2877,8 @@ function AssociationCard({
   const loading = status === "loading" || status === "idle";
   const canAttach = info.canListCandidates;
   const canDrillIn = count > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
         className: (0, import_design_system6.cn)(
@@ -2449,7 +2886,7 @@ function AssociationCard({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "span",
             {
               className: (0, import_design_system6.cn)(
@@ -2458,7 +2895,7 @@ function AssociationCard({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             "button",
             {
               type: "button",
@@ -2470,7 +2907,7 @@ function AssociationCard({
                 canDrillIn ? "cursor-pointer" : "cursor-default"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "span",
                   {
                     className: (0, import_design_system6.cn)(
@@ -2478,20 +2915,20 @@ function AssociationCard({
                       role.accentBg,
                       role.accentText
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "h-4 w-4" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: "h-4 w-4" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "block truncate text-sm font-medium text-foreground", children: info.labelPlural }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "block text-[11px] text-muted-foreground tabular-nums", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block truncate text-sm font-medium text-foreground", children: info.labelPlural }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block text-[11px] text-muted-foreground tabular-nums", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }),
                     "Loading\u2026"
                   ] }) : `${count} attached` })
                 ] })
               ]
             }
           ),
-          canAttach && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          canAttach && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "button",
             {
               type: "button",
@@ -2499,13 +2936,13 @@ function AssociationCard({
               "aria-label": `Attach ${info.labelPlural.toLowerCase()}`,
               title: `Attach ${info.labelPlural.toLowerCase()}`,
               className: "mr-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:border-primary/60 hover:text-foreground lg:mr-3 lg:h-7 lg:w-7",
-              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PlusIcon, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PlusIcon, { className: "h-4 w-4" })
             }
           )
         ]
       }
     ),
-    listOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    listOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       AttachedItemsSheet,
       {
         open: listOpen,
@@ -2523,7 +2960,7 @@ function AssociationCard({
         onDetach: (resourceId) => detach(token, resourceId)
       }
     ),
-    canAttach && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    canAttach && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       AssociationPicker,
       {
         open,
@@ -2541,7 +2978,7 @@ function AssociationCard({
 
 // src/react/components/AssociationCardGrid.tsx
 var import_design_system7 = require("@ai-matrx/design-system");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function AssociationCardGrid({
   tokens,
   excludeTokens,
@@ -2552,33 +2989,33 @@ function AssociationCardGrid({
   const list = (tokens ?? store.registry.curatedTokens()).filter(
     (token) => !excluded.has(token)
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: (0, import_design_system7.cn)("space-y-5", className), children: CONTENT_ROLES.map((role) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: (0, import_design_system7.cn)("space-y-5", className), children: CONTENT_ROLES.map((role) => {
     const inRole = list.filter(
       (token) => store.registry.getEntityInfo(token).contentRole === role.id
     );
     if (inRole.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-2.5 flex items-baseline gap-3 pl-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mb-2.5 flex items-baseline gap-3 pl-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "span",
             {
               className: (0, import_design_system7.cn)("h-2.5 w-2.5 rounded-full", role.accentBar)
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: role.title })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: role.title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: role.tagline })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "hidden text-xs text-muted-foreground sm:block", children: role.tagline })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AssociationCard, { token }, token)) })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: inRole.map((token) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AssociationCard, { token }, token)) })
     ] }, role.id);
   }) });
 }
 
 // src/react/components/AssociationList.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_design_system8 = require("@ai-matrx/design-system");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function useContainerLinksAdapter(container, tokens) {
   const store = useAssociationsStore();
   const links = useContainerLinks({
@@ -2616,9 +3053,9 @@ function AssociationList(props) {
   const adapter = props.adapter ?? defaultAdapter;
   const variant = props.variant ?? "full";
   const tokenFilter = props.tokens ?? null;
-  const [pickerToken, setPickerToken] = (0, import_react16.useState)(null);
-  const [showUniversal, setShowUniversal] = (0, import_react16.useState)(false);
-  const [removingKeys, setRemovingKeys] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
+  const [pickerToken, setPickerToken] = (0, import_react17.useState)(null);
+  const [showUniversal, setShowUniversal] = (0, import_react17.useState)(false);
+  const [removingKeys, setRemovingKeys] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
   const rows = tokenFilter ? adapter.rows.filter((r) => tokenFilter.includes(r.token)) : adapter.rows;
   const visibleRows = rows.filter((r) => !removingKeys.has(r.key));
   const { titleFor } = useEntityTitles(
@@ -2656,15 +3093,15 @@ function AssociationList(props) {
   const grouped = groupRows(store, visibleRows);
   const isLoading = adapter.status === "loading" || adapter.status === "idle";
   const attachableTokens = tokenFilter ?? store.registry.curatedTokens();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: (0, import_design_system8.cn)("flex flex-col gap-2 text-foreground", props.className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("h3", { className: "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Link2Icon, { className: "h-3.5 w-3.5" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: (0, import_design_system8.cn)("flex flex-col gap-2 text-foreground", props.className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-2 px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("h3", { className: "flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Link2Icon, { className: "h-3.5 w-3.5" }),
         "Resources",
-        visibleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "rounded bg-muted px-1 text-[10px] font-medium text-muted-foreground", children: visibleRows.length })
+        visibleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "rounded bg-muted px-1 text-[10px] font-medium text-muted-foreground", children: visibleRows.length })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "button",
           {
             type: "button",
@@ -2674,19 +3111,19 @@ function AssociationList(props) {
               showUniversal ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlusIcon, { className: "h-3 w-3" }),
               "Add"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
             type: "button",
             onClick: () => void adapter.reload(),
             title: "Refresh",
             className: "text-muted-foreground/60 transition-colors hover:text-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               RefreshIcon,
               {
                 className: (0, import_design_system8.cn)(
@@ -2699,7 +3136,7 @@ function AssociationList(props) {
         )
       ] })
     ] }),
-    showUniversal && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rounded-md border border-border/60 bg-muted/30 p-2 max-h-80 flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    showUniversal && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-md border border-border/60 bg-muted/30 p-2 max-h-80 flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       UniversalAssociationPicker,
       {
         tokens: attachableTokens,
@@ -2709,9 +3146,9 @@ function AssociationList(props) {
         onDetach: (token, id) => adapter.detach(token, id)
       }
     ) }),
-    adapter.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-2.5 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate text-[11px] text-destructive", children: adapter.error || "Failed to load resources" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    adapter.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-2.5 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate text-[11px] text-destructive", children: adapter.error || "Failed to load resources" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -2721,17 +3158,17 @@ function AssociationList(props) {
         }
       )
     ] }),
-    adapter.status !== "error" && isLoading && visibleRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-1.5 px-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system8.Skeleton, { className: "h-3 w-20" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system8.Skeleton, { className: "h-7 w-full rounded-md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_design_system8.Skeleton, { className: "h-7 w-3/4 rounded-md" })
+    adapter.status !== "error" && isLoading && visibleRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1.5 px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_design_system8.Skeleton, { className: "h-3 w-20" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_design_system8.Skeleton, { className: "h-7 w-full rounded-md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_design_system8.Skeleton, { className: "h-7 w-3/4 rounded-md" })
     ] }),
-    adapter.status === "ready" && visibleRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "px-1 py-1 text-[11px] text-muted-foreground", children: "Nothing attached yet \u2014 use Add to link anything." }),
-    visibleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2.5", children: grouped.map(({ role, tokens: tokenGroups }) => {
+    adapter.status === "ready" && visibleRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "px-1 py-1 text-[11px] text-muted-foreground", children: "Nothing attached yet \u2014 use Add to link anything." }),
+    visibleRows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-2.5", children: grouped.map(({ role, tokens: tokenGroups }) => {
       const roleMeta = getContentRoleMeta(role);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-1.5", children: [
-        variant === "full" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1.5 px-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1.5", children: [
+        variant === "full" && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1.5 px-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
               className: (0, import_design_system8.cn)(
@@ -2740,7 +3177,7 @@ function AssociationList(props) {
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "p",
             {
               className: (0, import_design_system8.cn)(
@@ -2753,28 +3190,28 @@ function AssociationList(props) {
         ] }),
         tokenGroups.map(({ info, token, rows: tokenRows }) => {
           const TokenIcon = info?.Icon ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-0.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between gap-1 px-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "flex items-center gap-1 text-[10px] font-medium text-muted-foreground/80", children: [
-                TokenIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TokenIcon, { className: "h-3 w-3" }) : null,
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-1 px-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: "flex items-center gap-1 text-[10px] font-medium text-muted-foreground/80", children: [
+                TokenIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TokenIcon, { className: "h-3 w-3" }) : null,
                 info?.labelPlural ?? titleize(token),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-muted-foreground/50", children: tokenRows.length })
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground/50", children: tokenRows.length })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-1", children: [
                 props.renderSectionActions && info ? props.renderSectionActions(info.token) : null,
-                info?.canListCandidates && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                info?.canListCandidates && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => setPickerToken(info.token),
                     title: `Add ${info.labelPlural}`,
                     className: "rounded p-0.5 text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PlusIcon, { className: "h-3 w-3" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlusIcon, { className: "h-3 w-3" })
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { className: "space-y-0.5", children: tokenRows.map((row) => {
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "space-y-0.5", children: tokenRows.map((row) => {
               const busy = removingKeys.has(row.key);
               const custom = props.renderRow?.(row, {
                 title: titleFor({
@@ -2787,9 +3224,9 @@ function AssociationList(props) {
                 onOpen: () => openRow(row)
               });
               if (custom != null) {
-                return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: custom }, row.key);
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: custom }, row.key);
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "div",
                 {
                   className: (0, import_design_system8.cn)(
@@ -2797,7 +3234,7 @@ function AssociationList(props) {
                     busy && "opacity-50"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       DoorRef,
                       {
                         token: row.token,
@@ -2813,9 +3250,9 @@ function AssociationList(props) {
                         className: "min-w-0 flex-1 text-foreground"
                       }
                     ),
-                    row.originRefs && row.originRefs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground/60", children: [
+                    row.originRefs && row.originRefs.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex shrink-0 items-center gap-1 text-[10px] text-muted-foreground/60", children: [
                       "via",
-                      row.originRefs.map((origin) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      row.originRefs.map((origin) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         DoorRef,
                         {
                           token: origin.token,
@@ -2827,8 +3264,8 @@ function AssociationList(props) {
                         },
                         `${origin.token}:${origin.id}`
                       ))
-                    ] }) : row.originNote ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: row.originNote }) : null,
-                    adapter.setPinned && info && row.removable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    ] }) : row.originNote ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "shrink-0 text-[10px] text-muted-foreground/60", children: row.originNote }) : null,
+                    adapter.setPinned && info && row.removable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2843,7 +3280,7 @@ function AssociationList(props) {
                           "shrink-0 rounded p-0.5 transition-colors hover:!text-foreground",
                           row.pinned ? "text-primary" : "text-muted-foreground/0 group-hover:text-muted-foreground"
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                           PinIcon,
                           {
                             className: (0, import_design_system8.cn)(
@@ -2854,7 +3291,7 @@ function AssociationList(props) {
                         )
                       }
                     ),
-                    row.removable && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    row.removable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2863,7 +3300,7 @@ function AssociationList(props) {
                         title: "Detach",
                         "aria-label": "Detach",
                         className: "shrink-0 rounded p-0.5 text-muted-foreground/0 transition-colors group-hover:text-muted-foreground hover:!text-destructive disabled:opacity-50",
-                        children: busy ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(XIcon, { className: "h-3 w-3" })
+                        children: busy ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SpinnerIcon, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(XIcon, { className: "h-3 w-3" })
                       }
                     )
                   ]
@@ -2874,7 +3311,7 @@ function AssociationList(props) {
         })
       ] }, role);
     }) }),
-    pickerToken && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    pickerToken && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       AssociationPicker,
       {
         open: true,
@@ -2930,9 +3367,9 @@ function titleize(token) {
 }
 
 // src/react/components/AssociationCaptureToolbar.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_design_system9 = require("@ai-matrx/design-system");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function AssociationCaptureToolbar({
   attach,
   uploadFolderPath,
@@ -2950,21 +3387,43 @@ function AssociationCaptureToolbar({
   const store = useAssociationsStore();
   const { capture } = useAssociationsUiPorts();
   const notifier = useNotifier();
-  const fileInputRef = (0, import_react17.useRef)(null);
-  const [isUploading, setIsUploading] = (0, import_react17.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react17.useState)(false);
-  const [isPicking, setIsPicking] = (0, import_react17.useState)(false);
-  const [namingDoc, setNamingDoc] = (0, import_react17.useState)(false);
-  const [docName, setDocName] = (0, import_react17.useState)("");
-  const [creatingDoc, setCreatingDoc] = (0, import_react17.useState)(false);
+  const fileInputRef = (0, import_react18.useRef)(null);
+  const [isUploading, setIsUploading] = (0, import_react18.useState)(false);
+  const [isDragOver, setIsDragOver] = (0, import_react18.useState)(false);
+  const [isPicking, setIsPicking] = (0, import_react18.useState)(false);
+  const [namingDoc, setNamingDoc] = (0, import_react18.useState)(false);
+  const [docName, setDocName] = (0, import_react18.useState)("");
+  const [creatingDoc, setCreatingDoc] = (0, import_react18.useState)(false);
+  const hostRequestUpload = capture?.requestUpload;
+  const hostUploadFile = capture?.uploadFile;
+  const requestUploadPath = hostRequestUpload ? (opts) => hostRequestUpload(opts) : hostUploadFile ? async (opts) => {
+    const uploaded = [];
+    const failed = [];
+    for (const file of opts.files) {
+      try {
+        const result = await hostUploadFile(file, {
+          folderPath: opts.folderPath,
+          ...opts.visibility !== void 0 ? { visibility: opts.visibility } : {}
+        });
+        if (result.ok) uploaded.push(result.id);
+        else failed.push({ name: file.name, error: result.error });
+      } catch (err) {
+        failed.push({
+          name: file.name,
+          error: err instanceof Error && err.message ? err.message : "Upload failed"
+        });
+      }
+    }
+    return { uploaded, aliased: [], failed };
+  } : void 0;
   const actions = {
-    upload: (showActions?.upload ?? true) && Boolean(capture?.requestUpload),
+    upload: (showActions?.upload ?? true) && Boolean(requestUploadPath),
     addFile: (showActions?.addFile ?? true) && Boolean(capture?.openFilePicker),
     newDocument: (showActions?.newDocument ?? true) && Boolean(capture?.createDataTable)
   };
-  const canDrop = Boolean(capture?.requestUpload);
+  const canDrop = Boolean(requestUploadPath);
   const uploadAndAttach = async (files) => {
-    const requestUpload = capture?.requestUpload;
+    const requestUpload = requestUploadPath;
     if (files.length === 0 || !requestUpload) return;
     setIsUploading(true);
     const watchdog = setTimeout(() => {
@@ -3122,7 +3581,7 @@ function AssociationCaptureToolbar({
     }
   };
   const anyBuiltIn = actions.upload || actions.addFile || actions.newDocument;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       className: (0, import_design_system9.cn)(
@@ -3143,11 +3602,11 @@ function AssociationCaptureToolbar({
       },
       onDrop: handleDrop,
       children: [
-        isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center bg-background/70", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-2 rounded-md border border-primary/40 bg-card px-3 py-1.5 text-xs font-medium text-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UploadIcon, { className: "size-3.5 text-primary" }),
+        isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pointer-events-none absolute inset-0 z-10 grid place-items-center bg-background/70", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-2 rounded-md border border-primary/40 bg-card px-3 py-1.5 text-xs font-medium text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(UploadIcon, { className: "size-3.5 text-primary" }),
           "Drop to upload & attach"
         ] }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
             ref: fileInputRef,
@@ -3157,8 +3616,8 @@ function AssociationCaptureToolbar({
             onChange: handleFilesSelected
           }
         ),
-        showToolbar && (anyBuiltIn || extraActions) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border/60 px-1.5 py-1", children: namingDoc ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 items-center gap-1.5 py-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showToolbar && (anyBuiltIn || extraActions) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border/60 px-1.5 py-1", children: namingDoc ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-1 items-center gap-1.5 py-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             import_design_system9.Input,
             {
               autoFocus: true,
@@ -3177,17 +3636,17 @@ function AssociationCaptureToolbar({
               style: { fontSize: 16 }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
               disabled: creatingDoc || !docName.trim(),
               onClick: () => void handleCreateDoc(),
               className: "flex h-7 items-center rounded-md bg-primary px-2 text-[11px] font-medium text-primary-foreground disabled:opacity-50",
-              children: creatingDoc ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SpinnerIcon, { className: "size-3.5 animate-spin" }) : "Create"
+              children: creatingDoc ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpinnerIcon, { className: "size-3.5 animate-spin" }) : "Create"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "button",
             {
               type: "button",
@@ -3200,8 +3659,8 @@ function AssociationCaptureToolbar({
               children: "Cancel"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-          actions.upload ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          actions.upload ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             CaptureToolbarAction,
             {
               icon: isUploading ? SpinnerIcon : UploadIcon,
@@ -3211,7 +3670,7 @@ function AssociationCaptureToolbar({
               disabled: isPicking || isUploading
             }
           ) : null,
-          actions.addFile ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          actions.addFile ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             CaptureToolbarAction,
             {
               icon: isPicking ? SpinnerIcon : FolderOpenIcon,
@@ -3221,8 +3680,8 @@ function AssociationCaptureToolbar({
               disabled: isPicking || isUploading
             }
           ) : null,
-          (actions.upload || actions.addFile) && actions.newDocument ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mx-1 h-4 w-px bg-border" }) : null,
-          actions.newDocument ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          (actions.upload || actions.addFile) && actions.newDocument ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "mx-1 h-4 w-px bg-border" }) : null,
+          actions.newDocument ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             CaptureToolbarAction,
             {
               icon: creatingDoc ? SpinnerIcon : PlusIcon,
@@ -3246,7 +3705,7 @@ function CaptureToolbarAction({
   disabled,
   spinning
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     import_design_system9.Button,
     {
       type: "button",
@@ -3256,17 +3715,147 @@ function CaptureToolbarAction({
       disabled,
       className: "h-7 gap-1 px-2 text-[11px] text-muted-foreground hover:text-foreground",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: (0, import_design_system9.cn)("size-3.5", spinning && "animate-spin") }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: (0, import_design_system9.cn)("size-3.5", spinning && "animate-spin") }),
         label
       ]
     }
   );
 }
 
+// src/react/lazyPorts.tsx
+var import_react19 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function lazyComponent(load) {
+  return (0, import_react19.lazy)(async () => {
+    const loaded = await load();
+    return typeof loaded === "function" ? { default: loaded } : loaded;
+  });
+}
+function lazyWindowShell(load) {
+  const Loaded = lazyComponent(load);
+  return function LazyWindowShell(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react19.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loaded, { ...props }) });
+  };
+}
+function lazyPickerOverride(load) {
+  const Loaded = lazyComponent(load);
+  return function LazyPickerOverride(props) {
+    if (!props.open) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react19.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Loaded, { ...props }) });
+  };
+}
+
+// src/react/hooks/useAssociationPickerBridge.ts
+var import_react20 = require("react");
+function useAssociationPickerBridge(props, options = {}) {
+  const store = useAssociationsStore();
+  const notifier = useNotifier();
+  const [busy, setBusy] = (0, import_react20.useState)(false);
+  const { attachedIds, onAttach, onDetach, token } = props;
+  const {
+    createdLocationLabel,
+    openCreatedLocation,
+    itemNoun = "item"
+  } = options;
+  const attachMany = (0, import_react20.useCallback)(
+    async (items) => {
+      if (items.length === 0) return;
+      setBusy(true);
+      const failed = [];
+      try {
+        for (const item of items) {
+          try {
+            const result = await onAttach(item.id, item.name);
+            if (!result.ok) {
+              failed.push({ name: item.name, error: result.error });
+            }
+          } catch (error) {
+            store.errorSink({
+              code: "picker_attach_threw",
+              message: `[associations] attaching ${itemNoun} "${item.name}" threw`,
+              context: { token, id: item.id, detail: error }
+            });
+            failed.push({
+              name: item.name,
+              error: error instanceof Error ? error.message : void 0
+            });
+          }
+        }
+        const attached = items.length - failed.length;
+        if (attached > 0) {
+          notifier.success(
+            attached === 1 ? `Attached 1 ${itemNoun}` : `Attached ${attached} ${itemNoun}s`
+          );
+        }
+        if (failed.length > 0) {
+          const first = failed[0];
+          const detail = first?.error ? ` (${first.error})` : "";
+          notifier.error(
+            failed.length === 1 ? `Couldn't attach "${first?.name ?? itemNoun}"${detail}` : `Couldn't attach ${failed.length} ${itemNoun}s${detail}`,
+            {
+              ...createdLocationLabel ? {
+                description: `The ${failed.length === 1 ? itemNoun + " is" : itemNoun + "s are"} safe in ${createdLocationLabel}. You can retry the association here.`
+              } : {},
+              ...openCreatedLocation ? { action: openCreatedLocation } : {}
+            }
+          );
+          store.errorSink({
+            code: "picker_attach_partial",
+            message: `[associations] ${failed.length} of ${items.length} ${itemNoun}s were not attached`,
+            context: { token, failed }
+          });
+        }
+      } finally {
+        setBusy(false);
+      }
+    },
+    [
+      createdLocationLabel,
+      itemNoun,
+      notifier,
+      onAttach,
+      openCreatedLocation,
+      store,
+      token
+    ]
+  );
+  const toggle = (0, import_react20.useCallback)(
+    async (item) => {
+      setBusy(true);
+      try {
+        const detaching = attachedIds.has(item.id);
+        const result = detaching ? await onDetach(item.id) : await onAttach(item.id, item.name);
+        if (!result.ok) {
+          const verb = detaching ? "detach" : "attach";
+          notifier.error(
+            `Couldn't ${verb} "${item.name}"` + (result.error ? `: ${result.error}` : "")
+          );
+          store.errorSink({
+            code: detaching ? "picker_detach_failed" : "picker_attach_failed",
+            message: `[associations] ${verb} refused for "${item.name}"`,
+            context: { token, id: item.id, error: result.error }
+          });
+        }
+      } catch (error) {
+        store.errorSink({
+          code: "picker_toggle_threw",
+          message: `[associations] toggling ${itemNoun} "${item.name}" threw`,
+          context: { token, id: item.id, detail: error }
+        });
+        notifier.error(`Couldn't update "${item.name}"`);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [attachedIds, itemNoun, notifier, onAttach, onDetach, store, token]
+  );
+  return { attachMany, toggle, busy };
+}
+
 // src/react/components/AssociationEntitySelect.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 var import_design_system10 = require("@ai-matrx/design-system");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function AssociationEntitySelect({
   token,
   adapter,
@@ -3280,19 +3869,17 @@ function AssociationEntitySelect({
   createSlot
 }) {
   const store = useAssociationsStore();
-  const { entityDoors } = useAssociationsUiPorts();
   const notifier = useNotifier();
   const info = store.registry.getEntityInfo(token);
   const InfoIcon = info.Icon ?? DefaultEntityIcon;
-  const DoorControls = entityDoors?.DoorControls;
   const { items, activeId } = adapter;
   const active = items.find((i) => i.id === activeId) ?? null;
   const activeIndex = active ? items.indexOf(active) : -1;
-  const [open, setOpen] = (0, import_react18.useState)(false);
-  const [query, setQuery] = (0, import_react18.useState)("");
-  const [creating, setCreating] = (0, import_react18.useState)(false);
-  const [draftName, setDraftName] = (0, import_react18.useState)("");
-  const [busy, setBusy] = (0, import_react18.useState)(false);
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const [query, setQuery] = (0, import_react21.useState)("");
+  const [creating, setCreating] = (0, import_react21.useState)(false);
+  const [draftName, setDraftName] = (0, import_react21.useState)("");
+  const [busy, setBusy] = (0, import_react21.useState)(false);
   const entityLabel = info.label.toLowerCase();
   const close = () => {
     setOpen(false);
@@ -3309,7 +3896,7 @@ function AssociationEntitySelect({
     if (id) close();
     else notifier.error(`Couldn't create the ${entityLabel}`);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       className: (0, import_design_system10.cn)(
@@ -3317,7 +3904,7 @@ function AssociationEntitySelect({
         className
       ),
       children: [
-        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           InfoIcon,
           {
             className: (0, import_design_system10.cn)(
@@ -3327,7 +3914,7 @@ function AssociationEntitySelect({
             "aria-hidden": true
           }
         ) : null,
-        active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        active ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_design_system10.EditableLabel,
           {
             value: active.title,
@@ -3346,8 +3933,8 @@ function AssociationEntitySelect({
             inputClassName: "text-xs font-medium"
           }
         ) : null,
-        active && DoorControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DoorControls, { token, id: active.id, name: active.title }) : null,
-        !active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        active ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DoorControlsSlot, { token, id: active.id, name: active.title }) : null,
+        !active ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "span",
           {
             className: (0, import_design_system10.cn)(
@@ -3357,13 +3944,13 @@ function AssociationEntitySelect({
             children: adapter.loading ? "\u2026" : emptyLabel ?? info.labelPlural
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           import_design_system10.Popover,
           {
             open,
             onOpenChange: (next) => next ? setOpen(true) : close(),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system10.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -3371,17 +3958,17 @@ function AssociationEntitySelect({
                   title: `Switch or add ${info.labelPlural.toLowerCase()}`,
                   "aria-label": `Switch or add ${info.labelPlural.toLowerCase()}`,
                   children: [
-                    items.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "tabular-nums", children: [
+                    items.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "tabular-nums", children: [
                       activeIndex >= 0 ? activeIndex + 1 : "\u2014",
                       "/",
                       items.length
                     ] }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDownIcon, { className: "size-3 opacity-60" })
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { className: "size-3 opacity-60" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.PopoverContent, { className: "w-60 p-0", align, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.Command, { children: [
-                items.length > 5 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system10.PopoverContent, { className: "w-60 p-0", align, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system10.Command, { children: [
+                items.length > 5 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   import_design_system10.CommandInput,
                   {
                     value: query,
@@ -3389,9 +3976,9 @@ function AssociationEntitySelect({
                     placeholder: `Search ${info.labelPlural.toLowerCase()}\u2026`
                   }
                 ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_design_system10.CommandList, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.CommandEmpty, { children: "No match." }),
-                  items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_design_system10.CommandGroup, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system10.CommandList, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system10.CommandEmpty, { children: "No match." }),
+                  items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system10.CommandGroup, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                     import_design_system10.CommandItem,
                     {
                       value: `${item.title} ${item.id}`,
@@ -3402,7 +3989,7 @@ function AssociationEntitySelect({
                       },
                       className: "group/entity-ref group gap-2",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           CheckIcon,
                           {
                             className: (0, import_design_system10.cn)(
@@ -3411,8 +3998,8 @@ function AssociationEntitySelect({
                             )
                           }
                         ),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.title }),
-                        DoorControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.title }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           "span",
                           {
                             className: "inline-flex shrink-0 items-center",
@@ -3420,8 +4007,8 @@ function AssociationEntitySelect({
                               e.preventDefault();
                               e.stopPropagation();
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                              DoorControls,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                              DoorControlsSlot,
                               {
                                 token,
                                 id: item.id,
@@ -3429,8 +4016,8 @@ function AssociationEntitySelect({
                               }
                             )
                           }
-                        ) : null,
-                        adapter.detach && item.id !== activeId ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        ),
+                        adapter.detach && item.id !== activeId ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           "button",
                           {
                             type: "button",
@@ -3445,7 +4032,7 @@ function AssociationEntitySelect({
                             className: "grid size-5 shrink-0 place-items-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-destructive group-hover:opacity-100",
                             title: `Remove this ${entityLabel} from here (does not delete it)`,
                             "aria-label": `Remove ${item.title}`,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(XIcon, { className: "size-3" })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { className: "size-3" })
                           }
                         ) : null
                       ]
@@ -3453,9 +4040,9 @@ function AssociationEntitySelect({
                     item.id
                   )) }) : null
                 ] }),
-                createSlot !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border-t border-border p-1", children: typeof createSlot === "function" ? createSlot(close) : createSlot }) : null,
-                createSlot === void 0 && adapter.createAndAttach ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border-t border-border p-1", children: creating ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1 px-1 py-0.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                createSlot !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "border-t border-border p-1", children: typeof createSlot === "function" ? createSlot(close) : createSlot }) : null,
+                createSlot === void 0 && adapter.createAndAttach ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "border-t border-border p-1", children: creating ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 px-1 py-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "input",
                     {
                       autoFocus: true,
@@ -3479,17 +4066,17 @@ function AssociationEntitySelect({
                       "aria-label": `New ${entityLabel} name`
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
                       type: "button",
                       disabled: busy || !draftName.trim(),
                       onClick: () => void create(draftName),
                       className: "inline-flex h-6 shrink-0 items-center rounded-md px-1.5 text-[10px] font-medium text-primary transition-colors hover:bg-accent disabled:opacity-50",
-                      children: busy ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpinnerIcon, { className: "size-3 animate-spin" }) : "Create"
+                      children: busy ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SpinnerIcon, { className: "size-3 animate-spin" }) : "Create"
                     }
                   )
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -3500,7 +4087,7 @@ function AssociationEntitySelect({
                     },
                     className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                     children: [
-                      busy ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpinnerIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlusIcon, { className: "size-3.5" }),
+                      busy ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SpinnerIcon, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PlusIcon, { className: "size-3.5" }),
                       query.trim() ? `Create "${query.trim()}"` : `New ${info.label}`
                     ]
                   }
@@ -3515,7 +4102,7 @@ function AssociationEntitySelect({
 }
 
 // src/react/components/CategorySelect.tsx
-var import_react19 = require("react");
+var import_react22 = require("react");
 var import_design_system11 = require("@ai-matrx/design-system");
 
 // src/core/categoryHierarchy.ts
@@ -3583,7 +4170,7 @@ function buildCategoryHierarchy(categories) {
 }
 
 // src/react/components/CategorySelect.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var NONE = "__none__";
 var ROOT_PARENT = "__root__";
 function plural(noun) {
@@ -3610,7 +4197,7 @@ function CategorySelect({
     reload
   } = useCategories({ dimension });
   const hierarchy = buildCategoryHierarchy(categories);
-  const [createParentId, setCreateParentId] = (0, import_react19.useState)(ROOT_PARENT);
+  const [createParentId, setCreateParentId] = (0, import_react22.useState)(ROOT_PARENT);
   const options = [
     ...allowNone ? [{ value: NONE, label: "None", keywords: "none clear empty" }] : [],
     ...hierarchy.hasHierarchy ? hierarchy.items.map(({ category, depth, parent }) => ({
@@ -3619,9 +4206,9 @@ function CategorySelect({
       // The type-ahead matches the parent's name too, so someone who knows
       // the branch but not the leaf still finds it.
       keywords: parent ? parent.name : "",
-      render: depth === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium", children: category.name }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-1.5 pl-3 text-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CornerDownRightIcon, { className: "h-3.5 w-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-foreground", children: category.name })
+      render: depth === 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-medium", children: category.name }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "flex items-center gap-1.5 pl-3 text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CornerDownRightIcon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-foreground", children: category.name })
       ] })
     })) : categories.map((category) => ({
       value: category.id,
@@ -3668,8 +4255,8 @@ function CategorySelect({
     );
     return result.id;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       import_design_system11.CreatablePicker,
       {
         value: value ?? (allowNone ? NONE : null),
@@ -3685,18 +4272,18 @@ function CategorySelect({
         emptyLabel: `No ${noun} matches that.`,
         ...allowCreate ? { onCreate: create } : {},
         ...allowCreate && hierarchy.hasHierarchy ? {
-          createExtra: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_design_system11.Select, { value: createParentId, onValueChange: setCreateParentId, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          createExtra: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system11.Select, { value: createParentId, onValueChange: setCreateParentId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               import_design_system11.SelectTrigger,
               {
                 className: "h-7 text-xs",
                 "aria-label": `Put the new ${noun} under`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system11.SelectValue, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system11.SelectValue, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_design_system11.SelectContent, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_design_system11.SelectItem, { value: ROOT_PARENT, className: "text-xs", children: "Top level" }),
-              hierarchy.items.filter((item) => item.depth === 0).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system11.SelectContent, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system11.SelectItem, { value: ROOT_PARENT, className: "text-xs", children: "Top level" }),
+              hierarchy.items.filter((item) => item.depth === 0).map((item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                 import_design_system11.SelectItem,
                 {
                   value: item.category.id,
@@ -3716,20 +4303,20 @@ function CategorySelect({
     selected === null && value !== null ? (
       // A stored id whose row this reader cannot see is not "nothing chosen":
       // saying so beats a blank box that looks like an unsaved field.
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "mt-1 text-xs text-muted-foreground", children: [
         "This ",
         noun,
         " is no longer available to you."
       ] })
     ) : null,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mt-1 text-xs text-destructive", children: error }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-1 text-xs text-destructive", children: error }) : null
   ] });
 }
 
 // src/react/components/CategoryTagPicker.tsx
-var import_react20 = require("react");
+var import_react23 = require("react");
 var import_design_system12 = require("@ai-matrx/design-system");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var ROOT_PARENT2 = "__root__";
 function CategoryTagPicker({
   entityType,
@@ -3745,11 +4332,11 @@ function CategoryTagPicker({
 }) {
   const store = useAssociationsStore();
   const notifier = useNotifier();
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const [creating, setCreating] = (0, import_react20.useState)(false);
-  const [writing, setWriting] = (0, import_react20.useState)(false);
-  const [search, setSearch] = (0, import_react20.useState)("");
-  const [createParentId, setCreateParentId] = (0, import_react20.useState)(ROOT_PARENT2);
+  const [open, setOpen] = (0, import_react23.useState)(false);
+  const [creating, setCreating] = (0, import_react23.useState)(false);
+  const [writing, setWriting] = (0, import_react23.useState)(false);
+  const [search, setSearch] = (0, import_react23.useState)("");
+  const [createParentId, setCreateParentId] = (0, import_react23.useState)(ROOT_PARENT2);
   const {
     categories,
     create: createCategory,
@@ -3853,44 +4440,44 @@ function CategoryTagPicker({
   const exactMatch = categories.some(
     (c) => c.name.toLowerCase() === search.trim().toLowerCase()
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-    selected.map((c) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+    selected.map((c) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       import_design_system12.Badge,
       {
         variant: "secondary",
         className: "gap-1 pr-1 text-xs font-medium",
         children: [
           showHierarchy ? hierarchyById.get(c.id)?.displayName ?? c.name : c.name,
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             "button",
             {
               type: "button",
               onClick: () => void toggle(c.id),
               className: "ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20",
               "aria-label": `Remove ${c.name}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(XIcon, { className: "h-2.5 w-2.5" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(XIcon, { className: "h-2.5 w-2.5" })
             }
           )
         ]
       },
       c.id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.Popover, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_design_system12.Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         import_design_system12.Button,
         {
           variant: "outline",
           size: "sm",
           className: "h-7 gap-1 px-2 text-xs",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { className: "h-3.5 w-3.5" }),
             selected.length === 0 ? addLabel : "Edit",
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronsUpDownIcon, { className: "h-3 w-3 opacity-50" })
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronsUpDownIcon, { className: "h-3 w-3 opacity-50" })
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.PopoverContent, { className: "w-56 p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.Command, { shouldFilter: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.PopoverContent, { className: "w-56 p-0", align: "start", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_design_system12.Command, { shouldFilter: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           import_design_system12.CommandInput,
           {
             placeholder: allowCreate ? "Search or create..." : "Search...",
@@ -3898,9 +4485,9 @@ function CategoryTagPicker({
             onValueChange: setSearch
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.CommandList, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.CommandEmpty, { className: "px-2 py-3 text-xs text-muted-foreground", children: search.trim() ? "No match." : emptyText }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.CommandGroup, { children: showHierarchy ? filteredHierarchy.map(({ category, depth, parent }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_design_system12.CommandList, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.CommandEmpty, { className: "px-2 py-3 text-xs text-muted-foreground", children: search.trim() ? "No match." : emptyText }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.CommandGroup, { children: showHierarchy ? filteredHierarchy.map(({ category, depth, parent }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             import_design_system12.CommandItem,
             {
               value: category.id,
@@ -3908,7 +4495,7 @@ function CategoryTagPicker({
               onSelect: () => void toggle(category.id),
               className: (0, import_design_system12.cn)("text-xs", depth === 1 && "pl-6"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   CheckIcon,
                   {
                     className: (0, import_design_system12.cn)(
@@ -3917,19 +4504,19 @@ function CategoryTagPicker({
                     )
                   }
                 ),
-                depth === 1 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CornerDownRightIcon, { className: "mr-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: (0, import_design_system12.cn)(depth === 0 && "font-medium"), children: category.name })
+                depth === 1 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CornerDownRightIcon, { className: "mr-1.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: (0, import_design_system12.cn)(depth === 0 && "font-medium"), children: category.name })
               ]
             },
             category.id
-          )) : filtered.map((c) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          )) : filtered.map((c) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
             import_design_system12.CommandItem,
             {
               value: c.id,
               onSelect: () => void toggle(c.id),
               className: "text-xs",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   CheckIcon,
                   {
                     className: (0, import_design_system12.cn)(
@@ -3943,25 +4530,25 @@ function CategoryTagPicker({
             },
             c.id
           )) }),
-          allowCreate && search.trim() && !exactMatch ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.CommandGroup, { children: [
-            showHierarchy ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-1.5 px-2 pb-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-[11px] font-medium text-muted-foreground", children: "Place in" }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          allowCreate && search.trim() && !exactMatch ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_design_system12.CommandGroup, { children: [
+            showHierarchy ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-1.5 px-2 pb-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[11px] font-medium text-muted-foreground", children: "Place in" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                 import_design_system12.Select,
                 {
                   value: createParentId,
                   onValueChange: setCreateParentId,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectTrigger, { size: "sm", className: "bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectValue, {}) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_design_system12.SelectContent, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectItem, { value: ROOT_PARENT2, children: "Top level" }),
-                      hierarchy.roots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_design_system12.SelectItem, { value: root.id, children: root.name }, root.id))
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.SelectTrigger, { size: "sm", className: "bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.SelectValue, {}) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_design_system12.SelectContent, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.SelectItem, { value: ROOT_PARENT2, children: "Top level" }),
+                      hierarchy.roots.map((root) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_design_system12.SelectItem, { value: root.id, children: root.name }, root.id))
                     ] })
                   ]
                 }
               )
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
               import_design_system12.CommandItem,
               {
                 value: `__create__${search}`,
@@ -3969,7 +4556,7 @@ function CategoryTagPicker({
                 disabled: creating,
                 className: "text-xs text-primary",
                 children: [
-                  creating ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SpinnerIcon, { className: "mr-2 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "mr-2 h-3.5 w-3.5" }),
+                  creating ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SpinnerIcon, { className: "mr-2 h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { className: "mr-2 h-3.5 w-3.5" }),
                   "Create \u201C",
                   search.trim(),
                   "\u201D"
@@ -3984,7 +4571,7 @@ function CategoryTagPicker({
 }
 
 // src/react/components/CommentThread.tsx
-var import_react21 = require("react");
+var import_react24 = require("react");
 var import_design_system13 = require("@ai-matrx/design-system");
 
 // src/react/relativeTime.ts
@@ -4012,7 +4599,7 @@ function formatRelativeTime(iso, now = Date.now()) {
 }
 
 // src/react/components/CommentThread.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var AUTHOR_DOOR_TOKEN = "user";
 function resolveAuthor(comment, authorDisplay) {
   const base2 = {
@@ -4031,7 +4618,7 @@ function resolveAuthor(comment, authorDisplay) {
 }
 function AuthorAvatar({ author }) {
   if (author.avatarUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "img",
       {
         src: author.avatarUrl,
@@ -4040,7 +4627,7 @@ function AuthorAvatar({ author }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "span",
     {
       "aria-hidden": true,
@@ -4055,7 +4642,7 @@ function AuthorName({
 }) {
   const DoorRef2 = entityDoors?.EntityRef;
   if (DoorRef2 && author.userId) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       DoorRef2,
       {
         token: AUTHOR_DOOR_TOKEN,
@@ -4066,7 +4653,7 @@ function AuthorName({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium text-foreground", children: author.name });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-sm font-medium text-foreground", children: author.name });
 }
 function CommentComposer({
   onSubmit,
@@ -4077,9 +4664,9 @@ function CommentComposer({
   autoFocus = false
 }) {
   const notifier = useNotifier();
-  const [body, setBody] = (0, import_react21.useState)(initialValue);
-  const [submitting, setSubmitting] = (0, import_react21.useState)(false);
-  const [error, setError] = (0, import_react21.useState)(null);
+  const [body, setBody] = (0, import_react24.useState)(initialValue);
+  const [submitting, setSubmitting] = (0, import_react24.useState)(false);
+  const [error, setError] = (0, import_react24.useState)(null);
   async function submit(e) {
     e?.preventDefault();
     const trimmed = body.trim();
@@ -4096,8 +4683,8 @@ function CommentComposer({
     }
     setBody("");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit: submit, className: "flex flex-col gap-1.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("form", { onSubmit: submit, className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "textarea",
       {
         value: body,
@@ -4112,10 +4699,10 @@ function CommentComposer({
         className: "w-full resize-y rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { role: "alert", className: "text-xs text-destructive", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_design_system13.Button, { type: "submit", size: "sm", disabled: !body.trim() || submitting, children: [
-        submitting && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { role: "alert", className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_design_system13.Button, { type: "submit", size: "sm", disabled: !body.trim() || submitting, children: [
+        submitting && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
         submitLabel
       ] }),
       trailing
@@ -4131,10 +4718,10 @@ function CommentItem({
 }) {
   const { authorDisplay, entityDoors } = useAssociationsUiPorts();
   const notifier = useNotifier();
-  const [replying, setReplying] = (0, import_react21.useState)(false);
-  const [editing, setEditing] = (0, import_react21.useState)(false);
-  const [confirmingDelete, setConfirmingDelete] = (0, import_react21.useState)(false);
-  const [deleting, setDeleting] = (0, import_react21.useState)(false);
+  const [replying, setReplying] = (0, import_react24.useState)(false);
+  const [editing, setEditing] = (0, import_react24.useState)(false);
+  const [confirmingDelete, setConfirmingDelete] = (0, import_react24.useState)(false);
+  const [deleting, setDeleting] = (0, import_react24.useState)(false);
   const author = resolveAuthor(comment, authorDisplay);
   const isOwn = thread.currentUserId !== null && comment.createdBy === thread.currentUserId;
   const edited = comment.updatedAt !== comment.createdAt;
@@ -4148,7 +4735,7 @@ function CommentItem({
       notifier.error(res.error ?? "Could not delete the comment");
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       "data-comment-id": comment.id,
@@ -4157,10 +4744,10 @@ function CommentItem({
         depth > 0 && "border-l border-border pl-3"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AuthorAvatar, { author }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AuthorName, { author, entityDoors }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AuthorAvatar, { author }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AuthorName, { author, entityDoors }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               className: "text-xs text-muted-foreground",
@@ -4168,7 +4755,7 @@ function CommentItem({
               children: formatRelativeTime(comment.createdAt)
             }
           ),
-          edited && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          edited && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "span",
             {
               className: "text-xs text-muted-foreground",
@@ -4177,7 +4764,7 @@ function CommentItem({
             }
           )
         ] }),
-        editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pl-8", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        editing ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pl-8", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           CommentComposer,
           {
             initialValue: comment.body,
@@ -4189,7 +4776,7 @@ function CommentItem({
               if (res.ok) setEditing(false);
               return res;
             },
-            trailing: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            trailing: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               import_design_system13.Button,
               {
                 type: "button",
@@ -4200,10 +4787,10 @@ function CommentItem({
               }
             )
           }
-        ) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "whitespace-pre-wrap pl-8 text-sm text-foreground", children: comment.body }),
-        !editing && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex items-center gap-1 pl-7", children: confirmingDelete ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-destructive", children: "Deletes this comment for everyone." }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "whitespace-pre-wrap pl-8 text-sm text-foreground", children: comment.body }),
+        !editing && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 pl-7", children: confirmingDelete ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs text-destructive", children: "Deletes this comment for everyone." }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             import_design_system13.Button,
             {
               type: "button",
@@ -4212,12 +4799,12 @@ function CommentItem({
               disabled: deleting,
               onClick: () => void confirmDelete(),
               children: [
-                deleting && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
+                deleting && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
                 "Delete"
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             import_design_system13.Button,
             {
               type: "button",
@@ -4228,8 +4815,8 @@ function CommentItem({
               children: "Cancel"
             }
           )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "button",
             {
               type: "button",
@@ -4238,8 +4825,8 @@ function CommentItem({
               children: "Reply"
             }
           ),
-          isOwn && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          isOwn && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 type: "button",
@@ -4248,7 +4835,7 @@ function CommentItem({
                 children: "Edit"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 type: "button",
@@ -4259,9 +4846,9 @@ function CommentItem({
             )
           ] })
         ] }) }),
-        replying && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-start gap-2 pl-8 pt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CornerDownRightIcon, { className: "mt-2 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        replying && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start gap-2 pl-8 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(CornerDownRightIcon, { className: "mt-2 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             CommentComposer,
             {
               submitLabel: "Reply",
@@ -4275,7 +4862,7 @@ function CommentItem({
                 if (res.ok) setReplying(false);
                 return res;
               },
-              trailing: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              trailing: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 import_design_system13.Button,
                 {
                   type: "button",
@@ -4288,7 +4875,7 @@ function CommentItem({
             }
           ) })
         ] }),
-        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col gap-3 pl-8 pt-1", children: replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-3 pl-8 pt-1", children: replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           CommentItem,
           {
             comment: reply,
@@ -4328,11 +4915,11 @@ function CommentThread({
   const thread = useComments({ token, id });
   const { roots, childrenOf } = buildCommentTree(thread.comments);
   const loading = (thread.status === "loading" || thread.status === "idle") && thread.comments.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("section", { className: (0, import_design_system13.cn)("flex flex-col gap-3", className), children: [
-    showHeader && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Comments" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-xs text-muted-foreground tabular-nums", children: thread.comments.length }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: (0, import_design_system13.cn)("flex flex-col gap-3", className), children: [
+    showHeader && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Comments" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-xs text-muted-foreground tabular-nums", children: thread.comments.length }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           type: "button",
@@ -4340,18 +4927,18 @@ function CommentThread({
           "aria-label": "Refresh comments",
           title: "Refresh comments",
           className: "ml-auto flex h-6 w-6 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-          children: thread.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(RefreshIcon, { className: "h-3.5 w-3.5" })
+          children: thread.status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SpinnerIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(RefreshIcon, { className: "h-3.5 w-3.5" })
         }
       )
     ] }),
-    thread.error && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    thread.error && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       "div",
       {
         role: "alert",
         className: "flex items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "min-w-0 flex-1", children: thread.error }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 flex-1", children: thread.error }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             import_design_system13.Button,
             {
               type: "button",
@@ -4365,10 +4952,10 @@ function CommentThread({
         ]
       }
     ),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-3", "aria-hidden": true, "data-testid": "comments-loading", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Skeleton, { className: "h-12 w-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_design_system13.Skeleton, { className: "h-12 w-4/5" })
-    ] }) : roots.length === 0 && !thread.error ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-sm text-muted-foreground", children: "No comments yet." }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex flex-col gap-4", children: roots.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-3", "aria-hidden": true, "data-testid": "comments-loading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system13.Skeleton, { className: "h-12 w-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_design_system13.Skeleton, { className: "h-12 w-4/5" })
+    ] }) : roots.length === 0 && !thread.error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm text-muted-foreground", children: "No comments yet." }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex flex-col gap-4", children: roots.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       CommentItem,
       {
         comment,
@@ -4379,7 +4966,7 @@ function CommentThread({
       },
       comment.id
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       CommentComposer,
       {
         onSubmit: (body) => thread.add(body, { orgId: orgId ?? null })