@sparkstudio/storage-ui 1.0.11 → 1.0.13

package/dist/index.cjs

@@ -24,10 +24,18 @@ __export(index_exports, {
   Container: () => Container,
   ContainerDTO: () => ContainerDTO,
   ContainerType: () => ContainerType,
+  ContainerUploadPanel: () => ContainerUploadPanel,
   Home: () => Home,
   HomeView: () => HomeView,
+  S3: () => S3,
   SparkStudioStorageSDK: () => SparkStudioStorageSDK,
-  UploadContainer: () => UploadContainer
+  UploadContainer: () => UploadContainer,
+  UploadDropzone: () => UploadDropzone,
+  UploadFilePicker: () => UploadFilePicker,
+  UploadFileToS3: () => UploadFileToS3,
+  UploadProgressList: () => UploadProgressList,
+  UseContainers: () => UseContainers,
+  UseUploadManager: () => UseUploadManager
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -109,23 +117,22 @@ var Container = class {
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
-  async DeleteS3(containerDTO) {
-    const url = `${this.baseUrl}/api/Container/DeleteS3`;
+  async DeleteContainer(id) {
+    const url = `${this.baseUrl}/api/Container/DeleteContainer/` + id;
     const token = localStorage.getItem("auth_token");
     const requestOptions = {
-      method: "POST",
+      method: "GET",
       headers: {
         "Content-Type": "application/json",
         ...token && { Authorization: `Bearer ${token}` }
-      },
-      body: JSON.stringify(containerDTO)
+      }
     };
     const response = await fetch(url, requestOptions);
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
-  async DeleteContainer(id) {
-    const url = `${this.baseUrl}/api/Container/DeleteContainer/` + id;
+  async CreateFileContainer(fileName, size, contentType) {
+    const url = `${this.baseUrl}/api/Container/CreateFileContainer/` + fileName + `/` + size + `/` + contentType;
     const token = localStorage.getItem("auth_token");
     const requestOptions = {
       method: "GET",
@@ -138,22 +145,39 @@ var Container = class {
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
-  async CreateFileContainer(fileName, size, contentType) {
-    const url = `${this.baseUrl}/api/Container/CreateFileContainer/` + fileName + `/` + size + `/` + contentType;
+};
+
+// src/api/Controllers/Home.ts
+var Home = class {
+  baseUrl;
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl;
+  }
+};
+
+// src/api/Controllers/S3.ts
+var S3 = class {
+  baseUrl;
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl;
+  }
+  async DeleteS3(containerDTO) {
+    const url = `${this.baseUrl}/api/S3/DeleteS3`;
     const token = localStorage.getItem("auth_token");
     const requestOptions = {
-      method: "GET",
+      method: "POST",
       headers: {
         "Content-Type": "application/json",
         ...token && { Authorization: `Bearer ${token}` }
-      }
+      },
+      body: JSON.stringify(containerDTO)
     };
     const response = await fetch(url, requestOptions);
     if (!response.ok) throw new Error(await response.text());
     return await response.json();
   }
   async GetPreSignedUrl(containerDTO) {
-    const url = `${this.baseUrl}/api/Container/GetPreSignedUrl`;
+    const url = `${this.baseUrl}/api/S3/GetPreSignedUrl`;
     const token = localStorage.getItem("auth_token");
     const requestOptions = {
       method: "POST",
@@ -169,21 +193,15 @@ var Container = class {
   }
 };
 
-// src/api/Controllers/Home.ts
-var Home = class {
-  baseUrl;
-  constructor(baseUrl) {
-    this.baseUrl = baseUrl;
-  }
-};
-
 // src/api/SparkStudioStorageSDK.ts
 var SparkStudioStorageSDK = class {
   container;
   home;
+  s3;
   constructor(baseUrl) {
     this.container = new Container(baseUrl);
     this.home = new Home(baseUrl);
+    this.s3 = new S3(baseUrl);
   }
 };
 
@@ -229,75 +247,246 @@ 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,
+var UploadDropzone = ({
+  isDragging,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}) => {
+  return /* @__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,
+      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" })
+      ]
+    }
+  );
+};
+
+// src/components/UploadFilePicker.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var UploadFilePicker = ({
+  multiple,
   accept,
-  onFilesSelected,
-  autoUpload = false,
-  getPresignedUrl,
-  onUploadComplete,
-  onUploadError
+  fileNames,
+  onFileChange
 }) => {
-  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
+  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
+        }
       )
-    );
-    try {
-      if (!getPresignedUrl) {
-        throw new Error("getPresignedUrl is not provided.");
+    ] }),
+    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
       }
-      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
+    ) }),
+    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");
+
+// src/engines/UploadFileToS3.ts
+async function UploadFileToS3(file, presignedUrl, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("PUT", presignedUrl);
+    xhr.upload.onprogress = (event) => {
+      if (!event.lengthComputable) return;
+      const percent = Math.round(event.loaded / event.total * 100);
+      onProgress(percent);
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        onProgress(100);
+        resolve();
+      } else {
+        reject(
+          new Error(
+            `S3 upload failed with status ${xhr.status}: ${xhr.statusText}`
           )
         );
-      });
-      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;
       }
+    };
+    xhr.onerror = () => {
+      reject(new Error("Network error while uploading to S3"));
+    };
+    xhr.setRequestHeader(
+      "Content-Type",
+      file.type || "application/octet-stream"
+    );
+    xhr.send(file);
+  });
+}
+
+// src/hooks/UseUploadManager.ts
+function UseUploadManager({
+  autoUpload = false,
+  getPresignedUrl,
+  onUploadComplete,
+  onUploadError
+}) {
+  const [uploads, setUploads] = (0, import_react4.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)(
+    async (upload) => {
       setUploads(
         (prev) => prev.map(
-          (u) => u.id === upload.id ? { ...u, status: "error", error: message } : u
+          (u) => u.id === upload.id ? { ...u, status: "uploading", progress: 0 } : u
         )
       );
-      onUploadError?.(upload.file, err instanceof Error ? err : new Error(message));
-    }
+      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,
+              // 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]
+  );
+  const startUploadsIfNeeded = (0, import_react4.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_react4.useCallback)(() => setUploads([]), []);
+  return {
+    uploads,
+    startUploadsIfNeeded,
+    resetUploads
   };
+}
+
+// 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 = [],
+  onExistingFileClick,
+  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,
+    onUploadComplete,
+    onUploadError
+  });
   const handleDragOver = (e) => {
     e.preventDefault();
     setIsDragging(true);
@@ -322,150 +511,205 @@ var UploadContainer = ({
     onFilesSelected?.(files);
     startUploadsIfNeeded(files);
   };
-  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",
+  const handleExistingFileClickInternal = (file) => {
+    if (onExistingFileClick) {
+      onExistingFileClick(file);
+      return;
+    }
+    const a = document.createElement("a");
+    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)(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,
       {
-        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" },
+        isDragging,
         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" })
-        ]
+        onDrop: handleDrop
       }
     ),
-    /* @__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)) })
-  ] }) }) });
-};
-async function uploadFileToS3(file, presignedUrl, onProgress) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open("PUT", presignedUrl);
-    xhr.upload.onprogress = (event) => {
-      if (!event.lengthComputable) return;
-      const percent = Math.round(event.loaded / event.total * 100);
-      onProgress(percent);
-    };
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        onProgress(100);
-        resolve();
-      } else {
-        reject(
-          new Error(`S3 upload failed with status ${xhr.status}: ${xhr.statusText}`)
-        );
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      UploadFilePicker,
+      {
+        multiple,
+        accept,
+        fileNames,
+        onFileChange: handleFileChange
       }
-    };
-    xhr.onerror = () => {
-      reject(new Error("Network error while uploading to S3"));
-    };
-    xhr.setRequestHeader(
-      "Content-Type",
-      file.type || "application/octet-stream"
-    );
-    xhr.send(file);
-  });
+    ),
+    /* @__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(
+        "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod"
+      );
+      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/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/components/ContainerUploadPanel.tsx
+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."
+}) => {
+  const { containers, loading, error, reload } = 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.container.GetPreSignedUrl(containerDTO);
+    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;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const handleUploadComplete = async (file, s3Url) => {
+    console.log("Upload complete:", file.name, s3Url);
+    await reload();
+  };
+  const handleUploadError = (file, err) => {
+    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.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.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
+      }
+    )
+  ] });
+};
+
+// 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://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
+        storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AWSPresignedUrlDTO,
   Container,
   ContainerDTO,
   ContainerType,
+  ContainerUploadPanel,
   Home,
   HomeView,
+  S3,
   SparkStudioStorageSDK,
-  UploadContainer
+  UploadContainer,
+  UploadDropzone,
+  UploadFilePicker,
+  UploadFileToS3,
+  UploadProgressList,
+  UseContainers,
+  UseUploadManager
 });