@dxos/plugin-deck 0.9.0 → 0.9.1-main.c7dcc2e112

package/dx.config.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.deck',
+    name: 'Layout',
+    author: 'DXOS',
+    description: trim`
+      The Deck plugin is the core layout engine for DXOS Composer. It manages the multi-plank
+      workspace (the "deck"), sidebar panels, dialogs, popovers, and toast notifications, giving
+      users a flexible, persistent workspace they can arrange to match their workflow.
+
+      In multi mode, subjects are opened as resizable "planks" arranged side by side. Users can
+      navigate with stack semantics — opening from a pivot truncates planks to the right and
+      appends the new one — or switch to solo or fullscreen mode for focused, distraction-free
+      viewing.
+
+      Layout state (active planks, sidebar visibility, plank sizes, companion pane) is persisted
+      across sessions via KVS/localStorage. URL routing is handled by the plugin so that any
+      workspace configuration can be bookmarked or shared as a deep link.
+
+      All layout changes are expressed through typed LayoutOperations (Open, Close, SetLayoutMode,
+      UpdateSidebar, UpdateDialog, UpdatePopover, etc.) that any plugin in the system can dispatch,
+      keeping the layout logic centralised and easy to extend.
+    `,
+    icon: { key: 'ph--layout--regular' },
+    spec: 'PLUGIN.mdl',
+    tags: ['system'],
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.9.0",
+  "version": "0.9.1-main.c7dcc2e112",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -86,6 +86,7 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
+    "dx.config.ts",
     "src",
     "PLUGIN.mdl"
   ],
@@ -95,33 +96,32 @@
     "@radix-ui/react-context": "1.1.1",
     "@tauri-apps/plugin-deep-link": "^2.4.9",
     "immer": "^10.1.1",
-    "@dxos/app-framework": "0.9.0",
-    "@dxos/async": "0.9.0",
-    "@dxos/app-toolkit": "0.9.0",
-    "@dxos/context": "0.9.0",
-    "@dxos/app-graph": "0.9.0",
-    "@dxos/compute": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/effect": "0.9.0",
-    "@dxos/invariant": "0.9.0",
-    "@dxos/errors": "0.9.0",
-    "@dxos/keyboard": "0.9.0",
-    "@dxos/keys": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/operation": "0.9.0",
-    "@dxos/plugin-attention": "0.9.0",
-    "@dxos/plugin-observability": "0.9.0",
-    "@dxos/plugin-graph": "0.9.0",
-    "@dxos/react-ui-attention": "0.9.0",
-    "@dxos/react-ui-form": "0.9.0",
-    "@dxos/plugin-client": "0.9.0",
-    "@dxos/react-ui-menu": "0.9.0",
-    "@dxos/react-ui-mosaic": "0.9.0",
-    "@dxos/react-ui-tabs": "0.9.0",
-    "@dxos/react-ui-text-tooltip": "0.9.0",
-    "@dxos/react-ui-stack": "0.9.0",
-    "@dxos/ui-types": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
+    "@dxos/app-graph": "0.9.1-main.c7dcc2e112",
+    "@dxos/async": "0.9.1-main.c7dcc2e112",
+    "@dxos/compute": "0.9.1-main.c7dcc2e112",
+    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
+    "@dxos/context": "0.9.1-main.c7dcc2e112",
+    "@dxos/errors": "0.9.1-main.c7dcc2e112",
+    "@dxos/effect": "0.9.1-main.c7dcc2e112",
+    "@dxos/echo": "0.9.1-main.c7dcc2e112",
+    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
+    "@dxos/log": "0.9.1-main.c7dcc2e112",
+    "@dxos/keyboard": "0.9.1-main.c7dcc2e112",
+    "@dxos/keys": "0.9.1-main.c7dcc2e112",
+    "@dxos/operation": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-attention": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-client": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-graph": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
+    "@dxos/plugin-observability": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-stack": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-tabs": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-types": "0.9.1-main.c7dcc2e112",
+    "@dxos/util": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -132,15 +132,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^8.0.16",
-    "@dxos/random": "0.9.0",
-    "@dxos/react-hooks": "0.9.0",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/plugin-testing": "0.9.0",
-    "@dxos/react-ui-syntax-highlighter": "0.9.0",
-    "@dxos/schema": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0",
-    "@dxos/types": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@dxos/plugin-testing": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-hooks": "0.9.1-main.c7dcc2e112",
+    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
+    "@dxos/schema": "0.9.1-main.c7dcc2e112",
+    "@dxos/types": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
+    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
+    "@dxos/random": "0.9.1-main.c7dcc2e112"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -148,8 +148,8 @@
     "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/react-ui": "0.9.0"
+    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
+    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.test.ts

@@ -11,7 +11,7 @@ import { DeckPlugin } from '#plugin';
 
 import { meta } from './meta';
 
-const moduleId = (name: string) => `${meta.id}.module.${name}`;
+const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
 
 describe('DeckPlugin', () => {
   test('modules activate on the expected events', async ({ expect }) => {

package/src/DeckPlugin.ts

@@ -70,7 +70,7 @@ export const DeckPlugin = Plugin.define(meta).pipe(
     activate: NotificationTracker,
   }),
   AppPlugin.addPluginAssetModule({
-    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
   Plugin.make,
 );

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

@@ -57,7 +57,7 @@ export default Capability.makeModule(
                 }
               }),
               properties: {
-                label: ['close-current.label', { ns: meta.id }],
+                label: ['close-current.label', { ns: meta.profile.key }],
                 icon: 'ph--x--regular',
               },
             };
@@ -72,7 +72,7 @@ export default Capability.makeModule(
                 yield* Operation.invoke(LayoutOperation.Close, { subject: ids });
               }),
               properties: {
-                label: ['close-others.label', { ns: meta.id }],
+                label: ['close-others.label', { ns: meta.profile.key }],
                 icon: 'ph--x-square--regular',
               },
             };
@@ -84,7 +84,7 @@ export default Capability.makeModule(
                 yield* Operation.invoke(LayoutOperation.Close, { subject: deck.active });
               }),
               properties: {
-                label: ['close-all.label', { ns: meta.id }],
+                label: ['close-all.label', { ns: meta.profile.key }],
                 icon: 'ph--x-circle--regular',
               },
             };
@@ -105,7 +105,7 @@ export default Capability.makeModule(
                   state.sidebarState === 'expanded'
                     ? 'collapse-navigation-sidebar.label'
                     : 'open-navigation-sidebar.label',
-                  { ns: meta.id },
+                  { ns: meta.profile.key },
                 ],
                 icon: 'ph--sidebar--regular',
                 keyBinding: {

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

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { APP_SCHEME, AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, NativePasskey } from '@dxos/app-toolkit';
 import { EffectEx } from '@dxos/effect';
 import { isTauri } from '@dxos/util';
 
@@ -24,7 +24,7 @@ const isSafari = (): boolean => {
 /** Check if the current page URL can be converted to a valid custom scheme URL. */
 const canRedirectToScheme = (): boolean => {
   try {
-    const schemeUrl = APP_SCHEME + window.location.pathname.replace(/^\/+/, '') + window.location.search;
+    const schemeUrl = NativePasskey.APP_SCHEME + window.location.pathname.replace(/^\/+/, '') + window.location.search;
     new URL(schemeUrl);
     return true;
   } catch {
@@ -63,7 +63,7 @@ const tryOpenNativeApp = (): Promise<boolean> => {
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     // Try the scheme via hidden iframe.
-    const schemeUrl = APP_SCHEME + window.location.pathname.replace(/^\/+/, '') + window.location.search;
+    const schemeUrl = NativePasskey.APP_SCHEME + window.location.pathname.replace(/^\/+/, '') + window.location.search;
     const iframe = document.createElement('iframe');
     iframe.style.display = 'none';
     iframe.src = schemeUrl;

package/src/capabilities/notification-tracker.ts

@@ -105,12 +105,12 @@ export default Capability.makeModule(
       // Replace any stale plugin-failure toast so at most one is ever visible.
       const toast: LayoutOperation.Toast = {
         id: 'plugin-failure',
-        title: ['plugin-failure.title', { ns: meta.id }],
-        description: ['plugin-failure.description', { ns: meta.id }],
+        title: ['plugin-failure.title', { ns: meta.profile.key }],
+        description: ['plugin-failure.description', { ns: meta.profile.key }],
         icon: 'ph--warning--regular',
         duration: ERROR_TOAST_DURATION,
-        actionLabel: ['plugin-failure-action.label', { ns: meta.id }],
-        actionAlt: ['plugin-failure-action.alt', { ns: meta.id }],
+        actionLabel: ['plugin-failure-action.label', { ns: meta.profile.key }],
+        actionAlt: ['plugin-failure-action.alt', { ns: meta.profile.key }],
         onAction: () => void invoker.invokePromise(SettingsOperation.OpenPluginRegistry),
       };
       const state = registry.get(ephemeralAtom);
@@ -135,11 +135,11 @@ export default Capability.makeModule(
         : state.toasts;
       const toast: LayoutOperation.Toast = {
         id: undoId,
-        title: message ?? ['undo-available.label', { ns: meta.id }],
+        title: message ?? ['undo-available.label', { ns: meta.profile.key }],
         duration: UNDO_TOAST_DURATION,
-        actionLabel: ['undo-action.label', { ns: meta.id }],
-        actionAlt: ['undo-action.alt', { ns: meta.id }],
-        closeLabel: ['undo-close.label', { ns: meta.id }],
+        actionLabel: ['undo-action.label', { ns: meta.profile.key }],
+        actionAlt: ['undo-action.alt', { ns: meta.profile.key }],
+        closeLabel: ['undo-close.label', { ns: meta.profile.key }],
         onAction: onUndo,
       };
       registry.set(ephemeralAtom, { ...state, currentUndoId: undoId, toasts: [...toasts, toast] });

package/src/capabilities/react-root.tsx

@@ -14,7 +14,7 @@ import { meta } from '#meta';
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactRoot, {
-      id: meta.id,
+      id: meta.profile.key,
       root: () => {
         const { state, updateEphemeral } = useDeckState();
 

package/src/capabilities/react-surface.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface, useSettingsState } from '@dxos/app-framework/ui';
-import { NOT_FOUND_PATH } from '@dxos/app-toolkit';
+import { NotFound } from '@dxos/app-toolkit';
 import { AppSurface, NotFoundArticle } from '@dxos/app-toolkit/ui';
 
 import { DeckSettings } from '#components';
@@ -19,7 +19,7 @@ export default Capability.makeModule(() =>
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: 'pluginSettings',
-        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        filter: AppSurface.settings(AppSurface.Article, meta.profile.key),
         component: ({ data: { subject } }) => {
           const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
           return <DeckSettings settings={settings} onSettingsChange={updateSettings} />;
@@ -27,8 +27,7 @@ export default Capability.makeModule(() =>
       }),
       Surface.create({
         id: 'notFound',
-        role: 'article',
-        filter: (data): data is { attendableId: string } => data.attendableId === NOT_FOUND_PATH,
+        filter: Surface.makeFilter(AppSurface.Article, (data) => data.attendableId === NotFound.NOT_FOUND_PATH),
         component: () => <NotFoundArticle />,
       }),
     ]),

package/src/capabilities/settings.ts

@@ -14,7 +14,7 @@ import { DeckCapabilities, Settings } from '#types';
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
-      key: meta.id,
+      key: meta.profile.key,
       schema: Settings.Settings,
       defaultValue: () => ({
         showHints: false,
@@ -27,7 +27,7 @@ export default Capability.makeModule(() =>
     return [
       Capability.contributes(DeckCapabilities.Settings, settingsAtom),
       Capability.contributes(AppCapabilities.Settings, {
-        prefix: meta.id,
+        prefix: meta.profile.key,
         schema: Settings.Settings,
         atom: settingsAtom,
       }),

package/src/capabilities/state.ts

@@ -49,7 +49,7 @@ export default Capability.makeModule(
 
     // Persisted state using KVS store.
     const stateAtom = createKvsStore({
-      key: `${meta.id}.state`,
+      key: `${meta.profile.key}.state`,
       schema: StoredDeckState,
       defaultValue: () => ({ ...defaultDeckState }),
     });

package/src/capabilities/url-handler.ts

@@ -5,15 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import {
-  AppCapabilities,
-  LayoutOperation,
-  NOT_FOUND_PATH,
-  expandPath,
-  fromUrlPath,
-  getWorkspaceFromPath,
-  toUrlPath,
-} from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, NotFound, Paths } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { EffectEx } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
@@ -91,8 +83,8 @@ export default Capability.makeModule(
         return;
       }
 
-      const qualifiedId = fromUrlPath(pathname);
-      const workspace = getWorkspaceFromPath(qualifiedId);
+      const qualifiedId = Paths.fromUrlPath(pathname);
+      const workspace = Paths.getWorkspaceFromPath(qualifiedId);
       if (workspace !== Node.RootId && workspace !== state.activeDeck) {
         yield* Operation.invoke(LayoutOperation.SwitchWorkspace, { subject: workspace });
       }
@@ -110,10 +102,10 @@ export default Capability.makeModule(
             mode: 'solo',
           });
         }
-      } else if (deck.solo && deck.solo !== NOT_FOUND_PATH) {
+      } else if (deck.solo && deck.solo !== NotFound.NOT_FOUND_PATH) {
         // Stay in solo mode; redirect URL to reflect the current solo item.
         // Do not switch to deck mode here — only explicit user action should change layout mode.
-        const path = toUrlPath(deck.solo);
+        const path = Paths.toUrlPath(deck.solo);
         if (window.location.pathname !== path) {
           history.replaceState(null, '', `${path}${stripPlanks(window.location.search)}`);
         }
@@ -122,7 +114,7 @@ export default Capability.makeModule(
         const plankIds = deserializePlanks(resolvedUrl);
         if (plankIds.length > 0) {
           for (const plankId of plankIds) {
-            expandPath(graph, plankId);
+            NotFound.expandPath(graph, plankId);
           }
           updateState((state) => updateActiveDeck(state, { active: plankIds, initialized: true }));
         }
@@ -203,7 +195,7 @@ export default Capability.makeModule(
         lastActiveDeck = activeDeck;
         lastActiveKey = activeKey;
 
-        const path = solo && solo !== NOT_FOUND_PATH ? toUrlPath(solo) : toUrlPath(activeDeck);
+        const path = solo && solo !== NotFound.NOT_FOUND_PATH ? Paths.toUrlPath(solo) : Paths.toUrlPath(activeDeck);
         const search = !solo
           ? serializePlanks(deck.active, window.location.search)
           : stripPlanks(window.location.search);

package/src/components/DeckSettings/DeckSettings.tsx

@@ -16,11 +16,11 @@ const isSocket = !!(globalThis as any).__args;
 export type DeckSettingsProps = AppSurface.SettingsArticleProps<Settings.Settings>;
 
 export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <SettingsForm.Viewport>
-      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+      <SettingsForm.Section title={t('settings.title', { ns: meta.profile.key })}>
         <SettingsForm.FieldSet
           readonly={!onSettingsChange}
           schema={Settings.Settings}

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

@@ -10,6 +10,7 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
 import { Graph } from '@dxos/app-graph';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
@@ -104,7 +105,7 @@ const TestExtension = Capability.contributes(
   Capabilities.ReactSurface,
   Surface.create({
     id: 'storyArticle',
-    role: 'article',
+    filter: Surface.makeFilter(AppSurface.Article),
     component: ({ data: { subject } }) => {
       if (!subject) {
         return <Loading />;

package/src/containers/Deck/Banner.tsx

@@ -5,15 +5,17 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
+import { VersionInfo } from '#types';
 
 import { CloseSidebarButton, ToggleSidebarButton } from '../Sidebar';
 
 export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'topbar' | 'sidebar' }>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <header
@@ -29,13 +31,12 @@ export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'top
       {variant === 'topbar' && (
         <div className='absolute inset-0 pointer-events-none'>
           <div className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
-            <Surface.Surface role='search-input' limit={1} />
+            <Surface.Surface type={AppSurface.SearchInput} limit={1} />
           </div>
         </div>
       )}
       <span className='grow' />
-      <Surface.Surface role='version-info' limit={1} />
-      <Surface.Surface role='notch-start' limit={1} />
+      <Surface.Surface type={VersionInfo} limit={1} />
     </header>
   );
 };

package/src/containers/Deck/DeckViewport.tsx

@@ -26,8 +26,7 @@ import { hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-
 
 import { useBreakpoints, useCompanions, useDeckState, useSelectedCompanion } from '#hooks';
 import { meta } from '#meta';
-import { DeckOperation } from '#types';
-import { getMode } from '#types';
+import { DeckOperation, getMode, Keyshortcuts } from '#types';
 
 import { layoutAppliesTopbar } from '../../util';
 import { Plank, PlankRootProps, type PlankComponentProps } from '../Plank';
@@ -105,7 +104,7 @@ export const DeckContentEmpty = () => {
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   return (
     <div className='grid place-items-center p-8 relative bg-deck-surface' data-testid='layoutPlugin.firstRunMessage'>
-      <Surface.Surface role='keyshortcuts' />
+      <Surface.Surface type={Keyshortcuts} />
       {!topbar && <ToggleSidebarButton />}
     </div>
   );
@@ -273,7 +272,7 @@ const ToggleComplementarySidebarButton = () => (
 );
 
 const ExitFullscreenButton = ({ onExit }: { onExit: () => void }) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   return (
     <div
       className={mx(

package/src/containers/Deck/StatusBar.tsx

@@ -7,6 +7,8 @@ import React from 'react';
 import { Surface } from '@dxos/app-framework/ui';
 import { useLandmarkMover } from '@dxos/react-ui';
 
+import { Hints, StatusBar as StatusBarRole } from '#types';
+
 export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   const mover = useLandmarkMover(undefined, '3');
   return (
@@ -15,8 +17,8 @@ export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
       className='fixed bottom-0 inset-x-0 h-(--dx-statusbar-size) border-y border-separator z-[2] flex text-description'
       {...mover}
     >
-      {showHints && <Surface.Surface role='hints' limit={1} />}
-      <Surface.Surface role='status-bar' limit={1} />
+      {showHints && <Surface.Surface type={Hints} limit={1} />}
+      <Surface.Surface type={StatusBarRole} limit={1} />
     </div>
   );
 };

package/src/containers/DeckLayout/DeckLayout.stories.tsx

@@ -167,15 +167,14 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
         Capability.contributes(Capabilities.ReactSurface, [
           Surface.create({
             id: 'storyNavigation',
-            role: 'navigation',
-            filter: (data): data is { current: string } => typeof (data as any).current === 'string',
-            component: ({ data, ref }) => <NavContainer current={data.current} ref={ref} />,
+            filter: Surface.makeFilter(AppSurface.Navigation),
+            component: ({ data, ref }) => (
+              <NavContainer current={data.current} ref={ref as React.Ref<HTMLDivElement>} />
+            ),
           }),
           Surface.create({
             id: 'storyArticle',
-            role: 'article',
-            filter: (data): data is Record<string, unknown> =>
-              typeof data === 'object' && data !== null && (data as { companionTo?: unknown }).companionTo == null,
+            filter: Surface.makeFilter(AppSurface.Article, (data) => data.companionTo == null),
             component: ({ data }) => {
               const subject = (data as any)?.subject;
               const attendableId = (data as any)?.attendableId as string | undefined;
@@ -202,9 +201,7 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
           }),
           Surface.create({
             id: 'storyArticleCompanion',
-            role: 'article',
-            filter: (data): data is AppSurface.ArticleData<unknown, {}, unknown> =>
-              typeof data === 'object' && data !== null && (data as { companionTo?: unknown }).companionTo != null,
+            filter: Surface.makeFilter(AppSurface.Article, (data) => data.companionTo != null),
             component: ({ data: { subject, companionTo, properties, variant } }) => {
               if (companionTo == null) {
                 return <Loading />;

package/src/containers/DeckLayout/Fallback.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from '@dxos/react-ui';
 import { meta } from '#meta';
 
 const Fallback = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   return (
     <div className='min-h-screen w-full flex items-center justify-center p-8'>