@tutti-os/workspace-file-manager 0.0.2 → 0.0.3

package/dist/index.js

@@ -22,11 +22,11 @@ import {
   resolveRevealInFolderLabel,
   workspaceFileManagerI18nNamespace,
   workspaceFileManagerI18nResources
-} from "./chunk-2AG4ND4D.js";
+} from "./chunk-P2UOYMTS.js";
 
 // src/ui/WorkspaceFileManager.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
-import { cn as cn4 } from "@tutti-os/ui-system";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
+import { cn as cn6 } from "@tutti-os/ui-system";
 
 // src/ui/WorkspaceFileManagerMenus.tsx
 import {
@@ -385,7 +385,7 @@ function ContextMenuActionButton({
     "button",
     {
       className: cn(
-        "flex h-8 w-full items-center gap-2 rounded-md border-0 bg-transparent px-2 text-left text-sm transition-colors disabled:cursor-default disabled:opacity-50",
+        "flex h-8 w-full items-center gap-2 rounded-md border-0 bg-transparent px-2 text-left text-[13px] transition-colors disabled:cursor-default disabled:opacity-50",
         danger ? "text-[var(--state-danger)] hover:bg-[var(--on-danger)]" : "text-[var(--text-primary)] hover:bg-transparency-block"
       ),
       disabled,
@@ -490,7 +490,7 @@ function OpenWithMenuItem({
             "aria-expanded": open,
             "aria-haspopup": "menu",
             className: cn(
-              "flex h-8 w-full items-center gap-2 rounded-md border-0 bg-transparent px-2 text-left text-sm text-[var(--text-primary)] transition-colors hover:bg-transparency-block disabled:cursor-default disabled:opacity-50",
+              "flex h-8 w-full items-center gap-2 rounded-md border-0 bg-transparent px-2 text-left text-[13px] text-[var(--text-primary)] transition-colors hover:bg-transparency-block disabled:cursor-default disabled:opacity-50",
               open && "bg-transparency-block"
             ),
             disabled: busy,
@@ -555,7 +555,7 @@ function OpenWithMenuItem({
                 }
               ) : null,
               showExternalSection ? /* @__PURE__ */ jsx(ContextMenuDivider, {}) : null,
-              isLoading ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs text-[var(--text-tertiary)]", children: copy.t("openWithLoadingLabel") }) : 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);
                 return /* @__PURE__ */ jsx(
@@ -651,7 +651,7 @@ function WorkspaceFileManagerCreateDialog({
                 }
               }
             ),
-            dialog.errorMessage ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--state-danger)]", children: dialog.errorMessage }) : null,
+            dialog.errorMessage ? /* @__PURE__ */ jsx("p", { className: "text-[13px] text-[var(--state-danger)]", children: dialog.errorMessage }) : null,
             /* @__PURE__ */ jsxs(DialogFooter, { children: [
               /* @__PURE__ */ jsx(
                 Button,
@@ -815,10 +815,10 @@ function WorkspaceFileManagerImportConflictDialog({
         /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-auto rounded-lg border border-[var(--border-1)] bg-transparency-block", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--border-1)]", children: dialog.conflicts.map((conflict) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-col gap-1 px-4 py-3 text-sm",
+            className: "flex flex-col gap-1 px-4 py-3 text-[13px]",
             children: [
               /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: conflict.name }),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--text-secondary)]", children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-[var(--text-secondary)]", children: [
                 copy.t("importConflictReviewLabel"),
                 ":",
                 " ",
@@ -872,7 +872,7 @@ function ImportConflictSummary({
   if (summaryItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-xs text-[var(--text-secondary)]", children: summaryItems.map((item) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 text-[11px] text-[var(--text-secondary)]", children: summaryItems.map((item) => /* @__PURE__ */ jsx(
     "span",
     {
       className: "rounded-md border border-[var(--border-1)] px-2 py-1",
@@ -894,24 +894,375 @@ function importSummaryReasonCopyKey(reason) {
 
 // src/ui/WorkspaceFileManagerPanels.tsx
 import {
-  FileCodeIcon,
-  FileTextIcon,
-  FolderFilledIcon,
-  ImageFileIcon,
-  LoadingIcon,
+  FileCodeIcon as FileCodeIcon2,
+  FileTextIcon as FileTextIcon2,
+  FolderFilledIcon as FolderFilledIcon2,
+  ImageFileIcon as ImageFileIcon2,
+  LoadingIcon as LoadingIcon2,
   ScrollArea,
-  VideoFileIcon,
-  cn as cn2
+  VideoFileIcon as VideoFileIcon2,
+  cn as cn4
 } from "@tutti-os/ui-system";
 import { WorkspaceFilePreviewSurface as SharedWorkspaceFilePreviewSurface } from "@tutti-os/workspace-file-preview/react";
 import {
   useCallback as useCallback2,
   useEffect as useEffect2,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef2,
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef3,
   useState as useState2
 } from "react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/ui/WorkspaceFileManagerIconGrid.tsx
+import { cn as cn3 } from "@tutti-os/ui-system";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+
+// src/ui/WorkspaceFileEntryIcon.tsx
+import {
+  FileCodeIcon,
+  FileTextIcon,
+  FolderFilledIcon,
+  ImageFileIcon,
+  LoadingIcon,
+  VideoFileIcon,
+  cn as cn2
+} from "@tutti-os/ui-system";
+
+// src/ui/workspaceFileEntryIconPolicy.ts
+function shouldResolveWorkspaceFileEntryIcon(entry) {
+  if (isWorkspaceApplicationBundle(entry)) {
+    return true;
+  }
+  return entry.kind === "file" && resolveWorkspaceFileVisualKind(entry) === "image";
+}
+function isWorkspaceApplicationBundle(entry) {
+  return entry.name.trim().toLowerCase().endsWith(".app");
+}
+function resolveWorkspaceFileEntryIconCacheKey(entry) {
+  return `${entry.path}:${entry.mtimeMs ?? 0}`;
+}
+
+// src/ui/WorkspaceFileEntryIcon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function WorkspaceFileEntryIcon({
+  entry,
+  frameClassName,
+  iconClassName = "size-4",
+  iconUrlByCacheKey,
+  isEnteringDirectory = false
+}) {
+  const visualKind = resolveWorkspaceFileVisualKind(entry);
+  const isAppBundle = isWorkspaceApplicationBundle(entry);
+  const iconUrl = iconUrlByCacheKey?.get(resolveWorkspaceFileEntryIconCacheKey(entry)) ?? null;
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: cn2(
+        "grid flex-none place-items-center overflow-hidden",
+        frameClassName,
+        isEnteringDirectory ? "text-[var(--text-tertiary)]" : entryIconColorClassName(visualKind, isAppBundle)
+      ),
+      children: isEnteringDirectory ? /* @__PURE__ */ jsx2(LoadingIcon, { className: iconClassName + " animate-spin" }) : iconUrl ? /* @__PURE__ */ jsx2(
+        "img",
+        {
+          alt: "",
+          className: cn2(iconClassName, "rounded-[4px] object-contain"),
+          draggable: false,
+          src: iconUrl
+        }
+      ) : /* @__PURE__ */ jsx2(
+        DefaultEntryIcon,
+        {
+          entry,
+          iconClassName,
+          visualKind
+        }
+      )
+    }
+  );
+}
+function DefaultEntryIcon({
+  entry,
+  iconClassName,
+  visualKind
+}) {
+  if (isWorkspaceApplicationBundle(entry)) {
+    return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+  }
+  switch (visualKind) {
+    case "directory":
+      return /* @__PURE__ */ jsx2(FolderFilledIcon, { className: iconClassName });
+    case "image":
+      return /* @__PURE__ */ jsx2(ImageFileIcon, { className: iconClassName });
+    case "video":
+      return /* @__PURE__ */ jsx2(VideoFileIcon, { className: iconClassName });
+    case "markdown":
+    case "document":
+      return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+    case "code":
+      return /* @__PURE__ */ jsx2(FileCodeIcon, { className: iconClassName });
+    case "binary":
+      return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+    default:
+      return /* @__PURE__ */ jsx2(FileTextIcon, { className: iconClassName });
+  }
+}
+function entryIconColorClassName(visualKind, isAppBundle) {
+  if (isAppBundle) {
+    return "text-[var(--text-tertiary)]";
+  }
+  return visualKind === "directory" ? "text-[var(--rich-text-mention-file)]" : "text-[var(--text-tertiary)]";
+}
+
+// src/ui/workspaceFileManagerIconGridLayout.ts
+var workspaceFileManagerIconGridIconSizePx = 52;
+var workspaceFileManagerIconGridTileMinWidthPx = 108;
+var workspaceFileManagerIconGridTileMaxWidthPx = 120;
+var workspaceFileManagerIconGridLayout = {
+  iconSizePx: workspaceFileManagerIconGridIconSizePx,
+  tileMaxWidthPx: workspaceFileManagerIconGridTileMaxWidthPx,
+  tileMinWidthPx: workspaceFileManagerIconGridTileMinWidthPx
+};
+function workspaceFileManagerIconGridIconClassName() {
+  return "size-[52px]";
+}
+function workspaceFileManagerIconGridFrameClassName() {
+  return "size-[60px]";
+}
+
+// src/ui/WorkspaceFileManagerIconGrid.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function WorkspaceFileManagerIconGrid({
+  contextMenuEntryPath,
+  copy,
+  draggable,
+  entries,
+  iconUrlByCacheKey,
+  inlineRenameEntryPath,
+  inlineRenameValidation,
+  isRenaming,
+  moveDragActive,
+  moveDragPreviewEntryPath,
+  moveDragTargetEntryPath,
+  pendingDirectoryPath,
+  selectedPath,
+  onCancelInlineRename,
+  onClearInlineRenameValidation,
+  onConfirmInlineRename,
+  onContextMenu,
+  onDragStart,
+  onEntryClick,
+  onEntryPointerDown
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "grid auto-rows-min content-start items-start gap-x-2 gap-y-6 px-4 py-4",
+      style: {
+        gridTemplateColumns: `repeat(auto-fill, minmax(${workspaceFileManagerIconGridLayout.tileMinWidthPx}px, 1fr))`
+      },
+      children: entries.map((entry) => /* @__PURE__ */ jsx3(
+        WorkspaceFileManagerIconTile,
+        {
+          contextMenuActive: contextMenuEntryPath === entry.path,
+          copy,
+          draggable,
+          entry,
+          iconUrlByCacheKey,
+          inlineRenameValidation: inlineRenameEntryPath === entry.path ? inlineRenameValidation : null,
+          isEnteringDirectory: pendingDirectoryPath === entry.path,
+          isInlineRenaming: inlineRenameEntryPath === entry.path,
+          isRenaming,
+          moveDragActive,
+          moveDragSource: moveDragPreviewEntryPath === entry.path,
+          moveDragTarget: moveDragTargetEntryPath === entry.path,
+          selected: selectedPath === entry.path,
+          onCancelInlineRename,
+          onClearInlineRenameValidation,
+          onConfirmInlineRename,
+          onContextMenu,
+          onDragStart,
+          onClick: onEntryClick,
+          onPointerDown: onEntryPointerDown
+        },
+        entry.path
+      ))
+    }
+  );
+}
+function WorkspaceFileManagerIconTile({
+  contextMenuActive,
+  copy,
+  draggable,
+  entry,
+  iconUrlByCacheKey,
+  inlineRenameValidation,
+  isEnteringDirectory,
+  isInlineRenaming,
+  isRenaming,
+  moveDragActive,
+  moveDragSource,
+  moveDragTarget,
+  selected,
+  onCancelInlineRename,
+  onClearInlineRenameValidation,
+  onConfirmInlineRename,
+  onContextMenu,
+  onDragStart,
+  onClick,
+  onPointerDown
+}) {
+  const buttonRef = useRef2(null);
+  const nameParts = splitWorkspaceFileName(entry.name);
+  useLayoutEffect2(() => {
+    if (!selected) {
+      return;
+    }
+    buttonRef.current?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [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",
+    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)]",
+    moveDragSource && "opacity-55",
+    moveDragTarget && "bg-[var(--accent-bg)] text-[var(--text-primary)] outline outline-1 -outline-offset-1 outline-[var(--border-focus)]"
+  );
+  const iconGraphic = /* @__PURE__ */ jsx3(
+    WorkspaceFileEntryIcon,
+    {
+      entry,
+      frameClassName: workspaceFileManagerIconGridFrameClassName(),
+      iconClassName: workspaceFileManagerIconGridIconClassName(),
+      iconUrlByCacheKey,
+      isEnteringDirectory
+    }
+  );
+  if (isInlineRenaming) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "aria-label": entry.name,
+        className: tileClassName,
+        "data-workspace-file-entry-path": entry.path,
+        children: [
+          iconGraphic,
+          /* @__PURE__ */ jsx3(
+            IconTileRenameInput,
+            {
+              copy,
+              entry,
+              inlineRenameValidation,
+              isRenaming,
+              onCancelInlineRename,
+              onClearInlineRenameValidation,
+              onConfirmInlineRename
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      "aria-label": entry.name,
+      className: tileClassName,
+      "data-workspace-file-entry-path": entry.path,
+      draggable,
+      ref: buttonRef,
+      type: "button",
+      onClick: () => {
+        onClick(entry);
+      },
+      onContextMenu: (event) => {
+        onContextMenu(event, entry);
+      },
+      onDragStart: (event) => {
+        if (!draggable) {
+          event.preventDefault();
+          return;
+        }
+        onDragStart?.(entry, event.dataTransfer);
+      },
+      onPointerDown: (event) => {
+        onPointerDown(entry, event);
+      },
+      children: [
+        iconGraphic,
+        /* @__PURE__ */ jsxs2("span", { className: "line-clamp-2 w-full break-all text-[13px] leading-[18px] text-[var(--text-primary)]", children: [
+          /* @__PURE__ */ jsx3("span", { children: nameParts.start }),
+          nameParts.end ? /* @__PURE__ */ jsx3("span", { children: nameParts.end }) : null
+        ] })
+      ]
+    }
+  );
+}
+function IconTileRenameInput({
+  copy,
+  entry,
+  inlineRenameValidation,
+  isRenaming,
+  onCancelInlineRename,
+  onClearInlineRenameValidation,
+  onConfirmInlineRename
+}) {
+  const nameParts = splitWorkspaceFileName(entry.name);
+  const hasFileExtension = nameParts.end.length > 0 && nameParts.end.startsWith(".");
+  const inputRef = useRef2(null);
+  useLayoutEffect2(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    input.focus();
+    if (hasFileExtension) {
+      input.setSelectionRange(0, nameParts.start.length);
+    } else {
+      input.select();
+    }
+  }, [hasFileExtension, nameParts.start.length]);
+  const validationMessage = inlineRenameValidation === "required" ? copy.t("createNameRequired") : inlineRenameValidation === "invalid" ? copy.t("createNameInvalid") : null;
+  return /* @__PURE__ */ jsxs2("span", { className: "flex w-full min-w-0 flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        "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",
+          inlineRenameValidation !== null && "border-[var(--state-danger)]"
+        ),
+        defaultValue: entry.name,
+        disabled: isRenaming,
+        ref: inputRef,
+        onBlur: (event) => {
+          void onConfirmInlineRename(event.currentTarget.value);
+        },
+        onChange: () => {
+          onClearInlineRenameValidation();
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            void onConfirmInlineRename(event.currentTarget.value);
+            return;
+          }
+          if (event.key === "Escape") {
+            event.preventDefault();
+            onCancelInlineRename();
+          }
+        }
+      }
+    ),
+    validationMessage ? /* @__PURE__ */ jsx3("span", { className: "text-[10px] leading-3 text-[var(--state-danger)]", children: validationMessage }) : null
+  ] });
+}
+
+// src/ui/WorkspaceFileManagerPanels.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var workspaceFileManagerTableGridClassName = "grid-cols-[minmax(0,_1fr)_148px_96px]";
 var workspaceFileManagerTableGridStyle = {
   gridTemplateColumns: "minmax(0, 1fr) 148px 96px"
@@ -939,9 +1290,11 @@ function WorkspaceFileManagerPanels({
   entryDragMode,
   entrySelectionEnabled = true,
   copy,
+  iconUrlByCacheKey,
   inlineRenameEntryPath,
   inlineRenameValidation,
   isRenaming,
+  layoutMode,
   pendingDirectoryPath,
   previewState,
   selectedEntry,
@@ -958,21 +1311,21 @@ function WorkspaceFileManagerPanels({
   onOpenEntry,
   onSelect
 }) {
-  const { isStacked, rootRef } = useWorkspaceFileManagerStackedLayout(
+  const { rootRef } = useWorkspaceFileManagerStackedLayout(
     workspaceFileManagerStackedBreakpoint
   );
-  const previewResizeRef = useRef2(null);
+  const previewResizeRef = useRef3(null);
   const [previewPaneWidth, setPreviewPaneWidth] = useState2(
     workspaceFileManagerPreviewDefaultWidth
   );
   const [moveDragPreview, setMoveDragPreview] = useState2(null);
-  const lastEntryClickRef = useRef2(
+  const lastEntryClickRef = useRef3(
     null
   );
-  const moveDragAutoScrollRef = useRef2(null);
-  const moveDragRef = useRef2(null);
-  const suppressNextClickRef = useRef2(false);
-  const entriesRef = useRef2(state.entries);
+  const moveDragAutoScrollRef = useRef3(null);
+  const moveDragRef = useRef3(null);
+  const suppressNextClickRef = useRef3(false);
+  const entriesRef = useRef3(state.entries);
   const nativeEntryDragEnabled = onEntryDragStart !== void 0 && (entryDragMode === "external" || entryDragMode === void 0 && !canMove);
   const internalMoveEnabled = canMove && !nativeEntryDragEnabled;
   const stopMoveDragAutoScroll = useCallback2(() => {
@@ -1162,9 +1515,11 @@ function WorkspaceFileManagerPanels({
     stopMoveDragAutoScroll,
     updateMoveDragAutoScroll
   ]);
-  const previewPaneClassName = isStacked ? "min-w-0 border-t border-[var(--border-1)]" : "min-w-[220px] border-l border-[var(--border-1)]";
-  const tableGridClassName = isStacked ? workspaceFileManagerCompactTableGridClassName : workspaceFileManagerTableGridClassName;
-  const tableGridStyle = isStacked ? workspaceFileManagerCompactTableGridStyle : workspaceFileManagerTableGridStyle;
+  const showPreviewPanel = false;
+  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;
+  const tableGridStyle = useStackedPreview ? workspaceFileManagerCompactTableGridStyle : workspaceFileManagerTableGridStyle;
   const tableCellPaddingClassName = "px-4";
   const clampPreviewPaneWidth = useCallback2(
     (width, maxWidth) => {
@@ -1176,9 +1531,9 @@ function WorkspaceFileManagerPanels({
     },
     []
   );
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const element = rootRef.current;
-    if (!element || isStacked) {
+    if (!element || useStackedPreview || !showPreviewPanel) {
       return;
     }
     const publishLayout = () => {
@@ -1203,7 +1558,7 @@ function WorkspaceFileManagerPanels({
     return () => {
       observer.disconnect();
     };
-  }, [clampPreviewPaneWidth, isStacked, rootRef]);
+  }, [clampPreviewPaneWidth, rootRef, showPreviewPanel, useStackedPreview]);
   const handlePreviewResizePointerDown = useCallback2(
     (event) => {
       if (event.button !== 0) {
@@ -1250,49 +1605,74 @@ function WorkspaceFileManagerPanels({
     },
     []
   );
-  const tablePanel = /* @__PURE__ */ jsx2(
+  const tablePanel = /* @__PURE__ */ jsx4(
     "div",
     {
-      className: cn2(
+      className: cn4(
         "flex min-h-0 min-w-0 flex-col overflow-hidden",
-        isStacked ? "h-[44%] max-h-[48%] flex-none" : "flex-1"
+        useStackedPreview ? "h-[44%] max-h-[48%] flex-none" : "flex-1"
       ),
       onContextMenu: handleTablePanelContextMenu,
-      children: state.error ? /* @__PURE__ */ jsx2(FeedbackState, { message: state.error }) : state.isLoading && state.entries.length === 0 ? /* @__PURE__ */ jsx2(FeedbackState, { message: copy.t("loading") }) : state.entries.length === 0 ? /* @__PURE__ */ jsx2(FeedbackState, { message: copy.t("emptyDirectory") }) : /* @__PURE__ */ jsx2(ScrollArea, { className: "min-h-0 flex-1 [&_[data-orientation=vertical][data-slot=scroll-area-scrollbar]]:opacity-100", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxs2(
+      children: state.error ? /* @__PURE__ */ jsx4(FeedbackState, { message: state.error }) : state.isLoading && state.entries.length === 0 ? /* @__PURE__ */ jsx4(FeedbackState, { message: copy.t("loading") }) : state.entries.length === 0 ? /* @__PURE__ */ jsx4(FeedbackState, { message: copy.t("emptyDirectory") }) : /* @__PURE__ */ jsx4(ScrollArea, { className: "min-h-0 flex-1 [&_[data-orientation=vertical][data-slot=scroll-area-scrollbar]]:opacity-100", children: layoutMode === "icon" ? /* @__PURE__ */ jsx4(
+        WorkspaceFileManagerIconGrid,
+        {
+          contextMenuEntryPath,
+          copy,
+          draggable: nativeEntryDragEnabled,
+          entries: state.entries,
+          iconUrlByCacheKey,
+          inlineRenameEntryPath,
+          inlineRenameValidation,
+          isRenaming,
+          moveDragActive: moveDragPreview !== null,
+          moveDragPreviewEntryPath: moveDragPreview?.entry.path ?? null,
+          moveDragTargetEntryPath: moveDragPreview?.targetDirectoryPath ?? null,
+          pendingDirectoryPath,
+          selectedPath,
+          onCancelInlineRename,
+          onClearInlineRenameValidation,
+          onConfirmInlineRename,
+          onContextMenu: onEntryContextMenu,
+          onDragStart: onEntryDragStart,
+          onEntryClick: handleEntryClick,
+          onEntryPointerDown: handleEntryPointerDown
+        }
+      ) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsxs3(
           "div",
           {
-            className: cn2(
+            className: cn4(
               "grid h-9 min-h-9 items-center gap-x-6 border-b border-[var(--border-1)] text-xs font-normal text-[var(--text-secondary)]",
               tableGridClassName
             ),
             style: tableGridStyle,
             children: [
-              /* @__PURE__ */ jsx2("span", { className: tableCellPaddingClassName, children: copy.t("nameLabel") }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4("span", { className: tableCellPaddingClassName, children: copy.t("nameLabel") }),
+              /* @__PURE__ */ jsx4(
                 "span",
                 {
-                  className: cn2("whitespace-nowrap", tableCellPaddingClassName),
+                  className: cn4("whitespace-nowrap", tableCellPaddingClassName),
                   children: copy.t("modifiedLabel")
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "span",
                 {
-                  className: cn2("whitespace-nowrap", tableCellPaddingClassName),
+                  className: cn4("whitespace-nowrap", tableCellPaddingClassName),
                   children: copy.t("sizeLabel")
                 }
               )
             ]
           }
         ),
-        state.entries.map((entry) => /* @__PURE__ */ jsx2(
+        state.entries.map((entry) => /* @__PURE__ */ jsx4(
           EntryRow,
           {
             contextMenuActive: contextMenuEntryPath === entry.path,
             copy,
             dateLocale,
             entry,
+            iconUrlByCacheKey,
             canMove: internalMoveEnabled,
             draggable: nativeEntryDragEnabled,
             gridClassName: tableGridClassName,
@@ -1319,16 +1699,16 @@ function WorkspaceFileManagerPanels({
       ] }) })
     }
   );
-  const previewPanel = /* @__PURE__ */ jsx2(
+  const previewPanel = showPreviewPanel ? /* @__PURE__ */ jsx4(
     "aside",
     {
-      className: cn2(
+      className: cn4(
         "relative flex h-full min-h-0 flex-col gap-[14px] overflow-auto p-4",
-        isStacked ? "max-h-[44%] flex-none" : "flex-none",
+        useStackedPreview ? "max-h-[44%] flex-none" : "flex-none",
         previewPaneClassName
       ),
-      style: isStacked ? void 0 : { width: previewPaneWidth },
-      children: /* @__PURE__ */ jsx2(
+      style: useStackedPreview ? void 0 : { width: previewPaneWidth },
+      children: /* @__PURE__ */ jsx4(
         PreviewPane,
         {
           copy,
@@ -1338,23 +1718,23 @@ function WorkspaceFileManagerPanels({
         }
       )
     }
-  );
-  return /* @__PURE__ */ jsxs2(
+  ) : null;
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "relative min-h-0 min-w-0 flex-1 overflow-hidden",
       ref: rootRef,
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "div",
           {
-            className: cn2(
+            className: cn4(
               "h-full min-h-0 min-w-0 bg-transparent",
-              isStacked ? "flex flex-col gap-3" : "flex"
+              useStackedPreview ? "flex flex-col gap-3" : "flex"
             ),
             children: [
               tablePanel,
-              isStacked ? null : /* @__PURE__ */ jsx2(
+              showPreviewPanel && !useStackedPreview ? /* @__PURE__ */ jsx4(
                 "div",
                 {
                   "aria-orientation": "vertical",
@@ -1368,31 +1748,37 @@ function WorkspaceFileManagerPanels({
                   onPointerMove: handlePreviewResizePointerMove,
                   onPointerUp: handlePreviewResizePointerEnd
                 }
-              ),
+              ) : null,
               previewPanel
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             "aria-hidden": "true",
-            className: cn2(
+            className: cn4(
               "pointer-events-none absolute inset-0 grid place-items-center rounded-[var(--workbench-window-radius,8px)] border border-dashed border-[var(--border-focus)] bg-[var(--accent-bg)] opacity-0 transition-opacity duration-150 ease-out",
               showDropOverlay && "opacity-100"
             ),
-            children: /* @__PURE__ */ jsx2("div", { className: "rounded-lg border border-[var(--border-1)] bg-[var(--background-fronted)] px-5 py-3 text-sm font-normal text-[var(--text-primary)] shadow-panel", children: copy.t("dropToImportLabel") })
+            children: /* @__PURE__ */ jsx4("div", { className: "rounded-lg border border-[var(--border-1)] bg-[var(--background-fronted)] px-5 py-3 text-sm font-normal text-[var(--text-primary)] shadow-panel", children: copy.t("dropToImportLabel") })
           }
         ),
-        moveDragPreview ? /* @__PURE__ */ jsx2(MoveDragPreview, { preview: moveDragPreview }) : null
+        moveDragPreview ? /* @__PURE__ */ jsx4(
+          MoveDragPreview,
+          {
+            iconUrlByCacheKey,
+            preview: moveDragPreview
+          }
+        ) : null
       ]
     }
   );
 }
 function useWorkspaceFileManagerStackedLayout(breakpoint) {
-  const rootRef = useRef2(null);
+  const rootRef = useRef3(null);
   const [isStacked, setIsStacked] = useState2(false);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const element = rootRef.current;
     if (!element) {
       return;
@@ -1427,6 +1813,7 @@ function EntryRow({
   entry,
   gridClassName,
   gridStyle,
+  iconUrlByCacheKey,
   inlineRenameValidation,
   isEnteringDirectory,
   isInlineRenaming,
@@ -1444,9 +1831,9 @@ function EntryRow({
   onClick,
   onPointerDown
 }) {
-  const buttonRowRef = useRef2(null);
-  const divRowRef = useRef2(null);
-  useLayoutEffect2(() => {
+  const buttonRowRef = useRef3(null);
+  const divRowRef = useRef3(null);
+  useLayoutEffect3(() => {
     if (!selected) {
       return;
     }
@@ -1455,7 +1842,7 @@ function EntryRow({
       inline: "nearest"
     });
   }, [selected]);
-  const rowClassName = cn2(
+  const rowClassName = cn4(
     "grid min-h-10 w-full items-center gap-x-6 border-b border-[var(--border-1)] px-0 text-left transition-colors",
     gridClassName,
     isInlineRenaming ? "cursor-default" : "cursor-pointer hover:bg-transparency-block",
@@ -1475,11 +1862,12 @@ function EntryRow({
       onContextMenu(event, entry);
     }
   };
-  const nameCell = /* @__PURE__ */ jsx2("span", { className: tableCellPaddingClassName, children: /* @__PURE__ */ jsx2(
+  const nameCell = /* @__PURE__ */ jsx4("span", { className: tableCellPaddingClassName, children: /* @__PURE__ */ jsx4(
     EntryNameCell,
     {
       copy,
       entry,
+      iconUrlByCacheKey,
       inlineRenameValidation,
       isEnteringDirectory,
       isInlineRenaming,
@@ -1489,20 +1877,20 @@ function EntryRow({
       onConfirmInlineRename
     }
   ) });
-  const modifiedCell = /* @__PURE__ */ jsx2(
+  const modifiedCell = /* @__PURE__ */ jsx4(
     "span",
     {
-      className: cn2(
+      className: cn4(
         "truncate text-xs text-[var(--text-secondary)]",
         tableCellPaddingClassName
       ),
       children: formatWorkspaceFileModifiedTime(entry.mtimeMs, dateLocale)
     }
   );
-  const sizeCell = /* @__PURE__ */ jsx2(
+  const sizeCell = /* @__PURE__ */ jsx4(
     "span",
     {
-      className: cn2(
+      className: cn4(
         "truncate text-xs text-[var(--text-secondary)]",
         tableCellPaddingClassName
       ),
@@ -1510,13 +1898,13 @@ function EntryRow({
     }
   );
   if (isInlineRenaming) {
-    return /* @__PURE__ */ jsxs2("div", { ...rowProps, ref: divRowRef, children: [
+    return /* @__PURE__ */ jsxs3("div", { ...rowProps, ref: divRowRef, children: [
       nameCell,
       modifiedCell,
       sizeCell
     ] });
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       ...rowProps,
@@ -1544,10 +1932,10 @@ function EntryRow({
   );
 }
 function MoveDragPreview({
+  iconUrlByCacheKey,
   preview
 }) {
-  const visualKind = resolveWorkspaceFileVisualKind(preview.entry);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       "aria-hidden": "true",
@@ -1558,17 +1946,16 @@ function MoveDragPreview({
         transform: "translate(12px, 12px)"
       },
       children: [
-        /* @__PURE__ */ jsx2(
-          "span",
+        /* @__PURE__ */ jsx4(
+          WorkspaceFileEntryIcon,
           {
-            className: cn2(
-              "grid size-[18px] flex-none place-items-center",
-              entryIconColorClassName(visualKind)
-            ),
-            children: /* @__PURE__ */ jsx2(EntryIcon, { visualKind })
+            entry: preview.entry,
+            frameClassName: "size-[18px]",
+            iconClassName: "size-4",
+            iconUrlByCacheKey
           }
         ),
-        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: preview.entry.name })
+        /* @__PURE__ */ jsx4("span", { className: "min-w-0 truncate", children: preview.entry.name })
       ]
     }
   );
@@ -1611,6 +1998,7 @@ function canMoveEntryToDirectory(movedEntry, targetEntry) {
 function EntryNameCell({
   copy,
   entry,
+  iconUrlByCacheKey,
   inlineRenameValidation = null,
   isEnteringDirectory = false,
   isInlineRenaming = false,
@@ -1619,12 +2007,11 @@ function EntryNameCell({
   onClearInlineRenameValidation,
   onConfirmInlineRename
 }) {
-  const visualKind = resolveWorkspaceFileVisualKind(entry);
   const nameParts = splitWorkspaceFileName(entry.name);
   const hasFileExtension = nameParts.end.length > 0 && nameParts.end.startsWith(".");
   const [name, setName] = useState2(entry.name);
-  const inputRef = useRef2(null);
-  const skipBlurRef = useRef2(false);
+  const inputRef = useRef3(null);
+  const skipBlurRef = useRef3(false);
   useEffect2(() => {
     if (!isInlineRenaming) {
       return;
@@ -1632,7 +2019,7 @@ function EntryNameCell({
     setName(entry.name);
     skipBlurRef.current = false;
   }, [entry.name, entry.path, isInlineRenaming]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!isInlineRenaming) {
       return;
     }
@@ -1655,24 +2042,23 @@ function EntryNameCell({
     }
   }, [name, onConfirmInlineRename]);
   if (isInlineRenaming) {
-    return /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx2(
-        "span",
+    return /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(
+        WorkspaceFileEntryIcon,
         {
-          className: cn2(
-            "grid size-[18px] flex-none place-items-center",
-            entryIconColorClassName(visualKind)
-          ),
-          children: /* @__PURE__ */ jsx2(EntryIcon, { visualKind })
+          entry,
+          frameClassName: "size-[18px]",
+          iconClassName: "size-4",
+          iconUrlByCacheKey
         }
       ),
-      /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx4(
           "input",
           {
             "aria-invalid": inlineRenameValidation !== null,
             "aria-label": copy.t("renameLabel"),
-            className: cn2(
+            className: cn4(
               "min-w-0 max-w-full rounded-md border border-transparent bg-[var(--transparency-block)] px-1.5 py-0.5 text-sm text-[var(--text-primary)] outline-none transition-colors duration-200 selection:bg-[var(--transparency-active)] selection:text-[var(--text-primary)] hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100",
               inlineRenameValidation !== null && "border-[var(--state-danger)]"
             ),
@@ -1714,50 +2100,47 @@ function EntryNameCell({
             }
           }
         ),
-        validationMessage ? /* @__PURE__ */ jsx2("span", { className: "text-xs text-[var(--state-danger)]", children: validationMessage }) : null
+        validationMessage ? /* @__PURE__ */ jsx4("span", { className: "text-xs text-[var(--state-danger)]", children: validationMessage }) : null
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
-    /* @__PURE__ */ jsx2(
-      "span",
+  return /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx4(
+      WorkspaceFileEntryIcon,
       {
-        className: cn2(
-          "grid size-[18px] flex-none place-items-center",
-          isEnteringDirectory ? "text-[var(--text-tertiary)]" : entryIconColorClassName(visualKind)
-        ),
-        children: isEnteringDirectory ? /* @__PURE__ */ jsx2(LoadingIcon, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx2(EntryIcon, { visualKind })
+        entry,
+        frameClassName: "size-[18px]",
+        iconClassName: "size-4",
+        iconUrlByCacheKey,
+        isEnteringDirectory
       }
     ),
-    /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 max-w-full overflow-hidden whitespace-nowrap text-sm", children: [
-      /* @__PURE__ */ jsx2("span", { className: "min-w-0 overflow-hidden text-ellipsis", children: nameParts.start }),
-      nameParts.end ? /* @__PURE__ */ jsx2("span", { className: "flex-none overflow-hidden text-ellipsis", children: nameParts.end }) : null
+    /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 max-w-full overflow-hidden whitespace-nowrap text-sm", children: [
+      /* @__PURE__ */ jsx4("span", { className: "min-w-0 overflow-hidden text-ellipsis", children: nameParts.start }),
+      nameParts.end ? /* @__PURE__ */ jsx4("span", { className: "flex-none overflow-hidden text-ellipsis", children: nameParts.end }) : null
     ] })
   ] });
 }
-function entryIconColorClassName(visualKind) {
-  return visualKind === "directory" ? "text-[var(--rich-text-mention-file)]" : "text-[var(--text-tertiary)]";
-}
 function EntryIcon({
   className = "size-4",
   visualKind
 }) {
   switch (visualKind) {
     case "directory":
-      return /* @__PURE__ */ jsx2(FolderFilledIcon, { className });
+      return /* @__PURE__ */ jsx4(FolderFilledIcon2, { className });
     case "image":
-      return /* @__PURE__ */ jsx2(ImageFileIcon, { className });
+      return /* @__PURE__ */ jsx4(ImageFileIcon2, { className });
     case "video":
-      return /* @__PURE__ */ jsx2(VideoFileIcon, { className });
+      return /* @__PURE__ */ jsx4(VideoFileIcon2, { className });
     case "markdown":
     case "document":
-      return /* @__PURE__ */ jsx2(FileTextIcon, { className });
+      return /* @__PURE__ */ jsx4(FileTextIcon2, { className });
     case "code":
-      return /* @__PURE__ */ jsx2(FileCodeIcon, { className });
+      return /* @__PURE__ */ jsx4(FileCodeIcon2, { className });
     case "binary":
-      return /* @__PURE__ */ jsx2(FileTextIcon, { className });
+      return /* @__PURE__ */ jsx4(FileTextIcon2, { className });
     default:
-      return /* @__PURE__ */ jsx2(FileTextIcon, { className });
+      return /* @__PURE__ */ jsx4(FileTextIcon2, { className });
   }
 }
 function PreviewPane({
@@ -1767,24 +2150,24 @@ function PreviewPane({
   previewState
 }) {
   if (!entry || previewState.status === "empty") {
-    return /* @__PURE__ */ jsx2("div", { className: "grid h-full min-h-[180px] place-items-center overflow-hidden p-8 text-center text-sm leading-5 text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx2("span", { className: "max-w-[24ch] [overflow-wrap:anywhere]", children: copy.t("previewEmptyLabel") }) });
+    return /* @__PURE__ */ jsx4("div", { className: "grid h-full min-h-[180px] place-items-center overflow-hidden p-8 text-center text-sm leading-5 text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx4("span", { className: "max-w-[24ch] [overflow-wrap:anywhere]", children: copy.t("previewEmptyLabel") }) });
   }
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(PreviewSurface, { copy, previewState }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-[14px]", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-[3px]", children: [
-        /* @__PURE__ */ jsx2("strong", { className: "min-w-0 truncate text-[15px] font-semibold text-[var(--text-primary)]", children: entry.name }),
-        /* @__PURE__ */ jsx2("p", { className: "min-w-0 truncate text-xs text-[var(--text-secondary)]", children: entry.path })
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(PreviewSurface, { copy, previewState }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-[14px]", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-col gap-[3px]", children: [
+        /* @__PURE__ */ jsx4("strong", { className: "min-w-0 truncate text-[15px] font-semibold text-[var(--text-primary)]", children: entry.name }),
+        /* @__PURE__ */ jsx4("p", { className: "min-w-0 truncate text-xs text-[var(--text-secondary)]", children: entry.path })
       ] }),
-      /* @__PURE__ */ jsxs2("dl", { className: "border-t border-[var(--border-1)]", children: [
-        /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs3("dl", { className: "border-t border-[var(--border-1)]", children: [
+        /* @__PURE__ */ jsx4(
           PreviewDetail,
           {
             label: copy.t("modifiedLabel"),
             value: formatWorkspaceFileModifiedTime(entry.mtimeMs, dateLocale)
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(
           PreviewDetail,
           {
             label: copy.t("sizeLabel"),
@@ -1799,7 +2182,7 @@ function PreviewSurface({
   copy,
   previewState
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     SharedWorkspaceFilePreviewSurface,
     {
       directoryMessage: copy.t("previewDirectoryLabel"),
@@ -1807,10 +2190,10 @@ function PreviewSurface({
       frameClassName: "flex h-60 min-h-60 max-h-60 items-center justify-center overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--transparency-block)]",
       imageAlt: (entry) => entry.name,
       imageFrameClassName: "p-4",
-      loadingIndicator: /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-11 place-items-center rounded-lg bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx2(LoadingIcon, { className: "size-4 animate-spin" }) }),
+      loadingIndicator: /* @__PURE__ */ jsx4("span", { className: "mx-auto grid size-11 place-items-center rounded-lg bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx4(LoadingIcon2, { className: "size-4 animate-spin" }) }),
       loadingMessage: copy.t("previewLoadingLabel"),
       messageClassName: "max-w-[24ch] [overflow-wrap:anywhere]",
-      renderIcon: (entry) => /* @__PURE__ */ jsx2(
+      renderIcon: (entry) => /* @__PURE__ */ jsx4(
         EntryIcon,
         {
           className: "mx-auto size-7",
@@ -1832,20 +2215,20 @@ function PreviewDetail({
   label,
   value
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "@max-[600px]/workspace-file-manager:grid-cols-1 @max-[600px]/workspace-file-manager:gap-0.5 grid gap-2.5 border-b border-[var(--border-1)] py-2.5 text-xs",
       style: workspaceFileManagerPreviewDetailGridStyle,
       children: [
-        /* @__PURE__ */ jsx2("dt", { className: "truncate text-[var(--text-secondary)]", children: label }),
-        /* @__PURE__ */ jsx2("dd", { className: "@max-[600px]/workspace-file-manager:text-left truncate text-right text-[var(--text-primary)]", children: value })
+        /* @__PURE__ */ jsx4("dt", { className: "truncate text-[var(--text-secondary)]", children: label }),
+        /* @__PURE__ */ jsx4("dd", { className: "@max-[600px]/workspace-file-manager:text-left truncate text-right text-[var(--text-primary)]", children: value })
       ]
     }
   );
 }
 function FeedbackState({ message }) {
-  return /* @__PURE__ */ jsx2("div", { className: "grid min-h-0 flex-1 place-items-center p-6 text-center text-sm text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx2("span", { className: "max-w-[34ch] [overflow-wrap:anywhere]", children: message }) });
+  return /* @__PURE__ */ jsx4("div", { className: "grid min-h-0 flex-1 place-items-center p-6 text-center text-sm text-[var(--text-tertiary)]", children: /* @__PURE__ */ jsx4("span", { className: "max-w-[34ch] [overflow-wrap:anywhere]", children: message }) });
 }
 function hasFileDragPayload(dataTransfer) {
   return Array.from(dataTransfer.types).includes("Files");
@@ -1856,12 +2239,14 @@ import {
   ArrowLeftIcon,
   ArrowRightIcon as ArrowRightIcon2,
   Button as Button2,
-  LoadingIcon as LoadingIcon2,
+  GridHorizontalLinedIcon,
+  LayoutMenuIcon,
+  LoadingIcon as LoadingIcon3,
   RefreshIcon,
-  cn as cn3
+  cn as cn5
 } from "@tutti-os/ui-system";
 import { useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function WorkspaceFileManagerToolbar({
   breadcrumbs,
   canGoBack,
@@ -1871,8 +2256,10 @@ function WorkspaceFileManagerToolbar({
   isBusy,
   isLoading,
   isMutating,
+  layoutMode,
   onGoBack,
   onGoForward,
+  onLayoutModeChange,
   onLoadDirectory,
   onRefresh
 }) {
@@ -1881,34 +2268,34 @@ function WorkspaceFileManagerToolbar({
     setRefreshAnimationKey((currentKey) => currentKey + 1);
     onRefresh();
   };
-  return /* @__PURE__ */ jsxs3("header", { className: "@max-[600px]/workspace-file-manager:flex-nowrap flex h-10 min-h-10 w-full min-w-0 items-center gap-2 border-b border-[var(--border-1)] px-2 py-1", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("header", { className: "@max-[600px]/workspace-file-manager:flex-nowrap flex h-10 min-h-10 w-full min-w-0 items-center gap-2 border-b border-[var(--border-1)] px-2 py-1", children: [
+    /* @__PURE__ */ jsx5(
       ToolbarIconButton,
       {
         ariaLabel: copy.t("backLabel"),
         disabled: !canGoBack || isLoading || isBusy,
         title: copy.t("backLabel"),
         onClick: onGoBack,
-        children: /* @__PURE__ */ jsx3(ArrowLeftIcon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx5(ArrowLeftIcon, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx5(
       ToolbarIconButton,
       {
         ariaLabel: copy.t("forwardLabel"),
         disabled: !canGoForward || isLoading || isBusy,
         title: copy.t("forwardLabel"),
         onClick: onGoForward,
-        children: /* @__PURE__ */ jsx3(ArrowRightIcon2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx5(ArrowRightIcon2, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx5(
       "nav",
       {
         "aria-label": currentDirectoryPath,
         className: "@max-[600px]/workspace-file-manager:flex-auto flex min-w-0 flex-1 overflow-hidden pr-2",
         "data-workspace-file-manager-path": "",
-        children: /* @__PURE__ */ jsx3("ol", { className: "flex min-w-0 max-w-full flex-1 items-center gap-2 overflow-hidden", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx5("ol", { className: "flex min-w-0 max-w-full flex-1 items-center gap-2 overflow-hidden", children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsx5(
           BreadcrumbButton,
           {
             active: index === breadcrumbs.length - 1,
@@ -1922,28 +2309,99 @@ function WorkspaceFileManagerToolbar({
         )) })
       }
     ),
-    /* @__PURE__ */ jsx3("div", { className: "@max-[600px]/workspace-file-manager:justify-end flex flex-none items-center gap-1.5", children: /* @__PURE__ */ jsxs3(
-      ToolbarActionButton,
-      {
-        disabled: isLoading || isMutating || isBusy,
-        onClick: handleRefresh,
-        children: [
-          isLoading ? /* @__PURE__ */ jsx3(LoadingIcon2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx3(
-            RefreshIcon,
-            {
-              className: cn3(
-                "size-4",
-                refreshAnimationKey > 0 && "motion-safe:animate-[spin_520ms_cubic-bezier(0.4,0,0.2,1)_1_reverse]"
-              )
-            },
-            refreshAnimationKey
-          ),
-          /* @__PURE__ */ jsx3("span", { className: "@max-[600px]/workspace-file-manager:hidden", children: copy.t("refreshLabel") })
-        ]
-      }
-    ) })
+    /* @__PURE__ */ jsxs4("div", { className: "@max-[600px]/workspace-file-manager:justify-end flex flex-none items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx5(
+        LayoutModeToggle,
+        {
+          copy,
+          layoutMode,
+          onLayoutModeChange
+        }
+      ),
+      /* @__PURE__ */ jsxs4(
+        ToolbarActionButton,
+        {
+          disabled: isLoading || isMutating || isBusy,
+          onClick: handleRefresh,
+          children: [
+            isLoading ? /* @__PURE__ */ jsx5(LoadingIcon3, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx5(
+              RefreshIcon,
+              {
+                className: cn5(
+                  "size-4",
+                  refreshAnimationKey > 0 && "motion-safe:animate-[spin_520ms_cubic-bezier(0.4,0,0.2,1)_1_reverse]"
+                )
+              },
+              refreshAnimationKey
+            ),
+            /* @__PURE__ */ jsx5("span", { className: "@max-[600px]/workspace-file-manager:hidden", children: copy.t("refreshLabel") })
+          ]
+        }
+      )
+    ] })
   ] });
 }
+function LayoutModeToggle({
+  copy,
+  layoutMode,
+  onLayoutModeChange
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "flex items-center rounded-md border border-[var(--border-1)] bg-[var(--transparency-block)] p-0.5",
+      role: "group",
+      children: [
+        /* @__PURE__ */ jsx5(
+          LayoutModeButton,
+          {
+            active: layoutMode === "icon",
+            ariaLabel: copy.t("layoutIconViewLabel"),
+            onClick: () => {
+              onLayoutModeChange("icon");
+            },
+            children: /* @__PURE__ */ jsx5(LayoutMenuIcon, { className: "size-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          LayoutModeButton,
+          {
+            active: layoutMode === "list",
+            ariaLabel: copy.t("layoutListViewLabel"),
+            onClick: () => {
+              onLayoutModeChange("list");
+            },
+            children: /* @__PURE__ */ jsx5(GridHorizontalLinedIcon, { className: "size-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function LayoutModeButton({
+  active,
+  ariaLabel,
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx5(
+    Button2,
+    {
+      "aria-label": ariaLabel,
+      "aria-pressed": active,
+      className: cn5(
+        "size-6 min-w-6 rounded-[4px] p-0 text-[var(--text-secondary)]",
+        active && "bg-[var(--background-fronted)] text-[var(--text-primary)] shadow-sm"
+      ),
+      size: "icon-sm",
+      title: ariaLabel,
+      type: "button",
+      variant: "ghost",
+      onClick,
+      children
+    }
+  );
+}
 function ToolbarIconButton({
   ariaLabel,
   children,
@@ -1951,7 +2409,7 @@ function ToolbarIconButton({
   onClick,
   title
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Button2,
     {
       "aria-label": ariaLabel,
@@ -1971,7 +2429,7 @@ function ToolbarActionButton({
   disabled,
   onClick
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     Button2,
     {
       className: "@max-[600px]/workspace-file-manager:size-7 @max-[600px]/workspace-file-manager:min-w-7 @max-[600px]/workspace-file-manager:px-0 cursor-pointer",
@@ -1990,12 +2448,12 @@ function BreadcrumbButton({
   onClick,
   showSeparator
 }) {
-  return /* @__PURE__ */ jsxs3("li", { className: "flex min-w-0 items-center gap-2", children: [
-    showSeparator ? /* @__PURE__ */ jsx3("span", { className: "flex-none text-[var(--text-tertiary)]", children: "/" }) : null,
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("li", { className: "flex min-w-0 items-center gap-2", children: [
+    showSeparator ? /* @__PURE__ */ jsx5("span", { className: "flex-none text-[var(--text-tertiary)]", children: "/" }) : null,
+    /* @__PURE__ */ jsx5(
       "button",
       {
-        className: cn3(
+        className: cn5(
           "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap border-0 bg-transparent text-sm font-normal transition-colors",
           active ? "font-semibold text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
         ),
@@ -2007,6 +2465,116 @@ function BreadcrumbButton({
   ] });
 }
 
+// src/ui/useWorkspaceFileManagerLayoutMode.ts
+import { useCallback as useCallback3, useState as useState4 } from "react";
+
+// src/ui/workspaceFileManagerLayoutMode.ts
+var workspaceFileManagerLayoutModeStorageKey = "nextop.workspace-file-manager.layout-mode";
+function readWorkspaceFileManagerLayoutMode() {
+  if (typeof window === "undefined") {
+    return "list";
+  }
+  const stored = window.localStorage.getItem(
+    workspaceFileManagerLayoutModeStorageKey
+  );
+  return stored === "icon" ? "icon" : "list";
+}
+function writeWorkspaceFileManagerLayoutMode(layoutMode) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.localStorage.setItem(
+    workspaceFileManagerLayoutModeStorageKey,
+    layoutMode
+  );
+}
+
+// src/ui/useWorkspaceFileManagerLayoutMode.ts
+function useWorkspaceFileManagerLayoutMode() {
+  const [layoutMode, setLayoutModeState] = useState4(
+    readWorkspaceFileManagerLayoutMode
+  );
+  const setLayoutMode = useCallback3(
+    (nextLayoutMode) => {
+      setLayoutModeState(nextLayoutMode);
+      writeWorkspaceFileManagerLayoutMode(nextLayoutMode);
+    },
+    []
+  );
+  return { layoutMode, setLayoutMode };
+}
+
+// src/ui/useWorkspaceFileEntryIconUrls.ts
+import { useEffect as useEffect3, useMemo, useState as useState5 } 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] = useState5(() => /* @__PURE__ */ new Map());
+  const iconTargetSignature = useMemo(
+    () => buildIconTargetSignature(entries),
+    [entries]
+  );
+  useEffect3(() => {
+    if (!resolveEntryIconUrl) {
+      setIconUrlByCacheKey(
+        (current) => current.size === 0 ? current : /* @__PURE__ */ new Map()
+      );
+      return;
+    }
+    const targets = entries.filter(shouldResolveWorkspaceFileEntryIcon);
+    if (targets.length === 0) {
+      setIconUrlByCacheKey(
+        (current) => current.size === 0 ? current : /* @__PURE__ */ new Map()
+      );
+      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];
+        }
+      })
+    ).then((results) => {
+      if (cancelled) {
+        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;
+          }
+        }
+        if (current.size !== next.size) {
+          changed = true;
+        } else if (!changed) {
+          for (const cacheKey of current.keys()) {
+            if (!nextCacheKeys.has(cacheKey)) {
+              changed = true;
+              break;
+            }
+          }
+        }
+        return changed ? next : current;
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [entries, iconTargetSignature, resolveEntryIconUrl]);
+  return iconUrlByCacheKey;
+}
+
 // src/ui/workspaceFileManagerAnalytics.ts
 function shouldTrackDirectoryExpanded(input) {
   return normalizeDirectoryPath(input.currentDirectoryPath) !== normalizeDirectoryPath(input.nextDirectoryPath);
@@ -2174,7 +2742,7 @@ function useWorkspaceFileManagerContextMenuView(session) {
 }
 
 // src/ui/WorkspaceFileManager.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function WorkspaceFileManager({
   className,
   dateLocale,
@@ -2186,14 +2754,16 @@ function WorkspaceFileManager({
   onEntryDragStart,
   openInAppBrowserIcon,
   resolveOpenWithApplicationIcon,
+  resolveEntryIconUrl,
   hostOs = "linux",
   session,
   surface = "card"
 }) {
-  const rootRef = useRef3(null);
+  const rootRef = useRef4(null);
+  const { layoutMode, setLayoutMode } = useWorkspaceFileManagerLayoutMode();
   const rootView = useWorkspaceFileManagerRootView(session);
   const { state: panelsState, view: panelsView } = useWorkspaceFileManagerPanelsView(session);
-  useEffect3(() => {
+  useEffect4(() => {
     function handleCopyShortcut(event) {
       if (!(event.metaKey || event.ctrlKey) || event.key !== "c" || event.shiftKey) {
         return;
@@ -2222,7 +2792,7 @@ function WorkspaceFileManager({
       window.removeEventListener("keydown", handleCopyShortcut);
     };
   }, [onCopyEntry, panelsState, panelsView.selectedEntry, session]);
-  useEffect3(() => {
+  useEffect4(() => {
     function handleRenameShortcut(event) {
       if (event.key !== "Enter" || event.metaKey || event.ctrlKey || event.altKey) {
         return;
@@ -2248,7 +2818,7 @@ function WorkspaceFileManager({
       window.removeEventListener("keydown", handleRenameShortcut);
     };
   }, [panelsState, panelsView.selectedEntry, session]);
-  useEffect3(() => {
+  useEffect4(() => {
     function resetDropOverlay() {
       session.resetDragDepth();
     }
@@ -2331,10 +2901,10 @@ function WorkspaceFileManager({
       rootView.currentDirectoryPath
     );
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "section",
     {
-      className: cn4(
+      className: cn6(
         "@container/workspace-file-manager relative flex h-full min-h-0 w-full overflow-hidden text-[14px] text-[var(--text-primary)]",
         surface === "card" ? "rounded-lg border border-[var(--border-1)] bg-[var(--background-panel)]" : "rounded-none border-0 bg-transparent",
         className
@@ -2347,39 +2917,43 @@ function WorkspaceFileManager({
       onDrop: handleDrop,
       ref: rootRef,
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx6(
             WorkspaceFileManagerToolbarContainer,
             {
               i18n,
+              layoutMode,
               onDirectoryExpanded,
+              onLayoutModeChange: setLayoutMode,
               session
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               className: "@max-[600px]/workspace-file-manager:flex-col @max-[600px]/workspace-file-manager:gap-3 flex min-h-0 min-w-0 flex-1 overflow-hidden",
               style: {
                 "--workspace-file-manager-dialog-overlay-z-index": "20"
               },
-              children: /* @__PURE__ */ jsx4(
+              children: /* @__PURE__ */ jsx6(
                 WorkspaceFileManagerPanelsContainer,
                 {
                   dateLocale,
                   entryDragMode,
                   i18n,
+                  layoutMode,
                   onDirectoryExpanded,
                   onEntryDragStart,
                   onOpenContextMenu: openContextMenu,
+                  resolveEntryIconUrl,
                   session
                 }
               )
             }
           )
         ] }),
-        /* @__PURE__ */ jsx4(WorkspaceFileManagerDialogsContainer, { i18n, session }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx6(WorkspaceFileManagerDialogsContainer, { i18n, session }),
+        /* @__PURE__ */ jsx6(
           WorkspaceFileManagerContextMenuContainer,
           {
             hostOs,
@@ -2397,11 +2971,13 @@ function WorkspaceFileManager({
 }
 function WorkspaceFileManagerToolbarContainer({
   i18n,
+  layoutMode,
   onDirectoryExpanded,
+  onLayoutModeChange,
   session
 }) {
   const { view } = useWorkspaceFileManagerToolbarView(session, i18n);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     WorkspaceFileManagerToolbar,
     {
       breadcrumbs: view.breadcrumbs,
@@ -2412,12 +2988,14 @@ function WorkspaceFileManagerToolbarContainer({
       isBusy: view.isBusy,
       isLoading: view.isLoading,
       isMutating: view.isMutating,
+      layoutMode,
       onGoBack: () => {
         void session.goBack();
       },
       onGoForward: () => {
         void session.goForward();
       },
+      onLayoutModeChange,
       onLoadDirectory: (path) => {
         if (shouldTrackDirectoryExpanded({
           currentDirectoryPath: view.currentDirectoryPath,
@@ -2437,13 +3015,19 @@ function WorkspaceFileManagerPanelsContainer({
   dateLocale,
   entryDragMode,
   i18n,
+  layoutMode,
   onDirectoryExpanded,
   onEntryDragStart,
   onOpenContextMenu,
+  resolveEntryIconUrl,
   session
 }) {
   const { state, view } = useWorkspaceFileManagerPanelsView(session);
-  return /* @__PURE__ */ jsx4(
+  const iconUrlByCacheKey = useWorkspaceFileEntryIconUrls({
+    entries: state.entries,
+    resolveEntryIconUrl
+  });
+  return /* @__PURE__ */ jsx6(
     WorkspaceFileManagerPanels,
     {
       canMove: view.canMove,
@@ -2451,9 +3035,11 @@ function WorkspaceFileManagerPanelsContainer({
       copy: i18n,
       dateLocale,
       entryDragMode,
+      iconUrlByCacheKey,
       inlineRenameEntryPath: view.inlineRenameEntryPath,
       inlineRenameValidation: view.inlineRenameValidation,
       isRenaming: view.isRenaming,
+      layoutMode,
       pendingDirectoryPath: view.pendingDirectoryPath,
       previewState: view.previewState,
       selectedEntry: view.selectedEntry,
@@ -2498,8 +3084,8 @@ function WorkspaceFileManagerDialogsContainer({
   session
 }) {
   const { state, view } = useWorkspaceFileManagerDialogsView(session);
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(
       WorkspaceFileManagerCreateDialog,
       {
         busy: view.isBusy && state.busyAction === "create",
@@ -2516,7 +3102,7 @@ function WorkspaceFileManagerDialogsContainer({
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       WorkspaceFileManagerDeleteDialog,
       {
         busy: view.isDeleting,
@@ -2530,7 +3116,7 @@ function WorkspaceFileManagerDialogsContainer({
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       WorkspaceFileManagerImportConflictDialog,
       {
         busy: view.isImporting,
@@ -2544,7 +3130,7 @@ function WorkspaceFileManagerDialogsContainer({
         }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx6(
       WorkspaceFileManagerUnsupportedDialog,
       {
         copy: i18n,
@@ -2569,11 +3155,11 @@ function WorkspaceFileManagerContextMenuContainer({
   resolveOpenWithApplicationIcon,
   session
 }) {
-  const contextMenuRef = useRef3(null);
+  const contextMenuRef = useRef4(null);
   const { view } = useWorkspaceFileManagerContextMenuView(session);
-  const [openWithApplications, setOpenWithApplications] = useState4([]);
-  const [openWithLoading, setOpenWithLoading] = useState4(false);
-  useEffect3(() => {
+  const [openWithApplications, setOpenWithApplications] = useState6([]);
+  const [openWithLoading, setOpenWithLoading] = useState6(false);
+  useEffect4(() => {
     const entry = view.contextMenu?.entry;
     if (!entry || !view.showOpenWithAction) {
       return;
@@ -2608,7 +3194,7 @@ function WorkspaceFileManagerContextMenuContainer({
     isOpen: view.contextMenu !== null,
     session
   });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     WorkspaceFileManagerContextMenu,
     {
       busy: view.isBusy || view.isLoading || view.isMutating,
@@ -2735,7 +3321,7 @@ function WorkspaceFileManagerContextMenuContainer({
 }
 function useCloseContextMenuOnOutsideInteraction(input) {
   const { contextMenuRef, isOpen, session } = input;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isOpen) {
       return;
     }