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

package/dist/index.js

@@ -16,17 +16,18 @@ import {
   resolveWorkspaceFileVisualKind,
   resolveWorkspaceImageMimeType,
   shouldResolveWorkspaceFileEntryIcon,
+  shouldUseWorkspaceFileArchiveIcon,
   shouldUseWorkspaceFileExtensionDocumentIcon,
   splitWorkspaceFileName,
   workspaceFilePreviewMaxBytes,
   workspaceFileTextMaxBytes
-} from "./chunk-DXLDUMVG.js";
+} from "./chunk-G2T6CZ2T.js";
 import {
   createWorkspaceFileManagerI18nRuntime,
   resolveRevealInFolderLabel,
   workspaceFileManagerI18nNamespace,
   workspaceFileManagerI18nResources
-} from "./chunk-XOFPTWRV.js";
+} from "./chunk-MDBT2GS5.js";
 
 // src/ui/WorkspaceFileManager.tsx
 import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef5, useState as useState7 } from "react";
@@ -900,8 +901,6 @@ function importSummaryReasonCopyKey(reason) {
 import {
   FileCodeIcon as FileCodeIcon2,
   FileTextIcon as FileTextIcon2,
-  FolderFilledIcon as FolderFilledIcon2,
-  ImageFileIcon as ImageFileIcon2,
   LoadingIcon as LoadingIcon2,
   ScrollArea,
   VideoFileIcon as VideoFileIcon2,
@@ -924,20 +923,31 @@ import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 import {
   FileCodeIcon,
   FileTextIcon,
-  FolderFilledIcon,
-  ImageFileIcon,
   LoadingIcon,
   VideoFileIcon,
   cn as cn2
 } from "@tutti-os/ui-system";
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var workspaceArchiveFallbackIconUrl = new URL(
+  "../assets/workspace-archive-fallback.png",
+  import.meta.url
+).toString();
+var workspaceFolderFallbackIconUrl = new URL(
+  "../assets/workspace-folder-fallback.png",
+  import.meta.url
+).toString();
+var workspaceImageFallbackIconUrl = new URL(
+  "../assets/workspace-image-fallback.png",
+  import.meta.url
+).toString();
 function WorkspaceFileEntryIcon({
   entry,
   frameClassName,
   iconClassName = "size-4",
   iconUrlByCacheKey,
   isEnteringDirectory = false,
+  loadingIconClassName,
   onViewportLeave,
   onViewportEnter
 }) {
@@ -981,9 +991,10 @@ function WorkspaceFileEntryIcon({
     const viewportRoot = resolveWorkspaceFileEntryIconViewport(element);
     const observer = new IntersectionObserver(
       (records) => {
-        if (records.some(
+        const intersecting = records.some(
           (record) => record.isIntersecting && record.intersectionRatio > 0
-        )) {
+        );
+        if (intersecting) {
           reportViewportEnter();
           return;
         }
@@ -992,7 +1003,11 @@ function WorkspaceFileEntryIcon({
       { root: viewportRoot, rootMargin: "0px", threshold: 0 }
     );
     observer.observe(element);
-    if (isWorkspaceFileEntryIconVisible(element, viewportRoot)) {
+    const initiallyVisible = isWorkspaceFileEntryIconVisible(
+      element,
+      viewportRoot
+    );
+    if (initiallyVisible) {
       reportViewportEnter();
     } else {
       reportViewportLeave();
@@ -1011,12 +1026,22 @@ function WorkspaceFileEntryIcon({
         frameClassName,
         isEnteringDirectory ? "text-[var(--text-tertiary)]" : entryIconColorClassName(visualKind, isAppBundle)
       ),
-      children: isEnteringDirectory ? /* @__PURE__ */ jsx2(LoadingIcon, { className: iconClassName + " animate-spin" }) : iconUrl ? /* @__PURE__ */ jsx2(
+      children: isEnteringDirectory ? /* @__PURE__ */ jsx2(
+        LoadingIcon,
+        {
+          className: cn2(loadingIconClassName ?? iconClassName, "animate-spin")
+        }
+      ) : iconUrl ? /* @__PURE__ */ jsx2(
         "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" : "rounded-[4px] object-contain"
+          ),
+          decoding: "async",
           draggable: false,
+          loading: "lazy",
           src: iconUrl
         }
       ) : /* @__PURE__ */ jsx2(
@@ -1048,44 +1073,102 @@ function DefaultEntryIcon({
   iconClassName,
   visualKind
 }) {
+  const vectorIconClassName = vectorFallbackIconClassName(iconClassName);
   if (isWorkspaceApplicationBundle(entry)) {
-    return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+    return /* @__PURE__ */ jsx2(FileTextIcon, { className: vectorIconClassName });
+  }
+  if (shouldUseWorkspaceFileArchiveIcon(entry)) {
+    return /* @__PURE__ */ jsx2(WorkspaceArchiveFallbackIcon, { className: iconClassName });
   }
   if (shouldUseWorkspaceFileExtensionDocumentIcon(entry)) {
-    return /* @__PURE__ */ jsx2(ExtensionDocumentIcon, { entry, iconClassName });
+    return /* @__PURE__ */ jsx2(
+      ExtensionDocumentIcon,
+      {
+        entry,
+        iconClassName: vectorIconClassName
+      }
+    );
   }
   switch (visualKind) {
     case "directory":
-      return /* @__PURE__ */ jsx2(FolderFilledIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(WorkspaceFolderFallbackIcon, { className: iconClassName });
     case "image":
-      return /* @__PURE__ */ jsx2(ImageFileIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(WorkspaceImageFallbackIcon, { className: iconClassName });
     case "video":
-      return /* @__PURE__ */ jsx2(VideoFileIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(VideoFileIcon, { className: vectorIconClassName });
     case "markdown":
     case "document":
-      return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(FileTextIcon, { className: vectorIconClassName });
     case "code":
-      return /* @__PURE__ */ jsx2(FileCodeIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(FileCodeIcon, { className: vectorIconClassName });
     case "binary":
-      return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(FileTextIcon, { className: vectorIconClassName });
     default:
-      return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+      return /* @__PURE__ */ jsx2(FileTextIcon, { className: vectorIconClassName });
   }
 }
+function vectorFallbackIconClassName(iconClassName) {
+  return iconClassName.includes("size-[84px]") ? "size-[64px]" : iconClassName;
+}
+function WorkspaceFolderFallbackIcon({
+  className
+}) {
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      alt: "",
+      "aria-hidden": "true",
+      className: cn2("object-contain", className),
+      decoding: "async",
+      draggable: false,
+      src: workspaceFolderFallbackIconUrl
+    }
+  );
+}
+function WorkspaceArchiveFallbackIcon({
+  className
+}) {
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      alt: "",
+      "aria-hidden": "true",
+      className: cn2("object-contain", className),
+      decoding: "async",
+      draggable: false,
+      src: workspaceArchiveFallbackIconUrl
+    }
+  );
+}
+function WorkspaceImageFallbackIcon({
+  className
+}) {
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      alt: "",
+      "aria-hidden": "true",
+      className: cn2("object-contain", className),
+      decoding: "async",
+      draggable: false,
+      src: workspaceImageFallbackIconUrl
+    }
+  );
+}
 function ExtensionDocumentIcon({
   entry,
   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",
     {
       "aria-hidden": "true",
       className: cn2("relative inline-block overflow-visible", iconClassName),
       children: [
-        /* @__PURE__ */ jsx2("span", { className: "absolute inset-[5%] rounded-[6px] border border-black/10 bg-linear-to-br from-white via-[#f8f8f8] to-[#ececec] shadow-[0_8px_16px_rgba(0,0,0,0.18),inset_0_1px_0_rgba(255,255,255,0.85)]" }),
-        /* @__PURE__ */ jsx2("span", { className: "absolute top-[5%] right-[5%] h-[28%] w-[28%] overflow-hidden rounded-tr-[6px]", children: /* @__PURE__ */ jsx2("span", { className: "absolute top-0 right-0 h-full w-full origin-top-right -skew-x-3 rounded-bl-[4px] border-b border-l border-black/10 bg-linear-to-br from-white to-[#d9d9d9] shadow-[-2px_3px_5px_rgba(0,0,0,0.18)]" }) }),
+        /* @__PURE__ */ jsx2("span", { className: "absolute inset-[5%] rounded-[6px] border border-black/10 bg-linear-to-br from-white via-[#f8f8f8] to-[#ececec]" }),
+        /* @__PURE__ */ jsx2("span", { className: "absolute top-[5%] right-[5%] h-[28%] w-[28%] overflow-hidden rounded-tr-[6px]", children: /* @__PURE__ */ jsx2("span", { className: "absolute top-0 right-0 h-full w-full origin-top-right -skew-x-3 rounded-bl-[4px] border-b border-l border-black/10 bg-linear-to-br from-white to-[#d9d9d9]" }) }),
         showExtension ? /* @__PURE__ */ jsx2("span", { className: "absolute right-[12%] bottom-[14%] left-[12%] truncate text-center text-[10px] leading-none font-semibold tracking-wide text-[#7a7a7a]", children: extension }) : null
       ]
     }
@@ -1099,19 +1182,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
@@ -1214,7 +1297,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)]",
@@ -1229,6 +1312,7 @@ function WorkspaceFileManagerIconTile({
       iconClassName: workspaceFileManagerIconGridIconClassName(),
       iconUrlByCacheKey,
       isEnteringDirectory,
+      loadingIconClassName: "size-7",
       onViewportLeave: onEntryIconViewportLeave,
       onViewportEnter: onEntryIconViewportEnter
     }
@@ -1325,7 +1409,7 @@ function IconTileRenameInput({
         "aria-invalid": inlineRenameValidation !== null,
         "aria-label": copy.t("renameLabel"),
         className: cn3(
-          "w-full min-w-0 rounded-md border border-transparent bg-[var(--transparency-block)] px-1 py-0.5 text-center text-xs text-[var(--text-primary)] outline-none",
+          "w-full min-w-0 rounded-[4px] border border-transparent bg-[var(--transparency-block)] px-1 py-0.5 text-center text-xs text-[var(--text-primary)] outline-none",
           inlineRenameValidation !== null && "border-[var(--state-danger)]"
         ),
         defaultValue: entry.name,
@@ -1365,8 +1449,7 @@ var workspaceFileManagerArrangeModes = /* @__PURE__ */ new Set([
   "dateAdded",
   "modified",
   "created",
-  "size",
-  "tags"
+  "size"
 ]);
 function readWorkspaceFileManagerArrangeMode() {
   if (typeof window === "undefined") {
@@ -1414,8 +1497,6 @@ function sortWorkspaceFileEntriesForArrangeMode(entries, arrangeMode) {
         return compareDateDescending(left, right, "created") || compareEntryName(left, right);
       case "size":
         return compareSizeDescending(left, right) || compareEntryName(left, right);
-      case "tags":
-        return compareDirectoryFirst(left, right) || compareEntryName(left, right);
     }
   });
 }
@@ -2198,8 +2279,8 @@ function MoveDragPreview({
           WorkspaceFileEntryIcon,
           {
             entry: preview.entry,
-            frameClassName: "size-[18px]",
-            iconClassName: "size-4",
+            frameClassName: "size-7",
+            iconClassName: "size-6",
             iconUrlByCacheKey,
             onViewportLeave: onEntryIconViewportLeave,
             onViewportEnter: onEntryIconViewportEnter
@@ -2299,8 +2380,8 @@ function EntryNameCell({
         WorkspaceFileEntryIcon,
         {
           entry,
-          frameClassName: "size-[18px]",
-          iconClassName: "size-4",
+          frameClassName: "size-7",
+          iconClassName: "size-6",
           iconUrlByCacheKey,
           onViewportLeave: onEntryIconViewportLeave,
           onViewportEnter: onEntryIconViewportEnter
@@ -2363,8 +2444,8 @@ function EntryNameCell({
       WorkspaceFileEntryIcon,
       {
         entry,
-        frameClassName: "size-[18px]",
-        iconClassName: "size-4",
+        frameClassName: "size-7",
+        iconClassName: "size-6",
         iconUrlByCacheKey,
         isEnteringDirectory,
         onViewportLeave: onEntryIconViewportLeave,
@@ -2383,9 +2464,9 @@ function EntryIcon({
 }) {
   switch (visualKind) {
     case "directory":
-      return /* @__PURE__ */ jsx4(FolderFilledIcon2, { className });
+      return /* @__PURE__ */ jsx4(WorkspaceFolderFallbackIcon, { className });
     case "image":
-      return /* @__PURE__ */ jsx4(ImageFileIcon2, { className });
+      return /* @__PURE__ */ jsx4(WorkspaceImageFallbackIcon, { className });
     case "video":
       return /* @__PURE__ */ jsx4(VideoFileIcon2, { className });
     case "markdown":
@@ -2504,6 +2585,10 @@ import {
   DropdownMenuTrigger,
   LoadingIcon as LoadingIcon3,
   RefreshIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   ViewGridLinedIcon,
   ViewListLinedIcon,
   cn as cn5
@@ -2624,10 +2709,9 @@ function LayoutModeToggle({
     { label: copy.t("arrangeDateAddedLabel"), mode: "dateAdded" },
     { label: copy.t("modifiedLabel"), mode: "modified" },
     { label: copy.t("arrangeCreatedLabel"), mode: "created" },
-    { label: copy.t("sizeLabel"), mode: "size" },
-    { label: copy.t("arrangeTagsLabel"), mode: "tags" }
+    { label: copy.t("sizeLabel"), mode: "size" }
   ];
-  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",
@@ -2638,6 +2722,7 @@ function LayoutModeToggle({
           {
             active: layoutMode === "icon",
             ariaLabel: copy.t("layoutIconViewLabel"),
+            tooltipLabel: copy.t("layoutIconViewTooltipLabel"),
             onClick: () => {
               onLayoutModeChange("icon");
             },
@@ -2649,6 +2734,7 @@ function LayoutModeToggle({
           {
             active: layoutMode === "list",
             ariaLabel: copy.t("layoutListViewLabel"),
+            tooltipLabel: copy.t("layoutListViewTooltipLabel"),
             onClick: () => {
               onLayoutModeChange("list");
             },
@@ -2663,7 +2749,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" })
@@ -2680,7 +2765,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,
@@ -2700,31 +2787,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,
@@ -2849,6 +2939,10 @@ import { useCallback as useCallback5, useEffect as useEffect4, useMemo, useState
 
 // 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,
@@ -2862,6 +2956,9 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
   let activeCount = 0;
   let disposed = false;
   let retainedCacheKeys = null;
+  const policyOptions = {
+    includeImageThumbnails: options.includeImageThumbnails
+  };
   function publish() {
     for (const listener of listeners) {
       listener();
@@ -2873,6 +2970,9 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
   function isVisible(cacheKey) {
     return (visibleReferenceCountByCacheKey.get(cacheKey) ?? 0) > 0;
   }
+  function shouldResolveCacheKey(cacheKey) {
+    return isVisible(cacheKey) || shouldKeepResolvedIconAfterViewportLeave(cacheKey);
+  }
   function retainVisibleReference(cacheKey) {
     visibleReferenceCountByCacheKey.set(
       cacheKey,
@@ -2883,15 +2983,17 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
     const nextCount = (visibleReferenceCountByCacheKey.get(cacheKey) ?? 0) - 1;
     if (nextCount > 0) {
       visibleReferenceCountByCacheKey.set(cacheKey, nextCount);
-      return false;
+      return;
     }
     visibleReferenceCountByCacheKey.delete(cacheKey);
+    if (shouldKeepResolvedIconAfterViewportLeave(cacheKey)) {
+      return;
+    }
     queuedEntries.delete(cacheKey);
     const hadCachedIcon = iconUrlByCacheKey.delete(cacheKey);
     if (hadCachedIcon) {
       publish();
     }
-    return true;
   }
   function drain() {
     if (disposed || !options.resolveEntryIconUrl) {
@@ -2904,18 +3006,20 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
       }
       const [cacheKey, entry] = next;
       queuedEntries.delete(cacheKey);
-      if (!isVisible(cacheKey) || iconUrlByCacheKey.has(cacheKey) || inFlightCacheKeys.has(cacheKey)) {
+      if (!shouldResolveCacheKey(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)) {
+        const shouldStore = !disposed && isRetained(cacheKey) && shouldResolveCacheKey(cacheKey);
+        if (shouldStore) {
           iconUrlByCacheKey.set(cacheKey, iconUrl?.trim() || null);
           publish();
         }
       }).catch(() => {
-        if (!disposed && isRetained(cacheKey) && isVisible(cacheKey)) {
+        const shouldStore = !disposed && isRetained(cacheKey) && shouldResolveCacheKey(cacheKey);
+        if (shouldStore) {
           iconUrlByCacheKey.set(cacheKey, null);
           publish();
         }
@@ -2927,6 +3031,9 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
     }
   }
   return {
+    activate() {
+      disposed = false;
+    },
     dispose() {
       disposed = true;
       queuedEntries.clear();
@@ -2934,13 +3041,14 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
       listeners.clear();
     },
     leaveViewport(entry) {
-      if (disposed || !shouldResolveWorkspaceFileEntryIcon(entry)) {
+      if (disposed || !shouldResolveWorkspaceFileEntryIcon(entry, policyOptions)) {
         return;
       }
-      releaseVisibleReference(resolveWorkspaceFileEntryIconCacheKey(entry));
+      const cacheKey = resolveWorkspaceFileEntryIconCacheKey(entry);
+      releaseVisibleReference(cacheKey);
     },
     enterViewport(entry) {
-      if (disposed || !options.resolveEntryIconUrl || !shouldResolveWorkspaceFileEntryIcon(entry)) {
+      if (disposed || !options.resolveEntryIconUrl || !shouldResolveWorkspaceFileEntryIcon(entry, policyOptions)) {
         return;
       }
       const cacheKey = resolveWorkspaceFileEntryIconCacheKey(entry);
@@ -2953,7 +3061,9 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
     },
     retainEntries(entries) {
       retainedCacheKeys = new Set(
-        entries.filter(shouldResolveWorkspaceFileEntryIcon).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry))
+        entries.filter(
+          (entry) => shouldResolveWorkspaceFileEntryIcon(entry, policyOptions)
+        ).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry))
       );
       let changed = false;
       for (const cacheKey of iconUrlByCacheKey.keys()) {
@@ -2998,22 +3108,29 @@ function createWorkspaceFileEntryIconUrlQueue(options) {
 }
 
 // src/ui/useWorkspaceFileEntryIconUrls.ts
-function buildIconTargetSignature(entries) {
-  return entries.filter(shouldResolveWorkspaceFileEntryIcon).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry)).join("\0");
+function buildIconTargetSignature(entries, options) {
+  return entries.filter((entry) => shouldResolveWorkspaceFileEntryIcon(entry, options)).map((entry) => resolveWorkspaceFileEntryIconCacheKey(entry)).join("\0");
 }
 function useWorkspaceFileEntryIconUrls(input) {
-  const { entries, resolveEntryIconUrl } = input;
+  const { entries, includeImageThumbnails, resolveEntryIconUrl } = input;
   const queue = useMemo(
     () => createWorkspaceFileEntryIconUrlQueue({
+      includeImageThumbnails,
       resolveEntryIconUrl
     }),
-    [resolveEntryIconUrl]
+    [includeImageThumbnails, resolveEntryIconUrl]
   );
   const [iconUrlByCacheKey, setIconUrlByCacheKey] = useState6(() => queue.snapshot());
   const iconTargetSignature = useMemo(
-    () => buildIconTargetSignature(entries),
-    [entries]
+    () => buildIconTargetSignature(entries, { includeImageThumbnails }),
+    [entries, includeImageThumbnails]
   );
+  useEffect4(() => {
+    queue.activate();
+    return () => {
+      queue.dispose();
+    };
+  }, [queue]);
   useEffect4(() => {
     queue.retainEntries(entries);
   }, [entries, iconTargetSignature, queue]);
@@ -3023,12 +3140,6 @@ function useWorkspaceFileEntryIconUrls(input) {
       setIconUrlByCacheKey(queue.snapshot());
     });
   }, [queue]);
-  useEffect4(
-    () => () => {
-      queue.dispose();
-    },
-    [queue]
-  );
   const reportEntryIconViewportEnter = useCallback5(
     (entry) => {
       queue.enterViewport(entry);
@@ -3515,6 +3626,7 @@ function WorkspaceFileManagerPanelsContainer({
     reportEntryIconViewportLeave
   } = useWorkspaceFileEntryIconUrls({
     entries: arrangedEntries,
+    includeImageThumbnails: true,
     resolveEntryIconUrl
   });
   return /* @__PURE__ */ jsx6(