@dxos/plugin-navtree 0.8.4-main.4a85c3132b → 0.8.4-main.51f1e5ca51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.4a85c3132b",
+  "version": "0.8.4-main.51f1e5ca51",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,17 +12,31 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#containers": "./src/containers/index.ts",
+    "#hooks": "./src/hooks/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#testing": "./src/testing/index.ts",
+    "#translations": "./src/translations.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -32,59 +46,59 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "date-fns": "^3.3.1",
-    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
-    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
-    "@dxos/async": "0.8.4-main.4a85c3132b",
-    "@dxos/debug": "0.8.4-main.4a85c3132b",
-    "@dxos/echo": "0.8.4-main.4a85c3132b",
-    "@dxos/invariant": "0.8.4-main.4a85c3132b",
-    "@dxos/keyboard": "0.8.4-main.4a85c3132b",
-    "@dxos/lit-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/operation": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-deck": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-observability": "0.8.4-main.4a85c3132b",
-    "@dxos/log": "0.8.4-main.4a85c3132b",
-    "@dxos/protocols": "0.8.4-main.4a85c3132b",
-    "@dxos/react-client": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-attention": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-list": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-searchlist": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-tabs": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-menu": "0.8.4-main.4a85c3132b",
-    "@dxos/app-graph": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
-    "@dxos/util": "0.8.4-main.4a85c3132b"
+    "date-fns": "^3.6.0",
+    "@dxos/app-graph": "0.8.4-main.51f1e5ca51",
+    "@dxos/app-framework": "0.8.4-main.51f1e5ca51",
+    "@dxos/app-toolkit": "0.8.4-main.51f1e5ca51",
+    "@dxos/async": "0.8.4-main.51f1e5ca51",
+    "@dxos/compute": "0.8.4-main.51f1e5ca51",
+    "@dxos/debug": "0.8.4-main.51f1e5ca51",
+    "@dxos/echo": "0.8.4-main.51f1e5ca51",
+    "@dxos/invariant": "0.8.4-main.51f1e5ca51",
+    "@dxos/keyboard": "0.8.4-main.51f1e5ca51",
+    "@dxos/lit-ui": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-graph": "0.8.4-main.51f1e5ca51",
+    "@dxos/log": "0.8.4-main.51f1e5ca51",
+    "@dxos/protocols": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-client": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-observability": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-list": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-menu": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-attention": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-search": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-mosaic": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-stack": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui-tabs": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-deck": "0.8.4-main.51f1e5ca51",
+    "@dxos/util": "0.8.4-main.51f1e5ca51"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-attention": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
-    "@dxos/random": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-testing": "0.8.4-main.4a85c3132b",
-    "@dxos/plugin-theme": "0.8.4-main.4a85c3132b",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b",
-    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b"
+    "vite": "^8.0.10",
+    "@dxos/plugin-attention": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-space": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-testing": "0.8.4-main.51f1e5ca51",
+    "@dxos/random": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-client": "0.8.4-main.51f1e5ca51",
+    "@dxos/plugin-theme": "0.8.4-main.51f1e5ca51",
+    "@dxos/react-ui": "0.8.4-main.51f1e5ca51",
+    "@dxos/storybook-utils": "0.8.4-main.51f1e5ca51",
+    "@dxos/ui-theme": "0.8.4-main.51f1e5ca51"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@effect/platform": "0.94.4",
-    "effect": "3.19.16",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
-    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
+    "@dxos/react-ui": "0.8.4-main.51f1e5ca51",
+    "@dxos/ui-theme": "0.8.4-main.51f1e5ca51"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -9,11 +9,11 @@ import { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from
 import { Graph } from '@dxos/plugin-graph';
 import { type TreeData } from '@dxos/react-ui-list';
 
-import { AppGraphBuilder, Keyboard, OperationResolver, ReactSurface, State } from './capabilities';
-import { NODE_TYPE } from './containers';
-import { meta } from './meta';
-import { translations } from './translations';
-import { NavTreeEvents } from './types';
+import { AppGraphBuilder, Keyboard, OperationHandler, ReactSurface, State } from '#capabilities';
+import { NODE_TYPE } from '#containers';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { NavTreeEvents } from '#types';
 
 export const NavTreePlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
@@ -34,13 +34,13 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
       },
     },
   }),
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({
     id: 'state',
     activatesOn: AppActivationEvents.LayoutReady,
-    activatesAfter: [NavTreeEvents.StateReady],
+    firesAfterActivation: [NavTreeEvents.StateReady],
     activate: State,
   }),
   Plugin.addModule({

package/src/capabilities/{app-graph-builder/app-graph-builder.ts → app-graph-builder.ts}

@@ -6,19 +6,19 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
-import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
+import { Operation } from '@dxos/compute';
+import { GraphBuilder, Node, NodeMatcher } from '@dxos/plugin-graph';
 
-import { COMMANDS_DIALOG, meta } from '../../meta';
+import { COMMANDS_DIALOG, meta } from '#meta';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const extensions = yield* GraphBuilder.createExtension({
-      id: meta.id,
+      id: 'root',
       match: NodeMatcher.whenRoot,
       actions: () =>
         Effect.succeed([
-          {
+          Node.makeAction({
             id: COMMANDS_DIALOG,
             data: () =>
               Operation.invoke(LayoutOperation.UpdateDialog, {
@@ -26,14 +26,14 @@ export default Capability.makeModule(
                 blockAlign: 'start',
               }),
             properties: {
-              label: ['open commands label', { ns: meta.id }],
+              label: ['open-commands.label', { ns: meta.id }],
               icon: 'ph--magnifying-glass--regular',
               keyBinding: {
                 macos: 'meta+k',
                 windows: 'ctrl+k',
               },
             },
-          },
+          }),
         ]),
     });
 

package/src/capabilities/index.ts

@@ -2,8 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './keyboard';
-export * from './operation-resolver';
-export * from './react-surface';
-export * from './state';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const Keyboard = Capability.lazy('Keyboard', () => import('./keyboard'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const State = Capability.lazy('State', () => import('./state'));

package/src/capabilities/{keyboard/keyboard.ts → keyboard.ts}

@@ -11,7 +11,7 @@ import { Keyboard } from '@dxos/keyboard';
 import { Graph, Node, runAction } from '@dxos/plugin-graph';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING } from '../../meta';
+import { KEY_BINDING } from '#meta';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -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-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { NavTreeOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, NavTreeOperationHandlerSet);
+  }),
+);

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -3,26 +3,26 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Node } from '@dxos/plugin-graph';
 
-import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../../containers';
-import { COMMANDS_DIALOG, meta } from '../../meta';
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '#containers';
+import { COMMANDS_DIALOG } from '#meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: COMMANDS_DIALOG,
-        role: 'dialog',
-        filter: (data): data is { props: { selected?: string } } => data.component === COMMANDS_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof CommandsDialogContent>>(AppSurface.Dialog, COMMANDS_DIALOG),
         component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
       }),
       Surface.create({
-        id: `${meta.id}/navigation`,
+        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: 'document-title',
         role: 'document-title',
         component: ({ data }) => (
           <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
         ),
       }),
       Surface.create({
-        id: `${meta.id}/search-input`,
+        id: 'search-input',
         role: 'search-input',
         position: 'fallback',
         component: () => <CommandsTrigger />,

package/src/capabilities/{state/state.ts → state.ts}

@@ -10,13 +10,13 @@ import { AppCapabilities } from '@dxos/app-toolkit';
 import { Graph, Node } from '@dxos/plugin-graph';
 import { Path } from '@dxos/react-ui-list';
 
-import { meta } from '../../meta';
-import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '../../types';
+import { 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 };
+const defaultItemState: NC.NavTreeItemState = { open: false, current: false };
 
 /** L0 (top-level workspace) paths are direct children of root — not part of the expandable tree model. */
 const isTopLevelPath = (path: string[]): boolean => path.length === 2 && path[0] === Node.RootId;
@@ -66,7 +66,7 @@ export default Capability.makeModule(
       return registry.get(getItemAtom(path));
     };
 
-    const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => {
+    const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
       const pathString = Path.create(...path);
       const atom = itemAtomFamily(pathString);
       const currentValue = registry.get(atom);

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

@@ -12,21 +12,22 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { useAtomCapability } from '@dxos/app-framework/ui';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { OperationResolver } from '@dxos/operation';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
+import { withLayout } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
-import { NavTreeContainer } from '../../containers';
+import { NavTreeContainer } from '#containers';
+import { storybookGraphBuilders } from '#testing';
+import { translations } from '#translations';
+
 import { NavTreePlugin } from '../../NavTreePlugin';
-import { storybookGraphBuilders } from '../../testing';
-import { translations } from '../../translations';
 
-faker.seed(1234);
+random.seed(1234);
 
 const StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
@@ -43,7 +44,7 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
     <div className='flex p-1 items-center border-b border-separator'>
       <IconButton
         density='coarse'
-        icon='ph--atom--regular'
+        icon='ph--circle--regular'
         label='Test'
         iconOnly
         variant={hasAttention ? 'primary' : 'ghost'}
@@ -120,7 +121,6 @@ const meta = {
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme(),
     withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
@@ -132,20 +132,21 @@ 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()),
-          Capability.contributes(Capabilities.OperationResolver, [
-            OperationResolver.make({
-              operation: LayoutOperation.SwitchWorkspace,
-              handler: ({ subject }) =>
+          Capability.contributes(
+            Capabilities.OperationHandler,
+            OperationHandlerSet.make(
+              Operation.withHandler(LayoutOperation.SwitchWorkspace, ({ subject }) =>
                 Effect.gen(function* () {
                   const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
                   registry.set(storyStateAtom, { tab: subject });
                 }),
-            }),
-          ]),
+              ),
+            ),
+          ),
         ];
       },
     }),

package/src/components/NavTree/NavTree.tsx

@@ -9,7 +9,8 @@ import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugi
 import { Tabs } from '@dxos/react-ui-tabs';
 import { byPosition } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
+import { useLoadDescendents } from '#hooks';
+
 import { useNavTreeContext } from '../NavTreeContext';
 import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
@@ -30,7 +31,7 @@ export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab
     //  it uses RovingFocus and doesn't support moving focus to an item that is not a tab. Assess whether this situation
     //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
     //  not use `react-ui-tabs` at all.
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative' ref={forwardedRef}>
+    <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}

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.stories.tsx

@@ -9,33 +9,32 @@ import { RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Node } from '@dxos/app-graph';
 import { corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { random } from '@dxos/random';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
 const parent = {
-  id: faker.string.uuid(),
+  id: random.string.uuid(),
   type: 'node',
   data: null,
   properties: {
-    label: faker.lorem.words(2),
+    label: random.lorem.words(2),
     icon: 'ph--circle--regular',
   },
 } satisfies Node.NodeArg<any>;
 
 // TODO(burdon): Factor out across tests.
-const menuActions = faker.helpers.multiple(
+const menuActions = random.helpers.multiple(
   () =>
     ({
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       type: 'action',
       data: () =>
         Effect.sync(() => {
           console.log('invoke');
         }),
       properties: {
-        label: faker.lorem.words(2),
+        label: random.lorem.words(2),
         icon: 'ph--circle--regular',
       },
     }) satisfies Node.NodeArg<any>,
@@ -52,7 +51,6 @@ const meta = {
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
   decorators: [
-    withTheme(),
     withPluginManager({
       plugins: [...corePlugins(), RuntimePlugin()],
     }),