@dxos/plugin-navtree 0.8.4-main.c85a9c8dae → 0.8.4-main.d05673bc65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d05673bc65",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,30 +33,30 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/debug": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/keyboard": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/operation": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-deck": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-observability": "0.8.4-main.c85a9c8dae",
-    "@dxos/protocols": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-list": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/lit-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-tabs": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-searchlist": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae"
+    "@dxos/app-framework": "0.8.4-main.d05673bc65",
+    "@dxos/app-graph": "0.8.4-main.d05673bc65",
+    "@dxos/async": "0.8.4-main.d05673bc65",
+    "@dxos/echo": "0.8.4-main.d05673bc65",
+    "@dxos/debug": "0.8.4-main.d05673bc65",
+    "@dxos/app-toolkit": "0.8.4-main.d05673bc65",
+    "@dxos/invariant": "0.8.4-main.d05673bc65",
+    "@dxos/keyboard": "0.8.4-main.d05673bc65",
+    "@dxos/lit-ui": "0.8.4-main.d05673bc65",
+    "@dxos/log": "0.8.4-main.d05673bc65",
+    "@dxos/operation": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-deck": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-graph": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-observability": "0.8.4-main.d05673bc65",
+    "@dxos/protocols": "0.8.4-main.d05673bc65",
+    "@dxos/react-client": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-attention": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-list": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-menu": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-mosaic": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-searchlist": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-stack": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-tabs": "0.8.4-main.d05673bc65"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -67,15 +67,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/plugin-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-testing": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/plugin-attention": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-client": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-space": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-testing": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-theme": "0.8.4-main.d05673bc65",
+    "@dxos/random": "0.8.4-main.d05673bc65",
+    "@dxos/storybook-utils": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -83,8 +83,8 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/keyboard/keyboard.ts

@@ -47,7 +47,7 @@ export default Capability.makeModule(
     };
 
     const eventHandler = debounce(() => {
-      Graph.traverse(graph, { relation: 'child', visitor });
+      Graph.traverse(graph, { relation: ['child', 'action'], visitor });
     }, 500);
 
     const unsubscribe = graph.onNodeChanged.on(eventHandler);

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -3,9 +3,11 @@
 //
 
 import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { expandAttendableId } from '@dxos/react-ui-attention';
 import { log } from '@dxos/log';
 import { OperationResolver } from '@dxos/operation';
 import { Graph } from '@dxos/plugin-graph';
@@ -18,25 +20,24 @@ export default Capability.makeModule(
       OperationResolver.make({
         operation: LayoutOperation.Expose,
         handler: Effect.fnUntraced(function* ({ subject }) {
-          // TODO(wittjosiah): There's a lot of scenarios where this will fail.
-          //   Probably needs to be aware of the composer ontology to more reliably ensure objects are accessible.
           const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
           const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);
-          yield* Effect.tryPromise(() => Graph.waitForPath(graph, { target: subject }, { timeout: 1_000 })).pipe(
-            Effect.andThen((path) => {
-              [...Array(path.length)].forEach((_, index) => {
-                const subpath = path.slice(0, index);
-                const value = getItem(subpath);
-                if (!value.open) {
-                  setItem(subpath, 'open', true);
-                }
-              });
-            }),
-            Effect.catchAll(() => {
-              log('Path to node not found', { subject });
-              return Effect.void;
-            }),
-          );
+
+          const prefixes = expandAttendableId(subject);
+
+          for (const qualifiedId of prefixes) {
+            Graph.expand(graph, qualifiedId, 'child');
+
+            const treePath = prefixes.slice(0, prefixes.indexOf(qualifiedId) + 1);
+            const state = getItem(treePath);
+            if (!state.open) {
+              setItem(treePath, 'open', true);
+            }
+          }
+
+          if (Option.isNone(Graph.getNode(graph, subject))) {
+            log('Node not found after expansion', { subject });
+          }
         }),
       }),
     ]);

package/src/capabilities/react-surface/react-surface.tsx

@@ -22,7 +22,7 @@ export default Capability.makeModule(() =>
         component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
       }),
       Surface.create({
-        id: `${meta.id}/navigation`,
+        id: `${meta.id}.navigation`,
         role: 'navigation',
         filter: (data): data is { popoverAnchorId?: string; current: string } => typeof data.current === 'string',
         component: ({ data, ref }) => {
@@ -36,14 +36,14 @@ export default Capability.makeModule(() =>
         },
       }),
       Surface.create({
-        id: `${meta.id}/document-title`,
+        id: `${meta.id}.document-title`,
         role: 'document-title',
         component: ({ data }) => (
           <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
         ),
       }),
       Surface.create({
-        id: `${meta.id}/search-input`,
+        id: `${meta.id}.search-input`,
         role: 'search-input',
         position: 'fallback',
         component: () => <CommandsTrigger />,

package/src/capabilities/state/state.ts

@@ -13,7 +13,7 @@ import { Path } from '@dxos/react-ui-list';
 import { meta } from '../../meta';
 import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '../../types';
 
-const KEY = `${meta.id}/state/v1`;
+const KEY = `${meta.id}.state.v1`;
 
 /** Default item state for new entries. */
 const defaultItemState: NC.NavTreeItemState = { open: false, current: false, alternateTree: false };

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

@@ -132,7 +132,7 @@ const meta = {
         NavTreePlugin(),
       ],
       capabilities: () => {
-        const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
+        const storyStateAtom = Atom.make({ tab: 'root/space-0' }).pipe(Atom.keepAlive);
         return [
           Capability.contributes(StoryState, storyStateAtom),
           Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),

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

@@ -6,7 +6,7 @@ import { createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { type NavTreeContextValue } from './types';
+import { type NavTreeContextValue } from '../types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 

package/src/components/NavTreeContext/index.ts

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

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import { useActionRunner } from '@dxos/plugin-graph';
@@ -15,6 +15,7 @@ import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node.Node;
+  path?: string[];
   caller?: string;
   monolithic?: boolean;
   menuActions?: Node.Action[];
@@ -33,6 +34,7 @@ const coarseActionButtonProps = {
 
 export const NavTreeItemActionDropdownMenu = ({
   parent,
+  path,
   label,
   icon,
   testId,
@@ -42,9 +44,13 @@ export const NavTreeItemActionDropdownMenu = ({
   const { t } = useTranslation(meta.id);
   const density = useDensityContext();
   const runAction = useActionRunner();
+  const handleAction = useCallback(
+    (action: Node.Action, params: Node.InvokeProps = {}) => runAction(action, { ...params, path }),
+    [runAction, path],
+  );
 
   return (
-    <Menu.Root caller={caller} onAction={runAction}>
+    <Menu.Root caller={caller} onAction={handleAction}>
       <Menu.Trigger asChild>
         <IconButton
           {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
@@ -62,10 +68,16 @@ export const NavTreeItemActionDropdownMenu = ({
 };
 
 export const NavTreeItemMonolithicAction = (
-  props: Node.Action & { parent: Node.Node; onAction?: (action: Node.Action) => void; baseLabel: string },
+  props: Node.Action & {
+    parent: Node.Node;
+    path?: string[];
+    onAction?: (action: Node.Action) => void;
+    baseLabel: string;
+  },
 ) => {
   const {
     parent,
+    path,
     properties: { disabled, caller, testId, icon, variant = 'ghost', iconOnly = true } = { label: 'never' },
     baseLabel,
   } = props;
@@ -91,22 +103,28 @@ export const NavTreeItemMonolithicAction = (
           return;
         }
 
-        void runAction(props, caller ? { parent, caller } : { parent });
+        void runAction(props, caller ? { parent, caller, path } : { parent, path });
       }}
       data-testid={testId}
     />
   );
 };
 
-export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }: NavTreeItemActionMenuProps) => {
+export const NavTreeItemAction = ({
+  monolithic,
+  menuActions,
+  parent: node,
+  path,
+  ...props
+}: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(meta.id);
 
   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} {...menuActions[0]} />
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} path={path} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} path={path} menuActions={menuActions} />
   );
 };

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -56,7 +56,7 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
     [primaryAction, groupedActions],
   );
 
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+  const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
 
   return (
     <div role='none' className='contents dx-app-no-drag'>
@@ -67,6 +67,7 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
             label={toLocalizedString(primaryAction.properties?.label, t)}
             icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
             parent={item}
+            path={path}
             monolithic={Node.isAction(primaryAction)}
             menuActions={primaryMenuActions}
             menuType={primaryAction.properties?.menuType}
@@ -84,6 +85,7 @@ export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumns
               label={t('tree item actions label')}
               icon='ph--dots-three-vertical--regular'
               parent={item}
+              path={path}
               menuActions={actions}
               menuType='dropdown'
               caller={NAV_TREE_ITEM}

package/src/components/Sidebar/L0Menu.tsx

@@ -85,7 +85,7 @@ const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
       switch (type) {
         case 'action': {
           const { properties: { caller } = {} } = item;
-          return void runAction(item as Node.Action, caller ? { parent, caller } : { parent });
+          return void runAction(item as Node.Action, caller ? { parent, path, caller } : { parent, path });
         }
 
         case 'tab':

package/src/components/Sidebar/L1Panel.tsx

@@ -7,9 +7,11 @@ 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 { 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';
@@ -137,11 +139,25 @@ const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path
   const { t } = useTranslation(meta.id);
   const { renderItemEnd: ItemEnd } = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
-  const backCapableWorkspace = item.id.startsWith('!');
+  const backCapableWorkspace = isPinnedWorkspace(item.id);
 
   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 className='flex w-full items-center border-b border-subdued-separator dx-app-drag dx-density-coarse pe-1'>
       {backCapableWorkspace ? (
@@ -168,6 +184,7 @@ const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path
             label={toLocalizedString(primaryAction.properties?.label, t)}
             icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
             parent={item}
+            path={path}
             monolithic={Node.isAction(primaryAction)}
             menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
             menuType={primaryAction.properties?.menuType}
@@ -204,7 +221,7 @@ const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path
             <Menu.Content group={item} items={menuActions as MenuItem[]} />
           </Menu.Root>
         )}
-        {ItemEnd && <ItemEnd node={item} open />}
+        {ItemEnd && <ItemEnd node={item} open={alternateTreeOpen} />}
       </div>
     </div>
   );
@@ -269,10 +286,10 @@ const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>) =
         }
         setAlternateTree?.(alternatePath, !isAlternate);
       } else {
-        void runAction(action, params);
+        void runAction(action, { ...params, path });
       }
     },
-    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction, graph, alternateTree],
+    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction, graph, alternateTree, path],
   );
 
   return { primaryAction, groupedActions, menuActions, onAction };

package/src/containers/CommandsDialogContent/CommandsDialogContent.tsx

@@ -38,7 +38,7 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
       const actionMap = new Set<string>();
       const actions: Node.ActionLike[] = [];
       Graph.traverse(graph, {
-        relation: 'child',
+        relation: ['child', 'action'],
         visitor: (node, path) => {
           if (
             (Node.isAction(node) || Node.isActionGroup(node)) &&
@@ -71,62 +71,64 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
 
     return (
       <Dialog.Content ref={forwardedRef}>
-        <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
-        <SearchList.Root onSearch={handleSearch}>
-          <SearchList.Content>
-            <SearchList.Input placeholder={t('command list input placeholder')} />
-            <SearchList.Viewport>
-              {results.map((action) => {
-                const shortcut =
-                  typeof action.properties.keyBinding === 'string'
-                    ? action.properties.keyBinding
-                    : action.properties.keyBinding?.[getHostPlatform()];
+        <Dialog.Title srOnly>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <Dialog.Body>
+          <SearchList.Root onSearch={handleSearch}>
+            <SearchList.Content>
+              <SearchList.Input placeholder={t('command list input placeholder')} />
+              <SearchList.Viewport>
+                {results.map((action) => {
+                  const shortcut =
+                    typeof action.properties.keyBinding === 'string'
+                      ? action.properties.keyBinding
+                      : action.properties.keyBinding?.[getHostPlatform()];
 
-                return (
-                  <SearchList.Item
-                    value={action.id}
-                    key={action.id}
-                    label={toLocalizedString(action.properties.label, t)}
-                    icon={action.properties.icon}
-                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
-                    onSelect={() => {
-                      if (action.properties.disabled) {
-                        return;
-                      }
-
-                      if (Node.isActionGroup(action)) {
-                        setSelected(action.id);
-                        return;
-                      }
+                  return (
+                    <SearchList.Item
+                      value={action.id}
+                      key={action.id}
+                      label={toLocalizedString(action.properties.label, t)}
+                      icon={action.properties.icon}
+                      suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                      onSelect={() => {
+                        if (action.properties.disabled) {
+                          return;
+                        }
 
-                      invokeSync(LayoutOperation.UpdateDialog, { state: false });
-                      setTimeout(() => {
-                        const node = Graph.getConnections(
-                          graph,
-                          group?.id ?? action.id,
-                          Node.childRelation('inbound'),
-                        )[0];
-                        if (node && Node.isAction(action)) {
-                          void runAction(action, { parent: node, caller: KEY_BINDING });
+                        if (Node.isActionGroup(action)) {
+                          setSelected(action.id);
+                          return;
                         }
-                      });
-                    }}
-                    classNames='flex items-center gap-2'
-                    disabled={action.properties.disabled}
-                    {...(action.properties?.testId && {
-                      'data-testid': action.properties.testId,
-                    })}
-                  />
-                );
-              })}
-            </SearchList.Viewport>
-          </SearchList.Content>
-        </SearchList.Root>
-        <div role='none' className='p-form-padding'>
+
+                        invokeSync(LayoutOperation.UpdateDialog, { state: false });
+                        setTimeout(() => {
+                          const node = Graph.getConnections(
+                            graph,
+                            group?.id ?? action.id,
+                            Node.childRelation('inbound'),
+                          )[0];
+                          if (node && Node.isAction(action)) {
+                            void runAction(action, { parent: node, caller: KEY_BINDING });
+                          }
+                        });
+                      }}
+                      classNames='flex items-center gap-2'
+                      disabled={action.properties.disabled}
+                      {...(action.properties?.testId && {
+                        'data-testid': action.properties.testId,
+                      })}
+                    />
+                  );
+                })}
+              </SearchList.Viewport>
+            </SearchList.Content>
+          </SearchList.Root>
+        </Dialog.Body>
+        <Dialog.ActionBar>
           <Dialog.Close asChild>
             <Button classNames='w-full'>{t('close label', { ns: osTranslations })}</Button>
           </Dialog.Close>
-        </div>
+        </Dialog.ActionBar>
       </Dialog.Content>
     );
   },

package/src/containers/NavTreeContainer/NavTreeContainer.tsx

@@ -131,7 +131,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         if (Node.isAction(node)) {
           const [parent] = Graph.getConnections(graph, node.id, Node.childRelation('inbound'));
           if (parent) {
-            void runAction(node, { parent, caller: NAV_TREE_ITEM });
+            void runAction(node, { parent, path, caller: NAV_TREE_ITEM });
           }
           return;
         }
@@ -177,8 +177,9 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
             const targetNode = target.data.item as NavTreeItemGraphNode;
             const sourcePath = source.data.path as string[];
             const targetPath = target.data.path as string[];
+            const sameParent = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join();
             const operation =
-              sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+              sameParent && instruction.type !== 'make-child'
                 ? 'rearrange'
                 : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
             const sourceParent = getParent(graph, sourceNode, sourcePath);
@@ -207,7 +208,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               }
               case 'transfer': {
                 const target = instruction.type === 'make-child' ? targetNode : targetParent;
-                if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                if (!target?.properties.onTransferStart || target?.id === sourceParent?.id) {
                   break;
                 }
                 void target?.properties.onTransferStart(sourceNode, migrationIndex);

package/src/containers/NavTreeContainer/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NavTreeContainer } from './NavTreeContainer';
-
-export default NavTreeContainer;
+export { NavTreeContainer, NODE_TYPE } from './NavTreeContainer';
+export { NavTreeContainer as default } from './NavTreeContainer';

package/src/containers/index.ts

@@ -4,7 +4,7 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export { NODE_TYPE } from './NavTreeContainer/NavTreeContainer';
+export { NODE_TYPE } from './NavTreeContainer';
 
 export const CommandsDialogContent: ComponentType<any> = lazy(() => import('./CommandsDialogContent'));
 export const CommandsTrigger: ComponentType<any> = lazy(() => import('./CommandsTrigger'));

package/src/hooks/useActions.ts

@@ -9,30 +9,26 @@ import { Graph, Node, useActions as useGraphActions } from '@dxos/plugin-graph';
 
 import { type FlattenedActions } from '../types';
 
-/**
- * Returns flattened actions and grouped sub-actions for a given graph node.
- */
+/** Returns flattened actions and grouped sub-actions for a given graph node. */
 export const useActions = (node: Node.Node): FlattenedActions => {
   const { graph } = useAppGraph();
   const actions = useGraphActions(graph, node.id);
 
-  return useMemo(
-    () =>
-      actions.reduce(
-        (acc: FlattenedActions, arg) => {
-          if (arg.properties.disposition === 'item') {
-            return acc;
-          }
-
-          acc.actions.push(arg);
-          if (!Node.isAction(arg)) {
-            const actionGroup = Graph.getActions(graph, arg.id);
-            acc.groupedActions[arg.id] = actionGroup;
-          }
+  return useMemo(() => {
+    return actions.reduce(
+      (acc: FlattenedActions, arg) => {
+        if (arg.properties.disposition === 'item') {
           return acc;
-        },
-        { actions: [], groupedActions: {} },
-      ),
-    [actions],
-  );
+        }
+
+        acc.actions.push(arg);
+        if (!Node.isAction(arg)) {
+          const actionGroup = Graph.getActions(graph, arg.id);
+          acc.groupedActions[arg.id] = actionGroup;
+        }
+        return acc;
+      },
+      { actions: [], groupedActions: {} },
+    );
+  }, [actions]);
 };