@dxos/plugin-client 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-client",
-  "version": "0.8.4-main.74a063c4e0",
+  "version": "0.8.4-main.765dc60934",
   "description": "DXOS Surface plugin for DXOS Client",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,69 +8,89 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "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"
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
     },
-    "#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",
-      "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+    "#capabilities/node": {
+      "source": "./src/capabilities/node.ts",
+      "types": "./dist/types/src/capabilities/node.d.ts",
+      "default": "./dist/lib/neutral/capabilities/node.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
     },
-    "./cli": {
-      "source": "./src/cli/index.ts",
-      "types": "./dist/types/src/cli/index.d.ts",
-      "node": "./dist/lib/node-esm/cli/index.mjs"
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
     },
-    "./operations": {
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.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"
+      "default": "./dist/lib/neutral/operations/index.mjs"
+    },
+    "#plugin": {
+      "source": {
+        "node": "./src/ClientPlugin.node.ts",
+        "default": "./src/ClientPlugin.ts"
+      },
+      "types": "./dist/types/src/ClientPlugin.d.ts",
+      "node": "./dist/lib/neutral/ClientPlugin.node.mjs",
+      "default": "./dist/lib/neutral/ClientPlugin.mjs"
+    },
+    "#testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "default": "./dist/lib/neutral/testing/index.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     },
-    "./types": {
+    "#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"
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "default": "./dist/lib/neutral/index.mjs"
+    },
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.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"
+      "default": "./dist/lib/neutral/testing/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.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"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -78,33 +98,33 @@
   "dependencies": {
     "@effect/cli": "0.73.2",
     "@effect/platform": "0.94.4",
-    "@tauri-apps/api": "^2.8.0",
+    "@tauri-apps/api": "^2.11.0",
     "effect": "3.20.0",
     "react-qr-rounded": "^1.0.0",
     "yaml": "^2.8.2",
-    "@dxos/app-framework": "0.8.4-main.74a063c4e0",
-    "@dxos/cli-util": "0.8.4-main.74a063c4e0",
-    "@dxos/async": "0.8.4-main.74a063c4e0",
-    "@dxos/app-toolkit": "0.8.4-main.74a063c4e0",
-    "@dxos/client": "0.8.4-main.74a063c4e0",
-    "@dxos/client-services": "0.8.4-main.74a063c4e0",
-    "@dxos/client-protocol": "0.8.4-main.74a063c4e0",
-    "@dxos/context": "0.8.4-main.74a063c4e0",
-    "@dxos/config": "0.8.4-main.74a063c4e0",
-    "@dxos/echo": "0.8.4-main.74a063c4e0",
-    "@dxos/effect": "0.8.4-main.74a063c4e0",
-    "@dxos/invariant": "0.8.4-main.74a063c4e0",
-    "@dxos/log": "0.8.4-main.74a063c4e0",
-    "@dxos/operation": "0.8.4-main.74a063c4e0",
-    "@dxos/plugin-graph": "0.8.4-main.74a063c4e0",
-    "@dxos/plugin-observability": "0.8.4-main.74a063c4e0",
-    "@dxos/protocols": "0.8.4-main.74a063c4e0",
-    "@dxos/react-client": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui-pickers": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui-stack": "0.8.4-main.74a063c4e0",
-    "@dxos/shell": "0.8.4-main.74a063c4e0",
-    "@dxos/util": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui-form": "0.8.4-main.74a063c4e0"
+    "@dxos/app-framework": "0.8.4-main.765dc60934",
+    "@dxos/app-toolkit": "0.8.4-main.765dc60934",
+    "@dxos/async": "0.8.4-main.765dc60934",
+    "@dxos/cli-util": "0.8.4-main.765dc60934",
+    "@dxos/client": "0.8.4-main.765dc60934",
+    "@dxos/client-protocol": "0.8.4-main.765dc60934",
+    "@dxos/client-services": "0.8.4-main.765dc60934",
+    "@dxos/echo": "0.8.4-main.765dc60934",
+    "@dxos/context": "0.8.4-main.765dc60934",
+    "@dxos/config": "0.8.4-main.765dc60934",
+    "@dxos/compute": "0.8.4-main.765dc60934",
+    "@dxos/effect": "0.8.4-main.765dc60934",
+    "@dxos/invariant": "0.8.4-main.765dc60934",
+    "@dxos/log": "0.8.4-main.765dc60934",
+    "@dxos/plugin-graph": "0.8.4-main.765dc60934",
+    "@dxos/protocols": "0.8.4-main.765dc60934",
+    "@dxos/plugin-observability": "0.8.4-main.765dc60934",
+    "@dxos/react-ui-form": "0.8.4-main.765dc60934",
+    "@dxos/react-ui-pickers": "0.8.4-main.765dc60934",
+    "@dxos/react-client": "0.8.4-main.765dc60934",
+    "@dxos/react-ui-stack": "0.8.4-main.765dc60934",
+    "@dxos/shell": "0.8.4-main.765dc60934",
+    "@dxos/util": "0.8.4-main.765dc60934"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -114,11 +134,11 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui": "0.8.4-main.74a063c4e0",
-    "@dxos/storybook-utils": "0.8.4-main.74a063c4e0",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0"
+    "vite": "^8.0.13",
+    "@dxos/react-ui": "0.8.4-main.765dc60934",
+    "@dxos/plugin-testing": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934",
+    "@dxos/storybook-utils": "0.8.4-main.765dc60934"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -126,10 +146,7 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.74a063c4e0",
-    "@dxos/react-ui": "0.8.4-main.74a063c4e0"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@dxos/react-ui": "0.8.4-main.765dc60934",
+    "@dxos/ui-theme": "0.8.4-main.765dc60934"
   }
 }

package/src/{cli/plugin.ts → ClientPlugin.node.ts}

@@ -19,13 +19,15 @@ export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
   Plugin.addModule((options) => ({
     id: Capability.getModuleTag(Client),
     activatesOn: ActivationEvents.Startup,
-    activatesAfter: [ClientEvents.ClientReady],
+    firesAfterActivation: [ClientEvents.ClientReady],
     activate: () => Client(options),
   })),
   Plugin.addModule({
     activatesOn: ClientEvents.ClientReady,
-    activatesBefore: [AppActivationEvents.SetupSchema],
+    firesBeforeActivation: [AppActivationEvents.SetupSchema],
     activate: SchemaDefs,
   }),
   Plugin.make,
 );
+
+export default ClientPlugin;

package/src/ClientPlugin.test.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ActivationEvents } from '@dxos/app-framework';
+// #plugin resolves to ClientPlugin.node.ts under the source condition used by vitest.
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('ClientPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({})],
+    });
+
+    // The CLI variant activates Client and SchemaDefs on startup.
+    expect(harness.manager.getActive()).toEqual(expect.arrayContaining([moduleId('Client'), moduleId('SchemaDefs')]));
+
+    // Operation handlers are not loaded on startup — SetupOperationHandler fires lazily when an operation is invoked.
+    await harness.fire(ActivationEvents.SetupOperationHandler);
+    expect(harness.manager.getActive()).toContain(moduleId('OperationHandler'));
+  });
+});

package/src/ClientPlugin.ts

@@ -16,11 +16,10 @@ import {
   SchemaDefs,
 } from '#capabilities';
 import { meta } from '#meta';
+import { translations } from '#translations';
 import { ClientEvents } from '#types';
 import { type ClientPluginOptions } from '#types';
 
-import { translations } from './translations';
-
 export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addNavigationHandlerModule(({ invitationProp }) => ({
@@ -33,18 +32,18 @@ export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
     return {
       id: Capability.getModuleTag(Client),
       activatesOn: ActivationEvent.oneOf(ActivationEvents.Startup, AppActivationEvents.SetupAppGraph),
-      activatesAfter: [ClientEvents.ClientReady],
+      firesAfterActivation: [ClientEvents.ClientReady],
       activate: () => Client(options),
     };
   }),
   Plugin.addModule({
     activatesOn: ClientEvents.ClientReady,
-    activatesBefore: [AppActivationEvents.SetupSchema],
+    firesBeforeActivation: [AppActivationEvents.SetupSchema],
     activate: SchemaDefs,
   }),
   Plugin.addModule({
     activatesOn: ClientEvents.ClientReady,
-    activatesBefore: [ClientEvents.SetupMigration],
+    firesBeforeActivation: [ClientEvents.SetupMigration],
     activate: Migrations,
   }),
   Plugin.addModule(
@@ -69,3 +68,5 @@ export const ClientPlugin = Plugin.define<ClientPluginOptions>(meta).pipe(
   ),
   Plugin.make,
 );
+
+export default ClientPlugin;

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

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { CreateAtom, GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 import { ConnectionState } from '@dxos/react-client/mesh';
 

package/src/capabilities/index.ts

@@ -3,7 +3,7 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+import { OperationHandlerSet } from '@dxos/compute';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
 export const Client = Capability.lazy('Client', () => import('./client'));

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

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { log } from '@dxos/log';
-import { Operation } from '@dxos/operation';
 
 import { ClientOperation } from '../../operations';
 

package/src/capabilities/node.ts

@@ -3,7 +3,7 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+import { OperationHandlerSet } from '@dxos/compute';
 
 export const Client = Capability.lazy('Client', () => import('./client'));
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(

package/src/capabilities/operation-handler.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 import { ClientOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -3,7 +3,7 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
@@ -32,39 +32,36 @@ export default Capability.makeModule(
     return Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: Account.Profile,
-        role: 'article',
-        filter: AppSurface.literalSection(Account.Profile),
+        filter: AppSurface.literal(AppSurface.Article, Account.Profile),
         component: () => <ProfileContainer />,
       }),
       Surface.create({
         id: Account.Devices,
-        role: 'article',
-        filter: AppSurface.literalSection(Account.Devices),
+        filter: AppSurface.literal(AppSurface.Article, Account.Devices),
         component: () => <DevicesContainer createInvitationUrl={createInvitationUrl} />,
       }),
       Surface.create({
         id: Account.Security,
-        role: 'article',
-        filter: AppSurface.literalSection(Account.Security),
+        filter: AppSurface.literal(AppSurface.Article, Account.Security),
         component: () => <RecoveryCredentialsContainer />,
       }),
       Surface.create({
         id: JOIN_DIALOG,
-        role: 'dialog',
-        filter: AppSurface.componentDialog(JOIN_DIALOG),
-        component: ({ data }: { data: any }) => <JoinDialog {...data.props} />,
+        filter: AppSurface.component<ComponentProps<typeof JoinDialog>>(AppSurface.Dialog, JOIN_DIALOG),
+        component: ({ data }) => <JoinDialog {...data.props} />,
       }),
       Surface.create({
         id: RECOVERY_CODE_DIALOG,
-        role: 'dialog',
-        filter: AppSurface.componentDialog(RECOVERY_CODE_DIALOG),
-        component: ({ data }: { data: any }) => <RecoveryCodeDialog {...data.props} />,
+        filter: AppSurface.component<ComponentProps<typeof RecoveryCodeDialog>>(
+          AppSurface.Dialog,
+          RECOVERY_CODE_DIALOG,
+        ),
+        component: ({ data }) => <RecoveryCodeDialog {...data.props} />,
       }),
       Surface.create({
         id: RESET_DIALOG,
-        role: 'dialog',
-        filter: AppSurface.componentDialog(RESET_DIALOG),
-        component: ({ data }: { data: any }) => (
+        filter: AppSurface.component<Pick<ComponentProps<typeof ResetDialog>, 'mode'>>(AppSurface.Dialog, RESET_DIALOG),
+        component: ({ data }) => (
           <ResetDialog {...data.props} onReset={onReset} capabilityManager={capabilityManager} />
         ),
       }),

package/src/capabilities/schema-defs.ts

@@ -6,7 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { type Type } from '@dxos/echo';
+import { Type } from '@dxos/echo';
+import { log } from '@dxos/log';
 
 import { ClientCapabilities } from '#types';
 
@@ -17,16 +18,35 @@ export default Capability.makeModule(
     const schemasAtom = yield* Capability.atom(AppCapabilities.Schema);
 
     // TODO(wittjosiah): Unregister schemas when they are disabled.
-    let previous: Type.AnyEntity[] = [];
+    let previousDxns = new Set<string>();
     const cancel = registry.subscribe(
       schemasAtom,
-      async (_schemas: any[]) => {
-        // TODO(wittjosiah): This doesn't seem to de-dupe schemas as expected.
-        const schemas = Array.from(new Set(_schemas.flat())) as Type.AnyEntity[];
-        // TODO(wittjosiah): Filter out schemas which the client has already registered.
-        const newSchemas = schemas.filter((schema) => !previous.includes(schema));
-        previous = schemas;
-        await client.addTypes(newSchemas);
+      async (schemas) => {
+        const seenSchemaDxns = new Set<string>();
+        const batch: { schema: Type.AnyEntity; dxnKey: string }[] = [];
+        for (const schema of schemas.flat()) {
+          const dxn = Type.getDXN(schema);
+          if (!dxn) {
+            log.warn('skipping schema without dxn');
+            continue;
+          }
+
+          const key = dxn.toString();
+          if (seenSchemaDxns.has(key)) {
+            log('skipping duplicate schema for echo registration', { dxn: key });
+            continue;
+          }
+
+          seenSchemaDxns.add(key);
+          batch.push({ schema, dxnKey: key });
+        }
+
+        const toRegister = batch.filter(({ dxnKey }) => !previousDxns.has(dxnKey));
+
+        await client.addTypes(toRegister.map(({ schema }) => schema));
+        for (const { dxnKey } of toRegister) {
+          previousDxns.add(dxnKey);
+        }
       },
       { immediate: true },
     );

package/src/{cli/commands → commands}/halo/create/create.test.ts

@@ -12,12 +12,17 @@ import { fromPlugins } from '@dxos/app-framework/testing';
 import { TestConsole, TestLayer } from '@dxos/cli-util/testing';
 import { ClientService } from '@dxos/client';
 import { runAndForwardErrors } from '@dxos/effect';
-import { ObservabilityPlugin } from '@dxos/plugin-observability/cli';
+import { ObservabilityPlugin } from '@dxos/plugin-observability/plugin';
+
+import { ClientPlugin } from '#plugin';
 
-import { ClientPlugin } from '../../../plugin';
 import { handler } from './create';
 
-const layer = Layer.merge(TestLayer, fromPlugins([ClientPlugin({}), OperationPlugin(), ObservabilityPlugin()]));
+// TODO(wittjosiah): Align browser and node variant option types for ObservabilityPlugin.
+const layer = Layer.merge(
+  TestLayer,
+  fromPlugins([ClientPlugin({}), OperationPlugin(), ObservabilityPlugin({} as any)]),
+);
 
 // TODO(wittjosiah): Fix these tests.
 describe.skip('halo create', () => {

package/src/{cli/commands → commands}/halo/create/create.ts

@@ -9,6 +9,7 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capabilities, Plugin } from '@dxos/app-framework';
+import { PERSONAL_SPACE_TAG } from '@dxos/app-toolkit';
 import { CommandConfig, flushAndSync, spaceLayer } from '@dxos/cli-util';
 import { print } from '@dxos/cli-util';
 import { ClientService } from '@dxos/client';
@@ -43,13 +44,11 @@ export const handler = Effect.fn(function* ({
   }
 
   // Create personal space for the CLI identity.
-  const { PERSONAL_SPACE_TAG, setPersonalSpace } = yield* Effect.tryPromise(() => import('@dxos/app-toolkit'));
   const space = yield* Effect.promise(() =>
     client.spaces.create({}, { tags: [PERSONAL_SPACE_TAG], membershipPolicy: MembershipPolicy.LOCKED }),
   );
   yield* Effect.promise(() => space.waitUntilReady());
   yield* Effect.promise(() => space.internal.setEdgeReplicationPreference(EdgeReplicationSetting.ENABLED));
-  setPersonalSpace(space);
   yield* flushAndSync({ indexes: true }).pipe(Effect.provide(spaceLayer(Option.some(space.id))));
 
   if (json) {

package/src/containers/DevicesContainer/DevicesContainer.stories.tsx

@@ -11,9 +11,9 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { translations as shellTranslations } from '@dxos/shell/react';
 
 import { initializeIdentity } from '#testing';
+import { translations } from '#translations';
 
 import { ClientPlugin } from '../../ClientPlugin';
-import { translations } from '../../translations';
 import { DevicesContainer } from './DevicesContainer';
 
 const meta = {

package/src/containers/DevicesContainer/DevicesContainer.tsx

@@ -13,7 +13,7 @@ import { type CancellableInvitationObservable, Invitation, InvitationEncoder } f
 import { useNetworkStatus } from '@dxos/react-client/mesh';
 import { Button, Clipboard, Icon, IconButton, List, useId, useTranslation } from '@dxos/react-ui';
 import { Settings } from '@dxos/react-ui-form';
-import { AuthCode, Centered, DeviceListItem, Emoji, Viewport, translationKey } from '@dxos/shell/react';
+import { AuthCode, Centered, DeviceListItem, Emoji, Viewport } from '@dxos/shell/react';
 import { osTranslations } from '@dxos/ui-theme';
 import { hexToEmoji } from '@dxos/util';
 
@@ -25,7 +25,7 @@ export type DevicesContainerProps = {
 };
 
 export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const devices = useDevices();
   const { swarm: connectionState } = useNetworkStatus();
@@ -38,7 +38,7 @@ export const DevicesContainer = ({ createInvitationUrl }: DevicesContainerProps)
   );
 
   const handleJoinNewIdentity = useCallback(
-    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join new identity' }),
+    () => invokePromise(ClientOperation.ResetStorage, { mode: 'join-new-identity' }),
     [invokePromise],
   );
 
@@ -218,7 +218,7 @@ const InvitationQR = ({ id, url, onCancel }: { id: string; url: string; onCancel
       <p className='text-description'>{t('qr-code.description', { ns: meta.id })}</p>
       <div role='group' className='grid grid-cols-[1fr_min-content]'>
         <div className='flex justify-center py-4'>
-          <div role='none' className='w-full md:max-w-80 aspect-square relative text-description'>
+          <div className='w-full md:max-w-80 aspect-square relative text-description'>
             <QR
               rounding={100}
               backgroundColor='transparent'

package/src/containers/JoinDialog/JoinDialog.stories.tsx

@@ -9,8 +9,9 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Dialog } from '@dxos/react-ui';
 
+import { translations } from '#translations';
+
 import { ClientPlugin } from '../../ClientPlugin';
-import { translations } from '../../translations';
 import { JoinDialog } from './JoinDialog';
 
 const DefaultStory = () => (

package/src/containers/JoinDialog/JoinDialog.tsx

@@ -6,7 +6,7 @@ import React, { useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';

package/src/containers/ProfileContainer/ProfileContainer.stories.tsx

@@ -7,7 +7,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { ProfileContainer } from './ProfileContainer';
 
 const meta = {

package/src/containers/ProfileContainer/ProfileContainer.tsx

@@ -139,7 +139,7 @@ export const ProfileContainer = () => {
 
         return (
           <Settings.Item title={label} description={t('hue.description')}>
-            <div role='none' className='flex justify-self-end'>
+            <div className='flex justify-self-end'>
               <HuePicker value={getValue()} onChange={handleChange} onReset={handleHueReset} />
             </div>
           </Settings.Item>
@@ -165,7 +165,7 @@ export const ProfileContainer = () => {
       <Settings.Viewport>
         <Settings.Section title={t('profile.label')} description={t('profile.description')}>
           <Form.Root schema={UserProfile} values={values} fieldMap={fieldMap} onValuesChanged={handleChange}>
-            <Form.Content>
+            <Form.Content classNames='gap-form-gap'>
               <Form.FieldSet />
             </Form.Content>
           </Form.Root>

package/src/containers/RecoveryCodeDialog/RecoveryCodeDialog.stories.tsx

@@ -10,7 +10,8 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { AlertDialog, useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { RecoveryCodeDialog } from './RecoveryCodeDialog';
 
 const DefaultStory = () => {