@vryzel/file-next-ui 0.4.4 → 0.5.0

package/dist/index.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactVirtual = require('@tanstack/react-virtual');
 
 // src/file-explorer.tsx
 function cn(...inputs) {
@@ -129,11 +130,17 @@ var defaultLabels = {
   clearClipboard: "Clear clipboard",
   uploadStatus: "uploading",
   dismissUploads: "Dismiss uploads",
+  cancelQueue: "Cancel queue",
+  removeUpload: "Remove from queue",
   uploadQueued: "Queued",
   uploadDone: "Done",
   uploadFailed: "Failed",
   unknownType: "Unknown type",
-  previewUnavailable: "Preview is not available for this file."
+  previewUnavailable: "Preview is not available for this file.",
+  closePreview: "Close preview",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  zoomFit: "Fit"
 };
 var LabelsContext = react.createContext(defaultLabels);
 function ExplorerLabelsProvider({
@@ -282,6 +289,39 @@ function useExplorerItemPointer(opts) {
   }, [coarse, file, onActivate]);
   return { onPointerDown, onClick, onDoubleClick };
 }
+function shouldLoadMore(input) {
+  const threshold = input.threshold ?? 8;
+  if (!input.hasMore || input.loading || input.loaded === 0) return false;
+  if (input.lastIndex === void 0) return false;
+  return input.lastIndex >= input.loaded - 1 - threshold;
+}
+function gridColumnCount(width) {
+  if (width < 640) return 3;
+  if (width < 768) return 5;
+  if (width < 1024) return 6;
+  return 8;
+}
+function selectionEdgeIndex(files, selectedIds, previous) {
+  let minPrev = Number.POSITIVE_INFINITY;
+  const added = [];
+  for (let i = 0; i < files.length; i++) {
+    const id = files[i]?.id;
+    if (!id) continue;
+    if (previous.has(id) && i < minPrev) minPrev = i;
+    if (selectedIds.has(id) && !previous.has(id)) added.push(i);
+  }
+  const minAdded = added[0];
+  const maxAdded = added[added.length - 1];
+  if (minAdded === void 0 || maxAdded === void 0) return -1;
+  return minAdded < minPrev ? minAdded : maxAdded;
+}
+function useLoadMoreOnEnd(input) {
+  const { lastIndex, loaded, hasMore, loading, onLoadMore } = input;
+  react.useEffect(() => {
+    if (!onLoadMore) return;
+    if (shouldLoadMore({ lastIndex, loaded, hasMore, loading })) onLoadMore();
+  }, [hasMore, lastIndex, loaded, loading, onLoadMore]);
+}
 var ROW_GRID = "grid-cols-[2.25rem_1.5rem_minmax(12rem,1fr)_5rem_2.75rem] sm:grid-cols-[2.25rem_1.25rem_minmax(0,1fr)_5rem_7.5rem]";
 var DRAG_MIME = "application/x-file-next-id";
 function ExplorerListView(props) {
@@ -305,58 +345,123 @@ function ExplorerListView(props) {
     renamingId,
     onRenameCommit,
     onRenameCancel,
-    className
+    className,
+    scrollRef: scrollRefProp,
+    hasMore = false,
+    loadingMore = false,
+    onLoadMore
   } = props;
   const labels = useExplorerLabels();
   const coarse = useCoarsePointer();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-x-auto overscroll-x-contain", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-[32rem] sm:min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        role: "row",
-        className: cn(
-          "grid items-center gap-3 border-b border-border px-3 py-2 font-mono text-[10px] font-medium uppercase tracking-[0.12em] text-muted-foreground",
-          ROW_GRID
+  const ownScrollRef = react.useRef(null);
+  const scrollRef = scrollRefProp ?? ownScrollRef;
+  const headerRef = react.useRef(null);
+  const [scrollMargin, setScrollMargin] = react.useState(0);
+  react.useLayoutEffect(() => {
+    const header = headerRef.current;
+    if (!header) return;
+    const measure = () => setScrollMargin(header.offsetHeight);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(header);
+    return () => observer.disconnect();
+  }, []);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: files.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => coarse ? 64 : 44,
+    overscan: 8,
+    scrollMargin,
+    scrollPaddingStart: scrollMargin,
+    getItemKey: (index) => files[index]?.id ?? index,
+    initialRect: { width: 800, height: 600 }
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  useLoadMoreOnEnd({
+    lastIndex: virtualItems.at(-1)?.index,
+    loaded: files.length,
+    hasMore,
+    loading: loadingMore,
+    onLoadMore
+  });
+  const prevSelected = react.useRef(selectedIds);
+  react.useEffect(() => {
+    const index = renamingId ? files.findIndex((file) => file.id === renamingId) : selectionEdgeIndex(files, selectedIds, prevSelected.current);
+    prevSelected.current = selectedIds;
+    if (index < 0) return;
+    virtualizer.scrollToIndex(index, { align: "auto" });
+  }, [renamingId, selectedIds]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: scrollRefProp ? void 0 : ownScrollRef,
+      className: cn(
+        !scrollRefProp && "min-h-0 flex-1 overflow-y-auto overflow-x-auto overscroll-x-contain",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-[32rem] sm:min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: headerRef,
+            role: "row",
+            className: cn(
+              "sticky top-0 z-10 grid items-center gap-3 border-b border-border bg-background px-3 py-2 font-mono text-[10px] font-medium uppercase tracking-[0.12em] text-muted-foreground",
+              ROW_GRID
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx(SortHeader, { col: "name", label: labels.sortName, sortKey, sortDirection, onSort: onSortChange }),
+              /* @__PURE__ */ jsxRuntime.jsx(SortHeader, { col: "size", label: labels.sortSize, sortKey, sortDirection, onSort: onSortChange, className: "justify-end text-right" }),
+              coarse ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(SortHeader, { col: "modified", label: labels.sortModified, sortKey, sortDirection, onSort: onSortChange, className: "hidden sm:flex" })
+            ]
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx(SortHeader, { col: "name", label: labels.sortName, sortKey, sortDirection, onSort: onSortChange }),
-          /* @__PURE__ */ jsxRuntime.jsx(SortHeader, { col: "size", label: labels.sortSize, sortKey, sortDirection, onSort: onSortChange, className: "justify-end text-right" }),
-          coarse ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(SortHeader, { col: "modified", label: labels.sortModified, sortKey, sortDirection, onSort: onSortChange, className: "hidden sm:flex" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", children: files.map((file, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      ExplorerListRow,
-      {
-        file,
-        idx,
-        selected: selectedIds.has(file.id),
-        dragging: draggingIds?.has(file.id) ?? file.id === draggingId,
-        dropTarget: file.id === dropTargetId && file.kind === "folder",
-        isProtected: protectedIds?.has(file.id) ?? false,
-        draggingId,
-        dropTargetId,
-        coarse,
-        onSelect,
-        onActivate,
-        onContextMenu,
-        onDragStart,
-        onDragEnd,
-        onDrop,
-        onDragOverRow,
-        renaming: file.id === renamingId,
-        onRenameCommit,
-        onRenameCancel
-      },
-      file.id
-    )) })
-  ] }) });
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: "relative z-0 w-full", style: { height: virtualizer.getTotalSize() }, children: virtualItems.map((virtualRow) => {
+          const file = files[virtualRow.index];
+          if (!file) return null;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ExplorerListRow,
+            {
+              file,
+              idx: virtualRow.index,
+              dataIndex: virtualRow.index,
+              measureRef: virtualizer.measureElement,
+              translateY: virtualRow.start - virtualizer.options.scrollMargin,
+              selected: selectedIds.has(file.id),
+              dragging: draggingIds?.has(file.id) ?? file.id === draggingId,
+              dropTarget: file.id === dropTargetId && file.kind === "folder",
+              isProtected: protectedIds?.has(file.id) ?? false,
+              draggingId,
+              dropTargetId,
+              coarse,
+              onSelect,
+              onActivate,
+              onContextMenu,
+              onDragStart,
+              onDragEnd,
+              onDrop,
+              onDragOverRow,
+              renaming: file.id === renamingId,
+              onRenameCommit,
+              onRenameCancel
+            },
+            virtualRow.key
+          );
+        }) }),
+        loadingMore ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-3 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : null
+      ] })
+    }
+  );
 }
 function ExplorerListRow({
   file,
   idx,
+  dataIndex,
+  measureRef,
+  translateY,
   selected,
   dragging,
   dropTarget,
@@ -383,6 +488,8 @@ function ExplorerListRow({
     {
       role: "row",
       "data-file-id": file.id,
+      "data-index": dataIndex,
+      ref: measureRef,
       "aria-selected": selected,
       draggable: !coarse && !renaming,
       onDragStart: (e) => {
@@ -424,8 +531,9 @@ function ExplorerListRow({
         else onDragEnd();
       },
       tabIndex: 0,
+      style: { transform: `translateY(${translateY}px)` },
       className: cn(
-        "group grid items-center gap-3 border-b border-border/60 px-3 py-3.5 text-sm outline-none last:border-b-0 sm:py-2",
+        "absolute left-0 top-0 grid w-full items-center gap-3 border-b border-border/60 px-3 py-3.5 text-sm outline-none sm:py-2",
         "touch-manipulation select-none [-webkit-touch-callout:none]",
         ROW_GRID,
         "hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
@@ -508,6 +616,7 @@ var formatSize = (bytes) => {
 };
 var formatDate = (d) => d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
 var EXPLORER_DRAG_MIME = DRAG_MIME;
+var GRID_PAD = 12;
 function ExplorerGridView(props) {
   const {
     files,
@@ -526,38 +635,116 @@ function ExplorerGridView(props) {
     renamingId,
     onRenameCommit,
     onRenameCancel,
-    className
+    className,
+    scrollRef: scrollRefProp,
+    hasMore = false,
+    loadingMore = false,
+    onLoadMore
   } = props;
   const labels = useExplorerLabels();
   const coarse = useCoarsePointer();
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "list", className: cn("grid grid-cols-3 gap-1.5 p-3 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8", className), children: files.map((file, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-    ExplorerGridItem,
+  const ownScrollRef = react.useRef(null);
+  const scrollRef = scrollRefProp ?? ownScrollRef;
+  const [width, setWidth] = react.useState(null);
+  react.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const measure = () => setWidth(el.clientWidth);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [scrollRef]);
+  const columns = width != null && width > 0 ? gridColumnCount(width) : 6;
+  const rowCount = Math.ceil(files.length / columns);
+  const virtualizer = reactVirtual.useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 156,
+    overscan: 4,
+    gap: 6,
+    // ponytail: gap-1.5 at 16px root
+    scrollMargin: GRID_PAD,
+    getItemKey: (index) => files[index * columns]?.id ?? index,
+    initialRect: { width: 800, height: 600 }
+  });
+  const virtualRows = virtualizer.getVirtualItems();
+  const viewportEnd = (virtualizer.scrollOffset ?? 0) + (virtualizer.scrollRect?.height ?? 0);
+  const lastVisibleRow = virtualRows.filter((row) => row.start < viewportEnd).at(-1);
+  useLoadMoreOnEnd({
+    lastIndex: lastVisibleRow ? Math.min(files.length - 1, (lastVisibleRow.index + 1) * columns - 1) : void 0,
+    loaded: files.length,
+    hasMore,
+    loading: loadingMore,
+    onLoadMore
+  });
+  const prevSelected = react.useRef(selectedIds);
+  react.useEffect(() => {
+    const itemIndex = renamingId ? files.findIndex((file) => file.id === renamingId) : selectionEdgeIndex(files, selectedIds, prevSelected.current);
+    prevSelected.current = selectedIds;
+    if (itemIndex < 0) return;
+    virtualizer.scrollToIndex(Math.floor(itemIndex / columns), { align: "auto" });
+  }, [renamingId, selectedIds]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      file,
-      idx,
-      selected: selectedIds.has(file.id),
-      dragging: draggingIds?.has(file.id) ?? file.id === draggingId,
-      dropTarget: file.id === dropTargetId && file.kind === "folder",
-      isProtected: protectedIds?.has(file.id) ?? false,
-      draggingId,
-      dropTargetId,
-      coarse,
-      folderLabel: labels.folder,
-      inUseLabel: labels.inUse,
-      actionsLabel: labels.itemActions,
-      onSelect,
-      onActivate,
-      onContextMenu,
-      onDragStart,
-      onDragEnd,
-      onDrop,
-      onDragOverRow,
-      renaming: file.id === renamingId,
-      onRenameCommit,
-      onRenameCancel
-    },
-    file.id
-  )) });
+      ref: scrollRefProp ? void 0 : ownScrollRef,
+      className: cn(!scrollRefProp && "min-h-0 flex-1 overflow-y-auto", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "list", className: "pt-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", className: "relative z-0 w-full", style: { height: virtualizer.getTotalSize() }, children: virtualRows.map((virtualRow) => {
+            const start = virtualRow.index * columns;
+            const rowFiles = files.slice(start, start + columns);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                role: "presentation",
+                "data-index": virtualRow.index,
+                ref: virtualizer.measureElement,
+                className: "absolute left-0 top-0 grid w-full gap-1.5 px-3",
+                style: {
+                  gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+                  transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`
+                },
+                children: rowFiles.map((file, offset) => /* @__PURE__ */ jsxRuntime.jsx(
+                  ExplorerGridItem,
+                  {
+                    file,
+                    idx: start + offset,
+                    selected: selectedIds.has(file.id),
+                    dragging: draggingIds?.has(file.id) ?? file.id === draggingId,
+                    dropTarget: file.id === dropTargetId && file.kind === "folder",
+                    isProtected: protectedIds?.has(file.id) ?? false,
+                    draggingId,
+                    dropTargetId,
+                    coarse,
+                    folderLabel: labels.folder,
+                    inUseLabel: labels.inUse,
+                    actionsLabel: labels.itemActions,
+                    onSelect,
+                    onActivate,
+                    onContextMenu,
+                    onDragStart,
+                    onDragEnd,
+                    onDrop,
+                    onDragOverRow,
+                    renaming: file.id === renamingId,
+                    onRenameCommit,
+                    onRenameCancel
+                  },
+                  file.id
+                ))
+              },
+              virtualRow.key
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3" })
+        ] }),
+        loadingMore ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-3 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : null
+      ]
+    }
+  );
 }
 function ExplorerGridItem({
   file,
@@ -614,7 +801,7 @@ function ExplorerGridItem({
     ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-[11px]", file.kind === "folder" && "text-primary"), children: file.name }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[9px] uppercase tracking-[0.12em] text-muted-foreground", children: file.kind === "folder" ? folderLabel : formatSizeShort(file.size) })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "listitem", className: "relative", children: [
     coarse && onContextMenu ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -1316,19 +1503,47 @@ function ExplorerClipboardToast({
     )
   ] });
 }
+function uploadQueuePercent(items) {
+  const total = items.reduce((sum, item) => sum + item.size, 0);
+  if (total <= 0) return items.length === 0 ? 0 : 100;
+  const loaded = items.reduce((sum, item) => {
+    if (item.status === "success") return sum + item.size;
+    if (item.status === "uploading" || item.status === "error") {
+      return sum + item.size * item.progress / 100;
+    }
+    return sum;
+  }, 0);
+  return Math.min(100, Math.round(loaded / total * 100));
+}
 function ExplorerUploadStatus({
   items,
   onDismiss,
+  onCancel,
+  onRemove,
   className
 }) {
   const labels = useExplorerLabels();
+  const listRef = react.useRef(null);
+  const activeId = items.find((item) => item.status === "uploading")?.id;
+  react.useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!list || !activeId) return;
+    const row = list.querySelector(`[data-upload-id="${activeId}"]`);
+    if (!row) return;
+    const top = row.offsetTop;
+    const bottom = top + row.offsetHeight;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) {
+      list.scrollTop = bottom - list.clientHeight;
+    }
+  }, [activeId]);
   if (items.length === 0) return null;
   const done = items.filter((item) => item.status === "success").length;
   const failed = items.filter((item) => item.status === "error").length;
   const active = items.some(
     (item) => item.status === "queued" || item.status === "uploading"
   );
-  const visible = items.slice(-6);
+  const totalPercent = uploadQueuePercent(items);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1352,20 +1567,44 @@ function ExplorerUploadStatus({
               failed
             ] }) : null
           ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto font-mono text-[10px] tabular-nums text-primary", children: [
+            totalPercent,
+            "%"
+          ] }),
+          active && onCancel ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex h-7 items-center rounded-[10px] border border-border px-2 text-[10px] font-medium hover:bg-muted",
+              onClick: onCancel,
+              children: labels.cancelQueue
+            }
+          ) : null,
           !active ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               "aria-label": labels.dismissUploads,
-              className: "ml-auto inline-flex size-7 items-center justify-center rounded-[10px] text-muted-foreground hover:bg-muted",
+              className: "inline-flex size-7 items-center justify-center rounded-[10px] text-muted-foreground hover:bg-muted",
               onClick: onDismiss,
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-4" })
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto" })
+          ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex max-h-48 flex-col gap-1.5 overflow-y-auto", children: visible.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 h-1 overflow-hidden rounded-[10px] bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full bg-primary", style: { width: `${totalPercent}%` } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { ref: listRef, className: "flex max-h-48 min-h-0 flex-col gap-1.5 overflow-y-auto overscroll-contain", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-upload-id": item.id, className: "min-w-0 shrink-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-xs", children: item.name }),
+            onRemove ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `${labels.removeUpload} ${item.name}`,
+                className: "inline-flex size-6 shrink-0 items-center justify-center rounded-[10px] text-muted-foreground hover:bg-muted",
+                onClick: () => onRemove(item.id),
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-3.5" })
+              }
+            ) : null,
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
@@ -1392,6 +1631,11 @@ function useUploadQueue(options) {
   confirmUploadRef.current = options.confirmUpload;
   const queueRef = react.useRef([]);
   const running = react.useRef(false);
+  const dropped = react.useRef(/* @__PURE__ */ new Set());
+  const activeId = react.useRef(null);
+  const stepAbort = react.useRef(null);
+  const xhrRef = react.useRef(null);
+  const xhrOwner = react.useRef(null);
   const [items, setItems] = react.useState([]);
   const publish = react.useCallback(() => {
     setItems(queueRef.current.map(({ content: _content, ...item }) => item));
@@ -1401,6 +1645,13 @@ function useUploadQueue(options) {
     const next = queueRef.current.find((item) => item.status === "queued");
     if (!next) return;
     running.current = true;
+    activeId.current = next.id;
+    const controller = new AbortController();
+    stepAbort.current = controller;
+    let confirming = false;
+    const forget = () => {
+      queueRef.current = queueRef.current.filter((item) => item.id !== next.id);
+    };
     next.status = "uploading";
     next.progress = 0;
     publish();
@@ -1411,31 +1662,62 @@ function useUploadQueue(options) {
         type: next.type,
         content: next.content,
         parentId: next.parentId
-      });
+      }, controller.signal);
+      if (dropped.current.has(next.id)) {
+        forget();
+        return;
+      }
       let lastPublish = 0;
-      await putFile(target, next, (progress) => {
-        next.progress = progress;
-        const now = Date.now();
-        if (progress === 100 || now - lastPublish > 200) {
-          lastPublish = now;
-          publish();
+      await putFile(
+        target,
+        next,
+        (progress) => {
+          next.progress = progress;
+          const now = Date.now();
+          if (progress === 100 || now - lastPublish > 200) {
+            lastPublish = now;
+            publish();
+          }
+        },
+        (xhr) => {
+          xhrRef.current = xhr;
+          xhrOwner.current = next.id;
         }
-      });
+      );
+      if (dropped.current.has(next.id)) {
+        forget();
+        return;
+      }
+      confirming = true;
       await confirmUploadRef.current?.({
         name: next.name,
         size: next.size,
         type: next.type,
         content: next.content
-      });
+      }, controller.signal);
+      dropped.current.delete(next.id);
       next.status = "success";
       next.progress = 100;
       if (typeof window !== "undefined") {
         window.dispatchEvent(new Event("file-next-uploaded"));
       }
     } catch (error) {
+      const aborted = error instanceof Error && error.name === "AbortError";
+      if (!confirming && dropped.current.has(next.id) || confirming && aborted) {
+        forget();
+        return;
+      }
       next.status = "error";
       next.error = error instanceof Error ? error.message : "Upload failed";
     } finally {
+      if (activeId.current === next.id) {
+        activeId.current = null;
+        stepAbort.current = null;
+      }
+      if (xhrOwner.current === next.id) {
+        xhrRef.current = null;
+        xhrOwner.current = null;
+      }
       publish();
       running.current = false;
       void pump();
@@ -1460,6 +1742,26 @@ function useUploadQueue(options) {
     },
     [publish, pump]
   );
+  const dropIds = react.useCallback(
+    (ids) => {
+      if (ids.length === 0) return;
+      for (const id of ids) dropped.current.add(id);
+      if (xhrOwner.current && ids.includes(xhrOwner.current)) xhrRef.current?.abort();
+      if (activeId.current && ids.includes(activeId.current)) stepAbort.current?.abort();
+      const idSet = new Set(ids);
+      queueRef.current = queueRef.current.filter(
+        (item) => !idSet.has(item.id) || item.id === activeId.current
+      );
+      publish();
+    },
+    [publish]
+  );
+  const remove = react.useCallback((id) => dropIds([id]), [dropIds]);
+  const cancel = react.useCallback(() => {
+    dropIds(
+      queueRef.current.filter((item) => item.status === "queued" || item.status === "uploading").map((item) => item.id)
+    );
+  }, [dropIds]);
   const dismiss = react.useCallback(() => {
     queueRef.current = queueRef.current.filter(
       (item) => item.status === "queued" || item.status === "uploading"
@@ -1479,11 +1781,19 @@ function useUploadQueue(options) {
       window.clearTimeout(timeout);
     };
   }, [active, dismiss, itemCount]);
-  return { items, enqueue, dismiss, active };
+  return { items, enqueue, dismiss, cancel, remove, active };
 }
-function putFile(target, file, onProgress) {
+function putFile(target, file, onProgress, onStart) {
   return new Promise((resolve, reject) => {
+    let settled = false;
+    const finish = (fn) => {
+      if (settled) return;
+      settled = true;
+      fn();
+    };
     const xhr = new XMLHttpRequest();
+    onStart(xhr);
+    xhr.addEventListener("abort", () => finish(() => reject(new Error("aborted"))));
     xhr.upload.addEventListener("progress", (event) => {
       if (event.lengthComputable) {
         onProgress(Math.min(100, Math.round(event.loaded / event.total * 100)));
@@ -1497,13 +1807,13 @@ function putFile(target, file, onProgress) {
           if (parsed.error?.message) message = parsed.error.message;
         } catch {
         }
-        reject(new Error(message));
+        finish(() => reject(new Error(message)));
         return;
       }
-      resolve();
+      finish(resolve);
     });
     xhr.addEventListener("error", () => {
-      reject(new Error("Upload failed"));
+      finish(() => reject(new Error("Upload failed")));
     });
     xhr.open(target.method ?? "PUT", target.url);
     xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
@@ -1524,8 +1834,16 @@ function UploadQueueProvider({
 }) {
   const uploads = useUploadQueue({ requestUpload, confirmUpload });
   const panel = react.useMemo(
-    () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed right-4 bottom-4 z-50 flex w-[min(22rem,calc(100vw-2rem))] flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(ExplorerUploadStatus, { items: uploads.items, onDismiss: uploads.dismiss }) }),
-    [uploads.dismiss, uploads.items]
+    () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed right-4 bottom-4 z-50 flex w-[min(22rem,calc(100vw-2rem))] flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ExplorerUploadStatus,
+      {
+        items: uploads.items,
+        onDismiss: uploads.dismiss,
+        onCancel: uploads.cancel,
+        onRemove: uploads.remove
+      }
+    ) }),
+    [uploads.cancel, uploads.dismiss, uploads.items, uploads.remove]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(EnqueueContext.Provider, { value: uploads.enqueue, children: [
     children,
@@ -1661,6 +1979,7 @@ function FileExplorerInner(props) {
     onMove
   });
   const uploadInputRef = react.useRef(null);
+  const scrollRef = react.useRef(null);
   const [query, setQuery] = react.useState("");
   const [trashOpen, setTrashOpen] = react.useState(false);
   const [pageItems, setPageItems] = react.useState([]);
@@ -1819,6 +2138,10 @@ function FileExplorerInner(props) {
     },
     [listTrash, query, searchFiles, trashOpen]
   );
+  const loadNext = react.useCallback(() => {
+    if (overlayFiles) void loadOverlay("more");
+    else void loadBrowse("more");
+  }, [loadBrowse, loadOverlay, overlayFiles]);
   const refreshTrashFlag = react.useCallback(async () => {
     if (!listTrash) {
       setTrashHasItems(false);
@@ -2122,7 +2445,7 @@ function FileExplorerInner(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: (overlayLoading || pageStatus === "loading") && displayFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-12 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : overlayError || pageStatus === "error" && pageError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: (overlayError ?? pageError)?.message ?? labels.folderCreateFailed }) : displayFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col justify-center px-4 py-16 text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto overflow-x-auto overscroll-x-contain", children: (overlayLoading || pageStatus === "loading") && displayFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-4 py-12 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : overlayError || pageStatus === "error" && pageError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: (overlayError ?? pageError)?.message ?? labels.folderCreateFailed }) : displayFiles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col justify-center px-4 py-16 text-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: trashOpen ? labels.emptyTrash : query.trim() ? labels.noMatches : labels.emptyFolder }),
           trashOpen ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.trashRetention }) : !query.trim() ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.dropHint }) : null
         ] }) : explorer.view === "list" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2153,7 +2476,11 @@ function FileExplorerInner(props) {
                 onSortChange: handleSortChange,
                 renamingId,
                 onRenameCommit: commitRename,
-                onRenameCancel: cancelRename
+                onRenameCancel: cancelRename,
+                scrollRef,
+                hasMore,
+                loadingMore: loadingMore || overlayMore,
+                onLoadMore: loadNext
               }
             )
           }
@@ -2182,24 +2509,15 @@ function FileExplorerInner(props) {
                 onDragOverRow: explorer.setDropTarget,
                 renamingId,
                 onRenameCommit: commitRename,
-                onRenameCancel: cancelRename
+                onRenameCancel: cancelRename,
+                scrollRef,
+                hasMore,
+                loadingMore: loadingMore || overlayMore,
+                onLoadMore: loadNext
               }
             )
           }
         ) }),
-        hasMore && sortedFiles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            disabled: loadingMore || overlayMore,
-            onClick: () => {
-              if (overlayFiles) void loadOverlay("more");
-              else void loadBrowse("more");
-            },
-            className: "inline-flex h-8 w-full items-center justify-center rounded-[10px] border border-border text-xs font-medium hover:bg-muted disabled:opacity-50",
-            children: loadingMore || overlayMore ? labels.loading : labels.loadMore
-          }
-        ) }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex shrink-0 items-center justify-between gap-3 border-t border-border px-4 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-primary tabular-nums", children: [
@@ -2380,18 +2698,27 @@ function ErrorState(props) {
     }
   );
 }
+var MIN_ZOOM = 1;
+var MAX_ZOOM = 4;
+function clampPreviewZoom(scale) {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Number.isFinite(scale) ? scale : 1));
+}
 function canPreviewFile(file) {
   return previewKind(file.mimeType, file.name) !== "none";
 }
 function previewKind(mimeType, name) {
   const mime = mimeType.toLowerCase();
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
-  if (mime.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "webp"].includes(ext)) {
+  if (mime === "text/html" || mime === "application/xhtml+xml" || ext === "html" || ext === "htm") {
+    return "none";
+  }
+  if (mime.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "webp", "avif"].includes(ext)) {
     return "image";
   }
   if (mime === "application/pdf" || ext === "pdf") return "pdf";
-  if (mime.startsWith("video/") || ["mp4", "webm", "mov"].includes(ext)) return "video";
-  if (mime.startsWith("text/") || ["txt", "csv"].includes(ext)) return "text";
+  if (mime.startsWith("video/") || ["mp4", "webm"].includes(ext)) return "video";
+  if (mime.startsWith("audio/") || ["mp3", "wav", "ogg"].includes(ext)) return "audio";
+  if (mime.startsWith("text/") || ["txt", "csv", "md"].includes(ext)) return "text";
   return "none";
 }
 function FilePreviewDialog({
@@ -2401,46 +2728,162 @@ function FilePreviewDialog({
   onDownload
 }) {
   const labels = useExplorerLabels();
+  const [scale, setScale] = react.useState(1);
+  const [pan, setPan] = react.useState({ x: 0, y: 0 });
+  const drag = react.useRef(null);
+  const closeRef = react.useRef(null);
+  react.useEffect(() => {
+    setScale(1);
+    setPan({ x: 0, y: 0 });
+    closeRef.current?.focus();
+  }, [file?.id, src]);
+  react.useEffect(() => {
+    const onKey = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
   if (!file) return null;
   const kind = previewKind(file.mimeType, file.name);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Overlay, { open: true, onClose, className: "max-w-4xl", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "truncate pr-6 text-base font-semibold", children: file.name }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: file.mimeType || labels.unknownType }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src,
-        alt: file.name,
-        className: "max-h-[70vh] w-full rounded-[10px] object-contain"
-      }
-    ) : kind === "pdf" || kind === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "iframe",
-      {
-        src,
-        title: file.name,
-        className: "h-[70vh] w-full rounded-[10px] border border-border bg-background"
-      }
-    ) : kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
-      {
-        controls: true,
-        playsInline: true,
-        preload: "metadata",
-        src,
-        className: "max-h-[70vh] w-full rounded-[10px] bg-foreground",
-        children: labels.previewUnavailable
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: labels.previewUnavailable }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "inline-flex h-8 items-center rounded-[10px] border border-border px-3 text-sm",
-        onClick: () => onDownload(file),
-        children: labels.download
-      }
-    ) })
-  ] });
+  const zoom = (next) => {
+    const clamped = clampPreviewZoom(next);
+    setScale(clamped);
+    if (clamped === 1) setPan({ x: 0, y: 0 });
+  };
+  const stop = (event) => event.stopPropagation();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": file.name,
+      className: "fixed inset-0 z-50 bg-black/90 text-white",
+      onClick: onClose,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 top-0 z-10 flex items-center gap-2 px-3 py-2", onClick: stop, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "min-w-0 flex-1 truncate text-sm", children: file.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex h-8 items-center rounded-full px-3 text-sm hover:bg-white/10",
+              onClick: () => onDownload(file),
+              children: labels.download
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: closeRef,
+              type: "button",
+              "aria-label": labels.closePreview,
+              className: "inline-flex size-8 items-center justify-center rounded-full hover:bg-white/10",
+              onClick: onClose,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-4 pt-12 pb-16", children: kind === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src,
+            alt: file.name,
+            draggable: false,
+            className: "max-h-full max-w-full cursor-zoom-in select-none object-contain",
+            style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})` },
+            onClick: stop,
+            onDoubleClick: (event) => {
+              stop(event);
+              zoom(scale === 1 ? 2 : 1);
+            },
+            onWheel: (event) => {
+              event.preventDefault();
+              stop(event);
+              zoom(scale + (event.deltaY < 0 ? 0.25 : -0.25));
+            },
+            onPointerDown: (event) => {
+              if (scale === 1) return;
+              stop(event);
+              event.currentTarget.setPointerCapture(event.pointerId);
+              drag.current = { x: event.clientX, y: event.clientY, px: pan.x, py: pan.y };
+            },
+            onPointerMove: (event) => {
+              if (!drag.current) return;
+              setPan({
+                x: drag.current.px + event.clientX - drag.current.x,
+                y: drag.current.py + event.clientY - drag.current.y
+              });
+            },
+            onPointerUp: () => {
+              drag.current = null;
+            }
+          }
+        ) : kind === "pdf" || kind === "text" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            src,
+            title: file.name,
+            className: "h-full w-full max-w-5xl bg-white",
+            onClick: stop
+          }
+        ) : kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "video",
+          {
+            controls: true,
+            playsInline: true,
+            preload: "metadata",
+            src,
+            className: "max-h-full max-w-full",
+            onClick: stop,
+            children: labels.previewUnavailable
+          }
+        ) : kind === "audio" ? /* @__PURE__ */ jsxRuntime.jsx("audio", { controls: true, preload: "metadata", src, className: "w-full max-w-md", onClick: stop }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/70", children: labels.previewUnavailable }) }),
+        kind === "image" ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "absolute bottom-4 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full bg-black/70 px-1 py-1",
+            onClick: stop,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": labels.zoomOut,
+                  className: "inline-flex size-8 items-center justify-center rounded-full hover:bg-white/10",
+                  onClick: () => zoom(scale - 0.25),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { "aria-hidden": "true", className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": labels.zoomFit,
+                  className: "min-w-14 px-2 text-xs tabular-nums",
+                  onClick: () => zoom(1),
+                  children: [
+                    Math.round(scale * 100),
+                    "%"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": labels.zoomIn,
+                  className: "inline-flex size-8 items-center justify-center rounded-full hover:bg-white/10",
+                  onClick: () => zoom(scale + 0.25),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true", className: "size-4" })
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
 }
 function CreateFolderDialog({
   open,