@tutti-os/workspace-file-manager 0.0.9 → 0.0.11

package/dist/index.js

@@ -5,18 +5,22 @@ 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-DXLDUMVG.js";
 import {
   createWorkspaceFileManagerI18nRuntime,
   resolveRevealInFolderLabel,
@@ -25,7 +29,7 @@ import {
 } from "./chunk-XOFPTWRV.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,82 @@ 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) => {
+        if (records.some(
+          (record) => record.isIntersecting && record.intersectionRatio > 0
+        )) {
+          reportViewportEnter();
+          return;
+        }
+        reportViewportLeave();
+      },
+      { root: viewportRoot, rootMargin: "0px", threshold: 0 }
+    );
+    observer.observe(element);
+    if (isWorkspaceFileEntryIconVisible(element, viewportRoot)) {
+      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,
@@ -990,6 +1030,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,
@@ -1076,6 +1129,8 @@ function WorkspaceFileManagerIconGrid({
   moveDragPreviewEntryPath,
   moveDragTargetEntryPath,
   pendingDirectoryPath,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selectedPath,
   onCancelInlineRename,
   onClearInlineRenameValidation,
@@ -1107,6 +1162,8 @@ function WorkspaceFileManagerIconGrid({
           moveDragActive,
           moveDragSource: moveDragPreviewEntryPath === entry.path,
           moveDragTarget: moveDragTargetEntryPath === entry.path,
+          onEntryIconViewportLeave,
+          onEntryIconViewportEnter,
           selected: selectedPath === entry.path,
           onCancelInlineRename,
           onClearInlineRenameValidation,
@@ -1134,6 +1191,8 @@ function WorkspaceFileManagerIconTile({
   moveDragActive,
   moveDragSource,
   moveDragTarget,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selected,
   onCancelInlineRename,
   onClearInlineRenameValidation,
@@ -1143,7 +1202,7 @@ function WorkspaceFileManagerIconTile({
   onClick,
   onPointerDown
 }) {
-  const buttonRef = useRef2(null);
+  const buttonRef = useRef3(null);
   const nameParts = splitWorkspaceFileName(entry.name);
   useLayoutEffect2(() => {
     if (!selected) {
@@ -1169,7 +1228,9 @@ function WorkspaceFileManagerIconTile({
       frameClassName: workspaceFileManagerIconGridFrameClassName(),
       iconClassName: workspaceFileManagerIconGridIconClassName(),
       iconUrlByCacheKey,
-      isEnteringDirectory
+      isEnteringDirectory,
+      onViewportLeave: onEntryIconViewportLeave,
+      onViewportEnter: onEntryIconViewportEnter
     }
   );
   if (isInlineRenaming) {
@@ -1243,7 +1304,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 +1509,8 @@ function WorkspaceFileManagerPanels({
   layoutMode,
   pendingDirectoryPath,
   previewState,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selectedEntry,
   selectedPath,
   state,
@@ -1465,18 +1528,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 +1653,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 +1846,8 @@ function WorkspaceFileManagerPanels({
           moveDragPreviewEntryPath: moveDragPreview?.entry.path ?? null,
           moveDragTargetEntryPath: moveDragPreview?.targetDirectoryPath ?? null,
           pendingDirectoryPath,
+          onEntryIconViewportLeave,
+          onEntryIconViewportEnter,
           selectedPath,
           onCancelInlineRename,
           onClearInlineRenameValidation,
@@ -1842,6 +1907,8 @@ function WorkspaceFileManagerPanels({
             moveDragTarget: moveDragPreview?.targetDirectoryPath === entry.path,
             tableCellPaddingClassName,
             selected: selectedPath === entry.path,
+            onEntryIconViewportLeave,
+            onEntryIconViewportEnter,
             onCancelInlineRename,
             onClearInlineRenameValidation,
             onConfirmInlineRename,
@@ -1924,7 +1991,9 @@ function WorkspaceFileManagerPanels({
           MoveDragPreview,
           {
             iconUrlByCacheKey,
-            preview: moveDragPreview
+            preview: moveDragPreview,
+            onEntryIconViewportLeave,
+            onEntryIconViewportEnter
           }
         ) : null
       ]
@@ -1932,7 +2001,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 +2060,8 @@ function EntryRow({
   moveDragActive,
   moveDragSource,
   moveDragTarget,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   selected,
   tableCellPaddingClassName,
   onCancelInlineRename,
@@ -2001,8 +2072,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 +2113,8 @@ function EntryRow({
       isEnteringDirectory,
       isInlineRenaming,
       isRenaming,
+      onEntryIconViewportLeave,
+      onEntryIconViewportEnter,
       onCancelInlineRename,
       onClearInlineRenameValidation,
       onConfirmInlineRename
@@ -2106,7 +2179,9 @@ function EntryRow({
 }
 function MoveDragPreview({
   iconUrlByCacheKey,
-  preview
+  preview,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter
 }) {
   return /* @__PURE__ */ jsxs4(
     "div",
@@ -2125,7 +2200,9 @@ function MoveDragPreview({
             entry: preview.entry,
             frameClassName: "size-[18px]",
             iconClassName: "size-4",
-            iconUrlByCacheKey
+            iconUrlByCacheKey,
+            onViewportLeave: onEntryIconViewportLeave,
+            onViewportEnter: onEntryIconViewportEnter
           }
         ),
         /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate", children: preview.entry.name })
@@ -2176,6 +2253,8 @@ function EntryNameCell({
   isEnteringDirectory = false,
   isInlineRenaming = false,
   isRenaming = false,
+  onEntryIconViewportLeave,
+  onEntryIconViewportEnter,
   onCancelInlineRename,
   onClearInlineRenameValidation,
   onConfirmInlineRename
@@ -2183,9 +2262,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;
     }
@@ -2222,7 +2301,9 @@ function EntryNameCell({
           entry,
           frameClassName: "size-[18px]",
           iconClassName: "size-4",
-          iconUrlByCacheKey
+          iconUrlByCacheKey,
+          onViewportLeave: onEntryIconViewportLeave,
+          onViewportEnter: onEntryIconViewportEnter
         }
       ),
       /* @__PURE__ */ jsxs4("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
@@ -2285,7 +2366,9 @@ function EntryNameCell({
         frameClassName: "size-[18px]",
         iconClassName: "size-4",
         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: [
@@ -2762,74 +2845,207 @@ 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()
-      );
-      return;
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo, useState as useState6 } from "react";
+
+// src/ui/workspaceFileEntryIconUrlQueue.ts
+var defaultMaxConcurrentIconRequests = 3;
+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;
+  function publish() {
+    for (const listener of listeners) {
+      listener();
     }
-    const targets = entries.filter(shouldResolveWorkspaceFileEntryIcon);
-    if (targets.length === 0) {
-      setIconUrlByCacheKey(
-        (current) => current.size === 0 ? current : /* @__PURE__ */ new Map()
-      );
+  }
+  function isRetained(cacheKey) {
+    return retainedCacheKeys === null || retainedCacheKeys.has(cacheKey);
+  }
+  function isVisible(cacheKey) {
+    return (visibleReferenceCountByCacheKey.get(cacheKey) ?? 0) > 0;
+  }
+  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 false;
+    }
+    visibleReferenceCountByCacheKey.delete(cacheKey);
+    queuedEntries.delete(cacheKey);
+    const hadCachedIcon = iconUrlByCacheKey.delete(cacheKey);
+    if (hadCachedIcon) {
+      publish();
+    }
+    return true;
+  }
+  function drain() {
+    if (disposed || !options.resolveEntryIconUrl) {
       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];
+    while (activeCount < maxConcurrent && queuedEntries.size > 0) {
+      const next = queuedEntries.entries().next().value;
+      if (!next) {
+        return;
+      }
+      const [cacheKey, entry] = next;
+      queuedEntries.delete(cacheKey);
+      if (!isVisible(cacheKey) || iconUrlByCacheKey.has(cacheKey) || inFlightCacheKeys.has(cacheKey)) {
+        continue;
+      }
+      activeCount += 1;
+      inFlightCacheKeys.add(cacheKey);
+      void options.resolveEntryIconUrl(entry).then((iconUrl) => {
+        if (!disposed && isRetained(cacheKey) && isVisible(cacheKey)) {
+          iconUrlByCacheKey.set(cacheKey, iconUrl?.trim() || null);
+          publish();
         }
-      })
-    ).then((results) => {
-      if (cancelled) {
+      }).catch(() => {
+        if (!disposed && isRetained(cacheKey) && isVisible(cacheKey)) {
+          iconUrlByCacheKey.set(cacheKey, null);
+          publish();
+        }
+      }).finally(() => {
+        activeCount -= 1;
+        inFlightCacheKeys.delete(cacheKey);
+        drain();
+      });
+    }
+  }
+  return {
+    dispose() {
+      disposed = true;
+      queuedEntries.clear();
+      visibleReferenceCountByCacheKey.clear();
+      listeners.clear();
+    },
+    leaveViewport(entry) {
+      if (disposed || !shouldResolveWorkspaceFileEntryIcon(entry)) {
         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;
-          }
+      releaseVisibleReference(resolveWorkspaceFileEntryIconCacheKey(entry));
+    },
+    enterViewport(entry) {
+      if (disposed || !options.resolveEntryIconUrl || !shouldResolveWorkspaceFileEntryIcon(entry)) {
+        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(shouldResolveWorkspaceFileEntryIcon).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) {
+  return entries.filter(shouldResolveWorkspaceFileEntryIcon).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry)).join("\0");
+}
+function useWorkspaceFileEntryIconUrls(input) {
+  const { entries, resolveEntryIconUrl } = input;
+  const queue = useMemo(
+    () => createWorkspaceFileEntryIconUrlQueue({
+      resolveEntryIconUrl
+    }),
+    [resolveEntryIconUrl]
+  );
+  const [iconUrlByCacheKey, setIconUrlByCacheKey] = useState6(() => queue.snapshot());
+  const iconTargetSignature = useMemo(
+    () => buildIconTargetSignature(entries),
+    [entries]
+  );
+  useEffect4(() => {
+    queue.retainEntries(entries);
+  }, [entries, iconTargetSignature, queue]);
+  useEffect4(() => {
+    setIconUrlByCacheKey(queue.snapshot());
+    return queue.subscribe(() => {
+      setIconUrlByCacheKey(queue.snapshot());
     });
-    return () => {
-      cancelled = true;
-    };
-  }, [entries, iconTargetSignature, resolveEntryIconUrl]);
-  return iconUrlByCacheKey;
+  }, [queue]);
+  useEffect4(
+    () => () => {
+      queue.dispose();
+    },
+    [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 +3232,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 +3266,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 +3292,7 @@ function WorkspaceFileManager({
       window.removeEventListener("keydown", handleRenameShortcut);
     };
   }, [panelsState, panelsView.selectedEntry, session]);
-  useEffect4(() => {
+  useEffect5(() => {
     function resetDropOverlay() {
       session.resetDragDepth();
     }
@@ -3293,7 +3509,11 @@ function WorkspaceFileManagerPanelsContainer({
     () => sortWorkspaceFileEntriesForArrangeMode(state.entries, arrangeMode),
     [arrangeMode, state.entries]
   );
-  const iconUrlByCacheKey = useWorkspaceFileEntryIconUrls({
+  const {
+    iconUrlByCacheKey,
+    reportEntryIconViewportEnter,
+    reportEntryIconViewportLeave
+  } = useWorkspaceFileEntryIconUrls({
     entries: arrangedEntries,
     resolveEntryIconUrl
   });
@@ -3313,6 +3533,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 +3648,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 +3814,7 @@ function WorkspaceFileManagerContextMenuContainer({
 }
 function useCloseContextMenuOnOutsideInteraction(input) {
   const { contextMenuRef, isOpen, session } = input;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isOpen) {
       return;
     }