@sparkstudio/storage-ui 1.0.33 → 1.0.35

package/dist/index.js

@@ -234,7 +234,7 @@ var ContainerType = /* @__PURE__ */ ((ContainerType2) => {
 })(ContainerType || {});
 
 // src/components/ContainerIdGridPanel.tsx
-import { useEffect, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo, useRef, useState as useState4 } from "react";
 
 // src/hooks/UseUploadManager.ts
 import { useState, useCallback } from "react";
@@ -467,13 +467,20 @@ var UploadProgressList = ({
 };
 
 // src/components/FileIconGrid.tsx
-import "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 
 // src/components/FileIconCard.tsx
-import { useMemo, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "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, "");
+import { useEffect, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function useIsMobile(breakpoint = 640) {
+  const getValue = () => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
+  const [isMobile, setIsMobile] = useState2(getValue);
+  useEffect(() => {
+    const onResize = () => setIsMobile(getValue());
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [breakpoint]);
+  return isMobile;
 }
 var FileIconCard = (props) => {
   const {
@@ -483,17 +490,12 @@ var FileIconCard = (props) => {
     onSelect,
     onDeleteFile,
     onClickFile,
-    icon,
-    iconHtml,
     title,
     className
   } = props;
+  const isMobile = useIsMobile();
   const [deleting, setDeleting] = useState2(false);
   const [error, setError] = useState2(null);
-  const safeIconHtml = useMemo(() => {
-    if (!iconHtml) return null;
-    return sanitizeIconHtml(iconHtml);
-  }, [iconHtml]);
   const canDelete = !!onDeleteFile && !deleteDisabled && !deleting;
   const handleClick = () => {
     onSelect?.(file);
@@ -535,69 +537,115 @@ var FileIconCard = (props) => {
       title: title ?? file.Name ?? "File",
       style: {
         display: "flex",
-        alignItems: "center",
-        gap: 12,
-        padding: 12,
+        flexDirection: "column",
+        gap: 10,
+        padding: isMobile ? 14 : 12,
         border: `1px solid ${borderColor}`,
         boxShadow,
-        borderRadius: 12,
+        borderRadius: 16,
         userSelect: "none",
         cursor: "pointer",
-        background: "white"
+        background: "white",
+        minWidth: 0,
+        width: "100%",
+        boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs2(
           "div",
           {
             style: {
-              width: 44,
-              height: 44,
-              borderRadius: 10,
-              display: "grid",
-              placeItems: "center",
-              background: "rgba(0,0,0,0.04)",
-              flex: "0 0 auto"
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 12,
+              minWidth: 0,
+              width: "100%"
             },
-            children: icon ? icon : safeIconHtml ? /* @__PURE__ */ jsx2("span", { "aria-hidden": true, dangerouslySetInnerHTML: { __html: safeIconHtml } }) : /* @__PURE__ */ jsx2(DefaultFileIcon, {})
+            children: [
+              /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    minWidth: 0,
+                    flex: "1 1 auto",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          fontWeight: 700,
+                          fontSize: isMobile ? 15 : 14,
+                          lineHeight: 1.2,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: title ?? file.Name ?? "Untitled"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 12,
+                          opacity: 0.7,
+                          marginTop: 4,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: typeof file.FileSize === "number" ? formatBytes(file.FileSize) : ""
+                      }
+                    )
+                  ]
+                }
+              ),
+              !deleteDisabled ? /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleDelete,
+                  disabled: !canDelete,
+                  "aria-label": deleting ? "Deleting file" : "Delete file",
+                  title: deleting ? "Deleting..." : "Delete",
+                  style: {
+                    flex: "0 0 auto",
+                    width: isMobile ? 40 : "auto",
+                    height: isMobile ? 40 : "auto",
+                    minWidth: isMobile ? 40 : 110,
+                    border: "1px solid rgba(0,0,0,0.18)",
+                    background: canDelete ? "white" : "rgba(0,0,0,0.04)",
+                    borderRadius: 12,
+                    padding: isMobile ? 0 : "8px 10px",
+                    cursor: canDelete ? "pointer" : "not-allowed",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 8,
+                    boxSizing: "border-box"
+                  },
+                  children: [
+                    deleting ? /* @__PURE__ */ jsx2(SmallSpinner, {}) : /* @__PURE__ */ jsx2(TrashIcon, {}),
+                    !isMobile ? /* @__PURE__ */ jsx2("span", { style: { fontSize: 14, fontWeight: 600 }, children: deleting ? "Deleting\u2026" : "Delete" }) : null
+                  ]
+                }
+              ) : null
+            ]
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0, flex: "1 1 auto" }, children: [
-          /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                fontWeight: 600,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              children: title ?? file.Name ?? "Untitled"
-            }
-          ),
-          /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, opacity: 0.7 }, children: typeof file.FileSize === "number" ? formatBytes(file.FileSize) : "" }),
-          error ? /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "crimson", marginTop: 4 }, children: error }) : null
-        ] }),
-        !deleteDisabled ? /* @__PURE__ */ jsxs2(
-          "button",
+        error ? /* @__PURE__ */ jsx2(
+          "div",
           {
-            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
+              fontSize: 12,
+              color: "crimson",
+              marginTop: -2,
+              wordBreak: "break-word"
             },
-            children: [
-              deleting ? /* @__PURE__ */ jsx2(SmallSpinner, {}) : /* @__PURE__ */ jsx2(TrashIcon, {}),
-              /* @__PURE__ */ jsx2("span", { style: { fontSize: 13 }, children: deleting ? "Deleting\u2026" : "Delete" })
-            ]
+            children: error
           }
         ) : null
       ]
@@ -616,33 +664,33 @@ function formatBytes(bytes) {
   return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
 }
 function SmallSpinner() {
-  return /* @__PURE__ */ jsx2(
-    "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__ */ jsxs2("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("style", { children: `
+          @keyframes fileIconSpin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` }),
     /* @__PURE__ */ jsx2(
-      "path",
+      "span",
       {
-        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"
+        "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",
+          boxSizing: "border-box",
+          animation: "fileIconSpin 0.8s linear infinite"
+        }
       }
-    ),
-    /* @__PURE__ */ jsx2("path", { d: "M14 3v4a1 1 0 0 0 1 1h4", stroke: "currentColor", strokeWidth: "2" })
+    )
   ] });
 }
 function TrashIcon() {
@@ -678,25 +726,29 @@ function TrashIcon() {
 
 // src/components/FileIconGrid.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
+function useIsMobile2(breakpoint = 640) {
+  const getValue = () => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
+  const [isMobile, setIsMobile] = useState3(getValue);
+  useEffect2(() => {
+    const onResize = () => setIsMobile(getValue());
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [breakpoint]);
+  return isMobile;
+}
 function FileIconGrid(props) {
-  const {
-    files,
-    deleteDisabled,
-    onDeleted,
-    selectedId,
-    onSelect,
-    icon,
-    iconHtml,
-    className
-  } = props;
+  const { files, deleteDisabled, onDeleted, selectedId, onSelect, className } = props;
+  const isMobile = useIsMobile2();
   return /* @__PURE__ */ jsx3(
     "div",
     {
       className,
       style: {
         display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-        gap: 12
+        gridTemplateColumns: isMobile ? "minmax(0, 1fr)" : "repeat(auto-fill, minmax(280px, 1fr))",
+        gap: 12,
+        width: "100%",
+        minWidth: 0
       },
       children: files.map((f) => /* @__PURE__ */ jsx3(
         FileIconCard,
@@ -705,9 +757,7 @@ function FileIconGrid(props) {
           deleteDisabled,
           onDeleteFile: onDeleted,
           onSelect,
-          selected: selectedId === f.Id,
-          icon,
-          iconHtml
+          selected: selectedId === f.Id
         },
         f.Id
       ))
@@ -717,6 +767,16 @@ function FileIconGrid(props) {
 
 // src/components/ContainerIdGridPanel.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function useIsMobile3(breakpoint = 640) {
+  const getValue = () => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
+  const [isMobile, setIsMobile] = useState4(getValue);
+  useEffect3(() => {
+    const onResize = () => setIsMobile(getValue());
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [breakpoint]);
+  return isMobile;
+}
 function ContainerIdGridPanel(props) {
   const {
     containerApiBaseUrl,
@@ -727,30 +787,29 @@ function ContainerIdGridPanel(props) {
     multiple = true,
     selectedId,
     onSelect,
-    icon,
-    iconHtml,
     deleteDisabled,
     className,
     onDeleted
   } = props;
-  const sdkDb = useMemo2(
+  const isMobile = useIsMobile3();
+  const sdkDb = useMemo(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
     [containerApiBaseUrl]
   );
-  const sdkS3 = useMemo2(
+  const sdkS3 = useMemo(
     () => new SparkStudioStorageSDK(storageApiBaseUrl),
     [storageApiBaseUrl]
   );
-  const [loading, setLoading] = useState3(false);
-  const [files, setFiles] = useState3([]);
-  const [dragOver, setDragOver] = useState3(false);
-  const [errMsg, setErrMsg] = useState3(null);
+  const [loading, setLoading] = useState4(false);
+  const [files, setFiles] = useState4([]);
+  const [dragOver, setDragOver] = useState4(false);
+  const [errMsg, setErrMsg] = useState4(null);
   const idsRef = useRef(containerIds);
-  useEffect(() => {
+  useEffect3(() => {
     idsRef.current = containerIds;
   }, [containerIds]);
   const createdByFileRef = useRef(/* @__PURE__ */ new WeakMap());
-  useEffect(() => {
+  useEffect3(() => {
     let cancelled = false;
     async function loadByIds(ids) {
       setErrMsg(null);
@@ -773,12 +832,11 @@ function ContainerIdGridPanel(props) {
         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)
-        );
+        setFiles(ids.map((id) => map.get(id)).filter(Boolean));
       } catch (e) {
-        if (!cancelled)
+        if (!cancelled) {
           setErrMsg(e instanceof Error ? e.message : "Failed to load files");
+        }
       } finally {
         if (!cancelled) setLoading(false);
       }
@@ -865,106 +923,149 @@ function ContainerIdGridPanel(props) {
     if (!list || list.length === 0) return;
     startUploadsIfNeeded(list);
   };
-  return /* @__PURE__ */ jsxs3("div", { className, style: { display: "grid", gap: 12 }, children: [
-    /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4(UploadProgressList, { uploads }),
-      errMsg ? /* @__PURE__ */ jsx4("div", { style: { fontSize: 12, color: "crimson", marginTop: 6 }, children: errMsg }) : null
-    ] }),
-    /* @__PURE__ */ jsxs3(
-      "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__ */ jsx4(
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: {
+        display: "grid",
+        gap: 12,
+        width: "100%",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs3("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx4(UploadProgressList, { uploads }),
+          errMsg ? /* @__PURE__ */ jsx4(
             "div",
             {
               style: {
-                position: "absolute",
-                inset: 0,
-                borderRadius: 14,
-                display: "grid",
-                placeItems: "center",
-                pointerEvents: "none",
-                background: "rgba(13,110,253,0.10)",
-                fontWeight: 800
+                fontSize: 12,
+                color: "crimson",
+                marginTop: 6,
+                wordBreak: "break-word"
               },
-              children: "Drop files to upload"
+              children: errMsg
             }
-          ) : null,
-          /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                marginBottom: 10
-              },
-              children: [
-                /* @__PURE__ */ jsx4("div", { style: { fontWeight: 700 }, children: "Files" }),
-                /* @__PURE__ */ jsx4(
-                  "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__ */ jsx4(
-            "div",
-            {
-              className: "d-flex justify-content-center align-items-center",
-              style: { minHeight: 120 },
-              children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status" })
-            }
-          ) : /* @__PURE__ */ jsx4(
-            FileIconGrid,
-            {
-              files,
-              deleteDisabled,
-              onDeleted: handleDelete,
-              selectedId,
-              onSelect,
-              icon,
-              iconHtml
-            }
-          )
-        ]
-      }
-    )
-  ] });
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs3(
+          "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: isMobile ? 10 : 12,
+              width: "100%",
+              minWidth: 0,
+              overflow: "hidden",
+              boxSizing: "border-box"
+            },
+            children: [
+              dragOver ? /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 14,
+                    display: "grid",
+                    placeItems: "center",
+                    pointerEvents: "none",
+                    background: "rgba(13,110,253,0.10)",
+                    fontWeight: 800,
+                    textAlign: "center",
+                    padding: 12
+                  },
+                  children: "Drop files to upload"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: isMobile ? "column" : "row",
+                    alignItems: isMobile ? "stretch" : "center",
+                    justifyContent: "space-between",
+                    gap: 10,
+                    marginBottom: 10,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        style: {
+                          fontWeight: 700,
+                          minWidth: 0
+                        },
+                        children: "Files"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: openPicker,
+                        style: {
+                          border: "1px solid rgba(0,0,0,0.18)",
+                          background: "white",
+                          borderRadius: 10,
+                          padding: isMobile ? "10px 12px" : "8px 10px",
+                          cursor: "pointer",
+                          fontWeight: 600,
+                          width: isMobile ? "100%" : "auto",
+                          maxWidth: "100%",
+                          boxSizing: "border-box"
+                        },
+                        children: "Browse\u2026"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { style: { width: "100%", minWidth: 0, overflow: "hidden" }, children: loading ? /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: "d-flex justify-content-center align-items-center",
+                  style: { minHeight: 120 },
+                  children: /* @__PURE__ */ jsx4("div", { className: "spinner-border text-secondary", role: "status" })
+                }
+              ) : /* @__PURE__ */ jsx4(
+                FileIconGrid,
+                {
+                  files,
+                  deleteDisabled,
+                  onDeleted: handleDelete,
+                  selectedId,
+                  onSelect
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/ContainerUploadPanel.tsx
@@ -974,9 +1075,9 @@ import "react";
 import {
   forwardRef,
   useImperativeHandle,
-  useMemo as useMemo3,
+  useMemo as useMemo2,
   useRef as useRef3,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/components/UploadDropzone.tsx
@@ -1032,8 +1133,8 @@ import {
   faFileCode
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function getFileExtension(name) {
   if (!name) return null;
   const lastDot = name.lastIndexOf(".");
@@ -1112,11 +1213,11 @@ var DesktopFileIcon = ({
   onOpen,
   onDelete
 }) => {
-  const [contextMenuPos, setContextMenuPos] = useState4(
+  const [contextMenuPos, setContextMenuPos] = useState5(
     null
   );
-  const [isHovered, setIsHovered] = useState4(false);
-  const [isDeleting, setIsDeleting] = useState4(false);
+  const [isHovered, setIsHovered] = useState5(false);
+  const [isDeleting, setIsDeleting] = useState5(false);
   const iconRef = useRef2(null);
   const menuRef = useRef2(null);
   const handleDoubleClick = () => {
@@ -1176,7 +1277,7 @@ var DesktopFileIcon = ({
   const formattedSize = typeof sizeBytes === "number" ? `${(sizeBytes / 1024).toFixed(1)} KB` : void 0;
   const ext = getFileExtension(name);
   const iconToRender = getIconForExtension(ext);
-  useEffect2(() => {
+  useEffect4(() => {
     if (!contextMenuPos) return;
     const handleGlobalClick = (e) => {
       const target = e.target;
@@ -1193,7 +1294,7 @@ var DesktopFileIcon = ({
       document.removeEventListener("mousedown", handleGlobalClick);
     };
   }, [contextMenuPos]);
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -1284,7 +1385,7 @@ var DesktopFileIcon = ({
 };
 
 // src/components/UploadContainer.tsx
-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 filesToFileList(files) {
   const dt = new DataTransfer();
   for (const f of files) dt.items.add(f);
@@ -1304,8 +1405,8 @@ var UploadContainer = forwardRef(
     onUploadComplete,
     onUploadError
   }, ref) => {
-    const [isDragging, setIsDragging] = useState5(false);
-    const inputId = useMemo3(() => `filePicker_${crypto.randomUUID()}`, []);
+    const [isDragging, setIsDragging] = useState6(false);
+    const inputId = useMemo2(() => `filePicker_${crypto.randomUUID()}`, []);
     const inputRef = useRef3(null);
     const { uploads, startUploadsIfNeeded } = UseUploadManager({
       autoUpload,
@@ -1356,7 +1457,7 @@ var UploadContainer = forwardRef(
       a.click();
       document.body.removeChild(a);
     };
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
       /* @__PURE__ */ jsxs5("div", { className: "w-100", children: [
         /* @__PURE__ */ jsx7(
           "input",
@@ -1438,11 +1539,11 @@ var UploadContainer = forwardRef(
 UploadContainer.displayName = "UploadContainer";
 
 // src/hooks/UseContainers.ts
-import { useEffect as useEffect3, useState as useState6 } from "react";
+import { useEffect as useEffect5, useState as useState7 } from "react";
 function UseContainers({ apiBaseUrl, parentId }) {
-  const [containers, setContainers] = useState6([]);
-  const [loading, setLoading] = useState6(false);
-  const [error, setError] = useState6(null);
+  const [containers, setContainers] = useState7([]);
+  const [loading, setLoading] = useState7(false);
+  const [error, setError] = useState7(null);
   const load = async () => {
     setLoading(true);
     setError(null);
@@ -1458,7 +1559,7 @@ function UseContainers({ apiBaseUrl, parentId }) {
       setLoading(false);
     }
   };
-  useEffect3(() => {
+  useEffect5(() => {
     void load();
   }, [apiBaseUrl, parentId]);
   return {
@@ -1548,7 +1649,7 @@ var ContainerUploadPanel = ({
 };
 
 // src/components/FileGridUploadPanel.tsx
-import { useMemo as useMemo4, useState as useState7 } from "react";
+import { useMemo as useMemo3, useState as useState8 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function FileGridUploadPanel(props) {
   const {
@@ -1559,18 +1660,16 @@ function FileGridUploadPanel(props) {
     multiple = true,
     selectedId,
     onSelect,
-    icon,
-    iconHtml,
     deleteDisabled
   } = props;
   const { containers, setContainers, reload, loading } = UseContainers({
     apiBaseUrl: containerApiBaseUrl,
     parentId: parentContainerId
   });
-  const [isDragging, setIsDragging] = useState7(false);
-  const [error, setError] = useState7(null);
-  const sdkDb = useMemo4(() => new SparkStudioStorageSDK(containerApiBaseUrl), [containerApiBaseUrl]);
-  const sdkS3 = useMemo4(() => new SparkStudioStorageSDK(storageApiBaseUrl), [storageApiBaseUrl]);
+  const [isDragging, setIsDragging] = useState8(false);
+  const [error, setError] = useState8(null);
+  const sdkDb = useMemo3(() => new SparkStudioStorageSDK(containerApiBaseUrl), [containerApiBaseUrl]);
+  const sdkS3 = useMemo3(() => new SparkStudioStorageSDK(storageApiBaseUrl), [storageApiBaseUrl]);
   const getPresignedUrl = async (file) => {
     const contentType = file.type || "application/octet-stream";
     const containerDTO = await sdkDb.container.CreateFileContainer(
@@ -1699,9 +1798,7 @@ function FileGridUploadPanel(props) {
               deleteDisabled,
               onDeleted: handleDeleteFile,
               selectedId,
-              onSelect,
-              icon,
-              iconHtml
+              onSelect
             }
           )
         ]
@@ -1711,7 +1808,7 @@ function FileGridUploadPanel(props) {
 }
 
 // src/components/SingleFileProcessUploader.tsx
-import { useCallback as useCallback2, useRef as useRef4, useState as useState8 } from "react";
+import { useCallback as useCallback2, useRef as useRef4, useState as useState9 } from "react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var SingleFileProcessUploader = ({
   getPresignedUrl,
@@ -1721,10 +1818,10 @@ var SingleFileProcessUploader = ({
   disabled,
   uploadOnDrop = false
 }) => {
-  const [selectedFile, setSelectedFile] = useState8(null);
-  const [isDragging, setIsDragging] = useState8(false);
-  const [progress, setProgress] = useState8(null);
-  const [status, setStatus] = useState8("idle");
+  const [selectedFile, setSelectedFile] = useState9(null);
+  const [isDragging, setIsDragging] = useState9(false);
+  const [progress, setProgress] = useState9(null);
+  const [status, setStatus] = useState9("idle");
   const fileInputRef = useRef4(null);
   function getErrorMessage(err) {
     if (err instanceof Error) return err.message;
@@ -1891,8 +1988,8 @@ var SingleFileProcessUploader = ({
 };
 
 // src/components/SingleImageUploadEditor.tsx
-import { useEffect as useEffect4, useMemo as useMemo5, useRef as useRef5, useState as useState9 } from "react";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState10 } from "react";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function SingleImageUploadEditor(props) {
   const {
     containerApiBaseUrl,
@@ -1902,21 +1999,21 @@ function SingleImageUploadEditor(props) {
     height = 280,
     disabled = false
   } = props;
-  const [isDragging, setIsDragging] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [isDragging, setIsDragging] = useState10(false);
+  const [error, setError] = useState10(null);
   const pendingContainerRef = useRef5(null);
-  const [isDeleting, setIsDeleting] = useState9(false);
-  const [isLoadingImage, setIsLoadingImage] = useState9(false);
-  const [currentImage, setCurrentImage] = useState9(null);
-  const sdkDb = useMemo5(
+  const [isDeleting, setIsDeleting] = useState10(false);
+  const [isLoadingImage, setIsLoadingImage] = useState10(false);
+  const [isPickingFile, setIsPickingFile] = useState10(false);
+  const [currentImage, setCurrentImage] = useState10(null);
+  const sdkDb = useMemo4(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
     [containerApiBaseUrl]
   );
-  const sdkS3 = useMemo5(
+  const sdkS3 = useMemo4(
     () => new SparkStudioStorageSDK(storageApiBaseUrl),
     [storageApiBaseUrl]
   );
-  const busy = disabled || isDeleting || isLoadingImage;
   function logError(context, err) {
     console.error(`[SingleImageUploadEditor] ${context}`, err);
   }
@@ -1925,7 +2022,13 @@ function SingleImageUploadEditor(props) {
     setError(null);
     pendingContainerRef.current = null;
   }
-  useEffect4(() => {
+  function getErrorMessage(err, fallback) {
+    return err instanceof Error ? err.message : fallback;
+  }
+  function isImageFile(file) {
+    return file.type.startsWith("image/");
+  }
+  useEffect6(() => {
     let cancelled = false;
     async function loadImage() {
       if (!value) {
@@ -1957,12 +2060,6 @@ function SingleImageUploadEditor(props) {
       cancelled = true;
     };
   }, [value, sdkDb]);
-  function getErrorMessage(err, fallback) {
-    return err instanceof Error ? err.message : fallback;
-  }
-  function isImageFile(file) {
-    return file.type.startsWith("image/");
-  }
   async function createContainerForFile(file) {
     const contentType = file.type || "application/octet-stream";
     return sdkDb.container.CreateFileContainer(
@@ -2003,6 +2100,7 @@ function SingleImageUploadEditor(props) {
         onChange?.(uploaded.Id);
       }
       pendingContainerRef.current = null;
+      setIsPickingFile(false);
     },
     onUploadError: async (_file, err) => {
       const pending = pendingContainerRef.current;
@@ -2010,10 +2108,14 @@ function SingleImageUploadEditor(props) {
         try {
           await sdkDb.container.DeleteContainer(pending.Id);
         } catch (cleanupErr) {
-          logError("Failed to cleanup pending container after upload error", cleanupErr);
+          logError(
+            "Failed to cleanup pending container after upload error",
+            cleanupErr
+          );
         }
       }
       pendingContainerRef.current = null;
+      setIsPickingFile(false);
       logError("Upload failed", err);
       setCurrentImage(null);
       setError(getErrorMessage(err, "Upload failed"));
@@ -2021,7 +2123,10 @@ function SingleImageUploadEditor(props) {
   });
   const visibleUploads = uploads.filter((u) => u.status !== "success");
   const activeUpload = visibleUploads[0];
+  const isUploading = !!activeUpload;
   const showBottomProgress = !!activeUpload;
+  const busy = disabled || isDeleting || isLoadingImage || isPickingFile || isUploading;
+  const busyText = isUploading ? "Uploading..." : isDeleting ? "Removing..." : isLoadingImage ? "Loading..." : isPickingFile ? "Preparing..." : "";
   async function replaceWithFile(file) {
     if (busy) {
       return;
@@ -2032,12 +2137,15 @@ function SingleImageUploadEditor(props) {
     }
     try {
       setError(null);
+      setIsPickingFile(true);
       if (value) {
         setIsDeleting(true);
         try {
           await deleteContainerFile(value);
         } catch (err) {
           logError(`Failed to delete existing container '${String(value)}'`, err);
+        } finally {
+          setIsDeleting(false);
         }
         setCurrentImage(null);
         onChange?.(null);
@@ -2049,7 +2157,7 @@ function SingleImageUploadEditor(props) {
       logError("Failed to replace image", err);
       resetState();
       setError(getErrorMessage(err, "Failed to replace image."));
-    } finally {
+      setIsPickingFile(false);
       setIsDeleting(false);
     }
   }
@@ -2091,6 +2199,29 @@ function SingleImageUploadEditor(props) {
       setIsDeleting(false);
     }
   }
+  function SpinnerLabel(props2) {
+    return /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsx11(
+            "span",
+            {
+              className: "spinner-border spinner-border-sm",
+              role: "status",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx11("span", { children: props2.text })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs8("div", { style: { display: "grid", gap: 8 }, children: [
     error ? /* @__PURE__ */ jsx11("div", { style: { fontSize: 12, color: "crimson" }, children: error }) : null,
     /* @__PURE__ */ jsxs8(
@@ -2155,7 +2286,7 @@ function SingleImageUploadEditor(props) {
               children: "Drop image to replace"
             }
           ) : null,
-          currentImage ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          currentImage ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
             /* @__PURE__ */ jsx11(
               "div",
               {
@@ -2176,7 +2307,9 @@ function SingleImageUploadEditor(props) {
                       width: "100%",
                       height,
                       objectFit: "contain",
-                      background: "rgba(0,0,0,0.02)"
+                      background: "rgba(0,0,0,0.02)",
+                      opacity: busy ? 0.45 : 1,
+                      transition: "opacity 120ms ease"
                     }
                   }
                 )
@@ -2207,9 +2340,10 @@ function SingleImageUploadEditor(props) {
                         padding: "8px 10px",
                         cursor: busy ? "not-allowed" : "pointer",
                         fontWeight: 600,
-                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+                        minWidth: 110
                       },
-                      children: "Browse\u2026"
+                      children: isUploading || isPickingFile ? /* @__PURE__ */ jsx11(SpinnerLabel, { text: "Uploading..." }) : "Browse\u2026"
                     }
                   ),
                   /* @__PURE__ */ jsx11(
@@ -2226,9 +2360,10 @@ function SingleImageUploadEditor(props) {
                         padding: "8px 10px",
                         cursor: busy ? "not-allowed" : "pointer",
                         fontWeight: 600,
-                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.08)",
+                        minWidth: 110
                       },
-                      children: "Remove"
+                      children: isDeleting ? /* @__PURE__ */ jsx11(SpinnerLabel, { text: "Removing..." }) : "Remove"
                     }
                   )
                 ]
@@ -2268,17 +2403,59 @@ function SingleImageUploadEditor(props) {
                           borderRadius: 10,
                           padding: "10px 16px",
                           cursor: busy ? "not-allowed" : "pointer",
-                          fontWeight: 600
+                          fontWeight: 600,
+                          minWidth: 140
                         },
-                        children: "Browse\u2026"
+                        children: isUploading || isPickingFile ? /* @__PURE__ */ jsx11(SpinnerLabel, { text: "Uploading..." }) : isLoadingImage ? /* @__PURE__ */ jsx11(SpinnerLabel, { text: "Loading..." }) : "Browse\u2026"
                       }
                     ),
-                    /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, opacity: 0.7 }, children: "Drag and drop an image here" })
+                    /* @__PURE__ */ jsx11("div", { style: { fontSize: 13, opacity: 0.7 }, children: busyText || "Drag and drop an image here" })
                   ]
                 }
               )
             }
           ),
+          busy ? /* @__PURE__ */ jsx11(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "grid",
+                placeItems: "center",
+                background: "rgba(255,255,255,0.55)",
+                backdropFilter: "blur(1px)",
+                zIndex: 5
+              },
+              children: /* @__PURE__ */ jsxs8(
+                "div",
+                {
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 10,
+                    background: "white",
+                    border: "1px solid rgba(0,0,0,0.08)",
+                    borderRadius: 12,
+                    padding: "10px 14px",
+                    boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+                    fontWeight: 600
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx11(
+                      "span",
+                      {
+                        className: "spinner-border spinner-border-sm",
+                        role: "status",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11("span", { children: busyText || "Working..." })
+                  ]
+                }
+              )
+            }
+          ) : null,
           showBottomProgress ? /* @__PURE__ */ jsx11(
             "div",
             {
@@ -2289,7 +2466,7 @@ function SingleImageUploadEditor(props) {
                 bottom: 0,
                 height: 4,
                 background: "rgba(0,0,0,0.08)",
-                zIndex: 4
+                zIndex: 6
               },
               title: activeUpload.file.name,
               children: /* @__PURE__ */ jsx11(
@@ -2316,17 +2493,17 @@ function SingleImageUploadEditor(props) {
 }
 
 // src/components/SingleImageView.tsx
-import { useEffect as useEffect5, useMemo as useMemo6, useState as useState10 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useState as useState11 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function SingleImageView(props) {
   const { containerApiBaseUrl, value, height = 280, onLoaded } = props;
-  const [imageUrl, setImageUrl] = useState10(null);
-  const [loading, setLoading] = useState10(false);
-  const sdk = useMemo6(
+  const [imageUrl, setImageUrl] = useState11(null);
+  const [loading, setLoading] = useState11(false);
+  const sdk = useMemo5(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
     [containerApiBaseUrl]
   );
-  useEffect5(() => {
+  useEffect7(() => {
     let cancelled = false;
     async function load() {
       if (!value) {
@@ -2394,21 +2571,21 @@ function SingleImageView(props) {
             style: { position: "absolute" }
           }
         ) : null,
-        !loading && !imageUrl ? /* @__PURE__ */ jsx12("div", { style: { fontSize: 13, opacity: 0.6 }, children: "No image" }) : null
+        !loading && !imageUrl ? /* @__PURE__ */ jsx12("div", { style: { fontSize: 13, opacity: 0.6 } }) : null
       ]
     }
   );
 }
 
 // src/views/HomeView.tsx
-import { useEffect as useEffect6, useState as useState11 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
 import {
   AppSettings,
   AuthenticatorProvider,
   UserInfoCard,
   useUser
 } from "@sparkstudio/authentication-ui";
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs10 } from "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() {
@@ -2424,10 +2601,10 @@ function HomeView() {
 }
 function HomeContent() {
   const { user } = useUser();
-  const [ids, setIds] = useState11([]);
-  const [selectedId, setSelectedId] = useState11(void 0);
-  const [selectedFile, setSelectedFile] = useState11(null);
-  useEffect6(() => {
+  const [ids, setIds] = useState12([]);
+  const [selectedId, setSelectedId] = useState12(void 0);
+  const [selectedFile, setSelectedFile] = useState12(null);
+  useEffect8(() => {
     if (selectedId && !ids.includes(selectedId)) {
       setSelectedId(void 0);
       setSelectedFile(null);
@@ -2440,9 +2617,9 @@ function HomeContent() {
       new TemporaryFileDTO({ Name: file.name, ContentType: contentType })
     );
   }
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
     /* @__PURE__ */ jsx13(UserInfoCard, {}),
-    user ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    user ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
       /* @__PURE__ */ jsx13(
         SingleFileProcessUploader,
         {