@dxos/plugin-navtree 0.8.3-main.7f5a14c → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.3-main.7f5a14c",
+  "version": "0.8.3",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,29 +31,29 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "effect": "^3.13.3",
-    "@dxos/app-graph": "0.8.3-main.7f5a14c",
-    "@dxos/async": "0.8.3-main.7f5a14c",
-    "@dxos/app-framework": "0.8.3-main.7f5a14c",
-    "@dxos/debug": "0.8.3-main.7f5a14c",
-    "@dxos/echo": "0.8.3-main.7f5a14c",
-    "@dxos/echo-schema": "0.8.3-main.7f5a14c",
-    "@dxos/invariant": "0.8.3-main.7f5a14c",
-    "@dxos/keyboard": "0.8.3-main.7f5a14c",
-    "@dxos/local-storage": "0.8.3-main.7f5a14c",
-    "@dxos/live-object": "0.8.3-main.7f5a14c",
-    "@dxos/log": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-deck": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-graph": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-observability": "0.8.3-main.7f5a14c",
-    "@dxos/protocols": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-attention": "0.8.3-main.7f5a14c",
-    "@dxos/react-client": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-menu": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-list": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-searchlist": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-stack": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-tabs": "0.8.3-main.7f5a14c",
-    "@dxos/util": "0.8.3-main.7f5a14c"
+    "@dxos/app-framework": "0.8.3",
+    "@dxos/echo": "0.8.3",
+    "@dxos/echo-schema": "0.8.3",
+    "@dxos/invariant": "0.8.3",
+    "@dxos/keyboard": "0.8.3",
+    "@dxos/live-object": "0.8.3",
+    "@dxos/local-storage": "0.8.3",
+    "@dxos/log": "0.8.3",
+    "@dxos/app-graph": "0.8.3",
+    "@dxos/plugin-deck": "0.8.3",
+    "@dxos/plugin-graph": "0.8.3",
+    "@dxos/plugin-observability": "0.8.3",
+    "@dxos/react-client": "0.8.3",
+    "@dxos/protocols": "0.8.3",
+    "@dxos/react-ui-attention": "0.8.3",
+    "@dxos/react-ui-list": "0.8.3",
+    "@dxos/react-ui-menu": "0.8.3",
+    "@dxos/react-ui-stack": "0.8.3",
+    "@dxos/react-ui-searchlist": "0.8.3",
+    "@dxos/react-ui-tabs": "0.8.3",
+    "@dxos/async": "0.8.3",
+    "@dxos/util": "0.8.3",
+    "@dxos/debug": "0.8.3"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -64,14 +64,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-storybook-layout": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-theme": "0.8.3-main.7f5a14c",
-    "@dxos/random": "0.8.3-main.7f5a14c",
-    "@dxos/plugin-attention": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c",
-    "@dxos/storybook-utils": "0.8.3-main.7f5a14c"
+    "@dxos/plugin-attention": "0.8.3",
+    "@dxos/plugin-client": "0.8.3",
+    "@dxos/plugin-space": "0.8.3",
+    "@dxos/echo-signals": "0.8.3",
+    "@dxos/plugin-storybook-layout": "0.8.3",
+    "@dxos/plugin-theme": "0.8.3",
+    "@dxos/random": "0.8.3",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/react-ui-theme": "0.8.3",
+    "@dxos/storybook-utils": "0.8.3"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -80,8 +82,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3-main.7f5a14c",
-    "@dxos/react-ui-theme": "0.8.3-main.7f5a14c"
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/react-ui-theme": "0.8.3"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -55,12 +55,18 @@ export const NavTreePlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/expose`,
-      activatesOn: allOf(Events.DispatcherReady, Events.LayoutReady, NavTreeEvents.StateReady),
+      activatesOn: allOf(Events.DispatcherReady, Events.AppGraphReady, Events.LayoutReady, NavTreeEvents.StateReady),
       activate: async (context) => {
         const layout = context.getCapability(Capabilities.Layout);
         const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+        const { graph } = context.getCapability(Capabilities.AppGraph);
         if (dispatch && layout.active.length === 1) {
-          await dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: layout.active[0] }));
+          // TODO(wittjosiah): This should really be fired once the navtree renders for the first time.
+          //   That is the point at which the graph is expanded and the path should be available.
+          void graph
+            .waitForPath({ target: layout.active[0] }, { timeout: 30_000 })
+            .then(() => dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: layout.active[0] })))
+            .catch(() => {});
         }
 
         return [];

package/src/capabilities/state.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { effect } from '@preact/signals-core';
+import { effect, untracked } from '@preact/signals-core';
 
 import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
-import { type Live, Obj } from '@dxos/echo';
+import { type Live } from '@dxos/echo';
+import { live } from '@dxos/live-object';
 import { Path } from '@dxos/react-ui-list';
 
 import { NavTreeCapabilities } from './capabilities';
@@ -23,7 +24,7 @@ const getInitialState = () => {
     const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
     return cached.map(([key, value]): [string, Live<{ open: boolean; current: boolean }>] => [
       key,
-      Obj.make({ open: value.open, current: false }),
+      live({ open: value.open, current: false }),
     ]);
   } catch {}
 };
@@ -38,15 +39,15 @@ export default (context: PluginContext) => {
   const state = new Map<string, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>(
     getInitialState() ?? [
       // TODO(thure): Initialize these dynamically.
-      ['root', Obj.make({ open: true, current: false })],
-      ['root~dxos.org/plugin/space-spaces', Obj.make({ open: true, current: false })],
-      ['root~dxos.org/plugin/files', Obj.make({ open: true, current: false })],
+      ['root', live({ open: true, current: false })],
+      ['root~dxos.org/plugin/space-spaces', live({ open: true, current: false })],
+      ['root~dxos.org/plugin/files', live({ open: true, current: false })],
     ],
   );
 
   const getItem = (_path: string[]) => {
     const path = Path.create(..._path);
-    const value = state.get(path) ?? Obj.make({ open: false, current: false, alternateTree: false });
+    const value = state.get(path) ?? live({ open: false, current: false, alternateTree: false });
     if (!state.has(path)) {
       state.set(path, value);
     }
@@ -73,9 +74,7 @@ export default (context: PluginContext) => {
     const removed = previous.filter((id) => !layout.active.includes(id));
     previous = layout.active;
 
-    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
-    //   This could be avoided if the location was a path as well and not just an id.
-    setTimeout(() => {
+    const handleUpdate = () => {
       removed.forEach((id) => {
         const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
         keys.forEach((key) => {
@@ -89,7 +88,14 @@ export default (context: PluginContext) => {
           setItem(Path.parts(key), 'current', true);
         });
       });
-    });
+    };
+
+    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
+    //   Keys are initialized on the first render of an item in the navtree.
+    //   This could be avoided if the location was a path as well and not just an id.
+    const timeout = setTimeout(handleUpdate, 500);
+    untracked(() => handleUpdate());
+    return () => clearTimeout(timeout);
   });
 
   return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent, isAlternateTree }, () =>

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -10,6 +10,12 @@ import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { useActions } from '@dxos/plugin-graph';
 import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
+import {
+  cardDialogContent,
+  cardDialogHeader,
+  cardDialogPaddedOverflow,
+  cardDialogSearchListRoot,
+} from '@dxos/react-ui-stack';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
@@ -56,13 +62,13 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
   const actions = isActionGroup(group) ? groupActions : allActions;
 
   return (
-    <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden mbs-12']}>
-      <Dialog.Title>{t('commands dialog title', { ns: NAVTREE_PLUGIN })}</Dialog.Title>
+    <Dialog.Content classNames={cardDialogContent}>
+      <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: NAVTREE_PLUGIN })}</Dialog.Title>
 
       {/* TODO(burdon): BUG: Overscrolls container. */}
-      <SearchList.Root label={t('command list input placeholder')} classNames='flex flex-col grow overflow-hidden my-2'>
-        <SearchList.Input placeholder={t('command list input placeholder')} classNames='px-1 my-2' />
-        <SearchList.Content classNames='max-bs-[24rem] overflow-auto'>
+      <SearchList.Root label={t('command list input placeholder')} classNames={cardDialogSearchListRoot}>
+        <SearchList.Input placeholder={t('command list input placeholder')} />
+        <SearchList.Content classNames={cardDialogPaddedOverflow}>
           {actions?.map((action) => {
             const label = toLocalizedString(action.properties.label, t);
             const shortcut =
@@ -102,11 +108,11 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
         </SearchList.Content>
       </SearchList.Root>
 
-      <Dialog.Close asChild>
-        <Button variant='primary' classNames='mbs-2'>
-          {t('close label', { ns: 'os' })}
-        </Button>
-      </Dialog.Close>
+      <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
+        <Dialog.Close asChild>
+          <Button classNames='is-full'>{t('close label', { ns: 'os' })}</Button>
+        </Dialog.Close>
+      </div>
     </Dialog.Content>
   );
 };

package/src/components/NavTree/NavTree.stories.tsx

@@ -19,9 +19,11 @@ import {
   useCapability,
 } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj } from '@dxos/echo';
+import { live } from '@dxos/live-object';
 import { AttentionPlugin } from '@dxos/plugin-attention';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
+import { SpacePlugin } from '@dxos/plugin-space';
 import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
@@ -130,8 +132,8 @@ const meta: Meta<typeof NavTreeContainer> = {
         NavTreePlugin(),
       ],
       capabilities: (context) => [
-        contributes(StoryState, Obj.make({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders),
+        contributes(StoryState, live({ tab: 'space-0' })),
+        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders(context)),
         contributes(Capabilities.IntentResolver, [
           createResolver({
             intent: LayoutAction.UpdateLayout,
@@ -157,3 +159,42 @@ export default meta;
 type Story = StoryObj<typeof NavTreeContainer>;
 
 export const Default: Story = {};
+
+// TODO(wittjosiah): Deduplicate plugins/capabilities with default story.
+export const WithClient: Story = {
+  decorators: [
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        GraphPlugin(),
+        IntentPlugin(),
+        SettingsPlugin(),
+        AttentionPlugin(),
+        NavTreePlugin(),
+        ClientPlugin({
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+          },
+        }),
+        SpacePlugin(),
+        // Needs to be last so that the dialog and popovers have access to all contexts.
+        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
+      ],
+      capabilities: (context) => [
+        contributes(StoryState, live({ tab: 'space-0' })),
+        contributes(Capabilities.IntentResolver, [
+          createResolver({
+            intent: LayoutAction.UpdateLayout,
+            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
+              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
+            resolve: ({ subject }) => {
+              const state = context.getCapability(StoryState);
+              state.tab = subject;
+            },
+          }),
+        ]),
+      ],
+    }),
+    withLayout({ fullscreen: true }),
+  ],
+};

package/src/components/NavTreeContainer.tsx

@@ -17,12 +17,10 @@ import {
   useLayout,
 } from '@dxos/app-framework';
 import { isAction, isActionLike, ROOT_ID, type Node, type ReadableGraph } from '@dxos/app-graph';
-import { Obj } from '@dxos/echo';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
 import { useConnections } from '@dxos/plugin-graph';
-import { isSpace } from '@dxos/react-client/echo';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { isTreeData, type PropsFromTreeItem, type TreeData } from '@dxos/react-ui-list';
+import { isTreeData, type TreeItemDataProps, type TreeData } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove, byPosition } from '@dxos/util';
 
@@ -83,7 +81,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
   const getProps = useCallback(
-    (node: Node, path: string[]): PropsFromTreeItem => {
+    (node: Node, path: string[]): TreeItemDataProps => {
       const children = getChildren(graph, node, path).filter(getChildrenFilter);
       const parentOf =
         children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
@@ -152,18 +150,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [dispatch, layout.active, tab, navigationSidebarState, isLg],
   );
 
-  const canDrop = useCallback((source: TreeData, target: TreeData) => {
-    const sourceNode = source.item as Node;
-    const targetNode = target.item as Node;
-    // TODO(wittjosiah): This shouldn't depend directly on client, there should be a graph-level abstraction.
-    if (isSpace(targetNode.data)) {
-      // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
-      return Obj.isObject(sourceNode.data) || isSpace(sourceNode.data);
-    } else if (Obj.isObject(targetNode.data)) {
-      return Obj.isObject(sourceNode.data);
-    } else {
-      return false;
-    }
+  const canDrop = useCallback(({ source, target }: { source: TreeData; target: TreeData }) => {
+    return target.item.properties.canDrop?.(source) ?? false;
   }, []);
 
   const handleSelect = useCallback(

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -27,7 +27,7 @@ export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }:
 
   const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions)
     .flatMap((action) => (isAction(action) ? [action] : []))
-    .filter((action) => !action.properties?.hidden);
+    .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
   const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
 

package/src/components/Sidebar/L0Menu.tsx

@@ -24,16 +24,7 @@ import React, {
 
 import { type Node } from '@dxos/app-graph';
 import { invariant } from '@dxos/invariant';
-import {
-  Icon,
-  IconButton,
-  ListItem,
-  ScrollArea,
-  Tooltip,
-  toLocalizedString,
-  useMediaQuery,
-  useTranslation,
-} from '@dxos/react-ui';
+import { Icon, ListItem, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
 import { MenuProvider, DropdownMenu, type MenuItem } from '@dxos/react-ui-menu';
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
@@ -100,6 +91,11 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
+const l0ItemRoot =
+  'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
+
+const l0ItemContent = 'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm';
+
 const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
   ({ item, parent, path, children }, forwardedRef) => {
     const { getProps } = useNavTreeContext();
@@ -125,10 +121,7 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
         <Root
           {...(rootProps as any)}
           data-type={type}
-          className={mx(
-            'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group',
-            l0Breakpoints[item.properties.l0Breakpoint],
-          )}
+          className={mx(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint])}
           ref={forwardedRef}
         >
           {children}
@@ -138,7 +131,7 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
   },
 );
 
-const L0Avator = ({ item }: Pick<L0ItemProps, 'item'>) => {
+const L0Avatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const type = l0ItemType(item);
   const hue = item.properties.hue ?? null;
@@ -161,10 +154,8 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const itemElement = useRef<HTMLElement | null>(null);
   const [closestEdge, setEdge] = useState<Edge | null>(null);
-  const type = l0ItemType(item);
   const localizedString = toLocalizedString(item.properties.label, t);
   const hue = item.properties.hue ?? null;
-  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
 
   useLayoutEffect(() => {
     // NOTE(thure): This is copied from StackItem, perhaps this should be DRYed out.
@@ -227,30 +218,43 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
       <div
         role='none'
         data-frame={true}
+        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
         className={mx(
-          'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded',
-          // TODO(burdon): Create reusable button/component and/or create var for size.
+          l0ItemContent,
           pinned
-            ? 'bg-transparent w-[50px] p-2 group-hover/l0item:bg-activeSurface'
-            : 'bg-activeSurface w-[50px] h-[50px]',
+            ? 'p-2 group-hover/l0item:bg-activeSurface'
+            : 'is-[--l0-avatar-size] bs-[--l0-avatar-size] bg-activeSurface',
         )}
-        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
       >
-        {(item.properties.icon && <Icon icon={item.properties.icon} size={pinned ? 5 : 6} {...hueFgStyle} />) ||
-          (type === 'tab' && item.properties.disposition !== 'pin-end' && <L0Avator item={item} />)}
+        <ItemAvatar item={item} />
       </div>
       <div
         role='none'
-        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie'
       />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
-      {onRearrange && closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+      {closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
     </L0ItemRoot>
   );
 };
 
+const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
+  const type = l0ItemType(item);
+  if (item.properties.icon) {
+    const hue = item.properties.hue ?? null;
+    const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
+    return <Icon icon={item.properties.icon} size={5} {...hueFgStyle} />;
+  }
+
+  if (type === 'tab' && item.properties.disposition !== 'pin-end') {
+    return <L0Avatar item={item} />;
+  }
+
+  return null;
+};
+
 //
 // L0Collection
 //
@@ -261,6 +265,7 @@ const L0Collection = ({ item, path }: L0ItemProps) => {
   const collectionItems = navTreeContext.useItems(item);
   const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
   const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+
   const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
     (source, target, closestEdge) => {
       invariant(item.properties.onRearrangeChildren);
@@ -306,7 +311,7 @@ export type L0MenuProps = {
   menuActions: MenuItem[];
   topLevelItems: Node<any>[];
   pinnedItems: Node<any>[];
-  userAccountItem: Node<any>;
+  userAccountItem?: Node<any>;
   parent?: Node<any>;
   path: string[];
 };
@@ -317,37 +322,40 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
   return (
     <Tabs.Tablist
       classNames={[
-        'group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg',
-        'grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout',
+        'group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is',
+        'grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] contain-layout',
         '!is-[--l0-size] bg-baseSurface border-ie border-subduedSeparator app-drag pbe-[env(safe-area-inset-bottom)]',
       ]}
     >
-      <div role='none' className='flex justify-center p-1'>
-        <MenuProvider>
-          <DropdownMenu.Root group={parent} items={menuActions}>
-            <DropdownMenu.Trigger asChild>
-              {/* TODO(wittjosiah): Use L0Item trigger. */}
-              {/* TODO(burdon): Replace with Sigil. */}
-              <IconButton
-                iconOnly
-                icon='ph--dots-three--regular'
-                size={5}
-                label={t('app menu label')}
-                tooltipSide='right'
-                classNames='w-[50px] _bg-primary-500'
-                data-testid='spacePlugin.addSpace'
-              />
+      {/* TODO(wittjosiah): Use L0Item trigger. */}
+      <MenuProvider>
+        <DropdownMenu.Root group={parent} items={menuActions}>
+          <Tooltip.Trigger content={t('app menu label')} side='right' asChild>
+            <DropdownMenu.Trigger
+              data-testid='spacePlugin.addSpace'
+              className={mx(l0ItemRoot, 'grid place-items-center')}
+            >
+              <div
+                role='none'
+                className={mx(
+                  l0ItemContent,
+                  'is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface',
+                )}
+              >
+                <Icon icon='ph--list--regular' size={5} />
+              </div>
             </DropdownMenu.Trigger>
-          </DropdownMenu.Root>
-        </MenuProvider>
-      </div>
+          </Tooltip.Trigger>
+        </DropdownMenu.Root>
+      </MenuProvider>
 
+      {/* Space list. */}
       <ScrollArea.Root>
         <ScrollArea.Viewport>
           <div
             role='none'
             className={mx([
-              'flex flex-col gap-2 pbs-1',
+              'flex flex-col gap-1 pbs-1',
               '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
               '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]',
             ])}
@@ -366,6 +374,7 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
         </ScrollArea.Viewport>
       </ScrollArea.Root>
 
+      {/* Actions. */}
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
         {pinnedItems
           .filter((item) => l0ItemType(item) !== 'collection')
@@ -382,7 +391,7 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
               hue={userAccountItem.properties.hue}
               emoji={userAccountItem.properties.emoji}
               status={userAccountItem.properties.status}
-              size={11}
+              size={10}
             />
           </L0ItemRoot>
         </div>

package/src/components/types.ts

@@ -9,22 +9,18 @@ import type { Density } from '@dxos/react-ui';
 import type { TreeProps } from '@dxos/react-ui-list';
 import type { MaybePromise } from '@dxos/util';
 
-import { type L1PanelProps } from './Sidebar';
+import type { L1PanelProps } from './Sidebar';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 
 export type NavTreeContextValue = Pick<
-  TreeProps<NavTreeItemGraphNode>,
-  'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
+  TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
+  'useItems' | 'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
 > &
   Pick<L1PanelProps, 'onBack'> & {
     tab: string;
     topbar?: boolean;
     popoverAnchorId?: string;
     renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    useItems: (
-      node?: NavTreeItemGraphNode,
-      options?: { disposition?: string; sort?: boolean },
-    ) => NavTreeItemGraphNode[];
     getActions: (node: Node) => FlattenedActions;
     loadDescendents?: (node: Node) => MaybePromise<void>;
     isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;