@gallop.software/studio 0.1.25 → 0.1.27

package/dist/{StudioUI-4TDLHJCA.js → StudioUI-7DJ6CTZQ.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";
 
 
 
@@ -242,33 +242,42 @@ var progressStyles = {
 function ProgressModal({
   title,
   progress,
-  onClose
+  onClose,
+  onStop
 }) {
   const isComplete = progress.status === "complete";
   const isError = progress.status === "error";
-  const canClose = isComplete || isError;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.overlay, onClick: canClose ? onClose : void 0, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+  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" }) : isComplete ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles.message, children: [
+    /* @__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 && progress.orphansRemoved > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      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" : "",
         "."
-      ] }),
-      progress.errors && progress.errors > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      ] }) : 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: [
@@ -293,7 +302,10 @@ function ProgressModal({
         progress.currentFile && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: progressStyles.currentFile, title: progress.currentFile, children: progress.currentFile })
       ] })
     ] }) }),
-    canClose && /* @__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: "Done" }) })
+    /* @__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" })
+    ] })
   ] }) });
 }
 
@@ -438,6 +450,7 @@ 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);
@@ -452,6 +465,7 @@ function StudioToolbar() {
   });
   const [processCount, setProcessCount] = _react.useState.call(void 0, 0);
   const [processMode, setProcessMode] = _react.useState.call(void 0, "all");
+  const [imagesToProcess, setImagesToProcess] = _react.useState.call(void 0, []);
   const [alertMessage, setAlertMessage] = _react.useState.call(void 0, null);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = _react.useCallback.call(void 0, () => {
@@ -508,18 +522,38 @@ function StudioToolbar() {
   const handleProcessImages = _react.useCallback.call(void 0, async () => {
     const hasSelection2 = selectedItems.size > 0;
     if (hasSelection2) {
-      const selectedImagePaths = Array.from(selectedItems).filter((p) => {
+      const selectedPaths = Array.from(selectedItems);
+      const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
+      const selectedImagePaths = selectedPaths.filter((p) => {
         const ext = _optionalChain([p, 'access', _4 => _4.split, 'call', _5 => _5("."), 'access', _6 => _6.pop, 'call', _7 => _7(), 'optionalAccess', _8 => _8.toLowerCase, 'call', _9 => _9()]) || "";
-        return ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"].includes(ext);
+        return imageExtensions.includes(ext);
       });
+      const selectedFolders = selectedPaths.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);
+        }
+      }
       if (selectedImagePaths.length === 0) {
         setAlertMessage({
-          title: "No Images Selected",
-          message: "Please select image files to process."
+          title: "No Images Found",
+          message: "No images found in the selected items."
         });
         return;
       }
       setProcessCount(selectedImagePaths.length);
+      setImagesToProcess(selectedImagePaths);
       setProcessMode("selected");
       setShowProcessConfirm(true);
     } else {
@@ -548,6 +582,8 @@ 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);
@@ -558,61 +594,79 @@ function StudioToolbar() {
           status: "processing"
         });
         const response = await fetch("/api/studio/process-all", {
-          method: "POST"
+          method: "POST",
+          signal
         });
         if (!response.body) {
           throw new Error("No response body");
         }
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) 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
-                }));
+        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 (e2) {
             }
           }
+        } catch (err) {
+          if (signal.aborted) {
+            setProgressState((prev) => ({
+              ...prev,
+              status: "stopped",
+              processed: prev.current
+            }));
+            triggerRefresh();
+          } else {
+            throw err;
+          }
         }
       } else {
         setShowProgress(true);
@@ -622,24 +676,22 @@ function StudioToolbar() {
           percent: 0,
           status: "processing"
         });
-        const selectedImageKeys = Array.from(selectedItems).filter((p) => {
-          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 selectedImageKeys = imagesToProcess.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) {
           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,
+            current: _optionalChain([data, 'access', _10 => _10.processed, 'optionalAccess', _11 => _11.length]) || 0,
+            total: _optionalChain([data, 'access', _12 => _12.processed, 'optionalAccess', _13 => _13.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
+            processed: _optionalChain([data, 'access', _14 => _14.processed, 'optionalAccess', _15 => _15.length]) || 0,
+            errors: _optionalChain([data, 'access', _16 => _16.errors, 'optionalAccess', _17 => _17.length]) || 0
           });
           clearSelection();
           triggerRefresh();
@@ -654,18 +706,33 @@ function StudioToolbar() {
         }
       }
     } catch (error) {
-      console.error("Processing error:", error);
-      setProgressState({
-        current: 0,
-        total: 0,
-        percent: 0,
-        status: "error",
-        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, imagesToProcess, clearSelection, triggerRefresh]);
+  const handleStopProcessing = _react.useCallback.call(void 0, () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
     }
-  }, [processMode, processCount, selectedItems, clearSelection, triggerRefresh]);
+  }, []);
   const handleDeleteClick = _react.useCallback.call(void 0, () => {
     if (selectedItems.size === 0) return;
     setShowDeleteConfirm(true);
@@ -733,6 +800,7 @@ function StudioToolbar() {
       {
         title: "Processing Images",
         progress: progressState,
+        onStop: handleStopProcessing,
         onClose: () => {
           setShowProgress(false);
           setProgressState({
@@ -1242,7 +1310,7 @@ function GridItem({ item, isSelected, onClick, onOpen }) {
         ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.label, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelRow, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.labelText, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, title: item.name, children: item.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, title: item.name, children: truncateMiddle(item.name) }),
             isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles3.size, children: [
               item.fileCount !== void 0 ? `${item.fileCount} files` : "",
               item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
@@ -1270,6 +1338,19 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function truncateMiddle(str, maxLength = 24) {
+  if (str.length <= maxLength) return str;
+  const lastDot = str.lastIndexOf(".");
+  const ext = lastDot > 0 ? str.substring(lastDot) : "";
+  const name = lastDot > 0 ? str.substring(0, lastDot) : str;
+  const availableLength = maxLength - ext.length - 3;
+  if (availableLength < 6) {
+    return str.substring(0, maxLength - 3) + "...";
+  }
+  const startLength = Math.ceil(availableLength / 2);
+  const endLength = Math.floor(availableLength / 2);
+  return name.substring(0, startLength) + "..." + name.substring(name.length - endLength) + ext;
+}
 
 // src/components/StudioFileList.tsx
 
@@ -1577,7 +1658,7 @@ function ListRow({ item, isSelected, onClick, onOpen }) {
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.nameCell, children: [
           isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : item.thumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles4.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.name, children: item.name }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.name, title: item.name, children: truncateMiddle2(item.name) }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
@@ -1605,6 +1686,19 @@ function formatFileSize2(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+function truncateMiddle2(str, maxLength = 32) {
+  if (str.length <= maxLength) return str;
+  const lastDot = str.lastIndexOf(".");
+  const ext = lastDot > 0 ? str.substring(lastDot) : "";
+  const name = lastDot > 0 ? str.substring(0, lastDot) : str;
+  const availableLength = maxLength - ext.length - 3;
+  if (availableLength < 6) {
+    return str.substring(0, maxLength - 3) + "...";
+  }
+  const startLength = Math.ceil(availableLength / 2);
+  const endLength = Math.floor(availableLength / 2);
+  return name.substring(0, startLength) + "..." + name.substring(name.length - endLength) + ext;
+}
 
 // src/components/StudioDetailView.tsx
 
@@ -1748,6 +1842,14 @@ var styles5 = {
     text-overflow: ellipsis;
     white-space: nowrap;
   `,
+  infoValueWrap: _react3.css`
+    color: ${_chunkAY2DAS6Wjs.colors.text};
+    font-weight: 500;
+    text-align: right;
+    max-width: 160px;
+    word-break: break-all;
+    white-space: normal;
+  `,
   actions: _react3.css`
     display: flex;
     flex-direction: column;
@@ -1881,7 +1983,7 @@ function StudioDetailView() {
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.info, children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.infoRow, children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoLabel, children: "Name" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoValue, title: focusedItem.name, children: focusedItem.name })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoValueWrap, children: focusedItem.name })
             ] }),
             focusedItem.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.infoRow, children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.infoLabel, children: "Size" }),
@@ -2397,4 +2499,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-4TDLHJCA.js.map
+//# sourceMappingURL=StudioUI-7DJ6CTZQ.js.map