@tutti-os/workspace-file-manager 0.0.94 → 0.0.96

package/dist/index.d.ts

@@ -26,9 +26,11 @@ interface WorkspaceFileManagerProps {
     hostOs?: NodeJS.Platform;
     i18n: WorkspaceFileManagerI18nRuntime;
     session: WorkspaceFileManagerSession;
+    showInternalOpenWithActions?: boolean;
+    showPreviewPanel?: boolean;
     surface?: "card" | "embedded";
 }
-declare function WorkspaceFileManager({ className, dateLocale, entryDragMode, i18n, onCopyEntry, onCopyPath, onDirectoryExpanded, onEntryDragStart, openInAppBrowserIcon, resolveOpenWithApplicationIcon, resolveEntryIconUrl, renderExternalLocationContent, hostOs, session, surface }: WorkspaceFileManagerProps): ReactElement;
+declare function WorkspaceFileManager({ className, dateLocale, entryDragMode, i18n, onCopyEntry, onCopyPath, onDirectoryExpanded, onEntryDragStart, openInAppBrowserIcon, resolveOpenWithApplicationIcon, resolveEntryIconUrl, renderExternalLocationContent, hostOs, session, showInternalOpenWithActions, showPreviewPanel, surface }: WorkspaceFileManagerProps): ReactElement;
 
 interface WorkspaceFileManagerContextMenuProps {
     busy: boolean;

package/dist/index.js

@@ -33,7 +33,7 @@ import {
   workspaceFileSearchEntryToEntry,
   workspaceFileTextMaxBytes,
   writeWorkspaceFileManagerArrangeMode
-} from "./chunk-US5CLBA7.js";
+} from "./chunk-KVP3Z2Y5.js";
 import {
   createWorkspaceFileManagerI18nRuntime,
   resolveRevealInFolderLabel,
@@ -57,6 +57,7 @@ import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } fro
 
 // src/ui/WorkspaceFileManagerContextMenu.tsx
 import {
+  ArrowLeftIcon,
   ArrowRightIcon,
   CopyIcon,
   DeleteIcon,
@@ -85,6 +86,38 @@ import {
 var CONTEXT_MENU_ITEM_HEIGHT_PX = 32;
 var CONTEXT_MENU_PADDING_PX = 8;
 var CONTEXT_MENU_SUBMENU_GAP_PX = 4;
+var CONTEXT_MENU_VIEWPORT_PADDING_PX = 12;
+var OPEN_WITH_SUBMENU_WIDTH_PX = 220;
+function resolveOpenWithSubmenuPlacement(input) {
+  const gap = input.gap ?? CONTEXT_MENU_SUBMENU_GAP_PX;
+  const padding = input.padding ?? CONTEXT_MENU_VIEWPORT_PADDING_PX;
+  const availableWidth = Math.max(0, input.viewportWidth - padding * 2);
+  const width = Math.min(
+    input.submenuWidth ?? OPEN_WITH_SUBMENU_WIDTH_PX,
+    availableWidth
+  );
+  const rightLeft = input.triggerRight + gap;
+  const leftLeft = input.triggerLeft - gap - width;
+  const rightFits = rightLeft + width <= input.viewportWidth - padding;
+  const leftFits = leftLeft >= padding;
+  const mode = rightFits ? "right" : leftFits ? "left" : "overlay";
+  const rawLeft = mode === "right" ? rightLeft : mode === "left" ? leftLeft : input.parentMenuLeft;
+  const rawTop = mode === "overlay" ? input.parentMenuTop : input.triggerTop;
+  const overlayHeaderHeight = mode === "overlay" ? input.overlayHeaderHeight ?? CONTEXT_MENU_ITEM_HEIGHT_PX : 0;
+  const availableHeight = Math.max(0, input.viewportHeight - padding * 2);
+  const height = Math.min(
+    Math.max(0, input.submenuHeight + overlayHeaderHeight),
+    availableHeight
+  );
+  const maxLeft = Math.max(padding, input.viewportWidth - padding - width);
+  const maxTop = Math.max(padding, input.viewportHeight - padding - height);
+  return {
+    left: Math.max(padding, Math.min(rawLeft, maxLeft)),
+    mode,
+    top: Math.max(padding, Math.min(rawTop, maxTop)),
+    width
+  };
+}
 function clampContextMenuPosition(input) {
   const padding = input.padding ?? CONTEXT_MENU_PADDING_PX;
   const maxX = Math.max(
@@ -108,7 +141,7 @@ function estimateOpenWithSubmenuHeight(input) {
   if (input.showOpenInAppBrowser) {
     itemCount += 1;
   }
-  if (input.showExternalSection) {
+  if (shouldShowOpenWithSectionDivider(input)) {
     itemCount += 1;
   }
   if (input.isLoading) {
@@ -123,6 +156,9 @@ function estimateOpenWithSubmenuHeight(input) {
   }
   return itemCount * CONTEXT_MENU_ITEM_HEIGHT_PX + CONTEXT_MENU_PADDING_PX * 2;
 }
+function shouldShowOpenWithSectionDivider(input) {
+  return input.showExternalSection && (input.showOpenInFileViewer === true || input.showOpenInAppBrowser);
+}
 
 // src/ui/WorkspaceFileManagerContextMenu.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -337,6 +373,7 @@ function WorkspaceFileManagerContextMenu({
     MenuSurface,
     {
       ref: contextMenuRef,
+      "data-workspace-file-manager-context-menu": "",
       className: cn(
         "w-[220px] overflow-visible p-1",
         positionMode === "viewport" ? "fixed" : "absolute"
@@ -512,10 +549,23 @@ function OpenWithMenuItem({
   onOpenWithOtherApplication
 }) {
   const triggerRef = useRef(null);
+  const triggerButtonRef = useRef(null);
+  const submenuRef = useRef(null);
+  const focusSubmenuOnOpenRef = useRef(false);
   const [open, setOpen] = useState(false);
-  const [submenuPosition, setSubmenuPosition] = useState({ left: 0, top: 0 });
+  const [submenuPosition, setSubmenuPosition] = useState({
+    left: 0,
+    mode: "right",
+    top: 0,
+    width: OPEN_WITH_SUBMENU_WIDTH_PX
+  });
   const closeTimerRef = useRef(null);
   const showExternalSection = showOpenInDefaultBrowser || showOpenWithOther || isLoading || applications.length > 0;
+  const showSectionDivider = shouldShowOpenWithSectionDivider({
+    showExternalSection,
+    showOpenInAppBrowser,
+    showOpenInFileViewer
+  });
   const estimatedSubmenuHeight = estimateOpenWithSubmenuHeight({
     applicationCount: applications.length,
     isLoading,
@@ -539,9 +589,40 @@ function OpenWithMenuItem({
     }, 120);
   }, [cancelClose]);
   const openSubmenu = useCallback(() => {
+    focusSubmenuOnOpenRef.current = false;
     cancelClose();
     setOpen(true);
   }, [cancelClose]);
+  const closeSubmenuToTrigger = useCallback(() => {
+    cancelClose();
+    setOpen(false);
+    triggerButtonRef.current?.focus();
+  }, [cancelClose]);
+  const updateSubmenuPosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) {
+      return;
+    }
+    const triggerRect = trigger.getBoundingClientRect();
+    const parentMenuRect = trigger.closest("[data-workspace-file-manager-context-menu]")?.getBoundingClientRect() ?? triggerRect;
+    const maxHeight = Math.min(
+      estimatedSubmenuHeight,
+      480,
+      Math.max(0, window.innerHeight - 24)
+    );
+    setSubmenuPosition(
+      resolveOpenWithSubmenuPlacement({
+        parentMenuLeft: parentMenuRect.left,
+        parentMenuTop: parentMenuRect.top,
+        submenuHeight: maxHeight,
+        triggerLeft: triggerRect.left,
+        triggerRight: triggerRect.right,
+        triggerTop: triggerRect.top,
+        viewportHeight: window.innerHeight,
+        viewportWidth: window.innerWidth
+      })
+    );
+  }, [estimatedSubmenuHeight]);
   useEffect(() => {
     return () => {
       cancelClose();
@@ -551,21 +632,31 @@ function OpenWithMenuItem({
     if (!open) {
       return;
     }
-    const trigger = triggerRef.current;
-    if (!trigger) {
+    updateSubmenuPosition();
+  }, [open, updateSubmenuPosition]);
+  useEffect(() => {
+    if (!open) {
       return;
     }
-    const rect = trigger.getBoundingClientRect();
-    const maxHeight = Math.min(
-      estimatedSubmenuHeight,
-      480,
-      Math.max(0, window.innerHeight - 24)
-    );
-    setSubmenuPosition({
-      left: rect.right + CONTEXT_MENU_SUBMENU_GAP_PX,
-      top: Math.max(12, Math.min(rect.top, window.innerHeight - maxHeight - 12))
+    window.addEventListener("resize", updateSubmenuPosition);
+    window.addEventListener("scroll", updateSubmenuPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateSubmenuPosition);
+      window.removeEventListener("scroll", updateSubmenuPosition, true);
+    };
+  }, [open, updateSubmenuPosition]);
+  useEffect(() => {
+    if (!open || !focusSubmenuOnOpenRef.current) {
+      return;
+    }
+    focusSubmenuOnOpenRef.current = false;
+    const frame = window.requestAnimationFrame(() => {
+      submenuRef.current?.querySelector("button:not(:disabled)")?.focus();
     });
-  }, [open, estimatedSubmenuHeight]);
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [open, submenuPosition.mode]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -577,6 +668,7 @@ function OpenWithMenuItem({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: triggerButtonRef,
             "aria-expanded": open,
             "aria-haspopup": "menu",
             className: cn(
@@ -586,15 +678,28 @@ function OpenWithMenuItem({
             disabled: busy,
             role: "menuitem",
             type: "button",
-            onClick: () => {
+            onClick: (event) => {
+              focusSubmenuOnOpenRef.current = event.detail === 0;
               setOpen((current) => {
                 const next = !current;
                 if (next) {
                   cancelClose();
+                } else {
+                  focusSubmenuOnOpenRef.current = false;
                 }
                 return next;
               });
             },
+            onKeyDown: (event) => {
+              if (event.key !== "ArrowRight") {
+                return;
+              }
+              event.preventDefault();
+              event.stopPropagation();
+              focusSubmenuOnOpenRef.current = true;
+              cancelClose();
+              setOpen(true);
+            },
             children: [
               /* @__PURE__ */ jsx("span", { className: "grid size-4 flex-none place-items-center text-[var(--text-secondary)]", children: /* @__PURE__ */ jsx(LaunchIcon, { className: "size-4" }) }),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: copy.t("openWithLabel") }),
@@ -612,9 +717,11 @@ function OpenWithMenuItem({
         /* @__PURE__ */ jsxs(
           ViewportMenuSurface,
           {
-            "data-workspace-file-manager-submenu": "",
+            ref: submenuRef,
+            "aria-label": copy.t("openWithLabel"),
+            "data-workspace-file-manager-submenu-mode": submenuPosition.mode,
             open,
-            className: "w-[220px] max-h-[min(480px,calc(100vh-24px))] overflow-y-auto p-1",
+            className: "max-h-[min(480px,calc(100vh-24px))] max-w-[calc(100vw-24px)] overflow-y-auto p-1",
             dismissOnEscape: false,
             dismissOnPointerDownOutside: false,
             dismissOnScroll: false,
@@ -622,14 +729,55 @@ function OpenWithMenuItem({
               type: "absolute",
               left: submenuPosition.left,
               top: submenuPosition.top,
-              boundaryPoint: { x: -1, y: -1 },
-              constrainToBoundary: false
+              boundaryPoint: { x: -1, y: -1 }
             },
             role: "menu",
-            style: { zIndex: "calc(var(--z-panel-popover) + 200)" },
+            style: {
+              width: submenuPosition.width,
+              zIndex: "calc(var(--z-panel-popover) + 200)"
+            },
             onPointerEnter: openSubmenu,
             onPointerLeave: scheduleClose,
+            onKeyDown: (event) => {
+              if (event.key === "ArrowLeft" || event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                closeSubmenuToTrigger();
+                return;
+              }
+              if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+                return;
+              }
+              const items = Array.from(
+                event.currentTarget.querySelectorAll(
+                  "button:not(:disabled)"
+                )
+              );
+              if (items.length === 0) {
+                return;
+              }
+              event.preventDefault();
+              event.stopPropagation();
+              const currentIndex = items.indexOf(
+                document.activeElement
+              );
+              const offset = event.key === "ArrowDown" ? 1 : -1;
+              const nextIndex = currentIndex < 0 ? offset > 0 ? 0 : items.length - 1 : (currentIndex + offset + items.length) % items.length;
+              items[nextIndex]?.focus();
+            },
             children: [
+              submenuPosition.mode === "overlay" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  ContextMenuActionButton,
+                  {
+                    activateOnPointerDown: true,
+                    icon: /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-4" }),
+                    label: copy.t("openWithLabel"),
+                    onClick: closeSubmenuToTrigger
+                  }
+                ),
+                /* @__PURE__ */ jsx(ContextMenuDivider, {})
+              ] }) : null,
               showOpenInFileViewer ? /* @__PURE__ */ jsx(
                 ContextMenuActionButton,
                 {
@@ -658,7 +806,7 @@ function OpenWithMenuItem({
                   }
                 }
               ) : null,
-              showExternalSection ? /* @__PURE__ */ jsx(ContextMenuDivider, {}) : null,
+              showSectionDivider ? /* @__PURE__ */ jsx(ContextMenuDivider, {}) : null,
               isLoading ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-[11px] text-[var(--text-tertiary)]", children: copy.t("openWithLoadingLabel") }) : null,
               applications.map((application) => {
                 const resolvedIcon = resolveOpenWithApplicationIcon?.(application);
@@ -941,7 +1089,8 @@ function WorkspaceFileManagerContextMenuContainer({
   onCopyPath,
   openInAppBrowserIcon,
   resolveOpenWithApplicationIcon,
-  session
+  session,
+  showInternalOpenWithActions
 }) {
   const contextMenuRef = useRef2(null);
   const { view } = useWorkspaceFileManagerContextMenuView(session);
@@ -998,9 +1147,9 @@ function WorkspaceFileManagerContextMenuContainer({
       showDeleteAction: view.showDeleteAction,
       showImportAction: view.showImportAction,
       showExportAction: view.showExportAction,
-      showOpenInAppBrowserAction: view.showOpenInAppBrowserAction && !!view.contextMenu?.entry && isWorkspaceFileBrowserOpenable(view.contextMenu.entry),
+      showOpenInAppBrowserAction: showInternalOpenWithActions && view.showOpenInAppBrowserAction && !!view.contextMenu?.entry && isWorkspaceFileBrowserOpenable(view.contextMenu.entry),
       showOpenInDefaultBrowserAction: view.showOpenInDefaultBrowserAction && !!view.contextMenu?.entry && isWorkspaceFileBrowserOpenable(view.contextMenu.entry),
-      showOpenInFileViewerAction: view.showOpenInFileViewerAction,
+      showOpenInFileViewerAction: showInternalOpenWithActions && view.showOpenInFileViewerAction,
       showOpenWithAction: view.showOpenWithAction,
       showOpenWithOtherAction: view.showOpenWithOtherAction,
       showRevealInFolderAction: view.showRevealInFolderAction,
@@ -2096,6 +2245,7 @@ function WorkspaceFileManagerPanels({
   onEntryIconViewportEnter,
   selectedEntry,
   selectedPath,
+  showPreviewPanel: showPreviewPanelEnabled = true,
   state,
   showDropOverlay,
   treeRows,
@@ -2325,7 +2475,7 @@ function WorkspaceFileManagerPanels({
     stopMoveDragAutoScroll,
     updateMoveDragAutoScroll
   ]);
-  const showPreviewPanel = layoutMode === "list";
+  const showPreviewPanel = showPreviewPanelEnabled && layoutMode === "list";
   const useStackedPreview = false;
   const previewPaneClassName = useStackedPreview ? "min-w-0 border-t border-[var(--border-1)]" : "min-w-[220px] border-l border-[var(--border-1)]";
   const tableGridClassName = useStackedPreview ? workspaceFileManagerCompactTableGridClassName : workspaceFileManagerTableGridClassName;
@@ -3290,7 +3440,7 @@ function hasFileDragPayload(dataTransfer) {
 
 // src/ui/WorkspaceFileManagerToolbar.tsx
 import {
-  ArrowLeftIcon,
+  ArrowLeftIcon as ArrowLeftIcon2,
   ArrowRightIcon as ArrowRightIcon3,
   Button as Button2,
   ChevronDownIcon,
@@ -3351,7 +3501,7 @@ function WorkspaceFileManagerToolbar({
         disabled: !canGoBack || isLoading || isBusy,
         title: copy.t("backLabel"),
         onClick: onGoBack,
-        children: /* @__PURE__ */ jsx7(ArrowLeftIcon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx7(ArrowLeftIcon2, { className: "size-4" })
       }
     ),
     /* @__PURE__ */ jsx7(
@@ -4205,6 +4355,8 @@ function WorkspaceFileManager({
   renderExternalLocationContent,
   hostOs = "linux",
   session,
+  showInternalOpenWithActions = true,
+  showPreviewPanel = true,
   surface = "card"
 }) {
   const rootRef = useRef7(null);
@@ -4563,7 +4715,8 @@ function WorkspaceFileManager({
                   onEntryDragStart,
                   onOpenContextMenu: openContextMenu,
                   resolveEntryIconUrl,
-                  session
+                  session,
+                  showPreviewPanel
                 }
               )
             }
@@ -4580,7 +4733,8 @@ function WorkspaceFileManager({
               onCopyPath,
               openInAppBrowserIcon,
               resolveOpenWithApplicationIcon,
-              session
+              session,
+              showInternalOpenWithActions
             }
           )
         ] }) : null
@@ -4680,7 +4834,8 @@ function WorkspaceFileManagerPanelsContainer({
   onEntryDragStart,
   onOpenContextMenu,
   resolveEntryIconUrl,
-  session
+  session,
+  showPreviewPanel
 }) {
   const { state, view } = useWorkspaceFileManagerPanelsView(session);
   const arrangedEntries = useMemo3(
@@ -4760,6 +4915,7 @@ function WorkspaceFileManagerPanelsContainer({
       onEntryIconViewportLeave: reportEntryIconViewportLeave,
       selectedEntry: view.selectedEntry,
       selectedPath: view.selectedPath,
+      showPreviewPanel,
       showDropOverlay: view.showDropOverlay,
       state: {
         entries: displayedEntries,