@dxos/plugin-thread 0.6.12-main.15a606f → 0.6.12-main.2d19bf1

package/src/ThreadPlugin.tsx

@@ -2,12 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { computed, effect } from '@preact/signals-core';
 import React from 'react';
 
 import {
   type IntentPluginProvides,
-  LayoutAction,
   NavigationAction,
   type LocationProvides,
   type Plugin,
@@ -28,40 +26,27 @@ import { type ActionGroup, createExtension, isActionGroup, toSignal } from '@dxo
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { SpaceAction } from '@dxos/plugin-space';
 import { ThreadType, MessageType, ChannelType } from '@dxos/plugin-space/types';
-import {
-  getSpace,
-  getTextInRange,
-  createDocAccessor,
-  fullyQualifiedId,
-  loadObjectReferences,
-} from '@dxos/react-client/echo';
-import { comments, createExternalCommentSync, listener } from '@dxos/react-ui-editor';
+import { getSpace, fullyQualifiedId, loadObjectReferences } from '@dxos/react-client/echo';
 import { translations as threadTranslations } from '@dxos/react-ui-thread';
-import { nonNullable } from '@dxos/util';
 
 import { ThreadMain, ThreadSettings, ChatContainer, ChatHeading, ThreadArticle } from './components';
 import { ThreadComplementary } from './components/ThreadComplementary';
+import { threads } from './extensions';
 import meta, { THREAD_ITEM, THREAD_PLUGIN } from './meta';
 import translations from './translations';
-import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps } from './types';
-
-type ThreadState = {
-  /** An in-memory staging area for threads that are being drafted. */
-  staging: Record<string, ThreadType[]>;
-  current?: string | undefined;
-  focus?: boolean;
-};
+import { ThreadAction, type ThreadPluginProvides, type ThreadSettingsProps, type ThreadState } from './types';
 
 type SubjectId = string;
+
 const initialViewState = { showResolvedThreads: false };
-type ViewStore = Record<SubjectId, typeof initialViewState>;
 
-// TODO(Zan): More robust runtime check.
+type ViewStore = Record<SubjectId, typeof initialViewState>;
 
 // TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
+//  NOTE(burdon): Review/discuss CursorConverter semantics.
 export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
   const settings = new LocalStorageStore<ThreadSettingsProps>(THREAD_PLUGIN);
-  const state = create<ThreadState>({ staging: {} });
+  const state = create<ThreadState>({ drafts: {} });
 
   const viewStore = create<ViewStore>({});
   const getViewState = (subjectId: string) => {
@@ -153,6 +138,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                     return () => clearTimeout(timeout);
                   },
                   () => space?.db.getObjectById(objectId),
+                  subjectId,
                 );
                 if (!object || !subjectId) {
                   return;
@@ -168,11 +154,12 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 return {
                   id,
                   type: 'orphan-comments-for-subject',
-                  data: object,
+                  data: null,
                   properties: {
-                    icon: meta.icon,
+                    icon: 'ph--chat-text--regular',
                     label,
                     showResolvedThreads: viewState.showResolvedThreads,
+                    object,
                   },
                 };
               },
@@ -261,8 +248,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               return data.plugin === meta.id ? <ThreadSettings settings={settings.values} /> : null;
             }
 
-            case 'article':
-            case 'complementary': {
+            case 'article': {
               const location = navigationPlugin?.provides.location;
 
               if (data.object instanceof ChannelType && data.object.threads[0]) {
@@ -290,6 +276,10 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 );
               }
 
+              break;
+            }
+
+            case 'complementary--comments': {
               if (
                 data.subject &&
                 typeof data.subject === 'object' &&
@@ -302,13 +292,14 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                   <ThreadComplementary
                     role={role}
                     subject={data.subject}
-                    stagedThreads={state.staging[fullyQualifiedId(data.subject)]}
+                    drafts={state.drafts[fullyQualifiedId(data.subject)]}
                     current={state.current}
-                    focus
                     showResolvedThreads={showResolvedThreads}
                   />
                 );
               }
+
+              break;
             }
           }
 
@@ -327,7 +318,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                   try {
                     // Static schema will throw an error if subject does not support threads array property.
                     subject.threads = [];
-                  } catch (e) {
+                  } catch (err) {
                     log.error('Subject does not support threads array', subject?.typename);
                     return;
                   }
@@ -335,11 +326,11 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
 
                 const subjectId = fullyQualifiedId(subject);
                 const thread = create(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
-                const stagingArea = state.staging[subjectId];
-                if (stagingArea) {
-                  stagingArea.push(thread);
+                const draft = state.drafts[subjectId];
+                if (draft) {
+                  draft.push(thread);
                 } else {
-                  state.staging[subjectId] = [thread];
+                  state.drafts[subjectId] = [thread];
                 }
 
                 return {
@@ -348,14 +339,14 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                     [
                       {
                         action: ThreadAction.SELECT,
-                        data: { current: fullyQualifiedId(thread), focus: true },
+                        data: { current: fullyQualifiedId(thread) },
                       },
+                    ],
+                    [
                       {
-                        action: LayoutAction.SET_LAYOUT,
+                        action: NavigationAction.OPEN,
                         data: {
-                          element: 'complementary',
-                          subject: subjectId,
-                          state: true,
+                          activeParts: { complementary: 'comments' },
                         },
                       },
                     ],
@@ -363,14 +354,30 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
                 };
               } else {
                 // NOTE: This is the standalone thread creation case.
-                return { data: create(ChannelType, { threads: [create(ThreadType, { messages: [] })] }) };
+                return {
+                  data: create(ChannelType, { threads: [create(ThreadType, { messages: [] })] }),
+                };
               }
             }
 
             case ThreadAction.SELECT: {
-              state.focus = intent.data?.current === state.current ? state.focus : intent.data?.focus;
               state.current = intent.data?.current;
-              return { data: true };
+
+              return {
+                data: true,
+                intents: !intent.data?.skipOpen
+                  ? [
+                      [
+                        {
+                          action: NavigationAction.OPEN,
+                          data: {
+                            activeParts: { complementary: 'comments' },
+                          },
+                        },
+                      ],
+                    ]
+                  : [],
+              };
             }
 
             case ThreadAction.TOGGLE_RESOLVED: {
@@ -389,6 +396,7 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const spaceId = space?.id;
 
               return {
+                data: true,
                 intents: [
                   [
                     {
@@ -410,13 +418,12 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               }
 
               const subjectId = fullyQualifiedId(subject);
-              const stagingArea = state.staging[subjectId];
-              if (stagingArea) {
-                // Check if we're deleting a thread that's in the staging area.
-                // If so, remove it from the staging area without ceremony.
-                const index = stagingArea.findIndex((t) => t.id === thread.id);
+              const draft = state.drafts[subjectId];
+              if (draft) {
+                // Check if we're deleting a draft; if so, remove it.
+                const index = draft.findIndex((t) => t.id === thread.id);
                 if (index !== -1) {
-                  stagingArea.splice(index, 1);
+                  draft.splice(index, 1);
                   return { data: true };
                 }
               }
@@ -483,12 +490,11 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               const intents = [];
               const analyticsProperties = { threadId: thread.id, spaceId: space?.id };
 
-              if (state.staging[subjectId]?.find((t) => t === thread)) {
-                // Move thread from staging to document.
+              if (state.drafts[subjectId]?.find((t) => t === thread)) {
+                // Move draft to document.
                 thread.status = 'active';
                 subject.threads ? subject.threads.push(thread) : (subject.threads = [thread]);
-                state.staging[subjectId] = state.staging[subjectId]?.filter((t) => t.id !== thread.id);
-
+                state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
                 intents.push({
                   action: ObservabilityAction.SEND_EVENT,
                   data: { name: 'threads.thread-created', properties: analyticsProperties },
@@ -556,13 +562,11 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
               } else if (intent.undo) {
                 const message = intent.data?.message;
                 const messageIndex = intent.data?.messageIndex;
-
                 if (!(message instanceof MessageType) || !(typeof messageIndex === 'number')) {
                   return;
                 }
 
                 thread.messages.splice(messageIndex, 0, message);
-
                 return {
                   data: true,
                   intents: [
@@ -583,96 +587,8 @@ export const ThreadPlugin = (): PluginDefinition<ThreadPluginProvides> => {
         },
       },
       markdown: {
-        // TODO(burdon): Factor out extension factory into separate file (for simplicity).
         extensions: ({ document: doc }) => {
-          const space = doc && getSpace(doc);
-          if (!doc || !space) {
-            // Include no-op comments extension here to ensure that the facets are always present when they are expected.
-            // TODO(wittjosiah): The Editor should only look for these facets when comments are available.
-            return [comments()];
-          }
-
-          // TODO(Zan): When we have the deepsignal specific equivalent of this we should use that instead.
-          const threads = computed(() =>
-            [...doc.threads.filter(nonNullable), ...(state.staging[fullyQualifiedId(doc)] ?? [])].filter(
-              (thread) => !(thread?.status === 'resolved'),
-            ),
-          );
-
-          return [
-            listener({
-              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);
-                    // TODO(burdon): This seems unsafe; review.
-                    // Only update if the name has changed, otherwise this will cause an infinite loop.
-                    // Skip if the name is empty - this means comment text was deleted, but thread name should remain.
-                    if (name && name !== thread.name) {
-                      thread.name = name;
-                    }
-                  }
-                });
-              },
-            }),
-            createExternalCommentSync(
-              doc.id,
-              (sink) => effect(() => sink()),
-              () =>
-                threads.value
-                  .filter((thread) => thread?.anchor)
-                  .map((thread) => ({ id: fullyQualifiedId(thread), 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 }) => {
-                // If the thread is in the staging area, remove it.
-                const stagingArea = state.staging[fullyQualifiedId(doc)];
-                if (stagingArea) {
-                  const index = stagingArea.findIndex((thread) => fullyQualifiedId(thread) === id);
-                  if (index !== -1) {
-                    stagingArea.splice(index, 1);
-                  }
-                }
-
-                const thread = doc.threads.find((thread) => thread?.id === id);
-                if (thread) {
-                  thread.anchor = undefined;
-                }
-              },
-              onUpdate: ({ id, cursor }) => {
-                const thread =
-                  state.staging[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id) ??
-                  doc.threads.find((thread) => thread?.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 dispatch = intentPlugin?.provides.intent.dispatch;
-                if (dispatch) {
-                  void dispatch([{ action: ThreadAction.SELECT, data: { current: current ?? closest } }]);
-                }
-              },
-            }),
-          ];
+          return threads(state, doc, intentPlugin?.provides.intent.dispatch);
         },
       },
     },

package/src/components/CommentContainer.tsx

@@ -3,7 +3,7 @@
 //
 
 import { CheckCircle, X } from '@phosphor-icons/react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
 import { MessageType } from '@dxos/plugin-space/types';
@@ -93,7 +93,6 @@ export const CommentContainer = ({
   detached,
   context,
   current,
-  autoFocusTextbox,
   onAttend,
   onThreadDelete,
   onMessageDelete,
@@ -106,7 +105,6 @@ export const CommentContainer = ({
   const activity = useStatus(space, fullyQualifiedId(thread));
   const { t } = useTranslation(THREAD_PLUGIN);
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
-  const [autoFocus, setAutoFocus] = useState(!!autoFocusTextbox);
   const { themeMode } = useThemeContext();
 
   const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
@@ -124,13 +122,6 @@ export const CommentContainer = ({
     [_count],
   );
 
-  // TODO(thure): Because of the way the `autoFocus` property is handled by TextEditor,
-  //  this is the least-bad way of moving focus at the right time, though it is an anti-pattern.
-  //  Refactor to behave more like <input/>’s `autoFocus` or `autofocus` (yes, they’re different).
-  useEffect(() => {
-    setAutoFocus(!!autoFocusTextbox);
-  }, [autoFocusTextbox]);
-
   // TODO(thure): Factor out.
   const scrollToEnd = (behavior: ScrollBehavior) =>
     setTimeout(() => threadScrollRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
@@ -151,7 +142,6 @@ export const CommentContainer = ({
     onComment?.(thread);
 
     messageRef.current = '';
-    setAutoFocus(true);
     scrollToEnd('instant');
     rerenderEditor();
 
@@ -200,7 +190,13 @@ export const CommentContainer = ({
           onDelete={(id: string) => onMessageDelete?.(id)}
         />
       ))}
-      <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
+      {/*
+        TODO(wittjosiah): Can't autofocus this generally.
+          There can be multiple threads with inputs and they can't all be focused.
+          Also, it steals focus from documents when first rendered.
+          Need to find a way to autofocus in one scenario only: when a new thread is created.
+      */}
+      <MessageTextbox extensions={extensions} onSend={handleCreate} {...textboxMetadata} />
       <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>
       {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
       <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />

package/src/components/CommentsContainer.tsx

@@ -7,8 +7,7 @@ import React, { useEffect } from 'react';
 
 import { type ThreadType } from '@dxos/plugin-space/types';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useTranslation, Icon, Trans } from '@dxos/react-ui';
-import { PlankHeading } from '@dxos/react-ui-deck';
+import { useTranslation, Trans } from '@dxos/react-ui';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
 import { CommentContainer } from './CommentContainer';
@@ -25,7 +24,6 @@ export type ThreadsContainerProps = Omit<
    */
   detached?: string[];
   currentId?: string;
-  autoFocusCurrentTextbox?: boolean;
   showResolvedThreads?: boolean;
   onThreadAttend?: (thread: ThreadType) => void;
   onThreadDelete?: (thread: ThreadType) => void;
@@ -34,19 +32,6 @@ export type ThreadsContainerProps = Omit<
   onComment?: (thread: ThreadType) => void;
 };
 
-export const CommentsHeading = ({ attendableId }: { attendableId?: string }) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
-
-  return (
-    <div role='none' className='flex items-center'>
-      <PlankHeading.Button attendableId={attendableId}>
-        <Icon icon='ph--quotes--regular' size={5} />
-      </PlankHeading.Button>
-      <PlankHeading.Label attendableId={attendableId}>{t('comments heading')}</PlankHeading.Label>
-    </div>
-  );
-};
-
 /**
  * Comment threads.
  */
@@ -54,7 +39,6 @@ export const CommentsContainer = ({
   threads,
   detached = [],
   currentId,
-  autoFocusCurrentTextbox,
   showResolvedThreads,
   onThreadAttend,
   onThreadDelete,
@@ -82,7 +66,6 @@ export const CommentsContainer = ({
               thread={thread}
               current={currentId === threadId}
               detached={detached.includes(threadId)}
-              autoFocusTextbox={autoFocusCurrentTextbox && currentId === threadId}
               {...(onThreadAttend && { onAttend: () => onThreadAttend(thread) })}
               {...(onThreadDelete && { onThreadDelete: () => onThreadDelete(thread) })}
               {...(onMessageDelete && { onMessageDelete: (messageId: string) => onMessageDelete(thread, messageId) })}

package/src/components/ThreadComplementary.tsx

@@ -8,10 +8,10 @@ import { LayoutAction, type Plugin, useIntentDispatcher, useResolvePlugins } fro
 import { type ThreadType } from '@dxos/plugin-space';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { ScrollArea } from '@dxos/react-ui';
-import { createAttendableAttributes, useAttentionContext } from '@dxos/react-ui-attention';
+import { useAttended } from '@dxos/react-ui-attention';
 import { nonNullable } from '@dxos/util';
 
-import { CommentsContainer, CommentsHeading } from '../components';
+import { CommentsContainer } from '../components';
 import { THREAD_PLUGIN } from '../meta';
 import { ThreadAction, type ThreadProvides } from '../types';
 
@@ -21,16 +21,14 @@ const providesThreadsConfig = (plugin: any): Plugin<ThreadProvides<any>> | undef
 export const ThreadComplementary = ({
   role,
   subject,
-  stagedThreads,
+  drafts,
   current,
-  focus,
   showResolvedThreads,
 }: {
   role: string;
   subject: any;
-  stagedThreads: ThreadType[] | undefined;
+  drafts: ThreadType[] | undefined;
   current?: string;
-  focus?: boolean;
   showResolvedThreads?: boolean;
 }) => {
   const dispatch = useIntentDispatcher();
@@ -44,8 +42,8 @@ export const ThreadComplementary = ({
   const sort = useMemo(() => createSort?.(subject), [createSort, subject]);
 
   const threads = useMemo(() => {
-    return subject.threads.concat(stagedThreads ?? []).filter(nonNullable) as ThreadType[];
-  }, [JSON.stringify(subject.threads), JSON.stringify(stagedThreads)]);
+    return subject.threads.concat(drafts ?? []).filter(nonNullable) as ThreadType[];
+  }, [JSON.stringify(subject.threads), JSON.stringify(drafts)]);
 
   const detachedIds = useMemo(() => {
     return threads.filter(({ anchor }) => !anchor).map((thread) => fullyQualifiedId(thread));
@@ -58,22 +56,17 @@ export const ThreadComplementary = ({
     threads.sort((a, b) => sort(a?.anchor, b?.anchor));
   }, [sort, threads]);
 
-  // TODO(Zan): Maybe we should have a hook for this?
-  const { attended } = useAttentionContext('Thread Complementary');
+  const attended = useAttended();
   const qualifiedSubjectId = fullyQualifiedId(subject);
 
-  const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-
   return (
-    <div role='none' className='contents group/attention' {...attendableAttrs}>
-      {role === 'complementary' && <CommentsHeading attendableId={qualifiedSubjectId} />}
+    <div role='none' className='contents'>
       <ScrollArea.Root classNames='row-span-2'>
         <ScrollArea.Viewport>
           <CommentsContainer
             threads={threads}
             detached={detachedIds}
-            currentId={attended.has(qualifiedSubjectId) ? current : undefined}
-            autoFocusCurrentTextbox={focus}
+            currentId={attended.includes(qualifiedSubjectId) ? current : undefined}
             showResolvedThreads={showResolvedThreads}
             onThreadAttend={(thread) => {
               const threadId = fullyQualifiedId(thread);

package/src/extensions/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './threads';

package/src/extensions/threads.ts

@@ -0,0 +1,117 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { computed, effect } from '@preact/signals-core';
+
+import { type IntentDispatcher } from '@dxos/app-framework';
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { ThreadType } from '@dxos/plugin-space/types';
+import { getSpace, getTextInRange, createDocAccessor, fullyQualifiedId } from '@dxos/react-client/echo';
+import { comments, createExternalCommentSync } from '@dxos/react-ui-editor';
+import { nonNullable } from '@dxos/util';
+
+import { ThreadAction, type ThreadState } from '../types';
+
+// TODO(burdon): Factor out.
+const getName = (doc: DocumentType, anchor: string): string | undefined => {
+  if (doc.content) {
+    const [start, end] = anchor.split(':');
+    return getTextInRange(createDocAccessor(doc.content, ['content']), start, end);
+  }
+};
+
+/**
+ * Construct plugins.
+ */
+export const threads = (state: ThreadState, doc?: DocumentType, dispatch?: IntentDispatcher): Extension => {
+  const space = doc && getSpace(doc);
+  if (!doc || !space || !dispatch) {
+    // Include no-op comments extension here to ensure that the facets are always present when they are expected.
+    // TODO(wittjosiah): The Editor should only look for these facets when comments are available.
+    return [comments()];
+  }
+
+  // TODO(Zan): When we have the deepsignal specific equivalent of this we should use that instead.
+  const threads = computed(() =>
+    [...doc.threads.filter(nonNullable), ...(state.drafts[fullyQualifiedId(doc)] ?? [])].filter(
+      (thread) => !(thread?.status === 'resolved'),
+    ),
+  );
+
+  return [
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        doc.threads.forEach((thread) => {
+          if (thread?.anchor) {
+            // Only update if the name has changed, otherwise this will cause an infinite loop.
+            // Skip if the name is empty; this means comment text was deleted, but thread name should remain.
+            const name = getName(doc, thread.anchor);
+            if (name && name !== thread.name) {
+              thread.name = name;
+            }
+          }
+        });
+      }
+    }),
+
+    createExternalCommentSync(
+      fullyQualifiedId(doc),
+      (sink) => effect(() => sink()),
+      () =>
+        threads.value
+          .filter((thread) => thread?.anchor)
+          .map((thread) => ({ id: fullyQualifiedId(thread), cursor: thread.anchor! })),
+    ),
+
+    comments({
+      id: fullyQualifiedId(doc),
+      onCreate: ({ cursor }) => {
+        const name = getName(doc, cursor);
+        void dispatch({
+          action: ThreadAction.CREATE,
+          data: {
+            cursor,
+            name,
+            subject: doc,
+          },
+        });
+      },
+      onDelete: ({ id }) => {
+        const draft = state.drafts[fullyQualifiedId(doc)];
+        if (draft) {
+          const index = draft.findIndex((thread) => fullyQualifiedId(thread) === id);
+          if (index !== -1) {
+            draft.splice(index, 1);
+          }
+        }
+
+        const thread = doc.threads.find((thread) => thread?.id === id);
+        if (thread) {
+          thread.anchor = undefined;
+        }
+      },
+      onUpdate: ({ id, cursor }) => {
+        const thread =
+          state.drafts[fullyQualifiedId(doc)]?.find((thread) => fullyQualifiedId(thread) === id) ??
+          doc.threads.find((thread) => thread?.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,
+          },
+        });
+      },
+    }),
+  ];
+};

package/src/{meta.tsx → meta.ts}

@@ -2,15 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { pluginMeta } from '@dxos/app-framework';
+import { type PluginMeta } from '@dxos/app-framework';
 
 export const THREAD_PLUGIN = 'dxos.org/plugin/thread';
 export const THREAD_ITEM = `${THREAD_PLUGIN}/item`;
 
-export default pluginMeta({
+export default {
   id: THREAD_PLUGIN,
   name: 'Threads',
-  // TODO(wittjosiah): Update once scope of threads expands.
   description: 'Comment threads on documents.',
   icon: 'ph--chat--regular',
-});
+} satisfies PluginMeta;