@gallop.software/studio 1.2.7 → 1.3.0

package/dist/{StudioUI-TZB57JJT.mjs → StudioUI-K6TIH6LF.mjs}

@@ -7,11 +7,24 @@ import {
 } from "./chunk-RHI3UROE.mjs";
 
 // src/components/StudioUI.tsx
-import { useEffect as useEffect5, useCallback as useCallback5, useState as useState10 } from "react";
+import { useEffect as useEffect5, useCallback as useCallback6, useState as useState11 } from "react";
 import { css as css11 } from "@emotion/react";
 
 // src/components/StudioContext.tsx
 import { createContext, useContext } from "react";
+var defaultActionState = {
+  showProgress: false,
+  progressTitle: "",
+  progressState: { current: 0, total: 0, percent: 0, status: "processing" },
+  showDeleteConfirm: false,
+  showMoveModal: false,
+  showSyncConfirm: false,
+  showProcessConfirm: false,
+  actionPaths: [],
+  syncImageCount: 0,
+  syncHasRemote: false,
+  syncHasLocal: false
+};
 var defaultState = {
   isOpen: false,
   openStudio: () => {
@@ -65,6 +78,34 @@ var defaultState = {
   },
   fileItems: [],
   setFileItems: () => {
+  },
+  // Shared action state
+  actionState: defaultActionState,
+  // Shared action handlers
+  requestDelete: () => {
+  },
+  requestMove: () => {
+  },
+  requestSync: () => {
+  },
+  requestProcess: () => {
+  },
+  confirmDelete: async () => {
+  },
+  confirmMove: async () => {
+  },
+  confirmSync: async () => {
+  },
+  confirmProcess: async () => {
+  },
+  cancelAction: () => {
+  },
+  closeProgress: () => {
+  },
+  stopProcessing: () => {
+  },
+  abortController: null,
+  deleteOrphans: async () => {
   }
 };
 var StudioContext = createContext(defaultState);
@@ -4367,15 +4408,20 @@ var styles8 = {
     color: ${colors.text};
     text-align: left;
     
-    &:hover {
+    &:hover:not(:disabled) {
       background-color: ${colors.surfaceHover};
       border-color: ${colors.borderHover};
     }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   `,
   actionBtnDanger: css8`
     color: ${colors.danger};
     
-    &:hover {
+    &:hover:not(:disabled) {
       background-color: ${colors.dangerLight};
       border-color: ${colors.danger};
     }
@@ -4387,17 +4433,23 @@ var styles8 = {
   `
 };
 function StudioDetailView() {
-  const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState8(false);
+  const {
+    focusedItem,
+    setFocusedItem,
+    triggerRefresh,
+    fileItems,
+    // Shared action handlers
+    requestDelete,
+    requestMove,
+    requestSync,
+    requestProcess,
+    actionState
+  } = useStudio();
   const [showRenameModal, setShowRenameModal] = useState8(false);
-  const [showMoveModal, setShowMoveModal] = useState8(false);
-  const [showProcessConfirm, setShowProcessConfirm] = useState8(false);
   const [showR2SetupModal, setShowR2SetupModal] = useState8(false);
-  const [processProgress, setProcessProgress] = useState8(null);
   const [alertMessage, setAlertMessage] = useState8(null);
   const [showCopied, setShowCopied] = useState8(false);
-  const [pushing, setPushing] = useState8(false);
-  const [moving, setMoving] = useState8(false);
+  const isActionInProgress = actionState.showProgress;
   if (!focusedItem) return null;
   const isImage = isImageFile(focusedItem.name);
   const isVideo = isVideoFile(focusedItem.name);
@@ -4444,177 +4496,6 @@ function StudioDetailView() {
       }
     }
   };
-  const handleDelete = async () => {
-    setShowDeleteConfirm(false);
-    try {
-      const response = await fetch("/api/studio/delete", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ paths: [focusedItem.path] })
-      });
-      if (response.ok) {
-        clearSelection();
-        triggerRefresh();
-        setFocusedItem(null);
-      } else {
-        const error = await response.json();
-        setAlertMessage({
-          title: "Delete Failed",
-          message: error.error || "Unknown error"
-        });
-      }
-    } catch (error) {
-      console.error("Delete error:", error);
-      setAlertMessage({
-        title: "Delete Failed",
-        message: "Delete failed. Check console for details."
-      });
-    }
-  };
-  const handleMove = async (destination) => {
-    setShowMoveModal(false);
-    setMoving(true);
-    try {
-      const response = await fetch("/api/studio/move", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ paths: [focusedItem.path], destination })
-      });
-      if (!response.body) {
-        throw new Error("No response body");
-      }
-      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\n");
-        buffer = lines.pop() || "";
-        for (const line of lines) {
-          if (!line.startsWith("data: ")) continue;
-          try {
-            const data = JSON.parse(line.slice(6));
-            if (data.type === "complete") {
-              if (data.errors > 0 && data.errorMessages?.length > 0) {
-                setAlertMessage({
-                  title: "Move Failed",
-                  message: data.errorMessages.join("\n")
-                });
-              } else {
-                clearSelection();
-                triggerRefresh();
-                setFocusedItem(null);
-              }
-            } else if (data.type === "error") {
-              setAlertMessage({
-                title: "Move Failed",
-                message: data.message || "Unknown error"
-              });
-            }
-          } catch {
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Move error:", error);
-      setAlertMessage({
-        title: "Move Failed",
-        message: "Failed to move file. Check console for details."
-      });
-    } finally {
-      setMoving(false);
-    }
-  };
-  const handleSync = async () => {
-    const imageKey = "/" + focusedItem.path.replace(/^public\//, "");
-    setPushing(true);
-    try {
-      const response = await fetch("/api/studio/sync", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ imageKeys: [imageKey] })
-      });
-      const data = await response.json();
-      if (response.ok) {
-        setAlertMessage({
-          title: "Push Complete",
-          message: "Successfully pushed to CDN."
-        });
-        triggerRefresh();
-      } else {
-        if (data.error?.includes("R2 not configured") || data.error?.includes("CLOUDFLARE_R2")) {
-          setShowR2SetupModal(true);
-        } else {
-          setAlertMessage({
-            title: "Push Failed",
-            message: data.error || "Failed to push to CDN."
-          });
-        }
-      }
-    } catch (error) {
-      console.error("Push error:", error);
-      setAlertMessage({
-        title: "Push Failed",
-        message: "Failed to push to CDN. Check console for details."
-      });
-    } finally {
-      setPushing(false);
-    }
-  };
-  const handleProcessImage = async () => {
-    setShowProcessConfirm(false);
-    setProcessProgress({
-      current: 0,
-      total: 1,
-      percent: 0,
-      status: "processing",
-      currentFile: focusedItem.name
-    });
-    try {
-      const imageKey = focusedItem.path.replace(/^public\//, "");
-      const formattedKey = imageKey.startsWith("/") ? imageKey : `/${imageKey}`;
-      const response = await fetch("/api/studio/reprocess", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          imageKeys: [formattedKey]
-        })
-      });
-      const data = await response.json();
-      if (!response.ok) {
-        throw new Error(data.error || "Processing failed");
-      }
-      if (data.processed?.length > 0) {
-        setProcessProgress({
-          current: 1,
-          total: 1,
-          percent: 100,
-          status: "complete",
-          message: `Processed ${focusedItem.name}`
-        });
-      } else if (data.errors?.length > 0) {
-        setProcessProgress({
-          current: 0,
-          total: 1,
-          percent: 0,
-          status: "error",
-          message: `Failed to process: ${data.errors.join(", ")}`
-        });
-      }
-      triggerRefresh();
-    } catch (error) {
-      console.error("Process error:", error);
-      setProcessProgress({
-        current: 0,
-        total: 1,
-        percent: 0,
-        status: "error",
-        message: error instanceof Error ? error.message : "Failed to process image"
-      });
-    }
-  };
   const renderMedia = () => {
     if (isImage) {
       return /* @__PURE__ */ jsx8("img", { css: styles8.image, src: imageSrc, alt: focusedItem.name });
@@ -4628,17 +4509,6 @@ function StudioDetailView() {
     ] });
   };
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    showDeleteConfirm && /* @__PURE__ */ jsx8(
-      ConfirmModal,
-      {
-        title: "Delete File",
-        message: `Are you sure you want to delete "${focusedItem.name}"? This action cannot be undone.`,
-        confirmLabel: "Delete",
-        variant: "danger",
-        onConfirm: handleDelete,
-        onCancel: () => setShowDeleteConfirm(false)
-      }
-    ),
     alertMessage && /* @__PURE__ */ jsx8(
       AlertModal,
       {
@@ -4666,33 +4536,6 @@ function StudioDetailView() {
         onCancel: () => setShowRenameModal(false)
       }
     ),
-    showMoveModal && /* @__PURE__ */ jsx8(
-      StudioFolderPicker,
-      {
-        selectedItems: /* @__PURE__ */ new Set([focusedItem.path]),
-        currentPath: focusedItem.path.split("/").slice(0, -1).join("/"),
-        onMove: handleMove,
-        onCancel: () => setShowMoveModal(false)
-      }
-    ),
-    showProcessConfirm && /* @__PURE__ */ jsx8(
-      ConfirmModal,
-      {
-        title: "Process Image",
-        message: `Generate thumbnails for "${focusedItem.name}"?`,
-        confirmLabel: "Process",
-        onConfirm: handleProcessImage,
-        onCancel: () => setShowProcessConfirm(false)
-      }
-    ),
-    processProgress && /* @__PURE__ */ jsx8(
-      ProgressModal,
-      {
-        title: "Processing Image",
-        progress: processProgress,
-        onClose: () => setProcessProgress(null)
-      }
-    ),
     /* @__PURE__ */ jsx8("div", { css: styles8.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs8("div", { css: styles8.main, children: [
         /* @__PURE__ */ jsxs8("div", { css: styles8.headerButtons, children: [
@@ -4766,11 +4609,11 @@ function StudioDetailView() {
               "button",
               {
                 css: styles8.actionBtn,
-                onClick: () => setShowMoveModal(true),
-                disabled: moving || focusedItem.isProtected,
+                onClick: () => requestMove([focusedItem.path]),
+                disabled: isActionInProgress || focusedItem.isProtected,
                 children: [
                   /* @__PURE__ */ jsx8("svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) }),
-                  moving ? "Moving..." : "Move"
+                  "Move"
                 ]
               }
             ),
@@ -4778,12 +4621,12 @@ function StudioDetailView() {
               "button",
               {
                 css: styles8.actionBtn,
-                onClick: handleSync,
-                disabled: pushing || focusedItem.isProtected || focusedItem.cdnPushed && !focusedItem.isRemote,
+                onClick: () => requestSync([focusedItem.path], fileItems),
+                disabled: isActionInProgress || focusedItem.isProtected || focusedItem.cdnPushed && !focusedItem.isRemote,
                 title: focusedItem.cdnPushed && !focusedItem.isRemote ? "Already in R2" : void 0,
                 children: [
                   /* @__PURE__ */ jsx8("svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("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" }) }),
-                  pushing ? "Pushing..." : "Push to CDN"
+                  "Push to CDN"
                 ]
               }
             ),
@@ -4791,8 +4634,8 @@ function StudioDetailView() {
               "button",
               {
                 css: styles8.actionBtn,
-                onClick: () => setShowProcessConfirm(true),
-                disabled: focusedItem.isProtected,
+                onClick: () => requestProcess([focusedItem.path]),
+                disabled: isActionInProgress || focusedItem.isProtected,
                 children: [
                   /* @__PURE__ */ jsx8("svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
                   "Process Image"
@@ -4803,8 +4646,8 @@ function StudioDetailView() {
               "button",
               {
                 css: [styles8.actionBtn, styles8.actionBtnDanger],
-                onClick: () => setShowDeleteConfirm(true),
-                disabled: focusedItem.isProtected,
+                onClick: () => requestDelete([focusedItem.path]),
+                disabled: isActionInProgress || focusedItem.isProtected,
                 children: [
                   /* @__PURE__ */ jsx8("svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
                   "Delete"
@@ -5388,6 +5231,413 @@ function ErrorModal() {
   ] }) });
 }
 
+// src/components/useStudioActions.tsx
+import { useState as useState10, useCallback as useCallback5, useRef as useRef4 } from "react";
+var defaultActionState2 = {
+  showProgress: false,
+  progressTitle: "",
+  progressState: { current: 0, total: 0, percent: 0, status: "processing" },
+  showDeleteConfirm: false,
+  showMoveModal: false,
+  showSyncConfirm: false,
+  showProcessConfirm: false,
+  actionPaths: [],
+  syncImageCount: 0,
+  syncHasRemote: false,
+  syncHasLocal: false
+};
+function useStudioActions({
+  triggerRefresh,
+  clearSelection,
+  setFocusedItem,
+  showError
+}) {
+  const [actionState, setActionState] = useState10(defaultActionState2);
+  const abortControllerRef = useRef4(null);
+  const setProgressState = useCallback5((update) => {
+    setActionState((prev) => ({
+      ...prev,
+      progressState: typeof update === "function" ? update(prev.progressState) : { ...prev.progressState, ...update }
+    }));
+  }, []);
+  const requestDelete = useCallback5((paths) => {
+    setActionState((prev) => ({
+      ...prev,
+      actionPaths: paths,
+      showDeleteConfirm: true
+    }));
+  }, []);
+  const requestMove = useCallback5((paths) => {
+    setActionState((prev) => ({
+      ...prev,
+      actionPaths: paths,
+      showMoveModal: true
+    }));
+  }, []);
+  const requestSync = useCallback5((paths, fileItems) => {
+    const imageKeys = paths.map((p) => "/" + p.replace(/^public\//, ""));
+    let hasRemote = false;
+    let hasLocal = false;
+    for (const path of paths) {
+      const item = fileItems.find((f) => f.path === path);
+      if (item) {
+        if (item.isRemote) {
+          hasRemote = true;
+        } else if (!item.cdnPushed) {
+          hasLocal = true;
+        }
+      }
+    }
+    setActionState((prev) => ({
+      ...prev,
+      actionPaths: paths,
+      syncImageCount: imageKeys.length,
+      syncHasRemote: hasRemote,
+      syncHasLocal: hasLocal,
+      showSyncConfirm: true
+    }));
+  }, []);
+  const requestProcess = useCallback5((paths) => {
+    setActionState((prev) => ({
+      ...prev,
+      actionPaths: paths,
+      showProcessConfirm: true
+    }));
+  }, []);
+  const cancelAction = useCallback5(() => {
+    setActionState((prev) => ({
+      ...prev,
+      showDeleteConfirm: false,
+      showMoveModal: false,
+      showSyncConfirm: false,
+      showProcessConfirm: false
+    }));
+  }, []);
+  const closeProgress = useCallback5(() => {
+    setActionState(defaultActionState2);
+  }, []);
+  const stopProcessing = useCallback5(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, []);
+  const confirmDelete = useCallback5(async () => {
+    const paths = actionState.actionPaths;
+    setActionState((prev) => ({ ...prev, showDeleteConfirm: false }));
+    try {
+      const response = await fetch("/api/studio/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ paths })
+      });
+      if (response.ok) {
+        clearSelection();
+        setFocusedItem(null);
+        triggerRefresh();
+      } else {
+        const error = await response.json();
+        showError("Delete Failed", error.error || "Unknown error");
+      }
+    } catch (error) {
+      console.error("Delete error:", error);
+      showError("Delete Failed", "Delete failed. Check console for details.");
+    }
+  }, [actionState.actionPaths, clearSelection, setFocusedItem, triggerRefresh, showError]);
+  const confirmMove = useCallback5(async (destination) => {
+    const paths = actionState.actionPaths;
+    setActionState((prev) => ({
+      ...prev,
+      showMoveModal: false,
+      showProgress: true,
+      progressTitle: "Moving Files",
+      progressState: {
+        current: 0,
+        total: paths.length,
+        percent: 0,
+        status: "processing",
+        message: "Moving files..."
+      }
+    }));
+    try {
+      const response = await fetch("/api/studio/move-stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ paths, destination })
+      });
+      if (!response.ok) {
+        const error = await response.json();
+        setProgressState({
+          status: "error",
+          message: error.error || "Move failed"
+        });
+        return;
+      }
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (reader) {
+        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 === "start") {
+                  setProgressState((prev) => ({ ...prev, total: data.total }));
+                } else 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((prev) => ({
+                    ...prev,
+                    status: "complete",
+                    message: `Moved ${data.moved} file${data.moved !== 1 ? "s" : ""}${data.errors > 0 ? `, ${data.errors} error${data.errors !== 1 ? "s" : ""}` : ""}`
+                  }));
+                  if (data.errors > 0 && data.errorMessages?.length > 0) {
+                    showError("Move Failed", data.errorMessages.join("\n"));
+                  }
+                  clearSelection();
+                  setFocusedItem(null);
+                  triggerRefresh();
+                } else if (data.type === "error") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "error",
+                    message: data.message || "Unknown error"
+                  }));
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Move error:", error);
+      setProgressState((prev) => ({
+        ...prev,
+        status: "error",
+        message: "Failed to move files. Check console for details."
+      }));
+    }
+  }, [actionState.actionPaths, clearSelection, setFocusedItem, triggerRefresh, showError, setProgressState]);
+  const confirmSync = useCallback5(async () => {
+    const paths = actionState.actionPaths;
+    const imageKeys = paths.map((p) => "/" + p.replace(/^public\//, ""));
+    setActionState((prev) => ({
+      ...prev,
+      showSyncConfirm: false,
+      showProgress: true,
+      progressTitle: "Pushing to CDN",
+      progressState: {
+        current: 0,
+        total: imageKeys.length,
+        percent: 0,
+        status: "processing",
+        message: "Pushing to CDN..."
+      }
+    }));
+    let pushed = 0;
+    const errors = [];
+    for (let i = 0; i < imageKeys.length; i++) {
+      const imageKey = imageKeys[i];
+      setProgressState({
+        current: i + 1,
+        total: imageKeys.length,
+        percent: Math.round((i + 1) / imageKeys.length * 100),
+        status: "processing",
+        message: `Pushing ${imageKey}...`
+      });
+      try {
+        const response = await fetch("/api/studio/sync", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ imageKeys: [imageKey] })
+        });
+        if (response.ok) {
+          pushed++;
+        } else {
+          const data = await response.json();
+          errors.push(`${imageKey}: ${data.error || "Unknown error"}`);
+        }
+      } catch (error) {
+        errors.push(`${imageKey}: ${error instanceof Error ? error.message : "Unknown error"}`);
+      }
+    }
+    setProgressState({
+      current: imageKeys.length,
+      total: imageKeys.length,
+      percent: 100,
+      status: errors.length > 0 ? "error" : "complete",
+      message: `Pushed ${pushed} file${pushed !== 1 ? "s" : ""}${errors.length > 0 ? `, ${errors.length} error${errors.length !== 1 ? "s" : ""}` : ""}`
+    });
+    if (errors.length > 0) {
+      showError("Push Errors", errors.join("\n"));
+    }
+    clearSelection();
+    triggerRefresh();
+  }, [actionState.actionPaths, clearSelection, triggerRefresh, showError, setProgressState]);
+  const confirmProcess = useCallback5(async () => {
+    const paths = actionState.actionPaths;
+    const imageKeys = paths.map((p) => "/" + p.replace(/^public\//, ""));
+    setActionState((prev) => ({
+      ...prev,
+      showProcessConfirm: false,
+      showProgress: true,
+      progressTitle: "Processing Images",
+      progressState: {
+        current: 0,
+        total: imageKeys.length,
+        percent: 0,
+        status: "processing",
+        message: "Processing images..."
+      }
+    }));
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+    try {
+      const response = await fetch("/api/studio/process-stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageKeys }),
+        signal
+      });
+      if (!response.ok) {
+        const error = await response.json();
+        setProgressState({
+          status: "error",
+          message: error.error || "Processing failed"
+        });
+        return;
+      }
+      const reader = response.body?.getReader();
+      const decoder = new TextDecoder();
+      if (reader) {
+        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 === "start") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    total: data.total
+                  }));
+                } else 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 === "cleanup") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "cleanup",
+                    message: data.message
+                  }));
+                } else if (data.type === "complete") {
+                  setProgressState({
+                    current: data.processed,
+                    total: data.processed,
+                    percent: 100,
+                    status: "complete",
+                    message: `Processed ${data.processed} image${data.processed !== 1 ? "s" : ""}${data.errors > 0 ? `, ${data.errors} error${data.errors !== 1 ? "s" : ""}` : ""}`
+                  });
+                  triggerRefresh();
+                } else if (data.type === "error") {
+                  setProgressState((prev) => ({
+                    ...prev,
+                    status: "error",
+                    message: data.message
+                  }));
+                }
+              } catch {
+              }
+            }
+          }
+        }
+      }
+    } catch (error) {
+      if (signal.aborted) {
+        setProgressState((prev) => ({
+          ...prev,
+          status: "stopped",
+          message: "Processing stopped by user"
+        }));
+      } else {
+        console.error("Processing error:", error);
+        setProgressState({
+          current: 0,
+          total: 0,
+          status: "error",
+          message: "Processing failed. Check console for details."
+        });
+      }
+    } finally {
+      abortControllerRef.current = null;
+    }
+  }, [actionState.actionPaths, triggerRefresh, setProgressState]);
+  const deleteOrphans = useCallback5(async () => {
+    const orphanedFiles = actionState.progressState.orphanedFiles;
+    if (!orphanedFiles || orphanedFiles.length === 0) return;
+    try {
+      const response = await fetch("/api/studio/delete-orphans", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ files: orphanedFiles })
+      });
+      if (response.ok) {
+        setProgressState((prev) => ({
+          ...prev,
+          orphanedFiles: void 0,
+          message: prev.message?.replace(/Found \d+ orphaned thumbnail\(s\).*/, "Orphaned thumbnails deleted.")
+        }));
+        triggerRefresh();
+      } else {
+        const error = await response.json();
+        showError("Delete Failed", error.error || "Failed to delete orphaned files");
+      }
+    } catch (error) {
+      console.error("Delete orphans error:", error);
+      showError("Delete Failed", "Failed to delete orphaned files. Check console for details.");
+    }
+  }, [actionState.progressState.orphanedFiles, triggerRefresh, showError, setProgressState]);
+  return {
+    actionState,
+    setActionState,
+    abortController: abortControllerRef.current,
+    requestDelete,
+    requestMove,
+    requestSync,
+    requestProcess,
+    cancelAction,
+    closeProgress,
+    stopProcessing,
+    confirmDelete,
+    confirmMove,
+    confirmSync,
+    confirmProcess,
+    deleteOrphans
+  };
+}
+
 // src/components/StudioUI.tsx
 import { jsx as jsx11, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 var btnHeight3 = "36px";
@@ -5531,45 +5781,45 @@ var styles11 = {
   `
 };
 function StudioUI({ onClose, isVisible = true }) {
-  const [currentPath, setCurrentPathInternal] = useState10("public");
-  const [selectedItems, setSelectedItems] = useState10(/* @__PURE__ */ new Set());
-  const [lastSelectedPath, setLastSelectedPath] = useState10(null);
-  const [viewMode, setViewMode] = useState10("grid");
-  const [focusedItem, setFocusedItem] = useState10(null);
-  const [meta, setMeta] = useState10(null);
-  const [isLoading, setIsLoading] = useState10(false);
-  const [refreshKey, setRefreshKey] = useState10(0);
-  const [scanRequested, setScanRequested] = useState10(false);
-  const [searchQuery, setSearchQuery] = useState10("");
-  const [error, setError] = useState10(null);
-  const [fileItems, setFileItems] = useState10([]);
-  const [isDragging, setIsDragging] = useState10(false);
-  const triggerRefresh = useCallback5(() => {
+  const [currentPath, setCurrentPathInternal] = useState11("public");
+  const [selectedItems, setSelectedItems] = useState11(/* @__PURE__ */ new Set());
+  const [lastSelectedPath, setLastSelectedPath] = useState11(null);
+  const [viewMode, setViewMode] = useState11("grid");
+  const [focusedItem, setFocusedItem] = useState11(null);
+  const [meta, setMeta] = useState11(null);
+  const [isLoading, setIsLoading] = useState11(false);
+  const [refreshKey, setRefreshKey] = useState11(0);
+  const [scanRequested, setScanRequested] = useState11(false);
+  const [searchQuery, setSearchQuery] = useState11("");
+  const [error, setError] = useState11(null);
+  const [fileItems, setFileItems] = useState11([]);
+  const [isDragging, setIsDragging] = useState11(false);
+  const triggerRefresh = useCallback6(() => {
     setRefreshKey((k) => k + 1);
   }, []);
-  const triggerScan = useCallback5(() => {
+  const triggerScan = useCallback6(() => {
     setScanRequested(true);
   }, []);
-  const clearScanRequest = useCallback5(() => {
+  const clearScanRequest = useCallback6(() => {
     setScanRequested(false);
   }, []);
-  const showError = useCallback5((title, message) => {
+  const showError = useCallback6((title, message) => {
     setError({ title, message });
   }, []);
-  const clearError = useCallback5(() => {
+  const clearError = useCallback6(() => {
     setError(null);
   }, []);
-  const handleDragOver = useCallback5((e) => {
+  const handleDragOver = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(true);
   }, []);
-  const handleDragLeave = useCallback5((e) => {
+  const handleDragLeave = useCallback6((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = useCallback5(async (e) => {
+  const handleDrop = useCallback6(async (e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
@@ -5593,19 +5843,19 @@ function StudioUI({ onClose, isVisible = true }) {
     }
     triggerRefresh();
   }, [currentPath, triggerRefresh]);
-  const navigateUp = useCallback5(() => {
+  const navigateUp = useCallback6(() => {
     if (currentPath === "public") return;
     const parts = currentPath.split("/");
     parts.pop();
     setCurrentPathInternal(parts.join("/") || "public");
     setSelectedItems(/* @__PURE__ */ new Set());
   }, [currentPath]);
-  const setCurrentPath = useCallback5((path) => {
+  const setCurrentPath = useCallback6((path) => {
     setCurrentPathInternal(path);
     setSelectedItems(/* @__PURE__ */ new Set());
     setFocusedItem(null);
   }, []);
-  const toggleSelection = useCallback5((path) => {
+  const toggleSelection = useCallback6((path) => {
     setSelectedItems((prev) => {
       const next = new Set(prev);
       if (next.has(path)) {
@@ -5617,7 +5867,7 @@ function StudioUI({ onClose, isVisible = true }) {
     });
     setLastSelectedPath(path);
   }, []);
-  const selectRange = useCallback5((fromPath, toPath, allItems) => {
+  const selectRange = useCallback6((fromPath, toPath, allItems) => {
     const fromIndex = allItems.findIndex((item) => item.path === fromPath);
     const toIndex = allItems.findIndex((item) => item.path === toPath);
     if (fromIndex === -1 || toIndex === -1) return;
@@ -5632,13 +5882,22 @@ function StudioUI({ onClose, isVisible = true }) {
     });
     setLastSelectedPath(toPath);
   }, []);
-  const selectAll = useCallback5((items) => {
+  const selectAll = useCallback6((items) => {
     setSelectedItems(new Set(items.map((item) => item.path)));
   }, []);
-  const clearSelection = useCallback5(() => {
+  const clearSelection = useCallback6(() => {
     setSelectedItems(/* @__PURE__ */ new Set());
   }, []);
-  const handleKeyDown = useCallback5(
+  const setFocusedItemCallback = useCallback6((item) => {
+    setFocusedItem(item);
+  }, []);
+  const actions = useStudioActions({
+    triggerRefresh,
+    clearSelection,
+    setFocusedItem: setFocusedItemCallback,
+    showError
+  });
+  const handleKeyDown = useCallback6(
     (e) => {
       if (e.key === "Escape") {
         const target = e.target;
@@ -5698,7 +5957,22 @@ function StudioUI({ onClose, isVisible = true }) {
     showError,
     clearError,
     fileItems,
-    setFileItems
+    setFileItems,
+    // Shared action state and handlers
+    actionState: actions.actionState,
+    requestDelete: actions.requestDelete,
+    requestMove: actions.requestMove,
+    requestSync: actions.requestSync,
+    requestProcess: actions.requestProcess,
+    confirmDelete: actions.confirmDelete,
+    confirmMove: actions.confirmMove,
+    confirmSync: actions.confirmSync,
+    confirmProcess: actions.confirmProcess,
+    cancelAction: actions.cancelAction,
+    closeProgress: actions.closeProgress,
+    stopProcessing: actions.stopProcessing,
+    abortController: actions.abortController,
+    deleteOrphans: actions.deleteOrphans
   };
   return /* @__PURE__ */ jsx11(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs11("div", { css: styles11.container, children: [
     /* @__PURE__ */ jsxs11("div", { css: styles11.header, children: [
@@ -5735,7 +6009,57 @@ function StudioUI({ onClose, isVisible = true }) {
       }
     ),
     focusedItem && /* @__PURE__ */ jsx11(StudioDetailView, {}),
-    /* @__PURE__ */ jsx11(ErrorModal, {})
+    /* @__PURE__ */ jsx11(ErrorModal, {}),
+    actions.actionState.showDeleteConfirm && /* @__PURE__ */ jsx11(
+      ConfirmModal,
+      {
+        title: "Delete Files",
+        message: `Are you sure you want to delete ${actions.actionState.actionPaths.length} item${actions.actionState.actionPaths.length !== 1 ? "s" : ""}? This action cannot be undone.`,
+        confirmLabel: "Delete",
+        variant: "danger",
+        onConfirm: actions.confirmDelete,
+        onCancel: actions.cancelAction
+      }
+    ),
+    actions.actionState.showSyncConfirm && /* @__PURE__ */ jsx11(
+      ConfirmModal,
+      {
+        title: "Push to CDN",
+        message: `Push ${actions.actionState.syncImageCount} image${actions.actionState.syncImageCount !== 1 ? "s" : ""} to Cloudflare R2?${actions.actionState.syncHasRemote ? " Remote images will be downloaded first." : ""}${actions.actionState.syncHasLocal ? " After pushing, local files will be deleted." : ""}`,
+        confirmLabel: "Push",
+        onConfirm: actions.confirmSync,
+        onCancel: actions.cancelAction
+      }
+    ),
+    actions.actionState.showProcessConfirm && /* @__PURE__ */ jsx11(
+      ConfirmModal,
+      {
+        title: "Process Images",
+        message: `Generate thumbnails for ${actions.actionState.actionPaths.length} image${actions.actionState.actionPaths.length !== 1 ? "s" : ""}?`,
+        confirmLabel: "Process",
+        onConfirm: actions.confirmProcess,
+        onCancel: actions.cancelAction
+      }
+    ),
+    actions.actionState.showMoveModal && /* @__PURE__ */ jsx11(
+      StudioFolderPicker,
+      {
+        selectedItems: new Set(actions.actionState.actionPaths),
+        currentPath,
+        onMove: (destination) => actions.confirmMove(destination),
+        onCancel: actions.cancelAction
+      }
+    ),
+    actions.actionState.showProgress && /* @__PURE__ */ jsx11(
+      ProgressModal,
+      {
+        title: actions.actionState.progressTitle,
+        progress: actions.actionState.progressState,
+        onStop: actions.stopProcessing,
+        onDeleteOrphans: actions.deleteOrphans,
+        onClose: actions.closeProgress
+      }
+    )
   ] }) });
 }
 function Breadcrumbs({ currentPath, onNavigate }) {
@@ -5780,4 +6104,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-TZB57JJT.mjs.map
+//# sourceMappingURL=StudioUI-K6TIH6LF.mjs.map