@dxos/plugin-navtree 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/dist/lib/browser/{chunk-HOGQWJWM.mjs → chunk-DN43QXSX.mjs}

@@ -134,57 +134,6 @@ var CommandsTrigger = () => {
   }));
 };
 
-// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
-import React4 from "react";
-import { createIntent as createIntent3, useCapabilities, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
-import { ClientAction } from "@dxos/plugin-client/types";
-import { ObservabilityCapabilities } from "@dxos/plugin-observability";
-import { useIdentity } from "@dxos/react-client/halo";
-
-// packages/plugins/plugin-navtree/src/components/HaloButton.tsx
-import React3 from "react";
-import { ConnectionState, useNetworkStatus } from "@dxos/react-client/mesh";
-import { Avatar } from "@dxos/react-ui";
-import { focusRing, mx as mx2 } from "@dxos/react-ui-theme";
-import { hexToFallback } from "@dxos/util";
-var INTERNAL = "https://avatars.githubusercontent.com/u/57182821";
-var HaloButton = (props) => {
-  const { onClick, identityKey, internal, size = 8 } = props;
-  const fallbackValue = hexToFallback(identityKey ?? "0");
-  const { swarm: connectionState } = useNetworkStatus();
-  return /* @__PURE__ */ React3.createElement("button", {
-    className: mx2(focusRing, "rounded grid place-items-center"),
-    onClick
-  }, /* @__PURE__ */ React3.createElement(Avatar.Root, {
-    size,
-    variant: "circle",
-    status: connectionState === ConnectionState.OFFLINE ? "error" : internal ? "internal" : "active",
-    hue: props.hue || fallbackValue.hue
-  }, /* @__PURE__ */ React3.createElement(Avatar.Frame, {
-    "data-testid": "treeView.haloButton",
-    "data-joyride": "welcome/halo"
-  }, internal ? /* @__PURE__ */ React3.createElement(Avatar.Image, {
-    href: INTERNAL
-  }) : /* @__PURE__ */ React3.createElement(Avatar.Fallback, {
-    text: props.emoji || fallbackValue.emoji
-  }))));
-};
-
-// packages/plugins/plugin-navtree/src/components/NotchStart.tsx
-var NotchStart = () => {
-  const identity = useIdentity();
-  const [observability] = useCapabilities(ObservabilityCapabilities.Observability);
-  const { dispatchPromise: dispatch } = useIntentDispatcher3();
-  return /* @__PURE__ */ React4.createElement(HaloButton, {
-    size: 12,
-    identityKey: identity?.identityKey.toHex(),
-    hue: identity?.profile?.data?.hue,
-    emoji: identity?.profile?.data?.emoji,
-    internal: observability?.group === "dxos",
-    onClick: () => dispatch(createIntent3(ClientAction.ShareIdentity))
-  });
-};
-
 // packages/plugins/plugin-navtree/src/util.ts
 import { ACTION_TYPE, ACTION_GROUP_TYPE, isAction as isAction2, isActionLike } from "@dxos/app-graph";
 import { isNonNullable } from "@dxos/util";
@@ -224,7 +173,7 @@ var sortActions = (actions) => actions.sort((a, b) => {
   if (a.properties.disposition === b.properties.disposition) {
     return 0;
   }
-  if (a.properties.disposition === "toolbar") {
+  if (a.properties.disposition === "list-item-primary") {
     return -1;
   }
   return 1;
@@ -283,47 +232,23 @@ var l0ItemType = (item) => {
     return "tab";
   }
 };
-var renderableCharRegex = /^(?![\p{Control}\p{Mark}\p{Separator}\p{Surrogate}\p{Unassigned}])[\p{L}\p{N}\p{P}\p{S}\p{Emoji}]$/u;
-var getFirstTwoRenderableChars = (label) => {
-  const characters = Array.from(label);
-  const result = [
-    "",
-    ""
-  ];
-  let foundFirst = false;
-  for (let i = 0; i < characters.length; i++) {
-    const char = characters[i];
-    if (renderableCharRegex.test(char)) {
-      if (!foundFirst) {
-        result[0] = char;
-        foundFirst = true;
-      } else {
-        const textBetween = characters.slice(result[0].length, i).join("");
-        if (/[^\p{L}\p{N}_]/u.test(textBetween)) {
-          result[1] = char;
-          break;
-        }
-      }
-    }
-  }
-  return result;
-};
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { untracked } from "@preact/signals-core";
-import React10, { memo as memo2, useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo5 } from "react";
-import { createIntent as createIntent5, LayoutAction as LayoutAction4, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher5, useLayout as useLayout2 } from "@dxos/app-framework";
+import React9, { memo as memo2, useCallback as useCallback2, 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 { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
 import { isEchoObject, isSpace } from "@dxos/react-client/echo";
 import { useMediaQuery as useMediaQuery2 } from "@dxos/react-ui";
 import { isTreeData } from "@dxos/react-ui-list";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 import { arrayMove as arrayMove2 } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
-import React9, { useMemo as useMemo4 } from "react";
+import React8, { useMemo as useMemo4 } from "react";
 import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
 import { byPosition } from "@dxos/util";
 
@@ -333,13 +258,13 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 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 React5, { useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
-import { createIntent as createIntent4, LayoutAction as LayoutAction3, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
+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 { 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 { Tabs } from "@dxos/react-ui-tabs";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-import { arrayMove } from "@dxos/util";
+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";
@@ -347,6 +272,25 @@ 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
+import React3 from "react";
+import { Avatar } from "@dxos/react-ui";
+import { hexToFallback } from "@dxos/util";
+var UserAccountAvatar = (props) => {
+  const fallbackValue = hexToFallback(props.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,
+    "data-testid": "treeview.userAccount"
+  })));
+};
+
 // packages/plugins/plugin-navtree/src/hooks.ts
 import { useEffect as useEffect2 } from "react";
 
@@ -384,7 +328,7 @@ var useLoadDescendents = (root) => {
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-navtree/src/components/L0Menu.tsx";
 var useL0ItemClick = ({ item, parent, path }, type) => {
   const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher4();
+  const { dispatchPromise: dispatch } = useIntentDispatcher3();
   const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery("lg", {
     ssr: false
@@ -392,7 +336,7 @@ var useL0ItemClick = ({ item, parent, path }, type) => {
   return useCallback((event) => {
     switch (type) {
       case "tab":
-        void dispatch(createIntent4(LayoutAction3.UpdateSidebar, {
+        void dispatch(createIntent3(LayoutAction3.UpdateSidebar, {
           part: "sidebar",
           options: {
             state: item.id === tab ? navigationSidebarState === "expanded" ? isLg ? "collapsed" : "closed" : "expanded" : "expanded"
@@ -431,7 +375,7 @@ var useL0ItemClick = ({ item, parent, path }, type) => {
 var l0Breakpoints = {
   lg: "hidden lg:grid"
 };
-var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
+var L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }) => {
   const { t } = useTranslation4(NAVTREE_PLUGIN);
   const itemElement = useRef(null);
   const [closestEdge, setEdge] = useState2(null);
@@ -544,52 +488,57 @@ var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
     item,
     onRearrange
   ]);
-  const l0ItemTrigger = /* @__PURE__ */ React5.createElement(Root, {
+  const l0ItemTrigger = /* @__PURE__ */ React4.createElement(Root, {
     ...rootProps,
     "data-type": type,
-    className: mx3('group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint]),
+    className: mx2('group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag', l0Breakpoints[item.properties.l0Breakpoint]),
     ref: itemElement
-  }, /* @__PURE__ */ React5.createElement("div", {
+  }, 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", {
     role: "none",
     "data-frame": true,
-    className: mx3("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("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"),
     ...hue && {
       style: {
         background: `var(--dx-${hue}Surface)`
       }
     }
-  }, item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
+  }, 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__ */ React5.createElement("span", {
+  }) || (type === "tab" && item.properties.disposition !== "pin-end" ? /* @__PURE__ */ React4.createElement("span", {
     role: "img",
     className: "place-self-center text-3xl font-light",
     ...hueFgStyle
-  }, avatarValue) : item.properties.icon && /* @__PURE__ */ React5.createElement(Icon2, {
+  }, avatarValue) : item.properties.icon && /* @__PURE__ */ React4.createElement(Icon2, {
     icon: "ph--planet--regular",
     size: pinned ? 5 : 7,
     classNames: "place-self-center",
     ...hueFgStyle
-  }))), /* @__PURE__ */ React5.createElement("div", {
+  }))), /* @__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"
-  }), /* @__PURE__ */ React5.createElement("span", {
+  }), /* @__PURE__ */ React4.createElement("span", {
     id: `${item.id}__label`,
     className: "sr-only"
-  }, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React5.createElement(ListItem.DropIndicator, {
+  }, localizedString), onRearrange && closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
     edge: closestEdge
   }));
-  return popoverAnchorId === id ? /* @__PURE__ */ React5.createElement(Popover.Anchor, {
+  return popoverAnchorId === id ? /* @__PURE__ */ React4.createElement(Popover.Anchor, {
     asChild: true
-  }, l0ItemTrigger) : /* @__PURE__ */ React5.createElement(Tooltip.Root, {
+  }, l0ItemTrigger) : /* @__PURE__ */ React4.createElement(Tooltip.Root, {
     delayDuration: 0
-  }, /* @__PURE__ */ React5.createElement(Tooltip.Trigger, {
+  }, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
     asChild: true
-  }, l0ItemTrigger), /* @__PURE__ */ React5.createElement(Tooltip.Portal, null, /* @__PURE__ */ React5.createElement(Tooltip.Content, {
+  }, l0ItemTrigger), /* @__PURE__ */ React4.createElement(Tooltip.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip.Content, {
     side: "right"
-  }, localizedString, /* @__PURE__ */ React5.createElement(Tooltip.Arrow, null))));
+  }, localizedString, /* @__PURE__ */ React4.createElement(Tooltip.Arrow, null))));
 };
 var L0Collection = ({ item, path, parent }) => {
   const navTreeContext = useNavTreeContext();
@@ -606,7 +555,7 @@ var L0Collection = ({ item, path, parent }) => {
   const handleRearrange = useCallback((source, target, closestEdge) => {
     invariant(item.properties.onRearrangeChildren, void 0, {
       F: __dxlog_file,
-      L: 246,
+      L: 256,
       S: void 0,
       A: [
         "item.properties.onRearrangeChildren",
@@ -624,13 +573,13 @@ var L0Collection = ({ item, path, parent }) => {
     collectionItems,
     item.properties.onRearrangeChildren
   ]);
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "group",
     className: "contents group/l0c",
     "aria-labelledby": `${item.id}__label`,
     "data-itemid": id,
     "data-testid": testId
-  }, collectionItems.map((collectionItem) => /* @__PURE__ */ React5.createElement(L0Item, {
+  }, collectionItems.map((collectionItem) => /* @__PURE__ */ React4.createElement(L0Item, {
     key: collectionItem.id,
     item: collectionItem,
     parent: item,
@@ -640,43 +589,49 @@ var L0Collection = ({ item, path, parent }) => {
     }
   })));
 };
-var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
-  return /* @__PURE__ */ React5.createElement(Tabs.Tablist, {
+var L0Menu = ({ topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
+  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__ */ React5.createElement(ScrollArea.Root, null, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__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)]'
   }, topLevelItems.map((item) => {
     if (l0ItemType(item) === "collection") {
-      return /* @__PURE__ */ React5.createElement(L0Collection, {
+      return /* @__PURE__ */ React4.createElement(L0Collection, {
         key: item.id,
         item,
         parent,
         path
       });
     } else {
-      return /* @__PURE__ */ React5.createElement(L0Item, {
+      return /* @__PURE__ */ React4.createElement(L0Item, {
         key: item.id,
         item,
         parent,
         path
       });
     }
-  })), /* @__PURE__ */ React5.createElement(ScrollArea.Scrollbar, {
+  })), /* @__PURE__ */ React4.createElement(ScrollArea.Scrollbar, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Thumb, null)))), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grid grid-cols-1 auto-rows-[--rail-action] pbs-2"
-  }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React5.createElement(L0Item, {
+  }, pinnedItems.filter((item) => l0ItemType(item) !== "collection").map((item) => /* @__PURE__ */ React4.createElement(L0Item, {
     key: item.id,
     item,
     parent,
     path,
     pinned: true
-  }))), /* @__PURE__ */ React5.createElement("div", {
+  }))), userAccountItem && /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: "grid p-2 app-no-drag"
-  }, /* @__PURE__ */ React5.createElement(NotchStart, null)), /* @__PURE__ */ React5.createElement("div", {
+    className: "grid py-2 app-no-drag"
+  }, /* @__PURE__ */ React4.createElement(L0Item, {
+    key: userAccountItem.id,
+    item: userAccountItem,
+    parent,
+    path,
+    userAccount: true
+  })), /* @__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: {
@@ -686,23 +641,23 @@ var L0Menu = ({ topLevelItems, pinnedItems, parent, path }) => {
 };
 
 // packages/plugins/plugin-navtree/src/components/L1Panels.tsx
-import React8, { useMemo as useMemo3 } from "react";
+import React7, { useMemo as useMemo3 } from "react";
 import { useLayout } from "@dxos/app-framework";
-import { IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Button as Button3, Icon as Icon3, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } 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 mx5 } from "@dxos/react-ui-theme";
+import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2, mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
-import React7, { Fragment, memo } from "react";
+import React6, { Fragment, memo } from "react";
 import { isAction as isAction3 } from "@dxos/app-graph";
 import { Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
-import React6, { useRef as useRef2 } from "react";
+import React5, { useRef as useRef2 } from "react";
 import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton } from "@dxos/react-ui";
 import { DropdownMenu, MenuProvider } from "@dxos/react-ui-menu";
-import { hoverableControlItem, hoverableOpenControlItem, mx as mx4 } from "@dxos/react-ui-theme";
+import { hoverableControlItem, hoverableOpenControlItem, mx as mx3 } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
 var actionButtonProps = {
   size: 4,
@@ -711,16 +666,16 @@ var actionButtonProps = {
 var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
   const { t } = useTranslation5(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef2(false);
-  return /* @__PURE__ */ React6.createElement(MenuProvider, {
+  return /* @__PURE__ */ React5.createElement(MenuProvider, {
     onAction
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
     items: menuActions,
     suppressNextTooltip
-  }, /* @__PURE__ */ React6.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React6.createElement(IconButton, {
+  }, /* @__PURE__ */ React5.createElement(IconButton, {
     ...actionButtonProps,
-    classNames: mx4("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
+    classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
     variant: "ghost",
     icon: icon ?? fallbackIcon,
     iconOnly: true,
@@ -732,10 +687,10 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onActio
 var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
   label: "never"
 }, data: invoke, baseLabel }) => {
-  return /* @__PURE__ */ React6.createElement(IconButton, {
+  return /* @__PURE__ */ React5.createElement(IconButton, {
     ...actionButtonProps,
     variant,
-    classNames: mx4("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
+    classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
     icon: icon ?? fallbackIcon,
     iconOnly,
     label: baseLabel,
@@ -759,11 +714,11 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
   const { t } = useTranslation5(NAVTREE_PLUGIN);
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
-  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React6.createElement(NavTreeItemMonolithicAction, {
+  return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
     baseLabel,
     parent: node,
     ...menuActions[0]
-  }) : /* @__PURE__ */ React6.createElement(NavTreeItemActionDropdownMenu, {
+  }) : /* @__PURE__ */ React5.createElement(NavTreeItemActionDropdownMenu, {
     ...props,
     label: baseLabel,
     parent: node,
@@ -783,17 +738,17 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
   const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
   const level = path.length - 2;
   const { actions: _actions, groupedActions } = getActions2(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "toolbar" ? -1 : 1);
-  const actions = (primaryAction?.properties?.disposition === "toolbar" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
+  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;
   useLoadDescendents(item);
   useLoadDescendents(primaryAction && !isAction3(primaryAction) ? primaryAction : void 0);
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "contents app-no-drag"
-  }, primaryAction?.properties?.disposition === "toolbar" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React7.createElement(NavTreeItemAction, {
+  }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
     testId: primaryAction.properties?.testId,
     label: toLocalizedString5(primaryAction.properties?.label, t),
     icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
@@ -804,7 +759,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
     ] : groupedActions[primaryAction.id],
     menuType: primaryAction.properties?.menuType,
     caller: NAV_TREE_ITEM
-  }) : /* @__PURE__ */ React7.createElement(Treegrid.Cell, null), /* @__PURE__ */ React7.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React7.createElement(NavTreeItemAction, {
+  }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
     testId: `navtree.treeItem.actionsLevel${level}`,
     label: t("tree item actions label"),
     icon: "ph--dots-three-vertical--regular",
@@ -812,7 +767,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
     menuActions: actions,
     menuType: "dropdown",
     caller: NAV_TREE_ITEM
-  }) : /* @__PURE__ */ React7.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React7.createElement(ItemEnd, {
+  }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
     node: item,
     open
   }));
@@ -823,7 +778,7 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
   const layout = useLayout();
   const navTreeContext = useNavTreeContext();
   const { t } = useTranslation7(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React8.createElement(Tabs2.Tabpanel, {
+  return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
     key: item.id,
     value: item.id,
     classNames: [
@@ -834,27 +789,26 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
     ...!layout.sidebarOpen && {
       inert: "true"
     }
-  }, item.id === currentItemId && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
-    className: "flex items-center border-be border-separator pis-4 app-drag"
-  }, item.properties.disposition === "pin-end" && /* @__PURE__ */ React8.createElement(IconButton2, {
-    label: t("back label"),
-    iconOnly: true,
-    icon: "ph--caret-left--regular",
-    size: 5,
-    density: "fine",
+  }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
+    className: "flex items-center border-be border-separator app-drag"
+  }, /* @__PURE__ */ React7.createElement(Button3, {
     variant: "ghost",
-    classNames: mx5("shrink-0 mie-2 !p-0", "pointer-fine:pli-1", hoverableControlItem2, hoverableOpenControlItem2),
+    density: "fine",
+    classNames: mx4("is-6 pli-0 dx-focus-ring-inset", !item.id.startsWith("!") && "invisible", hoverableControlItem2, hoverableOpenControlItem2),
     onClick: onBack
-  }), /* @__PURE__ */ React8.createElement("span", {
+  }, /* @__PURE__ */ React7.createElement(Icon3, {
+    icon: "ph--caret-left--regular",
+    size: 3
+  })), /* @__PURE__ */ React7.createElement("span", {
     className: "flex-1 truncate cursor-default"
-  }, toLocalizedString6(item.properties.label, t)), /* @__PURE__ */ React8.createElement(NavTreeItemColumns, {
+  }, toLocalizedString6(item.properties.label, t)), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
     path,
     item,
     open: true
-  })), /* @__PURE__ */ React8.createElement("div", {
+  })), /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "overflow-y-auto"
-  }, /* @__PURE__ */ React8.createElement(Tree, {
+  }, /* @__PURE__ */ React7.createElement(Tree, {
     ...navTreeContext,
     id: item.id,
     root: item,
@@ -876,7 +830,7 @@ var L1PanelCollection = ({ item, path, currentItemId }) => {
     item.id,
     path
   ]);
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React8.createElement(L1Panel, {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React7.createElement(L1Panel, {
     key: item2.id,
     item: item2,
     path: groupPath,
@@ -884,18 +838,18 @@ var L1PanelCollection = ({ item, path, currentItemId }) => {
   })));
 };
 var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
     const type = l0ItemType(item);
     switch (type) {
       case "collection":
-        return /* @__PURE__ */ React8.createElement(L1PanelCollection, {
+        return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
           key: item.id,
           item,
           path,
           currentItemId
         });
       case "tab":
-        return /* @__PURE__ */ React8.createElement(L1Panel, {
+        return /* @__PURE__ */ React7.createElement(L1Panel, {
           key: item.id,
           item,
           path,
@@ -928,12 +882,15 @@ var NavTree = ({ id, root }) => {
     topLevelNavigation
   ]);
   const pinnedItems = getItems(root, "pin-end").toSorted((a, b) => byPosition(a.properties, b.properties));
+  const userAccountItem = getItems(root, "user-account")[0];
   const topLevelItems = useMemo4(() => [
     ...l0Items,
-    ...pinnedItems
+    ...pinnedItems,
+    userAccountItem
   ], [
     l0Items,
-    pinnedItems
+    pinnedItems,
+    userAccountItem
   ]);
   useLoadDescendents(root);
   const path = useMemo4(() => [
@@ -943,17 +900,18 @@ var NavTree = ({ id, root }) => {
   ]);
   return (
     // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
-    /* @__PURE__ */ React9.createElement(Tabs3.Root, {
+    /* @__PURE__ */ React8.createElement(Tabs3.Root, {
       value: tab,
       orientation: "vertical",
       verticalVariant: "stateless",
       classNames: "relative"
-    }, /* @__PURE__ */ React9.createElement(L0Menu, {
+    }, /* @__PURE__ */ React8.createElement(L0Menu, {
       topLevelItems: l0Items,
       pinnedItems,
+      userAccountItem,
       path,
       parent: root
-    }), /* @__PURE__ */ React9.createElement(L1Panels, {
+    }), /* @__PURE__ */ React8.createElement(L1Panels, {
       topLevelItems,
       path,
       currentItemId: tab,
@@ -967,12 +925,12 @@ import { lazy } from "@dxos/app-framework";
 var AppGraphBuilder = lazy(() => import("./app-graph-builder-26D3MUCA.mjs"));
 var IntentResolver = lazy(() => import("./intent-resolver-BZMUS24C.mjs"));
 var Keyboard2 = lazy(() => import("./keyboard-IQXHKUWM.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-JQOY2DYT.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-3HCM3SHJ.mjs"));
 var State = lazy(() => import("./state-M5UJ3MHL.mjs"));
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
-var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Surface, {
+var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Surface, {
   role: "navtree-item-end",
   data: {
     id: node.id,
@@ -981,11 +939,12 @@ var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Su
   },
   limit: 1
 });
+var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
 var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
   const [isLg] = useMediaQuery2("lg", {
     ssr: false
   });
-  const { dispatchPromise: dispatch } = useIntentDispatcher5();
+  const { dispatchPromise: dispatch } = useIntentDispatcher4();
   const { graph } = useAppGraph2();
   const layout = useLayout2();
   const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
@@ -996,11 +955,14 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     return graph.nodes(node ?? graph.root, {
       filter: (node2) => {
         return untracked(() => {
-          const action = isAction4(node2);
-          if (!disposition) {
+          if (node2.properties.disposition === "hidden") {
+            return false;
+          } else if (!disposition) {
+            const action = isAction4(node2);
             return !action || node2.properties.disposition === "item";
+          } else {
+            return node2.properties.disposition === disposition;
           }
-          return node2.properties.disposition === disposition;
         });
       }
     });
@@ -1008,7 +970,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     graph
   ]);
   const getProps = useCallback2((node, path) => {
-    const children = getChildren(graph, node, void 0, path);
+    const children = getChildren(graph, node, getChildrenFilter, path);
     const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
     return {
       id: node.id,
@@ -1016,7 +978,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       parentOf,
       icon: node.properties.icon,
       disabled: node.properties.disabled,
-      className: mx6(node.properties.modified && "italic", node.properties.className),
+      className: mx5(node.properties.modified && "italic", node.properties.className),
       headingClassName: node.properties.headingClassName,
       testId: node.properties.testId
     };
@@ -1047,14 +1009,14 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     graph
   ]);
   const onTabChange = useCallback2(async (node) => {
-    await dispatch(createIntent5(LayoutAction4.SwitchWorkspace, {
+    await dispatch(createIntent4(LayoutAction4.SwitchWorkspace, {
       part: "workspace",
       subject: node.id
     }));
     if (layout.active.length === 0) {
       const [item] = getItems(node).filter((node2) => !isActionLike2(node2));
       if (item && item.data) {
-        await dispatch(createIntent5(LayoutAction4.Open, {
+        await dispatch(createIntent4(LayoutAction4.Open, {
           part: "main",
           subject: [
             item.id
@@ -1093,7 +1055,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     }
     const current = isCurrent(path, node);
     if (!current) {
-      void dispatch(createIntent5(LayoutAction4.Open, {
+      void dispatch(createIntent4(LayoutAction4.Open, {
         part: "main",
         subject: [
           node.id
@@ -1103,7 +1065,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
         }
       }));
     } else if (option) {
-      void dispatch(createIntent5(LayoutAction4.Close, {
+      void dispatch(createIntent4(LayoutAction4.Close, {
         part: "main",
         subject: [
           node.id
@@ -1113,7 +1075,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
         }
       }));
     } else {
-      void dispatch(createIntent5(LayoutAction4.ScrollIntoView, {
+      void dispatch(createIntent4(LayoutAction4.ScrollIntoView, {
         part: "current",
         subject: node.id
       }));
@@ -1123,7 +1085,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       void defaultAction.data();
     }
     if (!isLg) {
-      void dispatch(createIntent5(LayoutAction4.UpdateSidebar, {
+      void dispatch(createIntent4(LayoutAction4.UpdateSidebar, {
         part: "sidebar",
         options: {
           state: "closed"
@@ -1136,7 +1098,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isCurrent,
     isLg
   ]);
-  const onBack = useCallback2(() => dispatch(createIntent5(LayoutAction4.RevertWorkspace, {
+  const onBack = useCallback2(() => dispatch(createIntent4(LayoutAction4.RevertWorkspace, {
     part: "workspace",
     options: {
       revert: true
@@ -1227,9 +1189,9 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     canDrop,
     handleSelect
   ]);
-  return /* @__PURE__ */ React10.createElement(NavTreeContext.Provider, {
+  return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
     value: navTreeContextValue
-  }, /* @__PURE__ */ React10.createElement(NavTree, {
+  }, /* @__PURE__ */ React9.createElement(NavTree, {
     root: graph.root,
     id: graph.root.id
   }));
@@ -1238,7 +1200,6 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
 export {
   CommandsDialogContent,
   CommandsTrigger,
-  NotchStart,
   getParent,
   getPersistenceParent,
   resolveMigrationOperation,
@@ -1249,7 +1210,6 @@ export {
   expandChildren,
   expandActions,
   l0ItemType,
-  getFirstTwoRenderableChars,
   NODE_TYPE,
   NavTreeContainer,
   NavTreeDocumentTitle,
@@ -1259,4 +1219,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-HOGQWJWM.mjs.map
+//# sourceMappingURL=chunk-DN43QXSX.mjs.map