@sparkstudio/storage-ui 1.0.34 → 1.0.35

package/dist/index.cjs

@@ -521,8 +521,15 @@ 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, "");
+function useIsMobile(breakpoint = 640) {
+  const getValue = () => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
+  const [isMobile, setIsMobile] = (0, import_react3.useState)(getValue);
+  (0, import_react3.useEffect)(() => {
+    const onResize = () => setIsMobile(getValue());
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [breakpoint]);
+  return isMobile;
 }
 var FileIconCard = (props) => {
   const {
@@ -532,17 +539,12 @@ var FileIconCard = (props) => {
     onSelect,
     onDeleteFile,
     onClickFile,
-    icon,
-    iconHtml,
     title,
     className
   } = props;
+  const isMobile = useIsMobile();
   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);
@@ -584,69 +586,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__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
           "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__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": true, dangerouslySetInnerHTML: { __html: safeIconHtml } }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultFileIcon, {})
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                "div",
+                {
+                  style: {
+                    minWidth: 0,
+                    flex: "1 1 auto",
+                    overflow: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "div",
+                      {
+                        style: {
+                          fontWeight: 700,
+                          fontSize: isMobile ? 15 : 14,
+                          lineHeight: 1.2,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: title ?? file.Name ?? "Untitled"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "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__ */ (0, import_jsx_runtime2.jsxs)(
+                "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__ */ (0, import_jsx_runtime2.jsx)(SmallSpinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TrashIcon, {}),
+                    !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 14, fontWeight: 600 }, children: deleting ? "Deleting\u2026" : "Delete" }) : null
+                  ]
+                }
+              ) : null
+            ]
           }
         ),
-        /* @__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",
+        error ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (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" })
-            ]
+            children: error
           }
         ) : null
       ]
@@ -665,33 +713,33 @@ function formatBytes(bytes) {
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+          @keyframes fileIconSpin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "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__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M14 3v4a1 1 0 0 0 1 1h4", stroke: "currentColor", strokeWidth: "2" })
+    )
   ] });
 }
 function TrashIcon() {
@@ -727,25 +775,29 @@ function TrashIcon() {
 
 // src/components/FileIconGrid.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function useIsMobile2(breakpoint = 640) {
+  const getValue = () => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
+  const [isMobile, setIsMobile] = (0, import_react4.useState)(getValue);
+  (0, import_react4.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime3.jsx)(
     "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__ */ (0, import_jsx_runtime3.jsx)(
         FileIconCard,
@@ -754,9 +806,7 @@ function FileIconGrid(props) {
           deleteDisabled,
           onDeleteFile: onDeleted,
           onSelect,
-          selected: selectedId === f.Id,
-          icon,
-          iconHtml
+          selected: selectedId === f.Id
         },
         f.Id
       ))
@@ -766,6 +816,16 @@ function FileIconGrid(props) {
 
 // src/components/ContainerIdGridPanel.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+function useIsMobile3(breakpoint = 640) {
+  const getValue = () => typeof window !== "undefined" ? window.innerWidth <= breakpoint : false;
+  const [isMobile, setIsMobile] = (0, import_react5.useState)(getValue);
+  (0, import_react5.useEffect)(() => {
+    const onResize = () => setIsMobile(getValue());
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [breakpoint]);
+  return isMobile;
+}
 function ContainerIdGridPanel(props) {
   const {
     containerApiBaseUrl,
@@ -776,12 +836,11 @@ function ContainerIdGridPanel(props) {
     multiple = true,
     selectedId,
     onSelect,
-    icon,
-    iconHtml,
     deleteDisabled,
     className,
     onDeleted
   } = props;
+  const isMobile = useIsMobile3();
   const sdkDb = (0, import_react5.useMemo)(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
     [containerApiBaseUrl]
@@ -822,12 +881,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);
       }
@@ -914,106 +972,149 @@ function ContainerIdGridPanel(props) {
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        display: "grid",
+        gap: 12,
+        width: "100%",
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UploadProgressList, { uploads }),
+          errMsg ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               style: {
-                display: "flex",
-                justifyContent: "space-between",
-                marginBottom: 10
+                fontSize: 12,
+                color: "crimson",
+                marginTop: 6,
+                wordBreak: "break-word"
               },
-              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"
-                  }
-                )
-              ]
+              children: errMsg
             }
-          ),
-          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
-            }
-          )
-        ]
-      }
-    )
-  ] });
+          ) : 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: isMobile ? 10 : 12,
+              width: "100%",
+              minWidth: 0,
+              overflow: "hidden",
+              boxSizing: "border-box"
+            },
+            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,
+                    textAlign: "center",
+                    padding: 12
+                  },
+                  children: "Drop files to upload"
+                }
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: isMobile ? "column" : "row",
+                    alignItems: isMobile ? "stretch" : "center",
+                    justifyContent: "space-between",
+                    gap: 10,
+                    marginBottom: 10,
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      "div",
+                      {
+                        style: {
+                          fontWeight: 700,
+                          minWidth: 0
+                        },
+                        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: isMobile ? "10px 12px" : "8px 10px",
+                          cursor: "pointer",
+                          fontWeight: 600,
+                          width: isMobile ? "100%" : "auto",
+                          maxWidth: "100%",
+                          boxSizing: "border-box"
+                        },
+                        children: "Browse\u2026"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: "100%", minWidth: 0, overflow: "hidden" }, children: 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
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/ContainerUploadPanel.tsx
@@ -1592,8 +1693,6 @@ function FileGridUploadPanel(props) {
     multiple = true,
     selectedId,
     onSelect,
-    icon,
-    iconHtml,
     deleteDisabled
   } = props;
   const { containers, setContainers, reload, loading } = UseContainers({
@@ -1732,9 +1831,7 @@ function FileGridUploadPanel(props) {
               deleteDisabled,
               onDeleted: handleDeleteFile,
               selectedId,
-              onSelect,
-              icon,
-              iconHtml
+              onSelect
             }
           )
         ]
@@ -1940,6 +2037,7 @@ function SingleImageUploadEditor(props) {
   const pendingContainerRef = (0, import_react13.useRef)(null);
   const [isDeleting, setIsDeleting] = (0, import_react13.useState)(false);
   const [isLoadingImage, setIsLoadingImage] = (0, import_react13.useState)(false);
+  const [isPickingFile, setIsPickingFile] = (0, import_react13.useState)(false);
   const [currentImage, setCurrentImage] = (0, import_react13.useState)(null);
   const sdkDb = (0, import_react13.useMemo)(
     () => new SparkStudioStorageSDK(containerApiBaseUrl),
@@ -1949,7 +2047,6 @@ function SingleImageUploadEditor(props) {
     () => new SparkStudioStorageSDK(storageApiBaseUrl),
     [storageApiBaseUrl]
   );
-  const busy = disabled || isDeleting || isLoadingImage;
   function logError(context, err) {
     console.error(`[SingleImageUploadEditor] ${context}`, err);
   }
@@ -1958,6 +2055,12 @@ function SingleImageUploadEditor(props) {
     setError(null);
     pendingContainerRef.current = null;
   }
+  function getErrorMessage(err, fallback) {
+    return err instanceof Error ? err.message : fallback;
+  }
+  function isImageFile(file) {
+    return file.type.startsWith("image/");
+  }
   (0, import_react13.useEffect)(() => {
     let cancelled = false;
     async function loadImage() {
@@ -1990,12 +2093,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(
@@ -2036,6 +2133,7 @@ function SingleImageUploadEditor(props) {
         onChange?.(uploaded.Id);
       }
       pendingContainerRef.current = null;
+      setIsPickingFile(false);
     },
     onUploadError: async (_file, err) => {
       const pending = pendingContainerRef.current;
@@ -2043,10 +2141,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"));
@@ -2054,7 +2156,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;
@@ -2065,12 +2170,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);
@@ -2082,7 +2190,7 @@ function SingleImageUploadEditor(props) {
       logError("Failed to replace image", err);
       resetState();
       setError(getErrorMessage(err, "Failed to replace image."));
-    } finally {
+      setIsPickingFile(false);
       setIsDeleting(false);
     }
   }
@@ -2124,6 +2232,29 @@ function SingleImageUploadEditor(props) {
       setIsDeleting(false);
     }
   }
+  function SpinnerLabel(props2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              className: "spinner-border spinner-border-sm",
+              role: "status",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: props2.text })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "grid", gap: 8 }, children: [
     error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 12, color: "crimson" }, children: error }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -2209,7 +2340,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"
                     }
                   }
                 )
@@ -2240,9 +2373,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__ */ (0, import_jsx_runtime11.jsx)(SpinnerLabel, { text: "Uploading..." }) : "Browse\u2026"
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -2259,9 +2393,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__ */ (0, import_jsx_runtime11.jsx)(SpinnerLabel, { text: "Removing..." }) : "Remove"
                     }
                   )
                 ]
@@ -2301,17 +2436,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__ */ (0, import_jsx_runtime11.jsx)(SpinnerLabel, { text: "Uploading..." }) : isLoadingImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SpinnerLabel, { text: "Loading..." }) : "Browse\u2026"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 13, opacity: 0.7 }, children: "Drag and drop an image here" })
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 13, opacity: 0.7 }, children: busyText || "Drag and drop an image here" })
                   ]
                 }
               )
             }
           ),
+          busy ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "grid",
+                placeItems: "center",
+                background: "rgba(255,255,255,0.55)",
+                backdropFilter: "blur(1px)",
+                zIndex: 5
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "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__ */ (0, import_jsx_runtime11.jsx)(
+                      "span",
+                      {
+                        className: "spinner-border spinner-border-sm",
+                        role: "status",
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: busyText || "Working..." })
+                  ]
+                }
+              )
+            }
+          ) : null,
           showBottomProgress ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "div",
             {
@@ -2322,7 +2499,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__ */ (0, import_jsx_runtime11.jsx)(