@dxos/plugin-navtree 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/capabilities/keyboard.ts

@@ -2,58 +2,65 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities as AppCapabilities, type PluginContext, contributes } from '@dxos/app-framework';
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { debounce } from '@dxos/async';
 import { Keyboard } from '@dxos/keyboard';
-import { type Node, isAction } from '@dxos/plugin-graph';
+import { Graph, Node, runAction } from '@dxos/plugin-graph';
 import { getHostPlatform } from '@dxos/util';
 
-import { KEY_BINDING } from '../meta';
-
-export default (context: PluginContext) => {
-  const { graph } = context.getCapability(AppCapabilities.AppGraph);
-
-  // TODO(wittjosiah): Factor out.
-  // TODO(wittjosiah): Handle removal of actions.
-  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();
-  Keyboard.singleton.setCurrentContext(graph.root.id);
-
-  return contributes(AppCapabilities.Null, null, () => {
-    unsubscribe();
-    Keyboard.singleton.destroy();
-  });
-};
+import { KEY_BINDING } from '#meta';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+    const invoker = yield* Capability.get(Capabilities.OperationInvoker);
+    const pluginContext = yield* Capability.Service;
+
+    // TODO(wittjosiah): Factor out.
+    // TODO(wittjosiah): Handle removal of actions.
+    const visitor = (node: 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 && Node.isAction(node)) {
+        Keyboard.singleton.getContext(path.slice(0, -1).join('/')).bind({
+          shortcut,
+          handler: () => void runAction(invoker, pluginContext, node, { parent: node, caller: KEY_BINDING }),
+          data: node.properties.label,
+        });
+      }
+    };
+
+    const eventHandler = debounce(() => {
+      Graph.traverse(graph, { relation: ['child', 'action'], visitor });
+    }, 500);
+
+    const unsubscribe = graph.onNodeChanged.on(eventHandler);
+
+    // TODO(burdon): Create context and plugin.
+    Keyboard.singleton.initialize();
+    Keyboard.singleton.setCurrentContext(Node.RootId);
+
+    return Capability.contributes(Capabilities.Null, null, () =>
+      Effect.sync(() => {
+        unsubscribe();
+        Keyboard.singleton.destroy();
+      }),
+    );
+  }),
+);

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

@@ -2,44 +2,52 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import * as Effect from 'effect/Effect';
+import React, { type ComponentProps } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { isGraphNode } from '@dxos/plugin-graph';
+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 '../components';
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
+import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '#containers';
+import { COMMANDS_DIALOG } from '#meta';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: COMMANDS_DIALOG,
-      role: 'dialog',
-      filter: (data): data is { props: { selected?: string } } => data.component === COMMANDS_DIALOG,
-      component: ({ data }) => <CommandsDialogContent {...data.props} />,
-    }),
-    createSurface({
-      id: `${NAVTREE_PLUGIN}/navigation`,
-      role: 'navigation',
-      filter: (data): data is { popoverAnchorId?: string; topbar: boolean; current: string } =>
-        typeof data.current === 'string',
-      component: ({ data }) => (
-        <NavTreeContainer
-          tab={data.current}
-          popoverAnchorId={data.popoverAnchorId as string | undefined}
-          topbar={data.topbar as boolean}
-        />
-      ),
-    }),
-    createSurface({
-      id: `${NAVTREE_PLUGIN}/document-title`,
-      role: 'document-title',
-      component: ({ data }) => <NavTreeDocumentTitle node={isGraphNode(data.subject) ? data.subject : undefined} />,
-    }),
-    createSurface({
-      id: `${NAVTREE_PLUGIN}/search-input`,
-      role: 'search-input',
-      position: 'fallback',
-      component: () => <CommandsTrigger />,
-    }),
-  ]);
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: COMMANDS_DIALOG,
+        filter: AppSurface.component<ComponentProps<typeof CommandsDialogContent>>(AppSurface.Dialog, COMMANDS_DIALOG),
+        component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
+      }),
+      Surface.create({
+        id: 'navigation',
+        role: 'navigation',
+        filter: (data): data is { popoverAnchorId?: string; current: string } => typeof data.current === 'string',
+        component: ({ data, ref }) => {
+          return (
+            <NavTreeContainer
+              tab={data.current}
+              popoverAnchorId={data.popoverAnchorId as string | undefined}
+              ref={ref}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'documentTitle',
+        role: 'document-title',
+        component: ({ data }) => (
+          <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
+        ),
+      }),
+      Surface.create({
+        id: 'searchInput',
+        role: 'search-input',
+        position: 'last',
+        component: () => <CommandsTrigger />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/state.ts

@@ -2,104 +2,152 @@
 // Copyright 2025 DXOS.org
 //
 
-import { effect, untracked } from '@preact/signals-core';
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 
-import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
-import { type Live } from '@dxos/echo';
-import { live } from '@dxos/live-object';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Graph, Node } from '@dxos/plugin-graph';
 import { Path } from '@dxos/react-ui-list';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { meta } from '#meta';
+import { NavTreeCapabilities } from '#types';
 
-import { NavTreeCapabilities } from './capabilities';
+const KEY = `${meta.id}.state.v1`;
 
-const KEY = `${NAVTREE_PLUGIN}/state/v1`;
+/** Default item state for new entries. */
+const defaultItemState: NavTreeCapabilities.NavTreeItemState = { open: false, current: false };
 
-const getInitialState = () => {
+/** 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;
+
+/** Default state entries for initial tree structure. */
+// TODO(thure): Initialize these dynamically.
+const defaultStateEntries: [string, NavTreeCapabilities.NavTreeItemState][] = [
+  ['root', { open: true, current: false }],
+];
+
+const getInitialState = (): Map<string, NavTreeCapabilities.NavTreeItemState> => {
   const stringified = localStorage.getItem(KEY);
   if (!stringified) {
-    return;
+    return new Map(defaultStateEntries);
   }
 
   try {
     const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
-    return cached.map(([key, value]): [string, Live<{ open: boolean; current: boolean }>] => [
-      key,
-      live({ open: value.open, current: false }),
-    ]);
-  } catch {}
+    return new Map(cached.map(([key, value]) => [key, { open: value.open, current: false }]));
+  } catch {
+    return new Map(defaultStateEntries);
+  }
 };
 
-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.
-  //   Ideally this could be a Live but be able to access and update the root level without breaking render.
-  //   Wrapping accesses and updates in `untracked` didn't seem to work in all cases.
-  const state = new Map<string, Live<{ open: boolean; current: boolean; alternateTree?: boolean }>>(
-    getInitialState() ?? [
-      // TODO(thure): Initialize these dynamically.
-      ['root', live({ open: true, current: false })],
-      ['root~dxos.org/plugin/space-spaces', live({ open: true, current: false })],
-      ['root~dxos.org/plugin/files', live({ open: true, current: false })],
-    ],
-  );
-
-  const getItem = (_path: string[]) => {
-    const path = Path.create(..._path);
-    const value = state.get(path) ?? live({ open: false, current: false, alternateTree: false });
-    if (!state.has(path)) {
-      state.set(path, value);
-    }
-
-    return value;
-  };
-
-  const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => {
-    const value = getItem(path);
-    value[key] = next;
-
-    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
-  };
-
-  const isOpen = (path: string[]) => getItem(path).open;
-  const isCurrent = (path: string[]) => getItem(path).current;
-  const isAlternateTree = (path: string[]) => {
-    const item = getItem(path);
-    return item.alternateTree ?? false;
-  };
-
-  let previous: string[] = [];
-  const unsubscribe = effect(() => {
-    const removed = previous.filter((id) => !layout.active.includes(id));
-    previous = layout.active;
-
-    const handleUpdate = () => {
-      removed.forEach((id) => {
-        const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
-        keys.forEach((key) => {
-          setItem(Path.parts(key), 'current', false);
-        });
-      });
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const layoutAtom = yield* Capability.get(AppCapabilities.Layout);
+
+    // Backing state for persistence (not reactive).
+    const backingState = getInitialState();
+
+    // Per-path atom family for fine-grained reactivity.
+    // keepAlive prevents atoms from being garbage collected when components unmount,
+    // ensuring state is preserved across deletion/restoration cycles.
+    const itemAtomFamily = Atom.family((pathString: string) =>
+      Atom.make<NavTreeCapabilities.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(
+        Atom.keepAlive,
+      ),
+    );
+
+    const getItemAtom = (path: string[]): Atom.Atom<NavTreeCapabilities.NavTreeItemState> => {
+      const pathString = Path.create(...path);
+      if (!backingState.has(pathString)) {
+        backingState.set(pathString, { ...defaultItemState });
+      }
+      return itemAtomFamily(pathString);
+    };
 
-      layout.active.forEach((id) => {
-        const keys = Array.from(new Set([...state.keys(), id])).filter((key) => Path.last(key) === id);
-        keys.forEach((key) => {
-          setItem(Path.parts(key), 'current', true);
-        });
-      });
+    const getItem = (path: string[]): NavTreeCapabilities.NavTreeItemState => {
+      return registry.get(getItemAtom(path));
     };
 
-    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
-    //   Keys are initialized on the first render of an item in the navtree.
-    //   This could be avoided if the location was a path as well and not just an id.
-    const timeout = setTimeout(handleUpdate, 500);
-    untracked(() => handleUpdate());
-    return () => clearTimeout(timeout);
-  });
-
-  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent, isAlternateTree }, () =>
-    unsubscribe(),
-  );
-};
+    const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+      const pathString = Path.create(...path);
+      const atom = itemAtomFamily(pathString);
+      const currentValue = registry.get(atom);
+      const newValue = { ...currentValue, [key]: next };
+
+      registry.set(atom, newValue);
+
+      if (!(key === 'open' && isTopLevelPath(path))) {
+        backingState.set(pathString, newValue);
+        localStorage.setItem(KEY, JSON.stringify(Array.from(backingState.entries())));
+      }
+    };
+
+    // Subscribe to layout changes to update current state.
+    let previous: string[] = [];
+    const unsubscribe = registry.subscribe(layoutAtom, (layout) => {
+      const removed = previous.filter((id) => !layout.active.includes(id));
+      previous = layout.active;
+
+      const handleUpdate = () => {
+        // Mark removed items as not current.
+        removed.forEach((id) => {
+          const keys = Array.from(backingState.keys()).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', false);
+          });
+        });
+
+        // Mark active items as current.
+        layout.active.forEach((id: string) => {
+          const keys = Array.from(new Set([...backingState.keys(), id])).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', true);
+          });
+        });
+      };
+
+      // TODO(wittjosiah): This is setTimeout because there's a race between the keys being initialized.
+      //   Keys are initialized on the first render of an item in the navtree.
+      //   This could be avoided if the location was a path as well and not just an id.
+      // Defer so item path atoms exist and we do not setState during tree render.
+      const timeout = setTimeout(handleUpdate, 500);
+      return () => clearTimeout(timeout);
+    });
+
+    // Once graph is ready, expand every node marked open in state so the graph has children loaded for rendering.
+    yield* Effect.gen(function* () {
+      const { graph } = yield* Capability.waitFor(AppCapabilities.AppGraph);
+
+      // Always expand the active workspace so its subtree is initialized.
+      const layout = registry.get(layoutAtom);
+      if (layout.workspace) {
+        Graph.expand(graph, layout.workspace, 'child');
+      }
+
+      // Expand persisted open nodes, skipping inactive workspace tabs.
+      const openPaths = Array.from(backingState.entries())
+        .filter(([, state]) => state.open)
+        .map(([pathString]) => Path.parts(pathString))
+        .filter((path) => !isTopLevelPath(path));
+      for (const path of openPaths) {
+        const nodeId = path[path.length - 1];
+        if (!nodeId) {
+          continue;
+        }
+        Graph.expand(graph, nodeId, 'child');
+      }
+    }).pipe(Effect.forkDaemon);
+
+    return Capability.contributes(
+      NavTreeCapabilities.State,
+      {
+        getItem,
+        getItemAtom,
+        setItem,
+      },
+      () => Effect.sync(() => unsubscribe()),
+    );
+  }),
+);