@tutti-os/workspace-file-manager 0.0.10 → 0.0.12

package/dist/index.js

@@ -5,27 +5,31 @@ import {
   decodeWorkspaceTextFile,
   formatWorkspaceFileBytes,
   formatWorkspaceFileModifiedTime,
+  isWorkspaceApplicationBundle,
   isWorkspaceFileBrowserOpenable,
   isWorkspaceTextFileTooLarge,
   looksLikeBinaryText,
   normalizeWorkspaceFilePath,
   resolveWorkspaceFileActivationTarget,
+  resolveWorkspaceFileEntryIconCacheKey,
   resolveWorkspaceFileExtension,
   resolveWorkspaceFileVisualKind,
   resolveWorkspaceImageMimeType,
+  shouldResolveWorkspaceFileEntryIcon,
+  shouldUseWorkspaceFileExtensionDocumentIcon,
   splitWorkspaceFileName,
   workspaceFilePreviewMaxBytes,
   workspaceFileTextMaxBytes
-} from "./chunk-H3SDVOT7.js";
+} from "./chunk-CSFEGRX7.js";
 import {
   createWorkspaceFileManagerI18nRuntime,
   resolveRevealInFolderLabel,
   workspaceFileManagerI18nNamespace,
   workspaceFileManagerI18nResources
-} from "./chunk-XOFPTWRV.js";
+} from "./chunk-L6SAJEFE.js";
 
 // src/ui/WorkspaceFileManager.tsx
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef5, useState as useState7 } from "react";
 import { cn as cn6 } from "@tutti-os/ui-system";
 
 // src/ui/WorkspaceFileManagerMenus.tsx
@@ -906,15 +910,15 @@ import {
 import { WorkspaceFilePreviewSurface as SharedWorkspaceFilePreviewSurface } from "@tutti-os/workspace-file-preview/react";
 import {
   useCallback as useCallback2,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState2
 } from "react";
 
 // src/ui/WorkspaceFileManagerIconGrid.tsx
 import { cn as cn3 } from "@tutti-os/ui-system";
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 
 // src/ui/WorkspaceFileEntryIcon.tsx
 import {
@@ -926,46 +930,87 @@ import {
   VideoFileIcon,
   cn as cn2
 } from "@tutti-os/ui-system";
-
-// src/ui/workspaceFileEntryIconPolicy.ts
-function shouldResolveWorkspaceFileEntryIcon(entry) {
-  if (isWorkspaceApplicationBundle(entry)) {
-    return true;
-  }
-  if (shouldUseWorkspaceFileExtensionDocumentIcon(entry)) {
-    return false;
-  }
-  return entry.kind === "file";
-}
-function shouldUseWorkspaceFileExtensionDocumentIcon(entry) {
-  if (entry.kind !== "file") {
-    return false;
-  }
-  const visualKind = resolveWorkspaceFileVisualKind(entry);
-  return visualKind === "code" || visualKind === "markdown" || classifyWorkspaceFilePreviewKind(entry) === "text";
-}
-function isWorkspaceApplicationBundle(entry) {
-  return entry.name.trim().toLowerCase().endsWith(".app");
-}
-function resolveWorkspaceFileEntryIconCacheKey(entry) {
-  return `${entry.path}:${entry.mtimeMs ?? 0}`;
-}
-
-// src/ui/WorkspaceFileEntryIcon.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function WorkspaceFileEntryIcon({
   entry,
   frameClassName,
   iconClassName = "size-4",
   iconUrlByCacheKey,
-  isEnteringDirectory = false
+  isEnteringDirectory = false,
+  onViewportLeave,
+  onViewportEnter
 }) {
   const visualKind = resolveWorkspaceFileVisualKind(entry);
   const isAppBundle = isWorkspaceApplicationBundle(entry);
-  const iconUrl = iconUrlByCacheKey?.get(resolveWorkspaceFileEntryIconCacheKey(entry)) ?? null;
+  const cacheKey = resolveWorkspaceFileEntryIconCacheKey(entry);
+  const iconUrl = iconUrlByCacheKey?.get(cacheKey) ?? null;
+  const frameRef = useRef2(null);
+  const visibleEntryRef = useRef2(null);
+  const visibleEntryCacheKeyRef = useRef2(null);
+  useEffect2(() => {
+    function reportViewportLeave() {
+      const visibleEntry = visibleEntryRef.current;
+      if (!visibleEntry) {
+        return;
+      }
+      visibleEntryRef.current = null;
+      visibleEntryCacheKeyRef.current = null;
+      onViewportLeave?.(visibleEntry);
+    }
+    function reportViewportEnter() {
+      if (visibleEntryCacheKeyRef.current === cacheKey) {
+        return;
+      }
+      reportViewportLeave();
+      visibleEntryRef.current = entry;
+      visibleEntryCacheKeyRef.current = cacheKey;
+      onViewportEnter?.(entry);
+    }
+    if (!onViewportEnter || isEnteringDirectory) {
+      reportViewportLeave();
+      return;
+    }
+    const element = frameRef.current;
+    if (!element || typeof IntersectionObserver === "undefined") {
+      reportViewportEnter();
+      return () => {
+        reportViewportLeave();
+      };
+    }
+    const viewportRoot = resolveWorkspaceFileEntryIconViewport(element);
+    const observer = new IntersectionObserver(
+      (records) => {
+        const intersecting = records.some(
+          (record) => record.isIntersecting && record.intersectionRatio > 0
+        );
+        if (intersecting) {
+          reportViewportEnter();
+          return;
+        }
+        reportViewportLeave();
+      },
+      { root: viewportRoot, rootMargin: "0px", threshold: 0 }
+    );
+    observer.observe(element);
+    const initiallyVisible = isWorkspaceFileEntryIconVisible(
+      element,
+      viewportRoot
+    );
+    if (initiallyVisible) {
+      reportViewportEnter();
+    } else {
+      reportViewportLeave();
+    }
+    return () => {
+      observer.disconnect();
+      reportViewportLeave();
+    };
+  }, [cacheKey, entry, isEnteringDirectory, onViewportLeave, onViewportEnter]);
   return /* @__PURE__ */ jsx2(
     "span",
     {
+      ref: frameRef,
       className: cn2(
         "grid flex-none place-items-center overflow-hidden",
         frameClassName,
@@ -975,8 +1020,13 @@ function WorkspaceFileEntryIcon({
         "img",
         {
           alt: "",
-          className: cn2(iconClassName, "rounded-[4px] object-contain"),
+          className: cn2(
+            iconClassName,
+            visualKind === "image" ? "rounded-[6px] border border-[var(--border-1)] bg-[var(--transparency-block)] object-contain shadow-sm" : "rounded-[4px] object-contain"
+          ),
+          decoding: "async",
           draggable: false,
+          loading: "lazy",
           src: iconUrl
         }
       ) : /* @__PURE__ */ jsx2(
@@ -990,6 +1040,19 @@ function WorkspaceFileEntryIcon({
     }
   );
 }
+function resolveWorkspaceFileEntryIconViewport(element) {
+  return element.closest('[data-slot="scroll-area-viewport"]');
+}
+function isWorkspaceFileEntryIconVisible(element, viewportRoot) {
+  const elementRect = element.getBoundingClientRect();
+  const viewportRect = viewportRoot?.getBoundingClientRect() ?? {
+    bottom: window.innerHeight,
+    left: 0,
+    right: window.innerWidth,
+    top: 0
+  };
+  return elementRect.bottom > viewportRect.top && elementRect.top < viewportRect.bottom && elementRect.right > viewportRect.left && elementRect.left < viewportRect.right;
+}
 function DefaultEntryIcon({
   entry,
   iconClassName,
@@ -1024,7 +1087,7 @@ function ExtensionDocumentIcon({
   iconClassName
 }) {
   const extension = resolveWorkspaceFileExtension(entry.name).slice(0, 5).toUpperCase();
-  const showExtension = extension.length > 0 && iconClassName.includes("52px");
+  const showExtension = extension.length > 0 && !iconClassName.includes("size-4");
   return /* @__PURE__ */ jsxs2(
     "span",
     {
@@ -1046,19 +1109,19 @@ function entryIconColorClassName(visualKind, isAppBundle) {
 }
 
 // src/ui/workspaceFileManagerIconGridLayout.ts
-var workspaceFileManagerIconGridIconSizePx = 52;
-var workspaceFileManagerIconGridTileMinWidthPx = 108;
-var workspaceFileManagerIconGridTileMaxWidthPx = 120;
+var workspaceFileManagerIconGridIconSizePx = 84;
+var workspaceFileManagerIconGridTileMinWidthPx = 136;
+var workspaceFileManagerIconGridTileMaxWidthPx = 148;
 var workspaceFileManagerIconGridLayout = {
   iconSizePx: workspaceFileManagerIconGridIconSizePx,
   tileMaxWidthPx: workspaceFileManagerIconGridTileMaxWidthPx,
   tileMinWidthPx: workspaceFileManagerIconGridTileMinWidthPx
 };
 function workspaceFileManagerIconGridIconClassName() {
-  return "size-[52px]";
+  return "size-[84px]";
 }
 function workspaceFileManagerIconGridFrameClassName() {
-  return "size-[60px]";
+  return "size-[92px]";
 }
 
 // src/ui/WorkspaceFileManagerIconGrid.tsx
@@ -1076,6 +1139,8 @@ function WorkspaceFileManagerIconGrid({
   moveDragPreviewEntryPath,
   moveDragTargetEntryPath,
   pendingDirectoryPath,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selectedPath,
   onCancelInlineRename,
   onClearInlineRenameValidation,
@@ -1107,6 +1172,8 @@ function WorkspaceFileManagerIconGrid({
           moveDragActive,
           moveDragSource: moveDragPreviewEntryPath === entry.path,
           moveDragTarget: moveDragTargetEntryPath === entry.path,
+          onEntryIconViewportLeave,
+          onEntryIconViewportEnter,
           selected: selectedPath === entry.path,
           onCancelInlineRename,
           onClearInlineRenameValidation,
@@ -1134,6 +1201,8 @@ function WorkspaceFileManagerIconTile({
   moveDragActive,
   moveDragSource,
   moveDragTarget,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selected,
   onCancelInlineRename,
   onClearInlineRenameValidation,
@@ -1143,7 +1212,7 @@ function WorkspaceFileManagerIconTile({
   onClick,
   onPointerDown
 }) {
-  const buttonRef = useRef2(null);
+  const buttonRef = useRef3(null);
   const nameParts = splitWorkspaceFileName(entry.name);
   useLayoutEffect2(() => {
     if (!selected) {
@@ -1155,7 +1224,7 @@ function WorkspaceFileManagerIconTile({
     });
   }, [selected]);
   const tileClassName = cn3(
-    "flex min-w-0 max-w-[120px] flex-col items-center gap-1.5 rounded-md border border-transparent px-2 py-2 text-center transition-colors",
+    "flex min-w-0 max-w-[148px] flex-col items-center gap-1.5 rounded-md border border-transparent px-2 py-2 text-center transition-colors",
     isInlineRenaming ? "cursor-default" : "cursor-pointer hover:bg-transparency-block",
     moveDragActive && "cursor-grabbing",
     selected || contextMenuActive || isInlineRenaming ? "border-[var(--border-focus)] bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-secondary)]",
@@ -1169,7 +1238,9 @@ function WorkspaceFileManagerIconTile({
       frameClassName: workspaceFileManagerIconGridFrameClassName(),
       iconClassName: workspaceFileManagerIconGridIconClassName(),
       iconUrlByCacheKey,
-      isEnteringDirectory
+      isEnteringDirectory,
+      onViewportLeave: onEntryIconViewportLeave,
+      onViewportEnter: onEntryIconViewportEnter
     }
   );
   if (isInlineRenaming) {
@@ -1243,7 +1314,7 @@ function IconTileRenameInput({
 }) {
   const nameParts = splitWorkspaceFileName(entry.name);
   const hasFileExtension = nameParts.end.length > 0 && nameParts.end.startsWith(".");
-  const inputRef = useRef2(null);
+  const inputRef = useRef3(null);
   useLayoutEffect2(() => {
     const input = inputRef.current;
     if (!input) {
@@ -1448,6 +1519,8 @@ function WorkspaceFileManagerPanels({
   layoutMode,
   pendingDirectoryPath,
   previewState,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selectedEntry,
   selectedPath,
   state,
@@ -1465,18 +1538,18 @@ function WorkspaceFileManagerPanels({
   const { rootRef } = useWorkspaceFileManagerStackedLayout(
     workspaceFileManagerStackedBreakpoint
   );
-  const previewResizeRef = useRef3(null);
+  const previewResizeRef = useRef4(null);
   const [previewPaneWidth, setPreviewPaneWidth] = useState2(
     workspaceFileManagerPreviewDefaultWidth
   );
   const [moveDragPreview, setMoveDragPreview] = useState2(null);
-  const lastEntryClickRef = useRef3(
+  const lastEntryClickRef = useRef4(
     null
   );
-  const moveDragAutoScrollRef = useRef3(null);
-  const moveDragRef = useRef3(null);
-  const suppressNextClickRef = useRef3(false);
-  const entriesRef = useRef3(state.entries);
+  const moveDragAutoScrollRef = useRef4(null);
+  const moveDragRef = useRef4(null);
+  const suppressNextClickRef = useRef4(false);
+  const entriesRef = useRef4(state.entries);
   const nativeEntryDragEnabled = onEntryDragStart !== void 0 && (entryDragMode === "external" || entryDragMode === void 0 && !canMove);
   const internalMoveEnabled = canMove && !nativeEntryDragEnabled;
   const dateColumnLabel = resolveWorkspaceFileManagerDateColumnLabel(
@@ -1590,11 +1663,11 @@ function WorkspaceFileManagerPanels({
     },
     [entrySelectionEnabled, onOpenEntry, onSelect, shouldSuppressEntryClick]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     lastEntryClickRef.current = null;
     entriesRef.current = state.entries;
   }, [state.entries]);
-  useEffect2(() => {
+  useEffect3(() => {
     function handleDocumentPointerMove(event) {
       const drag = moveDragRef.current;
       if (!drag) {
@@ -1783,6 +1856,8 @@ function WorkspaceFileManagerPanels({
           moveDragPreviewEntryPath: moveDragPreview?.entry.path ?? null,
           moveDragTargetEntryPath: moveDragPreview?.targetDirectoryPath ?? null,
           pendingDirectoryPath,
+          onEntryIconViewportLeave,
+          onEntryIconViewportEnter,
           selectedPath,
           onCancelInlineRename,
           onClearInlineRenameValidation,
@@ -1842,6 +1917,8 @@ function WorkspaceFileManagerPanels({
             moveDragTarget: moveDragPreview?.targetDirectoryPath === entry.path,
             tableCellPaddingClassName,
             selected: selectedPath === entry.path,
+            onEntryIconViewportLeave,
+            onEntryIconViewportEnter,
             onCancelInlineRename,
             onClearInlineRenameValidation,
             onConfirmInlineRename,
@@ -1924,7 +2001,9 @@ function WorkspaceFileManagerPanels({
           MoveDragPreview,
           {
             iconUrlByCacheKey,
-            preview: moveDragPreview
+            preview: moveDragPreview,
+            onEntryIconViewportLeave,
+            onEntryIconViewportEnter
           }
         ) : null
       ]
@@ -1932,7 +2011,7 @@ function WorkspaceFileManagerPanels({
   );
 }
 function useWorkspaceFileManagerStackedLayout(breakpoint) {
-  const rootRef = useRef3(null);
+  const rootRef = useRef4(null);
   const [isStacked, setIsStacked] = useState2(false);
   useLayoutEffect3(() => {
     const element = rootRef.current;
@@ -1991,6 +2070,8 @@ function EntryRow({
   moveDragActive,
   moveDragSource,
   moveDragTarget,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selected,
   tableCellPaddingClassName,
   onCancelInlineRename,
@@ -2001,8 +2082,8 @@ function EntryRow({
   onClick,
   onPointerDown
 }) {
-  const buttonRowRef = useRef3(null);
-  const divRowRef = useRef3(null);
+  const buttonRowRef = useRef4(null);
+  const divRowRef = useRef4(null);
   useLayoutEffect3(() => {
     if (!selected) {
       return;
@@ -2042,6 +2123,8 @@ function EntryRow({
       isEnteringDirectory,
       isInlineRenaming,
       isRenaming,
+      onEntryIconViewportLeave,
+      onEntryIconViewportEnter,
       onCancelInlineRename,
       onClearInlineRenameValidation,
       onConfirmInlineRename
@@ -2106,7 +2189,9 @@ function EntryRow({
 }
 function MoveDragPreview({
   iconUrlByCacheKey,
-  preview
+  preview,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter
 }) {
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -2123,9 +2208,11 @@ function MoveDragPreview({
           WorkspaceFileEntryIcon,
           {
             entry: preview.entry,
-            frameClassName: "size-[18px]",
-            iconClassName: "size-4",
-            iconUrlByCacheKey
+            frameClassName: "size-7",
+            iconClassName: "size-6",
+            iconUrlByCacheKey,
+            onViewportLeave: onEntryIconViewportLeave,
+            onViewportEnter: onEntryIconViewportEnter
           }
         ),
         /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate", children: preview.entry.name })
@@ -2176,6 +2263,8 @@ function EntryNameCell({
   isEnteringDirectory = false,
   isInlineRenaming = false,
   isRenaming = false,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   onCancelInlineRename,
   onClearInlineRenameValidation,
   onConfirmInlineRename
@@ -2183,9 +2272,9 @@ function EntryNameCell({
   const nameParts = splitWorkspaceFileName(entry.name);
   const hasFileExtension = nameParts.end.length > 0 && nameParts.end.startsWith(".");
   const [name, setName] = useState2(entry.name);
-  const inputRef = useRef3(null);
-  const skipBlurRef = useRef3(false);
-  useEffect2(() => {
+  const inputRef = useRef4(null);
+  const skipBlurRef = useRef4(false);
+  useEffect3(() => {
     if (!isInlineRenaming) {
       return;
     }
@@ -2220,9 +2309,11 @@ function EntryNameCell({
         WorkspaceFileEntryIcon,
         {
           entry,
-          frameClassName: "size-[18px]",
-          iconClassName: "size-4",
-          iconUrlByCacheKey
+          frameClassName: "size-7",
+          iconClassName: "size-6",
+          iconUrlByCacheKey,
+          onViewportLeave: onEntryIconViewportLeave,
+          onViewportEnter: onEntryIconViewportEnter
         }
       ),
       /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
@@ -2282,10 +2373,12 @@ function EntryNameCell({
       WorkspaceFileEntryIcon,
       {
         entry,
-        frameClassName: "size-[18px]",
-        iconClassName: "size-4",
+        frameClassName: "size-7",
+        iconClassName: "size-6",
         iconUrlByCacheKey,
-        isEnteringDirectory
+        isEnteringDirectory,
+        onViewportLeave: onEntryIconViewportLeave,
+        onViewportEnter: onEntryIconViewportEnter
       }
     ),
     /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 max-w-full overflow-hidden whitespace-nowrap text-sm", children: [
@@ -2421,6 +2514,10 @@ import {
   DropdownMenuTrigger,
   LoadingIcon as LoadingIcon3,
   RefreshIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   ViewGridLinedIcon,
   ViewListLinedIcon,
   cn as cn5
@@ -2544,7 +2641,7 @@ function LayoutModeToggle({
     { label: copy.t("sizeLabel"), mode: "size" },
     { label: copy.t("arrangeTagsLabel"), mode: "tags" }
   ];
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx5(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       className: "flex items-center rounded-md border border-[var(--border-1)] bg-[var(--transparency-block)] p-0.5",
@@ -2555,6 +2652,7 @@ function LayoutModeToggle({
           {
             active: layoutMode === "icon",
             ariaLabel: copy.t("layoutIconViewLabel"),
+            tooltipLabel: copy.t("layoutIconViewTooltipLabel"),
             onClick: () => {
               onLayoutModeChange("icon");
             },
@@ -2566,6 +2664,7 @@ function LayoutModeToggle({
           {
             active: layoutMode === "list",
             ariaLabel: copy.t("layoutListViewLabel"),
+            tooltipLabel: copy.t("layoutListViewTooltipLabel"),
             onClick: () => {
               onLayoutModeChange("list");
             },
@@ -2580,7 +2679,6 @@ function LayoutModeToggle({
               "aria-label": copy.t("arrangeMenuLabel"),
               className: "size-6 min-w-6 rounded-[4px] p-0 text-[var(--text-secondary)] data-[state=open]:bg-[var(--background-fronted)] data-[state=open]:text-[var(--text-primary)] data-[state=open]:shadow-sm",
               size: "icon-sm",
-              title: copy.t("arrangeMenuLabel"),
               type: "button",
               variant: "ghost",
               children: /* @__PURE__ */ jsx5(ChevronDownIcon, { className: "size-3.5" })
@@ -2597,7 +2695,9 @@ function LayoutModeToggle({
                 {
                   value: arrangeMode,
                   onValueChange: (nextMode) => {
-                    onArrangeModeChange(nextMode);
+                    onArrangeModeChange(
+                      nextMode
+                    );
                   },
                   children: arrangeOptions.map((option, index) => /* @__PURE__ */ jsxs5("div", { children: [
                     index === 1 ? /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}) : null,
@@ -2617,31 +2717,34 @@ function LayoutModeToggle({
         ] })
       ]
     }
-  );
+  ) });
 }
 function LayoutModeButton({
   active,
   ariaLabel,
   children,
-  onClick
+  onClick,
+  tooltipLabel
 }) {
-  return /* @__PURE__ */ jsx5(
-    Button2,
-    {
-      "aria-label": ariaLabel,
-      "aria-pressed": active,
-      className: cn5(
-        "size-6 min-w-6 rounded-[4px] p-0 text-text-secondary",
-        active && "!bg-background-fronted text-foreground hover:!bg-background-fronted"
-      ),
-      size: "icon-sm",
-      title: ariaLabel,
-      type: "button",
-      variant: "ghost",
-      onClick,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+    /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+      Button2,
+      {
+        "aria-label": ariaLabel,
+        "aria-pressed": active,
+        className: cn5(
+          "size-6 min-w-6 rounded-[4px] p-0 text-text-secondary",
+          active && "!bg-background-fronted text-foreground hover:!bg-background-fronted"
+        ),
+        size: "icon-sm",
+        type: "button",
+        variant: "ghost",
+        onClick,
+        children
+      }
+    ) }),
+    /* @__PURE__ */ jsx5(TooltipContent, { side: "bottom", children: tooltipLabel })
+  ] });
 }
 function ToolbarIconButton({
   ariaLabel,
@@ -2762,74 +2865,228 @@ function useWorkspaceFileManagerLayoutMode() {
 }
 
 // src/ui/useWorkspaceFileEntryIconUrls.ts
-import { useEffect as useEffect3, useMemo, useState as useState6 } from "react";
-function buildIconTargetSignature(entries) {
-  return entries.filter(shouldResolveWorkspaceFileEntryIcon).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry)).join("\0");
-}
-function useWorkspaceFileEntryIconUrls(input) {
-  const { entries, resolveEntryIconUrl } = input;
-  const [iconUrlByCacheKey, setIconUrlByCacheKey] = useState6(() => /* @__PURE__ */ new Map());
-  const iconTargetSignature = useMemo(
-    () => buildIconTargetSignature(entries),
-    [entries]
-  );
-  useEffect3(() => {
-    if (!resolveEntryIconUrl) {
-      setIconUrlByCacheKey(
-        (current) => current.size === 0 ? current : /* @__PURE__ */ new Map()
-      );
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo, useState as useState6 } from "react";
+
+// src/ui/workspaceFileEntryIconUrlQueue.ts
+var defaultMaxConcurrentIconRequests = 3;
+var imageThumbnailCacheKeyPrefix = "image-thumbnail:";
+function shouldKeepResolvedIconAfterViewportLeave(cacheKey) {
+  return cacheKey.startsWith(imageThumbnailCacheKeyPrefix);
+}
+function createWorkspaceFileEntryIconUrlQueue(options) {
+  const maxConcurrent = Math.max(
+    1,
+    Math.floor(options.maxConcurrent ?? defaultMaxConcurrentIconRequests)
+  );
+  const iconUrlByCacheKey = /* @__PURE__ */ new Map();
+  const inFlightCacheKeys = /* @__PURE__ */ new Set();
+  const listeners = /* @__PURE__ */ new Set();
+  const queuedEntries = /* @__PURE__ */ new Map();
+  const visibleReferenceCountByCacheKey = /* @__PURE__ */ new Map();
+  let activeCount = 0;
+  let disposed = false;
+  let retainedCacheKeys = null;
+  const policyOptions = {
+    includeImageThumbnails: options.includeImageThumbnails
+  };
+  function publish() {
+    for (const listener of listeners) {
+      listener();
+    }
+  }
+  function isRetained(cacheKey) {
+    return retainedCacheKeys === null || retainedCacheKeys.has(cacheKey);
+  }
+  function isVisible(cacheKey) {
+    return (visibleReferenceCountByCacheKey.get(cacheKey) ?? 0) > 0;
+  }
+  function shouldResolveCacheKey(cacheKey) {
+    return isVisible(cacheKey) || shouldKeepResolvedIconAfterViewportLeave(cacheKey);
+  }
+  function retainVisibleReference(cacheKey) {
+    visibleReferenceCountByCacheKey.set(
+      cacheKey,
+      (visibleReferenceCountByCacheKey.get(cacheKey) ?? 0) + 1
+    );
+  }
+  function releaseVisibleReference(cacheKey) {
+    const nextCount = (visibleReferenceCountByCacheKey.get(cacheKey) ?? 0) - 1;
+    if (nextCount > 0) {
+      visibleReferenceCountByCacheKey.set(cacheKey, nextCount);
       return;
     }
-    const targets = entries.filter(shouldResolveWorkspaceFileEntryIcon);
-    if (targets.length === 0) {
-      setIconUrlByCacheKey(
-        (current) => current.size === 0 ? current : /* @__PURE__ */ new Map()
-      );
+    visibleReferenceCountByCacheKey.delete(cacheKey);
+    if (shouldKeepResolvedIconAfterViewportLeave(cacheKey)) {
       return;
     }
-    let cancelled = false;
-    void Promise.all(
-      targets.map(async (entry) => {
-        const cacheKey = resolveWorkspaceFileEntryIconCacheKey(entry);
-        try {
-          const iconUrl = await resolveEntryIconUrl(entry);
-          return [cacheKey, iconUrl?.trim() || null];
-        } catch {
-          return [cacheKey, null];
+    queuedEntries.delete(cacheKey);
+    const hadCachedIcon = iconUrlByCacheKey.delete(cacheKey);
+    if (hadCachedIcon) {
+      publish();
+    }
+  }
+  function drain() {
+    if (disposed || !options.resolveEntryIconUrl) {
+      return;
+    }
+    while (activeCount < maxConcurrent && queuedEntries.size > 0) {
+      const next = queuedEntries.entries().next().value;
+      if (!next) {
+        return;
+      }
+      const [cacheKey, entry] = next;
+      queuedEntries.delete(cacheKey);
+      if (!shouldResolveCacheKey(cacheKey) || iconUrlByCacheKey.has(cacheKey) || inFlightCacheKeys.has(cacheKey)) {
+        continue;
+      }
+      activeCount += 1;
+      inFlightCacheKeys.add(cacheKey);
+      void options.resolveEntryIconUrl(entry).then((iconUrl) => {
+        const shouldStore = !disposed && isRetained(cacheKey) && shouldResolveCacheKey(cacheKey);
+        if (shouldStore) {
+          iconUrlByCacheKey.set(cacheKey, iconUrl?.trim() || null);
+          publish();
         }
-      })
-    ).then((results) => {
-      if (cancelled) {
+      }).catch(() => {
+        const shouldStore = !disposed && isRetained(cacheKey) && shouldResolveCacheKey(cacheKey);
+        if (shouldStore) {
+          iconUrlByCacheKey.set(cacheKey, null);
+          publish();
+        }
+      }).finally(() => {
+        activeCount -= 1;
+        inFlightCacheKeys.delete(cacheKey);
+        drain();
+      });
+    }
+  }
+  return {
+    activate() {
+      disposed = false;
+    },
+    dispose() {
+      disposed = true;
+      queuedEntries.clear();
+      visibleReferenceCountByCacheKey.clear();
+      listeners.clear();
+    },
+    leaveViewport(entry) {
+      if (disposed || !shouldResolveWorkspaceFileEntryIcon(entry, policyOptions)) {
         return;
       }
-      setIconUrlByCacheKey((current) => {
-        const nextCacheKeys = new Set(results.map(([cacheKey]) => cacheKey));
-        let changed = false;
-        const next = /* @__PURE__ */ new Map();
-        for (const [cacheKey, iconUrl] of results) {
-          next.set(cacheKey, iconUrl);
-          if (current.get(cacheKey) !== iconUrl) {
-            changed = true;
-          }
+      const cacheKey = resolveWorkspaceFileEntryIconCacheKey(entry);
+      releaseVisibleReference(cacheKey);
+    },
+    enterViewport(entry) {
+      if (disposed || !options.resolveEntryIconUrl || !shouldResolveWorkspaceFileEntryIcon(entry, policyOptions)) {
+        return;
+      }
+      const cacheKey = resolveWorkspaceFileEntryIconCacheKey(entry);
+      retainVisibleReference(cacheKey);
+      if (iconUrlByCacheKey.has(cacheKey) || inFlightCacheKeys.has(cacheKey) || queuedEntries.has(cacheKey)) {
+        return;
+      }
+      queuedEntries.set(cacheKey, entry);
+      drain();
+    },
+    retainEntries(entries) {
+      retainedCacheKeys = new Set(
+        entries.filter(
+          (entry) => shouldResolveWorkspaceFileEntryIcon(entry, policyOptions)
+        ).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry))
+      );
+      let changed = false;
+      for (const cacheKey of iconUrlByCacheKey.keys()) {
+        if (!isRetained(cacheKey)) {
+          iconUrlByCacheKey.delete(cacheKey);
+          changed = true;
+          continue;
         }
-        if (current.size !== next.size) {
+        if (iconUrlByCacheKey.get(cacheKey) === null) {
+          iconUrlByCacheKey.delete(cacheKey);
           changed = true;
-        } else if (!changed) {
-          for (const cacheKey of current.keys()) {
-            if (!nextCacheKeys.has(cacheKey)) {
-              changed = true;
-              break;
-            }
-          }
         }
-        return changed ? next : current;
-      });
-    });
+      }
+      for (const cacheKey of queuedEntries.keys()) {
+        if (!isRetained(cacheKey)) {
+          queuedEntries.delete(cacheKey);
+        }
+      }
+      for (const cacheKey of visibleReferenceCountByCacheKey.keys()) {
+        if (!isRetained(cacheKey)) {
+          visibleReferenceCountByCacheKey.delete(cacheKey);
+        }
+      }
+      if (changed) {
+        publish();
+      }
+    },
+    snapshot() {
+      return new Map(iconUrlByCacheKey);
+    },
+    subscribe(listener) {
+      if (disposed) {
+        return () => {
+        };
+      }
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
+// src/ui/useWorkspaceFileEntryIconUrls.ts
+function buildIconTargetSignature(entries, options) {
+  return entries.filter((entry) => shouldResolveWorkspaceFileEntryIcon(entry, options)).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry)).join("\0");
+}
+function useWorkspaceFileEntryIconUrls(input) {
+  const { entries, includeImageThumbnails, resolveEntryIconUrl } = input;
+  const queue = useMemo(
+    () => createWorkspaceFileEntryIconUrlQueue({
+      includeImageThumbnails,
+      resolveEntryIconUrl
+    }),
+    [includeImageThumbnails, resolveEntryIconUrl]
+  );
+  const [iconUrlByCacheKey, setIconUrlByCacheKey] = useState6(() => queue.snapshot());
+  const iconTargetSignature = useMemo(
+    () => buildIconTargetSignature(entries, { includeImageThumbnails }),
+    [entries, includeImageThumbnails]
+  );
+  useEffect4(() => {
+    queue.activate();
     return () => {
-      cancelled = true;
+      queue.dispose();
     };
-  }, [entries, iconTargetSignature, resolveEntryIconUrl]);
-  return iconUrlByCacheKey;
+  }, [queue]);
+  useEffect4(() => {
+    queue.retainEntries(entries);
+  }, [entries, iconTargetSignature, queue]);
+  useEffect4(() => {
+    setIconUrlByCacheKey(queue.snapshot());
+    return queue.subscribe(() => {
+      setIconUrlByCacheKey(queue.snapshot());
+    });
+  }, [queue]);
+  const reportEntryIconViewportEnter = useCallback5(
+    (entry) => {
+      queue.enterViewport(entry);
+    },
+    [queue]
+  );
+  const reportEntryIconViewportLeave = useCallback5(
+    (entry) => {
+      queue.leaveViewport(entry);
+    },
+    [queue]
+  );
+  return {
+    iconUrlByCacheKey,
+    reportEntryIconViewportEnter,
+    reportEntryIconViewportLeave
+  };
 }
 
 // src/ui/workspaceFileManagerAnalytics.ts
@@ -3016,12 +3273,12 @@ function WorkspaceFileManager({
   session,
   surface = "card"
 }) {
-  const rootRef = useRef4(null);
+  const rootRef = useRef5(null);
   const { arrangeMode, setArrangeMode } = useWorkspaceFileManagerArrangeMode();
   const { layoutMode, setLayoutMode } = useWorkspaceFileManagerLayoutMode();
   const rootView = useWorkspaceFileManagerRootView(session);
   const { state: panelsState, view: panelsView } = useWorkspaceFileManagerPanelsView(session);
-  useEffect4(() => {
+  useEffect5(() => {
     function handleCopyShortcut(event) {
       if (!(event.metaKey || event.ctrlKey) || event.key !== "c" || event.shiftKey) {
         return;
@@ -3050,7 +3307,7 @@ function WorkspaceFileManager({
       window.removeEventListener("keydown", handleCopyShortcut);
     };
   }, [onCopyEntry, panelsState, panelsView.selectedEntry, session]);
-  useEffect4(() => {
+  useEffect5(() => {
     function handleRenameShortcut(event) {
       if (event.key !== "Enter" || event.metaKey || event.ctrlKey || event.altKey) {
         return;
@@ -3076,7 +3333,7 @@ function WorkspaceFileManager({
       window.removeEventListener("keydown", handleRenameShortcut);
     };
   }, [panelsState, panelsView.selectedEntry, session]);
-  useEffect4(() => {
+  useEffect5(() => {
     function resetDropOverlay() {
       session.resetDragDepth();
     }
@@ -3293,8 +3550,13 @@ function WorkspaceFileManagerPanelsContainer({
     () => sortWorkspaceFileEntriesForArrangeMode(state.entries, arrangeMode),
     [arrangeMode, state.entries]
   );
-  const iconUrlByCacheKey = useWorkspaceFileEntryIconUrls({
+  const {
+    iconUrlByCacheKey,
+    reportEntryIconViewportEnter,
+    reportEntryIconViewportLeave
+  } = useWorkspaceFileEntryIconUrls({
     entries: arrangedEntries,
+    includeImageThumbnails: true,
     resolveEntryIconUrl
   });
   return /* @__PURE__ */ jsx6(
@@ -3313,6 +3575,8 @@ function WorkspaceFileManagerPanelsContainer({
       layoutMode,
       pendingDirectoryPath: view.pendingDirectoryPath,
       previewState: view.previewState,
+      onEntryIconViewportEnter: reportEntryIconViewportEnter,
+      onEntryIconViewportLeave: reportEntryIconViewportLeave,
       selectedEntry: view.selectedEntry,
       selectedPath: view.selectedPath,
       showDropOverlay: view.showDropOverlay,
@@ -3426,11 +3690,11 @@ function WorkspaceFileManagerContextMenuContainer({
   resolveOpenWithApplicationIcon,
   session
 }) {
-  const contextMenuRef = useRef4(null);
+  const contextMenuRef = useRef5(null);
   const { view } = useWorkspaceFileManagerContextMenuView(session);
   const [openWithApplications, setOpenWithApplications] = useState7([]);
   const [openWithLoading, setOpenWithLoading] = useState7(false);
-  useEffect4(() => {
+  useEffect5(() => {
     const entry = view.contextMenu?.entry;
     if (!entry || !view.showOpenWithAction) {
       return;
@@ -3592,7 +3856,7 @@ function WorkspaceFileManagerContextMenuContainer({
 }
 function useCloseContextMenuOnOutsideInteraction(input) {
   const { contextMenuRef, isOpen, session } = input;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isOpen) {
       return;
     }