@dxos/react-client 0.6.10 → 0.6.11-staging.66fb9aa

package/dist/types/src/client/useClientStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClientStatus.d.ts","sourceRoot":"","sources":["../../../../src/client/useClientStatus.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAE9D,eAAO,MAAM,eAAe,WAAY,MAAM,oCAY7C,CAAC"}

package/dist/types/src/devtools/useDevtools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDevtools.d.ts","sourceRoot":"","sources":["../../../../src/devtools/useDevtools.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAM1D,eAAO,MAAM,WAAW,QAAO,YAI9B,CAAC"}
+{"version":3,"file":"useDevtools.d.ts","sourceRoot":"","sources":["../../../../src/devtools/useDevtools.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAK1D,eAAO,MAAM,WAAW,QAAO,YAG9B,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,4 +1,4 @@
 export * from '@dxos/client';
-export { useMulticastObservable } from '@dxos/react-async';
+export { useMulticastObservable } from '@dxos/react-hooks';
 export * from './client';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/ClientRepeater.d.ts

@@ -1,15 +1,16 @@
 import React, { type FC } from 'react';
-import { Client } from '@dxos/client';
+import { Client, type PublicKey } from '@dxos/client';
 import { type Space } from '@dxos/client/echo';
 import { type S } from '@dxos/echo-schema';
 import { type MaybePromise } from '@dxos/util';
-export type RepeatedComponentProps = {
+export type ClientRepeatedComponentProps = {
     id: number;
     count: number;
+    spaceKey?: PublicKey;
 };
-export type ClientRepeaterProps<P extends RepeatedComponentProps> = {
-    component: FC<any>;
+export type ClientRepeaterProps<P extends ClientRepeatedComponentProps> = {
     className?: string;
+    component: FC<ClientRepeatedComponentProps>;
     controls?: FC<{
         clients: Client[];
     }>;
@@ -26,5 +27,5 @@ export type ClientRepeaterProps<P extends RepeatedComponentProps> = {
  * Utility component for Storybook stories which sets up clients for n peers.
  * The `Component` property is rendered n times, once for each peer.
  */
-export declare const ClientRepeater: <P extends RepeatedComponentProps>(props: ClientRepeaterProps<P>) => React.JSX.Element | null;
+export declare const ClientRepeater: <P extends ClientRepeatedComponentProps>(props: ClientRepeaterProps<P>) => React.JSX.Element | null;
 //# sourceMappingURL=ClientRepeater.d.ts.map

package/dist/types/src/testing/ClientRepeater.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClientRepeater.d.ts","sourceRoot":"","sources":["../../../../src/testing/ClientRepeater.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,EAAE,EAAa,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAkB,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAM/C,MAAM,MAAM,sBAAsB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,sBAAsB,IAAI;IAClE,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,EAAE,CAAC;QAAE,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,CAAC;CAChC,CAAC;AAEF;;;GAGG;AAMH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,sBAAsB,SAAS,mBAAmB,CAAC,CAAC,CAAC,6BAwD7F,CAAC"}
+{"version":3,"file":"ClientRepeater.d.ts","sourceRoot":"","sources":["../../../../src/testing/ClientRepeater.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,EAAE,EAAqB,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/C,MAAM,MAAM,4BAA4B,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC;AAE/F,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,4BAA4B,IAAI;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,EAAE,CAAC,4BAA4B,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,EAAE,CAAC;QAAE,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,CAAC;CAChC,CAAC;AAEF;;;GAGG;AAMH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,4BAA4B,SAAS,mBAAmB,CAAC,CAAC,CAAC,6BA2DnG,CAAC"}

package/dist/types/src/testing/{decorators.stories.d.ts → ClientRepeater.stories.d.ts}

@@ -5,10 +5,10 @@ declare const _default: {
     decorators: import("@storybook/react/*").Decorator[];
 };
 export default _default;
-export declare const WithClient: {
+export declare const Default: {
     render: () => React.JSX.Element;
 };
-export declare const WithClientSpace: {
+export declare const Space: {
     render: () => React.JSX.Element;
 };
-//# sourceMappingURL=decorators.stories.d.ts.map
+//# sourceMappingURL=ClientRepeater.stories.d.ts.map

package/dist/types/src/testing/ClientRepeater.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientRepeater.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/ClientRepeater.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;AAU1B,wBAGE;AAgCF,eAAO,MAAM,OAAO;;CAEnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAEjB,CAAC"}

package/dist/types/src/testing/index.d.ts

@@ -1,3 +1,4 @@
 export * from '@dxos/client/testing';
 export * from './ClientRepeater';
+export * from './withClientProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AAErC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AAErC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC"}

package/dist/types/src/testing/util.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Client } from '@dxos/client';
+import { type Space } from '@dxos/client/echo';
+export declare const createClient: ({ createIdentity, createSpace, }?: {
+    createIdentity?: boolean;
+    createSpace?: boolean;
+}) => Promise<{
+    client: Client;
+    space: Space | undefined;
+}>;
+export declare const createContextProvider: (client: Client) => Promise<({ children }: any) => React.JSX.Element>;
+//# sourceMappingURL=util.d.ts.map

package/dist/types/src/testing/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/testing/util.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAY,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI/C,eAAO,MAAM,YAAY,sCAGtB;IAAE,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE;;;EAcrD,CAAC;AAGF,eAAO,MAAM,qBAAqB,WAAkB,MAAM,4BAClC,GAAG,uBAC1B,CAAC"}

package/dist/types/src/testing/withClientProvider.d.ts

@@ -0,0 +1,26 @@
+import { type Decorator } from '@storybook/react';
+import { type Client } from '@dxos/client';
+import { type Space } from '@dxos/client/echo';
+import { type MaybePromise } from '@dxos/util';
+import { type ClientProviderProps } from '../client';
+type InitializeProps = {
+    createIdentity?: boolean;
+    createSpace?: boolean;
+    onSpaceCreated?: (client: Client, space: Space) => MaybePromise<void>;
+};
+export type WithClientProviderProps = InitializeProps & ClientProviderProps;
+/**
+ * Decorator that provides the client context.
+ */
+export declare const withClientProvider: ({ createIdentity, createSpace, onSpaceCreated, onInitialized, ...props }?: WithClientProviderProps) => Decorator;
+export type WithMultiClientProviderProps = InitializeProps & ClientProviderProps & {
+    numClients?: number;
+};
+/**
+ * Decorator that creates a scaffold for multiple clients.
+ * Orchestrates invitations between a randomly selected host and the remaining clients.
+ * NOTE: Should come before withLayout.
+ */
+export declare const withMultiClientProvider: ({ numClients, createIdentity, createSpace, onSpaceCreated, onInitialized, ...props }: WithMultiClientProviderProps) => Decorator;
+export {};
+//# sourceMappingURL=withClientProvider.d.ts.map

package/dist/types/src/testing/withClientProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withClientProvider.d.ts","sourceRoot":"","sources":["../../../../src/testing/withClientProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKlD,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAErE,KAAK,eAAe,GAAG;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CACvE,CAAC;AA4BF,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAE5E;;GAEG;AACH,eAAO,MAAM,kBAAkB,8EAM5B,uBAAuB,KAAQ,SAYjC,CAAC;AAKF,MAAM,MAAM,4BAA4B,GAAG,eAAe,GAAG,mBAAmB,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3G;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,yFAOjC,4BAA4B,KAAG,SAuCjC,CAAC"}

package/dist/types/src/testing/withClientProvider.stories.d.ts

@@ -0,0 +1,13 @@
+import '@dxos-theme';
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: () => React.JSX.Element | null;
+    decorators: import("@storybook/react/*").Decorator[];
+};
+export default _default;
+export declare const Default: {};
+export declare const Multiple: {
+    decorators: import("@storybook/react/*").Decorator[];
+};
+//# sourceMappingURL=withClientProvider.stories.d.ts.map

package/dist/types/src/testing/withClientProvider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withClientProvider.stories.d.ts","sourceRoot":"","sources":["../../../../src/testing/withClientProvider.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA+B1B,wBAIE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC;AAE1B,eAAO,MAAM,QAAQ;;CAUpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-client",
-  "version": "0.6.10",
+  "version": "0.6.11-staging.66fb9aa",
   "description": "React client API",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -91,18 +91,20 @@
     }
   },
   "dependencies": {
-    "@dxos/async": "0.6.10",
-    "@dxos/client": "0.6.10",
-    "@dxos/codec-protobuf": "0.6.10",
-    "@dxos/config": "0.6.10",
-    "@dxos/debug": "0.6.10",
-    "@dxos/echo-signals": "0.6.10",
-    "@dxos/invariant": "0.6.10",
-    "@dxos/echo-schema": "0.6.10",
-    "@dxos/log": "0.6.10",
-    "@dxos/node-std": "0.6.10",
-    "@dxos/react-async": "0.6.10",
-    "@dxos/util": "0.6.10"
+    "react-error-boundary": "^4.0.13",
+    "@dxos/async": "0.6.11-staging.66fb9aa",
+    "@dxos/codec-protobuf": "0.6.11-staging.66fb9aa",
+    "@dxos/client": "0.6.11-staging.66fb9aa",
+    "@dxos/config": "0.6.11-staging.66fb9aa",
+    "@dxos/echo-schema": "0.6.11-staging.66fb9aa",
+    "@dxos/debug": "0.6.11-staging.66fb9aa",
+    "@dxos/echo-signals": "0.6.11-staging.66fb9aa",
+    "@dxos/invariant": "0.6.11-staging.66fb9aa",
+    "@dxos/log": "0.6.11-staging.66fb9aa",
+    "@dxos/node-std": "0.6.11-staging.66fb9aa",
+    "@dxos/react-hooks": "0.6.11-staging.66fb9aa",
+    "@dxos/protocols": "0.6.11-staging.66fb9aa",
+    "@dxos/util": "0.6.11-staging.66fb9aa"
   },
   "devDependencies": {
     "@testing-library/dom": "^8.17.1",
@@ -112,19 +114,20 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/random": "0.6.10",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/storybook-utils": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10"
+    "@dxos/random": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-syntax-highlighter": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-theme": "0.6.11-staging.66fb9aa",
+    "@dxos/storybook-utils": "0.6.11-staging.66fb9aa"
   },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-ui-theme": "0.6.10",
-    "@dxos/react-ui": "0.6.10"
+    "@dxos/react-ui": "0.6.11-staging.66fb9aa",
+    "@dxos/react-ui-theme": "0.6.11-staging.66fb9aa"
   },
   "optionalDependencies": {
-    "@dxos/random": "0.6.10"
+    "@dxos/random": "0.6.11-staging.66fb9aa"
   },
   "publishConfig": {
     "access": "public"

package/src/client/AgentHostingProvider.tsx

@@ -11,15 +11,16 @@ import { log } from '@dxos/log';
 
 import { useClient } from '../client';
 
-/*
- * Interface for invoking the agent hosting provider client.
- * @experimental
- */
-
 export type AgentHostingProviderProps = { config: Config; halo: Halo };
 
 export const AgentHostingContext = createContext<AgentHostingProviderClient | null>(null);
 
+/**
+ * Experimental agent hosting provider.
+ * @param props
+ * @constructor
+ * @deprecated
+ */
 export const AgentHostingProvider = (props: PropsWithChildren<{}>) => {
   const client = useClient();
   const [agentHostingProviderClient] = useState(makeClient(client));
@@ -52,7 +53,7 @@ const makeClient = ({ config, halo }: AgentHostingProviderProps) => {
       if (agentHostingProviderClient.init()) {
         return agentHostingProviderClient;
       } else {
-        // Not authorized or error initializing
+        // Not authorized or error initializing.
         return null;
       }
     }

package/src/client/{ClientContext.test.tsx → ClientProvider.test.tsx}

@@ -11,7 +11,8 @@ import { Client, Config, SystemStatus, fromHost } from '@dxos/client';
 import { log } from '@dxos/log';
 import { describe, test } from '@dxos/test';
 
-import { ClientProvider, useClient } from './ClientContext';
+import { ClientProvider } from './ClientProvider';
+import { useClient } from './useClient';
 import { useIdentity } from '../halo';
 
 log.config({ filter: 'ClientContext:debug,warn' });

package/src/client/ClientProvider.tsx

@@ -0,0 +1,156 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import React, { type FunctionComponent, type ReactNode, useEffect, useRef, useState } from 'react';
+
+import { Client, type ClientOptions, type ClientServicesProvider, SystemStatus } from '@dxos/client';
+import { type Config } from '@dxos/config';
+import { type S } from '@dxos/echo-schema';
+import { registerSignalFactory } from '@dxos/echo-signals/react';
+import { log } from '@dxos/log';
+import { useControlledValue } from '@dxos/react-hooks';
+import { getAsyncProviderValue, type MaybePromise, type Provider } from '@dxos/util';
+
+import { ClientContext, type ClientContextProps } from './context';
+import { printBanner } from '../banner';
+
+/**
+ * Properties for the ClientProvider.
+ */
+export type ClientProviderProps = Pick<ClientContextProps, 'status'> &
+  Omit<ClientOptions, 'config' | 'services'> & {
+    children?: ReactNode;
+
+    /**
+     * Config object or async provider.
+     */
+    config?: Config | Provider<Promise<Config>>;
+
+    /**
+     * Client object or async provider to enable to caller to do custom initialization.
+     *
+     * Most apps won't need this.
+     */
+    // TODO(wittjosiah): Remove async and just use to keep reference to client?
+    //   (Preferring `onInitialized` for custom initialization.)
+    // TODO(burdon): Use useImperativeHandle to expose client.
+    client?: Client | Provider<Promise<Client>>;
+
+    /**
+     * Callback to enable the caller to create a custom ClientServicesProvider.
+     *
+     * Most apps won't need this.
+     */
+    services?: ClientServicesProvider | ((config?: Config) => MaybePromise<ClientServicesProvider>);
+
+    /**
+     * List of schema to register.
+     */
+    types?: S.Schema<any>[];
+
+    /**
+     * ReactNode to display until the client is available.
+     */
+    fallback?: FunctionComponent<Partial<ClientContextProps>>;
+
+    /**
+     * Set to false to stop default signal factory from being registered.
+     */
+    // TODO(burdon): Move to options.
+    registerSignalFactory?: boolean;
+
+    /**
+     * Post initialization hook to enable to caller to do custom initialization.
+     *
+     * @param Client
+     */
+    onInitialized?: (client: Client) => MaybePromise<void>;
+  };
+
+/**
+ * Root component that provides the DXOS client instance to child components.
+ * To be used with the `useClient` hook.
+ */
+export const ClientProvider = ({
+  children,
+  config: configProvider,
+  client: clientProvider,
+  services: servicesProvider,
+  types,
+  status: controlledStatus,
+  fallback: Fallback = () => null,
+  registerSignalFactory: _registerSignalFactory = true,
+  onInitialized,
+  ...options
+}: ClientProviderProps) => {
+  useRef(() => {
+    // TODO(wittjosiah): Ideally this should be imported asynchronously because it is optional.
+    //   Unfortunately, async import seemed to break signals React instrumentation.
+    _registerSignalFactory && registerSignalFactory();
+  });
+
+  const [client, setClient] = useState(clientProvider instanceof Client ? clientProvider : undefined);
+
+  const [error, setError] = useState();
+  if (error) {
+    throw error;
+  }
+
+  // Status subscription.
+  const [status, setStatus] = useControlledValue(controlledStatus);
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscription = client.status.subscribe((status) => setStatus(status));
+    return () => subscription.unsubscribe();
+  }, [client, setStatus]);
+
+  // Initialize client.
+  useEffect(() => {
+    const done = async (client: Client) => {
+      await client.initialize().catch(setError);
+      log('client ready');
+      await onInitialized?.(client);
+      log('initialization complete');
+      if (types) {
+        client.addTypes(types);
+      }
+
+      setClient(client);
+      setStatus(client.status.get() ?? SystemStatus.ACTIVE);
+      printBanner(client);
+    };
+
+    const t = setTimeout(async () => {
+      if (clientProvider) {
+        // Asynchronously request client.
+        const client = await getAsyncProviderValue(clientProvider);
+        await done(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 });
+        const client = new Client({ config, services, ...options });
+        log('created client');
+        await done(client);
+      }
+    });
+
+    return () => {
+      log('clean up');
+      clearTimeout(t);
+      void client?.destroy().catch((err) => log.catch(err));
+    };
+  }, [clientProvider, configProvider, servicesProvider]);
+
+  if (!client || status !== SystemStatus.ACTIVE) {
+    return <Fallback client={client} status={status} />;
+  }
+
+  return <ClientContext.Provider value={{ client, status }}>{children}</ClientContext.Provider>;
+};

package/src/client/context.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2020 DXOS.org
+//
+
+import { type Context, createContext } from 'react';
+
+import { type Client, type ClientServices, type SystemStatus } from '@dxos/client';
+
+export type ClientContextProps = {
+  client: Client;
+
+  // Optionally expose services (e.g., for devtools).
+  services?: ClientServices;
+
+  status?: SystemStatus | null;
+};
+
+export const ClientContext: Context<ClientContextProps | undefined> = createContext<ClientContextProps | undefined>(
+  undefined,
+);

package/src/client/index.ts

@@ -3,8 +3,14 @@
 //
 
 export * from './AgentHostingProvider';
-export * from './ClientContext';
+export * from './ClientProvider';
+
+// TODO(burdon): Remove.
+export * from './context';
+
+export * from './useClient';
 export * from './useClientServices';
+export * from './useClientStatus';
 export * from './useConfig';
 export * from './useShell';
 export * from './useStatus';

package/src/client/useClient.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+
+import { ClientContext } from '../client/context';
+
+/**
+ * Hook returning instance of DXOS client.
+ * Requires ClientContext to be set via ClientProvider.
+ */
+export const useClient = () => {
+  const { client } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));
+  return client;
+};

package/src/client/useClientServices.ts

@@ -4,10 +4,10 @@
 
 import { useContext } from 'react';
 
-import type { ClientServices } from '@dxos/client';
+import { type ClientServices } from '@dxos/client';
 import { raise } from '@dxos/debug';
 
-import { ClientContext } from './ClientContext';
+import { ClientContext } from './context';
 
 export const useClientServices = (): ClientServices | undefined => {
   const { services } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));

package/src/client/useClientStatus.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Client, type SystemStatus } from '@dxos/client';
+
+export const useClientStatus = (client: Client) => {
+  const [status, setStatus] = useState<SystemStatus | null>();
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const subscription = client.status.subscribe((status) => setStatus(status));
+    return () => subscription.unsubscribe();
+  }, [client, setStatus]);
+
+  return status;
+};

package/src/client/useConfig.test.tsx

@@ -10,7 +10,7 @@ import { waitForCondition } from '@dxos/async';
 import { Client, Config, SystemStatus, fromHost } from '@dxos/client';
 import { describe, test } from '@dxos/test';
 
-import { ClientProvider } from './ClientContext';
+import { ClientProvider } from './ClientProvider';
 import { useConfig } from './useConfig';
 
 describe('Config hook', () => {

package/src/client/useConfig.ts

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { ClientContext } from './ClientContext';
+import { ClientContext } from './context';
 
 /**
  * Hook returning config object used to initialize the DXOS client instance.

package/src/client/useShell.ts

@@ -6,7 +6,7 @@ import { useEffect, useState } from 'react';
 
 import { type Shell, type ShellDisplay } from '@dxos/client';
 
-import { useClient } from './ClientContext';
+import { useClient } from './useClient';
 
 /**
  * Helper hook to access the shell.

package/src/client/useStatus.ts

@@ -7,7 +7,7 @@ import { useContext } from 'react';
 import { type SystemStatus } from '@dxos/client';
 import { raise } from '@dxos/debug';
 
-import { ClientContext } from './ClientContext';
+import { ClientContext } from './context';
 
 export const useStatus = (): SystemStatus | null | undefined => {
   const { status } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));

package/src/devtools/useDevtools.ts

@@ -2,16 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import { useContext } from 'react';
-
 import { type DevtoolsHost } from '@dxos/client/devtools';
 import { raise } from '@dxos/debug';
-import { invariant } from '@dxos/invariant';
 
-import { ClientContext } from '../client';
+import { useClient } from '../client';
 
 export const useDevtools = (): DevtoolsHost => {
-  const { services } = useContext(ClientContext) ?? raise(new Error('Missing ClientContext.'));
-  invariant(services);
-  return services.DevtoolsHost;
+  const client = useClient();
+  return client.services.services.DevtoolsHost ?? raise(new Error('DevtoolsHost not available.'));
 };

package/src/echo/useMembers.ts

@@ -5,7 +5,7 @@
 import { MulticastObservable } from '@dxos/async';
 import { type PublicKey } from '@dxos/client';
 import { HaloSpaceMember, type SpaceMember } from '@dxos/client/echo';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useSpaces } from './useSpaces';
 

package/src/echo/useSpaceInvitations.ts

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 
 import { MulticastObservable } from '@dxos/async';
 import { type PublicKey } from '@dxos/client';
-import { useMulticastObservable } from '@dxos/react-async';
+import { useMulticastObservable } from '@dxos/react-hooks';
 
 import { useSpace } from './useSpaces';
 import { type CancellableInvitationObservable, useInvitationStatus } from '../invitations';