@dxos/plugin-deck 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/src/components/DeckLayout/DeckMain.tsx

@@ -2,26 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import { untracked } from '@preact/signals-core';
 import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  createIntent,
-  useCapability,
-  useIntentDispatcher,
-  usePluginManager,
-} from '@dxos/app-framework';
+import { useAtomCapability, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { Main, type MainProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
+import { Main, type MainContentProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
 import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
-import { mainPaddingTransitions, mx } from '@dxos/react-ui-theme';
+import { mainPaddingTransitions, mx } from '@dxos/ui-theme';
 
-import { DeckCapabilities } from '../../capabilities';
-import { useBreakpoints, useHoistStatusbar } from '../../hooks';
-import { meta } from '../../meta';
-import { type DeckSettingsProps, getMode } from '../../types';
+import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
+import { DeckCapabilities, getMode } from '../../types';
 import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
 import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 import { Plank } from '../Plank';
@@ -32,11 +23,12 @@ import { StatusBar } from './StatusBar';
 import { Topbar } from './Topbar';
 
 export const DeckMain = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(meta.id)?.value;
-  const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { sidebarState, complementarySidebarState, complementarySidebarPanel, deck } = context;
-  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
+  const { invokeSync } = useOperationInvoker();
+  const settings = useAtomCapability(DeckCapabilities.Settings);
+  const { state, deck, updateState } = useDeckState();
+  const { sidebarState, complementarySidebarState, complementarySidebarPanel } = state;
+  const { active, companionOpen, companionVariant, fullscreen, solo, plankSizing } = deck;
+  const effectiveCompanionVariant = companionOpen ? companionVariant : undefined;
   const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
@@ -49,10 +41,8 @@ export const DeckMain = () => {
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
     // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-    const attended = untracked(() => {
-      const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
-      return attention.current;
-    });
+    const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+    const attended = attention.getCurrent();
     const firstId = solo ?? active[0];
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
@@ -66,31 +56,26 @@ export const DeckMain = () => {
   const [isNotMobile] = useMediaQuery('md');
   const shouldRevert = useRef(false);
   useEffect(() => {
-    if (!isNotMobile && getMode(deck) === 'deck') {
+    if (!isNotMobile && layoutMode === 'deck') {
       // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-      const attended = untracked(() => {
-        const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
-        return attention.current;
-      });
+      const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+      const attended = attention.getCurrent();
 
       shouldRevert.current = true;
-      void dispatch(
-        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: attended[0], options: { mode: 'solo' } }),
-      );
-    } else if (isNotMobile && getMode(deck) === 'solo' && shouldRevert.current) {
-      void dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { revert: true } }));
+      invokeSync(LayoutOperation.SetLayoutMode, { subject: attended[0], mode: 'solo' });
+    } else if (isNotMobile && layoutMode === 'solo' && shouldRevert.current) {
+      invokeSync(LayoutOperation.SetLayoutMode, { revert: true });
     }
-  }, [isNotMobile, deck, dispatch]);
+    // NOTE: Using `layoutMode` instead of `deck` to avoid infinite loops caused by object reference changes.
+  }, [isNotMobile, layoutMode, invokeSync]);
 
   // When deck is disabled in settings, set to solo mode if the current layout mode is deck.
-  // TODO(thure): Applying this as an effect should be avoided over emitting the intent only when the setting changes.
+  // TODO(thure): Applying this as an effect should be avoided over emitting the operation only when the setting changes.
   useEffect(() => {
-    if (settings?.enableDeck && layoutMode === 'deck') {
-      void dispatch(
-        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: active[0], options: { mode: 'solo' } }),
-      );
+    if (!settings?.enableDeck && layoutMode === 'deck') {
+      invokeSync(LayoutOperation.SetLayoutMode, { subject: active[0], mode: 'solo' });
     }
-  }, [settings?.enableDeck, dispatch, active, layoutMode]);
+  }, [settings?.enableDeck, invokeSync, active, layoutMode]);
 
   /**
    * Clear scroll restoration state if the window is resized.
@@ -134,9 +119,9 @@ export const DeckMain = () => {
 
   const mainPosition = useMemo(
     () => [
-      'grid !block-start-[env(safe-area-inset-top)]',
-      topbar && '!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-      hoistStatusbar && 'lg:block-end-[--statusbar-size]',
+      'grid !top-[env(safe-area-inset-top)]',
+      topbar && '!top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+      hoistStatusbar && 'lg:bottom-(--dx-statusbar-size)',
     ],
     [topbar, hoistStatusbar],
   );
@@ -145,19 +130,33 @@ export const DeckMain = () => {
     return active.reduce(
       (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
         acc.order[entryId] = acc.itemsCount + 1;
-        acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
+        acc.itemsCount += companionOpen ? 3 : 2;
         return acc;
       },
       { order: {}, itemsCount: 0 },
     );
-  }, [active, activeCompanions]);
+  }, [active, companionOpen]);
+
+  const handleNavigationSidebarStateChange = useCallback(
+    (next: typeof sidebarState) => {
+      updateState((s) => ({ ...s, sidebarState: next }));
+    },
+    [updateState],
+  );
+
+  const handleComplementarySidebarStateChange = useCallback(
+    (next: typeof complementarySidebarState) => {
+      updateState((s) => ({ ...s, complementarySidebarState: next }));
+    },
+    [updateState],
+  );
 
   return (
     <Main.Root
-      navigationSidebarState={fullscreen ? 'closed' : context.sidebarState}
-      onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
-      complementarySidebarState={fullscreen ? 'closed' : context.complementarySidebarState}
-      onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
+      navigationSidebarState={fullscreen ? 'closed' : sidebarState}
+      complementarySidebarState={fullscreen ? 'closed' : complementarySidebarState}
+      onNavigationSidebarStateChange={handleNavigationSidebarStateChange}
+      onComplementarySidebarStateChange={handleComplementarySidebarStateChange}
     >
       {/* Left sidebar. */}
       <Sidebar />
@@ -184,26 +183,27 @@ export const DeckMain = () => {
           style={
             {
               '--main-spacing': settings?.encapsulatedPlanks ? '0.75rem' : '0',
-              '--dx-main-sidebarWidth':
+              '--dx-main-sidebar-width':
                 sidebarState === 'expanded'
-                  ? 'var(--nav-sidebar-size)'
+                  ? 'var(--dx-nav-sidebar-size)'
                   : sidebarState === 'collapsed'
-                    ? 'var(--l0-size)'
+                    ? 'var(--dx-l0-size)'
                     : '0',
-              '--dx-main-complementaryWidth':
+              '--dx-main-complementary-width':
                 complementarySidebarState === 'expanded'
-                  ? 'var(--complementary-sidebar-size)'
+                  ? 'var(--dx-complementary-sidebar-size)'
                   : complementarySidebarState === 'collapsed'
-                    ? 'var(--rail-size)'
+                    ? 'var(--dx-rail-size)'
                     : '0',
-              '--dx-main-contentFirstWidth': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-              '--dx-main-contentLastWidth': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-            } as MainProps['style']
+              '--dx-main-content-first-width': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+              '--dx-main-content-last-width': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+            } as MainContentProps['style']
           }
         >
+          {/* Deck mode. */}
           <div
             role='none'
-            className={!solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
+            className={!solo ? 'relative bg-deck-surface overflow-hidden' : 'sr-only'}
             {...(solo && { inert: true })}
           >
             {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
@@ -216,7 +216,7 @@ export const DeckMain = () => {
               size='contain'
               itemsCount={itemsCount - 1}
               classNames={[
-                'absolute inset-block-[--main-spacing] -inset-inline-px bs-[calc(100%-2*var(--main-spacing))]',
+                'absolute inset-y-(--main-spacing) -inset-w-px h-[calc(100%-2*var(--main-spacing))]',
                 mainPaddingTransitions,
               ]}
               style={padding}
@@ -227,7 +227,7 @@ export const DeckMain = () => {
                   <PlankSeparator order={order[entryId] - 1} encapsulate={!!settings?.enableDeck} />
                   <Plank
                     id={entryId}
-                    companionId={activeCompanions?.[entryId]}
+                    companionVariant={effectiveCompanionVariant}
                     part='deck'
                     order={order[entryId]}
                     active={active}
@@ -238,9 +238,11 @@ export const DeckMain = () => {
               ))}
             </Stack>
           </div>
+
+          {/* Solo mode. */}
           <div
             role='none'
-            className={solo ? 'relative overflow-hidden bg-deckSurface' : 'sr-only'}
+            className={solo ? 'relative overflow-hidden bg-deck-surface' : 'sr-only'}
             {...(!solo && { inert: true })}
           >
             {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
@@ -256,7 +258,7 @@ export const DeckMain = () => {
             >
               <Plank
                 id={solo}
-                companionId={solo ? activeCompanions?.[solo] : undefined}
+                companionVariant={effectiveCompanionVariant}
                 part='solo'
                 layoutMode={layoutMode}
                 settings={settings}
@@ -279,7 +281,7 @@ const PlankSeparator = ({ order, encapsulate }: { order: number; encapsulate?: b
   order > 0 ? (
     <span
       role='separator'
-      className={mx('row-span-2 bg-deckSurface', encapsulate ? 'is-0' : 'is-4')}
+      className={mx('row-span-2 bg-deck-surface', encapsulate ? 'w-0' : 'w-4')}
       style={{ gridColumn: order }}
     />
   ) : null;

package/src/components/DeckLayout/Dialog.tsx

@@ -2,33 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
-import { PlankContentError } from '../Plank';
+import { useDeckState } from '../../hooks';
+import { PlankErrorFallback } from '../Plank';
 
 export const Dialog = () => {
-  const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { dialogOpen, dialogType, dialogBlockAlign, dialogOverlayClasses, dialogOverlayStyle, dialogContent } = context;
+  const { state, updateEphemeral } = useDeckState();
+  const { dialogOpen, dialogType, dialogBlockAlign, dialogOverlayClasses, dialogOverlayStyle, dialogContent } = state;
   const Root = dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
   const Overlay = dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
 
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      updateEphemeral((s) => ({ ...s, dialogOpen: nextOpen }));
+    },
+    [updateEphemeral],
+  );
+
   // TODO(thure): End block alignment affecting `modal` and whether the surface renders in an overlay is tailored to the needs of the ambient chat dialog. As the feature matures, consider separating concerns.
   return (
-    <Root
-      modal={dialogBlockAlign !== 'end'}
-      open={dialogOpen}
-      onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}
-    >
+    <Root modal={dialogBlockAlign !== 'end'} open={dialogOpen} onOpenChange={handleOpenChange}>
       {dialogBlockAlign === 'end' ? (
         // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
-        <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
+        <Surface.Surface
+          role='dialog'
+          data={dialogContent}
+          limit={1}
+          fallback={PlankErrorFallback}
+          placeholder={<div />}
+        />
       ) : (
         <Overlay blockAlign={dialogBlockAlign} classNames={dialogOverlayClasses} style={dialogOverlayStyle}>
-          <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
+          <Surface.Surface role='dialog' data={dialogContent} limit={1} fallback={PlankErrorFallback} />
         </Overlay>
       )}
     </Root>

package/src/components/DeckLayout/Fallback.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
-import { errorText, mx } from '@dxos/react-ui-theme';
 
 import { meta } from '../../meta';
 
@@ -13,13 +12,10 @@ export const Fallback = () => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div role='none' className='min-bs-screen is-full flex items-center justify-center p-8'>
+    <div role='none' className='min-h-screen w-full flex items-center justify-center p-8'>
       <p
         role='alert'
-        className={mx(
-          errorText,
-          'border border-error-400/50 rounded-md flex items-center justify-center p-8 font-normal text-lg',
-        )}
+        className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-fill rounded-md'
       >
         {t('plugin error message')}
       </p>

package/src/components/DeckLayout/Popover.tsx

@@ -3,12 +3,16 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
-import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useObjectNavigate } from '@dxos/app-toolkit/ui';
+import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
+import { useDeckState } from '../../hooks';
+import { meta } from '../../meta';
 
 export type DeckPopoverRootProps = PropsWithChildren<{}>;
 
@@ -21,43 +25,61 @@ type DeckPopoverContextValue = {
 const [DeckPopoverProvider, useDeckPopoverContext] = createContext<DeckPopoverContextValue>('DeckPopover');
 
 export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { state } = useDeckState();
   const virtualRef = useRef<HTMLButtonElement | null>(null);
   const [virtualIter, setVirtualIter] = useState(0);
   const [open, setOpen] = useState(false);
   const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
   // TODO(thure): This is a workaround for the race condition between displaying a Popover and either rendering
-  //  the anchor further down the tree or measuring the virtual trigger’s client rect.
+  //  the anchor further down the tree or measuring the virtual trigger's client rect.
   useEffect(() => {
     setOpen(false);
-    if (layout.popoverOpen) {
+    if (state.popoverOpen) {
       if (debounceRef.current) {
         clearTimeout(debounceRef.current);
       }
-      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
-        virtualRef.current = layout.popoverAnchor ?? null;
+      if (state.popoverAnchor && virtualRef.current !== state.popoverAnchor) {
+        virtualRef.current = state.popoverAnchor ?? null;
         setVirtualIter((iter) => iter + 1);
       }
       debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
     }
-  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
+  }, [state.popoverOpen, state.popoverAnchorId, state.popoverAnchor, state.popoverContent]);
 
   return (
     <DeckPopoverProvider setOpen={setOpen}>
       <Popover.Root modal={false} open={open}>
-        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {state.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
         {children}
       </Popover.Root>
     </DeckPopoverProvider>
   );
 };
 
+// Extracts the subject from popover content if it has one, otherwise returns the content as-is.
+const getPopoverSubject = (content: unknown): unknown =>
+  content && typeof content === 'object' && 'subject' in content ? (content as { subject: unknown }).subject : content;
+
 export const PopoverContent = () => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { t } = useTranslation(meta.id);
+  const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext('PopoverContent');
+  const { invokeSync } = useOperationInvoker();
+  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    updateEphemeral((state) => ({
+      ...state,
+      popoverOpen: false,
+      popoverAnchor: undefined,
+      popoverAnchorId: undefined,
+      popoverSide: undefined,
+    }));
+  }, [updateEphemeral]);
 
-  const handleClose = useCallback(
+  const handleInteractOutside = useCallback(
     (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
       if (
         // TODO(thure): CodeMirror should not focus itself when it updates.
@@ -66,36 +88,52 @@ export const PopoverContent = () => {
       ) {
         event.preventDefault();
       } else {
-        setOpen(false);
-        layout.popoverOpen = false;
-        layout.popoverAnchor = undefined;
-        layout.popoverAnchorId = undefined;
-        layout.popoverSide = undefined;
+        handleClose();
       }
     },
-    [setOpen],
+    [handleClose],
   );
 
-  const collisionBoundaries: HTMLElement[] = useMemo(() => {
-    const closest = layout.popoverAnchor?.closest('[data-popover-collision-boundary]') as
-      | HTMLElement
-      | null
-      | undefined;
-    return closest ? [closest] : [];
-  }, [layout.popoverAnchor]);
-
   return (
     <Popover.Portal>
       <Popover.Content
-        side={layout.popoverSide}
-        onInteractOutside={handleClose}
-        onEscapeKeyDown={handleClose}
-        collisionBoundary={collisionBoundaries}
+        side={state.popoverSide}
         sticky='always'
         hideWhenDetached
+        onInteractOutside={handleInteractOutside}
+        onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          <Surface role='card--popover' data={layout.popoverContent} limit={1} />
+          {/* TODO(burdon): Set/disable column context. */}
+          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
+          {state.popoverKind === 'card' && (
+            <Card.Root border={false} classNames='dx-card-popover'>
+              <Card.Toolbar>
+                {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
+                {state.popoverContentRef ? (
+                  <Card.ToolbarIconButton
+                    icon='ph--arrow-square-out--regular'
+                    iconOnly
+                    label={t('open item label')}
+                    onClick={() => {
+                      invokeSync(LayoutOperation.Open, {
+                        subject: [state.popoverContentRef!],
+                      });
+                    }}
+                  />
+                ) : (
+                  <div />
+                )}
+                {state.popoverTitle ? (
+                  <Card.Title onClick={handleNavigate}>{toLocalizedString(state.popoverTitle, t)}</Card.Title>
+                ) : (
+                  <span />
+                )}
+                <Card.CloseIconButton onClick={handleClose} />
+              </Card.Toolbar>
+              <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
+            </Card.Root>
+          )}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/DeckLayout/StatusBar.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { useLandmarkMover } from '@dxos/react-ui';
 
 export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
@@ -12,11 +12,11 @@ export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   return (
     <div
       role='contentinfo'
-      className='fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs border-separator z-[2] flex text-description'
+      className='fixed bottom-0 inset-x-0 h-(--dx-statusbar-size) border-y border-separator z-[2] flex text-description'
       {...mover}
     >
-      {showHints && <Surface role='hints' limit={1} />}
-      <Surface role='status-bar' limit={1} />
+      {showHints && <Surface.Surface role='hints' limit={1} />}
+      <Surface.Surface role='status-bar' limit={1} />
     </div>
   );
 };

package/src/components/DeckLayout/Toast.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type LayoutAction } from '@dxos/app-framework';
+import { type LayoutOperation } from '@dxos/app-toolkit';
 import {
   Button,
   Icon,
@@ -28,14 +28,14 @@ export const Toast = ({
   closeLabel,
   onAction,
   onOpenChange,
-}: LayoutAction.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
+}: LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
   const { t } = useTranslation(meta.id);
 
   return (
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
       <NaturalToast.Body>
         <NaturalToast.Title classNames='items-center'>
-          {icon && <Icon icon={icon} size={5} classNames='inline mr-1' />}
+          {icon && <Icon icon={icon} classNames='inline mr-1' />}
           {title && <span>{toLocalizedString(title, t)}</span>}
         </NaturalToast.Title>
         {description && (
@@ -61,7 +61,7 @@ export const Toast = ({
 };
 
 export type ToasterProps = {
-  toasts?: LayoutAction.Toast[];
+  toasts?: LayoutOperation.Toast[];
   onDismissToast?: (id: string) => void;
 };
 
@@ -72,7 +72,7 @@ export const Toaster = ({ toasts, onDismissToast }: ToasterProps) => {
         <Toast
           {...toast}
           key={toast.id}
-          onOpenChange={(open) => {
+          onOpenChange={(open: boolean) => {
             if (!open) {
               onDismissToast?.(toast.id);
             }

package/src/components/Plank/Plank.stories.tsx

@@ -5,20 +5,30 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { withTheme } from '@dxos/react-ui/testing';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Stack } from '@dxos/react-ui-stack';
 
-import { DeckStateFactory } from '../../capabilities';
+import { DeckState } from '../../capabilities';
+import { meta as pluginMeta } from '../../meta';
 import { translations } from '../../translations';
 
 import { Plank } from './Plank';
 
+const TestPlugin = Plugin.define(pluginMeta).pipe(
+  Plugin.addModule({
+    id: Capability.getModuleTag(DeckState),
+    activatesOn: AppActivationEvents.AppGraphReady,
+    activate: () => DeckState(),
+  }),
+  Plugin.make,
+);
+
 const meta = {
-  title: 'plugins/plugin-deck/Plank',
+  title: 'plugins/plugin-deck/components/Plank',
   component: Plank,
   render: (args) => {
     return (
@@ -28,10 +38,10 @@ const meta = {
     );
   },
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
-      plugins: [AttentionPlugin(), SettingsPlugin(), IntentPlugin(), GraphPlugin()],
-      capabilities: () => DeckStateFactory(),
+      plugins: [...corePlugins(), TestPlugin()],
     }),
   ],
   parameters: {