@dxos/plugin-deck 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/containers/Sidebar/ComplementarySidebar.tsx

@@ -0,0 +1,209 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
+import { IconButton, type Label, Main, Panel, toLocalizedString, Toolbar, useTranslation } from '@dxos/react-ui';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { iconSize, mx } from '@dxos/ui-theme';
+
+import { type DeckCompanion, useBreakpoints, useDeckCompanions, useDeckState, useHoistStatusbar } from '#hooks';
+import { meta } from '#meta';
+import { getMode } from '#types';
+import { layoutAppliesTopbar } from '../../util';
+import { PlankErrorFallback, PlankLoading } from '../Plank';
+
+import { ToggleComplementarySidebarButton } from './SidebarButton';
+
+const label = ['complementary-sidebar.title', { ns: meta.id }] satisfies Label;
+
+export type ComplementarySidebarProps = {
+  current?: string;
+};
+
+export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const { t } = useTranslation(meta.id);
+  const { state, deck, updateState } = useDeckState();
+  const layoutMode = getMode(deck);
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
+
+  const companions = useDeckCompanions();
+  const activeCompanion = companions.find((companion) => getLinkedVariant(companion.id) === current);
+  const activeId = activeCompanion && getLinkedVariant(activeCompanion.id);
+  const [internalValue, setInternalValue] = useState(activeId);
+
+  useEffect(() => {
+    setInternalValue(activeId);
+  }, [activeId]);
+
+  const handleTabClick = useCallback(
+    (event: MouseEvent) => {
+      const nextValue = event.currentTarget.getAttribute('data-value') as string;
+      if (nextValue === activeId) {
+        updateState((state) => ({
+          ...state,
+          complementarySidebarState: state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
+        }));
+      } else {
+        setInternalValue(nextValue);
+        updateState((state) => ({ ...state, complementarySidebarState: 'expanded' }));
+        void invokePromise(LayoutOperation.UpdateComplementary, { subject: nextValue });
+      }
+    },
+    [state.complementarySidebarState, activeId, invokePromise, updateState],
+  );
+
+  const data = useMemo(
+    () =>
+      activeCompanion && {
+        id: activeCompanion.id,
+        subject: activeCompanion.data,
+      },
+    [activeCompanion?.id, activeCompanion?.data],
+  );
+
+  useEffect(() => {
+    if (!activeId) {
+      void invokePromise(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+    }
+  }, [activeId, invokePromise]);
+
+  return (
+    <Main.ComplementarySidebar
+      label={label}
+      classNames={[
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
+      ]}
+    >
+      {/* R0 Tabs */}
+      <Tabs.Root orientation='vertical' value={internalValue} classNames='contents'>
+        <div
+          data-tauri-drag-region
+          role='none'
+          style={iconSize(5)}
+          className={mx(
+            'absolute z-20 inset-y-0 end-0 w-(--dx-r0-size)!',
+            'py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator',
+            'grid grid-cols-1 grid-rows-[1fr_min-content] bg-toolbar-surface dx-contain-layout dx-app-drag',
+          )}
+        >
+          {/* TODO(burdon): ScrollArea. */}
+          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-rail-action) overflow-y-auto'>
+            {companions.map((companion) => (
+              <Tabs.Tab key={getLinkedVariant(companion.id)} value={getLinkedVariant(companion.id)} asChild>
+                <IconButton
+                  label={toLocalizedString(companion.properties.label, t)}
+                  icon={companion.properties.icon}
+                  iconOnly
+                  tooltipSide='left'
+                  data-value={getLinkedVariant(companion.id)}
+                  variant={
+                    activeId === getLinkedVariant(companion.id)
+                      ? state.complementarySidebarState === 'expanded'
+                        ? 'primary'
+                        : 'ghost'
+                      : 'ghost'
+                  }
+                  onClick={handleTabClick}
+                />
+              </Tabs.Tab>
+            ))}
+          </Tabs.Tablist>
+          {!hoistStatusbar && (
+            <div
+              role='none'
+              className='grid grid-cols-1 auto-rows-(--dx-rail-item) gap-0.5 overflow-y-auto'
+              style={iconSize(4)}
+            >
+              <Surface.Surface role='status-indicator' />
+            </div>
+          )}
+          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1'>
+            <ToggleComplementarySidebarButton />
+          </div>
+        </div>
+
+        {/* R1 Content. */}
+        {activeId &&
+          companions.map((companion) => (
+            <Tabs.Panel
+              key={getLinkedVariant(companion.id)}
+              value={getLinkedVariant(companion.id)}
+              classNames={[
+                'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
+                'inset-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)',
+              ]}
+              {...(state.complementarySidebarState !== 'expanded' && { inert: true })}
+            >
+              <ComplementarySidebarPanel
+                companion={companion}
+                activeId={activeId}
+                data={data}
+                hoistStatusbar={hoistStatusbar}
+              />
+            </Tabs.Panel>
+          ))}
+      </Tabs.Root>
+    </Main.ComplementarySidebar>
+  );
+};
+
+type ComplementarySidebarPanelProps = {
+  companion: DeckCompanion;
+  activeId: string;
+  data?: {
+    id: string;
+    subject: any;
+  };
+  hoistStatusbar: boolean;
+};
+
+const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
+  const { t } = useTranslation(meta.id);
+
+  if (getLinkedVariant(companion.id) !== activeId && !data) {
+    return null;
+  }
+
+  return (
+    <Panel.Root>
+      <Panel.Toolbar asChild size='lg'>
+        <Toolbar.Root classNames='bg-modal-surface border-b border-subdued-separator'>
+          <IconButton
+            label={toLocalizedString(companion.properties.label, t)}
+            icon={companion.properties.icon}
+            iconOnly
+            tooltipSide='left'
+            data-value={getLinkedVariant(companion.id)}
+            classNames='h-10 w-10'
+            variant='default'
+          />
+          <div role='none' className='px-1'>
+            {toLocalizedString(companion.properties.label, t)}
+          </div>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content classNames='bg-base-surface'>
+        <Surface.Surface
+          role={`deck-companion--${getLinkedVariant(companion.id)}`}
+          data={data}
+          fallback={PlankErrorFallback}
+          placeholder={<PlankLoading />}
+        />
+      </Panel.Content>
+      {!hoistStatusbar && (
+        <Panel.Statusbar classNames='px-1' size='sm'>
+          <Surface.Surface role='status-bar--r1-footer' limit={1} />
+        </Panel.Statusbar>
+      )}
+    </Panel.Root>
+  );
+};

package/src/{components → containers}/Sidebar/Sidebar.tsx

@@ -4,15 +4,15 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { type Label, Main } from '@dxos/react-ui';
 
-import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
-import { meta } from '../../meta';
-import { getMode } from '../../types';
+import { useBreakpoints, useDeckState, useHoistStatusbar } from '#hooks';
+import { meta } from '#meta';
+import { getMode } from '#types';
 import { layoutAppliesTopbar } from '../../util';
 
-const label = ['sidebar title', { ns: meta.id }] satisfies Label;
+const label = ['sidebar.title', { ns: meta.id }] satisfies Label;
 
 export const Sidebar = () => {
   const { state, deck } = useDeckState();
@@ -32,11 +32,11 @@ export const Sidebar = () => {
       label={label}
       classNames={[
         'grid',
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
-      <Surface role='navigation' data={navigationData} limit={1} />
+      <Surface.Surface role='navigation' data={navigationData} limit={1} />
     </Main.NavigationSidebar>
   );
 };

package/src/{components → containers}/Sidebar/SidebarButton.tsx

@@ -4,24 +4,25 @@
 
 import React, { useCallback } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { getCompanionId, useDeckCompanions, useDeckState } from '../../hooks';
-import { meta } from '../../meta';
+import { useDeckCompanions, useDeckState } from '#hooks';
+import { meta } from '#meta';
 
 export const ToggleSidebarButton = ({
   classNames,
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const { state, updateState } = useDeckState();
+  const { updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
 
   const handleClick = useCallback(() => {
-    updateState((s) => ({
-      ...s,
-      sidebarState: s.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
+    updateState((state) => ({
+      ...state,
+      sidebarState: state.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
     }));
   }, [updateState]);
 
@@ -31,7 +32,7 @@ export const ToggleSidebarButton = ({
       icon='ph--sidebar--regular'
       iconOnly
       size={4}
-      label={t('open navigation sidebar label')}
+      label={t('open-navigation-sidebar.label')}
       onClick={handleClick}
       classNames={classNames}
     />
@@ -43,7 +44,7 @@ export const CloseSidebarButton = () => {
   const { t } = useTranslation(meta.id);
 
   const handleClick = useCallback(() => {
-    updateState((s) => ({ ...s, sidebarState: 'collapsed' }));
+    updateState((state) => ({ ...state, sidebarState: 'collapsed' }));
   }, [updateState]);
 
   return (
@@ -52,9 +53,9 @@ export const CloseSidebarButton = () => {
       icon='ph--caret-line-left--regular'
       iconOnly
       size={4}
-      label={t('close navigation sidebar label')}
+      label={t('close-navigation-sidebar.button')}
       onClick={handleClick}
-      classNames='rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
+      classNames='rounded-none px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]'
     />
   );
 };
@@ -64,20 +65,20 @@ export const ToggleComplementarySidebarButton = ({
   classNames,
   current,
 }: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const { state, updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
 
   const companions = useDeckCompanions();
   const handleClick = useCallback(() => {
     const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-    updateState((s) => ({ ...s, complementarySidebarState: nextState }));
+    updateState((state) => ({ ...state, complementarySidebarState: nextState }));
 
-    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionId(companions[0].id));
+    const subject = state.complementarySidebarPanel ?? (companions[0] && getLinkedVariant(companions[0].id));
     if (nextState === 'expanded' && !current && subject) {
-      invokeSync(Common.LayoutOperation.UpdateComplementary, { subject });
+      void invokePromise(LayoutOperation.UpdateComplementary, { subject });
     }
-  }, [state, updateState, current, companions, invokeSync]);
+  }, [state, updateState, current, companions, invokePromise]);
 
   return (
     <IconButton
@@ -85,8 +86,7 @@ export const ToggleComplementarySidebarButton = ({
       classNames={['[&>svg]:-scale-x-100', classNames]}
       icon='ph--sidebar-simple--regular'
       iconOnly
-      label={t('open complementary sidebar label')}
-      size={inR0 ? 5 : 4}
+      label={t('open-complementary-sidebar.label')}
       tooltipSide={inR0 ? 'left' : undefined}
       onClick={handleClick}
     />

package/src/containers/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export * from './Deck';
+export * from './Plank';
+export * from './Sidebar';
+
+export const DeckLayout: ComponentType<any> = lazy(() => import('./DeckLayout'));

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useDeckState';
 export * from './useHoistStatusbar';
 export * from './useMainSize';
 export * from './useNodeActionExpander';
+export * from './useSelectedCompanion';

package/src/hooks/useCompanions.ts

@@ -4,15 +4,15 @@
 
 import { useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+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();
-  const nodes = useConnections(graph, id);
+  const nodes = useConnections(graph, id, 'child');
   const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
   return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
 };

package/src/hooks/useDeckCompanions.ts

@@ -2,18 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useAppGraph } from '@dxos/app-framework/react';
+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 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,
@@ -29,7 +24,7 @@ export type DeckCompanion = NodeType.Node<
 
 export const useDeckCompanions = (): DeckCompanion[] => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, Node.RootId);
+  const connections = useConnections(graph, Node.RootId, 'child');
   const companions = connections.filter((node) => node.type === DECK_COMPANION_TYPE) as DeckCompanion[];
   return companions.toSorted((a, b) => byPosition(a.properties, b.properties));
 };

package/src/hooks/useDeckState.ts

@@ -5,17 +5,17 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import { useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 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;
 };
 
 /**
@@ -33,18 +33,17 @@ export type DeckStateHook = {
  * Returns the combined state, the active deck, and update functions for each atom.
  */
 export const useDeckState = (): DeckStateHook => {
-  const registry = useCapability(Common.Capability.AtomRegistry);
+  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/useHoistStatusbar.ts

@@ -4,10 +4,10 @@
 
 import { useMemo } from 'react';
 
-import { useAtomCapability } from '@dxos/app-framework/react';
+import { useAtomCapability } from '@dxos/app-framework/ui';
 import { useThemeContext } from '@dxos/react-ui';
 
-import { DeckCapabilities, type LayoutMode } from '../types';
+import { DeckCapabilities, type LayoutMode } from '#types';
 
 export const useHoistStatusbar = (breakpoint: string, layoutMode?: LayoutMode): boolean => {
   const { safeAreaPadding } = useThemeContext();

package/src/hooks/useMainSize.ts

@@ -7,7 +7,7 @@ import { useMainContext } from '@dxos/react-ui';
 export const useMainSize = () => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext('DeckPluginPlank');
   return {
-    'data-sidebar-inline-start-state': navigationSidebarState,
-    'data-sidebar-inline-end-state': complementarySidebarState,
+    'data-sidebar-left-state': navigationSidebarState,
+    'data-sidebar-right-state': complementarySidebarState,
   };
 };

package/src/hooks/useNodeActionExpander.ts

@@ -11,7 +11,7 @@ export const useNodeActionExpander = (node?: Node.Node) => {
     if (node) {
       const frame = requestAnimationFrame(() => {
         const graph = Graph.getGraph(node);
-        void Graph.expand(graph, node.id);
+        void Graph.expand(graph, node.id, 'action');
       });
       return () => cancelAnimationFrame(frame);
     }

package/src/hooks/useSelectedCompanion.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { getLinkedVariant } from '@dxos/react-ui-attention';
+import { type Node } from '@dxos/plugin-graph';
+
+/**
+ * Resolves which companion to show based on variant preference.
+ * Falls back to first available if preferred variant not found.
+ */
+export const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string) => {
+  return useMemo(() => {
+    if (companions.length === 0) {
+      return { companionId: undefined, variant: undefined };
+    }
+
+    // Try to find companion matching the preferred variant.
+    if (preferredVariant) {
+      const preferred = companions.find((companion) => getLinkedVariant(companion.id) === preferredVariant);
+      if (preferred) {
+        return { companionId: preferred.id, variant: getLinkedVariant(preferred.id) };
+      }
+    }
+
+    // Fallback to first companion.
+    const first = companions[0];
+    return { companionId: first.id, variant: getLinkedVariant(first.id) };
+  }, [companions, preferredVariant]);
+};

package/src/layout.ts

@@ -4,29 +4,16 @@
 
 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, type Settings } from '#types';
 
 type OpenLayoutEntryOptions = {
   key?: string;
-  positioning?: NewPlankPositioning;
+  positioning?: Settings.NewPlankPositioning;
   pivotId?: string;
-  variant?: string;
 };
 
-export const openEntry = (deck: string[], _entryId: string, options?: OpenLayoutEntryOptions): 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
     if (draft.find((id) => id === entryId)) {
       return;

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/deck',
+  id: 'org.dxos.plugin.deck',
   name: 'Layout',
   description: trim`
     Flexible layout system for arranging workspace views in tabs, splits, and panels.

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/operation';
+
+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;