@dxos/plugin-simple-layout 0.8.4-main.2244d791bb → 0.8.4-main.4a85c3132b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-simple-layout",
-  "version": "0.8.4-main.2244d791bb",
+  "version": "0.8.4-main.4a85c3132b",
   "description": "Simple layout plugin for minimal UI contexts like popover windows.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,9 +14,9 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     }
   },
@@ -31,19 +31,20 @@
     "@radix-ui/react-context": "1.1.1",
     "@tauri-apps/plugin-deep-link": "^2.2.0",
     "@tauri-apps/plugin-haptics": "^2.3.2",
-    "@dxos/app-framework": "0.8.4-main.2244d791bb",
-    "@dxos/async": "0.8.4-main.2244d791bb",
-    "@dxos/app-toolkit": "0.8.4-main.2244d791bb",
-    "@dxos/log": "0.8.4-main.2244d791bb",
-    "@dxos/operation": "0.8.4-main.2244d791bb",
-    "@dxos/plugin-graph": "0.8.4-main.2244d791bb",
-    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
-    "@dxos/react-ui-menu": "0.8.4-main.2244d791bb",
-    "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb",
-    "@dxos/react-ui-searchlist": "0.8.4-main.2244d791bb",
-    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
-    "@dxos/schema": "0.8.4-main.2244d791bb",
-    "@dxos/util": "0.8.4-main.2244d791bb"
+    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
+    "@dxos/echo": "0.8.4-main.4a85c3132b",
+    "@dxos/async": "0.8.4-main.4a85c3132b",
+    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
+    "@dxos/log": "0.8.4-main.4a85c3132b",
+    "@dxos/operation": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-menu": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-attention": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-searchlist": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/schema": "0.8.4-main.4a85c3132b",
+    "@dxos/util": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -51,24 +52,24 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/app-graph": "0.8.4-main.2244d791bb",
-    "@dxos/plugin-preview": "0.8.4-main.2244d791bb",
-    "@dxos/plugin-client": "0.8.4-main.2244d791bb",
-    "@dxos/plugin-search": "0.8.4-main.2244d791bb",
-    "@dxos/plugin-space": "0.8.4-main.2244d791bb",
-    "@dxos/react-ui": "0.8.4-main.2244d791bb",
-    "@dxos/plugin-testing": "0.8.4-main.2244d791bb",
-    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
-    "@dxos/schema": "0.8.4-main.2244d791bb",
-    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
+    "vite": "^7.1.11",
+    "@dxos/plugin-preview": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
+    "@dxos/app-graph": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-search": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/schema": "0.8.4-main.4a85c3132b",
+    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-testing": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "peerDependencies": {
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.2244d791bb",
-    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/ContentError.stories.tsx

@@ -4,28 +4,29 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { ErrorFallback } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../translations';
 
-import { ContentError } from './ContentError';
-
 const meta = {
-  title: 'plugins/plugin-simple-layout/ContentError',
-  component: ContentError,
+  title: 'plugins/plugin-simple-layout/components/ErrorFallback',
+  component: ErrorFallback,
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
     translations,
   },
-} satisfies Meta<typeof ContentError>;
+} satisfies Meta<typeof ErrorFallback>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  args: {},
+  args: {
+    error: new Error('An unexpected error occurred'),
+  },
 };
 
 export const WithError: Story = {

package/src/components/ContentLoading.stories.tsx

@@ -9,7 +9,7 @@ import { withTheme } from '@dxos/react-ui/testing';
 import { ContentLoading } from './ContentLoading';
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/ContentLoading',
+  title: 'plugins/plugin-simple-layout/components/ContentLoading',
   component: ContentLoading,
   decorators: [withTheme()],
   parameters: {

package/src/components/ContentLoading.tsx

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

package/src/components/Dialog/Dialog.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
+import { ErrorFallback } from '@dxos/react-ui';
 
 import { useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
 
 export const Dialog = () => {
   const { state, updateState } = useSimpleLayoutState();
@@ -23,14 +23,14 @@ export const Dialog = () => {
       onOpenChange={(nextOpen) => updateState((state) => ({ ...state, dialogOpen: nextOpen }))}
     >
       {state.dialogBlockAlign === 'end' ? (
-        <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+        <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ErrorFallback} />
       ) : (
         <DialogOverlay
           blockAlign={state.dialogBlockAlign}
           classNames={state.dialogOverlayClasses}
           style={state.dialogOverlayStyle}
         >
-          <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ContentError} />
+          <Surface.Surface role='dialog' data={state.dialogContent} limit={1} fallback={ErrorFallback} />
         </DialogOverlay>
       )}
     </DialogRoot>

package/src/components/Home/Home.tsx

@@ -8,8 +8,9 @@ import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, useConnections } from '@dxos/plugin-graph';
-import { Avatar, Icon, Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { Avatar, Icon, Panel, ScrollArea, Toolbar, 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 { mx } from '@dxos/ui-theme';
 import { byPosition } from '@dxos/util';
@@ -40,22 +41,26 @@ export const Home = (_: HomeProps) => {
   });
 
   return (
-    <Layout.Main toolbar>
-      <SearchList.Root onSearch={handleSearch}>
-        <Toolbar.Root>
-          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
-        </Toolbar.Root>
-        <SearchList.Content>
-          <Mosaic.Container asChild>
-            <ScrollArea.Root orientation='vertical'>
-              <ScrollArea.Viewport classNames='p-2'>
-                <Mosaic.Stack items={results} getId={(node) => node.id} Tile={WorkspaceTile} />
-              </ScrollArea.Viewport>
-            </ScrollArea.Root>
-          </Mosaic.Container>
-        </SearchList.Content>
-      </SearchList.Root>
-    </Layout.Main>
+    <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={(node) => node.id} Tile={WorkspaceTile} />
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+            </Mosaic.Container>
+          </SearchList.Content>
+        </Panel.Content>
+      </Panel.Root>
+    </SearchList.Root>
   );
 };
 
@@ -97,7 +102,7 @@ const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
-      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hover-overlay')}
       onClick={handleSelect}
       ref={cardRef}
     >
@@ -127,7 +132,7 @@ const filterItems = (node: Node.Node, disposition: string) => {
 /** Returns root-level items filtered by disposition. */
 const useItemsByDisposition = (disposition: string, sort = false) => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, Node.RootId);
+  const connections = useConnections(graph, Node.RootId, 'child');
   const filtered = connections.filter((node) => filterItems(node, disposition));
   return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };

package/src/components/MobileLayout/MobileLayout.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren, useEffect, useState } from 'react';
 
 import { addEventListener, combine } from '@dxos/async';
-import { Flex, Input, Layout, Splitter, type SplitterMode, Toolbar } from '@dxos/react-ui';
+import { Flex, Input, Panel, Splitter, type SplitterMode, Toolbar } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { MobileLayout, type MobileLayoutRootProps } from './MobileLayout';
@@ -54,20 +54,24 @@ const WithKeyboard = ({ children }: PropsWithChildren) => {
   return <div className='h-screen relative'>{children}</div>;
 };
 
-const Panel = ({ children, label }: PropsWithChildren<{ label: string }>) => {
+const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) => {
   return (
-    <Layout.Main toolbar>
-      <Toolbar.Root>
-        {label}
-        <Toolbar.Separator variant='gap' />
-        {children}
-      </Toolbar.Root>
-      <Flex column classNames='p-1'>
-        <Input.Root>
-          <Input.TextInput />
-        </Input.Root>
-      </Flex>
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          {label}
+          <Toolbar.Separator />
+          {children}
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <Flex column classNames='p-1'>
+          <Input.Root>
+            <Input.TextInput />
+          </Input.Root>
+        </Flex>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
@@ -85,21 +89,21 @@ const DefaultStory = () => {
         <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
           <Splitter.Root mode={splitterMode} ratio={0.5}>
             <Splitter.Panel position='upper'>
-              <Panel label='Main'>
+              <StoryPanel label='Main'>
                 {splitterMode === 'upper' && (
                   <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('both')} />
                 )}
-              </Panel>
+              </StoryPanel>
             </Splitter.Panel>
             <Splitter.Panel position='lower'>
-              <Panel label='Drawer'>
+              <StoryPanel label='Drawer'>
                 <Toolbar.IconButton
                   icon={splitterMode === 'lower' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
                   label={splitterMode === 'lower' ? 'Collapse' : 'Expand'}
                   onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'both' ? 'lower' : 'both'))}
                 />
                 <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('upper')} />
-              </Panel>
+              </StoryPanel>
             </Splitter.Panel>
           </Splitter.Root>
         </MobileLayout.Panel>
@@ -109,7 +113,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta<MobileLayoutRootProps> = {
-  title: 'plugins/plugin-simple-layout/MobileLayout',
+  title: 'plugins/plugin-simple-layout/components/MobileLayout',
   component: MobileLayout.Root,
   render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'relative' })],

package/src/components/MobileLayout/MobileLayout.tsx

@@ -54,7 +54,7 @@ const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
           {...props}
           role='none'
           style={{
-            transition: `block-size ${transition}ms ease-out`,
+            transition: `h-size ${transition}ms ease-out`,
             blockSize: 'calc(100vh - var(--kb-height, 0px))',
           }}
           className={mx('absolute top-0 left-0 right-0 flex flex-col', classNames)}
@@ -95,7 +95,7 @@ const MobileLayoutPanel = forwardRef<HTMLDivElement, MobileLayoutPanelProps>(
           paddingTop: safe?.top ? 'env(safe-area-inset-top)' : undefined,
           paddingBottom: safe?.bottom ? `calc((1 - var(--kb-open, 0)) * env(safe-area-inset-bottom))` : undefined,
         }}
-        className={mx('relative bs-full flex flex-col overflow-hidden', classNames)}
+        className={mx('relative h-full flex flex-col overflow-hidden', classNames)}
         ref={forwardedRef}
       >
         {children}

package/src/components/Popover/Popover.tsx

@@ -6,8 +6,9 @@ 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 { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 
 import { useSimpleLayoutState } from '../../hooks';
 import { meta } from '../../meta';
@@ -53,10 +54,15 @@ 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);
@@ -102,12 +108,16 @@ export const PopoverContent = () => {
         <Popover.Viewport>
           {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
           {state.popoverKind === 'card' && (
-            <Card.Root border={false} classNames='popover-card-max-width'>
+            <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>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
-                <Card.Close onClick={handleClose} />
+                {state.popoverTitle ? (
+                  <Card.Title onClick={handleNavigate}>{toLocalizedString(state.popoverTitle, t)}</Card.Title>
+                ) : (
+                  <span />
+                )}
+                <Card.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
               <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
             </Card.Root>

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

@@ -35,7 +35,7 @@ const buildDefaultActions = (): ActionGraphProps => {
     }),
   ];
   result.nodes.push(...actions);
-  result.edges.push(...actions.map((a) => ({ source: 'root', target: a.id })));
+  result.edges.push(...actions.map((a) => ({ source: 'root', target: a.id, relation: 'child' })));
   return result;
 };
 
@@ -53,7 +53,7 @@ const DefaultStory = ({ actions: actionsProp, ...props }: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/AppBar',
+  title: 'plugins/plugin-simple-layout/components/AppBar',
   render: DefaultStory,
   decorators: [
     withTheme(),

package/src/components/SimpleLayout/AppBar.tsx

@@ -6,13 +6,7 @@ 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 {
-  type ActionExecutor,
-  type ActionGraphProps,
-  DropdownMenu,
-  MenuProvider,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
 import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
@@ -62,7 +56,11 @@ export const AppBar = ({
   return (
     <Toolbar.Root
       role='banner'
-      classNames={mx('grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)] items-center', 'density-fine', classNames)}
+      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')} />
@@ -74,18 +72,17 @@ export const AppBar = ({
       <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
       {hasActions ? (
         <AnchorRoot>
-          <MenuProvider {...menu} onAction={onAction}>
-            <DropdownMenu.Root caller={meta.id}>
-              <DropdownMenu.Trigger asChild>
-                <IconButton
-                  variant='ghost'
-                  icon='ph--dots-three-vertical--regular'
-                  iconOnly
-                  label={t('actions menu label')}
-                />
-              </DropdownMenu.Trigger>
-            </DropdownMenu.Root>
-          </MenuProvider>
+          <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 />

package/src/components/SimpleLayout/Drawer.tsx

@@ -7,12 +7,11 @@ import React, { useMemo } from 'react';
 import { Surface } from '@dxos/app-framework/ui';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useNode } from '@dxos/plugin-graph';
-import { Layout } from '@dxos/react-ui';
+import { ErrorFallback, Panel } from '@dxos/react-ui';
 import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-import { MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
 import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
@@ -53,12 +52,16 @@ export const Drawer = () => {
   const menu = useMenuActions(actions);
 
   return (
-    <Layout.Main toolbar>
-      <MenuProvider {...menu} onAction={onAction} alwaysActive>
-        <ToolbarMenu density='coarse' />
-      </MenuProvider>
-      <Surface.Surface role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar>
+        <Menu.Root {...menu} alwaysActive onAction={onAction}>
+          <Menu.Toolbar density='coarse' />
+        </Menu.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 

package/src/components/SimpleLayout/Main.tsx

@@ -7,11 +7,11 @@ import React, { useMemo } from 'react';
 import { Surface } from '@dxos/app-framework/ui';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
+import { ErrorFallback } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/ui-theme';
 
 import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
 import { useLoadDescendents } from '../hooks';
 import { useMobileLayout } from '../MobileLayout/MobileLayout';
@@ -57,23 +57,25 @@ export const Main = () => {
     <div
       role='none'
       className={mx(
-        'bs-full grid overflow-hidden bg-toolbarSurface',
-        showNavBar ? 'grid-rows-[var(--rail-action)_1fr_var(--toolbar-size)]' : 'grid-rows-[var(--rail-action)_1fr]',
+        '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='bs-full overflow-hidden bg-baseSurface'>
+      <article className='h-full overflow-hidden bg-base-surface'>
         <Surface.Surface
           key={id}
           role='article'
           data={data}
           limit={1}
-          fallback={ContentError}
+          fallback={ErrorFallback}
           placeholder={placeholder}
         />
       </article>
-      {showNavBar && <NavBar classNames='border-bs border-subduedSeparator' actions={actions} onAction={onAction} />}
+      {showNavBar && <NavBar classNames='border-y border-subdued-separator' actions={actions} onAction={onAction} />}
     </div>
   );
 };

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

@@ -7,7 +7,7 @@ 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 { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createGapSeparator, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
 import { withRegistry } from '@dxos/storybook-utils';
 
@@ -39,7 +39,7 @@ const buildCompanionOnlyActions = (): ActionGraphProps => {
     }),
   ];
   result.nodes.push(...companions);
-  result.edges.push(...companions.map((c) => ({ source: 'root', target: c.id })));
+  result.edges.push(...companions.map((c) => ({ source: 'root', target: c.id, relation: 'child' })));
   return result;
 };
 
@@ -81,18 +81,18 @@ const buildDefaultActions = (): ActionGraphProps => {
   ];
   result.nodes.push(...companions, ...gapSeparator.nodes, mainMenuGroup, ...menuActions);
   result.edges.push(
-    ...companions.map((c) => ({ source: 'root', target: c.id })),
+    ...companions.map((c) => ({ source: 'root', target: c.id, relation: 'child' })),
     ...gapSeparator.edges,
-    { source: 'root', target: mainMenuGroup.id },
-    ...menuActions.map((action) => ({ source: MAIN_MENU_GROUP_ID, target: action.id })),
+    { source: 'root', target: mainMenuGroup.id, relation: 'child' },
+    ...menuActions.map((action) => ({ source: MAIN_MENU_GROUP_ID, target: action.id, relation: 'child' })),
   );
   return result;
 };
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/NavBar',
+  title: 'plugins/plugin-simple-layout/components/NavBar',
   component: NavBar,
-  decorators: [withTheme(), withRegistry],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -106,7 +106,7 @@ type Story = StoryObj<typeof meta>;
 const DefaultStory = ({ onAction }: { onAction: (action: { id: string }) => void }) => {
   const actions = useMemo(() => Atom.make(buildDefaultActions()).pipe(Atom.keepAlive), []);
 
-  return <NavBar classNames='border-bs border-separator' actions={actions} onAction={onAction} />;
+  return <NavBar classNames='border-y border-separator' actions={actions} onAction={onAction} />;
 };
 
 export const Default: Story = {

package/src/components/SimpleLayout/NavBar.tsx

@@ -6,13 +6,7 @@ import { type Atom } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import {
-  type ActionExecutor,
-  type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
 import { mx } from '@dxos/ui-theme';
 
 const NAVBAR_NAME = 'SimpleLayout.NavBar';
@@ -31,9 +25,9 @@ export const NavBar = ({ classNames, actions, onAction }: NavBarProps) => {
   const menu = useMenuActions(actions);
 
   return (
-    <MenuProvider {...menu} onAction={onAction} alwaysActive>
-      <ToolbarMenu density='coarse' classNames={mx(classNames)} />
-    </MenuProvider>
+    <Menu.Root {...menu} alwaysActive onAction={onAction}>
+      <Menu.Toolbar density='coarse' classNames={mx(classNames)} />
+    </Menu.Root>
   );
 };