@dxos/plugin-deck 0.8.4-main.70d3990 → 0.8.4-main.7996785055

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.4-main.70d3990",
+  "version": "0.8.4-main.7996785055",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -14,15 +18,25 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/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"
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/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"
       ]
@@ -33,59 +47,65 @@
     "src"
   ],
   "dependencies": {
-    "@effect/ai": "0.29.1",
-    "@effect/experimental": "0.56.0",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
+    "@effect-atom/atom": "^0.5.1",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/ai": "0.33.2",
+    "@effect/experimental": "0.58.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
     "immer": "^10.1.1",
-    "@dxos/ai": "0.8.4-main.70d3990",
-    "@dxos/assistant": "0.8.4-main.70d3990",
-    "@dxos/blueprints": "0.8.4-main.70d3990",
-    "@dxos/async": "0.8.4-main.70d3990",
-    "@dxos/debug": "0.8.4-main.70d3990",
-    "@dxos/echo": "0.8.4-main.70d3990",
-    "@dxos/echo-signals": "0.8.4-main.70d3990",
-    "@dxos/invariant": "0.8.4-main.70d3990",
-    "@dxos/keyboard": "0.8.4-main.70d3990",
-    "@dxos/live-object": "0.8.4-main.70d3990",
-    "@dxos/local-storage": "0.8.4-main.70d3990",
-    "@dxos/app-framework": "0.8.4-main.70d3990",
-    "@dxos/log": "0.8.4-main.70d3990",
-    "@dxos/plugin-observability": "0.8.4-main.70d3990",
-    "@dxos/plugin-graph": "0.8.4-main.70d3990",
-    "@dxos/plugin-attention": "0.8.4-main.70d3990",
-    "@dxos/react-client": "0.8.4-main.70d3990",
-    "@dxos/plugin-theme": "0.8.4-main.70d3990",
-    "@dxos/react-ui-attention": "0.8.4-main.70d3990",
-    "@dxos/react-ui-form": "0.8.4-main.70d3990",
-    "@dxos/react-ui-stack": "0.8.4-main.70d3990",
-    "@dxos/react-ui-tabs": "0.8.4-main.70d3990",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.70d3990",
-    "@dxos/util": "0.8.4-main.70d3990"
+    "@dxos/ai": "0.8.4-main.7996785055",
+    "@dxos/app-framework": "0.8.4-main.7996785055",
+    "@dxos/assistant": "0.8.4-main.7996785055",
+    "@dxos/async": "0.8.4-main.7996785055",
+    "@dxos/blueprints": "0.8.4-main.7996785055",
+    "@dxos/debug": "0.8.4-main.7996785055",
+    "@dxos/effect": "0.8.4-main.7996785055",
+    "@dxos/errors": "0.8.4-main.7996785055",
+    "@dxos/echo": "0.8.4-main.7996785055",
+    "@dxos/invariant": "0.8.4-main.7996785055",
+    "@dxos/keyboard": "0.8.4-main.7996785055",
+    "@dxos/operation": "0.8.4-main.7996785055",
+    "@dxos/app-toolkit": "0.8.4-main.7996785055",
+    "@dxos/plugin-attention": "0.8.4-main.7996785055",
+    "@dxos/plugin-graph": "0.8.4-main.7996785055",
+    "@dxos/plugin-observability": "0.8.4-main.7996785055",
+    "@dxos/log": "0.8.4-main.7996785055",
+    "@dxos/plugin-theme": "0.8.4-main.7996785055",
+    "@dxos/react-client": "0.8.4-main.7996785055",
+    "@dxos/react-ui-attention": "0.8.4-main.7996785055",
+    "@dxos/react-error-boundary": "0.8.4-main.7996785055",
+    "@dxos/react-ui-mosaic": "0.8.4-main.7996785055",
+    "@dxos/react-ui-menu": "0.8.4-main.7996785055",
+    "@dxos/react-ui-form": "0.8.4-main.7996785055",
+    "@dxos/react-ui-tabs": "0.8.4-main.7996785055",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.7996785055",
+    "@dxos/ui-types": "0.8.4-main.7996785055",
+    "@dxos/react-ui-stack": "0.8.4-main.7996785055",
+    "@dxos/util": "0.8.4-main.7996785055"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.3.4",
-    "@effect/platform": "0.92.1",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.70d3990",
-    "@dxos/storybook-utils": "0.8.4-main.70d3990",
-    "@dxos/react-ui-theme": "0.8.4-main.70d3990"
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/plugin-testing": "0.8.4-main.7996785055",
+    "@dxos/react-ui": "0.8.4-main.7996785055",
+    "@dxos/storybook-utils": "0.8.4-main.7996785055",
+    "@dxos/ui-theme": "0.8.4-main.7996785055"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.3.4",
-    "@effect/platform": "^0.80.12",
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.70d3990",
-    "@dxos/react-ui-theme": "0.8.4-main.70d3990"
+    "@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.7996785055",
+    "@dxos/react-ui": "0.8.4-main.7996785055"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.ts

@@ -4,7 +4,8 @@
 
 import { setAutoFreeze } from 'immer';
 
-import { Capabilities, Events, allOf, contributes, defineModule, definePlugin, oneOf } from '@dxos/app-framework';
+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 {
@@ -12,80 +13,53 @@ import {
   CheckAppScheme,
   DeckSettings,
   DeckState,
-  LayoutIntentResolver,
+  OperationHandler,
   ReactRoot,
   ReactSurface,
-  Toolkit,
   UrlHandler,
 } from './capabilities';
-import { DeckEvents } from './events';
 import { meta } from './meta';
 import { translations } from './translations';
+import { DeckEvents } from './types';
 
 // 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.
 setAutoFreeze(false);
 
-export const DeckPlugin = definePlugin(meta, () => [
-  defineModule({
-    id: `${meta.id}/module/check-app-scheme`,
-    activatesOn: Events.SettingsReady,
-    activate: CheckAppScheme,
-  }),
-  defineModule({
-    id: `${meta.id}/module/settings`,
-    activatesOn: Events.SetupSettings,
+export const DeckPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations: [...translations, ...stackTranslations] }),
+  Plugin.addModule({
+    activatesOn: AppActivationEvents.SetupSettings,
+    activatesAfter: [DeckEvents.SettingsReady],
     activate: DeckSettings,
   }),
-  defineModule({
-    id: `${meta.id}/module/layout`,
+  Plugin.addModule({
+    activatesOn: DeckEvents.SettingsReady,
+    activate: CheckAppScheme,
+  }),
+  Plugin.addModule({
     // TODO(wittjosiah): Does not integrate with settings store.
     //   Should this be a different event?
     //   Should settings store be renamed to be more generic?
-    activatesOn: oneOf(Events.SetupSettings, Events.SetupAppGraph),
-    activatesAfter: [Events.LayoutReady, DeckEvents.StateReady],
+    activatesOn: ActivationEvent.oneOf(AppActivationEvents.SetupSettings, AppActivationEvents.SetupAppGraph),
+    activatesAfter: [AppActivationEvents.LayoutReady, DeckEvents.StateReady],
     activate: DeckState,
   }),
-  defineModule({
-    id: `${meta.id}/module/translations`,
-    activatesOn: Events.SetupTranslations,
-    activate: () => contributes(Capabilities.Translations, [...translations, ...stackTranslations]),
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-root`,
-    activatesOn: Events.Startup,
+  Plugin.addModule({
+    activatesOn: ActivationEvents.Startup,
     activate: ReactRoot,
   }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface,
-  }),
-  defineModule({
-    id: `${meta.id}/module/layout-intent-resolver`,
-    activatesOn: Events.SetupIntentResolver,
-    activate: LayoutIntentResolver,
-  }),
-  defineModule({
-    id: `${meta.id}/module/app-graph-builder`,
-    activatesOn: Events.SetupAppGraph,
-    activate: AppGraphBuilder,
-  }),
-  // defineModule({
-  //   id: `${meta.id}/module/tools`,
+  // Plugin.addModule({
   //   activatesOn: Events.SetupArtifactDefinition,
   //   activate: Tools,
   // }),
-  defineModule({
-    id: `${meta.id}/module/toolkit`,
-    // TODO(wittjosiah): Shouldn't use the startup event.
-    activatesOn: Events.Startup,
-    activate: Toolkit,
-  }),
-  defineModule({
-    id: `${meta.id}/module/url`,
-    activatesOn: allOf(Events.DispatcherReady, DeckEvents.StateReady),
+  Plugin.addModule({
+    activatesOn: ActivationEvent.allOf(ActivationEvents.OperationInvokerReady, DeckEvents.StateReady),
     activate: UrlHandler,
   }),
-]);
+  Plugin.make,
+);

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

@@ -0,0 +1,119 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
+
+import { meta } from '../../meta';
+import { DeckCapabilities } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const extensions = yield* GraphBuilder.createExtension({
+      id: meta.id,
+      match: NodeMatcher.whenRoot,
+      actions: (_node, get) =>
+        Effect.gen(function* () {
+          // NOTE(Zan): This is currently disabled.
+          // TODO(Zan): Fullscreen needs to know the active node and provide that to the layout part.
+          // const _fullscreen = {
+          //   id: `${LayoutAction.UpdateLayout._tag}/fullscreen`,
+          //   data: async () => {
+          //     const { dispatchPromise: dispatch } = context.get(Capabilities.IntentDispatcher);
+          //     await dispatch(
+          //       createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'fullscreen' } }),
+          //     );
+          //   },
+          //   properties: {
+          //     label: ['toggle fullscreen label', { ns: meta.id }],
+          //     icon: 'ph--arrows-out--regular',
+          //     keyBinding: {
+          //       macos: 'ctrl+meta+f',
+          //       windows: 'shift+ctrl+f',
+          //     },
+          //   },
+          // };
+
+          const closeCurrent = {
+            id: `${LayoutOperation.Close.meta.key}.current`,
+            data: Effect.fnUntraced(function* () {
+              const attention = yield* Capability.get(AttentionCapabilities.Attention);
+              const attended = attention.getCurrent().at(-1);
+              if (attended) {
+                yield* Operation.invoke(LayoutOperation.Close, { subject: [attended] });
+              }
+            }),
+            properties: {
+              label: ['close current label', { ns: meta.id }],
+              icon: 'ph--x--regular',
+            },
+          };
+
+          const closeOthers = {
+            id: `${LayoutOperation.Close.meta.key}.others`,
+            data: Effect.fnUntraced(function* () {
+              const attention = yield* Capability.get(AttentionCapabilities.Attention);
+              const deck = yield* DeckCapabilities.getDeck();
+              const attended = attention.getCurrent().at(-1);
+              const ids = deck.active.filter((id: string) => id !== attended) ?? [];
+              yield* Operation.invoke(LayoutOperation.Close, { subject: ids });
+            }),
+            properties: {
+              label: ['close others label', { ns: meta.id }],
+              icon: 'ph--x-square--regular',
+            },
+          };
+
+          const closeAll = {
+            id: `${LayoutOperation.Close.meta.key}.all`,
+            data: Effect.fnUntraced(function* () {
+              const deck = yield* DeckCapabilities.getDeck();
+              yield* Operation.invoke(LayoutOperation.Close, { subject: deck.active });
+            }),
+            properties: {
+              label: ['close all label', { ns: meta.id }],
+              icon: 'ph--x-circle--regular',
+            },
+          };
+
+          const state = get(yield* Capability.get(DeckCapabilities.State));
+          const deck = state.decks[state.activeDeck];
+
+          const toggleSidebar = {
+            id: `${LayoutOperation.UpdateSidebar.meta.key}.nav`,
+            data: Effect.fnUntraced(function* () {
+              yield* Capabilities.updateAtomValue(DeckCapabilities.State, (s) => ({
+                ...s,
+                sidebarState: s.sidebarState === 'expanded' ? ('collapsed' as const) : ('expanded' as const),
+              }));
+            }),
+            properties: {
+              label: [
+                state.sidebarState === 'expanded'
+                  ? 'collapse navigation sidebar label'
+                  : 'open navigation sidebar label',
+                { ns: meta.id },
+              ],
+              icon: 'ph--sidebar--regular',
+              keyBinding: {
+                macos: "meta+'",
+              },
+              disposition: 'pin-end',
+              position: 'hoist',
+              l0Breakpoint: 'lg',
+            },
+          };
+
+          return !deck?.solo ? [closeCurrent, closeOthers, closeAll, toggleSidebar] : [toggleSidebar];
+        }),
+    });
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));

package/src/capabilities/check-app-scheme/check-app-scheme.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { isTauri } from '@dxos/util';
+
+import { DeckCapabilities } from '../../types';
+
+const APP_SCHEME = 'composer://';
+
+/**
+ * Attempts to redirect from the web app to the native desktop app using a custom URL scheme.
+ * Creates a hidden iframe that navigates to the custom scheme URL (e.g., composer://workspace/123).
+ * If the native app is installed and handles the scheme, the user will be redirected.
+ * The iframe is automatically removed after 3 seconds or when the page is hidden.
+ */
+// TODO(mjamesderocher): Factor out as part of NavigationPlugin.
+const checkAppScheme = (url: string) => {
+  const iframe = document.createElement('iframe');
+  iframe.style.display = 'none';
+  document.body.appendChild(iframe);
+
+  iframe.src = url + window.location.pathname.replace(/^\/+/, '') + window.location.search;
+
+  const timer = setTimeout(() => {
+    document.body.removeChild(iframe);
+  }, 3000);
+
+  window.addEventListener('pagehide', (event) => {
+    clearTimeout(timer);
+    document.body.removeChild(iframe);
+  });
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const settings = yield* Capabilities.getAtomValue(DeckCapabilities.Settings);
+    if (!isTauri() && settings?.enableNativeRedirect) {
+      checkAppScheme(APP_SCHEME);
+    }
+  }),
+);

package/src/capabilities/check-app-scheme/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const CheckAppScheme = Capability.lazy('CheckAppScheme', () => import('./check-app-scheme'));

package/src/capabilities/index.ts

@@ -2,18 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
-export const CheckAppScheme = lazy(() => import('./check-app-scheme'));
-export const DeckSettings = lazy(() => import('./settings'));
-export const DeckState = lazy(() => import('./state'));
-export const LayoutIntentResolver = lazy(() => import('./intent-resolver'));
-export const ReactRoot = lazy(() => import('./react-root'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-// export const Tools = lazy(() => import('./tools'));
-export const Toolkit = lazy(() => import('./toolkit'));
-export const UrlHandler = lazy(() => import('./url-handler'));
-
-export * from './capabilities';
+export * from './app-graph-builder';
+export * from './check-app-scheme';
+export * from './operation-handler';
+export * from './react-root';
+export * from './react-surface';
+export * from './settings';
 export * from './state';
+// export * from './tools';
+export * from './url-handler';

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

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

package/src/capabilities/operation-handler/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 { DeckOperationHandlerSet } from '../../operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, DeckOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-root/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));

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

@@ -0,0 +1,47 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+
+import { DeckLayout } from '../../components';
+import { useDeckState } from '../../hooks';
+import { meta } from '../../meta';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactRoot, {
+      id: meta.id,
+      root: () => {
+        const { state, updateEphemeral } = useDeckState();
+
+        const handleDismissToast = useCallback(
+          (id: string) => {
+            const index = state.toasts.findIndex((toast) => toast.id === id);
+            if (index !== -1) {
+              // Allow time for the toast to animate out.
+              // TODO(burdon): Factor out and unregister timeout.
+              setTimeout(() => {
+                updateEphemeral((s) => {
+                  const toastToRemove = s.toasts[index];
+                  const newCurrentUndoId = toastToRemove?.id === s.currentUndoId ? undefined : s.currentUndoId;
+                  return {
+                    ...s,
+                    currentUndoId: newCurrentUndoId,
+                    toasts: s.toasts.filter((_, i) => i !== index),
+                  };
+                });
+              }, 1_000);
+            }
+          },
+          [state.toasts, updateEphemeral],
+        );
+
+        return <DeckLayout onDismissToast={handleDismissToast} />;
+      },
+    }),
+  ),
+);

package/src/capabilities/react-surface/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

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

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useSettingsState } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { Banner, DeckSettings } from '../../containers';
+import { meta } from '../../meta';
+import { type DeckSettingsProps } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: `${meta.id}.plugin-settings`,
+        role: 'article',
+        filter: (data): data is { subject: AppCapabilities.Settings } =>
+          AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<DeckSettingsProps>(subject.atom);
+          return <DeckSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}.banner`,
+        role: 'banner',
+        component: ({ data }: { data: { variant?: 'topbar' | 'sidebar' } }) => {
+          return <Banner variant={data.variant} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/capabilities/settings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const DeckSettings = Capability.lazy('DeckSettings', () => import('./settings'));