@dxos/plugin-navtree 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/dist/lib/browser/{app-graph-builder-6JDBQ25U.mjs → app-graph-builder-YAPMENYT.mjs}

@@ -1,16 +1,17 @@
 import {
   COMMANDS_DIALOG,
-  NAVTREE_PLUGIN
-} from "./chunk-ERDGQTH5.mjs";
+  meta
+} from "./chunk-ZENLR72O.mjs";
 
 // src/capabilities/app-graph-builder.ts
 import { Rx } from "@effect-rx/rx-react";
-import { Option, pipe } from "effect";
+import * as Function from "effect/Function";
+import * as Option from "effect/Option";
 import { Capabilities, LayoutAction, contributes, createIntent } from "@dxos/app-framework";
 import { ROOT_ID, createExtension } from "@dxos/plugin-graph";
-var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBuilder, createExtension({
-  id: NAVTREE_PLUGIN,
-  actions: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
+var app_graph_builder_default = ((context) => contributes(Capabilities.AppGraphBuilder, createExtension({
+  id: meta.id,
+  actions: (node) => Rx.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
     {
       id: COMMANDS_DIALOG,
       data: async () => {
@@ -27,7 +28,7 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
         label: [
           "open commands label",
           {
-            ns: NAVTREE_PLUGIN
+            ns: meta.id
           }
         ],
         icon: "ph--magnifying-glass--regular",
@@ -38,8 +39,8 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
       }
     }
   ]), Option.getOrElse(() => [])))
-}));
+})));
 export {
   app_graph_builder_default as default
 };
-//# sourceMappingURL=app-graph-builder-6JDBQ25U.mjs.map
+//# sourceMappingURL=app-graph-builder-YAPMENYT.mjs.map

package/dist/lib/browser/app-graph-builder-YAPMENYT.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/capabilities/app-graph-builder.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport * as Function from 'effect/Function';\nimport * as Option from 'effect/Option';\n\nimport { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';\nimport { ROOT_ID, createExtension } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, meta } from '../meta';\n\nexport default (context: PluginContext) =>\n  contributes(\n    Capabilities.AppGraphBuilder,\n    createExtension({\n      id: meta.id,\n      actions: (node) =>\n        Rx.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => [\n              {\n                id: COMMANDS_DIALOG,\n                data: async () => {\n                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n                  await dispatch(\n                    createIntent(LayoutAction.UpdateDialog, {\n                      part: 'dialog',\n                      subject: COMMANDS_DIALOG,\n                      options: {\n                        blockAlign: 'start',\n                      },\n                    }),\n                  );\n                },\n                properties: {\n                  label: ['open commands label', { ns: meta.id }],\n                  icon: 'ph--magnifying-glass--regular',\n                  keyBinding: {\n                    macos: 'meta+k',\n                    windows: 'ctrl+k',\n                  },\n                },\n              },\n            ]),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  );\n"],
+  "mappings": ";;;;;;AAIA,SAASA,UAAU;AACnB,YAAYC,cAAc;AAC1B,YAAYC,YAAY;AAExB,SAASC,cAAcC,cAAkCC,aAAaC,oBAAoB;AAC1F,SAASC,SAASC,uBAAuB;AAIzC,IAAA,6BAAe,CAACC,YACdC,YACEC,aAAaC,iBACbC,gBAAgB;EACdC,IAAIC,KAAKD;EACTE,SAAS,CAACC,SACRC,GAAGC,KAAK,CAACC,QACEC,cACPD,IAAIH,IAAAA,GACGK,eAAQ,CAACL,UAAUA,MAAKH,OAAOS,UAAiBC,YAAKP,KAAAA,IAAeQ,YAAI,CAAA,GACxEC,WAAI,MAAM;IACf;MACEZ,IAAIa;MACJC,MAAM,YAAA;AACJ,cAAM,EAAEC,iBAAiBC,SAAQ,IAAKrB,QAAQsB,cAAcpB,aAAaqB,gBAAgB;AACzF,cAAMF,SACJG,aAAaC,aAAaC,cAAc;UACtCC,MAAM;UACNC,SAASV;UACTW,SAAS;YACPC,YAAY;UACd;QACF,CAAA,CAAA;MAEJ;MACAC,YAAY;QACVC,OAAO;UAAC;UAAuB;YAAEC,IAAI3B,KAAKD;UAAG;;QAC7C6B,MAAM;QACNC,YAAY;UACVC,OAAO;UACPC,SAAS;QACX;MACF;IACF;GACD,GACMC,iBAAU,MAAM,CAAA,CAAE,CAAA,CAAA;AAGjC,CAAA,CAAA;",
+  "names": ["Rx", "Function", "Option", "Capabilities", "LayoutAction", "contributes", "createIntent", "ROOT_ID", "createExtension", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Rx", "make", "get", "pipe", "flatMap", "ROOT_ID", "some", "none", "map", "COMMANDS_DIALOG", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "LayoutAction", "UpdateDialog", "part", "subject", "options", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "getOrElse"]
+}

package/dist/lib/browser/{chunk-ZKVY35IG.mjs → chunk-IMFXKPSB.mjs}

@@ -1,12 +1,11 @@
 import {
   NavTreeCapabilities
-} from "./chunk-WCARAZ7J.mjs";
+} from "./chunk-LPAREX6J.mjs";
 import {
   COMMANDS_DIALOG,
   KEY_BINDING,
-  NAVTREE_PLUGIN,
   meta
-} from "./chunk-ERDGQTH5.mjs";
+} from "./chunk-ZENLR72O.mjs";
 
 // src/components/CommandsDialog/CommandsDialog.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
@@ -23,7 +22,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();
@@ -54,7 +53,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
@@ -127,7 +126,7 @@ 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, {
@@ -228,11 +227,11 @@ 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-6JDBQ25U.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-N35ZIHFD.mjs"));
-var Keyboard2 = lazy(() => import("./keyboard-HMTMA33N.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-5PZ4XJT7.mjs"));
-var State = lazy(() => import("./state-P5DGL7KS.mjs"));
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-YAPMENYT.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-TCQXGF6U.mjs"));
+var Keyboard2 = lazy(() => import("./keyboard-AHSAWKXA.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-AH2TP73M.mjs"));
+var State = lazy(() => import("./state-2Q623V7U.mjs"));
 
 // src/components/NavTree/NavTree.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
@@ -252,7 +251,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"
@@ -287,11 +286,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 { 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";
@@ -302,8 +302,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",
@@ -312,7 +314,7 @@ var UserAccountAvatar = ({ size, userId, hue, emoji, status }) => {
       hue: hue || fallbackValue.hue,
       fallback: emoji || fallbackValue.emoji,
       "data-testid": "treeView.userAccount"
-    })));
+    }))));
   } finally {
     _effect.f();
   }
@@ -322,9 +324,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": {
@@ -375,7 +375,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,
@@ -393,15 +393,15 @@ var L0ItemRoot = /* @__PURE__ */ forwardRef(({ item, parent, path, children }, f
       "data-testid": testId,
       "data-itemid": 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]),
@@ -411,28 +411,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();
   }
@@ -440,7 +425,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);
@@ -529,10 +514,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, {
@@ -545,6 +527,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;
@@ -555,13 +538,19 @@ var ItemAvatar = ({ item }) => {
       };
       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;
@@ -626,7 +615,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",
@@ -640,16 +629,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(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",
@@ -712,7 +705,7 @@ 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 { 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 } from "@dxos/react-ui-theme";
@@ -735,7 +728,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,
@@ -780,10 +773,10 @@ var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, tes
       label: baseLabel,
       disabled,
       onClick: (event) => {
+        event.stopPropagation();
         if (disabled) {
           return;
         }
-        event.stopPropagation();
         void invoke?.(caller ? {
           parent,
           caller
@@ -800,7 +793,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, {
@@ -822,11 +815,11 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6, { Fragment, memo } from "react";
 import { isAction as isAction2 } from "@dxos/app-graph";
-import { DensityProvider, Popover, Treegrid, toLocalizedString as toLocalizedString5, useTranslation as useTranslation6 } from "@dxos/react-ui";
-var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
+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 { t } = useTranslation6(meta.id);
     const { useActions: useActions3, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
     const level = path.length - 2;
     const { actions: _actions, groupedActions } = useActions3(item);
@@ -837,15 +830,15 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
       "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 && !isAction2(primaryAction) ? primaryAction : void 0);
-    return /* @__PURE__ */ React6.createElement(DensityProvider, {
-      density
-    }, /* @__PURE__ */ React6.createElement("div", {
+    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",
@@ -856,7 +849,11 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
       ] : 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",
@@ -864,7 +861,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
     })));
@@ -879,8 +880,8 @@ var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
   try {
     const { t } = useTranslation7(meta.id);
     const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
-    const { useItems: useItems2 } = navTreeContext;
     const title = toLocalizedString6(item.properties.label, t);
+    const { useItems: useItems2 } = navTreeContext;
     const alternateTree = useItems2(item, {
       disposition: "alternate-tree"
     })[0];
@@ -913,9 +914,11 @@ var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
       tabIndex: -1,
       "aria-label": title,
       ...!open && {
-        inert: "true"
+        inert: true
       }
-    }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(L1PanelHeader, {
+    }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(DensityProvider, {
+      density: "fine"
+    }, /* @__PURE__ */ React7.createElement(L1PanelHeader, {
       path,
       item,
       currentItemId,
@@ -925,22 +928,22 @@ var L1Panel = ({ open, path, item, currentItemId, onBack }) => {
       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();
@@ -1132,25 +1135,31 @@ var NavTree = ({ id, root, ...props }) => {
     ], [
       id
     ]);
-    return /* @__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
-    }));
+    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();
   }
@@ -1210,25 +1219,24 @@ var useActions2 = (node) => {
 var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
   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 { 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: mx3(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,
+        iconClassName: node.properties.iconClassName,
         testId: node.properties.testId
       };
     }, [
@@ -1280,6 +1288,9 @@ 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;
@@ -1412,6 +1423,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       onTabChange: handleTabChange,
@@ -1429,6 +1441,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       isCurrent,
       isOpen,
       canDrop,
+      canSelect,
       isAlternateTree,
       setAlternateTree,
       handleTabChange,
@@ -1466,4 +1479,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-ZKVY35IG.mjs.map
+//# sourceMappingURL=chunk-IMFXKPSB.mjs.map