@dxos/react-client 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/moon.yml

@@ -6,6 +6,7 @@ tags:
   - ts-test
   - typedoc
   - pack
+  - storybook
 tasks:
   compile:
     args:
@@ -17,3 +18,6 @@ tasks:
       - '--entryPoint=src/mesh/index.ts'
       - '--entryPoint=src/testing/index.ts'
       - '--entryPoint=src/worker.ts'
+  test:
+    inputs:
+      - .storybook/*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -86,43 +86,42 @@
   },
   "dependencies": {
     "react-error-boundary": "^4.0.13",
-    "@dxos/client": "0.8.4-main.fd6878d",
-    "@dxos/codec-protobuf": "0.8.4-main.fd6878d",
-    "@dxos/context": "0.8.4-main.fd6878d",
-    "@dxos/async": "0.8.4-main.fd6878d",
-    "@dxos/debug": "0.8.4-main.fd6878d",
-    "@dxos/echo": "0.8.4-main.fd6878d",
-    "@dxos/config": "0.8.4-main.fd6878d",
-    "@dxos/echo-schema": "0.8.4-main.fd6878d",
-    "@dxos/echo-signals": "0.8.4-main.fd6878d",
-    "@dxos/node-std": "0.8.4-main.fd6878d",
-    "@dxos/protocols": "0.8.4-main.fd6878d",
-    "@dxos/react-hooks": "0.8.4-main.fd6878d",
-    "@dxos/invariant": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d"
+    "@dxos/async": "0.8.4-main.fffef41",
+    "@dxos/client": "0.8.4-main.fffef41",
+    "@dxos/context": "0.8.4-main.fffef41",
+    "@dxos/codec-protobuf": "0.8.4-main.fffef41",
+    "@dxos/debug": "0.8.4-main.fffef41",
+    "@dxos/config": "0.8.4-main.fffef41",
+    "@dxos/echo": "0.8.4-main.fffef41",
+    "@dxos/echo-signals": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/log": "0.8.4-main.fffef41",
+    "@dxos/node-std": "0.8.4-main.fffef41",
+    "@dxos/protocols": "0.8.4-main.fffef41",
+    "@dxos/react-hooks": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
     "typedoc": "0.28.1",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d",
-    "@dxos/test-utils": "0.8.4-main.fd6878d"
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41",
+    "@dxos/test-utils": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "optionalDependencies": {
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

package/src/client/ClientProvider.tsx

@@ -15,7 +15,7 @@ import { Client, type ClientOptions, type ClientServicesProvider, SystemStatus }
 import { type Config } from '@dxos/config';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { log } from '@dxos/log';
-import { useControlledState } from '@dxos/react-hooks';
+import { useAsyncEffect, useControlledState } from '@dxos/react-hooks';
 import { type MaybePromise, type Provider, getAsyncProviderValue } from '@dxos/util';
 
 import { printBanner } from '../banner';
@@ -81,10 +81,10 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
   (
     {
       children,
-      config: configProvider,
-      client: clientProvider,
-      services: servicesProvider,
-      status: controlledStatus,
+      config: configParam,
+      client: clientParam,
+      services: servicesParam,
+      status: statusParam,
       fallback: Fallback = () => null,
       signalsRuntime = true,
       noBanner,
@@ -109,13 +109,13 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
       throw error;
     }
 
-    const [client, setClient] = useState(clientProvider instanceof Client ? clientProvider : undefined);
+    const [client, setClient] = useState(clientParam instanceof Client ? clientParam : undefined);
 
     // Provide external access.
     useImperativeHandle(forwardedRef, () => client, [client]);
 
     // Client status subscription.
-    const [status, setStatus] = useControlledState(controlledStatus);
+    const [status, setStatus] = useControlledState(statusParam);
     useEffect(() => {
       if (!client) {
         return;
@@ -126,7 +126,7 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
     }, [client]);
 
     // Create and/or initialize client.
-    useEffect(() => {
+    useAsyncEffect(async () => {
       let disposed = false;
       const initialize = async (client: Client) => {
         if (!client.initialized) {
@@ -141,42 +141,38 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
         }
 
         setClient(client);
-
         if (!noBanner) {
           printBanner(client);
         }
       };
 
       let client: Client;
-      const t = setTimeout(async () => {
-        try {
-          if (clientProvider) {
-            // Asynchronously request client.
-            client = await getAsyncProviderValue(clientProvider);
-            await initialize(client);
-          } else {
-            // Asynchronously construct client (config may be undefined).
-            const config = await getAsyncProviderValue(configProvider);
-            log('resolved config', { config });
-            const services = await getAsyncProviderValue(servicesProvider, config);
-            log('created services', { services });
-            client = new Client({ config, services, ...options });
-            log('created client');
-            await initialize(client);
-          }
-        } catch (err) {
-          if (!disposed) {
-            log.catch(err);
-          }
+      try {
+        if (clientParam) {
+          // Asynchronously request client.
+          client = await getAsyncProviderValue(clientParam);
+          await initialize(client);
+        } else {
+          // Asynchronously construct client (config may be undefined).
+          const config = await getAsyncProviderValue(configParam);
+          log('resolved config', { config });
+          const services = await getAsyncProviderValue(servicesParam, config);
+          log('created services', { services });
+          client = new Client({ config, services, ...options });
+          log('created client');
+          await initialize(client);
         }
-      });
+      } catch (err) {
+        if (!disposed) {
+          log.catch(err);
+        }
+      }
 
       return () => {
         log('clean up');
         disposed = true;
-        clearTimeout(t);
         // Only destroy if the client is not provided by the parent.
-        if (!clientProvider) {
+        if (!clientParam) {
           void client
             ?.destroy()
             .then(() => {
@@ -185,7 +181,7 @@ export const ClientProvider = forwardRef<Client | undefined, ClientProviderProps
             .catch((err) => log.catch(err));
         }
       };
-    }, [configProvider, clientProvider, servicesProvider, noBanner]);
+    }, [configParam, clientParam, servicesParam, noBanner]);
 
     if (!client?.initialized || status !== SystemStatus.ACTIVE) {
       return <Fallback client={client} status={status} />;

package/src/echo/useQuery.test.tsx

@@ -5,7 +5,8 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
-import { Expando, Filter, live } from '@dxos/client/echo';
+import { Expando, Filter } from '@dxos/client/echo';
+import { Obj, Type } from '@dxos/echo';
 
 import { createClient, createClientContextProvider } from '../testing/util';
 
@@ -19,9 +20,9 @@ describe('useQuery', () => {
     const wrapper = await createClientContextProvider(client);
 
     // Create 3 test objects: Alice, Bob, Charlie.
-    const alice = live(Expando, { name: 'Alice' });
-    const bob = live(Expando, { name: 'Bob' });
-    const charlie = live(Expando, { name: 'Charlie' });
+    const alice = Obj.make(Type.Expando, { name: 'Alice' });
+    const bob = Obj.make(Type.Expando, { name: 'Bob' });
+    const charlie = Obj.make(Type.Expando, { name: 'Charlie' });
 
     space!.db.add(alice);
     space!.db.add(bob);
@@ -65,7 +66,7 @@ describe('useQuery', () => {
      *   Actual: 4 renders
      *   1. [] (empty)
      *   2. ['Alice', 'Bob', 'Charlie'] (all loaded)
-     *   3. ['Alice', 'Charlie', 'Bob'] (FLASH BUG - Bob moves to end!)
+     *   3. ['Alice', 'Charlie', 'Bob'] (FLASH BUG - Bob moves to end!)x
      *   4. ['Alice', 'Charlie'] (Bob finally removed)
      */
 
@@ -82,7 +83,7 @@ describe('useQuery', () => {
     const wrapper = await createClientContextProvider(client);
 
     // Create 10 test objects: 1, 2, 3, ..., 10.
-    const objects = Array.from({ length: 10 }, (_, i) => live(Expando, { value: i + 1 }));
+    const objects = Array.from({ length: 10 }, (_, i) => Obj.make(Type.Expando, { value: i + 1 }));
 
     objects.forEach((obj) => space!.db.add(obj));
     await space!.db.flush();
@@ -122,7 +123,6 @@ describe('useQuery', () => {
       new Set([]), // Initial loading state.
       new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), // All objects loaded.
       // TODO(dmaretskyi): Fix this with query ordering.
-      new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), // Getting another render for some reason.
       new Set([]), // All items deleted.
     ]);
   });

package/src/echo/useQuery.ts

@@ -4,7 +4,7 @@
 
 import { useMemo, useSyncExternalStore } from 'react';
 
-import { type Echo, Filter, type Live, Query, type Space, isSpace } from '@dxos/client/echo';
+import { type Echo, Filter, type Live, Query, type Queryable, type Space, isSpace } from '@dxos/client/echo';
 
 const EMPTY_ARRAY: never[] = [];
 
@@ -12,30 +12,38 @@ const noop = () => {};
 
 // TODO(dmaretskyi): Queries are fully serializable, so we can remove `deps` argument.
 interface UseQueryFn {
-  <Q extends Query.Any>(spaceOrEcho: Space | Echo | undefined, query: Q, deps?: any[]): Live<Query.Type<Q>>[];
+  <Q extends Query.Any>(
+    spaceOrEcho: Space | Echo | Queryable | undefined,
+    query: Q,
+    deps?: any[],
+  ): Live<Query.Type<Q>>[];
 
-  <F extends Filter.Any>(spaceOrEcho: Space | Echo | undefined, filter: F, deps?: any[]): Live<Filter.Type<F>>[];
+  <F extends Filter.Any>(
+    spaceOrEcho: Space | Echo | Queryable | undefined,
+    filter: F,
+    deps?: any[],
+  ): Live<Filter.Type<F>>[];
 }
 
 /**
  * Create subscription.
  */
+// TODO(burdon): Sort?
 export const useQuery: UseQueryFn = (
-  spaceOrEcho: Space | Echo | undefined,
+  // TODO(burdon): CRITICAL: Remove Space and just requre Queryable.
+  resource: Space | Echo | Queryable | undefined,
   queryOrFilter: Query.Any | Filter.Any,
   deps?: any[],
 ): Live<unknown>[] => {
   const query = Filter.is(queryOrFilter) ? Query.select(queryOrFilter) : queryOrFilter;
 
   const { getObjects, subscribe } = useMemo(() => {
-    let subscribed = false;
-    const queryResult =
-      spaceOrEcho === undefined
-        ? undefined
-        : isSpace(spaceOrEcho)
-          ? spaceOrEcho.db.query(query)
-          : spaceOrEcho.query(query);
+    let queryResult = undefined;
+    if (resource) {
+      queryResult = isSpace(resource) ? resource.db.query(query) : resource.query(query);
+    }
 
+    let subscribed = false;
     return {
       getObjects: () => (subscribed && queryResult ? queryResult.objects : EMPTY_ARRAY),
       subscribe: (cb: () => void) => {
@@ -47,7 +55,7 @@ export const useQuery: UseQueryFn = (
         };
       },
     };
-  }, [spaceOrEcho, JSON.stringify(query.ast), ...(deps ?? [])]);
+  }, [resource, JSON.stringify(query.ast), ...(deps ?? [])]);
 
   // https://beta.reactjs.org/reference/react/useSyncExternalStore
   // NOTE: This hook will resubscribe whenever the callback passed to the first argument changes; make sure it is stable.

package/src/echo/useSchema.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import { useMemo, useSyncExternalStore } from 'react';
 
 import { type Client } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
-import { type BaseSchema } from '@dxos/echo-schema';
+import { type BaseSchema } from '@dxos/echo/internal';
 
 /**
  * Subscribe to and retrieve schema changes from a space's schema registry.

package/src/echo/useSpaces.ts

@@ -2,11 +2,11 @@
 // Copyright 2020 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import { type PublicKeyLike } from '@dxos/client';
 import { type Space, SpaceState } from '@dxos/client/echo';
-import { useMulticastObservable } from '@dxos/react-hooks';
+import { useAsyncEffect, useMulticastObservable } from '@dxos/react-hooks';
 
 import { useClient } from '../client';
 
@@ -23,18 +23,14 @@ export const useSpace = (spaceKeyLike?: PublicKeyLike): Space | undefined => {
   const spaces = useMulticastObservable<Space[]>(client.spaces);
   const [ready, setReady] = useState(false);
 
-  useEffect(() => {
+  useAsyncEffect(async () => {
     // Only wait for ready if looking for the default space.
     if (spaceKeyLike) {
       return;
     }
 
-    const timeout = setTimeout(async () => {
-      await client.spaces.waitUntilReady();
-      setReady(true);
-    });
-
-    return () => clearTimeout(timeout);
+    await client.spaces.waitUntilReady();
+    setReady(true);
   }, [client, spaceKeyLike]);
 
   if (spaceKeyLike) {

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/halo/Passkey.stories.tsx

@@ -2,16 +2,15 @@
 // 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 { useClient } from '../client';
 import { withClientProvider } from '../testing';
@@ -126,11 +125,6 @@ const Test = () => {
   );
 };
 
-export default {
-  title: 'sdk/react-client/Passkeys',
-  render: Test,
-};
-
 const config = new Config({
   runtime: {
     client: {
@@ -151,6 +145,14 @@ const config = new Config({
   },
 });
 
-export const Default = {
+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/invitations/useInvitationStatus.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { type Reducer, useCallback, useEffect, useMemo, useReducer } 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,23 +2,26 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 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 { useClient } from '../client';
 import { useSpace } from '../echo';
 
 import { type ClientRepeatedComponentProps, ClientRepeater } from './ClientRepeater';
 
-export default {
+const meta = {
   title: 'sdk/react-client/ClientRepeater',
   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>
@@ -50,10 +53,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

@@ -6,9 +6,10 @@ import React, { type FC, useEffect, useRef, useState } from 'react';
 
 import { Client, type PublicKey } from '@dxos/client';
 import { TestBuilder, performInvitation } from '@dxos/client/testing';
-import { type TypedObject } from '@dxos/echo-schema';
+import { type TypedObject } from '@dxos/echo/internal';
 import { registerSignalsRuntime } from '@dxos/echo-signals/react';
 import { faker } from '@dxos/random';
+import { useAsyncEffect } from '@dxos/react-hooks';
 
 import { ClientProvider } from '../client';
 
@@ -27,7 +28,7 @@ export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
   clients?: Client[];
   types?: TypedObject[];
   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.
@@ -47,7 +48,7 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
     types,
     createIdentity,
     createSpace,
-    onSpaceCreated,
+    onCreateSpace,
   } = props;
   useEffect(() => {
     registerSignalsRuntime();
@@ -57,31 +58,25 @@ export const ClientRepeater = <P extends ClientRepeatedComponentProps>(props: Cl
   const [spaceKey, setSpaceKey] = useState<PublicKey>();
 
   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()));
-      }
-
-      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 })),
-        );
-      }
-
-      setClients(clients);
-    });
-
-    return () => clearTimeout(timeout);
+  useAsyncEffect(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()));
+    }
+
+    if (createSpace) {
+      const client = clients[0];
+      const space = await client.spaces.create({ name: faker.commerce.productName() });
+      setSpaceKey(space.key);
+      await onCreateSpace?.({ client, space }, {});
+      await Promise.all(clients.slice(1).flatMap((client) => performInvitation({ host: space, guest: client.spaces })));
+    }
+
+    setClients(clients);
   }, []);
 
   if (clients.length === 0) {