@dxos/plugin-simple-layout 0.8.4-main.d05673bc65 → 0.8.4-main.fcfe5033a5

package/src/components/{ContentLoading/ContentLoading.stories.tsx → Loading/Loading.stories.tsx}

@@ -6,16 +6,16 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { ContentLoading } from './ContentLoading';
+import { Loading } from './Loading';
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/components/ContentLoading',
-  component: ContentLoading,
+  title: 'plugins/plugin-simple-layout/components/Loading',
+  component: Loading,
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-} satisfies Meta<typeof ContentLoading>;
+} satisfies Meta<typeof Loading>;
 
 export default meta;
 

package/src/components/{ContentLoading/ContentLoading.tsx → Loading/Loading.tsx}

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

package/src/components/{ContentLoading → Loading}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './ContentLoading';
+export * from './Loading';

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, Panel, Splitter, type SplitterMode, Toolbar } from '@dxos/react-ui';
+import { Column, 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';
@@ -65,44 +65,48 @@ const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) =
         </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content asChild>
-        <Flex column classNames='p-1'>
-          <Input.Root>
-            <Input.TextInput />
-          </Input.Root>
-        </Flex>
+        <Column.Root gutter='xs' classNames='py-form-chrome'>
+          <Column.Center>
+            <Flex column>
+              <Input.Root>
+                <Input.TextInput placeholder={label} />
+              </Input.Root>
+            </Flex>
+          </Column.Center>
+        </Column.Root>
       </Panel.Content>
     </Panel.Root>
   );
 };
 
 const DefaultStory = () => {
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
   const [keyboardOpen, setKeyboardOpen] = useState(false);
 
   useEffect(() => {
-    setSplitterMode(splitterMode === 'both' ? 'lower' : splitterMode);
+    setSplitterMode(splitterMode === 'split' ? 'bottom' : splitterMode);
   }, [keyboardOpen]);
 
   return (
     <WithKeyboard>
       <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
-        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
           <Splitter.Root mode={splitterMode} ratio={0.5}>
-            <Splitter.Panel position='upper'>
+            <Splitter.Panel position='top'>
               <StoryPanel label='Main'>
-                {splitterMode === 'upper' && (
-                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('both')} />
+                {splitterMode === 'top' && (
+                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('split')} />
                 )}
               </StoryPanel>
             </Splitter.Panel>
-            <Splitter.Panel position='lower'>
+            <Splitter.Panel position='bottom'>
               <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'))}
+                  icon={splitterMode === 'bottom' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+                  label={splitterMode === 'bottom' ? 'Collapse' : 'Expand'}
+                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'split' ? 'bottom' : 'split'))}
                 />
-                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('upper')} />
+                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('top')} />
               </StoryPanel>
             </Splitter.Panel>
           </Splitter.Root>

package/src/components/MobileLayout/MobileLayout.tsx

@@ -3,14 +3,14 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, forwardRef, useEffect, useState } from 'react';
+import React, { type PropsWithChildren, forwardRef, useEffect, useLayoutEffect, useState } from 'react';
 
 import { addEventListener, combine } from '@dxos/async';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-// TODO(burdon): Move into @dxos/react-ui?
+import { useDebugLog } from '../DebugOverlay';
 
 const MOBILE_LAYOUT_NAME = 'MobileLayout';
 const MOBILE_LAYOUT_ROOT_NAME = 'MobileLayout.Root';
@@ -42,11 +42,15 @@ type MobileLayoutRootProps = ThemedClassName<
  */
 // TODO(burdon): Should this be ios-only?
 const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
-  ({ classNames, children, transition = 250, onKeyboardOpenChange, ...props }, forwardedRef) => {
+  ({ classNames, children, transition = 500, onKeyboardOpenChange, ...props }, forwardedRef) => {
     const { open: keyboardOpen } = useIOSKeyboard();
-    useAutoScroll();
-    useEffect(() => onKeyboardOpenChange?.(keyboardOpen), [onKeyboardOpenChange, keyboardOpen]);
     useLockBodyScroll(keyboardOpen);
+    useAutoScroll();
+
+    // Fire synchronously after DOM mutation (before paint) so SimpleLayout's Splitter mode
+    // change is batched into the same paint as the keyboard open state change, preventing
+    // intermediate render frames from showing an un-adjusted layout.
+    useLayoutEffect(() => onKeyboardOpenChange?.(keyboardOpen), [keyboardOpen, onKeyboardOpenChange]);
 
     return (
       <MobileLayoutProvider keyboardOpen={keyboardOpen}>
@@ -54,10 +58,11 @@ const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
           {...props}
           role='none'
           style={{
-            transition: `h-size ${transition}ms ease-out`,
-            blockSize: 'calc(100vh - var(--kb-height, 0px))',
+            height: 'calc(100vh - var(--kb-height, 0px))',
+            transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`,
+            // transition: `height ${animationDuration}ms ease-out`,
           }}
-          className={mx('absolute top-0 left-0 right-0 flex flex-col', classNames)}
+          className={mx('fixed top-0 left-0 right-0 grid overflow-hidden', classNames)}
           ref={forwardedRef}
         >
           {children}
@@ -95,7 +100,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 h-full flex flex-col overflow-hidden', classNames)}
+        className={mx(classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -120,42 +125,62 @@ export { useMobileLayout };
 export type { MobileLayoutRootProps, MobileLayoutPanelProps };
 
 /**
- * Prevent auto-scroll when input is focused.
+ * Prevents iOS (WKWebView) from shifting the layout when the keyboard appears.
+ *
+ * Scroll events and window.scrollY stay at 0 in this WKWebView setup — the shift is
+ * caused by the browser's scroll-into-view for the focused input. We keep a window
+ * scroll reset as belt-and-suspenders, and also monitor container scroll events.
  */
 const useAutoScroll = () => {
+  // TODO(burdon): Remove debug logging.
+  const { dbg } = useDebugLog('useAutoScroll');
+
   useEffect(() => {
-    // Prevent auto-scroll when input is focused.
-    return addEventListener(
-      document,
-      'focus',
-      (event: FocusEvent) => {
-        const target = event.target as HTMLElement;
-        if (
-          target.tagName === 'INPUT' ||
-          target.tagName === 'TEXTAREA' ||
-          (target.tagName === 'DIV' && target.isContentEditable)
-        ) {
-          // Prevent default focus behavior.
-          event.preventDefault();
-
-          // Manually focus without scroll.
-          target.focus({ preventScroll: true });
-
-          // Lock current scroll position.
-          const scrollX = window.scrollX;
-          const scrollY = window.scrollY;
-          requestAnimationFrame(() => {
-            window.scrollTo(scrollX, scrollY);
-          });
-
-          // TODO(burdon): Scroll to position in parent; this may need to be via an intent,
-          //  since it may be plugin-specific (e.g., codemirror document.)
-        }
-      },
-      // Important: focus events don't bubble, so capture phase is required.
-      { capture: true },
+    const resetScroll = () => {
+      if (window.scrollX !== 0 || window.scrollY !== 0) {
+        window.scrollTo(0, 0);
+      }
+    };
+
+    const detectContainerScroll = (event: Event) => {
+      const el = event.target as HTMLElement;
+      if (el === document.documentElement || el === document.body) {
+        return;
+      }
+
+      dbg(`scroll: ${el.tagName}.${Array.from(el.classList).slice(0, 2).join('.')} top=${el.scrollTop.toFixed(0)}`);
+    };
+
+    return combine(
+      addEventListener(window, 'scroll', resetScroll),
+      window.visualViewport ? addEventListener(window.visualViewport, 'scroll' as any, resetScroll) : () => {},
+
+      // TODO(burdon): Remove debug logging.
+      addEventListener(document, 'scroll', detectContainerScroll as EventListener, { capture: true } as any),
+
+      // Prevent focus-triggered scroll-into-view on inputs.
+      (() => {
+        let focusingWithPreventScroll = false;
+        return addEventListener(
+          document,
+          'focus',
+          (event: FocusEvent) => {
+            if (focusingWithPreventScroll) {
+              return;
+            }
+
+            const target = event.target as HTMLElement;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+              focusingWithPreventScroll = true;
+              target.focus({ preventScroll: true });
+              focusingWithPreventScroll = false;
+            }
+          },
+          { capture: true },
+        );
+      })(),
     );
-  }, []);
+  }, [dbg]);
 };
 
 /**
@@ -231,6 +256,8 @@ const useLockBodyScroll = (enabled: boolean) => {
 type IOSKeyboard = {
   open: boolean;
   height: number;
+  /** Native keyboard animation duration in ms, from the iOS keyboard event. */
+  duration: number | undefined;
 };
 
 /**
@@ -263,10 +290,13 @@ type IOSKeyboard = {
  * Falls back to VisualViewport API on other platforms.
  */
 const useIOSKeyboard = (): IOSKeyboard => {
+  const { dbg } = useDebugLog('useIOSKeyboard');
+
   const [open, setOpen] = useState(false);
   const [height, setHeight] = useState(0);
+  const [duration, setDuration] = useState<number | undefined>(undefined);
 
-  // Detect keybaord state.
+  // Detect keyboard state.
   useEffect(() => {
     const viewport = window.visualViewport;
     if (!viewport) {
@@ -276,30 +306,69 @@ const useIOSKeyboard = (): IOSKeyboard => {
     // Handler for VisualViewport resize (fallback for non-iOS).
     const initialHeight = viewport.height ?? window.innerHeight;
 
-    const updateState = (keyboardHeight: number, keyboardOpen: boolean) => {
+    const updateState = (keyboardHeight: number, keyboardOpen: boolean, animationDuration?: number) => {
       setOpen(keyboardOpen);
       setHeight(keyboardHeight);
+      setDuration(animationDuration);
 
       const vvh = initialHeight - keyboardHeight;
       document.documentElement.style.setProperty('--vvh', `${vvh}px`);
       document.documentElement.style.setProperty('--kb-height', `${keyboardHeight}px`);
       document.documentElement.style.setProperty('--kb-open', keyboardOpen ? '1' : '0');
-      log.info('viewport size', { initialHeight, vvh, keyboardHeight, keyboardOpen });
+      log.info('viewport size', { initialHeight, vvh, keyboardHeight, keyboardOpen, animationDuration });
     };
 
+    let rafId: number | undefined;
+
     return combine(
       // Handler for native iOS keyboard events (from KeyboardObserver.swift).
       addEventListener(
         window,
         'keyboard' as any,
         (event: CustomEvent<{ type: 'show' | 'hide'; height: number; duration: number }>) => {
-          const { type, height } = event.detail;
-          log.info('keyboard event', { type, height });
-          updateState(height, type === 'show');
+          const { type, height, duration } = event.detail;
+          // iOS KeyboardObserver.swift sends duration in seconds (e.g., 0.25). Convert to ms.
+          const durationMs = duration < 1 ? duration * 1000 : duration;
+
+          // TODO(burdon): Remove debug logging.
+          const vp = window.visualViewport;
+          dbg(
+            `kb:${type} h=${height} dur=${duration} scrollY=${window.scrollY} vpOffset=${vp?.offsetTop?.toFixed(0) ?? '?'}`,
+          );
+          log.info('keyboard event', { type, height, duration });
+
+          updateState(height, type === 'show', durationMs);
+
+          // RAF loop: monitor visualViewport.offsetTop and window.scrollY every frame.
+          // TODO(burdon): Remove debug logging.
+          const end = performance.now() + durationMs + 300;
+          let prevOffsetTop = vp?.offsetTop ?? 0;
+          let prevScrollY = window.scrollY;
+          const monitorFrame = () => {
+            const offsetTop = vp?.offsetTop ?? 0;
+            const scrollY = window.scrollY;
+            if (offsetTop !== prevOffsetTop || scrollY !== prevScrollY) {
+              dbg(`Δ vpOffset=${offsetTop.toFixed(0)} scrollY=${scrollY.toFixed(0)}`);
+              prevOffsetTop = offsetTop;
+              prevScrollY = scrollY;
+            }
+            if (scrollY !== 0) {
+              window.scrollTo(0, 0);
+            }
+            if (performance.now() < end) {
+              rafId = requestAnimationFrame(monitorFrame);
+            }
+          };
+          rafId = requestAnimationFrame(monitorFrame);
         },
       ),
+      () => {
+        if (rafId !== undefined) {
+          cancelAnimationFrame(rafId);
+        }
+      },
     );
-  }, []);
+  }, [dbg]);
 
-  return { open, height };
+  return { open, height, duration };
 };

package/src/components/NavBranch/NavBranch.tsx

@@ -8,13 +8,14 @@ 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 { meta } from '#meta';
+
 import { useExpandPath } from '../hooks';
 
 export type NavBranchProps = {
@@ -36,7 +37,10 @@ export const NavBranch = ({ id }: NavBranchProps) => {
 
   // TODO(wittjosiah): Move alternate-tree nodes to a non-child relation so they don't need filtering.
   const visibleChildren = useMemo(
-    () => children.filter((node) => node.properties.disposition !== 'alternate-tree'),
+    () =>
+      children.filter(
+        (node) => node.properties.disposition !== 'alternate-tree' && node.properties.disposition !== 'hidden',
+      ),
     [children],
   );
 
@@ -46,34 +50,28 @@ export const NavBranch = ({ id }: NavBranchProps) => {
   });
 
   return (
-    <SearchList.Root onSearch={handleSearch}>
-      <Panel.Root>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>
-            {/* TODO(wittjosiah): Search should be pluggable. Must support searching via ECHO query inside a space. */}
-            <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={NavBranchTile} />
-                </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 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;
@@ -81,8 +79,8 @@ const NavBranchTile: 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.
@@ -108,17 +106,17 @@ const NavBranchTile: 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/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,12 @@ 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 { AppBar, type AppBarProps } from './AppBar';
 
 const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
@@ -21,15 +20,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 +38,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 +70,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<DefaultStoryProps>;
 
 export const Default: Story = {
   tags: ['test'],
@@ -104,7 +103,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');
   },
 };