@dxos/plugin-navtree 0.6.13 → 0.6.14-main.69511f5

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

@@ -1,7 +1,7 @@
 import { type Action, type Node, type NodeFilter, type Graph } from '@dxos/app-graph';
-import { type NavTreeItemNode, type NavTreeItemNodeProperties, type OpenItemIds } from '@dxos/react-ui-navtree';
 import { type MaybePromise } from '@dxos/util';
-export type NavTreeItemGraphNode = Node<any, NavTreeItemNodeProperties & Partial<{
+import { type NodeProperties, type NavTreeItem } from './types';
+export type NavTreeItemGraphNode = Node<any, Partial<NodeProperties & {
     persistenceClass: string;
     persistenceKey: string;
     acceptPersistenceClass: Set<string>;
@@ -11,22 +11,21 @@ export type NavTreeItemGraphNode = Node<any, NavTreeItemNodeProperties & Partial
     onTransferStart: (activeNode: NavTreeItemGraphNode, index?: number) => MaybePromise<void>;
     onTransferEnd: (activeNode: NavTreeItemGraphNode, destinationParent: NavTreeItemGraphNode) => MaybePromise<void>;
 }>>;
-export type NavTreeItem = NavTreeItemNode<NavTreeItemGraphNode>;
 export declare const getParent: (graph: Graph, node: NavTreeItemGraphNode, path: string[]) => NavTreeItemGraphNode | undefined;
 export declare const getPersistenceParent: (graph: Graph, node: NavTreeItemGraphNode, path: string[], persistenceClass: string) => NavTreeItemGraphNode | null;
 export declare const resolveMigrationOperation: (graph: Graph, activeNode: NavTreeItemGraphNode, destinationPath: string[], destinationRelatedNode?: NavTreeItemGraphNode) => "transfer" | "copy" | "reject";
 export declare const sortActions: (actions: Action[]) => Action[];
-export declare const getTreeItemNode: (treeItems: NavTreeItemNode[], path?: string[]) => NavTreeItemNode | undefined;
-export declare const getChildren: (graph: Graph, node: NavTreeItemGraphNode, filter?: NodeFilter, path?: string[]) => NavTreeItemGraphNode[];
-type FlattenedActions = Required<Pick<NavTreeItemNode, 'actions' | 'groupedActions'>>;
-export declare const getActions: (graph: Graph, node: NavTreeItemGraphNode) => FlattenedActions;
+export declare const getTreeItemNode: (treeItems: NavTreeItem[], path?: string[]) => NavTreeItem | undefined;
+export declare const getChildren: (graph: Graph, node: NavTreeItemGraphNode, filter?: NodeFilter, path?: readonly string[]) => NavTreeItemGraphNode[];
+type FlattenedActions = Required<Pick<NavTreeItem, 'actions' | 'groupedActions'>>;
+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]>;
 /**
  * Get a reactive tree node from a graph node.
  */
-export declare const treeItemsFromRootNode: (graph: Graph, rootNode: NavTreeItemGraphNode, openItemIds: OpenItemIds, path?: string[], filter?: NodeFilter) => NavTreeItem[];
-export declare const expandOpenGraphNodes: (graph: Graph, openItemIds: OpenItemIds) => Promise<[void, [void, void]][]>;
+export declare const treeItemsFromRootNode: (graph: Graph, rootNode: NavTreeItemGraphNode, open: string[], getItem: (node: NavTreeItemGraphNode, parent: readonly string[]) => NavTreeItem, path?: readonly string[], filter?: NodeFilter) => NavTreeItem[];
+export declare const expandOpenGraphNodes: (graph: Graph, open: string[]) => Promise<[void, [void, void]][]>;
 export {};
 //# sourceMappingURL=util.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,UAAU,EACf,KAAK,KAAK,EAIX,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,yBAAyB,EAC9B,KAAK,WAAW,EACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,YAAY,CAAC;AAE5D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,GAAG,EACH,yBAAyB,GACvB,OAAO,CAAC;IACN,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpC,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,mBAAmB,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/E,MAAM,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACjF,eAAe,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1F,aAAa,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,oBAAoB,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAClH,CAAC,CACL,CAAC;AACF,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,oBAAoB,CAAC,CAAC;AAEhE,eAAO,MAAM,SAAS,UACb,KAAK,QACN,oBAAoB,QACpB,MAAM,EAAE,KACb,oBAAoB,GAAG,SAGzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,UACxB,KAAK,QACN,oBAAoB,QACpB,MAAM,EAAE,oBACI,MAAM,KACvB,oBAAoB,GAAG,IAOzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC7B,KAAK,cACA,oBAAoB,mBACf,MAAM,EAAE,2BACA,oBAAoB,KAC5C,UAAU,GAAG,MAAM,GAAG,QAsBxB,CAAC;AAGF,eAAO,MAAM,WAAW,YAAa,MAAM,EAAE,KAAG,MAAM,EAWlD,CAAC;AAEL,eAAO,MAAM,eAAe,cAAe,eAAe,EAAE,SAAS,MAAM,EAAE,KAAG,eAAe,GAAG,SAQjG,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,KAAK,QACN,oBAAoB,WACjB,UAAU,SACb,MAAM,EAAE,KACb,oBAAoB,EAStB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC;AAEtF,eAAO,MAAM,UAAU,UAAW,KAAK,QAAQ,oBAAoB,KAAG,gBAYrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,KAAK,QAAQ,IAAI,kCAEhE,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,KAAK,QAAQ,IAAI,kBAEtD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,KAAK,QAAQ,IAAI,0BAErD,CAAC;AAmDF;;GAEG;AACH,eAAO,MAAM,qBAAqB,UACzB,KAAK,YACF,oBAAoB,eACjB,WAAW,SAClB,MAAM,EAAE,WACL,UAAU,KAClB,WAAW,EAEb,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,KAAK,eAAe,WAAW,oCAS1E,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,MAAM,EACX,KAAK,IAAI,EACT,KAAK,UAAU,EACf,KAAK,KAAK,EAIX,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,KAAK,YAAY,EAAe,MAAM,YAAY,CAAC;AAE5D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAEhE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,GAAG,EACH,OAAO,CACL,cAAc,GAAG;IACf,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACpC,oBAAoB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAClC,mBAAmB,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/E,MAAM,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IACjF,eAAe,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1F,aAAa,EAAE,CAAC,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,oBAAoB,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAClH,CACF,CACF,CAAC;AAEF,eAAO,MAAM,SAAS,UACb,KAAK,QACN,oBAAoB,QACpB,MAAM,EAAE,KACb,oBAAoB,GAAG,SAGzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,UACxB,KAAK,QACN,oBAAoB,QACpB,MAAM,EAAE,oBACI,MAAM,KACvB,oBAAoB,GAAG,IAOzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,UAC7B,KAAK,cACA,oBAAoB,mBACf,MAAM,EAAE,2BACA,oBAAoB,KAC5C,UAAU,GAAG,MAAM,GAAG,QAsBxB,CAAC;AAGF,eAAO,MAAM,WAAW,YAAa,MAAM,EAAE,KAAG,MAAM,EAWlD,CAAC;AAEL,eAAO,MAAM,eAAe,cAAe,WAAW,EAAE,SAAS,MAAM,EAAE,KAAG,WAAW,GAAG,SAQzF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,KAAK,QACN,oBAAoB,WACjB,UAAU,SACb,SAAS,MAAM,EAAE,KACtB,oBAAoB,EAStB,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,gBAAgB,CAAC,CAAC,CAAC;AAElF,eAAO,MAAM,UAAU,UAAW,KAAK,QAAQ,IAAI,KAAG,gBAgBrD,CAAC;AAEF,eAAO,MAAM,wBAAwB,UAAW,KAAK,QAAQ,IAAI,kCAEhE,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,KAAK,QAAQ,IAAI,kBAEtD,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,KAAK,QAAQ,IAAI,0BAErD,CAAC;AAwCF;;GAEG;AACH,eAAO,MAAM,qBAAqB,UACzB,KAAK,YACF,oBAAoB,QACxB,MAAM,EAAE,WACL,CAAC,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,SAAS,MAAM,EAAE,KAAK,WAAW,SACxE,SAAS,MAAM,EAAE,WACf,UAAU,KAClB,WAAW,EAEb,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAAW,KAAK,QAAQ,MAAM,EAAE,oCAShE,CAAC"}

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.6.13",
+  "version": "0.6.14-main.69511f5",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
     },
     "./meta": {
-      "browser": "./dist/lib/browser/meta.mjs",
-      "types": "./dist/types/src/meta.d.ts"
+      "types": "./dist/types/src/meta.d.ts",
+      "browser": "./dist/lib/browser/meta.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -29,27 +30,31 @@
     "src"
   ],
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@preact/signals-core": "^1.6.0",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-graph": "0.6.13",
-    "@dxos/app-framework": "0.6.13",
-    "@dxos/debug": "0.6.13",
-    "@dxos/async": "0.6.13",
-    "@dxos/echo-schema": "0.6.13",
-    "@dxos/keyboard": "0.6.13",
-    "@dxos/local-storage": "0.6.13",
-    "@dxos/log": "0.6.13",
-    "@dxos/plugin-client": "0.6.13",
-    "@dxos/plugin-graph": "0.6.13",
-    "@dxos/plugin-observability": "0.6.13",
-    "@dxos/plugin-theme": "0.6.13",
-    "@dxos/protocols": "0.6.13",
-    "@dxos/react-ui-deck": "0.6.13",
-    "@dxos/react-ui-mosaic": "0.6.13",
-    "@dxos/react-client": "0.6.13",
-    "@dxos/react-ui-navtree": "0.6.13",
-    "@dxos/util": "0.6.13",
-    "@dxos/react-ui-searchlist": "0.6.13"
+    "@dxos/app-graph": "0.6.14-main.69511f5",
+    "@dxos/app-framework": "0.6.14-main.69511f5",
+    "@dxos/async": "0.6.14-main.69511f5",
+    "@dxos/echo-schema": "0.6.14-main.69511f5",
+    "@dxos/invariant": "0.6.14-main.69511f5",
+    "@dxos/keyboard": "0.6.14-main.69511f5",
+    "@dxos/debug": "0.6.14-main.69511f5",
+    "@dxos/log": "0.6.14-main.69511f5",
+    "@dxos/local-storage": "0.6.14-main.69511f5",
+    "@dxos/plugin-graph": "0.6.14-main.69511f5",
+    "@dxos/plugin-client": "0.6.14-main.69511f5",
+    "@dxos/plugin-observability": "0.6.14-main.69511f5",
+    "@dxos/plugin-theme": "0.6.14-main.69511f5",
+    "@dxos/protocols": "0.6.14-main.69511f5",
+    "@dxos/react-client": "0.6.14-main.69511f5",
+    "@dxos/react-ui-deck": "0.6.14-main.69511f5",
+    "@dxos/react-ui-list": "0.6.14-main.69511f5",
+    "@dxos/react-ui-mosaic": "0.6.14-main.69511f5",
+    "@dxos/react-ui-searchlist": "0.6.14-main.69511f5",
+    "@dxos/util": "0.6.14-main.69511f5"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -57,19 +62,19 @@
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-signals": "0.6.13",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/storybook-utils": "0.6.13"
+    "vite": "5.4.7",
+    "@dxos/echo-signals": "0.6.14-main.69511f5",
+    "@dxos/random": "0.6.14-main.69511f5",
+    "@dxos/react-ui": "0.6.14-main.69511f5",
+    "@dxos/react-ui-theme": "0.6.14-main.69511f5",
+    "@dxos/storybook-utils": "0.6.14-main.69511f5"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13"
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.14-main.69511f5",
+    "@dxos/react-ui-theme": "0.6.14-main.69511f5"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { MagnifyingGlass, type IconProps } from '@phosphor-icons/react';
 import React from 'react';
 
 import {
@@ -20,11 +19,11 @@ import {
   parseGraphPlugin,
   NavigationAction,
 } from '@dxos/app-framework';
-import { createExtension, type Graph, isAction, isGraphNode, type Node } from '@dxos/app-graph';
+import { createExtension, type Graph, isAction, isGraphNode, type Node, type NodeFilter } from '@dxos/app-graph';
+import { invariant } from '@dxos/invariant';
 import { Keyboard } from '@dxos/keyboard';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { Path } from '@dxos/react-ui-mosaic';
-import { type OpenItemIds } from '@dxos/react-ui-navtree';
 import { getHostPlatform } from '@dxos/util';
 
 import {
@@ -38,7 +37,14 @@ import {
 import { CommandsTrigger } from './components/CommandsTrigger';
 import meta, { KEY_BINDING, NAVTREE_PLUGIN } from './meta';
 import translations from './translations';
-import { expandOpenGraphNodes, getActions, getChildren, type NavTreeItem, type NavTreeItemGraphNode } from './util';
+import { type NavTreeItem } from './types';
+import {
+  expandOpenGraphNodes,
+  getActions,
+  getChildren,
+  treeItemsFromRootNode,
+  type NavTreeItemGraphNode,
+} from './util';
 
 export type NavTreePluginProvides = SurfaceProvides &
   MetadataRecordsProvides &
@@ -46,22 +52,77 @@ export type NavTreePluginProvides = SurfaceProvides &
   TranslationsProvides &
   IntentResolverProvides;
 
-type NavTreeState = { root?: NavTreeItemGraphNode; openItemIds: OpenItemIds };
+type NavTreeState = {
+  root?: NavTreeItemGraphNode;
+  flatTree: NavTreeItem[];
+  open: string[];
+};
 
 export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
+  let graphPlugin: Plugin<GraphProvides> | undefined;
+  let graph: Graph | undefined;
+  const itemCache = new Map<string, NavTreeItem>();
+
   const state = new LocalStorageStore<NavTreeState>('dxos.org/settings/navtree', {
+    root: undefined,
+    get flatTree() {
+      if (!this.root || !graph) {
+        return [];
+      }
+
+      return treeItemsFromRootNode(graph, this.root, this.open, getItem);
+    },
     // TODO(thure): Do this dynamically.
-    openItemIds: { root: true, 'dxos.org/plugin/space-spaces': true, 'dxos.org/plugin/files': true },
+    open: ['root', 'root~dxos.org/plugin/space-spaces', 'root~dxos.org/plugin/files'],
   });
 
-  let graphPlugin: Plugin<GraphProvides> | undefined;
-  let graph: Graph | undefined;
+  const getItem = (node: NavTreeItemGraphNode, parent: readonly string[], filter?: NodeFilter) => {
+    invariant(graph);
+    const path = [...parent, node.id];
+    const { actions, groupedActions } = getActions(graph, node);
+    const children = getChildren(graph, node, filter, path);
+    const parentOf =
+      children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
+    const item = {
+      id: node.id,
+      label: node.properties.label ?? node.id,
+      icon: node.properties.icon,
+      disabled: node.properties.disabled,
+      testId: node.properties.testId,
+      className: node.properties.className,
+      headingClassName: node.properties.headingClassName,
+      path,
+      parentOf,
+      node,
+      actions,
+      groupedActions,
+    } satisfies NavTreeItem;
 
-  const handleOpenItemIdsChange = (nextOpenItemIds: OpenItemIds) => {
+    const cachedItem = itemCache.get(node.id);
+    // TODO(wittjosiah): This is not a good enough check.
+    //   Consider better ways to doing reactive transformations which retain referential equality.
+    if (cachedItem && JSON.stringify(item) === JSON.stringify(cachedItem)) {
+      return cachedItem;
+    } else {
+      itemCache.set(node.id, item);
+      return item;
+    }
+  };
+
+  const handleOpenChange = (item: NavTreeItem, open: boolean) => {
+    const path = Path.create(...item.path);
     // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
-    state.values.openItemIds = nextOpenItemIds;
+    if (open) {
+      state.values.open.push(path);
+    } else {
+      const index = state.values.open.indexOf(path);
+      if (index > -1) {
+        state.values.open.splice(index, 1);
+      }
+    }
+
     if (graph) {
-      void expandOpenGraphNodes(graph, nextOpenItemIds);
+      void expandOpenGraphNodes(graph, state.values.open);
     }
   };
 
@@ -78,9 +139,9 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
       getChildren(graph, state.values.root);
       getActions(graph, state.values.root);
 
-      state.prop({ key: 'openItemIds', storageKey: 'openItemIds', type: LocalStorageStore.json<OpenItemIds>() });
+      state.prop({ key: 'open', type: LocalStorageStore.json<string[]>() });
 
-      void expandOpenGraphNodes(graph, state.values.openItemIds);
+      void expandOpenGraphNodes(graph, state.values.open);
 
       // TODO(wittjosiah): Factor out.
       // TODO(wittjosiah): Handle removal of actions.
@@ -148,19 +209,15 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
 
           switch (role) {
             case 'navigation':
-              if (state.values.root && state.values.openItemIds) {
-                return (
-                  <NavTreeContainer
-                    root={state.values.root}
-                    activeIds={data.activeIds as Set<string>}
-                    openItemIds={state.values.openItemIds}
-                    onOpenItemIdsChange={handleOpenItemIdsChange}
-                    attended={data.attended as Set<string>}
-                    popoverAnchorId={data.popoverAnchorId as string}
-                  />
-                );
-              }
-              break;
+              return (
+                <NavTreeContainer
+                  items={state.values.flatTree}
+                  current={data.activeIds as string[]}
+                  open={state.values.open}
+                  onOpenChange={handleOpenChange}
+                  popoverAnchorId={data.popoverAnchorId as string}
+                />
+              );
 
             case 'document-title': {
               return <NavTreeDocumentTitle node={isGraphNode(data.activeNode) ? data.activeNode : undefined} />;
@@ -201,17 +258,14 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
               if (graph && intent.data?.id) {
                 const path = graph.getPath({ target: intent.data.id });
                 if (Array.isArray(path)) {
-                  const additionalOpenItems = [...Array(path.length - 1)].reduce((acc: OpenItemIds, _, index) => {
-                    const itemId = Path.create(...path.slice(1, index + 1));
+                  const additionalOpenItems = [...Array(path.length)].reduce((acc: string[], _, index) => {
+                    const itemId = Path.create(...path.slice(0, index));
                     if (itemId.length > 0) {
-                      acc[itemId] = true;
+                      acc.push(itemId);
                     }
                     return acc;
-                  }, {});
-                  state.values.openItemIds = {
-                    ...additionalOpenItems,
-                    ...state.values.openItemIds,
-                  };
+                  }, []);
+                  state.values.open.push(...additionalOpenItems);
                 }
               }
               break;
@@ -243,8 +297,7 @@ export const NavTreePlugin = (): PluginDefinition<NavTreePluginProvides> => {
                   },
                   properties: {
                     label: ['open commands label', { ns: NAVTREE_PLUGIN }],
-                    icon: (props: IconProps) => <MagnifyingGlass {...props} />,
-                    iconSymbol: 'ph--magnifying-glass--regular',
+                    icon: 'ph--magnifying-glass--regular',
                     keyBinding: {
                       macos: 'meta+k',
                       windows: 'ctrl+k',

package/src/components/CommandsDialog.tsx

@@ -2,14 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DotOutline } from '@phosphor-icons/react';
 import React, { useMemo, useState } from 'react';
 
 import { useIntentDispatcher, LayoutAction } from '@dxos/app-framework';
 import { type ActionLike, isActionGroup, isAction } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { useGraph } from '@dxos/plugin-graph';
-import { Button, Dialog, useTranslation, toLocalizedString } from '@dxos/react-ui';
+import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
@@ -70,7 +69,6 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
               typeof action.properties.keyBinding === 'string'
                 ? action.properties.keyBinding
                 : action.properties.keyBinding?.[getHostPlatform()];
-            const Icon = action.properties.icon ?? DotOutline;
             return (
               <SearchList.Item
                 value={label}
@@ -95,7 +93,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                 disabled={action.properties.disabled}
                 {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
               >
-                <Icon size={4} className={mx(!action.properties.icon && 'invisible')} />
+                <Icon icon={action.properties.icon} size={4} />
                 <span className='grow truncate'>{label}</span>
                 {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
               </SearchList.Item>

package/src/components/HaloButton.stories.tsx

@@ -4,16 +4,18 @@
 
 import '@dxos-theme';
 
+import { type Meta } from '@storybook/react';
 import React from 'react';
 
 import { HaloButton } from './HaloButton';
 
-export default {
-  title: 'plugin-navtree/HaloButton',
-  component: HaloButton,
-  actions: { argTypesRegex: '^on.*' },
+export const Default = (props: any) => {
+  return <HaloButton {...props} />;
 };
 
-export const Normal = (props: any) => {
-  return <HaloButton {...props} />;
+const meta: Meta<typeof HaloButton> = {
+  title: 'plugins/plugin-navtree/HaloButton',
+  component: HaloButton,
 };
+
+export default meta;

package/src/components/NavBarStart.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DotsThreeVertical } from '@phosphor-icons/react';
 import React, { Fragment } from 'react';
 
 import { getGraph, type Node } from '@dxos/app-graph';
@@ -22,7 +21,6 @@ export const NavBarStart = ({ activeNode, popoverAnchorId }: { activeNode: Node;
       ? Popover.Anchor
       : Fragment;
 
-  const Icon = activeNode.properties?.icon ?? DotsThreeVertical;
   const graph = getGraph(activeNode);
   const actions = graph.actions(activeNode);
   const label = toLocalizedString(activeNode.properties?.label, t);
@@ -33,10 +31,10 @@ export const NavBarStart = ({ activeNode, popoverAnchorId }: { activeNode: Node;
     <>
       <ActionRoot>
         <PlankHeading.ActionsMenu
-          Icon={Icon}
+          icon={activeNode.properties?.icon ?? 'ph--dots-three-vertical--regular'}
           attendableId={activeNode.id}
           triggerLabel={menuTriggerLabel}
-          actions={actions}
+          actions={[actions]}
           onAction={(action) =>
             typeof action.data === 'function' && action.data({ node: action as Node, caller: TREE_ITEM_MAIN_HEADING })
           }

package/src/components/NavTree.stories.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+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 Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
+
+import { type NodeArg } from '@dxos/app-graph';
+import { create } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { isItem } from '@dxos/react-ui-list';
+import { Path } from '@dxos/react-ui-mosaic';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { NavTree, type NavTreeProps } from './NavTree';
+import { createTree, flattenTree, updateState } from '../testing';
+import { type NavTreeItem } from '../types';
+
+faker.seed(1234);
+
+type State = {
+  tree: NodeArg<any>;
+  flatTree: NavTreeItem[];
+  open: string[];
+  current: string[];
+};
+
+const state = create<State>({
+  tree: createTree(),
+  get flatTree() {
+    return flattenTree(this.tree, this.open);
+  },
+  open: [],
+  current: [],
+});
+
+const Story = (args: Partial<NavTreeProps>) => {
+  // NOTE: If passed directly to args, this won't be reactive.
+  const items = state.flatTree;
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        // Didn't drop on anything.
+        if (!location.current.dropTargets.length) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null) {
+          updateState({
+            state: state.tree,
+            instruction,
+            source: source.data as NavTreeItem,
+            target: target.data as NavTreeItem,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return <NavTree items={items} open={state.open} current={state.current} {...args} />;
+};
+
+const meta: Meta<typeof NavTree> = {
+  title: 'plugins/plugin-navtree/NavTree',
+  component: NavTree,
+  render: Story,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  args: {
+    onOpenChange: (item: NavTreeItem, open: boolean) => {
+      const path = Path.create(...item.path);
+      if (open) {
+        state.open.push(path);
+      } else {
+        const index = state.open.indexOf(path);
+        if (index > -1) {
+          state.open.splice(index, 1);
+        }
+      }
+    },
+    onSelect: (item: NavTreeItem, current: boolean) => {
+      if (current) {
+        state.current.push(item.id);
+      } else {
+        const index = state.current.indexOf(item.id);
+        if (index > -1) {
+          state.current.splice(index, 1);
+        }
+      }
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {};