@dxos/plugin-navtree 0.8.1 → 0.8.2-main.2f9c567

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

@@ -1,6 +1,6 @@
 import {
   NavTreeCapabilities
-} from "./chunk-4RQJXI4D.mjs";
+} from "./chunk-TLQLMZXU.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 useCallback2, useEffect as useEffect3, useMemo as useMemo5 } from "react";
+import React9, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo5 } from "react";
 import { createIntent as createIntent4, LayoutAction as LayoutAction4, Surface, useAppGraph as useAppGraph2, useCapability, useIntentDispatcher as useIntentDispatcher4, useLayout as useLayout2 } from "@dxos/app-framework";
 import { isAction as isAction4, isActionLike as isActionLike2 } from "@dxos/app-graph";
 import { 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 } from "@dxos/util";
+import { byPosition as byPosition2 } 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,31 +641,37 @@ var L0Menu = ({ topLevelItems, pinnedItems, userAccountItem, parent, path }) =>
 };
 
 // packages/plugins/plugin-navtree/src/components/L1Panels.tsx
-import React7, { useMemo as useMemo3 } from "react";
+import React7, { useCallback as useCallback2, useMemo as useMemo3 } from "react";
 import { useLayout } from "@dxos/app-framework";
-import { Button as Button3, Icon as Icon3, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { Button as Button3, Icon as Icon3, 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 { 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 { Popover as Popover2, toLocalizedString as toLocalizedString5, Treegrid, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { DensityProvider, 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 } from "@dxos/react-ui";
+import { useTranslation as useTranslation5, toLocalizedString as toLocalizedString4, IconButton, useDensityContext } 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 actionButtonProps = {
+var fineActionButtonProps = {
   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, {
@@ -674,7 +680,7 @@ var NavTreeItemActionDropdownMenu = ({ label, icon, testId, menuActions, onActio
   }, /* @__PURE__ */ React5.createElement(DropdownMenu.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React5.createElement(IconButton, {
-    ...actionButtonProps,
+    ...density === "coarse" ? coarseActionButtonProps : fineActionButtonProps,
     classNames: mx3("shrink-0 pli-2 pointer-fine:pli-1", hoverableControlItem, hoverableOpenControlItem),
     variant: "ghost",
     icon: icon ?? fallbackIcon,
@@ -687,8 +693,9 @@ 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, {
-    ...actionButtonProps,
+    ...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"),
     icon: icon ?? fallbackIcon,
@@ -733,7 +740,7 @@ var NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...props }) =>
 };
 
 // packages/plugins/plugin-navtree/src/components/NavTreeItemColumns.tsx
-var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
+var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fine" }) => {
   const { t } = useTranslation6(NAVTREE_PLUGIN);
   const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
   const level = path.length - 2;
@@ -745,7 +752,9 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
   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("div", {
+  return /* @__PURE__ */ React6.createElement(DensityProvider, {
+    density
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "contents app-no-drag"
   }, primaryAction?.properties?.disposition === "list-item-primary" && !primaryAction?.properties?.disabled ? /* @__PURE__ */ React6.createElement(NavTreeItemAction, {
@@ -770,14 +779,67 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open }) => {
   }) : /* @__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 navTreeContext = useNavTreeContext();
+  const { isAlternateTree, setAlternateTree, ...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,
@@ -786,29 +848,45 @@ 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"
-  }, /* @__PURE__ */ React7.createElement(Button3, {
+    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, {
     variant: "ghost",
-    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, {
+    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, {
     path,
     item,
-    open: true
+    open: true,
+    density: "coarse"
   })), /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "overflow-y-auto"
-  }, /* @__PURE__ */ React7.createElement(Tree, {
+  }, 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, {
     ...navTreeContext,
     id: item.id,
     root: item,
@@ -866,7 +944,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) => byPosition(a.properties, b.properties));
+  const topLevelActions = getItems(root, "item").toSorted((a, b) => byPosition2(a.properties, b.properties));
   const topLevelCollections = getItems(root, "collection");
   const topLevelWorkspaces = getItems(root, "workspace");
   const topLevelNavigation = getItems(root, "navigation");
@@ -881,7 +959,7 @@ var NavTree = ({ id, root }) => {
     topLevelWorkspaces,
     topLevelNavigation
   ]);
-  const pinnedItems = getItems(root, "pin-end").toSorted((a, b) => byPosition(a.properties, b.properties));
+  const pinnedItems = getItems(root, "pin-end").toSorted((a, b) => byPosition2(a.properties, b.properties));
   const userAccountItem = getItems(root, "user-account")[0];
   const topLevelItems = useMemo4(() => [
     ...l0Items,
@@ -923,10 +1001,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-BZMUS24C.mjs"));
+var IntentResolver = lazy(() => import("./intent-resolver-XCABZFA6.mjs"));
 var Keyboard2 = lazy(() => import("./keyboard-IQXHKUWM.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-3HCM3SHJ.mjs"));
-var State = lazy(() => import("./state-M5UJ3MHL.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-FQEYRV4Q.mjs"));
+var State = lazy(() => import("./state-EW62QYEN.mjs"));
 
 // packages/plugins/plugin-navtree/src/components/NavTreeContainer.tsx
 var NODE_TYPE = "dxos/app-graph/node";
@@ -947,15 +1025,15 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   const { dispatchPromise: dispatch } = useIntentDispatcher4();
   const { graph } = useAppGraph2();
   const layout = useLayout2();
-  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
-  const getActions2 = useCallback2((node) => getActions(graph, node), [
+  const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+  const getActions2 = useCallback3((node) => getActions(graph, node), [
     graph
   ]);
-  const getItems = useCallback2((node, disposition) => {
+  const getItems = useCallback3((node, disposition) => {
     return graph.nodes(node ?? graph.root, {
       filter: (node2) => {
         return untracked(() => {
-          if (node2.properties.disposition === "hidden") {
+          if (!disposition && (node2.properties.disposition === "hidden" || node2.properties.disposition === "alternate-tree")) {
             return false;
           } else if (!disposition) {
             const action = isAction4(node2);
@@ -969,7 +1047,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const getProps = useCallback2((node, path) => {
+  const getProps = useCallback3((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 {
@@ -985,7 +1063,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const loadDescendents = useCallback2((node) => {
+  const loadDescendents = useCallback3((node) => {
     void expandActions(graph, node);
     if (!isActionLike2(node)) {
       void expandChildren(graph, node).then(() => (
@@ -999,7 +1077,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const onOpenChange = useCallback2(({ item: { id }, path, open }) => {
+  const onOpenChange = useCallback3(({ item: { id }, path, open }) => {
     setItem(path, "open", open);
     if (graph) {
       const node = graph.findNode(id);
@@ -1008,7 +1086,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
-  const onTabChange = useCallback2(async (node) => {
+  const onTabChange = useCallback3(async (node) => {
     await dispatch(createIntent4(LayoutAction4.SwitchWorkspace, {
       part: "workspace",
       subject: node.id
@@ -1028,7 +1106,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     dispatch,
     layout
   ]);
-  const canDrop = useCallback2((source, target) => {
+  const canDrop = useCallback3((source, target) => {
     const sourceNode = source.item;
     const targetNode = target.item;
     if (isSpace(targetNode.data)) {
@@ -1039,7 +1117,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
       return false;
     }
   }, []);
-  const handleSelect = useCallback2(({ item: node, path, option }) => {
+  const handleSelect = useCallback3(({ item: node, path, option }) => {
     if (!node.data) {
       return;
     }
@@ -1098,7 +1176,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isCurrent,
     isLg
   ]);
-  const onBack = useCallback2(() => dispatch(createIntent4(LayoutAction4.RevertWorkspace, {
+  const onBack = useCallback3(() => dispatch(createIntent4(LayoutAction4.RevertWorkspace, {
     part: "workspace",
     options: {
       revert: true
@@ -1156,6 +1234,11 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
   }, [
     graph
   ]);
+  const setAlternateTree = useCallback3((path, open) => {
+    setItem(path, "alternateTree", open);
+  }, [
+    setItem
+  ]);
   const navTreeContextValue = useMemo5(() => ({
     tab,
     onTabChange,
@@ -1171,7 +1254,9 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isOpen,
     onOpenChange,
     canDrop,
-    onSelect: handleSelect
+    onSelect: handleSelect,
+    isAlternateTree,
+    setAlternateTree
   }), [
     tab,
     onTabChange,
@@ -1187,7 +1272,9 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     isOpen,
     onOpenChange,
     canDrop,
-    handleSelect
+    handleSelect,
+    isAlternateTree,
+    setAlternateTree
   ]);
   return /* @__PURE__ */ React9.createElement(NavTreeContext.Provider, {
     value: navTreeContextValue
@@ -1219,4 +1306,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-DN43QXSX.mjs.map
+//# sourceMappingURL=chunk-FBQKXPOR.mjs.map