@dxos/plugin-navtree 0.8.4-main.422d1c7879 → 0.8.4-main.4668b7de9b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.422d1c7879",
+  "version": "0.8.4-main.4668b7de9b",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,62 +8,116 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
   "imports": {
-    "#capabilities": "./src/capabilities/index.ts",
-    "#components": "./src/components/index.ts",
-    "#containers": "./src/containers/index.ts",
-    "#hooks": "./src/hooks/index.ts",
-    "#meta": "./src/meta.ts",
-    "#operations": "./src/operations/index.ts",
-    "#testing": "./src/testing/index.ts",
-    "#types": "./src/types/index.ts"
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#hooks": {
+      "source": "./src/hooks/index.ts",
+      "types": "./dist/types/src/hooks/index.d.ts",
+      "default": "./dist/lib/neutral/hooks/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#operations": {
+      "source": "./src/operations/index.ts",
+      "types": "./dist/types/src/operations/index.d.ts",
+      "default": "./dist/lib/neutral/operations/index.mjs"
+    },
+    "#plugin": {
+      "source": {
+        "workerd": "./src/NavTreePlugin.workerd.ts",
+        "node": "./src/NavTreePlugin.node.ts",
+        "default": "./src/NavTreePlugin.tsx"
+      },
+      "types": "./dist/types/src/NavTreePlugin.d.ts",
+      "workerd": "./dist/lib/neutral/NavTreePlugin.workerd.mjs",
+      "node": "./dist/lib/neutral/NavTreePlugin.node.mjs",
+      "default": "./dist/lib/neutral/NavTreePlugin.mjs"
+    },
+    "#testing": {
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts",
+      "default": "./dist/lib/neutral/testing/index.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "default": "./dist/lib/neutral/index.mjs"
+    },
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@radix-ui/react-dismissable-layer": "1.1.5",
-    "@radix-ui/react-use-controllable-state": "1.1.0",
-    "date-fns": "^3.6.0",
-    "@dxos/app-framework": "0.8.4-main.422d1c7879",
-    "@dxos/app-graph": "0.8.4-main.422d1c7879",
-    "@dxos/app-toolkit": "0.8.4-main.422d1c7879",
-    "@dxos/async": "0.8.4-main.422d1c7879",
-    "@dxos/echo": "0.8.4-main.422d1c7879",
-    "@dxos/invariant": "0.8.4-main.422d1c7879",
-    "@dxos/keyboard": "0.8.4-main.422d1c7879",
-    "@dxos/debug": "0.8.4-main.422d1c7879",
-    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
-    "@dxos/log": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-deck": "0.8.4-main.422d1c7879",
-    "@dxos/operation": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-graph": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-observability": "0.8.4-main.422d1c7879",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-attention": "0.8.4-main.422d1c7879",
-    "@dxos/protocols": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-menu": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-list": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-search": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-tabs": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-stack": "0.8.4-main.422d1c7879",
-    "@dxos/util": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-mosaic": "0.8.4-main.422d1c7879"
+    "@dxos/app-framework": "0.8.4-main.4668b7de9b",
+    "@dxos/app-graph": "0.8.4-main.4668b7de9b",
+    "@dxos/app-toolkit": "0.8.4-main.4668b7de9b",
+    "@dxos/compute": "0.8.4-main.4668b7de9b",
+    "@dxos/async": "0.8.4-main.4668b7de9b",
+    "@dxos/debug": "0.8.4-main.4668b7de9b",
+    "@dxos/echo": "0.8.4-main.4668b7de9b",
+    "@dxos/keyboard": "0.8.4-main.4668b7de9b",
+    "@dxos/keys": "0.8.4-main.4668b7de9b",
+    "@dxos/lit-ui": "0.8.4-main.4668b7de9b",
+    "@dxos/log": "0.8.4-main.4668b7de9b",
+    "@dxos/plugin-deck": "0.8.4-main.4668b7de9b",
+    "@dxos/plugin-graph": "0.8.4-main.4668b7de9b",
+    "@dxos/random": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui-search": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui-menu": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui-stack": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui-tabs": "0.8.4-main.4668b7de9b",
+    "@dxos/util": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui-list": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui-attention": "0.8.4-main.4668b7de9b"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -73,16 +127,15 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-attention": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-client": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-space": "0.8.4-main.422d1c7879",
-    "@dxos/random": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-testing": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/plugin-theme": "0.8.4-main.422d1c7879",
-    "@dxos/storybook-utils": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "vite": "^8.0.14",
+    "@dxos/plugin-attention": "0.8.4-main.4668b7de9b",
+    "@dxos/plugin-testing": "0.8.4-main.4668b7de9b",
+    "@dxos/plugin-client": "0.8.4-main.4668b7de9b",
+    "@dxos/plugin-theme": "0.8.4-main.4668b7de9b",
+    "@dxos/react-ui": "0.8.4-main.4668b7de9b",
+    "@dxos/plugin-space": "0.8.4-main.4668b7de9b",
+    "@dxos/ui-theme": "0.8.4-main.4668b7de9b",
+    "@dxos/storybook-utils": "0.8.4-main.4668b7de9b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -90,8 +143,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "@dxos/react-ui": "0.8.4-main.4668b7de9b",
+    "@dxos/ui-theme": "0.8.4-main.4668b7de9b"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.node.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+import { AppGraphBuilder, OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+
+export const NavTreePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  Plugin.make,
+);
+
+export default NavTreePlugin;

package/src/NavTreePlugin.test.ts

@@ -0,0 +1,27 @@
+//
+// 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')]));
+
+    await harness.fire(ActivationEvents.SetupProcessManager);
+    expect(harness.manager.getActive()).toContain(moduleId('OperationHandler'));
+  });
+});

package/src/NavTreePlugin.tsx

@@ -7,34 +7,17 @@ import * as Effect from 'effect/Effect';
 import { ActivationEvent, ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from '@dxos/app-toolkit';
 import { Graph } from '@dxos/plugin-graph';
-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';
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
 
 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 }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
@@ -47,7 +30,7 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   Plugin.addModule({
     id: 'expose',
     activatesOn: ActivationEvent.allOf(
-      ActivationEvents.OperationInvokerReady,
+      ActivationEvents.ProcessManagerReady,
       AppActivationEvents.AppGraphReady,
       AppActivationEvents.LayoutReady,
       NavTreeEvents.StateReady,
@@ -69,8 +52,13 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   }),
   Plugin.addModule({
     id: 'keyboard',
-    activatesOn: ActivationEvent.allOf(AppActivationEvents.AppGraphReady, ActivationEvents.OperationInvokerReady),
+    activatesOn: ActivationEvent.allOf(AppActivationEvents.AppGraphReady, ActivationEvents.ProcessManagerReady),
     activate: Keyboard,
   }),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+  }),
   Plugin.make,
 );
+
+export default NavTreePlugin;

package/src/NavTreePlugin.workerd.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+import { OperationHandler } from '#capabilities';
+import { meta } from '#meta';
+
+export const NavTreePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  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

@@ -36,16 +36,16 @@ export default Capability.makeModule(() =>
         },
       }),
       Surface.create({
-        id: 'document-title',
+        id: 'documentTitle',
         role: 'document-title',
         component: ({ data }) => (
           <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
         ),
       }),
       Surface.create({
-        id: 'search-input',
+        id: 'searchInput',
         role: 'search-input',
-        position: 'fallback',
+        position: 'last',
         component: () => <CommandsTrigger />,
       }),
     ]),

package/src/capabilities/state.ts

@@ -11,21 +11,23 @@ import { Graph, Node } from '@dxos/plugin-graph';
 import { Path } from '@dxos/react-ui-list';
 
 import { meta } from '#meta';
-import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '#types';
+import { 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: NavTreeCapabilities.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;
 
 /** Default state entries for initial tree structure. */
 // TODO(thure): Initialize these dynamically.
-const defaultStateEntries: [string, NC.NavTreeItemState][] = [['root', { open: true, current: false }]];
+const defaultStateEntries: [string, NavTreeCapabilities.NavTreeItemState][] = [
+  ['root', { open: true, current: false }],
+];
 
-const getInitialState = (): Map<string, NC.NavTreeItemState> => {
+const getInitialState = (): Map<string, NavTreeCapabilities.NavTreeItemState> => {
   const stringified = localStorage.getItem(KEY);
   if (!stringified) {
     return new Map(defaultStateEntries);
@@ -51,10 +53,12 @@ export default Capability.makeModule(
     // keepAlive prevents atoms from being garbage collected when components unmount,
     // ensuring state is preserved across deletion/restoration cycles.
     const itemAtomFamily = Atom.family((pathString: string) =>
-      Atom.make<NC.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(Atom.keepAlive),
+      Atom.make<NavTreeCapabilities.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(
+        Atom.keepAlive,
+      ),
     );
 
-    const getItemAtom = (path: string[]): Atom.Atom<NC.NavTreeItemState> => {
+    const getItemAtom = (path: string[]): Atom.Atom<NavTreeCapabilities.NavTreeItemState> => {
       const pathString = Path.create(...path);
       if (!backingState.has(pathString)) {
         backingState.set(pathString, { ...defaultItemState });
@@ -62,11 +66,11 @@ export default Capability.makeModule(
       return itemAtomFamily(pathString);
     };
 
-    const getItem = (path: string[]): NC.NavTreeItemState => {
+    const getItem = (path: string[]): NavTreeCapabilities.NavTreeItemState => {
       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,27 +23,23 @@ 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);
 
 const StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
-// TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
-// TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
-
 const container = 'flex flex-col grow gap-2 p-4 rounded-md';
 
-// TODO(burdon): Factor out PlankHeader.
 const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   const { hasAttention } = useAttention(attendableId);
   console.log('hasAttention', hasAttention);
   return (
     <div className='flex p-1 items-center border-b border-separator'>
       <IconButton
-        density='coarse'
+        density='lg'
         icon='ph--circle--regular'
         label='Test'
         iconOnly
@@ -82,7 +78,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
-        <div className={mx(container, 'm-2 bg-active-surface')}>
+        <div className={mx(container, 'm-2 bg-current-surface')}>
           <Input.Root>
             <Input.Label>Level 1 (group)</Input.Label>
           </Input.Root>
@@ -165,8 +161,10 @@ export const Default: Story = {
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
 
-    // Find the element with treegrid role and click on its parent
-    const treegridElement = await canvas.findByRole('treegrid');
+    // Plugin startup is async; the treegrid only appears after the Startup event
+    // fires and the graph is built. Use a generous timeout so slower CI runners
+    // don't race the default 1 s limit.
+    const treegridElement = await canvas.findByRole('treegrid', {}, { timeout: 10000 });
     const treegridParent = treegridElement.parentElement;
     if (treegridParent) {
       await userEvent.click(treegridParent);

package/src/components/NavTree/NavTree.tsx

@@ -82,10 +82,10 @@ const useTopLevelNavItems = (root?: Node.Node) => {
     ].toSorted((a, b) => byPosition(a.properties, b.properties));
 
     return {
-      topLevelActions,
-      l0Items: topLevelWorkspaces,
       pinnedItems,
+      topLevelActions,
       userAccountItem,
+      l0Items: topLevelWorkspaces,
     };
   }, [rootActions, rootOutboundItems]);
 

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Node } from '@dxos/app-graph';
 import { corePlugins } from '@dxos/plugin-testing';
@@ -52,7 +52,7 @@ const meta = {
   } satisfies Partial<NavTreeItemActionMenuProps>,
   decorators: [
     withPluginManager({
-      plugins: [...corePlugins(), RuntimePlugin()],
+      plugins: [...corePlugins(), ProcessManagerPlugin()],
     }),
   ],
   parameters: {

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -7,22 +7,23 @@ import React, { useCallback } from 'react';
 import { type Node } from '@dxos/app-graph';
 import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
-import { composable, composableProps, hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 import { type ActionProperties } from '#types';
 
-const fallbackIcon = 'ph--placeholder--regular';
+const fallbackIcon = 'ph--circle-dashed--regular';
 
-const fineActionButtonProps = {
+const mdActionButtonProps = {
   size: 4 as const,
-  density: 'fine' as const,
+  density: 'md' as const,
 };
 
-const coarseActionButtonProps = {
+const lgActionButtonProps = {
   size: 5 as const,
-  density: 'coarse' as const,
+  density: 'lg' as const,
 };
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
@@ -47,7 +48,7 @@ export const NavTreeItemActionDropdownMenu = composable<HTMLButtonElement, NavTr
       <Menu.Root caller={caller} onAction={handleAction}>
         <Menu.Trigger asChild>
           <IconButton
-            {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+            {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
             {...composableProps(props)}
             classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
             variant='ghost'
@@ -84,7 +85,7 @@ export const NavTreeItemMonolithicAction = (
   const runAction = useActionRunner();
   return (
     <IconButton
-      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+      {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
       variant={variant}
       classNames={[
         'shrink-0',
@@ -113,7 +114,7 @@ export const NavTreeItemAction = ({
   monolithic,
   menuActions,
   menuType,
-  parent: node,
+  parent,
   path,
   ...props
 }: NavTreeItemActionMenuProps) => {
@@ -121,10 +122,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} />
   );
 };