@dxos/plugin-client 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

package/src/{components → containers/ProfileContainer}/ProfileContainer.tsx

@@ -2,35 +2,38 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 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 {
-  Form,
-  type InputComponent,
-  ControlItem,
-  ControlItemInput,
-  ControlSection,
-  ControlPage,
-} 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 { StackItem } from '@dxos/react-ui-stack';
-import { hexToHue, hexToEmoji } from '@dxos/util';
+import { hexToEmoji, hexToHue } from '@dxos/util';
 
-import { CLIENT_PLUGIN } from '../meta';
+import { meta } from '#meta';
+
+// TOOD(burdon): Factor out?
+// TODO(wittjosiah): Integrate annotations with translations.
+const UserProfile = Schema.Struct({
+  did: Schema.String.annotations({ title: 'DID' }),
+  displayName: Schema.String.annotations({ title: 'Display name' }),
+  emoji: Schema.String.annotations({ title: 'Avatar' }),
+  hue: Schema.String.annotations({ title: 'Color' }),
+});
+
+type UserProfile = Schema.Schema.Type<typeof UserProfile>;
 
 // TODO(thure): Factor out?
 const getDefaultHueValue = (identity: Identity | null) => hexToHue(identity?.identityKey.toHex() ?? '0');
-const getDefaultEmojiValue = (identity: Identity | null) => hexToEmoji(identity?.identityKey.toHex() ?? '0');
 const getHueValue = (identity: Identity | null) => identity?.profile?.data?.hue || getDefaultHueValue(identity);
+const getDefaultEmojiValue = (identity: Identity | null) => hexToEmoji(identity?.identityKey.toHex() ?? '0');
 const getEmojiValue = (identity: Identity | null) => identity?.profile?.data?.emoji || getDefaultEmojiValue(identity);
 
 export const ProfileContainer = () => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const identity = useIdentity();
   const [displayName, setDisplayNameDirectly] = useState(identity?.profile?.displayName ?? '');
@@ -40,7 +43,7 @@ export const ProfileContainer = () => {
   const updateProfile = useMemo(
     () =>
       debounce(
-        (profile: Partial<Profile>) =>
+        (profile: Partial<UserProfile>) =>
           client.halo.updateProfile({
             displayName: profile.displayName,
             data: {
@@ -53,43 +56,59 @@ export const ProfileContainer = () => {
     [],
   );
 
-  const handleSave = useCallback(
-    (profile: Profile) => {
-      setDisplayNameDirectly(profile.displayName);
-      setEmojiDirectly(profile.emoji);
-      setHueDirectly(profile.hue);
-      updateProfile(profile);
+  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],
   );
 
   const values = useMemo(
     () => ({
+      did: identity?.did,
       displayName,
       emoji,
       hue,
-      did: identity?.did,
     }),
     [identity, displayName, emoji, hue],
   );
 
   // TODO(wittjosiah): Integrate descriptions with the form schema.
-  const customElements: Partial<Record<string, InputComponent>> = useMemo(
+  const fieldMap = useMemo<FormFieldMap>(
     () => ({
       displayName: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback(
           ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
           [onValueChange, type],
         );
+
         return (
-          <ControlItemInput 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')}
-              classNames='min-is-64'
+              placeholder={t('display-name-input.placeholder')}
+              classNames='min-w-64'
             />
-          </ControlItemInput>
+          </Settings.Item>
         );
       },
       emoji: ({ type, label, getValue, onValueChange }) => {
@@ -98,8 +117,9 @@ export const ProfileContainer = () => {
           () => onValueChange(type, getDefaultEmojiValue(identity)),
           [onValueChange, type],
         );
+
         return (
-          <ControlItem title={label} description={t('icon description')}>
+          <Settings.Item title={label} description={t('icon.description')}>
             <EmojiPickerBlock
               triggerVariant='default'
               emoji={getValue()}
@@ -107,7 +127,7 @@ export const ProfileContainer = () => {
               onClickClear={handleEmojiReset}
               classNames='justify-self-end'
             />
-          </ControlItem>
+          </Settings.Item>
         );
       },
       hue: ({ type, label, getValue, onValueChange }) => {
@@ -116,26 +136,24 @@ export const ProfileContainer = () => {
           () => onValueChange(type, getDefaultHueValue(identity)),
           [onValueChange, type],
         );
+
         return (
-          <ControlItem title={label} description={t('hue description')}>
-            <HuePicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleHueReset}
-              classNames='[--hue-preview-size:1.5rem] justify-self-end'
-            />
-          </ControlItem>
+          <Settings.Item title={label} description={t('hue.description')}>
+            <div role='none' className='flex justify-self-end'>
+              <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
+            </div>
+          </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>
-              <Input.TextInput value={getValue()} disabled classNames='min-is-64' />
+          <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>
-          </ControlItemInput>
+          </Settings.Item>
         );
       },
     }),
@@ -143,31 +161,16 @@ export const ProfileContainer = () => {
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
-      <ControlPage>
-        <Clipboard.Provider>
-          <ControlSection title={t('profile label')} description={t('profile description')}>
-            <Form
-              schema={ProfileSchema}
-              values={values}
-              autoSave
-              onSave={handleSave}
-              Custom={customElements}
-              classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
-              outerSpacing={false}
-            />
-          </ControlSection>
-        </Clipboard.Provider>
-      </ControlPage>
-    </StackItem.Content>
+    <Clipboard.Provider>
+      <Settings.Viewport>
+        <Settings.Section title={t('profile.label')} description={t('profile.description')}>
+          <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>
+            <Form.Content classNames='gap-form-gap'>
+              <Form.FieldSet />
+            </Form.Content>
+          </Form.Root>
+        </Settings.Section>
+      </Settings.Viewport>
+    </Clipboard.Provider>
   );
 };
-
-// TODO(wittjosiah): Integrate annotations with translations.
-const ProfileSchema = Schema.Struct({
-  displayName: Schema.String.annotations({ title: 'Display name' }),
-  emoji: Schema.String.annotations({ title: 'Avatar' }),
-  hue: Schema.String.annotations({ title: 'Color' }),
-  did: Schema.String.annotations({ title: 'DID' }),
-});
-type Profile = Schema.Schema.Type<typeof ProfileSchema>;

package/src/containers/ProfileContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { ProfileContainer as default } from './ProfileContainer';

package/src/{components → containers/RecoveryCodeDialog}/RecoveryCodeDialog.stories.tsx

@@ -2,18 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { AlertDialog, useAsyncEffect } from '@dxos/react-ui';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
 
-import { RecoveryCodeDialog, type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
-import { translations } from '../translations';
+import { RecoveryCodeDialog } from './RecoveryCodeDialog';
 
 const DefaultStory = () => {
   const client = useClient();
@@ -32,19 +31,19 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<RecoveryCodeDialogProps> = {
-  title: 'plugins/plugin-client/RecoveryCodeDialog',
-  component: RecoveryCodeDialog,
+const meta = {
+  title: 'plugins/plugin-client/containers/RecoveryCodeDialog',
+  component: RecoveryCodeDialog as any,
   render: DefaultStory,
-  decorators: [withClientProvider({ createIdentity: true }), withTheme, withLayout()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<RecoveryCodeDialogProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};

package/src/{components → containers/RecoveryCodeDialog}/RecoveryCodeDialog.tsx

@@ -6,48 +6,49 @@ import React, { useCallback, useState } from 'react';
 
 import { AlertDialog, Button, Clipboard, Input, useTranslation } from '@dxos/react-ui';
 
-import { CLIENT_PLUGIN } from '../meta';
-
-export const RECOVERY_CODE_DIALOG = `${CLIENT_PLUGIN}/RecoveryCodeDialog`;
+import { meta } from '#meta';
 
 export type RecoveryCodeDialogProps = {
   code: string;
 };
 
+// TODO(burdon): Should have cancel button.
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
-  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const [confirmation, setConfirmation] = useState(false);
 
   const handleConfirmation = useCallback((checked: boolean) => setConfirmation(checked), []);
 
   return (
-    <AlertDialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <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>
-      </div>
-      <div className='flex items-center gap-2 pbe-4'>
-        <Input.Root>
-          <Input.Checkbox
-            data-testid='recoveryCode.confirm'
-            checked={confirmation}
-            onCheckedChange={handleConfirmation}
-          />
-          <Input.Label>{t('recovery code confirmation label')}</Input.Label>
-        </Input.Root>
-      </div>
-      <div className='flex justify-end'>
+    <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>
+        <Clipboard.Provider>
+          <Code code={code} />
+        </Clipboard.Provider>
+        <div className='flex flex-col py-4 gap-2'>
+          <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>
+            <Input.Checkbox
+              data-testid='recoveryCode.confirm'
+              checked={confirmation}
+              onCheckedChange={handleConfirmation}
+            />
+            <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>
-      </div>
+      </AlertDialog.ActionBar>
     </AlertDialog.Content>
   );
 };
@@ -55,7 +56,7 @@ export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
 const Code = ({ code }: { code: string }) => {
   const words = code.split(' ');
   return (
-    <div className='relative p-2 border border-separator rounded group'>
+    <div className='relative p-2 border border-separator rounded-sm group'>
       <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />
       <div className='grid grid-cols-4'>
         {words.map((word, i) => (

package/src/containers/RecoveryCodeDialog/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { RecoveryCodeDialog } from './RecoveryCodeDialog';
+
+export * from './RecoveryCodeDialog';
+export default RecoveryCodeDialog;

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

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { RecoveryCredentialsContainer } from './RecoveryCredentialsContainer';
+
+const meta = {
+  title: 'plugins/plugin-client/containers/RecoveryCredentialsContainer',
+  component: RecoveryCredentialsContainer,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
+        }),
+        OperationPlugin(),
+        RuntimePlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof RecoveryCredentialsContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/RecoveryCredentialsContainer/RecoveryCredentialsContainer.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from '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 { Settings } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+import { ClientOperation } from '#operations';
+
+export const MANAGE_CREDENTIALS_DIALOG = `${meta.id}.ManageCredentialsDialog`;
+
+export const RecoveryCredentialsContainer = () => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const credentials = useCredentials();
+  const recoveryCredentials = credentials.filter(
+    (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
+  );
+
+  return (
+    <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')}>
+        {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.Root>
+        ) : (
+          <List>
+            {recoveryCredentials.map((credential) => (
+              <ListItem.Root key={credential.id?.toHex()}>
+                <ListItem.Endcap>
+                  <Icon icon='ph--key--regular' />
+                </ListItem.Endcap>
+                <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+              </ListItem.Root>
+            ))}
+          </List>
+        )}
+      </Settings.Section>
+    </Settings.Viewport>
+  );
+};

package/src/containers/RecoveryCredentialsContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { RecoveryCredentialsContainer as default } from './RecoveryCredentialsContainer';

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

@@ -0,0 +1,73 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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 { 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 { translations } from '#translations';
+
+import { ClientPlugin } from '../../ClientPlugin';
+import { ResetDialog, type ResetDialogProps } from './ResetDialog';
+
+const DefaultStory = (props: Omit<ResetDialogProps, 'capabilityManager'>) => {
+  const manager = usePluginManager();
+
+  return (
+    <Dialog.Root open>
+      <Dialog.Overlay>
+        <ResetDialog
+          capabilityManager={manager.capabilities}
+          onReset={() => Effect.sync(() => console.log('reset'))}
+          {...props}
+        />
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-client/containers/ResetDialog',
+  component: ResetDialog,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [RuntimePlugin(), OperationPlugin(), ClientPlugin({})],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof ResetDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    mode: 'reset-storage' as const,
+  } as any,
+};
+
+export const JoinNewIdentity: Story = {
+  args: {
+    mode: 'join-new-identity' as const,
+  } as any,
+};
+
+export const Recover: Story = {
+  args: {
+    mode: 'recover' as const,
+  } as any,
+};

package/src/containers/ResetDialog/ResetDialog.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback } from '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, translationKey } from '@dxos/shell/react';
+
+import { type ClientPluginOptions } from '#types';
+
+export type ResetDialogProps = Pick<ConfirmResetProps, 'mode'> &
+  Pick<ClientPluginOptions, 'onReset'> & {
+    capabilityManager: CapabilityManager.CapabilityManager;
+  };
+
+export const ResetDialog = ({ mode, onReset, capabilityManager }: ResetDialogProps) => {
+  const { t } = useTranslation(translationKey);
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+
+  const handleReset = useCallback(async () => {
+    await client.reset();
+    const target =
+      mode === 'join-new-identity' ? 'deviceInvitation' : mode === 'recover' ? 'recoverIdentity' : undefined;
+    if (onReset) {
+      await runAndForwardErrors(onReset({ target }).pipe(Effect.provideService(Capability.Service, capabilityManager)));
+    }
+  }, [client, mode, onReset, capabilityManager]);
+
+  const handleCancel = useCallback(() => {
+    void invokePromise(LayoutOperation.UpdateDialog, { state: false });
+  }, [invokePromise]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('reset-dialog.title')}</Dialog.Title>
+      </Dialog.Header>
+      <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>
+  );
+};

package/src/containers/ResetDialog/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ResetDialog } from './ResetDialog';
+
+export * from './ResetDialog';
+export default ResetDialog;

package/src/containers/index.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export { type RecoveryCodeDialogProps } from './RecoveryCodeDialog';
+export { type ResetDialogProps } from './ResetDialog';
+
+export const DevicesContainer: ComponentType<any> = lazy(() => import('./DevicesContainer'));
+export const JoinDialog: ComponentType<any> = lazy(() => import('./JoinDialog'));
+export const ProfileContainer: ComponentType<any> = lazy(() => import('./ProfileContainer'));
+export const RecoveryCodeDialog: ComponentType<any> = lazy(() => import('./RecoveryCodeDialog'));
+export const RecoveryCredentialsContainer: ComponentType<any> = lazy(() => import('./RecoveryCredentialsContainer'));
+export const ResetDialog: ComponentType<any> = lazy(() => import('./ResetDialog'));