@sparkstudio/storage-ui 1.0.20 → 1.0.22

package/dist/index.cjs

@@ -294,20 +294,20 @@ var UploadDropzone = ({
   style,
   children
 }) => {
-  const baseClass = "rounded-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 baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center";
+  const stateClass = isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-solid border-transparent border-2";
+  const combinedClassName = `${baseClass} ${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
-    if (onDragOver) onDragOver(e);
+    onDragOver?.(e);
   };
   const handleDragLeave = (e) => {
     e.preventDefault();
-    if (onDragLeave) onDragLeave(e);
+    onDragLeave?.(e);
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    if (onDrop) onDrop(e);
+    onDrop?.(e);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -498,7 +498,7 @@ var UploadProgressList = ({
             /* @__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",
+                className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
                 style: {
                   width: 64,
                   height: 64
@@ -741,7 +741,7 @@ var DesktopFileIcon = ({
           /* @__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",
+              className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
               style: {
                 width: 64,
                 height: 64
@@ -856,70 +856,97 @@ var UploadContainer = ({
     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 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" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-              "div",
-              {
-                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
-                style: {
-                  minHeight: "160px",
-                  padding: "20px",
-                  cursor: "pointer",
-                  transition: "background 0.12s, border-color 0.12s"
-                },
-                onClick: () => document.getElementById("filePicker")?.click(),
-                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
-                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "input",
-                    {
-                      id: "filePicker",
-                      type: "file",
-                      multiple: true,
-                      hidden: true,
-                      onChange: (e) => {
-                        if (!e.target.files) return;
-                        onFilesSelected?.(e.target.files);
-                        startUploadsIfNeeded(e.target.files);
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Drag & drop files here" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
-                ]
-              }
-            ) : 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
-            ))
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-100", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          id: "filePicker",
+          type: "file",
+          multiple: true,
+          className: "d-none",
+          onChange: (e) => {
+            if (!e.target.files) return;
+            onFilesSelected?.(e.target.files);
+            startUploadsIfNeeded(e.target.files);
           }
-        )
-      ]
-    }
-  );
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "btn btn-primary float-start",
+          onClick: () => document.getElementById("filePicker")?.click(),
+          children: "Browse files\u2026"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      UploadDropzone,
+      {
+        isDragging,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: "w-100",
+        style: { minHeight: "100px", 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" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                  style: {
+                    minHeight: "160px",
+                    padding: "20px",
+                    cursor: "pointer",
+                    transition: "background 0.12s, border-color 0.12s"
+                  },
+                  onClick: () => document.getElementById("filePicker")?.click(),
+                  onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                  onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "input",
+                      {
+                        id: "filePicker",
+                        type: "file",
+                        multiple: true,
+                        hidden: true,
+                        onChange: (e) => {
+                          if (!e.target.files) return;
+                          onFilesSelected?.(e.target.files);
+                          startUploadsIfNeeded(e.target.files);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: "Drag & drop files here" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
+                  ]
+                }
+              ) : 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
@@ -1033,7 +1060,7 @@ var ContainerUploadPanel = ({
 // src/components/SingleFileProcessUploader.tsx
 var import_react8 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, label, disabled }) => {
+var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, disabled }) => {
   const [selectedFile, setSelectedFile] = (0, import_react8.useState)(null);
   const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
   const [progress, setProgress] = (0, import_react8.useState)(null);
@@ -1079,7 +1106,11 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
       setProgress(0);
       setErrorMessage(null);
       const presignedUrl = await getPresignedUrl(selectedFile);
-      await UploadFileToS3(selectedFile, presignedUrl?.PresignedUrl ?? "", (p) => setProgress(p));
+      await UploadFileToS3(
+        selectedFile,
+        presignedUrl?.PresignedUrl ?? "",
+        (p) => setProgress(p)
+      );
       setStatus("success");
       onUploadComplete?.(selectedFile, presignedUrl);
     } catch (err) {
@@ -1095,23 +1126,27 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     return "Unknown error during upload.";
   }
   const isUploading = status === "uploading";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { style: { fontWeight: 600 }, children: label }),
+  const dropzoneClasses = [
+    "border",
+    "border-2",
+    "rounded",
+    "p-3",
+    "text-center",
+    "user-select-none",
+    disabled ? "opacity-50" : "cursor-pointer",
+    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-transparent border-2"
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex flex-column gap-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
+        className: dropzoneClasses,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         onClick: handleBrowseClick,
-        style: {
-          border: "2px dashed #ccc",
-          borderRadius: 8,
-          padding: 16,
-          textAlign: "center",
-          cursor: disabled ? "not-allowed" : "pointer",
-          backgroundColor: isDragging ? "#f0f8ff" : "#fafafa"
-        },
+        role: "button",
+        "aria-disabled": disabled,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
@@ -1119,55 +1154,50 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
               ref: fileInputRef,
               type: "file",
               accept,
-              style: { display: "none" },
+              className: "d-none",
               onChange: handleInputChange,
               disabled
             }
           ),
-          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Selected file:" }),
               " ",
               selectedFile.name
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: "#666" }, children: "Click here to change file or drag a new one." })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "Click here to change file or drag a new one." })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "Drag & drop a file here" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: "#666" }, children: "or click to browse" })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    isUploading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 12 }, children: [
-      "Uploading... ",
-      progress ?? 0,
-      "%",
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    isUploading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex justify-content-between mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "spinner-border spinner-border-sm text-primary" }),
+          " Uploading..."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          progress ?? 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "progress", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "div",
         {
-          style: {
-            marginTop: 4,
-            height: 6,
-            borderRadius: 999,
-            backgroundColor: "#eee",
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "div",
-            {
-              style: {
-                height: "100%",
-                width: `${progress ?? 0}%`,
-                backgroundColor: "#007bff",
-                transition: "width 0.2s ease-out"
-              }
-            }
-          )
+          className: "progress-bar progress-bar-striped progress-bar-animated",
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": progress ?? 0,
+          style: { width: `${progress ?? 0}%` }
         }
-      )
+      ) })
     ] }),
-    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: "green" }, children: "Upload complete \u2705" }),
-    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { fontSize: 12, color: "red" }, children: [
+    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "small text-success", children: "Upload complete \u2705" }),
+    status === "error" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small text-danger", children: [
       "Upload failed: ",
       errorMessage
     ] }),
@@ -1177,15 +1207,7 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
         type: "button",
         onClick: handleProcessClick,
         disabled: !selectedFile || isUploading || disabled,
-        style: {
-          padding: "8px 16px",
-          borderRadius: 4,
-          border: "none",
-          backgroundColor: !selectedFile || isUploading || disabled ? "#ccc" : "#007bff",
-          color: "#fff",
-          fontWeight: 600,
-          cursor: !selectedFile || isUploading || disabled ? "not-allowed" : "pointer"
-        },
+        className: "btn btn-primary mt-2",
         children: isUploading ? "Processing..." : "Process"
       }
     )

package/dist/index.js

@@ -251,20 +251,20 @@ var UploadDropzone = ({
   style,
   children
 }) => {
-  const baseClass = "rounded-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 baseClass = "rounded-3 d-flex flex-column align-items-center justify-content-center";
+  const stateClass = isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-solid border-transparent border-2";
+  const combinedClassName = `${baseClass} ${stateClass} ${className}`.trim();
   const handleDragOver = (e) => {
     e.preventDefault();
-    if (onDragOver) onDragOver(e);
+    onDragOver?.(e);
   };
   const handleDragLeave = (e) => {
     e.preventDefault();
-    if (onDragLeave) onDragLeave(e);
+    onDragLeave?.(e);
   };
   const handleDrop = (e) => {
     e.preventDefault();
-    if (onDrop) onDrop(e);
+    onDrop?.(e);
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -455,7 +455,7 @@ var UploadProgressList = ({
             /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+                className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
                 style: {
                   width: 64,
                   height: 64
@@ -708,7 +708,7 @@ var DesktopFileIcon = ({
           /* @__PURE__ */ jsxs2(
             "div",
             {
-              className: "bg-white border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
+              className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
               style: {
                 width: 64,
                 height: 64
@@ -774,7 +774,7 @@ var DesktopFileIcon = ({
 };
 
 // src/components/UploadContainer.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var UploadContainer = ({
   onFilesSelected,
   existingFiles = [],
@@ -823,70 +823,97 @@ var UploadContainer = ({
     a.click();
     document.body.removeChild(a);
   };
-  return /* @__PURE__ */ jsxs3(
-    UploadDropzone,
-    {
-      isDragging,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      className: "w-100",
-      style: { minHeight: "260px", alignItems: "stretch" },
-      children: [
-        /* @__PURE__ */ jsx4("div", { className: "w-100 mb-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) }),
-        /* @__PURE__ */ jsx4(
-          "div",
-          {
-            className: "w-100 d-flex flex-wrap gap-4 align-content-start",
-            style: { minHeight: "140px" },
-            children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ jsxs3(
-              "div",
-              {
-                className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
-                style: {
-                  minHeight: "160px",
-                  padding: "20px",
-                  cursor: "pointer",
-                  transition: "background 0.12s, border-color 0.12s"
-                },
-                onClick: () => document.getElementById("filePicker")?.click(),
-                onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
-                onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
-                children: [
-                  /* @__PURE__ */ jsx4(
-                    "input",
-                    {
-                      id: "filePicker",
-                      type: "file",
-                      multiple: true,
-                      hidden: true,
-                      onChange: (e) => {
-                        if (!e.target.files) return;
-                        onFilesSelected?.(e.target.files);
-                        startUploadsIfNeeded(e.target.files);
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4("strong", { children: "Drag & drop files here" }),
-                  /* @__PURE__ */ jsx4("small", { className: "mt-1", children: "\u2026or click to browse" })
-                ]
-              }
-            ) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
-              DesktopFileIcon,
-              {
-                name: file.Name,
-                sizeBytes: file.FileSize,
-                downloadUrl: file.PublicUrl,
-                onOpen: () => handleExistingFileOpen(file),
-                onDelete: () => onDeleteFile?.(file)
-              },
-              file.Id
-            ))
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "w-100", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          id: "filePicker",
+          type: "file",
+          multiple: true,
+          className: "d-none",
+          onChange: (e) => {
+            if (!e.target.files) return;
+            onFilesSelected?.(e.target.files);
+            startUploadsIfNeeded(e.target.files);
           }
-        )
-      ]
-    }
-  );
+        }
+      ),
+      /* @__PURE__ */ jsx4("div", { className: "text-start", children: /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: "btn btn-primary float-start",
+          onClick: () => document.getElementById("filePicker")?.click(),
+          children: "Browse files\u2026"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs3(
+      UploadDropzone,
+      {
+        isDragging,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: "w-100",
+        style: { minHeight: "100px", alignItems: "stretch" },
+        children: [
+          /* @__PURE__ */ jsx4("div", { className: "w-100 mb-3", children: /* @__PURE__ */ jsx4("div", { className: "d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3", children: /* @__PURE__ */ jsx4("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ jsx4(UploadProgressList, { uploads }) }) }) }),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "w-100 d-flex flex-wrap gap-4 align-content-start",
+              style: { minHeight: "140px" },
+              children: existingFilesLoading ? /* @__PURE__ */ jsx4("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  className: "w-100 d-flex flex-column align-items-center justify-content-center text-muted",
+                  style: {
+                    minHeight: "160px",
+                    padding: "20px",
+                    cursor: "pointer",
+                    transition: "background 0.12s, border-color 0.12s"
+                  },
+                  onClick: () => document.getElementById("filePicker")?.click(),
+                  onMouseEnter: (e) => e.currentTarget.style.borderColor = "#888",
+                  onMouseLeave: (e) => e.currentTarget.style.borderColor = "#ccc",
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "input",
+                      {
+                        id: "filePicker",
+                        type: "file",
+                        multiple: true,
+                        hidden: true,
+                        onChange: (e) => {
+                          if (!e.target.files) return;
+                          onFilesSelected?.(e.target.files);
+                          startUploadsIfNeeded(e.target.files);
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4("strong", { children: "Drag & drop files here" }),
+                    /* @__PURE__ */ jsx4("small", { className: "mt-1", children: "\u2026or click to browse" })
+                  ]
+                }
+              ) : existingFiles.map((file) => /* @__PURE__ */ jsx4(
+                DesktopFileIcon,
+                {
+                  name: file.Name,
+                  sizeBytes: file.FileSize,
+                  downloadUrl: file.PublicUrl,
+                  onOpen: () => handleExistingFileOpen(file),
+                  onDelete: () => onDeleteFile?.(file)
+                },
+                file.Id
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/hooks/UseContainers.ts
@@ -1000,7 +1027,7 @@ var ContainerUploadPanel = ({
 // src/components/SingleFileProcessUploader.tsx
 import { useCallback as useCallback2, useRef as useRef2, useState as useState5 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, label, disabled }) => {
+var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, disabled }) => {
   const [selectedFile, setSelectedFile] = useState5(null);
   const [isDragging, setIsDragging] = useState5(false);
   const [progress, setProgress] = useState5(null);
@@ -1046,7 +1073,11 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
       setProgress(0);
       setErrorMessage(null);
       const presignedUrl = await getPresignedUrl(selectedFile);
-      await UploadFileToS3(selectedFile, presignedUrl?.PresignedUrl ?? "", (p) => setProgress(p));
+      await UploadFileToS3(
+        selectedFile,
+        presignedUrl?.PresignedUrl ?? "",
+        (p) => setProgress(p)
+      );
       setStatus("success");
       onUploadComplete?.(selectedFile, presignedUrl);
     } catch (err) {
@@ -1062,23 +1093,27 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
     return "Unknown error during upload.";
   }
   const isUploading = status === "uploading";
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-    label && /* @__PURE__ */ jsx6("label", { style: { fontWeight: 600 }, children: label }),
+  const dropzoneClasses = [
+    "border",
+    "border-2",
+    "rounded",
+    "p-3",
+    "text-center",
+    "user-select-none",
+    disabled ? "opacity-50" : "cursor-pointer",
+    isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-transparent border-2"
+  ].join(" ");
+  return /* @__PURE__ */ jsxs4("div", { className: "d-flex flex-column gap-2", children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
+        className: dropzoneClasses,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         onClick: handleBrowseClick,
-        style: {
-          border: "2px dashed #ccc",
-          borderRadius: 8,
-          padding: 16,
-          textAlign: "center",
-          cursor: disabled ? "not-allowed" : "pointer",
-          backgroundColor: isDragging ? "#f0f8ff" : "#fafafa"
-        },
+        role: "button",
+        "aria-disabled": disabled,
         children: [
           /* @__PURE__ */ jsx6(
             "input",
@@ -1086,55 +1121,50 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
               ref: fileInputRef,
               type: "file",
               accept,
-              style: { display: "none" },
+              className: "d-none",
               onChange: handleInputChange,
               disabled
             }
           ),
-          selectedFile ? /* @__PURE__ */ jsxs4("div", { children: [
+          selectedFile ? /* @__PURE__ */ jsxs4("div", { className: "small", children: [
             /* @__PURE__ */ jsxs4("div", { children: [
               /* @__PURE__ */ jsx6("strong", { children: "Selected file:" }),
               " ",
               selectedFile.name
             ] }),
-            /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#666" }, children: "Click here to change file or drag a new one." })
-          ] }) : /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "Click here to change file or drag a new one." })
+          ] }) : /* @__PURE__ */ jsxs4("div", { className: "small", children: [
             /* @__PURE__ */ jsx6("div", { children: "Drag & drop a file here" }),
-            /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#666" }, children: "or click to browse" })
+            /* @__PURE__ */ jsx6("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    isUploading && /* @__PURE__ */ jsxs4("div", { style: { fontSize: 12 }, children: [
-      "Uploading... ",
-      progress ?? 0,
-      "%",
-      /* @__PURE__ */ jsx6(
+    isUploading && /* @__PURE__ */ jsxs4("div", { className: "small", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "d-flex justify-content-between mb-1", children: [
+        /* @__PURE__ */ jsxs4("span", { children: [
+          /* @__PURE__ */ jsx6("div", { className: "spinner-border spinner-border-sm text-primary" }),
+          " Uploading..."
+        ] }),
+        /* @__PURE__ */ jsxs4("span", { children: [
+          progress ?? 0,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "progress", children: /* @__PURE__ */ jsx6(
         "div",
         {
-          style: {
-            marginTop: 4,
-            height: 6,
-            borderRadius: 999,
-            backgroundColor: "#eee",
-            overflow: "hidden"
-          },
-          children: /* @__PURE__ */ jsx6(
-            "div",
-            {
-              style: {
-                height: "100%",
-                width: `${progress ?? 0}%`,
-                backgroundColor: "#007bff",
-                transition: "width 0.2s ease-out"
-              }
-            }
-          )
+          className: "progress-bar progress-bar-striped progress-bar-animated",
+          role: "progressbar",
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": progress ?? 0,
+          style: { width: `${progress ?? 0}%` }
         }
-      )
+      ) })
     ] }),
-    status === "success" && /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "green" }, children: "Upload complete \u2705" }),
-    status === "error" && /* @__PURE__ */ jsxs4("div", { style: { fontSize: 12, color: "red" }, children: [
+    status === "success" && /* @__PURE__ */ jsx6("div", { className: "small text-success", children: "Upload complete \u2705" }),
+    status === "error" && /* @__PURE__ */ jsxs4("div", { className: "small text-danger", children: [
       "Upload failed: ",
       errorMessage
     ] }),
@@ -1144,15 +1174,7 @@ var SingleFileProcessUploader = ({ getPresignedUrl, onUploadComplete, accept, la
         type: "button",
         onClick: handleProcessClick,
         disabled: !selectedFile || isUploading || disabled,
-        style: {
-          padding: "8px 16px",
-          borderRadius: 4,
-          border: "none",
-          backgroundColor: !selectedFile || isUploading || disabled ? "#ccc" : "#007bff",
-          color: "#fff",
-          fontWeight: 600,
-          cursor: !selectedFile || isUploading || disabled ? "not-allowed" : "pointer"
-        },
+        className: "btn btn-primary mt-2",
         children: isUploading ? "Processing..." : "Process"
       }
     )
@@ -1166,7 +1188,7 @@ import {
   UserInfoCard,
   useUser
 } from "@sparkstudio/authentication-ui";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function HomeView() {
   return /* @__PURE__ */ jsx7(
     AuthenticatorProvider,
@@ -1189,9 +1211,9 @@ function HomeContent() {
     const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
     return result;
   }
-  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsx7(UserInfoCard, {}),
-    user && /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    user && /* @__PURE__ */ jsxs5(Fragment3, { children: [
       /* @__PURE__ */ jsx7(
         SingleFileProcessUploader,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkstudio/storage-ui",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@fortawesome/react-fontawesome": "^3.1.1",
     "@sparkstudio/authentication-ui": "^1.0.29",
-    "@sparkstudio/common-ui": "^1.0.14",
+    "@sparkstudio/common-ui": "^1.0.29",
     "barrelsby": "^2.8.1"
   },
   "devDependencies": {

package/dist/index.css

@@ -1,3 +0,0 @@
-@import "/node_modules/@sparkstudio/common-ui/dist/index.css";
-
-/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/index.scss"],"names":[],"mappings":"AAAQ","file":"index.css"}

package/dist/index.d.cts

@@ -1,228 +0,0 @@
-import * as React from 'react';
-import React__default from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare enum ContainerType {
-    File = 0,
-    Folder = 1,
-    Root = 2
-}
-
-/**
- * Represents an Auto-generated model for ContainerDTO.
- */
-interface IContainerDTO {
-    Id: string;
-    ContainerType: ContainerType;
-    Name?: string;
-    ContentType?: string;
-    PublicUrl?: string;
-    CreatedDate: string;
-    FileSize: number;
-    UserId: string;
-    ParentContainerId: string;
-}
-type ContainerDTOInit = Partial<IContainerDTO> & Pick<IContainerDTO, "Id" | "ContainerType" | "CreatedDate" | "FileSize" | "UserId" | "ParentContainerId">;
-declare class ContainerDTO implements IContainerDTO {
-    Id: string;
-    ContainerType: ContainerType;
-    Name?: string;
-    ContentType?: string;
-    PublicUrl?: string;
-    CreatedDate: string;
-    FileSize: number;
-    UserId: string;
-    ParentContainerId: string;
-    constructor(init: ContainerDTOInit);
-}
-
-/**
-* Auto-generated client for the Container controller.
-*/
-declare class Container {
-    private baseUrl;
-    constructor(baseUrl: string);
-    ReadChildrenByContainerId(parentId: string): Promise<ContainerDTO[]>;
-    ReadRootContainers(): Promise<ContainerDTO[]>;
-    Read(id: string): Promise<ContainerDTO>;
-    Create(containerDTO: ContainerDTO): Promise<ContainerDTO>;
-    Update(containerDTO: ContainerDTO): Promise<ContainerDTO>;
-    DeleteContainer(id: string): Promise<ContainerDTO>;
-    CreateFileContainer(fileName: string, size: number, contentType: string): Promise<ContainerDTO>;
-}
-
-/**
-* Auto-generated client for the Home controller.
-*/
-declare class Home {
-    private baseUrl;
-    constructor(baseUrl: string);
-}
-
-/**
- * Represents an Auto-generated model for AWSPresignedUrlDTO.
- */
-interface IAWSPresignedUrlDTO {
-    PresignedUrl?: string;
-    PublicUrl?: string;
-    Key?: string;
-}
-type AWSPresignedUrlDTOInit = Partial<IAWSPresignedUrlDTO>;
-declare class AWSPresignedUrlDTO implements IAWSPresignedUrlDTO {
-    PresignedUrl?: string;
-    PublicUrl?: string;
-    Key?: string;
-    constructor(init: AWSPresignedUrlDTOInit);
-}
-
-/**
- * Represents an Auto-generated model for TemporaryFileDTO.
- */
-interface ITemporaryFileDTO {
-    Name?: string;
-    ContentType?: string;
-}
-type TemporaryFileDTOInit = Partial<ITemporaryFileDTO>;
-declare class TemporaryFileDTO implements ITemporaryFileDTO {
-    Name?: string;
-    ContentType?: string;
-    constructor(init: TemporaryFileDTOInit);
-}
-
-/**
-* Auto-generated client for the S3 controller.
-*/
-declare class S3 {
-    private baseUrl;
-    constructor(baseUrl: string);
-    DeleteS3(containerDTO: ContainerDTO): Promise<ContainerDTO>;
-    GetPreSignedUrl(containerDTO: ContainerDTO): Promise<AWSPresignedUrlDTO>;
-    GetTemporaryPreSignedUrl(temporaryFileDTO: TemporaryFileDTO): Promise<AWSPresignedUrlDTO>;
-}
-
-/**
-* Auto-generated API client.
-*/
-declare class SparkStudioStorageSDK {
-    container: Container;
-    home: Home;
-    s3: S3;
-    constructor(baseUrl: string);
-}
-
-interface ContainerUploadPanelProps {
-    /** Base URL for the Container API (the SDK you pasted). */
-    containerApiBaseUrl: string;
-    /** Base URL for your storage / presign endpoint (used by getPresignedUrl). */
-    storageApiBaseUrl: string;
-    /** Optional parent container – if set, we query children instead of roots. */
-    parentContainerId?: string;
-}
-declare const ContainerUploadPanel: React__default.FC<ContainerUploadPanelProps>;
-
-interface DesktopFileIconProps {
-    name?: string | null;
-    sizeBytes?: number | null;
-    downloadUrl?: string | null;
-    /** Double-click / open action */
-    onOpen?: () => void;
-    /** Delete action (can be async) */
-    onDelete?: () => Promise<void> | void;
-}
-declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
-
-interface SingleFileProcessUploaderProps {
-    /** Called to get a presigned S3 URL for the selected file. */
-    getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
-    /**
-     * Called after the upload succeeds.
-     * You can use s3Url (the presigned URL you provided) in another component
-     * or have your backend process the file from S3.
-     */
-    onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
-    /** Optional: restrict file types, e.g. "image/*" or ".png,.jpg" */
-    accept?: string;
-    /** Optional: label shown above the control */
-    label?: string;
-    /** Optional: disable the control entirely */
-    disabled?: boolean;
-}
-declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
-
-interface UploadContainerProps {
-    multiple?: boolean;
-    accept?: string;
-    onFilesSelected?: (files: FileList) => void;
-    existingFiles?: ContainerDTO[];
-    existingFilesLoading?: boolean;
-    onExistingFileClick?: (file: ContainerDTO) => void;
-    /** Called when user chooses "Delete file" from the context menu */
-    onDeleteFile?: (file: ContainerDTO) => void;
-    autoUpload?: boolean;
-    getPresignedUrl?: (file: File) => Promise<AWSPresignedUrlDTO>;
-    onUploadComplete?: (file: File, s3Url: string) => void;
-    onUploadError?: (file: File, error: Error) => void;
-}
-declare const UploadContainer: React__default.FC<UploadContainerProps>;
-
-interface UploadDropzoneProps {
-    isDragging: boolean;
-    onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (e: React__default.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React__default.DragEvent<HTMLDivElement>) => void;
-    /** Extra className so you can make this the root wrapper */
-    className?: string;
-    style?: React__default.CSSProperties;
-    /** Custom content to render inside the dropzone */
-    children?: React__default.ReactNode;
-}
-declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;
-
-type UploadStatus = "pending" | "uploading" | "success" | "error";
-interface UploadState {
-    id: string;
-    file: File;
-    progress: number;
-    status: UploadStatus;
-    error?: string;
-    s3Url?: string;
-    publicUrl?: string;
-}
-
-interface UploadProgressListProps {
-    uploads: UploadState[];
-}
-declare const UploadProgressList: React__default.FC<UploadProgressListProps>;
-
-/**
- * Helper: upload a file to a pre-signed S3 URL with progress + retries.
- */
-declare function UploadFileToS3(file: File, presignedUrl: string, onProgress: (progress: number) => void, maxRetries?: number): Promise<void>;
-
-interface UseContainersOptions {
-    apiBaseUrl: string;
-    parentId?: string;
-}
-declare function UseContainers({ apiBaseUrl, parentId }: UseContainersOptions): {
-    containers: ContainerDTO[];
-    setContainers: React.Dispatch<React.SetStateAction<ContainerDTO[]>>;
-    loading: boolean;
-    error: Error | null;
-    reload: () => Promise<void>;
-};
-
-interface UseUploadManagerOptions {
-    autoUpload?: boolean;
-    getPresignedUrl?: (file: File) => Promise<AWSPresignedUrlDTO>;
-    onUploadComplete?: (file: File, s3Url: string) => void;
-    onUploadError?: (file: File, error: Error) => void;
-}
-declare function UseUploadManager({ autoUpload, getPresignedUrl, onUploadComplete, onUploadError, }: UseUploadManagerOptions): {
-    uploads: UploadState[];
-    startUploadsIfNeeded: (files: FileList) => void;
-    resetUploads: () => void;
-};
-
-declare function HomeView(): react_jsx_runtime.JSX.Element;
-
-export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };

package/dist/index.d.ts

@@ -1,228 +0,0 @@
-import * as React from 'react';
-import React__default from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare enum ContainerType {
-    File = 0,
-    Folder = 1,
-    Root = 2
-}
-
-/**
- * Represents an Auto-generated model for ContainerDTO.
- */
-interface IContainerDTO {
-    Id: string;
-    ContainerType: ContainerType;
-    Name?: string;
-    ContentType?: string;
-    PublicUrl?: string;
-    CreatedDate: string;
-    FileSize: number;
-    UserId: string;
-    ParentContainerId: string;
-}
-type ContainerDTOInit = Partial<IContainerDTO> & Pick<IContainerDTO, "Id" | "ContainerType" | "CreatedDate" | "FileSize" | "UserId" | "ParentContainerId">;
-declare class ContainerDTO implements IContainerDTO {
-    Id: string;
-    ContainerType: ContainerType;
-    Name?: string;
-    ContentType?: string;
-    PublicUrl?: string;
-    CreatedDate: string;
-    FileSize: number;
-    UserId: string;
-    ParentContainerId: string;
-    constructor(init: ContainerDTOInit);
-}
-
-/**
-* Auto-generated client for the Container controller.
-*/
-declare class Container {
-    private baseUrl;
-    constructor(baseUrl: string);
-    ReadChildrenByContainerId(parentId: string): Promise<ContainerDTO[]>;
-    ReadRootContainers(): Promise<ContainerDTO[]>;
-    Read(id: string): Promise<ContainerDTO>;
-    Create(containerDTO: ContainerDTO): Promise<ContainerDTO>;
-    Update(containerDTO: ContainerDTO): Promise<ContainerDTO>;
-    DeleteContainer(id: string): Promise<ContainerDTO>;
-    CreateFileContainer(fileName: string, size: number, contentType: string): Promise<ContainerDTO>;
-}
-
-/**
-* Auto-generated client for the Home controller.
-*/
-declare class Home {
-    private baseUrl;
-    constructor(baseUrl: string);
-}
-
-/**
- * Represents an Auto-generated model for AWSPresignedUrlDTO.
- */
-interface IAWSPresignedUrlDTO {
-    PresignedUrl?: string;
-    PublicUrl?: string;
-    Key?: string;
-}
-type AWSPresignedUrlDTOInit = Partial<IAWSPresignedUrlDTO>;
-declare class AWSPresignedUrlDTO implements IAWSPresignedUrlDTO {
-    PresignedUrl?: string;
-    PublicUrl?: string;
-    Key?: string;
-    constructor(init: AWSPresignedUrlDTOInit);
-}
-
-/**
- * Represents an Auto-generated model for TemporaryFileDTO.
- */
-interface ITemporaryFileDTO {
-    Name?: string;
-    ContentType?: string;
-}
-type TemporaryFileDTOInit = Partial<ITemporaryFileDTO>;
-declare class TemporaryFileDTO implements ITemporaryFileDTO {
-    Name?: string;
-    ContentType?: string;
-    constructor(init: TemporaryFileDTOInit);
-}
-
-/**
-* Auto-generated client for the S3 controller.
-*/
-declare class S3 {
-    private baseUrl;
-    constructor(baseUrl: string);
-    DeleteS3(containerDTO: ContainerDTO): Promise<ContainerDTO>;
-    GetPreSignedUrl(containerDTO: ContainerDTO): Promise<AWSPresignedUrlDTO>;
-    GetTemporaryPreSignedUrl(temporaryFileDTO: TemporaryFileDTO): Promise<AWSPresignedUrlDTO>;
-}
-
-/**
-* Auto-generated API client.
-*/
-declare class SparkStudioStorageSDK {
-    container: Container;
-    home: Home;
-    s3: S3;
-    constructor(baseUrl: string);
-}
-
-interface ContainerUploadPanelProps {
-    /** Base URL for the Container API (the SDK you pasted). */
-    containerApiBaseUrl: string;
-    /** Base URL for your storage / presign endpoint (used by getPresignedUrl). */
-    storageApiBaseUrl: string;
-    /** Optional parent container – if set, we query children instead of roots. */
-    parentContainerId?: string;
-}
-declare const ContainerUploadPanel: React__default.FC<ContainerUploadPanelProps>;
-
-interface DesktopFileIconProps {
-    name?: string | null;
-    sizeBytes?: number | null;
-    downloadUrl?: string | null;
-    /** Double-click / open action */
-    onOpen?: () => void;
-    /** Delete action (can be async) */
-    onDelete?: () => Promise<void> | void;
-}
-declare const DesktopFileIcon: React__default.FC<DesktopFileIconProps>;
-
-interface SingleFileProcessUploaderProps {
-    /** Called to get a presigned S3 URL for the selected file. */
-    getPresignedUrl: (file: File) => Promise<AWSPresignedUrlDTO>;
-    /**
-     * Called after the upload succeeds.
-     * You can use s3Url (the presigned URL you provided) in another component
-     * or have your backend process the file from S3.
-     */
-    onUploadComplete?: (file: File, s3Url: AWSPresignedUrlDTO) => void;
-    /** Optional: restrict file types, e.g. "image/*" or ".png,.jpg" */
-    accept?: string;
-    /** Optional: label shown above the control */
-    label?: string;
-    /** Optional: disable the control entirely */
-    disabled?: boolean;
-}
-declare const SingleFileProcessUploader: React__default.FC<SingleFileProcessUploaderProps>;
-
-interface UploadContainerProps {
-    multiple?: boolean;
-    accept?: string;
-    onFilesSelected?: (files: FileList) => void;
-    existingFiles?: ContainerDTO[];
-    existingFilesLoading?: boolean;
-    onExistingFileClick?: (file: ContainerDTO) => void;
-    /** Called when user chooses "Delete file" from the context menu */
-    onDeleteFile?: (file: ContainerDTO) => void;
-    autoUpload?: boolean;
-    getPresignedUrl?: (file: File) => Promise<AWSPresignedUrlDTO>;
-    onUploadComplete?: (file: File, s3Url: string) => void;
-    onUploadError?: (file: File, error: Error) => void;
-}
-declare const UploadContainer: React__default.FC<UploadContainerProps>;
-
-interface UploadDropzoneProps {
-    isDragging: boolean;
-    onDragOver?: (e: React__default.DragEvent<HTMLDivElement>) => void;
-    onDragLeave?: (e: React__default.DragEvent<HTMLDivElement>) => void;
-    onDrop?: (e: React__default.DragEvent<HTMLDivElement>) => void;
-    /** Extra className so you can make this the root wrapper */
-    className?: string;
-    style?: React__default.CSSProperties;
-    /** Custom content to render inside the dropzone */
-    children?: React__default.ReactNode;
-}
-declare const UploadDropzone: React__default.FC<UploadDropzoneProps>;
-
-type UploadStatus = "pending" | "uploading" | "success" | "error";
-interface UploadState {
-    id: string;
-    file: File;
-    progress: number;
-    status: UploadStatus;
-    error?: string;
-    s3Url?: string;
-    publicUrl?: string;
-}
-
-interface UploadProgressListProps {
-    uploads: UploadState[];
-}
-declare const UploadProgressList: React__default.FC<UploadProgressListProps>;
-
-/**
- * Helper: upload a file to a pre-signed S3 URL with progress + retries.
- */
-declare function UploadFileToS3(file: File, presignedUrl: string, onProgress: (progress: number) => void, maxRetries?: number): Promise<void>;
-
-interface UseContainersOptions {
-    apiBaseUrl: string;
-    parentId?: string;
-}
-declare function UseContainers({ apiBaseUrl, parentId }: UseContainersOptions): {
-    containers: ContainerDTO[];
-    setContainers: React.Dispatch<React.SetStateAction<ContainerDTO[]>>;
-    loading: boolean;
-    error: Error | null;
-    reload: () => Promise<void>;
-};
-
-interface UseUploadManagerOptions {
-    autoUpload?: boolean;
-    getPresignedUrl?: (file: File) => Promise<AWSPresignedUrlDTO>;
-    onUploadComplete?: (file: File, s3Url: string) => void;
-    onUploadError?: (file: File, error: Error) => void;
-}
-declare function UseUploadManager({ autoUpload, getPresignedUrl, onUploadComplete, onUploadError, }: UseUploadManagerOptions): {
-    uploads: UploadState[];
-    startUploadsIfNeeded: (files: FileList) => void;
-    resetUploads: () => void;
-};
-
-declare function HomeView(): react_jsx_runtime.JSX.Element;
-
-export { AWSPresignedUrlDTO, Container, ContainerDTO, ContainerType, ContainerUploadPanel, DesktopFileIcon, type DesktopFileIconProps, Home, HomeView, type IAWSPresignedUrlDTO, type IContainerDTO, type ITemporaryFileDTO, S3, SingleFileProcessUploader, type SingleFileProcessUploaderProps, SparkStudioStorageSDK, TemporaryFileDTO, UploadContainer, type UploadContainerProps, UploadDropzone, UploadFileToS3, UploadProgressList, type UploadState, type UploadStatus, UseContainers, UseUploadManager };