@ai-matrx/associations 0.3.0 → 0.5.0

package/dist/react/index.cjs

@@ -25,6 +25,7 @@ __export(react_exports, {
   AssociationCaptureToolbar: () => AssociationCaptureToolbar,
   AssociationCard: () => AssociationCard,
   AssociationCardGrid: () => AssociationCardGrid,
+  AssociationEntitySelect: () => AssociationEntitySelect,
   AssociationList: () => AssociationList,
   AssociationPicker: () => AssociationPicker,
   AssociationWindow: () => AssociationWindow,
@@ -32,12 +33,18 @@ __export(react_exports, {
   AttachedItemsSheet: () => AttachedItemsSheet,
   CONTENT_ROLES: () => CONTENT_ROLES,
   CaptureToolbarAction: () => CaptureToolbarAction,
+  CategorySelect: () => CategorySelect,
+  CategoryTagPicker: () => CategoryTagPicker,
+  CommentComposer: () => CommentComposer,
+  CommentThread: () => CommentThread,
   DefaultEntityIcon: () => DefaultEntityIcon,
   DoorRef: () => DoorRef,
   PrimaryEntityProvider: () => PrimaryEntityProvider,
   UniversalAssociationPicker: () => UniversalAssociationPicker,
   UnresolvedRef: () => UnresolvedRef,
   attachedKey: () => attachedKey,
+  buildCommentTree: () => buildCommentTree,
+  formatRelativeTime: () => formatRelativeTime,
   getContentRoleMeta: () => getContentRoleMeta,
   useAssociationCandidates: () => useAssociationCandidates,
   useAssociationEntitySelectAdapter: () => useAssociationEntitySelectAdapter,
@@ -45,6 +52,7 @@ __export(react_exports, {
   useAssociationsStore: () => useAssociationsStore,
   useAssociationsUiPorts: () => useAssociationsUiPorts,
   useCategories: () => useCategories,
+  useComments: () => useComments,
   useContainerLinks: () => useContainerLinks,
   useContainerLinksAdapter: () => useContainerLinksAdapter,
   useEntityRelationships: () => useEntityRelationships,
@@ -68,6 +76,7 @@ function AssociationsProvider({
   capture,
   pickerOverrides,
   entityDoors,
+  authorDisplay,
   children
 }) {
   const notifierWarned = (0, import_react.useRef)(false);
@@ -81,7 +90,8 @@ function AssociationsProvider({
         ...windowShell !== void 0 ? { windowShell } : {},
         ...capture !== void 0 ? { capture } : {},
         ...pickerOverrides !== void 0 ? { pickerOverrides } : {},
-        ...entityDoors !== void 0 ? { entityDoors } : {}
+        ...entityDoors !== void 0 ? { entityDoors } : {},
+        ...authorDisplay !== void 0 ? { authorDisplay } : {}
       },
       children
     }
@@ -558,6 +568,7 @@ var ENTITY_TYPE_TOKENS = [
   "platform_actor_session",
   "platform_actor_token",
   "platform_actor_token_event",
+  "platform_continued_access",
   "platform_outcome_event",
   "platform_outsider_consumer",
   "platform_saved_view",
@@ -586,6 +597,7 @@ var ENTITY_TYPE_TOKENS = [
   "research_tag",
   "research_template",
   "research_topic",
+  "route_manifest_entry",
   "rulebook",
   "sandbox_instance",
   "sch_agent_task",
@@ -664,6 +676,7 @@ var ENTITY_TYPE_TOKENS = [
   "seo_topic",
   "seo_web_analytics_daily",
   "shared_canvas_item",
+  "short_link",
   "skill",
   "skill_render_definition",
   "sms_consent",
@@ -818,6 +831,12 @@ var IDLE_CATEGORIES = Object.freeze({
   fetchedAt: null,
   error: null
 });
+var IDLE_COMMENTS = Object.freeze({
+  status: "idle",
+  comments: Object.freeze([]),
+  fetchedAt: null,
+  error: null
+});
 
 // src/react/hooks/useAssociations.ts
 var noopSubscribe = () => () => {
@@ -1296,8 +1315,74 @@ function currentUserIdOrNull(store) {
   }
 }
 
-// src/react/hooks/useAssociationEntitySelect.ts
+// src/react/hooks/useComments.ts
 var import_react8 = require("react");
+var noopSubscribe3 = () => () => {
+};
+function useComments(args) {
+  const { token, id, autoLoad = true } = args;
+  const store = useAssociationsStore();
+  const key = token && id ? associationsKey(token, id) : null;
+  const entry = (0, import_react8.useSyncExternalStore)(
+    key ? (cb) => store.subscribeComments(key, cb) : noopSubscribe3,
+    () => store.getComments(token, id ?? ""),
+    () => store.getComments(token, id ?? "")
+  );
+  const loadedKey = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (!autoLoad || !key || !id) return;
+    if (loadedKey.current === key) return;
+    loadedKey.current = key;
+    void store.loadComments(token, id);
+  }, [autoLoad, store, key, token, id]);
+  let currentUserId = null;
+  try {
+    currentUserId = store.identity.requireUserId();
+  } catch {
+    currentUserId = null;
+  }
+  return {
+    comments: entry.comments,
+    status: entry.status,
+    error: entry.error,
+    fetchedAt: entry.fetchedAt,
+    add: async (body, opts) => {
+      if (!id) return { ok: false, error: "Missing entity id" };
+      return store.addComment({
+        entityType: token,
+        entityId: id,
+        body,
+        ...opts?.parentId !== void 0 ? { parentId: opts.parentId } : {},
+        ...opts?.orgId !== void 0 ? { orgId: opts.orgId } : {}
+      });
+    },
+    edit: async (commentId, body) => {
+      if (!id) return { ok: false, error: "Missing entity id" };
+      return store.editComment({
+        entityType: token,
+        entityId: id,
+        id: commentId,
+        body
+      });
+    },
+    remove: async (commentId) => {
+      if (!id) return { ok: false, error: "Missing entity id" };
+      return store.deleteComment({
+        entityType: token,
+        entityId: id,
+        id: commentId
+      });
+    },
+    reload: async () => {
+      if (!id) return;
+      await store.loadComments(token, id, { force: true });
+    },
+    currentUserId
+  };
+}
+
+// src/react/hooks/useAssociationEntitySelect.ts
+var import_react9 = require("react");
 function useAssociationEntitySelectAdapter(args) {
   const { token, container, activeId, onActiveChange, createColumns } = args;
   const store = useAssociationsStore();
@@ -1311,10 +1396,10 @@ function useAssociationEntitySelectAdapter(args) {
   const { titleFor } = useEntityTitles(
     rows.map((r) => ({ token, id: r.resourceId, label: r.label }))
   );
-  const [titleOverrides, setTitleOverrides] = (0, import_react8.useState)(
+  const [titleOverrides, setTitleOverrides] = (0, import_react9.useState)(
     {}
   );
-  const [localActiveId, setLocalActiveId] = (0, import_react8.useState)(null);
+  const [localActiveId, setLocalActiveId] = (0, import_react9.useState)(null);
   const items = rows.map((r) => ({
     id: r.resourceId,
     title: titleOverrides[r.resourceId] ?? titleFor({ token, id: r.resourceId, label: r.label })
@@ -1371,9 +1456,9 @@ function useAssociationEntitySelectAdapter(args) {
 }
 
 // src/react/components/PrimaryEntityContext.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PrimaryEntityCtx = (0, import_react9.createContext)(null);
+var PrimaryEntityCtx = (0, import_react10.createContext)(null);
 function PrimaryEntityProvider({
   value,
   children
@@ -1381,11 +1466,11 @@ function PrimaryEntityProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryEntityCtx.Provider, { value, children });
 }
 function usePrimaryEntity() {
-  return (0, import_react9.useContext)(PrimaryEntityCtx);
+  return (0, import_react10.useContext)(PrimaryEntityCtx);
 }
 
 // src/react/components/AssociationWindow.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_design_system = require("@ai-matrx/design-system");
 
 // src/react/icons.tsx
@@ -1467,6 +1552,27 @@ function ExternalLinkIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
   ] });
 }
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { ...base(props), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+}
+function ChevronsUpDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function CornerDownRightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 10 20 15 15 20" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 4v7a4 4 0 0 0 4 4h12" })
+  ] });
+}
+function TagIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "7.5", cy: "7.5", r: ".5", fill: "currentColor" })
+  ] });
+}
 function DefaultEntityIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { ...base(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" }),
@@ -1495,7 +1601,7 @@ function AssociationWindow({
   subtitle,
   children
 }) {
-  const instanceId = (0, import_react10.useId)();
+  const instanceId = (0, import_react11.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: [
@@ -1547,7 +1653,7 @@ function AssociationWindow({
 }
 
 // src/react/components/AssociationPicker.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_design_system2 = require("@ai-matrx/design-system");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function AssociationPicker(props) {
@@ -1616,8 +1722,8 @@ function EntityCandidateList({
 }) {
   const store = useAssociationsStore();
   const notifier = useNotifier();
-  const [search, setSearch] = (0, import_react11.useState)("");
-  const [busyId, setBusyId] = (0, import_react11.useState)(null);
+  const [search, setSearch] = (0, import_react12.useState)("");
+  const [busyId, setBusyId] = (0, import_react12.useState)(null);
   const info = store.registry.getEntityInfo(token);
   const Icon = info.Icon ?? DefaultEntityIcon;
   const { candidates, loading, error, reload } = useAssociationCandidates({
@@ -1723,9 +1829,9 @@ function CreateAndAttachFooter({
   const store = useAssociationsStore();
   const notifier = useNotifier();
   const info = store.registry.getEntityInfo(token);
-  const [editing, setEditing] = (0, import_react11.useState)(false);
-  const [name, setName] = (0, import_react11.useState)("");
-  const [busy, setBusy] = (0, import_react11.useState)(false);
+  const [editing, setEditing] = (0, import_react12.useState)(false);
+  const [name, setName] = (0, import_react12.useState)("");
+  const [busy, setBusy] = (0, import_react12.useState)(false);
   const submit = async () => {
     const title = name.trim();
     if (!title || busy) return;
@@ -1833,7 +1939,7 @@ function ListMessage({ children }) {
 }
 
 // src/react/components/UniversalAssociationPicker.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_design_system3 = require("@ai-matrx/design-system");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function attachedKey(token, id) {
@@ -1845,9 +1951,9 @@ function UniversalAssociationPicker(props) {
   const { entityDoors, pickerOverrides } = useAssociationsUiPorts();
   const notifier = useNotifier();
   const tokens = props.tokens ?? store.registry.curatedTokens();
-  const [query, setQuery] = (0, import_react12.useState)("");
-  const [browseToken, setBrowseToken] = (0, import_react12.useState)(null);
-  const [busyKey, setBusyKey] = (0, import_react12.useState)(null);
+  const [query, setQuery] = (0, import_react13.useState)("");
+  const [browseToken, setBrowseToken] = (0, import_react13.useState)(null);
+  const [busyKey, setBusyKey] = (0, import_react13.useState)(null);
   const { results, loading, isRecents } = useUniversalEntitySearch({
     query,
     tokens,
@@ -2018,7 +2124,7 @@ function UniversalAssociationPicker(props) {
 }
 
 // src/react/components/AttachedItemsSheet.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_design_system5 = require("@ai-matrx/design-system");
 
 // src/react/components/entityDoors.tsx
@@ -2134,11 +2240,11 @@ function AttachedItemsBody({
   const notifier = useNotifier();
   const info = store.registry.getEntityInfo(token);
   const Icon = info.Icon ?? DefaultEntityIcon;
-  const [titles, setTitles] = (0, import_react13.useState)(null);
-  const [titleError, setTitleError] = (0, import_react13.useState)(null);
-  const [busyId, setBusyId] = (0, import_react13.useState)(null);
+  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 idKey = links.map((l) => l.resourceId).sort().join(",");
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (!enabled) return;
     const ids = idKey ? idKey.split(",") : [];
     if (ids.length === 0) {
@@ -2251,7 +2357,7 @@ function AttachedItemsBody({
 }
 
 // src/react/components/AssociationCard.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_design_system6 = require("@ai-matrx/design-system");
 
 // src/react/contentRoles.ts
@@ -2311,11 +2417,11 @@ function AssociationCard({
   const store = useAssociationsStore();
   const fromCtx = usePrimaryEntity();
   const container = containerProp ?? fromCtx;
-  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [open, setOpen] = (0, import_react15.useState)(false);
   const info = store.registry.getEntityInfo(token);
   const role = getContentRoleMeta(info.contentRole);
   const Icon = info.Icon ?? DefaultEntityIcon;
-  const [listOpen, setListOpen] = (0, import_react14.useState)(false);
+  const [listOpen, setListOpen] = (0, import_react15.useState)(false);
   const { status, countFor, attachedIdsFor, linksFor, attach, detach } = useContainerLinks({
     containerType: container?.type ?? "organization",
     containerId: container?.id ?? null,
@@ -2469,7 +2575,7 @@ function AssociationCardGrid({
 }
 
 // src/react/components/AssociationList.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_design_system8 = require("@ai-matrx/design-system");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function useContainerLinksAdapter(container, tokens) {
@@ -2509,9 +2615,9 @@ function AssociationList(props) {
   const adapter = props.adapter ?? defaultAdapter;
   const variant = props.variant ?? "full";
   const tokenFilter = props.tokens ?? null;
-  const [pickerToken, setPickerToken] = (0, import_react15.useState)(null);
-  const [showUniversal, setShowUniversal] = (0, import_react15.useState)(false);
-  const [removingKeys, setRemovingKeys] = (0, import_react15.useState)(/* @__PURE__ */ new Set());
+  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 rows = tokenFilter ? adapter.rows.filter((r) => tokenFilter.includes(r.token)) : adapter.rows;
   const visibleRows = rows.filter((r) => !removingKeys.has(r.key));
   const { titleFor } = useEntityTitles(
@@ -2823,7 +2929,7 @@ function titleize(token) {
 }
 
 // src/react/components/AssociationCaptureToolbar.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_design_system9 = require("@ai-matrx/design-system");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function AssociationCaptureToolbar({
@@ -2843,13 +2949,13 @@ function AssociationCaptureToolbar({
   const store = useAssociationsStore();
   const { capture } = useAssociationsUiPorts();
   const notifier = useNotifier();
-  const fileInputRef = (0, import_react16.useRef)(null);
-  const [isUploading, setIsUploading] = (0, import_react16.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react16.useState)(false);
-  const [isPicking, setIsPicking] = (0, import_react16.useState)(false);
-  const [namingDoc, setNamingDoc] = (0, import_react16.useState)(false);
-  const [docName, setDocName] = (0, import_react16.useState)("");
-  const [creatingDoc, setCreatingDoc] = (0, import_react16.useState)(false);
+  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 actions = {
     upload: (showActions?.upload ?? true) && Boolean(capture?.requestUpload),
     addFile: (showActions?.addFile ?? true) && Boolean(capture?.openFilePicker),
@@ -3155,4 +3261,1129 @@ function CaptureToolbarAction({
     }
   );
 }
+
+// src/react/components/AssociationEntitySelect.tsx
+var import_react18 = require("react");
+var import_design_system10 = require("@ai-matrx/design-system");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function AssociationEntitySelect({
+  token,
+  adapter,
+  className,
+  labelClassName,
+  align = "end",
+  showIcon = true,
+  renameActivation = "click",
+  emptyLabel,
+  iconClassName,
+  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 entityLabel = info.label.toLowerCase();
+  const close = () => {
+    setOpen(false);
+    setQuery("");
+    setCreating(false);
+    setDraftName("");
+  };
+  const create = async (title) => {
+    const name = title.trim();
+    if (!name || busy || !adapter.createAndAttach) return;
+    setBusy(true);
+    const id = await adapter.createAndAttach(name);
+    setBusy(false);
+    if (id) close();
+    else notifier.error(`Couldn't create the ${entityLabel}`);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: (0, import_design_system10.cn)(
+        "group/entity-ref flex min-w-0 items-center gap-0.5",
+        className
+      ),
+      children: [
+        showIcon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          InfoIcon,
+          {
+            className: (0, import_design_system10.cn)(
+              "size-3.5 shrink-0",
+              iconClassName ?? "text-muted-foreground"
+            ),
+            "aria-hidden": true
+          }
+        ) : null,
+        active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          import_design_system10.EditableLabel,
+          {
+            value: active.title,
+            onCommit: async (next) => {
+              const ok = await adapter.rename(active.id, next);
+              if (!ok) {
+                notifier.error(`Couldn't rename the ${entityLabel}`);
+                throw new Error("rename failed");
+              }
+            },
+            commitMode: "await",
+            activation: renameActivation,
+            ariaLabel: info.label,
+            className: (0, import_design_system10.cn)("max-w-[14rem]", labelClassName),
+            displayClassName: "text-xs font-medium text-foreground",
+            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)(
+          "span",
+          {
+            className: (0, import_design_system10.cn)(
+              "truncate px-1 text-xs font-medium text-muted-foreground",
+              labelClassName
+            ),
+            children: adapter.loading ? "\u2026" : emptyLabel ?? info.labelPlural
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.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)(
+                "button",
+                {
+                  type: "button",
+                  className: "inline-flex h-6 shrink-0 items-center gap-0.5 rounded-md px-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                  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: [
+                      activeIndex >= 0 ? activeIndex + 1 : "\u2014",
+                      "/",
+                      items.length
+                    ] }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime13.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)(
+                  import_design_system10.CommandInput,
+                  {
+                    value: query,
+                    onValueChange: setQuery,
+                    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)(
+                    import_design_system10.CommandItem,
+                    {
+                      value: `${item.title} ${item.id}`,
+                      onSelect: () => {
+                        if (item.id !== activeId)
+                          void adapter.setActive(item.id);
+                        close();
+                      },
+                      className: "group/entity-ref group gap-2",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          CheckIcon,
+                          {
+                            className: (0, import_design_system10.cn)(
+                              "size-3.5 shrink-0",
+                              item.id === activeId ? "opacity-100" : "opacity-0"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "min-w-0 flex-1 truncate", children: item.title }),
+                        DoorControls ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "span",
+                          {
+                            className: "inline-flex shrink-0 items-center",
+                            onPointerDown: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              DoorControls,
+                              {
+                                token,
+                                id: item.id,
+                                name: item.title
+                              }
+                            )
+                          }
+                        ) : null,
+                        adapter.detach && item.id !== activeId ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            onPointerDown: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              void adapter.detach?.(item.id);
+                            },
+                            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" })
+                          }
+                        ) : null
+                      ]
+                    },
+                    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)(
+                    "input",
+                    {
+                      autoFocus: true,
+                      type: "text",
+                      value: draftName,
+                      disabled: busy,
+                      placeholder: `New ${entityLabel} name\u2026`,
+                      onChange: (e) => setDraftName(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          void create(draftName);
+                        } else if (e.key === "Escape") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setCreating(false);
+                          setDraftName("");
+                        }
+                      },
+                      className: "h-6 w-full min-w-0 rounded-sm bg-transparent px-1 text-base outline-none focus:bg-background focus:ring-1 focus:ring-ring md:text-xs",
+                      "aria-label": `New ${entityLabel} name`
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.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"
+                    }
+                  )
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: busy,
+                    onClick: () => {
+                      if (query.trim()) void create(query);
+                      else setCreating(true);
+                    },
+                    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" }),
+                      query.trim() ? `Create "${query.trim()}"` : `New ${info.label}`
+                    ]
+                  }
+                ) }) : null
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react/components/CategorySelect.tsx
+var import_react19 = require("react");
+var import_design_system11 = require("@ai-matrx/design-system");
+
+// src/core/categoryHierarchy.ts
+function buildCategoryHierarchy(categories) {
+  const byId = new Map(categories.map((category) => [category.id, category]));
+  const hasHierarchy = categories.some(
+    (category) => category.parentId !== null && byId.has(category.parentId)
+  );
+  if (!hasHierarchy) {
+    return {
+      items: categories.map((category) => ({
+        category,
+        depth: 0,
+        parent: null,
+        displayName: category.name
+      })),
+      roots: categories.filter((category) => category.parentId === null),
+      hasHierarchy: false
+    };
+  }
+  const roots = categories.filter(
+    (category) => category.parentId === null || !byId.has(category.parentId)
+  );
+  const childrenByParent = /* @__PURE__ */ new Map();
+  for (const category of categories) {
+    if (!category.parentId || !byId.has(category.parentId)) continue;
+    const children = childrenByParent.get(category.parentId) ?? [];
+    children.push(category);
+    childrenByParent.set(category.parentId, children);
+  }
+  const items = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const root of roots) {
+    items.push({
+      category: root,
+      depth: 0,
+      parent: null,
+      displayName: root.name
+    });
+    seen.add(root.id);
+    for (const child of childrenByParent.get(root.id) ?? []) {
+      items.push({
+        category: child,
+        depth: 1,
+        parent: root,
+        displayName: `${root.name} / ${child.name}`
+      });
+      seen.add(child.id);
+    }
+  }
+  for (const category of categories) {
+    if (seen.has(category.id)) continue;
+    items.push({
+      category,
+      depth: 0,
+      parent: null,
+      displayName: category.name
+    });
+  }
+  return {
+    items,
+    roots: categories.filter((category) => category.parentId === null),
+    hasHierarchy: true
+  };
+}
+
+// src/react/components/CategorySelect.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var NONE = "__none__";
+var ROOT_PARENT = "__root__";
+function plural(noun) {
+  return /[^aeiou]y$/i.test(noun) ? `${noun.slice(0, -1)}ies` : `${noun}s`;
+}
+function CategorySelect({
+  dimension,
+  value,
+  onChange,
+  placeholder,
+  allowNone = true,
+  disabled,
+  allowCreate = true,
+  orgId,
+  noun = "category"
+}) {
+  const store = useAssociationsStore();
+  const notifier = useNotifier();
+  const {
+    categories,
+    status,
+    error,
+    create: createCategory,
+    reload
+  } = useCategories({ dimension });
+  const hierarchy = buildCategoryHierarchy(categories);
+  const [createParentId, setCreateParentId] = (0, import_react19.useState)(ROOT_PARENT);
+  const options = [
+    ...allowNone ? [{ value: NONE, label: "None", keywords: "none clear empty" }] : [],
+    ...hierarchy.hasHierarchy ? hierarchy.items.map(({ category, depth, parent }) => ({
+      value: category.id,
+      label: category.name,
+      // 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 })
+      ] })
+    })) : categories.map((category) => ({
+      value: category.id,
+      label: category.name
+    }))
+  ];
+  const selected = value ? hierarchy.items.find((item) => item.category.id === value)?.displayName ?? categories.find((category) => category.id === value)?.name ?? null : null;
+  const create = async (typed) => {
+    const name = typed.trim();
+    if (!name) return null;
+    const existing = categories.find(
+      (category) => category.name.toLowerCase() === name.toLowerCase()
+    );
+    if (existing) return existing.id;
+    let resolvedOrgId = orgId ?? null;
+    if (!resolvedOrgId && store.identity.ensureOrgId) {
+      try {
+        resolvedOrgId = await store.identity.ensureOrgId();
+      } catch (e) {
+        store.errorSink({
+          code: "ensure_org_failed",
+          message: "[CategorySelect] identity.ensureOrgId threw",
+          context: { error: e instanceof Error ? e.message : String(e) }
+        });
+      }
+    }
+    if (!resolvedOrgId) {
+      notifier.error(`Select an organization before creating a ${noun}.`);
+      return null;
+    }
+    const parentId = hierarchy.hasHierarchy && createParentId !== ROOT_PARENT ? createParentId : null;
+    const result = await createCategory({ name, orgId: resolvedOrgId, parentId });
+    if (!result.ok || !result.id) {
+      notifier.error(`Couldn't create that ${noun}`, {
+        ...result.error != null ? { description: result.error } : {}
+      });
+      return null;
+    }
+    await reload();
+    setCreateParentId(ROOT_PARENT);
+    const under = parentId ? categories.find((category) => category.id === parentId)?.name : null;
+    notifier.success(
+      `\u201C${name}\u201D is now one of your ${plural(noun)}${under ? ` \u2014 it sits under ${under}, and every screen that offers ${plural(noun)} offers it.` : ` \u2014 every screen that offers ${plural(noun)} offers it from now on.`}`
+    );
+    return result.id;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      import_design_system11.CreatablePicker,
+      {
+        value: value ?? (allowNone ? NONE : null),
+        onSelect: (next) => onChange(next === NONE ? null : next),
+        options,
+        placeholder,
+        searchPlaceholder: allowCreate ? `Search or add a ${noun}\u2026` : `Search ${plural(noun)}\u2026`,
+        noun,
+        ariaLabel: placeholder,
+        className: "text-sm",
+        ...disabled !== void 0 ? { disabled } : {},
+        loading: status === "loading",
+        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)(
+              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, {})
+              }
+            ),
+            /* @__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)(
+                import_design_system11.SelectItem,
+                {
+                  value: item.category.id,
+                  className: "text-xs",
+                  children: [
+                    "Under ",
+                    item.category.name
+                  ]
+                },
+                item.category.id
+              ))
+            ] })
+          ] })
+        } : {}
+      }
+    ),
+    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: [
+        "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
+  ] });
+}
+
+// src/react/components/CategoryTagPicker.tsx
+var import_react20 = require("react");
+var import_design_system12 = require("@ai-matrx/design-system");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ROOT_PARENT2 = "__root__";
+function CategoryTagPicker({
+  entityType,
+  entityId,
+  dimension,
+  edgeRole,
+  orgId,
+  addLabel = "Add tag",
+  icon: Icon = TagIcon,
+  allowCreate = true,
+  hierarchical,
+  emptyText = "No categories yet."
+}) {
+  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 {
+    categories,
+    create: createCategory,
+    reload: reloadCategories
+  } = useCategories({ dimension });
+  const { edges, setTargets } = useAssociations({
+    type: entityType,
+    id: entityId
+  });
+  const hierarchy = buildCategoryHierarchy(categories);
+  const showHierarchy = hierarchical ?? hierarchy.hasHierarchy;
+  const hierarchyById = new Map(
+    hierarchy.items.map((item) => [item.category.id, item])
+  );
+  const selectedIds = new Set(
+    edges.filter(
+      (e) => e.direction === "outgoing" && e.otherType === "category" && e.role === edgeRole
+    ).map((e) => e.otherId)
+  );
+  const selected = categories.filter((c) => selectedIds.has(c.id));
+  const toggle = async (categoryId) => {
+    if (writing) return;
+    setWriting(true);
+    try {
+      const next = selectedIds.has(categoryId) ? [...selectedIds].filter((id) => id !== categoryId) : [...selectedIds, categoryId];
+      const res = await setTargets({
+        targetType: "category",
+        targetIds: next,
+        ...orgId != null ? { orgId } : {},
+        role: edgeRole
+      });
+      if (!res.ok) {
+        store.errorSink({
+          code: "category_tag_set_targets_failed",
+          message: "[CategoryTagPicker] setTargets failed",
+          context: { entityType, entityId, edgeRole, error: res.error }
+        });
+        notifier.error(res.error ?? "Could not update categories");
+      }
+    } finally {
+      setWriting(false);
+    }
+  };
+  const createAndAttach = async () => {
+    const name = search.trim();
+    if (!name) return;
+    setCreating(true);
+    try {
+      let resolvedOrgId = orgId ?? null;
+      if (!resolvedOrgId && store.identity.ensureOrgId) {
+        try {
+          resolvedOrgId = await store.identity.ensureOrgId();
+        } catch (e) {
+          store.errorSink({
+            code: "ensure_org_failed",
+            message: "[CategoryTagPicker] identity.ensureOrgId threw",
+            context: { error: e instanceof Error ? e.message : String(e) }
+          });
+        }
+      }
+      if (!resolvedOrgId) {
+        store.errorSink({
+          code: "ensure_org_missing",
+          message: "[CategoryTagPicker] no org for the created category \u2014 pass `orgId` or bind `identity.ensureOrgId` on the store config",
+          context: { entityType, entityId, dimension }
+        });
+        notifier.error(
+          "Could not create the category \u2014 no organization is selected"
+        );
+        return;
+      }
+      const parentId = showHierarchy && createParentId !== ROOT_PARENT2 ? createParentId : null;
+      const createRes = await createCategory({
+        name,
+        orgId: resolvedOrgId,
+        parentId
+      });
+      if (!createRes.ok || !createRes.id) {
+        store.errorSink({
+          code: "category_tag_create_failed",
+          message: "[CategoryTagPicker] create failed",
+          context: { dimension, error: createRes.error }
+        });
+        notifier.error(createRes.error ?? "Could not create the category");
+        return;
+      }
+      await reloadCategories();
+      await toggle(createRes.id);
+      setSearch("");
+      setCreateParentId(ROOT_PARENT2);
+    } finally {
+      setCreating(false);
+    }
+  };
+  const filtered = categories.filter(
+    (c) => c.name.toLowerCase().includes(search.trim().toLowerCase())
+  );
+  const filteredHierarchy = hierarchy.items.filter(
+    (item) => item.displayName.toLowerCase().includes(search.trim().toLowerCase())
+  );
+  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)(
+      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)(
+            "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" })
+            }
+          )
+        ]
+      },
+      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)(
+        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" }),
+            selected.length === 0 ? addLabel : "Edit",
+            /* @__PURE__ */ (0, import_jsx_runtime15.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)(
+          import_design_system12.CommandInput,
+          {
+            placeholder: allowCreate ? "Search or create..." : "Search...",
+            value: search,
+            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)(
+            import_design_system12.CommandItem,
+            {
+              value: category.id,
+              keywords: parent ? [parent.name, category.name] : [],
+              onSelect: () => void toggle(category.id),
+              className: (0, import_design_system12.cn)("text-xs", depth === 1 && "pl-6"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  CheckIcon,
+                  {
+                    className: (0, import_design_system12.cn)(
+                      "mr-2 h-3.5 w-3.5",
+                      selectedIds.has(category.id) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                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 })
+              ]
+            },
+            category.id
+          )) : filtered.map((c) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            import_design_system12.CommandItem,
+            {
+              value: c.id,
+              onSelect: () => void toggle(c.id),
+              className: "text-xs",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  CheckIcon,
+                  {
+                    className: (0, import_design_system12.cn)(
+                      "mr-2 h-3.5 w-3.5",
+                      selectedIds.has(c.id) ? "opacity-100" : "opacity-0"
+                    )
+                  }
+                ),
+                c.name
+              ]
+            },
+            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)(
+                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))
+                    ] })
+                  ]
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              import_design_system12.CommandItem,
+              {
+                value: `__create__${search}`,
+                onSelect: () => void createAndAttach(),
+                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" }),
+                  "Create \u201C",
+                  search.trim(),
+                  "\u201D"
+                ]
+              }
+            )
+          ] }) : null
+        ] })
+      ] }) })
+    ] })
+  ] });
+}
+
+// src/react/components/CommentThread.tsx
+var import_react21 = require("react");
+var import_design_system13 = require("@ai-matrx/design-system");
+
+// src/react/relativeTime.ts
+var UNITS = [
+  { unit: "year", ms: 365 * 24 * 60 * 60 * 1e3 },
+  { unit: "month", ms: 30 * 24 * 60 * 60 * 1e3 },
+  { unit: "week", ms: 7 * 24 * 60 * 60 * 1e3 },
+  { unit: "day", ms: 24 * 60 * 60 * 1e3 },
+  { unit: "hour", ms: 60 * 60 * 1e3 },
+  { unit: "minute", ms: 60 * 1e3 }
+];
+function formatRelativeTime(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return iso;
+  const delta = t - now;
+  const magnitude = Math.abs(delta);
+  if (magnitude < 60 * 1e3) return "just now";
+  const rtf = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  for (const { unit, ms } of UNITS) {
+    if (magnitude >= ms) {
+      return rtf.format(Math.trunc(delta / ms), unit);
+    }
+  }
+  return "just now";
+}
+
+// src/react/components/CommentThread.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var AUTHOR_DOOR_TOKEN = "user";
+function resolveAuthor(comment, authorDisplay) {
+  const base2 = {
+    userId: comment.createdBy,
+    email: comment.author.email,
+    displayName: comment.author.displayName,
+    avatarUrl: comment.author.avatarUrl
+  };
+  const enriched = authorDisplay ? authorDisplay(base2) : null;
+  const name = enriched?.displayName ?? base2.displayName ?? base2.email ?? "Unknown user";
+  return {
+    name,
+    avatarUrl: enriched?.avatarUrl !== void 0 && enriched?.avatarUrl !== null ? enriched.avatarUrl : base2.avatarUrl,
+    userId: comment.createdBy
+  };
+}
+function AuthorAvatar({ author }) {
+  if (author.avatarUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "img",
+      {
+        src: author.avatarUrl,
+        alt: "",
+        className: "h-6 w-6 shrink-0 rounded-full object-cover"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "flex h-6 w-6 shrink-0 select-none items-center justify-center rounded-full bg-muted text-[11px] font-medium uppercase text-muted-foreground",
+      children: author.name.trim().charAt(0) || "?"
+    }
+  );
+}
+function AuthorName({
+  author,
+  entityDoors
+}) {
+  const DoorRef2 = entityDoors?.EntityRef;
+  if (DoorRef2 && author.userId) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      DoorRef2,
+      {
+        token: AUTHOR_DOOR_TOKEN,
+        id: author.userId,
+        name: author.name,
+        showIcon: false,
+        className: "text-sm font-medium text-foreground"
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium text-foreground", children: author.name });
+}
+function CommentComposer({
+  onSubmit,
+  placeholder = "Write a comment\u2026",
+  submitLabel = "Comment",
+  initialValue = "",
+  trailing,
+  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);
+  async function submit(e) {
+    e?.preventDefault();
+    const trimmed = body.trim();
+    if (!trimmed || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    const res = await onSubmit(trimmed);
+    setSubmitting(false);
+    if (!res.ok) {
+      const msg = res.error ?? "Could not save the comment";
+      setError(msg);
+      notifier.error(msg);
+      return;
+    }
+    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)(
+      "textarea",
+      {
+        value: body,
+        onChange: (e) => setBody(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void submit();
+        },
+        placeholder,
+        rows: 2,
+        autoFocus,
+        "aria-label": placeholder,
+        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" }),
+        submitLabel
+      ] }),
+      trailing
+    ] })
+  ] });
+}
+function CommentItem({
+  comment,
+  childrenOf,
+  depth,
+  thread,
+  orgId
+}) {
+  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 author = resolveAuthor(comment, authorDisplay);
+  const isOwn = thread.currentUserId !== null && comment.createdBy === thread.currentUserId;
+  const edited = comment.updatedAt !== comment.createdAt;
+  const replies = childrenOf.get(comment.id) ?? [];
+  async function confirmDelete() {
+    setDeleting(true);
+    const res = await thread.remove(comment.id);
+    setDeleting(false);
+    setConfirmingDelete(false);
+    if (!res.ok) {
+      notifier.error(res.error ?? "Could not delete the comment");
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      "data-comment-id": comment.id,
+      className: (0, import_design_system13.cn)(
+        "flex flex-col gap-1",
+        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)(
+            "span",
+            {
+              className: "text-xs text-muted-foreground",
+              title: comment.createdAt,
+              children: formatRelativeTime(comment.createdAt)
+            }
+          ),
+          edited && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "span",
+            {
+              className: "text-xs text-muted-foreground",
+              title: comment.updatedAt,
+              children: "(edited)"
+            }
+          )
+        ] }),
+        editing ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "pl-8", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          CommentComposer,
+          {
+            initialValue: comment.body,
+            submitLabel: "Save",
+            placeholder: "Edit your comment\u2026",
+            autoFocus: true,
+            onSubmit: async (body) => {
+              const res = await thread.edit(comment.id, body);
+              if (res.ok) setEditing(false);
+              return res;
+            },
+            trailing: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              import_design_system13.Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "ghost",
+                onClick: () => setEditing(false),
+                children: "Cancel"
+              }
+            )
+          }
+        ) }) : /* @__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)(
+            import_design_system13.Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "destructive",
+              disabled: deleting,
+              onClick: () => void confirmDelete(),
+              children: [
+                deleting && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SpinnerIcon, { className: "mr-1 h-3 w-3 animate-spin" }),
+                "Delete"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            import_design_system13.Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              disabled: deleting,
+              onClick: () => setConfirmingDelete(false),
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setReplying((v) => !v),
+              className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: "Reply"
+            }
+          ),
+          isOwn && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setEditing(true),
+                className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setConfirmingDelete(true),
+                className: "rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-destructive",
+                children: "Delete"
+              }
+            )
+          ] })
+        ] }) }),
+        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)(
+            CommentComposer,
+            {
+              submitLabel: "Reply",
+              placeholder: `Reply to ${author.name}\u2026`,
+              autoFocus: true,
+              onSubmit: async (body) => {
+                const res = await thread.add(body, {
+                  parentId: comment.id,
+                  orgId: orgId ?? null
+                });
+                if (res.ok) setReplying(false);
+                return res;
+              },
+              trailing: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                import_design_system13.Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: () => setReplying(false),
+                  children: "Cancel"
+                }
+              )
+            }
+          ) })
+        ] }),
+        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)(
+          CommentItem,
+          {
+            comment: reply,
+            childrenOf,
+            depth: depth + 1,
+            thread,
+            orgId
+          },
+          reply.id
+        )) })
+      ]
+    }
+  );
+}
+function buildCommentTree(comments) {
+  const byId = new Set(comments.map((c) => c.id));
+  const roots = [];
+  const childrenOf = /* @__PURE__ */ new Map();
+  for (const c of comments) {
+    if (c.parentId && byId.has(c.parentId)) {
+      const bucket = childrenOf.get(c.parentId);
+      if (bucket) bucket.push(c);
+      else childrenOf.set(c.parentId, [c]);
+    } else {
+      roots.push(c);
+    }
+  }
+  return { roots, childrenOf };
+}
+function CommentThread({
+  token,
+  id,
+  orgId,
+  showHeader = true,
+  className
+}) {
+  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)(
+        "button",
+        {
+          type: "button",
+          onClick: () => void thread.reload(),
+          "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" })
+        }
+      )
+    ] }),
+    thread.error && /* @__PURE__ */ (0, import_jsx_runtime16.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)(
+            import_design_system13.Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              disabled: thread.status === "loading",
+              onClick: () => void thread.reload(),
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    ),
+    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)(
+      CommentItem,
+      {
+        comment,
+        childrenOf,
+        depth: 0,
+        thread,
+        orgId
+      },
+      comment.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      CommentComposer,
+      {
+        onSubmit: (body) => thread.add(body, { orgId: orgId ?? null })
+      }
+    )
+  ] });
+}
 //# sourceMappingURL=index.cjs.map