@dxos/plugin-navtree 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/dist/lib/browser/{chunk-FHOAKMRS.mjs → chunk-UM2C5XK3.mjs}

@@ -7,11 +7,12 @@ import {
   NAVTREE_PLUGIN
 } from "./chunk-IEW3JD5C.mjs";
 
-// packages/plugins/plugin-navtree/src/components/CommandsDialog.tsx
+// packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsDialog.tsx
 import React, { useMemo, useState } from "react";
 import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
-import { isActionGroup, isAction } from "@dxos/app-graph";
+import { isAction, isActionGroup } from "@dxos/app-graph";
 import { Keyboard, keySymbols } from "@dxos/keyboard";
+import { useActions } from "@dxos/plugin-graph";
 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";
@@ -25,7 +26,7 @@ var CommandsDialogContent = ({ selected: initial }) => {
     const current = Keyboard.singleton.getCurrentContext();
     const actionMap = /* @__PURE__ */ new Set();
     const actions2 = [];
-    graph?.traverse({
+    graph.traverse({
       visitor: (node, path) => {
         if ((isAction(node) || isActionGroup(node)) && !actionMap.has(node.id) && current.startsWith(path.slice(0, -1).join("/"))) {
           actionMap.add(node.id);
@@ -41,7 +42,8 @@ var CommandsDialogContent = ({ selected: initial }) => {
     graph
   ]);
   const group = allActions.find(({ id }) => id === selected);
-  const actions = isActionGroup(group) ? graph.actions(group) : allActions;
+  const groupActions = useActions(graph, group?.id);
+  const actions = isActionGroup(group) ? groupActions : allActions;
   return /* @__PURE__ */ React.createElement(Dialog.Content, {
     classNames: [
       "md:max-is-[30rem] overflow-hidden mbs-12"
@@ -77,11 +79,9 @@ var CommandsDialogContent = ({ selected: initial }) => {
           }
         }));
         setTimeout(() => {
-          const node = graph.nodes(group ?? action, {
-            relation: "inbound"
-          })[0];
+          const node = graph.getConnections(group?.id ?? action.id, "inbound")[0];
           void (node && isAction(action) && action.data({
-            node,
+            parent: node,
             caller: KEY_BINDING
           }));
         });
@@ -109,7 +109,7 @@ var CommandsDialogContent = ({ selected: initial }) => {
   }))));
 };
 
-// packages/plugins/plugin-navtree/src/components/CommandsTrigger.tsx
+// packages/plugins/plugin-navtree/src/components/CommandsDialog/CommandsTrigger.tsx
 import { MagnifyingGlass } from "@phosphor-icons/react";
 import React2 from "react";
 import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
@@ -135,13 +135,11 @@ var CommandsTrigger = () => {
 };
 
 // packages/plugins/plugin-navtree/src/util.ts
-import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2, isActionLike } from "@dxos/app-graph";
+import { isAction as isAction2, isActionLike } from "@dxos/app-graph";
 import { isNonNullable } from "@dxos/util";
 var getParent = (graph, node, path) => {
   const parentId = path[path.length - 2];
-  return graph.nodes(node, {
-    relation: "inbound"
-  }).find((n) => n.id === parentId);
+  return graph.getConnections(node.id, "inbound").find((n) => n.id === parentId);
 };
 var getPersistenceParent = (graph, node, path, persistenceClass) => {
   if (node.properties.acceptPersistenceClass?.has(persistenceClass)) {
@@ -178,11 +176,8 @@ var sortActions = (actions) => actions.sort((a, b) => {
   }
   return 1;
 });
-var getChildren = (graph, node, filter, path = []) => {
-  return graph.nodes(node, {
-    relation: "outbound",
-    filter
-  }).map((n) => {
+var getChildren = (graph, node, path = []) => {
+  return graph.getConnections(node.id, "outbound").map((n) => {
     const nextPath = [
       ...path,
       node.id
@@ -191,13 +186,13 @@ var getChildren = (graph, node, filter, path = []) => {
   }).filter(isNonNullable);
 };
 var getActions = (graph, node) => {
-  return graph.actions(node).reduce((acc, arg) => {
+  return graph.getActions(node.id).reduce((acc, arg) => {
     if (arg.properties.disposition === "item") {
       return acc;
     }
     acc.actions.push(arg);
     if (!isAction2(arg)) {
-      const actionGroup = graph.actions(arg);
+      const actionGroup = graph.getActions(arg.id);
       acc.groupedActions[arg.id] = actionGroup;
     }
     return acc;
@@ -206,21 +201,6 @@ var getActions = (graph, node) => {
     groupedActions: {}
   });
 };
-var expandChildrenAndActions = (graph, node) => {
-  return Promise.all([
-    expandChildren(graph, node),
-    expandActions(graph, node)
-  ]);
-};
-var expandChildren = (graph, node) => {
-  return graph.expand(node, "outbound");
-};
-var expandActions = (graph, node) => {
-  return Promise.all([
-    graph.expand(node, "outbound", ACTION_TYPE),
-    graph.expand(node, "outbound", ACTION_GROUP_TYPE)
-  ]);
-};
 var l0ItemType = (item) => {
   if (item.properties.disposition === "collection") {
     return "collection";
@@ -237,119 +217,73 @@ var l0ItemType = (item) => {
 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 React9, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
-import { createIntent as createIntent4, LayoutAction as LayoutAction4, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher4, useLayout as useLayout2 } from "@dxos/app-framework";
-import { isAction as isAction4, isActionLike as isActionLike2 } from "@dxos/app-graph";
+import React9, { memo as memo2, useCallback as useCallback3, useEffect, useMemo as useMemo5 } from "react";
+import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework";
+import { isAction as isAction4, isActionLike as isActionLike2, ROOT_ID } from "@dxos/app-graph";
 import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
+import { useConnections } from "@dxos/plugin-graph";
 import { isEchoObject, isSpace } from "@dxos/react-client/echo";
-import { useMediaQuery as useMediaQuery2 } from "@dxos/react-ui";
+import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
 import { isTreeData } from "@dxos/react-ui-list";
 import { mx as mx5 } from "@dxos/react-ui-theme";
-import { arrayMove as arrayMove2 } from "@dxos/util";
+import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
 
-// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+// packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
 import React8, { useMemo as useMemo4 } from "react";
 import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
-import { byPosition as byPosition2 } from "@dxos/util";
 
-// packages/plugins/plugin-navtree/src/components/L0Menu.tsx
+// packages/plugins/plugin-navtree/src/hooks.ts
+var useLoadDescendents = (root) => {
+};
+
+// packages/plugins/plugin-navtree/src/components/NavTreeContext.tsx
+import { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+var NavTreeContext = /* @__PURE__ */ createContext(null);
+var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Missing NavTreeContext"));
+
+// packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
 import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import React4, { useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-import { createIntent as createIntent3, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import { invariant } from "@dxos/invariant";
-import { Popover, ScrollArea, toLocalizedString as toLocalizedString3, Tooltip, useMediaQuery, useSidebars, useTranslation as useTranslation4, ListItem, Icon as Icon2 } from "@dxos/react-ui";
+import { Icon as Icon2, IconButton, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString2, useMediaQuery, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { MenuProvider, DropdownMenu } from "@dxos/react-ui-menu";
 import { Tabs } from "@dxos/react-ui-tabs";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 import { arrayMove, getFirstTwoRenderableChars } from "@dxos/util";
 
-// packages/plugins/plugin-navtree/src/components/NavTreeContext.tsx
-import { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-var NavTreeContext = /* @__PURE__ */ createContext(null);
-var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("NavTreeContext not found"));
-
-// packages/plugins/plugin-navtree/src/components/UserAccountAvatar.tsx
+// packages/plugins/plugin-navtree/src/components/UserAccountAvatar/UserAccountAvatar.tsx
 import React3 from "react";
 import { Avatar } from "@dxos/react-ui";
 import { hexToFallback } from "@dxos/util";
-var UserAccountAvatar = (props) => {
-  const fallbackValue = hexToFallback(props.userId ?? "0");
+var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
+  const fallbackValue = hexToFallback(userId ?? "0");
   return /* @__PURE__ */ React3.createElement("div", {
     className: "grid place-items-center",
     "data-joyride": "welcome/account"
   }, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
     variant: "circle",
-    size: props.size ?? 12,
-    status: props.status ?? "active",
-    hue: props.hue || fallbackValue.hue,
-    fallback: props.emoji || fallbackValue.emoji,
+    size: size ?? 12,
+    status: status ?? "active",
+    hue: hue || fallbackValue.hue,
+    fallback: emoji || fallbackValue.emoji,
     "data-testid": "treeView.userAccount"
   })));
 };
 
-// packages/plugins/plugin-navtree/src/hooks.ts
-import { useEffect as useEffect2 } from "react";
-
-// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
-import { useEffect } from "react";
-import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-var NavTreeDocumentTitle = ({ node }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
-  useEffect(() => {
-    document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
-      ns: "appkit"
-    });
-  }, [
-    node?.properties?.label
-  ]);
-  return null;
-};
-
-// packages/plugins/plugin-navtree/src/hooks.ts
-var useLoadDescendents = (root) => {
-  const { loadDescendents } = useNavTreeContext();
-  useEffect2(() => {
-    const frame = requestAnimationFrame(() => {
-      if (root) {
-        void loadDescendents?.(root);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [
-    root
-  ]);
-};
-
-// packages/plugins/plugin-navtree/src/components/L0Menu.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/L0Menu.tsx";
+// packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
 var useL0ItemClick = ({ item, parent, path }, type) => {
-  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher3();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   return useCallback((event) => {
     switch (type) {
-      case "tab":
-        void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
-          part: "sidebar",
-          options: {
-            state: item.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
-          }
-        }));
-        return onTabChange?.(item);
-      case "link":
-        return onSelect?.({
-          item,
-          path,
-          current: !isCurrent(path, item),
-          option: event.altKey
-        });
       case "action": {
         const { data: invoke, properties: { caller } } = item;
         return invoke?.(caller ? {
@@ -359,26 +293,33 @@ var useL0ItemClick = ({ item, parent, path }, type) => {
           node: parent
         });
       }
+      case "tab":
+        return onTabChange?.(item);
+      case "link":
+        return onSelect?.({
+          item,
+          path,
+          current: !isCurrent(path, item),
+          option: event.altKey
+        });
     }
   }, [
     item,
-    type,
-    onSelect,
-    isCurrent,
     parent,
+    type,
     tab,
-    navigationSidebarState,
-    isLg,
-    dispatch
+    isCurrent,
+    onSelect,
+    onTabChange,
+    isLg
   ]);
 };
 var l0Breakpoints = {
   lg: "hidden lg:grid"
 };
-var L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }) => {
-  const { t } = useTranslation4(NAVTREE_PLUGIN);
-  const itemElement = useRef(null);
-  const [closestEdge, setEdge] = useState2(null);
+var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, forwardedRef) => {
+  const { getProps } = useNavTreeContext();
+  const { id, testId } = getProps?.(item, path) ?? {};
   const type = l0ItemType(item);
   const itemPath = useMemo2(() => [
     ...path,
@@ -387,13 +328,12 @@ var L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }) => {
     item.id,
     path
   ]);
-  const { getProps, popoverAnchorId } = useNavTreeContext();
-  const { id, testId } = getProps?.(item, path) ?? {};
-  const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const localizedString = toLocalizedString2(item.properties.label, t);
   const handleClick = useL0ItemClick({
     item,
-    path: itemPath,
-    parent
+    parent,
+    path: itemPath
   }, type);
   const rootProps = type === "tab" ? {
     value: item.id,
@@ -408,13 +348,47 @@ var L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }) => {
   } : {
     onClick: handleClick
   };
-  const localizedString = toLocalizedString3(item.properties.label, t);
+  const Root = type === "collection" ? "h2" : type === "tab" ? Tabs.TabPrimitive : "button";
+  return /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
+    asChild: true,
+    delayDuration: 0,
+    side: "right",
+    content: localizedString
+  }, /* @__PURE__ */ React4.createElement(Root, {
+    ...rootProps,
+    "data-type": type,
+    className: mx2('group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group', l0Breakpoints[item.properties.l0Breakpoint]),
+    ref: forwardedRef
+  }, children));
+});
+var L0Avator = ({ item }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const type = l0ItemType(item);
   const hue = item.properties.hue ?? null;
+  const hueFgStyle = hue && {
+    style: {
+      color: `var(--dx-${hue}SurfaceText)`
+    }
+  };
+  const localizedString = toLocalizedString2(item.properties.label, t);
   const avatarValue = useMemo2(() => type === "tab" ? getFirstTwoRenderableChars(localizedString).join("").toUpperCase() : [], [
     type,
     item.properties.label,
     t
   ]);
+  return /* @__PURE__ */ React4.createElement("span", {
+    role: "img",
+    className: "place-self-center text-xl font-light",
+    ...hueFgStyle
+  }, avatarValue);
+};
+var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const itemElement = useRef(null);
+  const [closestEdge, setEdge] = useState2(null);
+  const type = l0ItemType(item);
+  const localizedString = toLocalizedString2(item.properties.label, t);
+  const hue = item.properties.hue ?? null;
   const hueFgStyle = hue && {
     style: {
       color: `var(--dx-${hue}SurfaceText)`
@@ -488,20 +462,19 @@ var L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }) => {
     item,
     onRearrange
   ]);
-  const l0ItemTrigger = /* @__PURE__ */ React4.createElement(Root, {
-    ...rootProps,
-    "data-type": type,
-    className: mx2('group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint]),
-    ref: itemElement
-  }, userAccount ? /* @__PURE__ */ React4.createElement(UserAccountAvatar, {
-    userId: item.properties.userId,
-    hue: item.properties.hue,
-    emoji: item.properties.emoji,
-    status: item.properties.status
-  }) : /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React4.createElement(L0ItemRoot, {
+    ref: itemElement,
+    item,
+    parent,
+    path
+  }, /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     "data-frame": true,
-    className: mx2("absolute grid dx-focus-ring-group-indicator transition-colors", type === "tab" || pinned ? "rounded" : "rounded-full", pinned ? "bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5" : "bg-groupSurface inset-inline-3 inset-block-2"),
+    className: mx2(
+      "flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded",
+      // TODO(burdon): Create reusable button/component and/or create var for size.
+      pinned ? "bg-transparent w-[50px] p-2 group-hover/l0item:bg-groupSurface" : "bg-groupSurface w-[50px] h-[50px]"
+    ),
     ...hue && {
       style: {
         background: `var(--dx-${hue}Surface)`
@@ -509,41 +482,24 @@ var L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }) => {
     }
   }, item.properties.icon && /* @__PURE__ */ React4.createElement(Icon2, {
     icon: item.properties.icon,
-    size: pinned ? 5 : 7,
-    classNames: "place-self-center",
-    ...hueFgStyle
-  }) || (type === "tab" && item.properties.disposition !== "pin-end" ? /* @__PURE__ */ React4.createElement("span", {
-    role: "img",
-    className: "place-self-center text-3xl font-light",
+    size: pinned ? 5 : 6,
     ...hueFgStyle
-  }, avatarValue) : item.properties.icon && /* @__PURE__ */ React4.createElement(Icon2, {
-    icon: "ph--planet--regular",
-    size: pinned ? 5 : 7,
-    classNames: "place-self-center",
-    ...hueFgStyle
-  }))), /* @__PURE__ */ React4.createElement("div", {
+  }) || type === "tab" && item.properties.disposition !== "pin-end" && /* @__PURE__ */ React4.createElement(L0Avator, {
+    item
+  })), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: "hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
+    className: "hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie"
   }), /* @__PURE__ */ React4.createElement("span", {
     id: `${item.id}__label`,
     className: "sr-only"
   }, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
     edge: closestEdge
   }));
-  return popoverAnchorId === id ? /* @__PURE__ */ React4.createElement(Popover.Anchor, {
-    asChild: true
-  }, l0ItemTrigger) : /* @__PURE__ */ React4.createElement(Tooltip.Root, {
-    delayDuration: 0
-  }, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, l0ItemTrigger), /* @__PURE__ */ React4.createElement(Tooltip.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip.Content, {
-    side: "right"
-  }, localizedString, /* @__PURE__ */ React4.createElement(Tooltip.Arrow, null))));
 };
-var L0Collection = ({ item, path, parent }) => {
+var L0Collection = ({ item, path }) => {
   const navTreeContext = useNavTreeContext();
   useLoadDescendents(item);
-  const collectionItems = navTreeContext.getItems(item);
+  const collectionItems = navTreeContext.useItems(item);
   const groupPath = useMemo2(() => [
     ...path,
     item.id
@@ -555,7 +511,7 @@ var L0Collection = ({ item, path, parent }) => {
   const handleRearrange = useCallback((source, target, closestEdge) => {
     invariant(item.properties.onRearrangeChildren, void 0, {
       F: __dxlog_file,
-      L: 256,
+      L: 266,
       S: void 0,
       A: [
         "item.properties.onRearrangeChildren",
@@ -589,12 +545,39 @@ var L0Collection = ({ item, path, parent }) => {
     }
   })));
 };
-var L0Menu = ({ topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
+var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
+  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const suppressNextTooltip = useRef(true);
   return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
-    classNames: "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag  pbe-[env(safe-area-inset-bottom)]"
-  }, /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
+    classNames: [
+      "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg",
+      "grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout",
+      "!is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]"
+    ]
+  }, /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: 'grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
+    className: "flex justify-center p-1"
+  }, /* @__PURE__ */ React4.createElement(MenuProvider, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+    group: parent,
+    items: menuActions
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React4.createElement(IconButton, {
+    iconOnly: true,
+    icon: "ph--dots-three--regular",
+    size: 5,
+    label: t("app menu label"),
+    tooltipSide: "right",
+    classNames: "w-[50px] _bg-primary-500",
+    suppressNextTooltip,
+    "data-testid": "spacePlugin.addSpace"
+  }))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: mx2([
+      "flex flex-col gap-2 pbs-1",
+      '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
+      '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
+    ])
   }, topLevelItems.map((item) => {
     if (l0ItemType(item) === "collection") {
       return /* @__PURE__ */ React4.createElement(L0Collection, {
@@ -624,40 +607,38 @@ var L0Menu = ({ topLevelItems, pinnedItems, userAccountItem, parent, path }) =>
     pinned: true
   }))), userAccountItem && /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: "grid py-2 app-no-drag"
-  }, /* @__PURE__ */ React4.createElement(L0Item, {
+    className: "grid app-no-drag"
+  }, /* @__PURE__ */ React4.createElement(L0ItemRoot, {
     key: userAccountItem.id,
     item: userAccountItem,
     parent,
-    path,
-    userAccount: true
-  })), /* @__PURE__ */ React4.createElement("div", {
+    path
+  }, /* @__PURE__ */ React4.createElement(UserAccountAvatar, {
+    userId: userAccountItem.properties.userId,
+    hue: userAccountItem.properties.hue,
+    emoji: userAccountItem.properties.emoji,
+    status: userAccountItem.properties.status,
+    size: 11
+  }))), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: 'hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]',
     style: {
-      background: "linear-gradient(to bottom, var(--dx-baseSurface) 0%, var(--dx-baseSurface) 70%, transparent 100%)"
+      background: "linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)"
     }
   }));
 };
 
-// packages/plugins/plugin-navtree/src/components/L1Panels.tsx
+// packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
 import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { useLayout } from "@dxos/app-framework";
-import { Button as Button3, Icon as Icon3, IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Button as Button3, Icon as Icon3, IconButton as IconButton3, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { Tree } from "@dxos/react-ui-list";
 import { Tabs as Tabs2 } from "@dxos/react-ui-tabs";
 import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx4 } from "@dxos/react-ui-theme";
-import { byPosition } from "@dxos/util";
 
-// packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
-import React6, { Fragment, memo } from "react";
-import { isAction as isAction3 } from "@dxos/app-graph";
-import { DensityProvider, Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
-
-// packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
+// packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemAction.tsx
 import React5, { useRef as useRef2 } from "react";
-import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton, useDensityContext } from "@dxos/react-ui";
-import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
+import { useTranslation as useTranslation4, toLocalizedString as toLocalizedString3, IconButton as IconButton2, useDensityContext } from "@dxos/react-ui";
+import { DropdownMenu as DropdownMenu2, MenuProvider as MenuProvider2 } from "@dxos/react-ui-menu";
 import { hoverableControlItem, hoverableOpenControlItem, mx as mx3 } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
 var fineActionButtonProps = {
@@ -668,24 +649,24 @@ var coarseActionButtonProps = {
   size: 5,
   density: "coarse"
 };
-var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
-  const { t } = useTranslation5(NAVTREE_PLUGIN);
+var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef2(false);
   const density = useDensityContext();
-  return /* @__PURE__ */ React5.createElement(MenuProvider, {
-    onAction
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
+  return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
+    group: parent,
     items: menuActions,
+    caller,
     suppressNextTooltip
-  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu2.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React5.createElement(IconButton, {
+  }, /* @__PURE__ */ React5.createElement(IconButton2, {
     ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
     classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
     variant: "ghost",
     icon: icon ?? fallbackIcon,
     iconOnly: true,
-    label: toLocalizedString4(label, t),
+    label: toLocalizedString3(label, t),
     "data-testid": testId,
     suppressNextTooltip
   }))));
@@ -694,7 +675,7 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
   label: "never"
 }, data: invoke, baseLabel }) => {
   const density = useDensityContext();
-  return /* @__PURE__ */ React5.createElement(IconButton, {
+  return /* @__PURE__ */ React5.createElement(IconButton2, {
     ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
     variant,
     classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
@@ -708,19 +689,19 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
       }
       event.stopPropagation();
       void invoke?.(caller ? {
-        node: parent,
+        parent,
         caller
       } : {
-        node: parent
+        parent
       });
     },
     "data-testid": testId
   });
 };
 var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
-  const { t } = useTranslation5(NAVTREE_PLUGIN);
+  const { t } = useTranslation4(NAVTREE_PLUGIN);
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
-  const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
+  const baseLabel = toLocalizedString3(monolithicAction ? monolithicAction.properties.label : props.label, t);
   return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
     baseLabel,
     parent: node,
@@ -729,19 +710,16 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
     ...props,
     label: baseLabel,
     parent: node,
-    menuActions,
-    onAction: (action) => action.data?.(props.caller ? {
-      node,
-      caller: props.caller
-    } : {
-      node
-    })
+    menuActions
   });
 };
 
-// packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
+// packages/plugins/plugin-navtree/src/components/NavTreeItem/NavTreeItemColumns.tsx
+import React6, { Fragment, memo } from "react";
+import { isAction as isAction3 } from "@dxos/app-graph";
+import { DensityProvider, Popover, toLocalizedString as toLocalizedString4, Treegrid, useTranslation as useTranslation5 } from "@dxos/react-ui";
 var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
-  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  const { t } = useTranslation5(NAVTREE_PLUGIN);
   const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
   const level = path.length - 2;
   const { actions: _actions, groupedActions } = getActions2(item);
@@ -749,7 +727,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
   const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
     action
   ] : []).filter((action) => !action.properties?.hidden);
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover2.Anchor : Fragment;
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
   useLoadDescendents(item);
   useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
   return /* @__PURE__ */ React6.createElement(DensityProvider, {
@@ -759,7 +737,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
     className: "contents app-no-drag"
   }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
     testId: primaryAction.properties?.testId,
-    label: toLocalizedString5(primaryAction.properties?.label, t),
+    label: toLocalizedString4(primaryAction.properties?.label, t),
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
     parent: item,
     monolithic: isAction3(primaryAction),
@@ -782,28 +760,26 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
   })));
 });
 
-// packages/plugins/plugin-navtree/src/components/L1Panels.tsx
-var headingBackButtonLabel = "absolute inset-0 min-is-0 truncate flex items-center pis-6 transition-[transform,opacity] ease-in-out duration-200";
-var HeadingBackButton = ({ title, onClick }) => {
-  const { t } = useTranslation7(NAVTREE_PLUGIN);
+// packages/plugins/plugin-navtree/src/components/Sidebar/L1Panel.tsx
+var headingBackButtonLabel = "inset-0 min-is-0 truncate flex items-center pis-2";
+var TitleButton = ({ title, onClick }) => {
   return /* @__PURE__ */ React7.createElement(Button3, {
     variant: "ghost",
-    classNames: "pli-1 flex-1 relative group text-start justify-start bs-[--rail-action] font-normal",
+    classNames: "pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal",
     onClick
   }, /* @__PURE__ */ React7.createElement(Icon3, {
     icon: "ph--caret-left--bold",
     size: 3
   }), /* @__PURE__ */ React7.createElement("span", {
-    className: mx4(headingBackButtonLabel, "translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100")
-  }, t("back label")), /* @__PURE__ */ React7.createElement("span", {
-    className: mx4(headingBackButtonLabel, "translate-y-0 opacity-100 group-hover:-translate-y-2 group-hover:opacity-0 group-focus:-translate-y-2 group-focus:opacity-0")
+    className: mx4(headingBackButtonLabel)
   }, title));
 };
-var L1Panel = ({ item, path, currentItemId, onBack }) => {
-  const layout = useLayout();
+var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
   const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-  const { t } = useTranslation7(NAVTREE_PLUGIN);
-  const alternateTree = navTreeContext.getItems(item, "alternate-tree")[0];
+  const { t } = useTranslation6(NAVTREE_PLUGIN);
+  const alternateTree = navTreeContext.useItems(item, {
+    disposition: "alternate-tree"
+  })[0];
   const alternatePath = useMemo3(() => [
     ...path,
     item.id
@@ -816,12 +792,11 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
     setAlternateTree
   ]);
   const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
-  const alternateGetItems = useCallback2((node, disposition) => {
-    const items = navTreeContext.getItems(node, disposition);
-    if (node === alternateTree) {
-      return items.toSorted((a, b) => byPosition(a.properties, b.properties));
-    }
-    return items;
+  const useAlternateItems = useCallback2((node, { disposition } = {}) => {
+    return navTreeContext.useItems(node, {
+      disposition,
+      sort: node?.id === alternateTree.id
+    });
   }, [
     navTreeContext,
     alternateTree
@@ -838,35 +813,37 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
     alternatePath,
     setAlternateTree
   ]);
-  const title = toLocalizedString6(item.properties.label, t);
+  const title = toLocalizedString5(item.properties.label, t);
   const backCapable = item.id.startsWith("!") || isAlternate;
   return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
     key: item.id,
     value: item.id,
     classNames: [
-      "absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr] pbs-[env(safe-area-inset-top)]",
+      "absolute inset-block-0 inline-end-0",
+      "is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]",
+      "pbs-[env(safe-area-inset-top)]",
       item.id === currentItemId && "grid"
     ],
     tabIndex: -1,
     "aria-label": title,
-    ...!layout.sidebarOpen && {
+    ...!open && {
       inert: "true"
     }
   }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
-    className: "flex items-center border-be border-separator app-drag pis-1"
-  }, backCapable ? /* @__PURE__ */ React7.createElement(HeadingBackButton, {
+    className: "flex items-center border-be border-separator app-drag pli-1"
+  }, backCapable ? /* @__PURE__ */ React7.createElement(TitleButton, {
     title,
     onClick: handleBack
   }) : /* @__PURE__ */ React7.createElement("span", {
     className: "flex-1 truncate min-is-0 pis-6"
-  }, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
+  }, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton3, {
     variant: "ghost",
     classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
     iconOnly: true,
     size: 5,
     density: "coarse",
     icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
-    label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
+    label: toLocalizedString5(alternateTree.properties.label ?? alternateTree.id, t),
     "data-testid": "treeView.alternateTreeButton",
     onClick: handleOpen
   }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
@@ -879,7 +856,7 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
     className: "overflow-y-auto"
   }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
     ...navTreeContext,
-    getItems: alternateGetItems,
+    useItems: useAlternateItems,
     id: alternateTree.id,
     root: alternateTree,
     path: alternatePath,
@@ -897,10 +874,10 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
     renderColumns: NavTreeItemColumns
   }))));
 };
-var L1PanelCollection = ({ item, path, currentItemId }) => {
-  const { getItems } = useNavTreeContext();
+var L1PanelCollection = ({ item, path, ...props }) => {
+  const { useItems: useItems2 } = useNavTreeContext();
   useLoadDescendents(item);
-  const collectionItems = getItems(item);
+  const collectionItems = useItems2(item);
   const groupPath = useMemo3(() => [
     ...path,
     item.id
@@ -912,10 +889,10 @@ var L1PanelCollection = ({ item, path, currentItemId }) => {
     key: item2.id,
     item: item2,
     path: groupPath,
-    currentItemId
+    ...props
   })));
 };
-var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
+var L1Panels = ({ topLevelItems, onBack, ...props }) => {
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
     const type = l0ItemType(item);
     switch (type) {
@@ -923,15 +900,13 @@ var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
         return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
           key: item.id,
           item,
-          path,
-          currentItemId
+          ...props
         });
       case "tab":
         return /* @__PURE__ */ React7.createElement(L1Panel, {
           key: item.id,
           item,
-          path,
-          currentItemId,
+          ...props,
           onBack
         });
       default:
@@ -940,31 +915,47 @@ var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
   }));
 };
 
-// packages/plugins/plugin-navtree/src/components/NavTree.tsx
+// packages/plugins/plugin-navtree/src/components/NavTree/NavTree.tsx
 var NAV_TREE_ITEM = "NavTreeItem";
-var NavTree = ({ id, root }) => {
-  const { tab, getItems, onBack } = useNavTreeContext();
-  const topLevelActions = getItems(root, "item").toSorted((a, b) => byPosition2(a.properties, b.properties));
-  const topLevelCollections = getItems(root, "collection");
-  const topLevelWorkspaces = getItems(root, "workspace");
-  const topLevelNavigation = getItems(root, "navigation");
+var NavTree = ({ id, root, ...props }) => {
+  const { tab, useItems: useItems2, onBack } = useNavTreeContext();
+  const topLevelActions = useItems2(root, {
+    disposition: "menu",
+    sort: true
+  });
+  const topLevelCollections = useItems2(root, {
+    disposition: "collection"
+  });
+  const topLevelWorkspaces = useItems2(root, {
+    disposition: "workspace"
+  });
+  const topLevelNavigation = useItems2(root, {
+    disposition: "navigation"
+  });
   const l0Items = useMemo4(() => [
-    ...topLevelActions,
+    // prettier-ignore
     ...topLevelCollections,
     ...topLevelWorkspaces,
     ...topLevelNavigation
   ], [
-    topLevelActions,
     topLevelCollections,
     topLevelWorkspaces,
     topLevelNavigation
   ]);
-  const pinnedItems = getItems(root, "pin-end").toSorted((a, b) => byPosition2(a.properties, b.properties));
-  const userAccountItem = getItems(root, "user-account")[0];
+  const pinnedItems = useItems2(root, {
+    disposition: "pin-end",
+    sort: true
+  });
+  const userAccountItem = useItems2(root, {
+    disposition: "user-account"
+  })[0];
   const topLevelItems = useMemo4(() => [
+    // prettier-ignore
     ...l0Items,
     ...pinnedItems,
-    userAccountItem
+    ...userAccountItem ? [
+      userAccountItem
+    ] : []
   ], [
     l0Items,
     pinnedItems,
@@ -976,35 +967,34 @@ var NavTree = ({ id, root }) => {
   ], [
     id
   ]);
-  return (
-    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
-    /* @__PURE__ */ React8.createElement(Tabs3.Root, {
-      value: tab,
-      orientation: "vertical",
-      verticalVariant: "stateless",
-      classNames: "relative"
-    }, /* @__PURE__ */ React8.createElement(L0Menu, {
-      topLevelItems: l0Items,
-      pinnedItems,
-      userAccountItem,
-      path,
-      parent: root
-    }), /* @__PURE__ */ React8.createElement(L1Panels, {
-      topLevelItems,
-      path,
-      currentItemId: tab,
-      onBack
-    }))
-  );
+  return /* @__PURE__ */ React8.createElement(Tabs3.Root, {
+    value: tab,
+    orientation: "vertical",
+    verticalVariant: "stateless",
+    classNames: "relative"
+  }, /* @__PURE__ */ React8.createElement(L0Menu, {
+    menuActions: topLevelActions,
+    topLevelItems: l0Items,
+    pinnedItems,
+    userAccountItem,
+    path,
+    parent: root
+  }), /* @__PURE__ */ React8.createElement(L1Panels, {
+    topLevelItems,
+    path,
+    currentItemId: tab,
+    onBack,
+    ...props
+  }));
 };
 
 // packages/plugins/plugin-navtree/src/capabilities/index.ts
 import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-26D3MUCA.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-OBGGMBVJ.mjs"));
-var Keyboard2 = lazy(() => import("./keyboard-IQXHKUWM.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-DWMOF2TM.mjs"));
-var State = lazy(() => import("./state-EW62QYEN.mjs"));
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-P7AY3K72.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-PW7B76HO.mjs"));
+var Keyboard2 = lazy(() => import("./keyboard-DDFATRUG.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-M3CAS7ZP.mjs"));
+var State = lazy(() => import("./state-3UBYOTQT.mjs"));
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
@@ -1018,37 +1008,38 @@ var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Sur
   limit: 1
 });
 var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
+var filterItems = (node, disposition) => {
+  if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
+    return false;
+  } else if (!disposition) {
+    const action = isAction4(node);
+    return !action || node.properties.disposition === "item";
+  } else {
+    return node.properties.disposition === disposition;
+  }
+};
+var getItems = (graph, node, disposition) => {
+  return graph.getConnections(node?.id ?? ROOT_ID, "outbound").filter((node2) => filterItems(node2, disposition));
+};
+var useItems = (node, options) => {
+  const { graph } = useAppGraph2();
+  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node2) => filterItems(node2, options?.disposition));
+  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
+};
 var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
   const [isLg] = useMediaQuery2("lg", {
     ssr: false
   });
-  const { dispatchPromise: dispatch } = useIntentDispatcher4();
+  const { dispatchPromise: dispatch } = useIntentDispatcher3();
   const { graph } = useAppGraph2();
-  const layout = useLayout2();
   const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+  const layout = useLayout();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
   const getActions2 = useCallback3((node) => getActions(graph, node), [
     graph
   ]);
-  const getItems = useCallback3((node, disposition) => {
-    return graph.nodes(node ?? graph.root, {
-      filter: (node2) => {
-        return untracked(() => {
-          if (!disposition && (node2.properties.disposition === "hidden" || node2.properties.disposition === "alternate-tree")) {
-            return false;
-          } else if (!disposition) {
-            const action = isAction4(node2);
-            return !action || node2.properties.disposition === "item";
-          } else {
-            return node2.properties.disposition === disposition;
-          }
-        });
-      }
-    });
-  }, [
-    graph
-  ]);
   const getProps = useCallback3((node, path) => {
-    const children = getChildren(graph, node, getChildrenFilter, path);
+    const children = getChildren(graph, node, path).filter(getChildrenFilter);
     const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
     return {
       id: node.id,
@@ -1063,38 +1054,26 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const loadDescendents = useCallback3((node) => {
-    void expandActions(graph, node);
-    if (!isActionLike2(node)) {
-      void expandChildren(graph, node).then(() => (
-        // Load one level deeper, which resolves some juddering observed on open/close.
-        Promise.all(getChildren(graph, node).flatMap((child) => [
-          expandActions(graph, child),
-          expandChildren(graph, child)
-        ]))
-      ));
-    }
-  }, [
-    graph
-  ]);
-  const onOpenChange = useCallback3(({ item: { id }, path, open }) => {
+  const handleOpenChange = useCallback3(({ item: { id }, path, open }) => {
     setItem(path, "open", open);
-    if (graph) {
-      const node = graph.findNode(id);
-      return node && expandChildrenAndActions(graph, node);
-    }
   }, [
     graph
   ]);
-  const onTabChange = useCallback3(async (node) => {
-    await dispatch(createIntent4(LayoutAction4.SwitchWorkspace, {
+  const handleTabChange = useCallback3(async (node) => {
+    await dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
+      part: "sidebar",
+      options: {
+        state: node.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
+      }
+    }));
+    await dispatch(createIntent3(LayoutAction3.SwitchWorkspace, {
       part: "workspace",
       subject: node.id
     }));
     if (layout.active.length === 0) {
-      const [item] = getItems(node).filter((node2) => !isActionLike2(node2));
+      const [item] = getItems(graph, node).filter((node2) => !isActionLike2(node2));
       if (item && item.data) {
-        await dispatch(createIntent4(LayoutAction4.Open, {
+        await dispatch(createIntent3(LayoutAction3.Open, {
           part: "main",
           subject: [
             item.id
@@ -1104,7 +1083,10 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     }
   }, [
     dispatch,
-    layout
+    layout.active,
+    tab,
+    navigationSidebarState,
+    isLg
   ]);
   const canDrop = useCallback3((source, target) => {
     const sourceNode = source.item;
@@ -1122,18 +1104,16 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       return;
     }
     if (isAction4(node)) {
-      const [parent] = graph.nodes(node, {
-        relation: "inbound"
-      });
+      const [parent] = graph.getConnections(node.id, "inbound");
       void (parent && node.data({
-        node: parent,
+        parent,
         caller: NAV_TREE_ITEM
       }));
       return;
     }
     const current = isCurrent(path, node);
     if (!current) {
-      void dispatch(createIntent4(LayoutAction4.Open, {
+      void dispatch(createIntent3(LayoutAction3.Open, {
         part: "main",
         subject: [
           node.id
@@ -1143,7 +1123,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
         }
       }));
     } else if (option) {
-      void dispatch(createIntent4(LayoutAction4.Close, {
+      void dispatch(createIntent3(LayoutAction3.Close, {
         part: "main",
         subject: [
           node.id
@@ -1153,17 +1133,17 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
         }
       }));
     } else {
-      void dispatch(createIntent4(LayoutAction4.ScrollIntoView, {
+      void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
         part: "current",
         subject: node.id
       }));
     }
-    const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === "default");
+    const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
     if (isAction4(defaultAction)) {
       void defaultAction.data();
     }
     if (!isLg) {
-      void dispatch(createIntent4(LayoutAction4.UpdateSidebar, {
+      void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
         part: "sidebar",
         options: {
           state: "closed"
@@ -1176,7 +1156,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isCurrent,
     isLg
   ]);
-  const onBack = useCallback3(() => dispatch(createIntent4(LayoutAction4.RevertWorkspace, {
+  const handleBack = useCallback3(() => dispatch(createIntent3(LayoutAction3.RevertWorkspace, {
     part: "workspace",
     options: {
       revert: true
@@ -1184,7 +1164,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   })), [
     dispatch
   ]);
-  useEffect3(() => {
+  useEffect(() => {
     return monitorForElements({
       canMonitor: ({ source }) => isTreeData(source.data),
       onDrop: ({ location, source }) => {
@@ -1201,8 +1181,8 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
           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 sourceItems = getItems(sourceParent);
-          const targetItems = getItems(targetParent);
+          const sourceItems = getItems(graph, sourceParent);
+          const targetItems = getItems(graph, targetParent);
           const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
           const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
           const migrationIndex = instruction.type === "make-child" ? void 0 : instruction.type === "reorder-below" ? targetIndex + 1 : targetIndex;
@@ -1240,50 +1220,65 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     setItem
   ]);
   const navTreeContextValue = useMemo5(() => ({
+    useItems,
     tab,
-    onTabChange,
-    onBack,
     getActions: getActions2,
-    loadDescendents,
+    // loadDescendents,
     renderItemEnd,
     popoverAnchorId,
     topbar,
-    getItems,
     getProps,
     isCurrent,
     isOpen,
-    onOpenChange,
     canDrop,
-    onSelect: handleSelect,
     isAlternateTree,
-    setAlternateTree
+    setAlternateTree,
+    onTabChange: handleTabChange,
+    onOpenChange: handleOpenChange,
+    onSelect: handleSelect,
+    onBack: handleBack
   }), [
     tab,
-    onTabChange,
-    onBack,
     getActions2,
-    loadDescendents,
+    // loadDescendents,
     renderItemEnd,
     popoverAnchorId,
     topbar,
-    getItems,
     getProps,
     isCurrent,
     isOpen,
-    onOpenChange,
     canDrop,
-    handleSelect,
     isAlternateTree,
-    setAlternateTree
+    setAlternateTree,
+    handleTabChange,
+    handleOpenChange,
+    handleSelect,
+    handleBack
   ]);
   return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
     value: navTreeContextValue
   }, /* @__PURE__ */ React9.createElement(NavTree, {
+    id: ROOT_ID,
     root: graph.root,
-    id: graph.root.id
+    open: layout.sidebarOpen
   }));
 });
 
+// packages/plugins/plugin-navtree/src/components/NavTreeDocumentTitle.tsx
+import { useEffect as useEffect2 } from "react";
+import { toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+var NavTreeDocumentTitle = ({ node }) => {
+  const { t } = useTranslation7(NAVTREE_PLUGIN);
+  useEffect2(() => {
+    document.title = node ? toLocalizedString6(node.properties.label, t) : t("current app name", {
+      ns: "appkit"
+    });
+  }, [
+    node?.properties?.label
+  ]);
+  return null;
+};
+
 export {
   CommandsDialogContent,
   CommandsTrigger,
@@ -1293,9 +1288,6 @@ export {
   sortActions,
   getChildren,
   getActions,
-  expandChildrenAndActions,
-  expandChildren,
-  expandActions,
   l0ItemType,
   NODE_TYPE,
   NavTreeContainer,
@@ -1306,4 +1298,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-FHOAKMRS.mjs.map
+//# sourceMappingURL=chunk-UM2C5XK3.mjs.map