@rebasepro/studio 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/{StorageView-CbsHuCBf.js → StorageView-CPkDKbsX.js}

@@ -1,11 +1,163 @@
 import { t as classifyLoadFailure } from "./load-failure-Bd8lFIO7.js";
 import { ErrorView, useApiBase, useApiConfig, useSnackbarController, useStorageSource, useStorageSources, useTranslation } from "@rebasepro/app";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ArrowLeftIcon, Button, CheckIcon, Checkbox, Chip, CircularProgress, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, DownloadIcon, FileTextIcon, FileUpload, FolderIcon, FolderPlusIcon, IconButton, ImageIcon, LayoutGridIcon, ListIcon, LoadingButton, Music2Icon, PlusIcon, RefreshCwIcon, Select, SelectItem, TextField, Tooltip, Trash2Icon, Typography, UploadCloudIcon, VideoIcon, XIcon, cls, defaultBorderMixin, iconSize, isKeyHandled } from "@rebasepro/ui";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ArrowLeftIcon, Button, CheckIcon, Checkbox, Chip, CircularProgress, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, DownloadIcon, FileTextIcon, FileUpload, FolderIcon, FolderPlusIcon, IconButton, ImageIcon, LayoutGridIcon, ListIcon, LoadingButton, Music2Icon, PlusIcon, RefreshCwIcon, Select, SelectItem, Table, TableBody, TableCell, TableHeader, TableRow, TextField, Tooltip, Trash2Icon, Typography, UploadCloudIcon, VideoIcon, XIcon, cls, defaultBorderMixin, iconSize, isKeyHandled } from "@rebasepro/ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useSearchParams } from "react-router";
 import { DEFAULT_STORAGE_SOURCE_KEY, isPublicStorageKey } from "@rebasepro/types";
 import { useDropzone } from "react-dropzone";
+//#region src/components/StorageView/useVisibleFileMetadata.ts
+function fileMetadataOf(config) {
+	return {
+		size: config.metadata?.size,
+		contentType: config.metadata?.contentType,
+		downloadUrl: config.url ?? void 0
+	};
+}
+var NO_METADATA = /* @__PURE__ */ new Map();
+/**
+* The metadata asked for one listing: each path once, {@link METADATA_CONCURRENCY}
+* at a time, through the source that listed it. Cancelled when the listing is
+* replaced, so an answer for a folder or source the view has left is dropped.
+*/
+var MetadataRun = class {
+	source;
+	files;
+	publish;
+	wants;
+	known;
+	requested = /* @__PURE__ */ new Set();
+	queue = [];
+	inFlight = 0;
+	cancelled = false;
+	answered = [];
+	flushQueued = false;
+	constructor(source, files, publish, wants, known) {
+		this.source = source;
+		this.files = files;
+		this.publish = publish;
+		this.wants = wants;
+		this.known = known;
+	}
+	want(path) {
+		if (this.cancelled || !this.source || !path || this.requested.has(path) || this.known.has(path)) return;
+		const file = this.files.get(path);
+		if (!file || !this.wants(file)) return;
+		this.requested.add(path);
+		this.queue.push(path);
+		this.pump();
+	}
+	cancel() {
+		this.cancelled = true;
+		this.queue = [];
+		this.answered = [];
+	}
+	pump() {
+		const source = this.source;
+		if (!source) return;
+		while (!this.cancelled && this.inFlight < 6 && this.queue.length > 0) {
+			const path = this.queue.shift();
+			if (path === void 0) break;
+			this.inFlight++;
+			source.getSignedUrl(path).then((config) => this.deliver(path, fileMetadataOf(config))).catch(() => this.deliver(path, {})).finally(() => {
+				this.inFlight--;
+				this.pump();
+			});
+		}
+	}
+	/** Answers that arrive together are published as one update. */
+	deliver(path, metadata) {
+		if (this.cancelled) return;
+		this.answered.push([path, metadata]);
+		if (this.flushQueued) return;
+		this.flushQueued = true;
+		queueMicrotask(() => {
+			this.flushQueued = false;
+			if (this.cancelled || this.answered.length === 0) return;
+			const answered = this.answered;
+			this.answered = [];
+			this.publish(answered);
+		});
+	}
+};
+/**
+* Metadata for the files of a listing, asked for as each comes on screen —
+* and only for those `wants` says need it: the listing already describes most
+* files (see `StorageReference.size`), so what is left is a file a source
+* listed bare, and the link an image's thumbnail is drawn from.
+*
+* The browser used to ask for every file's metadata before it showed any of
+* them: a folder of 1,000 files was 1,001 requests and seconds of a spinner.
+* The listing is shown as it comes back; a file's metadata is asked for when
+* its element — given {@link observe} as its `ref`, and its path as
+* `data-storage-path` — scrolls into view, a few requests at a time.
+*
+* Kept per listing: keyed by path, and dropped when `files` or `source`
+* changes — another folder, another source, or the same folder read again
+* after an upload or a delete, whose files may have changed. Without an
+* `IntersectionObserver` every file of the listing is asked for, still a few
+* at a time and still after the listing is shown.
+*/
+function useVisibleFileMetadata(source, files, wants = () => true) {
+	const [store, setStore] = useState(() => ({
+		files,
+		entries: NO_METADATA
+	}));
+	const storeRef = useRef(store);
+	useLayoutEffect(() => {
+		storeRef.current = store;
+	});
+	const runRef = useRef(null);
+	const elementsRef = useRef(/* @__PURE__ */ new Set());
+	const observerRef = useRef(null);
+	const observer = useCallback(() => {
+		if (observerRef.current) return observerRef.current;
+		if (typeof IntersectionObserver !== "function") return null;
+		observerRef.current = new IntersectionObserver((entries) => {
+			for (const entry of entries) if (entry.isIntersecting && entry.target instanceof HTMLElement) runRef.current?.want(entry.target.dataset.storagePath);
+		}, { rootMargin: "200px" });
+		return observerRef.current;
+	}, []);
+	useLayoutEffect(() => {
+		const known = storeRef.current.files === files ? storeRef.current.entries : NO_METADATA;
+		const run = new MetadataRun(source, new Map(files.map((file) => [file.fullPath, file])), (answered) => setStore((previous) => ({
+			files,
+			entries: new Map([...previous.files === files ? previous.entries : NO_METADATA, ...answered])
+		})), wants, known);
+		runRef.current = run;
+		const io = observer();
+		for (const element of elementsRef.current) if (io) {
+			io.unobserve(element);
+			io.observe(element);
+		} else run.want(element.dataset.storagePath);
+		return () => run.cancel();
+	}, [
+		source,
+		files,
+		wants,
+		observer
+	]);
+	useEffect(() => () => {
+		observerRef.current?.disconnect();
+		observerRef.current = null;
+	}, []);
+	const observe = useCallback((element) => {
+		if (!element) return void 0;
+		elementsRef.current.add(element);
+		const io = observer();
+		if (io) io.observe(element);
+		else runRef.current?.want(element.dataset.storagePath);
+		return () => {
+			elementsRef.current.delete(element);
+			io?.unobserve(element);
+		};
+	}, [observer]);
+	return {
+		metadata: store.files === files ? store.entries : NO_METADATA,
+		observe
+	};
+}
+//#endregion
 //#region src/components/StorageView/StorageView.tsx
 function fileLinkOf(config, fullPath) {
 	if (!config.url) return null;
@@ -13,7 +165,17 @@ function fileLinkOf(config, fullPath) {
 	return {
 		url: config.url,
 		expiresInSeconds: metadata?.token && typeof metadata.tokenExpiresIn === "number" ? metadata.tokenExpiresIn : void 0,
-		isPublic: metadata ? metadata.public === true : isPublicStorageKey(fullPath)
+		isPublic: metadata ? metadata.public === true : isPublicStorageKey(fullPath),
+		size: metadata?.size,
+		contentType: metadata?.contentType
+	};
+}
+/** `file`, with what the link minted for it says where the listing did not. */
+function withLinkFacts(file, link) {
+	return {
+		...file,
+		size: file.size ?? link?.size,
+		contentType: file.contentType ?? link?.contentType
 	};
 }
 /** A URL the browser can open from anywhere: relative ones are this page's origin's. */
@@ -34,17 +196,45 @@ function formatFileSize(bytes) {
 	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 	return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 }
-function getFileIcon(contentType) {
-	if (!contentType) return FileTextIcon;
-	if (contentType.startsWith("image/")) return ImageIcon;
-	if (contentType.startsWith("video/")) return VideoIcon;
-	if (contentType.startsWith("audio/")) return Music2Icon;
+var IMAGE_EXTENSIONS = [
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"svg"
+];
+var VIDEO_EXTENSIONS = [
+	"mp4",
+	"webm",
+	"ogg",
+	"mov"
+];
+var AUDIO_EXTENSIONS = [
+	"mp3",
+	"wav",
+	"ogg",
+	"m4a"
+];
+/**
+* The icon for a file: by its stored type, or — where the listing carried
+* none, as an S3 listing does not — by its extension.
+*/
+function getFileIcon(contentType, name) {
+	const ext = getExtension(name).toLowerCase();
+	if (contentType ? contentType.startsWith("image/") : IMAGE_EXTENSIONS.includes(ext)) return ImageIcon;
+	if (contentType ? contentType.startsWith("video/") : VIDEO_EXTENSIONS.includes(ext)) return VideoIcon;
+	if (contentType ? contentType.startsWith("audio/") : AUDIO_EXTENSIONS.includes(ext)) return Music2Icon;
 	return FileTextIcon;
 }
 function getExtension(name) {
 	const parts = name.split(".");
 	return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : "";
 }
+/** Whether the grid draws `file` as a thumbnail — which needs a link to it. */
+function isImageFile(file) {
+	return file.contentType?.startsWith("image/") === true || IMAGE_EXTENSIONS.includes(getExtension(file.name).toLowerCase());
+}
 function breadcrumbSegments(path, rootLabel) {
 	if (!path || path === "/") return [{
 		label: rootLabel,
@@ -87,14 +277,39 @@ async function listAllPages(source, prefix) {
 		prefixes
 	};
 }
+/** How many deletes run at once: one at a time, a folder of 1,000 files took a minute. */
+var DELETE_CONCURRENCY = 8;
+/**
+* `work` for each of `items`, at most `limit` at once. The first failure stops
+* what has not started; what has started is let finish, then it is thrown.
+*/
+async function forEachBounded(items, limit, work) {
+	const run = { next: 0 };
+	const lane = async () => {
+		while (!run.failure && run.next < items.length) {
+			const item = items[run.next++];
+			try {
+				await work(item);
+			} catch (error) {
+				run.failure ??= { error };
+			}
+		}
+	};
+	await Promise.all(Array.from({ length: Math.min(limit, items.length) }, lane));
+	if (run.failure) throw run.failure.error;
+}
 /**
 * Delete a folder: every file in it, every folder below it, and the folder
 * itself — the directory on local disk, or the zero-byte `name/` marker that
 * "New folder" writes on S3 and GCS, which no listing shows as an entry.
+*
+* The files of a level go {@link DELETE_CONCURRENCY} at a time; the folders
+* below it one after another, so no more than that are ever in flight, and a
+* folder's own marker goes last, once everything in it has.
 */
 async function deleteFolderRecursive(source, prefix) {
 	const { items, prefixes } = await listAllPages(source, prefix);
-	for (const item of items) await source.deleteObject(item.fullPath);
+	await forEachBounded(items, DELETE_CONCURRENCY, (item) => source.deleteObject(item.fullPath));
 	for (const sub of prefixes) await deleteFolderRecursive(source, sub.fullPath);
 	try {
 		await source.deleteObject(prefix.endsWith("/") ? prefix : `${prefix}/`);
@@ -116,9 +331,10 @@ function UploadDialog({ open, currentPath, onClose, onUpload }) {
 		setUploading(true);
 		setError(null);
 		try {
-			await onUpload(selectedFiles);
-			setSelectedFiles([]);
-			onClose();
+			if (await onUpload(selectedFiles)) {
+				setSelectedFiles([]);
+				onClose();
+			}
 		} catch (err) {
 			setError(err instanceof Error ? err.message : t("studio_storage_upload_failed"));
 		} finally {
@@ -203,6 +419,7 @@ function UploadDialog({ open, currentPath, onClose, onUpload }) {
 										children: formatFileSize(file.size)
 									})]
 								}), /* @__PURE__ */ jsx(IconButton, {
+									"aria-label": t("remove"),
 									size: "small",
 									onClick: (e) => {
 										e.stopPropagation();
@@ -237,7 +454,7 @@ function FilePreviewPanel({ file, onClose, onDelete, link, mintLink }) {
 	file.contentType?.startsWith("image/");
 	file.contentType?.startsWith("video/");
 	file.contentType?.startsWith("audio/");
-	const FileIconComponent = getFileIcon(file.contentType);
+	const FileIconComponent = getFileIcon(file.contentType, file.name);
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 	const [urlCopied, setUrlCopied] = useState(false);
 	const reportLinkError = (e) => {
@@ -291,6 +508,7 @@ function FilePreviewPanel({ file, onClose, onDelete, link, mintLink }) {
 							})
 						}),
 						/* @__PURE__ */ jsx(IconButton, {
+							"aria-label": t("close"),
 							size: "small",
 							onClick: onClose,
 							children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
@@ -304,26 +522,9 @@ function FilePreviewPanel({ file, onClose, onDelete, link, mintLink }) {
 					className: cls("flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-sheet border-b", defaultBorderMixin),
 					children: (() => {
 						const ext = getExtension(file.name)?.toLowerCase() || "";
-						const isImage = file.contentType?.startsWith("image/") || [
-							"jpg",
-							"jpeg",
-							"png",
-							"gif",
-							"webp",
-							"svg"
-						].includes(ext);
-						const isVideo = file.contentType?.startsWith("video/") || [
-							"mp4",
-							"webm",
-							"ogg",
-							"mov"
-						].includes(ext);
-						const isAudio = file.contentType?.startsWith("audio/") || [
-							"mp3",
-							"wav",
-							"ogg",
-							"m4a"
-						].includes(ext);
+						const isImage = file.contentType?.startsWith("image/") || IMAGE_EXTENSIONS.includes(ext);
+						const isVideo = file.contentType?.startsWith("video/") || VIDEO_EXTENSIONS.includes(ext);
+						const isAudio = file.contentType?.startsWith("audio/") || AUDIO_EXTENSIONS.includes(ext);
 						const previewUrl = link?.url;
 						if (isImage && previewUrl) return /* @__PURE__ */ jsx("img", {
 							src: previewUrl,
@@ -358,8 +559,9 @@ function FilePreviewPanel({ file, onClose, onDelete, link, mintLink }) {
 				className: "p-4 space-y-3",
 				children: [
 					/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Typography, {
-						variant: "caption",
-						className: "text-text-disabled dark:text-text-disabled-dark text-[10px] uppercase tracking-wider font-semibold mb-1 block",
+						variant: "label",
+						color: "secondary",
+						className: "mb-1 block",
 						children: t("studio_storage_file_info")
 					}) }),
 					/* @__PURE__ */ jsxs("div", {
@@ -511,12 +713,26 @@ var StorageView = () => {
 	const [failure, setFailure] = useState(null);
 	const [folders, setFolders] = useState([]);
 	const [files, setFiles] = useState([]);
+	/** The source `files` were listed from: their metadata is read through it, whatever is selected since. */
+	const [listedFrom, setListedFrom] = useState(null);
+	const [viewMode, setViewMode] = useState("grid");
+	const { metadata, observe: observeFile } = useVisibleFileMetadata(listedFrom, files, useCallback((file) => file.size === void 0 || viewMode === "grid" && isImageFile(file), [viewMode]));
+	/** `file` with what its metadata has said so far, over what the listing said. */
+	const withMetadata = useCallback((file) => {
+		const read = metadata.get(file.fullPath);
+		if (!read) return file;
+		return {
+			...file,
+			size: read.size ?? file.size,
+			contentType: read.contentType ?? file.contentType,
+			downloadUrl: read.downloadUrl ?? file.downloadUrl
+		};
+	}, [metadata]);
 	const [selectedFile, setSelectedFile] = useState(null);
 	const [selectedLink, setSelectedLink] = useState(null);
 	/** The latest link asked for the preview: an earlier one answering later is dropped. */
 	const linkRequestRef = useRef(0);
 	const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
-	const [viewMode, setViewMode] = useState("grid");
 	const [selectedPaths, setSelectedPaths] = useState(/* @__PURE__ */ new Set());
 	const lastClickedRef = useRef(null);
 	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -532,10 +748,11 @@ var StorageView = () => {
 		storageSourceRef.current = storageSource;
 	}, [storageSource]);
 	/**
-	* The latest listing asked for. Only its answer is shown: a listing awaits
-	* every file's metadata, so an earlier one — of the source or folder the
-	* view has since left — can answer after a later one, and showed that
-	* source's files under the one selected, where their actions ran.
+	* The latest listing asked for. Only its answer is shown: a listing of a
+	* large folder takes several pages, so an earlier one — of the source or
+	* folder the view has since left — can answer after a later one, and
+	* showed that source's files under the one selected, where their actions
+	* ran.
 	*/
 	const listingRequestRef = useRef(0);
 	const fetchContents = useCallback(async (path) => {
@@ -551,28 +768,17 @@ var StorageView = () => {
 				fullPath: ref.fullPath,
 				isFolder: true
 			}));
-			const fileItems = await Promise.all(result.items.map(async (ref) => {
-				try {
-					const downloadConfig = await source.getSignedUrl(ref.fullPath);
-					return {
-						name: ref.name,
-						fullPath: ref.fullPath,
-						isFolder: false,
-						size: downloadConfig.metadata?.size,
-						contentType: downloadConfig.metadata?.contentType,
-						downloadUrl: downloadConfig.url ?? void 0
-					};
-				} catch {
-					return {
-						name: ref.name,
-						fullPath: ref.fullPath,
-						isFolder: false
-					};
-				}
+			const fileItems = result.items.map((ref) => ({
+				name: ref.name,
+				fullPath: ref.fullPath,
+				isFolder: false,
+				size: ref.size,
+				contentType: ref.contentType
 			}));
 			if (!isCurrent()) return;
 			setFolders(folderItems);
 			setFiles(fileItems);
+			setListedFrom(source);
 		} catch (e) {
 			if (!isCurrent()) return;
 			console.error("Storage list error:", e);
@@ -670,23 +876,52 @@ var StorageView = () => {
 		if (item.isFolder) handleNavigate(item.fullPath);
 		else openPreview(item);
 	}, [handleNavigate, openPreview]);
+	/**
+	* Files an upload would write over, waiting for the person to say whether
+	* it should. `answer` settles the upload that asked.
+	*/
+	const [replacePrompt, setReplacePrompt] = useState(null);
+	/**
+	* Whether `uploadFiles` may go ahead: at once when none of them has the
+	* name of a file in the folder, and otherwise once the person says to
+	* replace those. An upload is a put, and a put over an existing key
+	* replaces the file without a trace.
+	*/
+	const mayReplace = useCallback((uploadFiles) => {
+		const listed = new Set(files.map((file) => file.name));
+		const names = [...new Set(uploadFiles.map((file) => file.name))].filter((name) => listed.has(name));
+		if (names.length === 0) return Promise.resolve(true);
+		return new Promise((resolve) => setReplacePrompt({
+			names,
+			answer: (replace) => {
+				setReplacePrompt(null);
+				resolve(replace);
+			}
+		}));
+	}, [files]);
 	const handleUpload = useCallback(async (uploadFiles) => {
-		for (const file of uploadFiles) {
-			const key = currentPath ? `${currentPath}/${file.name}` : file.name;
-			await storageSourceRef.current.putObject({
-				file,
-				key
-			});
+		if (!await mayReplace(uploadFiles)) return false;
+		try {
+			for (const file of uploadFiles) {
+				const key = currentPath ? `${currentPath}/${file.name}` : file.name;
+				await storageSourceRef.current.putObject({
+					file,
+					key
+				});
+			}
+		} finally {
+			await fetchContents(currentPath);
 		}
 		snackbarController.open({
 			type: "success",
 			message: t("studio_storage_files_uploaded", { count: uploadFiles.length })
 		});
-		await fetchContents(currentPath);
+		return true;
 	}, [
 		currentPath,
 		snackbarController,
 		fetchContents,
+		mayReplace,
 		t
 	]);
 	const handleCreateFolder = useCallback(async () => {
@@ -755,30 +990,14 @@ var StorageView = () => {
 		onDrop: useCallback(async (droppedFiles) => {
 			if (droppedFiles.length === 0) return;
 			try {
-				for (const file of droppedFiles) {
-					const key = currentPath ? `${currentPath}/${file.name}` : file.name;
-					await storageSourceRef.current.putObject({
-						file,
-						key
-					});
-				}
-				snackbarController.open({
-					type: "success",
-					message: t("studio_storage_files_uploaded", { count: droppedFiles.length })
-				});
-				await fetchContents(currentPath);
+				await handleUpload(droppedFiles);
 			} catch (e) {
 				snackbarController.open({
 					type: "error",
 					message: e instanceof Error ? e.message : String(e)
 				});
 			}
-		}, [
-			currentPath,
-			snackbarController,
-			fetchContents,
-			t
-		]),
+		}, [handleUpload, snackbarController]),
 		noClick: true,
 		noKeyboard: true,
 		noDragEventsBubbling: true
@@ -795,8 +1014,8 @@ var StorageView = () => {
 	*/
 	const deleteItems = useCallback(async (items, folder) => {
 		const source = storageSourceRef.current;
+		await forEachBounded(items.filter((item) => !item.isFolder), DELETE_CONCURRENCY, (item) => source.deleteObject(item.fullPath));
 		for (const item of items) if (item.isFolder) await deleteFolderRecursive(source, item.fullPath);
-		else await source.deleteObject(item.fullPath);
 		const listed = await listAllPages(source, folder);
 		const stillListed = new Set([...listed.items, ...listed.prefixes].map((ref) => ref.fullPath));
 		return items.filter((item) => stillListed.has(item.fullPath));
@@ -826,12 +1045,13 @@ var StorageView = () => {
 				next.delete(file.fullPath);
 				return next;
 			});
-			fetchContents(currentPath);
 		} catch (e) {
 			snackbarController.open({
 				type: "error",
 				message: e instanceof Error ? e.message : String(e)
 			});
+		} finally {
+			fetchContents(currentPath);
 		}
 	}, [
 		currentPath,
@@ -854,13 +1074,13 @@ var StorageView = () => {
 			setSelectedPaths(/* @__PURE__ */ new Set());
 			setSelectedFile(null);
 			setSelectedLink(null);
-			await fetchContents(currentPath);
 		} catch (e) {
 			snackbarController.open({
 				type: "error",
 				message: e instanceof Error ? e.message : String(e)
 			});
 		} finally {
+			await fetchContents(currentPath);
 			setDeleting(false);
 			setDeleteDialogOpen(false);
 			setDeleteDialogTarget(null);
@@ -894,13 +1114,13 @@ var StorageView = () => {
 				next.delete(deleteDialogTarget.fullPath);
 				return next;
 			});
-			await fetchContents(currentPath);
 		} catch (e) {
 			snackbarController.open({
 				type: "error",
 				message: e instanceof Error ? e.message : String(e)
 			});
 		} finally {
+			await fetchContents(currentPath);
 			setDeleting(false);
 			setDeleteDialogOpen(false);
 			setDeleteDialogTarget(null);
@@ -921,7 +1141,7 @@ var StorageView = () => {
 	}, [allItems, selectedPaths]);
 	useEffect(() => {
 		const handler = (e) => {
-			if (deleteDialogOpen || uploadDialogOpen || newFolderDialogOpen) return;
+			if (deleteDialogOpen || uploadDialogOpen || newFolderDialogOpen || replacePrompt) return;
 			if (isKeyHandled(e)) return;
 			if ((e.metaKey || e.ctrlKey) && e.key === "a") {
 				e.preventDefault();
@@ -946,7 +1166,8 @@ var StorageView = () => {
 		selectedPaths,
 		deleteDialogOpen,
 		uploadDialogOpen,
-		newFolderDialogOpen
+		newFolderDialogOpen,
+		replacePrompt
 	]);
 	const handleRefresh = useCallback(() => {
 		fetchContents(currentPath);
@@ -1035,12 +1256,12 @@ var StorageView = () => {
 		});
 		if (viewMode === "list") return /* @__PURE__ */ jsx("div", {
 			className: "flex-grow overflow-auto",
-			children: /* @__PURE__ */ jsxs("table", {
+			children: /* @__PURE__ */ jsxs(Table, {
 				className: "w-full",
-				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
-					className: cls("border-b text-left text-[10px] uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", defaultBorderMixin),
+				children: [/* @__PURE__ */ jsxs(TableHeader, {
+					className: "text-xs font-normal text-text-secondary dark:text-text-secondary-dark",
 					children: [
-						/* @__PURE__ */ jsx("th", {
+						/* @__PURE__ */ jsx(TableCell, {
 							className: "pl-3 pr-0 py-2 w-8",
 							children: /* @__PURE__ */ jsx(Checkbox, {
 								size: "small",
@@ -1049,148 +1270,155 @@ var StorageView = () => {
 								onCheckedChange: handleSelectAll
 							})
 						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "px-2 py-2 font-semibold",
+						/* @__PURE__ */ jsx(TableCell, {
+							className: "px-2 py-2 font-medium",
 							children: t("studio_storage_name")
 						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "px-4 py-2 font-semibold w-24",
+						/* @__PURE__ */ jsx(TableCell, {
+							className: "px-4 py-2 font-medium w-24",
 							children: t("studio_storage_type")
 						}),
-						/* @__PURE__ */ jsx("th", {
-							className: "px-4 py-2 font-semibold w-24 text-right",
+						/* @__PURE__ */ jsx(TableCell, {
+							className: "px-4 py-2 font-medium w-24 text-right",
 							children: t("studio_storage_size")
 						}),
-						/* @__PURE__ */ jsx("th", { className: "px-2 py-2 w-10" })
+						/* @__PURE__ */ jsx(TableCell, { className: "px-2 py-2 w-10" })
 					]
-				}) }), /* @__PURE__ */ jsxs("tbody", { children: [folders.map((folder) => {
-					const isChecked = selectedPaths.has(folder.fullPath);
-					return /* @__PURE__ */ jsxs("tr", {
-						"data-storage-item": true,
-						className: cls("cursor-pointer transition-colors border-b group", defaultBorderMixin, isChecked ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-hover"),
-						onClick: (e) => handleItemClick(folder, e),
-						onDoubleClick: () => handleItemDoubleClick(folder),
-						children: [
-							/* @__PURE__ */ jsx("td", {
-								className: "pl-3 pr-0 py-2.5",
-								onClick: (e) => e.stopPropagation(),
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									size: "small",
-									checked: isChecked,
-									onCheckedChange: () => {
-										setSelectedPaths((prev) => {
-											const next = new Set(prev);
-											if (next.has(folder.fullPath)) next.delete(folder.fullPath);
-											else next.add(folder.fullPath);
-											return next;
-										});
-									}
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-2 py-2.5",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ jsx(FolderIcon, {
-										size: iconSize.smallest,
-										className: "text-amber-500 dark:text-amber-400 shrink-0"
-									}), /* @__PURE__ */ jsx(Typography, {
-										variant: "body2",
-										className: "text-[13px] font-medium truncate",
-										children: folder.name
-									})]
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-4 py-2.5",
-								children: /* @__PURE__ */ jsx(Typography, {
-									variant: "caption",
-									className: "text-text-secondary dark:text-text-secondary-dark",
-									children: t("studio_storage_folder")
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-4 py-2.5 text-right",
-								children: /* @__PURE__ */ jsx(Typography, {
-									variant: "caption",
-									className: "text-text-disabled dark:text-text-disabled-dark",
-									children: "—"
-								})
-							}),
-							/* @__PURE__ */ jsx("td", { className: "px-2 py-2.5" })
-						]
-					}, folder.fullPath);
-				}), files.map((file) => {
-					const FileIconComp = getFileIcon(file.contentType);
-					const isChecked = selectedPaths.has(file.fullPath);
-					return /* @__PURE__ */ jsxs("tr", {
-						"data-storage-item": true,
-						className: cls("cursor-pointer transition-colors border-b group", defaultBorderMixin, isChecked ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-hover"),
-						onClick: (e) => handleItemClick(file, e),
-						onDoubleClick: () => handleItemDoubleClick(file),
-						children: [
-							/* @__PURE__ */ jsx("td", {
-								className: "pl-3 pr-0 py-2.5",
-								onClick: (e) => e.stopPropagation(),
-								children: /* @__PURE__ */ jsx(Checkbox, {
-									size: "small",
-									checked: isChecked,
-									onCheckedChange: () => {
-										setSelectedPaths((prev) => {
-											const next = new Set(prev);
-											if (next.has(file.fullPath)) next.delete(file.fullPath);
-											else next.add(file.fullPath);
-											return next;
-										});
-									}
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-2 py-2.5",
-								children: /* @__PURE__ */ jsxs("div", {
-									className: "flex items-center gap-2",
-									children: [/* @__PURE__ */ jsx(FileIconComp, {
-										size: iconSize.smallest,
-										className: "text-surface-accent-400 shrink-0"
-									}), /* @__PURE__ */ jsx(Typography, {
-										variant: "body2",
-										className: "text-[13px] truncate",
-										children: file.name
-									})]
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-4 py-2.5",
-								children: /* @__PURE__ */ jsx(Typography, {
-									variant: "caption",
-									className: "text-text-secondary dark:text-text-secondary-dark",
-									children: getExtension(file.name) || file.contentType?.split("/")[1]?.toUpperCase() || "—"
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-4 py-2.5 text-right",
-								children: /* @__PURE__ */ jsx(Typography, {
-									variant: "caption",
-									className: "text-text-secondary dark:text-text-secondary-dark font-mono text-[11px]",
-									children: file.size !== void 0 ? formatFileSize(file.size) : "—"
-								})
-							}),
-							/* @__PURE__ */ jsx("td", {
-								className: "px-2 py-2.5",
-								onClick: (e) => e.stopPropagation(),
-								children: /* @__PURE__ */ jsx(IconButton, {
-									size: "smallest",
-									className: "opacity-0 group-hover:opacity-100 transition-opacity",
-									onClick: () => {
-										setDeleteDialogTarget(file);
-										setDeleteDialogOpen(true);
-									},
-									children: /* @__PURE__ */ jsx(Trash2Icon, { size: 14 })
+				}), /* @__PURE__ */ jsxs(TableBody, {
+					variant: "list",
+					children: [folders.map((folder) => {
+						const isChecked = selectedPaths.has(folder.fullPath);
+						return /* @__PURE__ */ jsxs(TableRow, {
+							"data-storage-item": true,
+							className: cls("group", isChecked && "bg-primary/5 dark:bg-primary/10"),
+							onClick: (e) => handleItemClick(folder, e),
+							onDoubleClick: () => handleItemDoubleClick(folder),
+							children: [
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "pl-3 pr-0 py-2.5",
+									onClick: (e) => e.stopPropagation(),
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										size: "small",
+										checked: isChecked,
+										onCheckedChange: () => {
+											setSelectedPaths((prev) => {
+												const next = new Set(prev);
+												if (next.has(folder.fullPath)) next.delete(folder.fullPath);
+												else next.add(folder.fullPath);
+												return next;
+											});
+										}
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-2 py-2.5",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx(FolderIcon, {
+											size: iconSize.smallest,
+											className: "text-amber-500 dark:text-amber-400 shrink-0"
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "body2",
+											className: "text-[13px] font-medium truncate",
+											children: folder.name
+										})]
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-4 py-2.5",
+									children: /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: "text-text-secondary dark:text-text-secondary-dark",
+										children: t("studio_storage_folder")
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-4 py-2.5 text-right",
+									children: /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: "text-text-disabled dark:text-text-disabled-dark",
+										children: "—"
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, { className: "px-2 py-2.5" })
+							]
+						}, folder.fullPath);
+					}), files.map((listed) => {
+						const file = withMetadata(listed);
+						const FileIconComp = getFileIcon(file.contentType, file.name);
+						const isChecked = selectedPaths.has(file.fullPath);
+						return /* @__PURE__ */ jsxs(TableRow, {
+							ref: observeFile,
+							"data-storage-path": file.fullPath,
+							"data-storage-item": true,
+							className: cls("group", isChecked && "bg-primary/5 dark:bg-primary/10"),
+							onClick: (e) => handleItemClick(file, e),
+							onDoubleClick: () => handleItemDoubleClick(file),
+							children: [
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "pl-3 pr-0 py-2.5",
+									onClick: (e) => e.stopPropagation(),
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										size: "small",
+										checked: isChecked,
+										onCheckedChange: () => {
+											setSelectedPaths((prev) => {
+												const next = new Set(prev);
+												if (next.has(file.fullPath)) next.delete(file.fullPath);
+												else next.add(file.fullPath);
+												return next;
+											});
+										}
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-2 py-2.5",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ jsx(FileIconComp, {
+											size: iconSize.smallest,
+											className: "text-surface-accent-400 shrink-0"
+										}), /* @__PURE__ */ jsx(Typography, {
+											variant: "body2",
+											className: "text-[13px] truncate",
+											children: file.name
+										})]
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-4 py-2.5",
+									children: /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: "text-text-secondary dark:text-text-secondary-dark",
+										children: getExtension(file.name) || file.contentType?.split("/")[1]?.toUpperCase() || "—"
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-4 py-2.5 text-right",
+									children: /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: "text-text-secondary dark:text-text-secondary-dark font-mono text-[11px]",
+										children: file.size !== void 0 ? formatFileSize(file.size) : "—"
+									})
+								}),
+								/* @__PURE__ */ jsx(TableCell, {
+									className: "px-2 py-2.5",
+									onClick: (e) => e.stopPropagation(),
+									children: /* @__PURE__ */ jsx(IconButton, {
+										"aria-label": t("studio_storage_delete"),
+										size: "smallest",
+										className: "opacity-0 group-hover:opacity-100 transition-opacity",
+										onClick: () => {
+											setDeleteDialogTarget(file);
+											setDeleteDialogOpen(true);
+										},
+										children: /* @__PURE__ */ jsx(Trash2Icon, { size: 14 })
+									})
 								})
-							})
-						]
-					}, file.fullPath);
-				})] })]
+							]
+						}, file.fullPath);
+					})]
+				})]
 			})
 		});
 		return /* @__PURE__ */ jsxs("div", {
@@ -1226,20 +1454,16 @@ var StorageView = () => {
 				children: t("studio_storage_files_heading", { count: files.length })
 			}), /* @__PURE__ */ jsx("div", {
 				className: "grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]",
-				children: files.map((file) => {
-					const FileIconComp = getFileIcon(file.contentType);
-					const ext = getExtension(file.name)?.toLowerCase() || "";
-					const isImage = file.contentType?.startsWith("image/") || [
-						"jpg",
-						"jpeg",
-						"png",
-						"gif",
-						"webp",
-						"svg"
-					].includes(ext);
+				children: files.map((listed) => {
+					const file = withMetadata(listed);
+					const FileIconComp = getFileIcon(file.contentType, file.name);
+					const isImage = isImageFile(file);
+					const isChecked = selectedPaths.has(file.fullPath);
 					return /* @__PURE__ */ jsxs("div", {
+						ref: observeFile,
+						"data-storage-path": file.fullPath,
 						"data-storage-item": true,
-						className: cls("rounded-lg overflow-hidden cursor-pointer border", "transition-shadow duration-150", defaultBorderMixin, "hover:shadow-md", selectedPaths.has(file.fullPath) && "ring-2 ring-primary"),
+						className: cls("rounded-lg overflow-hidden cursor-pointer border", "transition-shadow duration-150", defaultBorderMixin, "hover:shadow-md", isChecked && "ring-2 ring-primary"),
 						onClick: (e) => handleItemClick(file, e),
 						onDoubleClick: () => handleItemDoubleClick(file),
 						children: [/* @__PURE__ */ jsxs("div", {
@@ -1489,7 +1713,7 @@ var StorageView = () => {
 				}), selectedFile && /* @__PURE__ */ jsx("div", {
 					className: "w-80 lg:w-96 shrink-0",
 					children: /* @__PURE__ */ jsx(FilePreviewPanel, {
-						file: selectedFile,
+						file: withLinkFacts(withMetadata(selectedFile), selectedLink),
 						link: selectedLink,
 						mintLink: refreshPreviewLink,
 						onClose: () => {
@@ -1506,6 +1730,39 @@ var StorageView = () => {
 				onClose: () => setUploadDialogOpen(false),
 				onUpload: handleUpload
 			}),
+			/* @__PURE__ */ jsxs(Dialog, {
+				open: replacePrompt !== null,
+				onOpenChange: (open) => {
+					if (!open) replacePrompt?.answer(false);
+				},
+				children: [
+					/* @__PURE__ */ jsx(DialogTitle, {
+						hidden: true,
+						children: t("studio_storage_replace_title")
+					}),
+					/* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "subtitle1",
+						className: "font-semibold mb-2",
+						children: t("studio_storage_replace_question", { count: replacePrompt?.names.length ?? 0 })
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						color: "secondary",
+						children: t("studio_storage_replace_body", {
+							count: replacePrompt?.names.length ?? 0,
+							names: replacePrompt?.names.join(", ") ?? ""
+						})
+					})] }),
+					/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "text",
+						onClick: () => replacePrompt?.answer(false),
+						children: t("studio_storage_cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "filled",
+						onClick: () => replacePrompt?.answer(true),
+						children: t("studio_storage_replace")
+					})] })
+				]
+			}),
 			/* @__PURE__ */ jsxs(Dialog, {
 				open: deleteDialogOpen,
 				onOpenChange: (open) => {
@@ -1617,4 +1874,4 @@ var StorageView = () => {
 //#endregion
 export { StorageView };
 
-//# sourceMappingURL=StorageView-CbsHuCBf.js.map
+//# sourceMappingURL=StorageView-CPkDKbsX.js.map