@dxos/plugin-client 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-client",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "DXOS Surface plugin for DXOS Client",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,20 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./src/capabilities/index.ts",
+      "browser": "./src/capabilities/index.ts",
+      "node": "./src/capabilities/node.ts"
+    },
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#testing": "./src/testing/index.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -24,18 +38,36 @@
       "types": "./dist/types/src/cli/index.d.ts",
       "node": "./dist/lib/node-esm/cli/index.mjs"
     },
+    "./operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "browser": "./dist/lib/browser/operations/index.mjs",
+      "node": "./dist/lib/node-esm/operations/index.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
+    },
+    "./testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
+      "operations": [
+        "dist/types/src/operations/index.d.ts"
+      ],
       "types": [
         "dist/types/src/types/index.d.ts"
+      ],
+      "testing": [
+        "dist/types/src/testing/index.d.ts"
       ]
     }
   },
@@ -44,54 +76,58 @@
     "src"
   ],
   "dependencies": {
-    "@effect/cli": "0.72.1",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect/cli": "0.73.2",
+    "@effect/platform": "0.94.4",
+    "@tauri-apps/api": "^2.8.0",
+    "effect": "3.20.0",
     "react-qr-rounded": "^1.0.0",
-    "yaml": "^2.7.0",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/async": "0.8.4-main.bc674ce",
-    "@dxos/cli-util": "0.8.4-main.bc674ce",
-    "@dxos/client": "0.8.4-main.bc674ce",
-    "@dxos/client-protocol": "0.8.4-main.bc674ce",
-    "@dxos/client-services": "0.8.4-main.bc674ce",
-    "@dxos/config": "0.8.4-main.bc674ce",
-    "@dxos/effect": "0.8.4-main.bc674ce",
-    "@dxos/echo": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/plugin-observability": "0.8.4-main.bc674ce",
-    "@dxos/protocols": "0.8.4-main.bc674ce",
-    "@dxos/react-client": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-form": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-pickers": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
-    "@dxos/shell": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "yaml": "^2.8.2",
+    "@dxos/app-framework": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/async": "0.8.4-main.bcb3aa67d6",
+    "@dxos/cli-util": "0.8.4-main.bcb3aa67d6",
+    "@dxos/client-protocol": "0.8.4-main.bcb3aa67d6",
+    "@dxos/client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/client-services": "0.8.4-main.bcb3aa67d6",
+    "@dxos/context": "0.8.4-main.bcb3aa67d6",
+    "@dxos/config": "0.8.4-main.bcb3aa67d6",
+    "@dxos/echo": "0.8.4-main.bcb3aa67d6",
+    "@dxos/effect": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/invariant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/operation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-graph": "0.8.4-main.bcb3aa67d6",
+    "@dxos/protocols": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-client": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-observability": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-form": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-stack": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-pickers": "0.8.4-main.bcb3aa67d6",
+    "@dxos/shell": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@effect/printer": "0.47.0",
     "@effect/printer-ansi": "0.47.0",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/plugin-testing": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/ClientPlugin.ts

@@ -2,34 +2,44 @@
 // Copyright 2025 DXOS.org
 //
 
-import { ActivationEvent, Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvent, ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+
+import { meta } from '#meta';
+import { translations } from './translations';
+import { ClientEvents } from '#types';
+import { type ClientPluginOptions } from '#types';
 
 import {
   AppGraphBuilder,
   Client,
   Migrations,
-  OperationResolver,
+  NavigationHandler,
+  OperationHandler,
   ReactContext,
   ReactSurface,
   SchemaDefs,
-} from './capabilities';
-import { meta } from './meta';
-import { translations } from './translations';
-import { ClientEvents } from './types';
-import { type ClientPluginOptions } from './types';
+} from '#capabilities';
 
 export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addNavigationHandlerModule(({ invitationProp }) => ({
+    activate: () => NavigationHandler({ invitationProp }),
+  })),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addReactContextModule({ activate: ReactContext }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule((options) => {
     return {
       id: Capability.getModuleTag(Client),
-      activatesOn: ActivationEvent.oneOf(Common.ActivationEvent.Startup, Common.ActivationEvent.SetupAppGraph),
+      activatesOn: ActivationEvent.oneOf(ActivationEvents.Startup, AppActivationEvents.SetupAppGraph),
       activatesAfter: [ClientEvents.ClientReady],
       activate: () => Client(options),
     };
   }),
   Plugin.addModule({
     activatesOn: ClientEvents.ClientReady,
-    activatesBefore: [Common.ActivationEvent.SetupSchema],
+    activatesBefore: [AppActivationEvents.SetupSchema],
     activate: SchemaDefs,
   }),
   Plugin.addModule({
@@ -37,22 +47,25 @@ export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
     activatesBefore: [ClientEvents.SetupMigration],
     activate: Migrations,
   }),
-  Common.Plugin.addReactContextModule({ activate: ReactContext }),
-  Plugin.addModule(({ invitationUrl = window.location.origin, invitationProp = 'deviceInvitationCode', onReset }) => {
-    const createInvitationUrl = (invitationCode: string) => {
-      const baseUrl = new URL(invitationUrl);
-      baseUrl.searchParams.set(invitationProp, invitationCode);
-      return baseUrl.toString();
-    };
+  Plugin.addModule(
+    ({
+      shareableLinkOrigin = typeof window !== 'undefined' ? window.location.origin : 'http://localhost',
+      invitationPath = '/',
+      invitationProp = 'deviceInvitationCode',
+      onReset,
+    }) => {
+      const createInvitationUrl = (invitationCode: string) => {
+        const baseUrl = new URL(invitationPath || '/', shareableLinkOrigin);
+        baseUrl.searchParams.set(invitationProp, invitationCode);
+        return baseUrl.toString();
+      };
 
-    return {
-      id: Capability.getModuleTag(ReactSurface),
-      activatesOn: Common.ActivationEvent.SetupReactSurface,
-      activate: () => ReactSurface({ createInvitationUrl, onReset }),
-    };
-  }),
-  Common.Plugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Common.Plugin.addTranslationsModule({ translations }),
+      return {
+        id: Capability.getModuleTag(ReactSurface),
+        activatesOn: ActivationEvents.SetupReactSurface,
+        activate: () => ReactSurface({ createInvitationUrl, onReset }),
+      };
+    },
+  ),
   Plugin.make,
 );

package/src/capabilities/{app-graph-builder/app-graph-builder.ts → app-graph-builder.ts}

@@ -4,13 +4,15 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/operation';
-import { CreateAtom, GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
+import { CreateAtom, GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 import { ConnectionState } from '@dxos/react-client/mesh';
 
-import { meta } from '../../meta';
-import { Account, ClientCapabilities, ClientOperation } from '../../types';
+import { meta } from '#meta';
+import { Account, ClientCapabilities } from '#types';
+import { ClientOperation } from '#operations';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -20,10 +22,10 @@ export default Capability.makeModule(
       actions: () =>
         Effect.succeed([
           {
-            id: `${meta.id}/open-user-account`,
+            id: `${meta.id}.open-user-account`,
             data: () => Operation.invoke(ClientOperation.ShareIdentity),
             properties: {
-              label: ['open user account label', { ns: meta.id }],
+              label: ['open-user-account.label', { ns: meta.id }],
               icon: 'ph--user--regular',
               disposition: 'menu',
               keyBinding: {
@@ -41,11 +43,11 @@ export default Capability.makeModule(
         const status = get(CreateAtom.fromObservable(client.mesh.networkStatus));
 
         return [
-          {
+          Node.make({
             id: Account.id,
             type: meta.id,
             properties: {
-              label: ['account label', { ns: meta.id }],
+              label: ['account.label', { ns: meta.id }],
               icon: 'ph--user--regular',
               disposition: 'user-account',
               testId: 'clientPlugin.account',
@@ -56,40 +58,40 @@ export default Capability.makeModule(
               status: status.swarm === ConnectionState.OFFLINE ? 'error' : 'active',
             },
             nodes: [
-              {
+              Node.make({
                 id: Account.Profile,
                 data: Account.Profile,
                 type: meta.id,
                 properties: {
-                  label: ['profile label', { ns: meta.id }],
+                  label: ['profile.label', { ns: meta.id }],
                   icon: 'ph--user--regular',
                 },
-              },
-              {
+              }),
+              Node.make({
                 id: Account.Devices,
                 data: Account.Devices,
                 type: meta.id,
                 properties: {
-                  label: ['devices label', { ns: meta.id }],
+                  label: ['devices.label', { ns: meta.id }],
                   icon: 'ph--devices--regular',
                   testId: 'clientPlugin.devices',
                 },
-              },
-              {
+              }),
+              Node.make({
                 id: Account.Security,
                 data: Account.Security,
                 type: meta.id,
                 properties: {
-                  label: ['security label', { ns: meta.id }],
+                  label: ['security.label', { ns: meta.id }],
                   icon: 'ph--key--regular',
                 },
-              },
+              }),
             ],
-          },
+          }),
         ];
       }),
     });
 
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/{client/client.ts → client.ts}

@@ -4,27 +4,29 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { Client, ClientService } from '@dxos/client';
 import { runAndForwardErrors } from '@dxos/effect';
 import { log } from '@dxos/log';
 
-import { ClientEvents } from '../../types';
-import { ClientCapabilities, type ClientPluginOptions } from '../../types';
+import { ClientEvents } from '#types';
+import { ClientCapabilities, type ClientPluginOptions } from '#types';
 
-type ClientCapabilityOptions = Omit<ClientPluginOptions, 'appKey' | 'invitationUrl' | 'invitationParam' | 'onReset'>;
+type ClientCapabilityOptions = Omit<
+  ClientPluginOptions,
+  'appKey' | 'shareableLinkOrigin' | 'invitationPath' | 'invitationParam' | 'onReset'
+>;
 
 export default Capability.makeModule(
-  Effect.fnUntraced(function* (props?: ClientCapabilityOptions) {
-    const { onClientInitialized, onSpacesReady, ...options } = props!;
+  Effect.fnUntraced(function* ({ onClientInitialized, onSpacesReady, ...options }: ClientCapabilityOptions) {
     const capabilityManager = yield* Capability.Service;
     const pluginManager = yield* Plugin.Service;
 
     log('creating client');
     const client = new Client(options);
-    log('initializing client');
+    log('initializing client (calling client.initialize())...');
     yield* Effect.tryPromise(() => client.initialize());
-    log('initialized client');
+    log('client.initialize() returned successfully');
     if (onClientInitialized) {
       yield* onClientInitialized({ client }).pipe(
         Effect.provideService(Capability.Service, capabilityManager),
@@ -42,9 +44,10 @@ export default Capability.makeModule(
       });
     });
 
-    // TODO(burdon): The callback isn't called?
-    const subscription = client.spaces.isReady.subscribe(async (ready) => {
-      if (ready) {
+    let spacesReadyFired = false;
+    const subscription = client.spaces.subscribe(async () => {
+      if (!spacesReadyFired) {
+        spacesReadyFired = true;
         await Effect.gen(function* () {
           yield* Plugin.activate(ClientEvents.SpacesReady);
           if (onSpacesReady) {
@@ -65,11 +68,12 @@ export default Capability.makeModule(
       //  Perhaps move to using layer has source of truth and add a getter capability for the client.
       Capability.contributes(ClientCapabilities.Client, client, () =>
         Effect.gen(function* () {
+          log.info('client capability: destroying client');
           subscription.unsubscribe();
           yield* Effect.tryPromise(() => client.destroy());
         }),
       ),
-      Capability.contributes(Common.Capability.Layer, ClientService.fromClient(client)),
+      Capability.contributes(Capabilities.Layer, ClientService.fromClient(client)),
     ];
   }),
 );

package/src/capabilities/index.ts

@@ -2,10 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './client';
-export * from './migrations';
-export * from './operation-resolver';
-export * from './react-context';
-export * from './react-surface';
-export * from './schema-defs';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const Client = Capability.lazy('Client', () => import('./client'));
+export const Migrations = Capability.lazy('Migrations', () => import('./migrations'));
+export { NavigationHandler } from './navigation-handler';
+export type { NavigationHandlerOptions } from './navigation-handler';
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactContext = Capability.lazy('ReactContext', () => import('./react-context'));
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const SchemaDefs = Capability.lazy('SchemaDefs', () => import('./schema-defs'));

package/src/capabilities/{migrations/migrations.ts → migrations.ts}

@@ -4,13 +4,13 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 
-import { ClientCapabilities } from '../../types';
+import { ClientCapabilities } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
     const client = yield* Capability.get(ClientCapabilities.Client);
     const migrationsAtom = yield* Capability.atom(ClientCapabilities.Migration);
 
@@ -25,6 +25,6 @@ export default Capability.makeModule(
       { immediate: true },
     );
 
-    return Capability.contributes(Common.Capability.Null, null, () => Effect.sync(() => cancel()));
+    return Capability.contributes(Capabilities.Null, null, () => Effect.sync(() => cancel()));
   }),
 );

package/src/capabilities/navigation-handler/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export type { NavigationHandlerOptions } from './navigation-handler';
+
+export const NavigationHandler = Capability.lazy('NavigationHandler', () => import('./navigation-handler'));

package/src/capabilities/navigation-handler/navigation-handler.ts

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { log } from '@dxos/log';
+import { Operation } from '@dxos/operation';
+
+import { ClientOperation } from '../../operations';
+
+export type NavigationHandlerOptions = {
+  invitationProp?: string;
+  tokenProp?: string;
+  tokenTypeProp?: string;
+};
+
+/**
+ * NavigationHandler for auth-related URL params.
+ * Handles login tokens and device invitation codes.
+ */
+export default Capability.makeModule(
+  Effect.fnUntraced(function* ({
+    invitationProp = 'deviceInvitationCode',
+    tokenProp = 'token',
+    tokenTypeProp = 'type',
+  }: NavigationHandlerOptions = {}) {
+    const capabilities = yield* Capability.Service;
+    const operationService = yield* Capability.get(Capabilities.OperationInvoker);
+
+    const handler: AppCapabilities.NavigationHandler = (url: URL) =>
+      Effect.gen(function* () {
+        const token = url.searchParams.get(tokenProp);
+        const tokenType = url.searchParams.get(tokenTypeProp);
+        const invitationCode = url.searchParams.get(invitationProp);
+
+        if (token && tokenType === 'login') {
+          log('login token received via navigation');
+          removeQueryParam(tokenProp);
+          removeQueryParam(tokenTypeProp);
+          yield* Operation.invoke(ClientOperation.RedeemToken, { token });
+        } else if (invitationCode) {
+          log('device invitation received via navigation');
+          removeQueryParam(invitationProp);
+          yield* Operation.invoke(ClientOperation.JoinIdentity, { invitationCode });
+        }
+      }).pipe(
+        Effect.provideService(Capability.Service, capabilities),
+        Effect.provideService(Operation.Service, operationService),
+        Effect.orDie,
+      );
+
+    return Capability.contributes(AppCapabilities.NavigationHandler, handler);
+  }),
+);
+
+/** Remove a query param from the current browser URL. */
+const removeQueryParam = (key: string) => {
+  const current = new URL(window.location.href);
+  current.searchParams.delete(key);
+  history.replaceState(null, '', current.pathname + current.search);
+};

package/src/capabilities/node.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const Client = Capability.lazy('Client', () => import('./client'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const SchemaDefs = Capability.lazy('SchemaDefs', () => import('./schema-defs'));

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { ClientOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, ClientOperationHandlerSet);
+  }),
+);

package/src/capabilities/{react-context/react-context.tsx → react-context.tsx}

@@ -3,20 +3,20 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 import { ClientProvider } from '@dxos/react-client';
 
-import { meta } from '../../meta';
-import { ClientCapabilities } from '../../types';
+import { meta } from '#meta';
+import { ClientCapabilities } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactContext, {
+    Capability.contributes(Capabilities.ReactContext, {
       id: meta.id,
-      context: ({ children }: { children?: React.ReactNode }) => {
+      context: ({ children }: { children?: ReactNode }) => {
         const client = useCapability(ClientCapabilities.Client);
         return <ClientProvider client={client}>{children}</ClientProvider>;
       },