@dxos/plugin-client 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -13,19 +13,19 @@ import { type CancellableInvitationObservable, Invitation, InvitationEncoder } f
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
-import { meta } from '../../meta';
-import { ClientOperation } from '../../types';
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
 
 export type DevicesContainerProps = {
   createInvitationUrl?: (invitationCode: string) => string;
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
@@ -38,61 +38,61 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join new identity' }),
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join-new-identity' }),
     [invokePromise],
   );
 
   return (
     <Clipboard.Provider>
-      <Settings.Root>
+      <Settings.Viewport>
         <Settings.Section
-          title={t('devices verbose label', { ns: meta.id })}
-          description={t('devices description', { ns: meta.id })}
+          title={t('devices-verbose.label', { ns: meta.id })}
+          description={t('devices.description', { ns: meta.id })}
         >
-          <Settings.Frame>
-            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>
+          <Settings.Panel>
+            <div role='group' className='min-w-0'>
+              <h3 className='text-lg mb-2'>{t('devices.label', { ns: meta.id })}</h3>
               <List>
                 {devices.map((device: Device) => (
                   <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
                 ))}
               </List>
-            </Settings.FrameItem>
+            </div>
             {createInvitationUrl && (
-              <Settings.FrameItem title='Add device'>
+              <div role='group' className='min-w-0'>
+                <h3 className='text-lg mb-2'>{t('add-device.label')}</h3>
                 <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </Settings.FrameItem>
+              </div>
             )}
-          </Settings.Frame>
+          </Settings.Panel>
         </Settings.Section>
         <Settings.Section
-          title={t('danger zone title', { ns: meta.id })}
-          description={t('danger zone description', { ns: meta.id })}
+          title={t('danger-zone.title', { ns: meta.id })}
+          description={t('danger-zone.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>
-            </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>
-            </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>
-            </Settings.Item>
-          </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>
+          </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>
+          </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>
+          </Settings.Item>
         </Settings.Section>
-      </Settings.Root>
+      </Settings.Viewport>
     </Clipboard.Provider>
   );
 };
@@ -176,12 +176,13 @@ const InvitationSection = ({
         : state >= Invitation.State.READY_FOR_AUTHENTICATION && authCode
           ? 'auth-code'
           : 'qr-code';
+
   return activeView === 'init' ? (
     <>
-      <p className='text-description mb-2'>{t('add device description')}</p>
+      <p className='text-description mb-2'>{t('add-device.description')}</p>
       <IconButton
         icon='ph--plus--regular'
-        label={t('create device invitation label')}
+        label={t('create-device-invitation.label')}
         disabled={state >= 0}
         classNames='w-full'
         data-testid='devicesContainer.createInvitation'
@@ -214,10 +215,10 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
   const emoji = hexToEmoji(id);
   return (
     <>
-      <p className='text-description'>{t('qr code description', { ns: meta.id })}</p>
+      <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content]'>
         <div className='flex justify-center py-4'>
-          <div role='none' className='w-full md:max-w-80 aspect-square relative text-description'>
+          <div className='w-full md:max-w-80 aspect-square relative text-description'>
             <QR
               rounding={100}
               backgroundColor='transparent'
@@ -234,7 +235,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
           </div>
         </div>
         <span id={qrLabel} className='sr-only'>
-          {t('qr label')}
+          {t('qr.label')}
         </span>
       </div>
       {/* TODO(burdon): Factor out button bar */}
@@ -242,7 +243,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
         <div className='flex gap-2'>
           <Clipboard.Button value={url ?? 'never'} />
           <Button variant='ghost' onClick={onCancel}>
-            {t('cancel label')}
+            {t('cancel.label')}
           </Button>
         </div>
       </div>
@@ -256,12 +257,12 @@ const InvitationAuthCode = ({ id, code, onCancel }: { id: string; code: string;
 
   return (
     <>
-      <p className='text-description'>{t('auth other device emoji message')}</p>
+      <p className='text-description'>{t('auth-other-device-emoji.message')}</p>
       {emoji && <Emoji text={emoji} className='mx-auto my-2 text-center' />}
-      <p className='text-description'>{t('auth code message')}</p>
+      <p className='text-description'>{t('auth-code.message')}</p>
       <AuthCode code={code} large classNames='mx-auto my-2 text-center grow' />
       <Button variant='ghost' onClick={onCancel}>
-        {t('cancel label')}
+        {t('cancel.label')}
       </Button>
     </>
   );

package/src/containers/DevicesContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { DevicesContainer } from './DevicesContainer';
-
-export default DevicesContainer;
+export { DevicesContainer as default } from './DevicesContainer';

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { Dialog } from '@dxos/react-ui';
+
+import { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { JoinDialog } from './JoinDialog';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <JoinDialog />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-client/containers/JoinDialog',
+  component: JoinDialog,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [...corePlugins(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof JoinDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -6,14 +6,14 @@ import React, { useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { ObservabilityOperation } from '@dxos/plugin-observability/types';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 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 { ClientOperation } from '../../types';
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
 
 export const JoinDialog = (props: JoinPanelProps) => {
   const { invokePromise } = useOperationInvoker();
@@ -35,19 +35,22 @@ export const JoinDialog = (props: JoinPanelProps) => {
     [invokePromise],
   );
 
+  // TODO(burdon): Move JoinHeading into Dialog.Heading.
   return (
     <Dialog.Content>
       <Dialog.Header>
-        <Dialog.Title classNames='sr-only'>{t('join space label', { ns: osTranslations })}</Dialog.Title>
+        <Dialog.Title classNames='sr-only'>{t('join-space.label', { ns: osTranslations })}</Dialog.Title>
       </Dialog.Header>
-      <JoinPanel
-        mode='halo-only'
-        {...props}
-        exitActionParent={<Dialog.Close asChild />}
-        doneActionParent={<Dialog.Close asChild />}
-        onCancelResetStorage={handleCancelResetStorage}
-        onDone={handleDone}
-      />
+      <Dialog.Body>
+        <JoinPanel
+          {...props}
+          mode='halo-only'
+          exitActionParent={<Dialog.Close asChild />}
+          doneActionParent={<Dialog.Close asChild />}
+          onCancelResetStorage={handleCancelResetStorage}
+          onDone={handleDone}
+        />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };

package/src/containers/JoinDialog/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { JoinDialog } from './JoinDialog';
-
-export default JoinDialog;
+export { JoinDialog as default } from './JoinDialog';

package/src/containers/ProfileContainer/ProfileContainer.stories.tsx

@@ -7,7 +7,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { ProfileContainer } from './ProfileContainer';
 

package/src/containers/ProfileContainer/ProfileContainer.tsx

@@ -13,7 +13,7 @@ import { Form, type FormFieldMap, type FormUpdateMeta, Settings } from '@dxos/re
 import { EmojiPickerBlock, HuePicker } from '@dxos/react-ui-pickers';
 import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 // TOOD(burdon): Factor out?
 // TODO(wittjosiah): Integrate annotations with translations.
@@ -101,14 +101,14 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <Settings.ItemInput title={label} description={t('display name description')}>
+          <Settings.Item title={label} description={t('display-name.description')}>
             <Input.TextInput
               value={getValue()}
               onChange={handleChange}
-              placeholder={t('display name input placeholder')}
+              placeholder={t('display-name-input.placeholder')}
               classNames='min-w-64'
             />
-          </Settings.ItemInput>
+          </Settings.Item>
         );
       },
       emoji: ({ type, label, getValue, onValueChange }) => {
@@ -119,7 +119,7 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <Settings.Item title={label} description={t('icon description')}>
+          <Settings.Item title={label} description={t('icon.description')}>
             <EmojiPickerBlock
               triggerVariant='default'
               emoji={getValue()}
@@ -138,8 +138,8 @@ export const ProfileContainer = () => {
         );
 
         return (
-          <Settings.Item title={label} description={t('hue description')}>
-            <div role='none' className='flex justify-self-end'>
+          <Settings.Item title={label} description={t('hue.description')}>
+            <div className='flex justify-self-end'>
               <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
             </div>
           </Settings.Item>
@@ -148,12 +148,12 @@ export const ProfileContainer = () => {
       // TODO(wittjosiah): We need text input annotations for disabled and copyable.
       did: ({ label, getValue }) => {
         return (
-          <Settings.ItemInput title={label} description={t('did description')}>
+          <Settings.Item title={label} description={t('did.description')}>
             <ButtonGroup classNames='w-full'>
               <Input.TextInput value={getValue()} disabled classNames='min-w-64' />
               <Clipboard.IconButton value={getValue() ?? ''} />
             </ButtonGroup>
-          </Settings.ItemInput>
+          </Settings.Item>
         );
       },
     }),
@@ -162,15 +162,15 @@ export const ProfileContainer = () => {
 
   return (
     <Clipboard.Provider>
-      <Settings.Root>
-        <Settings.Section title={t('profile label')} description={t('profile description')}>
+      <Settings.Viewport>
+        <Settings.Section title={t('profile.label')} description={t('profile.description')}>
           <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>
-            <Form.Content>
+            <Form.Content classNames='gap-form-gap'>
               <Form.FieldSet />
             </Form.Content>
           </Form.Root>
         </Settings.Section>
-      </Settings.Root>
+      </Settings.Viewport>
     </Clipboard.Provider>
   );
 };

package/src/containers/ProfileContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ProfileContainer } from './ProfileContainer';
-
-export default ProfileContainer;
+export { ProfileContainer as default } from './ProfileContainer';

package/src/containers/RecoveryCodeDialog/RecoveryCodeDialog.stories.tsx

@@ -10,7 +10,7 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { AlertDialog, useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { RecoveryCodeDialog } from './RecoveryCodeDialog';
 

package/src/containers/RecoveryCodeDialog/RecoveryCodeDialog.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useState } from 'react';
 
 import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 export type RecoveryCodeDialogProps = {
   code: string;
@@ -22,14 +22,14 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   return (
     <AlertDialog.Content size='md' classNames='min-h-[15rem]'>
       <AlertDialog.Body>
-        <AlertDialog.Title>{t('recovery code dialog title')}</AlertDialog.Title>
-        <p className='py-4'>{t('recovery code dialog description')}</p>
+        <AlertDialog.Title>{t('recovery-code-dialog.title')}</AlertDialog.Title>
+        <p className='py-4'>{t('recovery-code-dialog.description')}</p>
         <Clipboard.Provider>
           <Code code={code} />
         </Clipboard.Provider>
         <div className='flex flex-col py-4 gap-2'>
-          <p>{t('recovery code dialog warning 1')}</p>
-          <p>{t('recovery code dialog warning 2')}</p>
+          <p>{t('recovery-code-dialog-warning-1.message')}</p>
+          <p>{t('recovery-code-dialog-warning-2.message')}</p>
         </div>
         <div className='flex items-center gap-2 pb-4'>
           <Input.Root>
@@ -38,14 +38,14 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
               checked={confirmation}
               onCheckedChange={handleConfirmation}
             />
-            <Input.Label>{t('recovery code confirmation label')}</Input.Label>
+            <Input.Label>{t('recovery-code-confirmation.label')}</Input.Label>
           </Input.Root>
         </div>
       </AlertDialog.Body>
       <AlertDialog.ActionBar>
         <AlertDialog.Action asChild>
           <Button data-testid='recoveryCode.continue' variant='primary' disabled={!confirmation}>
-            {t('continue label')}
+            {t('continue.label')}
           </Button>
         </AlertDialog.Action>
       </AlertDialog.ActionBar>

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.stories.tsx

@@ -5,13 +5,14 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ClientPlugin } from '../../ClientPlugin';
-import { translations } from '../../translations';
+import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
 
+import { ClientPlugin } from '../../ClientPlugin';
 import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
 
 const meta = {
@@ -25,11 +26,10 @@ const meta = {
         ClientPlugin({
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
             }),
         }),
-        OperationPlugin(),
-        RuntimePlugin(),
+        ProcessManagerPlugin(),
       ],
     }),
   ],

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx

@@ -9,8 +9,8 @@ import { useCredentials } from '@dxos/react-client/halo';
 import { Icon, IconButton, List, ListItem, Message, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
 
-import { meta } from '../../meta';
-import { ClientOperation } from '../../types';
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
 
 export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}.ManageCredentialsDialog`;
 
@@ -23,32 +23,30 @@ export const RecoveryCredentialsContainer = () => {
   );
 
   return (
-    <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={() => invokePromise(ClientOperation.CreatePasskey)}
-            />
-          </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={() => invokePromise(ClientOperation.CreateRecoveryCode)}
-            />
-          </Settings.Item>
-        </Settings.Group>
+    <Settings.Viewport>
+      <Settings.Section title={t('recovery-setup-dialog.title')} description={t('recovery-setup-dialog.description')}>
+        <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={() => invokePromise(ClientOperation.CreatePasskey)}
+          />
+        </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={() => invokePromise(ClientOperation.CreateRecoveryCode)}
+          />
+        </Settings.Item>
       </Settings.Section>
-      <Settings.Section title={t('credentials list label')}>
+      <Settings.Section title={t('credentials-list.label')}>
         {recoveryCredentials.length < 1 ? (
           <Message.Root valence='error'>
-            <Message.Title icon='ph--shield-warning--duotone'>{t('no credentials title')}</Message.Title>
-            <Message.Content>{t('no credentials message')}</Message.Content>
+            <Message.Title icon='ph--shield-warning--duotone'>{t('no-credentials.title')}</Message.Title>
+            <Message.Content>{t('no-credentials.message')}</Message.Content>
           </Message.Root>
         ) : (
           <List>
@@ -63,6 +61,6 @@ export const RecoveryCredentialsContainer = () => {
           </List>
         )}
       </Settings.Section>
-    </Settings.Root>
+    </Settings.Viewport>
   );
 };

package/src/containers/RecoveryCredentialsContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
-
-export default RecoveryCredentialsContainer;
+export { RecoveryCredentialsContainer as default } from './RecoveryCredentialsContainer';

package/src/containers/ResetDialog/ResetDialog.stories.tsx

@@ -6,15 +6,15 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { ClientPlugin } from '../../ClientPlugin';
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
+import { ClientPlugin } from '../../ClientPlugin';
 import { ResetDialog, type ResetDialogProps } from './ResetDialog';
 
 const DefaultStory = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
@@ -41,7 +41,7 @@ const meta = {
     withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withPluginManager({
-      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
+      plugins: [ProcessManagerPlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {
@@ -56,13 +56,13 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    mode: 'reset storage' as const,
+    mode: 'reset-storage' as const,
   } as any,
 };
 
 export const JoinNewIdentity: Story = {
   args: {
-    mode: 'join new identity' as const,
+    mode: 'join-new-identity' as const,
   } as any,
 };
 

package/src/containers/ResetDialog/ResetDialog.tsx

@@ -13,7 +13,7 @@ import { useClient } from '@dxos/react-client';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { ConfirmReset, type ConfirmResetProps, translationKey } from '@dxos/shell/react';
 
-import { type ClientPluginOptions } from '../../types';
+import { type ClientPluginOptions } from '#types';
 
 export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
   Pick<ClientPluginOptions, 'onReset'> & {
@@ -28,7 +28,7 @@ export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogPro
   const handleReset = useCallback(async () => {
     await client.reset();
     const target =
-      mode === 'join new identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;
+      mode === 'join-new-identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;
     if (onReset) {
       await runAndForwardErrors(onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
     }
@@ -41,10 +41,12 @@ export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogPro
   return (
     <Dialog.Content>
       <Dialog.Header>
-        <Dialog.Title>{t('reset dialog title')}</Dialog.Title>
+        <Dialog.Title>{t('reset-dialog.title')}</Dialog.Title>
       </Dialog.Header>
-      <Dialog.Description classNames='sr-only'>{t('reset dialog description')}</Dialog.Description>
-      <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />
+      <Dialog.Body>
+        <Dialog.Description classNames='sr-only'>{t('reset-dialog.description')}</Dialog.Description>
+        <ConfirmReset active mode={mode} onConfirm={handleReset} onCancel={handleCancel} />
+      </Dialog.Body>
     </Dialog.Content>
   );
 };