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

package/src/{components → containers}/Plank/PlankHeading.tsx

@@ -4,22 +4,22 @@
 
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Graph, type Node, useActionRunner } from '@dxos/plugin-graph';
 import { Icon, IconButton, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/ui-theme';
+import { hoverableControls, hoverableFocusedWithinControls, iconSize } from '@dxos/ui-theme';
 
-import { useBreakpoints } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { meta } from '../../meta';
-import { DeckOperation, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
-import { soloInlinePadding } from '../fragments';
+import { useBreakpoints } from '#hooks';
+import { meta } from '#meta';
+import { DeckOperation } from '#types';
+import { type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '#types';
 
 import { PlankCompanionControls, PlankControls } from './PlankControls';
+import { usePlankContext } from './PlankRoot';
 
 const MAX_COMPANIONS = 5;
 
@@ -37,6 +37,7 @@ export type PlankHeadingProps = {
   companioned?: 'primary' | 'companion';
   companions?: Node.Node[];
   actions?: StackItemSigilAction[];
+  debug?: boolean;
 };
 
 export const PlankHeading = memo(
@@ -54,16 +55,16 @@ export const PlankHeading = memo(
     companions,
     layoutMode,
     actions = [],
+    debug = false,
   }: PlankHeadingProps) => {
     const { t } = useTranslation(meta.id);
-    const { invokePromise, invokeSync } = useOperationInvoker();
+    const { graph, onAdjust, onUpdateCompanion } = usePlankContext('PlankHeading');
     const runAction = useActionRunner();
-    const { graph } = useAppGraph();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
     const label = pending
-      ? t('pending heading')
-      : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: meta.id }], t);
+      ? t('pending.heading')
+      : toLocalizedString(node?.properties?.label ?? ['plank-heading-fallback.label', { ns: meta.id }], t);
 
     const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
 
@@ -82,16 +83,16 @@ export const PlankHeading = memo(
     const capabilities = useMemo(
       () => ({
         deck: deckEnabled ?? true,
-        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
+        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'multi'),
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
         fullscreen: !isCompanionNode,
-        companion: !isCompanionNode && companions && companions.length > 0,
+        companion: layoutMode !== 'multi' && !isCompanionNode && companions && companions.length > 0,
       }),
-      [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled],
+      [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled, layoutMode],
     );
 
-    const { variant } = parseEntryId(id);
+    const variant = isCompanionNode ? getLinkedVariant(id) : undefined;
     const sigilActions = useMemo(() => {
       if (!node) {
         return undefined;
@@ -100,8 +101,8 @@ export const PlankHeading = memo(
       } else {
         return [
           actions,
-          Graph.getActions(graph, node.id).filter((a) =>
-            ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition),
+          Graph.getActions(graph, node.id).filter((action) =>
+            ['list-item', 'list-item-primary', 'heading-list-item'].includes(action.properties.disposition),
           ),
         ].filter((a) => a.length > 0);
       }
@@ -118,53 +119,49 @@ export const PlankHeading = memo(
 
     const handlePlankAction = useCallback(
       (eventType: DeckOperation.PartAdjustment) => {
-        if (eventType.startsWith('solo')) {
-          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
-        } else if (eventType === 'close') {
-          if (part === 'complementary') {
-            return invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
-          } else {
-            return invokeSync(LayoutOperation.Close, { subject: [id] });
-          }
-        } else {
-          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
-        }
+        onAdjust?.(id, eventType);
       },
-      [invokePromise, invokeSync, id, part],
+      [onAdjust, id],
     );
 
-    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
+    const ActionRoot = node && popoverAnchorId === `${meta.id}:${node.id}` ? Popover.Anchor : Fragment;
 
     const handleTabClick = useCallback(
       (event: MouseEvent) => {
         const target = (event.target as HTMLElement).closest('[data-id]') as HTMLElement | null;
         const tabId = target?.dataset?.id;
         if (tabId) {
-          void invokePromise(DeckOperation.ChangeCompanion, { companion: tabId });
+          onUpdateCompanion?.(tabId);
         }
       },
-      [invokePromise],
+      [onUpdateCompanion],
     );
 
     return (
       <StackItem.Heading
+        data-tauri-drag-region
+        data-plank-heading
+        style={iconSize(5)}
         classNames={[
           'py-1 items-stretch gap-1 sticky left-12 dx-app-drag min-w-0 dx-contain-layout dx-density-coarse',
-          part === 'solo' ? soloInlinePadding : 'px-1',
+          part === 'solo'
+            ? 'ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]'
+            : 'px-1',
           ...(layoutMode === 'solo--fullscreen'
             ? [
                 hoverableControls,
                 hoverableFocusedWithinControls,
-                '*:transition-opacity *:opacity-(--controls-opacity) bg-transparent border-transparent transition-[background-color,border-color]',
-                'hover-hover:hover:bg-header-surface focus-within:bg-header-surface hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator',
+                '*:transition-opacity *:opacity-(--controls-opacity) bg-transparent',
+                'border-transparent transition-[background-color,border-color]',
+                'hover-hover:hover:bg-header-surface focus-within:bg-header-surface',
+                'hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator',
               ]
             : []),
         ]}
-        data-plank-heading
       >
         {companions && isCompanionNode ? (
           /* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */
-          <div role='none' className='flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1'>
+          <div data-tauri-drag-region className='flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1'>
             {companions.map(({ id, properties: { icon, label } }) => (
               <IconButton
                 key={id}
@@ -185,11 +182,14 @@ export const PlankHeading = memo(
                   icon={icon}
                   related={part === 'complementary'}
                   attendableId={attendableId}
-                  triggerLabel={t('actions menu label')}
+                  triggerLabel={t('actions-menu.label')}
                   actions={sigilActions}
                   onAction={handleAction}
                 >
-                  <Surface.Surface role='menu-footer' data={{ subject: node.data }} />
+                  <Surface.Surface
+                    type={AppSurface.MenuFooter}
+                    data={{ subject: node.data } satisfies AppSurface.MenuFooterData}
+                  />
                 </StackItem.Sigil>
               ) : (
                 <StackItem.SigilButton>
@@ -200,6 +200,7 @@ export const PlankHeading = memo(
             </ActionRoot>
             <TextTooltip text={label} onlyWhenTruncating>
               <StackItem.HeadingLabel
+                data-tauri-drag-region
                 attendableId={attendableId}
                 related={part === 'complementary'}
                 {...(pending && { classNames: 'text-description' })}
@@ -209,7 +210,17 @@ export const PlankHeading = memo(
             </TextTooltip>
           </>
         )}
-        {node && part !== 'complementary' && <Surface.Surface role='navbar-end' data={{ subject: node.data }} />}
+        {debug && (
+          <div className='flex items-center text-sm text-info-text'>
+            {layoutMode}:{part}:{companioned}
+          </div>
+        )}
+        {node && part !== 'complementary' && (
+          <Surface.Surface
+            type={AppSurface.NavbarEnd}
+            data={{ subject: node.data } satisfies AppSurface.NavbarEndData}
+          />
+        )}
         {companioned === 'companion' ? (
           <PlankCompanionControls primary={primaryId} />
         ) : (

package/src/{components → containers}/Plank/PlankLoading.tsx

@@ -6,5 +6,5 @@ import React from 'react';
 
 // TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
 export const PlankLoading = () => {
-  return <div role='none' className='grid place-items-center dx-attention-surface' />;
+  return <div className='grid place-items-center dx-attention-surface' />;
 };

package/src/containers/Plank/PlankRoot.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { PropsWithChildren } from 'react';
+
+import { type Graph } from '@dxos/plugin-graph';
+
+import { type DeckOperation } from '#types';
+import { type LayoutMode, type PlankSizing, type ResolvedPart, type Settings } from '#types';
+
+const PLANK_NAME = 'Plank';
+
+export type PlankContextValue = {
+  /** The application graph. */
+  graph: Graph.ExpandableGraph;
+  /** Which part of the layout this plank occupies. */
+  part: ResolvedPart;
+  /** Current layout mode. */
+  layoutMode: LayoutMode;
+  /** Deck settings. */
+  settings?: Settings.Settings;
+  /** Popover anchor ID for heading menus. */
+  popoverAnchorId?: string;
+  /** ID of plank that should be scrolled into view. */
+  scrollIntoView?: string;
+  /** Persisted plank sizes keyed by plank ID. */
+  plankSizing?: PlankSizing;
+  /** Callback for plank adjustments (close, solo, increment, companion). */
+  onAdjust?: (id: string, type: DeckOperation.PartAdjustment) => void;
+  /** Callback for plank resize. */
+  onResize?: (id: string, size: number) => void;
+  /** Callback to clear scroll-into-view state. */
+  onScrollIntoView?: (id?: string) => void;
+  /** Callback to update the companion. */
+  onUpdateCompanion?: (companion: string | null) => void;
+};
+
+export const [PlankProvider, usePlankContext] = createContext<PlankContextValue>(PLANK_NAME);
+
+export type PlankRootProps = PropsWithChildren<PlankContextValue>;
+
+/**
+ * Headless root that provides plank context.
+ */
+export const PlankRoot = ({ children, ...context }: PlankRootProps) => {
+  return <PlankProvider {...context}>{children}</PlankProvider>;
+};

package/src/{components → containers}/Plank/index.ts

@@ -3,7 +3,5 @@
 //
 
 export * from './Plank';
-export * from './PlankControls';
 export * from './PlankError';
-export * from './PlankHeading';
 export * from './PlankLoading';

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

@@ -2,46 +2,32 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, {
-  Fragment,
-  type MouseEvent,
-  type PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+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 { IconButton, type Label, Main, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { IconButton, type Label, Main, Panel, toLocalizedString, Toolbar, useTranslation } from '@dxos/react-ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/ui-theme';
-
-import {
-  type DeckCompanion,
-  getCompanionId,
-  useBreakpoints,
-  useDeckCompanions,
-  useDeckState,
-  useHoistStatusbar,
-} from '../../hooks';
-import { meta } from '../../meta';
-import { getMode } from '../../types';
+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;
+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 { invokeSync } = useOperationInvoker();
   const { state, deck, updateState } = useDeckState();
   const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
@@ -49,8 +35,8 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   const companions = useDeckCompanions();
-  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
-  const activeId = activeCompanion && getCompanionId(activeCompanion.id);
+  const activeCompanion = companions.find((companion) => getLinkedVariant(companion.id) === current);
+  const activeId = activeCompanion && getLinkedVariant(activeCompanion.id);
   const [internalValue, setInternalValue] = useState(activeId);
 
   useEffect(() => {
@@ -68,10 +54,10 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
       } else {
         setInternalValue(nextValue);
         updateState((state) => ({ ...state, complementarySidebarState: 'expanded' }));
-        invokeSync(LayoutOperation.UpdateComplementary, { subject: nextValue });
+        void invokePromise(LayoutOperation.UpdateComplementary, { subject: nextValue });
       }
     },
-    [state.complementarySidebarState, activeId, invokeSync, updateState],
+    [state.complementarySidebarState, activeId, invokePromise, updateState],
   );
 
   const data = useMemo(
@@ -85,9 +71,9 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
 
   useEffect(() => {
     if (!activeId) {
-      invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+      void invokePromise(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
     }
-  }, [activeId, invokeSync]);
+  }, [activeId, invokePromise]);
 
   return (
     <Main.ComplementarySidebar
@@ -97,29 +83,33 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
         hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
-      <Tabs.Root orientation='vertical' verticalVariant='stateless' value={internalValue} classNames='contents'>
+      {/* R0 Tabs */}
+      <Tabs.Root classNames='contents' orientation='vertical' value={internalValue}>
         <div
-          role='none'
+          data-tauri-drag-region
+          style={iconSize(5)}
           className={mx(
-            'absolute z-[1] inset-y-0 end-0 !w-(--dx-r0-size)',
+            'absolute z-1 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',
           )}
         >
-          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-rail-action) p-1 gap-1 overflow-y-auto!'>
+          {/* TODO(burdon): ScrollArea. */}
+          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-rail-action) overflow-y-auto'>
             {companions.map((companion) => (
-              <Tabs.Tab key={getCompanionId(companion.id)} value={getCompanionId(companion.id)} asChild>
+              <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={getCompanionId(companion.id)}
+                  data-value={getLinkedVariant(companion.id)}
+                  {...(companion.properties.joyride && { 'data-joyride': companion.properties.joyride })}
                   variant={
-                    activeId === getCompanionId(companion.id)
+                    activeId === getLinkedVariant(companion.id)
                       ? state.complementarySidebarState === 'expanded'
                         ? 'primary'
-                        : 'default'
+                        : 'ghost'
                       : 'ghost'
                   }
                   onClick={handleTabClick}
@@ -128,23 +118,27 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             ))}
           </Tabs.Tablist>
           {!hoistStatusbar && (
-            <div role='none' className='grid grid-cols-1 auto-rows-(--dx-rail-item) p-1 overflow-y-auto'>
-              <Surface.Surface role='status-bar--r0-footer' limit={1} />
+            <div
+              className='grid grid-cols-1 auto-rows-(--dx-rail-item) py-0.5 gap-0.5 overflow-y-auto scrollbar-none'
+              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'>
+          <div className='hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1'>
             <ToggleComplementarySidebarButton />
           </div>
         </div>
+
+        {/* R1 Content. */}
         {activeId &&
           companions.map((companion) => (
-            <Tabs.Tabpanel
-              key={getCompanionId(companion.id)}
-              value={getCompanionId(companion.id)}
+            <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)',
-                'grid grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr_min-content] py-[env(safe-area-inset-top)]',
+                'inset-y-0 start-0 w-full lg:w-(--dx-r1-size)',
               ]}
               {...(state.complementarySidebarState !== 'expanded' && { inert: true })}
             >
@@ -154,7 +148,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
                 data={data}
                 hoistStatusbar={hoistStatusbar}
               />
-            </Tabs.Tabpanel>
+            </Tabs.Panel>
           ))}
       </Tabs.Root>
     </Main.ComplementarySidebar>
@@ -174,52 +168,41 @@ type ComplementarySidebarPanelProps = {
 const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
   const { t } = useTranslation(meta.id);
 
-  if (getCompanionId(companion.id) !== activeId && !data) {
+  if (getLinkedVariant(companion.id) !== activeId && !data) {
     return null;
   }
 
-  const Wrapper = companion.properties.fixed ? Fragment : ScrollAreaWrapper;
-
   return (
-    <>
-      <div role='none' className='flex items-center p-1 gap-1 border-b border-subdued-separator'>
-        <IconButton
-          label={toLocalizedString(companion.properties.label, t)}
-          icon={companion.properties.icon}
-          iconOnly
-          tooltipSide='left'
-          data-value={getCompanionId(companion.id)}
-          classNames='h-10 w-10'
-          variant='default'
-        />
-        <div role='none' className='px-1'>
-          {toLocalizedString(companion.properties.label, t)}
-        </div>
-      </div>
-      <Wrapper>
+    <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--${getCompanionId(companion.id)}`}
+          role={`deck-companion--${getLinkedVariant(companion.id)}`}
           data={data}
           fallback={PlankErrorFallback}
           placeholder={<PlankLoading />}
         />
-      </Wrapper>
+      </Panel.Content>
       {!hoistStatusbar && (
-        <div
-          role='contentinfo'
-          className='flex flex-wrap justify-center items-center border-y border-subdued-separator pt-1 pb-[max(env(safe-area-inset-bottom),0.25rem)]'
-        >
+        <Panel.Statusbar size='sm'>
           <Surface.Surface role='status-bar--r1-footer' limit={1} />
-        </div>
+        </Panel.Statusbar>
       )}
-    </>
-  );
-};
-
-const ScrollAreaWrapper = ({ children }: PropsWithChildren) => {
-  return (
-    <ScrollArea.Root thin orientation='vertical' classNames='grow'>
-      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
-    </ScrollArea.Root>
+    </Panel.Root>
   );
 };

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

@@ -5,14 +5,16 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/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();
@@ -22,7 +24,7 @@ export const Sidebar = () => {
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
-  const navigationData = useMemo(
+  const navigationData = useMemo<AppSurface.NavigationData<{ topbar: boolean; hoistStatusbar: boolean }>>(
     () => ({ popoverAnchorId, topbar, hoistStatusbar, current }),
     [popoverAnchorId, topbar, hoistStatusbar, current],
   );
@@ -36,7 +38,7 @@ export const Sidebar = () => {
         hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
-      <Surface.Surface role='navigation' data={navigationData} limit={1} />
+      <Surface.Surface type={AppSurface.Navigation} data={navigationData} limit={1} />
     </Main.NavigationSidebar>
   );
 };

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

@@ -7,9 +7,10 @@ import React, { useCallback } from 'react';
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 
-import { getCompanionId, useDeckCompanions, useDeckState } from '../../hooks';
-import { meta } from '../../meta';
+import { useDeckCompanions, useDeckState } from '#hooks';
+import { meta } from '#meta';
 
 export const ToggleSidebarButton = ({
   classNames,
@@ -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}
     />
@@ -52,7 +53,7 @@ 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 px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]'
     />
@@ -64,7 +65,7 @@ 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);
 
@@ -73,11 +74,17 @@ export const ToggleComplementarySidebarButton = ({
     const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
     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(LayoutOperation.UpdateComplementary, { subject });
+      void invokePromise(LayoutOperation.UpdateComplementary, { subject });
     }
-  }, [state, updateState, current, companions, invokeSync]);
+  }, [state, updateState, current, companions, invokePromise]);
+
+  const label = t(
+    state.complementarySidebarState === 'expanded'
+      ? 'close-complementary-sidebar.label'
+      : 'open-complementary-sidebar.label',
+  );
 
   return (
     <IconButton
@@ -85,8 +92,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={label}
       tooltipSide={inR0 ? 'left' : undefined}
       onClick={handleClick}
     />

package/src/containers/index.ts

@@ -4,5 +4,8 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const Banner: ComponentType<any> = lazy(() => import('./Banner'));
-export const DeckSettings: ComponentType<any> = lazy(() => import('./DeckSettings'));
+export * from './Deck';
+export * from './Plank';
+export * from './Sidebar';
+
+export const DeckLayout: ComponentType<any> = lazy(() => import('./DeckLayout'));

package/src/hooks/useCompanions.ts

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