@dxos/plugin-client 0.7.5-main.9d2a38b → 0.7.5-main.e94eead

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/plugin-client",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.e94eead",
   "description": "DXOS Surface plugin for DXOS Client",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -32,33 +33,38 @@
     "src"
   ],
   "dependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "@dxos/app-framework": "0.7.5-main.9d2a38b",
-    "@dxos/config": "0.7.5-main.9d2a38b",
-    "@dxos/echo-schema": "0.7.5-main.9d2a38b",
-    "@dxos/echo-signals": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/local-storage": "0.7.5-main.9d2a38b",
-    "@dxos/invariant": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-graph": "0.7.5-main.9d2a38b",
-    "@dxos/plugin-observability": "0.7.5-main.9d2a38b",
-    "@dxos/react-client": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/shell": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@preact/signals-core": "^1.6.0",
+    "@dxos/app-framework": "0.7.5-main.e94eead",
+    "@dxos/echo-schema": "0.7.5-main.e94eead",
+    "@dxos/config": "0.7.5-main.e94eead",
+    "@dxos/invariant": "0.7.5-main.e94eead",
+    "@dxos/echo-signals": "0.7.5-main.e94eead",
+    "@dxos/local-storage": "0.7.5-main.e94eead",
+    "@dxos/log": "0.7.5-main.e94eead",
+    "@dxos/plugin-graph": "0.7.5-main.e94eead",
+    "@dxos/plugin-observability": "0.7.5-main.e94eead",
+    "@dxos/react-client": "0.7.5-main.e94eead",
+    "@dxos/shell": "0.7.5-main.e94eead",
+    "@dxos/util": "0.7.5-main.e94eead"
   },
   "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/storybook-utils": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui": "0.7.5-main.e94eead",
+    "@dxos/live-object": "0.7.5-main.e94eead",
+    "@dxos/react-ui-theme": "0.7.5-main.e94eead",
+    "@dxos/storybook-utils": "0.7.5-main.e94eead"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.7.5-main.e94eead",
+    "@dxos/react-ui": "0.7.5-main.e94eead"
   },
   "publishConfig": {
     "access": "public"

package/src/ClientPlugin.ts

@@ -2,9 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, defineModule, definePlugin, Events } from '@dxos/app-framework';
+import { Capabilities, contributes, defineModule, definePlugin, Events, oneOf } from '@dxos/app-framework';
 
-import { Client, AppGraphBuilder, IntentResolver, ReactContext, ReactSurface } from './capabilities';
+import { Client, AppGraphBuilder, IntentResolver, ReactContext, ReactSurface, Schema } from './capabilities';
 import { ClientEvents } from './events';
 import { meta } from './meta';
 import translations from './translations';
@@ -25,11 +25,16 @@ export const ClientPlugin = ({
   return definePlugin(meta, [
     defineModule({
       id: `${meta.id}/module/client`,
-      activatesOn: Events.Startup,
-      activatesBefore: [ClientEvents.SetupClient],
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
       activatesAfter: [ClientEvents.ClientReady],
       activate: (context) => Client({ ...options, context }),
     }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.ClientReady,
+      activatesBefore: [ClientEvents.SetupSchema],
+      activate: Schema,
+    }),
     defineModule({
       id: `${meta.id}/module/react-context`,
       activatesOn: Events.Startup,
@@ -37,7 +42,7 @@ export const ClientPlugin = ({
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.Startup,
+      activatesOn: Events.SetupReactSurface,
       activate: () => ReactSurface({ createInvitationUrl }),
     }),
     defineModule({
@@ -47,7 +52,7 @@ export const ClientPlugin = ({
     }),
     defineModule({
       id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntents,
+      activatesOn: Events.SetupIntentResolver,
       activate: (context) => IntentResolver({ context, onReset }),
     }),
     defineModule({

package/src/capabilities/capabilities.ts

@@ -11,5 +11,4 @@ import { CLIENT_PLUGIN } from '../meta';
 export namespace ClientCapabilities {
   export const Client = defineCapability<Client>(`${CLIENT_PLUGIN}/capability/client`);
   export const Schema = defineCapability<TypedObject[]>(`${CLIENT_PLUGIN}/capability/schema`);
-  export const SystemSchema = defineCapability<TypedObject[]>(`${CLIENT_PLUGIN}/capability/system-schema`);
 }

package/src/capabilities/client.ts

@@ -3,7 +3,6 @@
 //
 
 import { contributes, type PluginsContext } from '@dxos/app-framework';
-import { Config, Defaults, Envs, Local, Storage } from '@dxos/config';
 import { Client } from '@dxos/react-client';
 
 import { ClientCapabilities } from './capabilities';
@@ -15,17 +14,10 @@ type ClientCapabilityOptions = Omit<ClientPluginOptions, 'appKey' | 'invitationU
 };
 
 export default async ({ context, onClientInitialized, ...options }: ClientCapabilityOptions) => {
-  const config = new Config(await Storage(), Envs(), Local(), Defaults());
-  const client = new Client({ config, ...options });
-
+  const client = new Client(options);
   await client.initialize();
   await onClientInitialized?.(context, client);
 
-  const systemSchemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.SystemSchema).flat()));
-  const schemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.Schema).flat()));
-  client.addTypes(systemSchemas);
-  client.addTypes(schemas);
-
   // TODO(wittjosiah): Remove. This is a hack to get the app to boot with the new identity after a reset.
   client.reloaded.on(() => {
     client.halo.identity.subscribe(async (identity) => {

package/src/capabilities/index.ts

@@ -9,5 +9,6 @@ export const Client = lazy(async () => import('./client'));
 export const IntentResolver = lazy(async () => import('./intent-resolver'));
 export const ReactContext = lazy(async () => import('./react-context'));
 export const ReactSurface = lazy(async () => import('./react-surface'));
+export const Schema = lazy(async () => import('./schema'));
 
 export * from './capabilities';

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,184 @@ 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 lookupKey = PublicKey.random();
+        const credential = await navigator.credentials.create({
+          publicKey: {
+            challenge: new Uint8Array(),
+            rp: { id: location.hostname, name: appName },
+            user: {
+              id: lookupKey.asUint8Array(),
+              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({
+          data: {
+            recoveryKey,
+            algorithm,
+            lookupKey,
+          },
+        });
+      },
+    }),
+    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 lookupKey = PublicKey.from(new Uint8Array((credential as any).response.userHandle));
+        await client.services.services.IdentityService.recoverIdentity({
+          external: {
+            lookupKey,
+            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,26 @@
+//
+// 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';
+
+export default (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
+
+  // TODO(wittjosiah): Unregister schemas when they are disabled.
+  let previous: TypedObject[] = [];
+  const unsubscribe = effect(() => {
+    const schemas = Array.from(new Set(context.requestCapabilities(ClientCapabilities.Schema).flat()));
+    // TODO(wittjosiah): Filter out schemas which the client has already registered.
+    const newSchemas = schemas.filter((schema) => !previous.includes(schema));
+    previous = schemas;
+    client.addTypes(newSchemas);
+  });
+
+  return contributes(Capabilities.Null, null, () => 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 = {};