@rebasepro/studio 0.0.1-canary.eae7889 → 0.1.0

package/dist/StorageView-BYoslzBR.js

@@ -0,0 +1,870 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Tooltip, IconButton, iconSize, Typography, Button, cls, Chip, defaultBorderMixin, Dialog, DialogContent, DialogActions, LoadingButton, TextField, CircularProgress, Checkbox, DialogTitle, FileUpload } from "@rebasepro/ui";
+import { ArrowLeftIcon, Trash2Icon, XIcon, LayoutGridIcon, ListIcon, RefreshCwIcon, FolderPlusIcon, UploadCloudIcon, PlusIcon, FolderIcon, DownloadIcon, Music2Icon, CheckIcon, CopyIcon, FileTextIcon, ImageIcon, VideoIcon } from "lucide-react";
+import { useStorageSource, useSnackbarController, useApiConfig, ErrorView } from "@rebasepro/core";
+import { useSearchParams } from "react-router-dom";
+import { useDropzone } from "react-dropzone";
+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_0) => prev_0.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_0) => /* @__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_0);
+          }, disabled: uploading, children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+        ] }, `${file.name}-${index_0}`)) })
+      ] })
+    ] }),
+    /* @__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_0 = file.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
+        const isVideo_0 = file.contentType?.startsWith("video/") || ["mp4", "webm", "ogg", "mov"].includes(ext);
+        const isAudio_0 = file.contentType?.startsWith("audio/") || ["mp3", "wav", "ogg", "m4a"].includes(ext);
+        const downloadUrl_0 = file.downloadUrl;
+        if (isImage_0 && downloadUrl_0) {
+          return /* @__PURE__ */ jsx("img", { src: downloadUrl_0, alt: file.name, className: "max-w-full max-h-[400px] object-contain rounded-md shadow-sm" });
+        } else if (isVideo_0 && downloadUrl_0) {
+          return /* @__PURE__ */ jsx("video", { src: downloadUrl_0, className: "max-w-full max-h-[400px] rounded-md", controls: true });
+        } else if (isAudio_0 && downloadUrl_0) {
+          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_0, 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: (() => {
+              const fullUrl_0 = downloadUrl.startsWith("http") ? downloadUrl : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+              return fullUrl_0;
+            })() }),
+            /* @__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" })
+      ] })
+    ] })
+  ] });
+}
+const 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_0) => {
+        try {
+          const downloadConfig = await storageSourceRef.current.getSignedUrl(ref_0.fullPath);
+          return {
+            name: ref_0.name,
+            fullPath: ref_0.fullPath,
+            isFolder: false,
+            size: downloadConfig.metadata?.size,
+            contentType: downloadConfig.metadata?.contentType,
+            downloadUrl: downloadConfig.url ?? void 0
+          };
+        } catch {
+          return {
+            name: ref_0.name,
+            fullPath: ref_0.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_0) => {
+    if (!path_0) {
+      setSearchParams({});
+    } else {
+      setSearchParams({
+        path: path_0
+      });
+    }
+    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_0) => {
+    const path_1 = item.fullPath;
+    if (e_0.metaKey || e_0.ctrlKey) {
+      setSelectedPaths((prev) => {
+        const next = new Set(prev);
+        if (next.has(path_1)) next.delete(path_1);
+        else next.add(path_1);
+        return next;
+      });
+      lastClickedRef.current = path_1;
+    } else if (e_0.shiftKey && lastClickedRef.current) {
+      const allPaths = allItems.map((i) => i.fullPath);
+      const anchorIdx = allPaths.indexOf(lastClickedRef.current);
+      const currentIdx = allPaths.indexOf(path_1);
+      if (anchorIdx >= 0 && currentIdx >= 0) {
+        const [start, end] = anchorIdx < currentIdx ? [anchorIdx, currentIdx] : [currentIdx, anchorIdx];
+        setSelectedPaths((prev_0) => {
+          const next_0 = new Set(prev_0);
+          for (let i_0 = start; i_0 <= end; i_0++) next_0.add(allPaths[i_0]);
+          return next_0;
+        });
+      }
+    } else {
+      setSelectedPaths(/* @__PURE__ */ new Set([path_1]));
+      lastClickedRef.current = path_1;
+      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_0) => {
+    if (item_0.isFolder) {
+      handleNavigate(item_0.fullPath);
+    } else {
+      setSelectedFile(item_0);
+      if (item_0.downloadUrl) {
+        setSelectedDownloadUrl(item_0.downloadUrl);
+      } else {
+        storageSourceRef.current.getSignedUrl(item_0.fullPath).then((config_0) => setSelectedDownloadUrl(config_0.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;
+    }
+    const existingFolder = folders.find((f) => f.name === name);
+    if (existingFolder) {
+      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_1) {
+      snackbarController.open({
+        type: "error",
+        message: e_1 instanceof Error ? e_1.message : String(e_1)
+      });
+    } finally {
+      setCreatingFolder(false);
+    }
+  }, [newFolderName, currentPath, apiConfig, snackbarController, fetchContents, folders]);
+  const handleDropFiles = useCallback(async (droppedFiles) => {
+    if (droppedFiles.length === 0) return;
+    try {
+      for (const file_0 of droppedFiles) {
+        const key_0 = currentPath ? `${currentPath}/${file_0.name}` : file_0.name;
+        await storageSourceRef.current.putObject({
+          file: file_0,
+          key: key_0
+        });
+      }
+      snackbarController.open({
+        type: "success",
+        message: `${droppedFiles.length} file${droppedFiles.length > 1 ? "s" : ""} uploaded successfully`
+      });
+      await fetchContents(currentPath);
+    } catch (e_2) {
+      snackbarController.open({
+        type: "error",
+        message: e_2 instanceof Error ? e_2.message : String(e_2)
+      });
+    }
+  }, [currentPath, snackbarController, fetchContents]);
+  const {
+    getRootProps: getDropRootProps,
+    getInputProps: getDropInputProps,
+    isDragActive
+  } = useDropzone({
+    onDrop: handleDropFiles,
+    noClick: true,
+    noKeyboard: true,
+    noDragEventsBubbling: true
+  });
+  const deleteFolderRecursive = useCallback(async (prefix) => {
+    const result_0 = await storageSourceRef.current.listObjects(prefix);
+    for (const item_1 of result_0.items ?? []) {
+      await storageSourceRef.current.deleteObject(item_1.fullPath);
+    }
+    for (const sub of result_0.prefixes ?? []) {
+      await deleteFolderRecursive(sub.fullPath);
+    }
+    try {
+      await storageSourceRef.current.deleteObject(prefix);
+    } catch {
+    }
+  }, []);
+  const handleDeleteFile = useCallback(async (file_1) => {
+    try {
+      if (file_1.isFolder) {
+        await deleteFolderRecursive(file_1.fullPath);
+      } else {
+        await storageSourceRef.current.deleteObject(file_1.fullPath);
+      }
+      snackbarController.open({
+        type: "success",
+        message: `"${file_1.name}" deleted`
+      });
+      setSelectedFile(null);
+      setSelectedDownloadUrl(null);
+      setSelectedPaths((prev_1) => {
+        const next_1 = new Set(prev_1);
+        next_1.delete(file_1.fullPath);
+        return next_1;
+      });
+      fetchContents(currentPath);
+    } catch (e_3) {
+      snackbarController.open({
+        type: "error",
+        message: e_3 instanceof Error ? e_3.message : String(e_3)
+      });
+    }
+  }, [currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+  const handleBulkDelete = useCallback(async () => {
+    setDeleting(true);
+    try {
+      const items = allItems.filter((i_1) => selectedPaths.has(i_1.fullPath));
+      for (const item_2 of items) {
+        if (item_2.isFolder) {
+          await deleteFolderRecursive(item_2.fullPath);
+        } else {
+          await storageSourceRef.current.deleteObject(item_2.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_4) {
+      snackbarController.open({
+        type: "error",
+        message: e_4 instanceof Error ? e_4.message : String(e_4)
+      });
+    } 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_2) => {
+        const next_2 = new Set(prev_2);
+        next_2.delete(deleteDialogTarget.fullPath);
+        return next_2;
+      });
+      await fetchContents(currentPath);
+    } catch (e_5) {
+      snackbarController.open({
+        type: "error",
+        message: e_5 instanceof Error ? e_5.message : String(e_5)
+      });
+    } 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_2) => i_2.fullPath)));
+    }
+  }, [allItems, selectedPaths]);
+  useEffect(() => {
+    const handler = (e_6) => {
+      if (deleteDialogOpen || uploadDialogOpen || newFolderDialogOpen) return;
+      if ((e_6.metaKey || e_6.ctrlKey) && e_6.key === "a") {
+        e_6.preventDefault();
+        handleSelectAll();
+      }
+      if (e_6.key === "Escape") {
+        setSelectedPaths(/* @__PURE__ */ new Set());
+        setSelectedFile(null);
+        setSelectedDownloadUrl(null);
+      }
+      if ((e_6.key === "Delete" || e_6.key === "Backspace") && selectedPaths.size > 0 && !e_6.metaKey && !e_6.ctrlKey) {
+        if (e_6.target?.tagName === "INPUT" || e_6.target?.tagName === "TEXTAREA") return;
+        e_6.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_7) => handleItemClick(folder, e_7), onDoubleClick: () => handleItemDoubleClick(folder), children: [
+              /* @__PURE__ */ jsx("td", { className: "pl-3 pr-0 py-2.5", onClick: (e_8) => e_8.stopPropagation(), children: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: isChecked, onCheckedChange: () => {
+                setSelectedPaths((prev_3) => {
+                  const next_3 = new Set(prev_3);
+                  if (next_3.has(folder.fullPath)) next_3.delete(folder.fullPath);
+                  else next_3.add(folder.fullPath);
+                  return next_3;
+                });
+              } }) }),
+              /* @__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_2) => {
+            const FileIconComp = getFileIcon(file_2.contentType);
+            const isChecked_0 = selectedPaths.has(file_2.fullPath);
+            return /* @__PURE__ */ jsxs("tr", { "data-storage-item": true, className: cls("cursor-pointer transition-colors border-b group", defaultBorderMixin, isChecked_0 ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-100 dark:hover:bg-surface-800"), onClick: (e_9) => handleItemClick(file_2, e_9), onDoubleClick: () => handleItemDoubleClick(file_2), children: [
+              /* @__PURE__ */ jsx("td", { className: "pl-3 pr-0 py-2.5", onClick: (e_10) => e_10.stopPropagation(), children: /* @__PURE__ */ jsx(Checkbox, { size: "small", checked: isChecked_0, onCheckedChange: () => {
+                setSelectedPaths((prev_4) => {
+                  const next_4 = new Set(prev_4);
+                  if (next_4.has(file_2.fullPath)) next_4.delete(file_2.fullPath);
+                  else next_4.add(file_2.fullPath);
+                  return next_4;
+                });
+              } }) }),
+              /* @__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_2.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_2.name) || file_2.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_2.size !== void 0 ? formatFileSize(file_2.size) : "—" }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-2 py-2.5", onClick: (e_11) => e_11.stopPropagation(), children: /* @__PURE__ */ jsx(IconButton, { size: "smallest", className: "opacity-0 group-hover:opacity-100 transition-opacity", onClick: () => handleDeleteFile(file_2), children: /* @__PURE__ */ jsx(Trash2Icon, { size: 14 }) }) })
+            ] }, file_2.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_0) => {
+          const isChecked_1 = selectedPaths.has(folder_0.fullPath);
+          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", isChecked_1 && "ring-2 ring-primary bg-primary/5 dark:bg-primary/10"), onClick: (e_12) => handleItemClick(folder_0, e_12), onDoubleClick: () => handleItemDoubleClick(folder_0), 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_0.name })
+          ] }, folder_0.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_3) => {
+          const FileIconComp_0 = getFileIcon(file_3.contentType);
+          const ext = getExtension(file_3.name)?.toLowerCase() || "";
+          const isImage = file_3.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
+          const isChecked_2 = selectedPaths.has(file_3.fullPath);
+          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", isChecked_2 && "ring-2 ring-primary"), onClick: (e_13) => handleItemClick(file_3, e_13), onDoubleClick: () => handleItemDoubleClick(file_3), 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_3.downloadUrl ? /* @__PURE__ */ jsx("img", { src: file_3.downloadUrl, alt: file_3.name, className: "w-full h-full object-cover", loading: "lazy" }) : /* @__PURE__ */ jsx(FileIconComp_0, { className: "text-surface-accent-400 dark:text-surface-accent-500 w-8 h-8" }),
+              getExtension(file_3.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_3.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_3.name }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "truncate block mt-0.5 text-[11px]", children: file_3.size !== void 0 ? formatFileSize(file_3.size) : "—" })
+            ] })
+          ] }, file_3.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_3) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              i_3 > 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_3 === 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_14) => {
+          const target = e_14.target;
+          if (!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_0) => {
+      if (!open_0 && !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_15) => setNewFolderName(e_15.target.value), onKeyDown: (e_16) => {
+          if (e_16.key === "Enter" && newFolderName.trim()) {
+            e_16.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"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  StorageView
+};
+//# sourceMappingURL=StorageView-BYoslzBR.js.map