@gallop.software/studio 1.5.4 → 1.5.6

package/dist/{StudioUI-NLB3VZAZ.mjs → StudioUI-PERXOBGO.mjs}

@@ -1752,6 +1752,8 @@ function StudioToolbar() {
   const [syncImageCount, setSyncImageCount] = useState4(0);
   const [syncHasRemote, setSyncHasRemote] = useState4(false);
   const [syncHasLocal, setSyncHasLocal] = useState4(false);
+  const [showDownloadConfirm, setShowDownloadConfirm] = useState4(false);
+  const [downloadImageCount, setDownloadImageCount] = useState4(0);
   const [showProgress, setShowProgress] = useState4(false);
   const [progressTitle, setProgressTitle] = useState4("Processing Images");
   const [progressState, setProgressState] = useState4({
@@ -2231,6 +2233,106 @@ function StudioToolbar() {
       });
     }
   }, [selectedItems, clearSelection, triggerRefresh]);
+  const handleDownloadClick = useCallback2(async () => {
+    if (selectedItems.size === 0) return;
+    const selectedPaths2 = Array.from(selectedItems);
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
+    const selectedImagePaths = selectedPaths2.filter((p) => {
+      const ext = p.split(".").pop()?.toLowerCase() || "";
+      return imageExtensions.includes(ext);
+    });
+    if (selectedImagePaths.length === 0) {
+      setAlertMessage({
+        title: "No Images Found",
+        message: "No images found in the selected items."
+      });
+      return;
+    }
+    setDownloadImageCount(selectedImagePaths.length);
+    setShowDownloadConfirm(true);
+  }, [selectedItems]);
+  const handleDownloadConfirm = useCallback2(async () => {
+    setShowDownloadConfirm(false);
+    const selectedPaths2 = Array.from(selectedItems);
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
+    const selectedImagePaths = selectedPaths2.filter((p) => {
+      const ext = p.split(".").pop()?.toLowerCase() || "";
+      return imageExtensions.includes(ext);
+    });
+    const imageKeys = selectedImagePaths.map((p) => "/" + p.replace(/^public\//, ""));
+    setProgressTitle("Downloading from CDN");
+    setShowProgress(true);
+    setProgressState({
+      current: 0,
+      total: imageKeys.length,
+      percent: 0,
+      status: "processing"
+    });
+    try {
+      const response = await fetch("/api/studio/download-stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageKeys })
+      });
+      if (!response.ok || !response.body) {
+        throw new Error("Download request failed");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (line.startsWith("data: ")) {
+            try {
+              const data = JSON.parse(line.slice(6));
+              if (data.type === "progress") {
+                setProgressState({
+                  current: data.current,
+                  total: data.total,
+                  percent: Math.round(data.current / data.total * 100),
+                  status: "processing",
+                  message: data.message
+                });
+              } else if (data.type === "complete") {
+                setProgressState({
+                  current: data.total || imageKeys.length,
+                  total: data.total || imageKeys.length,
+                  percent: 100,
+                  status: "complete",
+                  message: data.message
+                });
+              } else if (data.type === "error") {
+                setProgressState({
+                  current: 0,
+                  total: 0,
+                  percent: 0,
+                  status: "error",
+                  message: data.message
+                });
+              }
+            } catch {
+            }
+          }
+        }
+      }
+      clearSelection();
+      triggerRefresh();
+    } catch (error) {
+      console.error("Download error:", error);
+      setProgressState({
+        current: 0,
+        total: 0,
+        percent: 0,
+        status: "error",
+        message: "Failed to download from CDN."
+      });
+    }
+  }, [selectedItems, clearSelection, triggerRefresh]);
   const handleCreateFolder = useCallback2(async (folderName) => {
     setShowNewFolderModal(false);
     try {
@@ -2349,6 +2451,10 @@ function StudioToolbar() {
     const item = fileItems.find((f) => f.path === path);
     return item && item.cdnPushed && !item.isRemote;
   });
+  const allR2Selection = hasSelection && Array.from(selectedItems).every((path) => {
+    const item = fileItems.find((f) => f.path === path);
+    return item && item.type === "file" && item.cdnPushed && !item.isRemote;
+  });
   const selectedPaths = Array.from(selectedItems);
   const singleFolderSelected = selectedPaths.length === 1 && !selectedPaths[0].includes(".");
   const selectedFolderPath = singleFolderSelected ? selectedPaths[0] : null;
@@ -2395,6 +2501,16 @@ function StudioToolbar() {
         onCancel: () => setShowSyncConfirm(false)
       }
     ),
+    showDownloadConfirm && /* @__PURE__ */ jsx5(
+      ConfirmModal,
+      {
+        title: "Download from CDN",
+        message: `Download ${downloadImageCount} image${downloadImageCount !== 1 ? "s" : ""} from Cloudflare R2 to local storage? Images will be removed from the CDN.`,
+        confirmLabel: "Download",
+        onConfirm: handleDownloadConfirm,
+        onCancel: () => setShowDownloadConfirm(false)
+      }
+    ),
     showProgress && /* @__PURE__ */ jsx5(
       ProgressModal,
       {
@@ -2550,7 +2666,18 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        allR2Selection ? /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            css: styles5.btn,
+            onClick: handleDownloadClick,
+            disabled: !hasSelection,
+            children: [
+              /* @__PURE__ */ jsx5(CloudDownloadIcon, {}),
+              "Download"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs5(
           "button",
           {
             css: styles5.btn,
@@ -2649,6 +2776,9 @@ function MoveIcon() {
 function CloudIcon() {
   return /* @__PURE__ */ jsx5("svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
 }
+function CloudDownloadIcon() {
+  return /* @__PURE__ */ jsx5("svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" }) });
+}
 function GridIcon() {
   return /* @__PURE__ */ jsx5("svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" }) });
 }
@@ -3163,11 +3293,18 @@ var styles6 = {
   storedLabel: css6`
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: ${fontSize.xs};
-    color: #f59e0b;
     margin: 2px 0 0 0;
   `,
+  storedIconCloud: css6`
+    width: 16px;
+    height: 16px;
+    color: #f59e0b;
+  `,
+  storedIconRemote: css6`
+    width: 16px;
+    height: 16px;
+    color: #ef4444;
+  `,
   globeIcon: css6`
     width: 18px;
     height: 18px;
@@ -3454,10 +3591,7 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
               item.fileCount,
               " files"
             ] })
-          ] }) : item.cdnPushed ? /* @__PURE__ */ jsxs6("p", { css: styles6.storedLabel, children: [
-            /* @__PURE__ */ jsx6("svg", { css: item.isRemote ? styles6.folderStatIconRemote : styles6.folderStatIconCloud, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: item.isRemote ? /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) : /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }),
-            "stored"
-          ] }) : item.size !== void 0 && /* @__PURE__ */ jsx6("p", { css: styles6.size, children: formatFileSize(item.size) })
+          ] }) : item.cdnPushed ? /* @__PURE__ */ jsx6("p", { css: styles6.storedLabel, children: /* @__PURE__ */ jsx6("svg", { css: item.isRemote ? styles6.storedIconRemote : styles6.storedIconCloud, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: item.isRemote ? /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) : /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }) }) : item.size !== void 0 && /* @__PURE__ */ jsx6("p", { css: styles6.size, children: formatFileSize(item.size) })
         ] }) }) })
       ]
     }
@@ -3697,10 +3831,17 @@ var styles7 = {
   storedLabel: css7`
     display: flex;
     align-items: center;
-    gap: 4px;
-    font-size: ${fontSize.xs};
+  `,
+  storedIconCloud: css7`
+    width: 16px;
+    height: 16px;
     color: #f59e0b;
   `,
+  storedIconRemote: css7`
+    width: 16px;
+    height: 16px;
+    color: #ef4444;
+  `,
   globeIcon: css7`
     width: 16px;
     height: 16px;
@@ -4057,10 +4198,7 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
             " files"
           ] }),
           !item.localCount && !item.cloudCount && !item.remoteCount && item.fileCount === void 0 && "--"
-        ] }) : item.cdnPushed ? /* @__PURE__ */ jsxs7("span", { css: styles7.storedLabel, children: [
-          /* @__PURE__ */ jsx7("svg", { css: item.isRemote ? styles7.folderStatIconRemote : styles7.folderStatIconCloud, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: item.isRemote ? /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) : /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }),
-          "stored"
-        ] }) : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+        ] }) : item.cdnPushed ? /* @__PURE__ */ jsx7("span", { css: styles7.storedLabel, children: /* @__PURE__ */ jsx7("svg", { css: item.isRemote ? styles7.storedIconRemote : styles7.storedIconCloud, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: item.isRemote ? /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" }) : /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }) }) : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
         /* @__PURE__ */ jsx7("td", { css: [styles7.td, styles7.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
         /* @__PURE__ */ jsx7("td", { css: styles7.td, children: item.cdnPushed ? item.isRemote ? /* @__PURE__ */ jsx7("span", { css: styles7.cdnBadgeRemote, children: "Remote" }) : /* @__PURE__ */ jsxs7("span", { css: styles7.cdnBadge, children: [
           /* @__PURE__ */ jsx7("svg", { css: styles7.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx7("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
@@ -6344,4 +6482,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-NLB3VZAZ.mjs.map
+//# sourceMappingURL=StudioUI-PERXOBGO.mjs.map