@sparkstudio/storage-ui 1.0.13 → 1.0.15

package/dist/index.cjs

@@ -25,13 +25,13 @@ __export(index_exports, {
   ContainerDTO: () => ContainerDTO,
   ContainerType: () => ContainerType,
   ContainerUploadPanel: () => ContainerUploadPanel,
+  DesktopFileIcon: () => DesktopFileIcon,
   Home: () => Home,
   HomeView: () => HomeView,
   S3: () => S3,
   SparkStudioStorageSDK: () => SparkStudioStorageSDK,
   UploadContainer: () => UploadContainer,
   UploadDropzone: () => UploadDropzone,
-  UploadFilePicker: () => UploadFilePicker,
   UploadFileToS3: () => UploadFileToS3,
   UploadProgressList: () => UploadProgressList,
   UseContainers: () => UseContainers,
@@ -223,6 +223,7 @@ var ContainerDTO = class {
   ContainerType;
   Name;
   ContentType;
+  PublicUrl;
   CreatedDate;
   FileSize;
   UserId;
@@ -232,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;
@@ -260,92 +262,63 @@ var UploadDropzone = ({
   isDragging,
   onDragOver,
   onDragLeave,
-  onDrop
+  onDrop,
+  className = "",
+  style,
+  children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  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();
+    if (onDragOver) onDragOver(e);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    if (onDragLeave) onDragLeave(e);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (onDrop) onDrop(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "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,
-      onDragLeave,
-      onDrop,
-      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" })
-      ]
+      className: combinedClassName,
+      style: { minHeight: "140px", ...style },
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children
     }
   );
 };
 
-// src/components/UploadFilePicker.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var UploadFilePicker = ({
-  multiple,
-  accept,
-  fileNames,
-  onFileChange
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex gap-2 align-items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "btn btn-primary mb-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "bi bi-folder2-open me-2" }),
-      "Browse files",
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
-        {
-          type: "file",
-          className: "d-none",
-          multiple,
-          accept,
-          onChange: onFileChange
-        }
-      )
-    ] }),
-    fileNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-grow-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "small text-muted", children: "Selected:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "mb-0 small", children: fileNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: name }, name)) })
-    ] })
-  ] });
-};
-
-// src/components/UploadProgressList.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var UploadProgressList = ({
-  uploads
-}) => {
-  if (uploads.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mt-3", children: uploads.map((u) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "d-flex justify-content-between small mb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
-        u.file.name,
-        " - ",
-        u?.publicUrl ?? ""
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: u.status === "success" ? "Completed" : u.status === "error" ? "Error" : `${u.progress}%` })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "progress", style: { height: "6px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("div", { className: "text-danger small mt-1", children: u.error ?? "Upload failed" })
-  ] }, u.id)) });
-};
-
 // src/hooks/UseUploadManager.ts
-var import_react4 = require("react");
+var import_react2 = require("react");
 
 // src/engines/UploadFileToS3.ts
-async function UploadFileToS3(file, presignedUrl, onProgress) {
+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);
@@ -360,15 +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"
@@ -384,14 +353,14 @@ function UseUploadManager({
   onUploadComplete,
   onUploadError
 }) {
-  const [uploads, setUploads] = (0, import_react4.useState)([]);
+  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_react4.useCallback)(
+  const uploadFile = (0, import_react2.useCallback)(
     async (upload) => {
       setUploads(
         (prev) => prev.map(
@@ -402,9 +371,7 @@ function UseUploadManager({
         if (!getPresignedUrl) {
           throw new Error("getPresignedUrl is not provided.");
         }
-        const presignedUrl = await getPresignedUrl(
-          upload.file
-        );
+        const presignedUrl = await getPresignedUrlWithRetry(upload.file, 10);
         const url = presignedUrl?.PresignedUrl ?? "";
         await UploadFileToS3(upload.file, url, (progress) => {
           setUploads(
@@ -445,7 +412,21 @@ function UseUploadManager({
     },
     [getPresignedUrl, onUploadComplete, onUploadError]
   );
-  const startUploadsIfNeeded = (0, import_react4.useCallback)(
+  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);
@@ -456,7 +437,7 @@ function UseUploadManager({
     },
     [autoUpload, getPresignedUrl, uploadFile]
   );
-  const resetUploads = (0, import_react4.useCallback)(() => setUploads([]), []);
+  const resetUploads = (0, import_react2.useCallback)(() => setUploads([]), []);
   return {
     uploads,
     startUploadsIfNeeded,
@@ -464,23 +445,290 @@ function UseUploadManager({
   };
 }
 
+// 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 === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "div",
+                    {
+                      className: "position-absolute top-50 start-50 translate-middle",
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" })
+                    }
+                  ),
+                  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 [isDeleting, setIsDeleting] = (0, import_react4.useState)(false);
+  const iconRef = (0, import_react4.useRef)(null);
+  const menuRef = (0, import_react4.useRef)(null);
+  const handleDoubleClick = () => {
+    if (isDeleting) return;
+    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) => {
+    if (isDeleting) return;
+    e.preventDefault();
+    setContextMenuPos({ x: e.clientX, y: e.clientY });
+  };
+  const closeMenu = () => setContextMenuPos(null);
+  const handleDownload = () => {
+    closeMenu();
+    if (!downloadUrl || isDeleting) 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 || isDeleting) return;
+    try {
+      await navigator.clipboard?.writeText(downloadUrl);
+    } catch (err) {
+      console.error("Failed to copy URL", err);
+    }
+  };
+  const handleDelete = async () => {
+    closeMenu();
+    if (!onDelete) return;
+    try {
+      setIsDeleting(true);
+      await Promise.resolve(onDelete());
+    } catch (err) {
+      console.error("Delete failed", err);
+    }
+  };
+  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-primary" : "border-transparent"),
+        style: {
+          width: 96,
+          cursor: isDeleting ? "default" : "pointer",
+          userSelect: "none",
+          transition: "background-color 0.1s ease, border-color 0.1s ease, opacity 0.1s ease",
+          opacity: isDeleting ? 0.6 : 1,
+          borderWidth: 1,
+          borderStyle: "solid"
+        },
+        onDoubleClick: handleDoubleClick,
+        onContextMenu: handleContextMenu,
+        title: name ?? void 0,
+        onClick: () => {
+          if (contextMenuPos) {
+            closeMenu();
+          }
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "spinner-border spinner-border-sm text-danger" }) })
+              ]
+            }
+          ),
+          /* @__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 && !isDeleting && /* @__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 = ({
-  title = "Upload files",
-  description = "Drag and drop files here, or click the button to browse.",
-  multiple = true,
-  accept,
   onFilesSelected,
   existingFiles = [],
+  existingFilesLoading = false,
   onExistingFileClick,
+  onDeleteFile,
   autoUpload = false,
   getPresignedUrl,
   onUploadComplete,
   onUploadError
 }) => {
   const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const [fileNames, setFileNames] = (0, import_react5.useState)([]);
   const { uploads, startUploadsIfNeeded } = UseUploadManager({
     autoUpload,
     getPresignedUrl,
@@ -500,23 +748,16 @@ var UploadContainer = ({
     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);
   };
-  const handleExistingFileClickInternal = (file) => {
+  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";
@@ -524,48 +765,38 @@ var UploadContainer = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { className: "card-title mb-2", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "card-text text-muted", children: description }),
-    existingFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h6", { className: "mb-2", children: "Existing files" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "list-group", children: existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "li",
-        {
-          className: "list-group-item d-flex justify-content-between align-items-center",
-          style: { cursor: "pointer" },
-          onClick: () => handleExistingFileClickInternal(file),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: file.Name }),
-            typeof file.FileSize === "number" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("small", { className: "text-muted", children: [
-              (file.FileSize / 1024).toFixed(1),
-              " KB"
-            ] })
-          ]
-        },
-        file.Id
-      )) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      UploadDropzone,
-      {
-        isDragging,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        onDrop: handleDrop
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      UploadFilePicker,
-      {
-        multiple,
-        accept,
-        fileNames,
-        onFileChange: handleFileChange
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads })
-  ] });
+  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 mb-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 }) }) }) }),
+        /* @__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: file.FileSize,
+                downloadUrl: file.PublicUrl,
+                onOpen: () => handleExistingFileOpen(file),
+                onDelete: () => onDeleteFile?.(file)
+              },
+              file.Id
+            ))
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/hooks/UseContainers.ts
@@ -579,7 +810,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
     setError(null);
     try {
       const sdkDb = new SparkStudioStorageSDK(
-        "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod"
+        apiBaseUrl
       );
       const result = await sdkDb.container.ReadRootContainers();
       setContainers(result);
@@ -594,6 +825,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
   }, [apiBaseUrl, parentId]);
   return {
     containers,
+    setContainers,
     loading,
     error,
     reload: load
@@ -604,28 +836,37 @@ function UseContainers({ apiBaseUrl, parentId }) {
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var ContainerUploadPanel = ({
   containerApiBaseUrl,
-  parentContainerId,
-  title = "Upload files",
-  description = "Drop files to upload. Existing files are listed below."
+  storageApiBaseUrl,
+  parentContainerId
 }) => {
-  const { containers, loading, error, reload } = UseContainers({
+  const { containers, setContainers, 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 sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    const contentType = file.type || "application/octet-stream";
     const containerDTO = await sdkDb.container.CreateFileContainer(
       file.name,
       file.size,
-      encodeURIComponent(file.type)
+      encodeURIComponent(contentType)
     );
-    const resultS3 = await sdkS3.s3.GetPreSignedUrl(containerDTO);
-    return resultS3;
+    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);
@@ -635,9 +876,8 @@ var ContainerUploadPanel = ({
     console.error("Upload failed:", file.name, err);
   };
   const handleExistingFileClick = (file) => {
-    const downloadUrl = `${containerApiBaseUrl}/api/Container/Download/${file.Id}`;
     const a = document.createElement("a");
-    a.href = downloadUrl;
+    a.href = file.PublicUrl ?? "";
     a.download = file.Name ?? "";
     a.target = "_blank";
     a.rel = "noopener noreferrer";
@@ -645,26 +885,26 @@ var ContainerUploadPanel = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: "Loading existing files\u2026" }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-danger", children: [
-      "Failed to load containers: ",
-      error.message
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      UploadContainer,
-      {
-        title,
-        description,
-        existingFiles: containers,
-        onExistingFileClick: handleExistingFileClick,
-        autoUpload: true,
-        getPresignedUrl,
-        onUploadComplete: handleUploadComplete,
-        onUploadError: handleUploadError
-      }
-    )
-  ] });
+  const handleDeleteFile = async (file) => {
+    const sdkDb = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS3 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    UploadContainer,
+    {
+      existingFiles: containers,
+      existingFilesLoading: loading,
+      onExistingFileClick: handleExistingFileClick,
+      autoUpload: true,
+      getPresignedUrl,
+      onUploadComplete: handleUploadComplete,
+      onUploadError: handleUploadError,
+      onDeleteFile: handleDeleteFile
+    }
+  );
 };
 
 // src/views/HomeView.tsx
@@ -688,8 +928,8 @@ function HomeContent() {
     user && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ContainerUploadPanel,
       {
-        containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
-        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+        containerApiBaseUrl: "https://localhost:5001",
+        storageApiBaseUrl: "https://localhost:5001"
       }
     )
   ] });
@@ -701,13 +941,13 @@ function HomeContent() {
   ContainerDTO,
   ContainerType,
   ContainerUploadPanel,
+  DesktopFileIcon,
   Home,
   HomeView,
   S3,
   SparkStudioStorageSDK,
   UploadContainer,
   UploadDropzone,
-  UploadFilePicker,
   UploadFileToS3,
   UploadProgressList,
   UseContainers,