@dxos/react-ui-thread 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
+  "version": "0.13.0",
   "description": "A set of components to use with threads, including comments and messages.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,7 +13,11 @@
   "sideEffects": false,
   "type": "module",
   "imports": {
-    "#translations": "./src/translations.ts"
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/translations.mjs"
+    }
   },
   "exports": {
     ".": {
@@ -34,35 +38,36 @@
   ],
   "dependencies": {
     "@codemirror/language": "^6.12.4",
-    "@codemirror/state": "^6.7.1",
-    "@codemirror/view": "^6.43.8",
-    "@radix-ui/react-context": "1.1.1",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
     "date-fns": "^3.6.0",
-    "@dxos/echo": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-dnd": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-editor": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-mosaic": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/types": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-editor": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/util": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "@dxos/echo": "0.13.0",
+    "@dxos/react-ui-dnd": "0.13.0",
+    "@dxos/react-ui-editor": "0.13.0",
+    "@dxos/react-hooks": "0.13.0",
+    "@dxos/react-ui-mosaic": "0.13.0",
+    "@dxos/types": "0.13.0",
+    "@dxos/ui-editor": "0.13.0",
+    "@dxos/util": "0.13.0",
+    "@dxos/ui-types": "0.13.0"
   },
   "devDependencies": {
-    "@storybook/react-vite": "^10.5.8",
+    "@storybook/react-vite": "^10.6.0",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.2.1",
-    "@dxos/random": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/schema": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-theme": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "vite": "^8.2.2",
+    "@dxos/random": "0.13.0",
+    "@dxos/ui-theme": "0.13.0",
+    "@dxos/react-ui": "0.13.0",
+    "@dxos/schema": "0.13.0"
   },
   "peerDependencies": {
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-theme": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "@dxos/react-ui": "^0.13.0",
+    "@dxos/ui-theme": "^0.13.0"
   },
   "publishConfig": {
     "access": "public"

package/src/Message/Message.stories.tsx

@@ -12,9 +12,9 @@ import { Message as MessageType } from '@dxos/types';
 
 import { translations } from '#translations';
 
-import { createMessages, getStoryMetadata } from '../testing';
-import { Thread } from '../Thread';
-import { Message } from './Message';
+import { createMessages, getStoryMetadata } from '../testing.ts';
+import { Thread } from '../Thread/index.ts';
+import { Message } from './Message.tsx';
 
 type StoryArgs = { editable: boolean };
 

package/src/Message/Message.tsx

@@ -17,15 +17,11 @@ import React, {
 } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import {
-  Avatar,
-  IconButton,
-  type ThemedClassName,
-  useOnTransition,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
 import { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';
+import * as Avatar from '@dxos/react-ui/Avatar';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import type * as Util from '@dxos/react-ui/Util';
 import { type ContentBlock, type Message as MessageType } from '@dxos/types';
 import { createBasicExtensions, createThemeExtensions, keymap, listener } from '@dxos/ui-editor';
 import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
@@ -33,11 +29,11 @@ import { hexToEmoji, hexToHue, isTruthy } from '@dxos/util';
 
 import { translationKey } from '#translations';
 
-import { command } from '../command';
-import { useThreadContext } from '../context';
-import { type MessageMetadata } from '../types';
+import { command } from '../command.ts';
+import { useThreadContext } from '../context.ts';
+import { type MessageMetadata } from '../types.ts';
 
-const avatarSize = 7;
+const avatarSize = 'md';
 
 const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pe-2';
 const buttonClassNames = 'p-1! transition-opacity';
@@ -46,7 +42,7 @@ const buttonClassNames = 'p-1! transition-opacity';
 // Root
 //
 
-export type MessageRootProps = ThemedClassName<
+export type MessageRootProps = Util.ThemedClassName<
   ComponentPropsWithRef<'div'> & MessageMetadata & Partial<{ continues: boolean; controls: ReactNode }>
 >;
 
@@ -66,30 +62,28 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     },
     forwardedRef,
   ) => {
-    // Must wrap the message since Avatar.Label may be used in the content.
     // Columns mirror Thread.Header (avatar/rail · content · controls) so trailing
     // controls align with the thread header's controls.
     return (
-      <Avatar.Root>
-        <div
-          data-testid='thread.message'
-          {...rootProps}
-          className={mx('grid grid-cols-[var(--dx-rail-size)_1fr_min-content] w-full', classNames)}
-          ref={forwardedRef}
-        >
-          <div className='flex flex-col items-center gap-2 pt-1'>
-            <Avatar.Content
-              size={avatarSize}
-              hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}
-              fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}
-              {...(authorImgSrc && { imgSrc: authorImgSrc })}
-            />
-            {continues && <div className='w-px grow bg-separator' />}
-          </div>
-          <div className='py-1 min-w-0'>{children}</div>
-          {controls && <div className='self-start'>{controls}</div>}
+      <div
+        data-testid='thread.message'
+        {...rootProps}
+        className={mx('grid grid-cols-[var(--dx-rail-size)_1fr_min-content] w-full', classNames)}
+        ref={forwardedRef}
+      >
+        <div className='flex flex-col items-center gap-2 pt-1'>
+          <Avatar.Root
+            size={avatarSize}
+            hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}
+            fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}
+            src={authorImgSrc}
+            label={authorName}
+          />
+          {continues && <div className='w-px grow bg-separator' />}
         </div>
-      </Avatar.Root>
+        <div className='py-1 min-w-0'>{children}</div>
+        {controls && <div className='self-start'>{controls}</div>}
+      </div>
     );
   },
 );
@@ -100,7 +94,7 @@ MessageRoot.displayName = 'Message.Root';
 // Heading
 //
 
-export type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &
+export type MessageHeadingProps = Util.ThemedClassName<ComponentPropsWithoutRef<'div'>> &
   Pick<MessageMetadata, 'authorName' | 'timestamp'>;
 
 const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {
@@ -120,11 +114,9 @@ MessageHeading.displayName = 'Message.Heading';
 export type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;
 
 const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = Hooks.useTranslation(translationKey);
   return (
-    <Avatar.Label classNames='block truncate min-w-0 shrink text-sm text-subdued'>
-      {authorName ?? t('anonymous.label')}
-    </Avatar.Label>
+    <span className='block truncate min-w-0 shrink text-sm text-fg-subtle'>{authorName ?? t('anonymous.label')}</span>
   );
 };
 
@@ -133,10 +125,10 @@ MessageAuthorName.displayName = 'Message.AuthorName';
 export type MessageTimeProps = Pick<MessageMetadata, 'timestamp'>;
 
 const MessageTime = ({ timestamp }: MessageTimeProps) => {
-  const { dtLocale } = useTranslation(translationKey);
+  const { dtLocale } = Hooks.useTranslation(translationKey);
   const dt = timestamp ? new Date(timestamp) : undefined;
   return (
-    <time className='shrink-0 text-subdued text-xs' dateTime={dt?.toISOString()}>
+    <time className='shrink-0 text-fg-subtle text-xs' dateTime={dt?.toISOString()}>
       {dt ? format(dt, 'p', { locale: dtLocale }) : ''}
     </time>
   );
@@ -206,7 +198,7 @@ const TextBlock = ({
   editing?: boolean;
   onSave?: (text: string) => void;
 }) => {
-  const { themeMode } = useThemeContext();
+  const themeMode = Hooks.useThemeMode();
   const inMemoryContentRef = useRef(block.text);
 
   const handleDocumentChange = useCallback((next: string) => {
@@ -217,7 +209,7 @@ const TextBlock = ({
     onSave?.(inMemoryContentRef.current);
   }, [onSave]);
 
-  useOnTransition(editing, true, false, saveDocumentChange);
+  Hooks.useOnTransition(editing, true, false, saveDocumentChange);
 
   const { parentRef, focusAttributes, view } = useTextEditor(
     () => ({
@@ -361,7 +353,7 @@ export type MessageTileProps = {
  * the unit rendered by `Thread.Messages`.
  */
 const MessageTile = ({ message, classNames, continues = true }: MessageTileProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = Hooks.useTranslation(translationKey);
   const {
     getMetadata,
     identityDid,
@@ -407,7 +399,7 @@ const MessageTile = ({ message, classNames, continues = true }: MessageTileProps
     showEdit || showAccept || showAcceptChange || showRejectChange || showDelete ? (
       <div className={buttonGroupClassNames}>
         {showEdit && (
-          <IconButton
+          <Button.Root
             data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
             variant='ghost'
             icon={editing ? 'ph--check--regular' : 'ph--pencil-simple--regular'}
@@ -418,7 +410,7 @@ const MessageTile = ({ message, classNames, continues = true }: MessageTileProps
           />
         )}
         {showAccept && (
-          <IconButton
+          <Button.Root
             data-testid='thread.message.accept'
             variant='ghost'
             icon='ph--check--regular'
@@ -429,7 +421,7 @@ const MessageTile = ({ message, classNames, continues = true }: MessageTileProps
           />
         )}
         {showAcceptChange && (
-          <IconButton
+          <Button.Root
             data-testid='thread.message.accept-change'
             variant='ghost'
             icon='ph--check--regular'
@@ -440,7 +432,7 @@ const MessageTile = ({ message, classNames, continues = true }: MessageTileProps
           />
         )}
         {showRejectChange && (
-          <IconButton
+          <Button.Root
             data-testid='thread.message.reject-change'
             variant='ghost'
             icon='ph--x--regular'
@@ -451,7 +443,7 @@ const MessageTile = ({ message, classNames, continues = true }: MessageTileProps
           />
         )}
         {showDelete && (
-          <IconButton
+          <Button.Root
             data-testid='thread.message.delete'
             variant='ghost'
             icon='ph--x--regular'
@@ -510,7 +502,7 @@ export type MessageGroupProps = {
  * to a single message.
  */
 const MessageGroup = ({ messages, continues = true, classNames }: MessageGroupProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = Hooks.useTranslation(translationKey);
   const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal } = useThreadContext('Message.Group');
   const [editing, setEditing] = useState(false);
 
@@ -541,7 +533,7 @@ const MessageGroup = ({ messages, continues = true, classNames }: MessageGroupPr
     showEdit || showAccept || showDelete ? (
       <div className={buttonGroupClassNames}>
         {showEdit && (
-          <IconButton
+          <Button.Root
             data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
             variant='ghost'
             icon={editing ? 'ph--check--regular' : 'ph--pencil-simple--regular'}
@@ -552,7 +544,7 @@ const MessageGroup = ({ messages, continues = true, classNames }: MessageGroupPr
           />
         )}
         {showAccept && (
-          <IconButton
+          <Button.Root
             data-testid='thread.message.accept'
             variant='ghost'
             icon='ph--check--regular'
@@ -563,7 +555,7 @@ const MessageGroup = ({ messages, continues = true, classNames }: MessageGroupPr
           />
         )}
         {showDelete && (
-          <IconButton
+          <Button.Root
             data-testid='thread.message.delete'
             variant='ghost'
             icon='ph--x--regular'

package/src/Message/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-export { Message } from './Message';
+export { Message } from './Message.tsx';
 export type {
   MessageAuthorNameProps,
   MessageBodyProps,
@@ -12,4 +12,4 @@ export type {
   MessageTextboxProps,
   MessageTileProps,
   MessageTimeProps,
-} from './Message';
+} from './Message.tsx';

package/src/Thread/Thread.stories.tsx

@@ -11,8 +11,8 @@ import { Message as MessageType } from '@dxos/types';
 
 import { translations } from '#translations';
 
-import { createMessages, getStoryMetadata } from '../testing';
-import { Thread } from './Thread';
+import { createMessages, getStoryMetadata } from '../testing.ts';
+import { Thread } from './Thread.tsx';
 
 const IDENTITY = { role: 'user' as const, identityDid: 'did:key:alice', name: 'Alice' };
 
@@ -26,7 +26,7 @@ const DefaultStory = () => {
 
   return (
     <Thread.Root getMetadata={getStoryMetadata} identityDid={IDENTITY.identityDid} editable onMessageDelete={() => {}}>
-      <Thread.Content classNames='grow min-h-0'>
+      <Thread.Content classNames='dx-grow'>
         <Thread.Messages messages={messages} />
         <Thread.Textbox id='composer' authorId={IDENTITY.identityDid} authorName={IDENTITY.name} onSend={handleSend} />
         <Thread.Status />
@@ -59,7 +59,7 @@ const MixedSendersStory = () => {
 
   return (
     <Thread.Root getMetadata={getStoryMetadata} identityDid={IDENTITY.identityDid} editable={false}>
-      <Thread.Content classNames='grow min-h-0'>
+      <Thread.Content classNames='dx-grow'>
         <Thread.Messages messages={messages} />
       </Thread.Content>
     </Thread.Root>
@@ -96,7 +96,7 @@ const GroupedStory = () => {
 
   return (
     <Thread.Root getMetadata={getStoryMetadata} identityDid={IDENTITY.identityDid} editable={false}>
-      <Thread.Content classNames='grow min-h-0'>
+      <Thread.Content classNames='dx-grow'>
         <Thread.Messages messages={messages} />
       </Thread.Content>
     </Thread.Root>

package/src/Thread/Thread.tsx

@@ -19,31 +19,24 @@ import React, {
 } from 'react';
 
 import { Obj } from '@dxos/echo';
-import {
-  type ComposableProps,
-  Icon,
-  IconButton,
-  ScrollArea,
-  type ThemedClassName,
-  composable,
-  composableProps,
-  useThemeContext,
-  useTranslation,
-} from '@dxos/react-ui';
 import { type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import * as Button from '@dxos/react-ui/Button';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Icon from '@dxos/react-ui/Icon';
+import * as ScrollArea from '@dxos/react-ui/ScrollArea';
+import * as Util from '@dxos/react-ui/Util';
 import { type Message as MessageType } from '@dxos/types';
 import { type Extension, createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
 import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
 
 import { translationKey } from '#translations';
 
-import { command } from '../command';
-import { ThreadContextProvider, useThreadContext } from '../context';
-import { Message } from '../Message';
-import { type MessageMetadata, type ThreadContextValue } from '../types';
-
-const getMessageId = (message: MessageType.Message) => Obj.getURI(message);
+import { command } from '../command.ts';
+import { ThreadContextProvider, useThreadContext } from '../context.ts';
+import { Message } from '../Message/index.ts';
+import { type MessageMetadata, type ThreadContextValue } from '../types.ts';
 
 //
 // Root
@@ -115,11 +108,11 @@ type ThreadContentExtra = {
 export type ThreadContentProps = ComposableProps<ThreadContentExtra>;
 
 /** Visible thread container (the attention surface that hosts header / messages / composer). */
-const ThreadContent = composable<HTMLDivElement, ThreadContentExtra>(
+const ThreadContent = Util.composable<HTMLDivElement, ThreadContentExtra>(
   ({ children, current, id, ...props }, forwardedRef) => {
     return (
       <div
-        {...composableProps(props, {
+        {...Util.composableProps(props, {
           role: 'group',
           classNames: [
             'flex flex-col bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]',
@@ -163,9 +156,9 @@ export type ThreadHeaderProps = Omit<
  * `[rail · 1fr · controls]` grid so the trailing controls align with message-tile
  * controls (which use the same template) — no grid is leaked in from the caller.
  */
-const ThreadHeader = composable<HTMLDivElement, ThreadHeaderProps>(
+const ThreadHeader = Util.composable<HTMLDivElement, ThreadHeaderProps>(
   ({ title, detached, current, controls, onSelect, ...props }, forwardedRef) => {
-    const { t } = useTranslation(translationKey);
+    const { t } = Hooks.useTranslation(translationKey);
     const { focusComposer } = useThreadContext('Thread.Header');
     const handleSelect = useCallback(() => {
       onSelect?.();
@@ -174,7 +167,7 @@ const ThreadHeader = composable<HTMLDivElement, ThreadHeaderProps>(
 
     return (
       <div
-        {...composableProps(props, {
+        {...Util.composableProps(props, {
           classNames: [
             'grid grid-cols-[var(--dx-rail-size)_1fr_min-content] items-center',
             hoverableControls,
@@ -184,13 +177,13 @@ const ThreadHeader = composable<HTMLDivElement, ThreadHeaderProps>(
         ref={forwardedRef}
       >
         <div className='flex items-center justify-center'>
-          <IconButton
+          <Button.Root
             iconOnly
             variant='ghost'
-            density='sm'
+            size='sm'
             icon='ph--caret-double-right--regular'
             label={t('select-thread.label')}
-            classNames='text-description'
+            classNames='text-fg-muted'
             onClick={handleSelect}
           />
         </div>
@@ -200,7 +193,7 @@ const ThreadHeader = composable<HTMLDivElement, ThreadHeaderProps>(
             data-testid='thread.heading'
             className={mx(
               'me-2 font-medium truncate italic',
-              current ? 'text-accent-text' : 'text-description',
+              current ? 'text-accent-text' : 'text-fg-muted',
               detached && 'line-through decoration-1',
             )}
           >
@@ -297,7 +290,7 @@ const groupMessages = (
     if (currentGroup && sameSenderAsGroup && withinGroupWindow) {
       currentGroup.messages.push(message);
     } else {
-      currentGroup = { kind: 'group', id: getMessageId(message), messages: [message] };
+      currentGroup = { kind: 'group', id: Obj.getURI(message), messages: [message] };
       items.push(currentGroup);
     }
     lastGroupMessage = message;
@@ -320,7 +313,7 @@ const groupMessages = (
 
 const ThreadDivider = ({ label }: { label?: string }) =>
   label ? (
-    <div className='flex items-center gap-2 px-2 py-2 text-xs text-description'>
+    <div className='flex items-center gap-2 px-2 py-2 text-xs text-fg-muted'>
       <div className='h-px grow bg-separator' />
       <span className='shrink-0'>{label}</span>
       <div className='h-px grow bg-separator' />
@@ -343,7 +336,7 @@ const ThreadItemAdapter = ({ id, data, location, draggable, current, selected }:
   </Mosaic.Tile>
 );
 
-export type ThreadMessagesProps = ThemedClassName<{
+export type ThreadMessagesProps = Util.ThemedClassName<{
   messages: readonly MessageType.Message[];
   /** Stable id of the owning thread; scopes the Mosaic container so multiple threads don't collide. */
   id?: string;
@@ -372,7 +365,7 @@ const ThreadMessages = ({
   gapDividerMs = DEFAULT_GAP_DIVIDER_MS,
   classNames,
 }: ThreadMessagesProps) => {
-  const { dtLocale } = useTranslation(translationKey);
+  const { dtLocale } = Hooks.useTranslation(translationKey);
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
   const items = useMemo(
     () => groupMessages(messages.filter(Boolean), { groupWindowMs, dayDivider, gapDividerMs, dtLocale }),
@@ -393,7 +386,7 @@ const ThreadMessages = ({
       currentId={currentId}
       eventHandler={eventHandler}
     >
-      <ScrollArea.Root classNames={mx('col-span-2 flex-1 min-h-0', classNames)} orientation='vertical'>
+      <ScrollArea.Root classNames={mx('col-span-2 dx-grow', classNames)} orientation='vertical'>
         <ScrollArea.Viewport ref={setViewport}>
           <Mosaic.VirtualStack
             Tile={ThreadItemAdapter}
@@ -429,8 +422,8 @@ export type ThreadTextboxProps = MessageMetadata & {
 
 /** Message composer pinned at the foot of a thread. */
 const ThreadTextbox = ({ placeholder, autoFocus, disabled, extensions, onSend, ...metadata }: ThreadTextboxProps) => {
-  const { t } = useTranslation(translationKey);
-  const { themeMode } = useThemeContext();
+  const { t } = Hooks.useTranslation(translationKey);
+  const themeMode = Hooks.useThemeMode();
   const { registerComposerFocus } = useThreadContext('Thread.Textbox');
   const composerRef = useRef<{ focus: () => void } | null>(null);
   const messageRef = useRef('');
@@ -483,23 +476,23 @@ ThreadTextbox.displayName = 'Thread.Textbox';
 // Status
 //
 
-export type ThreadStatusProps = ThemedClassName<PropsWithChildren> & {
+export type ThreadStatusProps = Util.ThemedClassName<PropsWithChildren> & {
   activity?: boolean;
 };
 
 const ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(
   ({ activity, classNames, children, ...props }, forwardedRef) => {
-    const { t } = useTranslation(translationKey);
+    const { t } = Hooks.useTranslation(translationKey);
     return (
       <div
         {...props}
         className={mx(
-          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description',
+          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-fg-muted',
           classNames,
         )}
         ref={forwardedRef}
       >
-        <Icon
+        <Icon.Icon
           icon='ph--spinner--bold'
           classNames='w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow'
           data-visible={activity ? 'show' : 'hide'}

package/src/Thread/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { Thread } from './Thread';
+export { Thread } from './Thread.tsx';
 export type {
   ThreadContentProps,
   ThreadHeaderProps,
@@ -10,4 +10,4 @@ export type {
   ThreadRootProps,
   ThreadStatusProps,
   ThreadTextboxProps,
-} from './Thread';
+} from './Thread.tsx';

package/src/command.ts

@@ -37,15 +37,15 @@ const parser = StreamLanguage.define<{ count: number }>({
 const styles = HighlightStyle.define([
   {
     tag: tags.tagName,
-    class: mx('dx-tag dx-tag--indigo'),
+    class: mx('dx-tag dx-tag-inline dx-tag-indigo mx-0.5'),
   },
   {
     tag: tags.labelName,
-    class: mx('dx-tag dx-tag--blue'),
+    class: mx('dx-tag dx-tag-inline dx-tag-blue mx-0.5'),
   },
 ]);
 
-// Center the inline `.dx-tag` pills on the text line. `.dx-tag` is `inline-block`
+// Center the inline `.dx-tag` pills on the text line. An inline tag is an inline box
 // with vertical padding, so on a CodeMirror line it baseline-aligns and rides
 // high; overriding `vertical-align` recentres it (cf. the `cm-reference-pill`
 // precedent in `@dxos/react-ui-chat`).

package/src/context.ts

@@ -2,14 +2,14 @@
 // Copyright 2026 DXOS.org
 //
 
-import { createContext } from '@radix-ui/react-context';
 import { type FC, type ReactNode } from 'react';
 
+import { createContext } from '@dxos/react-hooks';
 // Imported so TypeScript can name this type in the emitted .d.ts (ThreadContext → Message).
 // eslint-disable-next-line unused-imports/no-unused-imports
 import { type Message } from '@dxos/types';
 
-import { type ThreadContextValue } from './types';
+import { type ThreadContextValue } from './types.ts';
 
 /**
  * Context provided by `Thread.Root` and consumed by its parts. Extends the

package/src/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { Thread } from './Thread';
+export { Thread } from './Thread/index.ts';
 export type {
   ThreadContentProps,
   ThreadHeaderProps,
@@ -10,8 +10,8 @@ export type {
   ThreadRootProps,
   ThreadStatusProps,
   ThreadTextboxProps,
-} from './Thread';
-export { Message } from './Message';
+} from './Thread/index.ts';
+export { Message } from './Message/index.ts';
 export type {
   MessageAuthorNameProps,
   MessageBodyProps,
@@ -21,13 +21,13 @@ export type {
   MessageTextboxProps,
   MessageTileProps,
   MessageTimeProps,
-} from './Message';
-export { command } from './command';
-export { useThreadContext } from './context';
+} from './Message/index.ts';
+export { command } from './command.ts';
+export { useThreadContext } from './context.ts';
 export type {
   MessageCallbacks,
   MessageMetadata,
   ObjectTileComponent,
   ThreadComponents,
   ThreadContextValue,
-} from './types';
+} from './types.ts';

package/src/testing.ts

@@ -8,7 +8,7 @@ import { type ValueGenerator, createGenerator } from '@dxos/schema/testing';
 import { Message } from '@dxos/types';
 import { hexToFallback } from '@dxos/util';
 
-import { type MessageMetadata } from './types';
+import { type MessageMetadata } from './types.ts';
 
 const generator: ValueGenerator = random as any;