@dxos/plugin-deck 0.7.4 → 0.7.5-labs.5f04cf6

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,25 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import {
-  type LayoutCoordinate,
-  NavigationAction,
-  SLUG_PATH_SEPARATOR,
-  Surface,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { createIntent, NavigationAction, SLUG_PATH_SEPARATOR, Surface, useIntentDispatcher } from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
-import { Main, ScrollArea } from '@dxos/react-ui';
+import { Main, ScrollArea, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
-import { railGridHorizontal, StackContext } from '@dxos/react-ui-stack';
+import { railGridHorizontal, StackContext, StackItem } from '@dxos/react-ui-stack';
+import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';
 
-import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
+import { CloseComplementarySidebarButton } from './SidebarButton';
 import { useNode, useNodeActionExpander } from '../../hooks';
+import { DECK_PLUGIN } from '../../meta';
 import { type Panel } from '../../types';
 import { useLayout } from '../LayoutContext';
 
@@ -32,56 +28,83 @@ export type ComplementarySidebarProps = {
 export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
   const { popoverAnchorId } = useLayout();
   const attended = useAttended();
-  const panel = (panels.find((p) => p.id === current) ?? panels[0])?.id;
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${panel}` : undefined;
+  const panelIds = useMemo(() => panels.map((p) => p.id), [panels]);
+  const activePanelId = panelIds.find((p) => p === current) ?? panels[0].id;
+  const activeEntryId = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${activePanelId}` : undefined;
   const { graph } = useGraph();
-  const node = useNode(graph, id);
-  const dispatch = useIntentDispatcher();
+  const node = useNode(graph, activeEntryId);
+  const { t } = useTranslation(DECK_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   useNodeActionExpander(node);
 
-  const actions = useMemo(
-    () =>
-      panels.map(({ id, label, icon }) => ({
-        id: `complementary-${id}`,
-        data: () => {
-          void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: id } } });
-        },
-        properties: {
-          label,
-          icon,
-          menuItemType: 'toggle',
-          isChecked: panel === id,
-        },
-      })),
-    [panel],
-  );
+  const [internalValue, setInternalValue] = useState(activePanelId);
+
+  useEffect(() => {
+    setInternalValue(activePanelId);
+  }, [activePanelId]);
 
-  // TODO(wittjosiah): Ensure that id is always defined.
-  const coordinate: LayoutCoordinate = useMemo(() => ({ entryId: id ?? 'unknown', part: 'complementary' }), [id]);
+  const handleValueChange = useCallback(
+    (nextValue: string) => {
+      setInternalValue(nextValue);
+      void dispatch(createIntent(NavigationAction.Open, { activeParts: { complementary: nextValue } }));
+    },
+    [dispatch],
+  );
 
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
-    <Main.ComplementarySidebar>
-      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', separators: false, rail: true }}>
+    <Main.ComplementarySidebar classNames='lg:block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]'>
+      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
         <div role='none' className={mx(railGridHorizontal, 'grid grid-cols-[100%] bs-full')}>
-          <NodePlankHeading coordinate={coordinate} node={node} popoverAnchorId={popoverAnchorId} actions={actions} />
-          <ScrollArea.Root>
-            <ScrollArea.Viewport>
-              {node && (
-                <Surface
-                  key={id}
-                  role={`complementary--${panel}`}
-                  limit={1}
-                  data={{ id, subject: node.properties.object ?? node.properties.space, popoverAnchorId }}
-                  fallback={PlankContentError}
-                  placeholder={<PlankLoading />}
-                />
-              )}
-              <ScrollArea.Scrollbar orientation='vertical'>
-                <ScrollArea.Thumb />
-              </ScrollArea.Scrollbar>
-            </ScrollArea.Viewport>
-          </ScrollArea.Root>
+          <Tabs.Root
+            orientation='horizontal'
+            value={internalValue}
+            onValueChange={handleValueChange}
+            attendableId={attended[0]}
+            classNames='contents'
+          >
+            <StackItem.Heading classNames='border-be border-separator grid grid-cols-[1fr_min-content] items-stretch'>
+              <ScrollArea.Root classNames='flex-1 min-is-0'>
+                <ScrollArea.Viewport>
+                  <Tabs.Tablist classNames='bs-[--rail-content] is-min items-stretch pis-[max(.5rem,env(safe-area-inset-left))] sm:pis-2'>
+                    {panels.map((panel) => (
+                      <Tabs.Tab key={panel.id} value={panel.id} classNames='!min-bs-0'>
+                        {toLocalizedString(panel.label, t)}
+                      </Tabs.Tab>
+                    ))}
+                  </Tabs.Tablist>
+                  <ScrollArea.Scrollbar orientation='horizontal'>
+                    <ScrollArea.Thumb />
+                  </ScrollArea.Scrollbar>
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+              <CloseComplementarySidebarButton />
+            </StackItem.Heading>
+            <ScrollArea.Root>
+              <ScrollArea.Viewport>
+                {panels.map((panel) => (
+                  <Tabs.Tabpanel key={panel.id} value={panel.id} classNames='pbe-[env(safe-area-inset-bottom)]'>
+                    {panel.id === activePanelId && node && (
+                      <Surface
+                        key={activeEntryId}
+                        role={`complementary--${activePanelId}`}
+                        data={{
+                          id: activeEntryId,
+                          subject: node.properties.object ?? node.properties.space,
+                          popoverAnchorId,
+                        }}
+                        fallback={PlankContentError}
+                        placeholder={<PlankLoading />}
+                      />
+                    )}
+                  </Tabs.Tabpanel>
+                ))}
+                <ScrollArea.Scrollbar orientation='vertical'>
+                  <ScrollArea.Thumb />
+                </ScrollArea.Scrollbar>
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Tabs.Root>
         </div>
       </StackContext.Provider>
     </Main.ComplementarySidebar>

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -5,15 +5,23 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
+import { mx } from '@dxos/react-ui-theme';
+
+import { ToggleSidebarButton } from './SidebarButton';
+import { soloInlinePadding } from '../fragments';
 
 export const ContentEmpty = () => {
   return (
     <div
       role='none'
-      className='min-bs-screen is-dvw sm:is-full flex items-center justify-center p-8'
+      className='min-bs-screen is-dvw sm:is-full p-8 grid grid-rows-[var(--rail-size)_1fr] lg:grid-rows-1'
       data-testid='layoutPlugin.firstRunMessage'
     >
-      <div role='none' className='grid place-items-center grid-rows-[min-content_min-content]'>
+      <div role='toolbar' className={mx(soloInlinePadding, 'bs-[--rail-action] flex items-stretch lg:hidden')}>
+        <ToggleSidebarButton />
+        <span role='none' className='grow' />
+      </div>
+      <div role='none' className='grid place-items-center'>
         <Surface role='keyshortcuts' />
       </div>
     </div>

package/src/components/DeckLayout/DeckLayout.tsx

@@ -2,24 +2,20 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Sidebar as MenuIcon } from '@phosphor-icons/react';
 import { untracked } from '@preact/signals-core';
 import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
 
-import { type LayoutParts, Surface, type Toast as ToastSchema, firstIdInPart, usePlugin } from '@dxos/app-framework';
-import { type AttentionPluginProvides } from '@dxos/plugin-attention';
 import {
-  AlertDialog,
-  Button,
-  Dialog as NaturalDialog,
-  Main,
-  Popover,
-  useOnTransition,
-  useTranslation,
-  type MainProps,
-} from '@dxos/react-ui';
+  firstIdInPart,
+  Surface,
+  usePluginManager,
+  type LayoutParts,
+  type Toast as ToastSchema,
+} from '@dxos/app-framework';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { AlertDialog, Dialog as NaturalDialog, Main, Popover, useOnTransition, type MainProps } from '@dxos/react-ui';
 import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
-import { getSize, mainPaddingTransitions } from '@dxos/react-ui-theme';
+import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
 import { ComplementarySidebar, type ComplementarySidebarProps } from './ComplementarySidebar';
@@ -29,9 +25,10 @@ import { Plank } from './Plank';
 import { Sidebar } from './Sidebar';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
-import { DECK_PLUGIN } from '../../meta';
+import { Topbar } from './Topbar';
 import { type Overscroll } from '../../types';
-import { calculateOverscroll } from '../../util';
+import { calculateOverscroll, useBreakpoints } from '../../util';
+import { useHoistStatusbar } from '../../util/useHoistStatusbar';
 import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
@@ -60,10 +57,10 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
     popoverContent,
     popoverAnchorId,
   } = context;
-  const { t } = useTranslation(DECK_PLUGIN);
+  const breakpoint = useBreakpoints();
+  const hoistStatusbar = useHoistStatusbar(breakpoint);
   const { plankSizing } = useDeckContext();
-  // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-  const attentionPlugin = usePlugin<AttentionPluginProvides>('dxos.org/plugin/attention');
+  const pluginManager = usePluginManager();
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
   const scrollLeftRef = useRef<number | null>();
@@ -73,7 +70,11 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
 
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
-    const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
+    // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+    const attended = untracked(() => {
+      const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
+      return attention.current;
+    });
     const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
@@ -149,18 +150,8 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
           complementarySidebarOpen={context.complementarySidebarOpen}
           onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
         >
-          {/* Notch */}
-          <Main.Notch classNames='z-[21]'>
-            <Surface role='notch-start' />
-            <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
-              <span className='sr-only'>{t('open navigation sidebar label')}</span>
-              <MenuIcon weight='light' className={getSize(5)} />
-            </Button>
-            <Surface role='notch-end' />
-          </Main.Notch>
-
           {/* Left sidebar. */}
-          <Sidebar layoutParts={layoutParts} />
+          <Sidebar />
 
           {/* Right sidebar. */}
           <ComplementarySidebar panels={panels} current={layoutParts.complementary?.[0].id} />
@@ -179,7 +170,10 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
           {!isEmpty && (
             <Main.Content
               bounce
-              classNames='grid block-end-[--statusbar-size]'
+              classNames={[
+                'grid !block-start-[env(safe-area-inset-top)] lg:!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
+                hoistStatusbar && 'lg:block-end-[--statusbar-size]',
+              ]}
               handlesFocus
               style={
                 {
@@ -198,7 +192,6 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
                 {...(isSoloModeLoaded && { inert: '' })}
               >
                 <Stack
-                  separators={false}
                   orientation='horizontal'
                   size='contain'
                   classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
@@ -226,31 +219,29 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
                 className={isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
                 {...(!isSoloModeLoaded && { inert: '' })}
               >
-                <StackContext.Provider
-                  value={{ size: 'contain', orientation: 'horizontal', separators: false, rail: true }}
-                >
+                <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
                   <Plank entry={layoutParts.solo?.[0]} layoutParts={layoutParts} part='solo' layoutMode={layoutMode} />
                 </StackContext.Provider>
               </div>
             </Main.Content>
           )}
 
-          {/* Footer status. */}
-          <StatusBar showHints={showHints} />
+          {/* Status bar. */}
+          {breakpoint === 'desktop' && <Topbar />}
+          {hoistStatusbar && <StatusBar showHints={showHints} />}
         </Main.Root>
       )}
 
       {/* Global popovers. */}
       <Popover.Portal>
         <Popover.Content
-          classNames='z-[60]'
           onEscapeKeyDown={() => {
             context.popoverOpen = false;
             context.popoverAnchorId = undefined;
           }}
         >
           <Popover.Viewport>
-            <Surface role='popover' data={popoverContent} />
+            <Surface role='popover' data={popoverContent} limit={1} />
           </Popover.Viewport>
           <Popover.Arrow />
         </Popover.Content>
@@ -259,7 +250,7 @@ export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels,
       {/* Global dialog. */}
       <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
         <Dialog.Overlay blockAlign={dialogBlockAlign}>
-          <Surface role='dialog' data={dialogContent} />
+          <Surface role='dialog' data={dialogContent} limit={1} />
         </Dialog.Overlay>
       </Dialog.Root>
 

package/src/components/DeckLayout/Fullscreen.tsx

@@ -23,7 +23,7 @@ export const Fullscreen = ({ id }: { id?: string }) => {
         limit={1}
         fallback={Fallback}
         data={{
-          active: fullScreenNode?.data,
+          subject: fullScreenNode?.data,
           component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : undefined,
         }}
       />

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -5,6 +5,7 @@
 import React, { Fragment, memo, useEffect, useMemo } from 'react';
 
 import {
+  createIntent,
   LayoutAction,
   NavigationAction,
   SLUG_PATH_SEPARATOR,
@@ -13,13 +14,15 @@ import {
   type LayoutCoordinate,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation, IconButton } from '@dxos/react-ui';
+import { Icon, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { PlankControls } from './PlankControls';
+import { ToggleComplementarySidebarButton, ToggleSidebarButton } from './SidebarButton';
 import { DECK_PLUGIN } from '../../meta';
-import { useLayout } from '../LayoutContext';
+import { useBreakpoints } from '../../util';
+import { soloInlinePadding } from '../fragments';
 
 export type NodePlankHeadingProps = {
   coordinate: LayoutCoordinate;
@@ -41,16 +44,15 @@ export const NodePlankHeading = memo(
     pending,
     actions = [],
   }: NodePlankHeadingProps) => {
-    const layoutContext = useLayout();
     const { t } = useTranslation(DECK_PLUGIN);
     const { graph } = useGraph();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
     const label = pending
       ? t('pending heading')
       : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
-    const dispatch = useIntentDispatcher();
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
-    const [isNotMobile] = useMediaQuery('md');
+    const breakpoint = useBreakpoints();
 
     useEffect(() => {
       const frame = requestAnimationFrame(() => {
@@ -66,15 +68,20 @@ export const NodePlankHeading = memo(
     const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
     const capabilities = useMemo(
       () => ({
-        solo: (layoutPart === 'solo' || layoutPart === 'main') && isNotMobile,
+        solo: layoutPart === 'solo' || layoutPart === 'main',
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
       }),
-      [isNotMobile, layoutPart, canIncrementStart, canIncrementEnd],
+      [breakpoint, layoutPart, canIncrementStart, canIncrementEnd],
     );
 
     return (
-      <StackItem.Heading classNames='pie-1 border-be border-separator'>
+      <StackItem.Heading
+        classNames={[
+          'plb-1 border-be border-separator items-stretch gap-1',
+          layoutPart === 'solo' ? soloInlinePadding : 'pli-1',
+        ]}
+      >
         <ActionRoot>
           {node ? (
             <StackItem.Sigil
@@ -87,7 +94,7 @@ export const NodePlankHeading = memo(
                 typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
               }
             >
-              <Surface role='menu-footer' data={{ object: node.data }} />
+              <Surface role='menu-footer' data={{ subject: node.data }} />
             </StackItem.Sigil>
           ) : (
             <StackItem.SigilButton>
@@ -96,6 +103,7 @@ export const NodePlankHeading = memo(
             </StackItem.SigilButton>
           )}
         </ActionRoot>
+        {breakpoint !== 'desktop' && <ToggleSidebarButton />}
         <TextTooltip text={label} onlyWhenTruncating>
           <StackItem.HeadingLabel
             attendableId={attendableId}
@@ -107,13 +115,12 @@ export const NodePlankHeading = memo(
         </TextTooltip>
         {node && layoutPart !== 'complementary' && (
           // TODO(Zan): What are we doing with layout coordinate here?
-          <Surface role='navbar-end' direction='inline-reverse' data={{ object: node.data }} />
+          <Surface role='navbar-end' data={{ subject: node.data }} />
         )}
         {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
         <PlankControls
           capabilities={capabilities}
           isSolo={layoutPart === 'solo'}
-          classNames='mx-1'
           onClick={(eventType) => {
             if (!layoutPart) {
               return;
@@ -121,53 +128,27 @@ export const NodePlankHeading = memo(
 
             // TODO(Zan): Update this to use the new layout actions.
             if (eventType === 'solo') {
-              return dispatch([
-                {
-                  action: NavigationAction.ADJUST,
-                  data: { type: eventType, layoutCoordinate: { part: 'main', entryId: coordinate.entryId } },
-                },
-              ]);
+              return dispatch(
+                createIntent(NavigationAction.Adjust, {
+                  type: eventType,
+                  layoutCoordinate: { part: 'main', entryId: coordinate.entryId },
+                }),
+              );
             } else if (eventType === 'close') {
               if (layoutPart === 'complementary') {
-                return dispatch({
-                  action: LayoutAction.SET_LAYOUT,
-                  data: {
-                    element: 'complementary',
-                    state: false,
-                  },
-                });
+                return dispatch(createIntent(LayoutAction.SetLayout, { element: 'complementary', state: false }));
               } else {
-                return dispatch({
-                  action: NavigationAction.CLOSE,
-                  data: {
-                    activeParts: {
-                      [layoutPart]: [coordinate.entryId],
-                    },
-                  },
-                });
+                return dispatch(
+                  createIntent(NavigationAction.Close, { activeParts: { [layoutPart]: [coordinate.entryId] } }),
+                );
               }
             } else {
-              return dispatch({
-                action: NavigationAction.ADJUST,
-                data: { type: eventType, layoutCoordinate: coordinate },
-              });
+              return dispatch(createIntent(NavigationAction.Adjust, { type: eventType, layoutCoordinate: coordinate }));
             }
           }}
           close={layoutPart === 'complementary' ? 'minify-end' : true}
         >
-          {/* TODO(wittjosiah): This doesn't behave exactly the same as the rest of the button group. */}
-          {layoutPart !== 'complementary' && (
-            <IconButton
-              iconOnly
-              onClick={() => (layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen)}
-              variant='ghost'
-              label={t('open complementary sidebar label')}
-              classNames='!pli-2 !plb-3 [&>svg]:-scale-x-100'
-              icon='ph--sidebar-simple--regular'
-              size={4}
-              tooltipZIndex='70'
-            />
-          )}
+          <ToggleComplementarySidebarButton />
         </PlankControls>
       </StackItem.Heading>
     );

package/src/components/DeckLayout/Plank.tsx

@@ -5,16 +5,17 @@
 import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 import {
+  createIntent,
+  indexInPart,
+  LayoutAction,
+  partLength,
+  Surface,
+  useIntentDispatcher,
+  type Layout,
   type LayoutCoordinate,
   type LayoutEntry,
   type LayoutPart,
   type LayoutParts,
-  Surface,
-  useIntentDispatcher,
-  type Layout,
-  indexInPart,
-  partLength,
-  LayoutAction,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
@@ -25,8 +26,8 @@ import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
-import { DeckAction } from '../../DeckPlugin';
 import { useNode, useMainSize } from '../../hooks';
+import { DeckAction } from '../../types';
 import { useDeckContext } from '../DeckContext';
 import { useLayout } from '../LayoutContext';
 
@@ -42,7 +43,7 @@ export type PlankProps = {
 };
 
 export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: PlankProps) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry?.id ?? UNKNOWN_ID }), [entry?.id, part]);
   const { popoverAnchorId, scrollIntoView } = useLayout();
   const { plankSizing } = useDeckContext();
@@ -61,7 +62,7 @@ export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: Plan
   const size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
     debounce((nextSize: number) => {
-      return dispatch({ action: DeckAction.UPDATE_PLANK_SIZE, data: { id: coordinate.entryId, size: nextSize } });
+      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: coordinate.entryId, size: nextSize }));
     }, 200),
     [dispatch, coordinate.entryId],
   );
@@ -81,7 +82,7 @@ export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: Plan
       focusable?.focus({ preventScroll: true });
       layoutMode === 'deck' && focusable?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
       // Clear the scroll into view state once it has been actioned.
-      void dispatch({ action: LayoutAction.SCROLL_INTO_VIEW, data: { id: undefined } });
+      void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: undefined }));
     }
   }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
@@ -93,7 +94,8 @@ export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: Plan
   const data = useMemo(
     () =>
       node && {
-        ...(entry?.path ? { subject: node.data, path: entry.path } : { object: node.data }),
+        subject: node.data,
+        path: entry?.path,
         coordinate,
         popoverAnchorId,
       },

package/src/components/DeckLayout/PlankControls.tsx

@@ -4,6 +4,7 @@
 
 import React, { forwardRef } from 'react';
 
+import { type PartAdjustment } from '@dxos/app-framework';
 import {
   Button,
   ButtonGroup,
@@ -16,8 +17,7 @@ import {
 
 import { DECK_PLUGIN } from '../../meta';
 
-export type PlankControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
-export type PlankControlHandler = (event: PlankControlEvent) => void;
+export type PlankControlHandler = (event: PartAdjustment) => void;
 
 export type PlankCapabilities = {
   incrementStart?: boolean;
@@ -44,9 +44,7 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
-          {label}
-        </Tooltip.Content>
+        <Tooltip.Content side='bottom'>{label}</Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>
   );