@dxos/plugin-simple-layout 0.8.4-main.6fa680abb7 → 0.8.4-main.7996785055

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,10 +8,10 @@ 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';
@@ -36,7 +36,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 +49,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 +78,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 +105,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,7 +6,7 @@ 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';
 
@@ -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) => ({
@@ -112,11 +106,7 @@ export const PopoverContent = () => {
               <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} />

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

@@ -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'],

package/src/components/SimpleLayout/AppBar.tsx

@@ -5,16 +5,16 @@
 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 { 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 +27,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

@@ -12,7 +12,7 @@ import { ErrorFallback, Panel } from '@dxos/react-ui';
 import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
 import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
-import { ContentLoading } from '../ContentLoading';
+import { Loading } from '../Loading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
 
@@ -23,7 +23,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;
@@ -49,16 +49,16 @@ export const Drawer = () => {
 
   // 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>
+      <Panel.Content>
         <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
       </Panel.Content>
     </Panel.Root>