@rebasepro/studio 0.4.0 → 0.6.0

package/dist/StorageView-nDaC2foF.js

@@ -0,0 +1,1382 @@
+import { ErrorView, useApiConfig, useSnackbarController, useStorageSource } from "@rebasepro/core";
+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, TextField, Tooltip, Trash2Icon, Typography, UploadCloudIcon, VideoIcon, XIcon, cls, defaultBorderMixin, iconSize } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSearchParams } from "react-router-dom";
+import { useDropzone } from "react-dropzone";
+//#region src/components/StorageView/StorageView.tsx
+function formatFileSize(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	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;
+	return FileTextIcon;
+}
+function getExtension(name) {
+	const parts = name.split(".");
+	return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : "";
+}
+function breadcrumbSegments(path) {
+	if (!path || path === "/") return [{
+		label: "Root",
+		path: ""
+	}];
+	const parts = path.split("/").filter(Boolean);
+	const segments = [{
+		label: "Root",
+		path: ""
+	}];
+	let accumulated = "";
+	for (const part of parts) {
+		accumulated = accumulated ? `${accumulated}/${part}` : part;
+		segments.push({
+			label: part,
+			path: accumulated
+		});
+	}
+	return segments;
+}
+function UploadDialog({ open, currentPath, onClose, onUpload }) {
+	const [uploading, setUploading] = useState(false);
+	const [selectedFiles, setSelectedFiles] = useState([]);
+	const [error, setError] = useState(null);
+	const handleFilesAdded = useCallback((files) => {
+		setSelectedFiles((prev) => [...prev, ...files]);
+	}, []);
+	const handleRemoveFile = useCallback((index) => {
+		setSelectedFiles((prev) => prev.filter((_, i) => i !== index));
+	}, []);
+	const handleUpload = useCallback(async () => {
+		if (selectedFiles.length === 0) return;
+		setUploading(true);
+		setError(null);
+		try {
+			await onUpload(selectedFiles);
+			setSelectedFiles([]);
+			onClose();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Upload failed");
+		} finally {
+			setUploading(false);
+		}
+	}, [
+		selectedFiles,
+		onUpload,
+		onClose
+	]);
+	const handleClose = useCallback(() => {
+		if (!uploading) {
+			setSelectedFiles([]);
+			setError(null);
+			onClose();
+		}
+	}, [uploading, onClose]);
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open,
+		onOpenChange: (o) => !o && handleClose(),
+		maxWidth: "md",
+		children: [
+			/* @__PURE__ */ jsxs(DialogTitle, { children: ["Upload Files", /* @__PURE__ */ jsxs(Typography, {
+				variant: "caption",
+				className: "text-text-secondary dark:text-text-secondary-dark mt-0.5 block",
+				children: ["to ", /* @__PURE__ */ jsxs("span", {
+					className: "font-mono text-primary",
+					children: ["/", currentPath || "root"]
+				})]
+			})] }),
+			/* @__PURE__ */ jsxs(DialogContent, {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ jsx(FileUpload, {
+						onFilesAdded: handleFilesAdded,
+						size: "large",
+						uploadDescription: /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center justify-center pointer-events-none",
+							children: [
+								/* @__PURE__ */ jsx(UploadCloudIcon, { className: "text-surface-accent-400 mb-2 w-8 h-8" }),
+								/* @__PURE__ */ jsx(Typography, {
+									variant: "label",
+									children: "Drop files here or click to browse"
+								}),
+								/* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									color: "secondary",
+									children: "Any file type supported"
+								})
+							]
+						})
+					}),
+					error && /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-red-500 block whitespace-pre-line",
+						children: error
+					}),
+					selectedFiles.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [
+								"Selected files (",
+								selectedFiles.length,
+								")"
+							]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "max-h-40 overflow-auto space-y-1",
+							children: selectedFiles.map((file, index) => /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between p-2 rounded bg-surface-100 dark:bg-surface-800",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "flex-1 min-w-0 mr-2",
+									children: [/* @__PURE__ */ jsx(Typography, {
+										variant: "body2",
+										className: "truncate",
+										children: file.name
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										color: "secondary",
+										children: formatFileSize(file.size)
+									})]
+								}), /* @__PURE__ */ jsx(IconButton, {
+									size: "small",
+									onClick: (e) => {
+										e.stopPropagation();
+										handleRemoveFile(index);
+									},
+									disabled: uploading,
+									children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+								})]
+							}, `${file.name}-${index}`))
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				onClick: handleClose,
+				disabled: uploading,
+				children: "Cancel"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "filled",
+				onClick: handleUpload,
+				disabled: selectedFiles.length === 0 || uploading,
+				startIcon: uploading ? /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsx(UploadCloudIcon, { size: 14 }),
+				children: uploading ? "Uploading..." : `Upload${selectedFiles.length > 0 ? ` (${selectedFiles.length})` : ""}`
+			})] })
+		]
+	});
+}
+function FilePreviewPanel({ file, onClose, onDelete, downloadUrl }) {
+	file.contentType?.startsWith("image/");
+	file.contentType?.startsWith("video/");
+	file.contentType?.startsWith("audio/");
+	const FileIconComponent = getFileIcon(file.contentType);
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+	const [urlCopied, setUrlCopied] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: cls("flex flex-col h-full border-l", defaultBorderMixin, "bg-white dark:bg-surface-800"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("flex items-center justify-between p-3 border-b shrink-0", defaultBorderMixin),
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					className: "font-medium truncate flex-1 mr-2",
+					children: file.name
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-0.5",
+					children: [
+						downloadUrl && /* @__PURE__ */ jsx(Tooltip, {
+							title: "Download",
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "small",
+								onClick: () => window.open(downloadUrl, "_blank"),
+								children: /* @__PURE__ */ jsx(DownloadIcon, { size: iconSize.smallest })
+							})
+						}),
+						/* @__PURE__ */ jsx(Tooltip, {
+							title: "Delete",
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "small",
+								onClick: () => setDeleteDialogOpen(true),
+								className: "text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20",
+								children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest })
+							})
+						}),
+						/* @__PURE__ */ jsx(IconButton, {
+							size: "small",
+							onClick: onClose,
+							children: /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest })
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-auto",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cls("flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-50 dark:bg-surface-800 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 downloadUrl = file.downloadUrl;
+						if (isImage && downloadUrl) return /* @__PURE__ */ jsx("img", {
+							src: downloadUrl,
+							alt: file.name,
+							className: "max-w-full max-h-[400px] object-contain rounded-md shadow-sm"
+						});
+						else if (isVideo && downloadUrl) return /* @__PURE__ */ jsx("video", {
+							src: downloadUrl,
+							className: "max-w-full max-h-[400px] rounded-md",
+							controls: true
+						});
+						else if (isAudio && downloadUrl) return /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center gap-4",
+							children: [/* @__PURE__ */ jsx(Music2Icon, { className: "text-surface-accent-400 w-10 h-10" }), /* @__PURE__ */ jsx("audio", {
+								src: downloadUrl,
+								controls: true,
+								className: "w-full max-w-xs"
+							})]
+						});
+						else return /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center gap-3 text-surface-accent-400",
+							children: [/* @__PURE__ */ jsx(FileIconComponent, { className: "w-10 h-10" }), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-disabled dark:text-text-disabled-dark",
+								children: "No preview available"
+							})]
+						});
+					})()
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				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-bold mb-1 block",
+						children: "File Info"
+					}) }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: [
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-surface-accent-500 text-[11px]",
+								children: "Name"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "text-[13px] break-all",
+								children: file.name
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-surface-accent-500 text-[11px]",
+								children: "Type"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "text-[13px]",
+								children: file.contentType || "Unknown"
+							})] }),
+							file.size !== void 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-surface-accent-500 text-[11px]",
+								children: "Size"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "text-[13px]",
+								children: formatFileSize(file.size)
+							})] }),
+							/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-surface-accent-500 text-[11px]",
+								children: "Extension"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "text-[13px] font-mono",
+								children: getExtension(file.name) || "—"
+							})] }),
+							/* @__PURE__ */ jsxs("div", {
+								className: "col-span-2",
+								children: [/* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-surface-accent-500 text-[11px]",
+									children: "Path"
+								}), /* @__PURE__ */ jsx(Typography, {
+									variant: "body2",
+									className: "text-[13px] font-mono break-all",
+									children: file.fullPath
+								})]
+							})
+						]
+					}),
+					downloadUrl && /* @__PURE__ */ jsxs("div", {
+						className: "pt-2",
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "text-surface-accent-500 text-[11px] block mb-1",
+							children: "URL"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: cls("flex items-center gap-2 p-2 rounded cursor-pointer transition-colors", "bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"),
+							onClick: () => {
+								const fullUrl = downloadUrl.startsWith("http") ? downloadUrl : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+								navigator.clipboard.writeText(fullUrl).then(() => {
+									setUrlCopied(true);
+									setTimeout(() => setUrlCopied(false), 2e3);
+								});
+							},
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "font-mono text-[11px] truncate flex-1 min-w-0 text-primary",
+								children: (() => {
+									return downloadUrl.startsWith("http") ? downloadUrl : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+								})()
+							}), /* @__PURE__ */ jsx(Tooltip, {
+								title: urlCopied ? "Copied!" : "Copy URL",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "shrink-0",
+									children: urlCopied ? /* @__PURE__ */ jsx(CheckIcon, {
+										size: 14,
+										className: "text-green-500"
+									}) : /* @__PURE__ */ jsx(CopyIcon, {
+										size: 14,
+										className: "text-surface-accent-400"
+									})
+								})
+							})]
+						})]
+					})
+				]
+			})
+		]
+	}), /* @__PURE__ */ jsxs(Dialog, {
+		open: deleteDialogOpen,
+		onOpenChange: setDeleteDialogOpen,
+		children: [/* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "subtitle1",
+			className: "mb-2",
+			children: "Delete File?"
+		}), /* @__PURE__ */ jsxs(Typography, {
+			className: "text-surface-accent-600 dark:text-surface-accent-400",
+			children: [
+				"Are you sure you want to delete \"",
+				file.name,
+				"\"? This action cannot be undone."
+			]
+		})] }), /* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			onClick: () => setDeleteDialogOpen(false),
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "filled",
+			color: "error",
+			onClick: () => {
+				setDeleteDialogOpen(false);
+				onDelete();
+			},
+			children: "Delete"
+		})] })]
+	})] });
+}
+var StorageView = () => {
+	const storageSource = useStorageSource();
+	const snackbarController = useSnackbarController();
+	const [searchParams, setSearchParams] = useSearchParams();
+	const currentPath = searchParams.get("path") || "";
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [folders, setFolders] = useState([]);
+	const [files, setFiles] = useState([]);
+	const [selectedFile, setSelectedFile] = useState(null);
+	const [selectedDownloadUrl, setSelectedDownloadUrl] = useState(null);
+	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);
+	const [deleteDialogTarget, setDeleteDialogTarget] = useState(null);
+	const [deleting, setDeleting] = useState(false);
+	const [newFolderDialogOpen, setNewFolderDialogOpen] = useState(false);
+	const [newFolderName, setNewFolderName] = useState("");
+	const [creatingFolder, setCreatingFolder] = useState(false);
+	const apiConfig = useApiConfig();
+	const storageSourceRef = React.useRef(storageSource);
+	useEffect(() => {
+		storageSourceRef.current = storageSource;
+	}, [storageSource]);
+	const fetchContents = useCallback(async (path) => {
+		setLoading(true);
+		setError(null);
+		try {
+			const result = await storageSourceRef.current.listObjects(path);
+			const folderItems = (result.prefixes ?? []).map((ref) => ({
+				name: ref.name,
+				fullPath: ref.fullPath,
+				isFolder: true
+			}));
+			const fileItems = await Promise.all((result.items ?? []).map(async (ref) => {
+				try {
+					const downloadConfig = await storageSourceRef.current.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
+					};
+				}
+			}));
+			setFolders(folderItems);
+			setFiles(fileItems);
+		} catch (e) {
+			console.error("Storage list error:", e);
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+	useEffect(() => {
+		fetchContents(currentPath);
+	}, [currentPath, fetchContents]);
+	const handleNavigate = useCallback((path) => {
+		if (!path) setSearchParams({});
+		else setSearchParams({ path });
+		setSelectedFile(null);
+		setSelectedDownloadUrl(null);
+		setSelectedPaths(/* @__PURE__ */ new Set());
+		lastClickedRef.current = null;
+	}, [setSearchParams]);
+	const handleNavigateUp = useCallback(() => {
+		const parts = currentPath.split("/").filter(Boolean);
+		parts.pop();
+		handleNavigate(parts.join("/"));
+	}, [currentPath, handleNavigate]);
+	const allItems = useMemo(() => [...folders, ...files], [folders, files]);
+	const handleItemClick = useCallback((item, e) => {
+		const path = item.fullPath;
+		if (e.metaKey || e.ctrlKey) {
+			setSelectedPaths((prev) => {
+				const next = new Set(prev);
+				if (next.has(path)) next.delete(path);
+				else next.add(path);
+				return next;
+			});
+			lastClickedRef.current = path;
+		} else if (e.shiftKey && lastClickedRef.current) {
+			const allPaths = allItems.map((i) => i.fullPath);
+			const anchorIdx = allPaths.indexOf(lastClickedRef.current);
+			const currentIdx = allPaths.indexOf(path);
+			if (anchorIdx >= 0 && currentIdx >= 0) {
+				const [start, end] = anchorIdx < currentIdx ? [anchorIdx, currentIdx] : [currentIdx, anchorIdx];
+				setSelectedPaths((prev) => {
+					const next = new Set(prev);
+					for (let i = start; i <= end; i++) next.add(allPaths[i]);
+					return next;
+				});
+			}
+		} else {
+			setSelectedPaths(new Set([path]));
+			lastClickedRef.current = path;
+			if (!item.isFolder) {
+				setSelectedFile(item);
+				if (item.downloadUrl) setSelectedDownloadUrl(item.downloadUrl);
+				else storageSourceRef.current.getSignedUrl(item.fullPath).then((config) => setSelectedDownloadUrl(config.url)).catch(() => setSelectedDownloadUrl(null));
+			} else {
+				setSelectedFile(null);
+				setSelectedDownloadUrl(null);
+			}
+		}
+	}, [allItems]);
+	const handleItemDoubleClick = useCallback((item) => {
+		if (item.isFolder) handleNavigate(item.fullPath);
+		else {
+			setSelectedFile(item);
+			if (item.downloadUrl) setSelectedDownloadUrl(item.downloadUrl);
+			else storageSourceRef.current.getSignedUrl(item.fullPath).then((config) => setSelectedDownloadUrl(config.url)).catch(() => setSelectedDownloadUrl(null));
+		}
+	}, [handleNavigate]);
+	const handleUpload = useCallback(async (uploadFiles) => {
+		for (const file of uploadFiles) {
+			const key = currentPath ? `${currentPath}/${file.name}` : file.name;
+			await storageSourceRef.current.putObject({
+				file,
+				key
+			});
+		}
+		snackbarController.open({
+			type: "success",
+			message: `${uploadFiles.length} file${uploadFiles.length > 1 ? "s" : ""} uploaded successfully`
+		});
+		await fetchContents(currentPath);
+	}, [
+		currentPath,
+		snackbarController,
+		fetchContents
+	]);
+	const handleCreateFolder = useCallback(async () => {
+		if (!newFolderName.trim() || !apiConfig?.apiUrl) return;
+		const name = newFolderName.trim();
+		if (name.includes("/") || name.includes("\\")) {
+			snackbarController.open({
+				type: "error",
+				message: "Folder name cannot contain slashes"
+			});
+			return;
+		}
+		if (folders.find((f) => f.name === name)) {
+			snackbarController.open({
+				type: "error",
+				message: `Folder "${name}" already exists`
+			});
+			return;
+		}
+		setCreatingFolder(true);
+		try {
+			const folderPath = currentPath ? `default/${currentPath}/${name}` : `default/${name}`;
+			const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
+			const response = await fetch(`${apiConfig.apiUrl}/api/storage/folder`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					...token ? { "Authorization": `Bearer ${token}` } : {}
+				},
+				body: JSON.stringify({ path: folderPath })
+			});
+			if (!response.ok) {
+				const err = await response.json().catch(() => ({ error: "Failed to create folder" }));
+				throw new Error(err.error || "Failed to create folder");
+			}
+			snackbarController.open({
+				type: "success",
+				message: `Folder "${name}" created`
+			});
+			setNewFolderDialogOpen(false);
+			setNewFolderName("");
+			await fetchContents(currentPath);
+		} catch (e) {
+			snackbarController.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		} finally {
+			setCreatingFolder(false);
+		}
+	}, [
+		newFolderName,
+		currentPath,
+		apiConfig,
+		snackbarController,
+		fetchContents,
+		folders
+	]);
+	const { getRootProps: getDropRootProps, getInputProps: getDropInputProps, isDragActive } = useDropzone({
+		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: `${droppedFiles.length} file${droppedFiles.length > 1 ? "s" : ""} uploaded successfully`
+				});
+				await fetchContents(currentPath);
+			} catch (e) {
+				snackbarController.open({
+					type: "error",
+					message: e instanceof Error ? e.message : String(e)
+				});
+			}
+		}, [
+			currentPath,
+			snackbarController,
+			fetchContents
+		]),
+		noClick: true,
+		noKeyboard: true,
+		noDragEventsBubbling: true
+	});
+	const deleteFolderRecursive = useCallback(async (prefix) => {
+		const result = await storageSourceRef.current.listObjects(prefix);
+		for (const item of result.items ?? []) await storageSourceRef.current.deleteObject(item.fullPath);
+		for (const sub of result.prefixes ?? []) await deleteFolderRecursive(sub.fullPath);
+		try {
+			await storageSourceRef.current.deleteObject(prefix);
+		} catch {}
+	}, []);
+	const handleDeleteFile = useCallback(async (file) => {
+		try {
+			if (file.isFolder) await deleteFolderRecursive(file.fullPath);
+			else await storageSourceRef.current.deleteObject(file.fullPath);
+			snackbarController.open({
+				type: "success",
+				message: `"${file.name}" deleted`
+			});
+			setSelectedFile(null);
+			setSelectedDownloadUrl(null);
+			setSelectedPaths((prev) => {
+				const next = new Set(prev);
+				next.delete(file.fullPath);
+				return next;
+			});
+			fetchContents(currentPath);
+		} catch (e) {
+			snackbarController.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		}
+	}, [
+		currentPath,
+		snackbarController,
+		fetchContents,
+		deleteFolderRecursive
+	]);
+	const handleBulkDelete = useCallback(async () => {
+		setDeleting(true);
+		try {
+			const items = allItems.filter((i) => selectedPaths.has(i.fullPath));
+			for (const item of items) if (item.isFolder) await deleteFolderRecursive(item.fullPath);
+			else await storageSourceRef.current.deleteObject(item.fullPath);
+			snackbarController.open({
+				type: "success",
+				message: `${items.length} item${items.length !== 1 ? "s" : ""} deleted`
+			});
+			setSelectedPaths(/* @__PURE__ */ new Set());
+			setSelectedFile(null);
+			setSelectedDownloadUrl(null);
+			await fetchContents(currentPath);
+		} catch (e) {
+			snackbarController.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		} finally {
+			setDeleting(false);
+			setDeleteDialogOpen(false);
+			setDeleteDialogTarget(null);
+		}
+	}, [
+		allItems,
+		selectedPaths,
+		currentPath,
+		snackbarController,
+		fetchContents,
+		deleteFolderRecursive
+	]);
+	const handleConfirmDeleteFolder = useCallback(async () => {
+		if (!deleteDialogTarget || deleteDialogTarget === "selection") return;
+		setDeleting(true);
+		try {
+			await deleteFolderRecursive(deleteDialogTarget.fullPath);
+			snackbarController.open({
+				type: "success",
+				message: `Folder "${deleteDialogTarget.name}" deleted`
+			});
+			setSelectedPaths((prev) => {
+				const next = new Set(prev);
+				next.delete(deleteDialogTarget.fullPath);
+				return next;
+			});
+			await fetchContents(currentPath);
+		} catch (e) {
+			snackbarController.open({
+				type: "error",
+				message: e instanceof Error ? e.message : String(e)
+			});
+		} finally {
+			setDeleting(false);
+			setDeleteDialogOpen(false);
+			setDeleteDialogTarget(null);
+		}
+	}, [
+		deleteDialogTarget,
+		currentPath,
+		snackbarController,
+		fetchContents,
+		deleteFolderRecursive
+	]);
+	const handleSelectAll = useCallback(() => {
+		if (selectedPaths.size === allItems.length) setSelectedPaths(/* @__PURE__ */ new Set());
+		else setSelectedPaths(new Set(allItems.map((i) => i.fullPath)));
+	}, [allItems, selectedPaths]);
+	useEffect(() => {
+		const handler = (e) => {
+			if (deleteDialogOpen || uploadDialogOpen || newFolderDialogOpen) return;
+			if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+				e.preventDefault();
+				handleSelectAll();
+			}
+			if (e.key === "Escape") {
+				setSelectedPaths(/* @__PURE__ */ new Set());
+				setSelectedFile(null);
+				setSelectedDownloadUrl(null);
+			}
+			if ((e.key === "Delete" || e.key === "Backspace") && selectedPaths.size > 0 && !e.metaKey && !e.ctrlKey) {
+				if (e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA") return;
+				e.preventDefault();
+				setDeleteDialogTarget("selection");
+				setDeleteDialogOpen(true);
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [
+		handleSelectAll,
+		selectedPaths,
+		deleteDialogOpen,
+		uploadDialogOpen,
+		newFolderDialogOpen
+	]);
+	const handleRefresh = useCallback(() => {
+		fetchContents(currentPath);
+	}, [currentPath, fetchContents]);
+	const segments = breadcrumbSegments(currentPath);
+	const renderContents = () => {
+		if (loading) return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow flex items-center justify-center",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [/* @__PURE__ */ jsx(CircularProgress, { size: "medium" }), /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					className: "mt-4 text-text-secondary dark:text-text-secondary-dark font-mono tracking-tight animate-pulse",
+					children: "Loading..."
+				})]
+			})
+		});
+		if (error) return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow flex items-center justify-center p-6 overflow-auto",
+			children: /* @__PURE__ */ jsx(ErrorView, {
+				title: "Error loading storage",
+				error,
+				onRetry: handleRefresh
+			})
+		});
+		if (allItems.length === 0) return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow flex items-center justify-center text-text-disabled dark:text-text-disabled-dark",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-center",
+				children: [
+					/* @__PURE__ */ jsx("svg", {
+						className: "w-12 h-12 mx-auto mb-4 opacity-50",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 1,
+							d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+						})
+					}),
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						children: "This folder is empty"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 mt-3",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							variant: "text",
+							onClick: () => {
+								setNewFolderName("");
+								setNewFolderDialogOpen(true);
+							},
+							children: [/* @__PURE__ */ jsx(FolderPlusIcon, { size: iconSize.smallest }), "New folder"]
+						}), /* @__PURE__ */ jsxs(Button, {
+							onClick: () => setUploadDialogOpen(true),
+							children: [/* @__PURE__ */ jsx(PlusIcon, { size: iconSize.smallest }), "Upload files"]
+						})]
+					})
+				]
+			})
+		});
+		if (viewMode === "list") return /* @__PURE__ */ jsx("div", {
+			className: "flex-grow overflow-auto",
+			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__ */ jsx("th", {
+							className: "pl-3 pr-0 py-2 w-8",
+							children: /* @__PURE__ */ jsx(Checkbox, {
+								size: "small",
+								checked: allItems.length > 0 && selectedPaths.size === allItems.length,
+								indeterminate: selectedPaths.size > 0 && selectedPaths.size < allItems.length,
+								onCheckedChange: handleSelectAll
+							})
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "px-2 py-2 font-bold",
+							children: "Name"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "px-4 py-2 font-bold w-24",
+							children: "Type"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: "px-4 py-2 font-bold w-24 text-right",
+							children: "Size"
+						}),
+						/* @__PURE__ */ jsx("th", { 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-100 dark:hover:bg-surface-800"),
+						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: "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-100 dark:hover:bg-surface-800"),
+						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: () => handleDeleteFile(file),
+									children: /* @__PURE__ */ jsx(Trash2Icon, { size: 14 })
+								})
+							})
+						]
+					}, file.fullPath);
+				})] })]
+			})
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex-grow overflow-auto p-4",
+			children: [folders.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "mb-4",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					className: "text-[10px] uppercase tracking-wider font-bold text-text-disabled dark:text-text-disabled-dark mb-2 block",
+					children: "Folders"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]",
+					children: folders.map((folder) => {
+						return /* @__PURE__ */ jsxs("div", {
+							"data-storage-item": true,
+							className: cls("rounded-lg p-3 cursor-pointer border", "transition-colors duration-150", defaultBorderMixin, "hover:bg-surface-100 dark:hover:bg-surface-800 hover:shadow-sm", "flex items-center gap-2", selectedPaths.has(folder.fullPath) && "ring-2 ring-primary bg-primary/5 dark:bg-primary/10"),
+							onClick: (e) => handleItemClick(folder, e),
+							onDoubleClick: () => handleItemDoubleClick(folder),
+							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
+							})]
+						}, folder.fullPath);
+					})
+				})]
+			}), files.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(Typography, {
+				variant: "caption",
+				className: "text-[10px] uppercase tracking-wider font-bold text-text-disabled dark:text-text-disabled-dark mb-2 block",
+				children: [
+					"Files (",
+					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);
+					return /* @__PURE__ */ jsxs("div", {
+						"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"),
+						onClick: (e) => handleItemClick(file, e),
+						onDoubleClick: () => handleItemDoubleClick(file),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-800 flex items-center justify-center",
+							children: [isImage && file.downloadUrl ? /* @__PURE__ */ jsx("img", {
+								src: file.downloadUrl,
+								alt: file.name,
+								className: "w-full h-full object-cover",
+								loading: "lazy"
+							}) : /* @__PURE__ */ jsx(FileIconComp, { className: "text-surface-accent-400 dark:text-surface-accent-500 w-8 h-8" }), getExtension(file.name) && /* @__PURE__ */ jsx("div", {
+								className: "absolute bottom-1.5 right-1.5 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase bg-black/50 text-white backdrop-blur-sm",
+								children: getExtension(file.name)
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "p-2.5",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "text-[12px] font-medium truncate text-surface-900 dark:text-white",
+								children: file.name
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								color: "secondary",
+								className: "truncate block mt-0.5 text-[11px]",
+								children: file.size !== void 0 ? formatFileSize(file.size) : "—"
+							})]
+						})]
+					}, file.fullPath);
+				})
+			})] })]
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full w-full bg-white dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-full w-full",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex-grow flex flex-col min-w-0 h-full",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-800 shrink-0 h-10", defaultBorderMixin),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1.5 flex-grow overflow-hidden px-3 py-2",
+								children: [
+									currentPath && /* @__PURE__ */ jsx(Tooltip, {
+										title: "Go up",
+										children: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											onClick: handleNavigateUp,
+											children: /* @__PURE__ */ jsx(ArrowLeftIcon, { size: iconSize.smallest })
+										})
+									}),
+									/* @__PURE__ */ jsx("div", {
+										className: "flex items-center gap-0.5 overflow-x-auto no-scrollbar",
+										children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && /* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											className: "text-text-disabled dark:text-text-disabled-dark mx-0.5",
+											children: "/"
+										}), /* @__PURE__ */ jsx(Button, {
+											variant: "text",
+											size: "small",
+											className: cls("px-1.5 py-0.5 min-h-0 min-w-0 h-6 text-xs whitespace-nowrap normal-case font-normal", i === segments.length - 1 ? "text-text-primary dark:text-text-primary-dark font-medium" : "text-text-secondary dark:text-text-secondary-dark"),
+											onClick: () => handleNavigate(seg.path),
+											children: seg.label
+										})] }, seg.path))
+									}),
+									/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+									selectedPaths.size > 0 ? /* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-1.5 shrink-0",
+										children: [
+											/* @__PURE__ */ jsxs(Typography, {
+												variant: "body2",
+												className: "text-[13px] font-medium whitespace-nowrap",
+												children: [selectedPaths.size, " selected"]
+											}),
+											/* @__PURE__ */ jsxs(Button, {
+												size: "small",
+												variant: "text",
+												onClick: () => {
+													setDeleteDialogTarget("selection");
+													setDeleteDialogOpen(true);
+												},
+												children: [/* @__PURE__ */ jsx(Trash2Icon, {
+													size: 14,
+													className: "mr-1"
+												}), "Delete"]
+											}),
+											/* @__PURE__ */ jsxs(Button, {
+												size: "small",
+												variant: "text",
+												onClick: () => {
+													setSelectedPaths(/* @__PURE__ */ new Set());
+													setSelectedFile(null);
+													setSelectedDownloadUrl(null);
+												},
+												children: [/* @__PURE__ */ jsx(XIcon, {
+													size: 14,
+													className: "mr-1"
+												}), "Deselect"]
+											})
+										]
+									}) : !loading ? /* @__PURE__ */ jsxs(Chip, {
+										size: "small",
+										className: "shrink-0 text-[10px]",
+										children: [
+											files.length,
+											" file",
+											files.length !== 1 ? "s" : "",
+											folders.length > 0 ? `, ${folders.length} folder${folders.length !== 1 ? "s" : ""}` : ""
+										]
+									}) : null
+								]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-center justify-end gap-1.5 pr-1",
+								children: [
+									/* @__PURE__ */ jsx(Tooltip, {
+										title: "Grid view",
+										children: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											onClick: () => setViewMode("grid"),
+											className: cls(viewMode === "grid" && "bg-surface-100 dark:bg-surface-800"),
+											children: /* @__PURE__ */ jsx(LayoutGridIcon, { size: iconSize.smallest })
+										})
+									}),
+									/* @__PURE__ */ jsx(Tooltip, {
+										title: "List view",
+										children: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											onClick: () => setViewMode("list"),
+											className: cls(viewMode === "list" && "bg-surface-100 dark:bg-surface-800"),
+											children: /* @__PURE__ */ jsx(ListIcon, { size: iconSize.smallest })
+										})
+									}),
+									/* @__PURE__ */ jsx("div", { className: cls("h-4 w-px mx-0.5", defaultBorderMixin, "bg-surface-200 dark:bg-surface-700") }),
+									/* @__PURE__ */ jsx(Tooltip, {
+										title: "Refresh",
+										children: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											onClick: handleRefresh,
+											disabled: loading,
+											children: /* @__PURE__ */ jsx(RefreshCwIcon, { size: iconSize.smallest })
+										})
+									}),
+									/* @__PURE__ */ jsx(Tooltip, {
+										title: "New folder",
+										children: /* @__PURE__ */ jsx(IconButton, {
+											size: "small",
+											onClick: () => {
+												setNewFolderName("");
+												setNewFolderDialogOpen(true);
+											},
+											children: /* @__PURE__ */ jsx(FolderPlusIcon, { size: iconSize.smallest })
+										})
+									}),
+									/* @__PURE__ */ jsxs(Button, {
+										size: "small",
+										color: "primary",
+										onClick: () => setUploadDialogOpen(true),
+										children: [/* @__PURE__ */ jsx(UploadCloudIcon, {
+											size: iconSize.smallest,
+											className: "mr-1"
+										}), "Upload"]
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							...getDropRootProps(),
+							className: "flex-grow flex flex-col overflow-hidden min-h-0 relative",
+							onClick: (e) => {
+								if (!e.target.closest("[data-storage-item]") && selectedPaths.size > 0) {
+									setSelectedPaths(/* @__PURE__ */ new Set());
+									setSelectedFile(null);
+									setSelectedDownloadUrl(null);
+								}
+							},
+							children: [
+								/* @__PURE__ */ jsx("input", { ...getDropInputProps() }),
+								renderContents(),
+								isDragActive && /* @__PURE__ */ jsx("div", {
+									className: "absolute inset-0 z-10 flex items-center justify-center bg-primary/5 dark:bg-primary/10 backdrop-blur-[2px]",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col items-center gap-2 p-6 rounded-xl border-2 border-dashed border-primary bg-white/80 dark:bg-surface-900/80",
+										children: [
+											/* @__PURE__ */ jsx(UploadCloudIcon, { className: "w-10 h-10 text-primary" }),
+											/* @__PURE__ */ jsx(Typography, {
+												variant: "subtitle2",
+												className: "text-primary font-semibold",
+												children: "Drop files to upload"
+											}),
+											/* @__PURE__ */ jsxs(Typography, {
+												variant: "caption",
+												color: "secondary",
+												children: ["to /", currentPath || "root"]
+											})
+										]
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: cls("px-4 py-1.5 border-t bg-surface-50 dark:bg-surface-800 flex items-center justify-between shrink-0", defaultBorderMixin),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-4 text-[11px]",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-text-disabled dark:text-text-disabled-dark font-bold uppercase tracking-tighter",
+									children: "Path"
+								}), /* @__PURE__ */ jsxs("span", {
+									className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+									children: ["/", currentPath || ""]
+								})]
+							}), selectedPaths.size > 0 ? /* @__PURE__ */ jsxs("div", {
+								className: "text-[11px] text-text-secondary dark:text-text-secondary-dark",
+								children: [
+									selectedPaths.size,
+									" item",
+									selectedPaths.size !== 1 ? "s" : "",
+									" selected"
+								]
+							}) : selectedFile ? /* @__PURE__ */ jsxs("div", {
+								className: "text-[11px] text-text-secondary dark:text-text-secondary-dark",
+								children: ["Selected: ", /* @__PURE__ */ jsx("span", {
+									className: "font-mono",
+									children: selectedFile.name
+								})]
+							}) : null]
+						})
+					]
+				}), selectedFile && /* @__PURE__ */ jsx("div", {
+					className: "w-80 lg:w-96 shrink-0",
+					children: /* @__PURE__ */ jsx(FilePreviewPanel, {
+						file: selectedFile,
+						downloadUrl: selectedDownloadUrl,
+						onClose: () => {
+							setSelectedFile(null);
+							setSelectedDownloadUrl(null);
+						},
+						onDelete: () => handleDeleteFile(selectedFile)
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(UploadDialog, {
+				open: uploadDialogOpen,
+				currentPath,
+				onClose: () => setUploadDialogOpen(false),
+				onUpload: handleUpload
+			}),
+			/* @__PURE__ */ jsxs(Dialog, {
+				open: deleteDialogOpen,
+				onOpenChange: (open) => {
+					if (!open && !deleting) {
+						setDeleteDialogOpen(false);
+						setDeleteDialogTarget(null);
+					}
+				},
+				children: [/* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "subtitle1",
+					className: "font-semibold mb-2",
+					children: deleteDialogTarget === "selection" ? `Delete ${selectedPaths.size} item${selectedPaths.size !== 1 ? "s" : ""}?` : deleteDialogTarget ? `Delete folder "${deleteDialogTarget.name}"?` : "Delete?"
+				}), /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					children: deleteDialogTarget === "selection" ? "This will permanently delete all selected files and folders, including their contents. This action cannot be undone." : "This will permanently delete the folder and all of its contents. This action cannot be undone."
+				})] }), /* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					onClick: () => {
+						setDeleteDialogOpen(false);
+						setDeleteDialogTarget(null);
+					},
+					disabled: deleting,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsxs(LoadingButton, {
+					color: "error",
+					loading: deleting,
+					onClick: deleteDialogTarget === "selection" ? handleBulkDelete : handleConfirmDeleteFolder,
+					children: [/* @__PURE__ */ jsx(Trash2Icon, {
+						size: 14,
+						className: "mr-1"
+					}), "Delete"]
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs(Dialog, {
+				open: newFolderDialogOpen,
+				onOpenChange: (open) => {
+					if (!open && !creatingFolder) {
+						setNewFolderDialogOpen(false);
+						setNewFolderName("");
+					}
+				},
+				children: [/* @__PURE__ */ jsxs(DialogContent, { children: [
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "subtitle1",
+						className: "font-semibold mb-4",
+						children: "New Folder"
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						autoFocus: true,
+						size: "small",
+						label: "Folder name",
+						value: newFolderName,
+						onChange: (e) => setNewFolderName(e.target.value),
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && newFolderName.trim()) {
+								e.preventDefault();
+								handleCreateFolder();
+							}
+						},
+						disabled: creatingFolder,
+						placeholder: "Enter folder name"
+					}),
+					currentPath && /* @__PURE__ */ jsxs(Typography, {
+						variant: "caption",
+						color: "secondary",
+						className: "mt-2",
+						children: ["Will be created in ", /* @__PURE__ */ jsxs("span", {
+							className: "font-mono",
+							children: [
+								"/",
+								currentPath,
+								"/"
+							]
+						})]
+					})
+				] }), /* @__PURE__ */ jsxs(DialogActions, { children: [/* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					onClick: () => {
+						setNewFolderDialogOpen(false);
+						setNewFolderName("");
+					},
+					disabled: creatingFolder,
+					children: "Cancel"
+				}), /* @__PURE__ */ jsxs(LoadingButton, {
+					color: "primary",
+					loading: creatingFolder,
+					disabled: !newFolderName.trim(),
+					onClick: handleCreateFolder,
+					children: [/* @__PURE__ */ jsx(FolderPlusIcon, {
+						size: 14,
+						className: "mr-1"
+					}), "Create"]
+				})] })]
+			})
+		]
+	});
+};
+//#endregion
+export { StorageView };
+
+//# sourceMappingURL=StorageView-nDaC2foF.js.map