@dxos/plugin-client 0.7.5-labs.a279d8c → 0.7.5-labs.d453967

package/src/capabilities/intent-resolver.ts

@@ -12,6 +12,7 @@ import {
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { PublicKey } from '@dxos/react-client';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { ClientCapabilities } from './capabilities';
@@ -21,81 +22,177 @@ import { ClientAction, type ClientPluginOptions } from '../types';
 
 type IntentResolverOptions = Pick<ClientPluginOptions, 'onReset'> & {
   context: PluginsContext;
+  appName?: string;
 };
 
-export default ({ context, onReset }: IntentResolverOptions) =>
+export default ({ context, appName = 'Composer', onReset }: IntentResolverOptions) =>
   contributes(Capabilities.IntentResolver, [
-    createResolver(ClientAction.CreateIdentity, async () => {
-      const manager = context.requestCapability(Capabilities.PluginManager);
-      const client = context.requestCapability(ClientCapabilities.Client);
-      const data = await client.halo.createIdentity();
-      await manager.activate(ClientEvents.IdentityCreated);
-      return { data, intents: [createIntent(ObservabilityAction.SendEvent, { name: 'identity.create' })] };
+    createResolver({
+      intent: ClientAction.CreateIdentity,
+      resolve: async () => {
+        const manager = context.requestCapability(Capabilities.PluginManager);
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const data = await client.halo.createIdentity();
+        await manager.activate(ClientEvents.IdentityCreated);
+        return { data, intents: [createIntent(ObservabilityAction.SendEvent, { name: 'identity.create' })] };
+      },
     }),
-    createResolver(ClientAction.JoinIdentity, async (data) => {
-      return {
-        intents: [
-          createIntent(LayoutAction.SetLayout, {
-            element: 'dialog',
-            component: JOIN_DIALOG,
-            dialogBlockAlign: 'start',
-            subject: {
-              initialInvitationCode: data.invitationCode,
-              initialDisposition: 'accept-halo-invitation',
-            } satisfies Partial<JoinPanelProps>,
-          }),
-        ],
-      };
+    createResolver({
+      intent: ClientAction.JoinIdentity,
+      resolve: async (data) => {
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              subject: JOIN_DIALOG,
+              options: {
+                blockAlign: 'start',
+                props: {
+                  initialInvitationCode: data.invitationCode,
+                  initialDisposition: 'accept-halo-invitation',
+                },
+              },
+            }),
+          ],
+        };
+      },
     }),
-    createResolver(ClientAction.ShareIdentity, async () => {
-      return {
-        intents: [
-          createIntent(LayoutAction.SetLayout, {
-            element: 'dialog',
-            component: IDENTITY_DIALOG,
-            dialogBlockAlign: 'start',
-          }),
-          createIntent(ObservabilityAction.SendEvent, { name: 'identity.share' }),
-        ],
-      };
+    createResolver({
+      intent: ClientAction.ShareIdentity,
+      resolve: async () => {
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              subject: IDENTITY_DIALOG,
+              options: {
+                blockAlign: 'start',
+              },
+            }),
+            createIntent(ObservabilityAction.SendEvent, { name: 'identity.share' }),
+          ],
+        };
+      },
     }),
-    createResolver(ClientAction.RecoverIdentity, async () => {
-      return {
-        intents: [
-          createIntent(LayoutAction.SetLayout, {
-            element: 'dialog',
-            component: JOIN_DIALOG,
-            dialogBlockAlign: 'start',
-            subject: { initialDisposition: 'recover-identity' } satisfies Partial<JoinPanelProps>,
-          }),
-        ],
-      };
+    createResolver({
+      intent: ClientAction.RecoverIdentity,
+      resolve: async () => {
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              subject: JOIN_DIALOG,
+              options: {
+                blockAlign: 'start',
+                props: {
+                  initialDisposition: 'recover-identity',
+                } satisfies Partial<JoinPanelProps>,
+              },
+            }),
+          ],
+        };
+      },
     }),
-    createResolver(ClientAction.ResetStorage, async (data) => {
-      await onReset?.({ target: data.target });
-      return {};
+    createResolver({
+      intent: ClientAction.ResetStorage,
+      resolve: async (data) => {
+        await onReset?.({ target: data.target });
+      },
     }),
-    createResolver(ClientAction.CreateAgent, async () => {
-      const client = context.requestCapability(ClientCapabilities.Client);
-      invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
-      await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
+    createResolver({
+      intent: ClientAction.CreateAgent,
+      resolve: async () => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        invariant(client.services.services.EdgeAgentService, 'Missing EdgeAgentService');
+        await client.services.services.EdgeAgentService.createAgent(null as any, { timeout: 10_000 });
+      },
     }),
-    createResolver(ClientAction.CreateRecoveryCode, async () => {
-      const client = context.requestCapability(ClientCapabilities.Client);
-      invariant(client.services.services.IdentityService, 'IdentityService not available');
-      // TODO(wittjosiah): This needs a proper api. Rename property.
-      const { seedphrase } = await client.services.services.IdentityService.createRecoveryPhrase();
-      return {
-        intents: [
-          createIntent(LayoutAction.SetLayout, {
-            element: 'dialog',
-            dialogBlockAlign: 'start',
-            dialogType: 'alert',
-            state: true,
-            component: RECOVER_CODE_DIALOG,
-            subject: { code: seedphrase },
-          }),
-        ],
-      };
+    createResolver({
+      intent: ClientAction.CreateRecoveryCode,
+      resolve: async () => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        invariant(client.services.services.IdentityService, 'IdentityService not available');
+        // TODO(wittjosiah): This needs a proper api.
+        const { recoveryCode } = await client.services.services.IdentityService.createRecoveryCredential({});
+        return {
+          intents: [
+            createIntent(LayoutAction.UpdateDialog, {
+              part: 'dialog',
+              subject: RECOVER_CODE_DIALOG,
+              options: {
+                blockAlign: 'start',
+                type: 'alert',
+                props: { code: recoveryCode },
+              },
+            }),
+          ],
+        };
+      },
+    }),
+    createResolver({
+      intent: ClientAction.CreatePasskey,
+      resolve: async () => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const identity = client.halo.identity.get();
+        invariant(identity, 'Identity not available');
+
+        // TODO(wittjosiah): Consider factoring out passkey creation to the halo api.
+        const credential = await navigator.credentials.create({
+          publicKey: {
+            challenge: new Uint8Array(),
+            rp: { id: location.hostname, name: appName },
+            user: {
+              id: new TextEncoder().encode(identity.did),
+              name: identity.did,
+              displayName: identity.profile?.displayName ?? '',
+            },
+            pubKeyCredParams: [
+              { type: 'public-key', alg: -8 }, // Ed25519 (not yet supported across all browsers)
+              { type: 'public-key', alg: -7 }, // ES256
+            ],
+            // https://web.dev/articles/webauthn-discoverable-credentials#resident-key
+            authenticatorSelection: {
+              residentKey: 'required',
+              requireResidentKey: true,
+            },
+          },
+        });
+
+        invariant(credential, 'Credential not available');
+        const recoveryKey = PublicKey.from(new Uint8Array((credential as any).response.getPublicKey()));
+        const algorithm = (credential as any).response.getPublicKeyAlgorithm() === -7 ? 'ES256' : 'ED25519';
+
+        // TODO(wittjosiah): This needs a proper api.
+        invariant(client.services.services.IdentityService, 'IdentityService not available');
+        await client.services.services.IdentityService.createRecoveryCredential({ recoveryKey, algorithm });
+      },
+    }),
+    createResolver({
+      intent: ClientAction.RedeemPasskey,
+      resolve: async () => {
+        const client = context.requestCapability(ClientCapabilities.Client);
+        // TODO(wittjosiah): This needs a proper api.
+        invariant(client.services.services.IdentityService, 'IdentityService not available');
+        const { deviceKey, controlFeedKey, challenge } =
+          await client.services.services.IdentityService.requestRecoveryChallenge();
+        const credential = await navigator.credentials.get({
+          publicKey: {
+            challenge: Buffer.from(challenge, 'base64'),
+            rpId: location.hostname,
+            userVerification: 'required',
+          },
+        });
+        const identityDid = new TextDecoder().decode((credential as any).response.userHandle);
+        await client.services.services.IdentityService.recoverIdentity({
+          external: {
+            identityDid,
+            deviceKey,
+            controlFeedKey,
+            signature: Buffer.from((credential as any).response.signature),
+            clientDataJson: Buffer.from((credential as any).response.clientDataJSON),
+            authenticatorData: Buffer.from((credential as any).response.authenticatorData),
+          },
+        });
+      },
     }),
   ]);

package/src/capabilities/react-surface.tsx

@@ -13,9 +13,12 @@ import {
   JOIN_DIALOG,
   JoinDialog,
   RECOVER_CODE_DIALOG,
+  RECOVER_SETUP_DIALOG,
   RecoveryCodeDialog,
+  RecoverySetupDialog,
   type RecoveryCodeDialogProps,
 } from '../components';
+import { MANAGE_CREDENTIALS_DIALOG, ManageCredentialsDialog } from '../components/ManageCredentialsDialog';
 
 type ReactSurfaceOptions = {
   createInvitationUrl: (invitationCode: string) => string;
@@ -26,19 +29,31 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: IDENTITY_DIALOG,
       role: 'dialog',
-      filter: (data): data is { subject: IdentityPanelProps } => data.component === IDENTITY_DIALOG,
-      component: ({ data }) => <IdentityDialog {...data.subject} createInvitationUrl={createInvitationUrl} />,
+      filter: (data): data is { props: IdentityPanelProps } => data.component === IDENTITY_DIALOG,
+      component: ({ data }) => <IdentityDialog {...data.props} createInvitationUrl={createInvitationUrl} />,
     }),
     createSurface({
       id: JOIN_DIALOG,
       role: 'dialog',
-      filter: (data): data is { subject: JoinPanelProps } => data.component === JOIN_DIALOG,
-      component: ({ data }) => <JoinDialog {...data.subject} />,
+      filter: (data): data is { props: JoinPanelProps } => data.component === JOIN_DIALOG,
+      component: ({ data }) => <JoinDialog {...data.props} />,
     }),
     createSurface({
       id: RECOVER_CODE_DIALOG,
       role: 'dialog',
-      filter: (data): data is { subject: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
-      component: ({ data }) => <RecoveryCodeDialog {...data.subject} />,
+      filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVER_CODE_DIALOG,
+      component: ({ data }) => <RecoveryCodeDialog {...data.props} />,
+    }),
+    createSurface({
+      id: RECOVER_SETUP_DIALOG,
+      role: 'dialog',
+      filter: (data): data is any => data.component === RECOVER_SETUP_DIALOG,
+      component: () => <RecoverySetupDialog />,
+    }),
+    createSurface({
+      id: MANAGE_CREDENTIALS_DIALOG,
+      role: 'dialog',
+      filter: (data): data is any => data.component === MANAGE_CREDENTIALS_DIALOG,
+      component: () => <ManageCredentialsDialog />,
     }),
   ]);

package/src/capabilities/schema.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { type TypedObject } from '@dxos/echo-schema';
+
+import { ClientCapabilities } from './capabilities';
+
+// TODO(wittjosiah): Remove types?
+export default (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
+
+  let previousSystem: TypedObject[] = [];
+  const unsubscribeSystem = effect(() => {
+    const systemSchemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.SystemSchema).flat()));
+    const newSchemas = systemSchemas.filter((schema) => !previousSystem.includes(schema));
+    previousSystem = systemSchemas;
+    client.addTypes(newSchemas);
+  });
+
+  let previous: TypedObject[] = [];
+  const unsubscribe = effect(() => {
+    const schemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.Schema).flat()));
+    const newSchemas = schemas.filter((schema) => !previous.includes(schema));
+    previous = schemas;
+    client.addTypes(newSchemas);
+  });
+
+  return contributes(Capabilities.Null, null, () => {
+    unsubscribeSystem();
+    unsubscribe();
+  });
+};

package/src/components/IdentityDialog.tsx

@@ -9,6 +9,7 @@ import { useClient } from '@dxos/react-client';
 import { Clipboard, Dialog } from '@dxos/react-ui';
 import { IdentityPanel, type IdentityPanelProps } from '@dxos/shell/react';
 
+import { MANAGE_CREDENTIALS_DIALOG } from './ManageCredentialsDialog';
 import { CLIENT_PLUGIN } from '../meta';
 import { ClientAction } from '../types';
 
@@ -21,9 +22,9 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
   const handleDone = useCallback(
     () =>
       dispatch(
-        createIntent(LayoutAction.SetLayout, {
-          element: 'dialog',
-          state: false,
+        createIntent(LayoutAction.UpdateDialog, {
+          part: 'dialog',
+          options: { state: false },
         }),
       ),
     [dispatch],
@@ -44,6 +45,16 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
     await dispatch(createIntent(ClientAction.ResetStorage, { target: 'deviceInvitation' }));
   }, [dispatch]);
 
+  const handleManageCredentials = useCallback(async () => {
+    await dispatch(
+      createIntent(LayoutAction.UpdateDialog, {
+        part: 'dialog',
+        subject: MANAGE_CREDENTIALS_DIALOG,
+        options: { state: true, blockAlign: 'start' },
+      }),
+    );
+  }, [dispatch]);
+
   return (
     <Dialog.Content>
       <Clipboard.Provider>
@@ -54,6 +65,7 @@ export const IdentityDialog = (props: IdentityPanelProps) => {
           onResetStorage={handleResetStorage}
           onRecover={handleRecover}
           onJoinNewIdentity={handleJoinNewIdentity}
+          onManageCredentials={handleManageCredentials}
         />
       </Clipboard.Provider>
     </Dialog.Content>

package/src/components/JoinDialog.tsx

@@ -24,7 +24,7 @@ export const JoinDialog = (props: JoinPanelProps) => {
     async (result: InvitationResult | null) => {
       if (result?.identityKey) {
         await Promise.all([
-          dispatch(createIntent(LayoutAction.SetLayout, { element: 'dialog', state: false })),
+          dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } })),
           dispatch(
             createIntent(ObservabilityAction.SendEvent, {
               name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',

package/src/components/ManageCredentialsDialog.stories.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AlertDialog } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { ManageCredentialsDialog } from './ManageCredentialsDialog';
+import { ClientPlugin } from '../ClientPlugin';
+import translations from '../translations';
+
+const Render = () => {
+  return (
+    <AlertDialog.Root open>
+      <AlertDialog.Overlay>
+        <ManageCredentialsDialog />
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/ManageCredentialsDialog',
+  component: ManageCredentialsDialog,
+  render: Render,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ManageCredentialsDialog>;
+
+export const Default: Story = {};

package/src/components/ManageCredentialsDialog.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Receipt, Key } from '@phosphor-icons/react';
+import React, { useMemo } from 'react';
+
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useCredentials } from '@dxos/react-client/halo';
+import { Dialog, Icon, List, ListItem, useTranslation } from '@dxos/react-ui';
+import { BifurcatedAction, type ActionMenuItem } from '@dxos/shell/react';
+
+import { CLIENT_PLUGIN } from '../meta';
+import { ClientAction } from '../types';
+
+export const MANAGE_CREDENTIALS_DIALOG = `${CLIENT_PLUGIN}/ManageCredentialsDialog`;
+
+// TODO(wittjosiah): Factor panel out to @dxos/shell.
+export const ManageCredentialsDialog = () => {
+  const { t } = useTranslation(CLIENT_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const credentials = useCredentials();
+  const recoveryCredentials = credentials.filter(
+    (credential) => credential.subject.assertion['@type'] === 'dxos.halo.credentials.IdentityRecovery',
+  );
+
+  // TODO(wittjosiah): Reconsile w/ RecoverySetupDialog actions.
+  const actions: Record<string, ActionMenuItem> = useMemo(
+    () => ({
+      createPasskey: {
+        label: t('create passkey label'),
+        description: t('create passkey description'),
+        // TODO(wittjosiah): Ideally this would be a `user-key` icon.
+        icon: Key,
+        onClick: () => dispatch(createIntent(ClientAction.CreatePasskey)),
+      },
+      createRecoveryCode: {
+        label: t('create recovery code label'),
+        description: t('create recovery code description'),
+        icon: Receipt,
+        onClick: () => dispatch(createIntent(ClientAction.CreateRecoveryCode)),
+      },
+    }),
+    [t],
+  );
+
+  return (
+    <Dialog.Content classNames='bs-content min-bs-[15rem] max-bs-full md:max-is-[25rem] overflow-hidden'>
+      <Dialog.Title>{t('manage credentials dialog title')}</Dialog.Title>
+      <List classNames='py-4'>
+        {recoveryCredentials.map((credential) => (
+          <ListItem.Root key={credential.id?.toHex()}>
+            <ListItem.Endcap>
+              <Icon icon='ph--key--regular' size={5} />
+            </ListItem.Endcap>
+            <ListItem.Heading>{credential.issuanceDate.toLocaleString()}</ListItem.Heading>
+          </ListItem.Root>
+        ))}
+      </List>
+      <div className='grow' />
+      <BifurcatedAction actions={actions} />
+    </Dialog.Content>
+  );
+};

package/src/components/RecoveryCodeDialog.stories.tsx

@@ -17,16 +17,16 @@ import translations from '../translations';
 
 const Render = () => {
   const client = useClient();
-  const [seedphrase, setSeedphrase] = useState<string>();
+  const [recoveryCode, setRecoveryCode] = useState<string>();
   useAsyncEffect(async () => {
-    const { seedphrase } = (await client.services.services.IdentityService?.createRecoveryPhrase()) ?? {};
-    setSeedphrase(seedphrase);
+    const { recoveryCode } = (await client.services.services.IdentityService?.createRecoveryCredential({})) ?? {};
+    setRecoveryCode(recoveryCode);
   }, [client]);
 
   return (
-    <AlertDialog.Root open={!!seedphrase}>
+    <AlertDialog.Root open={!!recoveryCode}>
       <AlertDialog.Overlay>
-        <RecoveryCodeDialog code={seedphrase ?? ''} />
+        <RecoveryCodeDialog code={recoveryCode ?? ''} />
       </AlertDialog.Overlay>
     </AlertDialog.Root>
   );

package/src/components/RecoveryCodeDialog.tsx

@@ -14,6 +14,7 @@ export type RecoveryCodeDialogProps = {
   code: string;
 };
 
+// TODO(wittjosiah): Factor panel out to @dxos/shell.
 export const RecoveryCodeDialog = ({ code }: RecoveryCodeDialogProps) => {
   const { t } = useTranslation(CLIENT_PLUGIN);
   const [confirmation, setConfirmation] = useState(false);
@@ -59,7 +60,7 @@ const Code = ({ code }: { code: string }) => {
       <Clipboard.IconButton value={code} classNames='absolute top-2 right-2 invisible group-hover:visible' />
       <div className='grid grid-cols-4'>
         {words.map((word, i) => (
-          <div key={i} className='flex items-center p-2 gap-2 items-center'>
+          <div key={i} className='flex items-center p-2 gap-2'>
             <div className='w-4 text-xs text-center text-subdued'>{i + 1}</div>
             <div className='text-sm'>{word}</div>
           </div>

package/src/components/RecoverySetupDialog.stories.tsx

@@ -0,0 +1,77 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { createResolver, contributes, Capabilities, IntentPlugin, LayoutAction } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { S } from '@dxos/echo-schema';
+import { create } from '@dxos/live-object';
+import { AlertDialog } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { RECOVER_CODE_DIALOG, RecoveryCodeDialog } from './RecoveryCodeDialog';
+import { RecoverySetupDialog } from './RecoverySetupDialog';
+import { ClientPlugin } from '../ClientPlugin';
+import translations from '../translations';
+
+const state = create<{ recoveryCode?: string }>({});
+
+const Render = () => {
+  return (
+    <AlertDialog.Root open>
+      <AlertDialog.Overlay>
+        {state.recoveryCode ? <RecoveryCodeDialog code={state.recoveryCode} /> : <RecoverySetupDialog />}
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-client/RecoverySetupDialog',
+  component: RecoverySetupDialog,
+  render: Render,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
+      capabilities: [
+        contributes(
+          Capabilities.IntentResolver,
+          createResolver({
+            intent: LayoutAction.UpdateLayout,
+            filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
+              S.is(LayoutAction.UpdateDialog.fields.input)(data),
+            resolve: (data) => {
+              if (data.subject === RECOVER_CODE_DIALOG) {
+                state.recoveryCode = data.options?.props?.code;
+              }
+            },
+          }),
+        ),
+      ],
+    }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RecoverySetupDialog>;
+
+export const Default: Story = {};