@dxos/plugin-navtree 0.8.2-main.5ca3450 → 0.8.2-main.600d381

package/dist/types/src/translations.d.ts

@@ -1,7 +1,7 @@
 declare const _default: {
     'en-US': {
         "dxos.org/plugin/navtree": {
-            'back label': string;
+            'app menu label': string;
             'open settings label': string;
             'open commands label': string;
             'commands dialog title': string;

package/dist/types/src/util.d.ts

@@ -9,5 +9,5 @@ export declare const getActions: (graph: Graph, node: Node) => FlattenedActions;
 export declare const expandChildrenAndActions: (graph: Graph, node: Node) => Promise<[void, [void, void]]>;
 export declare const expandChildren: (graph: Graph, node: Node) => Promise<void>;
 export declare const expandActions: (graph: Graph, node: Node) => Promise<[void, void]>;
-export declare const l0ItemType: (item: Node<any>) => "link" | "tab" | "collection" | "action";
+export declare const l0ItemType: (item: Node<any>) => "collection" | "action" | "link" | "tab";
 //# sourceMappingURL=util.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.2-main.5ca3450",
+  "version": "0.8.2-main.600d381",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,29 +30,28 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "effect": "^3.13.3",
-    "@dxos/app-framework": "0.8.2-main.5ca3450",
-    "@dxos/app-graph": "0.8.2-main.5ca3450",
-    "@dxos/async": "0.8.2-main.5ca3450",
-    "@dxos/debug": "0.8.2-main.5ca3450",
-    "@dxos/echo-schema": "0.8.2-main.5ca3450",
-    "@dxos/invariant": "0.8.2-main.5ca3450",
-    "@dxos/keyboard": "0.8.2-main.5ca3450",
-    "@dxos/live-object": "0.8.2-main.5ca3450",
-    "@dxos/local-storage": "0.8.2-main.5ca3450",
-    "@dxos/log": "0.8.2-main.5ca3450",
-    "@dxos/plugin-graph": "0.8.2-main.5ca3450",
-    "@dxos/plugin-deck": "0.8.2-main.5ca3450",
-    "@dxos/plugin-observability": "0.8.2-main.5ca3450",
-    "@dxos/plugin-client": "0.8.2-main.5ca3450",
-    "@dxos/plugin-theme": "0.8.2-main.5ca3450",
-    "@dxos/react-client": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-list": "0.8.2-main.5ca3450",
-    "@dxos/protocols": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-menu": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-searchlist": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-stack": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-tabs": "0.8.2-main.5ca3450",
-    "@dxos/util": "0.8.2-main.5ca3450"
+    "@dxos/app-graph": "0.8.2-main.600d381",
+    "@dxos/async": "0.8.2-main.600d381",
+    "@dxos/echo-schema": "0.8.2-main.600d381",
+    "@dxos/keyboard": "0.8.2-main.600d381",
+    "@dxos/app-framework": "0.8.2-main.600d381",
+    "@dxos/debug": "0.8.2-main.600d381",
+    "@dxos/invariant": "0.8.2-main.600d381",
+    "@dxos/live-object": "0.8.2-main.600d381",
+    "@dxos/log": "0.8.2-main.600d381",
+    "@dxos/local-storage": "0.8.2-main.600d381",
+    "@dxos/plugin-client": "0.8.2-main.600d381",
+    "@dxos/plugin-deck": "0.8.2-main.600d381",
+    "@dxos/plugin-graph": "0.8.2-main.600d381",
+    "@dxos/react-client": "0.8.2-main.600d381",
+    "@dxos/protocols": "0.8.2-main.600d381",
+    "@dxos/plugin-observability": "0.8.2-main.600d381",
+    "@dxos/react-ui-list": "0.8.2-main.600d381",
+    "@dxos/react-ui-searchlist": "0.8.2-main.600d381",
+    "@dxos/react-ui-stack": "0.8.2-main.600d381",
+    "@dxos/react-ui-tabs": "0.8.2-main.600d381",
+    "@dxos/util": "0.8.2-main.600d381",
+    "@dxos/react-ui-menu": "0.8.2-main.600d381"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -61,19 +60,21 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-theme": "0.8.2-main.5ca3450",
-    "@dxos/random": "0.8.2-main.5ca3450",
-    "@dxos/echo-signals": "0.8.2-main.5ca3450",
-    "@dxos/storybook-utils": "0.8.2-main.5ca3450"
+    "@dxos/echo-signals": "0.8.2-main.600d381",
+    "@dxos/plugin-storybook-layout": "0.8.2-main.600d381",
+    "@dxos/random": "0.8.2-main.600d381",
+    "@dxos/plugin-theme": "0.8.2-main.600d381",
+    "@dxos/react-ui": "0.8.2-main.600d381",
+    "@dxos/storybook-utils": "0.8.2-main.600d381",
+    "@dxos/react-ui-theme": "0.8.2-main.600d381"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-theme": "0.8.2-main.5ca3450"
+    "@dxos/react-ui": "0.8.2-main.600d381",
+    "@dxos/react-ui-theme": "0.8.2-main.600d381"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/keyboard.ts

@@ -35,7 +35,7 @@ export default (context: PluginsContext) => {
         Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
           shortcut,
           handler: () => {
-            void node.data({ node, caller: KEY_BINDING });
+            void node.data({ parent: node, caller: KEY_BINDING });
           },
           data: node.properties.label,
         });

package/src/components/{CommandsDialog.tsx → CommandsDialog/CommandsDialog.tsx}

@@ -12,7 +12,7 @@ import { SearchList } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, NAVTREE_PLUGIN } from '../meta';
+import { KEY_BINDING, NAVTREE_PLUGIN } from '../../meta';
 
 // TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
 export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
@@ -85,7 +85,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                   void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
                   setTimeout(() => {
                     const node = graph.nodes(group ?? action, { relation: 'inbound' })[0];
-                    void (node && isAction(action) && action.data({ node, caller: KEY_BINDING }));
+                    void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
                   });
                 }}
                 classNames='flex items-center gap-2'

package/src/components/{CommandsTrigger.tsx → CommandsDialog/CommandsTrigger.tsx}

@@ -9,7 +9,7 @@ import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-frame
 import { Button, useTranslation } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
+import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {

package/src/components/CommandsDialog/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './CommandsDialog';
+export * from './CommandsTrigger';

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

@@ -0,0 +1,87 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import { Schema } from 'effect';
+import React from 'react';
+
+import {
+  contributes,
+  Capabilities,
+  IntentPlugin,
+  createResolver,
+  defineCapability,
+  LayoutAction,
+  SettingsPlugin,
+  useCapability,
+} from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { live } from '@dxos/live-object';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { Main } from '@dxos/react-ui';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { withLayout } from '@dxos/storybook-utils';
+
+import { NavTreePlugin } from '../../NavTreePlugin';
+import { storybookGraphBuilders } from '../../testing';
+import { NavTreeContainer } from '../NavTreeContainer';
+
+faker.seed(1234);
+
+const StoryState = defineCapability<{ tab: string }>('story-state');
+
+const DefaultStory = () => {
+  const state = useCapability(StoryState);
+
+  return (
+    <Main.NavigationSidebar label='Navigation' classNames='grid'>
+      <NavTreeContainer tab={state.tab} />
+    </Main.NavigationSidebar>
+  );
+};
+
+const meta: Meta<typeof NavTreeContainer> = {
+  title: 'plugins/plugin-navtree/NavTree',
+  component: NavTreeContainer,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
+        GraphPlugin(),
+        IntentPlugin(),
+        SettingsPlugin(),
+        NavTreePlugin(),
+      ],
+      capabilities: (context) => [
+        contributes(StoryState, live({ tab: 'default' })),
+        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.requestCapability(StoryState);
+              state.tab = subject;
+            },
+          }),
+        ]),
+        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders),
+      ],
+    }),
+    withLayout({ fullscreen: true }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavTreeContainer>;
+
+export const Default: Story = {};

package/src/components/{NavTree.tsx → NavTree/NavTree.tsx}

@@ -4,31 +4,43 @@
 
 import React, { useMemo } from 'react';
 
+import { type TreeProps } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { byPosition } from '@dxos/util';
 
-import { L0Menu } from './L0Menu';
-import { L1Panels } from './L1Panels';
-import { useNavTreeContext } from './NavTreeContext';
-import { type NavTreeProps } from './types';
-import { useLoadDescendents } from '../hooks';
+import { useLoadDescendents } from '../../hooks';
+import { type NavTreeItemGraphNode } from '../../types';
+import { useNavTreeContext } from '../NavTreeContext';
+import { L0Menu, L1Panels, type L1PanelsProps } from '../Sidebar';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export const NavTree = ({ id, root }: NavTreeProps) => {
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+
+export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
   const { tab, getItems, onBack } = useNavTreeContext();
-  const topLevelActions = getItems(root, 'item').toSorted((a, b) => byPosition(a.properties, b.properties));
+  const topLevelActions = getItems(root, 'menu').toSorted((a, b) => byPosition(a.properties, b.properties));
   const topLevelCollections = getItems(root, 'collection');
   const topLevelWorkspaces = getItems(root, 'workspace');
   const topLevelNavigation = getItems(root, 'navigation');
   const l0Items = useMemo(
-    () => [...topLevelActions, ...topLevelCollections, ...topLevelWorkspaces, ...topLevelNavigation],
-    [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
+    () => [
+      // prettier-ignore
+      ...topLevelCollections,
+      ...topLevelWorkspaces,
+      ...topLevelNavigation,
+    ],
+    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
   );
   const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
   const userAccountItem = getItems(root, 'user-account')[0];
   const topLevelItems = useMemo(
-    () => [...l0Items, ...pinnedItems, userAccountItem],
+    () => [
+      // prettier-ignore
+      ...l0Items,
+      ...pinnedItems,
+      ...(userAccountItem ? [userAccountItem] : []),
+    ],
     [l0Items, pinnedItems, userAccountItem],
   );
 
@@ -39,13 +51,14 @@ export const NavTree = ({ id, root }: NavTreeProps) => {
     // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
     <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
       <L0Menu
+        menuActions={topLevelActions}
         topLevelItems={l0Items}
         pinnedItems={pinnedItems}
         userAccountItem={userAccountItem}
         path={path}
         parent={root}
       />
-      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
 };

package/src/components/NavTree/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NavTree';

package/src/components/NavTreeContainer.tsx

@@ -19,7 +19,7 @@ import {
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery } from '@dxos/react-ui';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
@@ -28,6 +28,7 @@ import { NAV_TREE_ITEM, NavTree } from './NavTree';
 import { NavTreeContext } from './NavTreeContext';
 import { type NavTreeContextValue } from './types';
 import { NavTreeCapabilities } from '../capabilities';
+import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
 import {
   expandActions,
@@ -58,8 +59,9 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
-  const layout = useLayout();
   const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+  const layout = useLayout();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
@@ -120,7 +122,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph],
   );
 
-  const onOpenChange = useCallback(
+  const handleOpenChange = useCallback(
     ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
       // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
       setItem(path, 'open', open);
@@ -133,9 +135,26 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph],
   );
 
-  const onTabChange = useCallback(
+  const handleTabChange = useCallback(
     async (node: NavTreeItemGraphNode) => {
+      await dispatch(
+        createIntent(LayoutAction.UpdateSidebar, {
+          part: 'sidebar',
+          options: {
+            state:
+              node.id === tab
+                ? navigationSidebarState === 'expanded'
+                  ? isLg
+                    ? 'collapsed'
+                    : 'closed'
+                  : 'expanded'
+                : 'expanded',
+          },
+        }),
+      );
+
       await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
+
       // Open the first item if the workspace is empty.
       if (layout.active.length === 0) {
         const [item] = getItems(node).filter((node) => !isActionLike(node));
@@ -144,7 +163,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         }
       }
     },
-    [dispatch, layout],
+    [dispatch, layout.active, tab, navigationSidebarState, isLg],
   );
 
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
@@ -168,7 +187,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
 
       if (isAction(node)) {
         const [parent] = graph.nodes(node, { relation: 'inbound' });
-        void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
+        void (parent && node.data({ parent, caller: NAV_TREE_ITEM }));
         return;
       }
 
@@ -201,7 +220,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph, dispatch, isCurrent, isLg],
   );
 
-  const onBack = useCallback(
+  const handleBack = useCallback(
     () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
     [dispatch],
   );
@@ -275,8 +294,6 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const navTreeContextValue = useMemo(
     () => ({
       tab,
-      onTabChange,
-      onBack,
       getActions,
       loadDescendents,
       renderItemEnd,
@@ -286,16 +303,16 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       getProps,
       isCurrent,
       isOpen,
-      onOpenChange,
       canDrop,
-      onSelect: handleSelect,
       isAlternateTree,
       setAlternateTree,
+      onTabChange: handleTabChange,
+      onOpenChange: handleOpenChange,
+      onSelect: handleSelect,
+      onBack: handleBack,
     }),
     [
       tab,
-      onTabChange,
-      onBack,
       getActions,
       loadDescendents,
       renderItemEnd,
@@ -305,17 +322,19 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       getProps,
       isCurrent,
       isOpen,
-      onOpenChange,
       canDrop,
-      handleSelect,
       isAlternateTree,
       setAlternateTree,
+      handleTabChange,
+      handleOpenChange,
+      handleSelect,
+      handleBack,
     ],
   );
 
   return (
     <NavTreeContext.Provider value={navTreeContextValue}>
-      <NavTree root={graph.root} id={graph.root.id} />
+      <NavTree id={graph.root.id} root={graph.root} open={layout.sidebarOpen} />
     </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -10,4 +10,4 @@ import { type NavTreeContextValue } from './types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 
-export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('Missing NavTreeContext'));

package/src/components/{NavTreeItemAction.stories.tsx → NavTreeItem/NavTreeItemAction.stories.tsx}

@@ -4,6 +4,8 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -37,19 +39,23 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-export default {
+const meta: Meta<typeof NavTreeItemAction> = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  decorators: [withTheme, withLayout()],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
-    onAction: (action) => {
-      console.log(action);
-    },
   } satisfies Partial<NavTreeItemActionMenuProps>,
+  parameters: {
+    layout: 'centered',
+  },
 };
 
-export const Default = {};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/{NavTreeItemAction.tsx → NavTreeItem/NavTreeItemAction.tsx}

@@ -9,8 +9,8 @@ import { useTranslation, toLocalizedString, IconButton, useDensityContext } from
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../meta';
-import { type ActionProperties } from '../types';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node;
@@ -18,7 +18,6 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   monolithic?: boolean;
   menuActions?: Action[];
   suppressNextTooltip?: MutableRefObject<boolean>;
-  onAction?: (action: Action) => void;
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
@@ -33,18 +32,24 @@ const coarseActionButtonProps = {
 };
 
 export const NavTreeItemActionDropdownMenu = ({
+  parent,
   label,
   icon,
   testId,
   menuActions,
-  onAction,
+  caller,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef<boolean>(false);
   const density = useDensityContext();
   return (
-    <MenuProvider onAction={onAction}>
-      <DropdownMenu.Root items={menuActions as MenuItem[]} suppressNextTooltip={suppressNextTooltip}>
+    <MenuProvider>
+      <DropdownMenu.Root
+        group={parent}
+        items={menuActions as MenuItem[]}
+        caller={caller}
+        suppressNextTooltip={suppressNextTooltip}
+      >
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
@@ -88,7 +93,7 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
         event.stopPropagation();
-        void invoke?.(caller ? { node: parent, caller } : { node: parent });
+        void invoke?.(caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
     />
@@ -104,12 +109,6 @@ export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...pr
   return monolithic && menuActions?.length === 1 ? (
     <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu
-      {...props}
-      label={baseLabel}
-      parent={node}
-      menuActions={menuActions}
-      onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-    />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
   );
 };

package/src/components/{NavTreeItemColumns.tsx → NavTreeItem/NavTreeItemColumns.tsx}

@@ -7,12 +7,12 @@ import React, { Fragment, memo } from 'react';
 import { isAction } from '@dxos/app-graph';
 import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
 
-import { NAV_TREE_ITEM } from './NavTree';
-import { useNavTreeContext } from './NavTreeContext';
 import { NavTreeItemAction } from './NavTreeItemAction';
-import type { NavTreeItemColumnsProps } from './types';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
+import { useLoadDescendents } from '../../hooks';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { NAV_TREE_ITEM } from '../NavTree';
+import { useNavTreeContext } from '../NavTreeContext';
+import type { NavTreeItemColumnsProps } from '../types';
 
 export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);

package/src/components/NavTreeItem/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NavTreeItemAction';
+export * from './NavTreeItemColumns';