@sparkstudio/storage-ui 1.0.12 → 1.0.14

package/dist/index.cjs

@@ -24,11 +24,18 @@ __export(index_exports, {
   Container: () => Container,
   ContainerDTO: () => ContainerDTO,
   ContainerType: () => ContainerType,
+  ContainerUploadPanel: () => ContainerUploadPanel,
+  DesktopFileIcon: () => DesktopFileIcon,
   Home: () => Home,
   HomeView: () => HomeView,
   S3: () => S3,
   SparkStudioStorageSDK: () => SparkStudioStorageSDK,
-  UploadContainer: () => UploadContainer
+  UploadContainer: () => UploadContainer,
+  UploadDropzone: () => UploadDropzone,
+  UploadFileToS3: () => UploadFileToS3,
+  UploadProgressList: () => UploadProgressList,
+  UseContainers: () => UseContainers,
+  UseUploadManager: () => UseUploadManager
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -216,6 +223,7 @@ var ContainerDTO = class {
   ContainerType;
   Name;
   ContentType;
+  PublicUrl;
   CreatedDate;
   FileSize;
   UserId;
@@ -225,6 +233,7 @@ var ContainerDTO = class {
     this.ContainerType = init.ContainerType;
     this.Name = init.Name;
     this.ContentType = init.ContentType;
+    this.PublicUrl = init.PublicUrl;
     this.CreatedDate = init.CreatedDate;
     this.FileSize = init.FileSize;
     this.UserId = init.UserId;
@@ -240,162 +249,76 @@ var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
   return ContainerType2;
 })(ContainerType || {});
 
+// src/components/ContainerUploadPanel.tsx
+var import_react7 = require("react");
+
 // src/components/UploadContainer.tsx
+var import_react5 = require("react");
+
+// src/components/UploadDropzone.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var UploadContainer = ({
-  title = "Upload files",
-  description = "Drag and drop files here, or click the button to browse.",
-  multiple = true,
-  accept,
-  onFilesSelected,
-  autoUpload = false,
-  getPresignedUrl,
-  onUploadComplete,
-  onUploadError
+var UploadDropzone = ({
+  isDragging,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  className = "",
+  style,
+  children
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
-  const [fileNames, setFileNames] = (0, import_react.useState)([]);
-  const [uploads, setUploads] = (0, import_react.useState)([]);
-  const startUploadsIfNeeded = (files) => {
-    if (!autoUpload || !getPresignedUrl) return;
-    const newUploads = Array.from(files).map((file) => ({
-      id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
-      file,
-      progress: 0,
-      status: "pending"
-    }));
-    setUploads((prev) => [...prev, ...newUploads]);
-    newUploads.forEach((upload) => {
-      uploadFile(upload);
-    });
-  };
-  const uploadFile = async (upload) => {
-    setUploads(
-      (prev) => prev.map(
-        (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
-      )
-    );
-    try {
-      if (!getPresignedUrl) {
-        throw new Error("getPresignedUrl is not provided.");
-      }
-      const presignedUrl = await getPresignedUrl(upload.file);
-      const url = presignedUrl?.PresignedUrl ?? "";
-      await uploadFileToS3(upload.file, url, (progress) => {
-        setUploads(
-          (prev) => prev.map(
-            (u) => u.id === upload.id ? { ...u, progress } : u
-          )
-        );
-      });
-      const fileUrl = url.split("?")[0];
-      setUploads(
-        (prev) => prev.map(
-          (u) => u.id === upload.id ? { ...u, status: "success", progress: 100, s3Url: fileUrl, publicUrl: presignedUrl.PublicUrl } : u
-        )
-      );
-      onUploadComplete?.(upload.file, fileUrl);
-    } catch (err) {
-      let message = "Upload failed";
-      if (err instanceof Error) {
-        message = err.message;
-      }
-      setUploads(
-        (prev) => prev.map(
-          (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
-        )
-      );
-      onUploadError?.(upload.file, err instanceof Error ? err : new Error(message));
-    }
-  };
+  const baseClass = "border rounded-3 p-4 mb-3 d-flex flex-column align-items-center justify-content-center ";
+  const stateClass = isDragging ? "bg-light border-primary" : "border-secondary border-dashed";
+  const combinedClassName = `${baseClass}${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
-    setIsDragging(true);
+    if (onDragOver) onDragOver(e);
   };
   const handleDragLeave = (e) => {
     e.preventDefault();
-    setIsDragging(false);
+    if (onDragLeave) onDragLeave(e);
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    setIsDragging(false);
-    const files = e.dataTransfer.files;
-    if (!files || files.length === 0) return;
-    setFileNames(Array.from(files).map((f) => f.name));
-    onFilesSelected?.(files);
-    startUploadsIfNeeded(files);
-  };
-  const handleFileChange = (e) => {
-    const files = e.target.files;
-    if (!files || files.length === 0) return;
-    setFileNames(Array.from(files).map((f) => f.name));
-    onFilesSelected?.(files);
-    startUploadsIfNeeded(files);
+    if (onDrop) onDrop(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "container my-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "card shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "card-body", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: "card-title mb-2", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "card-text text-muted", children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: "border rounded-3 p-4 text-center mb-3 d-flex flex-column align-items-center justify-content-center " + (isDragging ? "bg-light border-primary" : "border-secondary border-dashed"),
-        style: { cursor: "pointer", minHeight: "140px" },
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onDrop: handleDrop,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "bi bi-cloud-arrow-up fs-1 mb-2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-2", children: "Drop files here" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { className: "text-muted", children: "or click the button below" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "d-flex gap-2 align-items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "btn btn-primary mb-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "bi bi-folder2-open me-2" }),
-        "Browse files",
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "input",
-          {
-            type: "file",
-            className: "d-none",
-            multiple,
-            accept,
-            onChange: handleFileChange
-          }
-        )
-      ] }),
-      fileNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-grow-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "small text-muted", children: "Selected:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: name }, name)) })
-      ] })
-    ] }),
-    uploads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "d-flex justify-content-between small mb-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-          u.file.name,
-          " - ",
-          u?.publicUrl ?? ""
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: "progress-bar " + (u.status === "success" ? "bg-success" : u.status === "error" ? "bg-danger" : ""),
-          role: "progressbar",
-          style: { width: `${u.progress}%` },
-          "aria-valuenow": u.progress,
-          "aria-valuemin": 0,
-          "aria-valuemax": 100
-        }
-      ) }),
-      u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
-    ] }, u.id)) })
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: combinedClassName,
+      style: { minHeight: "140px", ...style },
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children
+    }
+  );
 };
-async function uploadFileToS3(file, presignedUrl, onProgress) {
+
+// src/hooks/UseUploadManager.ts
+var import_react2 = require("react");
+
+// src/engines/UploadFileToS3.ts
+async function UploadFileToS3(file, presignedUrl, onProgress, maxRetries = 3) {
+  let attempt = 0;
+  while (true) {
+    try {
+      await uploadOnce(file, presignedUrl, onProgress);
+      return;
+    } catch (err) {
+      if (attempt >= maxRetries) {
+        throw new Error(
+          `Upload failed after ${attempt + 1} attempts: ${err.message}`
+        );
+      }
+      attempt++;
+      const delay = 300 * attempt;
+      await new Promise((res) => setTimeout(res, delay));
+      console.warn(`Retrying upload (attempt ${attempt + 1})...`);
+    }
+  }
+}
+async function uploadOnce(file, presignedUrl, onProgress) {
   return new Promise((resolve, reject) => {
     const xhr = new XMLHttpRequest();
     xhr.open("PUT", presignedUrl);
@@ -410,13 +333,11 @@ async function uploadFileToS3(file, presignedUrl, onProgress) {
         resolve();
       } else {
         reject(
-          new Error(`S3 upload failed with status ${xhr.status}: ${xhr.statusText}`)
+          new Error(`S3 upload failed: ${xhr.status} ${xhr.statusText}`)
         );
       }
     };
-    xhr.onerror = () => {
-      reject(new Error("Network error while uploading to S3"));
-    };
+    xhr.onerror = () => reject(new Error("Network error while uploading to S3"));
     xhr.setRequestHeader(
       "Content-Type",
       file.type || "application/octet-stream"
@@ -425,59 +346,585 @@ async function uploadFileToS3(file, presignedUrl, onProgress) {
   });
 }
 
-// src/views/HomeView.tsx
-var import_authentication_ui = require("@sparkstudio/authentication-ui");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function HomeView() {
-  function handleOnLoginSuccess(user) {
-    alert(user?.Id);
+// src/hooks/UseUploadManager.ts
+function UseUploadManager({
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
+}) {
+  const [uploads, setUploads] = (0, import_react2.useState)([]);
+  const createUploadStates = (files) => Array.from(files).map((file) => ({
+    id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
+    file,
+    progress: 0,
+    status: "pending"
+  }));
+  const uploadFile = (0, import_react2.useCallback)(
+    async (upload) => {
+      setUploads(
+        (prev) => prev.map(
+          (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
+        )
+      );
+      try {
+        if (!getPresignedUrl) {
+          throw new Error("getPresignedUrl is not provided.");
+        }
+        const presignedUrl = await getPresignedUrlWithRetry(upload.file, 10);
+        const url = presignedUrl?.PresignedUrl ?? "";
+        await UploadFileToS3(upload.file, url, (progress) => {
+          setUploads(
+            (prev) => prev.map(
+              (u) => u.id === upload.id ? { ...u, progress } : u
+            )
+          );
+        });
+        const fileUrl = url.split("?")[0];
+        setUploads(
+          (prev) => prev.map(
+            (u) => u.id === upload.id ? {
+              ...u,
+              status: "success",
+              progress: 100,
+              s3Url: fileUrl,
+              // assumes your DTO has PublicUrl
+              publicUrl: presignedUrl.PublicUrl
+            } : u
+          )
+        );
+        onUploadComplete?.(upload.file, fileUrl);
+      } catch (err) {
+        let message = "Upload failed";
+        if (err instanceof Error) {
+          message = err.message;
+        }
+        setUploads(
+          (prev) => prev.map(
+            (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
+          )
+        );
+        onUploadError?.(
+          upload.file,
+          err instanceof Error ? err : new Error(message)
+        );
+      }
+    },
+    [getPresignedUrl, onUploadComplete, onUploadError]
+  );
+  async function getPresignedUrlWithRetry(file, attempts = 3) {
+    let lastError;
+    for (let i = 1; i <= attempts; i++) {
+      try {
+        return await getPresignedUrl(file);
+      } catch (err) {
+        lastError = err;
+        if (i < attempts) {
+          await new Promise((r) => setTimeout(r, 500 * i));
+        }
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
   }
+  const startUploadsIfNeeded = (0, import_react2.useCallback)(
+    (files) => {
+      if (!autoUpload || !getPresignedUrl) return;
+      const newUploads = createUploadStates(files);
+      setUploads((prev) => [...prev, ...newUploads]);
+      newUploads.forEach((upload) => {
+        void uploadFile(upload);
+      });
+    },
+    [autoUpload, getPresignedUrl, uploadFile]
+  );
+  const resetUploads = (0, import_react2.useCallback)(() => setUploads([]), []);
+  return {
+    uploads,
+    startUploadsIfNeeded,
+    resetUploads
+  };
+}
+
+// src/components/UploadProgressList.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var UploadProgressList = ({
+  uploads
+}) => {
+  const visibleUploads = uploads.filter((u) => u.status !== "success");
+  if (visibleUploads.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: "w-100 d-flex flex-wrap gap-4 align-content-start mt-3",
+      style: { minHeight: "80px" },
+      children: visibleUploads.map((u) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: "d-flex flex-column align-items-center",
+          style: {
+            width: 96,
+            userSelect: "none"
+          },
+          title: u.file.name,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
+              {
+                className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+                style: {
+                  width: 64,
+                  height: 64
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "small text-center text-truncate",
+                style: { width: "100%" },
+                children: u.file.name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-100 mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "progress", style: { height: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "progress-bar " + (u.status === "error" ? "bg-danger" : ""),
+                role: "progressbar",
+                style: { width: `${u.progress}%` },
+                "aria-valuenow": u.progress,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100
+              }
+            ) }) }),
+            u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "text-danger small mt-1 text-center",
+                style: { width: "100%" },
+                children: u.error ?? "Upload failed"
+              }
+            )
+          ]
+        },
+        u.id
+      ))
+    }
+  );
+};
+
+// src/components/DesktopFileIcon.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DesktopFileIcon = ({
+  name,
+  sizeBytes,
+  downloadUrl,
+  onOpen,
+  onDelete
+}) => {
+  const [contextMenuPos, setContextMenuPos] = (0, import_react4.useState)(
+    null
+  );
+  const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
+  const iconRef = (0, import_react4.useRef)(null);
+  const menuRef = (0, import_react4.useRef)(null);
+  const handleDoubleClick = () => {
+    if (onOpen) {
+      onOpen();
+      return;
+    }
+    if (downloadUrl) {
+      const a = document.createElement("a");
+      a.href = downloadUrl;
+      a.download = name ?? "";
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  };
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+    setContextMenuPos({ x: e.clientX, y: e.clientY });
+  };
+  const closeMenu = () => setContextMenuPos(null);
+  const handleDownload = () => {
+    closeMenu();
+    if (!downloadUrl) return;
+    const a = document.createElement("a");
+    a.href = downloadUrl;
+    a.download = name ?? "";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  const handleCopyUrl = async () => {
+    closeMenu();
+    if (!downloadUrl) return;
+    try {
+      await navigator.clipboard?.writeText(downloadUrl);
+    } catch (err) {
+      console.error("Failed to copy URL", err);
+    }
+  };
+  const handleDelete = () => {
+    closeMenu();
+    onDelete?.();
+  };
+  const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
+  (0, import_react4.useEffect)(() => {
+    if (!contextMenuPos) return;
+    const handleGlobalClick = (e) => {
+      const target = e.target;
+      if (menuRef.current && menuRef.current.contains(target)) {
+        return;
+      }
+      if (iconRef.current && iconRef.current.contains(target)) {
+        return;
+      }
+      closeMenu();
+    };
+    document.addEventListener("mousedown", handleGlobalClick);
+    return () => {
+      document.removeEventListener("mousedown", handleGlobalClick);
+    };
+  }, [contextMenuPos]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref: iconRef,
+        className: "d-flex flex-column align-items-center rounded-3 p-1 " + (isHovered || contextMenuPos ? "bg-light border" : ""),
+        style: {
+          width: 96,
+          cursor: "pointer",
+          userSelect: "none",
+          transition: "background-color 0.1s ease, border-color 0.1s ease"
+        },
+        onDoubleClick: handleDoubleClick,
+        onContextMenu: handleContextMenu,
+        title: name ?? void 0,
+        onClick: () => {
+          if (contextMenuPos) {
+            closeMenu();
+          }
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm",
+              style: {
+                width: 64,
+                height: 64
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "bi bi-file-earmark fs-2" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "small text-center text-truncate",
+              style: { width: "100%" },
+              children: name
+            }
+          ),
+          formattedSize && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { className: "text-muted mt-1", children: formattedSize })
+        ]
+      }
+    ),
+    contextMenuPos && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref: menuRef,
+        className: "position-fixed dropdown-menu show shadow-sm",
+        style: {
+          top: contextMenuPos.y,
+          left: contextMenuPos.x,
+          zIndex: 1050,
+          minWidth: 180
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "dropdown-item small",
+              onClick: handleDownload,
+              disabled: !downloadUrl,
+              children: "Download file"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "dropdown-item small",
+              onClick: handleCopyUrl,
+              disabled: !downloadUrl,
+              children: "Copy download URL"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dropdown-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "dropdown-item text-danger small",
+              onClick: handleDelete,
+              children: "Delete file"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/UploadContainer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var UploadContainer = ({
+  onFilesSelected,
+  existingFiles = [],
+  existingFilesLoading = false,
+  onExistingFileClick,
+  onDeleteFile,
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
+}) => {
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
+  const { uploads, startUploadsIfNeeded } = UseUploadManager({
+    autoUpload,
+    getPresignedUrl,
+    onUploadComplete,
+    onUploadError
+  });
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const files = e.dataTransfer.files;
+    if (!files || files.length === 0) return;
+    onFilesSelected?.(files);
+    startUploadsIfNeeded(files);
+  };
+  const handleExistingFileOpen = (file) => {
+    if (onExistingFileClick) {
+      onExistingFileClick(file);
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = file.PublicUrl ?? "";
+    a.download = file.Name ?? "";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    UploadDropzone,
+    {
+      isDragging,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      className: "w-100",
+      style: { minHeight: "260px", alignItems: "stretch" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "w-100 d-flex flex-wrap gap-4 align-content-start",
+            style: { minHeight: "140px" },
+            children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "visually-hidden", children: "Loading containers..." }) }) }) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              DesktopFileIcon,
+              {
+                name: file.Name,
+                sizeBytes: typeof file.FileSize === "number" ? file.FileSize : null,
+                downloadUrl: file.PublicUrl ?? null,
+                onOpen: () => handleExistingFileOpen(file),
+                onDelete: onDeleteFile ? () => onDeleteFile(file) : void 0
+              },
+              file.Id
+            ))
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-100 mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }) }) }) })
+      ]
+    }
+  );
+};
+
+// src/hooks/UseContainers.ts
+var import_react6 = require("react");
+function UseContainers({ apiBaseUrl, parentId }) {
+  const [containers, setContainers] = (0, import_react6.useState)([]);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const sdkDb = new SparkStudioStorageSDK(
+        apiBaseUrl
+      );
+      const result = await sdkDb.container.ReadRootContainers();
+      setContainers(result);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, import_react6.useEffect)(() => {
+    void load();
+  }, [apiBaseUrl, parentId]);
+  return {
+    containers,
+    loading,
+    error,
+    reload: load
+  };
+}
+
+// src/components/ContainerUploadPanel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ContainerUploadPanel = ({
+  containerApiBaseUrl,
+  storageApiBaseUrl,
+  parentContainerId
+}) => {
+  const { containers, reload, loading } = UseContainers({
+    apiBaseUrl: containerApiBaseUrl,
+    parentId: parentContainerId
+  });
   const getPresignedUrl = async (file) => {
-    const sdkDb = new SparkStudioStorageSDK("https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod");
-    const sdkS3 = new SparkStudioStorageSDK("https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod");
-    const containerDTO = await sdkDb.container.CreateFileContainer(file.name, file.size, encodeURIComponent(file.type));
-    const resultS3 = await sdkS3.s3.GetPreSignedUrl(containerDTO);
-    return resultS3;
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    const containerDTO = await sdkDb.container.CreateFileContainer(
+      file.name,
+      file.size,
+      encodeURIComponent(file.type)
+    );
+    async function getPresignedUrlWithRetry(container, attempts = 3) {
+      let lastError;
+      for (let i = 1; i <= attempts; i++) {
+        try {
+          return await sdkS3.s3.GetPreSignedUrl(container);
+        } catch (err) {
+          lastError = err;
+          if (i < attempts) {
+            await new Promise((r) => setTimeout(r, 500 * i));
+          }
+        }
+      }
+      throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+    }
+    return getPresignedUrlWithRetry(containerDTO);
+  };
+  const handleUploadComplete = async (file, s3Url) => {
+    console.log("Upload complete:", file.name, s3Url);
+    await reload();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const handleUploadError = (file, err) => {
+    console.error("Upload failed:", file.name, err);
+  };
+  const handleOnDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    await reload();
+  };
+  const handleExistingFileClick = (file) => {
+    const a = document.createElement("a");
+    a.href = file.PublicUrl ?? "";
+    a.download = file.Name ?? "";
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    UploadContainer,
+    {
+      existingFiles: containers,
+      existingFilesLoading: loading,
+      onExistingFileClick: handleExistingFileClick,
+      autoUpload: true,
+      getPresignedUrl,
+      onUploadComplete: handleUploadComplete,
+      onUploadError: handleUploadError,
+      onDeleteFile: handleOnDeleteFile
+    }
+  );
+};
+
+// src/views/HomeView.tsx
+var import_authentication_ui = require("@sparkstudio/authentication-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function HomeView() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_authentication_ui.AuthenticatorProvider,
     {
       googleClientId: import_authentication_ui.AppSettings.GoogleClientId,
       authenticationUrl: import_authentication_ui.AppSettings.AuthenticationUrl,
       accountsUrl: import_authentication_ui.AppSettings.AccountsUrl,
-      onLoginSuccess: handleOnLoginSuccess,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_authentication_ui.UserInfoCard, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          UploadContainer,
-          {
-            title: "Upload your files to S3",
-            description: "Drag & drop or browse files. Each file will upload with its own progress bar.",
-            multiple: true,
-            accept: "*/*",
-            autoUpload: true,
-            getPresignedUrl,
-            onUploadComplete: (file, s3Url) => {
-              console.log("Uploaded", file.name, "to", s3Url);
-            },
-            onUploadError: (file, error) => {
-              console.error("Failed to upload", file.name, error);
-            }
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HomeContent, {})
     }
   );
 }
+function HomeContent() {
+  const { user } = (0, import_authentication_ui.useUser)();
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_authentication_ui.UserInfoCard, {}),
+    user && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ContainerUploadPanel,
+      {
+        containerApiBaseUrl: "https://localhost:5001",
+        storageApiBaseUrl: "https://localhost:5001"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AWSPresignedUrlDTO,
   Container,
   ContainerDTO,
   ContainerType,
+  ContainerUploadPanel,
+  DesktopFileIcon,
   Home,
   HomeView,
   S3,
   SparkStudioStorageSDK,
-  UploadContainer
+  UploadContainer,
+  UploadDropzone,
+  UploadFileToS3,
+  UploadProgressList,
+  UseContainers,
+  UseUploadManager
 });