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

package/dist/lib/browser/index.mjs

@@ -2,26 +2,25 @@ import {
   KEY_BINDING,
   NAVTREE_PLUGIN,
   meta_default
-} from "./chunk-U7MTKDFQ.mjs";
+} from "./chunk-PSVCPL4T.mjs";
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
-import { MagnifyingGlass as MagnifyingGlass2 } from "@phosphor-icons/react";
-import React8 from "react";
-import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction4, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
-import { createExtension, isAction as isAction4, isGraphNode } from "@dxos/app-graph";
+import React10 from "react";
+import { resolvePlugin, parseIntentPlugin, LayoutAction as LayoutAction3, parseGraphPlugin, NavigationAction as NavigationAction2 } from "@dxos/app-framework";
+import { createExtension, isAction as isAction5, isGraphNode } from "@dxos/app-graph";
+import { invariant } from "@dxos/invariant";
 import { Keyboard as Keyboard2 } from "@dxos/keyboard";
 import { LocalStorageStore } from "@dxos/local-storage";
-import { Path as Path3 } from "@dxos/react-ui-mosaic";
-import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
+import { Path as Path2 } from "@dxos/react-ui-mosaic";
+import { getHostPlatform as getHostPlatform3 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
-import { DotOutline } from "@phosphor-icons/react";
 import React, { useMemo, useState } from "react";
 import { useIntentDispatcher, LayoutAction } from "@dxos/app-framework";
 import { isActionGroup, isAction } from "@dxos/app-graph";
 import { Keyboard, keySymbols } from "@dxos/keyboard";
 import { useGraph } from "@dxos/plugin-graph";
-import { Button, Dialog, useTranslation, toLocalizedString } from "@dxos/react-ui";
+import { Button, Dialog, Icon, useTranslation, toLocalizedString } from "@dxos/react-ui";
 import { SearchList } from "@dxos/react-ui-searchlist";
 import { descriptionText, mx } from "@dxos/react-ui-theme";
 import { getHostPlatform } from "@dxos/util";
@@ -68,7 +67,6 @@ var CommandsDialogContent = ({ selected: initial }) => {
   }, actions?.map((action) => {
     const label = toLocalizedString(action.properties.label, t);
     const shortcut = typeof action.properties.keyBinding === "string" ? action.properties.keyBinding : action.properties.keyBinding?.[getHostPlatform()];
-    const Icon = action.properties.icon ?? DotOutline;
     return /* @__PURE__ */ React.createElement(SearchList.Item, {
       value: label,
       key: action.id,
@@ -103,8 +101,8 @@ var CommandsDialogContent = ({ selected: initial }) => {
         "data-testid": action.properties.testId
       }
     }, /* @__PURE__ */ React.createElement(Icon, {
-      size: 4,
-      className: mx(!action.properties.icon && "invisible")
+      icon: action.properties.icon,
+      size: 4
     }), /* @__PURE__ */ React.createElement("span", {
       className: "grow truncate"
     }, label), shortcut && /* @__PURE__ */ React.createElement("span", {
@@ -121,7 +119,6 @@ var CommandsDialogContent = ({ selected: initial }) => {
 };
 
 // packages/plugins/plugin-navtree/src/components/NavBarStart.tsx
-import { DotsThreeVertical } from "@phosphor-icons/react";
 import React2, { Fragment } from "react";
 import { getGraph } from "@dxos/app-graph";
 import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
@@ -130,16 +127,17 @@ var TREE_ITEM_MAIN_HEADING = "TreeItemMainHeading";
 var NavBarStart = ({ activeNode, popoverAnchorId }) => {
   const { t } = useTranslation2(NAVTREE_PLUGIN);
   const ActionRoot = popoverAnchorId === `dxos.org/ui/${TREE_ITEM_MAIN_HEADING}/${activeNode.id}` || popoverAnchorId === `dxos.org/ui/${KEY_BINDING}/${activeNode.id}` ? Popover.Anchor : Fragment;
-  const Icon = activeNode.properties?.icon ?? DotsThreeVertical;
   const graph = getGraph(activeNode);
   const actions = graph.actions(activeNode);
   const label = toLocalizedString2(activeNode.properties?.label, t);
   const menuTriggerLabel = t("node actions menu invoker label");
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ActionRoot, null, /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
-    Icon,
+    icon: activeNode.properties?.icon ?? "ph--dots-three-vertical--regular",
     attendableId: activeNode.id,
     triggerLabel: menuTriggerLabel,
-    actions,
+    actions: [
+      actions
+    ],
     onAction: (action) => typeof action.data === "function" && action.data({
       node: action,
       caller: TREE_ITEM_MAIN_HEADING
@@ -149,94 +147,412 @@ var NavBarStart = ({ activeNode, popoverAnchorId }) => {
   }, label));
 };
 
+// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+import React4, { Fragment as Fragment2, useCallback, useEffect } from "react";
+import { isAction as isAction2 } from "@dxos/app-graph";
+import { Popover as Popover2, toLocalizedString as toLocalizedString4, Treegrid, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { Tree } from "@dxos/react-ui-list";
+
+// packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React3, { useRef, useState as useState2 } from "react";
+import { keySymbols as keySymbols2 } from "@dxos/keyboard";
+import { Button as Button2, Dialog as Dialog2, DropdownMenu, ContextMenu, Tooltip, useTranslation as useTranslation3, toLocalizedString as toLocalizedString3, Icon as Icon2 } from "@dxos/react-ui";
+import { SearchList as SearchList2 } from "@dxos/react-ui-searchlist";
+import { descriptionText as descriptionText2, hoverableControlItem, hoverableOpenControlItem, mx as mx2 } from "@dxos/react-ui-theme";
+import { getHostPlatform as getHostPlatform2 } from "@dxos/util";
+var getShortcut = (action) => {
+  return typeof action.properties?.keyBinding === "string" ? action.properties.keyBinding : action.properties?.keyBinding?.[getHostPlatform2()];
+};
+var fallbackIcon = "ph--placeholder--regular";
+var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, menuActions, menuOpen, suppressNextTooltip, onChangeMenuOpen, onAction }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
+    prop: menuOpen,
+    defaultProp: defaultMenuOpen,
+    onChange: onChangeMenuOpen
+  });
+  return /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+    open: optionsMenuOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen && suppressNextTooltip) {
+        suppressNextTooltip.current = true;
+      }
+      return setOptionsMenuOpen(nextOpen);
+    }
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button2, {
+    variant: "ghost",
+    density: "fine",
+    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
+    "data-testid": testId,
+    "aria-label": t("tree item actions label")
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "sr-only"
+  }, toLocalizedString3(label, t)), /* @__PURE__ */ React3.createElement(Icon2, {
+    icon: icon ?? fallbackIcon,
+    size: 4
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+    classNames: "z-[31]"
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, menuActions?.map((action) => {
+    const shortcut = getShortcut(action);
+    return /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+      key: action.id,
+      onClick: (event) => {
+        if (action.properties?.disabled) {
+          return;
+        }
+        event.stopPropagation();
+        if (suppressNextTooltip) {
+          suppressNextTooltip.current = true;
+        }
+        setOptionsMenuOpen(false);
+        onAction?.(action);
+      },
+      classNames: "gap-2",
+      disabled: action.properties?.disabled,
+      ...action.properties?.testId && {
+        "data-testid": action.properties.testId
+      }
+    }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: action.properties.icon,
+      size: 4
+    }), /* @__PURE__ */ React3.createElement("span", {
+      className: "grow truncate"
+    }, toLocalizedString3(action.properties.label, t)), shortcut && /* @__PURE__ */ React3.createElement("span", {
+      className: mx2("shrink-0", descriptionText2)
+    }, keySymbols2(shortcut).join("")));
+  })), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))));
+};
+var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressNextTooltip, onAction }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const [optionsMenuOpen, setOptionsMenuOpen] = useState2(false);
+  const button = useRef(null);
+  const sortedActions = menuActions?.sort(({ properties: p1 }, { properties: p2 }) => {
+    const t1 = toLocalizedString3(p1.label, t).toLowerCase();
+    const t2 = toLocalizedString3(p2.label, t).toLowerCase();
+    return t1.localeCompare(t2);
+  });
+  return /* @__PURE__ */ React3.createElement(Dialog2.Root, {
+    open: optionsMenuOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen && suppressNextTooltip) {
+        suppressNextTooltip.current = true;
+      }
+      return setOptionsMenuOpen(nextOpen);
+    }
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Dialog2.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button2, {
+    variant: "ghost",
+    density: "fine",
+    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
+    "data-testid": testId,
+    onKeyDownCapture: (event) => {
+      if (button.current && button.current === event.target) {
+        switch (event.key) {
+          case "Enter":
+          case " ":
+            event.stopPropagation();
+            setOptionsMenuOpen(true);
+            break;
+          default:
+        }
+      }
+    },
+    ref: button
+  }, /* @__PURE__ */ React3.createElement(Icon2, {
+    icon: icon ?? fallbackIcon,
+    size: 4
+  })))), /* @__PURE__ */ React3.createElement(Dialog2.Portal, null, /* @__PURE__ */ React3.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React3.createElement(Dialog2.Content, {
+    classNames: "z-[31] is-full max-is-[24rem] pli-2 plb-1"
+  }, /* @__PURE__ */ React3.createElement(SearchList2.Root, {
+    label: t("tree item searchlist input placeholder")
+  }, /* @__PURE__ */ React3.createElement(SearchList2.Input, {
+    placeholder: t("tree item searchlist input placeholder"),
+    classNames: "pli-3"
+  }), /* @__PURE__ */ React3.createElement(SearchList2.Content, {
+    classNames: "min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto"
+  }, sortedActions?.map((action) => {
+    const label2 = toLocalizedString3(action.properties.label, t);
+    const shortcut = getShortcut(action);
+    return /* @__PURE__ */ React3.createElement(SearchList2.Item, {
+      // TODO(burdon): Value should be id since label is not unique.
+      value: label2,
+      key: action.id,
+      onSelect: () => {
+        if (action.properties?.disabled) {
+          return;
+        }
+        if (suppressNextTooltip) {
+          suppressNextTooltip.current = true;
+        }
+        setOptionsMenuOpen(false);
+        onAction?.(action);
+      },
+      classNames: "flex items-center gap-2 pli-2",
+      disabled: action.properties?.disabled,
+      ...action.properties?.testId && {
+        "data-testid": action.properties.testId
+      }
+    }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon2, {
+      icon: action.properties?.icon,
+      size: 4
+    }), /* @__PURE__ */ React3.createElement("span", {
+      className: "grow truncate"
+    }, label2), shortcut && /* @__PURE__ */ React3.createElement("span", {
+      className: mx2("shrink-0", descriptionText2)
+    }, keySymbols2(shortcut).join("")));
+  })), /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "flex items-center plb-2 pli-3"
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: descriptionText2
+  }, toLocalizedString3(label, t))))))));
+};
+var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, label, icon } = {
+  label: "never"
+}, data: invoke }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button2, {
+    variant: "ghost",
+    density: "fine",
+    classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
+    disabled,
+    onClick: (event) => {
+      if (disabled) {
+        return;
+      }
+      event.stopPropagation();
+      void invoke?.(caller ? {
+        node: parent,
+        caller
+      } : {
+        node: parent
+      });
+    },
+    "data-testid": testId
+  }, /* @__PURE__ */ React3.createElement("span", {
+    className: "sr-only"
+  }, toLocalizedString3(label, t)), /* @__PURE__ */ React3.createElement(Icon2, {
+    icon: icon ?? fallbackIcon,
+    size: 4
+  })));
+};
+var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const suppressNextTooltip = useRef(false);
+  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
+  const monolithicAction = menuActions?.length === 1 && menuActions[0];
+  const baseLabel = toLocalizedString3(monolithicAction ? monolithicAction.properties.label : props.label, t);
+  return /* @__PURE__ */ React3.createElement(Tooltip.Root, {
+    open: triggerTooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (suppressNextTooltip.current) {
+        setTriggerTooltipOpen(false);
+        suppressNextTooltip.current = false;
+      } else {
+        setTriggerTooltipOpen(nextOpen);
+      }
+    }
+  }, baseLabel && /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+    classNames: "z-[31]",
+    side: "bottom"
+  }, baseLabel, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))), monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React3.createElement(NavTreeItemMonolithicAction, {
+    parent: node,
+    ...menuActions[0]
+  }) : props.menuType === "searchList" ? /* @__PURE__ */ React3.createElement(NavTreeItemActionSearchList, {
+    ...props,
+    menuActions,
+    suppressNextTooltip,
+    onAction: (action) => action.data?.(props.caller ? {
+      node,
+      caller: props.caller
+    } : {
+      node
+    })
+  }) : /* @__PURE__ */ React3.createElement(NavTreeItemActionDropdownMenu, {
+    ...props,
+    parent: node,
+    menuActions,
+    suppressNextTooltip,
+    onAction: (action) => action.data?.(props.caller ? {
+      node,
+      caller: props.caller
+    } : {
+      node
+    })
+  }));
+};
+
+// 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 }) => {
+    return /* @__PURE__ */ React4.createElement(NavTreeColumns, {
+      item,
+      menuOpen,
+      setMenuOpen,
+      loadDescendents,
+      renderPresence: renderPresence2,
+      popoverAnchorId
+    });
+  }, [
+    renderPresence2,
+    popoverAnchorId,
+    loadDescendents
+  ]);
+  return /* @__PURE__ */ React4.createElement(Tree, {
+    ...props,
+    draggable: true,
+    gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
+    classNames: "pbs-1",
+    renderColumns
+  });
+};
+var NavTreeColumns = ({ item, 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) ? [
+    action
+  ] : []).filter((action) => !action.properties?.hidden);
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover2.Anchor : Fragment2;
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      void loadDescendents?.(item.node);
+      if (primaryAction && !isAction2(primaryAction)) {
+        void loadDescendents?.(primaryAction);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    primaryAction
+  ]);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, primaryAction?.properties?.disposition === "toolbar" ? /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+    testId: primaryAction.properties?.testId,
+    label: toLocalizedString4(primaryAction.properties?.label, t),
+    icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
+    parent: item.node,
+    monolithic: isAction2(primaryAction),
+    menuActions: isAction2(primaryAction) ? [
+      primaryAction
+    ] : item.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,
+    menuActions: actions,
+    menuType: "dropdown",
+    caller: NAV_TREE_ITEM,
+    menuOpen,
+    onChangeMenuOpen: setMenuOpen
+  }) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null)), Presence && /* @__PURE__ */ React4.createElement(Presence, {
+    item
+  }));
+};
+
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
-import React4, { useCallback, useMemo as useMemo2 } from "react";
-import { NavigationAction, LayoutAction as LayoutAction2, Surface, SLUG_PATH_SEPARATOR, SLUG_COLLECTION_INDICATOR, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
-import { getGraph as getGraph2, isAction as isAction3, isActionLike } from "@dxos/app-graph";
+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 { 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 { Path as Path2 } from "@dxos/react-ui-mosaic";
-import { NavTree, getLevel } from "@dxos/react-ui-navtree";
+import { isItem } from "@dxos/react-ui-list";
 import { arrayMove } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeFooter.tsx
 import { ArrowSquareOut, GearSix, Warning } from "@phosphor-icons/react";
 import { formatDistance } from "date-fns/formatDistance";
-import React3 from "react";
+import React5 from "react";
 import { SettingsAction, useResolvePlugin, parseNavigationPlugin, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useConfig } from "@dxos/react-client";
-import { Button as Button2, Tooltip, Popover as Popover2, useSidebars, useTranslation as useTranslation3, Link, Message, Trans, useDefaultValue } from "@dxos/react-ui";
+import { Button as Button3, Tooltip as Tooltip2, Popover as Popover3, useSidebars, useTranslation as useTranslation5, Link, Message, Trans, useDefaultValue } from "@dxos/react-ui";
 import { PlankHeading as PlankHeading2 } from "@dxos/react-ui-deck";
-import { getSize, mx as mx2 } from "@dxos/react-ui-theme";
+import { getSize, mx as mx3 } from "@dxos/react-ui-theme";
 var buttonStyles = "pli-1.5 text-xs font-normal";
 var repo = "https://github.com/dxos/dxos";
 var NavTreeFooter = (props) => {
-  const layoutPart = useDefaultValue(props.layoutPart, "sidebar");
+  const layoutPart = useDefaultValue(props.layoutPart, () => "sidebar");
   const config = useConfig();
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
   const dispatch = useIntentDispatcher2();
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
   const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
   const releaseUrl = config.values.runtime?.app?.env?.DX_ENVIRONMENT === "production" ? `${repo}/releases/tag/v${version}` : `${repo}/commit/${commitHash}`;
   const previewUrl = "https://docs.dxos.org/composer#technology-preview";
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: mx2("bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content border-separator border-bs pli-1 flex justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
-  }, /* @__PURE__ */ React3.createElement(Popover2.Root, null, /* @__PURE__ */ React3.createElement(Popover2.Trigger, {
+    className: mx3("bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content border-separator border-bs pli-1 flex justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
+  }, /* @__PURE__ */ React5.createElement(Popover3.Root, null, /* @__PURE__ */ React5.createElement(Popover3.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
+  }, /* @__PURE__ */ React5.createElement(Button3, {
     variant: "ghost",
     classNames: buttonStyles,
     ...!navigationSidebarOpen && {
       tabIndex: -1
     }
-  }, "v", version)), /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, {
+  }, "v", version)), /* @__PURE__ */ React5.createElement(Popover3.Portal, null, /* @__PURE__ */ React5.createElement(Popover3.Content, {
     side: "top",
     role: "message",
     classNames: "z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]"
-  }, /* @__PURE__ */ React3.createElement(Message.Root, {
+  }, /* @__PURE__ */ React5.createElement(Message.Root, {
     valence: "warning",
     className: "rounded-be-none p-5"
-  }, /* @__PURE__ */ React3.createElement(Message.Title, null, /* @__PURE__ */ React3.createElement(Warning, {
+  }, /* @__PURE__ */ React5.createElement(Message.Title, null, /* @__PURE__ */ React5.createElement(Warning, {
     weight: "duotone",
     className: "inline mie-2 is-6 bs-6"
-  }), /* @__PURE__ */ React3.createElement("span", null, t("warning title"))), /* @__PURE__ */ React3.createElement(Message.Body, null, t("technology preview message"), /* @__PURE__ */ React3.createElement("br", null), /* @__PURE__ */ React3.createElement(Link, {
+  }), /* @__PURE__ */ React5.createElement("span", null, t("warning title"))), /* @__PURE__ */ React5.createElement(Message.Body, null, t("technology preview message"), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(Link, {
     href: previewUrl,
     target: "_blank",
     rel: "noreferrer",
     variant: "neutral"
-  }, t("learn more label"), /* @__PURE__ */ React3.createElement(ArrowSquareOut, {
+  }, t("learn more label"), /* @__PURE__ */ React5.createElement(ArrowSquareOut, {
     className: "inline mis-1",
     weight: "bold"
-  })))), /* @__PURE__ */ React3.createElement("div", {
+  })))), /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "plb-4 pli-5 space-b-2 text-baseText"
-  }, timestamp && /* @__PURE__ */ React3.createElement("p", null, t("released message", {
+  }, timestamp && /* @__PURE__ */ React5.createElement("p", null, t("released message", {
     released: formatDistance(new Date(timestamp), /* @__PURE__ */ new Date(), {
       addSuffix: true
     })
-  }), /* @__PURE__ */ React3.createElement("br", null), /* @__PURE__ */ React3.createElement(Link, {
+  }), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(Link, {
     href: releaseUrl,
     target: "_blank",
     rel: "noreferrer",
     variant: "neutral"
-  }, t("see release label"), /* @__PURE__ */ React3.createElement(ArrowSquareOut, {
+  }, t("see release label"), /* @__PURE__ */ React5.createElement(ArrowSquareOut, {
     className: "inline mis-1",
     weight: "bold"
-  }))), /* @__PURE__ */ React3.createElement("p", null, /* @__PURE__ */ React3.createElement(Trans, {
+  }))), /* @__PURE__ */ React5.createElement("p", null, /* @__PURE__ */ React5.createElement(Trans, {
     t,
     i18nKey: "powered by dxos message",
     components: {
-      dxos: /* @__PURE__ */ React3.createElement(Link, {
+      dxos: /* @__PURE__ */ React5.createElement(Link, {
         href: "https://dxos.org",
         target: "_blank",
         rel: "noreferrer",
         variant: "neutral"
       })
     }
-  }))), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+  }))), /* @__PURE__ */ React5.createElement(Popover3.Arrow, null)))), /* @__PURE__ */ React5.createElement(Tooltip2.Root, null, /* @__PURE__ */ React5.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
+  }, /* @__PURE__ */ React5.createElement(Button3, {
     variant: "ghost",
     classNames: buttonStyles,
     "data-testid": "treeView.openSettings",
@@ -247,13 +563,13 @@ var NavTreeFooter = (props) => {
     onClick: () => dispatch({
       action: SettingsAction.OPEN
     })
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React5.createElement("span", {
     className: "sr-only"
-  }, t("open settings label")), /* @__PURE__ */ React3.createElement(GearSix, {
-    className: mx2(getSize(4), "rotate-90")
-  }))), /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+  }, t("open settings label")), /* @__PURE__ */ React5.createElement(GearSix, {
+    className: mx3(getSize(4), "rotate-90")
+  }))), /* @__PURE__ */ React5.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip2.Content, {
     classNames: "z-[12]"
-  }, t("open settings label"), /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React3.createElement(PlankHeading2.Controls, {
+  }, t("open settings label"), /* @__PURE__ */ React5.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React5.createElement(PlankHeading2.Controls, {
     variant: "hide-disabled",
     capabilities: {
       incrementStart: false,
@@ -265,7 +581,7 @@ var NavTreeFooter = (props) => {
 };
 
 // packages/plugins/plugin-navtree/src/util.ts
-import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2 } from "@dxos/app-graph";
+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) => {
@@ -289,7 +605,7 @@ var resolveMigrationOperation = (graph, activeNode, destinationPath, destination
     if (persistenceParent) {
       const activeKey = activeNode.properties.persistenceKey;
       if (activeKey && persistenceParent?.properties.acceptPersistenceKey) {
-        return persistenceParent.properties.acceptPersistenceKey.has(activeKey) && destinationRelatedNode.properties.onTransferStart ? "transfer" : destinationRelatedNode.properties.onCopy ? "copy" : "reject";
+        return persistenceParent.properties.acceptPersistenceKey.has(activeKey) && persistenceParent.properties.onTransferStart ? "transfer" : persistenceParent.properties.onCopy ? "copy" : "reject";
       } else {
         return "reject";
       }
@@ -331,8 +647,11 @@ var getChildren = (graph, node, filter, path = []) => {
 };
 var getActions = (graph, node) => {
   return graph.actions(node).reduce((acc, arg) => {
+    if (arg.properties.disposition === "item") {
+      return acc;
+    }
     acc.actions.push(arg);
-    if (!isAction2(arg)) {
+    if (!isAction3(arg)) {
       const actionGroup = graph.actions(arg);
       acc.groupedActions[arg.id] = actionGroup;
     }
@@ -357,80 +676,65 @@ var expandActions = (graph, node) => {
     graph.expand(node, "outbound", ACTION_GROUP_TYPE)
   ]);
 };
-function* navTreeItemVisitor(graph, node, openItemIds, path = [], filter) {
-  const l0Children = getChildren(graph, node, filter, path);
-  const { actions: l0Actions, groupedActions: l0GroupedActions } = getActions(graph, node);
+function* navTreeItemVisitor({ graph, node, open, getItem, path = [], filter }) {
   const stack = [
-    {
-      id: node.id,
-      node,
-      path: [],
-      parentOf: (l0Children ?? []).map(({ id }) => id),
-      actions: l0Actions,
-      groupedActions: l0GroupedActions
-    }
+    getItem(node, path, filter)
   ];
   while (stack.length > 0) {
     const nextItem = stack.pop();
-    if ((nextItem.path?.length ?? 0) > 0) {
+    if (nextItem.path.length > 1) {
       yield nextItem;
     }
-    const { id, node: node2, path: path2 } = nextItem;
+    const { node: node2, path: path2 } = nextItem;
     const children = getChildren(graph, node2, filter, path2);
-    if (path2?.length === 0 || (id ?? "never") in openItemIds) {
+    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];
-        const childPath = path2 ? [
-          ...path2,
-          child.id
-        ] : [
-          child.id
-        ];
-        const childChildren = getChildren(graph, child, filter, childPath);
-        const { actions: childActions, groupedActions: childGroupedActions } = getActions(graph, child);
-        stack.push({
-          id: Path.create(...childPath),
-          node: child,
-          path: childPath,
-          ...(childChildren?.length ?? 0) > 0 && {
-            parentOf: childChildren.map(({ id: id2 }) => Path.create(...childPath, id2))
-          },
-          actions: childActions,
-          groupedActions: childGroupedActions
-        });
+        stack.push(getItem(child, path2, filter));
       }
     }
   }
 }
-var treeItemsFromRootNode = (graph, rootNode, openItemIds, path = [], filter) => {
-  return Array.from(navTreeItemVisitor(graph, rootNode, openItemIds, path, filter));
+var treeItemsFromRootNode = (graph, rootNode, open, getItem, path, filter) => {
+  return Array.from(navTreeItemVisitor({
+    graph,
+    node: rootNode,
+    open,
+    getItem,
+    path,
+    filter
+  }));
 };
-var expandOpenGraphNodes = (graph, openItemIds) => {
-  return Promise.all(Object.keys(openItemIds).map((openItemId) => {
-    const node = graph.findNode(Path.last(openItemId));
+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 = (node) => /* @__PURE__ */ React4.createElement(Surface, {
+var renderPresence = ({ item }) => /* @__PURE__ */ React6.createElement(Surface, {
   role: "presence--glyph",
   data: {
-    object: node.data
+    object: item.node.data,
+    id: item.node.id
   }
 });
-var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, attended, popoverAnchorId }) => {
+var NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }) => {
   const { closeNavigationSidebar } = useSidebars2(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const dispatch = useIntentDispatcher3();
-  const graph = useMemo2(() => getGraph2(root), [
-    root
-  ]);
-  const items = treeItemsFromRootNode(graph, root, openItemIds);
-  const loadDescendents = useCallback((node) => {
+  const { graph } = useGraph2();
+  const loadDescendents = useCallback2((node) => {
     void expandActions(graph, node);
     if (!isActionLike(node)) {
       void expandChildren(graph, node).then(() => (
@@ -444,279 +748,130 @@ var NavTreeContainer = ({ root, activeIds, openItemIds, onOpenItemIdsChange, att
   }, [
     graph
   ]);
-  const handleNavigate = async ({ node, actions }) => {
+  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);
+    } else {
+      return false;
+    }
+  }, []);
+  const handleSelect = useCallback2(({ node, actions, path }) => {
     if (!node.data) {
       return;
     }
-    await dispatch({
+    if (isAction4(node)) {
+      const [parentId] = path.slice(1);
+      const parent = items.find(({ id }) => id === parentId)?.node;
+      void (parent && node.data({
+        node: parent,
+        caller: NAV_TREE_ITEM
+      }));
+      return;
+    }
+    void dispatch({
       action: NavigationAction.OPEN,
       data: {
-        activeParts: node.data?.comments ? {
-          main: [
-            node.id
-          ],
-          complementary: [
-            `${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
-          ]
-        } : {
+        activeParts: {
           main: [
             node.id
           ]
         }
       }
     });
-    await dispatch({
-      action: LayoutAction2.SCROLL_INTO_VIEW,
-      data: {
-        id: node.id
-      }
-    });
     const defaultAction = actions?.find((action) => action.properties?.disposition === "default");
-    if (isAction3(defaultAction)) {
+    if (isAction4(defaultAction)) {
       void defaultAction.data();
     }
     if (!isLg) {
       closeNavigationSidebar();
     }
-  };
-  const handleItemOpenChange = ({ id, actions, path }, nextOpen) => {
-    if (path) {
-      if (nextOpen) {
-        onOpenItemIdsChange({
-          ...openItemIds,
-          [id]: true
-        });
-      } else {
-        const { [id]: _, ...nextOpenItemIds } = openItemIds;
-        onOpenItemIdsChange(nextOpenItemIds);
-      }
-    }
-    const defaultAction = actions?.find((action) => action.properties?.disposition === "default");
-    if (isAction3(defaultAction)) {
-      void defaultAction.data();
-    }
-  };
-  const resolveItemLevel = useCallback((overPosition, activeId, levelOffset) => {
-    if (!(typeof overPosition === "number" && activeId)) {
-      return 1;
-    } else {
-      const nextItems = arrayMove(items, items.findIndex(({ id }) => id === activeId), overPosition);
-      const previousItem = nextItems[overPosition - 1];
-      const nextItem = nextItems[overPosition + 1];
-      return Math.min(previousItem ? getLevel(previousItem?.path) + 1 : 1, Math.max(nextItem ? getLevel(nextItem?.path) : 1, getLevel(nextItems[overPosition].path) + levelOffset));
-    }
   }, [
-    items
+    items,
+    dispatch,
+    isLg,
+    closeNavigationSidebar
   ]);
-  const handleMove = useCallback(({ active, over, details }) => {
-    const levelOffset = Math.floor((details?.delta?.x ?? 0) / 16);
-    const overPosition = over.position ?? 0;
-    const nextItems = arrayMove(items, items.findIndex(({ id }) => id === active.item.id), overPosition);
-    const previousItem = nextItems[overPosition - 1];
-    const nextItem = nextItems[overPosition + 1];
-    const activeNode = "node" in active.item ? active.item.node : void 0;
-    if (!activeNode || !previousItem || !previousItem.path) {
-      return {
-        operation: "reject",
-        details: {
-          levelOffset
+  useEffect2(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        if (!location.current.dropTargets.length) {
+          return;
         }
-      };
-    }
-    const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-    const previousLevel = getLevel(previousItem.path);
-    if (previousLevel === overLevel - 1) {
-      if (Path2.hasChild(previousItem.id, active.item.id)) {
-        const operation = previousItem.node.properties.onRearrangeChildren ? "rearrange" : "reject";
-        return {
-          operation,
-          details: {
-            levelOffset
-          }
-        };
-      } else {
-        const operation = resolveMigrationOperation(graph, activeNode, previousItem.path, previousItem.node);
-        return {
-          operation,
-          details: {
-            levelOffset
-          }
-        };
-      }
-    } else if (previousLevel === overLevel) {
-      const parent = getParent(graph, previousItem.node, previousItem.path);
-      const parentPath = previousItem.path.slice(0, previousItem.path.length - 1);
-      if (Path2.siblings(previousItem.id, active.item.id)) {
-        const operation = parent?.properties.onRearrangeChildren ? "rearrange" : "reject";
-        return {
-          operation,
-          details: {
-            levelOffset
-          }
-        };
-      } else {
-        const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
-        return {
-          operation,
-          details: {
-            levelOffset
-          }
-        };
-      }
-    } else if (nextItem && nextItem.path) {
-      const nextLevel = getLevel(nextItem.path);
-      if (nextLevel === overLevel) {
-        const parent = getParent(graph, nextItem.node, nextItem.path);
-        const parentPath = nextItem.path.slice(0, nextItem.path.length - 1);
-        if (Path2.siblings(nextItem.id, active.item.id)) {
-          const operation = parent?.properties.onRearrangeChildren ? "rearrange" : "reject";
-          return {
-            operation,
-            details: {
-              levelOffset
+        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 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;
+          switch (operation) {
+            case "rearrange": {
+              arrayMove(nextItems, sourceIndex, targetIndex);
+              void sourceParent?.properties.onRearrangeChildren?.(nextItems.map((item) => item.node.data));
+              break;
             }
-          };
-        } else {
-          const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
-          return {
-            operation,
-            details: {
-              levelOffset
+            case "copy": {
+              const target2 = instruction.type === "make-child" ? targetNode : targetParent;
+              void target2?.properties.onCopy?.(sourceNode, migrationIndex);
+              break;
+            }
+            case "transfer": {
+              const target2 = instruction.type === "make-child" ? targetNode : targetParent;
+              if (!target2?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                break;
+              }
+              void target2?.properties.onTransferStart(sourceNode, migrationIndex);
+              void sourceParent?.properties.onTransferEnd?.(sourceNode, target2);
+              break;
             }
-          };
-        }
-      } else {
-        return {
-          operation: "reject",
-          details: {
-            levelOffset
-          }
-        };
-      }
-    } else {
-      return {
-        operation: "reject",
-        details: {
-          levelOffset
-        }
-      };
-    }
-  }, [
-    root,
-    items
-  ]);
-  const handleDrop = useCallback(({ operation, active, over, details = {} }) => {
-    if (Path2.first(over.path) !== root.id) {
-      return void 0;
-    }
-    const { levelOffset = 0 } = details;
-    const overPosition = over.position ?? 0;
-    const nextItems = arrayMove(items, items.findIndex(({ id }) => id === active.item.id), overPosition);
-    const activeNode = "node" in active.item ? active.item.node : void 0;
-    const activeParentId = Path2.parent(active.item.id);
-    if (!activeNode) {
-      return void 0;
-    }
-    const activeParent = getParent(graph, activeNode, active.item.path ?? []);
-    if (operation === "rearrange") {
-      void activeParent?.properties.onRearrangeChildren?.(nextItems.filter(({ id }) => Path2.hasChild(activeParentId, id)).map(({ node }) => node.data));
-      return null;
-    } else {
-      const previousItem = nextItems[overPosition - 1];
-      const nextItem = nextItems[overPosition + 1];
-      const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-      const previousLevel = getLevel(previousItem.path);
-      if (operation === "copy") {
-        if (previousLevel === overLevel - 1) {
-          void previousItem.node.properties.onCopy?.(activeNode, 0);
-          return null;
-        } else if (previousLevel === overLevel) {
-          const parent = getParent(graph, previousItem.node, previousItem.path ?? []);
-          void parent?.properties.onCopy?.(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1);
-          return null;
-        } else if (nextItem && nextItem.path) {
-          const parent = getParent(graph, nextItem.node, nextItem.path ?? []);
-          void parent?.properties.onCopy?.(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id));
-          return null;
-        }
-      } else if (operation === "transfer") {
-        const onTransferEnd = activeParent?.properties.onTransferEnd;
-        if (!onTransferEnd) {
-          return void 0;
-        } else if (previousLevel === overLevel - 1) {
-          const onTransferStart = previousItem.node.properties.onTransferStart;
-          if (onTransferStart) {
-            void onTransferEnd(activeNode, previousItem.node);
-            void onTransferStart(activeNode, 0);
-            return null;
-          }
-        } else if (previousLevel === overLevel && previousItem.path) {
-          const parent = getParent(graph, previousItem.node, previousItem.path);
-          if (parent?.properties.onTransferStart) {
-            void onTransferEnd(activeNode, previousItem.node);
-            void parent.properties.onTransferStart(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1);
-            return null;
-          }
-        } else if (nextItem && nextItem.path) {
-          const parent = getParent(graph, nextItem.node, nextItem.path);
-          if (parent?.properties.onTransferStart) {
-            void onTransferEnd(activeNode, previousItem.node);
-            void parent.properties.onTransferStart(activeNode, getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id));
-            return null;
           }
         }
       }
-    }
-    return void 0;
-  }, [
-    root,
-    items
-  ]);
-  const handleDragEnd = useCallback(() => {
-    onOpenItemIdsChange({
-      ...openItemIds
     });
   }, [
-    onOpenItemIdsChange,
-    openItemIds
+    items
   ]);
-  return /* @__PURE__ */ React4.createElement(ElevationProvider, {
+  return /* @__PURE__ */ React6.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]"
-  }, /* @__PURE__ */ React4.createElement(Surface, {
+  }, /* @__PURE__ */ React6.createElement(Surface, {
     role: "search-input",
     limit: 1
-  }), /* @__PURE__ */ React4.createElement("div", {
+  }), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "!overflow-y-auto"
-  }, /* @__PURE__ */ React4.createElement(NavTree, {
-    id: root.id,
+  }, /* @__PURE__ */ React6.createElement(NavTree, {
     items,
-    current: activeIds,
-    attended,
-    type: NODE_TYPE,
-    open: openItemIds,
-    onNavigate: handleNavigate,
-    onItemOpenChange: handleItemOpenChange,
-    onMove: handleMove,
-    onDrop: handleDrop,
-    onDragEnd: handleDragEnd,
-    popoverAnchorId,
+    open,
+    current,
+    loadDescendents,
     renderPresence,
-    resolveItemLevel,
-    loadDescendents
-  })), /* @__PURE__ */ React4.createElement(NavTreeFooter, null)));
+    popoverAnchorId,
+    canDrop,
+    onSelect: handleSelect,
+    ...props
+  })), /* @__PURE__ */ React6.createElement(NavTreeFooter, null)));
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
-import { useEffect } from "react";
-import { toLocalizedString as toLocalizedString3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { useEffect as useEffect3 } from "react";
+import { toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
 var NavTreeDocumentTitle = ({ node }) => {
-  const { t } = useTranslation4(NAVTREE_PLUGIN);
-  useEffect(() => {
-    document.title = node ? toLocalizedString3(node.properties.label, t) : t("current app name", {
+  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  useEffect3(() => {
+    document.title = node ? toLocalizedString5(node.properties.label, t) : t("current app name", {
       ns: "appkit"
     });
   }, [
@@ -726,37 +881,37 @@ var NavTreeDocumentTitle = ({ node }) => {
 };
 
 // packages/plugins/plugin-navtree/src/components/NotchStart.tsx
-import React6 from "react";
+import React8 from "react";
 import { useIntentDispatcher as useIntentDispatcher4, useResolvePlugin as useResolvePlugin2 } from "@dxos/app-framework";
 import { ClientAction } from "@dxos/plugin-client/meta";
 import { parseObservabilityPlugin } from "@dxos/plugin-observability";
 import { useIdentity } from "@dxos/react-client/halo";
 
 // packages/plugins/plugin-navtree/src/components/HaloButton.tsx
-import React5 from "react";
+import React7 from "react";
 import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
 import { Avatar } from "@dxos/react-ui";
-import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
+import { focusRing, mx as mx4 } from "@dxos/react-ui-theme";
 import { hexToFallback } from "@dxos/util";
 var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
 var HaloButton = (props) => {
   const { onClick, identityKey, internal, size = 8 } = props;
   const fallbackValue = hexToFallback(identityKey ?? "0");
   const { swarm: connectionState } = useNetworkStatus();
-  return /* @__PURE__ */ React5.createElement("button", {
-    className: mx3(focusRing, "rounded grid place-items-center"),
+  return /* @__PURE__ */ React7.createElement("button", {
+    className: mx4(focusRing, "rounded grid place-items-center"),
     onClick
-  }, /* @__PURE__ */ React5.createElement(Avatar.Root, {
+  }, /* @__PURE__ */ React7.createElement(Avatar.Root, {
     size,
     variant: "circle",
     status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
     hue: props.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React5.createElement(Avatar.Frame, {
+  }, /* @__PURE__ */ React7.createElement(Avatar.Frame, {
     "data-testid": "treeView.haloButton",
     "data-joyride": "welcome/halo"
-  }, internal ? /* @__PURE__ */ React5.createElement(Avatar.Image, {
+  }, internal ? /* @__PURE__ */ React7.createElement(Avatar.Image, {
     href: INTERNAL
-  }) : /* @__PURE__ */ React5.createElement(Avatar.Fallback, {
+  }) : /* @__PURE__ */ React7.createElement(Avatar.Fallback, {
     text: props.emoji || fallbackValue.emoji
   }))));
 };
@@ -766,7 +921,7 @@ var NotchStart = () => {
   const identity = useIdentity();
   const observabilityPlugin = useResolvePlugin2(parseObservabilityPlugin);
   const dispatch = useIntentDispatcher4();
-  return /* @__PURE__ */ React6.createElement(HaloButton, {
+  return /* @__PURE__ */ React8.createElement(HaloButton, {
     size: 8,
     identityKey: identity?.identityKey.toHex(),
     hue: identity?.profile?.data?.hue,
@@ -780,32 +935,31 @@ var NotchStart = () => {
 
 // packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
 import { MagnifyingGlass } from "@phosphor-icons/react";
-import React7 from "react";
-import { LayoutAction as LayoutAction3, useIntent } from "@dxos/app-framework";
-import { Button as Button3, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import React9 from "react";
+import { LayoutAction as LayoutAction2, 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 = () => {
   const { dispatch } = useIntent();
-  const { t } = useTranslation5(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React7.createElement(Button3, {
+  const { t } = useTranslation7(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React9.createElement(Button4, {
     classNames: "pis-3 pie-2 gap-2 mli-1 mbs-1 min-bs-0 bs-[--rail-action] justify-start",
     onClick: () => dispatch({
-      action: LayoutAction3.SET_LAYOUT,
+      action: LayoutAction2.SET_LAYOUT,
       data: {
         element: "dialog",
         component: `${NAVTREE_PLUGIN}/Commands`,
         dialogBlockAlign: "start"
       }
     })
-  }, /* @__PURE__ */ React7.createElement("span", {
+  }, /* @__PURE__ */ React9.createElement("span", {
     className: "text-description font-normal grow text-start"
-  }, t("command list input placeholder")), /* @__PURE__ */ React7.createElement(MagnifyingGlass, {
+  }, t("command list input placeholder")), /* @__PURE__ */ React9.createElement(MagnifyingGlass, {
     className: getSize2(5)
   }));
 };
 
 // packages/plugins/plugin-navtree/src/translations.ts
-import { translations as navtreeTranslations } from "@dxos/react-ui-navtree";
 var translations_default = [
   {
     "en-US": {
@@ -820,29 +974,87 @@ var translations_default = [
         "learn more label": "Learn more",
         "released message": "This version released {{released}}.",
         "see release label": "See release on GitHub",
-        "powered by dxos message": "Powered by <dxos>DXOS</dxos>"
+        "powered by dxos message": "Powered by <dxos>DXOS</dxos>",
+        "tree item actions label": "More actions",
+        "tree item searchlist input placeholder": "Search for actions\u2026",
+        "empty branch message": "\xA0"
       }
     }
-  },
-  ...navtreeTranslations
+  }
 ];
 
 // packages/plugins/plugin-navtree/src/NavTreePlugin.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/NavTreePlugin.tsx";
 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.
-    openItemIds: {
-      root: true,
-      "dxos.org/plugin/space-spaces": true,
-      "dxos.org/plugin/files": true
-    }
+    open: [
+      "root",
+      "root~dxos.org/plugin/space-spaces",
+      "root~dxos.org/plugin/files"
+    ]
   });
-  let graphPlugin;
-  let graph;
-  const handleOpenItemIdsChange = (nextOpenItemIds) => {
-    state.values.openItemIds = nextOpenItemIds;
+  const getItem = (node, parent, filter) => {
+    invariant(graph, void 0, {
+      F: __dxlog_file,
+      L: 80,
+      S: void 0,
+      A: [
+        "graph",
+        ""
+      ]
+    });
+    const path = [
+      ...parent,
+      node.id
+    ];
+    const { actions, groupedActions } = getActions(graph, node);
+    const children = getChildren(graph, node, filter, path);
+    const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : 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: 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;
+    }
+  };
+  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);
+      }
+    }
     if (graph) {
-      void expandOpenGraphNodes(graph, nextOpenItemIds);
+      void expandOpenGraphNodes(graph, state.values.open);
     }
   };
   return {
@@ -857,22 +1069,21 @@ var NavTreePlugin = () => {
       getChildren(graph, state.values.root);
       getActions(graph, state.values.root);
       state.prop({
-        key: "openItemIds",
-        storageKey: "openItemIds",
+        key: "open",
         type: LocalStorageStore.json()
       });
-      void expandOpenGraphNodes(graph, state.values.openItemIds);
+      void expandOpenGraphNodes(graph, state.values.open);
       graph.subscribeTraverse({
         visitor: (node, path) => {
           let shortcut;
           if (typeof node.properties.keyBinding === "object") {
             const availablePlatforms = Object.keys(node.properties.keyBinding);
-            const platform = getHostPlatform2();
+            const platform = getHostPlatform3();
             shortcut = availablePlatforms.includes(platform) ? node.properties.keyBinding[platform] : platform === "ios" ? node.properties.keyBinding.macos : platform === "linux" || platform === "unknown" ? node.properties.keyBinding.windows : void 0;
           } else {
             shortcut = node.properties.keyBinding;
           }
-          if (shortcut && isAction4(node)) {
+          if (shortcut && isAction5(node)) {
             Keyboard2.singleton.getContext(path.slice(0, -1).join("/")).bind({
               shortcut,
               handler: () => {
@@ -917,33 +1128,29 @@ var NavTreePlugin = () => {
           switch (data.component) {
             case `${NAVTREE_PLUGIN}/Commands`: {
               const selected = typeof data.subject === "string" ? data.subject : void 0;
-              return /* @__PURE__ */ React8.createElement(CommandsDialogContent, {
+              return /* @__PURE__ */ React10.createElement(CommandsDialogContent, {
                 selected
               });
             }
           }
           switch (role) {
             case "navigation":
-              if (state.values.root && state.values.openItemIds) {
-                return /* @__PURE__ */ React8.createElement(NavTreeContainer, {
-                  root: state.values.root,
-                  activeIds: data.activeIds,
-                  openItemIds: state.values.openItemIds,
-                  onOpenItemIdsChange: handleOpenItemIdsChange,
-                  attended: data.attended,
-                  popoverAnchorId: data.popoverAnchorId
-                });
-              }
-              break;
+              return /* @__PURE__ */ React10.createElement(NavTreeContainer, {
+                items: state.values.flatTree,
+                current: data.activeIds,
+                open: state.values.open,
+                onOpenChange: handleOpenChange,
+                popoverAnchorId: data.popoverAnchorId
+              });
             case "document-title": {
-              return /* @__PURE__ */ React8.createElement(NavTreeDocumentTitle, {
+              return /* @__PURE__ */ React10.createElement(NavTreeDocumentTitle, {
                 node: isGraphNode(data.activeNode) ? data.activeNode : void 0
               });
             }
             case "navbar-start": {
               if (state.values.root && data.activeNode) {
                 return {
-                  node: /* @__PURE__ */ React8.createElement(NavBarStart, {
+                  node: /* @__PURE__ */ React10.createElement(NavBarStart, {
                     activeNode: data.activeNode,
                     popoverAnchorId: data.popoverAnchorId
                   }),
@@ -953,10 +1160,10 @@ var NavTreePlugin = () => {
               break;
             }
             case "notch-start":
-              return /* @__PURE__ */ React8.createElement(NotchStart, null);
+              return /* @__PURE__ */ React10.createElement(NotchStart, null);
             case "search-input":
               return {
-                node: /* @__PURE__ */ React8.createElement(CommandsTrigger, null),
+                node: /* @__PURE__ */ React10.createElement(CommandsTrigger, null),
                 disposition: "fallback"
               };
           }
@@ -973,18 +1180,15 @@ var NavTreePlugin = () => {
                 });
                 if (Array.isArray(path)) {
                   const additionalOpenItems = [
-                    ...Array(path.length - 1)
+                    ...Array(path.length)
                   ].reduce((acc, _, index) => {
-                    const itemId = Path3.create(...path.slice(1, index + 1));
+                    const itemId = Path2.create(...path.slice(0, index));
                     if (itemId.length > 0) {
-                      acc[itemId] = true;
+                      acc.push(itemId);
                     }
                     return acc;
-                  }, {});
-                  state.values.openItemIds = {
-                    ...additionalOpenItems,
-                    ...state.values.openItemIds
-                  };
+                  }, []);
+                  state.values.open.push(...additionalOpenItems);
                 }
               }
               break;
@@ -1004,7 +1208,7 @@ var NavTreePlugin = () => {
                   id: "dxos.org/plugin/navtree/open-commands",
                   data: async () => {
                     await intentPlugin?.provides.intent.dispatch({
-                      action: LayoutAction4.SET_LAYOUT,
+                      action: LayoutAction3.SET_LAYOUT,
                       data: {
                         element: "dialog",
                         component: `${NAVTREE_PLUGIN}/Commands`,
@@ -1019,8 +1223,7 @@ var NavTreePlugin = () => {
                         ns: NAVTREE_PLUGIN
                       }
                     ],
-                    icon: (props) => /* @__PURE__ */ React8.createElement(MagnifyingGlass2, props),
-                    iconSymbol: "ph--magnifying-glass--regular",
+                    icon: "ph--magnifying-glass--regular",
                     keyBinding: {
                       macos: "meta+k",
                       windows: "ctrl+k"