@dxos/react-client 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/echo/useSpaces.test.tsx

@@ -5,19 +5,20 @@
 import { act, renderHook } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
-import { useSpace, useSpaces } from './useSpaces';
 import { createClient, createClientContextProvider } from '../testing/util';
 
+import { useSpace, useSpaces } from './useSpaces';
+
 describe('useSpaces', () => {
   test('lists existing spaces', async () => {
-    const { client } = await createClient({ createIdentity: true });
+    const { client } = await createClient({ createIdentity: true, createSpace: true });
     const wrapper = await createClientContextProvider(client);
     const { result } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
   });
 
   test('updates when new spaces are created', async () => {
-    const { client } = await createClient({ createIdentity: true });
+    const { client } = await createClient({ createIdentity: true, createSpace: true });
     const wrapper = await createClientContextProvider(client);
     const { result, rerender } = renderHook(() => useSpaces(), { wrapper });
     expect(result.current.length).to.eq(1);
@@ -30,23 +31,17 @@ describe('useSpaces', () => {
 });
 
 describe('useSpace', () => {
-  test('gets default space', async () => {
-    const { client } = await createClient();
+  test('returns undefined when no id provided', async () => {
+    const { client } = await createClient({ createIdentity: true });
     const wrapper = await createClientContextProvider(client);
-    const { result, rerender } = renderHook(() => useSpace(), { wrapper });
+    const { result } = renderHook(() => useSpace(), { wrapper });
     expect(result.current).to.be.undefined;
-    await act(async () => {
-      await client.halo.createIdentity();
-      await client.spaces.waitUntilReady();
-    });
-    rerender();
-    expect(result.current).to.not.be.undefined;
   });
 
-  test('gets space by key', async () => {
+  test('gets space by id', async () => {
     const { client, space } = await createClient({ createIdentity: true, createSpace: true });
     const wrapper = await createClientContextProvider(client);
-    const { result } = renderHook(() => useSpace(space!.key), { wrapper });
+    const { result } = renderHook(() => useSpace(space!.id), { wrapper });
     expect(result.current).to.not.be.undefined;
   });
 });

package/src/echo/useSpaces.ts

@@ -2,51 +2,53 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
-
-import { type PublicKeyLike } from '@dxos/client';
-import { type Space, SpaceState } from '@dxos/client/echo';
+import { PublicKey } from '@dxos/client';
+import { type Space, type SpaceId, SpaceState } from '@dxos/client/echo';
 import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 
 /**
- * Get a specific Space using its key.
+ * Get a specific Space using its id.
  * The space is not guaranteed to be in the ready state.
- * Returns the default space if no key is provided.
+ * Returns undefined if no id is provided.
  * Requires a ClientProvider somewhere in the parent tree.
  *
- * @param spaceKeyLike the key of the space to look for
+ * @param spaceId the id of the space to look for.
  */
-export const useSpace = (spaceKeyLike?: PublicKeyLike): Space | undefined => {
+// TODO(wittjosiah): Currently unable to remove `PublicKey` from this api.
+//  When initially joining a space that is all that is returned.
+export const useSpace = (spaceId?: SpaceId | PublicKey): Space | undefined => {
   const client = useClient();
   const spaces = useMulticastObservable<Space[]>(client.spaces);
-  const [ready, setReady] = useState(false);
-
-  useEffect(() => {
-    // Only wait for ready if looking for the default space.
-    if (spaceKeyLike) {
-      return;
-    }
 
-    const timeout = setTimeout(async () => {
-      await client.spaces.waitUntilReady();
-      setReady(true);
-    });
+  if (!spaceId) {
+    return undefined;
+  }
 
-    return () => clearTimeout(timeout);
-  }, [client, spaceKeyLike]);
+  return spaces.find((space) => {
+    if (spaceId instanceof PublicKey) {
+      return space.key.equals(spaceId);
+    }
 
-  if (spaceKeyLike) {
-    return spaces.find((space) => space.key.equals(spaceKeyLike) || space.id === spaceKeyLike);
-  }
+    return space.id === spaceId;
+  });
+};
 
-  if (ready && client.halo.identity.get()) {
-    return client.spaces.default;
-  }
+/**
+ * Get a Space database by the id of the space.
+ * The space is not guaranteed to be in the ready state.
+ * Returns undefined if no id is provided.
+ * Requires a ClientProvider somewhere in the parent tree.
+ *
+ * @param spaceId the id of the space to look for.
+ */
+export const useDatabase = (spaceId?: SpaceId): Space['db'] | undefined => {
+  const space = useSpace(spaceId);
+  return space?.db;
 };
 
-export type UseSpacesParams = {
+export type UseSpacesProps = {
   /**
    * Return uninitialized spaces as well.
    */
@@ -57,9 +59,9 @@ export type UseSpacesParams = {
  * Get all Spaces available to current user.
  * Requires a ClientProvider somewhere in the parent tree.
  * By default, only ready spaces are returned.
- * @returns an array of Spaces
+ * @returns an array of Spaces.
  */
-export const useSpaces = ({ all = false }: UseSpacesParams = {}): Space[] => {
+export const useSpaces = ({ all = false }: UseSpacesProps = {}): Space[] => {
   const client = useClient();
   const spaces = useMulticastObservable<Space[]>(client.spaces);
 

package/src/echo/useSubscription.ts

@@ -18,7 +18,7 @@ export const useSubscription = (cb: () => void, selection: Selection) => {
   const callbackRef = useRef(cb);
   callbackRef.current = cb;
 
-  const subscriptionRef = useRef<SubscriptionHandle>();
+  const subscriptionRef = useRef<SubscriptionHandle>(null);
 
   useEffect(() => {
     subscriptionRef.current = createSubscription(() => {

package/src/echo/useSyncState.ts

@@ -4,15 +4,16 @@
 
 import { useEffect, useState } from 'react';
 
-import { type PeerSyncState, type SpaceSyncStateMap, type Space } from '@dxos/client/echo';
+import { type PeerSyncState, type Space, type SpaceSyncStateMap } from '@dxos/client/echo';
 import { Context } from '@dxos/context';
 import { type SpaceId } from '@dxos/keys';
 import { EdgeService } from '@dxos/protocols';
+import { compositeKey } from '@dxos/util';
 
 import { useClient } from '../client';
 
 const isEdgePeerId = (peerId: string, spaceId: SpaceId) =>
-  peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
+  peerId.startsWith(compositeKey(EdgeService.AUTOMERGE_REPLICATOR, spaceId));
 
 /**
  * Hook Subscribes to sync state for each space.
@@ -30,7 +31,7 @@ export const useSyncState = (): SpaceSyncStateMap => {
         }
 
         ctx.onDispose(
-          space.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
+          space.internal.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
             const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
             if (syncState) {
               setSpaceState((spaceState) => ({ ...spaceState, [space.id]: syncState }));
@@ -62,7 +63,7 @@ export const useSpaceSyncState = (space: Space): PeerSyncState | undefined => {
 
   useEffect(() => {
     const ctx = new Context();
-    space.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
+    space.internal.db.subscribeToSyncState(ctx, ({ peers = [] }) => {
       const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
       if (syncState) {
         setSpaceState(syncState);

package/src/halo/Passkey.stories.tsx

@@ -2,22 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback } from 'react';
 
 import { Config, PublicKey } from '@dxos/client';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 import { Button } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withTheme } from '@dxos/storybook-utils';
 
-import { useCredentials } from './useCredentials';
-import { useIdentity } from './useIdentity';
 import { useClient } from '../client';
 import { withClientProvider } from '../testing';
 
+import { useCredentials } from './useCredentials';
+import { useIdentity } from './useIdentity';
+
 const getNewChallenge = () => Math.random().toString(36).substring(2);
 
 const Test = () => {
@@ -43,7 +43,7 @@ const Test = () => {
           challenge: new TextEncoder().encode(challenge),
           rp: { id: location.hostname, name: 'Test' },
           user: {
-            id: lookupKey.asUint8Array(),
+            id: lookupKey.asUint8Array() as Uint8Array<ArrayBuffer>,
             name: identity.did,
             displayName: identity.profile?.displayName ?? '',
           },
@@ -105,7 +105,7 @@ const Test = () => {
 
   return (
     <>
-      <div className='mbe-4 flex gap-2'>
+      <div className='mb-4 flex gap-2'>
         <Button disabled={!!identity} onClick={handleCreateIdentity}>
           Create Identity
         </Button>
@@ -116,7 +116,7 @@ const Test = () => {
           Authenticate with Passkey
         </Button>
       </div>
-      <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded'>
+      <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded-sm'>
         <SyntaxHighlighter language='json'>
           {JSON.stringify({ identity, credentials: credentials.length }, null, 2)}
         </SyntaxHighlighter>
@@ -125,11 +125,6 @@ const Test = () => {
   );
 };
 
-export default {
-  title: 'sdk/react-client/Passkeys',
-  render: Test,
-};
-
 const config = new Config({
   runtime: {
     client: {
@@ -150,6 +145,14 @@ const config = new Config({
   },
 });
 
-export const Default = {
-  decorators: [withClientProvider({ config }), withTheme],
-};
+const meta = {
+  title: 'sdk/react-client/Passkeys',
+  render: Test,
+  decorators: [withClientProvider({ config }), withTheme()],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/halo/useDevices.test.tsx

@@ -5,9 +5,10 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
-import { useDevices } from './useDevices';
 import { createClient, createClientContextProvider } from '../testing/util';
 
+import { useDevices } from './useDevices';
+
 describe('useDevices', () => {
   test('lists existing devices', async () => {
     const { client } = await createClient({ createIdentity: true });

package/src/halo/useHaloInvitations.ts

@@ -7,7 +7,7 @@ import { useMemo } from 'react';
 import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
-import { useInvitationStatus, type CancellableInvitationObservable } from '../invitations';
+import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';
 
 export const useHaloInvitations = (): CancellableInvitationObservable[] => {
   const client = useClient();

package/src/invitations/useInvitationStatus.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useReducer, type Reducer, useMemo, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo, useReducer } from 'react';
 
 import { type PublicKey } from '@dxos/client';
 import {
@@ -24,9 +24,10 @@ interface InvitationReducerState {
   status: Invitation.State; // TODO(burdon): Rename state.
   haltedAt?: Invitation.State;
   result: InvitationResult;
-  error?: number;
+  error?: Error;
   id?: string;
   multiUse?: boolean;
+  shareable?: boolean;
   invitationCode?: string;
   authCode?: string;
   authMethod?: Invitation.AuthMethod;
@@ -72,7 +73,7 @@ export type InvitationStatus = {
   multiUse?: boolean;
   shareable?: boolean;
   result: InvitationResult;
-  error?: number;
+  error?: Error;
   cancel(): void;
   // TODO(wittjosiah): Remove?
   connect(observable: CancellableInvitationObservable): void;
@@ -82,11 +83,11 @@ export type InvitationStatus = {
 // Without private key, the invitation code cannot be created.
 // These invitations are only available to be accepted but not shared.
 const isShareableInvitation = (invitation: Invitation) =>
-  invitation.authMethod !== Invitation.AuthMethod.KNOWN_PUBLIC_KEY || invitation.guestKeypair?.privateKey;
+  invitation.authMethod !== Invitation.AuthMethod.KNOWN_PUBLIC_KEY || !!invitation.guestKeypair?.privateKey;
 
 export const useInvitationStatus = (observable?: CancellableInvitationObservable): InvitationStatus => {
-  const [state, dispatch] = useReducer<Reducer<InvitationReducerState, InvitationAction>, null>(
-    (prev, action) => {
+  const [state, dispatch] = useReducer(
+    (prev: InvitationReducerState, action: InvitationAction): InvitationReducerState => {
       log('useInvitationStatus', { action });
       const invitationProps =
         'invitation' in action
@@ -115,10 +116,10 @@ export const useInvitationStatus = (observable?: CancellableInvitationObservable
           action.status === Invitation.State.TIMEOUT) && {
           haltedAt: typeof prev.haltedAt === 'undefined' ? action.haltedAt : prev.haltedAt,
         }),
-      } as InvitationReducerState;
+      };
     },
     null,
-    (_arg: null) => {
+    (_arg: null): InvitationReducerState => {
       const invitation = observable?.get();
       return {
         status: Invitation.State.INIT,

package/src/testing/ClientRepeater.stories.tsx

@@ -2,22 +2,27 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { Obj } from '@dxos/echo';
 import { Input } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withTheme } from '@dxos/storybook-utils';
 
-import { ClientRepeater, type ClientRepeatedComponentProps } from './ClientRepeater';
 import { useClient } from '../client';
 import { useSpace } from '../echo';
 
-export default {
+import { type ClientRepeatedComponentProps, ClientRepeater } from './ClientRepeater';
+
+const meta = {
   title: 'sdk/react-client/ClientRepeater',
-  decorators: [withTheme],
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const JsonPanel = ({ value }: { value: any }) => (
   <SyntaxHighlighter language='json'>{JSON.stringify(value, undefined, 2)}</SyntaxHighlighter>
@@ -28,9 +33,9 @@ const ClientStory = () => {
   return <JsonPanel value={client.toJSON()} />;
 };
 
-const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
+const ClientSpace = ({ spaceId }: ClientRepeatedComponentProps) => {
   const client = useClient();
-  const space = useSpace(spaceKey);
+  const space = useSpace(spaceId);
   if (!space?.isOpen) {
     return null;
   }
@@ -41,7 +46,11 @@ const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
         <Input.TextInput
           placeholder='Name'
           value={space.properties.name}
-          onChange={(event) => (space.properties.name = event.target.value)}
+          onChange={(event) =>
+            Obj.change(space.properties, (obj) => {
+              obj.name = event.target.value;
+            })
+          }
         />
       </Input.Root>
       <JsonPanel value={client.toJSON()} />
@@ -49,10 +58,10 @@ const ClientSpace = ({ spaceKey }: ClientRepeatedComponentProps) => {
   );
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => <ClientRepeater component={ClientStory} count={2} />,
 };
 
-export const Space = {
+export const Space: Story = {
   render: () => <ClientRepeater component={ClientSpace} count={2} createSpace />,
 };

package/src/testing/ClientRepeater.tsx

@@ -2,18 +2,20 @@
 // Copyright 2022 DXOS.org
 //
 
-import React, { useState, type FC, useEffect, useRef } from 'react';
+import React, { type FC, useRef, useState } from 'react';
 
-import { Client, type PublicKey } from '@dxos/client';
+import { Client } from '@dxos/client';
 import { TestBuilder, performInvitation } from '@dxos/client/testing';
-import { type TypedObject } from '@dxos/echo-schema';
-import { registerSignalsRuntime } from '@dxos/echo-signals/react';
+import { type Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
+import { useAsyncEffect } from '@dxos/react-hooks';
 
-import { type WithClientProviderProps } from './withClientProvider';
 import { ClientProvider } from '../client';
+import { type SpaceId } from '../echo';
+
+import { type WithClientProviderProps } from './withClientProvider';
 
-export type ClientRepeatedComponentProps = { id: number; count: number; spaceKey?: PublicKey };
+export type ClientRepeatedComponentProps = { id: number; count: number; spaceId?: SpaceId };
 
 export type ClientRepeaterControlsProps = { clients: Client[] };
 
@@ -24,9 +26,9 @@ export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
   controls?: FC<ClientRepeaterControlsProps>;
   count?: number;
   clients?: Client[];
-  types?: TypedObject[];
+  types?: Type.AnyObj[];
   args?: Omit<P, 'id' | 'count'>;
-} & Pick<WithClientProviderProps, 'createIdentity' | 'createSpace' | 'onSpaceCreated'>;
+} & Pick<WithClientProviderProps, 'createIdentity' | 'createSpace' | 'onCreateSpace'>;
 
 /**
  * Utility component for Storybook stories which sets up clients for n peers.
@@ -46,41 +48,32 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
     types,
     createIdentity,
     createSpace,
-    onSpaceCreated,
+    onCreateSpace,
   } = props;
-  useEffect(() => {
-    registerSignalsRuntime();
-  }, []);
 
   const [clients, setClients] = useState(props.clients ?? []);
-  const [spaceKey, setSpaceKey] = useState<PublicKey>();
+  const [spaceId, setSpaceId] = useState<SpaceId>();
 
   const testBuilder = useRef(new TestBuilder());
-  useEffect(() => {
-    const timeout = setTimeout(async () => {
-      const clients = [...Array(count)].map(
-        (_) => new Client({ services: testBuilder.current.createLocalClientServices(), types }),
-      );
-
-      await Promise.all(clients.map((client) => client.initialize()));
-      if (createIdentity || createSpace) {
-        await Promise.all(clients.map((client) => client.halo.createIdentity()));
-      }
+  useAsyncEffect(async () => {
+    const clients = [...Array(count)].map(
+      (_) => new Client({ services: testBuilder.current.createLocalClientServices(), types }),
+    );
 
-      if (createSpace) {
-        const client = clients[0];
-        const space = await client.spaces.create({ name: faker.commerce.productName() });
-        setSpaceKey(space.key);
-        await onSpaceCreated?.({ client, space }, {});
-        await Promise.all(
-          clients.slice(1).flatMap((client) => performInvitation({ host: space, guest: client.spaces })),
-        );
-      }
+    await Promise.all(clients.map((client) => client.initialize()));
+    if (createIdentity || createSpace) {
+      await Promise.all(clients.map((client) => client.halo.createIdentity()));
+    }
 
-      setClients(clients);
-    });
+    if (createSpace) {
+      const client = clients[0];
+      const space = await client.spaces.create({ name: faker.commerce.productName() });
+      setSpaceId(space.id);
+      await onCreateSpace?.({ client, space }, {});
+      await Promise.all(clients.slice(1).flatMap((client) => performInvitation({ host: space, guest: client.spaces })));
+    }
 
-    return () => clearTimeout(timeout);
+    setClients(clients);
   }, []);
 
   if (clients.length === 0) {
@@ -92,7 +85,7 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
       {Controls && <Controls clients={clients} />}
       {clients.map((client, index) => (
         <ClientProvider key={index} client={client}>
-          <Component id={index} count={clients.length} spaceKey={spaceKey} {...{ ...props.args }} />
+          <Component id={index} count={clients.length} spaceId={spaceId} {...{ ...props.args }} />
         </ClientProvider>
       ))}
     </>

package/src/testing/context.tsx

@@ -4,16 +4,17 @@
 
 import { createContext, useContext } from 'react';
 
-import { type Space } from '@dxos/client/echo';
+import { type Space, type SpaceId } from '@dxos/client/echo';
 import { raise } from '@dxos/debug';
 
 export type ClientStory = {
+  index?: number;
+  spaceId?: SpaceId;
   space?: Space;
 };
 
-// TODO(wittjosiah): Add to multi-client as well.
 export const ClientStory = createContext<ClientStory | undefined>(undefined);
 
-export const useClientProvider = (): ClientStory => {
+export const useClientStory = (): ClientStory => {
   return useContext(ClientStory) ?? raise(new Error('Missing ClientStory'));
 };

package/src/testing/util.tsx

@@ -24,7 +24,6 @@ export const createClient = async ({
   let space: Space | undefined;
   if (createSpace) {
     space = await client.spaces.create();
-    await client.spaces.waitUntilReady();
   }
 
   return { client, space };

package/src/testing/withClientProvider.stories.tsx

@@ -2,32 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
+import { expect, within } from 'storybook/test';
 
 import { log } from '@dxos/log';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { withClientProvider, type WithClientProviderProps, withMultiClientProvider } from './withClientProvider';
 import { useClient } from '../client';
 import { type Space, useSpaces } from '../echo';
 
+import { type WithClientProviderProps, withClientProvider, withMultiClientProvider } from './withClientProvider';
+
 const SpaceInfo = ({ space }: { space: Space }) => {
   const name = space.isOpen ? space.properties.name : '';
   return <SyntaxHighlighter language='json'>{JSON.stringify({ id: space.id, name }, null, 2)}</SyntaxHighlighter>;
 };
 
-const Test = () => {
+const DefaultStory = () => {
   const client = useClient();
   const spaces = useSpaces();
   if (!client) {
-    return null;
+    return <Loading data={{ client: !!client }} />;
   }
 
   return (
-    <div className='flex flex-col min-w-[28rem] divide-y divide-separator border border-separator rounded'>
+    <div className='flex flex-col divide-y divide-separator border border-separator'>
       <SyntaxHighlighter language='json'>{JSON.stringify(client.toJSON(), null, 2)}</SyntaxHighlighter>
       {spaces.map((space) => (
         <SpaceInfo key={space.id} space={space} />
@@ -36,10 +37,16 @@ const Test = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'sdk/react-client/withClientProvider',
-  render: Test,
-};
+  render: DefaultStory,
+  decorators: [withTheme()],
+  tags: ['test'],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const clientProps: WithClientProviderProps = {
   createIdentity: true,
@@ -47,19 +54,27 @@ const clientProps: WithClientProviderProps = {
   onInitialized: async (client) => {
     log.info('onInitialized', { client });
   },
-  onSpaceCreated: async ({ client, space }) => {
-    log.info('onSpaceCreated', { client, space });
+  onCreateSpace: async ({ client, space }) => {
+    log.info('onCreateSpace', { client, space });
   },
 };
 
-export const Default = {
-  decorators: [withClientProvider(clientProps), withTheme, withLayout({ classNames: ['flex gap-2'] })],
+export const Default: Story = {
+  decorators: [withClientProvider(clientProps)],
+  parameters: {
+    layout: 'centered',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const initializedText = await canvas.findByText(/"initialized": true/i, {}, { timeout: 30_000 });
+    await expect(initializedText).toBeVisible();
+  },
 };
 
-export const Multiple = {
+export const Multiple: Story = {
   decorators: [
+    withTheme(),
+    withLayout({ classNames: 'grid grid-cols-3' }),
     withMultiClientProvider({ ...clientProps, numClients: 3 }),
-    withTheme,
-    withLayout({ classNames: ['flex gap-2'] }),
   ],
 };