@dxos/plugin-navtree 0.8.2-main.f11618f → 0.8.2-staging.42af850

package/dist/types/src/testing/index.d.ts

@@ -1,3 +1,4 @@
+export * from './app-graph-builder';
 export * from './generator';
 export * from './update-state';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}

package/dist/types/src/testing/update-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-state.d.ts","sourceRoot":"","sources":["../../../../src/testing/update-state.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEtF,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAmBpD,eAAO,MAAM,WAAW,4CAKrB;IACD,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACpB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,SAgCA,CAAC"}
+{"version":3,"file":"update-state.d.ts","sourceRoot":"","sources":["../../../../src/testing/update-state.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,oDAAoD,CAAC;AAEtF,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAmBpD,eAAO,MAAM,WAAW,GAAI,yCAKzB;IACD,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACpB,WAAW,EAAE,WAAW,CAAC;IACzB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB,SAgCA,CAAC"}

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

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

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

@@ -1,13 +1,10 @@
-import { type Action, type Node, type NodeFilter, type Graph } from '@dxos/app-graph';
+import { type Action, type Node, type ReadableGraph } from '@dxos/app-graph';
 import { type FlattenedActions, type NavTreeItemGraphNode } from './types';
-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 getParent: (graph: ReadableGraph, node: NavTreeItemGraphNode, path: string[]) => NavTreeItemGraphNode | undefined;
+export declare const getPersistenceParent: (graph: ReadableGraph, node: NavTreeItemGraphNode, path: string[], persistenceClass: string) => NavTreeItemGraphNode | null;
+export declare const resolveMigrationOperation: (graph: ReadableGraph, activeNode: NavTreeItemGraphNode, destinationPath: string[], destinationRelatedNode?: NavTreeItemGraphNode) => "transfer" | "copy" | "reject";
 export declare const sortActions: (actions: Action[]) => Action[];
-export declare const getChildren: (graph: Graph, node: NavTreeItemGraphNode, filter?: NodeFilter, path?: readonly string[]) => NavTreeItemGraphNode[];
-export declare const getActions: (graph: Graph, node: Node) => FlattenedActions;
-export declare const expandChildrenAndActions: (graph: Graph, node: Node) => Promise<[void, [void, void]]>;
-export declare const expandChildren: (graph: Graph, node: Node) => Promise<void>;
-export declare const expandActions: (graph: Graph, node: Node) => Promise<[void, void]>;
-export declare const l0ItemType: (item: Node<any>) => "link" | "tab" | "collection" | "action";
+export declare const getChildren: (graph: ReadableGraph, node: NavTreeItemGraphNode, path?: readonly string[]) => NavTreeItemGraphNode[];
+export declare const getActions: (graph: ReadableGraph, node: Node) => FlattenedActions;
+export declare const l0ItemType: (item: Node<any>) => "collection" | "action" | "link" | "tab";
 //# 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,EAKX,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE3E,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,WAAW,UACf,KAAK,QACN,oBAAoB,WACjB,UAAU,SACb,SAAS,MAAM,EAAE,KACtB,oBAAoB,EAStB,CAAC;AAEF,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;AAEF,eAAO,MAAM,UAAU,SAAU,IAAI,CAAC,GAAG,CAAC,6CAUzC,CAAC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,KAAK,aAAa,EAA0B,MAAM,iBAAiB,CAAC;AAGrG,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE3E,eAAO,MAAM,SAAS,GACpB,OAAO,aAAa,EACpB,MAAM,oBAAoB,EAC1B,MAAM,MAAM,EAAE,KACb,oBAAoB,GAAG,SAGzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,aAAa,EACpB,MAAM,oBAAoB,EAC1B,MAAM,MAAM,EAAE,EACd,kBAAkB,MAAM,KACvB,oBAAoB,GAAG,IAOzB,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,OAAO,aAAa,EACpB,YAAY,oBAAoB,EAChC,iBAAiB,MAAM,EAAE,EACzB,yBAAyB,oBAAoB,KAC5C,UAAU,GAAG,MAAM,GAAG,QAsBxB,CAAC;AAGF,eAAO,MAAM,WAAW,GAAI,SAAS,MAAM,EAAE,KAAG,MAAM,EAWlD,CAAC;AAEL,eAAO,MAAM,WAAW,GACtB,OAAO,aAAa,EACpB,MAAM,oBAAoB,EAC1B,OAAM,SAAS,MAAM,EAAO,KAC3B,oBAAoB,EAStB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,aAAa,EAAE,MAAM,IAAI,KAAG,gBAgB7D,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,IAAI,CAAC,GAAG,CAAC,6CAUzC,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.2-main.f11618f",
+  "version": "0.8.2-staging.42af850",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,53 +25,63 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@preact/signals-core": "^1.6.0",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
     "@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.2-main.f11618f",
-    "@dxos/app-graph": "0.8.2-main.f11618f",
-    "@dxos/async": "0.8.2-main.f11618f",
-    "@dxos/debug": "0.8.2-main.f11618f",
-    "@dxos/invariant": "0.8.2-main.f11618f",
-    "@dxos/keyboard": "0.8.2-main.f11618f",
-    "@dxos/echo-schema": "0.8.2-main.f11618f",
-    "@dxos/live-object": "0.8.2-main.f11618f",
-    "@dxos/log": "0.8.2-main.f11618f",
-    "@dxos/local-storage": "0.8.2-main.f11618f",
-    "@dxos/plugin-client": "0.8.2-main.f11618f",
-    "@dxos/plugin-deck": "0.8.2-main.f11618f",
-    "@dxos/plugin-graph": "0.8.2-main.f11618f",
-    "@dxos/plugin-observability": "0.8.2-main.f11618f",
-    "@dxos/protocols": "0.8.2-main.f11618f",
-    "@dxos/react-client": "0.8.2-main.f11618f",
-    "@dxos/react-ui-searchlist": "0.8.2-main.f11618f",
-    "@dxos/plugin-theme": "0.8.2-main.f11618f",
-    "@dxos/react-ui-list": "0.8.2-main.f11618f",
-    "@dxos/react-ui-stack": "0.8.2-main.f11618f",
-    "@dxos/react-ui-menu": "0.8.2-main.f11618f",
-    "@dxos/react-ui-tabs": "0.8.2-main.f11618f",
-    "@dxos/util": "0.8.2-main.f11618f"
+    "effect": "^3.13.3",
+    "@dxos/app-framework": "0.8.2-staging.42af850",
+    "@dxos/app-graph": "0.8.2-staging.42af850",
+    "@dxos/async": "0.8.2-staging.42af850",
+    "@dxos/debug": "0.8.2-staging.42af850",
+    "@dxos/echo": "0.8.2-staging.42af850",
+    "@dxos/echo-schema": "0.8.2-staging.42af850",
+    "@dxos/invariant": "0.8.2-staging.42af850",
+    "@dxos/live-object": "0.8.2-staging.42af850",
+    "@dxos/keyboard": "0.8.2-staging.42af850",
+    "@dxos/local-storage": "0.8.2-staging.42af850",
+    "@dxos/log": "0.8.2-staging.42af850",
+    "@dxos/plugin-deck": "0.8.2-staging.42af850",
+    "@dxos/plugin-observability": "0.8.2-staging.42af850",
+    "@dxos/protocols": "0.8.2-staging.42af850",
+    "@dxos/plugin-graph": "0.8.2-staging.42af850",
+    "@dxos/react-client": "0.8.2-staging.42af850",
+    "@dxos/react-ui-attention": "0.8.2-staging.42af850",
+    "@dxos/react-ui-menu": "0.8.2-staging.42af850",
+    "@dxos/react-ui-list": "0.8.2-staging.42af850",
+    "@dxos/react-ui-stack": "0.8.2-staging.42af850",
+    "@dxos/react-ui-searchlist": "0.8.2-staging.42af850",
+    "@dxos/react-ui-tabs": "0.8.2-staging.42af850",
+    "@dxos/util": "0.8.2-staging.42af850"
   },
   "devDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@phosphor-icons/react": "^2.1.5",
     "@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.2-main.f11618f",
-    "@dxos/random": "0.8.2-main.f11618f",
-    "@dxos/react-ui": "0.8.2-main.f11618f",
-    "@dxos/react-ui-theme": "0.8.2-main.f11618f",
-    "@dxos/storybook-utils": "0.8.2-main.f11618f"
+    "@dxos/plugin-attention": "0.8.2-staging.42af850",
+    "@dxos/echo-signals": "0.8.2-staging.42af850",
+    "@dxos/plugin-theme": "0.8.2-staging.42af850",
+    "@dxos/plugin-storybook-layout": "0.8.2-staging.42af850",
+    "@dxos/random": "0.8.2-staging.42af850",
+    "@dxos/react-ui": "0.8.2-staging.42af850",
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850",
+    "@dxos/storybook-utils": "0.8.2-staging.42af850"
   },
   "peerDependencies": {
+    "@effect-rx/rx-react": "^0.34.1",
+    "@effect/platform": "0.80.12",
     "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.2-main.f11618f",
-    "@dxos/react-ui": "0.8.2-main.f11618f"
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850",
+    "@dxos/react-ui": "0.8.2-staging.42af850"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -57,8 +57,8 @@ export const NavTreePlugin = () =>
       id: `${meta.id}/module/expose`,
       activatesOn: allOf(Events.DispatcherReady, Events.LayoutReady, NavTreeEvents.StateReady),
       activate: async (context) => {
-        const layout = context.requestCapability(Capabilities.Layout);
-        const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+        const layout = context.getCapability(Capabilities.Layout);
+        const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
         if (dispatch && layout.active.length === 1) {
           await dispatch(createIntent(LayoutAction.Expose, { part: 'navigation', subject: layout.active[0] }));
         }

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

@@ -2,41 +2,51 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext, createIntent, LayoutAction } from '@dxos/app-framework';
-import { createExtension, type Node } from '@dxos/plugin-graph';
+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 { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(
     Capabilities.AppGraphBuilder,
     createExtension({
       id: NAVTREE_PLUGIN,
-      filter: (node): node is Node<null> => node.id === 'root',
-      actions: () => [
-        {
-          id: COMMANDS_DIALOG,
-          data: async () => {
-            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-            await dispatch(
-              createIntent(LayoutAction.UpdateDialog, {
-                part: 'dialog',
-                subject: COMMANDS_DIALOG,
-                options: {
-                  blockAlign: 'start',
+      actions: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+            Option.map(() => [
+              {
+                id: COMMANDS_DIALOG,
+                data: async () => {
+                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+                  await dispatch(
+                    createIntent(LayoutAction.UpdateDialog, {
+                      part: 'dialog',
+                      subject: COMMANDS_DIALOG,
+                      options: {
+                        blockAlign: 'start',
+                      },
+                    }),
+                  );
+                },
+                properties: {
+                  label: ['open commands label', { ns: NAVTREE_PLUGIN }],
+                  icon: 'ph--magnifying-glass--regular',
+                  keyBinding: {
+                    macos: 'meta+k',
+                    windows: 'ctrl+k',
+                  },
                 },
-              }),
-            );
-          },
-          properties: {
-            label: ['open commands label', { ns: NAVTREE_PLUGIN }],
-            icon: 'ph--magnifying-glass--regular',
-            keyBinding: {
-              macos: 'meta+k',
-              windows: 'ctrl+k',
-            },
-          },
-        },
-      ],
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
   );

package/src/capabilities/intent-resolver.ts

@@ -2,22 +2,23 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginsContext, Capabilities, createResolver, LayoutAction } from '@dxos/app-framework';
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
+
+import { contributes, type PluginContext, Capabilities, createResolver, LayoutAction } from '@dxos/app-framework';
 import { log } from '@dxos/log';
 
 import { NavTreeCapabilities } from './capabilities';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(
     Capabilities.IntentResolver,
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Expose.fields.input> =>
-        S.is(LayoutAction.Expose.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Expose.fields.input> =>
+        Schema.is(LayoutAction.Expose.fields.input)(data),
       resolve: async ({ subject }) => {
-        const { graph } = context.requestCapability(Capabilities.AppGraph);
-        const { getItem, setItem } = context.requestCapability(NavTreeCapabilities.State);
+        const { graph } = context.getCapability(Capabilities.AppGraph);
+        const { getItem, setItem } = context.getCapability(NavTreeCapabilities.State);
 
         try {
           const path = await graph.waitForPath({ target: subject }, { timeout: 1_000 });

package/src/capabilities/keyboard.ts

@@ -2,46 +2,51 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities as AppCapabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities as AppCapabilities, contributes, type PluginContext } from '@dxos/app-framework';
+import { debounce } from '@dxos/async';
 import { Keyboard } from '@dxos/keyboard';
-import { isAction } from '@dxos/plugin-graph';
+import { isAction, type Node } from '@dxos/plugin-graph';
 import { getHostPlatform } from '@dxos/util';
 
 import { KEY_BINDING } from '../meta';
 
-export default (context: PluginsContext) => {
-  const { graph } = context.requestCapability(AppCapabilities.AppGraph);
+export default (context: PluginContext) => {
+  const { graph } = context.getCapability(AppCapabilities.AppGraph);
 
   // TODO(wittjosiah): Factor out.
   // TODO(wittjosiah): Handle removal of actions.
-  const unsubscribe = graph.subscribeTraverse({
-    visitor: (node, path) => {
-      let shortcut: string | undefined;
-      if (typeof node.properties.keyBinding === 'object') {
-        const availablePlatforms = Object.keys(node.properties.keyBinding);
-        const platform = getHostPlatform();
-        shortcut = availablePlatforms.includes(platform)
-          ? node.properties.keyBinding[platform]
-          : platform === 'ios'
-            ? node.properties.keyBinding.macos // Fallback to macos if ios-specific bindings not provided.
-            : platform === 'linux' || platform === 'unknown'
-              ? node.properties.keyBinding.windows // Fallback to windows if platform-specific bindings not provided.
-              : undefined;
-      } else {
-        shortcut = node.properties.keyBinding;
-      }
-
-      if (shortcut && isAction(node)) {
-        Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
-          shortcut,
-          handler: () => {
-            void node.data({ node, caller: KEY_BINDING });
-          },
-          data: node.properties.label,
-        });
-      }
-    },
-  });
+  const visitor = (node: Node, path: string[]) => {
+    let shortcut: string | undefined;
+    if (typeof node.properties.keyBinding === 'object') {
+      const availablePlatforms = Object.keys(node.properties.keyBinding);
+      const platform = getHostPlatform();
+      shortcut = availablePlatforms.includes(platform)
+        ? node.properties.keyBinding[platform]
+        : platform === 'ios'
+          ? node.properties.keyBinding.macos // Fallback to macos if ios-specific bindings not provided.
+          : platform === 'linux' || platform === 'unknown'
+            ? node.properties.keyBinding.windows // Fallback to windows if platform-specific bindings not provided.
+            : undefined;
+    } else {
+      shortcut = node.properties.keyBinding;
+    }
+
+    if (shortcut && isAction(node)) {
+      Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
+        shortcut,
+        handler: () => {
+          void node.data({ parent: node, caller: KEY_BINDING });
+        },
+        data: node.properties.label,
+      });
+    }
+  };
+
+  const eventHandler = debounce(() => {
+    graph.traverse({ visitor });
+  }, 500);
+
+  const unsubscribe = graph.onNodeChanged.on(eventHandler);
 
   // TODO(burdon): Create context and plugin.
   Keyboard.singleton.initialize();

package/src/capabilities/state.ts

@@ -4,7 +4,7 @@
 
 import { effect } from '@preact/signals-core';
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
 import { type Live, live } from '@dxos/live-object';
 import { Path } from '@dxos/react-ui-list';
 
@@ -33,8 +33,8 @@ const getInitialState = () => {
   } catch {}
 };
 
-export default (context: PluginsContext) => {
-  const layout = context.requestCapability(Capabilities.Layout);
+export default (context: PluginContext) => {
+  const layout = context.getCapability(Capabilities.Layout);
 
   // TODO(wittjosiah): This currently needs to be not a Live at the root.
   //   If it is a Live then React errors when initializing new paths because of state change during render.

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

@@ -5,14 +5,15 @@
 import React, { useMemo, useState } from 'react';
 
 import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type ActionLike, isActionGroup, isAction } from '@dxos/app-graph';
+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 { SearchList } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING, NAVTREE_PLUGIN } from '../meta';
+import { KEY_BINDING, NAVTREE_PLUGIN } from '../../meta';
 
 // TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
 export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
@@ -28,7 +29,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
     const current = Keyboard.singleton.getCurrentContext();
     const actionMap = new Set<string>();
     const actions: ActionLike[] = [];
-    graph?.traverse({
+    graph.traverse({
       visitor: (node, path) => {
         if (
           (isAction(node) || isActionGroup(node)) &&
@@ -47,12 +48,12 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
         .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
     });
 
-    // console.log(JSON.stringify(actions, undefined, 2));
     return actions;
   }, [graph]);
 
   const group = allActions.find(({ id }) => id === selected);
-  const actions = isActionGroup(group) ? graph.actions(group) : allActions;
+  const groupActions = useActions(graph, group?.id);
+  const actions = isActionGroup(group) ? groupActions : allActions;
 
   return (
     <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden mbs-12']}>
@@ -84,8 +85,8 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
 
                   void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
                   setTimeout(() => {
-                    const node = graph.nodes(group ?? action, { relation: 'inbound' })[0];
-                    void (node && isAction(action) && action.data({ node, caller: KEY_BINDING }));
+                    const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
+                    void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
                   });
                 }}
                 classNames='flex items-center gap-2'

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

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

package/src/components/CommandsDialog/index.ts

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

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

@@ -0,0 +1,159 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import { Schema } from 'effect';
+import React from 'react';
+
+import {
+  Capabilities,
+  IntentPlugin,
+  LayoutAction,
+  SettingsPlugin,
+  contributes,
+  createResolver,
+  defineCapability,
+  useCapability,
+} from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { live } from '@dxos/live-object';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
+import { useAttendableAttributes, useAttention } 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';
+
+import { NavTreePlugin } from '../../NavTreePlugin';
+import { storybookGraphBuilders } from '../../testing';
+import translations from '../../translations';
+import { NavTreeContainer } from '../NavTreeContainer';
+
+faker.seed(1234);
+
+const StoryState = defineCapability<{ 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'
+        icon='ph--atom--regular'
+        label='Test'
+        iconOnly
+        variant={hasAttention ? 'primary' : 'ghost'}
+        classNames='is-[--rail-action] bs-[--rail-action]'
+      />
+      <StackItem.ResizeHandle />
+    </div>
+  );
+};
+
+const StoryPlank = ({ attendableId }: { attendableId: string }) => {
+  const attentionAttrs = useAttendableAttributes(attendableId);
+
+  return (
+    <StackItem.Root
+      item={{ id: attendableId }}
+      {...attentionAttrs}
+      classNames='bg-baseSurface border-ie border-separator'
+      size={30}
+    >
+      <StoryPlankHeading attendableId={attendableId} />
+      <StackItem.Content toolbar>
+        <Toolbar.Root classNames='border-b border-separator'>
+          <Toolbar.Button>Test</Toolbar.Button>
+        </Toolbar.Root>
+
+        <div className={mx(container, 'm-2 bg-activeSurface')}>
+          <Input.Root>
+            <Input.Label>Level 1 (group)</Input.Label>
+          </Input.Root>
+          <div className={mx(container, 'bg-baseSurface')}>
+            <Input.Root>
+              <Input.Label>Level 2 (base)</Input.Label>
+              <Input.TextArea placeholder='Enter text' />
+            </Input.Root>
+          </div>
+        </div>
+      </StackItem.Content>
+    </StackItem.Root>
+  );
+};
+
+const DefaultStory = () => {
+  const state = useCapability(StoryState);
+
+  return (
+    <Main.Root complementarySidebarState='closed'>
+      <Main.NavigationSidebar label='Navigation' classNames='grid'>
+        <NavTreeContainer tab={state.tab} />
+      </Main.NavigationSidebar>
+      <Main.Content bounce handlesFocus>
+        <Stack orientation='horizontal' size='contain'>
+          <StoryPlank attendableId='space-0:object-0' />
+          <StoryPlank attendableId='space-0:object-1' />
+        </Stack>
+      </Main.Content>
+    </Main.Root>
+  );
+};
+
+const meta: Meta<typeof NavTreeContainer> = {
+  title: 'plugins/plugin-navtree/NavTree',
+  component: NavTreeContainer,
+  render: DefaultStory,
+  decorators: [
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
+        GraphPlugin(),
+        IntentPlugin(),
+        SettingsPlugin(),
+        AttentionPlugin(),
+        NavTreePlugin(),
+      ],
+      capabilities: (context) => [
+        contributes(StoryState, live({ tab: 'space-0' })),
+        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders),
+        contributes(Capabilities.IntentResolver, [
+          createResolver({
+            intent: LayoutAction.UpdateLayout,
+            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
+              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
+            resolve: ({ subject }) => {
+              const state = context.getCapability(StoryState);
+              state.tab = subject;
+            },
+          }),
+        ]),
+      ],
+    }),
+    withLayout({ fullscreen: true }),
+  ],
+  parameters: {
+    translations,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NavTreeContainer>;
+
+export const Default: Story = {};