@dxos/plugin-navtree 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -13,6 +13,11 @@
   "sideEffects": true,
   "type": "module",
   "imports": {
+    "#plugin": {
+      "browser": "./src/NavTreePlugin.tsx",
+      "node": "./src/NavTreePlugin.node.ts",
+      "default": "./src/NavTreePlugin.tsx"
+    },
     "#capabilities": "./src/capabilities/index.ts",
     "#components": "./src/components/index.ts",
     "#containers": "./src/containers/index.ts",
@@ -20,6 +25,7 @@
     "#meta": "./src/meta.ts",
     "#operations": "./src/operations/index.ts",
     "#testing": "./src/testing/index.ts",
+    "#translations": "./src/translations.ts",
     "#types": "./src/types/index.ts"
   },
   "exports": {
@@ -27,12 +33,15 @@
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -43,30 +52,30 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
-    "@dxos/app-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/debug": "0.8.4-main.9be5663bfe",
-    "@dxos/app-framework": "0.8.4-main.9be5663bfe",
-    "@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
-    "@dxos/async": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/keyboard": "0.8.4-main.9be5663bfe",
-    "@dxos/lit-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-deck": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-observability": "0.8.4-main.9be5663bfe",
-    "@dxos/protocols": "0.8.4-main.9be5663bfe",
-    "@dxos/operation": "0.8.4-main.9be5663bfe",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-list": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-search": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-tabs": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe"
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-toolkit": "0.8.4-main.abd8ff62ef",
+    "@dxos/async": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/debug": "0.8.4-main.abd8ff62ef",
+    "@dxos/compute": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/keyboard": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/lit-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-deck": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-observability": "0.8.4-main.abd8ff62ef",
+    "@dxos/protocols": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-list": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-search": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-tabs": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-stack": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -76,16 +85,16 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-space": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-client": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-testing": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/plugin-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-space": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-testing": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -93,8 +102,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.node.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { type TreeData } from '@dxos/react-ui-list';
+
+import { AppGraphBuilder, OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+
+const NODE_TYPE = 'dxos/app-graph/node';
+
+export const NavTreePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: NODE_TYPE,
+      metadata: {
+        parse: ({ item }: TreeData, type: string) => {
+          switch (type) {
+            case 'node':
+              return item;
+            case 'object':
+              return item.data;
+            case 'view-object':
+              return { id: `${item.id}-view`, object: item.data };
+          }
+        },
+      },
+    },
+  }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  Plugin.make,
+);
+
+export default NavTreePlugin;

package/src/NavTreePlugin.test.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ActivationEvents } from '@dxos/app-framework';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { NavTreePlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('NavTreePlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [NavTreePlugin()],
+    });
+
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('AppGraphBuilder'), moduleId('metadata')]),
+    );
+
+    await harness.fire(ActivationEvents.SetupOperationHandler);
+    expect(harness.manager.getActive()).toContain(moduleId('OperationHandler'));
+  });
+});

package/src/NavTreePlugin.tsx

@@ -12,10 +12,9 @@ import { type TreeData } from '@dxos/react-ui-list';
 import { AppGraphBuilder, Keyboard, OperationHandler, ReactSurface, State } from '#capabilities';
 import { NODE_TYPE } from '#containers';
 import { meta } from '#meta';
+import { translations } from '#translations';
 import { NavTreeEvents } from '#types';
 
-import { translations } from './translations';
-
 export const NavTreePlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addMetadataModule({
@@ -41,7 +40,7 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   Plugin.addModule({
     id: 'state',
     activatesOn: AppActivationEvents.LayoutReady,
-    activatesAfter: [NavTreeEvents.StateReady],
+    firesAfterActivation: [NavTreeEvents.StateReady],
     activate: State,
   }),
   Plugin.addModule({
@@ -74,3 +73,5 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default NavTreePlugin;

package/src/capabilities/app-graph-builder.ts

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 
 import { COMMANDS_DIALOG, meta } from '#meta';

package/src/capabilities/index.ts

@@ -3,7 +3,7 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+import { OperationHandlerSet } from '@dxos/compute';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
 export const Keyboard = Capability.lazy('Keyboard', () => import('./keyboard'));

package/src/capabilities/operation-handler.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 import { NavTreeOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -3,7 +3,7 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
@@ -18,8 +18,7 @@ export default Capability.makeModule(() =>
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: COMMANDS_DIALOG,
-        role: 'dialog',
-        filter: AppSurface.componentDialog(COMMANDS_DIALOG),
+        filter: AppSurface.component<ComponentProps<typeof CommandsDialogContent>>(AppSurface.Dialog, COMMANDS_DIALOG),
         component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
       }),
       Surface.create({

package/src/capabilities/state.ts

@@ -16,7 +16,7 @@ import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '#types';
 const KEY = `${meta.id}.state.v1`;
 
 /** Default item state for new entries. */
-const defaultItemState: NC.NavTreeItemState = { open: false, current: false, alternateTree: false };
+const defaultItemState: NC.NavTreeItemState = { open: false, current: false };
 
 /** L0 (top-level workspace) paths are direct children of root — not part of the expandable tree model. */
 const isTopLevelPath = (path: string[]): boolean => path.length === 2 && path[0] === Node.RootId;
@@ -66,7 +66,7 @@ export default Capability.makeModule(
       return registry.get(getItemAtom(path));
     };
 
-    const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => {
+    const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
       const pathString = Path.create(...path);
       const atom = itemAtomFamily(pathString);
       const currentValue = registry.get(atom);

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

@@ -12,7 +12,7 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { useAtomCapability } from '@dxos/app-framework/ui';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { Operation, OperationHandlerSet } from '@dxos/operation';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
@@ -23,9 +23,9 @@ import { mx } from '@dxos/ui-theme';
 
 import { NavTreeContainer } from '#containers';
 import { storybookGraphBuilders } from '#testing';
+import { translations } from '#translations';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
-import { translations } from '../../translations';
 
 random.seed(1234);
 

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -113,7 +113,7 @@ export const NavTreeItemAction = ({
   monolithic,
   menuActions,
   menuType,
-  parent: node,
+  parent,
   path,
   ...props
 }: NavTreeItemActionMenuProps) => {
@@ -121,10 +121,9 @@ export const NavTreeItemAction = ({
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
-
   return monolithic && menuActions?.length === 1 ? (
-    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} path={path} {...menuActions[0]} />
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={parent} path={path} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} path={path} menuActions={menuActions} />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={parent} path={path} menuActions={menuActions} />
   );
 };

package/src/components/Sidebar/L1Panel.tsx

@@ -2,22 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 import React, { memo, useCallback, useMemo } from 'react';
 
 import { Node } from '@dxos/app-graph';
 import { isPinnedWorkspace } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
-import { Graph, useActionRunner, useConnections, useEdges } from '@dxos/plugin-graph';
+import { Graph, useActionRunner, useEdges } from '@dxos/plugin-graph';
 import { DensityProvider, IconButton, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
 import { Tree } from '@dxos/react-ui-list';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { useActions, useIsAlternateTree, useLoadDescendents } from '#hooks';
+import { useActions, useLoadDescendents } from '#hooks';
 import { meta } from '#meta';
 
 import { NAV_TREE_ITEM } from '../NavTree';
@@ -84,49 +82,27 @@ const useIsActivatedWorkspace = (item: Node.Node): boolean => {
 const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'path' | 'item' | 'onBack'>) => {
   const navTreeContext = useNavTreeContext();
 
-  const alternateTree = useAlternateTreeItem(item);
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
-
   return (
     <DensityProvider density='fine'>
       <L1PanelHeader path={path} item={item} onBack={onBack} />
       <ScrollArea.Root thin orientation='vertical'>
         <ScrollArea.Viewport>
-          {isAlternate && alternateTree ? (
-            <Tree
-              model={navTreeContext.model}
-              id={alternateTree.id}
-              rootId={alternateTree.id}
-              path={alternatePath}
-              levelOffset={5}
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              renderColumns={NavTreeItemColumns}
-              blockInstruction={navTreeContext.blockInstruction}
-              canDrop={navTreeContext.canDrop}
-              canSelect={navTreeContext.canSelect}
-              onOpenChange={navTreeContext.onOpenChange}
-              onSelect={navTreeContext.onSelect}
-              onItemHover={navTreeContext.onItemHover}
-            />
-          ) : (
-            <Tree
-              model={navTreeContext.model}
-              id={item.id}
-              rootId={item.id}
-              path={path}
-              levelOffset={5}
-              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-              draggable
-              renderColumns={NavTreeItemColumns}
-              blockInstruction={navTreeContext.blockInstruction}
-              canDrop={navTreeContext.canDrop}
-              canSelect={navTreeContext.canSelect}
-              onOpenChange={navTreeContext.onOpenChange}
-              onSelect={navTreeContext.onSelect}
-              onItemHover={navTreeContext.onItemHover}
-            />
-          )}
+          <Tree
+            model={navTreeContext.model}
+            id={item.id}
+            rootId={item.id}
+            path={path}
+            levelOffset={5}
+            gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+            draggable
+            renderColumns={NavTreeItemColumns}
+            blockInstruction={navTreeContext.blockInstruction}
+            canDrop={navTreeContext.canDrop}
+            canSelect={navTreeContext.canSelect}
+            onOpenChange={navTreeContext.onOpenChange}
+            onSelect={navTreeContext.onSelect}
+            onItemHover={navTreeContext.onItemHover}
+          />
         </ScrollArea.Viewport>
       </ScrollArea.Root>
     </DensityProvider>
@@ -145,20 +121,6 @@ const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path
   const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({ item, path });
   useLoadDescendents(item);
 
-  // TODO(wittjosiah): Hack to only show containsAttended when attended item is within alternate tree (e.g. settings).
-  //  Since every object in the space is a descendant of the space node, we'd otherwise always show containsAttended.
-  const alternateTree = useAlternateTreeItem(item);
-  const attended = useAttended();
-  const alternateTreeOpen = useMemo(() => {
-    if (!alternateTree) {
-      return true;
-    }
-    const hasAlternateAttended = attended.some(
-      (attendedId) => attendedId === alternateTree.id || attendedId.startsWith(alternateTree.id + '/'),
-    );
-    return !hasAlternateAttended;
-  }, [alternateTree, attended]);
-
   return (
     <div
       data-tauri-drag-region
@@ -196,115 +158,94 @@ const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path
             caller={NAV_TREE_ITEM}
           />
         )}
-        {menuActions.length === 1 && (
-          <IconButton
-            density='coarse'
-            classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
-            variant='ghost'
-            icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
-            iconOnly
-            label={toLocalizedString(menuActions[0].properties?.label, t)}
-            data-testid={menuActions[0].properties?.testId}
-            onClick={() => onAction(menuActions[0] as Node.Action)}
-          />
-        )}
-        {menuActions.length > 1 && (
-          <Menu.Root caller={NAV_TREE_ITEM} onAction={onAction}>
-            <Menu.Trigger asChild>
-              <IconButton
-                density='coarse'
-                classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
-                variant='ghost'
-                icon='ph--dots-three-vertical--regular'
-                iconOnly
-                label={t('tree-item-actions.label')}
-                data-testid='navtree.treeItem.actionsLevel0'
-              />
-            </Menu.Trigger>
-            <Menu.Content group={item} items={menuActions as MenuItem[]} />
-          </Menu.Root>
-        )}
-        {ItemEnd && <ItemEnd node={item} open={alternateTreeOpen} />}
+        <MenuActions item={item} menuActions={menuActions} onAction={onAction} />
+        {ItemEnd && <ItemEnd node={item} open />}
       </div>
     </div>
   );
 };
 
+type L1MenuActions = {
+  primaryAction: Node.ActionLike;
+  groupedActions: Record<string, Node.Action[]>;
+  menuActions: Node.Action[];
+  onAction: (action: Node.Action, params?: Node.InvokeProps) => void;
+};
+
 /**
- * Builds the menu actions for the L1 panel header, combining graph actions with a synthetic settings/back action.
+ * Header menu actions for an L1 workspace tab. Renders nothing for an empty
+ * `menuActions`, a single inline icon button for one action, and a
+ * `…`-menu trigger for multiple.
  */
-const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>) => {
+const MenuActions = ({
+  item,
+  menuActions,
+  onAction,
+}: {
+  item: Node.Node;
+} & Pick<L1MenuActions, 'menuActions' | 'onAction'>) => {
   const { t } = useTranslation(meta.id);
-  const { setAlternateTree } = useNavTreeContext();
-  const { graph } = useAppGraph();
-  const runAction = useActionRunner();
 
-  const alternateTree = useAlternateTreeItem(item);
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
+  if (menuActions.length === 0) {
+    return null;
+  }
+
+  if (menuActions.length === 1) {
+    return (
+      <IconButton
+        density='coarse'
+        classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+        variant='ghost'
+        icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
+        iconOnly
+        label={toLocalizedString(menuActions[0].properties?.label, t)}
+        data-testid={menuActions[0].properties?.testId}
+        onClick={() => onAction(menuActions[0] as Node.Action)}
+      />
+    );
+  }
+
+  return (
+    <Menu.Root caller={NAV_TREE_ITEM} onAction={onAction}>
+      <Menu.Trigger asChild>
+        <IconButton
+          density='coarse'
+          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+          variant='ghost'
+          icon='ph--dots-three-vertical--regular'
+          iconOnly
+          label={t('tree-item-actions.label')}
+          data-testid='navtree.treeItem.actionsLevel0'
+        />
+      </Menu.Trigger>
+      <Menu.Content group={item} items={menuActions as MenuItem[]} />
+    </Menu.Root>
+  );
+};
+
+/**
+ * Builds the menu actions for the L1 panel header.
+ */
+const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>): L1MenuActions => {
+  const runAction = useActionRunner();
 
-  // Graph actions.
   const { actions: actionsProp, groupedActions } = useActions(item);
   const [primaryAction, ...secondaryActions] = actionsProp.toSorted((a, _b) =>
     a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );
 
-  const graphMenuActions = (
-    primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : actionsProp
-  )
+  const menuActions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : actionsProp)
     .flatMap((action) => (Node.isAction(action) ? [action] : []))
     .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
 
-  // Synthetic settings/back action.
-  const settingsActionId = `${item.id}~settings`;
-  const settingsAction = useMemo((): Node.Action | undefined => {
-    if (!alternateTree) {
-      return undefined;
-    }
-    return {
-      id: settingsActionId,
-      type: Node.ActionType,
-      data: () => Effect.void,
-      properties: {
-        label: isAlternate
-          ? ['button-back.button', { ns: meta.id }]
-          : (alternateTree.properties.label ?? alternateTree.id),
-        icon: isAlternate
-          ? 'ph--arrow-u-down-left--regular'
-          : (alternateTree.properties.icon ?? 'ph--placeholder--regular'),
-        disposition: 'list-item',
-        testId: isAlternate ? 'navtree.backToSpace' : 'navtree.spaceSettings',
-      },
-    } as Node.Action;
-  }, [alternateTree, isAlternate, settingsActionId, t]);
-
-  const menuActions = useMemo(
-    () => [...graphMenuActions, ...(settingsAction ? [settingsAction] : [])],
-    [graphMenuActions, settingsAction],
-  );
-
   const onAction = useCallback(
     (action: Node.Action, params?: Node.InvokeProps) => {
-      if (action.id === settingsActionId) {
-        if (alternateTree && !isAlternate) {
-          Graph.expand(graph, alternateTree.id, 'child');
-        }
-        setAlternateTree?.(alternatePath, !isAlternate);
-      } else {
-        void runAction(action, { ...params, path });
-      }
+      void runAction(action, { ...params, path });
     },
-    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction, graph, alternateTree, path],
+    [runAction, path],
   );
 
   return { primaryAction, groupedActions, menuActions, onAction };
 };
 
-/** Finds the first child with disposition 'alternate-tree' using graph connections directly. */
-const useAlternateTreeItem = (item: Node.Node): Node.Node | undefined => {
-  const { graph } = useAppGraph();
-  const connections = useConnections(graph, item.id, 'child');
-  return connections.find((node) => node.properties.disposition === 'alternate-tree');
-};
-
 export const L1Panel = memo(L1Panel$);

package/src/components/types.ts

@@ -16,7 +16,6 @@ export type NavTreeContextValue = {
   model: TreeModel<NavTreeItemGraphNode>;
   popoverAnchorId?: string;
   renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
-  setAlternateTree?: (path: string[], open: boolean) => void;
   onTabChange?: (node: NavTreeItemGraphNode) => void;
 } & Pick<
   TreeProps<NavTreeItemGraphNode>,

package/src/containers/CommandsDialogContent/CommandsDialogContent.stories.tsx

@@ -10,8 +10,9 @@ import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { Dialog } from '@dxos/react-ui';
 import { withLayout } from '@dxos/react-ui/testing';
 
+import { translations } from '#translations';
+
 import { NavTreePlugin } from '../../NavTreePlugin';
-import { translations } from '../../translations';
 import { CommandsDialogContent } from './CommandsDialogContent';
 
 const DefaultStory = () => (