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

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -2,23 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, memo, useCallback, useEffect, useMemo } from 'react';
+import React, { Fragment, memo, useEffect, useMemo } from 'react';
 
-import { createIntent, LayoutAction, Surface, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type Node } from '@dxos/plugin-graph';
+import {
+  createIntent,
+  LayoutAction,
+  NavigationAction,
+  SLUG_PATH_SEPARATOR,
+  Surface,
+  useIntentDispatcher,
+  type LayoutCoordinate,
+} from '@dxos/app-framework';
+import { type Node, useGraph } from '@dxos/plugin-graph';
 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 { DeckAction, SLUG_PATH_SEPARATOR } from '../../types';
 import { useBreakpoints } from '../../util';
 import { soloInlinePadding } from '../fragments';
 
 export type NodePlankHeadingProps = {
-  id: string;
-  part: 'solo' | 'deck' | 'complementary';
+  coordinate: LayoutCoordinate;
   node?: Node;
   canIncrementStart?: boolean;
   canIncrementEnd?: boolean;
@@ -29,8 +36,7 @@ export type NodePlankHeadingProps = {
 
 export const NodePlankHeading = memo(
   ({
-    id,
-    part,
+    coordinate,
     node,
     canIncrementStart,
     canIncrementEnd,
@@ -39,14 +45,14 @@ export const NodePlankHeading = memo(
     actions = [],
   }: NodePlankHeadingProps) => {
     const { t } = useTranslation(DECK_PLUGIN);
-    const { graph } = useAppGraph();
-    const breakpoint = useBreakpoints();
+    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 { dispatchPromise: dispatch } = useIntentDispatcher();
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
+    const breakpoint = useBreakpoints();
 
     useEffect(() => {
       const frame = requestAnimationFrame(() => {
@@ -57,65 +63,36 @@ export const NodePlankHeading = memo(
       return () => cancelAnimationFrame(frame);
     }, [node]);
 
+    const layoutPart = coordinate.part;
     // NOTE(Zan): Node ids may now contain a path like `${space}:${id}~comments`
-    const attendableId = id.split(SLUG_PATH_SEPARATOR).at(0);
+    const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
     const capabilities = useMemo(
       () => ({
-        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
+        solo: layoutPart === 'solo' || layoutPart === 'main',
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
       }),
-      [breakpoint, part, canIncrementStart, canIncrementEnd],
-    );
-
-    const sigilActions = useMemo(
-      () => node && [actions, graph.actions(node)].filter((a) => a.length > 0),
-      [actions, node, graph],
-    );
-    const handleAction = useCallback((action: StackItemSigilAction) => {
-      typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN });
-    }, []);
-
-    const handlePlankAction = useCallback(
-      (eventType: DeckAction.PartAdjustment) => {
-        if (eventType === 'solo') {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
-        } else if (eventType === 'close') {
-          if (part === 'complementary') {
-            return dispatch(
-              createIntent(LayoutAction.UpdateComplementary, {
-                part: 'complementary',
-                options: { state: 'collapsed' },
-              }),
-            );
-          } else {
-            return dispatch(
-              createIntent(LayoutAction.Close, { part: 'main', subject: [id], options: { state: false } }),
-            );
-          }
-        } else {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
-        }
-      },
-      [dispatch, id, part],
+      [breakpoint, layoutPart, canIncrementStart, canIncrementEnd],
     );
 
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag',
-          part === 'solo' ? soloInlinePadding : 'pli-1',
+          'plb-1 border-be border-separator items-stretch gap-1',
+          layoutPart === 'solo' ? soloInlinePadding : 'pli-1',
         ]}
       >
         <ActionRoot>
-          {node && sigilActions ? (
+          {node ? (
             <StackItem.Sigil
               icon={icon}
-              related={part === 'complementary'}
+              related={layoutPart === 'complementary'}
               attendableId={attendableId}
               triggerLabel={t('actions menu label')}
-              actions={sigilActions}
-              onAction={handleAction}
+              actions={[actions, graph.actions(node)].filter((a) => a.length > 0)}
+              onAction={(action) =>
+                typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN })
+              }
             >
               <Surface role='menu-footer' data={{ subject: node.data }} />
             </StackItem.Sigil>
@@ -126,22 +103,53 @@ export const NodePlankHeading = memo(
             </StackItem.SigilButton>
           )}
         </ActionRoot>
+        {breakpoint !== 'desktop' && <ToggleSidebarButton />}
         <TextTooltip text={label} onlyWhenTruncating>
           <StackItem.HeadingLabel
             attendableId={attendableId}
-            related={part === 'complementary'}
+            related={layoutPart === 'complementary'}
             {...(pending && { classNames: 'text-description' })}
           >
             {label}
           </StackItem.HeadingLabel>
         </TextTooltip>
-        {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
+        {node && layoutPart !== 'complementary' && (
+          // TODO(Zan): What are we doing with layout coordinate here?
+          <Surface role='navbar-end' data={{ subject: node.data }} />
+        )}
+        {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
         <PlankControls
           capabilities={capabilities}
-          isSolo={part === 'solo'}
-          onClick={handlePlankAction}
-          close={part === 'complementary' ? 'minify-end' : true}
-        />
+          isSolo={layoutPart === 'solo'}
+          onClick={(eventType) => {
+            if (!layoutPart) {
+              return;
+            }
+
+            // TODO(Zan): Update this to use the new layout actions.
+            if (eventType === 'solo') {
+              return dispatch(
+                createIntent(NavigationAction.Adjust, {
+                  type: eventType,
+                  layoutCoordinate: { part: 'main', entryId: coordinate.entryId },
+                }),
+              );
+            } else if (eventType === 'close') {
+              if (layoutPart === 'complementary') {
+                return dispatch(createIntent(LayoutAction.SetLayout, { element: 'complementary', state: false }));
+              } else {
+                return dispatch(
+                  createIntent(NavigationAction.Close, { activeParts: { [layoutPart]: [coordinate.entryId] } }),
+                );
+              }
+            } else {
+              return dispatch(createIntent(NavigationAction.Adjust, { type: eventType, layoutCoordinate: coordinate }));
+            }
+          }}
+          close={layoutPart === 'complementary' ? 'minify-end' : true}
+        >
+          <ToggleComplementarySidebarButton />
+        </PlankControls>
       </StackItem.Heading>
     );
   },

package/src/components/DeckLayout/Plank.tsx

@@ -6,56 +6,65 @@ import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo,
 
 import {
   createIntent,
+  indexInPart,
   LayoutAction,
+  partLength,
   Surface,
-  useCapability,
-  useAppGraph,
   useIntentDispatcher,
+  type Layout,
+  type LayoutCoordinate,
+  type LayoutEntry,
+  type LayoutPart,
+  type LayoutParts,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
+import { useGraph } from '@dxos/plugin-graph';
 import { useAttendableAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
 import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 
-import { NodePlankHeading, type NodePlankHeadingProps } from './NodePlankHeading';
+import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
-import { DeckCapabilities } from '../../capabilities';
 import { useNode, useMainSize } from '../../hooks';
-import { DeckAction, type LayoutMode } from '../../types';
+import { DeckAction } from '../../types';
+import { useDeckContext } from '../DeckContext';
+import { useLayout } from '../LayoutContext';
 
 const UNKNOWN_ID = 'unknown_id';
 
 export type PlankProps = {
-  id?: string;
-  part: NodePlankHeadingProps['part'];
-  path?: string[];
+  entry?: LayoutEntry;
+  layoutParts: LayoutParts;
+  // TODO(wittjosiah): Remove. Pass in LayoutCoordinate instead of LayoutEntry.
+  part: LayoutPart;
+  layoutMode: Layout['layoutMode'];
   order?: number;
-  active?: string[];
-  layoutMode: LayoutMode;
 };
 
-export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutMode }: PlankProps) => {
+export const Plank = memo(({ entry, layoutParts, part, layoutMode, order }: PlankProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
+  const coordinate: LayoutCoordinate = useMemo(() => ({ part, entryId: entry?.id ?? UNKNOWN_ID }), [entry?.id, part]);
+  const { popoverAnchorId, scrollIntoView } = useLayout();
+  const { plankSizing } = useDeckContext();
+  const { graph } = useGraph();
+  const node = useNode(graph, entry?.id);
   const rootElement = useRef<HTMLDivElement | null>(null);
   const canResize = layoutMode === 'deck';
   const Root = part === 'solo' ? 'article' : StackItem.Root;
 
-  const attendableAttrs = useAttendableAttributes(id);
-  const index = active ? active.findIndex((entryId) => entryId === id) : 0;
-  const length = active?.length ?? 1;
-  const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
-  const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
+  const attendableAttrs = useAttendableAttributes(coordinate.entryId);
+  const index = indexInPart(layoutParts, coordinate);
+  const length = partLength(layoutParts, part);
+  const canIncrementStart = part === 'main' && index !== undefined && index > 0 && length !== undefined && length > 1;
+  const canIncrementEnd = part === 'main' && index !== undefined && index < length - 1 && length !== undefined;
 
-  const size = deck.plankSizing[id] as number | undefined;
+  const size = plankSizing?.[coordinate.entryId] as number | undefined;
   const setSize = useCallback(
     debounce((nextSize: number) => {
-      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id, size: nextSize }));
+      return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: coordinate.entryId, size: nextSize }));
     }, 200),
-    [dispatch, id],
+    [dispatch, coordinate.entryId],
   );
 
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
@@ -66,19 +75,19 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
   }, []);
 
   useLayoutEffect(() => {
-    if (scrollIntoView === id) {
+    if (scrollIntoView === coordinate.entryId) {
       // TODO(wittjosiah): When focused on page load, the focus is always visible.
       //   Forcing focus to something smaller than the plank prevents large focus ring in the interim.
       const focusable = rootElement.current?.querySelector('button') || rootElement.current;
       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(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: undefined }));
+      void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: undefined }));
     }
-  }, [id, scrollIntoView, layoutMode]);
+  }, [coordinate.entryId, scrollIntoView, layoutMode]);
 
   const isSolo = layoutMode === 'solo' && part === 'solo';
-  const isAttendable = isSolo || (layoutMode === 'deck' && part === 'deck');
+  const isAttendable = isSolo || (layoutMode === 'deck' && part === 'main');
 
   const sizeAttrs = useMainSize();
 
@@ -86,10 +95,11 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
     () =>
       node && {
         subject: node.data,
-        path,
+        path: entry?.path,
+        coordinate,
         popoverAnchorId,
       },
-    [node, node?.data, path, popoverAnchorId],
+    [node, node?.data, entry?.path, coordinate, popoverAnchorId],
   );
 
   // TODO(wittjosiah): Change prop to accept a component.
@@ -110,7 +120,7 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
       {...(part === 'solo'
         ? ({ ...sizeAttrs, className } as any)
         : {
-            item: { id },
+            item: { id: entry?.id ?? 'never' },
             size,
             onSizeChange: setSize,
             classNames: className,
@@ -123,8 +133,7 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
       {node ? (
         <>
           <NodePlankHeading
-            id={id}
-            part={part}
+            coordinate={coordinate}
             node={node}
             canIncrementStart={canIncrementStart}
             canIncrementEnd={canIncrementEnd}
@@ -140,7 +149,7 @@ export const Plank = memo(({ id = UNKNOWN_ID, part, path, order, active, layoutM
           />
         </>
       ) : (
-        <PlankError id={id} part={part} />
+        <PlankError layoutCoordinate={coordinate} />
       )}
       {canResize && <StackItem.ResizeHandle />}
     </Root>

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,
@@ -15,9 +16,8 @@ import {
 } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';
-import { type DeckAction } from '../../types';
 
-export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
+export type PlankControlHandler = (event: PartAdjustment) => void;
 
 export type PlankCapabilities = {
   incrementStart?: boolean;
@@ -52,18 +52,17 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
 
 // TODO(wittjosiah): Duplicate of stack LayoutControls?
 //   Translations were to be duplicated between packages.
-// NOTE(thure): Pinning & unpinning are disabled indefinitely.
 export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
   (
-    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, classNames, ...props },
+    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },
     forwardedRef,
   ) => {
     const { t } = useTranslation(DECK_PLUGIN);
-    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden pli-2 plb-3' : 'pli-2 plb-3';
+    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !pli-2 !plb-3' : '!pli-2 !plb-3';
 
     return (
-      <ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>
-        {/* {pin && !isSolo && ['both', 'start'].includes(pin) && (
+      <ButtonGroup {...props} ref={forwardedRef}>
+        {pin && !isSolo && ['both', 'start'].includes(pin) && (
           <PlankControl
             label={t('pin start label')}
             variant='ghost'
@@ -71,14 +70,14 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
             onClick={() => onClick?.('pin-start')}
             icon='ph--caret-line-left--regular'
           />
-        )} */}
+        )}
 
         {can.solo && (
           <PlankControl
             label={isSolo ? t('show deck plank label') : t('show solo plank label')}
             classNames={buttonClassNames}
             onClick={() => onClick?.('solo')}
-            icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+            icon={isSolo ? 'ph--arrow-u-down-left--regular' : 'ph--arrows-out--regular'}
           />
         )}
 
@@ -101,14 +100,14 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
           </>
         )}
 
-        {/* {pin && !isSolo && ['both', 'end'].includes(pin) && (
+        {pin && !isSolo && ['both', 'end'].includes(pin) && (
           <PlankControl
             label={t('pin end label')}
             classNames={buttonClassNames}
             onClick={() => onClick?.('pin-end')}
             icon='ph--caret-line-right--regular'
           />
-        )} */}
+        )}
 
         {close && !isSolo && (
           <PlankControl

package/src/components/DeckLayout/PlankError.tsx

@@ -4,11 +4,12 @@
 
 import React, { useEffect, useState } from 'react';
 
+import { type LayoutCoordinate } from '@dxos/app-framework';
 import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
-import { NodePlankHeading, type NodePlankHeadingProps } from './NodePlankHeading';
+import { NodePlankHeading } from './NodePlankHeading';
 import { PlankLoading } from './PlankLoading';
 import { DECK_PLUGIN } from '../../meta';
 
@@ -32,13 +33,11 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
 };
 
 export const PlankError = ({
-  id,
-  part,
+  layoutCoordinate,
   node,
   error,
 }: {
-  id: string;
-  part: NodePlankHeadingProps['part'];
+  layoutCoordinate: LayoutCoordinate;
   node?: Node;
   error?: Error;
 }) => {
@@ -48,7 +47,7 @@ export const PlankError = ({
   }, []);
   return (
     <>
-      <NodePlankHeading id={id} part={part} node={node} pending={!timedOut} />
+      <NodePlankHeading coordinate={layoutCoordinate} node={node} pending={!timedOut} />
       {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
     </>
   );

package/src/components/DeckLayout/Sidebar.tsx

@@ -4,32 +4,35 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework';
 import { Main } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
-import { DeckCapabilities } from '../../capabilities';
-import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
+import { Banner } from './Banner';
+import { useBreakpoints } from '../../util';
+import { useHoistStatusbar } from '../../util/useHoistStatusbar';
+import { useLayout } from '../LayoutContext';
 
 export const Sidebar = () => {
-  const { popoverAnchorId, activeDeck: current } = useCapability(DeckCapabilities.DeckState);
+  const layoutContext = useLayout();
+  const { popoverAnchorId } = layoutContext;
   const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
 
-  const navigationData = useMemo(
-    () => ({ popoverAnchorId, topbar, hoistStatusbar, current }),
-    [popoverAnchorId, topbar, hoistStatusbar, current],
-  );
+  const navigationData = useMemo(() => ({ popoverAnchorId }), [popoverAnchorId]);
 
   return (
-    <Main.NavigationSidebar
-      classNames={[
-        'grid',
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
-      ]}
-    >
-      <Surface role='navigation' data={navigationData} limit={1} />
+    <Main.NavigationSidebar classNames='grid grid-cols-1 grid-rows-[var(--rail-size)_var(--rail-action)_1fr_min-content_min-content] md:grid-rows-[var(--rail-size)_var(--rail-action)_1fr_min-content] lg:grid-rows-[1fr_min-content] overflow-hidden lg:block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]'>
+      {breakpoint !== 'desktop' && (
+        <>
+          <Banner variant='sidebar' />
+          <Surface role='search-input' limit={1} />
+        </>
+      )}
+      <div role='none' className={mx('!overflow-y-auto', breakpoint !== 'desktop' && 'border-be border-separator')}>
+        <Surface role='navigation' data={navigationData} limit={1} />
+      </div>
+      {!hoistStatusbar && <Surface role='status-bar--sidebar-footer' limit={1} />}
     </Main.NavigationSidebar>
   );
 };

package/src/components/DeckLayout/SidebarButton.tsx

@@ -4,35 +4,29 @@
 
 import React from 'react';
 
-import { useCapability } from '@dxos/app-framework';
-import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { IconButton, useTranslation } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
 import { DECK_PLUGIN } from '../../meta';
+import { useLayout } from '../LayoutContext';
 
-export const ToggleSidebarButton = ({
-  classNames,
-  variant = 'ghost',
-}: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+export const ToggleSidebarButton = () => {
+  const layoutContext = useLayout();
   const { t } = useTranslation(DECK_PLUGIN);
   return (
     <IconButton
-      variant={variant}
+      variant='ghost'
       iconOnly
       icon='ph--sidebar--regular'
       size={4}
       label={t('open navigation sidebar label')}
-      onClick={() =>
-        (layoutContext.sidebarState = layoutContext.sidebarState === 'expanded' ? 'collapsed' : 'expanded')
-      }
-      classNames={classNames}
+      onClick={() => (layoutContext.sidebarOpen = !layoutContext.sidebarOpen)}
+      classNames='!pli-2 order-first'
     />
   );
 };
 
 export const CloseSidebarButton = () => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const layoutContext = useLayout();
   const { t } = useTranslation(DECK_PLUGIN);
   return (
     <IconButton
@@ -41,28 +35,40 @@ export const CloseSidebarButton = () => {
       icon='ph--caret-line-left--regular'
       size={4}
       label={t('close navigation sidebar label')}
-      onClick={() => (layoutContext.sidebarState = 'collapsed')}
-      classNames='rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
+      onClick={() => (layoutContext.sidebarOpen = false)}
+      classNames='!rounded-none !pli-1 ch-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
     />
   );
 };
 
-export const ToggleComplementarySidebarButton = ({ inR0, classNames }: ThemedClassName<{ inR0?: boolean }>) => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+export const ToggleComplementarySidebarButton = () => {
+  const layoutContext = useLayout();
   const { t } = useTranslation(DECK_PLUGIN);
   return (
     <IconButton
       iconOnly
-      onClick={() =>
-        (layoutContext.complementarySidebarState =
-          layoutContext.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded')
-      }
+      onClick={() => (layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen)}
       variant='ghost'
       label={t('open complementary sidebar label')}
-      classNames={['[&>svg]:-scale-x-100', classNames]}
+      classNames='!pli-2 !plb-3 [&>svg]:-scale-x-100'
       icon='ph--sidebar-simple--regular'
-      size={inR0 ? 5 : 4}
-      tooltipSide={inR0 ? 'left' : undefined}
+      size={4}
+    />
+  );
+};
+
+export const CloseComplementarySidebarButton = () => {
+  const layoutContext = useLayout();
+  const { t } = useTranslation(DECK_PLUGIN);
+  return (
+    <IconButton
+      iconOnly
+      variant='ghost'
+      size={4}
+      icon='ph--caret-line-right--regular'
+      label={t('close complementary sidebar label')}
+      classNames='!rounded-none border-is border-separator ch-focus-ring-inset pie-2 lg:pie-[max(.5rem,env(safe-area-inset-right))]'
+      onClick={() => (layoutContext.complementarySidebarOpen = false)}
     />
   );
 };

package/src/components/DeckLayout/StatusBar.tsx

@@ -5,17 +5,23 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { useLandmarkMover } from '@dxos/react-ui';
+import { mainPadding, mainPaddingTransitions, mx } from '@dxos/react-ui-theme';
+
+import { useMainSize } from '../../hooks';
 
 export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
-  const mover = useLandmarkMover(undefined, '3');
+  const sizeAttrs = useMainSize();
   return (
     <div
       role='contentinfo'
-      className='fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs border-separator z-[2] flex text-description'
-      {...mover}
+      {...sizeAttrs}
+      className={mx(
+        'fixed block-end-0 inset-inline-0 flex justify-between items-center border-bs border-separator z-[2] pbe-[env(safe-area-inset-bottom)]',
+        mainPadding,
+        mainPaddingTransitions,
+      )}
     >
-      {showHints && <Surface role='hints' limit={1} />}
+      <div role='none'>{showHints && <Surface role='hints' limit={1} />}</div>
       <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 { Toast as ToastProps } from '@dxos/app-framework';
 import {
   Button,
   Icon,
@@ -28,7 +28,7 @@ export const Toast = ({
   closeLabel,
   onAction,
   onOpenChange,
-}: LayoutAction.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
+}: ToastProps & Pick<ToastRootProps, 'onOpenChange'>) => {
   const { t } = useTranslation(DECK_PLUGIN);
 
   return (