@dxos/plugin-thread 0.6.13-main.ed424a1 → 0.6.13-staging.1e988a3

package/dist/lib/browser/index.mjs

@@ -1,6 +1,6 @@
 import {
   ThreadAction
-} from "./chunk-JFQZ5W2I.mjs";
+} from "./chunk-GKPZHUT3.mjs";
 import {
   ChatContainer,
   ChatHeading,
@@ -10,49 +10,71 @@ import {
   useAnalyticsCallback,
   useOnEditAnalytics,
   useStatus
-} from "./chunk-DIFHKCVY.mjs";
+} from "./chunk-P7ZE5N5M.mjs";
 import {
   THREAD_ITEM,
   THREAD_PLUGIN,
   meta_default
-} from "./chunk-5G3KL6TC.mjs";
+} from "./chunk-5IBJO53M.mjs";
 
 // packages/plugins/plugin-thread/src/ThreadPlugin.tsx
-import React6 from "react";
-import { NavigationAction, isLayoutParts, parseIntentPlugin, parseNavigationPlugin, parseMetadataResolverPlugin, resolvePlugin } from "@dxos/app-framework";
+import { Chat } from "@phosphor-icons/react";
+import { computed, effect } from "@preact/signals-core";
+import React5 from "react";
+import { LayoutAction, NavigationAction, parseIntentPlugin, parseNavigationPlugin, resolvePlugin, parseGraphPlugin, SLUG_PATH_SEPARATOR, SLUG_COLLECTION_INDICATOR, isLayoutParts, parseMetadataResolverPlugin, useResolvePlugins } from "@dxos/app-framework";
+import { getTypename } from "@dxos/echo-schema";
+import { create as create2 } from "@dxos/echo-schema";
 import { LocalStorageStore } from "@dxos/local-storage";
-import { log } from "@dxos/log";
+import { parseAttentionPlugin } from "@dxos/plugin-attention";
 import { parseClientPlugin } from "@dxos/plugin-client";
-import { createExtension, isActionGroup, toSignal } from "@dxos/plugin-graph";
+import { createExtension, isActionGroup } from "@dxos/plugin-graph";
+import { DocumentType } from "@dxos/plugin-markdown/types";
 import { ObservabilityAction } from "@dxos/plugin-observability/meta";
 import { SpaceAction } from "@dxos/plugin-space";
-import { ThreadType as ThreadType2, MessageType as MessageType2, ChannelType } from "@dxos/plugin-space/types";
-import { create as create2, getTypename } from "@dxos/react-client/echo";
-import { getSpace as getSpace3, fullyQualifiedId as fullyQualifiedId5, loadObjectReferences, parseFullyQualifiedId } from "@dxos/react-client/echo";
+import { ThreadType, MessageType as MessageType2, ChannelType } from "@dxos/plugin-space/types";
+import { getSpace as getSpace2, getTextInRange, Filter, createDocAccessor, fullyQualifiedId, loadObjectReferences } from "@dxos/react-client/echo";
+import { ScrollArea } from "@dxos/react-ui";
+import { createAttendableAttributes } from "@dxos/react-ui-attention";
+import { comments, createExternalCommentSync, listener as listener2 } from "@dxos/react-ui-editor";
 import { translations as threadTranslations } from "@dxos/react-ui-thread";
+import { nonNullable as nonNullable2 } from "@dxos/util";
 
 // packages/plugins/plugin-thread/src/components/index.ts
-import React5 from "react";
+import React4 from "react";
+
+// packages/plugins/plugin-thread/src/components/ThreadSettings.tsx
+import React from "react";
+import { SettingsValue } from "@dxos/plugin-settings";
+import { Input, useTranslation } from "@dxos/react-ui";
+var ThreadSettings = ({ settings }) => {
+  const { t } = useTranslation(THREAD_PLUGIN);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SettingsValue, {
+    label: t("settings standalone label")
+  }, /* @__PURE__ */ React.createElement(Input.Switch, {
+    checked: settings.standalone,
+    onCheckedChange: (checked) => settings.standalone = !!checked
+  })));
+};
 
 // packages/plugins/plugin-thread/src/components/CommentContainer.tsx
 import { CheckCircle, X } from "@phosphor-icons/react";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { create } from "@dxos/echo-schema";
 import { MessageType } from "@dxos/plugin-space/types";
-import { fullyQualifiedId, getSpace, useMembers } from "@dxos/react-client/echo";
+import { getSpace, useMembers } from "@dxos/react-client/echo";
 import { useIdentity } from "@dxos/react-client/halo";
-import { Button, Tag, Tooltip, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { Button, Tag, Tooltip, useThemeContext, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { createBasicExtensions, createThemeExtensions, listener } from "@dxos/react-ui-editor";
 import { getSize, hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
 import { MessageTextbox, Thread, ThreadFooter, ThreadHeading } from "@dxos/react-ui-thread";
 import { nonNullable } from "@dxos/util";
 var sizeClass = getSize(4);
 var ToggleResolvedButton = ({ isResolved, onResolve }) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const { t } = useTranslation2(THREAD_PLUGIN);
   const label = t(isResolved ? "mark as unresolved label" : "mark as resolved label");
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     variant: "ghost",
     "data-testid": "thread.toggle-resolved",
     onClick: onResolve,
@@ -60,23 +82,23 @@ var ToggleResolvedButton = ({ isResolved, onResolve }) => {
       "min-bs-0 p-1",
       !isResolved && hoverableControlItem
     ]
-  }, /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, label), isResolved ? /* @__PURE__ */ React.createElement(CheckCircle, {
+  }, label), isResolved ? /* @__PURE__ */ React2.createElement(CheckCircle, {
     className: sizeClass,
     weight: "fill"
-  }) : /* @__PURE__ */ React.createElement(CheckCircle, {
+  }) : /* @__PURE__ */ React2.createElement(CheckCircle, {
     className: sizeClass
-  }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
     classNames: "z-[21]"
-  }, label, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
+  }, label, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var DeleteThreadButton = ({ onDelete }) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const { t } = useTranslation2(THREAD_PLUGIN);
   const label = t("delete thread label");
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Button, {
     variant: "ghost",
     "data-testid": "thread.delete",
     onClick: onDelete,
@@ -84,23 +106,24 @@ var DeleteThreadButton = ({ onDelete }) => {
       "min-bs-0 p-1",
       hoverableControlItem
     ]
-  }, /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, label), /* @__PURE__ */ React.createElement(X, {
+  }, label), /* @__PURE__ */ React2.createElement(X, {
     className: sizeClass
-  }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
     classNames: "z-[21]"
-  }, label, /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))));
+  }, label, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
-var CommentContainer = ({ thread, detached, context, current, onAttend, onThreadDelete, onMessageDelete, onResolve, onComment }) => {
+var CommentContainer = ({ thread, detached, context, current, autoFocusTextbox, onAttend, onThreadDelete, onMessageDelete, onResolve, onComment }) => {
   const identity = useIdentity();
   const space = getSpace(thread);
   const members = useMembers(space?.key);
-  const activity = useStatus(space, fullyQualifiedId(thread));
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const activity = useStatus(space, thread.id);
+  const { t } = useTranslation2(THREAD_PLUGIN);
   const threadScrollRef = useRef(null);
+  const [autoFocus, setAutoFocus] = useState(!!autoFocusTextbox);
   const { themeMode } = useThemeContext();
-  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
+  const textboxMetadata = getMessageMetadata(thread.id, identity);
   const [_count, _setCount] = useState(0);
   const rerenderEditor = () => _setCount((count) => count + 1);
   const messageRef = useRef("");
@@ -118,6 +141,11 @@ var CommentContainer = ({ thread, detached, context, current, onAttend, onThread
   ], [
     _count
   ]);
+  useEffect(() => {
+    setAutoFocus(!!autoFocusTextbox);
+  }, [
+    autoFocusTextbox
+  ]);
   const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
     behavior,
     block: "end"
@@ -136,6 +164,7 @@ var CommentContainer = ({ thread, detached, context, current, onAttend, onThread
     }));
     onComment?.(thread);
     messageRef.current = "";
+    setAutoFocus(true);
     scrollToEnd("instant");
     rerenderEditor();
     return true;
@@ -143,42 +172,44 @@ var CommentContainer = ({ thread, detached, context, current, onAttend, onThread
     thread,
     identity
   ]);
-  return /* @__PURE__ */ React.createElement(Thread, {
+  const handleDeleteMessage = (id) => onMessageDelete?.(id);
+  return /* @__PURE__ */ React2.createElement(Thread, {
     onClickCapture: onAttend,
     onFocusCapture: onAttend,
     current,
-    id: fullyQualifiedId(thread)
-  }, /* @__PURE__ */ React.createElement("div", {
+    id: thread.id
+  }, /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: mx("col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]", hoverableControls, hoverableFocusedWithinControls)
-  }, detached ? /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  }, detached ? /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React.createElement(ThreadHeading, {
+  }, /* @__PURE__ */ React2.createElement(ThreadHeading, {
     detached: true
-  }, thread.name ?? t("thread title placeholder"))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
+  }, thread.name ?? t("thread title placeholder"))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
     classNames: "z-[21]",
     side: "top"
-  }, t("detached thread label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))) : /* @__PURE__ */ React.createElement(ThreadHeading, null, thread.name ?? t("thread title placeholder")), /* @__PURE__ */ React.createElement("div", {
+  }, t("detached thread label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null)))) : /* @__PURE__ */ React2.createElement(ThreadHeading, null, thread.name ?? t("thread title placeholder")), /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-row items-center pli-1"
-  }, thread.status === "staged" && /* @__PURE__ */ React.createElement(Tag, {
+  }, thread.status === "staged" && /* @__PURE__ */ React2.createElement(Tag, {
     palette: "neutral"
-  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React.createElement(ToggleResolvedButton, {
+  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React2.createElement(ToggleResolvedButton, {
     isResolved: thread?.status === "resolved",
     onResolve
-  }), onThreadDelete && /* @__PURE__ */ React.createElement(DeleteThreadButton, {
+  }), onThreadDelete && /* @__PURE__ */ React2.createElement(DeleteThreadButton, {
     onDelete: onThreadDelete
-  }))), thread.messages.filter(nonNullable).map((message) => /* @__PURE__ */ React.createElement(MessageContainer, {
+  }))), thread.messages.filter(nonNullable).map((message) => /* @__PURE__ */ React2.createElement(MessageContainer, {
     key: message.id,
     message,
     members,
-    onDelete: (id) => onMessageDelete?.(id)
-  })), /* @__PURE__ */ React.createElement(MessageTextbox, {
+    onDelete: handleDeleteMessage
+  })), /* @__PURE__ */ React2.createElement(MessageTextbox, {
     extensions,
+    autoFocus,
     onSend: handleCreate,
     ...textboxMetadata
-  }), /* @__PURE__ */ React.createElement(ThreadFooter, {
+  }), /* @__PURE__ */ React2.createElement(ThreadFooter, {
     activity
-  }, t("activity message")), /* @__PURE__ */ React.createElement("div", {
+  }, t("activity message")), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: "bs-px -mbs-px",
     ref: threadScrollRef
@@ -186,15 +217,26 @@ var CommentContainer = ({ thread, detached, context, current, onAttend, onThread
 };
 
 // packages/plugins/plugin-thread/src/components/CommentsContainer.tsx
-import { ChatText } from "@phosphor-icons/react";
-import React2, { useEffect } from "react";
-import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation2, Trans } from "@dxos/react-ui";
+import { ChatText, Quotes } from "@phosphor-icons/react";
+import React3, { useEffect as useEffect2 } from "react";
+import { useTranslation as useTranslation3, Trans } from "@dxos/react-ui";
+import { PlankHeading, plankHeadingIconProps } from "@dxos/react-ui-deck";
 import { descriptionText, mx as mx2 } from "@dxos/react-ui-theme";
-var CommentsContainer = ({ threads: threads2, detached = [], currentId, showResolvedThreads, onThreadAttend, onThreadDelete, onMessageDelete, onThreadToggleResolved, ...props }) => {
-  const { t } = useTranslation2(THREAD_PLUGIN);
-  const filteredThreads = showResolvedThreads ? threads2 : threads2.filter((thread) => !(thread?.status === "resolved"));
-  useEffect(() => {
+var CommentsHeading = ({ attendableId }) => {
+  const { t } = useTranslation3(THREAD_PLUGIN);
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "flex items-center"
+  }, /* @__PURE__ */ React3.createElement(PlankHeading.Button, {
+    attendableId
+  }, /* @__PURE__ */ React3.createElement(Quotes, plankHeadingIconProps)), /* @__PURE__ */ React3.createElement(PlankHeading.Label, {
+    attendableId
+  }, t("comments heading")));
+};
+var CommentsContainer = ({ threads, detached = [], currentId, autoFocusCurrentTextbox, showResolvedThreads, onThreadAttend, onThreadDelete, onMessageDelete, onThreadToggleResolved, ...props }) => {
+  const { t } = useTranslation3(THREAD_PLUGIN);
+  const filteredThreads = showResolvedThreads ? threads : threads.filter((thread) => !(thread?.status === "resolved"));
+  useEffect2(() => {
     if (currentId) {
       document.getElementById(currentId)?.scrollIntoView({
         behavior: "smooth",
@@ -204,260 +246,44 @@ var CommentsContainer = ({ threads: threads2, detached = [], currentId, showReso
   }, [
     currentId
   ]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, filteredThreads.length > 0 ? filteredThreads.map((thread) => {
-    const threadId = fullyQualifiedId2(thread);
-    return /* @__PURE__ */ React2.createElement(CommentContainer, {
-      key: threadId,
-      thread,
-      current: currentId === threadId,
-      detached: detached.includes(threadId),
-      ...onThreadAttend && {
-        onAttend: () => onThreadAttend(thread)
-      },
-      ...onThreadDelete && {
-        onThreadDelete: () => onThreadDelete(thread)
-      },
-      ...onMessageDelete && {
-        onMessageDelete: (messageId) => onMessageDelete(thread, messageId)
-      },
-      ...onThreadToggleResolved && {
-        onResolve: () => onThreadToggleResolved(thread)
-      },
-      ...props
-    });
-  }) : /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, filteredThreads.length > 0 ? filteredThreads.map((thread) => /* @__PURE__ */ React3.createElement(CommentContainer, {
+    key: thread.id,
+    thread,
+    current: currentId === thread.id,
+    detached: detached.includes(thread.id),
+    autoFocusTextbox: autoFocusCurrentTextbox && currentId === thread.id,
+    ...onThreadAttend && {
+      onAttend: () => onThreadAttend(thread)
+    },
+    ...onThreadDelete && {
+      onThreadDelete: () => onThreadDelete(thread)
+    },
+    ...onMessageDelete && {
+      onMessageDelete: (messageId) => onMessageDelete(thread, messageId)
+    },
+    ...onThreadToggleResolved && {
+      onResolve: () => onThreadToggleResolved(thread)
+    },
+    ...props
+  })) : /* @__PURE__ */ React3.createElement("div", {
     role: "alert",
     className: mx2(descriptionText, "place-self-center border border-dashed border-neutral-400/50 rounded-lg text-center p-4 m-4")
-  }, /* @__PURE__ */ React2.createElement("h2", {
+  }, /* @__PURE__ */ React3.createElement("h2", {
     className: "mbe-2 font-medium text-baseText"
-  }, t("no comments title")), /* @__PURE__ */ React2.createElement("p", null, /* @__PURE__ */ React2.createElement(Trans, {
+  }, t("no comments title")), /* @__PURE__ */ React3.createElement("p", null, /* @__PURE__ */ React3.createElement(Trans, {
     t,
     i18nKey: "no comments message",
     components: {
-      commentIcon: /* @__PURE__ */ React2.createElement(ChatText, {
+      commentIcon: /* @__PURE__ */ React3.createElement(ChatText, {
         className: "inline-block"
       })
     }
   }))));
 };
 
-// packages/plugins/plugin-thread/src/components/ThreadComplementary.tsx
-import React3, { useEffect as useEffect2, useMemo as useMemo2 } from "react";
-import { LayoutAction, useIntentDispatcher, useResolvePlugins } from "@dxos/app-framework";
-import { fullyQualifiedId as fullyQualifiedId3 } from "@dxos/react-client/echo";
-import { ScrollArea } from "@dxos/react-ui";
-import { useAttended } from "@dxos/react-ui-attention";
-import { nonNullable as nonNullable2 } from "@dxos/util";
-var providesThreadsConfig = (plugin) => "thread" in plugin.provides ? plugin : void 0;
-var ThreadComplementary = ({ role, subject, drafts, current, showResolvedThreads }) => {
-  const dispatch = useIntentDispatcher();
-  const threadsIntegrators = useResolvePlugins(providesThreadsConfig);
-  const threadProvides = useMemo2(() => threadsIntegrators.map((p) => p.provides.thread), [
-    threadsIntegrators
-  ]);
-  const createSort = useMemo2(() => threadProvides.find((p) => p.predicate(subject))?.createSort, [
-    threadProvides,
-    subject
-  ]);
-  const sort = useMemo2(() => createSort?.(subject), [
-    createSort,
-    subject
-  ]);
-  const threads2 = useMemo2(() => {
-    return subject.threads.concat(drafts ?? []).filter(nonNullable2);
-  }, [
-    JSON.stringify(subject.threads),
-    JSON.stringify(drafts)
-  ]);
-  const detachedIds = useMemo2(() => {
-    return threads2.filter(({ anchor }) => !anchor).map((thread) => fullyQualifiedId3(thread));
-  }, [
-    threads2
-  ]);
-  useEffect2(() => {
-    if (!sort) {
-      return;
-    }
-    threads2.sort((a, b) => sort(a?.anchor, b?.anchor));
-  }, [
-    sort,
-    threads2
-  ]);
-  const attended = useAttended();
-  const qualifiedSubjectId = fullyQualifiedId3(subject);
-  return /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: "contents"
-  }, /* @__PURE__ */ React3.createElement(ScrollArea.Root, {
-    classNames: "row-span-2"
-  }, /* @__PURE__ */ React3.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React3.createElement(CommentsContainer, {
-    threads: threads2,
-    detached: detachedIds,
-    currentId: attended.includes(qualifiedSubjectId) ? current : void 0,
-    showResolvedThreads,
-    onThreadAttend: (thread) => {
-      const threadId = fullyQualifiedId3(thread);
-      if (current !== threadId) {
-        current = threadId;
-        void dispatch?.([
-          {
-            action: LayoutAction.SCROLL_INTO_VIEW,
-            data: {
-              id: fullyQualifiedId3(subject),
-              thread: threadId,
-              cursor: thread.anchor
-            }
-          }
-        ]);
-      }
-    },
-    onThreadDelete: (thread) => {
-      return dispatch({
-        plugin: THREAD_PLUGIN,
-        action: ThreadAction.DELETE,
-        data: {
-          subject,
-          thread
-        }
-      });
-    },
-    onMessageDelete: (thread, messageId) => dispatch({
-      plugin: THREAD_PLUGIN,
-      action: ThreadAction.DELETE_MESSAGE,
-      data: {
-        subject,
-        thread,
-        messageId
-      }
-    }),
-    onThreadToggleResolved: (thread) => dispatch({
-      plugin: THREAD_PLUGIN,
-      action: ThreadAction.TOGGLE_RESOLVED,
-      data: {
-        thread
-      }
-    }),
-    onComment: (thread) => {
-      void dispatch({
-        action: ThreadAction.ON_MESSAGE_ADD,
-        data: {
-          thread,
-          subject
-        }
-      });
-    }
-  }), /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: "bs-10"
-  }), /* @__PURE__ */ React3.createElement(ScrollArea.Scrollbar, null, /* @__PURE__ */ React3.createElement(ScrollArea.Thumb, null)))));
-};
-
-// packages/plugins/plugin-thread/src/components/ThreadSettings.tsx
-import React4 from "react";
-import { SettingsValue } from "@dxos/plugin-settings";
-import { Input, useTranslation as useTranslation3 } from "@dxos/react-ui";
-var ThreadSettings = ({ settings }) => {
-  const { t } = useTranslation3(THREAD_PLUGIN);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(SettingsValue, {
-    label: t("settings standalone label")
-  }, /* @__PURE__ */ React4.createElement(Input.Switch, {
-    checked: settings.standalone,
-    onCheckedChange: (checked) => settings.standalone = !!checked
-  })));
-};
-
 // packages/plugins/plugin-thread/src/components/index.ts
-var ThreadMain = React5.lazy(() => import("./ThreadMain-FZAZVPHO.mjs"));
-var ThreadArticle = React5.lazy(() => import("./ThreadArticle-53PBPWLD.mjs"));
-
-// packages/plugins/plugin-thread/src/extensions/threads.ts
-import { EditorView } from "@codemirror/view";
-import { computed, effect } from "@preact/signals-core";
-import { ThreadType } from "@dxos/plugin-space/types";
-import { getSpace as getSpace2, getTextInRange, createDocAccessor, fullyQualifiedId as fullyQualifiedId4 } from "@dxos/react-client/echo";
-import { comments, createExternalCommentSync } from "@dxos/react-ui-editor";
-import { nonNullable as nonNullable3 } from "@dxos/util";
-var getName = (doc, anchor) => {
-  if (doc.content) {
-    const [start, end] = anchor.split(":");
-    return getTextInRange(createDocAccessor(doc.content, [
-      "content"
-    ]), start, end);
-  }
-};
-var threads = (state, doc, dispatch) => {
-  const space = doc && getSpace2(doc);
-  if (!doc || !space || !dispatch) {
-    return [
-      comments()
-    ];
-  }
-  const threads2 = computed(() => [
-    ...doc.threads.filter(nonNullable3),
-    ...state.drafts[fullyQualifiedId4(doc)] ?? []
-  ].filter((thread) => !(thread?.status === "resolved")));
-  return [
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        doc.threads.forEach((thread) => {
-          if (thread?.anchor) {
-            const name = getName(doc, thread.anchor);
-            if (name && name !== thread.name) {
-              thread.name = name;
-            }
-          }
-        });
-      }
-    }),
-    createExternalCommentSync(fullyQualifiedId4(doc), (sink) => effect(() => sink()), () => threads2.value.filter((thread) => thread?.anchor).map((thread) => ({
-      id: fullyQualifiedId4(thread),
-      cursor: thread.anchor
-    }))),
-    comments({
-      id: fullyQualifiedId4(doc),
-      onCreate: ({ cursor }) => {
-        const name = getName(doc, cursor);
-        void dispatch({
-          action: ThreadAction.CREATE,
-          data: {
-            cursor,
-            name,
-            subject: doc
-          }
-        });
-      },
-      onDelete: ({ id }) => {
-        const draft = state.drafts[fullyQualifiedId4(doc)];
-        if (draft) {
-          const index = draft.findIndex((thread2) => fullyQualifiedId4(thread2) === id);
-          if (index !== -1) {
-            draft.splice(index, 1);
-          }
-        }
-        const thread = doc.threads.find((thread2) => thread2?.id === id);
-        if (thread) {
-          thread.anchor = void 0;
-        }
-      },
-      onUpdate: ({ id, cursor }) => {
-        const thread = state.drafts[fullyQualifiedId4(doc)]?.find((thread2) => fullyQualifiedId4(thread2) === id) ?? doc.threads.find((thread2) => thread2?.id === id);
-        if (thread instanceof ThreadType && thread.anchor) {
-          thread.name = getName(doc, thread.anchor);
-          thread.anchor = cursor;
-        }
-      },
-      onSelect: ({ selection: { current, closest } }) => {
-        void dispatch({
-          action: ThreadAction.SELECT,
-          data: {
-            current: current ?? closest,
-            skipOpen: true
-          }
-        });
-      }
-    })
-  ];
-};
+var ThreadMain = React4.lazy(() => import("./ThreadMain-ZDCRC6RG.mjs"));
+var ThreadArticle = React4.lazy(() => import("./ThreadArticle-O64ZECMF.mjs"));
 
 // packages/plugins/plugin-thread/src/translations.ts
 var translations_default = [
@@ -496,14 +322,14 @@ var translations_default = [
 ];
 
 // packages/plugins/plugin-thread/src/ThreadPlugin.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-thread/src/ThreadPlugin.tsx";
 var initialViewState = {
   showResolvedThreads: false
 };
+var providesThreadsConfig = (plugin) => "thread" in plugin.provides ? plugin : void 0;
 var ThreadPlugin = () => {
   const settings = new LocalStorageStore(THREAD_PLUGIN);
   const state = create2({
-    drafts: {}
+    staging: {}
   });
   const viewStore = create2({});
   const getViewState = (subjectId) => {
@@ -514,8 +340,10 @@ var ThreadPlugin = () => {
     }
     return viewStore[subjectId];
   };
+  let attentionPlugin;
   let navigationPlugin;
   let intentPlugin;
+  let dispatch;
   const unsubscribeCallbacks = [];
   return {
     meta: meta_default,
@@ -526,8 +354,36 @@ var ThreadPlugin = () => {
           allowUndefined: true
         })
       });
+      attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       navigationPlugin = resolvePlugin(plugins, parseNavigationPlugin);
       intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
+      dispatch = intentPlugin?.provides.intent.dispatch;
+      const graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+      const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
+      if (!client) {
+        return;
+      }
+      const channelsQuery = client.spaces.query(Filter.schema(ChannelType));
+      const queryUnsubscribe = channelsQuery.subscribe();
+      const unsubscribe = effect(() => {
+        const attention = attentionPlugin?.provides.attention;
+        if (!attention?.attended) {
+          return;
+        }
+        const firstAttendedNodeWithComments = Array.from(attention.attended).map((id) => graphPlugin?.provides.graph.findNode(id)).find((node) => node?.data instanceof DocumentType && (node.data.threads?.length ?? 0) > 0);
+        if (firstAttendedNodeWithComments) {
+          void intentPlugin?.provides.intent.dispatch({
+            action: NavigationAction.OPEN,
+            data: {
+              activeParts: {
+                complementary: `${firstAttendedNodeWithComments.id}${SLUG_PATH_SEPARATOR}comments`
+              }
+            }
+          });
+        }
+      });
+      unsubscribeCallbacks.push(queryUnsubscribe);
+      unsubscribeCallbacks.push(unsubscribe);
     },
     unload: async () => {
       unsubscribeCallbacks.forEach((unsubscribe) => unsubscribe());
@@ -543,11 +399,12 @@ var ThreadPlugin = () => {
                 ns: THREAD_PLUGIN
               }
             ],
-            icon: "ph--chat--regular",
+            icon: (props) => /* @__PURE__ */ React5.createElement(Chat, props),
+            iconSymbol: "ph--chat--regular",
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (channel) => loadObjectReferences(channel, (channel2) => channel2.threads)
           },
-          [ThreadType2.typename]: {
+          [ThreadType.typename]: {
             // TODO(wittjosiah): Move out of metadata.
             loadReferences: (thread) => loadObjectReferences(thread, (thread2) => thread2.messages)
           },
@@ -583,16 +440,16 @@ var ThreadPlugin = () => {
       echo: {
         schema: [
           ChannelType,
-          ThreadType2,
+          ThreadType,
           MessageType2
         ]
       },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-          const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
+          const dispatch2 = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
           const metadataResolver = resolvePlugin(plugins, parseMetadataResolverPlugin)?.provides.metadata.resolver;
-          if (!client || !dispatch || !metadataResolver) {
+          if (!client || !dispatch2 || !metadataResolver) {
             return [];
           }
           return [
@@ -602,36 +459,29 @@ var ThreadPlugin = () => {
                 if (!id.endsWith("~comments")) {
                   return;
                 }
-                const [subjectId] = id.split("~");
-                const [spaceId, objectId] = parseFullyQualifiedId(subjectId);
+                const docId = id.split("~").at(0);
+                const [spaceId, objectId] = docId?.split(":") ?? [];
                 const space = client.spaces.get().find((space2) => space2.id === spaceId);
-                const object = toSignal((onChange) => {
-                  const timeout = setTimeout(async () => {
-                    await space?.db.loadObjectById(objectId);
-                    onChange();
-                  });
-                  return () => clearTimeout(timeout);
-                }, () => space?.db.getObjectById(objectId), subjectId);
-                if (!object || !subjectId) {
+                const doc = space?.db.getObjectById(objectId);
+                if (!doc || !docId) {
                   return;
                 }
-                const meta = metadataResolver(getTypename(object) ?? "");
-                const label = meta.label?.(object) || object.name || meta.placeholder || [
+                const docMeta = metadataResolver(getTypename(doc) ?? "");
+                const label = docMeta.label?.(doc) || doc.name || docMeta.placeholder || [
                   "unnamed object threads label",
                   {
                     ns: THREAD_PLUGIN
                   }
                 ];
-                const viewState = getViewState(subjectId);
+                const viewState = getViewState(docId);
                 return {
                   id,
                   type: "orphan-comments-for-subject",
-                  data: null,
+                  data: doc,
                   properties: {
-                    icon: "ph--chat-text--regular",
+                    icon: meta_default.iconComponent,
                     label,
-                    showResolvedThreads: viewState.showResolvedThreads,
-                    object
+                    showResolvedThreads: viewState.showResolvedThreads
                   }
                 };
               },
@@ -645,7 +495,7 @@ var ThreadPlugin = () => {
                 const toggle = () => {
                   const newToggleState = !viewState.showResolvedThreads;
                   viewState.showResolvedThreads = newToggleState;
-                  void dispatch({
+                  void dispatch2({
                     action: ObservabilityAction.SEND_EVENT,
                     data: {
                       name: "threads.toggle-show-resolved",
@@ -670,8 +520,7 @@ var ThreadPlugin = () => {
                       ],
                       menuItemType: "toggle",
                       isChecked: viewState.showResolvedThreads,
-                      testId: "threadPlugin.toggleShowResolved",
-                      icon: viewState.showResolvedThreads ? "ph--eye-slash--regular" : "ph--eye--regular"
+                      testId: "threadPlugin.toggleShowResolved"
                     }
                   }
                 ];
@@ -693,7 +542,7 @@ var ThreadPlugin = () => {
                   {
                     id: `${THREAD_PLUGIN}/create/${node.id}`,
                     data: async () => {
-                      await dispatch([
+                      await dispatch2([
                         {
                           plugin: THREAD_PLUGIN,
                           action: ThreadAction.CREATE
@@ -716,7 +565,8 @@ var ThreadPlugin = () => {
                           ns: THREAD_PLUGIN
                         }
                       ],
-                      icon: "ph--chat--regular",
+                      icon: (props) => /* @__PURE__ */ React5.createElement(Chat, props),
+                      iconSymbol: "ph--chat--regular",
                       testId: "threadPlugin.createObject"
                     }
                   }
@@ -730,17 +580,20 @@ var ThreadPlugin = () => {
         component: ({ data, role }) => {
           switch (role) {
             case "main": {
-              return data.active instanceof ChannelType && data.active.threads[0] ? /* @__PURE__ */ React6.createElement(ThreadMain, {
+              return data.active instanceof ChannelType && data.active.threads[0] ? /* @__PURE__ */ React5.createElement(ThreadMain, {
                 thread: data.active.threads[0]
               }) : null;
             }
             case "settings": {
-              return data.plugin === meta_default.id ? /* @__PURE__ */ React6.createElement(ThreadSettings, {
+              return data.plugin === meta_default.id ? /* @__PURE__ */ React5.createElement(ThreadSettings, {
                 settings: settings.values
               }) : null;
             }
-            case "article": {
+            case "article":
+            case "complementary": {
               const location = navigationPlugin?.provides.location;
+              const threadsIntegrators = useResolvePlugins(providesThreadsConfig);
+              const threadProvides = threadsIntegrators.map((p) => p.provides.thread);
               if (data.object instanceof ChannelType && data.object.threads[0]) {
                 const channel = data.object;
                 if (isLayoutParts(location?.active) && location.active.main) {
@@ -748,38 +601,103 @@ var ThreadPlugin = () => {
                   const currentPosition = layoutEntries.findIndex((entry) => channel.id === entry.id);
                   if (currentPosition > 0) {
                     const objectToTheLeft = layoutEntries[currentPosition - 1];
-                    const context = getSpace3(data.object)?.db.getObjectById(objectToTheLeft.id);
-                    return /* @__PURE__ */ React6.createElement(ThreadArticle, {
+                    const context = getSpace2(data.object)?.db.getObjectById(objectToTheLeft.id);
+                    return /* @__PURE__ */ React5.createElement(ThreadArticle, {
                       thread: data.object.threads[0],
                       context
                     });
                   }
                 }
-                return /* @__PURE__ */ React6.createElement(ThreadArticle, {
+                return /* @__PURE__ */ React5.createElement(ThreadArticle, {
                   thread: data.object.threads[0]
                 });
               }
-              if (data.subject instanceof ThreadType2) {
-                return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(ChatHeading, {
+              if (data.subject instanceof ThreadType) {
+                return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(ChatHeading, {
                   attendableId: data.subject.id
-                }), /* @__PURE__ */ React6.createElement(ChatContainer, {
+                }), /* @__PURE__ */ React5.createElement(ChatContainer, {
                   thread: data.subject
                 }));
               }
-              break;
-            }
-            case "complementary--comments": {
               if (data.subject && typeof data.subject === "object" && "threads" in data.subject && Array.isArray(data.subject.threads)) {
-                const { showResolvedThreads } = getViewState(fullyQualifiedId5(data.subject));
-                return /* @__PURE__ */ React6.createElement(ThreadComplementary, {
-                  role,
-                  subject: data.subject,
-                  drafts: state.drafts[fullyQualifiedId5(data.subject)],
-                  current: state.current,
-                  showResolvedThreads
-                });
+                const threads = data.subject.threads.concat(state.staging[fullyQualifiedId(data.subject)]).filter(nonNullable2);
+                const createSort = threadProvides.find((p) => p.predicate(data.subject))?.createSort;
+                if (createSort) {
+                  const sort = createSort(data.subject);
+                  threads.sort((a, b) => sort(a.anchor, b.anchor));
+                }
+                const detached = data.subject.threads.filter(nonNullable2).filter(({ anchor }) => !anchor).map((thread) => thread.id);
+                const qualifiedSubjectId = fullyQualifiedId(data.subject);
+                const attention = attentionPlugin?.provides.attention?.attended ?? /* @__PURE__ */ new Set([
+                  qualifiedSubjectId
+                ]);
+                const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
+                const { showResolvedThreads } = getViewState(qualifiedSubjectId);
+                return /* @__PURE__ */ React5.createElement("div", {
+                  role: "none",
+                  className: "contents group/attention",
+                  ...attendableAttrs
+                }, role === "complementary" && /* @__PURE__ */ React5.createElement(CommentsHeading, {
+                  attendableId: qualifiedSubjectId
+                }), /* @__PURE__ */ React5.createElement(ScrollArea.Root, {
+                  classNames: "row-span-2"
+                }, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React5.createElement(CommentsContainer, {
+                  threads,
+                  detached,
+                  currentId: attention.has(qualifiedSubjectId) ? state.current : void 0,
+                  autoFocusCurrentTextbox: state.focus,
+                  showResolvedThreads,
+                  onThreadAttend: (thread) => {
+                    if (state.current !== thread.id) {
+                      state.current = thread.id;
+                      void dispatch?.({
+                        action: LayoutAction.SCROLL_INTO_VIEW,
+                        data: {
+                          id: fullyQualifiedId(data.subject),
+                          thread: fullyQualifiedId(thread),
+                          cursor: thread.anchor
+                        }
+                      });
+                    }
+                  },
+                  onThreadDelete: (thread) => dispatch?.({
+                    plugin: THREAD_PLUGIN,
+                    action: ThreadAction.DELETE,
+                    data: {
+                      subject: data.subject,
+                      thread
+                    }
+                  }),
+                  onMessageDelete: (thread, messageId) => dispatch?.({
+                    plugin: THREAD_PLUGIN,
+                    action: ThreadAction.DELETE_MESSAGE,
+                    data: {
+                      subject: data.subject,
+                      thread,
+                      messageId
+                    }
+                  }),
+                  onThreadToggleResolved: (thread) => dispatch?.({
+                    plugin: THREAD_PLUGIN,
+                    action: ThreadAction.TOGGLE_RESOLVED,
+                    data: {
+                      thread
+                    }
+                  }),
+                  onComment: (thread) => {
+                    void intentPlugin?.provides.intent.dispatch({
+                      action: ThreadAction.ON_MESSAGE_ADD,
+                      data: {
+                        thread,
+                        subject: data.subject
+                      }
+                    });
+                  }
+                }), /* @__PURE__ */ React5.createElement("div", {
+                  role: "none",
+                  className: "bs-10"
+                }), /* @__PURE__ */ React5.createElement(ScrollArea.Scrollbar, null, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)))));
               }
-              break;
             }
           }
           return null;
@@ -791,31 +709,18 @@ var ThreadPlugin = () => {
             case ThreadAction.CREATE: {
               if (intent.data && intent.data.cursor !== void 0) {
                 const { cursor, name, subject } = intent.data;
-                if (subject?.threads === void 0) {
-                  try {
-                    subject.threads = [];
-                  } catch (err) {
-                    log.error("Subject does not support threads array", subject?.typename, {
-                      F: __dxlog_file,
-                      L: 327,
-                      S: void 0,
-                      C: (f, a) => f(...a)
-                    });
-                    return;
-                  }
-                }
-                const subjectId = fullyQualifiedId5(subject);
-                const thread = create2(ThreadType2, {
+                const subjectId = fullyQualifiedId(subject);
+                const thread = create2(ThreadType, {
                   name,
                   anchor: cursor,
                   messages: [],
                   status: "staged"
                 });
-                const draft = state.drafts[subjectId];
-                if (draft) {
-                  draft.push(thread);
+                const stagingArea = state.staging[subjectId];
+                if (stagingArea) {
+                  stagingArea.push(thread);
                 } else {
-                  state.drafts[subjectId] = [
+                  state.staging[subjectId] = [
                     thread
                   ];
                 }
@@ -823,20 +728,27 @@ var ThreadPlugin = () => {
                   data: thread,
                   intents: [
                     [
+                      {
+                        action: NavigationAction.OPEN,
+                        data: {
+                          activeParts: {
+                            complementary: `${subjectId}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
+                          }
+                        }
+                      },
                       {
                         action: ThreadAction.SELECT,
                         data: {
-                          current: fullyQualifiedId5(thread)
+                          current: thread.id,
+                          focus: true
                         }
-                      }
-                    ],
-                    [
+                      },
                       {
-                        action: NavigationAction.OPEN,
+                        action: LayoutAction.SET_LAYOUT,
                         data: {
-                          activeParts: {
-                            complementary: "comments"
-                          }
+                          element: "complementary",
+                          subject: subjectId,
+                          state: true
                         }
                       }
                     ]
@@ -846,7 +758,7 @@ var ThreadPlugin = () => {
                 return {
                   data: create2(ChannelType, {
                     threads: [
-                      create2(ThreadType2, {
+                      create2(ThreadType, {
                         messages: []
                       })
                     ]
@@ -855,26 +767,15 @@ var ThreadPlugin = () => {
               }
             }
             case ThreadAction.SELECT: {
+              state.focus = intent.data?.current === state.current ? state.focus : intent.data?.focus;
               state.current = intent.data?.current;
               return {
-                data: true,
-                intents: !intent.data?.skipOpen ? [
-                  [
-                    {
-                      action: NavigationAction.OPEN,
-                      data: {
-                        activeParts: {
-                          complementary: "comments"
-                        }
-                      }
-                    }
-                  ]
-                ] : []
+                data: true
               };
             }
             case ThreadAction.TOGGLE_RESOLVED: {
               const { thread } = intent.data ?? {};
-              if (!(thread instanceof ThreadType2)) {
+              if (!(thread instanceof ThreadType)) {
                 return;
               }
               if (thread.status === "active" || thread.status === void 0) {
@@ -882,10 +783,9 @@ var ThreadPlugin = () => {
               } else if (thread.status === "resolved") {
                 thread.status = "active";
               }
-              const space = getSpace3(thread);
+              const space = getSpace2(thread);
               const spaceId = space?.id;
               return {
-                data: true,
                 intents: [
                   [
                     {
@@ -904,21 +804,19 @@ var ThreadPlugin = () => {
             }
             case ThreadAction.DELETE: {
               const { subject, thread } = intent.data ?? {};
-              if (!(thread instanceof ThreadType2) || !(subject && typeof subject === "object" && "threads" in subject)) {
+              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType)) {
                 return;
               }
-              const subjectId = fullyQualifiedId5(subject);
-              const draft = state.drafts[subjectId];
-              if (draft) {
-                const index = draft.findIndex((t) => t.id === thread.id);
+              const subjectId = fullyQualifiedId(subject);
+              const stagingArea = state.staging[subjectId];
+              if (stagingArea) {
+                const index = stagingArea.findIndex((t) => t.id === thread.id);
                 if (index !== -1) {
-                  draft.splice(index, 1);
-                  return {
-                    data: true
-                  };
+                  stagingArea.splice(index, 1);
+                  return;
                 }
               }
-              const space = getSpace3(thread);
+              const space = getSpace2(thread);
               if (!space || !subject.threads) {
                 return;
               }
@@ -976,22 +874,22 @@ var ThreadPlugin = () => {
             }
             case ThreadAction.ON_MESSAGE_ADD: {
               const { thread, subject } = intent.data ?? {};
-              if (!(thread instanceof ThreadType2) || !(subject && typeof subject === "object" && "threads" in subject && Array.isArray(subject.threads))) {
+              if (!(thread instanceof ThreadType) || !(subject && typeof subject === "object" && "threads" in subject)) {
                 return;
               }
-              const subjectId = fullyQualifiedId5(subject);
-              const space = getSpace3(subject);
+              const subjectId = fullyQualifiedId(subject);
+              const space = getSpace2(subject);
               const intents = [];
               const analyticsProperties = {
                 threadId: thread.id,
                 spaceId: space?.id
               };
-              if (state.drafts[subjectId]?.find((t) => t === thread)) {
+              if (state.staging[subjectId]?.find((t) => t === thread)) {
                 thread.status = "active";
                 subject.threads ? subject.threads.push(thread) : subject.threads = [
                   thread
                 ];
-                state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
+                state.staging[subjectId] = state.staging[subjectId]?.filter((t) => t.id !== thread.id);
                 intents.push({
                   action: ObservabilityAction.SEND_EVENT,
                   data: {
@@ -1019,8 +917,8 @@ var ThreadPlugin = () => {
             }
             case ThreadAction.DELETE_MESSAGE: {
               const { subject, thread, messageId } = intent.data ?? {};
-              const space = getSpace3(subject);
-              if (!(thread instanceof ThreadType2) || !(subject && typeof subject === "object" && "threads" in subject)) {
+              const space = getSpace2(subject);
+              if (!(subject instanceof DocumentType) || !(thread instanceof ThreadType) || !space) {
                 return;
               }
               if (!intent.undo) {
@@ -1062,7 +960,7 @@ var ThreadPlugin = () => {
                           name: "threads.message.delete",
                           properties: {
                             threadId: thread.id,
-                            spaceId: space?.id
+                            spaceId: space.id
                           }
                         }
                       }
@@ -1086,7 +984,7 @@ var ThreadPlugin = () => {
                           name: "threads.message.undo-delete",
                           properties: {
                             threadId: thread.id,
-                            spaceId: space?.id
+                            spaceId: space.id
                           }
                         }
                       }
@@ -1099,8 +997,92 @@ var ThreadPlugin = () => {
         }
       },
       markdown: {
+        // TODO(burdon): Factor out extension factory into separate file (for simplicity).
         extensions: ({ document: doc }) => {
-          return threads(state, doc, intentPlugin?.provides.intent.dispatch);
+          const space = doc && getSpace2(doc);
+          if (!doc || !space) {
+            return [
+              comments()
+            ];
+          }
+          const threads = computed(() => [
+            ...doc.threads.filter(nonNullable2),
+            ...state.staging[fullyQualifiedId(doc)] ?? []
+          ].filter((thread) => !(thread?.status === "resolved")));
+          return [
+            listener2({
+              onChange: () => {
+                doc.threads.forEach((thread) => {
+                  if (thread?.anchor) {
+                    const [start, end] = thread.anchor.split(":");
+                    const name = doc.content && getTextInRange(createDocAccessor(doc.content, [
+                      "content"
+                    ]), start, end);
+                    if (name && name !== thread.name) {
+                      thread.name = name;
+                    }
+                  }
+                });
+              }
+            }),
+            createExternalCommentSync(doc.id, (sink) => effect(() => sink()), () => threads.value.filter((thread) => thread?.anchor).map((thread) => ({
+              id: thread.id,
+              cursor: thread.anchor
+            }))),
+            comments({
+              id: doc.id,
+              onCreate: ({ cursor }) => {
+                const [start, end] = cursor.split(":");
+                const name = doc.content && getTextInRange(createDocAccessor(doc.content, [
+                  "content"
+                ]), start, end);
+                void intentPlugin?.provides.intent.dispatch({
+                  action: ThreadAction.CREATE,
+                  data: {
+                    cursor,
+                    name,
+                    subject: doc
+                  }
+                });
+              },
+              onDelete: ({ id }) => {
+                const stagingArea = state.staging[fullyQualifiedId(doc)];
+                if (stagingArea) {
+                  const index = stagingArea.findIndex((thread2) => thread2.id === id);
+                  if (index !== -1) {
+                    stagingArea.splice(index, 1);
+                  }
+                }
+                const thread = doc.threads.find((thread2) => thread2?.id === id);
+                if (thread) {
+                  thread.anchor = void 0;
+                }
+              },
+              onUpdate: ({ id, cursor }) => {
+                const thread = state.staging[fullyQualifiedId(doc)]?.find((thread2) => thread2.id === id) ?? doc.threads.find((thread2) => thread2?.id === id);
+                if (thread instanceof ThreadType && thread.anchor) {
+                  const [start, end] = thread.anchor.split(":");
+                  thread.name = doc.content && getTextInRange(createDocAccessor(doc.content, [
+                    "content"
+                  ]), start, end);
+                  thread.anchor = cursor;
+                }
+              },
+              onSelect: ({ selection: { current, closest } }) => {
+                const dispatch2 = intentPlugin?.provides.intent.dispatch;
+                if (dispatch2) {
+                  void dispatch2([
+                    {
+                      action: ThreadAction.SELECT,
+                      data: {
+                        current: current ?? closest
+                      }
+                    }
+                  ]);
+                }
+              }
+            })
+          ];
         }
       }
     }