@dxos/plugin-simple-layout 0.8.4-main.937b3ca → 0.8.4-main.bc674ce

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-simple-layout",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.bc674ce",
   "description": "Simple layout plugin for minimal UI contexts like popover windows.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -29,17 +29,17 @@
     "@effect-atom/atom": "^0.4.13",
     "@effect-atom/atom-react": "^0.4.6",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/app-framework": "0.8.4-main.937b3ca",
-    "@dxos/operation": "0.8.4-main.937b3ca",
-    "@dxos/log": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-attention": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-menu": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-mosaic": "0.8.4-main.937b3ca",
-    "@dxos/plugin-graph": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-searchlist": "0.8.4-main.937b3ca",
-    "@dxos/schema": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-stack": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@dxos/app-framework": "0.8.4-main.bc674ce",
+    "@dxos/log": "0.8.4-main.bc674ce",
+    "@dxos/operation": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-attention": "0.8.4-main.bc674ce",
+    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-menu": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-searchlist": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-stack": "0.8.4-main.bc674ce",
+    "@dxos/schema": "0.8.4-main.bc674ce",
+    "@dxos/util": "0.8.4-main.bc674ce"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -48,22 +48,22 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/plugin-preview": "0.8.4-main.937b3ca",
-    "@dxos/plugin-client": "0.8.4-main.937b3ca",
-    "@dxos/plugin-search": "0.8.4-main.937b3ca",
-    "@dxos/plugin-space": "0.8.4-main.937b3ca",
-    "@dxos/schema": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/storybook-utils": "0.8.4-main.937b3ca",
-    "@dxos/plugin-testing": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/plugin-client": "0.8.4-main.bc674ce",
+    "@dxos/plugin-preview": "0.8.4-main.bc674ce",
+    "@dxos/plugin-search": "0.8.4-main.bc674ce",
+    "@dxos/plugin-space": "0.8.4-main.bc674ce",
+    "@dxos/plugin-testing": "0.8.4-main.bc674ce",
+    "@dxos/react-ui": "0.8.4-main.bc674ce",
+    "@dxos/ui-theme": "0.8.4-main.bc674ce",
+    "@dxos/schema": "0.8.4-main.bc674ce",
+    "@dxos/storybook-utils": "0.8.4-main.bc674ce"
   },
   "peerDependencies": {
     "effect": "3.19.11",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/react-ui": "0.8.4-main.bc674ce",
+    "@dxos/ui-theme": "0.8.4-main.bc674ce"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -6,12 +6,19 @@ import * as Effect from 'effect/Effect';
 
 import { Capability, Common } from '@dxos/app-framework';
 import { Operation, OperationResolver } from '@dxos/operation';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
 
 import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
 
 /** Maximum number of items to keep in navigation history. */
 const MAX_HISTORY_LENGTH = 50;
 
+/** Parse entry ID to extract primary ID and variant. */
+const parseEntryId = (entryId: string) => {
+  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
+  return { id, variant };
+};
+
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const registry = yield* Capability.get(Common.Capability.AtomRegistry);
@@ -23,6 +30,15 @@ export default Capability.makeModule(
     };
 
     return Capability.contributes(Common.Capability.OperationResolver, [
+      //
+      // SetLayoutMode
+      //
+      // TODO(burdon): No-op for to fix startup bug?
+      OperationResolver.make({
+        operation: Common.LayoutOperation.SetLayoutMode,
+        handler: Effect.fnUntraced(function* () {}),
+      }),
+
       //
       // UpdateSidebar - No-op for simple layout.
       //
@@ -32,11 +48,18 @@ export default Capability.makeModule(
       }),
 
       //
-      // UpdateComplementary - No-op for simple layout.
+      // UpdateComplementary - Controls companion drawer.
       //
       OperationResolver.make({
         operation: Common.LayoutOperation.UpdateComplementary,
-        handler: () => Effect.void,
+        handler: Effect.fnUntraced(function* (input) {
+          if (input.state === 'closed') {
+            updateState((state) => ({
+              ...state,
+              drawerState: 'closed',
+            }));
+          }
+        }),
       }),
 
       //
@@ -120,18 +143,32 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: Common.LayoutOperation.Open,
         handler: Effect.fnUntraced(function* (input) {
-          updateState((state) => {
-            // Push current active to history if it exists.
-            const newHistory = state.active ? [...state.history, state.active] : state.history;
-            // Limit history length to prevent memory issues.
-            const trimmedHistory =
-              newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
-            return {
+          const id = input.subject[0];
+          const { variant } = parseEntryId(id);
+
+          if (variant) {
+            // It's a companion - store the variant preference and open drawer.
+            updateState((state) => ({
               ...state,
-              active: input.subject[0],
-              history: trimmedHistory,
-            };
-          });
+              companionVariant: variant,
+              // Open drawer if closed, otherwise preserve current state (expanded/full).
+              drawerState: state.drawerState === 'closed' || !state.drawerState ? 'expanded' : state.drawerState,
+            }));
+          } else {
+            // Regular navigation - update active and history.
+            updateState((state) => {
+              // Push current active to history if it exists.
+              const newHistory = state.active ? [...state.history, state.active] : state.history;
+              // Limit history length to prevent memory issues.
+              const trimmedHistory =
+                newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
+              return {
+                ...state,
+                active: id,
+                history: trimmedHistory,
+              };
+            });
+          }
         }),
       }),
 

package/src/capabilities/state/state.tsx

@@ -17,6 +17,8 @@ const defaultState: SimpleLayoutState = {
   previousWorkspace: Node.RootId,
   history: [],
   isPopover: false,
+  companionVariant: undefined,
+  drawerState: 'closed',
 };
 
 export type SimpleLayoutStateOptions = {

package/src/components/SimpleLayout/Banner.tsx

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { Fragment, useCallback, useMemo } from 'react';
 
 import { Common } from '@dxos/app-framework';
 import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
-import { Graph, Node } from '@dxos/plugin-graph';
-import { IconButton, type ThemedClassName, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Graph, Node, useActionRunner, useActions } from '@dxos/plugin-graph';
+import { IconButton, Popover, type ThemedClassName, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, MenuProvider } from '@dxos/react-ui-menu';
 import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { useSimpleLayoutState } from '../../hooks';
@@ -33,9 +34,19 @@ export const Banner = ({ node, classNames }: BannerProps) => {
   const { state } = useSimpleLayoutState();
   const { invokePromise } = useOperationInvoker();
   const { graph } = useAppGraph();
+  const runAction = useActionRunner();
 
   const label = (node && toLocalizedString(node.properties.label, t)) ?? t('current app name', { ns: osTranslations });
 
+  // Get actions for the current node, filtered by disposition.
+  // NOTE: Graph expansion is handled by useLoadDescendents in Main.tsx.
+  const allActions = useActions(graph, node?.id);
+  const actions = useMemo(() => {
+    return allActions.filter((a) =>
+      ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition),
+    );
+  }, [allActions]);
+
   // Check if current active item is a top-level workspace/collection child.
   const isTopLevelItem = useMemo(() => {
     if (!state.active) {
@@ -58,6 +69,9 @@ export const Banner = ({ node, classNames }: BannerProps) => {
     }
   }, [invokePromise, state.active, state.history.length, isTopLevelItem]);
 
+  // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId matches.
+  const AnchorRoot = node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
+
   if (!node) {
     return null;
   }
@@ -76,7 +90,24 @@ export const Banner = ({ node, classNames }: BannerProps) => {
         <div />
       )}
       <h1 className={'grow text-center truncate font-medium'}>{label}</h1>
-      <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label={t('menu label')} />
+      {actions.length > 0 ? (
+        <AnchorRoot>
+          <MenuProvider onAction={runAction}>
+            <DropdownMenu.Root items={actions} caller={meta.id}>
+              <DropdownMenu.Trigger asChild>
+                <IconButton
+                  iconOnly
+                  variant='ghost'
+                  icon='ph--dots-three-vertical--regular'
+                  label={t('actions menu label')}
+                />
+              </DropdownMenu.Trigger>
+            </DropdownMenu.Root>
+          </MenuProvider>
+        </AnchorRoot>
+      ) : (
+        <span />
+      )}
     </Toolbar.Root>
   );
 };

package/src/components/SimpleLayout/Drawer.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { Surface, useAppGraph } from '@dxos/app-framework/react';
+import { type Node, useNode } from '@dxos/plugin-graph';
+import { IconButton, Main as NaturalMain, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+
+import { useCompanions, useSimpleLayoutState } from '../../hooks';
+import { meta } from '../../meta';
+import { ContentError } from '../ContentError';
+import { ContentLoading } from '../ContentLoading';
+
+const DRAWER_NAME = 'SimpleLayout.Drawer';
+
+/**
+ * Companion drawer component.
+ */
+export const Drawer = () => {
+  const { t } = useTranslation(meta.id);
+  const { state, updateState } = useSimpleLayoutState();
+  const { graph } = useAppGraph();
+
+  const placeholder = useMemo(() => <ContentLoading />, []);
+
+  // Get all companions for the current active (primary) item.
+  const activeId = state.active ?? state.workspace;
+  const companions = useCompanions(activeId);
+  const { companionId, variant } = useSelectedCompanion(companions, state.companionVariant);
+
+  // Get node for the selected companion.
+  const node = useNode(graph, companionId);
+  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,
+      }
+    );
+  }, [companionId, node, parentNode, variant]);
+
+  // Handle tab click to switch companions.
+  const handleTabClick = useCallback(
+    (companion: Node.Node) => {
+      const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
+      updateState((s) => ({ ...s, companionVariant }));
+    },
+    [updateState],
+  );
+
+  // Handle expand/collapse toggle.
+  const handleToggleExpand = useCallback(() => {
+    updateState((s) => ({
+      ...s,
+      drawerState: s.drawerState === 'full' ? 'expanded' : 'full',
+    }));
+  }, [updateState]);
+
+  // Handle close.
+  const handleClose = useCallback(() => {
+    updateState((s) => ({ ...s, drawerState: 'closed' }));
+  }, [updateState]);
+
+  const drawerState = state.drawerState ?? 'closed';
+  if (drawerState === 'closed') {
+    return null;
+  }
+
+  const isFullyExpanded = drawerState === 'full';
+
+  return (
+    <NaturalMain.Drawer label={t('drawer label')}>
+      <Toolbar.Root>
+        {/* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */}
+        <div role='tablist' className='flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1'>
+          {/* TODO(burdon): Factor out in common with NavBar. */}
+          {companions.map((companion) => (
+            <IconButton
+              key={companion.id}
+              role='tab'
+              aria-selected={companionId === companion.id}
+              icon={companion.properties.icon}
+              iconOnly
+              label={toLocalizedString(companion.properties.label, t)}
+              variant={companionId === companion.id ? 'primary' : 'ghost'}
+              onClick={() => handleTabClick(companion)}
+            />
+          ))}
+        </div>
+        <Toolbar.Separator variant='gap' />
+        <Toolbar.IconButton
+          icon={isFullyExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+          iconOnly
+          label={isFullyExpanded ? t('collapse drawer label') : t('expand drawer label')}
+          onClick={handleToggleExpand}
+        />
+        <Toolbar.IconButton icon='ph--x--regular' iconOnly label={t('close drawer label')} onClick={handleClose} />
+      </Toolbar.Root>
+      {/* TODO(burdon): Fix containment. */}
+      <Surface role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
+    </NaturalMain.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.
+ */
+const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string) => {
+  const selectedCompanion = useMemo(() => {
+    if (companions.length === 0) {
+      return undefined;
+    }
+
+    // Try to find companion matching the preferred variant.
+    if (preferredVariant) {
+      const preferred = companions.find((c) => {
+        const { variant } = parseEntryId(c.id);
+        return variant === preferredVariant;
+      });
+      if (preferred) {
+        return preferred;
+      }
+    }
+
+    // Fallback to first companion.
+    return companions[0];
+  }, [companions, preferredVariant]);
+
+  const companionId = selectedCompanion?.id;
+  const { variant } = parseEntryId(companionId ?? '');
+
+  return { selectedCompanion, companionId, variant };
+};

package/src/components/SimpleLayout/Main.tsx

@@ -2,80 +2,71 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { Surface, useAppGraph } from '@dxos/app-framework/react';
-import { log } from '@dxos/log';
 import { useNode } from '@dxos/plugin-graph';
-import { Main as NaturalMain } from '@dxos/react-ui';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-import { Mosaic } from '@dxos/react-ui-mosaic';
+import { Main as NaturalMain, useSidebars } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
 import { useSimpleLayoutState } from '../../hooks';
 import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
+import { useLoadDescendents } from '../hooks';
 
 import { Banner } from './Banner';
 import { NavBar } from './NavBar';
 
+const MAIN_NAME = 'SimpleLayout.Main';
+
 /**
- * Main root component.
+ * Main content component.
  */
 export const Main = () => {
   const { state } = useSimpleLayoutState();
-  const id = state.active ?? state.workspace;
-  const showNavBar = !state.isPopover;
   const { graph } = useAppGraph();
+  const id = state.active ?? state.workspace;
   const node = useNode(graph, id);
 
+  // Ensures that children are loaded so that they are available to navigate to.
+  useLoadDescendents(id);
+
   const placeholder = useMemo(() => <ContentLoading />, []);
 
   const data = useMemo(() => {
-    const { variant } = parseEntryId(id);
     return (
       node && {
         attendableId: id,
         subject: node.data,
         properties: node.properties,
         popoverAnchorId: state.popoverAnchorId,
-        variant,
       }
     );
   }, [id, node, node?.data, node?.properties, state.popoverAnchorId]);
 
-  const handleActiveIdChange = useCallback((nextActiveId: string | null) => {
-    log.info('navigate', { nextActiveId });
-  }, []);
+  const { drawerState } = useSidebars(MAIN_NAME);
+  const showNavBar = !state.isPopover && drawerState === 'closed';
 
   return (
-    <Mosaic.Root>
-      <NaturalMain.Root complementarySidebarState='closed' navigationSidebarState='closed'>
-        <NaturalMain.Content
-          bounce
-          classNames={mx(
-            'dx-mobile-main dx-mobile-main-scroll-area--flush',
-            'grid bs-full overflow-hidden',
-            showNavBar ? 'grid-rows-[min-content_1fr_min-content]' : 'grid-rows-[min-content_1fr]',
-          )}
-        >
-          <Banner classNames='border-be border-separator' node={node} />
-          <article className='contents'>
-            <Surface key={id} role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
-          </article>
-          {showNavBar && (
-            <NavBar classNames='border-bs border-separator' activeId={id} onActiveIdChange={handleActiveIdChange} />
-          )}
-        </NaturalMain.Content>
-      </NaturalMain.Root>
-    </Mosaic.Root>
+    <NaturalMain.Content
+      bounce
+      classNames={mx('bs-full', 'pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)]')}
+    >
+      <div
+        role='none'
+        className={mx(
+          'grid bs-full overflow-hidden',
+          showNavBar ? 'grid-rows-[min-content_1fr_min-content]' : 'grid-rows-[min-content_1fr]',
+        )}
+      >
+        <Banner classNames='border-be border-separator' node={node} />
+        <article className='bs-full overflow-hidden'>
+          <Surface key={id} role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
+        </article>
+        {showNavBar && <NavBar classNames='border-bs border-separator' activeId={id} />}
+      </div>
+    </NaturalMain.Content>
   );
 };
 
-// TODO(wittjosiah): Factor out. Copied from deck plugin.
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
-Main.displayName = 'SimpleLayout.Main';
+Main.displayName = MAIN_NAME;

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

@@ -25,9 +25,6 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-  argTypes: {
-    onActiveIdChange: { action: 'activeIdChanged' },
-  },
 } satisfies Meta<typeof NavBar>;
 
 export default meta;

package/src/components/SimpleLayout/NavBar.tsx

@@ -4,71 +4,63 @@
 
 import React from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
 import { Node, useActionRunner, useConnections } from '@dxos/plugin-graph';
-import { IconButton, type ThemedClassName, Toolbar, Tooltip, useTranslation } from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, Toolbar, Tooltip, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { DropdownMenu, MenuProvider } from '@dxos/react-ui-menu';
 import { mx } from '@dxos/ui-theme';
 
+import { useCompanions } from '../../hooks';
 import { meta } from '../../meta';
 
+const NAVBAR_NAME = 'SimpleLayout.NavBar';
+
 export type NavBarProps = ThemedClassName<{
+  /** Active AppGraph node ID. */
   activeId?: string;
-  onActiveIdChange?: (nextActiveId: string | null) => void;
 }>;
 
-export const NavBar = ({ classNames, activeId, onActiveIdChange }: NavBarProps) => {
+export const NavBar = ({ classNames, activeId }: NavBarProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();
+  const { invokePromise } = useOperationInvoker();
 
   const connections = useConnections(graph, Node.RootId);
   const menuActions = connections.filter((node) => node.properties.disposition === 'menu');
 
-  const isBrowseActive = activeId !== 'notifications' && activeId !== 'profile';
+  const companions = useCompanions(activeId);
 
   return (
     <Toolbar.Root classNames={mx('justify-center', classNames)}>
+      {companions.map((companion) => (
+        <Toolbar.IconButton
+          key={companion.id}
+          icon={companion.properties.icon ?? 'ph--placeholder--regular'}
+          iconOnly
+          label={toLocalizedString(companion.properties.label, t)}
+          onClick={() => {
+            void invokePromise(Common.LayoutOperation.Open, {
+              subject: [companion.id],
+            });
+          }}
+        />
+      ))}
+
+      <Toolbar.Separator variant='gap' />
+
       <MenuProvider onAction={runAction}>
         <DropdownMenu.Root items={menuActions}>
           <Tooltip.Trigger asChild content={t('app menu label')}>
-            <DropdownMenu.Trigger asChild data-testid='spacePlugin.addSpace'>
+            <DropdownMenu.Trigger asChild data-testid='simpleLayoutPlugin.addSpace'>
               <IconButton icon='ph--plus--regular' iconOnly label={t('main menu label')} />
             </DropdownMenu.Trigger>
           </Tooltip.Trigger>
         </DropdownMenu.Root>
       </MenuProvider>
-      {/*
-        <ButtonGroup>
-          <IconButton
-            {...buttonProps}
-            label={t('browse label')}
-            icon='ph--squares-four--regular'
-            onClick={() => onActiveIdChange?.(null)}
-            variant={isBrowseActive ? 'primary' : 'default'}
-            {...(isBrowseActive && { 'aria-current': 'location' })}
-          />
-          <IconButton
-            {...buttonProps}
-            label={t('notifications label')}
-            icon='ph--bell-simple--regular'
-            onClick={() => onActiveIdChange?.('notifications')}
-            variant={activeId === 'notifications' ? 'primary' : 'default'}
-            {...(activeId === 'notifications' && { 'aria-current': 'location' })}
-          />
-          <Button
-            variant={activeId === 'profile' ? 'primary' : 'default'}
-            onClick={() => onActiveIdChange?.('profile')}
-            classNames={buttonProps.classNames}
-          >
-            <span className='sr-only'>{t('profile label')}</span>
-            <Avatar.Root>
-              <Avatar.Label classNames='sr-only'>Profile display name</Avatar.Label>
-              <Avatar.Content size={8} status='active' hue='cyan' fallback='🗿' />
-            </Avatar.Root>
-          </Button>
-        </ButtonGroup>
-      */}
     </Toolbar.Root>
   );
 };
+
+NavBar.displayName = NAVBAR_NAME;

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

@@ -91,6 +91,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+/**
+ * NOTE: To expose to iphone on network:
+ * `moon run storybook-react:serve dev -H 0.0.0.0`
+ */
 export const Default: Story = {
   decorators: [withTheme, createPluginManager({ isPopover: false })],
 };