@dxos/plugin-navtree 0.7.1-staging.8709ba7 → 0.7.2-main.f1adc9f

package/dist/lib/browser/index.mjs

@@ -5,14 +5,13 @@ import {
 } from "./chunk-PSVCPL4T.mjs";
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
+import { effect } from "@preact/signals-core";
 import React10 from "react";
-import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction3, parseGraphPlugin, NavigationAction as NavigationAction2, parseNavigationPlugin as parseNavigationPlugin2 } from "@dxos/app-framework";
+import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction4, parseGraphPlugin, NavigationAction as NavigationAction2, parseNavigationPlugin as parseNavigationPlugin2, parseLayoutPlugin } from "@dxos/app-framework";
 import { createExtension, isAction as isAction5, isGraphNode } from "@dxos/app-graph";
-import { invariant } from "@dxos/invariant";
+import { create } from "@dxos/echo-schema";
 import { Keyboard as Keyboard2 } from "@dxos/keyboard";
-import { LocalStorageStore } from "@dxos/local-storage";
-import { Path as Path2 } from "@dxos/react-ui-mosaic";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { Path } from "@dxos/react-ui-mosaic";
 import { getHostPlatform as getHostPlatform3 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
@@ -395,10 +394,12 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
 var NAV_TREE_ITEM = "NavTreeItem";
-var NavTree = ({ loadDescendents, renderPresence: renderPresence2, popoverAnchorId, ...props }) => {
-  const renderColumns = useCallback(({ item, menuOpen, setMenuOpen }) => {
+var NavTree = ({ getActions: getActions2, loadDescendents, renderPresence: renderPresence2, popoverAnchorId, ...props }) => {
+  const renderColumns = useCallback(({ item, path, menuOpen, setMenuOpen }) => {
     return /* @__PURE__ */ React4.createElement(NavTreeColumns, {
-      item,
+      path,
+      node: item,
+      getActions: getActions2,
       menuOpen,
       setMenuOpen,
       loadDescendents,
@@ -417,17 +418,18 @@ var NavTree = ({ loadDescendents, renderPresence: renderPresence2, popoverAnchor
     renderColumns
   });
 };
-var NavTreeColumns = ({ item, menuOpen, setMenuOpen, loadDescendents, renderPresence: Presence, popoverAnchorId }) => {
+var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOpen, loadDescendents, renderPresence: Presence, popoverAnchorId }) => {
   const { t } = useTranslation4(NAVTREE_PLUGIN);
-  const level = item.path.length - 2;
-  const [primaryAction, ...secondaryActions] = item.actions.toSorted((a, b) => a.properties?.disposition === "toolbar" ? -1 : 1);
-  const actions = (primaryAction?.properties?.disposition === "toolbar" ? secondaryActions : item.actions).flatMap((action) => isAction2(action) ? [
+  const level = path.length - 2;
+  const { actions: _actions, groupedActions } = getActions2(node);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "toolbar" ? -1 : 1);
+  const actions = (primaryAction?.properties?.disposition === "toolbar" ? secondaryActions : _actions).flatMap((action) => isAction2(action) ? [
     action
   ] : []).filter((action) => !action.properties?.hidden);
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover2.Anchor : Fragment2;
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover2.Anchor : Fragment2;
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
-      void loadDescendents?.(item.node);
+      void loadDescendents?.(node);
       if (primaryAction && !isAction2(primaryAction)) {
         void loadDescendents?.(primaryAction);
       }
@@ -440,38 +442,40 @@ var NavTreeColumns = ({ item, menuOpen, setMenuOpen, loadDescendents, renderPres
     testId: primaryAction.properties?.testId,
     label: toLocalizedString4(primaryAction.properties?.label, t),
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
-    parent: item.node,
+    parent: node,
     monolithic: isAction2(primaryAction),
     menuActions: isAction2(primaryAction) ? [
       primaryAction
-    ] : item.groupedActions[primaryAction.id],
+    ] : groupedActions[primaryAction.id],
     menuType: primaryAction.properties?.menuType,
     caller: NAV_TREE_ITEM
   }) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null), /* @__PURE__ */ React4.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
     testId: `navtree.treeItem.actionsLevel${level}`,
     label: t("tree item actions label"),
     icon: "ph--dots-three-vertical--regular",
-    parent: item.node,
+    parent: node,
     menuActions: actions,
     menuType: "dropdown",
     caller: NAV_TREE_ITEM,
     menuOpen,
     onChangeMenuOpen: setMenuOpen
   }) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null)), Presence && /* @__PURE__ */ React4.createElement(Presence, {
-    item
+    node
   }));
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
-import React6, { useCallback as useCallback2, useEffect as useEffect2 } from "react";
-import { NavigationAction, Surface, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import { untracked } from "@preact/signals-core";
+import React6, { memo, useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { LayoutAction as LayoutAction2, NavigationAction, Surface, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
 import { isAction as isAction4, isActionLike } from "@dxos/app-graph";
 import { useGraph as useGraph2 } from "@dxos/plugin-graph";
 import { isEchoObject, isSpace } from "@dxos/react-client/echo";
 import { ElevationProvider, useMediaQuery, useSidebars as useSidebars2 } from "@dxos/react-ui";
-import { isItem } from "@dxos/react-ui-list";
+import { isTreeData } from "@dxos/react-ui-list";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 import { arrayMove } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeFooter.tsx
@@ -584,7 +588,6 @@ var NavTreeFooter = (props) => {
 
 // packages/plugins/plugin-navtree/src/util.ts
 import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction3 } from "@dxos/app-graph";
-import { Path } from "@dxos/react-ui-mosaic";
 import { nonNullable } from "@dxos/util";
 var getParent = (graph, node, path) => {
   const parentId = path[path.length - 2];
@@ -627,14 +630,6 @@ var sortActions = (actions) => actions.sort((a, b) => {
   }
   return 1;
 });
-var getTreeItemNode = (treeItems, path) => {
-  if (!path) {
-    return void 0;
-  }
-  return treeItems.find((treeItem) => {
-    return treeItem.path && !treeItem.path.find((id, index) => path[index] !== id);
-  });
-};
 var getChildren = (graph, node, filter, path = []) => {
   return graph.nodes(node, {
     relation: "outbound",
@@ -678,64 +673,55 @@ var expandActions = (graph, node) => {
     graph.expand(node, "outbound", ACTION_GROUP_TYPE)
   ]);
 };
-function* navTreeItemVisitor({ graph, node, open, getItem, path = [], filter }) {
-  const stack = [
-    getItem(node, path, filter)
-  ];
-  while (stack.length > 0) {
-    const nextItem = stack.pop();
-    if (nextItem.path.length > 1) {
-      yield nextItem;
-    }
-    const { node: node2, path: path2 } = nextItem;
-    const children = getChildren(graph, node2, filter, path2);
-    const actions = graph.actions(node2);
-    if (path2.length === 1 || open.includes(Path.create(...path2))) {
-      for (let i = actions.length - 1; i >= 0; i--) {
-        if (actions[i].properties.disposition === "item") {
-          stack.push(getItem(actions[i], path2, filter));
-        }
-      }
-      for (let i = children.length - 1; i >= 0; i--) {
-        const child = children[i];
-        stack.push(getItem(child, path2, filter));
-      }
-    }
-  }
-}
-var treeItemsFromRootNode = (graph, rootNode, open, getItem, path, filter) => {
-  return Array.from(navTreeItemVisitor({
-    graph,
-    node: rootNode,
-    open,
-    getItem,
-    path,
-    filter
-  }));
-};
-var expandOpenGraphNodes = (graph, open) => {
-  return Promise.all(open.map((id) => {
-    const node = graph.findNode(Path.last(id));
-    return node && expandChildrenAndActions(graph, node);
-  }).filter(nonNullable));
-};
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
-var renderPresence = ({ item }) => /* @__PURE__ */ React6.createElement(Surface, {
+var renderPresence = ({ node }) => /* @__PURE__ */ React6.createElement(Surface, {
   role: "presence--glyph",
   data: {
-    object: item.node.data,
-    id: item.node.id
+    object: node.data,
+    id: node.id
   }
 });
-var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) => {
+var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...props }) => {
   const { closeNavigationSidebar } = useSidebars2(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const dispatch = useIntentDispatcher3();
   const { graph } = useGraph2();
+  const getActions2 = useCallback2((node) => getActions(graph, node), [
+    graph
+  ]);
+  const getItems = useCallback2((node) => {
+    return graph.nodes(node ?? graph.root, {
+      filter: (node2) => {
+        return untracked(() => {
+          const action = isActionLike(node2);
+          const disposition = node2.properties.disposition;
+          return !action || action && disposition === "item";
+        });
+      }
+    });
+  }, [
+    graph
+  ]);
+  const getProps = useCallback2((node, path) => {
+    const children = getChildren(graph, node, void 0, path);
+    const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
+    return {
+      id: node.id,
+      label: node.properties.label ?? node.id,
+      parentOf,
+      icon: node.properties.icon,
+      disabled: node.properties.disabled,
+      className: mx4(node.properties.modified && "italic", node.properties.className),
+      headingClassName: node.properties.headingClassName,
+      testId: node.properties.testId
+    };
+  }, [
+    graph
+  ]);
   const loadDescendents = useCallback2((node) => {
     void expandActions(graph, node);
     if (!isActionLike(node)) {
@@ -751,38 +737,62 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
     graph
   ]);
   const canDrop = useCallback2((source, target) => {
-    if (isSpace(target.node.data)) {
-      return isEchoObject(source.node.data) || isSpace(source.node.data);
-    } else if (isEchoObject(target.node.data)) {
-      return isEchoObject(source.node.data);
+    const sourceNode = source.item;
+    const targetNode = target.item;
+    if (isSpace(targetNode.data)) {
+      return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
+    } else if (isEchoObject(targetNode.data)) {
+      return isEchoObject(sourceNode.data);
     } else {
       return false;
     }
   }, []);
-  const handleSelect = useCallback2(({ node, actions, path }) => {
+  const handleSelect = useCallback2(({ item: node, path, option }) => {
     if (!node.data) {
       return;
     }
     if (isAction4(node)) {
-      const [parentId] = path.slice(1);
-      const parent = items.find(({ id }) => id === parentId)?.node;
+      const [parent] = graph.nodes(node, {
+        relation: "inbound"
+      });
       void (parent && node.data({
         node: parent,
         caller: NAV_TREE_ITEM
       }));
       return;
     }
-    void dispatch({
-      action: NavigationAction.OPEN,
-      data: {
-        activeParts: {
-          main: [
-            node.id
-          ]
+    const current = isCurrent(path, node);
+    if (!current) {
+      void dispatch({
+        action: NavigationAction.OPEN,
+        data: {
+          activeParts: {
+            main: [
+              node.id
+            ]
+          }
         }
-      }
-    });
-    const defaultAction = actions?.find((action) => action.properties?.disposition === "default");
+      });
+    } else if (option) {
+      void dispatch({
+        action: NavigationAction.CLOSE,
+        data: {
+          activeParts: {
+            main: [
+              node.id
+            ]
+          }
+        }
+      });
+    } else {
+      void dispatch({
+        action: LayoutAction2.SCROLL_INTO_VIEW,
+        data: {
+          id: node.id
+        }
+      });
+    }
+    const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === "default");
     if (isAction4(defaultAction)) {
       void defaultAction.data();
     }
@@ -790,14 +800,15 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
       closeNavigationSidebar();
     }
   }, [
-    items,
+    graph,
     dispatch,
+    isCurrent,
     isLg,
     closeNavigationSidebar
   ]);
   useEffect2(() => {
     return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
+      canMonitor: ({ source }) => isTreeData(source.data),
       onDrop: ({ location, source }) => {
         if (!location.current.dropTargets.length) {
           return;
@@ -805,21 +816,23 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
         const target = location.current.dropTargets[0];
         const instruction = extractInstruction(target.data);
         if (instruction !== null && instruction.type !== "instruction-blocked") {
-          const sourceNode = source.data.node;
-          const targetNode = target.data.node;
+          const sourceNode = source.data.item;
+          const targetNode = target.data.item;
           const sourcePath = source.data.path;
           const targetPath = target.data.path;
-          const nextItems = instruction.type.startsWith("reorder") ? items.filter((item) => item.path.slice(0, -1).join() === targetPath.slice(0, -1).join()) : items.filter((item) => item.path.slice(0, -1).join() === targetPath.join());
           const operation = sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== "make-child" ? "rearrange" : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
           const sourceParent = getParent(graph, sourceNode, sourcePath);
           const targetParent = getParent(graph, targetNode, targetPath);
-          const sourceIndex = nextItems.findIndex(({ id }) => id === sourceNode.id);
-          const targetIndex = nextItems.findIndex(({ id }) => id === targetNode.id);
-          const migrationIndex = instruction.type === "make-child" ? nextItems.length > 0 ? nextItems.length - 1 : 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
+          const sourceItems = getItems(sourceParent);
+          const targetItems = getItems(targetParent);
+          const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
+          const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
+          const migrationIndex = instruction.type === "make-child" ? void 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
           switch (operation) {
             case "rearrange": {
+              const nextItems = sourceItems.map(({ data }) => data);
               arrayMove(nextItems, sourceIndex, targetIndex);
-              void sourceParent?.properties.onRearrangeChildren?.(nextItems.map((item) => item.node.data));
+              void sourceParent?.properties.onRearrangeChildren?.(nextItems);
               break;
             }
             case "copy": {
@@ -841,7 +854,7 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
       }
     });
   }, [
-    items
+    graph
   ]);
   return /* @__PURE__ */ React6.createElement(ElevationProvider, {
     elevation: "chrome"
@@ -858,9 +871,11 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
     role: "none",
     className: "border-be border-separator !overflow-y-auto"
   }, /* @__PURE__ */ React6.createElement(NavTree, {
-    items,
-    open,
-    current,
+    id: graph.root.id,
+    getActions: getActions2,
+    getItems,
+    getProps,
+    isCurrent,
     loadDescendents,
     renderPresence,
     popoverAnchorId,
@@ -868,7 +883,7 @@ var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) =>
     onSelect: handleSelect,
     ...props
   })), /* @__PURE__ */ React6.createElement(NavTreeFooter, null)));
-};
+});
 
 // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
 import { useEffect as useEffect3 } from "react";
@@ -896,7 +911,7 @@ import { useIdentity } from "@dxos/react-client/halo";
 import React7 from "react";
 import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
 import { Avatar } from "@dxos/react-ui";
-import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
+import { focusRing, mx as mx5 } from "@dxos/react-ui-theme";
 import { hexToFallback } from "@dxos/util";
 var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
 var HaloButton = (props) => {
@@ -904,7 +919,7 @@ var HaloButton = (props) => {
   const fallbackValue = hexToFallback(identityKey ?? "0");
   const { swarm: connectionState } = useNetworkStatus();
   return /* @__PURE__ */ React7.createElement("button", {
-    className: mx4(focusRing, "rounded grid place-items-center"),
+    className: mx5(focusRing, "rounded grid place-items-center"),
     onClick
   }, /* @__PURE__ */ React7.createElement(Avatar.Root, {
     size,
@@ -941,7 +956,7 @@ var NotchStart = () => {
 // packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import React9 from "react";
-import { LayoutAction as LayoutAction2, useIntent } from "@dxos/app-framework";
+import { LayoutAction as LayoutAction3, useIntent } from "@dxos/app-framework";
 import { Button as Button4, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { getSize as getSize2 } from "@dxos/react-ui-theme";
 var CommandsTrigger = () => {
@@ -950,7 +965,7 @@ var CommandsTrigger = () => {
   return /* @__PURE__ */ React9.createElement(Button4, {
     classNames: "w-full h-full !rounded-none",
     onClick: () => dispatch({
-      action: LayoutAction2.SET_LAYOUT,
+      action: LayoutAction3.SET_LAYOUT,
       data: {
         element: "dialog",
         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -989,93 +1004,86 @@ var translations_default = [
 ];
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/NavTreePlugin.tsx";
+var KEY = `${NAVTREE_PLUGIN}/state`;
+var getInitialState = () => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return;
+  }
+  try {
+    const cached = JSON.parse(stringified);
+    return cached.map(([key, value]) => [
+      key,
+      create(value)
+    ]);
+  } catch {
+  }
+};
 var NavTreePlugin = () => {
   let graphPlugin;
   let graph;
-  const itemCache = /* @__PURE__ */ new Map();
-  const state = new LocalStorageStore("dxos.org/settings/navtree", {
-    root: void 0,
-    get flatTree() {
-      if (!this.root || !graph) {
-        return [];
-      }
-      return treeItemsFromRootNode(graph, this.root, this.open, getItem);
-    },
-    // TODO(thure): Do this dynamically.
-    open: [
+  let unsubscribe;
+  const state = new Map(getInitialState() ?? [
+    // TODO(thure): Initialize these dynamically.
+    [
       "root",
+      create({
+        open: true,
+        current: false
+      })
+    ],
+    [
       "root~dxos.org/plugin/space-spaces",
-      "root~dxos.org/plugin/files"
+      create({
+        open: true,
+        current: false
+      })
+    ],
+    [
+      "root~dxos.org/plugin/files",
+      create({
+        open: true,
+        current: false
+      })
     ]
-  });
-  const getItem = (node, parent, filter) => {
-    invariant(graph, void 0, {
-      F: __dxlog_file,
-      L: 82,
-      S: void 0,
-      A: [
-        "graph",
-        ""
-      ]
+  ]);
+  const getItem = (_path) => {
+    const path = Path.create(..._path);
+    const value = state.get(path) ?? create({
+      open: false,
+      current: false
     });
-    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" ? [] : void 0;
-    const item = {
-      id: node.id,
-      label: node.properties.label ?? node.id,
-      icon: node.properties.icon,
-      disabled: node.properties.disabled,
-      testId: node.properties.testId,
-      className: mx5(node.properties.modified && "italic", node.properties.className),
-      headingClassName: node.properties.headingClassName,
-      path,
-      parentOf,
-      node,
-      actions,
-      groupedActions
-    };
-    const cachedItem = itemCache.get(node.id);
-    if (cachedItem && JSON.stringify(item) === JSON.stringify(cachedItem)) {
-      return cachedItem;
-    } else {
-      itemCache.set(node.id, item);
-      return item;
+    if (!state.has(path)) {
+      state.set(path, value);
     }
+    return value;
   };
-  const handleOpenChange = (item, open) => {
-    const path = Path2.create(...item.path);
-    if (open) {
-      state.values.open.push(path);
-    } else {
-      const index = state.values.open.indexOf(path);
-      if (index > -1) {
-        state.values.open.splice(index, 1);
-      }
-    }
+  const setItem = (path, key, next) => {
+    const value = getItem(path);
+    value[key] = next;
+    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
+  };
+  const isOpen = (path) => getItem(path).open;
+  const isCurrent = (path) => getItem(path).current;
+  const handleOpenChange = ({ item: { id }, path, open }) => {
+    setItem(path, "open", open);
     if (graph) {
-      void expandOpenGraphNodes(graph, state.values.open);
+      const node = graph.findNode(id);
+      return node && expandChildrenAndActions(graph, node);
     }
   };
   return {
     meta: meta_default,
     ready: async (plugins) => {
-      state.prop({
-        key: "open",
-        type: LocalStorageStore.json()
-      });
+      const layout = resolvePlugin(plugins, parseLayoutPlugin)?.provides.layout;
+      const location = resolvePlugin(plugins, parseNavigationPlugin2)?.provides.location;
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
       graph = graphPlugin?.provides.graph;
-      if (!graph) {
+      if (!graph || !location || !layout) {
         return;
       }
+      const soloPart = location?.active.solo?.[0];
       const dispatch = resolvePlugin(plugins, parseIntentPlugin)?.provides.intent.dispatch;
-      const soloPart = resolvePlugin(plugins, parseNavigationPlugin2)?.provides.location.active.solo?.[0];
       if (dispatch && soloPart) {
         void dispatch({
           plugin: NAVTREE_PLUGIN,
@@ -1085,8 +1093,30 @@ var NavTreePlugin = () => {
           }
         });
       }
-      state.values.root = graph.root;
-      void expandOpenGraphNodes(graph, state.values.open);
+      let previous = [];
+      unsubscribe = effect(() => {
+        const part = layout.layoutMode === "solo" ? "solo" : "main";
+        const current = location.active[part]?.map(({ id }) => id) ?? [];
+        const removed = previous.filter((id) => !current.includes(id));
+        previous = current;
+        setTimeout(() => {
+          removed.forEach((id) => {
+            const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
+            keys.forEach((key) => {
+              setItem(Path.parts(key), "current", false);
+            });
+          });
+          current.forEach((id) => {
+            const keys = Array.from(/* @__PURE__ */ new Set([
+              ...state.keys(),
+              id
+            ])).filter((key) => Path.last(key) === id);
+            keys.forEach((key) => {
+              setItem(Path.parts(key), "current", true);
+            });
+          });
+        });
+      });
       graph.subscribeTraverse({
         visitor: (node, path) => {
           let shortcut;
@@ -1115,22 +1145,23 @@ var NavTreePlugin = () => {
       Keyboard2.singleton.setCurrentContext(graphPlugin?.provides.graph.root.id);
     },
     unload: async () => {
+      unsubscribe?.();
       Keyboard2.singleton.destroy();
     },
     provides: {
       metadata: {
         records: {
           [NODE_TYPE]: {
-            parse: (item, type) => {
+            parse: ({ item }, type) => {
               switch (type) {
                 case "node":
-                  return item.node;
+                  return item;
                 case "object":
-                  return item.node.data;
+                  return item.data;
                 case "view-object":
                   return {
                     id: `${item.id}-view`,
-                    object: item.node.data
+                    object: item.data
                   };
               }
             }
@@ -1150,9 +1181,8 @@ var NavTreePlugin = () => {
           switch (role) {
             case "navigation":
               return /* @__PURE__ */ React10.createElement(NavTreeContainer, {
-                items: state.values.flatTree,
-                current: data.activeIds,
-                open: state.values.open,
+                isOpen,
+                isCurrent,
                 onOpenChange: handleOpenChange,
                 popoverAnchorId: data.popoverAnchorId
               });
@@ -1162,7 +1192,7 @@ var NavTreePlugin = () => {
               });
             }
             case "navbar-start": {
-              if (state.values.root && data.activeNode) {
+              if (data.activeNode) {
                 return {
                   node: /* @__PURE__ */ React10.createElement(NavBarStart, {
                     activeNode: data.activeNode,
@@ -1192,16 +1222,15 @@ var NavTreePlugin = () => {
                 const path = await graph.waitForPath({
                   target: intent.data.id
                 });
-                const additionalOpenItems = [
+                [
                   ...Array(path.length)
-                ].reduce((acc, _, index) => {
-                  const itemId = Path2.create(...path.slice(0, index));
-                  if (itemId.length > 0 && !state.values.open.includes(itemId)) {
-                    acc.push(itemId);
+                ].forEach((_, index) => {
+                  const subpath = path.slice(0, index);
+                  const value = getItem(subpath);
+                  if (!value.open) {
+                    setItem(subpath, "open", true);
                   }
-                  return acc;
-                }, []);
-                state.values.open.push(...additionalOpenItems);
+                });
               }
               break;
             }
@@ -1220,7 +1249,7 @@ var NavTreePlugin = () => {
                   id: "dxos.org/plugin/navtree/open-commands",
                   data: async () => {
                     await intentPlugin?.provides.intent.dispatch({
-                      action: LayoutAction3.SET_LAYOUT,
+                      action: LayoutAction4.SET_LAYOUT,
                       data: {
                         element: "dialog",
                         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -1260,14 +1289,11 @@ export {
   expandActions,
   expandChildren,
   expandChildrenAndActions,
-  expandOpenGraphNodes,
   getActions,
   getChildren,
   getParent,
   getPersistenceParent,
-  getTreeItemNode,
   resolveMigrationOperation,
-  sortActions,
-  treeItemsFromRootNode
+  sortActions
 };
 //# sourceMappingURL=index.mjs.map