@dxos/plugin-deck 0.7.5-main.9d2a38b → 0.7.5-main.e9bb01b

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,350 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { batch } from '@preact/signals-core';
+import { pipe } from 'effect';
+
+import {
+  Capabilities,
+  createResolver,
+  contributes,
+  IntentAction,
+  LayoutAction,
+  type PluginsContext,
+  createIntent,
+  chain,
+} from '@dxos/app-framework';
+import { getTypename, S } from '@dxos/echo-schema';
+import { isReactiveObject } from '@dxos/live-object';
+import { log } from '@dxos/log';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
+import { nonNullable } from '@dxos/util';
+
+import { DeckCapabilities } from './capabilities';
+import { setActive } from './set-active';
+import { closeEntry, incrementPlank, openEntry } from '../layout';
+import { DECK_PLUGIN } from '../meta';
+import { DeckAction, type LayoutMode, type DeckSettingsProps, isLayoutMode, getMode } from '../types';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: IntentAction.ShowUndo,
+      resolve: (data) => {
+        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const { undoPromise: undo } = context.requestCapability(Capabilities.IntentDispatcher);
+
+        // TODO(wittjosiah): Support undoing further back than the last action.
+        if (layout.currentUndoId) {
+          layout.toasts = layout.toasts.filter((toast) => toast.id !== layout.currentUndoId);
+        }
+        layout.currentUndoId = `${IntentAction.ShowUndo._tag}-${Date.now()}`;
+        layout.toasts = [
+          ...layout.toasts,
+          {
+            id: layout.currentUndoId,
+            title: data.message ?? ['undo available label', { ns: DECK_PLUGIN }],
+            duration: 10_000,
+            actionLabel: ['undo action label', { ns: DECK_PLUGIN }],
+            actionAlt: ['undo action alt', { ns: DECK_PLUGIN }],
+            closeLabel: ['undo close label', { ns: DECK_PLUGIN }],
+            onAction: () => undo(),
+          },
+        ];
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      // TODO(wittjosiah): This should be able to just be `S.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),
+      resolve: ({ options }) => {
+        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const next = options?.state ?? layout.sidebarState;
+        if (next !== layout.sidebarState) {
+          layout.sidebarState = next;
+        }
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      // TODO(wittjosiah): This should be able to just be `S.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),
+      resolve: ({ subject, options }) => {
+        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+
+        if (layout.complementarySidebarPanel !== subject) {
+          layout.complementarySidebarPanel = subject;
+        }
+
+        const next = subject ? 'expanded' : options?.state ?? layout.complementarySidebarState;
+        if (next !== layout.complementarySidebarState) {
+          layout.complementarySidebarState = next;
+        }
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      // TODO(wittjosiah): This should be able to just be `S.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),
+      resolve: ({ subject, options }) => {
+        const layout = context.requestCapability(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';
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      // TODO(wittjosiah): This should be able to just be `S.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),
+      resolve: ({ subject, options }) => {
+        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        layout.popoverOpen = options.state ?? Boolean(subject);
+        layout.popoverContent = subject ? { component: subject, props: options.props } : null;
+        layout.popoverAnchorId = options.anchorId;
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      // TODO(wittjosiah): This should be able to just be `S.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),
+      resolve: ({ subject }) => {
+        const layout = context.requestCapability(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)`
+      //  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)) {
+          return false;
+        }
+
+        if ('mode' in data.options) {
+          return isLayoutMode(data.options.mode);
+        }
+
+        return true;
+      },
+      resolve: ({ subject, options }) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+
+        const setMode = (mode: LayoutMode) => {
+          const deck = state.deck;
+          const current = deck.solo ? [deck.solo] : deck.active;
+          // When un-soloing, the solo entry is added to the deck.
+          const next = (
+            mode === 'solo' ? [subject ?? deck.solo ?? deck.active[0]] : [...deck.active, deck.solo]
+          ).filter(nonNullable);
+
+          const removed = current.filter((id) => !next.includes(id));
+          const closed = Array.from(new Set([...deck.inactive.filter((id) => !next.includes(id)), ...removed]));
+          deck.inactive = closed;
+
+          if (mode === 'solo' && next[0]) {
+            deck.solo = next[0];
+          } else if (mode !== 'solo' && deck.solo) {
+            deck.solo = undefined;
+            deck.initialized = true;
+          }
+
+          if (mode === 'fullscreen' && !deck.fullscreen) {
+            deck.fullscreen = true;
+          } else if (mode !== 'fullscreen' && deck.fullscreen) {
+            deck.fullscreen = false;
+          }
+        };
+
+        return batch(() => {
+          if ('mode' in options) {
+            const current = getMode(state.deck);
+            if (current !== options.mode) {
+              state.previousMode[state.activeDeck] = current;
+            }
+            setMode(options.mode as LayoutMode);
+          } else if ('revert' in options) {
+            const last = state.previousMode[state.activeDeck];
+            setMode(last ?? 'solo');
+          } else {
+            log.warn('Invalid layout mode', options);
+          }
+        });
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
+        S.is(LayoutAction.SwitchWorkspace.fields.input)(data),
+      resolve: ({ subject }) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        batch(() => {
+          state.activeDeck = subject;
+          if (!state.decks[subject]) {
+            state.decks[subject] = { initialized: false, active: [], inactive: [], fullscreen: false, plankSizing: {} };
+          }
+        });
+
+        const first = state.decks[state.activeDeck].active[0];
+        if (first) {
+          return {
+            intents: [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: first })],
+          };
+        }
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.Open.fields.input> =>
+        S.is(LayoutAction.Open.fields.input)(data),
+      resolve: ({ subject, options }) => {
+        const { graph } = context.requestCapability(Capabilities.AppGraph);
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const settings = context
+          .requestCapabilities(Capabilities.SettingsStore)[0]
+          ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
+
+        const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
+        batch(() => {
+          const next = state.deck.solo
+            ? (subject as string[])
+            : subject.reduce(
+                (acc, entryId) =>
+                  openEntry(acc, entryId, {
+                    key: options?.key,
+                    positioning: options?.positioning ?? settings?.newPlankPositioning,
+                    pivotId: options?.pivotId,
+                  }),
+                state.deck.active,
+              );
+
+          return setActive({ next, state, attention });
+        });
+
+        const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
+        const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
+
+        return {
+          intents: [
+            ...(options?.scrollIntoView !== false
+              ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
+              : []),
+            createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
+            ...newlyOpen.map((id) => {
+              const active = graph?.findNode(id)?.data;
+              const typename = isReactiveObject(active) ? getTypename(active) : undefined;
+              return createIntent(ObservabilityAction.SendEvent, {
+                name: 'navigation.activate',
+                properties: {
+                  id,
+                  typename,
+                },
+              });
+            }),
+          ],
+        };
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.Close.fields.input> =>
+        S.is(LayoutAction.Close.fields.input)(data),
+      resolve: ({ subject }) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const next = subject.reduce((acc, id) => closeEntry(acc, id), state.deck.active);
+        const toAttend = setActive({ next, state, attention });
+        return {
+          intents: toAttend ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: toAttend })] : [],
+        };
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.Set.fields.input> =>
+        S.is(LayoutAction.Set.fields.input)(data),
+      resolve: ({ subject }) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const toAttend = setActive({ next: subject as string[], state, attention });
+        return {
+          intents: toAttend ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: toAttend })] : [],
+        };
+      },
+    }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.ScrollIntoView.fields.input> =>
+        S.is(LayoutAction.ScrollIntoView.fields.input)(data),
+      resolve: ({ subject }) => {
+        const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
+        layout.scrollIntoView = subject;
+      },
+    }),
+    createResolver({
+      intent: DeckAction.UpdatePlankSize,
+      resolve: (data) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        state.deck.plankSizing[data.id] = data.size;
+      },
+    }),
+    createResolver({
+      intent: DeckAction.Adjust,
+      resolve: (adjustment) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.requestCapability(AttentionCapabilities.Attention);
+
+        return batch(() => {
+          if (adjustment.type === 'increment-end' || adjustment.type === 'increment-start') {
+            setActive({
+              next: incrementPlank(state.deck.active, adjustment),
+              state,
+              attention,
+            });
+          }
+
+          if (adjustment.type === 'solo') {
+            const entryId = adjustment.id;
+            if (!state.deck.solo) {
+              // Solo the entry.
+              return {
+                intents: [
+                  createIntent(LayoutAction.SetLayoutMode, {
+                    part: 'mode',
+                    subject: entryId,
+                    options: { mode: 'solo' },
+                  }),
+                ],
+              };
+            } else {
+              // Un-solo the current entry.
+              return {
+                intents: [
+                  // NOTE: The order of these is important.
+                  pipe(
+                    createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }),
+                    chain(LayoutAction.Open, { part: 'main', subject: [entryId] }),
+                  ),
+                ],
+              };
+            }
+          }
+        });
+      },
+    }),
+  ]);

package/src/capabilities/{layout/react-root.tsx → react-root.tsx}

@@ -6,18 +6,16 @@ import React, { useCallback } from 'react';
 
 import { Capabilities, contributes, useCapabilities, useCapability } from '@dxos/app-framework';
 
-import { DeckLayout } from '../../components';
-import { DECK_PLUGIN } from '../../meta';
-import { type DeckSettingsProps } from '../../types';
-import { DeckCapabilities } from '../capabilities';
+import { DeckCapabilities } from './capabilities';
+import { DeckLayout } from '../components';
+import { DECK_PLUGIN } from '../meta';
+import { type DeckSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactRoot, {
     id: DECK_PLUGIN,
     root: () => {
-      const layout = useCapability(Capabilities.Layout);
-      const location = useCapability(Capabilities.Location);
-      const deck = useCapability(DeckCapabilities.MutableDeckState);
+      const layout = useCapability(DeckCapabilities.MutableDeckState);
       const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value;
       const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
 
@@ -28,8 +26,8 @@ export default () =>
             // Allow time for the toast to animate out.
             // TODO(burdon): Factor out and unregister timeout.
             setTimeout(() => {
-              if (layout.toasts[index].id === deck.currentUndoId) {
-                deck.currentUndoId = undefined;
+              if (layout.toasts[index].id === layout.currentUndoId) {
+                layout.currentUndoId = undefined;
               }
               layout.toasts.splice(index, 1);
             }, 1_000);
@@ -40,10 +38,8 @@ export default () =>
 
       return (
         <DeckLayout
-          layoutParts={location.active}
           showHints={settings.showHints}
           overscroll={settings.overscroll}
-          toasts={layout.toasts}
           panels={panels}
           onDismissToast={handleDismissToast}
         />

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { SettingsStore } from '@dxos/local-storage';
+
+import { LayoutSettings } from '../components';
+import { Banner } from '../components/DeckLayout/Banner';
+import { DECK_PLUGIN } from '../meta';
+import { type DeckSettingsProps } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: `${DECK_PLUGIN}/settings`,
+      role: 'article',
+      filter: (data): data is { subject: SettingsStore<DeckSettingsProps> } =>
+        data.subject instanceof SettingsStore && data.subject.prefix === DECK_PLUGIN,
+      component: ({ data: { subject } }) => <LayoutSettings settings={subject.value} />,
+    }),
+    createSurface({
+      id: `${DECK_PLUGIN}/banner`,
+      role: 'banner',
+      component: ({ data }) => {
+        return <Banner variant={data.variant} />;
+      },
+    }),
+  ]);

package/src/capabilities/set-active.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { batch } from '@preact/signals-core';
+
+import { type AttentionManager } from '@dxos/plugin-attention';
+
+import { type DeckState } from '../types';
+
+export type SetActiveOptions = {
+  next: string[];
+  state: DeckState;
+  attention?: AttentionManager;
+};
+
+export const setActive = ({ next, state, attention }: SetActiveOptions) => {
+  return batch(() => {
+    const active = state.deck.solo ? [state.deck.solo] : state.deck.active;
+    const removed = active.filter((id) => !next.includes(id));
+    const closed = Array.from(new Set([...state.deck.inactive.filter((id) => !next.includes(id)), ...removed]));
+
+    state.deck.inactive = closed;
+
+    if (state.deck.solo || !state.deck.initialized) {
+      state.deck.solo = next[0];
+    } else {
+      state.deck.active = next;
+    }
+
+    if (attention) {
+      const attended = attention.current;
+      const [attendedId] = Array.from(attended);
+      const isAttendedAvailable = !!attendedId && next.includes(attendedId);
+      if (!isAttendedAvailable) {
+        const attendedIndex = active.indexOf(attendedId);
+        // If outside of bounds, focus on the first/last plank, otherwise focus on the new plank in the same position.
+        const index = attendedIndex === -1 ? 0 : attendedIndex >= next.length ? next.length - 1 : attendedIndex;
+        return next[index];
+      }
+    }
+  });
+};

package/src/capabilities/{settings/settings.ts → settings.ts}

@@ -5,17 +5,16 @@
 import { Capabilities, contributes } from '@dxos/app-framework';
 import { create } from '@dxos/live-object';
 
-import { DECK_PLUGIN } from '../../meta';
-import { DeckSettingsSchema, type DeckSettingsProps } from '../../types';
+import { DECK_PLUGIN } from '../meta';
+import { DeckSettingsSchema, type DeckSettingsProps } from '../types';
 
 export default () => {
   const settings = create<DeckSettingsProps>({
     showHints: false,
-    customSlots: false,
-    flatDeck: false,
     enableNativeRedirect: false,
+    enableIdeStyleStatusbar: true,
     newPlankPositioning: 'start',
-    overscroll: 'centering',
+    overscroll: 'none',
   });
 
   return contributes(Capabilities.Settings, { schema: DeckSettingsSchema, prefix: DECK_PLUGIN, value: settings });

package/src/capabilities/state.ts

@@ -0,0 +1,102 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
+import { create } from '@dxos/live-object';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { type SidebarState } from '@dxos/react-ui';
+
+import { DeckCapabilities } from './capabilities';
+import { DECK_PLUGIN } from '../meta';
+import { getMode, type Deck, type DeckState } from '../types';
+
+const boolean = /true|false/;
+
+// TODO(thure, 18 Feb 2025): Remove after the next release.
+
+const migrateSidebarStateDefaults = {
+  [`${DECK_PLUGIN}/complementary-sidebar-state`]: 'expanded',
+  [`${DECK_PLUGIN}/sidebar-state`]: 'collapsed',
+};
+
+const migrateSidebarState = () => {
+  Object.entries(migrateSidebarStateDefaults).forEach(([key, defaultValue]) => {
+    if (boolean.test(localStorage.getItem(key) ?? 'never')) {
+      localStorage.setItem(key, defaultValue);
+    }
+  });
+};
+
+export default () => {
+  migrateSidebarState();
+
+  const state = new LocalStorageStore<DeckState>(DECK_PLUGIN, {
+    sidebarState: 'expanded',
+    complementarySidebarState: 'collapsed',
+    complementarySidebarPanel: undefined,
+    dialogContent: null,
+    dialogOpen: false,
+    dialogBlockAlign: undefined,
+    dialogType: undefined,
+    popoverContent: null,
+    popoverAnchorId: undefined,
+    popoverOpen: false,
+    toasts: [],
+    currentUndoId: undefined,
+    activeDeck: 'default',
+    decks: {
+      default: {
+        initialized: false,
+        active: [],
+        inactive: [],
+        fullscreen: false,
+        solo: undefined,
+        plankSizing: {},
+      },
+    },
+    get deck() {
+      const deck = this.decks[this.activeDeck];
+      invariant(deck, `Deck not found: ${this.activeDeck}`);
+      return deck;
+    },
+    previousMode: {},
+    scrollIntoView: undefined,
+  });
+
+  state
+    .prop({ key: 'sidebarState', type: LocalStorageStore.enum<SidebarState>() })
+    .prop({ key: 'complementarySidebarState', type: LocalStorageStore.enum<SidebarState>() })
+    .prop({ key: 'decks', type: LocalStorageStore.json<Record<string, Deck>>() })
+    .prop({ key: 'activeDeck', type: LocalStorageStore.string() });
+
+  const layout = create<Capabilities.Layout>({
+    get mode() {
+      return getMode(state.values.deck);
+    },
+    get dialogOpen() {
+      return state.values.dialogOpen;
+    },
+    get sidebarOpen() {
+      return state.values.sidebarState === 'expanded';
+    },
+    get complementarySidebarOpen() {
+      return state.values.complementarySidebarState === 'expanded';
+    },
+    get active() {
+      return state.values.deck.solo ? [state.values.deck.solo] : state.values.deck.active;
+    },
+    get inactive() {
+      return state.values.deck.inactive;
+    },
+    get scrollIntoView() {
+      return state.values.scrollIntoView;
+    },
+  });
+
+  return [
+    contributes(DeckCapabilities.DeckState, state.values, () => state.close()),
+    contributes(Capabilities.Layout, layout),
+  ];
+};

package/src/capabilities/url-handler.ts

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
+import { scheduledEffect } from '@dxos/echo-signals/core';
+
+import { DeckCapabilities } from './capabilities';
+
+// 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);
+
+  const handleNavigation = async () => {
+    const pathname = window.location.pathname;
+    if (pathname === '/reset') {
+      state.activeDeck = 'default';
+      state.decks = {
+        default: {
+          initialized: false,
+          active: [],
+          inactive: [],
+          fullscreen: false,
+          solo: undefined,
+          plankSizing: {},
+        },
+      };
+      window.location.pathname = '/';
+      return;
+    }
+
+    const [_, nextDeck, nextSolo] = pathname.split('/');
+    if (nextDeck) {
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: nextDeck }));
+    }
+
+    if (nextSolo) {
+      await dispatch(
+        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: nextSolo, options: { mode: 'solo' } }),
+      );
+    } else {
+      await dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }));
+    }
+  };
+
+  await handleNavigation();
+  window.addEventListener('popstate', handleNavigation);
+
+  const unsubscribe = scheduledEffect(
+    () => ({ solo: state.deck.solo, activeDeck: state.activeDeck }),
+    ({ solo, activeDeck }) => {
+      const path = solo ? `/${activeDeck}/${solo}` : `/${activeDeck}`;
+      // TODO(thure): In some browsers, this only preserves the most recent state change, even though this is not `history.replace`…
+      history.pushState(null, '', `${path}${window.location.search}`);
+    },
+  );
+
+  return contributes(Capabilities.Null, null, () => {
+    window.removeEventListener('popstate', handleNavigation);
+    unsubscribe();
+  });
+};

package/src/components/DeckLayout/ActiveNode.tsx

@@ -4,8 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
-import { useGraph } from '@dxos/plugin-graph';
+import { Surface, useAppGraph } from '@dxos/app-framework';
 import { useAttended } from '@dxos/react-ui-attention';
 
 import { useNode, useNodeActionExpander } from '../../hooks';
@@ -13,7 +12,7 @@ import { useNode, useNodeActionExpander } from '../../hooks';
 // TODO(burdon): Factor out to effect in plugin set document title.
 export const ActiveNode = () => {
   const [id] = useAttended();
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
   const activeNode = useNode(graph, id);
   useNodeActionExpander(activeNode);