@gallop.software/studio 0.1.24 → 0.1.26

package/dist/{StudioUI-YO6WPG5E.js → StudioUI-N7DC5H5U.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
 
@@ -204,6 +204,110 @@ function AlertModal({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.footer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles.btn, styles.btnConfirm], onClick: onClose, children: buttonLabel }) })
   ] }) });
 }
+var progressStyles = {
+  progressContainer: _react3.css`
+    margin-top: 16px;
+  `,
+  progressBar: _react3.css`
+    width: 100%;
+    height: 8px;
+    background-color: ${_chunkAY2DAS6Wjs.colors.background};
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 12px;
+  `,
+  progressFill: _react3.css`
+    height: 100%;
+    background: linear-gradient(90deg, ${_chunkAY2DAS6Wjs.colors.primary}, ${_chunkAY2DAS6Wjs.colors.primaryHover});
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  `,
+  progressText: _react3.css`
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.sm};
+    color: ${_chunkAY2DAS6Wjs.colors.textSecondary};
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  `,
+  currentFile: _react3.css`
+    font-size: ${_chunkAY2DAS6Wjs.fontSize.xs};
+    color: ${_chunkAY2DAS6Wjs.colors.textMuted};
+    margin: 8px 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `
+};
+function ProgressModal({
+  title,
+  progress,
+  onClose,
+  onStop
+}) {
+  const isComplete = progress.status === "complete";
+  const isError = progress.status === "error";
+  const isStopped = progress.status === "stopped";
+  const canClose = isComplete || isError || isStopped;
+  const isRunning = !canClose;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.overlay, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.header, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles.title, children: title }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.body, children: isError ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles.message, children: progress.message || "An error occurred" }) : isStopped ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles.message, children: [
+      "Processing stopped. Processed ",
+      _nullishCoalesce(progress.processed, () => ( progress.current)),
+      " 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
+    ] }) : /* @__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: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: progressStyles.progressBar, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            css: progressStyles.progressFill,
+            style: { width: `${progress.percent}%` }
+          }
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: progressStyles.progressText, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+            progress.current,
+            " of ",
+            progress.total
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+            progress.percent,
+            "%"
+          ] })
+        ] }),
+        progress.currentFile && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: progressStyles.currentFile, title: progress.currentFile, children: progress.currentFile })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.footer, children: [
+      isRunning && onStop && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles.btn, styles.btnDanger], onClick: onStop, children: "Stop" }),
+      canClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles.btn, styles.btnConfirm], onClick: onClose, children: "Done" })
+    ] })
+  ] }) });
+}
 
 // src/components/StudioToolbar.tsx
 
@@ -346,11 +450,19 @@ var styles2 = {
 function StudioToolbar() {
   const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio();
   const fileInputRef = _react.useRef.call(void 0, null);
+  const abortControllerRef = _react.useRef.call(void 0, null);
   const [uploading, setUploading] = _react.useState.call(void 0, false);
   const [refreshing, setRefreshing] = _react.useState.call(void 0, false);
   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 [showProgress, setShowProgress] = _react.useState.call(void 0, false);
+  const [progressState, setProgressState] = _react.useState.call(void 0, {
+    current: 0,
+    total: 0,
+    percent: 0,
+    status: "processing"
+  });
   const [processCount, setProcessCount] = _react.useState.call(void 0, 0);
   const [processMode, setProcessMode] = _react.useState.call(void 0, "all");
   const [alertMessage, setAlertMessage] = _react.useState.call(void 0, null);
@@ -425,12 +537,12 @@ function StudioToolbar() {
       setShowProcessConfirm(true);
     } else {
       try {
-        const response = await fetch("/api/studio/count-unprocessed");
+        const response = await fetch("/api/studio/count-images");
         const data = await response.json();
         if (data.count === 0) {
           setAlertMessage({
-            title: "All Images Processed",
-            message: "All images in the public folder have already been processed."
+            title: "No Images Found",
+            message: "No images found in the public folder to process."
           });
           return;
         }
@@ -438,10 +550,10 @@ function StudioToolbar() {
         setProcessMode("all");
         setShowProcessConfirm(true);
       } catch (error) {
-        console.error("Failed to count unprocessed images:", error);
+        console.error("Failed to count images:", error);
         setAlertMessage({
           title: "Error",
-          message: "Failed to count unprocessed images."
+          message: "Failed to count images."
         });
       }
     }
@@ -449,64 +561,160 @@ function StudioToolbar() {
   const handleProcessConfirm = _react.useCallback.call(void 0, async () => {
     setShowProcessConfirm(false);
     setProcessing(true);
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
     try {
       if (processMode === "all") {
+        setShowProgress(true);
+        setProgressState({
+          current: 0,
+          total: processCount,
+          percent: 0,
+          status: "processing"
+        });
         const response = await fetch("/api/studio/process-all", {
-          method: "POST"
+          method: "POST",
+          signal
         });
-        const data = await response.json();
-        if (response.ok) {
-          const message = [
-            `Processed ${_optionalChain([data, 'access', _10 => _10.processed, 'optionalAccess', _11 => _11.length]) || 0} images.`,
-            _optionalChain([data, 'access', _12 => _12.orphansRemoved, 'optionalAccess', _13 => _13.length]) > 0 ? `Removed ${data.orphansRemoved.length} orphaned thumbnails.` : "",
-            _optionalChain([data, 'access', _14 => _14.errors, 'optionalAccess', _15 => _15.length]) > 0 ? `${data.errors.length} errors occurred.` : ""
-          ].filter(Boolean).join(" ");
-          setAlertMessage({
-            title: "Processing Complete",
-            message
-          });
-          triggerRefresh();
-        } else {
-          setAlertMessage({
-            title: "Processing Failed",
-            message: data.error || "Unknown error"
-          });
+        if (!response.body) {
+          throw new Error("No response body");
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        try {
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            if (signal.aborted) {
+              reader.cancel();
+              break;
+            }
+            const text = decoder.decode(value);
+            const lines = text.split("\n\n").filter((line) => line.startsWith("data: "));
+            for (const line of lines) {
+              try {
+                const data = JSON.parse(line.replace("data: ", ""));
+                if (data.type === "start") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    total: data.total
+                  }));
+                } else if (data.type === "progress") {
+                  setProgressState({
+                    current: data.current,
+                    total: data.total,
+                    percent: data.percent,
+                    currentFile: data.currentFile,
+                    status: "processing"
+                  });
+                } else if (data.type === "cleanup") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "cleanup",
+                    currentFile: void 0
+                  }));
+                } else if (data.type === "complete") {
+                  setProgressState({
+                    current: data.processed,
+                    total: data.processed,
+                    percent: 100,
+                    status: "complete",
+                    processed: data.processed,
+                    orphansRemoved: data.orphansRemoved,
+                    errors: data.errors
+                  });
+                  triggerRefresh();
+                } else if (data.type === "error") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "error",
+                    message: data.message
+                  }));
+                }
+              } catch (e2) {
+              }
+            }
+          }
+        } catch (err) {
+          if (signal.aborted) {
+            setProgressState((prev) => ({
+              ...prev,
+              status: "stopped",
+              processed: prev.current
+            }));
+            triggerRefresh();
+          } else {
+            throw err;
+          }
         }
       } else {
+        setShowProgress(true);
+        setProgressState({
+          current: 0,
+          total: processCount,
+          percent: 0,
+          status: "processing"
+        });
         const selectedImageKeys = Array.from(selectedItems).filter((p) => {
-          const ext = _optionalChain([p, 'access', _16 => _16.split, 'call', _17 => _17("."), 'access', _18 => _18.pop, 'call', _19 => _19(), 'optionalAccess', _20 => _20.toLowerCase, 'call', _21 => _21()]) || "";
+          const ext = _optionalChain([p, 'access', _10 => _10.split, 'call', _11 => _11("."), 'access', _12 => _12.pop, 'call', _13 => _13(), 'optionalAccess', _14 => _14.toLowerCase, 'call', _15 => _15()]) || "";
           return ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"].includes(ext);
         }).map((p) => p.replace(/^public\//, ""));
         const response = await fetch("/api/studio/reprocess", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ imageKeys: selectedImageKeys })
+          body: JSON.stringify({ imageKeys: selectedImageKeys }),
+          signal
         });
         const data = await response.json();
         if (response.ok) {
-          setAlertMessage({
-            title: "Processing Complete",
-            message: `Processed ${_optionalChain([data, 'access', _22 => _22.processed, 'optionalAccess', _23 => _23.length]) || 0} images.${_optionalChain([data, 'access', _24 => _24.errors, 'optionalAccess', _25 => _25.length]) > 0 ? ` ${data.errors.length} errors occurred.` : ""}`
+          setProgressState({
+            current: _optionalChain([data, 'access', _16 => _16.processed, 'optionalAccess', _17 => _17.length]) || 0,
+            total: _optionalChain([data, 'access', _18 => _18.processed, 'optionalAccess', _19 => _19.length]) || 0,
+            percent: 100,
+            status: "complete",
+            processed: _optionalChain([data, 'access', _20 => _20.processed, 'optionalAccess', _21 => _21.length]) || 0,
+            errors: _optionalChain([data, 'access', _22 => _22.errors, 'optionalAccess', _23 => _23.length]) || 0
           });
           clearSelection();
           triggerRefresh();
         } else {
-          setAlertMessage({
-            title: "Processing Failed",
+          setProgressState({
+            current: 0,
+            total: 0,
+            percent: 0,
+            status: "error",
             message: data.error || "Unknown error"
           });
         }
       }
     } catch (error) {
-      console.error("Processing error:", error);
-      setAlertMessage({
-        title: "Processing Failed",
-        message: "Processing failed. Check console for details."
-      });
+      if (signal.aborted) {
+        setProgressState((prev) => ({
+          ...prev,
+          status: "stopped",
+          processed: prev.current
+        }));
+        triggerRefresh();
+      } else {
+        console.error("Processing error:", error);
+        setProgressState({
+          current: 0,
+          total: 0,
+          percent: 0,
+          status: "error",
+          message: "Processing failed. Check console for details."
+        });
+      }
     } finally {
       setProcessing(false);
+      abortControllerRef.current = null;
+    }
+  }, [processMode, processCount, selectedItems, clearSelection, triggerRefresh]);
+  const handleStopProcessing = _react.useCallback.call(void 0, () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
     }
-  }, [processMode, selectedItems, clearSelection, triggerRefresh]);
+  }, []);
   const handleDeleteClick = _react.useCallback.call(void 0, () => {
     if (selectedItems.size === 0) return;
     setShowDeleteConfirm(true);
@@ -563,12 +771,29 @@ function StudioToolbar() {
       ConfirmModal,
       {
         title: "Process Images",
-        message: processMode === "all" ? `Found ${processCount} unprocessed image${processCount !== 1 ? "s" : ""} in the public folder. This will generate thumbnails and remove any orphaned files from the images folder.` : `Process ${processCount} selected image${processCount !== 1 ? "s" : ""}? This will regenerate thumbnails for these files.`,
+        message: processMode === "all" ? `Found ${processCount} image${processCount !== 1 ? "s" : ""} in the public folder. This will regenerate all thumbnails and remove any orphaned files from the images folder.` : `Process ${processCount} selected image${processCount !== 1 ? "s" : ""}? This will regenerate thumbnails for these files.`,
         confirmLabel: processing ? "Processing..." : "Process",
         onConfirm: handleProcessConfirm,
         onCancel: () => setShowProcessConfirm(false)
       }
     ),
+    showProgress && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ProgressModal,
+      {
+        title: "Processing Images",
+        progress: progressState,
+        onStop: handleStopProcessing,
+        onClose: () => {
+          setShowProgress(false);
+          setProgressState({
+            current: 0,
+            total: 0,
+            percent: 0,
+            status: "processing"
+          });
+        }
+      }
+    ),
     alertMessage && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       AlertModal,
       {
@@ -2222,4 +2447,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-YO6WPG5E.js.map
+//# sourceMappingURL=StudioUI-N7DC5H5U.js.map