@dxos/plugin-deck 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,7 @@
 //
 
 import { batch } from '@preact/signals-core';
-import { Effect, pipe } from 'effect';
+import { Schema, Effect, pipe, Option } from 'effect';
 
 import {
   Capabilities,
@@ -11,16 +11,16 @@ import {
   contributes,
   IntentAction,
   LayoutAction,
-  type PluginsContext,
+  type PluginContext,
   createIntent,
   chain,
 } from '@dxos/app-framework';
-import { getTypename, S } from '@dxos/echo-schema';
+import { getTypename } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isLiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { type Node } from '@dxos/plugin-graph';
+import { isActionLike } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { byPosition, isNonNullable } from '@dxos/util';
 
@@ -38,13 +38,13 @@ import {
 } from '../types';
 import { setActive } from '../util';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: IntentAction.ShowUndo,
       resolve: (data) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
-        const { undoPromise: undo } = context.requestCapability(Capabilities.IntentDispatcher);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
+        const { undoPromise: undo } = context.getCapability(Capabilities.IntentDispatcher);
 
         // TODO(wittjosiah): Support undoing further back than the last action.
         if (layout.currentUndoId) {
@@ -67,12 +67,12 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdateSidebar.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdateSidebar.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateSidebar.fields.input> =>
-        S.is(LayoutAction.UpdateSidebar.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdateSidebar.fields.input> =>
+        Schema.is(LayoutAction.UpdateSidebar.fields.input)(data),
       resolve: ({ options }) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
         const next = options?.state ?? layout.sidebarState;
         if (next !== layout.sidebarState) {
           layout.sidebarState = next;
@@ -81,12 +81,12 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdateComplementary.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdateComplementary.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateComplementary.fields.input> =>
-        S.is(LayoutAction.UpdateComplementary.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdateComplementary.fields.input> =>
+        Schema.is(LayoutAction.UpdateComplementary.fields.input)(data),
       resolve: ({ subject, options }) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
 
         if (layout.complementarySidebarPanel !== subject) {
           layout.complementarySidebarPanel = subject;
@@ -100,26 +100,28 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdateDialog.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdateDialog.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
-        S.is(LayoutAction.UpdateDialog.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
+        Schema.is(LayoutAction.UpdateDialog.fields.input)(data),
       resolve: ({ subject, options }) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
         layout.dialogOpen = options.state ?? Boolean(subject);
-        layout.dialogContent = subject ? { component: subject, props: options.props } : null;
-        layout.dialogBlockAlign = options.blockAlign ?? 'center';
         layout.dialogType = options.type ?? 'default';
+        layout.dialogBlockAlign = options.blockAlign ?? 'center';
+        layout.dialogOverlayClasses = options.overlayClasses;
+        layout.dialogOverlayStyle = options.overlayStyle;
+        layout.dialogContent = subject ? { component: subject, props: options.props } : null;
       },
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdatePopover.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdatePopover.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdatePopover.fields.input> =>
-        S.is(LayoutAction.UpdatePopover.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdatePopover.fields.input> =>
+        Schema.is(LayoutAction.UpdatePopover.fields.input)(data),
       resolve: ({ subject, options }) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
         layout.popoverOpen = options.state ?? Boolean(subject);
         layout.popoverContent =
           typeof subject === 'string' ? { component: subject, props: options.props } : subject ? { subject } : null;
@@ -133,21 +135,21 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.AddToast.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.AddToast.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.AddToast.fields.input> =>
-        S.is(LayoutAction.AddToast.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.AddToast.fields.input> =>
+        Schema.is(LayoutAction.AddToast.fields.input)(data),
       resolve: ({ subject }) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
         layout.toasts.push(subject);
       },
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.SetLayoutMode.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.SetLayoutMode.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.SetLayoutMode.fields.input> => {
-        if (!S.is(LayoutAction.SetLayoutMode.fields.input)(data)) {
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SetLayoutMode.fields.input> => {
+        if (!Schema.is(LayoutAction.SetLayoutMode.fields.input)(data)) {
           return false;
         }
 
@@ -158,7 +160,7 @@ export default (context: PluginsContext) =>
         return true;
       },
       resolve: ({ subject, options }) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
 
         const setMode = (mode: LayoutMode) => {
           const deck = state.deck;
@@ -202,10 +204,11 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-        S.is(LayoutAction.SwitchWorkspace.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
+        Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
       resolve: ({ subject }) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const { graph } = context.getCapability(Capabilities.AppGraph);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
         batch(() => {
           // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
           //  Ideally this should be worked into the data model in a generic way.
@@ -223,15 +226,24 @@ export default (context: PluginsContext) =>
           return {
             intents: [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: first })],
           };
+        } else {
+          const [item] = graph
+            .getConnections(subject)
+            .filter((node) => !isActionLike(node) && node.properties.disposition !== 'hidden');
+          if (item) {
+            return {
+              intents: [createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] })],
+            };
+          }
         }
       },
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.RevertWorkspace.fields.input> =>
-        S.is(LayoutAction.RevertWorkspace.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.RevertWorkspace.fields.input> =>
+        Schema.is(LayoutAction.RevertWorkspace.fields.input)(data),
       resolve: () => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
         return {
           intents: [createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: state.previousDeck })],
         };
@@ -239,19 +251,19 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Open.fields.input> =>
-        S.is(LayoutAction.Open.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Open.fields.input> =>
+        Schema.is(LayoutAction.Open.fields.input)(data),
       resolve: ({ subject, options }) =>
         Effect.gen(function* () {
-          const { graph } = context.requestCapability(Capabilities.AppGraph);
-          const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-          const attention = context.requestCapability(AttentionCapabilities.Attention);
+          const { graph } = context.getCapability(Capabilities.AppGraph);
+          const state = context.getCapability(DeckCapabilities.MutableDeckState);
+          const attention = context.getCapability(AttentionCapabilities.Attention);
           const settings = context
-            .requestCapabilities(Capabilities.SettingsStore)[0]
+            .getCapabilities(Capabilities.SettingsStore)[0]
             ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
 
           if (options?.workspace && state.activeDeck !== options?.workspace) {
-            const { dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
             yield* dispatch(
               createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: options.workspace }),
             );
@@ -285,8 +297,13 @@ export default (context: PluginsContext) =>
                 : []),
               createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
               ...newlyOpen.map((subjectId) => {
-                const active = graph?.findNode(subjectId)?.data;
-                const typename = isLiveObject(active) ? getTypename(active) : undefined;
+                const typename = Option.match(graph.getNode(subjectId), {
+                  onNone: () => undefined,
+                  onSome: (node) => {
+                    const active = node.data;
+                    return isLiveObject(active) ? getTypename(active) : undefined;
+                  },
+                });
                 return createIntent(ObservabilityAction.SendEvent, {
                   name: 'navigation.activate',
                   properties: {
@@ -301,11 +318,11 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Close.fields.input> =>
-        S.is(LayoutAction.Close.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Close.fields.input> =>
+        Schema.is(LayoutAction.Close.fields.input)(data),
       resolve: ({ subject }) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-        const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.getCapability(AttentionCapabilities.Attention);
         const active = state.deck.solo ? [state.deck.solo] : state.deck.active;
         const next = subject.reduce((acc, id) => closeEntry(acc, id), active);
         const toAttend = setActive({ next, state, attention });
@@ -324,11 +341,11 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Set.fields.input> =>
-        S.is(LayoutAction.Set.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Set.fields.input> =>
+        Schema.is(LayoutAction.Set.fields.input)(data),
       resolve: ({ subject }) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-        const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.getCapability(AttentionCapabilities.Attention);
         const toAttend = setActive({ next: subject as string[], state, attention });
         return {
           intents: toAttend ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: toAttend })] : [],
@@ -337,24 +354,24 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.ScrollIntoView.fields.input> =>
-        S.is(LayoutAction.ScrollIntoView.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.ScrollIntoView.fields.input> =>
+        Schema.is(LayoutAction.ScrollIntoView.fields.input)(data),
       resolve: ({ subject }) => {
-        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const layout = context.getCapability(DeckCapabilities.MutableDeckState);
         layout.scrollIntoView = subject;
       },
     }),
     createResolver({
       intent: DeckAction.UpdatePlankSize,
       resolve: (data) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
         state.deck.plankSizing[data.id] = data.size;
       },
     }),
     createResolver({
       intent: DeckAction.ChangeCompanion,
       resolve: (data) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
         // TODO(thure): Reactivity only works when creating a lexically new `activeCompanions`… Are these not proxy objects?
         if (data.companion === null) {
           const { [data.primary]: _, ...nextActiveCompanions } = state.deck.activeCompanions ?? {};
@@ -371,9 +388,9 @@ export default (context: PluginsContext) =>
     createResolver({
       intent: DeckAction.Adjust,
       resolve: (adjustment) => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-        const attention = context.requestCapability(AttentionCapabilities.Attention);
-        const { graph } = context.requestCapability(Capabilities.AppGraph);
+        const state = context.getCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.getCapability(AttentionCapabilities.Attention);
+        const { graph } = context.getCapability(Capabilities.AppGraph);
 
         return batch(() => {
           if (adjustment.type === 'increment-end' || adjustment.type === 'increment-start') {
@@ -385,20 +402,25 @@ export default (context: PluginsContext) =>
           }
 
           if (adjustment.type === 'companion') {
-            const node = graph.findNode(adjustment.id);
-            const [companion] = node
-              ? graph
-                  .nodes(node, { filter: (n): n is Node<any> => n.type === PLANK_COMPANION_TYPE })
-                  .toSorted((a, b) => byPosition(a.properties, b.properties))
-              : [];
-            if (companion) {
-              return {
-                intents: [
-                  // TODO(wittjosiah): This should remember the previously selected companion.
-                  createIntent(DeckAction.ChangeCompanion, { primary: adjustment.id, companion: companion.id }),
-                ],
-              };
-            }
+            return pipe(
+              graph.getNode(adjustment.id),
+              Option.map((node) =>
+                graph
+                  .getConnections(node.id)
+                  .filter((n) => n.type === PLANK_COMPANION_TYPE)
+                  .toSorted((a, b) => byPosition(a.properties, b.properties)),
+              ),
+              Option.flatMap((companions) => (companions.length > 0 ? Option.some(companions[0]) : Option.none())),
+              Option.match({
+                onNone: () => ({}),
+                onSome: (companion) => ({
+                  intents: [
+                    // TODO(wittjosiah): This should remember the previously selected companion.
+                    createIntent(DeckAction.ChangeCompanion, { primary: adjustment.id, companion: companion.id }),
+                  ],
+                }),
+              }),
+            );
           }
 
           if (adjustment.type.startsWith('solo')) {

package/src/capabilities/settings.ts

@@ -11,9 +11,9 @@ import { DeckSettingsSchema, type DeckSettingsProps } from '../types';
 export default () => {
   const settings = live<DeckSettingsProps>({
     showHints: false,
-    enableDeck: true,
-    enableNativeRedirect: false,
+    enableDeck: false,
     enableStatusbar: false,
+    enableNativeRedirect: false,
     newPlankPositioning: 'start',
     overscroll: 'none',
   });

package/src/capabilities/state.ts

@@ -10,7 +10,7 @@ import { type SidebarState } from '@dxos/react-ui';
 
 import { DeckCapabilities } from './capabilities';
 import { DECK_PLUGIN } from '../meta';
-import { getMode, type DeckState, type DeckPluginState, defaultDeck } from '../types';
+import { getMode, type DeckPluginState, defaultDeck, type DeckState } from '../types';
 
 const boolean = /true|false/;
 
@@ -29,7 +29,7 @@ const migrateSidebarState = () => {
   });
 };
 
-export default () => {
+const DeckStateFactory = () => {
   migrateSidebarState();
 
   const state = new LocalStorageStore<DeckPluginState>(DECK_PLUGIN, {
@@ -100,3 +100,5 @@ export default () => {
     contributes(Capabilities.Layout, layout),
   ];
 };
+
+export default DeckStateFactory;

package/src/capabilities/tools.ts

@@ -2,6 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Schema } from 'effect';
+
+import { createTool, ToolResult } from '@dxos/ai';
 import {
   contributes,
   createIntent,
@@ -9,8 +12,6 @@ import {
   LayoutAction,
   type PromiseIntentDispatcher,
 } from '@dxos/app-framework';
-import { defineTool, ToolResult } from '@dxos/artifact';
-import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 
 import { meta } from '../meta';
@@ -27,7 +28,7 @@ declare global {
 
 export default () =>
   contributes(Capabilities.Tools, [
-    defineTool(meta.id, {
+    createTool(meta.id, {
       name: 'show',
       description: `
         Show an item as a companion to an existing plank. This will make the item appear alongside the primary content.
@@ -35,19 +36,21 @@ export default () =>
       `,
       caption: 'Showing item...',
       // TODO(wittjosiah): Refactor Layout/Navigation/Deck actions so that they can be used directly.
-      schema: S.Struct({
-        id: S.String.annotations({
+      schema: Schema.Struct({
+        id: Schema.String.annotations({
           description: 'The ID of the item to show.',
         }),
       }),
       execute: async ({ id }, { extensions }) => {
-        invariant(extensions?.pivotId, 'No pivot ID');
-        invariant(extensions?.dispatch, 'No intent dispatcher');
+        invariant(extensions);
+        const { pivotId, dispatch, part } = extensions;
+        invariant(pivotId, 'No pivot ID');
+        invariant(dispatch, 'No intent dispatcher');
 
-        if (extensions.part === 'deck') {
-          const { data, error } = await extensions.dispatch(
+        if (part === 'deck') {
+          const { data, error } = await dispatch(
             createIntent(DeckAction.ChangeCompanion, {
-              primary: extensions.pivotId,
+              primary: pivotId,
               companion: id,
             }),
           );
@@ -57,12 +60,12 @@ export default () =>
 
           return ToolResult.Success(data);
         } else {
-          const { data, error } = await extensions.dispatch(
+          const { data, error } = await dispatch(
             createIntent(LayoutAction.Open, {
               subject: [id],
               part: 'main',
               options: {
-                pivotId: extensions.pivotId,
+                pivotId,
                 positioning: 'end',
               },
             }),

package/src/capabilities/url-handler.ts

@@ -2,16 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, createIntent, LayoutAction, type PluginContext } from '@dxos/app-framework';
 import { scheduledEffect } from '@dxos/echo-signals/core';
 
 import { DeckCapabilities } from './capabilities';
 import { defaultDeck } from '../types';
 
 // TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
-export default async (context: PluginsContext) => {
-  const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher) ?? {};
-  const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+export default async (context: PluginContext) => {
+  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+  const state = context.getCapability(DeckCapabilities.MutableDeckState);
 
   const handleNavigation = async () => {
     const pathname = window.location.pathname;

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -7,8 +7,9 @@ import React from 'react';
 import { Surface, useCapability } from '@dxos/app-framework';
 
 import { DeckCapabilities } from '../../capabilities';
+import { useBreakpoints } from '../../hooks';
 import { getMode } from '../../types';
-import { layoutAppliesTopbar, useBreakpoints } from '../../util';
+import { layoutAppliesTopbar } from '../../util';
 import { ToggleSidebarButton } from '../Sidebar';
 import { fixedSidebarToggleStyles } from '../fragments';
 
@@ -20,7 +21,7 @@ export const ContentEmpty = () => {
   return (
     <div
       role='none'
-      className='grid place-items-center p-8 relative bg-deck'
+      className='grid place-items-center p-8 relative bg-deckSurface'
       data-testid='layoutPlugin.firstRunMessage'
     >
       <Surface role='keyshortcuts' />

package/src/components/DeckLayout/DeckLayout.tsx

@@ -26,9 +26,10 @@ import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
 import { Topbar } from './Topbar';
 import { DeckCapabilities } from '../../capabilities';
+import { useBreakpoints, useHoistStatusbar } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
 import { type DeckSettingsProps, getMode } from '../../types';
-import { calculateOverscroll, layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
+import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
 import { Plank } from '../Plank';
 import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
 import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
@@ -38,7 +39,7 @@ export type DeckLayoutProps = {
 };
 
 const PlankSeparator = ({ order }: { order: number }) =>
-  order > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: order }} /> : null;
+  order > 0 ? <span role='separator' className='row-span-2 bg-deckSurface is-4' style={{ gridColumn: order }} /> : null;
 
 export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -59,7 +60,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   useEffect(() => {
     // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
     const attended = untracked(() => {
-      const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
+      const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
       return attention.current;
     });
     const firstId = solo ?? active[0];
@@ -78,7 +79,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
     if (!isNotMobile && getMode(deck) === 'deck') {
       // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
       const attended = untracked(() => {
-        const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
+        const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
         return attention.current;
       });
 
@@ -91,14 +92,15 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
     }
   }, [isNotMobile, deck, dispatch]);
 
-  // If deck is disabled in settings, ensure that the layout is in solo mode.
+  // When deck is disabled in settings, set to solo mode if the current layout mode is deck.
+  // TODO(thure): Applying this as an effect should be avoided over emitting the intent only when the setting changes.
   useEffect(() => {
-    if (!settings.enableDeck) {
+    if (!settings.enableDeck && layoutMode === 'deck') {
       void dispatch(
         createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: active[0], options: { mode: 'solo' } }),
       );
     }
-  }, [settings.enableDeck, dispatch, active]);
+  }, [settings.enableDeck, dispatch, active, layoutMode]);
 
   /**
    * Clear scroll restoration state if the window is resized
@@ -190,8 +192,8 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
         {!isEmpty && (
           <Main.Content
             bounce
-            classNames={mainPosition}
             handlesFocus
+            classNames={mainPosition}
             style={
               {
                 '--dx-main-sidebarWidth':
@@ -213,7 +215,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
           >
             <div
               role='none'
-              className={!solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+              className={!solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
               {...(solo && { inert: '' })}
             >
               {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
@@ -247,7 +249,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
             </div>
             <div
               role='none'
-              className={solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+              className={solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
               {...(!solo && { inert: '' })}
             >
               {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}

package/src/components/DeckLayout/Dialog.tsx

@@ -12,7 +12,7 @@ import { PlankContentError } from '../Plank';
 
 export const Dialog = () => {
   const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { dialogType, dialogBlockAlign, dialogContent, dialogOpen } = context;
+  const { dialogOpen, dialogType, dialogBlockAlign, dialogOverlayClasses, dialogOverlayStyle, dialogContent } = context;
   const Root = dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
   const Overlay = dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
 
@@ -27,7 +27,7 @@ export const Dialog = () => {
         // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
         <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
       ) : (
-        <Overlay blockAlign={dialogBlockAlign}>
+        <Overlay blockAlign={dialogBlockAlign} classNames={dialogOverlayClasses} style={dialogOverlayStyle}>
           <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
         </Overlay>
       )}