@dxos/plugin-deck 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/hooks/useCompanions.ts

@@ -8,7 +8,7 @@ import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useConnections } from '@dxos/plugin-graph';
 import { byPosition } from '@dxos/util';
 
-import { PLANK_COMPANION_TYPE } from '../types';
+import { PLANK_COMPANION_TYPE } from '#types';
 
 export const useCompanions = (id?: string) => {
   const { graph } = useAppGraph();

package/src/hooks/useDeckCompanions.ts

@@ -5,15 +5,10 @@
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, type Node as NodeType } from '@dxos/plugin-graph';
 import { useConnections } from '@dxos/plugin-graph';
-import { type Label } from '@dxos/ui-types';
+import { type Label } from '@dxos/ui-types/translations';
 import { type Position, byPosition } from '@dxos/util';
 
-import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../types';
-
-export const getCompanionId = (id: string) => {
-  const [_, companionId] = id.split(ATTENDABLE_PATH_SEPARATOR);
-  return companionId ?? 'never';
-};
+import { DECK_COMPANION_TYPE } from '#types';
 
 export type DeckCompanion = NodeType.Node<
   any,
@@ -24,6 +19,7 @@ export type DeckCompanion = NodeType.Node<
     /** If true, the panel will not be wrapped in a scroll area. */
     fixed?: boolean;
     position?: Position;
+    joyride?: string;
   }
 >;
 

package/src/hooks/useDeckState.ts

@@ -11,11 +11,11 @@ import { invariant } from '@dxos/invariant';
 
 import {
   DeckCapabilities,
-  type DeckEphemeralStateProps,
+  type EphemeralDeckState,
   type DeckPluginState,
   type DeckState,
-  type DeckStateProps,
-} from '../types';
+  type StoredDeckState,
+} from '#types';
 
 export type DeckStateHook = {
   /** Combined state value (reactive). Includes both persisted and ephemeral state. */
@@ -23,9 +23,9 @@ export type DeckStateHook = {
   /** The active deck, computed from decks[activeDeck]. */
   deck: DeckState;
   /** Update persisted state. */
-  updateState: (fn: (current: DeckStateProps) => DeckStateProps) => void;
+  updateState: (fn: (current: StoredDeckState) => StoredDeckState) => void;
   /** Update ephemeral state. */
-  updateEphemeral: (fn: (current: DeckEphemeralStateProps) => DeckEphemeralStateProps) => void;
+  updateEphemeral: (fn: (current: EphemeralDeckState) => EphemeralDeckState) => void;
 };
 
 /**
@@ -36,15 +36,14 @@ export const useDeckState = (): DeckStateHook => {
   const registry = useCapability(Capabilities.AtomRegistry);
   const stateAtom = useCapability(DeckCapabilities.State);
   const ephemeralAtom = useCapability(DeckCapabilities.EphemeralState);
-
   const persistedState = useAtomValue(stateAtom);
   const ephemeralState = useAtomValue(ephemeralAtom);
 
   // Compute deck from decks[activeDeck] to ensure it's always current.
   const deck = useMemo(() => {
-    const d = persistedState.decks[persistedState.activeDeck];
-    invariant(d, `Deck not found: ${persistedState.activeDeck}`);
-    return d;
+    const deck = persistedState.decks[persistedState.activeDeck];
+    invariant(deck, `Deck not found: ${persistedState.activeDeck}`);
+    return deck;
   }, [persistedState.decks, persistedState.activeDeck]);
 
   // Combine persisted and ephemeral state into a unified view.
@@ -57,26 +56,18 @@ export const useDeckState = (): DeckStateHook => {
   );
 
   const updateState = useCallback(
-    (fn: (current: DeckStateProps) => DeckStateProps) => {
+    (fn: (current: StoredDeckState) => StoredDeckState) => {
       registry.set(stateAtom, fn(registry.get(stateAtom)));
     },
     [registry, stateAtom],
   );
 
   const updateEphemeral = useCallback(
-    (fn: (current: DeckEphemeralStateProps) => DeckEphemeralStateProps) => {
+    (fn: (current: EphemeralDeckState) => EphemeralDeckState) => {
       registry.set(ephemeralAtom, fn(registry.get(ephemeralAtom)));
     },
     [registry, ephemeralAtom],
   );
 
-  return useMemo(
-    () => ({
-      state,
-      deck,
-      updateState,
-      updateEphemeral,
-    }),
-    [state, deck, updateState, updateEphemeral],
-  );
+  return useMemo(() => ({ state, deck, updateState, updateEphemeral }), [state, deck, updateState, updateEphemeral]);
 };

package/src/hooks/useSelectedCompanion.ts

@@ -5,8 +5,7 @@
 import { useMemo } from 'react';
 
 import { type Node } from '@dxos/plugin-graph';
-
-import { parseEntryId } from '../layout';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 
 /**
  * Resolves which companion to show based on variant preference.
@@ -20,19 +19,14 @@ export const useSelectedCompanion = (companions: Node.Node[], preferredVariant?:
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((companion) => {
-        const { variant } = parseEntryId(companion.id);
-        return variant === preferredVariant;
-      });
+      const preferred = companions.find((companion) => getLinkedVariant(companion.id) === preferredVariant);
       if (preferred) {
-        const { variant } = parseEntryId(preferred.id);
-        return { companionId: preferred.id, variant };
+        return { companionId: preferred.id, variant: getLinkedVariant(preferred.id) };
       }
     }
 
     // Fallback to first companion.
     const first = companions[0];
-    const { variant } = parseEntryId(first.id);
-    return { companionId: first.id, variant };
+    return { companionId: first.id, variant: getLinkedVariant(first.id) };
   }, [companions, preferredVariant]);
 };

package/src/index.ts

@@ -2,7 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { DeckCapabilities, DeckEvents } from './types';
-export * from './DeckPlugin';
 export * from './meta';
-export { useCompanions } from './hooks';
+export * from './types';

package/src/layout.test.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, expect, test } from 'vitest';
+
+import { openEntry, openSubjectsOnActiveDeck } from './layout';
+
+describe('openEntry', () => {
+  test('pushes new id to the end', () => {
+    expect(openEntry(['a', 'b'], 'c')).toEqual(['a', 'b', 'c']);
+  });
+
+  test('no-op when id already present', () => {
+    expect(openEntry(['a', 'b'], 'a')).toEqual(['a', 'b']);
+  });
+
+  test('replaces by key prefix when key matches', () => {
+    expect(openEntry(['foo+1', 'b'], 'foo+2', { key: 'foo' })).toEqual(['foo+2', 'b']);
+  });
+});
+
+describe('openSubjectsOnActiveDeck', () => {
+  test('truncates after pivot then appends one subject', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b', 'c', 'd'], ['e'], { pivotId: 'a' })).toEqual(['a', 'e']);
+  });
+
+  test('appends to end when pivot not in deck', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b'], ['c'], { pivotId: 'missing' })).toEqual(['a', 'b', 'c']);
+  });
+
+  test('without pivotId appends each subject to the end', () => {
+    expect(openSubjectsOnActiveDeck(['a'], ['b', 'c'], {})).toEqual(['a', 'b', 'c']);
+  });
+
+  test('with pivot keeps all new subjects after truncate', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b', 'c'], ['x', 'y'], { pivotId: 'a' })).toEqual(['a', 'x', 'y']);
+  });
+
+  test('passes key through to openEntry', () => {
+    expect(openSubjectsOnActiveDeck(['foo+1'], ['foo+2'], { key: 'foo' })).toEqual(['foo+2']);
+  });
+
+  test('returns deck unchanged when subject is already open (no pivot)', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b', 'c'], ['b'])).toEqual(['a', 'b', 'c']);
+  });
+
+  test('returns deck unchanged when subject is already open (with pivot)', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b', 'c'], ['c'], { pivotId: 'a' })).toEqual(['a', 'b', 'c']);
+  });
+
+  test('returns deck unchanged when all subjects are already open', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b', 'c'], ['b', 'c'], { pivotId: 'a' })).toEqual(['a', 'b', 'c']);
+  });
+
+  test('truncates after pivot when subject is new even if some are already open', () => {
+    expect(openSubjectsOnActiveDeck(['a', 'b', 'c'], ['b', 'd'], { pivotId: 'a' })).toEqual(['a', 'b', 'd']);
+  });
+});

package/src/layout.ts

@@ -4,38 +4,23 @@
 
 import { produce } from 'immer';
 
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-
-import { type DeckAction, type NewPlankPositioning } from './types';
-
-export const createEntryId = (entryId: string, variant?: string) =>
-  variant ? `${entryId}${ATTENDABLE_PATH_SEPARATOR}${variant}` : entryId;
-
-export const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
+import { type DeckAction } from '#types';
 
 type OpenLayoutEntryOptions = {
   key?: string;
-  positioning?: NewPlankPositioning;
-  pivotId?: string;
-  variant?: string;
 };
 
-export const openEntry = (deck: string[], _entryId: string, options?: OpenLayoutEntryOptions): string[] => {
-  return produce(deck, (draft) => {
-    const entryId = createEntryId(_entryId, options?.variant);
-
-    // Check that the entry is not already in the part
+/**
+ * Mutates a deck list using stack semantics: new items open to the right (`push`).
+ * Callers that open from a pivot must truncate the deck first (see deck `open` operation).
+ */
+export const openEntry = (deck: readonly string[], entryId: string, options?: OpenLayoutEntryOptions): string[] => {
+  return produce([...deck], (draft) => {
     if (draft.find((id) => id === entryId)) {
       return;
     }
 
     const key = options?.key;
-    const plankPositioning = options?.positioning ?? 'start';
-    const pivotId = options?.pivotId;
-
     if (key) {
       const index = draft.findIndex((id) => id.split('+')[0] === key);
       if (index !== -1) {
@@ -44,27 +29,40 @@ export const openEntry = (deck: string[], _entryId: string, options?: OpenLayout
       }
     }
 
-    if (pivotId) {
-      const pivotIndex = draft.findIndex((id) => id === pivotId);
-      if (pivotIndex !== -1) {
-        if (plankPositioning === 'start') {
-          draft.splice(pivotIndex, 0, entryId);
-        } else {
-          draft.splice(pivotIndex + 1, 0, entryId);
-        }
-        return;
-      }
-    }
-
-    // If no pivot found or provided, fall back to original behavior
-    if (plankPositioning === 'start') {
-      draft.unshift(entryId);
-    } else {
-      draft.push(entryId);
-    }
+    draft.push(entryId);
   });
 };
 
+export type OpenSubjectsOnActiveDeckOptions = {
+  pivotId?: string;
+  key?: string;
+};
+
+/**
+ * Computes the next multi-mode `active` list for {@link LayoutOperation.Open}.
+ * If `pivotId` is present and found, truncates the deck after that id.
+ * Applies each subject with {@link openEntry}.
+ * If the pivot is missing, appends onto the full `active` list.
+ *
+ * When all subjects are already present in the active deck, the deck is returned
+ * unchanged so that pivot truncation does not discard open planks when navigating
+ * to something that is already visible.
+ */
+export const openSubjectsOnActiveDeck = (
+  active: readonly string[],
+  subject: readonly string[],
+  options?: OpenSubjectsOnActiveDeckOptions,
+): string[] => {
+  if (subject.length > 0 && subject.every((id) => active.includes(id))) {
+    return [...active];
+  }
+
+  const { pivotId, key } = options ?? {};
+  const pivotIndex = pivotId ? active.findIndex((id) => id === pivotId) : -1;
+  const baseDeck = pivotIndex !== -1 ? active.slice(0, pivotIndex + 1) : [...active];
+  return subject.reduce((acc, entryId) => openEntry(acc, entryId, { key }), baseDeck);
+};
+
 export const closeEntry = (deck: string[], entryId: string): string[] => {
   return produce(deck, (draft) => {
     const index = draft.findIndex((id) => id === entryId);

package/src/meta.ts

@@ -2,15 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
 import { trim } from '@dxos/util';
 
-export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/deck',
+export const meta = Plugin.makeMeta({
+  key: DXN.make('org.dxos.plugin.deck'),
   name: 'Layout',
+  author: 'DXOS',
+  spec: 'PLUGIN.mdl',
   description: trim`
-    Flexible layout system for arranging workspace views in tabs, splits, and panels.
-    Customize your workspace organization with drag-and-drop layout management.
+    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: 'ph--layout--regular',
-};
+  tags: ['system'],
+});

package/src/operations/add-toast.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities } from '@dxos/app-framework';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+
+import { DeckCapabilities } from '../types';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.AddToast> = LayoutOperation.AddToast.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      yield* Capabilities.updateAtomValue(DeckCapabilities.EphemeralState, (state) => ({
+        ...state,
+        toasts: [...state.toasts, input as LayoutOperation.Toast],
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/adjust.ts

@@ -0,0 +1,82 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { Graph } from '@dxos/plugin-graph';
+import { byPosition } from '@dxos/util';
+
+import { incrementPlank } from '../layout';
+import { DeckCapabilities, DeckOperation, PLANK_COMPANION_TYPE } from '../types';
+import { computeActiveUpdates } from '../util';
+import { updateActiveDeck } from './helpers';
+
+const handler: Operation.WithHandler<typeof DeckOperation.Adjust> = DeckOperation.Adjust.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const _state = yield* Capabilities.getAtomValue(DeckCapabilities.State);
+      const deck = yield* DeckCapabilities.getDeck();
+      const attention = yield* Capability.get(AttentionCapabilities.Attention);
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+
+      let soloOperation:
+        | { type: 'solo'; entryId: string; mode: string }
+        | { type: 'unsolo'; entryId: string }
+        | undefined;
+
+      if (input.type === 'increment-end' || input.type === 'increment-start') {
+        const next = incrementPlank(deck.active, input);
+        const { deckUpdates } = computeActiveUpdates({ next, deck, attention });
+        yield* Capabilities.updateAtomValue(DeckCapabilities.State, (state) => updateActiveDeck(state, deckUpdates));
+      }
+
+      if (input.type.startsWith('solo')) {
+        const entryId = input.id;
+        if (!deck.solo) {
+          soloOperation = { type: 'solo', entryId, mode: input.type };
+        } else {
+          if (input.type === 'solo--fullscreen') {
+            soloOperation = { type: 'solo', entryId, mode: 'solo--fullscreen' };
+          } else if (input.type === 'solo') {
+            soloOperation = { type: 'unsolo', entryId };
+          }
+        }
+      }
+
+      if (soloOperation?.type === 'solo') {
+        yield* Operation.invoke(LayoutOperation.SetLayoutMode, {
+          subject: soloOperation.entryId,
+          mode: soloOperation.mode,
+        });
+      } else if (soloOperation?.type === 'unsolo') {
+        yield* Operation.invoke(LayoutOperation.SetLayoutMode, { mode: 'multi' });
+        yield* Operation.invoke(LayoutOperation.Open, { subject: [soloOperation.entryId] });
+      }
+
+      if (input.type === 'companion') {
+        const companion = Function.pipe(
+          Graph.getNode(graph, input.id),
+          Option.map((node) =>
+            Graph.getConnections(graph, node.id, 'child')
+              .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())),
+        );
+
+        if (Option.isSome(companion)) {
+          yield* Operation.invoke(LayoutOperation.UpdateCompanion, { subject: companion.value.id });
+        }
+      }
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/close.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+
+import { closeEntry } from '../layout';
+import { DeckCapabilities } from '../types';
+import { computeActiveUpdates } from '../util';
+import { updateActiveDeck } from './helpers';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Close> = LayoutOperation.Close.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const deck = yield* DeckCapabilities.getDeck();
+      const attention = yield* Capability.get(AttentionCapabilities.Attention);
+
+      const active = deck.solo ? [deck.solo] : deck.active;
+      const next = input.subject.reduce((acc, id) => closeEntry(acc, id), active);
+      const { deckUpdates, toAttend } = computeActiveUpdates({ next, deck, attention });
+      yield* Capabilities.updateAtomValue(DeckCapabilities.State, (state) => updateActiveDeck(state, deckUpdates));
+
+      if (toAttend) {
+        yield* Operation.schedule(LayoutOperation.ScrollIntoView, { subject: toAttend });
+      }
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/helpers.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { invariant } from '@dxos/invariant';
+
+import { type DeckState, type StoredDeckState } from '../types';
+
+export const updateActiveDeck = (current: StoredDeckState, deckUpdates: Partial<DeckState>): StoredDeckState => {
+  const currentDeck = current.decks[current.activeDeck];
+  invariant(currentDeck, `Deck not found: ${current.activeDeck}`);
+  return {
+    ...current,
+    decks: {
+      ...current.decks,
+      [current.activeDeck]: {
+        ...currentDeck,
+        ...deckUpdates,
+      },
+    },
+  };
+};

package/src/operations/index.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const DeckOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./add-toast'),
+  () => import('./adjust'),
+  () => import('./close'),
+  () => import('./open'),
+  () => import('./revert-workspace'),
+  () => import('./scroll-into-view'),
+  () => import('./set'),
+  () => import('./set-layout-mode'),
+  () => import('./switch-workspace'),
+  () => import('./update-companion'),
+  () => import('./update-complementary'),
+  () => import('./update-dialog'),
+  () => import('./update-plank-size'),
+  () => import('./update-popover'),
+  () => import('./update-sidebar'),
+);