@dxos/plugin-navtree 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.5acf9ea",
+  "version": "0.8.4-main.5ea62a8",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,9 +10,9 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "source": "./src/index.ts"
+      "browser": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -31,49 +31,49 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "effect": "3.17.0",
-    "@dxos/app-framework": "0.8.4-main.5acf9ea",
-    "@dxos/app-graph": "0.8.4-main.5acf9ea",
-    "@dxos/async": "0.8.4-main.5acf9ea",
-    "@dxos/debug": "0.8.4-main.5acf9ea",
-    "@dxos/echo": "0.8.4-main.5acf9ea",
-    "@dxos/echo-schema": "0.8.4-main.5acf9ea",
-    "@dxos/invariant": "0.8.4-main.5acf9ea",
-    "@dxos/keyboard": "0.8.4-main.5acf9ea",
-    "@dxos/live-object": "0.8.4-main.5acf9ea",
-    "@dxos/local-storage": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-deck": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-graph": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-observability": "0.8.4-main.5acf9ea",
-    "@dxos/protocols": "0.8.4-main.5acf9ea",
-    "@dxos/react-client": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-attention": "0.8.4-main.5acf9ea",
-    "@dxos/log": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-list": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-searchlist": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-menu": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-stack": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-tabs": "0.8.4-main.5acf9ea",
-    "@dxos/util": "0.8.4-main.5acf9ea"
+    "effect": "3.17.7",
+    "@dxos/app-graph": "0.8.4-main.5ea62a8",
+    "@dxos/app-framework": "0.8.4-main.5ea62a8",
+    "@dxos/async": "0.8.4-main.5ea62a8",
+    "@dxos/echo": "0.8.4-main.5ea62a8",
+    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
+    "@dxos/debug": "0.8.4-main.5ea62a8",
+    "@dxos/invariant": "0.8.4-main.5ea62a8",
+    "@dxos/keyboard": "0.8.4-main.5ea62a8",
+    "@dxos/live-object": "0.8.4-main.5ea62a8",
+    "@dxos/local-storage": "0.8.4-main.5ea62a8",
+    "@dxos/log": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-deck": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-graph": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-observability": "0.8.4-main.5ea62a8",
+    "@dxos/protocols": "0.8.4-main.5ea62a8",
+    "@dxos/react-client": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-attention": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-list": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-menu": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-stack": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-searchlist": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-tabs": "0.8.4-main.5ea62a8",
+    "@dxos/util": "0.8.4-main.5ea62a8"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-signals": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-attention": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-space": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-client": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-storybook-layout": "0.8.4-main.5acf9ea",
-    "@dxos/plugin-theme": "0.8.4-main.5acf9ea",
-    "@dxos/random": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea",
-    "@dxos/storybook-utils": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui": "0.8.4-main.5acf9ea"
+    "vite": "7.1.1",
+    "@dxos/echo-signals": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-attention": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-client": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-space": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-storybook-layout": "0.8.4-main.5ea62a8",
+    "@dxos/plugin-theme": "0.8.4-main.5ea62a8",
+    "@dxos/random": "0.8.4-main.5ea62a8",
+    "@dxos/storybook-utils": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui": "0.8.4-main.5ea62a8"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -81,8 +81,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea"
+    "@dxos/react-ui": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -3,14 +3,14 @@
 //
 
 import {
-  definePlugin,
-  defineModule,
-  Events,
-  contributes,
   Capabilities,
+  Events,
+  LayoutAction,
   allOf,
+  contributes,
   createIntent,
-  LayoutAction,
+  defineModule,
+  definePlugin,
 } from '@dxos/app-framework';
 import { type TreeData } from '@dxos/react-ui-list';
 

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

@@ -5,8 +5,8 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { Capabilities, contributes, type PluginContext, createIntent, LayoutAction } from '@dxos/app-framework';
-import { createExtension, ROOT_ID } from '@dxos/plugin-graph';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import { ROOT_ID, createExtension } from '@dxos/plugin-graph';
 
 import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
 

package/src/capabilities/intent-resolver.ts

@@ -4,7 +4,7 @@
 
 import { Schema } from 'effect';
 
-import { contributes, type PluginContext, Capabilities, createResolver, LayoutAction } from '@dxos/app-framework';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 
 import { NavTreeCapabilities } from './capabilities';

package/src/capabilities/keyboard.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities as AppCapabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities as AppCapabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
 import { Keyboard } from '@dxos/keyboard';
-import { isAction, type Node } from '@dxos/plugin-graph';
+import { type Node, isAction } from '@dxos/plugin-graph';
 import { getHostPlatform } from '@dxos/util';
 
 import { KEY_BINDING } from '../meta';

package/src/capabilities/react-surface.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { isGraphNode } from '@dxos/plugin-graph';
 
-import { CommandsDialogContent, CommandsTrigger, NavTreeDocumentTitle, NavTreeContainer } from '../components';
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../components';
 import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
 
 export default () =>

package/src/capabilities/state.ts

@@ -4,14 +4,15 @@
 
 import { effect, untracked } from '@preact/signals-core';
 
-import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { type Live } from '@dxos/echo';
 import { live } from '@dxos/live-object';
 import { Path } from '@dxos/react-ui-list';
 
-import { NavTreeCapabilities } from './capabilities';
 import { NAVTREE_PLUGIN } from '../meta';
 
+import { NavTreeCapabilities } from './capabilities';
+
 const KEY = `${NAVTREE_PLUGIN}/state/v1`;
 
 const getInitialState = () => {

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -4,11 +4,11 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { useActions } from '@dxos/plugin-graph';
-import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import {
   cardDialogContent,

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
 import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React from 'react';
 
@@ -28,7 +28,7 @@ import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { useAttentionAttributes, useAttention } from '@dxos/react-ui-attention';
+import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
 import { defaultTx, mx } from '@dxos/react-ui-theme';
 import { withLayout } from '@dxos/storybook-utils';
@@ -116,7 +116,7 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof NavTreeContainer> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTree',
   component: NavTreeContainer,
   render: DefaultStory,
@@ -152,7 +152,7 @@ const meta: Meta<typeof NavTreeContainer> = {
   parameters: {
     translations,
   },
-};
+} satisfies Meta<typeof NavTreeContainer>;
 
 export default meta;
 
@@ -172,7 +172,7 @@ export const WithClient: Story = {
         AttentionPlugin(),
         NavTreePlugin(),
         ClientPlugin({
-          onClientInitialized: async (_, client) => {
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),

package/src/components/NavTreeContainer.tsx

@@ -3,34 +3,35 @@
 //
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { untracked } from '@preact/signals-core';
 import React, { memo, useCallback, useEffect, useMemo } from 'react';
 
 import {
-  createIntent,
   LayoutAction,
   Surface,
+  createIntent,
   useAppGraph,
   useCapability,
   useIntentDispatcher,
   useLayout,
 } from '@dxos/app-framework';
-import { isAction, isActionLike, ROOT_ID, type Node, type ReadableGraph } from '@dxos/app-graph';
+import { type Node, ROOT_ID, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { useConnections } from '@dxos/plugin-graph';
+import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
 import { useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { isTreeData, type TreeItemDataProps, type TreeData } from '@dxos/react-ui-list';
+import { type TreeData, type TreeItemDataProps, isTreeData } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove, byPosition } from '@dxos/util';
 
+import { NavTreeCapabilities } from '../capabilities';
+import { NAVTREE_PLUGIN } from '../meta';
+import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
+import { getChildren, getParent, resolveMigrationOperation } from '../util';
+
 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 { getChildren, getParent, getActions as naturalGetActions, resolveMigrationOperation } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
@@ -40,7 +41,9 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 );
 
 const getChildrenFilter = (node: Node): node is Node =>
-  untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
+  untracked(
+    () => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== 'hidden',
+  );
 
 const filterItems = (node: Node, disposition?: string) => {
   if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
@@ -64,6 +67,31 @@ const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean
   return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 
+const useActions = (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 (!isAction(arg)) {
+            const actionGroup = graph.getActions(arg.id);
+            acc.groupedActions[arg.id] = actionGroup;
+          }
+          return acc;
+        },
+        { actions: [], groupedActions: {} },
+      ),
+    [actions],
+  );
+};
+
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
@@ -77,8 +105,6 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const layout = useLayout();
   const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
 
-  const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
-
   const getProps = useCallback(
     (node: Node, path: string[]): TreeItemDataProps => {
       const children = getChildren(graph, node, path).filter(getChildrenFilter);
@@ -269,7 +295,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     () => ({
       useItems,
       tab,
-      getActions,
+      useActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
@@ -287,7 +313,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     }),
     [
       tab,
-      getActions,
+      useActions,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,

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

@@ -39,7 +39,7 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-const meta: Meta<typeof NavTreeItemAction> = {
+const meta = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
   decorators: [withTheme, withLayout()],
@@ -52,7 +52,7 @@ const meta: Meta<typeof NavTreeItemAction> = {
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof NavTreeItemAction>;
 
 export default meta;
 

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -5,8 +5,8 @@
 import React from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
-import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
-import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
+import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
 
 import { NAVTREE_PLUGIN } from '../../meta';

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -5,21 +5,22 @@
 import React, { Fragment, memo } from 'react';
 
 import { isAction } from '@dxos/app-graph';
-import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { DensityProvider, Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { NavTreeItemAction } from './NavTreeItemAction';
 import { useLoadDescendents } from '../../hooks';
 import { NAVTREE_PLUGIN } from '../../meta';
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { type NavTreeItemColumnsProps } from '../types';
 
+import { NavTreeItemAction } from './NavTreeItemAction';
+
 export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+  const { useActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-  const { actions: _actions, groupedActions } = getActions(item);
+  const { actions: _actions, groupedActions } = useActions(item);
   const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
     a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );

package/src/components/Sidebar/L0Menu.tsx

@@ -12,9 +12,9 @@ import {
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import React, {
-  forwardRef,
   type MouseEvent,
   type PropsWithChildren,
+  forwardRef,
   useCallback,
   useLayoutEffect,
   useMemo,
@@ -25,7 +25,7 @@ import React, {
 import { type Node } from '@dxos/app-graph';
 import { invariant } from '@dxos/invariant';
 import { Icon, ListItem, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { MenuProvider, DropdownMenu, type MenuItem } from '@dxos/react-ui-menu';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';

package/src/components/Sidebar/L1Panel.tsx

@@ -123,31 +123,29 @@ const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
     <div className='flex is-full items-center border-be border-subduedSeparator app-drag density-coarse'>
       <div className='is-6' />
       <h2 className='flex-1 truncate min-is-0'>{title}</h2>
-      <div>
-        {(backCapable && (
+      {(backCapable && (
+        <IconButton
+          variant='ghost'
+          icon='ph--arrow-u-down-left--regular'
+          iconOnly
+          size={5}
+          label={t('button back')}
+          classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+          onClick={handleBack}
+        />
+      )) ||
+        (alternateTree && !isAlternate && (
           <IconButton
+            data-testid='treeView.alternateTreeButton'
             variant='ghost'
-            icon='ph--arrow-u-down-left--regular'
+            icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
             iconOnly
             size={5}
-            label={t('button back')}
+            label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
             classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-            onClick={handleBack}
+            onClick={handleOpen}
           />
-        )) ||
-          (alternateTree && !isAlternate && (
-            <IconButton
-              data-testid='treeView.alternateTreeButton'
-              variant='ghost'
-              icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
-              iconOnly
-              size={5}
-              label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
-              classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-              onClick={handleOpen}
-            />
-          )) || <div />}
-      </div>
+        ))}
       <NavTreeItemColumns open path={path} item={item} density='coarse' />
     </div>
   );

package/src/components/Sidebar/L1Tabs.tsx

@@ -9,6 +9,7 @@ import { type Node } from '@dxos/app-graph';
 import { useLoadDescendents } from '../../hooks';
 import { l0ItemType } from '../../util';
 import { useNavTreeContext } from '../NavTreeContext';
+
 import { L1Panel, type L1PanelProps } from './L1Panel';
 
 export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {

package/src/components/UserAccountAvatar/UserAccountAvatar.stories.tsx

@@ -4,18 +4,20 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/storybook-utils';
 
 import { UserAccountAvatar } from './UserAccountAvatar';
 
-const meta: Meta<typeof UserAccountAvatar> = {
+const meta = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
   component: UserAccountAvatar,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof UserAccountAvatar>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/types.ts

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

package/src/experimental/Tree.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
@@ -223,10 +223,12 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
   decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
-};
+} satisfies Meta<typeof Tree>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

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

@@ -7,7 +7,7 @@ import { Option, pipe } from 'effect';
 
 import { type PluginContext } from '@dxos/app-framework';
 import { log } from '@dxos/log';
-import { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
+import { type BuilderExtensions, ROOT_ID, createExtension } from '@dxos/plugin-graph';
 import { faker } from '@dxos/random';
 
 export const storybookGraphBuilders = (context: PluginContext): BuilderExtensions => {

package/src/util.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Action, type Node, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
+import { type Action, type Node, type ReadableGraph, isActionLike } from '@dxos/app-graph';
 import { isNonNullable } from '@dxos/util';
 
-import { type FlattenedActions, type NavTreeItemGraphNode } from './types';
+import { type NavTreeItemGraphNode } from './types';
 
 export const getParent = (
   graph: ReadableGraph,
@@ -88,24 +88,6 @@ export const getChildren = (
     .filter(isNonNullable) as NavTreeItemGraphNode[];
 };
 
-export const getActions = (graph: ReadableGraph, node: Node): FlattenedActions => {
-  return graph.getActions(node.id).reduce(
-    (acc: FlattenedActions, arg) => {
-      if (arg.properties.disposition === 'item') {
-        return acc;
-      }
-
-      acc.actions.push(arg);
-      if (!isAction(arg)) {
-        const actionGroup = graph.getActions(arg.id);
-        acc.groupedActions[arg.id] = actionGroup;
-      }
-      return acc;
-    },
-    { actions: [], groupedActions: {} },
-  );
-};
-
 export const l0ItemType = (item: Node<any>) => {
   if (item.properties.disposition === 'collection') {
     return 'collection';