@tutti-os/workspace-file-manager 0.0.210 → 0.0.212

package/dist/index.js

@@ -21,7 +21,7 @@ import {
   splitWorkspaceFileName,
   workspaceFileSearchEntryToEntry,
   writeWorkspaceFileManagerArrangeMode
-} from "./chunk-TNFCNCZV.js";
+} from "./chunk-KCYTFKPY.js";
 import {
   createWorkspaceFileManagerI18nRuntime,
   resolveRevealInFolderLabel,
@@ -59,6 +59,7 @@ import {
   useRef,
   useState
 } from "react";
+import { createPortal } from "react-dom";
 
 // src/ui/contextMenuPlacement.ts
 var CONTEXT_MENU_ITEM_HEIGHT_PX = 32;
@@ -155,52 +156,60 @@ function WorkspaceFileManagerContextMenu({
     if (!contextMenu) {
       return;
     }
-    setPosition({ x: contextMenu.x, y: contextMenu.y });
+    setPosition(
+      (current) => current.x === contextMenu.x && current.y === contextMenu.y ? current : { x: contextMenu.x, y: contextMenu.y }
+    );
   }, [contextMenu?.x, contextMenu?.y]);
   useLayoutEffect(() => {
     if (!contextMenu) {
       return;
     }
-    const menu = contextMenuRef.current;
-    if (!menu) {
+    const menu2 = contextMenuRef.current;
+    if (!menu2) {
       return;
     }
-    const menuRect = menu.getBoundingClientRect();
-    const boundary = positionMode === "local" ? menu.closest(
+    const menuRect = menu2.getBoundingClientRect();
+    const boundary = positionMode === "local" ? menu2.closest(
       "[data-workspace-file-menu-boundary], [data-workspace-file-manager]"
     ) : null;
     if (positionMode === "local" && !boundary) {
       return;
     }
     const boundaryRect = boundary?.getBoundingClientRect();
+    const next = clampContextMenuPosition({
+      boundaryHeight: boundaryRect?.height ?? window.innerHeight,
+      boundaryWidth: boundaryRect?.width ?? window.innerWidth,
+      menuHeight: menuRect.height,
+      menuWidth: menuRect.width,
+      x: contextMenu.x,
+      y: contextMenu.y
+    });
     setPosition(
-      clampContextMenuPosition({
-        boundaryHeight: boundaryRect?.height ?? window.innerHeight,
-        boundaryWidth: boundaryRect?.width ?? window.innerWidth,
-        menuHeight: menuRect.height,
-        menuWidth: menuRect.width,
-        x: contextMenu.x,
-        y: contextMenu.y
-      })
+      (current) => current.x === next.x && current.y === next.y ? current : next
     );
-  }, [contextMenu, contextMenuRef, items, positionMode]);
+  }, [contextMenu?.x, contextMenu?.y, contextMenuRef, items, positionMode]);
   if (!contextMenu || items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  const menu = /* @__PURE__ */ jsx(
     MenuSurface,
     {
       ref: contextMenuRef,
       "data-workspace-file-manager-context-menu": "",
       className: cn(
-        "w-[220px] overflow-visible p-1",
+        // `is-open` keeps host CSS that keys off the class (not only data-state)
+        // from leaving the surface at opacity:0.
+        "is-open w-[220px] overflow-visible p-1",
         positionMode === "viewport" ? "fixed" : "absolute"
       ),
       role: "menu",
       style: {
         left: `${position.x}px`,
         top: `${position.y}px`,
-        zIndex: "calc(var(--workspace-file-manager-dialog-overlay-z-index) - 1)"
+        // Prefer the host CSS var when present; fall back to a stable stacking
+        // value so an unset var cannot invalidate the entire z-index declaration.
+        // Viewport menus need to clear typical workbench chrome (≈ z-10..50).
+        zIndex: positionMode === "viewport" ? "var(--workspace-file-manager-dialog-overlay-z-index, 10050)" : "var(--workspace-file-manager-dialog-overlay-z-index, 20)"
       },
       onContextMenu: (event) => {
         event.preventDefault();
@@ -208,6 +217,10 @@ function WorkspaceFileManagerContextMenu({
       children: items.map((item) => /* @__PURE__ */ jsx(ContextMenuItemRenderer, { item, onClose }, item.id))
     }
   );
+  if (positionMode === "viewport" && typeof document !== "undefined") {
+    return createPortal(menu, document.body);
+  }
+  return menu;
 }
 function ContextMenuItemRenderer({
   item,
@@ -791,9 +804,12 @@ function WorkspaceFileManagerContextMenuContainer({
   const contextMenuRef = useRef2(null);
   const { view } = useWorkspaceFileManagerContextMenuView(session);
   const [items, setItems] = useState2([]);
+  const contextMenuX = view.contextMenu?.x;
+  const contextMenuY = view.contextMenu?.y;
+  const contextMenuEntryPath = view.contextMenu?.entry?.path ?? null;
   useLayoutEffect2(() => {
-    if (!view.contextMenu) {
-      setItems([]);
+    if (contextMenuX === void 0 || contextMenuY === void 0) {
+      setItems((current) => current.length === 0 ? current : []);
       return;
     }
     const request = buildContextMenuRequest({
@@ -802,23 +818,29 @@ function WorkspaceFileManagerContextMenuContainer({
     });
     const resolved = resolveContextMenu(request);
     if (!isPromiseLike(resolved)) {
-      setItems(resolved);
+      setItems(
+        (current) => areContextMenuItemsEquivalent(current, resolved) ? current : resolved
+      );
       return;
     }
     let cancelled = false;
-    setItems([]);
+    setItems((current) => current.length === 0 ? current : []);
     void resolved.then((nextItems) => {
       if (!cancelled) {
-        setItems(nextItems);
+        setItems(
+          (current) => areContextMenuItemsEquivalent(current, nextItems) ? current : nextItems
+        );
       }
     });
     return () => {
       cancelled = true;
     };
   }, [
+    contextMenuEntryPath,
+    contextMenuX,
+    contextMenuY,
     resolveContextMenu,
     session,
-    view.contextMenu,
     view.currentDirectoryPath,
     view.isBusy,
     view.isLoading,
@@ -838,6 +860,7 @@ function WorkspaceFileManagerContextMenuContainer({
       contextMenu: { x: view.contextMenu.x, y: view.contextMenu.y },
       contextMenuRef,
       items,
+      positionMode: "viewport",
       onClose: () => {
         session.closeContextMenu();
       }
@@ -866,6 +889,35 @@ function buildContextMenuRequest(input) {
 function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
 }
+function areContextMenuItemsEquivalent(left, right) {
+  if (left === right) {
+    return true;
+  }
+  if (left.length !== right.length) {
+    return false;
+  }
+  for (let index = 0; index < left.length; index += 1) {
+    const leftItem = left[index];
+    const rightItem = right[index];
+    if (!leftItem || !rightItem || leftItem.id !== rightItem.id) {
+      return false;
+    }
+    if (leftItem.type !== rightItem.type) {
+      return false;
+    }
+    if (leftItem.type === "item" && rightItem.type === "item") {
+      if (leftItem.label !== rightItem.label || leftItem.disabled !== rightItem.disabled || leftItem.danger !== rightItem.danger) {
+        return false;
+      }
+    }
+    if (leftItem.type === "submenu" && rightItem.type === "submenu") {
+      if (leftItem.label !== rightItem.label || leftItem.disabled !== rightItem.disabled || leftItem.loading !== rightItem.loading) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
 function useCloseContextMenuOnOutsideInteraction(input) {
   const { contextMenuRef, isOpen, session } = input;
   useEffect2(() => {
@@ -3839,6 +3891,7 @@ function WorkspaceFileManager({
   resolveEntryIconUrl,
   renderExternalLocationContent,
   session,
+  showLocationSidebar = true,
   showPreviewPanel = true,
   surface = "card"
 }) {
@@ -3859,9 +3912,7 @@ function WorkspaceFileManager({
     );
     return location?.kind === "external" ? location : null;
   }, [rootView.locationSections, rootView.selectedLocationId]);
-  const hasLocationSidebar = rootView.locationSections.some(
-    (section) => section.locations.length > 0
-  );
+  const hasLocationSidebar = showLocationSidebar && rootView.locationSections.some((section) => section.locations.length > 0);
   const sidebarContentMinWidth = showPreviewPanel ? workspaceFileManagerContentMinWidth : workspaceFileManagerContentWithoutPreviewMinWidth;
   const sidebarMaxWidth = containerWidth > 0 ? resolveWorkspaceFileManagerSidebarMaxWidth(
     containerWidth,
@@ -4059,20 +4110,16 @@ function WorkspaceFileManager({
   function openContextMenu(event, entry) {
     event.preventDefault();
     event.stopPropagation();
-    const rootBounds = rootRef.current?.getBoundingClientRect();
-    if (!rootBounds) {
-      return;
-    }
     const menuWidth = 220;
     const menuHeight = 280;
     const x = clampContextMenuCoordinate(
-      event.clientX - rootBounds.left,
-      rootBounds.width,
+      event.clientX,
+      window.innerWidth,
       menuWidth
     );
     const y = clampContextMenuCoordinate(
-      event.clientY - rootBounds.top,
-      rootBounds.height,
+      event.clientY,
+      window.innerHeight,
       menuHeight
     );
     session.openContextMenu({
@@ -4092,8 +4139,14 @@ function WorkspaceFileManager({
       "data-slot": "viewport-menu-boundary",
       "data-workspace-file-manager": "",
       ref: rootRef,
+      style: {
+        // Owned by the root so context menus (siblings of the panels pane)
+        // can resolve overlay stacking instead of falling back to invalid
+        // `calc(var(--undefined) - 1)`.
+        "--workspace-file-manager-dialog-overlay-z-index": "20"
+      },
       children: [
-        /* @__PURE__ */ jsx9(
+        hasLocationSidebar ? /* @__PURE__ */ jsx9(
           WorkspaceFileManagerSidebar,
           {
             disabled: rootView.isBusy || panelsState.isLoading,
@@ -4107,7 +4160,7 @@ function WorkspaceFileManager({
               void session.selectLocation(location.id);
             }
           }
-        ),
+        ) : null,
         hasLocationSidebar ? /* @__PURE__ */ jsx9(
           "div",
           {
@@ -4139,31 +4192,22 @@ function WorkspaceFileManager({
               session
             }
           ),
-          /* @__PURE__ */ jsx9(
-            "div",
+          /* @__PURE__ */ jsx9("div", { className: "@max-[600px]/workspace-file-manager:flex-col @max-[600px]/workspace-file-manager:gap-3 flex min-h-0 min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx9(
+            WorkspaceFileManagerPanelsContainer,
             {
-              className: "@max-[600px]/workspace-file-manager:flex-col @max-[600px]/workspace-file-manager:gap-3 flex min-h-0 min-w-0 flex-1 overflow-hidden",
-              style: {
-                "--workspace-file-manager-dialog-overlay-z-index": "20"
-              },
-              children: /* @__PURE__ */ jsx9(
-                WorkspaceFileManagerPanelsContainer,
-                {
-                  dateLocale,
-                  entryDragMode,
-                  arrangeMode,
-                  i18n,
-                  layoutMode,
-                  onDirectoryExpanded,
-                  onEntryDragStart,
-                  onOpenContextMenu: openContextMenu,
-                  resolveEntryIconUrl,
-                  session,
-                  showPreviewPanel
-                }
-              )
+              dateLocale,
+              entryDragMode,
+              arrangeMode,
+              i18n,
+              layoutMode,
+              onDirectoryExpanded,
+              onEntryDragStart,
+              onOpenContextMenu: openContextMenu,
+              resolveEntryIconUrl,
+              session,
+              showPreviewPanel
             }
-          )
+          ) })
         ] }) }),
         !selectedExternalLocation ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
           /* @__PURE__ */ jsx9(WorkspaceFileManagerDialogsContainer, { i18n, session }),