@gallop.software/studio 0.1.86 → 0.1.88

package/dist/{StudioUI-PH265HCB.js → StudioUI-Y35A2T7S.js}

@@ -310,6 +310,23 @@ var progressStyles = {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+  `,
+  errorList: _react3.css`
+    margin-top: 12px;
+    padding: 12px;
+    background: #fef2f2;
+    border: 1px solid #fecaca;
+    border-radius: 6px;
+    max-height: 200px;
+    overflow-y: auto;
+  `,
+  errorItem: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
+    color: #991b1b;
+    margin: 0 0 4px;
+    &:last-child {
+      margin-bottom: 0;
+    }
   `
 };
 function ProgressModal({
@@ -331,26 +348,36 @@ function ProgressModal({
       " image",
       (_nullishCoalesce(progress.processed, () => ( progress.current))) !== 1 ? "s" : "",
       " before stopping."
-    ] }) : isComplete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles.message, children: [
-      "Processed ",
-      progress.processed,
-      " image",
-      progress.processed !== 1 ? "s" : "",
-      ".",
-      progress.orphansRemoved !== void 0 && progress.orphansRemoved > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        " Removed ",
-        progress.orphansRemoved,
-        " orphaned thumbnail",
-        progress.orphansRemoved !== 1 ? "s" : "",
-        "."
-      ] }) : null,
-      progress.errors !== void 0 && progress.errors > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        " ",
-        progress.errors,
-        " error",
-        progress.errors !== 1 ? "s" : "",
-        " occurred."
-      ] }) : null
+    ] }) : isComplete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles.message, children: [
+        "Processed ",
+        progress.processed,
+        " image",
+        progress.processed !== 1 ? "s" : "",
+        ".",
+        progress.orphansRemoved !== void 0 && progress.orphansRemoved > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          " Removed ",
+          progress.orphansRemoved,
+          " orphaned thumbnail",
+          progress.orphansRemoved !== 1 ? "s" : "",
+          "."
+        ] }) : null,
+        progress.errors !== void 0 && progress.errors > 0 ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          " ",
+          progress.errors,
+          " error",
+          progress.errors !== 1 ? "s" : "",
+          " occurred."
+        ] }) : null
+      ] }),
+      progress.errorMessages && progress.errorMessages.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: progressStyles.errorList, children: [
+        progress.errorMessages.slice(0, 10).map((msg, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: progressStyles.errorItem, children: msg }, i)),
+        progress.errorMessages.length > 10 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: progressStyles.errorItem, children: [
+          "...and ",
+          progress.errorMessages.length - 10,
+          " more"
+        ] })
+      ] })
     ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles.message, children: progress.status === "cleanup" ? "Cleaning up orphaned files..." : `Processing images...` }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: progressStyles.progressContainer, children: [
@@ -1266,6 +1293,8 @@ function StudioToolbar() {
   const [processing, setProcessing] = _react.useState.call(void 0, false);
   const [showDeleteConfirm, setShowDeleteConfirm] = _react.useState.call(void 0, false);
   const [showProcessConfirm, setShowProcessConfirm] = _react.useState.call(void 0, false);
+  const [showSyncConfirm, setShowSyncConfirm] = _react.useState.call(void 0, false);
+  const [syncImageCount, setSyncImageCount] = _react.useState.call(void 0, 0);
   const [showProgress, setShowProgress] = _react.useState.call(void 0, false);
   const [progressState, setProgressState] = _react.useState.call(void 0, {
     current: 0,
@@ -1631,7 +1660,7 @@ function StudioToolbar() {
       });
     }
   }, [selectedItems, clearSelection, triggerRefresh]);
-  const handleSyncCdn = _react.useCallback.call(void 0, async () => {
+  const handleSyncClick = _react.useCallback.call(void 0, async () => {
     if (selectedItems.size === 0) return;
     const selectedPaths2 = Array.from(selectedItems);
     const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
@@ -1656,14 +1685,42 @@ function StudioToolbar() {
         console.error("Failed to get folder images:", error);
       }
     }
-    const imageKeys = selectedImagePaths.map((p) => "/" + p.replace(/^public\//, ""));
-    if (imageKeys.length === 0) {
+    if (selectedImagePaths.length === 0) {
       setAlertMessage({
         title: "No Images Found",
         message: "No images found in the selected items."
       });
       return;
     }
+    setSyncImageCount(selectedImagePaths.length);
+    setShowSyncConfirm(true);
+  }, [selectedItems]);
+  const handleSyncConfirm = _react.useCallback.call(void 0, async () => {
+    setShowSyncConfirm(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 = _optionalChain([p, 'access', _25 => _25.split, 'call', _26 => _26("."), 'access', _27 => _27.pop, 'call', _28 => _28(), 'optionalAccess', _29 => _29.toLowerCase, 'call', _30 => _30()]) || "";
+      return imageExtensions.includes(ext);
+    });
+    const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
+    if (selectedFolders.length > 0) {
+      try {
+        const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(","))}`);
+        const data = await response.json();
+        if (data.images) {
+          for (const img of data.images) {
+            const fullPath = `public/${img}`;
+            if (!selectedImagePaths.includes(fullPath)) {
+              selectedImagePaths.push(fullPath);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Failed to get folder images:", error);
+      }
+    }
+    const imageKeys = selectedImagePaths.map((p) => "/" + p.replace(/^public\//, ""));
     setProgressState({
       current: 0,
       total: imageKeys.length,
@@ -1674,6 +1731,7 @@ function StudioToolbar() {
     setShowProgress(true);
     let synced = 0;
     let errors = 0;
+    const errorMessages = [];
     try {
       for (let i = 0; i < imageKeys.length; i++) {
         const imageKey = imageKeys[i];
@@ -1692,19 +1750,24 @@ function StudioToolbar() {
           });
           const data = await response.json();
           if (!response.ok) {
-            if (_optionalChain([data, 'access', _25 => _25.error, 'optionalAccess', _26 => _26.includes, 'call', _27 => _27("R2 not configured")]) || _optionalChain([data, 'access', _28 => _28.error, 'optionalAccess', _29 => _29.includes, 'call', _30 => _30("CLOUDFLARE_R2")])) {
+            if (_optionalChain([data, 'access', _31 => _31.error, 'optionalAccess', _32 => _32.includes, 'call', _33 => _33("R2 not configured")]) || _optionalChain([data, 'access', _34 => _34.error, 'optionalAccess', _35 => _35.includes, 'call', _36 => _36("CLOUDFLARE_R2")])) {
               setShowProgress(false);
               setShowR2SetupModal(true);
               return;
             }
             errors++;
-          } else if (_optionalChain([data, 'access', _31 => _31.synced, 'optionalAccess', _32 => _32.length]) > 0) {
+            errorMessages.push(data.error || `Failed: ${imageKey}`);
+          } else if (_optionalChain([data, 'access', _37 => _37.synced, 'optionalAccess', _38 => _38.length]) > 0) {
             synced++;
-          } else if (_optionalChain([data, 'access', _33 => _33.errors, 'optionalAccess', _34 => _34.length]) > 0) {
+          } else if (_optionalChain([data, 'access', _39 => _39.errors, 'optionalAccess', _40 => _40.length]) > 0) {
             errors++;
+            for (const errMsg of data.errors) {
+              errorMessages.push(errMsg);
+            }
           }
-        } catch (e4) {
+        } catch (err) {
           errors++;
+          errorMessages.push(`Network error: ${imageKey}`);
         }
       }
       setProgressState({
@@ -1713,7 +1776,8 @@ function StudioToolbar() {
         percent: 100,
         status: "complete",
         processed: synced,
-        errors
+        errors,
+        errorMessages: errorMessages.length > 0 ? errorMessages : void 0
       });
       clearSelection();
       triggerRefresh();
@@ -1836,6 +1900,16 @@ function StudioToolbar() {
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
+    showSyncConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ConfirmModal,
+      {
+        title: "Sync to CDN",
+        message: `Sync ${syncImageCount} image${syncImageCount !== 1 ? "s" : ""} to Cloudflare R2? Images must be processed first. After syncing, local thumbnails will be deleted.`,
+        confirmLabel: "Sync",
+        onConfirm: handleSyncConfirm,
+        onCancel: () => setShowSyncConfirm(false)
+      }
+    ),
     showProcessConfirm && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       ConfirmModal,
       {
@@ -1993,7 +2067,7 @@ function StudioToolbar() {
           "button",
           {
             css: styles4.btn,
-            onClick: handleSyncCdn,
+            onClick: handleSyncClick,
             disabled: !hasSelection,
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloudIcon, {}),
@@ -3635,7 +3709,7 @@ function StudioDetailView() {
         });
         triggerRefresh();
       } else {
-        if (_optionalChain([data, 'access', _35 => _35.error, 'optionalAccess', _36 => _36.includes, 'call', _37 => _37("R2 not configured")]) || _optionalChain([data, 'access', _38 => _38.error, 'optionalAccess', _39 => _39.includes, 'call', _40 => _40("CLOUDFLARE_R2")])) {
+        if (_optionalChain([data, 'access', _41 => _41.error, 'optionalAccess', _42 => _42.includes, 'call', _43 => _43("R2 not configured")]) || _optionalChain([data, 'access', _44 => _44.error, 'optionalAccess', _45 => _45.includes, 'call', _46 => _46("CLOUDFLARE_R2")])) {
           setShowR2SetupModal(true);
         } else {
           setAlertMessage({
@@ -3674,7 +3748,7 @@ function StudioDetailView() {
       if (!response.ok) {
         throw new Error("Processing failed");
       }
-      const reader = _optionalChain([response, 'access', _41 => _41.body, 'optionalAccess', _42 => _42.getReader, 'call', _43 => _43()]);
+      const reader = _optionalChain([response, 'access', _47 => _47.body, 'optionalAccess', _48 => _48.getReader, 'call', _49 => _49()]);
       if (!reader) {
         throw new Error("No response body");
       }
@@ -3691,7 +3765,7 @@ function StudioDetailView() {
             try {
               const data = JSON.parse(line.slice(6));
               setProcessProgress(data);
-            } catch (e5) {
+            } catch (e4) {
             }
           }
         }
@@ -4621,4 +4695,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-PH265HCB.js.map
+//# sourceMappingURL=StudioUI-Y35A2T7S.js.map