@dxos/plugin-deck 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/src/DeckPlugin.ts

@@ -5,17 +5,21 @@
 import { setAutoFreeze } from 'immer';
 
 import { allOf, Capabilities, contributes, defineModule, definePlugin, Events, oneOf } from '@dxos/app-framework';
+import { AttentionEvents } from '@dxos/plugin-attention';
 import { translations as stackTranslations } from '@dxos/react-ui-stack';
 
 import {
   AppGraphBuilder,
   CheckAppScheme,
-  DeckSettings,
   DeckState,
   LayoutIntentResolver,
+  LayoutState,
+  LocationState,
+  NavigationIntentResolver,
+  ReactContext,
   ReactRoot,
+  DeckSettings,
   ReactSurface,
-  Tools,
   UrlHandler,
 } from './capabilities';
 import { DeckEvents } from './events';
@@ -29,20 +33,35 @@ setAutoFreeze(false);
 
 export const DeckPlugin = () =>
   definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/check-app-scheme`,
-      activatesOn: Events.SettingsReady,
-      activate: CheckAppScheme,
-    }),
+    //
+    // Settings
+    //
+
     defineModule({
       id: `${meta.id}/module/settings`,
       activatesOn: Events.SetupSettings,
       activate: DeckSettings,
     }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.Startup,
+      activate: ReactSurface,
+    }),
+
+    //
+    // Layout
+    //
+
     defineModule({
       id: `${meta.id}/module/layout`,
       activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
-      activatesAfter: [Events.LayoutReady, DeckEvents.StateReady],
+      activatesAfter: [Events.LayoutReady],
+      activate: LayoutState,
+    }),
+    defineModule({
+      id: `${meta.id}/module/deck`,
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      activatesAfter: [DeckEvents.StateReady],
       activate: DeckState,
     }),
     defineModule({
@@ -51,14 +70,14 @@ export const DeckPlugin = () =>
       activate: () => contributes(Capabilities.Translations, [...translations, ...stackTranslations]),
     }),
     defineModule({
-      id: `${meta.id}/module/react-root`,
+      id: `${meta.id}/module/react-context`,
       activatesOn: Events.Startup,
-      activate: ReactRoot,
+      activate: ReactContext,
     }),
     defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupSurfaces,
-      activate: ReactSurface,
+      id: `${meta.id}/module/react-root`,
+      activatesOn: Events.Startup,
+      activate: ReactRoot,
     }),
     defineModule({
       id: `${meta.id}/module/layout-intent-resolver`,
@@ -70,14 +89,35 @@ export const DeckPlugin = () =>
       activatesOn: Events.SetupAppGraph,
       activate: AppGraphBuilder,
     }),
+
+    //
+    // Navigation
+    //
+
     defineModule({
-      id: `${meta.id}/module/tools`,
-      activatesOn: Events.Startup,
-      activate: Tools,
+      id: `${meta.id}/module/location`,
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      activatesAfter: [Events.LocationReady],
+      activate: LocationState,
+    }),
+    defineModule({
+      id: `${meta.id}/module/check-app-scheme`,
+      activatesOn: Events.SettingsReady,
+      activate: CheckAppScheme,
     }),
     defineModule({
       id: `${meta.id}/module/url`,
-      activatesOn: allOf(Events.DispatcherReady, DeckEvents.StateReady),
+      activatesOn: allOf(
+        Events.DispatcherReady,
+        Events.LayoutReady,
+        Events.LocationReady,
+        AttentionEvents.AttentionReady,
+      ),
       activate: UrlHandler,
     }),
+    defineModule({
+      id: `${meta.id}/module/navigation-intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: NavigationIntentResolver,
+    }),
   ]);

package/src/capabilities/capabilities.ts

@@ -5,13 +5,12 @@
 import { defineCapability, type Label } from '@dxos/app-framework';
 import { type DeepReadonly } from '@dxos/util';
 
+import { type DeckContextType } from '../components';
 import { DECK_PLUGIN } from '../meta';
-import { type DeckState } from '../types';
 
 export namespace DeckCapabilities {
-  export const DeckState = defineCapability<DeepReadonly<DeckState>>(`${DECK_PLUGIN}/capability/state`);
-  export const MutableDeckState = defineCapability<DeckState>(`${DECK_PLUGIN}/capability/state`);
-
+  export const DeckState = defineCapability<DeepReadonly<DeckContextType>>(`${DECK_PLUGIN}/capability/state`);
+  export const MutableDeckState = defineCapability<DeckContextType>(`${DECK_PLUGIN}/capability/state`);
   export const ComplementaryPanel = defineCapability<{ id: string; label: Label; icon: string }>(
     `${DECK_PLUGIN}/capability/complementary-panel`,
   );

package/src/capabilities/index.ts

@@ -2,16 +2,7 @@
 // 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 LayoutIntentResolver = lazy(() => import('./intent-resolver'));
-export const ReactRoot = lazy(() => import('./react-root'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-export const DeckSettings = lazy(() => import('./settings'));
-export const DeckState = lazy(() => import('./state'));
-export const Tools = lazy(() => import('./tools'));
-export const UrlHandler = lazy(() => import('./url-handler'));
-
 export * from './capabilities';
+export * from './layout';
+export * from './navigation';
+export * from './settings';

package/src/capabilities/{app-graph-builder.ts → layout/app-graph-builder.ts}

@@ -2,12 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
+import {
+  Capabilities,
+  contributes,
+  createIntent,
+  LayoutAction,
+  NavigationAction,
+  openIds,
+  type PluginsContext,
+} from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { createExtension, type Node, ROOT_ID } from '@dxos/plugin-graph';
 
-import { DeckCapabilities } from './capabilities';
-import { DECK_PLUGIN } from '../meta';
+import { DECK_PLUGIN } from '../../meta';
 
 export default (context: PluginsContext) =>
   contributes(
@@ -16,15 +23,13 @@ export default (context: PluginsContext) =>
       id: DECK_PLUGIN,
       filter: (node): node is Node<null> => node.id === ROOT_ID,
       actions: () => {
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-
         // 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`,
+          id: `${LayoutAction.SetLayoutMode._tag}/fullscreen`,
           data: async () => {
             const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-            await dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'fullscreen' } }));
+            await dispatch(createIntent(LayoutAction.SetLayoutMode, { layoutMode: 'fullscreen' }));
           },
           properties: {
             label: ['toggle fullscreen label', { ns: DECK_PLUGIN }],
@@ -37,15 +42,13 @@ export default (context: PluginsContext) =>
         };
 
         const closeCurrent = {
-          id: `${LayoutAction.Close._tag}/current`,
+          id: `${NavigationAction.Close._tag}/current`,
           data: async () => {
             const attention = context.requestCapability(AttentionCapabilities.Attention);
             const attended = attention.current.at(-1);
             if (attended) {
               const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-              await dispatch(
-                createIntent(LayoutAction.Close, { part: 'main', subject: [attended], options: { state: false } }),
-              );
+              await dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [attended] } }));
             }
           },
           properties: {
@@ -55,13 +58,18 @@ export default (context: PluginsContext) =>
         };
 
         const closeOthers = {
-          id: `${LayoutAction.Close._tag}/others`,
+          id: `${NavigationAction.Close._tag}/others`,
           data: async () => {
             const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            const location = context.requestCapability(Capabilities.Location);
             const attention = context.requestCapability(AttentionCapabilities.Attention);
             const attended = attention.current.at(-1);
-            const ids = state.deck.active.filter((id) => id !== attended) ?? [];
-            await dispatch(createIntent(LayoutAction.Close, { part: 'main', subject: ids, options: { state: false } }));
+            const ids = openIds(location.active, ['main']).filter((id) => id !== attended);
+            await dispatch(
+              createIntent(NavigationAction.Close, {
+                activeParts: { main: ids },
+              }),
+            );
           },
           properties: {
             label: ['close others label', { ns: DECK_PLUGIN }],
@@ -70,14 +78,13 @@ export default (context: PluginsContext) =>
         };
 
         const closeAll = {
-          id: `${LayoutAction.Close._tag}/all`,
+          id: `${NavigationAction.Close._tag}/all`,
           data: async () => {
             const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            const location = context.requestCapability(Capabilities.Location);
             await dispatch(
-              createIntent(LayoutAction.Close, {
-                part: 'main',
-                subject: state.deck.active,
-                options: { state: false },
+              createIntent(NavigationAction.Close, {
+                activeParts: { main: openIds(location.active, ['main']) },
               }),
             );
           },
@@ -87,23 +94,8 @@ export default (context: PluginsContext) =>
           },
         };
 
-        const toggleSidebar = {
-          id: `${LayoutAction.UpdateSidebar._tag}/nav`,
-          data: async () => {
-            state.sidebarState = state.sidebarState === 'expanded' ? 'collapsed' : 'expanded';
-          },
-          properties: {
-            label: [
-              state.sidebarState === 'expanded' ? 'collapse navigation sidebar label' : 'open navigation sidebar label',
-              { ns: DECK_PLUGIN },
-            ],
-            icon: 'ph--sidebar--regular',
-            disposition: 'pin-end',
-            l0Breakpoint: 'lg',
-          },
-        };
-
-        return !state.deck.solo ? [closeCurrent, closeOthers, closeAll, toggleSidebar] : [toggleSidebar];
+        const layoutMode = context.requestCapabilities(Capabilities.Layout)[0]?.layoutMode;
+        return layoutMode === 'deck' ? [closeCurrent, closeOthers, closeAll] : [];
       },
     }),
   );

package/src/capabilities/layout/deck.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes } from '@dxos/app-framework';
+import { LocalStorageStore } from '@dxos/local-storage';
+
+import { type DeckContextType } from '../../components';
+import { DeckCapabilities } from '../capabilities';
+
+// NOTE: The key is this currently for backwards compatibility of storage.
+const DECK_KEY = 'dxos.org/settings/deck';
+
+export default () => {
+  const deck = new LocalStorageStore<DeckContextType>(DECK_KEY, {
+    plankSizing: {},
+    currentUndoId: undefined,
+    // TODO(Zan): Cap depth!
+    layoutModeHistory: [],
+  });
+
+  deck.prop({ key: 'plankSizing', type: LocalStorageStore.json<Record<string, number>>() });
+
+  return contributes(DeckCapabilities.DeckState, deck.values, () => deck.close());
+};

package/src/capabilities/layout/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const DeckState = lazy(() => import('./deck'));
+export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+export const LayoutIntentResolver = lazy(() => import('./intent-resolver'));
+export const LayoutState = lazy(() => import('./state'));
+export const ReactContext = lazy(() => import('./react-context'));
+export const ReactRoot = lazy(() => import('./react-root'));

package/src/capabilities/layout/intent-resolver.ts

@@ -0,0 +1,128 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { batch } from '@preact/signals-core';
+
+import {
+  Capabilities,
+  createResolver,
+  contributes,
+  IntentAction,
+  LayoutAction,
+  openIds,
+  Toast as ToastSchema,
+  type LayoutMode,
+  type PluginsContext,
+} from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
+import { log } from '@dxos/log';
+
+import { DECK_PLUGIN } from '../../meta';
+import { DeckAction } from '../../types';
+import { DeckCapabilities } from '../capabilities';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver(DeckAction.UpdatePlankSize, (data) => {
+      const deck = context.requestCapability(DeckCapabilities.MutableDeckState);
+      deck.plankSizing[data.id] = data.size;
+    }),
+    createResolver(IntentAction.ShowUndo, (data) => {
+      const deck = context.requestCapability(DeckCapabilities.MutableDeckState);
+      const layout = context.requestCapability(Capabilities.MutableLayout);
+      const { undoPromise: undo } = context.requestCapability(Capabilities.IntentDispatcher);
+
+      // TODO(wittjosiah): Support undoing further back than the last action.
+      if (deck.currentUndoId) {
+        layout.toasts = layout.toasts.filter((toast) => toast.id !== deck.currentUndoId);
+      }
+      deck.currentUndoId = `${IntentAction.ShowUndo._tag}-${Date.now()}`;
+      layout.toasts = [
+        ...layout.toasts,
+        {
+          id: deck.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(
+      LayoutAction.SetLayout,
+      ({ element, state, component, subject, anchorId, dialogBlockAlign, dialogType }) => {
+        const layout = context.requestCapability(Capabilities.MutableLayout);
+        switch (element) {
+          case 'sidebar': {
+            layout.sidebarOpen = state ?? !layout.sidebarOpen;
+            break;
+          }
+
+          case 'complementary': {
+            layout.complementarySidebarOpen = !!state;
+            // TODO(thure): Hoist content into the c11y sidebar of Deck.
+            // layout.complementarySidebarContent = component || subject ? { component, subject } : null;
+            break;
+          }
+
+          case 'dialog': {
+            layout.dialogOpen = state ?? Boolean(component);
+            layout.dialogContent = component ? { component, subject } : null;
+            layout.dialogBlockAlign = dialogBlockAlign ?? 'center';
+            layout.dialogType = dialogType;
+            break;
+          }
+
+          case 'popover': {
+            layout.popoverOpen = state ?? Boolean(component);
+            layout.popoverContent = component ? { component, subject } : null;
+            layout.popoverAnchorId = anchorId;
+            break;
+          }
+
+          case 'toast': {
+            if (S.is(ToastSchema)(subject)) {
+              layout.toasts = [...layout.toasts, subject];
+            }
+            break;
+          }
+        }
+      },
+    ),
+    createResolver(LayoutAction.SetLayoutMode, (data) => {
+      const layout = context.requestCapability(Capabilities.MutableLayout);
+      const location = context.requestCapability(Capabilities.MutableLocation);
+      const deck = context.requestCapability(DeckCapabilities.MutableDeckState);
+
+      const setMode = (mode: LayoutMode) => {
+        const main = openIds(location.active, ['main']);
+        const solo = openIds(location.active, ['solo']);
+        const current = layout.layoutMode === 'solo' ? solo : main;
+        // When un-soloing, the solo entry is added to the deck.
+        const next = mode === 'solo' ? solo : [...main, ...solo];
+        const removed = current.filter((id) => !next.includes(id));
+        const closed = Array.from(new Set([...location.closed.filter((id) => !next.includes(id)), ...removed]));
+
+        location.closed = closed;
+        layout.layoutMode = mode;
+      };
+
+      return batch(() => {
+        if ('layoutMode' in data) {
+          deck.layoutModeHistory.push(layout.layoutMode);
+          setMode(data.layoutMode);
+        } else if (data.revert) {
+          setMode(deck.layoutModeHistory.pop() ?? 'solo');
+        } else {
+          log.warn('Invalid layout mode', data);
+        }
+      });
+    }),
+    createResolver(LayoutAction.ScrollIntoView, ({ id }) => {
+      const layout = context.requestCapability(Capabilities.MutableLayout);
+      layout.scrollIntoView = id;
+    }),
+  ]);

package/src/capabilities/layout/react-context.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { Capabilities, contributes, useCapability } from '@dxos/app-framework';
+
+import { DeckContext, LayoutContext } from '../../components';
+import { DECK_PLUGIN } from '../../meta';
+import { DeckCapabilities } from '../capabilities';
+
+export default () =>
+  contributes(Capabilities.ReactContext, {
+    id: DECK_PLUGIN,
+    context: (props: PropsWithChildren) => {
+      const layout = useCapability(Capabilities.Layout);
+      const deck = useCapability(DeckCapabilities.MutableDeckState);
+
+      return (
+        <LayoutContext.Provider value={layout}>
+          <DeckContext.Provider value={deck}>{props.children}</DeckContext.Provider>
+        </LayoutContext.Provider>
+      );
+    },
+  });

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

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

package/src/capabilities/layout/state.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, type LayoutMode, type Layout } from '@dxos/app-framework';
+import { LocalStorageStore } from '@dxos/local-storage';
+
+// NOTE: The key is this currently for backwards compatibility of storage.
+const LAYOUT_KEY = 'dxos.org/settings/layout';
+
+export default () => {
+  const layout = new LocalStorageStore<Layout>(LAYOUT_KEY, {
+    layoutMode: 'solo',
+    sidebarOpen: true,
+    complementarySidebarOpen: false,
+    dialogContent: null,
+    dialogOpen: false,
+    dialogBlockAlign: undefined,
+    dialogType: undefined,
+    popoverContent: null,
+    popoverAnchorId: undefined,
+    popoverOpen: false,
+    toasts: [],
+  });
+
+  layout
+    .prop({ key: 'layoutMode', type: LocalStorageStore.enum<LayoutMode>() })
+    .prop({ key: 'sidebarOpen', type: LocalStorageStore.bool() })
+    .prop({ key: 'complementarySidebarOpen', type: LocalStorageStore.bool() });
+
+  return contributes(Capabilities.Layout, layout.values, () => layout.close());
+};

package/src/capabilities/{check-app-scheme.ts → navigation/check-app-scheme.ts}

@@ -7,8 +7,8 @@
 
 import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
 
-import { DECK_PLUGIN } from '../meta';
-import { type DeckSettingsProps } from '../types';
+import { DECK_PLUGIN } from '../../meta';
+import { type DeckSettingsProps } from '../../types';
 
 const isSocket = !!(globalThis as any).__args;
 

package/src/capabilities/navigation/index.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const CheckAppScheme = lazy(() => import('./check-app-scheme'));
+export const LocationState = lazy(() => import('./location'));
+export const NavigationIntentResolver = lazy(() => import('./intent-resolver'));
+export const UrlHandler = lazy(() => import('./url-handler'));