@rebasepro/studio 0.0.1-canary.000dc36

package/dist/StorageView-DG9tJZG1.js

@@ -0,0 +1,811 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import React, { useState, useEffect, useCallback } from "react";
+import { Tooltip, IconButton, iconSize, Typography, Button, cls, Chip, defaultBorderMixin, CircularProgress, DialogContent, Dialog, FileUpload, DialogActions } from "@rebasepro/ui";
+import { ArrowLeftIcon, LayoutGridIcon, ListIcon, RefreshCwIcon, UploadCloudIcon, PlusIcon, FolderIcon, DownloadIcon, Trash2Icon, XIcon, FileTextIcon, ImageIcon, VideoIcon, Music2Icon } from "lucide-react";
+import { useStorageSource, useSnackbarController, ErrorView } from "@rebasepro/core";
+import { useSearchParams } from "react-router-dom";
+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(DialogContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-surface-accent-200 dark:border-surface-accent-700", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Upload Files" }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-text-secondary dark:text-text-secondary-dark mt-1 block", children: [
+          "to ",
+          /* @__PURE__ */ jsxs("span", { className: "font-mono text-primary", children: [
+            "/",
+            currentPath || "root"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsx(FileUpload, { accept: {}, onFilesAdded: handleFilesAdded, size: "large", uploadDescription: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center pointer-events-none mt-2", children: [
+          /* @__PURE__ */ jsx(UploadCloudIcon, { className: "text-surface-accent-400 mb-2 w-8 h-8" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "font-bold", children: "Drop files here or click to browse" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 font-medium", children: "Any file type supported" })
+        ] }) }),
+        error && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-red-500 mt-2 block whitespace-pre-line", children: error }),
+        selectedFiles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-surface-accent-500", 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: cls("flex items-center justify-between p-2 rounded", "bg-surface-accent-50 dark:bg-surface-accent-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", className: "text-surface-accent-500", children: formatFileSize(file.size) })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: (e) => {
+              e.stopPropagation();
+              handleRemoveFile(index_0);
+            }, disabled: uploading, children: "Remove" })
+          ] }, `${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, children: uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }),
+        "Uploading..."
+      ] }) : `Upload ${selectedFiles.length > 0 ? `(${selectedFiles.length})` : ""}` })
+    ] })
+  ] });
+}
+function FilePreviewPanel(t0) {
+  const $ = c(79);
+  const {
+    file,
+    onClose,
+    onDelete,
+    downloadUrl
+  } = t0;
+  file.contentType?.startsWith("image/");
+  file.contentType?.startsWith("video/");
+  file.contentType?.startsWith("audio/");
+  let t1;
+  if ($[0] !== file.contentType) {
+    t1 = getFileIcon(file.contentType);
+    $[0] = file.contentType;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const FileIconComponent = t1;
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  let t2;
+  let t3;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = cls("flex flex-col h-full border-l", defaultBorderMixin, "bg-white dark:bg-surface-950");
+    t3 = cls("flex items-center justify-between p-3 border-b shrink-0", defaultBorderMixin);
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== file.name) {
+    t4 = /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-medium truncate flex-1 mr-2", children: file.name });
+    $[4] = file.name;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== downloadUrl) {
+    t5 = downloadUrl && /* @__PURE__ */ jsx(Tooltip, { title: "Download", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => window.open(downloadUrl, "_blank"), children: /* @__PURE__ */ jsx(DownloadIcon, { size: iconSize.smallest }) }) });
+    $[6] = downloadUrl;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => setDeleteDialogOpen(true);
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /* @__PURE__ */ jsx(Tooltip, { title: "Delete", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: t6, className: "text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20", children: /* @__PURE__ */ jsx(Trash2Icon, { size: iconSize.smallest }) }) });
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  let t8;
+  if ($[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t8 = /* @__PURE__ */ jsx(XIcon, { size: iconSize.smallest });
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== onClose) {
+    t9 = /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClose, children: t8 });
+    $[11] = onClose;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== t5 || $[14] !== t9) {
+    t10 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      t5,
+      t7,
+      t9
+    ] });
+    $[13] = t5;
+    $[14] = t9;
+    $[15] = t10;
+  } else {
+    t10 = $[15];
+  }
+  let t11;
+  if ($[16] !== t10 || $[17] !== t4) {
+    t11 = /* @__PURE__ */ jsxs("div", { className: t3, children: [
+      t4,
+      t10
+    ] });
+    $[16] = t10;
+    $[17] = t4;
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  let t12;
+  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) {
+    let t132;
+    if ($[19] !== downloadUrl_0 || $[20] !== file.name) {
+      t132 = /* @__PURE__ */ jsx("img", { src: downloadUrl_0, alt: file.name, className: "max-w-full max-h-[400px] object-contain rounded-md shadow-sm" });
+      $[19] = downloadUrl_0;
+      $[20] = file.name;
+      $[21] = t132;
+    } else {
+      t132 = $[21];
+    }
+    t12 = t132;
+  } else {
+    if (isVideo_0 && downloadUrl_0) {
+      let t132;
+      if ($[22] !== downloadUrl_0) {
+        t132 = /* @__PURE__ */ jsx("video", { src: downloadUrl_0, className: "max-w-full max-h-[400px] rounded-md", controls: true });
+        $[22] = downloadUrl_0;
+        $[23] = t132;
+      } else {
+        t132 = $[23];
+      }
+      t12 = t132;
+    } else {
+      if (isAudio_0 && downloadUrl_0) {
+        let t132;
+        if ($[24] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+          t132 = /* @__PURE__ */ jsx(Music2Icon, { className: "text-surface-accent-400 w-10 h-10" });
+          $[24] = t132;
+        } else {
+          t132 = $[24];
+        }
+        let t142;
+        if ($[25] !== downloadUrl_0) {
+          t142 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+            t132,
+            /* @__PURE__ */ jsx("audio", { src: downloadUrl_0, controls: true, className: "w-full max-w-xs" })
+          ] });
+          $[25] = downloadUrl_0;
+          $[26] = t142;
+        } else {
+          t142 = $[26];
+        }
+        t12 = t142;
+      } else {
+        let t132;
+        if ($[27] !== FileIconComponent) {
+          t132 = /* @__PURE__ */ jsx(FileIconComponent, { className: "w-10 h-10" });
+          $[27] = FileIconComponent;
+          $[28] = t132;
+        } else {
+          t132 = $[28];
+        }
+        let t142;
+        if ($[29] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+          t142 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark", children: "No preview available" });
+          $[29] = t142;
+        } else {
+          t142 = $[29];
+        }
+        let t152;
+        if ($[30] !== t132) {
+          t152 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-surface-accent-400", children: [
+            t132,
+            t142
+          ] });
+          $[30] = t132;
+          $[31] = t152;
+        } else {
+          t152 = $[31];
+        }
+        t12 = t152;
+      }
+    }
+  }
+  let t13;
+  if ($[32] !== t12) {
+    t13 = /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-50 dark:bg-surface-900 border-b border-surface-accent-200 dark:border-surface-accent-700", children: t12 }) });
+    $[32] = t12;
+    $[33] = t13;
+  } else {
+    t13 = $[33];
+  }
+  let t14;
+  if ($[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t14 = /* @__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" }) });
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  let t15;
+  if ($[35] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Name" });
+    $[35] = t15;
+  } else {
+    t15 = $[35];
+  }
+  let t16;
+  if ($[36] !== file.name) {
+    t16 = /* @__PURE__ */ jsxs("div", { children: [
+      t15,
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-[13px] break-all", children: file.name })
+    ] });
+    $[36] = file.name;
+    $[37] = t16;
+  } else {
+    t16 = $[37];
+  }
+  let t17;
+  if ($[38] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Type" });
+    $[38] = t17;
+  } else {
+    t17 = $[38];
+  }
+  const t18 = file.contentType || "Unknown";
+  let t19;
+  if ($[39] !== t18) {
+    t19 = /* @__PURE__ */ jsxs("div", { children: [
+      t17,
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-[13px]", children: t18 })
+    ] });
+    $[39] = t18;
+    $[40] = t19;
+  } else {
+    t19 = $[40];
+  }
+  let t20;
+  if ($[41] !== file.size) {
+    t20 = 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) })
+    ] });
+    $[41] = file.size;
+    $[42] = t20;
+  } else {
+    t20 = $[42];
+  }
+  let t21;
+  if ($[43] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t21 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Extension" });
+    $[43] = t21;
+  } else {
+    t21 = $[43];
+  }
+  let t22;
+  if ($[44] !== file.name) {
+    t22 = getExtension(file.name) || "—";
+    $[44] = file.name;
+    $[45] = t22;
+  } else {
+    t22 = $[45];
+  }
+  let t23;
+  if ($[46] !== t22) {
+    t23 = /* @__PURE__ */ jsxs("div", { children: [
+      t21,
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-[13px] font-mono", children: t22 })
+    ] });
+    $[46] = t22;
+    $[47] = t23;
+  } else {
+    t23 = $[47];
+  }
+  let t24;
+  if ($[48] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t24 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 text-[11px]", children: "Path" });
+    $[48] = t24;
+  } else {
+    t24 = $[48];
+  }
+  let t25;
+  if ($[49] !== file.fullPath) {
+    t25 = /* @__PURE__ */ jsxs("div", { className: "col-span-2", children: [
+      t24,
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "text-[13px] font-mono break-all", children: file.fullPath })
+    ] });
+    $[49] = file.fullPath;
+    $[50] = t25;
+  } else {
+    t25 = $[50];
+  }
+  let t26;
+  if ($[51] !== t16 || $[52] !== t19 || $[53] !== t20 || $[54] !== t23 || $[55] !== t25) {
+    t26 = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+      t16,
+      t19,
+      t20,
+      t23,
+      t25
+    ] });
+    $[51] = t16;
+    $[52] = t19;
+    $[53] = t20;
+    $[54] = t23;
+    $[55] = t25;
+    $[56] = t26;
+  } else {
+    t26 = $[56];
+  }
+  let t27;
+  if ($[57] !== downloadUrl) {
+    t27 = 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: "p-2 rounded bg-surface-100 dark:bg-surface-950 cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors", onClick: () => {
+        navigator.clipboard.writeText(downloadUrl);
+      }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono text-[11px] break-all text-primary", children: downloadUrl }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-text-disabled dark:text-text-disabled-dark text-[10px] block mt-1", children: "Click to copy" })
+      ] })
+    ] });
+    $[57] = downloadUrl;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  let t28;
+  if ($[59] !== t26 || $[60] !== t27) {
+    t28 = /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-3", children: [
+      t14,
+      t26,
+      t27
+    ] });
+    $[59] = t26;
+    $[60] = t27;
+    $[61] = t28;
+  } else {
+    t28 = $[61];
+  }
+  let t29;
+  if ($[62] !== t11 || $[63] !== t13 || $[64] !== t28) {
+    t29 = /* @__PURE__ */ jsxs("div", { className: t2, children: [
+      t11,
+      t13,
+      t28
+    ] });
+    $[62] = t11;
+    $[63] = t13;
+    $[64] = t28;
+    $[65] = t29;
+  } else {
+    t29 = $[65];
+  }
+  let t30;
+  if ($[66] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t30 = /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: "mb-2", children: "Delete File?" });
+    $[66] = t30;
+  } else {
+    t30 = $[66];
+  }
+  let t31;
+  if ($[67] !== file.name) {
+    t31 = /* @__PURE__ */ jsxs(DialogContent, { children: [
+      t30,
+      /* @__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.'
+      ] })
+    ] });
+    $[67] = file.name;
+    $[68] = t31;
+  } else {
+    t31 = $[68];
+  }
+  let t32;
+  if ($[69] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t32 = /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => setDeleteDialogOpen(false), children: "Cancel" });
+    $[69] = t32;
+  } else {
+    t32 = $[69];
+  }
+  let t33;
+  if ($[70] !== onDelete) {
+    t33 = /* @__PURE__ */ jsxs(DialogActions, { children: [
+      t32,
+      /* @__PURE__ */ jsx(Button, { variant: "filled", color: "error", onClick: () => {
+        setDeleteDialogOpen(false);
+        onDelete();
+      }, children: "Delete" })
+    ] });
+    $[70] = onDelete;
+    $[71] = t33;
+  } else {
+    t33 = $[71];
+  }
+  let t34;
+  if ($[72] !== deleteDialogOpen || $[73] !== t31 || $[74] !== t33) {
+    t34 = /* @__PURE__ */ jsxs(Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: [
+      t31,
+      t33
+    ] });
+    $[72] = deleteDialogOpen;
+    $[73] = t31;
+    $[74] = t33;
+    $[75] = t34;
+  } else {
+    t34 = $[75];
+  }
+  let t35;
+  if ($[76] !== t29 || $[77] !== t34) {
+    t35 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t29,
+      t34
+    ] });
+    $[76] = t29;
+    $[77] = t34;
+    $[78] = t35;
+  } else {
+    t35 = $[78];
+  }
+  return t35;
+}
+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 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);
+  }, [setSearchParams]);
+  const handleNavigateUp = useCallback(() => {
+    const parts = currentPath.split("/").filter(Boolean);
+    parts.pop();
+    handleNavigate(parts.join("/"));
+  }, [currentPath, handleNavigate]);
+  const handleSelectFile = useCallback(async (file) => {
+    setSelectedFile(file);
+    if (file.downloadUrl) {
+      setSelectedDownloadUrl(file.downloadUrl);
+    } else {
+      try {
+        const config = await storageSourceRef.current.getSignedUrl(file.fullPath);
+        setSelectedDownloadUrl(config.url);
+      } catch {
+        setSelectedDownloadUrl(null);
+      }
+    }
+  }, []);
+  const handleUpload = useCallback(async (uploadFiles) => {
+    for (const file_0 of uploadFiles) {
+      const key = currentPath ? `${currentPath}/${file_0.name}` : file_0.name;
+      await storageSourceRef.current.putObject({
+        file: file_0,
+        key
+      });
+    }
+    snackbarController.open({
+      type: "success",
+      message: `${uploadFiles.length} file${uploadFiles.length > 1 ? "s" : ""} uploaded successfully`
+    });
+    fetchContents(currentPath);
+  }, [currentPath, snackbarController, fetchContents]);
+  const handleDeleteFile = useCallback(async (file_1) => {
+    try {
+      await storageSourceRef.current.deleteObject(file_1.fullPath);
+      snackbarController.open({
+        type: "success",
+        message: `"${file_1.name}" deleted`
+      });
+      setSelectedFile(null);
+      setSelectedDownloadUrl(null);
+      fetchContents(currentPath);
+    } catch (e_0) {
+      snackbarController.open({
+        type: "error",
+        message: e_0 instanceof Error ? e_0.message : String(e_0)
+      });
+    }
+  }, [currentPath, snackbarController, fetchContents]);
+  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 }) });
+    }
+    const allItems = [...folders, ...files];
+    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(Button, { className: "mt-3", 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: "px-4 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__ */ jsxs("tbody", { children: [
+          folders.map((folder) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer transition-colors border-b border-surface-100 dark:border-surface-950/50", onClick: () => handleNavigate(folder.fullPath), children: [
+            /* @__PURE__ */ jsx("td", { className: "px-4 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: "—" }) })
+          ] }, folder.fullPath)),
+          files.map((file_2) => {
+            const FileIconComp = getFileIcon(file_2.contentType);
+            const isSelected = selectedFile?.fullPath === file_2.fullPath;
+            return /* @__PURE__ */ jsxs("tr", { className: cls("cursor-pointer transition-colors border-b border-surface-100 dark:border-surface-950/50", isSelected ? "bg-primary/5 dark:bg-primary/10" : "hover:bg-surface-100 dark:hover:bg-surface-950"), onClick: () => handleSelectFile(file_2), children: [
+              /* @__PURE__ */ jsx("td", { className: "px-4 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) : "—" }) })
+            ] }, 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) => /* @__PURE__ */ jsxs("div", { className: cls("rounded-lg p-3 cursor-pointer transition-all duration-150 border", defaultBorderMixin, "hover:bg-surface-100 dark:hover:bg-surface-950 hover:shadow-sm", "flex items-center gap-2"), onClick: () => handleNavigate(folder_0.fullPath), 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 isSelected_0 = selectedFile?.fullPath === file_3.fullPath;
+          return /* @__PURE__ */ jsxs("div", { className: cls("rounded-lg overflow-hidden cursor-pointer transition-all duration-150 border group", defaultBorderMixin, "hover:shadow-md hover:-translate-y-0.5", isSelected_0 && "ring-2 ring-primary"), onClick: () => handleSelectFile(file_3), children: [
+            /* @__PURE__ */ jsxs("div", { className: "aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-950 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" }) : /* @__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__ */ jsx("div", { className: cls("absolute inset-0 bg-black/0 group-hover:bg-black/10", "transition-colors duration-200 pointer-events-none") })
+            ] }),
+            /* @__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-950 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-950 shrink-0", 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" }),
+            !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" : ""}` : ""
+            ] })
+          ] }),
+          /* @__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-950"), 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-950"), children: /* @__PURE__ */ jsx(ListIcon, { size: iconSize.smallest }) }) }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-0.5" }),
+            /* @__PURE__ */ jsx(Tooltip, { title: "Refresh", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleRefresh, disabled: loading, children: /* @__PURE__ */ jsx(RefreshCwIcon, { 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__ */ jsx("div", { className: "flex-grow flex flex-col overflow-hidden min-h-0", children: renderContents() }),
+        /* @__PURE__ */ jsxs("div", { className: cls("px-4 py-1.5 border-t bg-surface-50 dark:bg-surface-900 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 || ""
+            ] })
+          ] }),
+          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 })
+          ] })
+        ] })
+      ] }),
+      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 })
+  ] });
+};
+export {
+  StorageView
+};
+//# sourceMappingURL=StorageView-DG9tJZG1.js.map