@dxos/plugin-thread 0.6.13 → 0.6.14-main.7bd9c89

package/src/components/Chat.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
 import { SurfaceProvider } from '@dxos/app-framework';
@@ -64,13 +65,15 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'plugin-thread/Chat',
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-thread/Chat',
   component: Thread,
-  // TODO(wittjosiah): Register schemas.
+  // TODO(burdon): Use decorator.
   render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType]} />,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: { translations },
 };
 
-export const Default = {};
+export default meta;

package/src/components/ChatContainer.tsx

@@ -2,15 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Chat } from '@phosphor-icons/react';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { create } from '@dxos/echo-schema';
 import { MessageType } from '@dxos/plugin-space/types';
-import { getSpace, useMembers } from '@dxos/react-client/echo';
+import { fullyQualifiedId, getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
+import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { PlankHeading } from '@dxos/react-ui-deck';
 import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
 import { mx } from '@dxos/react-ui-theme';
 import { MessageTextbox, type MessageTextboxProps, Thread, ThreadFooter, threadLayout } from '@dxos/react-ui-thread';
@@ -28,7 +27,7 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   return (
     <div role='none' className='flex items-center'>
       <PlankHeading.Button attendableId={attendableId}>
-        <Chat {...plankHeadingIconProps} />
+        <Icon icon='ph--chat--regular' size={5} />
       </PlankHeading.Button>
       <PlankHeading.Label attendableId={attendableId}>{t('chat heading')}</PlankHeading.Label>
     </div>
@@ -39,7 +38,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   const identity = useIdentity()!;
   const space = getSpace(thread);
   const members = useMembers(space?.key);
-  const activity = useStatus(space, thread.id);
+  const activity = useStatus(space, fullyQualifiedId(thread));
   const { t } = useTranslation(THREAD_PLUGIN);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
@@ -48,7 +47,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
   const { themeMode } = useThemeContext();
 
-  const textboxMetadata = getMessageMetadata(thread.id, identity);
+  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
   const messageRef = useRef('');
   const extensions = useMemo(
     () => [
@@ -103,7 +102,7 @@ export const ChatContainer = ({ thread, context, current, autoFocusTextbox }: Th
   return (
     <Thread
       current={current}
-      id={thread.id}
+      id={fullyQualifiedId(thread)}
       classNames='bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0'
     >
       <ScrollArea.Root classNames='col-span-2'>

package/src/components/CommentContainer.tsx

@@ -3,11 +3,11 @@
 //
 
 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';
-import { getSpace, useMembers } from '@dxos/react-client/echo';
+import { fullyQualifiedId, 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 { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
@@ -93,7 +93,6 @@ export const CommentContainer = ({
   detached,
   context,
   current,
-  autoFocusTextbox,
   onAttend,
   onThreadDelete,
   onMessageDelete,
@@ -103,13 +102,12 @@ export const CommentContainer = ({
   const identity = useIdentity()!;
   const space = getSpace(thread);
   const members = useMembers(space?.key);
-  const activity = useStatus(space, thread.id);
+  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(thread.id, identity);
+  const textboxMetadata = getMessageMetadata(fullyQualifiedId(thread), identity);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
   const rerenderEditor = () => _setCount((count) => count + 1);
@@ -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();
 
@@ -159,10 +149,8 @@ export const CommentContainer = ({
     return true;
   }, [thread, identity]);
 
-  const handleDeleteMessage = (id: string) => onMessageDelete?.(id);
-
   return (
-    <Thread onClickCapture={onAttend} onFocusCapture={onAttend} current={current} id={thread.id}>
+    <Thread onClickCapture={onAttend} onFocusCapture={onAttend} current={current} id={fullyQualifiedId(thread)}>
       <div
         role='none'
         className={mx(
@@ -195,9 +183,20 @@ export const CommentContainer = ({
         </div>
       </div>
       {thread.messages.filter(nonNullable).map((message) => (
-        <MessageContainer key={message.id} message={message} members={members} onDelete={handleDeleteMessage} />
+        <MessageContainer
+          key={message.id}
+          message={message}
+          members={members}
+          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/Comments.stories.tsx

@@ -4,11 +4,12 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 
 import { MessageType, ThreadType } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
-import { Filter, useQuery, useSpace } from '@dxos/react-client/echo';
+import { Filter, fullyQualifiedId, useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -30,7 +31,7 @@ const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
       const t = setTimeout(async () => {
         space.db.add(createCommentThread(identity));
         const thread = space.db.add(createCommentThread(identity));
-        setDetached([thread.id]);
+        setDetached([fullyQualifiedId(thread)]);
       });
 
       return () => clearTimeout(t);
@@ -50,12 +51,14 @@ const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
   );
 };
 
-export default {
-  title: 'plugin-thread/Comments',
-  // TODO(wittjosiah): Register schemas.
+export const Default = {};
+
+const meta: Meta = {
+  title: 'plugins/plugin-thread/Comments',
+  // TODO(wittjosiah): Use decorator.
   render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType, MessageType]} />,
   decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
   parameters: { translations },
 };
 
-export const Default = {};
+export default meta;

package/src/components/CommentsContainer.tsx

@@ -2,12 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ChatText, Quotes } from '@phosphor-icons/react';
+import { ChatText } from '@phosphor-icons/react';
 import React, { useEffect } from 'react';
 
 import { type ThreadType } from '@dxos/plugin-space/types';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { useTranslation, Trans } from '@dxos/react-ui';
-import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
 import { CommentContainer } from './CommentContainer';
@@ -24,7 +24,6 @@ export type ThreadsContainerProps = Omit<
    */
   detached?: string[];
   currentId?: string;
-  autoFocusCurrentTextbox?: boolean;
   showResolvedThreads?: boolean;
   onThreadAttend?: (thread: ThreadType) => void;
   onThreadDelete?: (thread: ThreadType) => void;
@@ -33,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}>
-        <Quotes {...plankHeadingIconProps} />
-      </PlankHeading.Button>
-      <PlankHeading.Label attendableId={attendableId}>{t('comments heading')}</PlankHeading.Label>
-    </div>
-  );
-};
-
 /**
  * Comment threads.
  */
@@ -53,7 +39,6 @@ export const CommentsContainer = ({
   threads,
   detached = [],
   currentId,
-  autoFocusCurrentTextbox,
   showResolvedThreads,
   onThreadAttend,
   onThreadDelete,
@@ -73,20 +58,22 @@ export const CommentsContainer = ({
   return (
     <>
       {filteredThreads.length > 0 ? (
-        filteredThreads.map((thread) => (
-          <CommentContainer
-            key={thread.id}
-            thread={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: string) => onMessageDelete(thread, messageId) })}
-            {...(onThreadToggleResolved && { onResolve: () => onThreadToggleResolved(thread) })}
-            {...props}
-          />
-        ))
+        filteredThreads.map((thread) => {
+          const threadId = fullyQualifiedId(thread);
+          return (
+            <CommentContainer
+              key={threadId}
+              thread={thread}
+              current={currentId === threadId}
+              detached={detached.includes(threadId)}
+              {...(onThreadAttend && { onAttend: () => onThreadAttend(thread) })}
+              {...(onThreadDelete && { onThreadDelete: () => onThreadDelete(thread) })}
+              {...(onMessageDelete && { onMessageDelete: (messageId: string) => onMessageDelete(thread, messageId) })}
+              {...(onThreadToggleResolved && { onResolve: () => onThreadToggleResolved(thread) })}
+              {...props}
+            />
+          );
+        })
       ) : (
         <div
           role='alert'

package/src/components/MessageContainer.tsx

@@ -1,25 +1,17 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import { EditorView } from '@codemirror/view';
 import { Check, PencilSimple, X } from '@phosphor-icons/react';
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type Expando, type EchoReactiveObject } from '@dxos/echo-schema';
 import { type MessageType } from '@dxos/plugin-space/types';
 import { PublicKey } from '@dxos/react-client';
-import { type SpaceMember } from '@dxos/react-client/echo';
+import { type EchoReactiveObject, type Expando, type SpaceMember } from '@dxos/react-client/echo';
 import { useIdentity, type Identity } from '@dxos/react-client/halo';
-import {
-  Button,
-  ButtonGroup,
-  DensityProvider,
-  Tooltip,
-  useOnTransition,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
+import { Button, ButtonGroup, Tooltip, useOnTransition, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { createBasicExtensions, createThemeExtensions, useTextEditor } from '@dxos/react-ui-editor';
 import { Mosaic, type MosaicTileComponent } from '@dxos/react-ui-mosaic';
 import {
@@ -91,7 +83,7 @@ export const MessageContainer = ({
                   variant='ghost'
                   data-testid='thread.message.delete'
                   classNames={messageControlClassNames}
-                  onClick={handleDelete}
+                  onClick={() => handleDelete()}
                 >
                   <span className='sr-only'>{deleteLabel}</span>
                   <X className={getSize(4)} />
@@ -184,16 +176,14 @@ const MessageBlockObjectTile: MosaicTileComponent<EchoReactiveObject<any>> = for
         style={draggableStyle}
         ref={forwardedRef}
       >
-        <DensityProvider density='fine'>
-          <Surface
-            role='card'
-            limit={1}
-            data={{ content: item }}
-            draggableProps={draggableProps}
-            fallback={title}
-            {...props}
-          />
-        </DensityProvider>
+        <Surface
+          role='card'
+          limit={1}
+          data={{ content: item }}
+          draggableProps={draggableProps}
+          fallback={title}
+          {...props}
+        />
       </div>
     );
   },

package/src/components/ThreadComplementary.tsx

@@ -0,0 +1,113 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useMemo } from 'react';
+
+import { LayoutAction, type Plugin, useIntentDispatcher, useResolvePlugins } from '@dxos/app-framework';
+import { type ThreadType } from '@dxos/plugin-space';
+import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { ScrollArea } from '@dxos/react-ui';
+import { useAttended } from '@dxos/react-ui-attention';
+import { nonNullable } from '@dxos/util';
+
+import { CommentsContainer } from '../components';
+import { THREAD_PLUGIN } from '../meta';
+import { ThreadAction, type ThreadProvides } from '../types';
+
+const providesThreadsConfig = (plugin: any): Plugin<ThreadProvides<any>> | undefined =>
+  'thread' in plugin.provides ? (plugin as Plugin<ThreadProvides<any>>) : undefined;
+
+export const ThreadComplementary = ({
+  role,
+  subject,
+  drafts,
+  current,
+  showResolvedThreads,
+}: {
+  role: string;
+  subject: any;
+  drafts: ThreadType[] | undefined;
+  current?: string;
+  showResolvedThreads?: boolean;
+}) => {
+  const dispatch = useIntentDispatcher();
+
+  const threadsIntegrators = useResolvePlugins(providesThreadsConfig);
+  const threadProvides = useMemo(() => threadsIntegrators.map((p) => p.provides.thread), [threadsIntegrators]);
+  const createSort = useMemo(
+    () => threadProvides.find((p) => p.predicate(subject))?.createSort,
+    [threadProvides, subject],
+  );
+  const sort = useMemo(() => createSort?.(subject), [createSort, subject]);
+
+  const threads = useMemo(() => {
+    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));
+  }, [threads]);
+
+  useEffect(() => {
+    if (!sort) {
+      return;
+    }
+    threads.sort((a, b) => sort(a?.anchor, b?.anchor));
+  }, [sort, threads]);
+
+  const attended = useAttended();
+  const qualifiedSubjectId = fullyQualifiedId(subject);
+
+  return (
+    <div role='none' className='contents'>
+      <ScrollArea.Root classNames='row-span-2'>
+        <ScrollArea.Viewport>
+          <CommentsContainer
+            threads={threads}
+            detached={detachedIds}
+            currentId={attended.includes(qualifiedSubjectId) ? current : undefined}
+            showResolvedThreads={showResolvedThreads}
+            onThreadAttend={(thread) => {
+              const threadId = fullyQualifiedId(thread);
+              if (current !== threadId) {
+                current = threadId;
+
+                void dispatch?.([
+                  {
+                    action: LayoutAction.SCROLL_INTO_VIEW,
+                    data: {
+                      id: fullyQualifiedId(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 } });
+            }}
+          />
+          <div role='none' className='bs-10' />
+          <ScrollArea.Scrollbar>
+            <ScrollArea.Thumb />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </div>
+  );
+};

package/src/components/index.ts

@@ -2,15 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import { lazy } from 'react';
 
-// Lazily load components for content surfaces.
-export const ThreadMain = React.lazy(() => import('./ThreadMain'));
-export const ThreadArticle = React.lazy(() => import('./ThreadArticle'));
+export const ThreadMain = lazy(() => import('./ThreadMain'));
+export const ThreadArticle = lazy(() => import('./ThreadArticle'));
 
 // TODO(wittjosiah): Suspense boundary for sidebar?
-export * from './ThreadSettings';
 export * from './CommentContainer';
-export * from './MessageContainer';
 export * from './CommentsContainer';
 export * from './ChatContainer';
+export * from './MessageContainer';
+export * from './ThreadComplementary';
+export * from './ThreadSettings';

package/src/components/types.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type EchoReactiveObject } from '@dxos/echo-schema';
+import { type EchoReactiveObject } from '@dxos/client/echo';
 import { type ThreadType } from '@dxos/plugin-space/types';
-import type { ThreadProps } from '@dxos/react-ui-thread';
+import { type ThreadProps } from '@dxos/react-ui-thread';
 
 /**
  * Props for components which connect an ECHO Thread object to the UI component 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.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const THREAD_PLUGIN = 'dxos.org/plugin/thread';
+export const THREAD_ITEM = `${THREAD_PLUGIN}/item`;
+
+export default {
+  id: THREAD_PLUGIN,
+  name: 'Threads',
+  description: 'Comment threads on documents.',
+  icon: 'ph--chat--regular',
+} satisfies PluginMeta;