@dxos/plugin-navtree 0.7.2 → 0.7.3-staging.0905f03

package/dist/lib/browser/index.mjs

@@ -6,11 +6,11 @@ import {
 
 // 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, parseLayoutPlugin } from "@dxos/app-framework";
+import React9 from "react";
+import { LayoutAction as LayoutAction4, NavigationAction as NavigationAction2, parseGraphPlugin, parseIntentPlugin, parseLayoutPlugin, parseNavigationPlugin as parseNavigationPlugin2, resolvePlugin } from "@dxos/app-framework";
 import { createExtension, isAction as isAction5, isGraphNode } from "@dxos/app-graph";
-import { create } from "@dxos/echo-schema";
 import { Keyboard as Keyboard2 } from "@dxos/keyboard";
+import { create } from "@dxos/live-object";
 import { Path } from "@dxos/react-ui-mosaic";
 import { getHostPlatform as getHostPlatform3 } from "@dxos/util";
 
@@ -118,46 +118,17 @@ var CommandsDialogContent = ({ selected: initial }) => {
   }))));
 };
 
-// packages/plugins/plugin-navtree/src/components/NavBarStart.tsx
-import React2, { Fragment } from "react";
-import { getGraph } from "@dxos/app-graph";
-import { Popover, toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { StackItem } from "@dxos/react-ui-stack";
-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 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(StackItem.Sigil, {
-    icon: activeNode.properties?.icon ?? "ph--dots-three-vertical--regular",
-    attendableId: activeNode.id,
-    triggerLabel: menuTriggerLabel,
-    actions: [
-      actions
-    ],
-    onAction: (action) => typeof action.data === "function" && action.data({
-      node: action,
-      caller: TREE_ITEM_MAIN_HEADING
-    })
-  })), /* @__PURE__ */ React2.createElement(StackItem.HeadingLabel, {
-    attendableId: activeNode.id
-  }, label));
-};
-
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
-import React4, { Fragment as Fragment2, useCallback, useEffect } from "react";
+import React3, { Fragment, 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 { Popover, toLocalizedString as toLocalizedString3, Treegrid, useTranslation as useTranslation3 } 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 React2, { 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 { Button as Button2, Dialog as Dialog2, DropdownMenu, ContextMenu, Tooltip, useTranslation as useTranslation2, toLocalizedString as toLocalizedString2, 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";
@@ -166,13 +137,13 @@ var getShortcut = (action) => {
 };
 var fallbackIcon = "ph--placeholder--regular";
 var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, menuActions, menuOpen, suppressNextTooltip, onChangeMenuOpen, onAction }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const { t } = useTranslation2(NAVTREE_PLUGIN);
   const [optionsMenuOpen, setOptionsMenuOpen] = useControllableState({
     prop: menuOpen,
     defaultProp: defaultMenuOpen,
     onChange: onChangeMenuOpen
   });
-  return /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen && suppressNextTooltip) {
@@ -180,26 +151,26 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, men
       }
       return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
+  }, /* @__PURE__ */ React2.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", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, toLocalizedString3(label, t)), /* @__PURE__ */ React3.createElement(Icon2, {
+  }, toLocalizedString2(label, t)), /* @__PURE__ */ React2.createElement(Icon2, {
     icon: icon ?? fallbackIcon,
     size: 4
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
     classNames: "z-[31]"
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, menuActions?.map((action) => {
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, menuActions?.map((action) => {
     const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
       key: action.id,
       onClick: (event) => {
         if (action.properties?.disabled) {
@@ -217,26 +188,26 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, defaultMenuOpen, men
       ...action.properties?.testId && {
         "data-testid": action.properties.testId
       }
-    }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon2, {
+    }, action.properties?.icon && /* @__PURE__ */ React2.createElement(Icon2, {
       icon: action.properties.icon,
       size: 4
-    }), /* @__PURE__ */ React3.createElement("span", {
+    }), /* @__PURE__ */ React2.createElement("span", {
       className: "grow truncate"
-    }, toLocalizedString3(action.properties.label, t)), shortcut && /* @__PURE__ */ React3.createElement("span", {
+    }, toLocalizedString2(action.properties.label, t)), shortcut && /* @__PURE__ */ React2.createElement("span", {
       className: mx2("shrink-0", descriptionText2)
     }, keySymbols2(shortcut).join("")));
-  })), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))));
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
 };
 var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressNextTooltip, onAction }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const { t } = useTranslation2(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();
+    const t1 = toLocalizedString2(p1.label, t).toLowerCase();
+    const t2 = toLocalizedString2(p2.label, t).toLowerCase();
     return t1.localeCompare(t2);
   });
-  return /* @__PURE__ */ React3.createElement(Dialog2.Root, {
+  return /* @__PURE__ */ React2.createElement(Dialog2.Root, {
     open: optionsMenuOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen && suppressNextTooltip) {
@@ -244,11 +215,11 @@ var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressN
       }
       return setOptionsMenuOpen(nextOpen);
     }
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Dialog2.Trigger, {
+  }, /* @__PURE__ */ React2.createElement(Dialog2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
+  }, /* @__PURE__ */ React2.createElement(Button2, {
     variant: "ghost",
     density: "fine",
     classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
@@ -266,22 +237,22 @@ var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressN
       }
     },
     ref: button
-  }, /* @__PURE__ */ React3.createElement(Icon2, {
+  }, /* @__PURE__ */ React2.createElement(Icon2, {
     icon: icon ?? fallbackIcon,
     size: 4
-  })))), /* @__PURE__ */ React3.createElement(Dialog2.Portal, null, /* @__PURE__ */ React3.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React3.createElement(Dialog2.Content, {
+  })))), /* @__PURE__ */ React2.createElement(Dialog2.Portal, null, /* @__PURE__ */ React2.createElement(Dialog2.Overlay, null, /* @__PURE__ */ React2.createElement(Dialog2.Content, {
     classNames: "z-[31] is-full max-is-[24rem] pli-2 plb-1"
-  }, /* @__PURE__ */ React3.createElement(SearchList2.Root, {
+  }, /* @__PURE__ */ React2.createElement(SearchList2.Root, {
     label: t("tree item searchlist input placeholder")
-  }, /* @__PURE__ */ React3.createElement(SearchList2.Input, {
+  }, /* @__PURE__ */ React2.createElement(SearchList2.Input, {
     placeholder: t("tree item searchlist input placeholder"),
     classNames: "pli-3"
-  }), /* @__PURE__ */ React3.createElement(SearchList2.Content, {
+  }), /* @__PURE__ */ React2.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 label2 = toLocalizedString2(action.properties.label, t);
     const shortcut = getShortcut(action);
-    return /* @__PURE__ */ React3.createElement(SearchList2.Item, {
+    return /* @__PURE__ */ React2.createElement(SearchList2.Item, {
       // TODO(burdon): Value should be id since label is not unique.
       value: label2,
       key: action.id,
@@ -300,28 +271,28 @@ var NavTreeItemActionSearchList = ({ menuActions, icon, label, testId, suppressN
       ...action.properties?.testId && {
         "data-testid": action.properties.testId
       }
-    }, action.properties?.icon && /* @__PURE__ */ React3.createElement(Icon2, {
+    }, action.properties?.icon && /* @__PURE__ */ React2.createElement(Icon2, {
       icon: action.properties?.icon,
       size: 4
-    }), /* @__PURE__ */ React3.createElement("span", {
+    }), /* @__PURE__ */ React2.createElement("span", {
       className: "grow truncate"
-    }, label2), shortcut && /* @__PURE__ */ React3.createElement("span", {
+    }, label2), shortcut && /* @__PURE__ */ React2.createElement("span", {
       className: mx2("shrink-0", descriptionText2)
     }, keySymbols2(shortcut).join("")));
-  })), /* @__PURE__ */ React3.createElement("div", {
+  })), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
     className: "flex items-center plb-2 pli-3"
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: descriptionText2
-  }, toLocalizedString3(label, t))))))));
+  }, toLocalizedString2(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, {
+  const { t } = useTranslation2(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
+  }, /* @__PURE__ */ React2.createElement(Button2, {
     variant: "ghost",
     density: "fine",
     classNames: mx2("shrink-0 !pli-2 pointer-fine:!pli-1", hoverableControlItem, hoverableOpenControlItem),
@@ -339,20 +310,20 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
       });
     },
     "data-testid": testId
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, toLocalizedString3(label, t)), /* @__PURE__ */ React3.createElement(Icon2, {
+  }, toLocalizedString2(label, t)), /* @__PURE__ */ React2.createElement(Icon2, {
     icon: icon ?? fallbackIcon,
     size: 4
   })));
 };
 var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const { t } = useTranslation2(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, {
+  const baseLabel = toLocalizedString2(monolithicAction ? monolithicAction.properties.label : props.label, t);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
     onOpenChange: (nextOpen) => {
       if (suppressNextTooltip.current) {
@@ -362,13 +333,13 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
         setTriggerTooltipOpen(nextOpen);
       }
     }
-  }, baseLabel && /* @__PURE__ */ React3.createElement(Tooltip.Portal, null, /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+  }, baseLabel && /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
     classNames: "z-[31]",
     side: "bottom"
-  }, baseLabel, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null))), monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React3.createElement(NavTreeItemMonolithicAction, {
+  }, baseLabel, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))), monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React2.createElement(NavTreeItemMonolithicAction, {
     parent: node,
     ...menuActions[0]
-  }) : props.menuType === "searchList" ? /* @__PURE__ */ React3.createElement(NavTreeItemActionSearchList, {
+  }) : props.menuType === "searchList" ? /* @__PURE__ */ React2.createElement(NavTreeItemActionSearchList, {
     ...props,
     menuActions,
     suppressNextTooltip,
@@ -378,7 +349,7 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
     } : {
       node
     })
-  }) : /* @__PURE__ */ React3.createElement(NavTreeItemActionDropdownMenu, {
+  }) : /* @__PURE__ */ React2.createElement(NavTreeItemActionDropdownMenu, {
     ...props,
     parent: node,
     menuActions,
@@ -394,39 +365,39 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
 var NAV_TREE_ITEM = "NavTreeItem";
-var NavTree = ({ getActions: getActions2, loadDescendents, renderPresence: renderPresence2, popoverAnchorId, ...props }) => {
+var NavTree = ({ getActions: getActions2, loadDescendents, renderItemEnd: renderItemEnd2, popoverAnchorId, ...props }) => {
   const renderColumns = useCallback(({ item, path, menuOpen, setMenuOpen }) => {
-    return /* @__PURE__ */ React4.createElement(NavTreeColumns, {
+    return /* @__PURE__ */ React3.createElement(NavTreeColumns, {
       path,
       node: item,
       getActions: getActions2,
       menuOpen,
       setMenuOpen,
       loadDescendents,
-      renderPresence: renderPresence2,
+      renderItemEnd: renderItemEnd2,
       popoverAnchorId
     });
   }, [
-    renderPresence2,
+    renderItemEnd2,
     popoverAnchorId,
     loadDescendents
   ]);
-  return /* @__PURE__ */ React4.createElement(Tree, {
+  return /* @__PURE__ */ React3.createElement(Tree, {
     ...props,
     draggable: true,
     gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
     renderColumns
   });
 };
-var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOpen, loadDescendents, renderPresence: Presence, popoverAnchorId }) => {
-  const { t } = useTranslation4(NAVTREE_PLUGIN);
+var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOpen, loadDescendents, renderItemEnd: ItemEnd, popoverAnchorId }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
   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}/${node.id}` ? Popover2.Anchor : Fragment2;
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover.Anchor : Fragment;
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
       void loadDescendents?.(node);
@@ -438,9 +409,9 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOp
   }, [
     primaryAction
   ]);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, primaryAction?.properties?.disposition === "toolbar" ? /* @__PURE__ */ React4.createElement(NavTreeItemAction, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, primaryAction?.properties?.disposition === "toolbar" ? /* @__PURE__ */ React3.createElement(NavTreeItemAction, {
     testId: primaryAction.properties?.testId,
-    label: toLocalizedString4(primaryAction.properties?.label, t),
+    label: toLocalizedString3(primaryAction.properties?.label, t),
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
     parent: node,
     monolithic: isAction2(primaryAction),
@@ -449,7 +420,7 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOp
     ] : 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, {
+  }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null), /* @__PURE__ */ React3.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React3.createElement(NavTreeItemAction, {
     testId: `navtree.treeItem.actionsLevel${level}`,
     label: t("tree item actions label"),
     icon: "ph--dots-three-vertical--regular",
@@ -459,7 +430,7 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOp
     caller: NAV_TREE_ITEM,
     menuOpen,
     onChangeMenuOpen: setMenuOpen
-  }) : /* @__PURE__ */ React4.createElement(Treegrid.Cell, null)), Presence && /* @__PURE__ */ React4.createElement(Presence, {
+  }) : /* @__PURE__ */ React3.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React3.createElement(ItemEnd, {
     node
   }));
 };
@@ -468,8 +439,8 @@ var NavTreeColumns = ({ path, node, getActions: getActions2, menuOpen, setMenuOp
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { untracked } from "@preact/signals-core";
-import React6, { memo, useCallback as useCallback2, useEffect as useEffect2 } from "react";
-import { NavigationAction, Surface, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import React5, { 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";
@@ -481,10 +452,10 @@ 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 React5 from "react";
+import React4 from "react";
 import { SettingsAction, parseNavigationPlugin, useResolvePlugin, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useConfig } from "@dxos/react-client";
-import { Button as Button3, Link, Message, Popover as Popover3, Tooltip as Tooltip2, Trans, useDefaultValue, useSidebars, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Button as Button3, Link, Message, Popover as Popover2, Tooltip as Tooltip2, Trans, useDefaultValue, useSidebars, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { LayoutControls } from "@dxos/react-ui-stack";
 import { getSize, mx as mx3 } from "@dxos/react-ui-theme";
 var buttonStyles = "pli-1.5 text-xs font-normal";
@@ -493,7 +464,7 @@ var VERSION_REGEX = /([\d.]+)/;
 var NavTreeFooter = (props) => {
   const layoutPart = useDefaultValue(props.layoutPart, () => "sidebar");
   const config = useConfig();
-  const { t } = useTranslation5(NAVTREE_PLUGIN);
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
   const dispatch = useIntentDispatcher2();
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
@@ -501,64 +472,64 @@ var NavTreeFooter = (props) => {
   const [_, v] = version?.match(VERSION_REGEX) ?? [];
   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__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: mx3("flex bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content justify-end", layoutPart === "complementary" && "md:justify-end flex-row-reverse")
-  }, /* @__PURE__ */ React5.createElement(Popover3.Root, null, /* @__PURE__ */ React5.createElement(Popover3.Trigger, {
+  }, /* @__PURE__ */ React4.createElement(Popover2.Root, null, /* @__PURE__ */ React4.createElement(Popover2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button3, {
+  }, /* @__PURE__ */ React4.createElement(Button3, {
     variant: "ghost",
     classNames: buttonStyles,
     ...!navigationSidebarOpen && {
       tabIndex: -1
     }
-  }, "v", v)), /* @__PURE__ */ React5.createElement(Popover3.Portal, null, /* @__PURE__ */ React5.createElement(Popover3.Content, {
+  }, "v", v)), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, {
     side: "top",
     role: "message",
     classNames: "z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]"
-  }, /* @__PURE__ */ React5.createElement(Message.Root, {
+  }, /* @__PURE__ */ React4.createElement(Message.Root, {
     valence: "warning",
     className: "rounded-be-none p-5"
-  }, /* @__PURE__ */ React5.createElement(Message.Title, null, /* @__PURE__ */ React5.createElement(Warning, {
+  }, /* @__PURE__ */ React4.createElement(Message.Title, null, /* @__PURE__ */ React4.createElement(Warning, {
     weight: "duotone",
     className: "inline mie-2 is-6 bs-6"
-  }), /* @__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, {
+  }), /* @__PURE__ */ React4.createElement("span", null, t("warning title"))), /* @__PURE__ */ React4.createElement(Message.Body, null, t("technology preview message"), /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement(Link, {
     href: previewUrl,
     target: "_blank",
     rel: "noreferrer",
     variant: "neutral"
-  }, t("learn more label"), /* @__PURE__ */ React5.createElement(ArrowSquareOut, {
+  }, t("learn more label"), /* @__PURE__ */ React4.createElement(ArrowSquareOut, {
     className: "inline mis-1",
     weight: "bold"
-  })))), /* @__PURE__ */ React5.createElement("div", {
+  })))), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "plb-4 pli-5 space-b-2 text-baseText"
-  }, timestamp && /* @__PURE__ */ React5.createElement("p", null, t("released message", {
+  }, timestamp && /* @__PURE__ */ React4.createElement("p", null, t("released message", {
     released: formatDistance(new Date(timestamp), /* @__PURE__ */ new Date(), {
       addSuffix: true
     })
-  }), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement(Link, {
+  }), /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement(Link, {
     href: releaseUrl,
     target: "_blank",
     rel: "noreferrer",
     variant: "neutral"
-  }, t("see release label"), /* @__PURE__ */ React5.createElement(ArrowSquareOut, {
+  }, t("see release label"), /* @__PURE__ */ React4.createElement(ArrowSquareOut, {
     className: "inline mis-1",
     weight: "bold"
-  }))), /* @__PURE__ */ React5.createElement("p", null, /* @__PURE__ */ React5.createElement(Trans, {
+  }))), /* @__PURE__ */ React4.createElement("p", null, /* @__PURE__ */ React4.createElement(Trans, {
     t,
     i18nKey: "powered by dxos message",
     components: {
-      dxos: /* @__PURE__ */ React5.createElement(Link, {
+      dxos: /* @__PURE__ */ React4.createElement(Link, {
         href: "https://dxos.org",
         target: "_blank",
         rel: "noreferrer",
         variant: "neutral"
       })
     }
-  }))), /* @__PURE__ */ React5.createElement(Popover3.Arrow, null)))), /* @__PURE__ */ React5.createElement(Tooltip2.Root, null, /* @__PURE__ */ React5.createElement(Tooltip2.Trigger, {
+  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null)))), /* @__PURE__ */ React4.createElement(Tooltip2.Root, null, /* @__PURE__ */ React4.createElement(Tooltip2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button3, {
+  }, /* @__PURE__ */ React4.createElement(Button3, {
     variant: "ghost",
     classNames: buttonStyles,
     "data-testid": "treeView.openSettings",
@@ -569,13 +540,13 @@ var NavTreeFooter = (props) => {
     onClick: () => dispatch({
       action: SettingsAction.OPEN
     })
-  }, /* @__PURE__ */ React5.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "sr-only"
-  }, t("open settings label")), /* @__PURE__ */ React5.createElement(GearSix, {
+  }, t("open settings label")), /* @__PURE__ */ React4.createElement(GearSix, {
     className: mx3(getSize(5), "rotate-90")
-  }))), /* @__PURE__ */ React5.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip2.Content, {
+  }))), /* @__PURE__ */ React4.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip2.Content, {
     classNames: "z-[12]"
-  }, t("open settings label"), /* @__PURE__ */ React5.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React5.createElement(LayoutControls, {
+  }, t("open settings label"), /* @__PURE__ */ React4.createElement(Tooltip2.Arrow, null)))), navigationPlugin?.meta.id === "dxos.org/plugin/deck" && /* @__PURE__ */ React4.createElement(LayoutControls, {
     variant: "hide-disabled",
     capabilities: {
       incrementStart: false,
@@ -676,14 +647,14 @@ var expandActions = (graph, node) => {
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
-var renderPresence = ({ node }) => /* @__PURE__ */ React6.createElement(Surface, {
-  role: "presence--glyph",
+var renderItemEnd = ({ node }) => /* @__PURE__ */ React5.createElement(Surface, {
+  role: "navtree-item-end",
   data: {
     object: node.data,
     id: node.id
   }
 });
-var NavTreeContainer = /* @__PURE__ */ memo(({ popoverAnchorId, ...props }) => {
+var NavTreeContainer = /* @__PURE__ */ memo(({ isCurrent, popoverAnchorId, ...props }) => {
   const { closeNavigationSidebar } = useSidebars2(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery("lg", {
     ssr: false
@@ -747,7 +718,7 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ popoverAnchorId, ...props }) => {
       return false;
     }
   }, []);
-  const handleSelect = useCallback2(({ item: node }) => {
+  const handleSelect = useCallback2(({ item: node, path, option }) => {
     if (!node.data) {
       return;
     }
@@ -761,16 +732,37 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ popoverAnchorId, ...props }) => {
       }));
       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
+            ]
+          }
         }
-      }
-    });
+      });
+    } 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();
@@ -781,6 +773,7 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ popoverAnchorId, ...props }) => {
   }, [
     graph,
     dispatch,
+    isCurrent,
     isLg,
     closeNavigationSidebar
   ]);
@@ -834,41 +827,42 @@ var NavTreeContainer = /* @__PURE__ */ memo(({ popoverAnchorId, ...props }) => {
   }, [
     graph
   ]);
-  return /* @__PURE__ */ React6.createElement(ElevationProvider, {
+  return /* @__PURE__ */ React5.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "border-be border-separator"
-  }, /* @__PURE__ */ React6.createElement(Surface, {
+  }, /* @__PURE__ */ React5.createElement(Surface, {
     role: "search-input",
     limit: 1
-  })), /* @__PURE__ */ React6.createElement("div", {
+  })), /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "border-be border-separator !overflow-y-auto"
-  }, /* @__PURE__ */ React6.createElement(NavTree, {
+  }, /* @__PURE__ */ React5.createElement(NavTree, {
     id: graph.root.id,
     getActions: getActions2,
     getItems,
     getProps,
+    isCurrent,
     loadDescendents,
-    renderPresence,
+    renderItemEnd,
     popoverAnchorId,
     canDrop,
     onSelect: handleSelect,
     ...props
-  })), /* @__PURE__ */ React6.createElement(NavTreeFooter, null)));
+  })), /* @__PURE__ */ React5.createElement(NavTreeFooter, null)));
 });
 
 // packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
 import { useEffect as useEffect3 } from "react";
-import { toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { toLocalizedString as toLocalizedString4, useTranslation as useTranslation5 } from "@dxos/react-ui";
 var NavTreeDocumentTitle = ({ node }) => {
-  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
   useEffect3(() => {
-    document.title = node ? toLocalizedString5(node.properties.label, t) : t("current app name", {
+    document.title = node ? toLocalizedString4(node.properties.label, t) : t("current app name", {
       ns: "appkit"
     });
   }, [
@@ -878,14 +872,14 @@ var NavTreeDocumentTitle = ({ node }) => {
 };
 
 // packages/plugins/plugin-navtree/src/components/NotchStart.tsx
-import React8 from "react";
+import React7 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 React7 from "react";
+import React6 from "react";
 import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
 import { Avatar } from "@dxos/react-ui";
 import { focusRing, mx as mx5 } from "@dxos/react-ui-theme";
@@ -895,20 +889,20 @@ var HaloButton = (props) => {
   const { onClick, identityKey, internal, size = 8 } = props;
   const fallbackValue = hexToFallback(identityKey ?? "0");
   const { swarm: connectionState } = useNetworkStatus();
-  return /* @__PURE__ */ React7.createElement("button", {
+  return /* @__PURE__ */ React6.createElement("button", {
     className: mx5(focusRing, "rounded grid place-items-center"),
     onClick
-  }, /* @__PURE__ */ React7.createElement(Avatar.Root, {
+  }, /* @__PURE__ */ React6.createElement(Avatar.Root, {
     size,
     variant: "circle",
     status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
     hue: props.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React7.createElement(Avatar.Frame, {
+  }, /* @__PURE__ */ React6.createElement(Avatar.Frame, {
     "data-testid": "treeView.haloButton",
     "data-joyride": "welcome/halo"
-  }, internal ? /* @__PURE__ */ React7.createElement(Avatar.Image, {
+  }, internal ? /* @__PURE__ */ React6.createElement(Avatar.Image, {
     href: INTERNAL
-  }) : /* @__PURE__ */ React7.createElement(Avatar.Fallback, {
+  }) : /* @__PURE__ */ React6.createElement(Avatar.Fallback, {
     text: props.emoji || fallbackValue.emoji
   }))));
 };
@@ -918,7 +912,7 @@ var NotchStart = () => {
   const identity = useIdentity();
   const observabilityPlugin = useResolvePlugin2(parseObservabilityPlugin);
   const dispatch = useIntentDispatcher4();
-  return /* @__PURE__ */ React8.createElement(HaloButton, {
+  return /* @__PURE__ */ React7.createElement(HaloButton, {
     size: 8,
     identityKey: identity?.identityKey.toHex(),
     hue: identity?.profile?.data?.hue,
@@ -932,26 +926,26 @@ 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 { Button as Button4, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import React8 from "react";
+import { LayoutAction as LayoutAction3, useIntent } from "@dxos/app-framework";
+import { Button as Button4, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { getSize as getSize2 } from "@dxos/react-ui-theme";
 var CommandsTrigger = () => {
   const { dispatch } = useIntent();
-  const { t } = useTranslation7(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React9.createElement(Button4, {
+  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  return /* @__PURE__ */ React8.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`,
         dialogBlockAlign: "start"
       }
     })
-  }, /* @__PURE__ */ React9.createElement("span", {
+  }, /* @__PURE__ */ React8.createElement("span", {
     className: "text-description font-normal grow text-start"
-  }, t("command list input placeholder")), /* @__PURE__ */ React9.createElement(MagnifyingGlass, {
+  }, t("command list input placeholder")), /* @__PURE__ */ React8.createElement(MagnifyingGlass, {
     className: getSize2(5)
   }));
 };
@@ -991,7 +985,10 @@ var getInitialState = () => {
     const cached = JSON.parse(stringified);
     return cached.map(([key, value]) => [
       key,
-      create(value)
+      create({
+        open: value.open,
+        current: false
+      })
     ]);
   } catch {
   }
@@ -1150,41 +1147,29 @@ var NavTreePlugin = () => {
           switch (data.component) {
             case `${NAVTREE_PLUGIN}/Commands`: {
               const selected = typeof data.subject === "string" ? data.subject : void 0;
-              return /* @__PURE__ */ React10.createElement(CommandsDialogContent, {
+              return /* @__PURE__ */ React9.createElement(CommandsDialogContent, {
                 selected
               });
             }
           }
           switch (role) {
             case "navigation":
-              return /* @__PURE__ */ React10.createElement(NavTreeContainer, {
+              return /* @__PURE__ */ React9.createElement(NavTreeContainer, {
                 isOpen,
                 isCurrent,
                 onOpenChange: handleOpenChange,
                 popoverAnchorId: data.popoverAnchorId
               });
             case "document-title": {
-              return /* @__PURE__ */ React10.createElement(NavTreeDocumentTitle, {
+              return /* @__PURE__ */ React9.createElement(NavTreeDocumentTitle, {
                 node: isGraphNode(data.activeNode) ? data.activeNode : void 0
               });
             }
-            case "navbar-start": {
-              if (data.activeNode) {
-                return {
-                  node: /* @__PURE__ */ React10.createElement(NavBarStart, {
-                    activeNode: data.activeNode,
-                    popoverAnchorId: data.popoverAnchorId
-                  }),
-                  disposition: "hoist"
-                };
-              }
-              break;
-            }
             case "notch-start":
-              return /* @__PURE__ */ React10.createElement(NotchStart, null);
+              return /* @__PURE__ */ React9.createElement(NotchStart, null);
             case "search-input":
               return {
-                node: /* @__PURE__ */ React10.createElement(CommandsTrigger, null),
+                node: /* @__PURE__ */ React9.createElement(CommandsTrigger, null),
                 disposition: "fallback"
               };
           }
@@ -1226,7 +1211,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`,