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

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,28 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import {
-  createIntent,
-  LayoutAction,
-  Surface,
-  useAppGraph,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea } from '@dxos/react-ui';
+import { createIntent, NavigationAction, SLUG_PATH_SEPARATOR, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { useGraph } from '@dxos/plugin-graph';
+import { Main, ScrollArea, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
+import { railGridHorizontal, StackContext, StackItem } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { mx } from '@dxos/react-ui-theme';
 
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
-import { ToggleComplementarySidebarButton } from './SidebarButton';
-import { DeckCapabilities } from '../../capabilities';
+import { CloseComplementarySidebarButton } from './SidebarButton';
 import { useNode, useNodeActionExpander } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
-import { SLUG_PATH_SEPARATOR, type Panel } from '../../types';
-import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
+import { type Panel } from '../../types';
+import { useLayout } from '../LayoutContext';
 
 export type ComplementarySidebarProps = {
   panels: Panel[];
@@ -31,19 +26,16 @@ export type ComplementarySidebarProps = {
 };
 
 export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { popoverAnchorId } = useLayout();
   const attended = useAttended();
-  const panelIds = useMemo(() => panels.map((panel) => panel.id), [panels]);
-  const activePanelId = panelIds.find((panelId) => panelId === current) ?? panels[0].id;
+  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 } = useAppGraph();
+  const { graph } = useGraph();
   const node = useNode(graph, activeEntryId);
   const { t } = useTranslation(DECK_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   useNodeActionExpander(node);
-  const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
-  const hoistStatusbar = useHoistStatusbar(breakpoint);
 
   const [internalValue, setInternalValue] = useState(activePanelId);
 
@@ -51,113 +43,70 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
     setInternalValue(activePanelId);
   }, [activePanelId]);
 
-  const handleTabClick = useCallback(
-    (event: MouseEvent) => {
-      const nextValue = event.currentTarget.getAttribute('data-value') as string;
-      if (nextValue === activePanelId) {
-        layout.complementarySidebarState = layout.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-      } else {
-        setInternalValue(nextValue);
-        layout.complementarySidebarState = 'expanded';
-        void dispatch(createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', subject: nextValue }));
-      }
+  const handleValueChange = useCallback(
+    (nextValue: string) => {
+      setInternalValue(nextValue);
+      void dispatch(createIntent(NavigationAction.Open, { activeParts: { complementary: nextValue } }));
     },
-    [layout, activePanelId, dispatch],
+    [dispatch],
   );
 
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
-    <Main.ComplementarySidebar
-      classNames={[
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
-      ]}
-    >
-      <Tabs.Root
-        orientation='vertical'
-        verticalVariant='stateless'
-        value={internalValue}
-        attendableId={attended[0]}
-        classNames='contents'
-      >
-        <div
-          role='none'
-          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
-        >
-          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
-            {panels.map((panel) => (
-              <Tabs.Tab key={panel.id} value={panel.id} asChild>
-                <IconButton
-                  label={toLocalizedString(panel.label, t)}
-                  icon={panel.icon}
-                  size={5}
-                  iconOnly
-                  tooltipSide='left'
-                  data-value={panel.id}
-                  variant={
-                    activePanelId === panel.id
-                      ? layout.complementarySidebarState === 'expanded'
-                        ? 'primary'
-                        : 'default'
-                      : 'ghost'
-                  }
-                  onClick={handleTabClick}
-                />
-              </Tabs.Tab>
-            ))}
-          </Tabs.Tablist>
-          {!hoistStatusbar && (
-            <div role='none' className='grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto'>
-              <Surface role='status-bar--r0-footer' limit={1} />
-            </div>
-          )}
-          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1'>
-            <ToggleComplementarySidebarButton />
-          </div>
-        </div>
-        {panels.map((panel) => (
-          <Tabs.Tabpanel
-            key={panel.id}
-            value={panel.id}
-            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content]'
-            {...(layout.complementarySidebarState !== 'expanded' && { inert: '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')}>
+          <Tabs.Root
+            orientation='horizontal'
+            value={internalValue}
+            onValueChange={handleValueChange}
+            attendableId={attended[0]}
+            classNames='contents'
           >
-            {panel.id === activePanelId && node && (
-              <>
-                <h2 className='flex items-center pli-2 border-separator border-be'>
-                  {toLocalizedString(panel.label, t)}
-                </h2>
-                <ScrollArea.Root>
-                  <ScrollArea.Viewport>
-                    <Surface
-                      key={activeEntryId}
-                      role={`complementary--${activePanelId}`}
-                      data={{
-                        id: activeEntryId,
-                        subject: node.properties.object ?? node.properties.space,
-                        popoverAnchorId: layout.popoverAnchorId,
-                      }}
-                      fallback={PlankContentError}
-                      placeholder={<PlankLoading />}
-                    />
-                  </ScrollArea.Viewport>
-                  <ScrollArea.Scrollbar orientation='vertical'>
+            <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.Root>
-                {!hoistStatusbar && (
-                  <div
-                    role='contentinfo'
-                    className='flex flex-wrap justify-center items-center border-bs border-separator plb-1'
-                  >
-                    <Surface role='status-bar--r1-footer' limit={1} />
-                  </div>
-                )}
-              </>
-            )}
-          </Tabs.Tabpanel>
-        ))}
-      </Tabs.Root>
+                </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,22 +5,25 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
+import { mx } from '@dxos/react-ui-theme';
 
 import { ToggleSidebarButton } from './SidebarButton';
-import { layoutAppliesTopbar, useBreakpoints } from '../../util';
-import { fixedSidebarToggleStyles } from '../fragments';
+import { soloInlinePadding } from '../fragments';
 
 export const ContentEmpty = () => {
-  const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
   return (
     <div
       role='none'
-      className='grid place-items-center p-8 relative bg-deck'
+      className='min-bs-screen is-dvw sm:is-full p-8 grid grid-rows-[var(--rail-size)_1fr]'
       data-testid='layoutPlugin.firstRunMessage'
     >
-      <Surface role='keyshortcuts' />
-      {!topbar && <ToggleSidebarButton variant='default' classNames={fixedSidebarToggleStyles} />}
+      <div role='toolbar' className={mx(soloInlinePadding, 'flex items-stretch')}>
+        <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

@@ -6,23 +6,14 @@ import { untracked } from '@preact/signals-core';
 import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
 
 import {
-  LayoutAction,
-  createIntent,
+  firstIdInPart,
   Surface,
-  useCapability,
-  useIntentDispatcher,
   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,
-  useMediaQuery,
-} from '@dxos/react-ui';
+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 { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
@@ -32,16 +23,18 @@ import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
 import { Plank } from './Plank';
 import { Sidebar } from './Sidebar';
-import { ToggleComplementarySidebarButton, ToggleSidebarButton } from './SidebarButton';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
 import { Topbar } from './Topbar';
-import { DeckCapabilities } from '../../capabilities';
-import { getMode, type Overscroll } from '../../types';
-import { calculateOverscroll, layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
-import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
+import { type Overscroll } from '../../types';
+import { calculateOverscroll, useBreakpoints } from '../../util';
+import { useHoistStatusbar } from '../../util/useHoistStatusbar';
+import { useDeckContext } from '../DeckContext';
+import { useLayout } from '../LayoutContext';
 
 export type DeckLayoutProps = {
+  layoutParts: LayoutParts;
+  toasts: ToastSchema[];
   overscroll: Overscroll;
   showHints: boolean;
   onDismissToast: (id: string) => void;
@@ -50,13 +43,12 @@ export type DeckLayoutProps = {
 const PlankSeparator = ({ index }: { index: number }) =>
   index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
 
-export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const context = useCapability(DeckCapabilities.MutableDeckState);
+export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
+  const context = useLayout();
   const {
-    sidebarState,
-    complementarySidebarState,
-    complementarySidebarPanel,
+    layoutMode,
+    sidebarOpen,
+    complementarySidebarOpen,
     dialogOpen,
     dialogContent,
     dialogBlockAlign,
@@ -64,18 +56,18 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
     popoverOpen,
     popoverContent,
     popoverAnchorId,
-    deck,
-    toasts,
   } = context;
-  const { active, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
+  const { plankSizing } = useDeckContext();
   const pluginManager = usePluginManager();
+  const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
+  const isSoloModeLoaded = layoutMode === 'solo' && Boolean(layoutParts.solo?.[0]);
+
   // 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.
@@ -83,7 +75,7 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
       const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
       return attention.current;
     });
-    const firstId = solo ?? active[0];
+    const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
       //   If the plank is directly focused on first load the focus ring appears.
@@ -91,27 +83,6 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
     }
   }, []);
 
-  // Not using `breakpoint` to avoid firing when breakpoint changes between tablet and desktop.
-  // `ssr: false` to avoid using fallback values and flashing into solo mode on startup.
-  const [isNotMobile] = useMediaQuery('md', { ssr: false });
-  const shouldRevert = useRef(false);
-  useEffect(() => {
-    if (!isNotMobile && getMode(deck) === '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.requestCapability(AttentionCapabilities.Attention);
-        return attention.current;
-      });
-
-      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 } }));
-    }
-  }, [isNotMobile, deck, dispatch]);
-
   /**
    * Clear scroll restoration state if the window is resized
    */
@@ -130,7 +101,6 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
     }
   }, []);
 
-  const layoutMode = getMode(deck);
   useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
 
   /**
@@ -138,30 +108,21 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
    */
   const handleScroll = useCallback(
     (event: UIEvent) => {
-      if (!solo && event.currentTarget === event.target) {
+      if (layoutMode === 'deck' && event.currentTarget === event.target) {
         scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
       }
     },
-    [solo],
+    [layoutMode],
   );
 
-  const isEmpty = !solo && active.length === 0;
+  const isEmpty = (layoutParts.main?.length ?? 0) === 0 && (layoutParts.solo?.length ?? 0) === 0;
 
   const padding = useMemo(() => {
-    if (!solo && overscroll === 'centering') {
-      return calculateOverscroll(active.length);
+    if (layoutMode === 'deck' && overscroll === 'centering') {
+      return calculateOverscroll(layoutParts.main?.length ?? 0);
     }
     return {};
-  }, [solo, overscroll, deck]);
-
-  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]',
-    ],
-    [topbar, hoistStatusbar],
-  );
+  }, [layoutMode, overscroll, layoutParts.main]);
 
   const Dialog = dialogType === 'alert' ? AlertDialog : NaturalDialog;
 
@@ -180,27 +141,27 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
     >
       <ActiveNode />
 
-      {fullscreen && <Fullscreen id={solo} />}
+      {layoutMode === 'fullscreen' && <Fullscreen id={fullScreenSlug} />}
 
-      {!fullscreen && (
+      {layoutMode !== 'fullscreen' && (
         <Main.Root
-          navigationSidebarState={context.sidebarState}
-          onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
-          complementarySidebarState={context.complementarySidebarState}
-          onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
+          navigationSidebarOpen={context.sidebarOpen}
+          onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
+          complementarySidebarOpen={context.complementarySidebarOpen}
+          onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
         >
           {/* Left sidebar. */}
           <Sidebar />
 
           {/* Right sidebar. */}
-          <ComplementarySidebar panels={panels} current={complementarySidebarPanel} />
+          <ComplementarySidebar panels={panels} current={layoutParts.complementary?.[0].id} />
 
           {/* Dialog overlay to dismiss dialogs. */}
           <Main.Overlay />
 
           {/* No content. */}
           {isEmpty && (
-            <Main.Content bounce handlesFocus classNames={mainPosition}>
+            <Main.Content handlesFocus>
               <ContentEmpty />
             </Main.Content>
           )}
@@ -209,67 +170,64 @@ export const DeckLayout = ({ overscroll, showHints, panels, onDismissToast }: De
           {!isEmpty && (
             <Main.Content
               bounce
-              classNames={mainPosition}
+              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={
                 {
-                  '--dx-main-sidebarWidth':
-                    sidebarState === 'expanded'
-                      ? 'var(--nav-sidebar-size)'
-                      : sidebarState === 'collapsed'
-                        ? 'var(--l0-size)'
-                        : '0',
-                  '--dx-main-complementaryWidth':
-                    complementarySidebarState === 'expanded'
-                      ? 'var(--complementary-sidebar-size)'
-                      : complementarySidebarState === 'collapsed'
-                        ? 'var(--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`,
+                  '--dx-main-sidebarWidth': sidebarOpen ? 'var(--nav-sidebar-size)' : '0px',
+                  '--dx-main-complementaryWidth': complementarySidebarOpen
+                    ? 'var(--complementary-sidebar-size)'
+                    : '0px',
+                  '--dx-main-contentFirstWidth': `${plankSizing[layoutParts.main?.[0]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                  '--dx-main-contentLastWidth': `${plankSizing[layoutParts.main?.[(layoutParts.main?.length ?? 1) - 1]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
                 } as MainProps['style']
               }
             >
               <div
                 role='none'
-                className={!solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-                {...(solo && { inert: '' })}
+                className={!isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(isSoloModeLoaded && { inert: '' })}
               >
-                {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
-                {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
                 <Stack
                   orientation='horizontal'
                   size='contain'
                   classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
                   onScroll={handleScroll}
-                  itemsCount={2 * (active.length ?? 0) - 1}
+                  itemsCount={2 * (layoutParts.main?.length ?? 0) - 1}
                   style={padding}
                   ref={deckRef}
                 >
-                  {active.map((entryId, index) => (
-                    <Fragment key={entryId}>
+                  {layoutParts.main?.map((layoutEntry, index) => (
+                    <Fragment key={layoutEntry.id}>
                       <PlankSeparator index={index} />
-                      <Plank id={entryId} part='deck' order={index * 2 + 1} active={active} layoutMode={layoutMode} />
+                      <Plank
+                        entry={layoutEntry}
+                        layoutParts={layoutParts}
+                        part='main'
+                        layoutMode={layoutMode}
+                        order={index * 2 + 1}
+                      />
                     </Fragment>
                   ))}
                 </Stack>
               </div>
               <div
                 role='none'
-                className={solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-                {...(!solo && { inert: '' })}
+                className={isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(!isSoloModeLoaded && { inert: '' })}
               >
-                {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
-                {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
                 <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
-                  <Plank id={solo} part='solo' layoutMode={layoutMode} />
+                  <Plank entry={layoutParts.solo?.[0]} layoutParts={layoutParts} part='solo' layoutMode={layoutMode} />
                 </StackContext.Provider>
               </div>
             </Main.Content>
           )}
 
           {/* Status bar. */}
-          {topbar && <Topbar />}
+          {breakpoint === 'desktop' && <Topbar />}
           {hoistStatusbar && <StatusBar showHints={showHints} />}
         </Main.Root>
       )}

package/src/components/DeckLayout/Fullscreen.tsx

@@ -4,7 +4,8 @@
 
 import React from 'react';
 
-import { Surface, useAppGraph } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework';
+import { useGraph } from '@dxos/plugin-graph';
 import { fixedInsetFlexLayout } from '@dxos/react-ui-theme';
 
 import { Fallback } from './Fallback';
@@ -12,7 +13,7 @@ import { SURFACE_PREFIX } from './constants';
 import { useNode } from '../../hooks';
 
 export const Fullscreen = ({ id }: { id?: string }) => {
-  const { graph } = useAppGraph();
+  const { graph } = useGraph();
   const fullScreenNode = useNode(graph, id);
 
   return (