@dxos/plugin-thread 0.8.4-main.7ace549 → 0.8.4-main.9735255

package/src/components/Call/Call.tsx

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { type FC, type PropsWithChildren } from 'react';
 
 import { useCapability } from '@dxos/app-framework/react';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { useDebugMode } from '../../hooks';
+import { ThreadCapabilities } from '../../types';
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
 
@@ -34,8 +35,9 @@ type CallAudioProps = {};
 
 const CallAudio: FC<CallAudioProps> = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
+  const audioTracksToPlay = useAtomValue(call.audioTracksToPlayAtom);
 
-  return <AudioStream tracks={call.audioTracksToPlay} />;
+  return <AudioStream tracks={audioTracksToPlay} />;
 };
 
 CallAudio.displayName = 'CallAudio';
@@ -51,10 +53,12 @@ type CallGridProps = {
 const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
   const debug = useDebugMode();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const self = useAtomValue(call.selfAtom);
+  const users = useAtomValue(call.usersAtom);
 
   return (
     <div className='grid grow p-4 dark:bg-neutral-900'>
-      <ParticipantGrid self={call.self} users={call.users} debug={debug} fullscreen={fullscreen} />
+      <ParticipantGrid self={self} users={users} debug={debug} fullscreen={fullscreen} />
     </div>
   );
 };

package/src/components/Call/Toolbar.tsx

@@ -2,10 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework/react';
 import { Obj } from '@dxos/echo';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions, useNode } from '@dxos/plugin-graph';
 import {
   Icon,
@@ -16,10 +18,10 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
 import { type Channel } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
@@ -42,14 +44,18 @@ export const Toolbar = ({
 }: ToolbarProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
+  const runAction = useActionRunner();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const media = useAtomValue(call.mediaAtom);
+  const joined = useAtomValue(call.joinedAtom);
+  const raisedHand = useAtomValue(call.raisedHandAtom);
 
   // Channel app graph node.
   const node = useNode(graph, channel && Obj.getDXN(channel).toString());
   const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
 
   // Screen sharing.
-  const isScreensharing = call.media.screenshareTrack !== undefined;
+  const isScreensharing = media.screenshareTrack !== undefined;
   const canSharescreen =
     typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia !== undefined;
 
@@ -58,7 +64,7 @@ export const Toolbar = ({
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
       <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
         <ToggleButton
-          active={call.media.audioEnabled}
+          active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
@@ -70,12 +76,12 @@ export const Toolbar = ({
               icon: 'ph--microphone-slash--duotone',
               label: t('mic on'),
               onClick: () => call.turnAudioOn(),
-              classNames: [call.joined && 'bg-callAlert'],
+              classNames: [joined && 'bg-callAlert'],
             },
           }}
         />
         <ToggleButton
-          active={call.media.videoEnabled}
+          active={media.videoEnabled}
           state={{
             on: {
               icon: 'ph--video-camera--regular',
@@ -97,7 +103,7 @@ export const Toolbar = ({
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
 
-        {call.joined && (
+        {joined && (
           <>
             <ToggleButton
               disabled={!canSharescreen}
@@ -117,25 +123,27 @@ export const Toolbar = ({
             />
 
             {/* Companion actions. */}
-            {actions.map((action) => (
-              <IconButton
-                key={action.id}
-                {...defaultButtonProps}
-                icon={action.properties.icon}
-                label={toLocalizedString(action.properties.label, t)}
-                classNames={action.properties.classNames}
-                onClick={() => action.data({ node })}
-              />
-            ))}
+            {actions
+              .filter((action): action is Node.Action => Node.isAction(action))
+              .map((action) => (
+                <IconButton
+                  key={action.id}
+                  {...defaultButtonProps}
+                  icon={action.properties.icon}
+                  label={toLocalizedString(action.properties.label, t)}
+                  classNames={action.properties.classNames}
+                  onClick={() => node && void runAction(action, { parent: node })}
+                />
+              ))}
 
             <ToggleButton
-              active={call.raisedHand}
+              active={raisedHand}
               state={{
                 on: {
                   icon: 'ph--hand-waving--regular',
                   label: t('lower hand'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [call.joined && 'bg-callAlert'],
+                  classNames: [joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
@@ -146,7 +154,7 @@ export const Toolbar = ({
             />
           </>
         )}
-        {call.joined ? (
+        {joined ? (
           <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
         ) : (
           <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />

package/src/components/CallSidebar.tsx

@@ -2,17 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { useCapability } from '@dxos/app-framework/react';
 
-import { ThreadCapabilities } from '../capabilities';
+import { ThreadCapabilities } from '../types';
 
 import { ChannelContainer } from './ChannelContainer';
 
 export const CallSidebar = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
-  return <ChannelContainer roomId={call.roomId} />;
+  const roomId = useAtomValue(call.roomIdAtom);
+  return <ChannelContainer subject={undefined} roomId={roomId} />;
 };
 
 export default CallSidebar;

package/src/components/ChannelContainer.stories.tsx

@@ -5,10 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { contributes } from '@dxos/app-framework';
+import { Capability, Common } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { ClientCapabilities } from '@dxos/plugin-client';
-import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
+import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { render } from '@dxos/storybook-utils';
 import { Message, Thread } from '@dxos/types';
@@ -21,13 +20,13 @@ import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer
 
 // TODO(wittjosiah): Channel doesn't render full height.
 const DefaultStory = ({ roomId }: ChannelContainerProps) => {
-  const space = useSpace();
-  const [channel] = useQuery(space, Query.type(Channel.Channel));
+  const db = useDatabase();
+  const [channel] = useQuery(db, Query.type(Channel.Channel));
   if (!channel) {
     return null;
   }
 
-  return <ChannelContainer channel={channel} roomId={roomId} />;
+  return <ChannelContainer subject={channel} roomId={roomId} />;
 };
 
 const meta = {
@@ -36,10 +35,12 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ container: 'column' }),
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
+      capabilities: [
+        Capability.contributes(Common.Capability.Schema, [Channel.Channel, Thread.Thread, Message.Message]),
+      ],
     }),
   ],
   parameters: {
@@ -54,6 +55,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     // Fixed room for testing.
+    subject: undefined,
     roomId: '04a1d1911703b8e929d0649021a965',
   },
 };

package/src/components/ChannelContainer.tsx

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useCapabilities, useCapability } from '@dxos/app-framework/react';
+import { type SurfaceComponentProps, useCapabilities, useCapability } from '@dxos/app-framework/react';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
 import { Obj } from '@dxos/echo';
@@ -19,30 +19,32 @@ import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMe
 import { useSoundEffect } from '@dxos/react-ui-sfx';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { ThreadCapabilities } from '../capabilities';
 import { meta } from '../meta';
+import { ThreadCapabilities } from '../types';
 import { type Channel } from '../types';
 
 import { Call } from './Call';
 import ChatContainer from './ChatContainer';
 
-// TODO(burdon): Create Radix style layout.
-
-export type ChannelContainerProps = {
-  channel?: Channel.Channel;
-  roomId?: string;
-  role?: string;
-  fullscreen?: boolean;
-};
+export type ChannelContainerProps = SurfaceComponentProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
 
 /**
  * Renders a call when active, otherwise renders the channel chat.
  */
-export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+// TODO(burdon): Create Radix style layout.
+export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
+  const joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
   const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
-  const roomId = _roomId ?? attendableId ?? failUndefined();
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -83,7 +85,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -96,7 +98,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       // TODO(burdon): Error sound.
       log.catch(err);
     }
-  }, [extensions, channel, roomId]);
+  }, [extensions, channel, roomId, joined]);
 
   /**
    * Leave the call.
@@ -115,7 +117,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
     }
   }, [extensions, roomId]);
 
-  const isJoined = callManager.joined && callManager.roomId === roomId;
+  const isJoined = joined && currentRoomId === roomId;
 
   return (
     <StackItem.Content classNames={isJoined && 'bs-full'} toolbar={!isJoined}>

package/src/components/Chat.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Capabilities, IntentPlugin, contributes, createSurface } from '@dxos/app-framework';
+import { Capability, Common, OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
@@ -45,7 +45,7 @@ const DefaultStory = () => {
   }
 
   return (
-    <main className='is-full max-is-prose mli-auto bs-dvh overflow-hidden'>
+    <main className='is-full max-is-proseMaxWidth mli-auto bs-full overflow-hidden'>
       <ChatContainer space={space} thread={channel.defaultThread.target} />
     </main>
   );
@@ -58,11 +58,11 @@ const meta = {
   decorators: [
     withTheme,
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin()],
       capabilities: [
-        contributes(
-          Capabilities.ReactSurface,
-          createSurface({
+        Capability.contributes(
+          Common.Capability.ReactSurface,
+          Common.createSurface({
             id: 'test',
             role: 'card',
             component: ({ role }) => <span>{JSON.stringify({ role })}</span>,

package/src/components/ChatContainer.tsx

@@ -8,9 +8,7 @@ import { Obj, Ref } from '@dxos/echo';
 import { type Space, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
 import {
   MessageTextbox,
   type MessageTextboxProps,
@@ -19,6 +17,8 @@ import {
   threadLayout,
 } from '@dxos/react-ui-thread';
 import { Message, type Thread } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { useStatus } from '../hooks';
@@ -44,7 +44,7 @@ export type ChatContainerProps = ThemedClassName<
   {
     space: Space;
     thread: Thread.Thread;
-    context?: Obj.Any;
+    context?: Obj.Unknown;
     autoFocusTextbox?: boolean;
   } & Pick<ThreadRootProps, 'current'>
 >;
@@ -60,7 +60,7 @@ export const ChatContainer = ({
   const { t } = useTranslation(meta.id);
   const id = Obj.getDXN(thread).toString();
   const identity = useIdentity()!;
-  const members = useMembers(space?.key);
+  const members = useMembers(space?.id);
   const activity = useStatus(space, id);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
@@ -98,16 +98,18 @@ export const ChatContainer = ({
       return false;
     }
 
-    thread.messages.push(
-      Ref.make(
-        Obj.make(Message.Message, {
-          created: new Date().toISOString(),
-          sender: { identityDid: identity.did },
-          blocks: [{ _tag: 'text', text: messageRef.current }],
-          properties: context ? { context: Ref.make(context) } : undefined,
-        }),
-      ),
-    );
+    Obj.change(thread, (t) => {
+      t.messages.push(
+        Ref.make(
+          Obj.make(Message.Message, {
+            created: new Date().toISOString(),
+            sender: { identityDid: identity.did },
+            blocks: [{ _tag: 'text', text: messageRef.current }],
+            properties: context ? { context: Ref.make(context) } : undefined,
+          }),
+        ),
+      );
+    });
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -138,10 +140,10 @@ export const ChatContainer = ({
           </div>
           {/* 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} />
-          <ScrollArea.Scrollbar>
-            <ScrollArea.Thumb />
-          </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar>
+          <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
       </ScrollArea.Root>
 
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />

package/src/components/Comments.stories.tsx

@@ -3,14 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Query, Relation, Type } from '@dxos/echo';
+import { Obj, Query, Relation } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { faker } from '@dxos/random';
-import { useQuery, useSpace } from '@dxos/react-client/echo';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
@@ -26,22 +28,22 @@ faker.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
-  const space = useSpace();
-  const anchors = useQuery(space, Query.type(AnchoredTo.AnchoredTo));
+  const db = useDatabase();
+  const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
 
   useAsyncEffect(async () => {
-    if (identity && space) {
-      const object = space.db.add(Obj.make(Type.Expando, {}));
-      const thread1 = space.db.add(createCommentThread(identity));
-      const thread2 = space.db.add(createProposalThread(identity));
-      space.db.add(
+    if (identity && db) {
+      const object = db.add(Obj.make(TestSchema.Expando, {}));
+      const thread1 = db.add(createCommentThread(identity));
+      const thread2 = db.add(createProposalThread(identity));
+      db.add(
         Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread1,
           [Relation.Target]: object,
           anchor: 'test',
         }),
       );
-      space.db.add(
+      db.add(
         Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread2,
           [Relation.Target]: object,
@@ -49,9 +51,9 @@ const DefaultStory = () => {
         }),
       );
     }
-  }, [identity, space]);
+  }, [identity, db]);
 
-  if (!identity || !space || !anchors) {
+  if (!identity || !db || !anchors) {
     return null;
   }
 
@@ -63,17 +65,18 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ container: 'column', scroll: true }),
+    withLayout({ layout: 'column', scroll: true }),
     // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
     //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
       plugins: [
-        IntentPlugin(),
+        OperationPlugin(),
         ClientPlugin({
           types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
       ],
     }),

package/src/components/CommentsThreadContainer.tsx

@@ -4,12 +4,11 @@
 
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Obj, Ref, Relation } from '@dxos/echo';
+import { Obj, Relation } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
 import { getSpace, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { IconButton, Tag, Tooltip, useThemeContext, useTranslation } from '@dxos/react-ui';
-import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';
 import {
   MessageTextbox,
   type MessageTextboxProps,
@@ -17,7 +16,8 @@ import {
   type ThreadRootProps,
 } from '@dxos/react-ui-thread';
 import { type AnchoredTo, type Thread } from '@dxos/types';
-import { isNonNullable } from '@dxos/util';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
 import { useStatus } from '../hooks';
 import { meta } from '../meta';
@@ -50,9 +50,10 @@ export const CommentsThreadContainer = ({
   const { t } = useTranslation(meta.id);
   const identity = useIdentity()!;
   const space = getSpace(anchor);
-  const members = useMembers(space?.key);
+  const members = useMembers(space?.id);
   const detached = !anchor.anchor;
   const thread = Relation.getSource(anchor) as Thread.Thread;
+  const [messages] = useObject(thread, 'messages');
   const activity = useStatus(space, Obj.getDXN(thread).toString());
   const threadScrollRef = useRef<HTMLDivElement | null>(null);
 
@@ -144,12 +145,11 @@ export const CommentsThreadContainer = ({
         </div>
       </div>
 
-      {/** TODO(dmaretskyi): How's `thread.messages` undefined? */}
-      {Ref.Array.targets(thread.messages?.filter(isNonNullable) ?? []).map((message) => (
+      {messages?.map((ref) => (
         <MessageContainer
-          key={message.id}
+          key={ref.dxn.toString()}
           editable
-          message={message}
+          message={ref}
           members={members}
           onDelete={handleMessageDelete}
           onAcceptProposal={handleAcceptProposal}

package/src/components/Lobby/Lobby.tsx

@@ -2,14 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { type FC, type PropsWithChildren, useEffect, useState } from 'react';
 
 import { useCapability } from '@dxos/app-framework/react';
 import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
 import { Toolbar, type ToolbarProps } from '../Call';
 import { VideoObject } from '../Media';
 import { ResponsiveContainer } from '../ResponsiveGrid';
@@ -39,9 +40,10 @@ type LobbyPreviewProps = {};
 const LobbyPreview: FC<LobbyPreviewProps> = () => {
   const { t } = useTranslation(meta.id);
   const call = useCapability(ThreadCapabilities.CallManager);
+  const media = useAtomValue(call.mediaAtom);
   const [classNames, setClassNames] = useState('');
   useEffect(() => {
-    if (!call.media.videoEnabled) {
+    if (!media.videoEnabled) {
       setClassNames('');
       return;
     }
@@ -52,14 +54,14 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
     }, 500);
 
     return () => clearTimeout(timeout);
-  }, [call.media.videoEnabled]);
+  }, [media.videoEnabled]);
 
   return (
     <div className='grid grow p-4'>
       <ResponsiveContainer>
-        {(call.media.videoEnabled && (
+        {(media.videoEnabled && (
           <VideoObject
-            videoStream={call.media.videoStream}
+            videoStream={media.videoStream}
             flip
             muted
             classNames={mx(

package/src/components/Media/AudioStream.tsx

@@ -46,13 +46,13 @@ export const AudioStream: FC<AudioStreamProps> = ({ tracks }) => {
   );
 };
 
-type AudioTrackProps = {
+type AudioTrackParams = {
   track: MediaStreamTrack;
   mediaStream: MediaStream;
   resetSrcObject: () => void;
 };
 
-const AudioTrack = ({ track, mediaStream, resetSrcObject }: AudioTrackProps) => {
+const AudioTrack = ({ track, mediaStream, resetSrcObject }: AudioTrackParams) => {
   useEffect(() => {
     const currentTrack = track;
     mediaStream.addTrack(currentTrack);

package/src/components/Media/VideoObject.tsx

@@ -5,7 +5,7 @@
 import React, { type JSX, forwardRef, memo, useEffect, useRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export type VideoObjectProps = Omit<JSX.IntrinsicElements['video'], 'className' | 'ref'> &
   ThemedClassName<{