@dxos/plugin-client 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-client",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "DXOS Surface plugin for DXOS Client",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -44,35 +44,36 @@
     "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",
+    "effect": "3.19.16",
     "react-qr-rounded": "^1.0.0",
     "yaml": "^2.7.0",
-    "@dxos/app-framework": "0.8.4-main.21d9917",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/client": "0.8.4-main.21d9917",
-    "@dxos/client-services": "0.8.4-main.21d9917",
-    "@dxos/client-protocol": "0.8.4-main.21d9917",
-    "@dxos/config": "0.8.4-main.21d9917",
-    "@dxos/cli-util": "0.8.4-main.21d9917",
-    "@dxos/effect": "0.8.4-main.21d9917",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/operation": "0.8.4-main.21d9917",
-    "@dxos/plugin-graph": "0.8.4-main.21d9917",
-    "@dxos/plugin-observability": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/protocols": "0.8.4-main.21d9917",
-    "@dxos/react-ui-form": "0.8.4-main.21d9917",
-    "@dxos/react-ui-stack": "0.8.4-main.21d9917",
-    "@dxos/shell": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917",
-    "@dxos/react-ui-pickers": "0.8.4-main.21d9917"
+    "@dxos/app-framework": "0.8.4-main.2244d791bb",
+    "@dxos/app-toolkit": "0.8.4-main.2244d791bb",
+    "@dxos/cli-util": "0.8.4-main.2244d791bb",
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/client-services": "0.8.4-main.2244d791bb",
+    "@dxos/client-protocol": "0.8.4-main.2244d791bb",
+    "@dxos/client": "0.8.4-main.2244d791bb",
+    "@dxos/config": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/effect": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/operation": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-graph": "0.8.4-main.2244d791bb",
+    "@dxos/protocols": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-form": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-observability": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-pickers": "0.8.4-main.2244d791bb",
+    "@dxos/shell": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "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",
@@ -80,18 +81,18 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917"
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "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.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/ClientPlugin.ts

@@ -2,7 +2,8 @@
 // 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 {
   AppGraphBuilder,
@@ -19,17 +20,21 @@ import { ClientEvents } from './types';
 import { type ClientPluginOptions } from './types';
 
 export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  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,7 +42,6 @@ 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);
@@ -47,12 +51,9 @@ export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
 
     return {
       id: Capability.getModuleTag(ReactSurface),
-      activatesOn: Common.ActivationEvent.SetupReactSurface,
+      activatesOn: ActivationEvents.SetupReactSurface,
       activate: () => ReactSurface({ createInvitationUrl, onReset }),
     };
   }),
-  Common.Plugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Common.Plugin.addTranslationsModule({ translations }),
   Plugin.make,
 );

package/src/capabilities/app-graph-builder/app-graph-builder.ts

@@ -4,7 +4,8 @@
 
 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 { ConnectionState } from '@dxos/react-client/mesh';
@@ -90,6 +91,6 @@ export default Capability.makeModule(
       }),
     });
 
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/client/client.ts

@@ -4,7 +4,7 @@
 
 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';
@@ -69,7 +69,7 @@ export default Capability.makeModule(
           yield* Effect.tryPromise(() => client.destroy());
         }),
       ),
-      Capability.contributes(Common.Capability.Layer, ClientService.fromClient(client)),
+      Capability.contributes(Capabilities.Layer, ClientService.fromClient(client)),
     ];
   }),
 );

package/src/capabilities/migrations/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';
 
 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/operation-resolver/operation-resolver.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { PublicKey } from '@dxos/client';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
@@ -27,14 +28,14 @@ export default Capability.makeModule(
   Effect.fnUntraced(function* (props?: OperationResolverOptions) {
     const { appName = 'Composer' } = props ?? {};
 
-    return Capability.contributes(Common.Capability.OperationResolver, [
+    return Capability.contributes(Capabilities.OperationResolver, [
       //
       // CreateIdentity
       //
       OperationResolver.make({
         operation: ClientOperation.CreateIdentity,
         handler: Effect.fnUntraced(function* (profile) {
-          const manager = yield* Capability.get(Common.Capability.PluginManager);
+          const manager = yield* Capability.get(Capabilities.PluginManager);
           const client = yield* Capability.get(ClientCapabilities.Client);
           const data = yield* Effect.promise(() => client.halo.createIdentity(profile));
           yield* Effect.promise(() => runAndForwardErrors(manager.activate(ClientEvents.IdentityCreated)));
@@ -49,7 +50,7 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: ClientOperation.JoinIdentity,
         handler: Effect.fnUntraced(function* (data) {
-          yield* Operation.invoke(Common.LayoutOperation.UpdateDialog, {
+          yield* Operation.invoke(LayoutOperation.UpdateDialog, {
             subject: JOIN_DIALOG,
             blockAlign: 'start',
             props: {
@@ -66,8 +67,8 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: ClientOperation.ShareIdentity,
         handler: Effect.fnUntraced(function* () {
-          yield* Operation.invoke(Common.LayoutOperation.SwitchWorkspace, { subject: Account.id });
-          yield* Operation.invoke(Common.LayoutOperation.Open, { subject: [Account.Profile] });
+          yield* Operation.invoke(LayoutOperation.SwitchWorkspace, { subject: Account.id });
+          yield* Operation.invoke(LayoutOperation.Open, { subject: [Account.Profile] });
           yield* Operation.schedule(ObservabilityOperation.SendEvent, { name: 'identity.share' });
         }),
       }),
@@ -78,7 +79,7 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: ClientOperation.RecoverIdentity,
         handler: Effect.fnUntraced(function* () {
-          yield* Operation.invoke(Common.LayoutOperation.UpdateDialog, {
+          yield* Operation.invoke(LayoutOperation.UpdateDialog, {
             subject: JOIN_DIALOG,
             blockAlign: 'start',
             props: {
@@ -94,7 +95,7 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: ClientOperation.ResetStorage,
         handler: Effect.fnUntraced(function* (data) {
-          yield* Operation.invoke(Common.LayoutOperation.UpdateDialog, {
+          yield* Operation.invoke(LayoutOperation.UpdateDialog, {
             subject: RESET_DIALOG,
             blockAlign: 'start',
             props: {
@@ -129,7 +130,7 @@ export default Capability.makeModule(
           const { recoveryCode } = yield* Effect.promise(() =>
             client.services.services.IdentityService!.createRecoveryCredential({}),
           );
-          yield* Operation.invoke(Common.LayoutOperation.UpdateDialog, {
+          yield* Operation.invoke(LayoutOperation.UpdateDialog, {
             subject: RECOVERY_CODE_DIALOG,
             blockAlign: 'start',
             type: 'alert',

package/src/capabilities/react-context/react-context.tsx

@@ -5,8 +5,8 @@
 import * as Effect from 'effect/Effect';
 import React 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';
@@ -14,7 +14,7 @@ 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 }) => {
         const client = useCapability(ClientCapabilities.Client);

package/src/capabilities/react-surface/react-surface.tsx

@@ -5,7 +5,8 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { type JoinPanelProps } from '@dxos/shell/react';
 
 import {
@@ -30,38 +31,38 @@ export default Capability.makeModule(
     const { createInvitationUrl, onReset } = props!;
     const capabilityManager = yield* Capability.Service;
 
-    return Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
+    return Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
         id: Account.Profile,
         role: 'article',
         filter: (data): data is any => data.subject === Account.Profile,
         component: () => <ProfileContainer />,
       }),
-      Common.createSurface({
+      Surface.create({
         id: Account.Devices,
         role: 'article',
         filter: (data): data is any => data.subject === Account.Devices,
         component: () => <DevicesContainer createInvitationUrl={createInvitationUrl} />,
       }),
-      Common.createSurface({
+      Surface.create({
         id: Account.Security,
         role: 'article',
         filter: (data): data is any => data.subject === Account.Security,
         component: () => <RecoveryCredentialsContainer />,
       }),
-      Common.createSurface({
+      Surface.create({
         id: JOIN_DIALOG,
         role: 'dialog',
         filter: (data): data is { props: JoinPanelProps } => data.component === JOIN_DIALOG,
         component: ({ data }: { data: any }) => <JoinDialog {...data.props} />,
       }),
-      Common.createSurface({
+      Surface.create({
         id: RECOVERY_CODE_DIALOG,
         role: 'dialog',
         filter: (data): data is { props: RecoveryCodeDialogProps } => data.component === RECOVERY_CODE_DIALOG,
         component: ({ data }: { data: any }) => <RecoveryCodeDialog {...data.props} />,
       }),
-      Common.createSurface({
+      Surface.create({
         id: RESET_DIALOG,
         role: 'dialog',
         filter: (data): data is { props: ResetDialogProps } => data.component === RESET_DIALOG,

package/src/capabilities/schema-defs/schema-defs.ts

@@ -4,16 +4,17 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { type Type } from '@dxos/echo';
 
 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 schemasAtom = yield* Capability.atom(Common.Capability.Schema);
+    const schemasAtom = yield* Capability.atom(AppCapabilities.Schema);
 
     // TODO(wittjosiah): Unregister schemas when they are disabled.
     let previous: Type.Entity.Any[] = [];
@@ -30,6 +31,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/cli/commands/halo/create/create.ts

@@ -8,7 +8,7 @@ import * as Console from 'effect/Console';
 import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
-import { Common, Plugin } from '@dxos/app-framework';
+import { Capabilities, Plugin } from '@dxos/app-framework';
 import { CommandConfig, flushAndSync, spaceLayer } from '@dxos/cli-util';
 import { print } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
@@ -30,7 +30,7 @@ export const handler = Effect.fn(function* ({
   invariant(!client.halo.identity.get(), 'Identity already exists');
 
   const manager = yield* Plugin.Service;
-  const { invoke } = manager.capabilities.get(Common.Capability.OperationInvoker);
+  const { invoke } = manager.capabilities.get(Capabilities.OperationInvoker);
   const identity = yield* invoke(ClientOperation.CreateIdentity, {
     displayName: Option.getOrUndefined(displayName),
   });

package/src/cli/plugin.ts

@@ -2,7 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 
 // NOTE: Must not import from index to avoid pulling in react dependencies.
 import { Client } from '../capabilities/client';
@@ -15,19 +16,19 @@ import { type ClientPluginOptions } from '../types';
 import { config, device, edge, halo, profile } from './commands';
 
 export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
+  // TODO(wittjosiah): Could some of these commands make use of operations?
+  AppPlugin.addCommandModule({ commands: [config, device, edge, halo, profile] }),
+  AppPlugin.addOperationResolverModule({ activate: () => OperationResolver() }),
   Plugin.addModule((options) => ({
     id: Capability.getModuleTag(Client),
-    activatesOn: Common.ActivationEvent.Startup,
+    activatesOn: ActivationEvents.Startup,
     activatesAfter: [ClientEvents.ClientReady],
     activate: () => Client(options),
   })),
   Plugin.addModule({
     activatesOn: ClientEvents.ClientReady,
-    activatesBefore: [Common.ActivationEvent.SetupSchema],
+    activatesBefore: [AppActivationEvents.SetupSchema],
     activate: SchemaDefs,
   }),
-  // TODO(wittjosiah): Could some of these commands make use of operations?
-  Common.Plugin.addCommandModule({ commands: [config, device, edge, halo, profile] }),
-  Common.Plugin.addOperationResolverModule({ activate: () => OperationResolver() }),
   Plugin.make,
 );

package/src/components/DevicesContainer.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
@@ -19,7 +19,7 @@ const meta = {
   title: 'plugins/plugin-client/DevicesContainer',
   component: DevicesContainer,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
         ClientPlugin({
@@ -29,6 +29,7 @@ const meta = {
             }),
         }),
         OperationPlugin(),
+        RuntimePlugin(),
       ],
     }),
   ],

package/src/components/DevicesContainer.tsx

@@ -5,23 +5,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QR } from 'react-qr-rounded';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { log } from '@dxos/log';
 import { useClient, useMulticastObservable } from '@dxos/react-client';
 import { type Device, useDevices } from '@dxos/react-client/halo';
 import { type CancellableInvitationObservable, Invitation, InvitationEncoder } from '@dxos/react-client/invitations';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
-import {
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlItem,
-  ControlPage,
-  ControlSection,
-} from '@dxos/react-ui-form';
-import { translationKey } from '@dxos/shell/react';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
+import { Settings } from '@dxos/react-ui-form';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
@@ -52,57 +44,55 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
 
   return (
     <Clipboard.Provider>
-      <ControlPage>
-        <ControlSection
+      <Settings.Root>
+        <Settings.Section
           title={t('devices verbose label', { ns: meta.id })}
           description={t('devices description', { ns: meta.id })}
         >
-          <ControlFrame>
-            <ControlFrameItem title={t('devices label', { ns: meta.id })}>
+          <Settings.Frame>
+            <Settings.FrameItem title={t('devices label', { ns: meta.id })}>
               <List>
-                {devices.map((device: Device) => {
-                  return (
-                    <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
-                  );
-                })}
+                {devices.map((device: Device) => (
+                  <DeviceListItem key={device.deviceKey.toHex()} device={device} connectionState={connectionState} />
+                ))}
               </List>
-            </ControlFrameItem>
+            </Settings.FrameItem>
             {createInvitationUrl && (
-              <ControlFrameItem title='Add device'>
+              <Settings.FrameItem title='Add device'>
                 <DeviceInvitation createInvitationUrl={createInvitationUrl} />
-              </ControlFrameItem>
+              </Settings.FrameItem>
             )}
-          </ControlFrame>
-        </ControlSection>
-        <ControlSection
+          </Settings.Frame>
+        </Settings.Section>
+        <Settings.Section
           title={t('danger zone title', { ns: meta.id })}
           description={t('danger zone description', { ns: meta.id })}
         >
-          <ControlGroup>
-            <ControlItem title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
+          <Settings.Group>
+            <Settings.Item title={t('reset device label')} description={t('reset device description', { ns: meta.id })}>
               <Button variant='destructive' onClick={handleResetStorage} data-testid='devicesContainer.reset'>
                 {t('reset device label')}
               </Button>
-            </ControlItem>
-            <ControlItem
+            </Settings.Item>
+            <Settings.Item
               title={t('recover identity label')}
               description={t('recover identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleRecover} data-testid='devicesContainer.recover'>
                 {t('recover identity label')}
               </Button>
-            </ControlItem>
-            <ControlItem
+            </Settings.Item>
+            <Settings.Item
               title={t('join new identity label')}
               description={t('join new identity description', { ns: meta.id })}
             >
               <Button variant='destructive' onClick={handleJoinNewIdentity} data-testid='devicesContainer.joinExisting'>
                 {t('join new identity label')}
               </Button>
-            </ControlItem>
-          </ControlGroup>
-        </ControlSection>
-      </ControlPage>
+            </Settings.Item>
+          </Settings.Group>
+        </Settings.Section>
+      </Settings.Root>
     </Clipboard.Provider>
   );
 };

package/src/components/JoinDialog.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
@@ -25,7 +25,7 @@ export const JoinDialog = (props: JoinPanelProps) => {
     async (result: InvitationResult | null) => {
       if (result?.identityKey) {
         await Promise.all([
-          invokePromise(Common.LayoutOperation.UpdateDialog, { state: false }),
+          invokePromise(LayoutOperation.UpdateDialog, { state: false }),
           invokePromise(ObservabilityOperation.SendEvent, {
             name: props.initialDisposition === 'recover-identity' ? 'identity.recover' : 'identity.join',
           }),

package/src/components/ProfileContainer.stories.tsx

@@ -14,7 +14,7 @@ import { ProfileContainer } from './ProfileContainer';
 const meta = {
   title: 'plugins/plugin-client/ProfileContainer',
   component: ProfileContainer,
-  decorators: [withTheme, withClientProvider({ createIdentity: true })],
+  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
   parameters: {
     layout: 'fullscreen',
     translations,