@sparkstudio/storage-ui 1.0.28 → 1.0.30

package/dist/index.cjs

@@ -23,9 +23,13 @@ __export(index_exports, {
   AWSPresignedUrlDTO: () => AWSPresignedUrlDTO,
   Container: () => Container,
   ContainerDTO: () => ContainerDTO,
+  ContainerIdGridPanel: () => ContainerIdGridPanel,
   ContainerType: () => ContainerType,
   ContainerUploadPanel: () => ContainerUploadPanel,
   DesktopFileIcon: () => DesktopFileIcon,
+  FileGridUploadPanel: () => FileGridUploadPanel,
+  FileIconCard: () => FileIconCard,
+  FileIconGrid: () => FileIconGrid,
   Home: () => Home,
   HomeView: () => HomeView,
   S3: () => S3,
@@ -276,54 +280,11 @@ var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
   return ContainerType2;
 })(ContainerType || {});
 
-// src/components/ContainerUploadPanel.tsx
-var import_react7 = require("react");
-
-// src/components/UploadContainer.tsx
+// src/components/ContainerIdGridPanel.tsx
 var import_react5 = require("react");
 
-// src/components/UploadDropzone.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var UploadDropzone = ({
-  isDragging,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  className = "",
-  style,
-  children
-}) => {
-  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();
-    onDragOver?.(e);
-  };
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    onDragLeave?.(e);
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    onDrop?.(e);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className: combinedClassName,
-      style: { minHeight: "140px", ...style },
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      children
-    }
-  );
-};
-
 // src/hooks/UseUploadManager.ts
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/engines/UploadFileToS3.ts
 async function UploadFileToS3(file, presignedUrl, onProgress, maxRetries = 3) {
@@ -380,14 +341,14 @@ function UseUploadManager({
   onUploadComplete,
   onUploadError
 }) {
-  const [uploads, setUploads] = (0, import_react2.useState)([]);
+  const [uploads, setUploads] = (0, import_react.useState)([]);
   const createUploadStates = (files) => Array.from(files).map((file) => ({
     id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,
     file,
     progress: 0,
     status: "pending"
   }));
-  const uploadFile = (0, import_react2.useCallback)(
+  const uploadFile = (0, import_react.useCallback)(
     async (upload) => {
       setUploads(
         (prev) => prev.map(
@@ -453,7 +414,7 @@ function UseUploadManager({
     }
     throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
   }
-  const startUploadsIfNeeded = (0, import_react2.useCallback)(
+  const startUploadsIfNeeded = (0, import_react.useCallback)(
     (files) => {
       if (!autoUpload || !getPresignedUrl) return;
       const newUploads = createUploadStates(files);
@@ -464,7 +425,7 @@ function UseUploadManager({
     },
     [autoUpload, getPresignedUrl, uploadFile]
   );
-  const resetUploads = (0, import_react2.useCallback)(() => setUploads([]), []);
+  const resetUploads = (0, import_react.useCallback)(() => setUploads([]), []);
   return {
     uploads,
     startUploadsIfNeeded,
@@ -473,19 +434,19 @@ function UseUploadManager({
 }
 
 // src/components/UploadProgressList.tsx
-var import_react3 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var import_jsx_runtime = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.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)(
+      children: visibleUploads.map((u) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
           className: "d-flex flex-column align-items-center",
@@ -495,7 +456,7 @@ var UploadProgressList = ({
           },
           title: u.file.name,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               "div",
               {
                 className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
@@ -504,20 +465,20 @@ var UploadProgressList = ({
                   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)(
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "bi bi-file-earmark fs-2" }),
+                  u.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.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" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.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: "!" })
+                  u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger", children: "!" })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 className: "small text-center text-truncate",
@@ -525,7 +486,7 @@ var UploadProgressList = ({
                 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)(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-100 mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "progress", style: { height: "4px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 className: "progress-bar " + (u.status === "error" ? "bg-danger" : ""),
@@ -536,7 +497,7 @@ var UploadProgressList = ({
                 "aria-valuemax": 100
               }
             ) }) }),
-            u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            u.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
                 className: "text-danger small mt-1 text-center",
@@ -552,11 +513,558 @@ var UploadProgressList = ({
   );
 };
 
+// src/components/FileIconGrid.tsx
+var import_react4 = require("react");
+
+// src/components/FileIconCard.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function sanitizeIconHtml(input) {
+  return input.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/\son\w+="[^"]*"/gi, "").replace(/\son\w+='[^']*'/gi, "").replace(/javascript:/gi, "");
+}
+var FileIconCard = (props) => {
+  const {
+    file,
+    deleteDisabled,
+    selected,
+    onSelect,
+    onDeleteFile,
+    onClickFile,
+    icon,
+    iconHtml,
+    title,
+    className
+  } = props;
+  const [deleting, setDeleting] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const safeIconHtml = (0, import_react3.useMemo)(() => {
+    if (!iconHtml) return null;
+    return sanitizeIconHtml(iconHtml);
+  }, [iconHtml]);
+  const canDelete = !!onDeleteFile && !deleteDisabled && !deleting;
+  const handleClick = () => {
+    onSelect?.(file);
+    onClickFile?.(file);
+  };
+  const handleDelete = async (ev) => {
+    ev.stopPropagation();
+    if (!canDelete) return;
+    setError(null);
+    setDeleting(true);
+    try {
+      await onDeleteFile?.(file);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Delete failed");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const borderColor = selected ? "rgba(13,110,253,0.8)" : "rgba(0,0,0,0.12)";
+  const boxShadow = selected ? "0 0 0 3px rgba(13,110,253,0.2)" : "none";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: [
+        "file-icon-card",
+        deleteDisabled ? "is-delete-disabled" : "",
+        deleting ? "is-deleting" : "",
+        className ?? ""
+      ].join(" "),
+      role: "button",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      title: title ?? file.Name ?? "File",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: 12,
+        border: `1px solid ${borderColor}`,
+        boxShadow,
+        borderRadius: 12,
+        userSelect: "none",
+        cursor: "pointer",
+        background: "white"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              width: 44,
+              height: 44,
+              borderRadius: 10,
+              display: "grid",
+              placeItems: "center",
+              background: "rgba(0,0,0,0.04)",
+              flex: "0 0 auto"
+            },
+            children: icon ? icon : safeIconHtml ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, dangerouslySetInnerHTML: { __html: safeIconHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultFileIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { minWidth: 0, flex: "1 1 auto" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                fontWeight: 600,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: title ?? file.Name ?? "Untitled"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: typeof file.FileSize === "number" ? formatBytes(file.FileSize) : "" }),
+          error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "crimson", marginTop: 4 }, children: error }) : null
+        ] }),
+        !deleteDisabled ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: handleDelete,
+            disabled: !canDelete,
+            "aria-label": "Delete file",
+            style: {
+              border: "1px solid rgba(0,0,0,0.18)",
+              background: canDelete ? "white" : "rgba(0,0,0,0.04)",
+              borderRadius: 10,
+              padding: "8px 10px",
+              cursor: canDelete ? "pointer" : "not-allowed",
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              deleting ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SmallSpinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TrashIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 13 }, children: deleting ? "Deleting\u2026" : "Delete" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let v = bytes;
+  let i = 0;
+  while (v >= 1024 && i < units.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+function SmallSpinner() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      "aria-hidden": true,
+      style: {
+        width: 14,
+        height: 14,
+        borderRadius: "50%",
+        border: "2px solid rgba(0,0,0,0.2)",
+        borderTopColor: "rgba(0,0,0,0.7)",
+        display: "inline-block",
+        animation: "fileIconSpin 0.8s linear infinite"
+      }
+    }
+  );
+}
+function DefaultFileIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M7 3h7l3 3v15a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 3v4a1 1 0 0 0 1 1h4", stroke: "currentColor", strokeWidth: "2" })
+  ] });
+}
+function TrashIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M3 6h18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M6 6l1 16a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-16",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "path",
+      {
+        d: "M10 11v7M14 11v7",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+
+// src/components/FileIconGrid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FileIconGrid(props) {
+  const {
+    files,
+    deleteDisabled,
+    onDeleted,
+    selectedId,
+    onSelect,
+    icon,
+    iconHtml,
+    className
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+        gap: 12
+      },
+      children: files.map((f) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        FileIconCard,
+        {
+          file: f,
+          deleteDisabled,
+          onDeleteFile: onDeleted,
+          onSelect,
+          selected: selectedId === f.Id,
+          icon,
+          iconHtml
+        },
+        f.Id
+      ))
+    }
+  );
+}
+
+// src/components/ContainerIdGridPanel.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ContainerIdGridPanel(props) {
+  const {
+    containerApiBaseUrl,
+    storageApiBaseUrl,
+    containerIds,
+    onContainerIdsChange,
+    accept = "*/*",
+    multiple = true,
+    selectedId,
+    onSelect,
+    icon,
+    iconHtml,
+    deleteDisabled,
+    className,
+    onDeleted
+  } = props;
+  const sdkDb = (0, import_react5.useMemo)(
+    () => new SparkStudioStorageSDK(containerApiBaseUrl),
+    [containerApiBaseUrl]
+  );
+  const sdkS3 = (0, import_react5.useMemo)(
+    () => new SparkStudioStorageSDK(storageApiBaseUrl),
+    [storageApiBaseUrl]
+  );
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [files, setFiles] = (0, import_react5.useState)([]);
+  const [dragOver, setDragOver] = (0, import_react5.useState)(false);
+  const [errMsg, setErrMsg] = (0, import_react5.useState)(null);
+  const idsRef = (0, import_react5.useRef)(containerIds);
+  (0, import_react5.useEffect)(() => {
+    idsRef.current = containerIds;
+  }, [containerIds]);
+  const createdByFileRef = (0, import_react5.useRef)(/* @__PURE__ */ new WeakMap());
+  (0, import_react5.useEffect)(() => {
+    let cancelled = false;
+    async function loadByIds(ids) {
+      setErrMsg(null);
+      if (!ids || ids.length === 0) {
+        setFiles([]);
+        return;
+      }
+      setLoading(true);
+      try {
+        const results = await Promise.all(
+          ids.map(async (id) => {
+            try {
+              const dto = await sdkDb.container.Read?.(id);
+              return dto ?? null;
+            } catch {
+              return null;
+            }
+          })
+        );
+        if (cancelled) return;
+        const map = /* @__PURE__ */ new Map();
+        for (const r of results) if (r?.Id) map.set(r.Id, r);
+        setFiles(
+          ids.map((id) => map.get(id)).filter(Boolean)
+        );
+      } catch (e) {
+        if (!cancelled)
+          setErrMsg(e instanceof Error ? e.message : "Failed to load files");
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+    void loadByIds(containerIds);
+    return () => {
+      cancelled = true;
+    };
+  }, [containerIds, sdkDb]);
+  const getPresignedUrl = async (file) => {
+    const contentType = file.type || "application/octet-stream";
+    const containerDTO = await sdkDb.container.CreateFileContainer(
+      file.name,
+      file.size,
+      encodeURIComponent(contentType)
+    );
+    createdByFileRef.current.set(file, containerDTO);
+    let lastError;
+    for (let i = 1; i <= 3; i++) {
+      try {
+        return await sdkS3.s3.GetPreSignedUrl(containerDTO);
+      } catch (e) {
+        lastError = e;
+        if (i < 3) await new Promise((r) => setTimeout(r, 500 * i));
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+  };
+  const { uploads, startUploadsIfNeeded } = UseUploadManager({
+    autoUpload: true,
+    getPresignedUrl,
+    onUploadComplete: async (file) => {
+      setErrMsg(null);
+      const created = createdByFileRef.current.get(file);
+      if (created?.Id) {
+        const prev = idsRef.current ?? [];
+        const next = prev.includes(created.Id) ? prev : [...prev, created.Id];
+        onContainerIdsChange(next);
+      }
+      if (created?.Id) {
+        try {
+          const refreshed = await sdkDb.container.Read?.(created.Id);
+          if (refreshed) {
+            setFiles((prevFiles) => {
+              const nextFiles = prevFiles.slice();
+              const idx = nextFiles.findIndex((x) => x.Id === created.Id);
+              if (idx >= 0) nextFiles[idx] = refreshed;
+              else nextFiles.push(refreshed);
+              return nextFiles;
+            });
+          }
+        } catch {
+        }
+      }
+    },
+    onUploadError: (_file, error) => {
+      setErrMsg(error?.message ?? "Upload failed");
+    }
+  });
+  const handleDelete = async (file) => {
+    if (deleteDisabled) return;
+    await sdkDb.container.DeleteContainer(file.Id);
+    await sdkS3.s3.DeleteS3(file);
+    const prev = idsRef.current ?? [];
+    onContainerIdsChange(prev.filter((id) => id !== file.Id));
+    setFiles((prevFiles) => prevFiles.filter((x) => x.Id !== file.Id));
+    onDeleted?.(file);
+  };
+  const openPicker = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = multiple;
+    input.accept = accept;
+    input.onchange = () => {
+      if (input.files) startUploadsIfNeeded(input.files);
+    };
+    input.click();
+  };
+  const onDrop = (ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    setDragOver(false);
+    const list = ev.dataTransfer.files;
+    if (!list || list.length === 0) return;
+    startUploadsIfNeeded(list);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }),
+      errMsg ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 12, color: "crimson", marginTop: 6 }, children: errMsg }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        onDragEnter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOver(true);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOver(true);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOver(false);
+        },
+        onDrop,
+        style: {
+          position: "relative",
+          borderRadius: 14,
+          border: `2px dashed ${dragOver ? "rgba(13,110,253,0.9)" : "rgba(0,0,0,0.15)"}`,
+          background: dragOver ? "rgba(13,110,253,0.06)" : "transparent",
+          padding: 12
+        },
+        children: [
+          dragOver ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: 14,
+                display: "grid",
+                placeItems: "center",
+                pointerEvents: "none",
+                background: "rgba(13,110,253,0.10)",
+                fontWeight: 800
+              },
+              children: "Drop files to upload"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                marginBottom: 10
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 700 }, children: "Files" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: openPicker,
+                    style: {
+                      border: "1px solid rgba(0,0,0,0.18)",
+                      background: "white",
+                      borderRadius: 10,
+                      padding: "8px 10px",
+                      cursor: "pointer",
+                      fontWeight: 600
+                    },
+                    children: "Browse\u2026"
+                  }
+                )
+              ]
+            }
+          ),
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "d-flex justify-content-center align-items-center",
+              style: { minHeight: 120 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "spinner-border text-secondary", role: "status" })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            FileIconGrid,
+            {
+              files,
+              deleteDisabled,
+              onDeleted: handleDelete,
+              selectedId,
+              onSelect,
+              icon,
+              iconHtml
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/ContainerUploadPanel.tsx
+var import_react10 = require("react");
+
+// src/components/UploadContainer.tsx
+var import_react8 = require("react");
+
+// src/components/UploadDropzone.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var UploadDropzone = ({
+  isDragging,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  className = "",
+  style,
+  children
+}) => {
+  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();
+    onDragOver?.(e);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    onDragLeave?.(e);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    onDrop?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: combinedClassName,
+      style: { minHeight: "140px", ...style },
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children
+    }
+  );
+};
+
 // src/components/DesktopFileIcon.tsx
 var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome = require("@fortawesome/react-fontawesome");
-var import_react4 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function getFileExtension(name) {
   if (!name) return null;
   const lastDot = name.lastIndexOf(".");
@@ -635,13 +1143,13 @@ var DesktopFileIcon = ({
   onOpen,
   onDelete
 }) => {
-  const [contextMenuPos, setContextMenuPos] = (0, import_react4.useState)(
+  const [contextMenuPos, setContextMenuPos] = (0, import_react7.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 [isHovered, setIsHovered] = (0, import_react7.useState)(false);
+  const [isDeleting, setIsDeleting] = (0, import_react7.useState)(false);
+  const iconRef = (0, import_react7.useRef)(null);
+  const menuRef = (0, import_react7.useRef)(null);
   const handleDoubleClick = () => {
     if (isDeleting) return;
     if (onOpen) {
@@ -699,7 +1207,7 @@ var DesktopFileIcon = ({
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
   const ext = getFileExtension(name);
   const iconToRender = getIconForExtension(ext);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!contextMenuPos) return;
     const handleGlobalClick = (e) => {
       const target = e.target;
@@ -716,8 +1224,8 @@ var DesktopFileIcon = ({
       document.removeEventListener("mousedown", handleGlobalClick);
     };
   }, [contextMenuPos]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         ref: iconRef,
@@ -738,7 +1246,7 @@ var DesktopFileIcon = ({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "div",
             {
               className: "border rounded-3 d-flex align-items-center justify-content-center mb-1 shadow-sm position-relative",
@@ -747,17 +1255,17 @@ var DesktopFileIcon = ({
                 height: 64
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon: iconToRender, className: "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_runtime6.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon: iconToRender, className: "fs-2" }),
+                isDeleting && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "position-absolute top-50 start-50 translate-middle", children: /* @__PURE__ */ (0, import_jsx_runtime6.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 })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "small text-center text-truncate", style: { width: "100%" }, children: name }),
+          formattedSize && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("small", { className: "text-muted mt-1", children: formattedSize })
         ]
       }
     ),
-    contextMenuPos && !isDeleting && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    contextMenuPos && !isDeleting && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "div",
       {
         ref: menuRef,
@@ -770,7 +1278,7 @@ var DesktopFileIcon = ({
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -780,7 +1288,7 @@ var DesktopFileIcon = ({
               children: "Download file"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -790,8 +1298,8 @@ var DesktopFileIcon = ({
               children: "Copy download URL"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "dropdown-divider" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "dropdown-divider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
@@ -807,160 +1315,165 @@ var DesktopFileIcon = ({
 };
 
 // src/components/UploadContainer.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var UploadContainer = ({
-  onFilesSelected,
-  existingFiles = [],
-  existingFilesLoading = false,
-  onExistingFileClick,
-  onDeleteFile,
-  autoUpload = false,
-  getPresignedUrl,
-  onUploadComplete,
-  onUploadError
-}) => {
-  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const { uploads, startUploadsIfNeeded } = UseUploadManager({
-    autoUpload,
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function filesToFileList(files) {
+  const dt = new DataTransfer();
+  for (const f of files) dt.items.add(f);
+  return dt.files;
+}
+var UploadContainer = (0, import_react8.forwardRef)(
+  ({
+    multiple = true,
+    accept = "*/*",
+    onFilesSelected,
+    existingFiles = [],
+    existingFilesLoading = false,
+    onExistingFileClick,
+    onDeleteFile,
+    autoUpload = false,
     getPresignedUrl,
     onUploadComplete,
     onUploadError
-  });
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    const files = e.dataTransfer.files;
-    if (!files || files.length === 0) return;
-    onFilesSelected?.(files);
-    startUploadsIfNeeded(files);
-  };
-  const handleExistingFileOpen = (file) => {
-    if (onExistingFileClick) {
-      onExistingFileClick(file);
-      return;
-    }
-    const a = document.createElement("a");
-    a.href = file.PublicUrl ?? "";
-    a.download = file.Name ?? "";
-    a.target = "_blank";
-    a.rel = "noopener noreferrer";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(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);
+  }, ref) => {
+    const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
+    const inputId = (0, import_react8.useMemo)(() => `filePicker_${crypto.randomUUID()}`, []);
+    const inputRef = (0, import_react8.useRef)(null);
+    const { uploads, startUploadsIfNeeded } = UseUploadManager({
+      autoUpload,
+      getPresignedUrl,
+      onUploadComplete,
+      onUploadError
+    });
+    const selectAndUpload = (files) => {
+      if (!files || files.length === 0) return;
+      onFilesSelected?.(files);
+      startUploadsIfNeeded(files);
+    };
+    (0, import_react8.useImperativeHandle)(ref, () => ({
+      enqueueFiles(files) {
+        const list = Array.isArray(files) ? filesToFileList(files) : files;
+        selectAndUpload(list);
+      },
+      openFilePicker() {
+        inputRef.current?.click();
+      }
+    }));
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const files = e.dataTransfer.files;
+      if (!files || files.length === 0) return;
+      selectAndUpload(files);
+    };
+    const handleExistingFileOpen = (file) => {
+      if (onExistingFileClick) {
+        onExistingFileClick(file);
+        return;
+      }
+      const a = document.createElement("a");
+      a.href = file.PublicUrl ?? "";
+      a.download = file.Name ?? "";
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-100", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "file",
+            multiple,
+            accept,
+            className: "d-none",
+            onChange: (e) => {
+              if (!e.target.files) return;
+              selectAndUpload(e.target.files);
+              e.currentTarget.value = "";
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "button",
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-start", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "btn btn-primary float-start",
+            onClick: () => inputRef.current?.click(),
+            children: "Browse files\u2026"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        UploadDropzone,
         {
-          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"
+          isDragging,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          className: "w-100",
+          style: { minHeight: "100px", alignItems: "stretch" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-100 mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)("div", { className: "flex-grow-1 w-100", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UploadProgressList, { uploads }) }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: "w-100 d-flex flex-wrap gap-4 align-content-start",
+                style: { minHeight: "140px" },
+                children: existingFilesLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-100 d-flex justify-content-center align-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "spinner-border text-secondary", role: "status" }) }) : existingFiles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.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: () => inputRef.current?.click(),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: "Drag & drop files here" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("small", { className: "mt-1", children: "\u2026or click to browse" })
+                    ]
+                  }
+                ) : existingFiles.map((file) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  DesktopFileIcon,
+                  {
+                    name: file.Name,
+                    sizeBytes: file.FileSize,
+                    downloadUrl: file.PublicUrl,
+                    onOpen: () => handleExistingFileOpen(file),
+                    onDelete: () => onDeleteFile?.(file)
                   },
-                  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
-              ))
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
+                  file.Id
+                ))
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+UploadContainer.displayName = "UploadContainer";
 
 // src/hooks/UseContainers.ts
-var import_react6 = require("react");
+var import_react9 = 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 [containers, setContainers] = (0, import_react9.useState)([]);
+  const [loading, setLoading] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)(null);
   const load = async () => {
     setLoading(true);
     setError(null);
@@ -976,7 +1489,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
       setLoading(false);
     }
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     void load();
   }, [apiBaseUrl, parentId]);
   return {
@@ -989,11 +1502,12 @@ function UseContainers({ apiBaseUrl, parentId }) {
 }
 
 // src/components/ContainerUploadPanel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ContainerUploadPanel = ({
   containerApiBaseUrl,
   storageApiBaseUrl,
-  parentContainerId
+  parentContainerId,
+  uploadRef
 }) => {
   const { containers, setContainers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
@@ -1048,9 +1562,10 @@ var ContainerUploadPanel = ({
     await sdkS3.s3.DeleteS3(file);
     setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     UploadContainer,
     {
+      ref: uploadRef,
       existingFiles: containers,
       existingFilesLoading: loading,
       onExistingFileClick: handleExistingFileClick,
@@ -1063,9 +1578,172 @@ var ContainerUploadPanel = ({
   );
 };
 
+// src/components/FileGridUploadPanel.tsx
+var import_react11 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function FileGridUploadPanel(props) {
+  const {
+    containerApiBaseUrl,
+    storageApiBaseUrl,
+    parentContainerId,
+    accept = "*/*",
+    multiple = true,
+    selectedId,
+    onSelect,
+    icon,
+    iconHtml,
+    deleteDisabled
+  } = props;
+  const { containers, setContainers, reload, loading } = UseContainers({
+    apiBaseUrl: containerApiBaseUrl,
+    parentId: parentContainerId
+  });
+  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
+  const sdkDb = (0, import_react11.useMemo)(() => new SparkStudioStorageSDK(containerApiBaseUrl), [containerApiBaseUrl]);
+  const sdkS3 = (0, import_react11.useMemo)(() => new SparkStudioStorageSDK(storageApiBaseUrl), [storageApiBaseUrl]);
+  const getPresignedUrl = async (file) => {
+    const contentType = file.type || "application/octet-stream";
+    const containerDTO = await sdkDb.container.CreateFileContainer(
+      file.name,
+      file.size,
+      encodeURIComponent(contentType)
+    );
+    let lastError;
+    for (let i = 1; i <= 3; i++) {
+      try {
+        return await sdkS3.s3.GetPreSignedUrl(containerDTO);
+      } catch (e) {
+        lastError = e;
+        if (i < 3) await new Promise((r) => setTimeout(r, 500 * i));
+      }
+    }
+    throw lastError instanceof Error ? lastError : new Error("Failed to fetch presigned URL");
+  };
+  const { uploads, startUploadsIfNeeded } = UseUploadManager({
+    autoUpload: true,
+    getPresignedUrl,
+    onUploadComplete: async () => {
+      setError(null);
+      await reload();
+    },
+    onUploadError: (_file, err) => {
+      setError(err.message ?? "Upload failed");
+    }
+  });
+  const handleDeleteFile = async (file) => {
+    const sdkDb2 = new SparkStudioStorageSDK(containerApiBaseUrl);
+    const sdkS32 = new SparkStudioStorageSDK(storageApiBaseUrl);
+    await sdkDb2.container.DeleteContainer(file.Id);
+    await sdkS32.s3.DeleteS3(file);
+    setContainers((prev) => prev.filter((c) => c.Id !== file.Id));
+  };
+  const openPicker = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = multiple;
+    input.accept = accept;
+    input.onchange = () => {
+      if (!input.files || input.files.length === 0) return;
+      startUploadsIfNeeded(input.files);
+    };
+    input.click();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(UploadProgressList, { uploads }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 12, color: "crimson", marginTop: 6 }, children: error }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        onDragEnter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(true);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(true);
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setIsDragging(false);
+          const files = e.dataTransfer.files;
+          if (!files || files.length === 0) return;
+          startUploadsIfNeeded(files);
+        },
+        style: {
+          position: "relative",
+          borderRadius: 14,
+          border: isDragging ? "2px dashed rgba(13,110,253,0.9)" : "2px dashed rgba(0,0,0,0.15)",
+          background: isDragging ? "rgba(13,110,253,0.06)" : "transparent",
+          padding: 12
+        },
+        children: [
+          isDragging ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: 14,
+                display: "grid",
+                placeItems: "center",
+                pointerEvents: "none",
+                background: "rgba(13,110,253,0.08)",
+                fontWeight: 800
+              },
+              children: "Drop files to upload"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 10 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontWeight: 700 }, children: "Files" }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: openPicker,
+                style: {
+                  border: "1px solid rgba(0,0,0,0.18)",
+                  background: "white",
+                  borderRadius: 10,
+                  padding: "8px 10px",
+                  cursor: "pointer",
+                  fontWeight: 600
+                },
+                children: "Browse\u2026"
+              }
+            )
+          ] }),
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "d-flex justify-content-center align-items-center", style: { minHeight: 120 }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "spinner-border text-secondary", role: "status" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            FileIconGrid,
+            {
+              files: containers,
+              deleteDisabled,
+              onDeleted: handleDeleteFile,
+              selectedId,
+              onSelect,
+              icon,
+              iconHtml
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
 // src/components/SingleFileProcessUploader.tsx
-var import_react8 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SingleFileProcessUploader = ({
   getPresignedUrl,
   onUploadComplete,
@@ -1074,28 +1752,28 @@ var SingleFileProcessUploader = ({
   disabled,
   uploadOnDrop = false
 }) => {
-  const [selectedFile, setSelectedFile] = (0, import_react8.useState)(null);
-  const [isDragging, setIsDragging] = (0, import_react8.useState)(false);
-  const [progress, setProgress] = (0, import_react8.useState)(null);
-  const [status, setStatus] = (0, import_react8.useState)("idle");
-  const fileInputRef = (0, import_react8.useRef)(null);
+  const [selectedFile, setSelectedFile] = (0, import_react12.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react12.useState)(false);
+  const [progress, setProgress] = (0, import_react12.useState)(null);
+  const [status, setStatus] = (0, import_react12.useState)("idle");
+  const fileInputRef = (0, import_react12.useRef)(null);
   function getErrorMessage(err) {
     if (err instanceof Error) return err.message;
     if (typeof err === "string") return err;
     return "Unknown error during upload.";
   }
   const isUploading = status === "uploading";
-  const resetUiForNewFile = (0, import_react8.useCallback)((file) => {
+  const resetUiForNewFile = (0, import_react12.useCallback)((file) => {
     setSelectedFile(file);
     setStatus("idle");
     setProgress(null);
   }, []);
-  const handleBrowseClick = (0, import_react8.useCallback)(() => {
+  const handleBrowseClick = (0, import_react12.useCallback)(() => {
     if (disabled) return;
     if (isUploading) return;
     fileInputRef.current?.click();
   }, [disabled, isUploading]);
-  const startUpload = (0, import_react8.useCallback)(
+  const startUpload = (0, import_react12.useCallback)(
     async (file) => {
       if (disabled) return;
       if (isUploading) return;
@@ -1119,7 +1797,7 @@ var SingleFileProcessUploader = ({
     },
     [disabled, getPresignedUrl, isUploading, onUploadComplete, onUploadFailed]
   );
-  const handleFilesSelected = (0, import_react8.useCallback)(
+  const handleFilesSelected = (0, import_react12.useCallback)(
     (files) => {
       if (!files || files.length === 0) return;
       if (disabled) return;
@@ -1164,8 +1842,8 @@ var SingleFileProcessUploader = ({
     disabled ? "opacity-50" : "cursor-pointer",
     isDragging ? "bg-body-secondary border-dashed border-2 border-secondary" : "bg-body-trasparent border-dashed border-2"
   ].join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "d-flex flex-column gap-2", children: [
-    isUploading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "small", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "progress", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "d-flex flex-column gap-2", children: [
+    isUploading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "small", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "progress", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         className: "progress-bar progress-bar-striped progress-bar-animated",
@@ -1175,7 +1853,7 @@ var SingleFileProcessUploader = ({
         "aria-valuenow": progress ?? 0,
         style: { width: `${progress ?? 0}%` }
       }
-    ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    ) }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
       {
         className: dropzoneClasses,
@@ -1186,7 +1864,7 @@ var SingleFileProcessUploader = ({
         role: "button",
         "aria-disabled": disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -1197,8 +1875,8 @@ var SingleFileProcessUploader = ({
               disabled: disabled || isUploading
             }
           ),
-          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "small", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1207,15 +1885,15 @@ var SingleFileProcessUploader = ({
                 children: "Browse file\u2026"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Selected file:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: "Selected file:" }),
               " ",
               selectedFile.name
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "Click here to change file or drag a new one." }),
-            uploadOnDrop && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "Upload starts automatically." })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "small", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-muted", children: "Click here to change file or drag a new one." }),
+            uploadOnDrop && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-muted", children: "Upload starts automatically." })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "small", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "button",
               {
                 type: "button",
@@ -1224,13 +1902,13 @@ var SingleFileProcessUploader = ({
                 children: "Browse file\u2026"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: "Drag & drop a file here" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-muted", children: "or click to browse" })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: "Drag & drop a file here" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-muted", children: "or click to browse" })
           ] })
         ]
       }
     ),
-    !uploadOnDrop && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    !uploadOnDrop && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
@@ -1244,34 +1922,44 @@ var SingleFileProcessUploader = ({
 };
 
 // src/views/HomeView.tsx
+var import_react13 = require("react");
 var import_authentication_ui = require("@sparkstudio/authentication-ui");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CONTAINER_API = "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod";
+var STORAGE_API = "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod";
 function HomeView() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_authentication_ui.AuthenticatorProvider,
     {
       googleClientId: import_authentication_ui.AppSettings.GoogleClientId,
       authenticationUrl: import_authentication_ui.AppSettings.AuthenticationUrl,
       accountsUrl: import_authentication_ui.AppSettings.AccountsUrl,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HomeContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HomeContent, {})
     }
   );
 }
 function HomeContent() {
   const { user } = (0, import_authentication_ui.useUser)();
+  const [ids, setIds] = (0, import_react13.useState)([]);
+  const [selectedId, setSelectedId] = (0, import_react13.useState)(void 0);
+  const [selectedFile, setSelectedFile] = (0, import_react13.useState)(null);
+  (0, import_react13.useEffect)(() => {
+    if (selectedId && !ids.includes(selectedId)) {
+      setSelectedId(void 0);
+      setSelectedFile(null);
+    }
+  }, [ids, selectedId]);
   async function getPresignedUrlFromApi(file) {
-    const res = new SparkStudioStorageSDK(
-      "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
-      //"https://localhost:5001"
-    );
+    const sdk = new SparkStudioStorageSDK(STORAGE_API);
     const contentType = file.type || "application/octet-stream";
-    const result = await res.s3.GetTemporaryPreSignedUrl(new TemporaryFileDTO({ Name: file.name, ContentType: contentType }));
-    return result;
+    return sdk.s3.GetTemporaryPreSignedUrl(
+      new TemporaryFileDTO({ Name: file.name, ContentType: contentType })
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_authentication_ui.UserInfoCard, {}),
-    user && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_authentication_ui.UserInfoCard, {}),
+    user ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         SingleFileProcessUploader,
         {
           uploadOnDrop: true,
@@ -1282,14 +1970,46 @@ function HomeContent() {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        ContainerUploadPanel,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        ContainerIdGridPanel,
         {
-          containerApiBaseUrl: "https://lf9zyufpuk.execute-api.us-east-2.amazonaws.com/Prod",
-          storageApiBaseUrl: "https://iq0gmcn0pd.execute-api.us-east-2.amazonaws.com/Prod"
+          containerApiBaseUrl: CONTAINER_API,
+          storageApiBaseUrl: STORAGE_API,
+          containerIds: ids,
+          onContainerIdsChange: setIds,
+          multiple: true,
+          accept: "*/*",
+          selectedId,
+          onSelect: (file) => {
+            setSelectedId(file.Id);
+            setSelectedFile(file);
+          },
+          onDeleted: (file) => {
+            console.log("Deleted:", file);
+            if (selectedId === file.Id) {
+              setSelectedId(void 0);
+              setSelectedFile(null);
+            }
+          }
         }
-      )
-    ] })
+      ),
+      selectedFile ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "div",
+        {
+          style: {
+            marginTop: 12,
+            padding: 12,
+            border: "1px solid rgba(0,0,0,0.12)",
+            borderRadius: 12
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontWeight: 700 }, children: "Selected file" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: selectedFile.Name ?? "(no name)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 12, opacity: 0.7 }, children: selectedFile.PublicUrl ?? "(no public url)" })
+          ]
+        }
+      ) : null
+    ] }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -1297,9 +2017,13 @@ function HomeContent() {
   AWSPresignedUrlDTO,
   Container,
   ContainerDTO,
+  ContainerIdGridPanel,
   ContainerType,
   ContainerUploadPanel,
   DesktopFileIcon,
+  FileGridUploadPanel,
+  FileIconCard,
+  FileIconGrid,
   Home,
   HomeView,
   S3,