@dxos/plugin-navtree 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/dist/lib/browser/{chunk-TLQLMZXU.mjs → chunk-4RQJXI4D.mjs}

@@ -12,4 +12,4 @@ var NavTreeCapabilities;
 export {
   NavTreeCapabilities
 };
-//# sourceMappingURL=chunk-TLQLMZXU.mjs.map
+//# sourceMappingURL=chunk-4RQJXI4D.mjs.map

package/dist/lib/browser/chunk-4RQJXI4D.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/capabilities/capabilities.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineCapability } from '@dxos/app-framework';\nimport { type ReactiveObject } from '@dxos/live-object';\n\nimport { NAVTREE_PLUGIN } from '../meta';\nimport { type NavTreeItemGraphNode } from '../types';\n\nexport namespace NavTreeCapabilities {\n  export const State = defineCapability<{\n    state: Map<string, ReactiveObject<{ open: boolean; current: boolean }>>;\n    getItem: (path: string[]) => ReactiveObject<{ open: boolean; current: boolean }>;\n    setItem: (path: string[], key: 'open' | 'current', next: boolean) => void;\n    isOpen: (path: string[], item: NavTreeItemGraphNode) => boolean;\n    isCurrent: (path: string[], item: NavTreeItemGraphNode) => boolean;\n  }>(`${NAVTREE_PLUGIN}/capability/state`);\n}\n"],
+  "mappings": ";;;;;AAIA,SAASA,wBAAwB;;UAMhBC,sBAAAA;uBACFC,QAAQC,iBAMlB,GAAGC,cAAAA,mBAAiC;AACzC,GARiBH,wBAAAA,sBAAAA,CAAAA,EAAAA;",
+  "names": ["defineCapability", "NavTreeCapabilities", "State", "defineCapability", "NAVTREE_PLUGIN"]
+}

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

@@ -1,6 +1,6 @@
 import {
   NavTreeCapabilities
-} from "./chunk-TLQLMZXU.mjs";
+} from "./chunk-4RQJXI4D.mjs";
 import {
   COMMANDS_DIALOG,
   KEY_BINDING,
@@ -237,7 +237,7 @@ var l0ItemType = (item) => {
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { untracked } from "@preact/signals-core";
-import React9, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
+import 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";
@@ -250,7 +250,7 @@ import { arrayMove as arrayMove2 } from "@dxos/util";
 // packages/plugins/plugin-navtree/src/components/NavTree.tsx
 import React8, { useMemo as useMemo4 } from "react";
 import { Tabs as Tabs3 } from "@dxos/react-ui-tabs";
-import { byPosition as byPosition2 } from "@dxos/util";
+import { byPosition } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/L0Menu.tsx
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -287,7 +287,7 @@ var UserAccountAvatar = (props) => {
     status: props.status ?? "active",
     hue: props.hue || fallbackValue.hue,
     fallback: props.emoji || fallbackValue.emoji,
-    "data-testid": "treeView.userAccount"
+    "data-testid": "treeview.userAccount"
   })));
 };
 
@@ -641,37 +641,31 @@ var L0Menu = ({ topLevelItems, pinnedItems, userAccountItem, parent, path }) =>
 };
 
 // packages/plugins/plugin-navtree/src/components/L1Panels.tsx
-import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import React7, { useMemo as useMemo3 } from "react";
 import { useLayout } from "@dxos/app-framework";
-import { Button as Button3, Icon as Icon3, IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Button as Button3, Icon as Icon3, 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 { byPosition } from "@dxos/util";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
 import React6, { Fragment, memo } from "react";
 import { isAction as isAction3 } from "@dxos/app-graph";
-import { DensityProvider, Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemAction.tsx
 import React5, { useRef as useRef2 } from "react";
-import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton, useDensityContext } from "@dxos/react-ui";
+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 mx3 } from "@dxos/react-ui-theme";
 var fallbackIcon = "ph--placeholder--regular";
-var fineActionButtonProps = {
+var actionButtonProps = {
   size: 4,
   density: "fine"
 };
-var coarseActionButtonProps = {
-  size: 5,
-  density: "coarse"
-};
 var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onAction }) => {
   const { t } = useTranslation5(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef2(false);
-  const density = useDensityContext();
   return /* @__PURE__ */ React5.createElement(MenuProvider, {
     onAction
   }, /* @__PURE__ */ React5.createElement(DropdownMenu.Root, {
@@ -680,7 +674,7 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onActio
   }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React5.createElement(IconButton, {
-    ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+    ...actionButtonProps,
     classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
     variant: "ghost",
     icon: icon ?? fallbackIcon,
@@ -693,9 +687,8 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onActio
 var NavTreeItemMonolithicAction = ({ parent, properties: { disabled, caller, testId, icon, variant = "ghost", iconOnly = true } = {
   label: "never"
 }, data: invoke, baseLabel }) => {
-  const density = useDensityContext();
   return /* @__PURE__ */ React5.createElement(IconButton, {
-    ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
+    ...actionButtonProps,
     variant,
     classNames: mx3("shrink-0", hoverableControlItem, hoverableOpenControlItem, iconOnly ? "pli-2 pointer-fine:pli-1" : "p-2 pointer-fine:p-2 mie-1"),
     icon: icon ?? fallbackIcon,
@@ -740,7 +733,7 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
-var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
+var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
   const { t } = useTranslation6(NAVTREE_PLUGIN);
   const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
   const level = path.length - 2;
@@ -752,9 +745,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
   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__ */ React6.createElement(DensityProvider, {
-    density
-  }, /* @__PURE__ */ React6.createElement("div", {
+  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, {
@@ -779,67 +770,14 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
   }) : /* @__PURE__ */ React6.createElement(Treegrid.Cell, null)), ItemEnd && /* @__PURE__ */ React6.createElement(ItemEnd, {
     node: item,
     open
-  })));
+  }));
 });
 
 // packages/plugins/plugin-navtree/src/components/L1Panels.tsx
-var headingBackButtonLabel = "absolute inset-0 min-is-0 truncate flex items-center pis-6 transition-[transform,opacity] ease-in-out duration-200";
-var HeadingBackButton = ({ title, onClick }) => {
-  const { t } = useTranslation7(NAVTREE_PLUGIN);
-  return /* @__PURE__ */ React7.createElement(Button3, {
-    variant: "ghost",
-    classNames: "pli-1 flex-1 relative group text-start justify-start bs-[--rail-action] font-normal",
-    onClick
-  }, /* @__PURE__ */ React7.createElement(Icon3, {
-    icon: "ph--caret-left--bold",
-    size: 3
-  }), /* @__PURE__ */ React7.createElement("span", {
-    className: mx4(headingBackButtonLabel, "translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 group-focus:translate-y-0 group-focus:opacity-100")
-  }, t("back label")), /* @__PURE__ */ React7.createElement("span", {
-    className: mx4(headingBackButtonLabel, "translate-y-0 opacity-100 group-hover:-translate-y-2 group-hover:opacity-0 group-focus:-translate-y-2 group-focus:opacity-0")
-  }, title));
-};
 var L1Panel = ({ item, path, currentItemId, onBack }) => {
   const layout = useLayout();
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const navTreeContext = useNavTreeContext();
   const { t } = useTranslation7(NAVTREE_PLUGIN);
-  const alternateTree = navTreeContext.getItems(item, "alternate-tree")[0];
-  const alternatePath = useMemo3(() => [
-    ...path,
-    item.id
-  ], [
-    item.id,
-    path
-  ]);
-  const handleOpen = useCallback2(() => setAlternateTree?.(alternatePath, true), [
-    alternatePath,
-    setAlternateTree
-  ]);
-  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
-  const alternateGetItems = useCallback2((node, disposition) => {
-    const items = navTreeContext.getItems(node, disposition);
-    if (node === alternateTree) {
-      return items.toSorted((a, b) => byPosition(a.properties, b.properties));
-    }
-    return items;
-  }, [
-    navTreeContext,
-    alternateTree
-  ]);
-  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,
@@ -848,45 +786,29 @@ var L1Panel = ({ item, path, currentItemId, onBack }) => {
       item.id === currentItemId && "grid"
     ],
     tabIndex: -1,
-    "aria-label": title,
     ...!layout.sidebarOpen && {
       inert: "true"
     }
   }, item.id === currentItemId && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("h2", {
-    className: "flex items-center border-be border-separator app-drag pis-1"
-  }, backCapable ? /* @__PURE__ */ React7.createElement(HeadingBackButton, {
-    title,
-    onClick: handleBack
-  }) : /* @__PURE__ */ React7.createElement("span", {
-    className: "flex-1 truncate min-is-0 pis-6"
-  }, title), alternateTree && !isAlternate && /* @__PURE__ */ React7.createElement(IconButton2, {
+    className: "flex items-center border-be border-separator app-drag"
+  }, /* @__PURE__ */ React7.createElement(Button3, {
     variant: "ghost",
-    classNames: mx4("shrink-0", hoverableControlItem2, hoverableOpenControlItem2, "pli-2 pointer-fine:pli-1"),
-    iconOnly: true,
-    size: 5,
-    density: "coarse",
-    icon: alternateTree.properties.icon ?? "ph--placeholder--regular",
-    label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
-    "data-testid": "treeView.alternateTreeButton",
-    onClick: handleOpen
-  }), /* @__PURE__ */ React7.createElement(NavTreeItemColumns, {
+    density: "fine",
+    classNames: mx4("is-6 pli-0 dx-focus-ring-inset", !item.id.startsWith("!") && "invisible", hoverableControlItem2, hoverableOpenControlItem2),
+    onClick: onBack
+  }, /* @__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__ */ React7.createElement(NavTreeItemColumns, {
     path,
     item,
-    open: true,
-    density: "coarse"
+    open: true
   })), /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "overflow-y-auto"
-  }, isAlternate ? /* @__PURE__ */ React7.createElement(Tree, {
-    ...navTreeContext,
-    getItems: alternateGetItems,
-    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
-  }) : /* @__PURE__ */ React7.createElement(Tree, {
+  }, /* @__PURE__ */ React7.createElement(Tree, {
     ...navTreeContext,
     id: item.id,
     root: item,
@@ -944,7 +866,7 @@ var L1Panels = ({ topLevelItems, path, currentItemId, onBack }) => {
 var NAV_TREE_ITEM = "NavTreeItem";
 var NavTree = ({ id, root }) => {
   const { tab, getItems, onBack } = useNavTreeContext();
-  const topLevelActions = getItems(root, "item").toSorted((a, b) => byPosition2(a.properties, b.properties));
+  const topLevelActions = getItems(root, "item").toSorted((a, b) => byPosition(a.properties, b.properties));
   const topLevelCollections = getItems(root, "collection");
   const topLevelWorkspaces = getItems(root, "workspace");
   const topLevelNavigation = getItems(root, "navigation");
@@ -959,7 +881,7 @@ var NavTree = ({ id, root }) => {
     topLevelWorkspaces,
     topLevelNavigation
   ]);
-  const pinnedItems = getItems(root, "pin-end").toSorted((a, b) => byPosition2(a.properties, b.properties));
+  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,
@@ -1001,10 +923,10 @@ var NavTree = ({ id, root }) => {
 // packages/plugins/plugin-navtree/src/capabilities/index.ts
 import { lazy } from "@dxos/app-framework";
 var AppGraphBuilder = lazy(() => import("./app-graph-builder-26D3MUCA.mjs"));
-var IntentResolver = lazy(() => import("./intent-resolver-OBGGMBVJ.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-BZMUS24C.mjs"));
 var Keyboard2 = lazy(() => import("./keyboard-IQXHKUWM.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-DWMOF2TM.mjs"));
-var State = lazy(() => import("./state-EW62QYEN.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";
@@ -1025,15 +947,15 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   const { dispatchPromise: dispatch } = useIntentDispatcher4();
   const { graph } = useAppGraph2();
   const layout = useLayout2();
-  const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
-  const getActions2 = useCallback3((node) => getActions(graph, node), [
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
+  const getActions2 = useCallback2((node) => getActions(graph, node), [
     graph
   ]);
-  const getItems = useCallback3((node, disposition) => {
+  const getItems = useCallback2((node, disposition) => {
     return graph.nodes(node ?? graph.root, {
       filter: (node2) => {
         return untracked(() => {
-          if (!disposition && (node2.properties.disposition === "hidden" || node2.properties.disposition === "alternate-tree")) {
+          if (node2.properties.disposition === "hidden") {
             return false;
           } else if (!disposition) {
             const action = isAction4(node2);
@@ -1047,7 +969,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const getProps = useCallback3((node, path) => {
+  const getProps = useCallback2((node, path) => {
     const children = getChildren(graph, node, getChildrenFilter, path);
     const parentOf = children.length > 0 ? children.map(({ id }) => id) : node.properties.role === "branch" ? [] : void 0;
     return {
@@ -1063,7 +985,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const loadDescendents = useCallback3((node) => {
+  const loadDescendents = useCallback2((node) => {
     void expandActions(graph, node);
     if (!isActionLike2(node)) {
       void expandChildren(graph, node).then(() => (
@@ -1077,7 +999,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const onOpenChange = useCallback3(({ item: { id }, path, open }) => {
+  const onOpenChange = useCallback2(({ item: { id }, path, open }) => {
     setItem(path, "open", open);
     if (graph) {
       const node = graph.findNode(id);
@@ -1086,7 +1008,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const onTabChange = useCallback3(async (node) => {
+  const onTabChange = useCallback2(async (node) => {
     await dispatch(createIntent4(LayoutAction4.SwitchWorkspace, {
       part: "workspace",
       subject: node.id
@@ -1106,7 +1028,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     dispatch,
     layout
   ]);
-  const canDrop = useCallback3((source, target) => {
+  const canDrop = useCallback2((source, target) => {
     const sourceNode = source.item;
     const targetNode = target.item;
     if (isSpace(targetNode.data)) {
@@ -1117,7 +1039,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       return false;
     }
   }, []);
-  const handleSelect = useCallback3(({ item: node, path, option }) => {
+  const handleSelect = useCallback2(({ item: node, path, option }) => {
     if (!node.data) {
       return;
     }
@@ -1176,7 +1098,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isCurrent,
     isLg
   ]);
-  const onBack = useCallback3(() => dispatch(createIntent4(LayoutAction4.RevertWorkspace, {
+  const onBack = useCallback2(() => dispatch(createIntent4(LayoutAction4.RevertWorkspace, {
     part: "workspace",
     options: {
       revert: true
@@ -1234,11 +1156,6 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const setAlternateTree = useCallback3((path, open) => {
-    setItem(path, "alternateTree", open);
-  }, [
-    setItem
-  ]);
   const navTreeContextValue = useMemo5(() => ({
     tab,
     onTabChange,
@@ -1254,9 +1171,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isOpen,
     onOpenChange,
     canDrop,
-    onSelect: handleSelect,
-    isAlternateTree,
-    setAlternateTree
+    onSelect: handleSelect
   }), [
     tab,
     onTabChange,
@@ -1272,9 +1187,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isOpen,
     onOpenChange,
     canDrop,
-    handleSelect,
-    isAlternateTree,
-    setAlternateTree
+    handleSelect
   ]);
   return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
     value: navTreeContextValue
@@ -1306,4 +1219,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-FHOAKMRS.mjs.map
+//# sourceMappingURL=chunk-DN43QXSX.mjs.map