@dxos/plugin-navtree 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/dist/lib/browser/{chunk-TZA65AKW.mjs → chunk-7D2MPHXV.mjs}

@@ -1,20 +1,21 @@
 import {
   NavTreeCapabilities
-} from "./chunk-WCARAZ7J.mjs";
+} from "./chunk-5VLWX4PK.mjs";
 import {
   COMMANDS_DIALOG,
   KEY_BINDING,
-  NAVTREE_PLUGIN
-} from "./chunk-ERDGQTH5.mjs";
+  meta
+} from "./chunk-E6MZBCU5.mjs";
 
 // src/components/CommandsDialog/CommandsDialog.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { useMemo, useState } from "react";
-import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from "@dxos/app-framework";
+import { LayoutAction, createIntent } from "@dxos/app-framework";
+import { useAppGraph, useIntentDispatcher } from "@dxos/app-framework/react";
 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 { Button, Dialog, Icon, toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { SearchList } from "@dxos/react-ui-searchlist";
 import { cardDialogContent, cardDialogHeader, cardDialogPaddedOverflow, cardDialogSearchListRoot } from "@dxos/react-ui-stack";
 import { descriptionText, mx } from "@dxos/react-ui-theme";
@@ -22,7 +23,7 @@ import { getHostPlatform } from "@dxos/util";
 var CommandsDialogContent = ({ selected: initial }) => {
   var _effect = _useSignals();
   try {
-    const { t } = useTranslation(NAVTREE_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const [selected, setSelected] = useState(initial);
     const { dispatchPromise: dispatch } = useIntentDispatcher();
     const { graph } = useAppGraph();
@@ -53,7 +54,7 @@ var CommandsDialogContent = ({ selected: initial }) => {
     }, /* @__PURE__ */ React.createElement(Dialog.Title, {
       classNames: cardDialogHeader
     }, t("commands dialog title", {
-      ns: NAVTREE_PLUGIN
+      ns: meta.id
     })), /* @__PURE__ */ React.createElement(SearchList.Root, {
       label: t("command list input placeholder"),
       classNames: cardDialogSearchListRoot
@@ -119,16 +120,15 @@ var CommandsDialogContent = ({ selected: initial }) => {
 
 // src/components/CommandsDialog/CommandsTrigger.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import { MagnifyingGlass } from "@phosphor-icons/react";
 import React2 from "react";
-import { createIntent as createIntent2, LayoutAction as LayoutAction2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
-import { Button as Button2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
+import { LayoutAction as LayoutAction2, createIntent as createIntent2 } from "@dxos/app-framework";
+import { useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework/react";
+import { Button as Button2, Icon as Icon2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 var CommandsTrigger = () => {
   var _effect = _useSignals2();
   try {
     const { dispatchPromise: dispatch } = useIntentDispatcher2();
-    const { t } = useTranslation2(NAVTREE_PLUGIN);
+    const { t } = useTranslation2(meta.id);
     return /* @__PURE__ */ React2.createElement(Button2, {
       classNames: "m-1 pli-1 lg:pli-2",
       onClick: () => dispatch(createIntent2(LayoutAction2.UpdateDialog, {
@@ -140,8 +140,9 @@ var CommandsTrigger = () => {
       }))
     }, /* @__PURE__ */ React2.createElement("span", {
       className: "text-description font-normal grow text-start"
-    }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(MagnifyingGlass, {
-      className: getSize(5)
+    }, t("command list input placeholder")), /* @__PURE__ */ React2.createElement(Icon2, {
+      icon: "ph--magnifying-glass--regular",
+      size: 5
     }));
   } finally {
     _effect.f();
@@ -149,7 +150,7 @@ var CommandsTrigger = () => {
 };
 
 // src/util.ts
-import { isAction as isAction2, isActionLike } from "@dxos/app-graph";
+import { isActionLike } from "@dxos/app-graph";
 import { isNonNullable } from "@dxos/util";
 var getParent = (graph, node, path) => {
   const parentId = path[path.length - 2];
@@ -199,22 +200,6 @@ var getChildren = (graph, node, path = []) => {
     return nextPath.includes(n.id) ? void 0 : n;
   }).filter(isNonNullable);
 };
-var getActions = (graph, node) => {
-  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.getActions(arg.id);
-      acc.groupedActions[arg.id] = actionGroup;
-    }
-    return acc;
-  }, {
-    actions: [],
-    groupedActions: {}
-  });
-};
 var l0ItemType = (item) => {
   if (item.properties.disposition === "collection") {
     return "collection";
@@ -228,23 +213,32 @@ var l0ItemType = (item) => {
 };
 
 // src/components/NavTreeContainer.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 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 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 React10, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo6 } from "react";
+import { LayoutAction as LayoutAction3, createIntent as createIntent3 } from "@dxos/app-framework";
+import { Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher3, useLayout } from "@dxos/app-framework/react";
+import { ROOT_ID, isAction as isAction3, isActionLike as isActionLike2 } from "@dxos/app-graph";
 import { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
-import { useConnections } from "@dxos/plugin-graph";
+import { useConnections, useActions as useGraphActions } from "@dxos/plugin-graph";
 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 { mx as mx3 } from "@dxos/react-ui-theme";
 import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
 
+// src/capabilities/index.ts
+import { lazy } from "@dxos/app-framework";
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-OHSCN3GX.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-YUVXVPHG.mjs"));
+var Keyboard2 = lazy(() => import("./keyboard-YYTYJW4M.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-J7MWWAGD.mjs"));
+var State = lazy(() => import("./state-EUSVT6BI.mjs"));
+
 // src/components/NavTree/NavTree.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { useMemo as useMemo4 } from "react";
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import React9, { useMemo as useMemo5 } from "react";
 import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
 
 // src/hooks.ts
@@ -260,7 +254,7 @@ var useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error("Mis
 import { useEffect } from "react";
 import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
 var NavTreeDocumentTitle = ({ node }) => {
-  const { t } = useTranslation3(NAVTREE_PLUGIN);
+  const { t } = useTranslation3(meta.id);
   useEffect(() => {
     document.title = node ? toLocalizedString2(node.properties.label, t) : t("current app name", {
       ns: "appkit"
@@ -295,11 +289,12 @@ import { scrollJustEnoughIntoView } from "@atlaskit/pragmatic-drag-and-drop/elem
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import React4, { forwardRef, useCallback, useLayoutEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
 import { invariant } from "@dxos/invariant";
-import { Icon as Icon2, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { MenuProvider, DropdownMenu } from "@dxos/react-ui-menu";
+import { DxAvatar } from "@dxos/lit-ui/react";
+import { Icon as Icon3, ListItem, ScrollArea, Tooltip, toLocalizedString as toLocalizedString3, useMediaQuery, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { DropdownMenu, MenuProvider } 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";
+import { arrayMove } from "@dxos/util";
 
 // src/components/UserAccountAvatar/UserAccountAvatar.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
@@ -310,8 +305,10 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
   var _effect = _useSignals3();
   try {
     const fallbackValue = hexToFallback(userId ?? "0");
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: "grid place-items-center",
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(L0ItemActiveTabIndicator, {
+      classNames: "inset-block-6"
+    }), /* @__PURE__ */ React3.createElement("div", {
+      className: "grid place-items-center dx-focus-ring-group-indicator rounded-full",
       "data-joyride": "welcome/account"
     }, /* @__PURE__ */ React3.createElement(Avatar.Root, null, /* @__PURE__ */ React3.createElement(Avatar.Content, {
       variant: "circle",
@@ -320,7 +317,7 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
       hue: hue || fallbackValue.hue,
       fallback: emoji || fallbackValue.emoji,
       "data-testid": "treeView.userAccount"
-    })));
+    }))));
   } finally {
     _effect.f();
   }
@@ -330,9 +327,7 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-navtree/src/components/Sidebar/L0Menu.tsx";
 var useL0ItemClick = ({ item, parent, path }, type) => {
   const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
-  const [isLg] = useMediaQuery("lg", {
-    ssr: false
-  });
+  const [isLg] = useMediaQuery("lg");
   return useCallback((event) => {
     switch (type) {
       case "action": {
@@ -368,7 +363,7 @@ var useL0ItemClick = ({ item, parent, path }, type) => {
 var l0Breakpoints = {
   lg: "hidden lg:grid"
 };
-var l0ItemRoot = 'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
+var l0ItemRoot = 'group/l0item flex is-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
 var l0ItemContent = "flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm";
 var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, forwardedRef) => {
   var _effect = _useSignals4();
@@ -383,7 +378,7 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
       item.id,
       path
     ]);
-    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    const { t } = useTranslation4(meta.id);
     const localizedString = toLocalizedString3(item.properties.label, t);
     const handleClick = useL0ItemClick({
       item,
@@ -395,21 +390,21 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
       tabIndex: 0,
       onClick: handleClick,
       "data-testid": testId,
-      "data-itemid": id
+      "data-object-id": id
     } : type !== "collection" ? {
       onClick: handleClick,
       "data-testid": testId,
-      "data-itemid": id
+      "data-object-id": id
     } : {
-      onClick: handleClick
+      onClick: handleClick,
+      role: "button"
     };
-    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, {
+    }, /* @__PURE__ */ React4.createElement(Tabs.TabPrimitive, {
       ...rootProps,
       "data-type": type,
       className: mx2(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint]),
@@ -419,28 +414,13 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
     _effect.f();
   }
 });
-var L0Avatar = ({ item }) => {
+var L0ItemActiveTabIndicator = ({ classNames }) => {
   var _effect = _useSignals4();
   try {
-    const { t } = useTranslation4(NAVTREE_PLUGIN);
-    const type = l0ItemType(item);
-    const hue = item.properties.hue ?? null;
-    const hueFgStyle = hue && {
-      style: {
-        color: `var(--dx-${hue}SurfaceText)`
-      }
-    };
-    const localizedString = toLocalizedString3(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);
+    return /* @__PURE__ */ React4.createElement("div", {
+      role: "none",
+      className: mx2("hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie", classNames)
+    });
   } finally {
     _effect.f();
   }
@@ -448,7 +428,7 @@ var L0Avatar = ({ item }) => {
 var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
   var _effect = _useSignals4();
   try {
-    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    const { t } = useTranslation4(meta.id);
     const itemElement = useRef(null);
     const [closestEdge, setEdge] = useState2(null);
     const localizedString = toLocalizedString3(item.properties.label, t);
@@ -537,10 +517,7 @@ var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
       className: mx2(l0ItemContent, pinned ? "p-2 group-hover/l0item:bg-activeSurface" : "is-[--l0-avatar-size] bs-[--l0-avatar-size] bg-activeSurface")
     }, /* @__PURE__ */ React4.createElement(ItemAvatar, {
       item
-    })), /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie"
-    }), /* @__PURE__ */ React4.createElement("span", {
+    })), /* @__PURE__ */ React4.createElement(L0ItemActiveTabIndicator, null), /* @__PURE__ */ React4.createElement("span", {
       id: `${item.id}__label`,
       className: "sr-only"
     }, localizedString), closestEdge && /* @__PURE__ */ React4.createElement(ListItem.DropIndicator, {
@@ -553,6 +530,7 @@ var L0Item = ({ item, parent, path, pinned, onRearrange }) => {
 var ItemAvatar = ({ item }) => {
   var _effect = _useSignals4();
   try {
+    const { t } = useTranslation4(meta.id);
     const type = l0ItemType(item);
     if (item.properties.icon) {
       const hue = item.properties.hue ?? null;
@@ -561,15 +539,21 @@ var ItemAvatar = ({ item }) => {
           color: `var(--dx-${hue}SurfaceText)`
         }
       };
-      return /* @__PURE__ */ React4.createElement(Icon2, {
+      return /* @__PURE__ */ React4.createElement(Icon3, {
         icon: item.properties.icon,
-        size: 5,
+        size: 6,
         ...hueFgStyle
       });
     }
     if (type === "tab" && item.properties.disposition !== "pin-end") {
-      return /* @__PURE__ */ React4.createElement(L0Avatar, {
-        item
+      const hue = item.properties.hue ?? null;
+      const localizedString = toLocalizedString3(item.properties.label, t);
+      return /* @__PURE__ */ React4.createElement(DxAvatar, {
+        hue,
+        hueVariant: "surface",
+        variant: "square",
+        size: 12,
+        fallback: localizedString
       });
     }
     return null;
@@ -616,7 +600,7 @@ var L0Collection = ({ item, path }) => {
       role: "group",
       className: "contents group/l0c",
       "aria-labelledby": `${item.id}__label`,
-      "data-itemid": id,
+      "data-object-id": id,
       "data-testid": testId
     }, collectionItems.map((collectionItem) => /* @__PURE__ */ React4.createElement(L0Item, {
       key: collectionItem.id,
@@ -634,7 +618,7 @@ var L0Collection = ({ item, path }) => {
 var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }) => {
   var _effect = _useSignals4();
   try {
-    const { t } = useTranslation4(NAVTREE_PLUGIN);
+    const { t } = useTranslation4(meta.id);
     return /* @__PURE__ */ React4.createElement(Tabs.Tablist, {
       classNames: [
         "group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is",
@@ -648,16 +632,20 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
       content: t("app menu label"),
       side: "right",
       asChild: true
+    }, /* @__PURE__ */ React4.createElement(Tabs.TabPrimitive, {
+      value: "options",
+      asChild: true,
+      role: "button"
     }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
       "data-testid": "spacePlugin.addSpace",
-      className: mx2(l0ItemRoot, "grid place-items-center")
+      className: mx2(l0ItemRoot, "grid place-items-center dx-focus-ring-group")
     }, /* @__PURE__ */ React4.createElement("div", {
       role: "none",
       className: mx2(l0ItemContent, "is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface")
-    }, /* @__PURE__ */ React4.createElement(Icon2, {
+    }, /* @__PURE__ */ React4.createElement(Icon3, {
       icon: "ph--list--regular",
       size: 5
-    })))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
+    }))))))), /* @__PURE__ */ React4.createElement(ScrollArea.Root, null, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React4.createElement("div", {
       role: "none",
       className: mx2([
         "flex flex-col gap-1 pbs-1",
@@ -720,17 +708,17 @@ var L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent
 // src/components/Sidebar/L1Panel.tsx
 import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { Button as Button3, Icon as Icon3, IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { DensityProvider, IconButton as IconButton2, 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 mx4 } from "@dxos/react-ui-theme";
+import { hoverableControlItem as hoverableControlItem2, hoverableOpenControlItem as hoverableOpenControlItem2 } from "@dxos/react-ui-theme";
 
 // src/components/NavTreeItem/NavTreeItemAction.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import React5 from "react";
-import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton, useDensityContext } from "@dxos/react-ui";
+import { IconButton, toLocalizedString as toLocalizedString4, useDensityContext, useTranslation as useTranslation5 } 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";
+import { hoverableControlItem, hoverableOpenControlItem } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
 var fineActionButtonProps = {
   size: 4,
@@ -743,7 +731,7 @@ var coarseActionButtonProps = {
 var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions, caller }) => {
   var _effect = _useSignals5();
   try {
-    const { t } = useTranslation5(NAVTREE_PLUGIN);
+    const { t } = useTranslation5(meta.id);
     const density = useDensityContext();
     return /* @__PURE__ */ React5.createElement(MenuProvider2, null, /* @__PURE__ */ React5.createElement(DropdownMenu2.Root, {
       group: parent,
@@ -753,7 +741,11 @@ var NavTreeItemActionDropdownMenu = ({ parent, label, icon, testId, menuActions,
       asChild: true
     }, /* @__PURE__ */ React5.createElement(IconButton, {
       ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
-      classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
+      classNames: [
+        "shrink-0 pli-2 pointer-fine:pli-1",
+        hoverableControlItem,
+        hoverableOpenControlItem
+      ],
       variant: "ghost",
       icon: icon ?? fallbackIcon,
       iconOnly: true,
@@ -773,16 +765,21 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
     return /* @__PURE__ */ React5.createElement(IconButton, {
       ...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"),
+      classNames: [
+        "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,
       disabled,
       onClick: (event) => {
+        event.stopPropagation();
         if (disabled) {
           return;
         }
-        event.stopPropagation();
         void invoke?.(caller ? {
           parent,
           caller
@@ -799,7 +796,7 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
 var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) => {
   var _effect = _useSignals5();
   try {
-    const { t } = useTranslation5(NAVTREE_PLUGIN);
+    const { t } = useTranslation5(meta.id);
     const monolithicAction = menuActions?.length === 1 && menuActions[0];
     const baseLabel = toLocalizedString4(monolithicAction ? monolithicAction.properties.label : props.label, t);
     return monolithic && menuActions?.length === 1 ? /* @__PURE__ */ React5.createElement(NavTreeItemMonolithicAction, {
@@ -820,42 +817,46 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 // src/components/NavTreeItem/NavTreeItemColumns.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6, { Fragment, memo } from "react";
-import { isAction as isAction3 } from "@dxos/app-graph";
-import { DensityProvider, Popover, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
-var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
+import { isAction as isAction2 } from "@dxos/app-graph";
+import { Popover, Treegrid, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
+var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
   var _effect = _useSignals6();
   try {
-    const { t } = useTranslation6(NAVTREE_PLUGIN);
-    const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+    const { t } = useTranslation6(meta.id);
+    const { useActions: useActions3, 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 === "list-item-primary" ? -1 : 1);
-    const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
+    const { actions: _actions, groupedActions } = useActions3(item);
+    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) => isAction2(action) ? [
       action
     ] : []).filter((a) => [
       "list-item",
       "list-item-primary"
     ].includes(a.properties?.disposition));
-    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, {
-      density
-    }, /* @__PURE__ */ React6.createElement("div", {
+    useLoadDescendents(primaryAction && !isAction2(primaryAction) ? primaryAction : void 0);
+    const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+    return /* @__PURE__ */ React6.createElement("div", {
       role: "none",
       className: "contents app-no-drag"
-    }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
+    }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
+      classNames: "contents"
+    }, /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
       testId: primaryAction.properties?.testId,
       label: toLocalizedString5(primaryAction.properties?.label, t),
       icon: primaryAction.properties?.icon ?? "ph--placeholder--regular",
       parent: item,
-      monolithic: isAction3(primaryAction),
-      menuActions: isAction3(primaryAction) ? [
+      monolithic: isAction2(primaryAction),
+      menuActions: isAction2(primaryAction) ? [
         primaryAction
       ] : groupedActions[primaryAction.id],
       menuType: primaryAction.properties?.menuType,
       caller: NAV_TREE_ITEM
-    }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
+    })) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
+      role: "none"
+    }), /* @__PURE__ */ React6.createElement(ActionRoot, null, actions.length > 0 ? /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
+      classNames: "contents"
+    }, /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
       testId: `navtree.treeItem.actionsLevel${level}`,
       label: t("tree item actions label"),
       icon: "ph--dots-three-vertical--regular",
@@ -863,7 +864,11 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
       menuActions: actions,
       menuType: "dropdown",
       caller: NAV_TREE_ITEM
-    }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
+    })) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
+      role: "none"
+    })), ItemEnd && /* @__PURE__ */ React6.createElement(Treegrid.Cell, {
+      classNames: "contents"
+    }, /* @__PURE__ */ React6.createElement(ItemEnd, {
       node: item,
       open
     })));
@@ -873,30 +878,14 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
 });
 
 // src/components/Sidebar/L1Panel.tsx
-var headingBackButtonLabel = "inset-0 min-is-0 truncate flex items-center pis-2";
-var TitleButton = ({ title, onClick }) => {
-  var _effect = _useSignals7();
-  try {
-    return /* @__PURE__ */ React7.createElement(Button3, {
-      variant: "ghost",
-      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)
-    }, title));
-  } finally {
-    _effect.f();
-  }
-};
-var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
+var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
   var _effect = _useSignals7();
   try {
-    const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-    const { t } = useTranslation7(NAVTREE_PLUGIN);
-    const alternateTree = navTreeContext.useItems(item, {
+    const { t } = useTranslation7(meta.id);
+    const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
+    const title = toLocalizedString6(item.properties.label, t);
+    const { useItems: useItems2 } = navTreeContext;
+    const alternateTree = useItems2(item, {
       disposition: "alternate-tree"
     })[0];
     const alternatePath = useMemo3(() => [
@@ -906,34 +895,16 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
       item.id,
       path
     ]);
-    const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
-      alternatePath,
-      setAlternateTree
-    ]);
     const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
     const useAlternateItems = useCallback2((node, { disposition } = {}) => {
-      return navTreeContext.useItems(node, {
+      return useItems2(node, {
         disposition,
         sort: node?.id === alternateTree.id
       });
     }, [
-      navTreeContext,
-      alternateTree
+      alternateTree,
+      useItems2
     ]);
-    const handleBack = useCallback2(() => {
-      if (isAlternate) {
-        setAlternateTree?.(alternatePath, false);
-      } else {
-        onBack?.();
-      }
-    }, [
-      isAlternate,
-      onBack,
-      alternatePath,
-      setAlternateTree
-    ]);
-    const title = toLocalizedString6(item.properties.label, t);
-    const backCapable = item.id.startsWith("!") || isAlternate;
     return /* @__PURE__ */ React7.createElement(Tabs2.Tabpanel, {
       key: item.id,
       value: item.id,
@@ -946,97 +917,139 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
       tabIndex: -1,
       "aria-label": title,
       ...!open && {
-        inert: "true"
+        inert: true
       }
-    }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
-      className: "flex items-center border-be border-subduedSeparator app-drag pli-1 density-coarse"
-    }, 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, {
-      variant: "ghost",
-      classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
-      iconOnly: true,
-      size: 5,
-      icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
-      label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
-      "data-testid": "treeView.alternateTreeButton",
-      onClick: handleOpen
-    }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
+    }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(DensityProvider, {
+      density: "fine"
+    }, /* @__PURE__ */ React7.createElement(L1PanelHeader, {
       path,
       item,
-      open: true,
-      density: "coarse"
-    })), /* @__PURE__ */ React7.createElement("div", {
+      currentItemId,
+      onBack
+    }), /* @__PURE__ */ React7.createElement("div", {
       role: "none",
       className: "overflow-y-auto"
     }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
       ...navTreeContext,
-      useItems: useAlternateItems,
       id: alternateTree.id,
       root: alternateTree,
       path: alternatePath,
       levelOffset: 5,
       gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-      renderColumns: NavTreeItemColumns
+      renderColumns: NavTreeItemColumns,
+      useItems: useAlternateItems
     }) : /* @__PURE__ */ React7.createElement(Tree, {
       ...navTreeContext,
       id: item.id,
       root: item,
       path,
       levelOffset: 5,
-      draggable: true,
       gridTemplateColumns: "[tree-row-start] 1fr min-content min-content min-content [tree-row-end]",
-      renderColumns: NavTreeItemColumns
+      renderColumns: NavTreeItemColumns,
+      draggable: true
     }))));
   } finally {
     _effect.f();
   }
 };
-var L1PanelCollection = ({ item, path, ...props }) => {
+var L1PanelHeader = ({ item, path, onBack }) => {
   var _effect = _useSignals7();
   try {
-    const { useItems: useItems2 } = useNavTreeContext();
-    useLoadDescendents(item);
-    const collectionItems = useItems2(item);
-    const groupPath = useMemo3(() => [
+    const { t } = useTranslation7(meta.id);
+    const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+    const title = toLocalizedString6(item.properties.label, t);
+    const alternateTree = navTreeContext.useItems(item, {
+      disposition: "alternate-tree"
+    })[0];
+    const alternatePath = useMemo3(() => [
       ...path,
       item.id
     ], [
       item.id,
       path
     ]);
-    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,
-      ...props
-    })));
+    const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+    const backCapable = item.id.startsWith("!") || isAlternate;
+    const handleOpen = useCallback2(() => {
+      setAlternateTree?.(alternatePath, true);
+    }, [
+      alternatePath,
+      setAlternateTree
+    ]);
+    const handleBack = useCallback2(() => {
+      if (isAlternate) {
+        setAlternateTree?.(alternatePath, false);
+      } else {
+        onBack?.();
+      }
+    }, [
+      isAlternate,
+      alternatePath,
+      setAlternateTree,
+      onBack
+    ]);
+    return /* @__PURE__ */ React7.createElement("div", {
+      className: "flex is-full items-center border-be border-subduedSeparator app-drag density-coarse"
+    }, /* @__PURE__ */ React7.createElement("div", {
+      className: "is-6"
+    }), /* @__PURE__ */ React7.createElement("h2", {
+      className: "flex-1 truncate min-is-0"
+    }, title), backCapable && /* @__PURE__ */ React7.createElement(IconButton2, {
+      variant: "ghost",
+      icon: "ph--arrow-u-down-left--regular",
+      iconOnly: true,
+      label: t("button back"),
+      classNames: [
+        hoverableControlItem2,
+        hoverableOpenControlItem2,
+        "pointer-fine:pli-1"
+      ],
+      onClick: handleBack
+    }) || alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
+      "data-testid": "treeView.alternateTreeButton",
+      variant: "ghost",
+      icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
+      iconOnly: true,
+      label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
+      classNames: [
+        hoverableControlItem2,
+        hoverableOpenControlItem2,
+        "pointer-fine:pli-1"
+      ],
+      onClick: handleOpen
+    }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
+      open: true,
+      path,
+      item,
+      density: "coarse"
+    }));
   } finally {
     _effect.f();
   }
 };
-var L1Panels = ({ topLevelItems, onBack, ...props }) => {
-  var _effect = _useSignals7();
+
+// src/components/Sidebar/L1Tabs.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { useMemo as useMemo4 } from "react";
+var L1Tabs = ({ topLevelItems, onBack, ...props }) => {
+  var _effect = _useSignals8();
   try {
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, topLevelItems.map((item) => {
+    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, topLevelItems.map((item) => {
       const type = l0ItemType(item);
       switch (type) {
-        case "collection":
-          return /* @__PURE__ */ React7.createElement(L1PanelCollection, {
-            key: item.id,
-            item,
-            ...props
-          });
         case "tab":
-          return /* @__PURE__ */ React7.createElement(L1Panel, {
+          return /* @__PURE__ */ React8.createElement(L1Panel, {
             key: item.id,
             item,
             ...props,
             onBack
           });
+        case "collection":
+          return /* @__PURE__ */ React8.createElement(L1PanelCollection, {
+            key: item.id,
+            item,
+            ...props
+          });
         default:
           return null;
       }
@@ -1045,11 +1058,34 @@ var L1Panels = ({ topLevelItems, onBack, ...props }) => {
     _effect.f();
   }
 };
+var L1PanelCollection = ({ item, path, ...props }) => {
+  var _effect = _useSignals8();
+  try {
+    const { useItems: useItems2 } = useNavTreeContext();
+    useLoadDescendents(item);
+    const collectionItems = useItems2(item);
+    const groupPath = useMemo4(() => [
+      ...path,
+      item.id
+    ], [
+      item.id,
+      path
+    ]);
+    return /* @__PURE__ */ React8.createElement(React8.Fragment, null, collectionItems.filter((item2) => l0ItemType(item2) === "tab").map((item2) => /* @__PURE__ */ React8.createElement(L1Panel, {
+      key: item2.id,
+      item: item2,
+      path: groupPath,
+      ...props
+    })));
+  } finally {
+    _effect.f();
+  }
+};
 
 // src/components/NavTree/NavTree.tsx
 var NAV_TREE_ITEM = "NavTreeItem";
 var NavTree = ({ id, root, ...props }) => {
-  var _effect = _useSignals8();
+  var _effect = _useSignals9();
   try {
     const { tab, useItems: useItems2, onBack } = useNavTreeContext();
     const topLevelActions = useItems2(root, {
@@ -1065,7 +1101,7 @@ var NavTree = ({ id, root, ...props }) => {
     const topLevelNavigation = useItems2(root, {
       disposition: "navigation"
     });
-    const l0Items = useMemo4(() => [
+    const l0Items = useMemo5(() => [
       // prettier-ignore
       ...topLevelCollections,
       ...topLevelWorkspaces,
@@ -1082,7 +1118,7 @@ var NavTree = ({ id, root, ...props }) => {
     const userAccountItem = useItems2(root, {
       disposition: "user-account"
     })[0];
-    const topLevelItems = useMemo4(() => [
+    const topLevelItems = useMemo5(() => [
       // prettier-ignore
       ...l0Items,
       ...pinnedItems,
@@ -1095,46 +1131,44 @@ var NavTree = ({ id, root, ...props }) => {
       userAccountItem
     ]);
     useLoadDescendents(root);
-    const path = useMemo4(() => [
+    const path = useMemo5(() => [
       id
     ], [
       id
     ]);
-    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
-    }));
+    return (
+      // TODO(thure): `Tabs.Root` forces all items that should be able to receive focus to use `Tabs.Tab(Primitive)` since
+      //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
+      //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
+      //  not use `react-ui-tabs` at all.
+      /* @__PURE__ */ React9.createElement(Tabs3.Root, {
+        value: tab,
+        orientation: "vertical",
+        verticalVariant: "stateless",
+        classNames: "relative"
+      }, /* @__PURE__ */ React9.createElement(L0Menu, {
+        menuActions: topLevelActions,
+        topLevelItems: l0Items,
+        pinnedItems,
+        userAccountItem,
+        path,
+        parent: root
+      }), /* @__PURE__ */ React9.createElement(L1Tabs, {
+        topLevelItems,
+        path,
+        currentItemId: tab,
+        onBack,
+        ...props
+      }))
+    );
   } finally {
     _effect.f();
   }
 };
 
-// src/capabilities/index.ts
-import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-5J4LRWDX.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-3XYN2CBU.mjs"));
-var Keyboard2 = lazy(() => import("./keyboard-QRS6WOQH.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-N2HPMYCU.mjs"));
-var State = lazy(() => import("./state-54DY3DOY.mjs"));
-
 // src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
-var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Surface, {
+var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React10.createElement(Surface, {
   role: "navtree-item-end",
   data: {
     id: node.id,
@@ -1143,12 +1177,12 @@ var renderItemEnd = ({ node, open }) => /* @__PURE__ */ React9.createElement(Sur
   },
   limit: 1
 });
-var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE);
+var getChildrenFilter = (node) => untracked(() => !isActionLike2(node) && node.type !== PLANK_COMPANION_TYPE && node.properties.disposition !== "hidden");
 var filterItems = (node, disposition) => {
   if (!disposition && (node.properties.disposition === "hidden" || node.properties.disposition === "alternate-tree")) {
     return false;
   } else if (!disposition) {
-    const action = isAction4(node);
+    const action = isAction3(node);
     return !action || node.properties.disposition === "item";
   } else {
     return node.properties.disposition === disposition;
@@ -1159,34 +1193,51 @@ var getItems = (graph, node, 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;
+  const connections = useConnections(graph, node?.id ?? ROOT_ID);
+  const filtered = connections.filter((node2) => filterItems(node2, options?.disposition));
+  return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+};
+var useActions2 = (node) => {
+  const { graph } = useAppGraph2();
+  const actions = useGraphActions(graph, node.id);
+  return useMemo6(() => actions.reduce((acc, arg) => {
+    if (arg.properties.disposition === "item") {
+      return acc;
+    }
+    acc.actions.push(arg);
+    if (!isAction3(arg)) {
+      const actionGroup = graph.getActions(arg.id);
+      acc.groupedActions[arg.id] = actionGroup;
+    }
+    return acc;
+  }, {
+    actions: [],
+    groupedActions: {}
+  }), [
+    actions
+  ]);
 };
 var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
-    const [isLg] = useMediaQuery2("lg", {
-      ssr: false
-    });
+    const [isLg] = useMediaQuery2("lg");
     const { dispatchPromise: dispatch } = useIntentDispatcher3();
     const { graph } = useAppGraph2();
     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 { navigationSidebarState } = useSidebars(meta.id);
     const getProps = useCallback3((node, 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,
-        label: node.properties.label ?? node.id,
         parentOf,
-        icon: node.properties.icon,
         disabled: node.properties.disabled,
-        className: mx5(node.properties.modified && "italic", node.properties.className),
+        label: node.properties.label ?? node.id,
+        className: mx3(node.properties.className, node.properties.modified && "italic"),
         headingClassName: node.properties.headingClassName,
+        icon: node.properties.icon,
+        iconHue: node.properties.iconHue,
         testId: node.properties.testId
       };
     }, [
@@ -1238,11 +1289,14 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     const canDrop = useCallback3(({ source, target }) => {
       return target.item.properties.canDrop?.(source) ?? false;
     }, []);
+    const canSelect = useCallback3(({ item }) => {
+      return item.properties.selectable ?? true;
+    }, []);
     const handleSelect = useCallback3(({ item: node, path, option }) => {
       if (!node.data) {
         return;
       }
-      if (isAction4(node)) {
+      if (isAction3(node)) {
         const [parent] = graph.getConnections(node.id, "inbound");
         void (parent && node.data({
           parent,
@@ -1278,7 +1332,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
         }));
       }
       const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === "default");
-      if (isAction4(defaultAction)) {
+      if (isAction3(defaultAction)) {
         void defaultAction.data();
       }
       if (!isLg) {
@@ -1358,10 +1412,10 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     }, [
       setItem
     ]);
-    const navTreeContextValue = useMemo5(() => ({
+    const navTreeContextValue = useMemo6(() => ({
       useItems,
       tab,
-      getActions: getActions2,
+      useActions: useActions2,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
@@ -1370,6 +1424,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       onTabChange: handleTabChange,
@@ -1378,7 +1433,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       onBack: handleBack
     }), [
       tab,
-      getActions2,
+      useActions2,
       loadDescendents,
       renderItemEnd,
       popoverAnchorId,
@@ -1387,6 +1442,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       handleTabChange,
@@ -1394,9 +1450,9 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       handleSelect,
       handleBack
     ]);
-    return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
+    return /* @__PURE__ */ React10.createElement(NavTreeContext.Provider, {
       value: navTreeContextValue
-    }, /* @__PURE__ */ React9.createElement(NavTree, {
+    }, /* @__PURE__ */ React10.createElement(NavTree, {
       id: ROOT_ID,
       root: graph.root,
       open: layout.sidebarOpen
@@ -1414,7 +1470,6 @@ export {
   resolveMigrationOperation,
   sortActions,
   getChildren,
-  getActions,
   l0ItemType,
   NODE_TYPE,
   NavTreeContainer,
@@ -1425,4 +1480,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-TZA65AKW.mjs.map
+//# sourceMappingURL=chunk-7D2MPHXV.mjs.map