@dxos/plugin-thread 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.8.4-main.3eb6e50203",
+  "version": "0.8.4-main.4a85c3132b",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,21 +14,21 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     },
     "./blueprints": {
+      "source": "./src/blueprints/index.ts",
       "browser": "./dist/lib/browser/blueprints/index.mjs",
       "node": "./dist/lib/node-esm/blueprints/index.mjs",
-      "source": "./src/blueprints/index.ts",
       "types": "./dist/types/src/blueprints/index.d.ts"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs",
-      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts"
     }
   },
@@ -62,50 +62,50 @@
     "md5-hex": "5.0.0",
     "react-resize-detector": "^11.0.1",
     "wavefile": "^11.0.0",
-    "@dxos/app-framework": "0.8.4-main.3eb6e50203",
-    "@dxos/async": "0.8.4-main.3eb6e50203",
-    "@dxos/app-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/assistant": "0.8.4-main.3eb6e50203",
-    "@dxos/codec-protobuf": "0.8.4-main.3eb6e50203",
-    "@dxos/context": "0.8.4-main.3eb6e50203",
-    "@dxos/debug": "0.8.4-main.3eb6e50203",
-    "@dxos/blueprints": "0.8.4-main.3eb6e50203",
-    "@dxos/devtools": "0.8.4-main.3eb6e50203",
-    "@dxos/display-name": "0.8.4-main.3eb6e50203",
-    "@dxos/echo": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-db": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-react": "0.8.4-main.3eb6e50203",
-    "@dxos/functions": "0.8.4-main.3eb6e50203",
-    "@dxos/invariant": "0.8.4-main.3eb6e50203",
-    "@dxos/effect": "0.8.4-main.3eb6e50203",
-    "@dxos/keys": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-client": "0.8.4-main.3eb6e50203",
-    "@dxos/log": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-graph": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-deck": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-observability": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-markdown": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-settings": "0.8.4-main.3eb6e50203",
-    "@dxos/protocols": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-space": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/operation": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-dnd": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-menu": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-form": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-sfx": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-thread": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-tabs": "0.8.4-main.3eb6e50203",
-    "@dxos/schema": "0.8.4-main.3eb6e50203",
-    "@dxos/types": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-editor": "0.8.4-main.3eb6e50203"
+    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
+    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
+    "@dxos/assistant": "0.8.4-main.4a85c3132b",
+    "@dxos/blueprints": "0.8.4-main.4a85c3132b",
+    "@dxos/async": "0.8.4-main.4a85c3132b",
+    "@dxos/context": "0.8.4-main.4a85c3132b",
+    "@dxos/debug": "0.8.4-main.4a85c3132b",
+    "@dxos/devtools": "0.8.4-main.4a85c3132b",
+    "@dxos/codec-protobuf": "0.8.4-main.4a85c3132b",
+    "@dxos/echo": "0.8.4-main.4a85c3132b",
+    "@dxos/display-name": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-db": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-react": "0.8.4-main.4a85c3132b",
+    "@dxos/invariant": "0.8.4-main.4a85c3132b",
+    "@dxos/effect": "0.8.4-main.4a85c3132b",
+    "@dxos/keys": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-attention": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-deck": "0.8.4-main.4a85c3132b",
+    "@dxos/operation": "0.8.4-main.4a85c3132b",
+    "@dxos/log": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-markdown": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-observability": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-settings": "0.8.4-main.4a85c3132b",
+    "@dxos/functions": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
+    "@dxos/protocols": "0.8.4-main.4a85c3132b",
+    "@dxos/react-client": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-attention": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-dnd": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-editor": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-menu": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-form": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-sfx": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-thread": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-tabs": "0.8.4-main.4a85c3132b",
+    "@dxos/schema": "0.8.4-main.4a85c3132b",
+    "@dxos/types": "0.8.4-main.4a85c3132b",
+    "@dxos/util": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-editor": "0.8.4-main.4a85c3132b"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -115,13 +115,13 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/plugin-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-testing": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203"
+    "vite": "^7.1.11",
+    "@dxos/plugin-testing": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-theme": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/random": "0.8.4-main.4a85c3132b",
+    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -129,8 +129,8 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "publishConfig": {
     "access": "public"

package/src/ThreadPlugin.tsx

@@ -8,7 +8,7 @@ import { Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 import { Ref, Type } from '@dxos/echo';
 import { Operation } from '@dxos/operation';
-import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { ClientEvents } from '@dxos/plugin-client';
 import { MarkdownEvents } from '@dxos/plugin-markdown';
 import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
 import { type CreateObject } from '@dxos/plugin-space/types';
@@ -55,13 +55,6 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
           loadReferences: async (thread: Thread.Thread) => await Ref.Array.loadAll(thread.messages ?? []),
         },
       },
-      {
-        id: Message.Message.typename,
-        metadata: {
-          // TODO(wittjosiah): Move out of metadata.
-          loadReferences: () => [], // loadObjectReferences(message, (message) => [...message.parts, message.context]),
-        },
-      },
       {
         id: THREAD_ITEM,
         metadata: {
@@ -82,7 +75,7 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
   AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
   AppPlugin.addReactRootModule({ activate: ReactRoot }),
   AppPlugin.addSchemaModule({
-    schema: [AnchoredTo.AnchoredTo, Channel.Channel, Message.Message, Message.MessageV1, Thread.Thread],
+    schema: [AnchoredTo.AnchoredTo, Channel.Channel, Message.Message, Thread.Thread],
   }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations: [...translations, ...threadTranslations] }),
@@ -105,11 +98,6 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
     activatesOn: AppActivationEvents.SetupSettings,
     activate: ThreadState,
   }),
-  Plugin.addModule({
-    id: 'migration',
-    activatesOn: ClientEvents.SetupMigration,
-    activate: () => Effect.succeed(Capability.contributes(ClientCapabilities.Migration, [Message.MessageV1ToV2])),
-  }),
   Plugin.addModule({
     id: 'on-space-created',
     activatesOn: SpaceEvents.SpaceCreated,

package/src/blueprints/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * as ThreadBlueprint from './thread-blueprint';
+export { default as ThreadBlueprint } from './thread-blueprint';

package/src/blueprints/thread-blueprint.ts

@@ -2,19 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
-import { type FunctionDefinition } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-import { createProposals } from '../functions';
+import { ThreadFunctions } from '../functions';
 
-export const functions: FunctionDefinition[] = [createProposals];
+const BLUEPRINT_KEY = 'dxos.org/blueprint/thread';
 
-export const Key = 'dxos.org/blueprint/thread';
+const functions = Object.values(ThreadFunctions);
 
-export const make = () =>
+const make = () =>
   Blueprint.make({
-    key: Key,
+    key: BLUEPRINT_KEY,
     name: 'Thread',
     tools: Blueprint.toolDefinitions({ functions }),
     instructions: Template.make({
@@ -30,3 +30,11 @@ export const make = () =>
       `,
     }),
   });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  functions,
+  make,
+};
+
+export default blueprint;

package/src/calls-service.stories.tsx

@@ -172,7 +172,7 @@ const DefaultStory = ({ source }: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/calls-service',
+  title: 'plugins/plugin-thread/experimental/Calls',
   render: DefaultStory,
   decorators: [
     withTheme(),

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -9,16 +9,9 @@ import { AppCapabilities } from '@dxos/app-toolkit';
 
 import { ThreadBlueprint } from '../../blueprints';
 
-export type BlueprintCapabilities = [
-  Capability.Capability<typeof AppCapabilities.Functions>,
-  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>,
-];
-
-const blueprintDefinition = Capability.makeModule<[], BlueprintCapabilities>(() =>
-  Effect.succeed([
-    Capability.contributes(AppCapabilities.Functions, ThreadBlueprint.functions),
-    Capability.contributes(AppCapabilities.BlueprintDefinition, ThreadBlueprint.make()),
-  ]),
-);
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, ThreadBlueprint)]));
 
 export default blueprintDefinition;

package/src/capabilities/markdown/markdown.ts

@@ -53,7 +53,6 @@ export default Capability.makeModule(
             transaction.effects.forEach(async (effect) => {
               if (effect.is(commentClickedEffect)) {
                 void invokePromise(DeckOperation.ChangeCompanion, {
-                  primary: id,
                   companion: `${id}${ATTENDABLE_PATH_SEPARATOR}comments`,
                 });
               }

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -14,7 +14,7 @@ import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/type
 import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { SpaceOperation } from '@dxos/plugin-space/types';
 import { Ref } from '@dxos/react-client/echo';
-import { Collection } from '@dxos/schema';
+import { ManagedCollection } from '@dxos/schema';
 import { AnchoredTo, Message, Thread } from '@dxos/types';
 
 import { meta } from '../../meta';
@@ -136,7 +136,7 @@ export default Capability.makeModule(
               return;
             }
 
-            const collection = Collection.makeManaged({ key: Type.getTypename(Channel.Channel) });
+            const collection = ManagedCollection.makeManagedCollection({ key: Type.getTypename(Channel.Channel) });
             Obj.change(rootCollection, (c) => {
               c.objects.push(Ref.make(collection));
             });
@@ -178,7 +178,6 @@ export default Capability.makeModule(
             // Follow-up operations.
             yield* Operation.invoke(ThreadOperation.Select, { current: Obj.getDXN(thread).toString() });
             yield* Operation.invoke(DeckOperation.ChangeCompanion, {
-              primary: subjectId,
               companion: `${subjectId}${ATTENDABLE_PATH_SEPARATOR}comments`,
             });
           }),

package/src/capabilities/react-surface/react-surface.tsx

@@ -20,7 +20,7 @@ import {
   ChatContainer,
   ThreadCompanion,
   ThreadSettings,
-} from '../../components';
+} from '../../containers';
 import { meta } from '../../meta';
 import { Channel, ThreadCapabilities, type ThreadSettingsProps } from '../../types';
 

package/src/capabilities/repair/repair.ts

@@ -6,9 +6,10 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { Obj, Ref, Type } from '@dxos/echo';
+import { Collection } from '@dxos/echo';
 import { SpaceCapabilities } from '@dxos/plugin-space';
 import { type Space } from '@dxos/react-client/echo';
-import { Collection } from '@dxos/schema';
+import { ManagedCollection } from '@dxos/schema';
 
 import { Channel } from '../../types';
 
@@ -38,13 +39,16 @@ const ensureSystemCollection = async (space: Space) => {
 
   const objects = await Promise.all(rootCollection.objects.map((ref) => ref.load()));
   const channels = objects.find(
-    (object) => Obj.instanceOf(Collection.Managed, object) && object.key === Type.getTypename(Channel.Channel),
+    (object) =>
+      Obj.instanceOf(ManagedCollection.ManagedCollection, object) && object.key === Type.getTypename(Channel.Channel),
   );
   if (channels) {
     return;
   }
 
-  const channelCollectionRef = Ref.make(Collection.makeManaged({ key: Type.getTypename(Channel.Channel) }));
+  const channelCollectionRef = Ref.make(
+    ManagedCollection.makeManagedCollection({ key: Type.getTypename(Channel.Channel) }),
+  );
   Obj.change(rootCollection, (c) => {
     c.objects.push(channelCollectionRef);
   });

package/src/components/Call/Toolbar.tsx

@@ -63,7 +63,7 @@ export const Toolbar = ({
   // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
   return (
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
+      <NaturalToolbar.Root classNames={['p-2 bg-modal-surface rounded-md shadow-md', classNames]}>
         <ToggleButton
           active={media.audioEnabled}
           state={{
@@ -71,13 +71,12 @@ export const Toolbar = ({
               icon: 'ph--microphone--regular',
               label: t('mic off'),
               onClick: () => call.turnAudioOff(),
-              classNames: 'bg-callActive',
+              classNames: 'bg-call-active',
             },
             off: {
               icon: 'ph--microphone-slash--duotone',
               label: t('mic on'),
               onClick: () => call.turnAudioOn(),
-              classNames: [joined && 'bg-callAlert'],
             },
           }}
         />
@@ -98,7 +97,7 @@ export const Toolbar = ({
         />
 
         {(participants !== undefined && (
-          <div className='flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued'>
+          <div className='flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued'>
             <Icon icon='ph--users--regular' size={4} />
             <div>{participants}</div>
           </div>
@@ -144,7 +143,6 @@ export const Toolbar = ({
                   icon: 'ph--hand-waving--regular',
                   label: t('lower hand'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
@@ -183,7 +181,7 @@ const defaultButtonProps: Partial<IconButtonProps> = {
 const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
   <IconButton
     {...defaultButtonProps}
-    classNames={[active ? (state.on.classNames ?? 'bg-callActive') : state.off.classNames]}
+    classNames={[active ? (state.on.classNames ?? 'bg-call-active') : state.off.classNames]}
     icon={active ? state.on.icon : state.off.icon}
     label={active ? state.on.label : state.off.label}
     onClick={active ? state.on.onClick : state.off.onClick}

package/src/components/Comments.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Query, Relation } from '@dxos/echo';
 import { TestSchema } from '@dxos/echo/testing';
@@ -61,16 +61,17 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/Comments',
+  title: 'plugins/plugin-thread/components/Comments',
   render: render(DefaultStory),
   decorators: [
     withTheme(),
-    withLayout({ layout: 'column', scroll: true }),
+    withLayout({ layout: 'column' }),
     // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
     //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
       plugins: [
         OperationPlugin(),
+        RuntimePlugin(),
         ClientPlugin({
           types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
           onClientInitialized: ({ client }) =>

package/src/components/CommentsContainer.tsx

@@ -5,7 +5,7 @@
 import React, { useEffect } from 'react';
 
 import { Obj, Relation } from '@dxos/echo';
-import { Callout, Icon, Trans, useTranslation } from '@dxos/react-ui';
+import { Icon, Message, Trans, useTranslation } from '@dxos/react-ui';
 import { type AnchoredTo, type Thread } from '@dxos/types';
 
 import { meta } from '../meta';
@@ -29,7 +29,8 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
     ? anchors.filter((anchor) => !!Relation.getSource(anchor))
     : anchors.filter((anchor) => {
         const thread = Relation.getSource(anchor);
-        return thread && thread.status !== 'resolved';
+        // TODO(dmaretskyi): Do Obj.instanceOf check instead.
+        return thread && (thread as any).status !== 'resolved';
       });
 
   useEffect(() => {
@@ -40,20 +41,20 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
 
   if (filteredAnchors.length === 0) {
     return (
-      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
-        <Callout.Root>
-          <Callout.Title>
+      <div role='none' className='p-form-padding'>
+        <Message.Root>
+          <Message.Title>
             <Trans
               {...{
                 t,
                 i18nKey: 'no comments message',
                 components: {
-                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='inline-block' />,
+                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='w-block' />,
                 },
               }}
             />
-          </Callout.Title>
-        </Callout.Root>
+          </Message.Title>
+        </Message.Root>
       </div>
     );
   }

package/src/components/CommentsThreadContainer.tsx

@@ -98,7 +98,7 @@ export const CommentsThreadContainer = ({
   return (
     <ThreadComponent.Root
       id={Obj.getDXN(thread).toString()}
-      classNames='pbs-2 border-be border-subduedSeparator last:border-none'
+      classNames='pt-2 border-b border-subdued-separator last:border-none'
       current={current}
       onClickCapture={handleAttend}
       onFocusCapture={handleAttend}
@@ -106,7 +106,7 @@ export const CommentsThreadContainer = ({
       <div
         role='none'
         className={mx(
-          'col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]',
+          'col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]',
           hoverableControls,
           hoverableFocusedWithinControls,
         )}
@@ -166,8 +166,7 @@ export const CommentsThreadContainer = ({
 
       <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>
 
-      {/* 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} />
+      <div role='none' className='h-px -mt-px' ref={threadScrollRef} />
     </ThreadComponent.Root>
   );
 };

package/src/components/Media/VideoObject.stories.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useState } from 'react';
 import { scheduleTask } from '@dxos/async';
 import { Context } from '@dxos/context';
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { getUserMediaTrack } from '../../calls';
 import { ResponsiveContainer } from '../ResponsiveGrid';
@@ -44,10 +44,10 @@ const DefaultStory = (props: VideoObjectProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/VideoObject',
+  title: 'plugins/plugin-thread/components/VideoObject',
   component: VideoObject,
   render: DefaultStory,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Media/VideoObject.tsx

@@ -32,7 +32,7 @@ export const VideoObject = memo(
     return (
       <video
         className={mx(
-          'is-full aspect-video',
+          'w-full aspect-video',
           flip && 'scale-x-[-1]',
           contain ? 'object-contain' : 'object-cover',
           classNames,

package/src/components/MessageContainer.tsx

@@ -12,8 +12,8 @@ import { PublicKey } from '@dxos/react-client';
 import { type SpaceMember } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { IconButton, useOnTransition, useThemeContext, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
 import { useTextEditor } from '@dxos/react-ui-editor';
-import { Card } from '@dxos/react-ui-mosaic';
 import { MessageHeading, MessageRoot } from '@dxos/react-ui-thread';
 import { type ContentBlock, type Message } from '@dxos/types';
 import { createBasicExtensions, createThemeExtensions } from '@dxos/ui-editor';
@@ -25,11 +25,11 @@ import { getMessageMetadata } from '../util';
 
 import { command } from './command-extension';
 
-export const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pie-2';
-export const buttonClassNames = '!p-1 transition-opacity';
+export const buttonGroupClassNames = 'flex flex-row items-center gap-0.5 pe-2';
+export const buttonClassNames = 'p-1! transition-opacity';
 
 export type MessageContainerProps = {
-  message: Obj.Obj<Message.Message> | Ref.Ref<Obj.Obj<Message.Message>>;
+  message: Obj.OfShape<Message.Message> | Ref.Ref<Obj.OfShape<Message.Message>>;
   members: SpaceMember[];
   editable?: boolean;
   onDelete?: (id: string) => void;
@@ -187,12 +187,12 @@ const TextboxBlock = ({
     editing && view?.focus();
   }, [editing, view]);
 
-  return <div role='none' ref={parentRef} className='mie-4' {...focusAttributes} />;
+  return <div role='none' ref={parentRef} className='me-4' {...focusAttributes} />;
 };
 
 const ProposalBlock = ({ block }: { block: ContentBlock.Proposal }) => {
   return (
-    <div role='none' className='mie-4 italic'>
+    <div role='none' className='me-4 italic'>
       {block.text}
     </div>
   );
@@ -207,10 +207,10 @@ const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown
 
   return (
     <Card.Root
-      className={mx('grid col-span-3 plb-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
+      className={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}
       ref={forwardedRef}
     >
-      <Surface.Surface role='card-content' limit={1} data={{ subject }} fallback={title} />
+      <Surface.Surface role='card--content' limit={1} data={{ subject }} fallback={title} />
     </Card.Root>
   );
 });

package/src/components/ResponsiveGrid/ResponsiveContainer.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
 import { VideoObject as VideoObjectComponent } from '../Media';
@@ -13,9 +13,9 @@ import { VideoObject as VideoObjectComponent } from '../Media';
 import { ResponsiveContainer } from './ResponsiveContainer';
 
 const meta = {
-  title: 'plugins/plugin-thread/ResponsiveContainer',
+  title: 'plugins/plugin-thread/components/ResponsiveContainer',
   component: ResponsiveContainer,
-  decorators: [withTheme()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/ResponsiveGrid/ResponsiveContainer.tsx

@@ -18,11 +18,11 @@ import { mx } from '@dxos/ui-theme';
 export const ResponsiveContainer = ({ children }: PropsWithChildren) => {
   return (
     // Outer container that takes full size of parent.
-    <div role='none' className='relative flex is-full bs-full'>
+    <div role='none' className='relative flex w-full h-full'>
       {/* Absolute positioning layer for centering content. */}
       <div role='none' className='absolute inset-0 flex justify-center items-center'>
         {/* Content container that maintains given aspect ratio and proper scaling. */}
-        <div role='none' className={mx('max-bs-full max-is-full is-auto bs-auto aspect-video')}>
+        <div role='none' className={mx('max-h-full max-w-full w-auto h-auto aspect-video')}>
           {children}
         </div>
       </div>