@dxos/plugin-simple-layout 0.8.4-main.c85a9c8dae → 0.8.4-main.dfabb4ec29

package/src/components/{Workspace/Workspace.tsx → NavBranch/NavBranch.tsx}

@@ -2,73 +2,72 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useConnections } from '@dxos/plugin-graph';
-import { Avatar, Icon, Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Avatar, Icon, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui';
 import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
-import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { SearchPanel, useSearchListItem, useSearchListResults } from '@dxos/react-ui-search';
 import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { useLoadDescendents } from '../hooks';
+import { meta } from '#meta';
 
-export type WorkspaceProps = {
+import { useExpandPath } from '../hooks';
+
+export type NavBranchProps = {
   id: string;
 };
 
 /**
- * Displays the contents of a workspace disposition graph node as a searchable list.
- * Shows direct children of the workspace with icons and labels,
- * allowing users to filter via search and navigate by selecting an item.
+ * Renders the children of a graph branch node as a searchable mosaic list.
+ * Used for any node with `role: 'branch'` or a workspace disposition, including
+ * spaces, collection sections, type sections, and schema nodes.
  */
-export const Workspace = ({ id }: WorkspaceProps) => {
+export const NavBranch = ({ id }: NavBranchProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
 
-  // Expand the workspace node to load its children.
-  useLoadDescendents(id);
+  useExpandPath(id);
 
-  // Get direct children of the workspace node.
   const children = useConnections(graph, id, 'child');
 
+  const visibleChildren = useMemo(
+    () => children.filter((node) => node.properties.disposition !== 'hidden'),
+    [children],
+  );
+
   const { results, handleSearch } = useSearchListResults({
-    items: children,
+    items: visibleChildren,
     extract: (child) => toLocalizedString(child.properties.label, t),
   });
 
   return (
-    <SearchList.Root onSearch={handleSearch}>
-      <Panel.Root>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
-            <SearchList.Input placeholder={t('search placeholder')} autoFocus />
-          </Toolbar.Root>
-        </Panel.Toolbar>
-        <Panel.Content asChild>
-          <SearchList.Content>
-            <Mosaic.Container asChild>
-              <ScrollArea.Root orientation='vertical'>
-                <ScrollArea.Viewport classNames='p-2'>
-                  <Mosaic.Stack items={results} getId={(child) => child.id} Tile={WorkspaceChildTile} />
-                </ScrollArea.Viewport>
-              </ScrollArea.Root>
-            </Mosaic.Container>
-          </SearchList.Content>
-        </Panel.Content>
-      </Panel.Root>
-    </SearchList.Root>
+    <SearchPanel onSearch={handleSearch}>
+      <Mosaic.Container asChild>
+        <ScrollArea.Root centered padding thin>
+          <ScrollArea.Viewport>
+            <Mosaic.Stack
+              classNames='gap-1'
+              draggable={false}
+              items={results}
+              getId={(item) => item.id}
+              Tile={NavBranchTile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </SearchPanel>
   );
 };
 
-const WorkspaceChildTile: MosaicStackTileComponent<Node.Node> = (props) => {
+const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
   const data = props.data;
   const { t } = useTranslation(meta.id);
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const ref = useRef<HTMLDivElement>(null);
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
   const isSelected = selectedValue === data.id;
@@ -76,8 +75,8 @@ const WorkspaceChildTile: MosaicStackTileComponent<Node.Node> = (props) => {
   const name = toLocalizedString(data.properties.label, t);
 
   const handleSelect = useCallback(
-    () => invokeSync(LayoutOperation.Open, { subject: [data.id] }),
-    [invokeSync, data.id],
+    () => void invokePromise(LayoutOperation.Open, { subject: [data.id] }),
+    [invokePromise, data.id],
   );
 
   // Register this item with the search context.
@@ -103,17 +102,17 @@ const WorkspaceChildTile: MosaicStackTileComponent<Node.Node> = (props) => {
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
-      classNames={mx('dx-focus-ring', isSelected && 'bg-hover-overlay')}
+      classNames={mx('dx-focus-ring cursor-pointer', isSelected && 'bg-hover-overlay')}
       onClick={handleSelect}
     >
-      <Card.Toolbar density='coarse'>
+      <Card.Toolbar>
         <Avatar.Root>
           <Avatar.Content
             hue={data.properties.hue}
             icon={data.properties.icon}
             hueVariant='transparent'
             variant='square'
-            size={12}
+            size={8}
             fallback={name}
           />
           <Avatar.Label>{name}</Avatar.Label>

package/src/components/{Workspace → NavBranch}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Workspace';
+export * from './NavBranch';

package/src/components/Popover/Popover.tsx

@@ -6,12 +6,12 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useObjectNavigate } from '@dxos/app-toolkit/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui';
 
-import { useSimpleLayoutState } from '../../hooks';
-import { meta } from '../../meta';
+import { useSimpleLayoutState } from '#hooks';
+import { meta } from '#meta';
 
 const DEBOUNCE_DELAY = 40;
 
@@ -54,16 +54,10 @@ export const PopoverRoot = ({ children }: PropsWithChildren) => {
   );
 };
 
-// Extracts the subject from popover content if it has one, otherwise returns the content as-is.
-const getPopoverSubject = (content: unknown): unknown =>
-  content && typeof content === 'object' && 'subject' in content ? (content as { subject: unknown }).subject : content;
-
 export const PopoverContent = () => {
   const { t } = useTranslation(meta.id);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext('PopoverContent');
-  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
-
   const handleClose = useCallback(() => {
     setOpen(false);
     updateState((s) => ({
@@ -106,20 +100,20 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
+          {state.popoverKind === 'base' && state.popoverContent && 'component' in state.popoverContent && (
+            <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
+          )}
           {state.popoverKind === 'card' && (
             <Card.Root border={false} classNames='dx-card-popover'>
               <Card.Toolbar>
                 {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
                 <span />
-                {state.popoverTitle ? (
-                  <Card.Title onClick={handleNavigate}>{toLocalizedString(state.popoverTitle, t)}</Card.Title>
-                ) : (
-                  <span />
-                )}
+                {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
                 <Card.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
-              <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
+              {state.popoverContent && 'subject' in state.popoverContent && (
+                <Surface.Surface type={AppSurface.Card} data={state.popoverContent} limit={1} />
+              )}
             </Card.Root>
           )}
         </Popover.Viewport>

package/src/components/SimpleLayout/AppBar.stories.tsx

@@ -7,13 +7,13 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
 
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createMenuAction } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
-import { translations } from '../../translations';
-import { MobileLayout } from '../MobileLayout';
+import { translations } from '#translations';
 
+import { MobileLayout } from '../MobileLayout';
 import { AppBar, type AppBarProps } from './AppBar';
 
 const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
@@ -21,15 +21,15 @@ const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
 const buildDefaultActions = (): ActionGraphProps => {
   const result: ActionGraphProps = { nodes: [], edges: [] };
   const actions = [
-    createMenuAction('action-edit', () => console.log('Edit'), {
+    createMenuAction('action-edit.menu', () => console.log('Edit'), {
       icon: 'ph--pencil--regular',
       label: 'Edit',
     }),
-    createMenuAction('action-share', () => console.log('Share'), {
+    createMenuAction('action-share.menu', () => console.log('Share'), {
       icon: 'ph--share--regular',
       label: 'Share',
     }),
-    createMenuAction('action-delete', () => console.log('Delete'), {
+    createMenuAction('action-delete.menu', () => console.log('Delete'), {
       icon: 'ph--trash--regular',
       label: 'Delete',
     }),
@@ -39,11 +39,11 @@ const buildDefaultActions = (): ActionGraphProps => {
   return result;
 };
 
-type StoryProps = Omit<AppBarProps, 'actions'> & {
+type DefaultStoryProps = Omit<AppBarProps, 'actions'> & {
   actions: ActionGraphProps;
 };
 
-const DefaultStory = ({ actions: actionsProp, ...props }: StoryProps) => {
+const DefaultStory = ({ actions: actionsProp, ...props }: DefaultStoryProps) => {
   const actions = useMemo(() => Atom.make(actionsProp).pipe(Atom.keepAlive), [actionsProp]);
   return (
     <MobileLayout.Root>
@@ -71,7 +71,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<DefaultStoryProps>;
 
 export const Default: Story = {
   tags: ['test'],
@@ -104,7 +104,7 @@ export const Default: Story = {
     const editAction = await screen.findByRole('menuitem', { name: /edit/i });
     await userEvent.click(editAction);
     await expect(args.onAction).toHaveBeenCalledTimes(1);
-    await expect((args.onAction as Mock).mock.calls[0][0]).toHaveProperty('id', 'action-edit');
+    await expect((args.onAction as Mock).mock.calls[0][0]).toHaveProperty('id', 'action-edit.menu');
   },
 };
 

package/src/components/SimpleLayout/AppBar.tsx

@@ -5,16 +5,17 @@
 import { type Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { Fragment } from 'react';
 
-import { IconButton, Popover, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+import { IconButton, Popover, Toolbar, useTranslation } from '@dxos/react-ui';
 import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
-import { mx, osTranslations } from '@dxos/ui-theme';
+import { composable, composableProps, osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
 
-import { meta } from '../../meta';
 import { useMobileLayout } from '../MobileLayout';
 
 const APP_BAR_NAME = 'SimpleLayout.AppBar';
 
-export type AppBarProps = ThemedClassName<{
+export type AppBarProps = {
   /** Title/label to display in the banner. */
   title?: string;
   /** Action graph atom for the dropdown menu. */
@@ -27,68 +28,67 @@ export type AppBarProps = ThemedClassName<{
   onAction?: ActionExecutor;
   /** Callback when back button is clicked. */
   onBack?: () => void;
-}>;
+};
 
 /**
  * AppBar component that renders a title, optional back button, and actions dropdown.
  */
-export const AppBar = ({
-  classNames,
-  title,
-  actions,
-  showBackButton,
-  popoverAnchorId,
-  onAction,
-  onBack,
-}: AppBarProps) => {
-  const { t } = useTranslation(meta.id);
-  const menu = useMenuActions(actions);
-  const actionsValue = useAtomValue(actions);
-  const hasActions = actionsValue.nodes.length > 0;
-  const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
+export const AppBar = composable<HTMLDivElement, AppBarProps>(
+  ({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const menuActions = useMenuActions(actions);
+    const actionsValue = useAtomValue(actions);
+    const hasActions = actionsValue.nodes.length > 0;
+    const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
 
-  // Fall back to app name if no title provided.
-  const displayTitle = title ?? t('current app name', { ns: osTranslations });
+    // Fall back to app name if no title provided.
+    const displayTitle = title ?? t('current-app.name', { ns: osTranslations });
 
-  // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId is set.
-  const AnchorRoot = popoverAnchorId ? Popover.Anchor : Fragment;
+    // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId is set.
+    const AnchorRoot = popoverAnchorId ? Popover.Anchor : Fragment;
 
-  return (
-    <Toolbar.Root
-      role='banner'
-      classNames={mx(
-        'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center',
-        'dx-density-fine',
-        classNames,
-      )}
-    >
-      {keyboardOpen ? (
-        <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done label')} />
-      ) : showBackButton ? (
-        <IconButton variant='ghost' icon='ph--caret-left--regular' iconOnly label={t('back label')} onClick={onBack} />
-      ) : (
-        <div />
-      )}
-      <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
-      {hasActions ? (
-        <AnchorRoot>
-          <Menu.Root {...menu} caller={meta.id} onAction={onAction}>
-            <Menu.Trigger asChild>
-              <IconButton
-                variant='ghost'
-                icon='ph--dots-three-vertical--regular'
-                iconOnly
-                label={t('actions menu label')}
-              />
-            </Menu.Trigger>
-            <Menu.Content />
-          </Menu.Root>
-        </AnchorRoot>
-      ) : (
-        <span />
-      )}
-    </Toolbar.Root>
-  );
-};
+    return (
+      <Toolbar.Root
+        {...composableProps(props, {
+          role: 'banner',
+          classNames: 'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center dx-density-fine',
+        })}
+        ref={forwardedRef}
+      >
+        {keyboardOpen ? (
+          <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done.label')} />
+        ) : showBackButton ? (
+          <IconButton
+            variant='ghost'
+            icon='ph--caret-left--regular'
+            iconOnly
+            label={t('back.label')}
+            onClick={onBack}
+          />
+        ) : (
+          <div />
+        )}
+        <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
+        {hasActions ? (
+          <AnchorRoot>
+            <Menu.Root {...menuActions} caller={meta.id} onAction={onAction}>
+              <Menu.Trigger asChild>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--dots-three-vertical--regular'
+                  iconOnly
+                  label={t('actions-menu.label')}
+                />
+              </Menu.Trigger>
+              <Menu.Content />
+            </Menu.Root>
+          </AnchorRoot>
+        ) : (
+          <span />
+        )}
+      </Toolbar.Root>
+    );
+  },
+);
 
 AppBar.displayName = APP_BAR_NAME;

package/src/components/SimpleLayout/Drawer.tsx

@@ -5,14 +5,15 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useNode } from '@dxos/plugin-graph';
 import { ErrorFallback, Panel } from '@dxos/react-ui';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
-import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
-import { ContentLoading } from '../ContentLoading';
+import { useCompanions, useDrawerActions, useSimpleLayoutState } from '#hooks';
+
+import { Loading } from '../Loading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
 
@@ -23,7 +24,7 @@ export const Drawer = () => {
   const { graph } = useAppGraph();
   const { state: layoutState } = useSimpleLayoutState();
 
-  const placeholder = useMemo(() => <ContentLoading />, []);
+  const placeholder = useMemo(() => <Loading />, []);
 
   // Get all companions for the current active (primary) item.
   const activeId = layoutState.active ?? layoutState.workspace;
@@ -35,31 +36,38 @@ export const Drawer = () => {
   const parentNode = useNode(graph, activeId);
 
   // Build Surface data for the companion content.
-  const data = useMemo(() => {
-    return (
-      node && {
-        attendableId: companionId,
-        subject: node.data,
-        companionTo: parentNode?.data,
-        properties: node.properties,
-        variant,
-      }
-    );
+  const data = useMemo<AppSurface.ArticleData | undefined>(() => {
+    if (!node || !companionId) {
+      return undefined;
+    }
+    return {
+      attendableId: companionId,
+      subject: node.data,
+      companionTo: parentNode?.data,
+      properties: node.properties,
+      variant,
+    };
   }, [companionId, node, parentNode, variant]);
 
   // Get drawer actions (tabs + toolbar buttons).
   const { actions, onAction } = useDrawerActions(DRAWER_NAME);
-  const menu = useMenuActions(actions);
+  const menuActions = useMenuActions(actions);
 
   return (
     <Panel.Root>
       <Panel.Toolbar>
-        <Menu.Root {...menu} alwaysActive onAction={onAction}>
-          <Menu.Toolbar density='coarse' />
+        <Menu.Root {...menuActions} alwaysActive onAction={onAction}>
+          <Menu.Toolbar />
         </Menu.Root>
       </Panel.Toolbar>
-      <Panel.Content asChild>
-        <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
+      <Panel.Content>
+        <Surface.Surface
+          type={AppSurface.Article}
+          data={data}
+          limit={1}
+          fallback={ErrorFallback}
+          placeholder={placeholder}
+        />
       </Panel.Content>
     </Panel.Root>
   );
@@ -67,12 +75,6 @@ export const Drawer = () => {
 
 Drawer.displayName = DRAWER_NAME;
 
-/** Parse entry ID to extract primary ID and variant. */
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
 /**
  * Resolves which companion to show based on variant preference.
  * Falls back to first available if preferred variant not available.
@@ -85,10 +87,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((c) => {
-        const { variant } = parseEntryId(c.id);
-        return variant === preferredVariant;
-      });
+      const preferred = companions.find((c) => getLinkedVariant(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -99,7 +98,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
   }, [companions, preferredVariant]);
 
   const companionId = selectedCompanion?.id;
-  const { variant } = parseEntryId(companionId ?? '');
+  const variant = companionId ? getLinkedVariant(companionId) : undefined;
 
   return { selectedCompanion, companionId, variant };
 };

package/src/components/SimpleLayout/Main.tsx

@@ -5,17 +5,16 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
-import { ErrorFallback } from '@dxos/react-ui';
+import { ErrorFallback, Panel } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { mx } from '@dxos/ui-theme';
 
-import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
-import { ContentLoading } from '../ContentLoading';
-import { useLoadDescendents } from '../hooks';
-import { useMobileLayout } from '../MobileLayout/MobileLayout';
+import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '#hooks';
 
+import { useExpandPath } from '../hooks';
+import { Loading } from '../Loading';
+import { useMobileLayout } from '../MobileLayout';
 import { AppBar } from './AppBar';
 import { NavBar } from './NavBar';
 
@@ -32,7 +31,7 @@ export const Main = () => {
   const { actions, onAction } = useNavbarActions();
   const appBarProps = useAppBarProps();
 
-  const placeholder = useMemo(() => <ContentLoading />, []);
+  const placeholder = useMemo(() => <Loading />, []);
 
   const { graph } = useAppGraph();
   const node = useNode(graph, id);
@@ -47,36 +46,32 @@ export const Main = () => {
     );
   }, [id, node, node?.data, node?.properties, state.popoverAnchorId]);
 
-  // Ensures that children are loaded so that they are available to navigate to.
-  useLoadDescendents(id);
+  useExpandPath(id);
 
   // TODO(burdon): BUG: When showing ANY statusbar the size progressively shrinks when the keyboard opens/closes.
   const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === 'closed';
 
   return (
-    <div
-      role='none'
-      className={mx(
-        'h-full grid overflow-hidden bg-toolbar-surface',
-        showNavBar
-          ? 'grid-rows-[var(--dx-rail-action)_1fr_var(--dx-toolbar-size)]'
-          : 'grid-rows-[var(--dx-rail-action)_1fr]',
-      )}
-      {...attentionAttrs}
-    >
-      <AppBar {...appBarProps} />
-      <article className='h-full overflow-hidden bg-base-surface'>
+    <Panel.Root {...attentionAttrs} className='dx-document'>
+      <Panel.Toolbar asChild>
+        <AppBar {...appBarProps} />
+      </Panel.Toolbar>
+      <Panel.Content role='article' className='bg-base-surface'>
         <Surface.Surface
           key={id}
-          role='article'
+          type={AppSurface.Article}
           data={data}
           limit={1}
           fallback={ErrorFallback}
           placeholder={placeholder}
         />
-      </article>
-      {showNavBar && <NavBar classNames='border-y border-subdued-separator' actions={actions} onAction={onAction} />}
-    </div>
+      </Panel.Content>
+      {showNavBar && (
+        <Panel.Statusbar asChild>
+          <NavBar actions={actions} onAction={onAction} />
+        </Panel.Statusbar>
+      )}
+    </Panel.Root>
   );
 };
 

package/src/components/SimpleLayout/NavBar.stories.tsx

@@ -7,11 +7,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
 
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createGapSeparator, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { NavBar } from './NavBar';