s3kit 0.1.0

package/dist/react/index.js

@@ -0,0 +1,4315 @@
+// src/react/FileManager.tsx
+import { useEffect as useEffect2, useMemo, useState as useState2, useCallback, useRef } from "react";
+
+// src/client/client.ts
+function normalizeBasePath(basePath) {
+  if (!basePath) return "";
+  if (basePath === "/") return "";
+  return basePath.startsWith("/") ? basePath.replace(/\/+$/, "") : `/${basePath.replace(/\/+$/, "")}`;
+}
+function normalizeApiRootFromParts(baseUrl, basePath) {
+  const b = baseUrl.replace(/\/+$/, "");
+  const p = normalizeBasePath(basePath);
+  return p ? `${b}${p}` : b;
+}
+async function fetchJson(f, url, body) {
+  const res = await f(url, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(text || `Request failed: ${res.status}`);
+  }
+  if (res.status === 204) return void 0;
+  return await res.json();
+}
+function uploadWithXhr(upload, file, hooks) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(upload.method, upload.url);
+    for (const [k, v] of Object.entries(upload.headers ?? {})) {
+      xhr.setRequestHeader(k, v);
+    }
+    xhr.upload.onprogress = (evt) => {
+      hooks?.onUploadProgress?.({
+        path: upload.path,
+        loaded: evt.loaded,
+        total: evt.total
+      });
+    };
+    xhr.onload = async () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        await hooks?.onUploadComplete?.({ path: upload.path });
+        resolve();
+        return;
+      }
+      const responseText = xhr.responseText ? ` - ${xhr.responseText.slice(0, 200)}` : "";
+      const error = new Error(`Upload failed: ${xhr.status}${responseText}`);
+      await hooks?.onUploadError?.({ path: upload.path, error });
+      reject(error);
+    };
+    xhr.onerror = async () => {
+      const error = new Error("Upload failed: network error");
+      await hooks?.onUploadError?.({ path: upload.path, error });
+      reject(error);
+    };
+    xhr.send(file);
+  });
+}
+var S3FileManagerClient = class {
+  apiRoot;
+  f;
+  constructor(options) {
+    this.apiRoot = "apiUrl" in options ? options.apiUrl.replace(/\/+$/, "") : normalizeApiRootFromParts(options.baseUrl, options.basePath);
+    this.f = options.fetch ?? fetch;
+  }
+  endpoint(path) {
+    const p = path.startsWith("/") ? path : `/${path}`;
+    return `${this.apiRoot}${p}`;
+  }
+  list(options) {
+    return fetchJson(this.f, this.endpoint("/list"), options);
+  }
+  search(options) {
+    return fetchJson(this.f, this.endpoint("/search"), options);
+  }
+  createFolder(options) {
+    return fetchJson(this.f, this.endpoint("/folder/create"), options);
+  }
+  deleteFolder(options) {
+    return fetchJson(this.f, this.endpoint("/folder/delete"), options);
+  }
+  deleteFiles(options) {
+    return fetchJson(this.f, this.endpoint("/files/delete"), options);
+  }
+  copy(options) {
+    return fetchJson(this.f, this.endpoint("/files/copy"), options);
+  }
+  move(options) {
+    return fetchJson(this.f, this.endpoint("/files/move"), options);
+  }
+  prepareUploads(options) {
+    return fetchJson(this.f, this.endpoint("/upload/prepare"), options);
+  }
+  getPreviewUrl(options) {
+    return fetchJson(this.f, this.endpoint("/preview"), options);
+  }
+  async uploadFiles(args) {
+    const prepare = {
+      items: args.files.map((f) => ({
+        path: f.path,
+        contentType: f.contentType ?? f.file.type
+      })),
+      ...args.expiresInSeconds !== void 0 ? { expiresInSeconds: args.expiresInSeconds } : {}
+    };
+    const uploads = await this.prepareUploads(prepare);
+    const byPath = new Map(uploads.map((u) => [u.path, u]));
+    const tasks = args.files.map(({ file, path }) => {
+      const upload = byPath.get(path);
+      if (!upload) throw new Error(`Missing presigned upload for: ${path}`);
+      return () => uploadWithXhr(upload, file, args.hooks);
+    });
+    const parallel = Math.max(1, args.parallel ?? 4);
+    let i = 0;
+    const runWorker = async () => {
+      while (true) {
+        const idx = i++;
+        if (idx >= tasks.length) return;
+        await tasks[idx]();
+      }
+    };
+    await Promise.all(Array.from({ length: Math.min(parallel, tasks.length) }, runWorker));
+  }
+};
+
+// src/react/FileManager.tsx
+import {
+  Folder,
+  House,
+  UploadSimple,
+  FolderPlus,
+  Trash,
+  ArrowRight,
+  ArrowUp,
+  ArrowDown,
+  X as X2,
+  CaretRight,
+  DotsThree,
+  DownloadSimple,
+  ArrowCounterClockwise,
+  PencilSimple,
+  Warning,
+  MagnifyingGlass,
+  CaretUp,
+  CaretDown,
+  List,
+  SquaresFour,
+  Copy,
+  FileText as FileText2
+} from "@phosphor-icons/react";
+import { ContextMenu } from "@base-ui/react";
+import { Menu } from "@base-ui/react";
+import { Dialog as Dialog2 } from "@base-ui/react";
+
+// src/react/FileManager.module.css
+var FileManager_default = {};
+
+// src/react/components/Button.tsx
+import { Button as BaseButton } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+function Button({
+  children,
+  variant = "secondary",
+  onClick,
+  style,
+  theme,
+  disabled = false
+}) {
+  const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "8px 16px",
+    border: "1px solid transparent",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: 13,
+    fontWeight: 500,
+    transition: "all 0.15s",
+    opacity: disabled ? 0.6 : 1,
+    ...style
+  };
+  const variants = {
+    primary: {
+      backgroundColor: theme.accent,
+      color: theme.bg,
+      borderColor: theme.accent
+    },
+    secondary: {
+      backgroundColor: theme.bg,
+      color: theme.text,
+      borderColor: theme.border
+    },
+    danger: {
+      backgroundColor: theme.bg,
+      color: theme.danger,
+      borderColor: theme.danger
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      type: "button",
+      style: { ...baseStyle, ...variants[variant] },
+      onClick: disabled ? void 0 : onClick,
+      disabled,
+      children
+    }
+  );
+}
+
+// src/react/components/Modal.tsx
+import { Dialog } from "@base-ui/react";
+
+// src/react/components/UiIcon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function UiIcon(props) {
+  const { icon: Icon, size, weight, color, boxed = false, boxStyle, iconStyle } = props;
+  const iconProps = {
+    size,
+    style: { display: "block", ...iconStyle },
+    ...weight !== void 0 ? { weight } : {},
+    ...color !== void 0 ? { color } : {}
+  };
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      style: {
+        width: size,
+        height: size,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        verticalAlign: "middle",
+        ...boxed ? {
+          backgroundColor: "var(--s3kit-icon-bg, transparent)",
+          border: "1px solid var(--s3kit-icon-border, transparent)",
+          borderRadius: "var(--s3kit-icon-radius, 8px)",
+          boxSizing: "border-box"
+        } : {},
+        ...boxStyle
+      },
+      children: /* @__PURE__ */ jsx2(Icon, { ...iconProps })
+    }
+  );
+}
+
+// src/react/components/Modal.tsx
+import { X } from "@phosphor-icons/react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  theme,
+  portalContainer,
+  closeDisabled = false
+}) {
+  return /* @__PURE__ */ jsx3(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (open2) => {
+        if (!open2 && !closeDisabled) onClose();
+      },
+      children: /* @__PURE__ */ jsxs(Dialog.Portal, { container: portalContainer, children: [
+        /* @__PURE__ */ jsx3(
+          Dialog.Backdrop,
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              zIndex: 100,
+              backgroundColor: theme.bg === "#ffffff" ? "rgba(255,255,255,0.8)" : "rgba(0,0,0,0.8)",
+              backdropFilter: "blur(2px)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Dialog.Popup,
+          {
+            style: {
+              position: "fixed",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              zIndex: 101,
+              width: "100%",
+              maxWidth: 400,
+              backgroundColor: theme.bg,
+              border: `1px solid ${theme.border}`,
+              boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+              outline: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "16px 20px",
+                    borderBottom: `1px solid ${theme.border}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      Dialog.Title,
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: 13,
+                          fontWeight: 600,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em",
+                          color: theme.text
+                        },
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      Dialog.Close,
+                      {
+                        disabled: closeDisabled,
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: closeDisabled ? "not-allowed" : "pointer",
+                          padding: 4,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: theme.text,
+                          opacity: closeDisabled ? 0.5 : 1
+                        },
+                        children: /* @__PURE__ */ jsx3(UiIcon, { icon: X, size: 18 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { style: { padding: 24 }, children })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/react/components/FileIcons.tsx
+import { Code, File, FileText, FilmStrip, Image, MusicNote } from "@phosphor-icons/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function getFileIcon(filename, size = 20) {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  const weight = "light";
+  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || "")) {
+    return /* @__PURE__ */ jsx4(UiIcon, { icon: Image, size, weight, boxed: true });
+  }
+  if (["mp4", "webm", "mov"].includes(ext || "")) {
+    return /* @__PURE__ */ jsx4(UiIcon, { icon: FilmStrip, size, weight, boxed: true });
+  }
+  if (["mp3", "wav", "ogg"].includes(ext || "")) {
+    return /* @__PURE__ */ jsx4(UiIcon, { icon: MusicNote, size, weight, boxed: true });
+  }
+  if (["js", "ts", "jsx", "tsx", "json", "html", "css"].includes(ext || "")) {
+    return /* @__PURE__ */ jsx4(UiIcon, { icon: Code, size, weight, boxed: true });
+  }
+  if (["pdf", "txt", "md", "doc", "docx"].includes(ext || "")) {
+    return /* @__PURE__ */ jsx4(UiIcon, { icon: FileText, size, weight, boxed: true });
+  }
+  return /* @__PURE__ */ jsx4(UiIcon, { icon: File, size, weight, boxed: true });
+}
+
+// src/react/theme/fileManagerTheme.ts
+import { useEffect, useState } from "react";
+var lightTheme = {
+  bg: "#ffffff",
+  bgSecondary: "#fafafa",
+  text: "#111111",
+  textSecondary: "#666666",
+  border: "#eaeaea",
+  accent: "#000000",
+  hover: "#f4f4f4",
+  selected: "#eeeeee",
+  danger: "#d32f2f"
+};
+var darkTheme = {
+  bg: "#0a0a0a",
+  bgSecondary: "#1a1a1a",
+  text: "#ffffff",
+  textSecondary: "#a1a1aa",
+  border: "#27272a",
+  accent: "#ffffff",
+  hover: "#18181b",
+  selected: "#27272a",
+  danger: "#ef4444"
+};
+function useTheme(themeMode = "light") {
+  const [systemTheme, setSystemTheme] = useState("light");
+  useEffect(() => {
+    if (themeMode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      setSystemTheme(mediaQuery.matches ? "dark" : "light");
+      const handleChange = (e) => {
+        setSystemTheme(e.matches ? "dark" : "light");
+      };
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+  }, [themeMode]);
+  const activeTheme = themeMode === "system" ? systemTheme : themeMode;
+  return activeTheme === "dark" ? darkTheme : lightTheme;
+}
+
+// src/react/utils/fileManagerConstants.ts
+var TRASH_PATH = ".trash";
+
+// src/react/utils/fileManagerFilters.ts
+var MIME_EXTENSION_MAP = {
+  "image/jpeg": ["jpg", "jpeg"],
+  "image/png": ["png"],
+  "image/gif": ["gif"],
+  "image/webp": ["webp"],
+  "image/svg+xml": ["svg"],
+  "image/heic": ["heic"],
+  "image/heif": ["heif"],
+  "image/avif": ["avif"],
+  "application/pdf": ["pdf"],
+  "text/plain": ["txt"],
+  "text/markdown": ["md"],
+  "text/csv": ["csv"],
+  "application/json": ["json"],
+  "application/zip": ["zip"],
+  "application/x-zip-compressed": ["zip"],
+  "audio/mpeg": ["mp3"],
+  "audio/wav": ["wav"],
+  "audio/ogg": ["ogg"],
+  "video/mp4": ["mp4"],
+  "video/webm": ["webm"],
+  "video/quicktime": ["mov"]
+};
+function buildAllowedExtensions(extensions, mimeTypes) {
+  const allowed = /* @__PURE__ */ new Set();
+  if (extensions) {
+    for (const ext of extensions) {
+      const trimmed = ext.replace(/^\./, "").toLowerCase();
+      if (trimmed) allowed.add(trimmed);
+    }
+  }
+  if (mimeTypes) {
+    for (const type of mimeTypes) {
+      const exts = MIME_EXTENSION_MAP[type.toLowerCase()] ?? [];
+      for (const ext of exts) allowed.add(ext);
+    }
+  }
+  return allowed.size > 0 ? allowed : null;
+}
+function isImageFileName(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  return ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext || "");
+}
+
+// src/react/utils/fileManagerFormat.ts
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+function formatDate(date) {
+  const d = new Date(date);
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
+}
+
+// src/react/utils/fileManagerNames.ts
+function splitName(name) {
+  const idx = name.lastIndexOf(".");
+  if (idx <= 0) return { base: name, ext: "" };
+  return { base: name.slice(0, idx), ext: name.slice(idx) };
+}
+function buildUniqueName(name, existing) {
+  if (!existing.has(name)) return name;
+  const { base, ext } = splitName(name);
+  let i = 1;
+  while (true) {
+    const candidate = `${base}_copy_${i}${ext}`;
+    if (!existing.has(candidate)) return candidate;
+    i += 1;
+  }
+}
+
+// src/react/utils/fileManagerPaths.ts
+function joinPath(folder, name) {
+  const f = folder.replace(/\/+$/, "");
+  if (!f) return name;
+  return `${f}/${name}`;
+}
+function normalizeRelativePath(path) {
+  return path.replace(/^\/+/, "").replace(/\\/g, "/");
+}
+function getRelativePathFromFile(file) {
+  const rel = file.webkitRelativePath;
+  if (!rel) return null;
+  return normalizeRelativePath(rel);
+}
+function getParentPath(path) {
+  const p = path.replace(/\/+$/, "");
+  const parts = p.split("/").filter(Boolean);
+  parts.pop();
+  return parts.join("/");
+}
+
+// src/react/FileManager.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function FileManager({
+  apiUrl,
+  fetch: customFetch,
+  onFileSelect,
+  onSelectionChange,
+  onConfirm,
+  onNavigate,
+  className,
+  style,
+  theme: themeMode = "light",
+  mode = "manager",
+  selection = "multiple",
+  allowActions,
+  confirmLabel = "Select",
+  hideTrash = false,
+  filterExtensions,
+  filterMimeTypes,
+  toolbar,
+  viewMode: viewModeProp,
+  defaultViewMode = "grid",
+  onViewModeChange,
+  labels
+}) {
+  const theme = useTheme(themeMode);
+  const showSearch = toolbar?.search ?? true;
+  const showViewSwitcher = toolbar?.viewSwitcher ?? true;
+  const showSort = toolbar?.sort ?? true;
+  const showBreadcrumbs = toolbar?.breadcrumbs ?? true;
+  const labelText = {
+    upload: "Upload",
+    newFolder: "New Folder",
+    delete: "Delete",
+    deleteForever: "Delete Forever",
+    restore: "Restore",
+    emptyTrash: "Empty Trash",
+    confirm: confirmLabel,
+    searchPlaceholder: "Search files and folders...",
+    ...labels
+  };
+  const allowedExtensions = useMemo(
+    () => buildAllowedExtensions(filterExtensions, filterMimeTypes),
+    [filterExtensions, filterMimeTypes]
+  );
+  const can = {
+    upload: mode === "manager",
+    createFolder: mode === "manager",
+    delete: mode === "manager",
+    rename: mode === "manager",
+    move: mode === "manager",
+    copy: mode === "manager",
+    restore: mode === "manager",
+    ...allowActions
+  };
+  const [isMobile, setIsMobile] = useState2(false);
+  const portalContainer = typeof document === "undefined" ? void 0 : document.body;
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(max-width: 720px)");
+    const update = () => setIsMobile(mediaQuery.matches);
+    update();
+    mediaQuery.addEventListener("change", update);
+    return () => mediaQuery.removeEventListener("change", update);
+  }, []);
+  const client = useMemo(() => {
+    return new S3FileManagerClient({
+      apiUrl,
+      ...customFetch ? { fetch: customFetch } : {}
+    });
+  }, [apiUrl, customFetch]);
+  const [view, setView] = useState2("files");
+  const [path, setPath] = useState2("");
+  const [entries, setEntries] = useState2([]);
+  const [searchResults, setSearchResults] = useState2([]);
+  const [loading, setLoading] = useState2(false);
+  const [searching, setSearching] = useState2(false);
+  const [loadingMore, setLoadingMore] = useState2(false);
+  const [selected, setSelected] = useState2(/* @__PURE__ */ new Set());
+  const [lastSelected, setLastSelected] = useState2(null);
+  const [hoverRow, setHoverRow] = useState2(null);
+  const [previewData, setPreviewData] = useState2(null);
+  const [previewDisplay, setPreviewDisplay] = useState2(null);
+  const [isPreviewClosing, setIsPreviewClosing] = useState2(false);
+  const [sidebarWidth, setSidebarWidth] = useState2(320);
+  const [isResizing, setIsResizing] = useState2(false);
+  const [inlinePreviews, setInlinePreviews] = useState2({});
+  const [isSelectionMode, setIsSelectionMode] = useState2(false);
+  const [searchQuery, setSearchQuery] = useState2("");
+  const [sortBy, setSortBy] = useState2("name");
+  const [sortOrder, setSortOrder] = useState2("asc");
+  const [internalViewMode, setInternalViewMode] = useState2(defaultViewMode);
+  const viewMode = viewModeProp ?? internalViewMode;
+  const setViewMode = (next) => {
+    if (!viewModeProp) setInternalViewMode(next);
+    onViewModeChange?.(next);
+  };
+  const toolbarControlHeight = 34;
+  const headerLabelStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    fontSize: 12,
+    fontWeight: 600,
+    color: theme.textSecondary,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    padding: 0
+  };
+  const [nextCursor, setNextCursor] = useState2(void 0);
+  const [searchCursor, setSearchCursor] = useState2(void 0);
+  const [hasMore, setHasMore] = useState2(false);
+  const [searchHasMore, setSearchHasMore] = useState2(false);
+  const [isDragOver, setIsDragOver] = useState2(false);
+  const [_dragCounter, setDragCounter] = useState2(0);
+  const [createFolderOpen, setCreateFolderOpen] = useState2(false);
+  const [newFolderName, setNewFolderName] = useState2("");
+  const [deleteOpen, setDeleteOpen] = useState2(false);
+  const [emptyTrashOpen, setEmptyTrashOpen] = useState2(false);
+  const [renameOpen, setRenameOpen] = useState2(false);
+  const [renameName, setRenameName] = useState2("");
+  const [renameTarget, setRenameTarget] = useState2(null);
+  const [isRenaming, setIsRenaming] = useState2(false);
+  const [isDeleting, setIsDeleting] = useState2(false);
+  const [isEmptyingTrash, setIsEmptyingTrash] = useState2(false);
+  const [uploadItems, setUploadItems] = useState2([]);
+  const [uploadCardOpen, setUploadCardOpen] = useState2(false);
+  const fileInputRef = useRef(null);
+  const rootRef = useRef(null);
+  const listRef = useRef(null);
+  const previewPortalRef = useRef(null);
+  const previewPortalContainer = previewPortalRef.current ?? rootRef.current ?? portalContainer;
+  const downloadUrlCacheRef = useRef(/* @__PURE__ */ new Map());
+  const selectionAnchorRef = useRef(null);
+  const longPressTimerRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const dragSelectionBaseRef = useRef(/* @__PURE__ */ new Set());
+  const lastSelectionSigRef = useRef("");
+  const [dragSelect, setDragSelect] = useState2(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (createFolderOpen) {
+          setCreateFolderOpen(false);
+          setNewFolderName("");
+          return;
+        }
+        if (renameOpen) {
+          setRenameOpen(false);
+          setRenameTarget(null);
+          return;
+        }
+        if (deleteOpen) {
+          setDeleteOpen(false);
+          return;
+        }
+        if (emptyTrashOpen) {
+          setEmptyTrashOpen(false);
+          return;
+        }
+        if (isDragOver) {
+          setIsDragOver(false);
+          setDragCounter(0);
+          return;
+        }
+        if (dragSelect) {
+          setDragSelect(null);
+          return;
+        }
+        if (selected.size > 0) {
+          setSelected(/* @__PURE__ */ new Set());
+          setLastSelected(null);
+          setPreviewData(null);
+          return;
+        }
+        if (searchQuery.trim()) {
+          setSearchQuery("");
+          return;
+        }
+        if (uploadCardOpen) {
+          const hasActiveUploads = uploadItems.some((item) => item.status === "uploading");
+          if (!hasActiveUploads) {
+            setUploadCardOpen(false);
+          }
+        }
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "v" && view === "files") {
+        console.log("Paste detected - use drag and drop or upload button for files");
+      }
+    },
+    [
+      view,
+      createFolderOpen,
+      renameOpen,
+      deleteOpen,
+      emptyTrashOpen,
+      isDragOver,
+      dragSelect,
+      selected,
+      searchQuery,
+      uploadCardOpen,
+      uploadItems
+    ]
+  );
+  const handleDragEnter = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!can.upload || view !== "files") return;
+      if (e.dataTransfer.types.includes("Files")) {
+        setDragCounter((prev) => prev + 1);
+        setIsDragOver(true);
+      }
+    },
+    [can.upload, view]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!can.upload || view !== "files") return;
+      setDragCounter((prev) => {
+        const newCounter = prev - 1;
+        if (newCounter <= 0) {
+          setIsDragOver(false);
+          return 0;
+        }
+        return newCounter;
+      });
+    },
+    [can.upload, view]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (e.dataTransfer.types.includes("Files")) {
+        e.dataTransfer.dropEffect = can.upload && view === "files" ? "copy" : "none";
+      }
+    },
+    [can.upload, view]
+  );
+  const handleDrop = useCallback(
+    async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      setDragCounter(0);
+      if (!can.upload || view !== "files") return;
+      const items = e.dataTransfer.items;
+      if (items && items.length > 0) {
+        const dropped = await getDroppedItems(items);
+        if (dropped.length > 0) {
+          await onUpload(dropped);
+          return;
+        }
+      }
+      const files = e.dataTransfer.files;
+      if (files && files.length > 0) {
+        await onUpload(files);
+      }
+    },
+    [can.upload, view]
+  );
+  const refresh = useCallback(
+    async (loadMore = false) => {
+      if (!loadMore) {
+        setLoading(true);
+        setSelected(/* @__PURE__ */ new Set());
+        setLastSelected(null);
+        setPreviewData(null);
+      } else {
+        setLoadingMore(true);
+      }
+      try {
+        const fetchPath = view === "trash" ? path ? joinPath(TRASH_PATH, path) : TRASH_PATH : path;
+        const out = await client.list({
+          path: fetchPath,
+          limit: 100,
+          ...loadMore && nextCursor ? { cursor: nextCursor } : {}
+        });
+        let items = out.entries;
+        if (allowedExtensions) {
+          items = items.filter((entry) => {
+            if (entry.type === "folder") return true;
+            const ext = entry.name.split(".").pop()?.toLowerCase();
+            return ext ? allowedExtensions.has(ext) : false;
+          });
+        }
+        if (hideTrash) {
+          items = items.filter((entry) => entry.path !== `${TRASH_PATH}/`);
+        }
+        if (loadMore) {
+          setEntries((prev) => [...prev, ...items]);
+        } else {
+          setEntries(items);
+        }
+        setNextCursor(out.nextCursor);
+        setHasMore(!!out.nextCursor);
+      } catch (e) {
+        console.error(e);
+        if (!loadMore) {
+          setEntries([]);
+        }
+      } finally {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    },
+    [client, path, view, nextCursor, allowedExtensions, hideTrash]
+  );
+  const performSearch = useCallback(
+    async (query, loadMore = false) => {
+      if (!query.trim()) {
+        setSearchResults([]);
+        setSearching(false);
+        setSearchCursor(void 0);
+        setSearchHasMore(false);
+        return;
+      }
+      if (!loadMore) {
+        setSearching(true);
+        setSelected(/* @__PURE__ */ new Set());
+        setLastSelected(null);
+        setPreviewData(null);
+      } else {
+        setLoadingMore(true);
+      }
+      try {
+        try {
+          const searchOptions = {
+            query: query.trim(),
+            recursive: true,
+            limit: 100,
+            ...loadMore && searchCursor ? { cursor: searchCursor } : {}
+          };
+          if (view === "trash") {
+            searchOptions.path = TRASH_PATH;
+          }
+          const out = await client.search(searchOptions);
+          let items = out.entries;
+          if (view === "files") {
+            items = items.filter((e) => {
+              if (!e.path.startsWith(TRASH_PATH)) return true;
+              return e.path === `${TRASH_PATH}/`;
+            });
+          }
+          if (allowedExtensions) {
+            items = items.filter((entry) => {
+              if (entry.type === "folder") return true;
+              const ext = entry.name.split(".").pop()?.toLowerCase();
+              return ext ? allowedExtensions.has(ext) : false;
+            });
+          }
+          if (hideTrash) {
+            items = items.filter((entry) => entry.path !== `${TRASH_PATH}/`);
+          }
+          if (loadMore) {
+            setSearchResults((prev) => [...prev, ...items]);
+          } else {
+            setSearchResults(items);
+          }
+          setSearchCursor(out.nextCursor);
+          setSearchHasMore(!!out.nextCursor);
+        } catch (serverError) {
+          if (serverError.message?.includes("404") || serverError.message?.includes("Request failed: 404")) {
+            console.log("Server search not available, using client-side search");
+            const searchTerm = query.trim().toLowerCase();
+            const filtered = entries.filter(
+              (entry) => entry.name.toLowerCase().includes(searchTerm)
+            );
+            setSearchResults(filtered);
+            setSearchHasMore(false);
+          } else {
+            throw serverError;
+          }
+        }
+      } catch (e) {
+        console.error("Search failed:", e);
+        if (!loadMore) {
+          setSearchResults([]);
+        }
+      } finally {
+        setSearching(false);
+        setLoadingMore(false);
+      }
+    },
+    [client, view, entries, searchCursor, allowedExtensions, hideTrash]
+  );
+  useEffect2(() => {
+    setNextCursor(void 0);
+    setHasMore(false);
+    refresh();
+  }, [client, path, view]);
+  useEffect2(() => {
+    if (hideTrash && view === "trash") {
+      setView("files");
+      setPath("");
+    }
+  }, [hideTrash, view]);
+  useEffect2(() => {
+    const timeoutId = setTimeout(() => {
+      performSearch(searchQuery);
+    }, 300);
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery, view]);
+  useEffect2(() => {
+    onNavigate?.(path);
+  }, [path, onNavigate]);
+  useEffect2(() => {
+    const source = searchQuery.trim() ? searchResults : entries;
+    const selectedEntries = source.filter((entry) => selected.has(entry.path));
+    const sig = selectedEntries.map((entry) => entry.path).sort().join("|");
+    if (sig === lastSelectionSigRef.current) return;
+    lastSelectionSigRef.current = sig;
+    onSelectionChange?.(selectedEntries);
+  }, [entries, searchResults, selected, searchQuery, onSelectionChange]);
+  useEffect2(() => {
+    const source = searchQuery.trim() ? searchResults : entries;
+    const selectedFiles = source.filter((entry) => selected.has(entry.path)).filter((entry) => entry.type === "file");
+    const toPrepare = selectedFiles.slice(0, 25).map((file) => file.path).filter((p) => !downloadUrlCacheRef.current.has(p));
+    if (toPrepare.length === 0) return;
+    let cancelled = false;
+    const run = async () => {
+      await Promise.all(
+        toPrepare.map(async (p) => {
+          try {
+            const out = await client.getPreviewUrl({ path: p, inline: false });
+            if (cancelled) return;
+            downloadUrlCacheRef.current.set(p, out.url);
+          } catch {
+          }
+        })
+      );
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, entries, searchResults, searchQuery, selected]);
+  useEffect2(() => {
+    if (selected.size === 1 && lastSelected?.type === "file" && selected.has(lastSelected.path)) {
+      const fetchPreview = async () => {
+        try {
+          const out = await client.getPreviewUrl({
+            path: lastSelected.path,
+            inline: true
+          });
+          setPreviewData({ url: out.url, entry: lastSelected });
+        } catch (e) {
+          console.error("Failed to load preview", e);
+        }
+      };
+      fetchPreview();
+    } else {
+      setPreviewData(null);
+    }
+  }, [selected, lastSelected, client]);
+  useEffect2(() => {
+    if (previewData) {
+      setPreviewDisplay(previewData);
+      setIsPreviewClosing(false);
+      return;
+    }
+    if (!previewDisplay) return;
+    setIsPreviewClosing(true);
+    const timeoutId = window.setTimeout(() => {
+      setPreviewDisplay(null);
+      setIsPreviewClosing(false);
+    }, 200);
+    return () => window.clearTimeout(timeoutId);
+  }, [previewData, previewDisplay]);
+  useEffect2(() => {
+    const prevent = (e) => {
+      e.preventDefault();
+    };
+    window.addEventListener("dragover", prevent);
+    window.addEventListener("drop", prevent);
+    return () => {
+      window.removeEventListener("dragover", prevent);
+      window.removeEventListener("drop", prevent);
+    };
+  }, []);
+  useEffect2(() => {
+    if (selected.size === 0 && isSelectionMode) {
+      setIsSelectionMode(false);
+      selectionAnchorRef.current = null;
+    }
+  }, [selected, isSelectionMode]);
+  useEffect2(() => {
+    if (view !== "files") return;
+    if (!selected.has(`${TRASH_PATH}/`)) return;
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.delete(`${TRASH_PATH}/`);
+      return next;
+    });
+  }, [selected, view]);
+  useEffect2(() => {
+    if (!dragSelect?.active) return;
+    const handleMove = (e) => {
+      const container = listRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left + container.scrollLeft;
+      const y = e.clientY - rect.top + container.scrollTop;
+      setDragSelect((prev) => prev ? { ...prev, x, y } : prev);
+      const left = Math.min(dragSelect.startX, x);
+      const top = Math.min(dragSelect.startY, y);
+      const right = Math.max(dragSelect.startX, x);
+      const bottom = Math.max(dragSelect.startY, y);
+      const elements = Array.from(container.querySelectorAll("[data-entry-path]"));
+      const selectedPaths = /* @__PURE__ */ new Set();
+      for (const el of elements) {
+        const pathAttr = el.getAttribute("data-entry-path");
+        const selectable = el.getAttribute("data-entry-selectable");
+        if (selectable === "false") continue;
+        if (!pathAttr) continue;
+        const elRect = el.getBoundingClientRect();
+        const elLeft = elRect.left - rect.left + container.scrollLeft;
+        const elTop = elRect.top - rect.top + container.scrollTop;
+        const elRight = elLeft + elRect.width;
+        const elBottom = elTop + elRect.height;
+        const intersects = elLeft < right && elRight > left && elTop < bottom && elBottom > top;
+        if (intersects) selectedPaths.add(pathAttr);
+      }
+      setSelected(() => {
+        const base = dragSelect.additive ? new Set(dragSelectionBaseRef.current) : /* @__PURE__ */ new Set();
+        for (const path2 of selectedPaths) base.add(path2);
+        return base;
+      });
+      setLastSelected(null);
+      setIsSelectionMode(true);
+    };
+    const handleUp = () => {
+      setDragSelect(null);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [dragSelect]);
+  const updateSidebarWidth = useCallback((clientX) => {
+    const availableWidth = rootRef.current?.getBoundingClientRect().width ?? window.innerWidth;
+    const maxWidth = Math.min(520, availableWidth * 0.6);
+    const minWidth = Math.min(280, maxWidth);
+    const next = window.innerWidth - clientX;
+    const clamped = Math.max(minWidth, Math.min(maxWidth, next));
+    setSidebarWidth(clamped);
+  }, []);
+  useEffect2(() => {
+    if (!isResizing) return;
+    const onMouseMove = (e) => {
+      e.preventDefault();
+      updateSidebarWidth(e.clientX);
+    };
+    const onTouchMove = (e) => {
+      if (!e.touches[0]) return;
+      e.preventDefault();
+      updateSidebarWidth(e.touches[0].clientX);
+    };
+    const onStop = () => setIsResizing(false);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onStop);
+    document.addEventListener("mouseleave", onStop);
+    document.addEventListener("touchmove", onTouchMove, { passive: false });
+    document.addEventListener("touchend", onStop);
+    document.addEventListener("touchcancel", onStop);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onStop);
+      document.removeEventListener("mouseleave", onStop);
+      document.removeEventListener("touchmove", onTouchMove);
+      document.removeEventListener("touchend", onStop);
+      document.removeEventListener("touchcancel", onStop);
+    };
+  }, [isResizing, updateSidebarWidth]);
+  function handleNavigate(newPath) {
+    setPath(newPath);
+  }
+  async function onCreateFolder() {
+    if (!can.createFolder || view !== "files") return;
+    if (!newFolderName.trim()) return;
+    const existingNames = new Set(entries.map((entry) => entry.name));
+    const uniqueName = buildUniqueName(newFolderName.trim(), existingNames);
+    await client.createFolder({ path: joinPath(path, uniqueName) });
+    setNewFolderName("");
+    setCreateFolderOpen(false);
+    refresh();
+  }
+  async function onRename() {
+    if (!can.rename || view !== "files") return;
+    if (!renameName.trim()) return;
+    if (isRenaming) return;
+    const target = renameTarget ?? lastSelected;
+    if (!target) return;
+    const oldPath = target.path;
+    const parent = getParentPath(oldPath);
+    const existingNames = new Set(
+      entries.filter((entry) => entry.path !== oldPath).map((entry) => entry.name)
+    );
+    const uniqueName = buildUniqueName(renameName.trim(), existingNames);
+    const nextPath = parent ? joinPath(parent, uniqueName) : uniqueName;
+    const newPath = target.type === "folder" ? `${nextPath.replace(/\/+$/, "")}/` : nextPath;
+    if (newPath === oldPath) {
+      setRenameOpen(false);
+      setRenameTarget(null);
+      return;
+    }
+    try {
+      setIsRenaming(true);
+      await client.move({ fromPath: oldPath, toPath: newPath });
+      setRenameOpen(false);
+      setRenameTarget(null);
+      refresh();
+    } catch (e) {
+      console.error("Rename failed", e);
+      alert("Rename failed");
+    } finally {
+      setIsRenaming(false);
+    }
+  }
+  async function deleteEntries(targets) {
+    if (!can.delete) return;
+    if (view === "files") {
+      for (const target of targets) {
+        if (target.path.startsWith(TRASH_PATH)) continue;
+        const dest = joinPath(TRASH_PATH, target.path);
+        await client.move({ fromPath: target.path, toPath: dest });
+      }
+    } else {
+      const files = targets.filter((e) => e.type === "file").map((e) => e.path);
+      const folders = targets.filter((e) => e.type === "folder");
+      if (files.length > 0) await client.deleteFiles({ paths: files });
+      for (const folder of folders) {
+        await client.deleteFolder({ path: folder.path, recursive: true });
+      }
+    }
+  }
+  async function onDelete() {
+    if (!can.delete) return;
+    if (isDeleting) return;
+    const source = searchQuery.trim() ? searchResults : entries;
+    const targets = source.filter((e) => selected.has(e.path));
+    try {
+      setIsDeleting(true);
+      await deleteEntries(targets);
+      setDeleteOpen(false);
+      refresh();
+    } catch (e) {
+      console.error("Delete failed", e);
+      alert("Delete failed");
+    } finally {
+      setIsDeleting(false);
+    }
+  }
+  async function restoreEntries(targets) {
+    if (!can.restore) return;
+    for (const target of targets) {
+      if (!target.path.startsWith(TRASH_PATH)) continue;
+      const originalPath = target.path.slice(TRASH_PATH.length + 1);
+      if (!originalPath) continue;
+      await client.move({ fromPath: target.path, toPath: originalPath });
+    }
+  }
+  async function onRestore() {
+    if (!can.restore) return;
+    const source = searchQuery.trim() ? searchResults : entries;
+    const targets = source.filter((e) => selected.has(e.path));
+    await restoreEntries(targets);
+    refresh();
+  }
+  async function onEmptyTrash() {
+    if (!can.restore) return;
+    if (isEmptyingTrash) return;
+    try {
+      setIsEmptyingTrash(true);
+      await client.deleteFolder({ path: TRASH_PATH, recursive: true });
+      setEmptyTrashOpen(false);
+      refresh();
+    } catch (e) {
+      console.error("Empty trash failed", e);
+      alert("Empty trash failed");
+    } finally {
+      setIsEmptyingTrash(false);
+    }
+  }
+  async function onUpload(files) {
+    if (!can.upload || view !== "files") return;
+    if (!files || files.length === 0) return;
+    const baseItems = Array.isArray(files) ? files : Array.from(files).map((file) => {
+      const rel = getRelativePathFromFile(file);
+      return {
+        file,
+        path: joinPath(path, rel ?? file.name)
+      };
+    });
+    const existingByFolder = /* @__PURE__ */ new Map();
+    const currentFolderNames = new Set(entries.map((entry) => entry.name));
+    existingByFolder.set(path, currentFolderNames);
+    const items = baseItems.map((item) => {
+      const parent = getParentPath(item.path);
+      const name = item.path.split("/").pop() ?? item.path;
+      const existing = existingByFolder.get(parent) ?? /* @__PURE__ */ new Set();
+      const uniqueName = buildUniqueName(name, existing);
+      existing.add(uniqueName);
+      existingByFolder.set(parent, existing);
+      const uniquePath = parent ? joinPath(parent, uniqueName) : uniqueName;
+      return { ...item, path: uniquePath };
+    });
+    const initialUploadItems = items.map((item) => ({
+      file: item.file,
+      path: item.path,
+      name: item.path.split("/").pop() ?? item.path,
+      loaded: 0,
+      total: item.file.size ?? 0,
+      status: "uploading",
+      error: void 0
+    }));
+    setUploadCardOpen(true);
+    setUploadItems(initialUploadItems);
+    await client.uploadFiles({
+      files: items,
+      parallel: 4,
+      hooks: {
+        onUploadProgress: ({ path: p, loaded, total }) => {
+          if (!total) return;
+          setUploadItems(
+            (prev) => prev.map(
+              (item) => item.path === p ? {
+                ...item,
+                loaded,
+                total: total ?? item.total,
+                status: "uploading",
+                error: void 0
+              } : item
+            )
+          );
+        },
+        onUploadComplete: ({ path: p }) => setUploadItems(
+          (prev) => prev.map(
+            (item) => item.path === p ? {
+              ...item,
+              loaded: item.total,
+              status: "done",
+              error: void 0
+            } : item
+          )
+        ),
+        onUploadError: ({ path: p, error }) => setUploadItems(
+          (prev) => prev.map((item) => {
+            if (item.path !== p) return item;
+            const message = error instanceof Error ? error.message : error ? String(error) : "Upload failed";
+            return { ...item, status: "error", error: message };
+          })
+        )
+      }
+    });
+    refresh();
+  }
+  async function retryUpload(item) {
+    if (!can.upload || view !== "files") return;
+    if (!item.file) {
+      window.alert("Original file not available. Please re-upload.");
+      return;
+    }
+    const file = item.file;
+    setUploadCardOpen(true);
+    setUploadItems(
+      (prev) => prev.map(
+        (entry) => entry.path === item.path ? {
+          ...entry,
+          loaded: 0,
+          total: file.size ?? entry.total,
+          status: "uploading",
+          error: void 0
+        } : entry
+      )
+    );
+    await client.uploadFiles({
+      files: [{ file, path: item.path }],
+      parallel: 1,
+      hooks: {
+        onUploadProgress: ({ path: p, loaded, total }) => {
+          if (!total) return;
+          setUploadItems(
+            (prev) => prev.map(
+              (entry) => entry.path === p ? {
+                ...entry,
+                loaded,
+                total: total ?? entry.total,
+                status: "uploading",
+                error: void 0
+              } : entry
+            )
+          );
+        },
+        onUploadComplete: ({ path: p }) => setUploadItems(
+          (prev) => prev.map(
+            (entry) => entry.path === p ? {
+              ...entry,
+              loaded: entry.total,
+              status: "done",
+              error: void 0
+            } : entry
+          )
+        ),
+        onUploadError: ({ path: p, error }) => setUploadItems(
+          (prev) => prev.map((entry) => {
+            if (entry.path !== p) return entry;
+            const message = error instanceof Error ? error.message : error ? String(error) : "Upload failed";
+            return { ...entry, status: "error", error: message };
+          })
+        )
+      }
+    });
+    refresh();
+  }
+  function openEntry(entry) {
+    if (entry.type === "folder") {
+      let nextPath = entry.path;
+      if (view === "trash") {
+        nextPath = entry.path.slice(TRASH_PATH.length + 1);
+        setPath(nextPath);
+        return;
+      }
+      if (entry.path.startsWith(TRASH_PATH)) {
+        setView("trash");
+        const relPath = entry.path.slice(TRASH_PATH.length + 1);
+        setPath(relPath);
+        return;
+      }
+      setPath(nextPath);
+      return;
+    }
+    setSelected(/* @__PURE__ */ new Set([entry.path]));
+    selectionAnchorRef.current = entry.path;
+    setIsSelectionMode(true);
+    setLastSelected(entry);
+    onFileSelect?.(entry);
+  }
+  function selectRange(entries2, startPath, endPath) {
+    const startIndex = entries2.findIndex((entry) => entry.path === startPath);
+    const endIndex = entries2.findIndex((entry) => entry.path === endPath);
+    if (startIndex === -1 || endIndex === -1) {
+      return /* @__PURE__ */ new Set([endPath]);
+    }
+    const [from, to] = startIndex < endIndex ? [startIndex, endIndex] : [endIndex, startIndex];
+    const next = /* @__PURE__ */ new Set();
+    for (let i = from; i <= to; i += 1) {
+      next.add(entries2[i].path);
+    }
+    return next;
+  }
+  function handleEntryClickWithSelection(entry, index, entries2, e) {
+    const isTrashFolder = view === "files" && entry.type === "folder" && entry.path === `${TRASH_PATH}/`;
+    if (isTrashFolder) {
+      openEntry(entry);
+      return;
+    }
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      return;
+    }
+    if (e.shiftKey && selectionAnchorRef.current) {
+      if (selection === "single") {
+        setSelected(/* @__PURE__ */ new Set([entry.path]));
+        setLastSelected(null);
+        setIsSelectionMode(true);
+        return;
+      }
+      const next = selectRange(entries2, selectionAnchorRef.current, entry.path);
+      setSelected(next);
+      setLastSelected(null);
+      setIsSelectionMode(true);
+      return;
+    }
+    if (isSelectionMode || e.metaKey || e.ctrlKey) {
+      setSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(entry.path)) {
+          next.delete(entry.path);
+        } else {
+          if (selection === "single") {
+            next.clear();
+          }
+          next.add(entry.path);
+        }
+        setIsSelectionMode(next.size > 0);
+        return next;
+      });
+      selectionAnchorRef.current = entry.path;
+      setLastSelected(null);
+      return;
+    }
+    setSelected((prev) => {
+      const next = new Set(prev);
+      const alreadySelected = next.has(entry.path);
+      if (selection === "single") {
+        next.clear();
+        if (!alreadySelected) {
+          next.add(entry.path);
+        }
+      } else if (alreadySelected) {
+        next.delete(entry.path);
+      } else {
+        next.add(entry.path);
+      }
+      setIsSelectionMode(next.size > 0);
+      return next;
+    });
+    selectionAnchorRef.current = entry.path;
+    setLastSelected(null);
+  }
+  function handleLongPressSelect(entry) {
+    if (view === "files" && entry.type === "folder" && entry.path === `${TRASH_PATH}/`) {
+      return;
+    }
+    setIsSelectionMode(true);
+    selectionAnchorRef.current = entry.path;
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (selection === "single") {
+        next.clear();
+      }
+      next.add(entry.path);
+      return next;
+    });
+    setLastSelected(null);
+    suppressClickRef.current = true;
+  }
+  async function bulkDownload(entriesToDownload) {
+    const files = entriesToDownload.filter((entry) => entry.type === "file");
+    if (files.length === 0) return;
+    const cachedUrls = files.map((f) => downloadUrlCacheRef.current.get(f.path)).filter((u) => typeof u === "string");
+    if (cachedUrls.length !== files.length) {
+      if (files.length === 1) {
+        try {
+          const out = await client.getPreviewUrl({
+            path: files[0].path,
+            inline: false
+          });
+          downloadUrlCacheRef.current.set(files[0].path, out.url);
+          const a = document.createElement("a");
+          a.href = out.url;
+          a.target = "_blank";
+          a.rel = "noopener noreferrer";
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+        } catch (e) {
+          console.error(e);
+        }
+        return;
+      }
+      window.alert("Preparing download links\u2026 please click Download again in a moment.");
+      return;
+    }
+    if (cachedUrls.length > 20) {
+      const ok = window.confirm(
+        `Download ${cachedUrls.length} files? Your browser may ask to allow multiple downloads.`
+      );
+      if (!ok) return;
+    }
+    for (const url of cachedUrls) {
+      const a = document.createElement("a");
+      a.href = url;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  }
+  async function bulkCopy(entriesToCopy) {
+    if (!can.copy) return;
+    const dest = window.prompt("Copy to folder path", path || "");
+    if (!dest) return;
+    const baseDest = dest.replace(/\/+$/, "");
+    for (const entry of entriesToCopy) {
+      if (entry.path.startsWith(TRASH_PATH)) continue;
+      const targetName = entry.name || entry.path.split("/").pop() || entry.path;
+      const toPath = entry.type === "folder" ? `${joinPath(baseDest, targetName)}/` : joinPath(baseDest, targetName);
+      await client.copy({ fromPath: entry.path, toPath });
+    }
+    refresh();
+  }
+  async function bulkMove(entriesToMove) {
+    if (!can.move) return;
+    const dest = window.prompt("Move to folder path", path || "");
+    if (!dest) return;
+    const baseDest = dest.replace(/\/+$/, "");
+    for (const entry of entriesToMove) {
+      if (entry.path.startsWith(TRASH_PATH)) continue;
+      const targetName = entry.name || entry.path.split("/").pop() || entry.path;
+      const toPath = entry.type === "folder" ? `${joinPath(baseDest, targetName)}/` : joinPath(baseDest, targetName);
+      await client.move({ fromPath: entry.path, toPath });
+    }
+    refresh();
+  }
+  const breadcrumbs = useMemo(() => {
+    const parts = path.split("/").filter(Boolean);
+    const crumbs = [{ name: view === "trash" ? "Trash" : "Home", path: "" }];
+    let cur = "";
+    for (const part of parts) {
+      cur = cur ? `${cur}/${part}` : part;
+      crumbs.push({ name: part, path: cur });
+    }
+    return crumbs;
+  }, [path, view]);
+  const handleScroll = useCallback(
+    (e) => {
+      const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+      const isNearBottom = scrollHeight - scrollTop <= clientHeight + 100;
+      if (isNearBottom && !loadingMore && !loading && !searching) {
+        const isSearching = searchQuery.trim();
+        const hasMoreItems = isSearching ? searchHasMore : hasMore;
+        if (hasMoreItems) {
+          if (isSearching) {
+            performSearch(searchQuery, true);
+          } else {
+            refresh(true);
+          }
+        }
+      }
+    },
+    [loadingMore, loading, searching, searchQuery, searchHasMore, hasMore, performSearch, refresh]
+  );
+  const currentEntries = useMemo(() => {
+    return searchQuery.trim() ? searchResults : entries;
+  }, [searchQuery, searchResults, entries]);
+  useEffect2(() => {
+    let cancelled = false;
+    const toFetch = currentEntries.filter((entry) => entry.type === "file" && isImageFileName(entry.name)).filter((entry) => !inlinePreviews[entry.path]).slice(0, 50);
+    if (toFetch.length === 0) return;
+    const run = async () => {
+      for (const entry of toFetch) {
+        try {
+          const out = await client.getPreviewUrl({
+            path: entry.path,
+            inline: true
+          });
+          if (cancelled) return;
+          setInlinePreviews(
+            (prev) => prev[entry.path] ? prev : { ...prev, [entry.path]: out.url }
+          );
+        } catch {
+        }
+      }
+    };
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [currentEntries, inlinePreviews, client, allowedExtensions]);
+  const showSidebar = previewDisplay !== null;
+  const showSidebarOnLayout = !isMobile && mode !== "picker";
+  const isSidebarVisible = showSidebarOnLayout && showSidebar;
+  async function getDroppedItems(items) {
+    const entries2 = [];
+    for (const item of Array.from(items)) {
+      const entry = item.webkitGetAsEntry?.();
+      if (entry) entries2.push(entry);
+    }
+    if (entries2.length === 0) return [];
+    const results = [];
+    const readEntries = (reader) => new Promise((resolve) => {
+      reader.readEntries((batch) => resolve(batch));
+    });
+    const traverse = async (entry, prefix) => {
+      if (entry.isFile) {
+        const file = await new Promise((resolve) => entry.file(resolve));
+        const rel = normalizeRelativePath(prefix ? `${prefix}/${file.name}` : file.name);
+        results.push({ file, path: joinPath(path, rel) });
+        return;
+      }
+      if (entry.isDirectory) {
+        const reader = entry.createReader();
+        let batch = await readEntries(reader);
+        while (batch.length > 0) {
+          for (const child of batch) {
+            await traverse(child, prefix ? `${prefix}/${entry.name}` : entry.name);
+          }
+          batch = await readEntries(reader);
+        }
+      }
+    };
+    for (const entry of entries2) {
+      await traverse(entry, "");
+    }
+    return results;
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        minHeight: isMobile ? 0 : 500,
+        maxHeight: isMobile ? "100%" : "100vh",
+        ...style,
+        ...{
+          "--s3kit-bg": theme.bg,
+          "--s3kit-bg-secondary": theme.bgSecondary,
+          "--s3kit-border": theme.border,
+          "--s3kit-text": theme.text,
+          "--s3kit-text-secondary": theme.textSecondary,
+          "--s3kit-icon-bg": theme.bgSecondary,
+          "--s3kit-icon-border": theme.border,
+          "--s3kit-icon-radius": "8px"
+        }
+      },
+      className: `${FileManager_default.root}${className ? ` ${className}` : ""}`,
+      ref: rootRef,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onKeyDown: handleKeyDown,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: FileManager_default.main,
+            style: {
+              ...isDragOver ? {
+                backgroundColor: theme.bg === "#ffffff" ? "#fafafa" : "#1a1a1a"
+              } : void 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  className: FileManager_default.header,
+                  style: {
+                    padding: isMobile ? "12px 16px" : "16px 24px",
+                    ...isMobile ? { gap: 8 } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          flex: 1,
+                          minWidth: 0
+                        },
+                        children: /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            className: FileManager_default.navTabs,
+                            style: { flexWrap: isMobile ? "wrap" : "nowrap" },
+                            children: /* @__PURE__ */ jsxs2(
+                              "button",
+                              {
+                                type: "button",
+                                className: FileManager_default.navTab,
+                                style: {
+                                  backgroundColor: view === "files" ? theme.selected : "transparent",
+                                  color: view === "files" ? theme.text : theme.textSecondary,
+                                  ...isMobile ? { flex: "1 1 auto", justifyContent: "center" } : {}
+                                },
+                                onClick: () => {
+                                  setView("files");
+                                  setPath("");
+                                  setSelected(/* @__PURE__ */ new Set());
+                                  setLastSelected(null);
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx5(UiIcon, { icon: House, size: 16 }),
+                                  "Home"
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          gap: 8,
+                          flexWrap: "nowrap",
+                          flexShrink: 0
+                        },
+                        children: [
+                          view === "trash" && selected.size === 0 && !hideTrash && can.restore && /* @__PURE__ */ jsx5(Button, { variant: "danger", onClick: () => setEmptyTrashOpen(true), theme, children: labelText.emptyTrash }),
+                          view === "trash" && selected.size > 0 && !hideTrash && can.restore && /* @__PURE__ */ jsxs2(Button, { onClick: onRestore, theme, children: [
+                            /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowCounterClockwise, size: 16 }),
+                            " ",
+                            labelText.restore
+                          ] }),
+                          selected.size > 0 ? can.delete && /* @__PURE__ */ jsxs2(Button, { variant: "danger", onClick: () => setDeleteOpen(true), theme, children: [
+                            /* @__PURE__ */ jsx5(UiIcon, { icon: Trash, size: 16 }),
+                            " ",
+                            view === "trash" ? labelText.deleteForever : labelText.delete
+                          ] }) : view === "files" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                            can.createFolder && /* @__PURE__ */ jsxs2(Button, { onClick: () => setCreateFolderOpen(true), theme, children: [
+                              /* @__PURE__ */ jsx5(UiIcon, { icon: FolderPlus, size: 16 }),
+                              " ",
+                              labelText.newFolder
+                            ] }),
+                            can.upload && /* @__PURE__ */ jsxs2(
+                              Button,
+                              {
+                                variant: "primary",
+                                onClick: () => fileInputRef.current?.click(),
+                                theme,
+                                children: [
+                                  /* @__PURE__ */ jsx5(UiIcon, { icon: UploadSimple, size: 16 }),
+                                  " ",
+                                  labelText.upload
+                                ]
+                              }
+                            )
+                          ] }) : null,
+                          mode === "picker" && /* @__PURE__ */ jsx5(
+                            Button,
+                            {
+                              variant: "primary",
+                              onClick: () => {
+                                const source = searchQuery.trim() ? searchResults : entries;
+                                const selectedEntries = source.filter((entry) => selected.has(entry.path));
+                                onConfirm?.(selectedEntries);
+                              },
+                              disabled: selected.size === 0,
+                              theme,
+                              children: labelText.confirm
+                            }
+                          ),
+                          /* @__PURE__ */ jsx5(
+                            "input",
+                            {
+                              type: "file",
+                              multiple: true,
+                              ref: fileInputRef,
+                              style: { display: "none" },
+                              disabled: !can.upload || view !== "files",
+                              onChange: (e) => onUpload(e.target.files)
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              showBreadcrumbs && (path || view === "trash") && /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    fontSize: 13,
+                    padding: isMobile ? "8px 16px" : "10px 24px",
+                    borderBottom: `1px solid ${theme.border}`,
+                    overflowX: isMobile ? "auto" : "visible",
+                    whiteSpace: isMobile ? "nowrap" : "normal"
+                  },
+                  children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                    idx > 0 && /* @__PURE__ */ jsx5(UiIcon, { icon: CaretRight, size: 12, color: theme.textSecondary }),
+                    /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleNavigate(crumb.path),
+                        style: {
+                          background: "none",
+                          border: "none",
+                          padding: 0,
+                          cursor: "pointer",
+                          fontSize: 13,
+                          fontWeight: idx === breadcrumbs.length - 1 ? 600 : 400,
+                          color: idx === breadcrumbs.length - 1 ? theme.text : theme.textSecondary
+                        },
+                        children: crumb.name
+                      }
+                    )
+                  ] }, idx))
+                }
+              ),
+              (showSearch || showSort || mode !== "viewer" && showViewSwitcher) && /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: showSearch ? "flex-start" : "flex-end",
+                    gap: isMobile ? 8 : 12,
+                    padding: isMobile ? "10px 16px" : "12px 24px",
+                    borderBottom: `1px solid ${theme.border}`,
+                    flexWrap: "nowrap"
+                  },
+                  children: [
+                    showSearch && /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                          flex: 1,
+                          minWidth: 0
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 8,
+                                flex: 1,
+                                minWidth: 0,
+                                height: toolbarControlHeight,
+                                padding: "0 10px",
+                                border: `1px solid ${theme.border}`,
+                                backgroundColor: theme.bg,
+                                color: theme.text,
+                                boxSizing: "border-box"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx5(UiIcon, { icon: MagnifyingGlass, size: 16, color: theme.textSecondary }),
+                                /* @__PURE__ */ jsx5(
+                                  "input",
+                                  {
+                                    type: "text",
+                                    placeholder: labelText.searchPlaceholder,
+                                    value: searchQuery,
+                                    onChange: (e) => setSearchQuery(e.target.value),
+                                    style: {
+                                      flex: 1,
+                                      minWidth: 0,
+                                      height: "100%",
+                                      padding: 0,
+                                      fontSize: 13,
+                                      border: "none",
+                                      backgroundColor: "transparent",
+                                      color: theme.text,
+                                      outline: "none"
+                                    }
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          (searchQuery || searching) && /* @__PURE__ */ jsx5(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                setSearchQuery("");
+                                setSearchResults([]);
+                              },
+                              disabled: searching,
+                              style: {
+                                background: "none",
+                                border: "none",
+                                cursor: searching ? "default" : "pointer",
+                                width: toolbarControlHeight,
+                                height: toolbarControlHeight,
+                                padding: 0,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: theme.textSecondary,
+                                opacity: searching ? 0.5 : 1
+                              },
+                              children: /* @__PURE__ */ jsx5(UiIcon, { icon: X2, size: 14 })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    (showSort || mode !== "viewer" && showViewSwitcher) && /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 8,
+                          flexShrink: 0
+                        },
+                        children: [
+                          mode !== "viewer" && showViewSwitcher && /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                border: `1px solid ${theme.border}`,
+                                flexShrink: 0,
+                                height: toolbarControlHeight
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx5(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: () => setViewMode("list"),
+                                    style: {
+                                      background: viewMode === "list" ? theme.selected : "none",
+                                      border: "none",
+                                      cursor: "pointer",
+                                      padding: 0,
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      color: theme.text,
+                                      width: toolbarControlHeight,
+                                      height: toolbarControlHeight
+                                    },
+                                    title: "List View",
+                                    children: /* @__PURE__ */ jsx5(UiIcon, { icon: List, size: 16 })
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx5(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: () => setViewMode("grid"),
+                                    style: {
+                                      background: viewMode === "grid" ? theme.selected : "none",
+                                      border: "none",
+                                      cursor: "pointer",
+                                      padding: 0,
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      color: theme.text,
+                                      width: toolbarControlHeight,
+                                      height: toolbarControlHeight
+                                    },
+                                    title: "Grid View",
+                                    children: /* @__PURE__ */ jsx5(UiIcon, { icon: SquaresFour, size: 16 })
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          showSort && viewMode === "grid" && /* @__PURE__ */ jsx5(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSortOrder(sortOrder === "asc" ? "desc" : "asc"),
+                              style: {
+                                background: theme.bg,
+                                border: `1px solid ${theme.border}`,
+                                cursor: "pointer",
+                                padding: 0,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: theme.text,
+                                width: toolbarControlHeight,
+                                height: toolbarControlHeight
+                              },
+                              title: `Sort ${sortOrder === "asc" ? "Descending" : "Ascending"}`,
+                              children: sortOrder === "asc" ? /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowUp, size: 16 }) : /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowDown, size: 16 })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              showSearch && searchQuery.trim() && /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    padding: "8px 24px",
+                    backgroundColor: theme.bgSecondary,
+                    borderBottom: `1px solid ${theme.border}`,
+                    fontSize: 12,
+                    color: theme.textSecondary,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                      /* @__PURE__ */ jsx5(UiIcon, { icon: MagnifyingGlass, size: 14 }),
+                      searching ? `Searching for "${searchQuery}"...` : `Found ${currentEntries.length} result${currentEntries.length !== 1 ? "s" : ""} for "${searchQuery}"`
+                    ] }),
+                    searchHasMore && /* @__PURE__ */ jsx5("div", { style: { fontSize: 11, opacity: 0.7 }, children: "More results available" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    overflow: "auto",
+                    minHeight: 0,
+                    // This is important for flex children to shrink properly
+                    WebkitOverflowScrolling: "touch",
+                    position: "relative"
+                  },
+                  ref: listRef,
+                  onScroll: handleScroll,
+                  onMouseDown: (e) => {
+                    if (isMobile) return;
+                    if (e.button !== 0) return;
+                    const target = e.target;
+                    if (target.closest("[data-entry-path]")) return;
+                    const container = listRef.current;
+                    if (!container) return;
+                    e.preventDefault();
+                    const rect = container.getBoundingClientRect();
+                    const startX = e.clientX - rect.left + container.scrollLeft;
+                    const startY = e.clientY - rect.top + container.scrollTop;
+                    dragSelectionBaseRef.current = new Set(selected);
+                    setDragSelect({
+                      active: true,
+                      startX,
+                      startY,
+                      x: startX,
+                      y: startY,
+                      additive: e.metaKey || e.ctrlKey
+                    });
+                  },
+                  children: [
+                    dragSelect?.active && /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          left: Math.min(dragSelect.startX, dragSelect.x),
+                          top: Math.min(dragSelect.startY, dragSelect.y),
+                          width: Math.abs(dragSelect.x - dragSelect.startX),
+                          height: Math.abs(dragSelect.y - dragSelect.startY),
+                          border: `1px solid ${theme.accent}`,
+                          backgroundColor: theme.bg === "#ffffff" ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.08)",
+                          pointerEvents: "none",
+                          zIndex: 3
+                        }
+                      }
+                    ),
+                    viewMode === "list" && /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        className: FileManager_default.tableHeader,
+                        style: {
+                          gridTemplateColumns: isMobile ? "1fr 48px" : "1fr 120px 100px 48px",
+                          padding: isMobile ? "10px 16px" : "10px 24px"
+                        },
+                        children: [
+                          showSort ? /* @__PURE__ */ jsxs2(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                if (sortBy === "name") {
+                                  setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+                                } else {
+                                  setSortBy("name");
+                                  setSortOrder("asc");
+                                }
+                              },
+                              style: {
+                                background: "none",
+                                border: "none",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 4,
+                                fontSize: 12,
+                                fontWeight: 600,
+                                color: sortBy === "name" ? theme.text : theme.textSecondary,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em",
+                                padding: 0
+                              },
+                              children: [
+                                "Name",
+                                sortBy === "name" && (sortOrder === "asc" ? /* @__PURE__ */ jsx5(UiIcon, { icon: CaretUp, size: 12 }) : /* @__PURE__ */ jsx5(UiIcon, { icon: CaretDown, size: 12 }))
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx5("div", { style: headerLabelStyle, children: "Name" }),
+                          !isMobile && (showSort ? /* @__PURE__ */ jsxs2(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                if (sortBy === "date") {
+                                  setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+                                } else {
+                                  setSortBy("date");
+                                  setSortOrder("desc");
+                                }
+                              },
+                              style: {
+                                background: "none",
+                                border: "none",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 4,
+                                fontSize: 12,
+                                fontWeight: 600,
+                                color: sortBy === "date" ? theme.text : theme.textSecondary,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em",
+                                padding: 0
+                              },
+                              children: [
+                                "Date",
+                                sortBy === "date" && (sortOrder === "asc" ? /* @__PURE__ */ jsx5(UiIcon, { icon: CaretUp, size: 12 }) : /* @__PURE__ */ jsx5(UiIcon, { icon: CaretDown, size: 12 }))
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx5("div", { style: headerLabelStyle, children: "Date" })),
+                          !isMobile && (showSort ? /* @__PURE__ */ jsxs2(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                if (sortBy === "size") {
+                                  setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+                                } else {
+                                  setSortBy("size");
+                                  setSortOrder("desc");
+                                }
+                              },
+                              style: {
+                                background: "none",
+                                border: "none",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 4,
+                                fontSize: 12,
+                                fontWeight: 600,
+                                color: sortBy === "size" ? theme.text : theme.textSecondary,
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em",
+                                padding: 0
+                              },
+                              children: [
+                                "Size",
+                                sortBy === "size" && (sortOrder === "asc" ? /* @__PURE__ */ jsx5(UiIcon, { icon: CaretUp, size: 12 }) : /* @__PURE__ */ jsx5(UiIcon, { icon: CaretDown, size: 12 }))
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx5("div", { style: headerLabelStyle, children: "Size" })),
+                          /* @__PURE__ */ jsx5("div", {})
+                        ]
+                      }
+                    ),
+                    loading || searching ? /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          padding: 40,
+                          textAlign: "center",
+                          color: theme.textSecondary
+                        },
+                        children: searching ? "Searching..." : "Loading..."
+                      }
+                    ) : viewMode === "grid" ? (
+                      // Grid View
+                      /* @__PURE__ */ jsx5(Fragment, { children: (() => {
+                        const gridTileGap = 10;
+                        const gridTileMinHeight = isMobile ? 120 : 140;
+                        const gridThumbSize = 64;
+                        const gridIconSize = 48;
+                        const gridThumbStyle = {
+                          width: gridThumbSize,
+                          height: gridThumbSize,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          flexShrink: 0
+                        };
+                        const renderGridThumb = (entry) => {
+                          if (entry.type === "folder") {
+                            return /* @__PURE__ */ jsx5(
+                              UiIcon,
+                              {
+                                icon: entry.path === `${TRASH_PATH}/` ? Trash : Folder,
+                                size: gridIconSize,
+                                weight: "fill",
+                                color: theme.text,
+                                boxed: true
+                              }
+                            );
+                          }
+                          const previewUrl = inlinePreviews[entry.path];
+                          if (previewUrl && isImageFileName(entry.name)) {
+                            return /* @__PURE__ */ jsx5(
+                              "img",
+                              {
+                                src: previewUrl,
+                                alt: entry.name,
+                                loading: "lazy",
+                                decoding: "async",
+                                style: {
+                                  width: gridThumbSize,
+                                  height: gridThumbSize,
+                                  objectFit: "cover",
+                                  borderRadius: 8,
+                                  border: `1px solid ${theme.border}`
+                                }
+                              }
+                            );
+                          }
+                          return getFileIcon(entry.name, gridIconSize);
+                        };
+                        return /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              display: "grid",
+                              gridTemplateColumns: isMobile ? "repeat(auto-fill, minmax(120px, 1fr))" : "repeat(auto-fill, minmax(140px, 1fr))",
+                              gap: 16,
+                              padding: isMobile ? 16 : 24
+                            },
+                            children: (() => {
+                              const processEntries = (entries2) => {
+                                let filtered = entries2;
+                                filtered = [...filtered].sort((a, b) => {
+                                  let comparison = 0;
+                                  const aIsTrash = view === "files" && a.type === "folder" && a.path === `${TRASH_PATH}/`;
+                                  const bIsTrash = view === "files" && b.type === "folder" && b.path === `${TRASH_PATH}/`;
+                                  if (aIsTrash !== bIsTrash) return aIsTrash ? 1 : -1;
+                                  if (a.type !== b.type) {
+                                    return a.type === "folder" ? -1 : 1;
+                                  }
+                                  switch (sortBy) {
+                                    case "name":
+                                      comparison = a.name.localeCompare(b.name);
+                                      break;
+                                    case "date":
+                                      const aDate = a.type === "file" && a.lastModified ? new Date(a.lastModified).getTime() : 0;
+                                      const bDate = b.type === "file" && b.lastModified ? new Date(b.lastModified).getTime() : 0;
+                                      comparison = aDate - bDate;
+                                      break;
+                                    case "size":
+                                      comparison = (a.type === "file" ? a.size || 0 : 0) - (b.type === "file" ? b.size || 0 : 0);
+                                      break;
+                                    case "type":
+                                      const aExt = a.name.split(".").pop()?.toLowerCase() || "";
+                                      const bExt = b.name.split(".").pop()?.toLowerCase() || "";
+                                      comparison = aExt.localeCompare(bExt);
+                                      break;
+                                  }
+                                  return sortOrder === "asc" ? comparison : -comparison;
+                                });
+                                return filtered;
+                              };
+                              const filteredEntries = processEntries(currentEntries);
+                              const selectedEntries = filteredEntries.filter(
+                                (item) => selected.has(item.path)
+                              );
+                              return filteredEntries.map((entry, index) => {
+                                const isSelected = selected.has(entry.path);
+                                const isTrashFolder = view === "files" && entry.type === "folder" && entry.path === `${TRASH_PATH}/`;
+                                const entryLabel = isTrashFolder ? "Trash" : entry.name;
+                                const isMultiSelected = selectedEntries.length > 1 && isSelected;
+                                const actionEntries = isMultiSelected ? selectedEntries : [entry];
+                                const hasContextMenuItems = !isMultiSelected && can.rename || actionEntries.some((item) => item.type === "file") || view === "files" && can.copy || isMultiSelected && view === "files" && can.move || isMultiSelected && view === "trash" && can.restore || can.delete;
+                                if (isTrashFolder) {
+                                  return /* @__PURE__ */ jsxs2(
+                                    "div",
+                                    {
+                                      "data-entry-path": entry.path,
+                                      "data-entry-selectable": "false",
+                                      style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        textAlign: "center",
+                                        gap: gridTileGap,
+                                        padding: 16,
+                                        minHeight: gridTileMinHeight,
+                                        backgroundColor: isSelected ? theme.selected : hoverRow === entry.path ? theme.hover : theme.bg,
+                                        border: `1px solid ${isSelected ? theme.accent : theme.border}`,
+                                        cursor: "pointer",
+                                        outline: "none",
+                                        transition: "all 0.15s",
+                                        position: "relative"
+                                      },
+                                      onClick: (e) => handleEntryClickWithSelection(entry, index, filteredEntries, e),
+                                      onDoubleClick: () => openEntry(entry),
+                                      onMouseEnter: () => setHoverRow(entry.path),
+                                      onMouseLeave: () => setHoverRow(null),
+                                      onTouchStart: () => {
+                                        if (!isMobile) return;
+                                        if (longPressTimerRef.current)
+                                          window.clearTimeout(longPressTimerRef.current);
+                                        longPressTimerRef.current = window.setTimeout(() => {
+                                          handleLongPressSelect(entry);
+                                        }, 350);
+                                      },
+                                      onTouchMove: () => {
+                                        if (longPressTimerRef.current) {
+                                          window.clearTimeout(longPressTimerRef.current);
+                                          longPressTimerRef.current = null;
+                                        }
+                                      },
+                                      onTouchEnd: () => {
+                                        if (longPressTimerRef.current) {
+                                          window.clearTimeout(longPressTimerRef.current);
+                                          longPressTimerRef.current = null;
+                                        }
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx5("div", { style: gridThumbStyle, children: renderGridThumb(entry) }),
+                                        /* @__PURE__ */ jsx5(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: 12,
+                                              fontWeight: 500,
+                                              wordBreak: "break-word",
+                                              color: theme.text,
+                                              width: "100%"
+                                            },
+                                            children: entryLabel
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    entry.path
+                                  );
+                                }
+                                if (!hasContextMenuItems) {
+                                  return /* @__PURE__ */ jsxs2(
+                                    "div",
+                                    {
+                                      "data-entry-path": entry.path,
+                                      "data-entry-selectable": isTrashFolder ? "false" : "true",
+                                      style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        textAlign: "center",
+                                        gap: gridTileGap,
+                                        padding: 16,
+                                        minHeight: gridTileMinHeight,
+                                        backgroundColor: isSelected ? theme.selected : hoverRow === entry.path ? theme.hover : theme.bg,
+                                        border: `1px solid ${isSelected ? theme.accent : theme.border}`,
+                                        cursor: "pointer",
+                                        outline: "none",
+                                        transition: "all 0.15s",
+                                        position: "relative"
+                                      },
+                                      onClick: (e) => handleEntryClickWithSelection(entry, index, filteredEntries, e),
+                                      onDoubleClick: () => openEntry(entry),
+                                      onMouseEnter: () => setHoverRow(entry.path),
+                                      onMouseLeave: () => setHoverRow(null),
+                                      onTouchStart: () => {
+                                        if (!isMobile) return;
+                                        if (longPressTimerRef.current)
+                                          window.clearTimeout(longPressTimerRef.current);
+                                        longPressTimerRef.current = window.setTimeout(() => {
+                                          handleLongPressSelect(entry);
+                                        }, 350);
+                                      },
+                                      onTouchMove: () => {
+                                        if (longPressTimerRef.current) {
+                                          window.clearTimeout(longPressTimerRef.current);
+                                          longPressTimerRef.current = null;
+                                        }
+                                      },
+                                      onTouchEnd: () => {
+                                        if (longPressTimerRef.current) {
+                                          window.clearTimeout(longPressTimerRef.current);
+                                          longPressTimerRef.current = null;
+                                        }
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx5("div", { style: gridThumbStyle, children: renderGridThumb(entry) }),
+                                        /* @__PURE__ */ jsx5(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: 12,
+                                              fontWeight: 500,
+                                              wordBreak: "break-word",
+                                              color: theme.text,
+                                              width: "100%"
+                                            },
+                                            children: entryLabel
+                                          }
+                                        )
+                                      ]
+                                    },
+                                    entry.path
+                                  );
+                                }
+                                return /* @__PURE__ */ jsxs2(
+                                  ContextMenu.Root,
+                                  {
+                                    onOpenChange: (open) => {
+                                      if (open) {
+                                        if (isTrashFolder) return;
+                                        if (!selected.has(entry.path)) {
+                                          setSelected(/* @__PURE__ */ new Set([entry.path]));
+                                          selectionAnchorRef.current = entry.path;
+                                          setLastSelected(null);
+                                          setIsSelectionMode(true);
+                                        }
+                                      }
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Trigger,
+                                        {
+                                          "data-entry-path": entry.path,
+                                          "data-entry-selectable": isTrashFolder ? "false" : "true",
+                                          style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            textAlign: "center",
+                                            gap: gridTileGap,
+                                            padding: 16,
+                                            minHeight: gridTileMinHeight,
+                                            backgroundColor: isSelected ? theme.selected : hoverRow === entry.path ? theme.hover : theme.bg,
+                                            border: `1px solid ${isSelected ? theme.accent : theme.border}`,
+                                            cursor: "pointer",
+                                            outline: "none",
+                                            transition: "all 0.15s",
+                                            position: "relative"
+                                          },
+                                          onClick: (e) => handleEntryClickWithSelection(entry, index, filteredEntries, e),
+                                          onDoubleClick: () => openEntry(entry),
+                                          onContextMenu: (e) => {
+                                            if (isTrashFolder) {
+                                              e.preventDefault();
+                                              e.stopPropagation();
+                                            }
+                                          },
+                                          onMouseEnter: () => setHoverRow(entry.path),
+                                          onMouseLeave: () => setHoverRow(null),
+                                          onTouchStart: () => {
+                                            if (!isMobile) return;
+                                            if (longPressTimerRef.current)
+                                              window.clearTimeout(longPressTimerRef.current);
+                                            longPressTimerRef.current = window.setTimeout(() => {
+                                              handleLongPressSelect(entry);
+                                            }, 350);
+                                          },
+                                          onTouchMove: () => {
+                                            if (longPressTimerRef.current) {
+                                              window.clearTimeout(longPressTimerRef.current);
+                                              longPressTimerRef.current = null;
+                                            }
+                                          },
+                                          onTouchEnd: () => {
+                                            if (longPressTimerRef.current) {
+                                              window.clearTimeout(longPressTimerRef.current);
+                                              longPressTimerRef.current = null;
+                                            }
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsx5("div", { style: gridThumbStyle, children: renderGridThumb(entry) }),
+                                            /* @__PURE__ */ jsx5(
+                                              "div",
+                                              {
+                                                style: {
+                                                  fontSize: 12,
+                                                  fontWeight: 500,
+                                                  wordBreak: "break-word",
+                                                  color: theme.text,
+                                                  width: "100%"
+                                                },
+                                                children: entryLabel
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx5(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx5(ContextMenu.Positioner, { style: { zIndex: 1e4 }, children: /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Popup,
+                                        {
+                                          style: {
+                                            zIndex: 1e4,
+                                            backgroundColor: theme.bg,
+                                            border: `1px solid ${theme.border}`,
+                                            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                                            padding: 4,
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            minWidth: 160,
+                                            outline: "none"
+                                          },
+                                          children: [
+                                            !isMultiSelected && can.rename && /* @__PURE__ */ jsxs2(
+                                              ContextMenu.Item,
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 10,
+                                                  padding: "8px 12px",
+                                                  border: "none",
+                                                  background: "none",
+                                                  cursor: "pointer",
+                                                  fontSize: 13,
+                                                  textAlign: "left",
+                                                  color: theme.text,
+                                                  outline: "none"
+                                                },
+                                                onClick: () => {
+                                                  setRenameName(entry.name || "");
+                                                  setRenameTarget(entry);
+                                                  setRenameOpen(true);
+                                                },
+                                                children: [
+                                                  /* @__PURE__ */ jsx5(UiIcon, { icon: PencilSimple, size: 16 }),
+                                                  " Rename"
+                                                ]
+                                              }
+                                            ),
+                                            actionEntries.some((item) => item.type === "file") && /* @__PURE__ */ jsxs2(
+                                              ContextMenu.Item,
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 10,
+                                                  padding: "8px 12px",
+                                                  border: "none",
+                                                  background: "none",
+                                                  cursor: "pointer",
+                                                  fontSize: 13,
+                                                  textAlign: "left",
+                                                  color: theme.text,
+                                                  outline: "none"
+                                                },
+                                                onClick: () => bulkDownload(actionEntries),
+                                                children: [
+                                                  /* @__PURE__ */ jsx5(UiIcon, { icon: DownloadSimple, size: 16 }),
+                                                  " Download"
+                                                ]
+                                              }
+                                            ),
+                                            isMultiSelected && view === "files" && can.move && /* @__PURE__ */ jsxs2(
+                                              ContextMenu.Item,
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 10,
+                                                  padding: "8px 12px",
+                                                  border: "none",
+                                                  background: "none",
+                                                  cursor: "pointer",
+                                                  fontSize: 13,
+                                                  textAlign: "left",
+                                                  color: theme.text,
+                                                  outline: "none"
+                                                },
+                                                onClick: () => bulkMove(actionEntries),
+                                                children: [
+                                                  /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowRight, size: 16 }),
+                                                  " Move"
+                                                ]
+                                              }
+                                            ),
+                                            view === "files" && can.copy && /* @__PURE__ */ jsxs2(
+                                              ContextMenu.Item,
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 10,
+                                                  padding: "8px 12px",
+                                                  border: "none",
+                                                  background: "none",
+                                                  cursor: "pointer",
+                                                  fontSize: 13,
+                                                  textAlign: "left",
+                                                  color: theme.text,
+                                                  outline: "none"
+                                                },
+                                                onClick: () => bulkCopy(actionEntries),
+                                                children: [
+                                                  /* @__PURE__ */ jsx5(UiIcon, { icon: Copy, size: 16 }),
+                                                  " Copy"
+                                                ]
+                                              }
+                                            ),
+                                            isMultiSelected && view === "trash" && can.restore && /* @__PURE__ */ jsxs2(
+                                              ContextMenu.Item,
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 10,
+                                                  padding: "8px 12px",
+                                                  border: "none",
+                                                  background: "none",
+                                                  cursor: "pointer",
+                                                  fontSize: 13,
+                                                  textAlign: "left",
+                                                  color: theme.text,
+                                                  outline: "none"
+                                                },
+                                                onClick: () => restoreEntries(actionEntries),
+                                                children: [
+                                                  /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowCounterClockwise, size: 16 }),
+                                                  " Restore"
+                                                ]
+                                              }
+                                            ),
+                                            can.delete && /* @__PURE__ */ jsxs2(
+                                              ContextMenu.Item,
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 10,
+                                                  padding: "8px 12px",
+                                                  border: "none",
+                                                  background: "none",
+                                                  cursor: "pointer",
+                                                  fontSize: 13,
+                                                  textAlign: "left",
+                                                  color: theme.danger,
+                                                  outline: "none"
+                                                },
+                                                onClick: () => {
+                                                  setSelected(new Set(actionEntries.map((item) => item.path)));
+                                                  setLastSelected(null);
+                                                  setIsSelectionMode(true);
+                                                  setDeleteOpen(true);
+                                                },
+                                                children: [
+                                                  /* @__PURE__ */ jsx5(UiIcon, { icon: Trash, size: 16 }),
+                                                  " Delete"
+                                                ]
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ) }) })
+                                    ]
+                                  },
+                                  entry.path
+                                );
+                              });
+                            })()
+                          }
+                        );
+                      })() })
+                    ) : (
+                      // List View
+                      (() => {
+                        const processEntries = (entries2) => {
+                          let filtered = entries2;
+                          filtered = [...filtered].sort((a, b) => {
+                            let comparison = 0;
+                            const aIsTrash = view === "files" && a.type === "folder" && a.path === `${TRASH_PATH}/`;
+                            const bIsTrash = view === "files" && b.type === "folder" && b.path === `${TRASH_PATH}/`;
+                            if (aIsTrash !== bIsTrash) return aIsTrash ? 1 : -1;
+                            if (a.type !== b.type) {
+                              return a.type === "folder" ? -1 : 1;
+                            }
+                            switch (sortBy) {
+                              case "name":
+                                comparison = a.name.localeCompare(b.name);
+                                break;
+                              case "date":
+                                const aDate = a.type === "file" && a.lastModified ? new Date(a.lastModified).getTime() : 0;
+                                const bDate = b.type === "file" && b.lastModified ? new Date(b.lastModified).getTime() : 0;
+                                comparison = aDate - bDate;
+                                break;
+                              case "size":
+                                comparison = (a.type === "file" ? a.size || 0 : 0) - (b.type === "file" ? b.size || 0 : 0);
+                                break;
+                              case "type":
+                                const aExt = a.name.split(".").pop()?.toLowerCase() || "";
+                                const bExt = b.name.split(".").pop()?.toLowerCase() || "";
+                                comparison = aExt.localeCompare(bExt);
+                                break;
+                            }
+                            return sortOrder === "asc" ? comparison : -comparison;
+                          });
+                          return filtered;
+                        };
+                        const filteredEntries = processEntries(currentEntries);
+                        const selectedEntries = filteredEntries.filter((item) => selected.has(item.path));
+                        return filteredEntries.map((entry, index) => {
+                          const isSelected = selected.has(entry.path);
+                          const isHovered = hoverRow === entry.path;
+                          const isTrashFolder = view === "files" && entry.type === "folder" && entry.path === `${TRASH_PATH}/`;
+                          const entryLabel = isTrashFolder ? "Trash" : entry.name;
+                          const isMultiSelected = selectedEntries.length > 1 && isSelected;
+                          const actionEntries = isMultiSelected ? selectedEntries : [entry];
+                          const hasContextMenuItems = !isMultiSelected && can.rename || actionEntries.some((item) => item.type === "file") || view === "files" && can.copy || isMultiSelected && view === "files" && can.move || isMultiSelected && view === "trash" && can.restore || can.delete;
+                          if (isTrashFolder) {
+                            return /* @__PURE__ */ jsxs2(
+                              "div",
+                              {
+                                "data-entry-path": entry.path,
+                                "data-entry-selectable": "false",
+                                className: FileManager_default.row,
+                                style: {
+                                  gridTemplateColumns: isMobile ? "1fr 48px" : "1fr 120px 100px 48px",
+                                  padding: isMobile ? "12px 16px" : "12px 24px",
+                                  backgroundColor: isSelected ? theme.selected : isHovered ? theme.hover : theme.bg,
+                                  outline: "none"
+                                },
+                                onClick: (e) => {
+                                  if (e.button !== 0) return;
+                                  handleEntryClickWithSelection(entry, index, filteredEntries, e);
+                                },
+                                onDoubleClick: () => openEntry(entry),
+                                onMouseEnter: () => setHoverRow(entry.path),
+                                onMouseLeave: () => setHoverRow(null),
+                                onTouchStart: () => {
+                                  if (!isMobile) return;
+                                  if (longPressTimerRef.current)
+                                    window.clearTimeout(longPressTimerRef.current);
+                                  longPressTimerRef.current = window.setTimeout(() => {
+                                    handleLongPressSelect(entry);
+                                  }, 350);
+                                },
+                                onTouchMove: () => {
+                                  if (longPressTimerRef.current) {
+                                    window.clearTimeout(longPressTimerRef.current);
+                                    longPressTimerRef.current = null;
+                                  }
+                                },
+                                onTouchEnd: () => {
+                                  if (longPressTimerRef.current) {
+                                    window.clearTimeout(longPressTimerRef.current);
+                                    longPressTimerRef.current = null;
+                                  }
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxs2(
+                                    "div",
+                                    {
+                                      style: {
+                                        display: "flex",
+                                        alignItems: isMobile ? "flex-start" : "center",
+                                        gap: 12,
+                                        fontWeight: 500,
+                                        flexDirection: isMobile ? "column" : "row"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsxs2(
+                                          "div",
+                                          {
+                                            style: {
+                                              display: "flex",
+                                              alignItems: "center",
+                                              gap: 12
+                                            },
+                                            children: [
+                                              /* @__PURE__ */ jsx5(UiIcon, { icon: Trash, size: 20, weight: "fill", color: theme.text, boxed: true }),
+                                              entryLabel
+                                            ]
+                                          }
+                                        ),
+                                        isMobile && /* @__PURE__ */ jsx5(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: 11,
+                                              color: theme.textSecondary,
+                                              fontWeight: 400
+                                            },
+                                            children: "Folder"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ),
+                                  !isMobile && /* @__PURE__ */ jsx5("div", { style: { color: theme.textSecondary }, children: "--" }),
+                                  !isMobile && /* @__PURE__ */ jsx5(
+                                    "div",
+                                    {
+                                      style: {
+                                        color: theme.textSecondary,
+                                        fontFamily: "monospace"
+                                      },
+                                      children: "--"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx5("div", {})
+                                ]
+                              },
+                              entry.path
+                            );
+                          }
+                          if (!hasContextMenuItems) {
+                            return /* @__PURE__ */ jsxs2(
+                              "div",
+                              {
+                                "data-entry-path": entry.path,
+                                "data-entry-selectable": isTrashFolder ? "false" : "true",
+                                className: FileManager_default.row,
+                                style: {
+                                  gridTemplateColumns: isMobile ? "1fr 48px" : "1fr 120px 100px 48px",
+                                  padding: isMobile ? "12px 16px" : "12px 24px",
+                                  backgroundColor: isSelected ? theme.selected : isHovered ? theme.hover : theme.bg,
+                                  outline: "none"
+                                },
+                                onClick: (e) => {
+                                  if (e.button !== 0) return;
+                                  handleEntryClickWithSelection(entry, index, filteredEntries, e);
+                                },
+                                onDoubleClick: () => openEntry(entry),
+                                onMouseEnter: () => setHoverRow(entry.path),
+                                onMouseLeave: () => setHoverRow(null),
+                                onTouchStart: () => {
+                                  if (!isMobile) return;
+                                  if (longPressTimerRef.current)
+                                    window.clearTimeout(longPressTimerRef.current);
+                                  longPressTimerRef.current = window.setTimeout(() => {
+                                    handleLongPressSelect(entry);
+                                  }, 350);
+                                },
+                                onTouchMove: () => {
+                                  if (longPressTimerRef.current) {
+                                    window.clearTimeout(longPressTimerRef.current);
+                                    longPressTimerRef.current = null;
+                                  }
+                                },
+                                onTouchEnd: () => {
+                                  if (longPressTimerRef.current) {
+                                    window.clearTimeout(longPressTimerRef.current);
+                                    longPressTimerRef.current = null;
+                                  }
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsxs2(
+                                    "div",
+                                    {
+                                      style: {
+                                        display: "flex",
+                                        alignItems: isMobile ? "flex-start" : "center",
+                                        gap: 12,
+                                        fontWeight: 500,
+                                        flexDirection: isMobile ? "column" : "row"
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsxs2(
+                                          "div",
+                                          {
+                                            style: {
+                                              display: "flex",
+                                              alignItems: "center",
+                                              gap: 12
+                                            },
+                                            children: [
+                                              entry.type === "folder" ? isTrashFolder ? /* @__PURE__ */ jsx5(
+                                                UiIcon,
+                                                {
+                                                  icon: Trash,
+                                                  size: 20,
+                                                  weight: "fill",
+                                                  color: theme.text,
+                                                  boxed: true
+                                                }
+                                              ) : /* @__PURE__ */ jsx5(
+                                                UiIcon,
+                                                {
+                                                  icon: Folder,
+                                                  size: 20,
+                                                  weight: "fill",
+                                                  color: theme.text,
+                                                  boxed: true
+                                                }
+                                              ) : (() => {
+                                                const previewUrl = inlinePreviews[entry.path];
+                                                if (previewUrl && isImageFileName(entry.name)) {
+                                                  return /* @__PURE__ */ jsx5(
+                                                    "img",
+                                                    {
+                                                      src: previewUrl,
+                                                      alt: entry.name,
+                                                      loading: "lazy",
+                                                      decoding: "async",
+                                                      style: {
+                                                        width: 20,
+                                                        height: 20,
+                                                        objectFit: "cover",
+                                                        borderRadius: 4,
+                                                        border: `1px solid ${theme.border}`
+                                                      }
+                                                    }
+                                                  );
+                                                }
+                                                return getFileIcon(entry.name);
+                                              })(),
+                                              entryLabel
+                                            ]
+                                          }
+                                        ),
+                                        isMobile && /* @__PURE__ */ jsx5(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: 11,
+                                              color: theme.textSecondary,
+                                              fontWeight: 400
+                                            },
+                                            children: entry.type === "file" ? `${entry.lastModified ? formatDate(entry.lastModified) : "--"} | ${formatBytes(entry.size || 0)}` : "Folder"
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ),
+                                  !isMobile && /* @__PURE__ */ jsx5("div", { style: { color: theme.textSecondary }, children: entry.type === "file" && entry.lastModified ? formatDate(entry.lastModified) : "--" }),
+                                  !isMobile && /* @__PURE__ */ jsx5(
+                                    "div",
+                                    {
+                                      style: {
+                                        color: theme.textSecondary,
+                                        fontFamily: "monospace"
+                                      },
+                                      children: entry.type === "file" ? formatBytes(entry.size || 0) : "--"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx5("div", {})
+                                ]
+                              },
+                              entry.path
+                            );
+                          }
+                          return /* @__PURE__ */ jsxs2(
+                            ContextMenu.Root,
+                            {
+                              onOpenChange: (open) => {
+                                if (open) {
+                                  if (isTrashFolder) return;
+                                  if (!selected.has(entry.path)) {
+                                    setSelected(/* @__PURE__ */ new Set([entry.path]));
+                                    selectionAnchorRef.current = entry.path;
+                                    setLastSelected(null);
+                                    setIsSelectionMode(true);
+                                  }
+                                }
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxs2(
+                                  ContextMenu.Trigger,
+                                  {
+                                    "data-entry-path": entry.path,
+                                    "data-entry-selectable": isTrashFolder ? "false" : "true",
+                                    ...FileManager_default.row ? { className: FileManager_default.row } : {},
+                                    style: {
+                                      gridTemplateColumns: isMobile ? "1fr 48px" : "1fr 120px 100px 48px",
+                                      padding: isMobile ? "12px 16px" : "12px 24px",
+                                      backgroundColor: isSelected ? theme.selected : isHovered ? theme.hover : theme.bg,
+                                      outline: "none"
+                                    },
+                                    onClick: (e) => {
+                                      if (e.button !== 0) return;
+                                      handleEntryClickWithSelection(entry, index, filteredEntries, e);
+                                    },
+                                    onDoubleClick: () => openEntry(entry),
+                                    onContextMenu: (e) => {
+                                      if (isTrashFolder) {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        return;
+                                      }
+                                      e.stopPropagation();
+                                    },
+                                    onMouseEnter: () => setHoverRow(entry.path),
+                                    onMouseLeave: () => setHoverRow(null),
+                                    onTouchStart: () => {
+                                      if (!isMobile) return;
+                                      if (longPressTimerRef.current)
+                                        window.clearTimeout(longPressTimerRef.current);
+                                      longPressTimerRef.current = window.setTimeout(() => {
+                                        handleLongPressSelect(entry);
+                                      }, 350);
+                                    },
+                                    onTouchMove: () => {
+                                      if (longPressTimerRef.current) {
+                                        window.clearTimeout(longPressTimerRef.current);
+                                        longPressTimerRef.current = null;
+                                      }
+                                    },
+                                    onTouchEnd: () => {
+                                      if (longPressTimerRef.current) {
+                                        window.clearTimeout(longPressTimerRef.current);
+                                        longPressTimerRef.current = null;
+                                      }
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxs2(
+                                        "div",
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: isMobile ? "flex-start" : "center",
+                                            gap: 12,
+                                            fontWeight: 500,
+                                            flexDirection: isMobile ? "column" : "row"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxs2(
+                                              "div",
+                                              {
+                                                style: {
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  gap: 12
+                                                },
+                                                children: [
+                                                  entry.type === "folder" ? isTrashFolder ? /* @__PURE__ */ jsx5(
+                                                    UiIcon,
+                                                    {
+                                                      icon: Trash,
+                                                      size: 20,
+                                                      weight: "fill",
+                                                      color: theme.text,
+                                                      boxed: true
+                                                    }
+                                                  ) : /* @__PURE__ */ jsx5(
+                                                    UiIcon,
+                                                    {
+                                                      icon: Folder,
+                                                      size: 20,
+                                                      weight: "fill",
+                                                      color: theme.text,
+                                                      boxed: true
+                                                    }
+                                                  ) : (() => {
+                                                    const previewUrl = inlinePreviews[entry.path];
+                                                    if (previewUrl && isImageFileName(entry.name)) {
+                                                      return /* @__PURE__ */ jsx5(
+                                                        "img",
+                                                        {
+                                                          src: previewUrl,
+                                                          alt: entry.name,
+                                                          loading: "lazy",
+                                                          decoding: "async",
+                                                          style: {
+                                                            width: 20,
+                                                            height: 20,
+                                                            objectFit: "cover",
+                                                            borderRadius: 4,
+                                                            border: `1px solid ${theme.border}`
+                                                          }
+                                                        }
+                                                      );
+                                                    }
+                                                    return getFileIcon(entry.name);
+                                                  })(),
+                                                  entryLabel
+                                                ]
+                                              }
+                                            ),
+                                            isMobile && /* @__PURE__ */ jsx5(
+                                              "div",
+                                              {
+                                                style: {
+                                                  fontSize: 11,
+                                                  color: theme.textSecondary,
+                                                  fontWeight: 400
+                                                },
+                                                children: entry.type === "file" ? `${entry.lastModified ? formatDate(entry.lastModified) : "--"} | ${formatBytes(entry.size || 0)}` : "Folder"
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ),
+                                      !isMobile && /* @__PURE__ */ jsx5("div", { style: { color: theme.textSecondary }, children: entry.type === "file" && entry.lastModified ? formatDate(entry.lastModified) : "--" }),
+                                      !isMobile && /* @__PURE__ */ jsx5(
+                                        "div",
+                                        {
+                                          style: {
+                                            color: theme.textSecondary,
+                                            fontFamily: "monospace"
+                                          },
+                                          children: entry.type === "file" ? formatBytes(entry.size || 0) : "--"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx5(
+                                        "div",
+                                        {
+                                          onClick: (e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                          },
+                                          children: /* @__PURE__ */ jsxs2(Menu.Root, { children: [
+                                            /* @__PURE__ */ jsx5(
+                                              Menu.Trigger,
+                                              {
+                                                style: {
+                                                  background: "none",
+                                                  border: "none",
+                                                  cursor: "pointer",
+                                                  padding: 4,
+                                                  display: "flex",
+                                                  opacity: isMobile ? 1 : isHovered ? 1 : 0,
+                                                  transition: "opacity 0.2s",
+                                                  outline: "none"
+                                                },
+                                                children: /* @__PURE__ */ jsx5(UiIcon, { icon: DotsThree, size: 24, color: theme.textSecondary })
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx5(Menu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx5(
+                                              Menu.Positioner,
+                                              {
+                                                side: "bottom",
+                                                align: "end",
+                                                sideOffset: 5,
+                                                style: { zIndex: 1e4 },
+                                                children: /* @__PURE__ */ jsxs2(
+                                                  Menu.Popup,
+                                                  {
+                                                    style: {
+                                                      zIndex: 1e4,
+                                                      backgroundColor: theme.bg,
+                                                      border: `1px solid ${theme.border}`,
+                                                      boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                                                      padding: 4,
+                                                      display: "flex",
+                                                      flexDirection: "column",
+                                                      minWidth: 160,
+                                                      outline: "none"
+                                                    },
+                                                    children: [
+                                                      !isMultiSelected && can.rename && /* @__PURE__ */ jsxs2(
+                                                        Menu.Item,
+                                                        {
+                                                          style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: 10,
+                                                            padding: "8px 12px",
+                                                            border: "none",
+                                                            background: "none",
+                                                            cursor: "pointer",
+                                                            fontSize: 13,
+                                                            textAlign: "left",
+                                                            color: theme.text,
+                                                            outline: "none"
+                                                          },
+                                                          onClick: () => {
+                                                            setRenameName(entry.name || "");
+                                                            setRenameTarget(entry);
+                                                            setRenameOpen(true);
+                                                          },
+                                                          children: [
+                                                            /* @__PURE__ */ jsx5(UiIcon, { icon: PencilSimple, size: 16 }),
+                                                            " Rename"
+                                                          ]
+                                                        }
+                                                      ),
+                                                      actionEntries.some((item) => item.type === "file") && /* @__PURE__ */ jsxs2(
+                                                        Menu.Item,
+                                                        {
+                                                          style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: 10,
+                                                            padding: "8px 12px",
+                                                            border: "none",
+                                                            background: "none",
+                                                            cursor: "pointer",
+                                                            fontSize: 13,
+                                                            textAlign: "left",
+                                                            color: theme.text,
+                                                            outline: "none"
+                                                          },
+                                                          onClick: () => bulkDownload(actionEntries),
+                                                          children: [
+                                                            /* @__PURE__ */ jsx5(UiIcon, { icon: DownloadSimple, size: 16 }),
+                                                            " Download"
+                                                          ]
+                                                        }
+                                                      ),
+                                                      isMultiSelected && view === "files" && can.move && /* @__PURE__ */ jsxs2(
+                                                        Menu.Item,
+                                                        {
+                                                          style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: 10,
+                                                            padding: "8px 12px",
+                                                            border: "none",
+                                                            background: "none",
+                                                            cursor: "pointer",
+                                                            fontSize: 13,
+                                                            textAlign: "left",
+                                                            color: theme.text,
+                                                            outline: "none"
+                                                          },
+                                                          onClick: () => bulkMove(actionEntries),
+                                                          children: [
+                                                            /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowRight, size: 16 }),
+                                                            " Move"
+                                                          ]
+                                                        }
+                                                      ),
+                                                      view === "files" && can.copy && /* @__PURE__ */ jsxs2(
+                                                        Menu.Item,
+                                                        {
+                                                          style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: 10,
+                                                            padding: "8px 12px",
+                                                            border: "none",
+                                                            background: "none",
+                                                            cursor: "pointer",
+                                                            fontSize: 13,
+                                                            textAlign: "left",
+                                                            color: theme.text,
+                                                            outline: "none"
+                                                          },
+                                                          onClick: () => bulkCopy(actionEntries),
+                                                          children: [
+                                                            /* @__PURE__ */ jsx5(UiIcon, { icon: Copy, size: 16 }),
+                                                            " Copy"
+                                                          ]
+                                                        }
+                                                      ),
+                                                      isMultiSelected && view === "trash" && can.restore && /* @__PURE__ */ jsxs2(
+                                                        Menu.Item,
+                                                        {
+                                                          style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: 10,
+                                                            padding: "8px 12px",
+                                                            border: "none",
+                                                            background: "none",
+                                                            cursor: "pointer",
+                                                            fontSize: 13,
+                                                            textAlign: "left",
+                                                            color: theme.text,
+                                                            outline: "none"
+                                                          },
+                                                          onClick: () => restoreEntries(actionEntries),
+                                                          children: [
+                                                            /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowCounterClockwise, size: 16 }),
+                                                            " Restore"
+                                                          ]
+                                                        }
+                                                      ),
+                                                      can.delete && /* @__PURE__ */ jsxs2(
+                                                        Menu.Item,
+                                                        {
+                                                          style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: 10,
+                                                            padding: "8px 12px",
+                                                            border: "none",
+                                                            background: "none",
+                                                            cursor: "pointer",
+                                                            fontSize: 13,
+                                                            textAlign: "left",
+                                                            color: theme.danger,
+                                                            outline: "none"
+                                                          },
+                                                          onClick: () => {
+                                                            setSelected(new Set(actionEntries.map((item) => item.path)));
+                                                            setLastSelected(null);
+                                                            setIsSelectionMode(true);
+                                                            setDeleteOpen(true);
+                                                          },
+                                                          children: [
+                                                            /* @__PURE__ */ jsx5(UiIcon, { icon: Trash, size: 16 }),
+                                                            " Delete"
+                                                          ]
+                                                        }
+                                                      )
+                                                    ]
+                                                  }
+                                                )
+                                              }
+                                            ) })
+                                          ] })
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx5(ContextMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx5(ContextMenu.Positioner, { style: { zIndex: 1e4 }, children: /* @__PURE__ */ jsxs2(
+                                  ContextMenu.Popup,
+                                  {
+                                    style: {
+                                      zIndex: 1e4,
+                                      backgroundColor: theme.bg,
+                                      border: `1px solid ${theme.border}`,
+                                      boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+                                      padding: 4,
+                                      display: "flex",
+                                      flexDirection: "column",
+                                      minWidth: 160,
+                                      outline: "none"
+                                    },
+                                    children: [
+                                      !isMultiSelected && can.rename && /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Item,
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: 10,
+                                            padding: "8px 12px",
+                                            border: "none",
+                                            background: "none",
+                                            cursor: "pointer",
+                                            fontSize: 13,
+                                            textAlign: "left",
+                                            color: theme.text,
+                                            outline: "none"
+                                          },
+                                          onClick: () => {
+                                            setRenameName(entry.name || "");
+                                            setRenameTarget(entry);
+                                            setRenameOpen(true);
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsx5(UiIcon, { icon: PencilSimple, size: 16 }),
+                                            " Rename"
+                                          ]
+                                        }
+                                      ),
+                                      actionEntries.some((item) => item.type === "file") && /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Item,
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: 10,
+                                            padding: "8px 12px",
+                                            border: "none",
+                                            background: "none",
+                                            cursor: "pointer",
+                                            fontSize: 13,
+                                            textAlign: "left",
+                                            color: theme.text,
+                                            outline: "none"
+                                          },
+                                          onClick: () => bulkDownload(actionEntries),
+                                          children: [
+                                            /* @__PURE__ */ jsx5(UiIcon, { icon: DownloadSimple, size: 16 }),
+                                            " Download"
+                                          ]
+                                        }
+                                      ),
+                                      isMultiSelected && view === "files" && can.move && /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Item,
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: 10,
+                                            padding: "8px 12px",
+                                            border: "none",
+                                            background: "none",
+                                            cursor: "pointer",
+                                            fontSize: 13,
+                                            textAlign: "left",
+                                            color: theme.text,
+                                            outline: "none"
+                                          },
+                                          onClick: () => bulkMove(actionEntries),
+                                          children: [
+                                            /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowRight, size: 16 }),
+                                            " Move"
+                                          ]
+                                        }
+                                      ),
+                                      view === "files" && can.copy && /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Item,
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: 10,
+                                            padding: "8px 12px",
+                                            border: "none",
+                                            background: "none",
+                                            cursor: "pointer",
+                                            fontSize: 13,
+                                            textAlign: "left",
+                                            color: theme.text,
+                                            outline: "none"
+                                          },
+                                          onClick: () => bulkCopy(actionEntries),
+                                          children: [
+                                            /* @__PURE__ */ jsx5(UiIcon, { icon: Copy, size: 16 }),
+                                            " Copy"
+                                          ]
+                                        }
+                                      ),
+                                      isMultiSelected && view === "trash" && can.restore && /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Item,
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: 10,
+                                            padding: "8px 12px",
+                                            border: "none",
+                                            background: "none",
+                                            cursor: "pointer",
+                                            fontSize: 13,
+                                            textAlign: "left",
+                                            color: theme.text,
+                                            outline: "none"
+                                          },
+                                          onClick: () => restoreEntries(actionEntries),
+                                          children: [
+                                            /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowCounterClockwise, size: 16 }),
+                                            " Restore"
+                                          ]
+                                        }
+                                      ),
+                                      can.delete && /* @__PURE__ */ jsxs2(
+                                        ContextMenu.Item,
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: 10,
+                                            padding: "8px 12px",
+                                            border: "none",
+                                            background: "none",
+                                            cursor: "pointer",
+                                            fontSize: 13,
+                                            textAlign: "left",
+                                            color: theme.danger,
+                                            outline: "none"
+                                          },
+                                          onClick: () => {
+                                            setSelected(new Set(actionEntries.map((item) => item.path)));
+                                            setLastSelected(null);
+                                            setIsSelectionMode(true);
+                                            setDeleteOpen(true);
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsx5(UiIcon, { icon: Trash, size: 16 }),
+                                            " Delete"
+                                          ]
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ) }) })
+                              ]
+                            },
+                            entry.path
+                          );
+                        });
+                      })()
+                    ),
+                    (() => {
+                      const isSearching = searchQuery.trim();
+                      const hasMoreItems = isSearching ? searchHasMore : hasMore;
+                      if (loadingMore) {
+                        return /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              padding: "20px 24px",
+                              textAlign: "center",
+                              borderTop: `1px solid ${theme.border}`,
+                              color: theme.textSecondary,
+                              fontSize: 13
+                            },
+                            children: "Loading more..."
+                          }
+                        );
+                      }
+                      if (hasMoreItems && currentEntries.length > 0) {
+                        return /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              padding: "20px 24px",
+                              textAlign: "center",
+                              borderTop: `1px solid ${theme.border}`
+                            },
+                            children: /* @__PURE__ */ jsx5(
+                              Button,
+                              {
+                                onClick: () => {
+                                  if (isSearching) {
+                                    performSearch(searchQuery, true);
+                                  } else {
+                                    refresh(true);
+                                  }
+                                },
+                                disabled: loadingMore,
+                                style: {
+                                  minWidth: 120,
+                                  opacity: loadingMore ? 0.6 : 1
+                                },
+                                theme,
+                                children: "Load More"
+                              }
+                            )
+                          }
+                        );
+                      }
+                      return null;
+                    })(),
+                    (() => {
+                      if (currentEntries.length === 0 && !loading && !searching) {
+                        return /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              padding: 40,
+                              textAlign: "center",
+                              color: theme.textSecondary
+                            },
+                            children: searchQuery.trim() ? `No results found for "${searchQuery}"` : view === "trash" ? "Trash is empty" : /* @__PURE__ */ jsxs2("div", { children: [
+                              /* @__PURE__ */ jsx5("div", { style: { marginBottom: 16 }, children: "No files found" }),
+                              can.upload && view === "files" && /* @__PURE__ */ jsxs2(
+                                "div",
+                                {
+                                  style: {
+                                    fontSize: 12,
+                                    opacity: 0.7,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: 8
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx5(UiIcon, { icon: UploadSimple, size: 16 }),
+                                    "Drag and drop files here or click Upload"
+                                  ]
+                                }
+                              )
+                            ] })
+                          }
+                        );
+                      }
+                      return null;
+                    })()
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        showSidebarOnLayout && previewDisplay && /* @__PURE__ */ jsx5(
+          Dialog2.Root,
+          {
+            open: !!previewDisplay,
+            onOpenChange: (open) => {
+              if (!open) {
+                setSelected(/* @__PURE__ */ new Set());
+                setLastSelected(null);
+              }
+            },
+            children: /* @__PURE__ */ jsxs2(Dialog2.Portal, { container: previewPortalContainer, children: [
+              /* @__PURE__ */ jsx5(
+                Dialog2.Backdrop,
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    backgroundColor: "rgba(0,0,0,0.04)",
+                    zIndex: 9,
+                    pointerEvents: "auto"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                Dialog2.Popup,
+                {
+                  ...FileManager_default.sidebarRight ? { className: FileManager_default.sidebarRight } : {},
+                  style: {
+                    backgroundColor: theme.bg,
+                    borderLeft: isSidebarVisible ? `1px solid ${theme.border}` : "none",
+                    animation: isPreviewClosing ? "tokoPreviewSlideOut 200ms ease-in" : "tokoPreviewSlideIn 200ms ease-out",
+                    opacity: isSidebarVisible ? 1 : 0,
+                    pointerEvents: isPreviewClosing ? "none" : isSidebarVisible ? "auto" : "none",
+                    width: sidebarWidth,
+                    ...isSidebarVisible ? {
+                      boxShadow: "0 0 0 1px rgba(0,0,0,0.03), -8px 0 24px rgba(0,0,0,0.08)"
+                    } : {}
+                  },
+                  children: [
+                    isSidebarVisible && /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        onMouseDown: (e) => {
+                          e.preventDefault();
+                          setIsResizing(true);
+                          updateSidebarWidth(e.clientX);
+                        },
+                        onTouchStart: (e) => {
+                          const touch = e.touches[0];
+                          if (!touch) return;
+                          setIsResizing(true);
+                          updateSidebarWidth(touch.clientX);
+                        },
+                        style: {
+                          position: "absolute",
+                          left: 0,
+                          top: 0,
+                          bottom: 0,
+                          width: 8,
+                          cursor: "col-resize",
+                          zIndex: 2,
+                          background: isResizing ? "rgba(0,0,0,0.06)" : "transparent"
+                        },
+                        "aria-hidden": true,
+                        children: /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              position: "absolute",
+                              left: 3,
+                              top: 0,
+                              bottom: 0,
+                              width: 2,
+                              backgroundColor: isResizing ? theme.textSecondary : theme.border,
+                              opacity: 0.4
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5(
+                      Dialog2.Close,
+                      {
+                        style: {
+                          position: "absolute",
+                          top: 8,
+                          right: 8,
+                          zIndex: 3,
+                          background: theme.bg,
+                          border: `1px solid ${theme.border}`,
+                          borderRadius: 4,
+                          padding: 4,
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          color: theme.textSecondary
+                        },
+                        "aria-label": "Close preview",
+                        title: "Close preview",
+                        children: /* @__PURE__ */ jsx5(UiIcon, { icon: X2, size: 16 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5("div", { className: FileManager_default.previewBox, children: ["jpg", "png", "gif", "jpeg", "webp"].some(
+                      (ext) => previewDisplay.entry.path.toLowerCase().endsWith(ext)
+                    ) ? /* @__PURE__ */ jsx5(
+                      "img",
+                      {
+                        src: previewDisplay.url,
+                        alt: "preview",
+                        style: {
+                          maxWidth: "100%",
+                          maxHeight: "100%",
+                          objectFit: "contain"
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsx5(UiIcon, { icon: FileText2, size: 64, weight: "thin", color: theme.textSecondary }) }),
+                    /* @__PURE__ */ jsxs2("div", { className: FileManager_default.metadata, style: { color: theme.text }, children: [
+                      /* @__PURE__ */ jsx5(
+                        "h3",
+                        {
+                          style: {
+                            margin: "0 0 20px",
+                            fontSize: 16,
+                            fontWeight: 600,
+                            color: theme.text
+                          },
+                          children: previewDisplay.entry.name
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2(
+                        "div",
+                        {
+                          style: {
+                            display: "grid",
+                            gridTemplateColumns: "1fr 1fr",
+                            gap: 20
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs2("div", { className: FileManager_default.metaItem, children: [
+                              /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaLabel, children: "Type" }),
+                              /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaValue, children: previewDisplay.entry.name.split(".").pop()?.toUpperCase() || "FILE" })
+                            ] }),
+                            /* @__PURE__ */ jsxs2("div", { className: FileManager_default.metaItem, children: [
+                              /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaLabel, children: "Size" }),
+                              /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaValue, children: previewDisplay.entry.type === "file" ? formatBytes(previewDisplay.entry.size || 0) : "0 B" })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2("div", { className: FileManager_default.metaItem, children: [
+                        /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaLabel, children: "Location" }),
+                        /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaValue, children: getParentPath(previewDisplay.entry.path) || "/" })
+                      ] }),
+                      /* @__PURE__ */ jsxs2("div", { className: FileManager_default.metaItem, children: [
+                        /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaLabel, children: "Modified" }),
+                        /* @__PURE__ */ jsx5("div", { className: FileManager_default.metaValue, children: previewDisplay.entry.type === "file" && previewDisplay.entry.lastModified ? new Date(previewDisplay.entry.lastModified).toLocaleString() : "--" })
+                      ] }),
+                      /* @__PURE__ */ jsx5(
+                        "div",
+                        {
+                          style: {
+                            marginTop: 20,
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 8
+                          },
+                          children: view === "files" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                            /* @__PURE__ */ jsxs2(
+                              Button,
+                              {
+                                style: { width: "100%", justifyContent: "center" },
+                                theme,
+                                onClick: async () => {
+                                  try {
+                                    const out = await client.getPreviewUrl({
+                                      path: previewDisplay.entry.path,
+                                      inline: false
+                                    });
+                                    const link = document.createElement("a");
+                                    link.href = out.url;
+                                    link.download = previewDisplay.entry.name;
+                                    document.body.appendChild(link);
+                                    link.click();
+                                    document.body.removeChild(link);
+                                  } catch (e) {
+                                    console.error(e);
+                                  }
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx5(UiIcon, { icon: DownloadSimple, size: 16 }),
+                                  " Download"
+                                ]
+                              }
+                            ),
+                            can.delete && /* @__PURE__ */ jsxs2(
+                              Button,
+                              {
+                                variant: "danger",
+                                onClick: () => {
+                                  setSelected(/* @__PURE__ */ new Set([previewDisplay.entry.path]));
+                                  setLastSelected(previewDisplay.entry);
+                                  setDeleteOpen(true);
+                                },
+                                style: { width: "100%", justifyContent: "center" },
+                                theme,
+                                children: [
+                                  /* @__PURE__ */ jsx5(UiIcon, { icon: Trash, size: 16 }),
+                                  " Delete"
+                                ]
+                              }
+                            )
+                          ] }) : /* @__PURE__ */ jsxs2(
+                            Button,
+                            {
+                              onClick: onRestore,
+                              style: { width: "100%", justifyContent: "center" },
+                              theme,
+                              children: [
+                                /* @__PURE__ */ jsx5(UiIcon, { icon: ArrowCounterClockwise, size: 16 }),
+                                " Restore"
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Modal,
+          {
+            open: createFolderOpen,
+            onClose: () => setCreateFolderOpen(false),
+            title: "New Folder",
+            theme,
+            ...portalContainer ? { portalContainer } : {},
+            children: [
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Name",
+                  value: newFolderName,
+                  onChange: (e) => setNewFolderName(e.target.value),
+                  onKeyDown: (e) => e.key === "Enter" && onCreateFolder(),
+                  style: {
+                    width: "100%",
+                    padding: "10px",
+                    fontSize: 14,
+                    border: `1px solid ${theme.border}`,
+                    outline: "none",
+                    backgroundColor: theme.bg,
+                    color: theme.text
+                  },
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    marginTop: 20,
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(Button, { onClick: () => setCreateFolderOpen(false), theme, children: "Cancel" }),
+                    /* @__PURE__ */ jsx5(Button, { variant: "primary", onClick: onCreateFolder, theme, children: "Create Folder" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Modal,
+          {
+            open: renameOpen,
+            onClose: () => {
+              if (isRenaming) return;
+              setRenameOpen(false);
+              setRenameTarget(null);
+            },
+            title: "Rename",
+            theme,
+            ...portalContainer ? { portalContainer } : {},
+            closeDisabled: isRenaming,
+            children: [
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Name",
+                  value: renameName,
+                  onChange: (e) => setRenameName(e.target.value),
+                  onKeyDown: (e) => e.key === "Enter" && onRename(),
+                  style: {
+                    width: "100%",
+                    padding: "10px",
+                    fontSize: 14,
+                    border: `1px solid ${theme.border}`,
+                    outline: "none",
+                    backgroundColor: theme.bg,
+                    color: theme.text
+                  },
+                  disabled: isRenaming,
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    marginTop: 20,
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(Button, { onClick: () => setRenameOpen(false), theme, disabled: isRenaming, children: "Cancel" }),
+                    /* @__PURE__ */ jsx5(Button, { variant: "primary", onClick: onRename, theme, disabled: isRenaming, children: isRenaming ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                      /* @__PURE__ */ jsx5("span", { className: FileManager_default.spinner }),
+                      "Renaming..."
+                    ] }) : "Rename" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Modal,
+          {
+            open: deleteOpen,
+            onClose: () => setDeleteOpen(false),
+            title: view === "trash" ? "Delete Forever" : "Delete items",
+            theme,
+            ...portalContainer ? { portalContainer } : {},
+            closeDisabled: isDeleting,
+            children: [
+              /* @__PURE__ */ jsxs2("p", { style: { margin: "0 0 20px", color: theme.textSecondary }, children: [
+                "Are you sure you want to ",
+                view === "trash" ? "permanently" : "",
+                " delete ",
+                selected.size,
+                " ",
+                "item",
+                selected.size > 1 ? "s" : "",
+                "?",
+                view === "files" && " (Items will be moved to Trash)"
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
+                /* @__PURE__ */ jsx5(Button, { onClick: () => setDeleteOpen(false), theme, disabled: isDeleting, children: "Cancel" }),
+                /* @__PURE__ */ jsx5(Button, { variant: "danger", onClick: onDelete, theme, disabled: isDeleting, children: isDeleting ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                  /* @__PURE__ */ jsx5("span", { className: FileManager_default.spinner }),
+                  "Deleting..."
+                ] }) : "Delete" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Modal,
+          {
+            open: emptyTrashOpen,
+            onClose: () => setEmptyTrashOpen(false),
+            title: "Empty Trash",
+            theme,
+            ...portalContainer ? { portalContainer } : {},
+            closeDisabled: isEmptyingTrash,
+            children: [
+              /* @__PURE__ */ jsx5("p", { style: { margin: "0 0 20px", color: theme.textSecondary }, children: "Are you sure you want to empty the trash? All items will be permanently deleted." }),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
+                /* @__PURE__ */ jsx5(Button, { onClick: () => setEmptyTrashOpen(false), theme, disabled: isEmptyingTrash, children: "Cancel" }),
+                /* @__PURE__ */ jsx5(Button, { variant: "danger", onClick: onEmptyTrash, theme, disabled: isEmptyingTrash, children: isEmptyingTrash ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                  /* @__PURE__ */ jsx5("span", { className: FileManager_default.spinner }),
+                  "Emptying..."
+                ] }) : "Empty Trash" })
+              ] })
+            ]
+          }
+        ),
+        isDragOver && view === "files" && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: theme.bg === "#ffffff" ? "rgba(0, 0, 0, 0.05)" : "rgba(255, 255, 255, 0.05)",
+              backdropFilter: "blur(2px)",
+              zIndex: 1e3,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: `2px dashed ${theme.accent}`,
+              margin: 4,
+              animation: "fadeIn 0.2s ease-in-out"
+            },
+            children: /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                style: {
+                  textAlign: "center",
+                  padding: 40,
+                  backgroundColor: theme.bg,
+                  border: `1px solid ${theme.border}`,
+                  color: theme.text,
+                  fontSize: 16,
+                  fontWeight: 500,
+                  transform: "scale(1.02)",
+                  transition: "transform 0.2s ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsx5(UiIcon, { icon: UploadSimple, size: 48, boxStyle: { marginBottom: 16, opacity: 0.7 } }),
+                  /* @__PURE__ */ jsx5("div", { children: "Drop files here to upload" }),
+                  /* @__PURE__ */ jsxs2("div", { style: { fontSize: 13, color: theme.textSecondary, marginTop: 8 }, children: [
+                    "Files will be uploaded to ",
+                    path || "root directory"
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        uploadCardOpen && (() => {
+          const totalItems = uploadItems.length;
+          const activeItems = uploadItems.filter((item) => item.status === "uploading");
+          const completedItems = uploadItems.filter((item) => item.status === "done");
+          const failedItems = uploadItems.filter((item) => item.status === "error");
+          const totalBytes = uploadItems.reduce((acc, item) => acc + (item.total || 0), 0);
+          const loadedBytes = uploadItems.reduce((acc, item) => acc + (item.loaded || 0), 0);
+          const totalPct = totalBytes > 0 ? Math.round(loadedBytes / totalBytes * 100) : 0;
+          const hasActiveUploads = activeItems.length > 0;
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                right: 16,
+                bottom: 16,
+                width: 340,
+                maxWidth: "calc(100% - 32px)",
+                backgroundColor: theme.bg,
+                border: `1px solid ${theme.border}`,
+                boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+                padding: 14,
+                zIndex: 1200
+              },
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      marginBottom: 10
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx5("div", { style: { fontSize: 12, fontWeight: 600 }, children: hasActiveUploads ? `Uploading ${completedItems.length}/${totalItems}` : "Uploads complete" }),
+                      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                        /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: theme.textSecondary }, children: [
+                          totalItems,
+                          " file",
+                          totalItems !== 1 ? "s" : "",
+                          " \u2022 ",
+                          totalPct,
+                          "%"
+                        ] }),
+                        /* @__PURE__ */ jsx5(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setUploadCardOpen(false),
+                            disabled: hasActiveUploads,
+                            style: {
+                              background: "none",
+                              border: "none",
+                              cursor: hasActiveUploads ? "not-allowed" : "pointer",
+                              padding: 2,
+                              display: "flex",
+                              alignItems: "center",
+                              color: theme.textSecondary,
+                              opacity: hasActiveUploads ? 0.5 : 1
+                            },
+                            title: hasActiveUploads ? "Uploads in progress" : "Close",
+                            children: /* @__PURE__ */ jsx5(UiIcon, { icon: X2, size: 14 })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ),
+                totalItems > 1 && /* @__PURE__ */ jsx5(
+                  "div",
+                  {
+                    style: {
+                      height: 6,
+                      backgroundColor: theme.bgSecondary,
+                      borderRadius: 999,
+                      overflow: "hidden",
+                      marginBottom: 10
+                    },
+                    children: /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        style: {
+                          height: "100%",
+                          width: `${totalPct}%`,
+                          backgroundColor: theme.accent,
+                          transition: "width 120ms linear"
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 8,
+                      maxHeight: 220,
+                      overflow: "auto"
+                    },
+                    children: [
+                      uploadItems.map((item) => {
+                        const pct = item.total ? Math.round(item.loaded / item.total * 100) : 0;
+                        const statusColor = item.status === "error" ? theme.danger : item.status === "done" ? theme.text : theme.textSecondary;
+                        return /* @__PURE__ */ jsxs2(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 6
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs2(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "baseline",
+                                    gap: 10
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx5(
+                                      "div",
+                                      {
+                                        style: {
+                                          flex: 1,
+                                          fontSize: 12,
+                                          color: theme.textSecondary,
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: item.name
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs2("div", { style: { fontSize: 11, color: theme.textSecondary }, children: [
+                                      formatBytes(item.loaded),
+                                      item.total ? ` / ${formatBytes(item.total)}` : ""
+                                    ] }),
+                                    /* @__PURE__ */ jsxs2(
+                                      "div",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          gap: 8,
+                                          justifyContent: "flex-end",
+                                          minWidth: 90
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx5(
+                                            "div",
+                                            {
+                                              style: {
+                                                fontSize: 12,
+                                                color: statusColor,
+                                                minWidth: 42,
+                                                textAlign: "right"
+                                              },
+                                              children: item.status === "error" ? "Error" : `${pct}%`
+                                            }
+                                          ),
+                                          item.status === "error" && item.file && /* @__PURE__ */ jsx5(
+                                            "button",
+                                            {
+                                              type: "button",
+                                              onClick: () => retryUpload(item),
+                                              style: {
+                                                background: theme.bg,
+                                                border: `1px solid ${theme.border}`,
+                                                color: theme.text,
+                                                fontSize: 11,
+                                                padding: "4px 8px",
+                                                cursor: "pointer"
+                                              },
+                                              children: "Retry"
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx5(
+                                "div",
+                                {
+                                  style: {
+                                    width: "100%",
+                                    height: 6,
+                                    backgroundColor: theme.bgSecondary,
+                                    borderRadius: 999,
+                                    overflow: "hidden"
+                                  },
+                                  children: /* @__PURE__ */ jsx5(
+                                    "div",
+                                    {
+                                      style: {
+                                        height: "100%",
+                                        width: `${item.status === "error" ? 100 : pct}%`,
+                                        backgroundColor: item.status === "error" ? theme.danger : theme.accent,
+                                        transition: "width 120ms linear"
+                                      }
+                                    }
+                                  )
+                                }
+                              ),
+                              item.status === "error" && item.error && /* @__PURE__ */ jsx5("div", { style: { fontSize: 11, color: theme.danger }, children: item.error })
+                            ]
+                          },
+                          item.path
+                        );
+                      }),
+                      failedItems.length > 0 && /* @__PURE__ */ jsxs2("div", { style: { fontSize: 11, color: theme.danger }, children: [
+                        failedItems.length,
+                        " upload",
+                        failedItems.length !== 1 ? "s" : "",
+                        " failed"
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          );
+        })(),
+        isDragOver && view === "trash" && /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: theme.bg === "#ffffff" ? "rgba(220, 38, 38, 0.1)" : "rgba(239, 68, 68, 0.1)",
+              backdropFilter: "blur(2px)",
+              zIndex: 1e3,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: `2px dashed ${theme.danger}`,
+              margin: 4
+            },
+            children: /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                style: {
+                  textAlign: "center",
+                  padding: 40,
+                  backgroundColor: theme.bg,
+                  border: `1px solid ${theme.border}`,
+                  color: theme.danger,
+                  fontSize: 16,
+                  fontWeight: 500
+                },
+                children: [
+                  /* @__PURE__ */ jsx5(UiIcon, { icon: Warning, size: 48, boxStyle: { marginBottom: 16, opacity: 0.7 } }),
+                  /* @__PURE__ */ jsx5("div", { children: "Cannot upload to trash" }),
+                  /* @__PURE__ */ jsx5("div", { style: { fontSize: 13, color: theme.textSecondary, marginTop: 8 }, children: "Switch to files view to upload" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx5("div", { ref: previewPortalRef, className: FileManager_default.previewPortal })
+      ]
+    }
+  );
+}
+
+// src/react/FilePicker.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function FilePicker({
+  selection = "single",
+  allowActions,
+  confirmLabel = "Select",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    FileManager,
+    {
+      ...props,
+      mode: "picker",
+      selection,
+      confirmLabel,
+      allowActions: {
+        upload: true,
+        createFolder: true,
+        delete: false,
+        rename: false,
+        move: false,
+        copy: false,
+        restore: false,
+        ...allowActions
+      }
+    }
+  );
+}
+export {
+  FileManager,
+  FilePicker
+};
+//# sourceMappingURL=index.js.map