@dxos/plugin-navtree 0.8.4-main.3a94e84 → 0.8.4-main.5acf9ea

package/dist/lib/browser/{chunk-SICQTLXC.mjs → chunk-WEMCSQI7.mjs}

@@ -4,7 +4,8 @@ import {
 import {
   COMMANDS_DIALOG,
   KEY_BINDING,
-  NAVTREE_PLUGIN
+  NAVTREE_PLUGIN,
+  meta
 } from "./chunk-ERDGQTH5.mjs";
 
 // src/components/CommandsDialog/CommandsDialog.tsx
@@ -227,23 +228,23 @@ 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 React10, { memo as memo2, useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo6 } 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 { PLANK_COMPANION_TYPE } from "@dxos/plugin-deck/types";
 import { useConnections } from "@dxos/plugin-graph";
 import { useMediaQuery as useMediaQuery2, useSidebars } from "@dxos/react-ui";
 import { isTreeData } from "@dxos/react-ui-list";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 import { arrayMove as arrayMove2, byPosition } from "@dxos/util";
 
 // 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
@@ -719,10 +720,10 @@ 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 Icon4, IconButton as IconButton2, toLocalizedString as toLocalizedString6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { 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 mx3 } 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";
@@ -837,7 +838,7 @@ var NavTreeItemColumns = /* @__PURE__ */ memo(({ path, item, open, density = "fi
     const { getActions: getActions2, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
     const level = path.length - 2;
     const { actions: _actions, groupedActions } = getActions2(item);
-    const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
+    const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) => a.properties?.disposition === "list-item-primary" ? -1 : 1);
     const actions = (primaryAction?.properties?.disposition === "list-item-primary" ? secondaryActions : _actions).flatMap((action) => isAction3(action) ? [
       action
     ] : []).filter((a) => [
@@ -881,30 +882,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(Icon4, {
-      icon: "ph--caret-left--bold",
-      size: 3
-    }), /* @__PURE__ */ React7.createElement("span", {
-      className: mx3(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 { useItems: useItems2 } = navTreeContext;
+    const title = toLocalizedString6(item.properties.label, t);
+    const alternateTree = useItems2(item, {
       disposition: "alternate-tree"
     })[0];
     const alternatePath = useMemo3(() => [
@@ -914,34 +899,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
-    ]);
-    const handleBack = useCallback2(() => {
-      if (isAlternate) {
-        setAlternateTree?.(alternatePath, false);
-      } else {
-        onBack?.();
-      }
-    }, [
-      isAlternate,
-      onBack,
-      alternatePath,
-      setAlternateTree
+      alternateTree,
+      useItems2
     ]);
-    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,
@@ -956,33 +923,12 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
       ...!open && {
         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: [
-        "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(React7.Fragment, null, /* @__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, {
@@ -1008,48 +954,106 @@ var L1Panel = ({ open, item, path, currentItemId, onBack }) => {
     _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), /* @__PURE__ */ React7.createElement("div", null, backCapable && /* @__PURE__ */ React7.createElement(IconButton2, {
+      variant: "ghost",
+      icon: "ph--arrow-u-down-left--regular",
+      iconOnly: true,
+      size: 5,
+      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,
+      size: 5,
+      label: toLocalizedString6(alternateTree.properties.label ?? alternateTree.id, t),
+      classNames: [
+        hoverableControlItem2,
+        hoverableOpenControlItem2,
+        "pointer-fine:pli-1"
+      ],
+      onClick: handleOpen
+    }) || /* @__PURE__ */ React7.createElement("div", null)), /* @__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;
       }
@@ -1058,11 +1062,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, {
@@ -1078,7 +1105,7 @@ var NavTree = ({ id, root, ...props }) => {
     const topLevelNavigation = useItems2(root, {
       disposition: "navigation"
     });
-    const l0Items = useMemo4(() => [
+    const l0Items = useMemo5(() => [
       // prettier-ignore
       ...topLevelCollections,
       ...topLevelWorkspaces,
@@ -1095,7 +1122,7 @@ var NavTree = ({ id, root, ...props }) => {
     const userAccountItem = useItems2(root, {
       disposition: "user-account"
     })[0];
-    const topLevelItems = useMemo4(() => [
+    const topLevelItems = useMemo5(() => [
       // prettier-ignore
       ...l0Items,
       ...pinnedItems,
@@ -1108,24 +1135,24 @@ var NavTree = ({ id, root, ...props }) => {
       userAccountItem
     ]);
     useLoadDescendents(root);
-    const path = useMemo4(() => [
+    const path = useMemo5(() => [
       id
     ], [
       id
     ]);
-    return /* @__PURE__ */ React8.createElement(Tabs3.Root, {
+    return /* @__PURE__ */ React9.createElement(Tabs3.Root, {
       value: tab,
       orientation: "vertical",
       verticalVariant: "stateless",
       classNames: "relative"
-    }, /* @__PURE__ */ React8.createElement(L0Menu, {
+    }, /* @__PURE__ */ React9.createElement(L0Menu, {
       menuActions: topLevelActions,
       topLevelItems: l0Items,
       pinnedItems,
       userAccountItem,
       path,
       parent: root
-    }), /* @__PURE__ */ React8.createElement(L1Panels, {
+    }), /* @__PURE__ */ React9.createElement(L1Tabs, {
       topLevelItems,
       path,
       currentItemId: tab,
@@ -1142,12 +1169,12 @@ 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-WURHCBQQ.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-JSJ5SQX5.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,
@@ -1177,7 +1204,7 @@ var useItems = (node, options) => {
   return options?.sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
 };
 var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar }) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals10();
   try {
     const [isLg] = useMediaQuery2("lg", {
       ssr: false
@@ -1199,7 +1226,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
         parentOf,
         icon: node.properties.icon,
         disabled: node.properties.disabled,
-        className: mx4(node.properties.modified && "italic", node.properties.className),
+        className: mx3(node.properties.modified && "italic", node.properties.className),
         headingClassName: node.properties.headingClassName,
         testId: node.properties.testId
       };
@@ -1372,7 +1399,7 @@ var NavTreeContainer = /* @__PURE__ */ memo2(({ tab, popoverAnchorId, topbar })
     }, [
       setItem
     ]);
-    const navTreeContextValue = useMemo5(() => ({
+    const navTreeContextValue = useMemo6(() => ({
       useItems,
       tab,
       getActions: getActions2,
@@ -1408,9 +1435,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
@@ -1439,4 +1466,4 @@ export {
   ReactSurface,
   State
 };
-//# sourceMappingURL=chunk-SICQTLXC.mjs.map
+//# sourceMappingURL=chunk-WEMCSQI7.mjs.map