@dxos/plugin-thread 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

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

@@ -4,17 +4,15 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, UndoMapping } from '@dxos/app-framework';
+import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
 import { sleep } from '@dxos/async';
-import { Obj, Relation, Type } from '@dxos/echo';
+import { COMPANION_PREFIX } from '@dxos/app-toolkit';
+import { Obj, Ref, Relation } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import { OperationResolver } from '@dxos/operation';
-import { Operation } from '@dxos/operation';
-import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
+import { Operation, OperationResolver } from '@dxos/operation';
+import { DeckOperation } from '@dxos/plugin-deck/types';
 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 { AnchoredTo, Message, Thread } from '@dxos/types';
 
 import { meta } from '../../meta';
@@ -23,7 +21,7 @@ import { Channel, ThreadCapabilities, ThreadOperation } from '../../types';
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     return [
-      Capability.contributes(Common.Capability.UndoMapping, [
+      Capability.contributes(Capabilities.UndoMapping, [
         UndoMapping.make({
           operation: ThreadOperation.Delete,
           inverse: ThreadOperation.Restore,
@@ -56,7 +54,7 @@ export default Capability.makeModule(
           message: ['message deleted label', { ns: meta.id }],
         }),
       ]),
-      Capability.contributes(Common.Capability.OperationResolver, [
+      Capability.contributes(Capabilities.OperationResolver, [
         //
         // CreateChannel
         //
@@ -90,7 +88,7 @@ export default Capability.makeModule(
         OperationResolver.make({
           operation: ThreadOperation.Select,
           handler: Effect.fnUntraced(function* (input) {
-            const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+            const registry = yield* Capability.get(Capabilities.AtomRegistry);
             const stateAtom = yield* Capability.get(ThreadCapabilities.State);
             const current = registry.get(stateAtom);
             registry.set(stateAtom, { ...current, current: input.current });
@@ -131,16 +129,11 @@ export default Capability.makeModule(
         //
         OperationResolver.make({
           operation: ThreadOperation.OnCreateSpace,
-          handler: Effect.fnUntraced(function* ({ space, isDefault, rootCollection }) {
+          handler: Effect.fnUntraced(function* ({ space, isDefault }) {
             if (isDefault) {
               return;
             }
 
-            const collection = Collection.makeManaged({ key: Type.getTypename(Channel.Channel) });
-            Obj.change(rootCollection, (c) => {
-              c.objects.push(Ref.make(collection));
-            });
-
             const { object: channel } = yield* Operation.invoke(ThreadOperation.CreateChannel, {
               name: 'General',
               spaceId: space.id,
@@ -155,7 +148,7 @@ export default Capability.makeModule(
         OperationResolver.make({
           operation: ThreadOperation.Create,
           handler: Effect.fnUntraced(function* ({ name, anchor: _anchor, subject }) {
-            const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+            const registry = yield* Capability.get(Capabilities.AtomRegistry);
             const stateAtom = yield* Capability.get(ThreadCapabilities.State);
             const subjectId = Obj.getDXN(subject).toString();
             const thread = Thread.make({ name });
@@ -178,8 +171,7 @@ 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`,
+              companion: `${COMPANION_PREFIX}comments`,
             });
           }),
         }),
@@ -190,7 +182,7 @@ export default Capability.makeModule(
         OperationResolver.make({
           operation: ThreadOperation.Delete,
           handler: Effect.fnUntraced(function* ({ subject, anchor, thread: _thread }) {
-            const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+            const registry = yield* Capability.get(Capabilities.AtomRegistry);
             const stateAtom = yield* Capability.get(ThreadCapabilities.State);
             const thread = _thread ?? (Relation.getSource(anchor) as Thread.Thread);
             const subjectId = Obj.getDXN(subject).toString();
@@ -242,7 +234,7 @@ export default Capability.makeModule(
         OperationResolver.make({
           operation: ThreadOperation.AddMessage,
           handler: Effect.fnUntraced(function* ({ anchor, subject, sender, text }) {
-            const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+            const registry = yield* Capability.get(Capabilities.AtomRegistry);
             const stateAtom = yield* Capability.get(ThreadCapabilities.State);
             const thread = Relation.getSource(anchor) as Thread.Thread;
             const subjectId = Obj.getDXN(subject).toString();

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

@@ -5,14 +5,14 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 
 import { Call } from '../../components';
 import { meta } from '../../meta';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
-    return Capability.contributes(Common.Capability.ReactRoot, {
+    return Capability.contributes(Capabilities.ReactRoot, {
       id: meta.id,
       root: () => <Call.Audio />,
     });

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

@@ -6,8 +6,9 @@ import { useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useCapability, useSettingsState } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useCapability, useSettingsState } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { Obj, type Ref } from '@dxos/echo';
 import { getSpace } from '@dxos/react-client/echo';
 import { Thread } from '@dxos/types';
@@ -19,21 +20,24 @@ import {
   ChatContainer,
   ThreadCompanion,
   ThreadSettings,
-} from '../../components';
+} from '../../containers';
 import { meta } from '../../meta';
 import { Channel, ThreadCapabilities, type ThreadSettingsProps } from '../../types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
-        id: `${meta.id}/channel`,
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.channel`,
         role: 'article',
-        filter: (data): data is { subject: Channel.Channel } => Obj.instanceOf(Channel.Channel, data.subject),
-        component: ({ data: { subject }, role }) => <ChannelContainer role={role} subject={subject} />,
+        filter: (data): data is { attendableId: string; subject: Channel.Channel } =>
+          typeof data.attendableId === 'string' && Obj.instanceOf(Channel.Channel, data.subject),
+        component: ({ data: { subject, attendableId }, role }) => (
+          <ChannelContainer role={role} subject={subject} attendableId={attendableId} />
+        ),
       }),
-      Common.createSurface({
-        id: `${meta.id}/chat-companion`,
+      Surface.create({
+        id: `${meta.id}.chat-companion`,
         role: 'article',
         filter: (data): data is { companionTo: Channel.Channel; subject: 'chat' } =>
           Obj.instanceOf(Channel.Channel, data.companionTo) && data.subject === 'chat',
@@ -47,8 +51,8 @@ export default Capability.makeModule(() =>
           return <ChatContainer thread={thread} space={space} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/thread`,
+      Surface.create({
+        id: `${meta.id}.thread`,
         role: 'article',
         filter: (data): data is { subject: Thread.Thread } => Obj.instanceOf(Thread.Thread, data.subject),
         component: ({ data: { subject } }) => {
@@ -60,31 +64,31 @@ export default Capability.makeModule(() =>
           return <ChatContainer thread={subject} space={space} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/comments`,
+      Surface.create({
+        id: `${meta.id}.comments`,
         role: 'article',
-        filter: (data): data is { companionTo: { threads: Ref.Ref<Thread.Thread>[] } } =>
+        filter: (data): data is { attendableId?: string; companionTo: { threads: Ref.Ref<Thread.Thread>[] } } =>
           data.subject === 'comments' && Obj.isObject(data.companionTo),
         // TODO(wittjosiah): This isn't scrolling properly in a plank.
-        component: ({ data }) => <ThreadCompanion subject={data.companionTo} />,
+        component: ({ data }) => <ThreadCompanion attendableId={data.attendableId} subject={data.companionTo} />,
       }),
-      Common.createSurface({
-        id: `${meta.id}/plugin-settings`,
+      Surface.create({
+        id: `${meta.id}.plugin-settings`,
         role: 'article',
-        filter: (data): data is { subject: Common.Capability.Settings } =>
-          Common.Capability.isSettings(data.subject) && data.subject.prefix === meta.id,
+        filter: (data): data is { subject: AppCapabilities.Settings } =>
+          AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
         component: ({ data: { subject } }) => {
           const { settings, updateSettings } = useSettingsState<ThreadSettingsProps>(subject.atom);
           return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;
         },
       }),
-      Common.createSurface({
-        id: `${meta.id}/assistant`,
+      Surface.create({
+        id: `${meta.id}.assistant`,
         role: 'deck-companion--active-call',
         component: () => <CallSidebar />,
       }),
-      Common.createSurface({
-        id: `${meta.id}/devtools-overview`,
+      Surface.create({
+        id: `${meta.id}.devtools-overview`,
         role: 'devtools-overview',
         component: () => {
           const call = useCapability(ThreadCapabilities.CallManager);

package/src/capabilities/settings/settings.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { createKvsStore } from '@dxos/effect';
 
 import { meta } from '../../meta';
@@ -23,7 +24,7 @@ export default Capability.makeModule(() =>
       // Expose atom directly for programmatic access.
       Capability.contributes(ThreadCapabilities.Settings, settingsAtom),
       // Contribute to common settings for UI discovery.
-      Capability.contributes(Common.Capability.Settings, {
+      Capability.contributes(AppCapabilities.Settings, {
         prefix: meta.id,
         schema: ThreadSettingsSchema,
         atom: settingsAtom,

package/src/components/Call/Call.tsx

@@ -5,7 +5,7 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 
 import { useDebugMode } from '../../hooks';

package/src/components/Call/Toolbar.tsx

@@ -5,7 +5,8 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions, useNode } from '@dxos/plugin-graph';
@@ -62,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={{
@@ -70,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'],
             },
           }}
         />
@@ -97,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>
@@ -143,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',
@@ -182,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 → CommentsPanel/CommentsPanel.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';
@@ -15,14 +15,13 @@ import { faker } from '@dxos/random';
 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';
-import { render } from '@dxos/storybook-utils';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { AnchoredTo, Message, Thread } from '@dxos/types';
 
-import { translations } from '../translations';
+import { translations } from '../../translations';
 
-import { CommentsContainer } from './CommentsContainer';
-import { createCommentThread, createProposalThread } from './testing';
+import { CommentsPanel } from './CommentsPanel';
+import { createCommentThread, createProposalThread } from '../../testing/data';
 
 faker.seed(1);
 
@@ -54,23 +53,24 @@ const DefaultStory = () => {
   }, [identity, db]);
 
   if (!identity || !db || !anchors) {
-    return null;
+    return <Loading data={{ identity: !!identity, db: !!db, anchors: !!anchors }} />;
   }
 
-  return <CommentsContainer anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
+  return <CommentsPanel anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/Comments',
-  render: render(DefaultStory),
+  title: 'plugins/plugin-thread/components/Comments',
+  render: DefaultStory,
   decorators: [
-    withTheme,
-    withLayout({ layout: 'column', scroll: true }),
+    withTheme(),
+    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 → CommentsPanel/CommentsPanel.tsx}

@@ -5,14 +5,14 @@
 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';
+import { meta } from '../../meta';
 
-import { CommentsThreadContainer, type CommentsThreadContainerProps } from './CommentsThreadContainer';
+import { CommentsThread, type CommentsThreadProps } from './CommentsThread';
 
-export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor' | 'current'> & {
+export type CommentsPanelProps = Omit<CommentsThreadProps, 'anchor' | 'current'> & {
   anchors: AnchoredTo.AnchoredTo[];
   currentId?: string;
   showResolvedThreads?: boolean;
@@ -21,7 +21,7 @@ export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor'
 /**
  * Root container for collection of comment threads.
  */
-export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsContainerProps) => {
+export const CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsPanelProps) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
@@ -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>
     );
   }
@@ -63,7 +64,7 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
       {filteredAnchors.map((anchor) => {
         const thread = Relation.getSource(anchor) as Thread.Thread;
         const threadId = Obj.getDXN(thread).toString();
-        return <CommentsThreadContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
+        return <CommentsThread key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
       })}
     </div>
   );

package/src/components/{CommentsThreadContainer.tsx → CommentsPanel/CommentsThread.tsx}

@@ -19,14 +19,14 @@ import { type AnchoredTo, type Thread } from '@dxos/types';
 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';
-import { getMessageMetadata } from '../util';
+import { useStatus } from '../../hooks';
+import { meta } from '../../meta';
+import { getMessageMetadata } from '../../util';
 
-import { command } from './command-extension';
-import { MessageContainer, buttonClassNames, buttonGroupClassNames } from './MessageContainer';
+import { command } from '../../extensions/command';
+import { MessagePanel, buttonClassNames, buttonGroupClassNames } from '../MessagePanel';
 
-export type CommentsThreadContainerProps = {
+export type CommentsThreadProps = {
   anchor: AnchoredTo.AnchoredTo;
   onAttend?: (anchor: AnchoredTo.AnchoredTo) => void;
   onComment?: (anchor: AnchoredTo.AnchoredTo, message: string) => void;
@@ -36,7 +36,7 @@ export type CommentsThreadContainerProps = {
   onAcceptProposal?: (anchor: AnchoredTo.AnchoredTo, messageId: string) => void;
 } & Pick<ThreadRootProps, 'current'>;
 
-export const CommentsThreadContainer = ({
+export const CommentsThread = ({
   anchor,
   current,
   onAttend,
@@ -45,7 +45,7 @@ export const CommentsThreadContainer = ({
   onMessageDelete,
   onThreadDelete,
   onAcceptProposal,
-}: CommentsThreadContainerProps) => {
+}: CommentsThreadProps) => {
   const { themeMode } = useThemeContext();
   const { t } = useTranslation(meta.id);
   const identity = useIdentity()!;
@@ -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,
         )}
@@ -146,7 +146,7 @@ export const CommentsThreadContainer = ({
       </div>
 
       {messages?.map((ref) => (
-        <MessageContainer
+        <MessagePanel
           key={ref.dxn.toString()}
           editable
           message={ref}
@@ -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/CommentsPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './CommentsPanel';
+export * from './CommentsThread';

package/src/components/Lobby/Lobby.tsx

@@ -5,7 +5,7 @@
 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 { useCapability } from '@dxos/app-framework/ui';
 import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
@@ -13,7 +13,7 @@ import { meta } from '../../meta';
 import { ThreadCapabilities } from '../../types';
 import { Toolbar, type ToolbarProps } from '../Call';
 import { VideoObject } from '../Media';
-import { ResponsiveContainer } from '../ResponsiveGrid';
+import { ResponsivePanel } from '../ResponsiveGrid';
 
 // TODO(wittjosiah): Repurpose lobby for preview.
 
@@ -58,7 +58,7 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
 
   return (
     <div className='grid grow p-4'>
-      <ResponsiveContainer>
+      <ResponsivePanel>
         {(media.videoEnabled && (
           <VideoObject
             videoStream={media.videoStream}
@@ -70,7 +70,7 @@ const LobbyPreview: FC<LobbyPreviewProps> = () => {
             )}
           />
         )) || <div className='p-4 outline outline-separator rounded-md'>{t('camera off label')}</div>}
-      </ResponsiveContainer>
+      </ResponsivePanel>
     </div>
   );
 };

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

@@ -8,10 +8,10 @@ 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';
+import { ResponsivePanel } from '../ResponsiveGrid';
 
 import { VideoObject, type VideoObjectProps } from './VideoObject';
 
@@ -37,17 +37,17 @@ const DefaultStory = (props: VideoObjectProps) => {
   }, []);
 
   return (
-    <ResponsiveContainer>
+    <ResponsivePanel>
       <VideoObject videoStream={videoStream} flip {...props} />
-    </ResponsiveContainer>
+    </ResponsivePanel>
   );
 };
 
 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,