@ai-matrx/associations 0.4.0 → 0.5.0

package/dist/react/index.cjs

@@ -35,12 +35,16 @@ __export(react_exports, {
   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,
@@ -48,6 +52,7 @@ __export(react_exports, {
   useAssociationsStore: () => useAssociationsStore,
   useAssociationsUiPorts: () => useAssociationsUiPorts,
   useCategories: () => useCategories,
+  useComments: () => useComments,
   useContainerLinks: () => useContainerLinks,
   useContainerLinksAdapter: () => useContainerLinksAdapter,
   useEntityRelationships: () => useEntityRelationships,
@@ -71,6 +76,7 @@ function AssociationsProvider({
   capture,
   pickerOverrides,
   entityDoors,
+  authorDisplay,
   children
 }) {
   const notifierWarned = (0, import_react.useRef)(false);
@@ -84,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
     }
@@ -824,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 = () => () => {
@@ -1302,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();
@@ -1317,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 })
@@ -1377,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
@@ -1387,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
@@ -1522,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: [
@@ -1574,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) {
@@ -1643,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({
@@ -1750,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;
@@ -1860,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) {
@@ -1872,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,
@@ -2045,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
@@ -2161,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) {
@@ -2278,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
@@ -2338,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,
@@ -2496,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) {
@@ -2536,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(
@@ -2850,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({
@@ -2870,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),
@@ -3184,7 +3263,7 @@ function CaptureToolbarAction({
 }
 
 // src/react/components/AssociationEntitySelect.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_design_system10 = require("@ai-matrx/design-system");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function AssociationEntitySelect({
@@ -3208,11 +3287,11 @@ function AssociationEntitySelect({
   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_react17.useState)(false);
-  const [query, setQuery] = (0, import_react17.useState)("");
-  const [creating, setCreating] = (0, import_react17.useState)(false);
-  const [draftName, setDraftName] = (0, import_react17.useState)("");
-  const [busy, setBusy] = (0, import_react17.useState)(false);
+  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);
@@ -3435,7 +3514,7 @@ function AssociationEntitySelect({
 }
 
 // src/react/components/CategorySelect.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_design_system11 = require("@ai-matrx/design-system");
 
 // src/core/categoryHierarchy.ts
@@ -3530,7 +3609,7 @@ function CategorySelect({
     reload
   } = useCategories({ dimension });
   const hierarchy = buildCategoryHierarchy(categories);
-  const [createParentId, setCreateParentId] = (0, import_react18.useState)(ROOT_PARENT);
+  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 }) => ({
@@ -3647,7 +3726,7 @@ function CategorySelect({
 }
 
 // src/react/components/CategoryTagPicker.tsx
-var import_react19 = require("react");
+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__";
@@ -3665,11 +3744,11 @@ function CategoryTagPicker({
 }) {
   const store = useAssociationsStore();
   const notifier = useNotifier();
-  const [open, setOpen] = (0, import_react19.useState)(false);
-  const [creating, setCreating] = (0, import_react19.useState)(false);
-  const [writing, setWriting] = (0, import_react19.useState)(false);
-  const [search, setSearch] = (0, import_react19.useState)("");
-  const [createParentId, setCreateParentId] = (0, import_react19.useState)(ROOT_PARENT2);
+  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,
@@ -3902,4 +3981,409 @@ function CategoryTagPicker({
     ] })
   ] });
 }
+
+// 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