@dxos/plugin-deck 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,12 +13,18 @@
   "sideEffects": true,
   "type": "module",
   "imports": {
+    "#plugin": {
+      "browser": "./src/DeckPlugin.ts",
+      "node": "./src/DeckPlugin.node.ts",
+      "default": "./src/DeckPlugin.ts"
+    },
     "#capabilities": "./src/capabilities/index.ts",
     "#components": "./src/components/index.ts",
     "#containers": "./src/containers/index.ts",
     "#hooks": "./src/hooks/index.ts",
     "#meta": "./src/meta.ts",
     "#operations": "./src/operations/index.ts",
+    "#translations": "./src/translations.ts",
     "#types": "./src/types/index.ts"
   },
   "exports": {
@@ -33,6 +39,12 @@
       "browser": "./dist/lib/browser/operations/index.mjs",
       "node": "./dist/lib/node-esm/operations/index.mjs"
     },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
@@ -41,16 +53,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "operations": [
-        "dist/types/src/operations/index.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -64,38 +66,37 @@
     "@radix-ui/react-context": "1.1.1",
     "@tauri-apps/plugin-deep-link": "^2.2.0",
     "immer": "^10.1.1",
-    "@dxos/ai": "0.8.4-main.9be5663bfe",
-    "@dxos/app-framework": "0.8.4-main.9be5663bfe",
-    "@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
-    "@dxos/app-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/async": "0.8.4-main.9be5663bfe",
-    "@dxos/assistant": "0.8.4-main.9be5663bfe",
-    "@dxos/blueprints": "0.8.4-main.9be5663bfe",
-    "@dxos/context": "0.8.4-main.9be5663bfe",
-    "@dxos/debug": "0.8.4-main.9be5663bfe",
-    "@dxos/effect": "0.8.4-main.9be5663bfe",
-    "@dxos/errors": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/keyboard": "0.8.4-main.9be5663bfe",
-    "@dxos/operation": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-client": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-observability": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/react-error-boundary": "0.8.4-main.9be5663bfe",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-form": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-tabs": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-types": "0.8.4-main.9be5663bfe"
+    "@dxos/ai": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/async": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-toolkit": "0.8.4-main.abd8ff62ef",
+    "@dxos/compute": "0.8.4-main.abd8ff62ef",
+    "@dxos/assistant": "0.8.4-main.abd8ff62ef",
+    "@dxos/context": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/debug": "0.8.4-main.abd8ff62ef",
+    "@dxos/effect": "0.8.4-main.abd8ff62ef",
+    "@dxos/errors": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/keyboard": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-observability": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-error-boundary": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-form": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-stack": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-types": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-tabs": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -105,16 +106,16 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.9be5663bfe",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-hooks": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9be5663bfe",
-    "@dxos/schema": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/types": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-hooks": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/schema": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/types": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -122,8 +123,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.node.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+import { AppGraphBuilder, OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+
+export const DeckPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  Plugin.make,
+);
+
+export default DeckPlugin;

package/src/DeckPlugin.test.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ActivationEvents } from '@dxos/app-framework';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { DeckPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('DeckPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [DeckPlugin()],
+    });
+
+    expect(harness.manager.getActive()).toContain(moduleId('AppGraphBuilder'));
+
+    await harness.fire(ActivationEvents.SetupOperationHandler);
+    expect(harness.manager.getActive()).toContain(moduleId('OperationHandler'));
+  });
+});

package/src/DeckPlugin.ts

@@ -6,7 +6,7 @@ import { setAutoFreeze } from 'immer';
 
 import { ActivationEvent, ActivationEvents, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
-import { translations as stackTranslations } from '@dxos/react-ui-stack';
+import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
 
 import {
   AppGraphBuilder,
@@ -19,10 +19,9 @@ import {
   UrlHandler,
 } from '#capabilities';
 import { meta } from '#meta';
+import { translations } from '#translations';
 import { DeckEvents } from '#types';
 
-import { translations } from './translations';
-
 // NOTE(Zan): When producing values with immer, we shouldn't auto-freeze them because
 //   our signal implementation needs to add some hidden properties to the produced values.
 // TODO(Zan): Move this to a more global location if we use immer more broadly.
@@ -35,7 +34,7 @@ export const DeckPlugin = Plugin.define(meta).pipe(
   AppPlugin.addTranslationsModule({ translations: [...translations, ...stackTranslations] }),
   Plugin.addModule({
     activatesOn: AppActivationEvents.SetupSettings,
-    activatesAfter: [DeckEvents.SettingsReady],
+    firesAfterActivation: [DeckEvents.SettingsReady],
     activate: DeckSettings,
   }),
   Plugin.addModule({
@@ -47,7 +46,7 @@ export const DeckPlugin = Plugin.define(meta).pipe(
     //   Should this be a different event?
     //   Should settings store be renamed to be more generic?
     activatesOn: ActivationEvent.oneOf(AppActivationEvents.SetupSettings, AppActivationEvents.SetupAppGraph),
-    activatesAfter: [AppActivationEvents.LayoutReady, DeckEvents.StateReady],
+    firesAfterActivation: [AppActivationEvents.LayoutReady, DeckEvents.StateReady],
     activate: DeckState,
   }),
   Plugin.addModule({
@@ -64,3 +63,5 @@ export const DeckPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default DeckPlugin;

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

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities, AppNode, LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { AttentionCapabilities } from '@dxos/plugin-attention/types';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 
@@ -112,7 +112,7 @@ export default Capability.makeModule(
                   macos: "meta+'",
                 },
                 disposition: 'pin-end',
-                position: 'hoist',
+                position: 'fallback',
                 l0Breakpoint: 'lg',
               },
             };

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 CheckAppScheme = Capability.lazy('CheckAppScheme', () => import('./check-app-scheme'));

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 { DeckOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -19,8 +19,7 @@ export default Capability.makeModule(() =>
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: 'plugin-settings',
-        role: 'article',
-        filter: AppSurface.settingsArticle(meta.id),
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
         component: ({ data: { subject } }) => {
           const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
           return <DeckSettings settings={settings} onSettingsChange={updateSettings} />;

package/src/capabilities/settings.ts

@@ -20,7 +20,7 @@ export default Capability.makeModule(() =>
         showHints: false,
         enableDeck: false,
         enableStatusbar: false,
-        enableNativeRedirect: !import.meta.env.DEV,
+        enableNativeRedirect: false,
         encapsulatedPlanks: false,
       }),
     });

package/src/capabilities/tools.ts

@@ -16,11 +16,11 @@ import {
   createIntent,
 } from '@dxos/app-framework';
 import { type OperationInvoker } from '@dxos/app-framework/plugin-operation/invoker';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
 import { trim } from '@dxos/util';
 
 import { meta } from '#meta';
-import { DeckOperation } from '#operations';
 
 // TODO(burdon): Factor out.
 declare global {
@@ -59,8 +59,8 @@ export default Capability.makeModule(() =>
           invariant(invokePromise, 'No operation invoker');
 
           if (part === 'multi') {
-            const { error } = await invokePromise(DeckOperation.ChangeCompanion, {
-              companion: id,
+            const { error } = await invokePromise(LayoutOperation.UpdateCompanion, {
+              subject: id,
             });
             if (error) {
               return ToolResult.Error(error.message);

package/src/capabilities/url-handler.ts

@@ -9,14 +9,15 @@ import {
   AppCapabilities,
   LayoutOperation,
   NOT_FOUND_PATH,
+  expandPath,
   fromUrlPath,
   getWorkspaceFromPath,
   toUrlPath,
 } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { Operation } from '@dxos/operation';
 import { Node } from '@dxos/plugin-graph';
 import { isTauri } from '@dxos/util';
 
@@ -66,6 +67,7 @@ export default Capability.makeModule(
     };
 
     const handleNavigation = Effect.fn(function* (url?: URL) {
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
       const resolvedUrl = url ?? new URL(window.location.href);
       // When native redirect is active, check-app-scheme owns the initial dispatch
       // to prevent one-time tokens from being consumed before the native app can use them.
@@ -119,6 +121,9 @@ export default Capability.makeModule(
         // Multi-mode: restore planks from query params.
         const plankIds = deserializePlanks(resolvedUrl);
         if (plankIds.length > 0) {
+          for (const plankId of plankIds) {
+            expandPath(graph, plankId);
+          }
           updateState((state) => updateActiveDeck(state, { active: plankIds, initialized: true }));
         }
       }

package/src/components/DeckSettings/DeckSettings.stories.tsx

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

package/src/components/DeckSettings/DeckSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { useTranslation } from '@dxos/react-ui';
 import { Settings as SettingsForm } from '@dxos/react-ui-form';
 
 import { meta } from '#meta';
@@ -21,52 +21,13 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsProps)
   return (
     <SettingsForm.Viewport>
       <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
-        <SettingsForm.Item title={t('settings.enable-deck.label')} description={t('settings.enable-deck.description')}>
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.enableDeck}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, enableDeck: checked }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.encapsulated-planks.label')}
-          description={t('settings.encapsulated-planks.description')}
-        >
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.encapsulatedPlanks ?? false}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, encapsulatedPlanks: checked }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.enable-statusbar.label')}
-          description={t('settings.enable-statusbar.description')}
-        >
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.enableStatusbar}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, enableStatusbar: checked }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item title={t('settings.show-hints.label')} description={t('settings.show-hints.description')}>
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.showHints}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, showHints: checked }))}
-          />
-        </SettingsForm.Item>
-        {!isSocket && (
-          <SettingsForm.Item
-            title={t('settings.native-redirect.label')}
-            description={t('settings.native-redirect.description')}
-          >
-            <Input.Switch
-              disabled={!onSettingsChange}
-              checked={settings.enableNativeRedirect}
-              onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, enableNativeRedirect: checked }))}
-            />
-          </SettingsForm.Item>
-        )}
+        <SettingsForm.FieldSet
+          readonly={!onSettingsChange}
+          schema={Settings.Settings}
+          visible={(path) => path !== 'enableNativeRedirect' || !isSocket}
+          values={settings}
+          onValuesChanged={(values) => onSettingsChange?.(() => values)}
+        />
       </SettingsForm.Section>
     </SettingsForm.Viewport>
   );

package/src/components/Matrix/Matrix.stories.tsx

@@ -18,16 +18,16 @@ import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
 import { type MosaicTileProps, Mosaic } from '@dxos/react-ui-mosaic';
 import { StackContext } from '@dxos/react-ui-stack';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 import { Organization, Person } from '@dxos/types';
 
 import { DeckState, OperationHandler } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 
 import { Plank } from '../../containers/Plank';
-import { translations } from '../../translations';
 import { Matrix, type MatrixController, type MatrixRootProps } from './Matrix';
 
 random.seed(123);
@@ -58,13 +58,15 @@ const StoryTile = (props: MosaicTileProps<Obj.Any>) => {
               <p>{Obj.getLabel(props.data)}</p>
             </Toolbar.Root>
           </Panel.Toolbar>
-          <Json.Root data={props.data}>
+          <Syntax.Root data={props.data}>
             <Panel.Content asChild>
-              <Json.Content>
-                <Json.Data />
-              </Json.Content>
+              <Syntax.Content>
+                <Syntax.Viewport>
+                  <Syntax.Code />
+                </Syntax.Viewport>
+              </Syntax.Content>
             </Panel.Content>
-          </Json.Root>
+          </Syntax.Root>
         </Panel.Root>
       </Focus.Item>
     </Mosaic.Tile>
@@ -109,11 +111,13 @@ const TestExtension = Capability.contributes(
       }
 
       return (
-        <Json.Root data={subject}>
-          <Json.Content>
-            <Json.Data />
-          </Json.Content>
-        </Json.Root>
+        <Syntax.Root data={subject}>
+          <Syntax.Content>
+            <Syntax.Viewport>
+              <Syntax.Code />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       );
     },
   }),

package/src/containers/Deck/Deck.stories.tsx

@@ -14,9 +14,9 @@ import { corePlugins } from '@dxos/plugin-testing';
 import { DeckSettings, DeckState } from '#capabilities';
 import { useDeckState } from '#hooks';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 import { DeckCapabilities, getMode } from '#types';
 
-import { translations } from '../../translations';
 import { Deck } from './Deck';
 
 const TestPlugin = Plugin.define(pluginMeta).pipe(

package/src/containers/Deck/DeckViewport.tsx

@@ -31,8 +31,8 @@ import { getMode } from '#types';
 import { layoutAppliesTopbar } from '../../util';
 import { Plank, PlankRootProps, type PlankComponentProps } from '../Plank';
 import {
-  ToggleComplementarySidebarButton as NativeToggleComplementarySidebarButton,
-  ToggleSidebarButton as NativeToggleSidebarButton,
+  ToggleComplementarySidebarButton as NaturalToggleComplementarySidebarButton,
+  ToggleSidebarButton as NaturalToggleSidebarButton,
 } from '../Sidebar';
 import { useDeckContext } from './DeckRoot';
 
@@ -49,7 +49,7 @@ export type DeckViewportProps = PropsWithChildren;
  */
 export const DeckViewport = ({ children }: DeckViewportProps) => {
   const {
-    deck: { active, solo, plankSizing },
+    deck: { active, plankSizing },
     state: { sidebarState, complementarySidebarState },
     settings,
     layoutMode,
@@ -272,9 +272,9 @@ export const DeckMultiMode = () => {
 
 const sidebarToggleStyles = 'h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] bg-deck-surface! lg:hidden';
 
-const ToggleSidebarButton = () => <NativeToggleSidebarButton classNames={mx(sidebarToggleStyles, 'left-2')} />;
+const ToggleSidebarButton = () => <NaturalToggleSidebarButton classNames={mx(sidebarToggleStyles, 'left-2')} />;
 const ToggleComplementarySidebarButton = () => (
-  <NativeToggleComplementarySidebarButton classNames={mx(sidebarToggleStyles, 'right-2')} />
+  <NaturalToggleComplementarySidebarButton classNames={mx(sidebarToggleStyles, 'right-2')} />
 );
 
 const ExitFullscreenButton = ({ onExit }: { onExit: () => void }) => {
@@ -393,8 +393,8 @@ const PlankContainer = memo(
       [invokePromise],
     );
 
-    const handleChangeCompanion = useCallback(
-      (companion: string | null) => invokePromise(DeckOperation.ChangeCompanion, { companion }),
+    const handleUpdateCompanion = useCallback(
+      (companion: string | null) => invokePromise(LayoutOperation.UpdateCompanion, { subject: companion }),
       [invokePromise],
     );
 
@@ -410,7 +410,7 @@ const PlankContainer = memo(
         onAdjust={handleAdjust}
         onResize={handleResize}
         onScrollIntoView={handleScrollIntoView}
-        onChangeCompanion={handleChangeCompanion}
+        onUpdateCompanion={handleUpdateCompanion}
       >
         <Plank.Content solo={part === 'solo'} companion={hasCompanion} encapsulate={!!settings?.encapsulatedPlanks}>
           <Plank.Component
@@ -440,12 +440,12 @@ const PlankContainer = memo(
               primary={node}
               {...(part === 'solo'
                 ? {
-                    part: 'solo-companion',
                     order,
+                    part: 'solo-companion',
                   }
                 : {
-                    part,
                     order: (order ?? 0) + 1,
+                    part,
                   })}
             />
           )}

package/src/containers/DeckLayout/ActiveNode.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
 import { useAttended } from '@dxos/react-ui-attention';
 
@@ -23,7 +23,7 @@ export const ActiveNode = () => {
       {/* TODO(wittjosiah): Weird that this is a surface, feel like it's not really render logic.
             Probably this lives in React-land currently in order to access translations? */}
       <Surface.Surface
-        role='document-title'
+        type={AppSurface.DocumentTitle}
         data={{ subject: activeNode } satisfies AppSurface.DocumentTitleData}
         limit={1}
       />