@dxos/plugin-client 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/DevicesContainer.tsx

@@ -5,103 +5,94 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { type Device, useDevices } from '@dxos/react-client/halo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
-import {
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlItem,
-  ControlPage,
-  ControlSection,
-} from '@dxos/react-ui-form';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { Settings } from '@dxos/react-ui-form';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
 import { meta } from '../meta';
-import { ClientAction } from '../types';
+import { ClientOperation } from '../types';
 
 export type DevicesContainerProps = {
   createInvitationUrl?: (invitationCode: string) => string;
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation('os');
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
 
-  const handleResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ResetStorage)), [dispatch]);
+  const handleResetStorage = useCallback(() => invokePromise(ClientOperation.ResetStorage, {}), [invokePromise]);
 
   const handleRecover = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'recover' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'recover' }),
+    [invokePromise],
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => dispatch(createIntent(ClientAction.ResetStorage, { mode: 'join new identity' })),
-    [dispatch],
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join new identity' }),
+    [invokePromise],
   );
 
   return (
     <Clipboard.Provider>
-      <ControlPage>
-        <ControlSection
+      <Settings.Root>
+        <Settings.Section
           title={t('devices verbose label', { ns: meta.id })}
           description={t('devices description', { ns: meta.id })}
         >
-          <ControlFrame>
-            <ControlFrameItem title={t('devices label', { ns: meta.id })}>
+          <Settings.Frame>
+            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>
               <List>
-                {devices.map((device: Device) => {
-                  return (
-                    <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
-                  );
-                })}
+                {devices.map((device: Device) => (
+                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                ))}
               </List>
-            </ControlFrameItem>
+            </Settings.FrameItem>
             {createInvitationUrl && (
-              <ControlFrameItem title='Add device'>
+              <Settings.FrameItem title='Add device'>
                 <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </ControlFrameItem>
+              </Settings.FrameItem>
             )}
-          </ControlFrame>
-        </ControlSection>
-        <ControlSection
+          </Settings.Frame>
+        </Settings.Section>
+        <Settings.Section
           title={t('danger zone title', { ns: meta.id })}
           description={t('danger zone description', { ns: meta.id })}
         >
-          <ControlGroup>
-            <ControlItem title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
+          <Settings.Group>
+            <Settings.Item title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
               <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
                 {t('reset device label')}
               </Button>
-            </ControlItem>
-            <ControlItem
+            </Settings.Item>
+            <Settings.Item
               title={t('recover identity label')}
               description={t('recover identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
                 {t('recover identity label')}
               </Button>
-            </ControlItem>
-            <ControlItem
+            </Settings.Item>
+            <Settings.Item
               title={t('join new identity label')}
               description={t('join new identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
                 {t('join new identity label')}
               </Button>
-            </ControlItem>
-          </ControlGroup>
-        </ControlSection>
-      </ControlPage>
+            </Settings.Item>
+          </Settings.Group>
+        </Settings.Section>
+      </Settings.Root>
     </Clipboard.Provider>
   );
 };
@@ -218,7 +209,7 @@ const InvitationSection = ({
 };
 
 const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const qrLabel = useId('devices-container__qr-code');
   const emoji = hexToEmoji(id);
   return (
@@ -258,7 +249,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
 };
 
 const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string; onCancel: () => void }) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const emoji = hexToEmoji(id);
 
   return (

package/src/components/JoinDialog.tsx

@@ -4,43 +4,40 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
-import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
+import { osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
-import { ClientAction } from '../types';
-
-export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
+import { ClientOperation } from '../types';
 
 export const JoinDialog = (props: JoinPanelProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const { t } = useTranslation(meta.id);
 
-  const handleCancelResetStorage = useCallback(() => dispatch(createIntent(ClientAction.ShareIdentity)), [dispatch]);
+  const handleCancelResetStorage = useCallback(() => invokePromise(ClientOperation.ShareIdentity), [invokePromise]);
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
       if (result?.identityKey) {
         await Promise.all([
-          dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } })),
-          dispatch(
-            createIntent(ObservabilityAction.SendEvent, {
-              name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
-            }),
-          ),
+          invokePromise(LayoutOperation.UpdateDialog, { state: false }),
+          invokePromise(ObservabilityOperation.SendEvent, {
+            name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
+          }),
         ]);
       }
     },
-    [dispatch],
+    [invokePromise],
   );
 
   return (
     <Dialog.Content>
-      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: 'os' })}</Dialog.Title>
+      <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
       <JoinPanel
         mode='halo-only'
         {...props}

package/src/components/ProfileContainer.stories.tsx

@@ -14,7 +14,7 @@ import { ProfileContainer } from './ProfileContainer';
 const meta = {
   title: 'plugins/plugin-client/ProfileContainer',
   component: ProfileContainer,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/ProfileContainer.tsx

@@ -9,14 +9,7 @@ import { debounce } from '@dxos/async';
 import { useClient } from '@dxos/react-client';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { ButtonGroup, Clipboard, Input, useTranslation } from '@dxos/react-ui';
-import {
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  Form,
-  type FormFieldMap,
-} from '@dxos/react-ui-form';
+import { Form, type FormFieldMap, type FormUpdateMeta, Settings } from '@dxos/react-ui-form';
 import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
@@ -63,11 +56,26 @@ export const ProfileContainer = () => {
     [],
   );
 
-  const handleSave = useCallback(
-    (profile: UserProfile) => {
-      setDisplayNameDirectly(profile.displayName);
-      setEmojiDirectly(profile.emoji);
-      setHueDirectly(profile.hue);
+  const handleChange = useCallback(
+    (profile: Partial<UserProfile>, meta: FormUpdateMeta<UserProfile>) => {
+      for (const [path, changed] of Object.entries(meta.changed)) {
+        if (changed) {
+          switch (path) {
+            case 'displayName':
+              setDisplayNameDirectly(profile.displayName ?? '');
+              break;
+            case 'emoji':
+              setEmojiDirectly(profile.emoji ?? getDefaultEmojiValue(identity));
+              break;
+            case 'hue':
+              setHueDirectly(profile.hue ?? getDefaultHueValue(identity));
+              break;
+            default:
+              break;
+          }
+        }
+      }
+
       void updateProfile(profile);
     },
     [identity],
@@ -93,14 +101,14 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <ControlItemInput title={label} description={t('display name description')}>
+          <Settings.ItemInput title={label} description={t('display name description')}>
             <Input.TextInput
               value={getValue()}
               onChange={handleChange}
               placeholder={t('display name input placeholder')}
               classNames='min-is-64'
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
       emoji: ({ type, label, getValue, onValueChange }) => {
@@ -111,7 +119,7 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <ControlItem title={label} description={t('icon description')}>
+          <Settings.Item title={label} description={t('icon description')}>
             <EmojiPickerBlock
               triggerVariant='default'
               emoji={getValue()}
@@ -119,7 +127,7 @@ export const ProfileContainer = () => {
               onClickClear={handleEmojiReset}
               classNames='justify-self-end'
             />
-          </ControlItem>
+          </Settings.Item>
         );
       },
       hue: ({ type, label, getValue, onValueChange }) => {
@@ -130,22 +138,22 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <ControlItem title={label} description={t('hue description')}>
+          <Settings.Item title={label} description={t('hue description')}>
             <div role='none' className='flex justify-self-end'>
               <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
             </div>
-          </ControlItem>
+          </Settings.Item>
         );
       },
       // TODO(wittjosiah): We need text input annotations for disabled and copyable.
       did: ({ label, getValue }) => {
         return (
-          <ControlItemInput title={label} description={t('did description')}>
-            <ButtonGroup>
+          <Settings.ItemInput title={label} description={t('did description')}>
+            <ButtonGroup classNames='is-full'>
               <Input.TextInput value={getValue()} disabled classNames='min-is-64' />
               <Clipboard.IconButton value={getValue() ?? ''} />
             </ButtonGroup>
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
     }),
@@ -153,16 +161,16 @@ export const ProfileContainer = () => {
   );
 
   return (
-    <ControlPage>
-      <Clipboard.Provider>
-        <ControlSection title={t('profile label')} description={t('profile description')}>
-          <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} autoSave onSave={handleSave}>
+    <Clipboard.Provider>
+      <Settings.Root>
+        <Settings.Section title={t('profile label')} description={t('profile description')}>
+          <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>
             <Form.Content>
-              <Form.FieldSet classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content]' />
+              <Form.FieldSet classNames='space-y-trimMd' />
             </Form.Content>
           </Form.Root>
-        </ControlSection>
-      </Clipboard.Provider>
-    </ControlPage>
+        </Settings.Section>
+      </Settings.Root>
+    </Clipboard.Provider>
   );
 };

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -35,7 +35,7 @@ const meta = {
   title: 'plugins/plugin-client/RecoveryCodeDialog',
   component: RecoveryCodeDialog as any,
   render: DefaultStory,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/RecoveryCodeDialog.tsx

@@ -8,8 +8,6 @@ import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/rea
 
 import { meta } from '../meta';
 
-export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
-
 export type RecoveryCodeDialogProps = {
   code: string;
 };

package/src/components/RecoveryCredentialsContainer.stories.tsx

@@ -3,8 +3,9 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
@@ -17,15 +18,16 @@ const meta = {
   title: 'plugins/plugin-client/RecoveryCredentialsContainer',
   component: RecoveryCredentialsContainer,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
-        IntentPlugin(),
+        OperationPlugin(),
       ],
     }),
   ],

package/src/components/RecoveryCredentialsContainer.tsx

@@ -4,48 +4,47 @@
 
 import React from 'react';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { useCredentials } from '@dxos/react-client/halo';
 import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItem, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
 import { meta } from '../meta';
-import { ClientAction } from '../types';
+import { ClientOperation } from '../types';
 
 export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}/ManageCredentialsDialog`;
 
 export const RecoveryCredentialsContainer = () => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const credentials = useCredentials();
   const recoveryCredentials = credentials.filter(
     (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
   );
 
   return (
-    <ControlPage>
-      <ControlSection title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
-        <ControlGroup>
-          <ControlItem title={t('create passkey label')} description={t('create passkey description')}>
+    <Settings.Root>
+      <Settings.Section title={t('recovery setup dialog title')} description={t('recovery setup dialog description')}>
+        <Settings.Group>
+          <Settings.Item title={t('create passkey label')} description={t('create passkey description')}>
             <IconButton
               label={t('create passkey label')}
               icon='ph--key--duotone'
               variant='primary'
-              onClick={() => dispatch(createIntent(ClientAction.CreatePasskey))}
+              onClick={() => invokePromise(ClientOperation.CreatePasskey)}
             />
-          </ControlItem>
-          <ControlItem title={t('create recovery code label')} description={t('create recovery code description')}>
+          </Settings.Item>
+          <Settings.Item title={t('create recovery code label')} description={t('create recovery code description')}>
             <IconButton
               label={t('create recovery code label')}
               icon='ph--receipt--duotone'
               variant='default'
-              onClick={() => dispatch(createIntent(ClientAction.CreateRecoveryCode))}
+              onClick={() => invokePromise(ClientOperation.CreateRecoveryCode)}
             />
-          </ControlItem>
-        </ControlGroup>
-      </ControlSection>
-      <ControlSection title={t('credentials list label')}>
+          </Settings.Item>
+        </Settings.Group>
+      </Settings.Section>
+      <Settings.Section title={t('credentials list label')}>
         {recoveryCredentials.length < 1 ? (
           <Message.Root valence='error' classNames='container-max-width'>
             <Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
@@ -63,7 +62,7 @@ export const RecoveryCredentialsContainer = () => {
             ))}
           </List>
         )}
-      </ControlSection>
-    </ControlPage>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/components/ResetDialog.stories.tsx

@@ -3,10 +3,12 @@
 //
 
 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, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { usePluginManager } from '@dxos/app-framework/ui';
 import { Dialog } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 
@@ -15,11 +17,17 @@ import { translations } from '../translations';
 
 import { ResetDialog, type ResetDialogProps } from './ResetDialog';
 
-const Render = (props: ResetDialogProps) => {
+const DefaultStory = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
+  const manager = usePluginManager();
+
   return (
     <Dialog.Root open>
       <Dialog.Overlay>
-        <ResetDialog onReset={() => console.log('reset')} {...props} />
+        <ResetDialog
+          capabilityManager={manager.capabilities}
+          onReset={() => Effect.sync(() => console.log('reset'))}
+          {...props}
+        />
       </Dialog.Overlay>
     </Dialog.Root>
   );
@@ -28,11 +36,11 @@ const Render = (props: ResetDialogProps) => {
 const meta = {
   title: 'plugins/plugin-client/ResetDialog',
   component: ResetDialog,
-  render: Render,
+  render: DefaultStory,
   decorators: [
-    withTheme, // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+    withTheme(),
     withPluginManager({
-      plugins: [IntentPlugin(), ClientPlugin({})],
+      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {
@@ -45,8 +53,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = { args: { mode: 'reset storage' } };
+export const Default: Story = {
+  args: {
+    mode: 'reset storage' as const,
+  } as any,
+};
 
-export const JoinNewIdentity: Story = { args: { mode: 'join new identity' } };
+export const JoinNewIdentity: Story = {
+  args: {
+    mode: 'join new identity' as const,
+  } as any,
+};
 
-export const Recover: Story = { args: { mode: 'recover' } };
+export const Recover: Story = {
+  args: {
+    mode: 'recover' as const,
+  } as any,
+};

package/src/components/ResetDialog.tsx

@@ -2,10 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { Capability, type CapabilityManager } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
 import { useClient } from '@dxos/react-client';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { ConfirmReset, type ConfirmResetProps } from '@dxos/shell/react';
@@ -13,38 +16,38 @@ import { ConfirmReset, type ConfirmResetProps } from '@dxos/shell/react';
 import { meta } from '../meta';
 import { type ClientPluginOptions } from '../types';
 
-export const RESET_DIALOG = `${meta.id}/ResetDialog`;
+export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
+  Pick<ClientPluginOptions, 'onReset'> & {
+    capabilityManager: CapabilityManager.CapabilityManager;
+  };
 
-export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> & Pick<ClientPluginOptions, 'onReset'>;
-
-export const ResetDialog = ({ mode, onReset }: ResetDialogProps) => {
+export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogProps) => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
 
   const handleReset = useCallback(async () => {
     await client.reset();
     const target =
       mode === 'join new identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;
-    await onReset?.({ target });
-  }, [dispatch, client, mode, onReset]);
+    if (onReset) {
+      await runAndForwardErrors(onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
+    }
+  }, [client, mode, onReset, capabilityManager]);
 
   const handleCancel = useCallback(() => {
-    void dispatch(
-      createIntent(LayoutAction.UpdateDialog, {
-        part: 'dialog',
-        options: { state: false },
-      }),
-    );
-  }, [dispatch]);
+    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+  }, [invokePromise]);
 
   // TODO(wittjosiah): Add the sr-only translations.
   // TODO(wittjosiah): Add missing descriptions to other dialogs.
   return (
-    <Dialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <Dialog.Title classNames='sr-only'>{t('reset dialog title')}</Dialog.Title>
-      <Dialog.Description classNames='sr-only'>{t('reset dialog description')}</Dialog.Description>
-      <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />
-    </Dialog.Content>
+    <>
+      <Dialog.Content>
+        <Dialog.Title classNames='sr-only'>{t('reset dialog title')}</Dialog.Title>
+        <Dialog.Description classNames='sr-only'>{t('reset dialog description')}</Dialog.Description>
+        <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />
+      </Dialog.Content>
+    </>
   );
 };

package/src/constants.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { meta } from './meta';
+
+export const JOIN_DIALOG = `${meta.id}/JoinDialog`;
+export const RECOVERY_CODE_DIALOG = `${meta.id}/RecoveryCodeDialog`;
+export const RESET_DIALOG = `${meta.id}/ResetDialog`;

package/src/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export { ClientCapabilities } from './capabilities';
-export { ClientEvents } from './events';
+export { ClientCapabilities, ClientEvents } from './types';
 export * from './meta';
 export * from './types';