@gallop.software/studio 0.1.53 → 0.1.55

package/dist/{StudioUI-IULAQEIK.mjs → StudioUI-5QGFJQXF.mjs}

@@ -64,6 +64,7 @@ import { useCallback, useRef, useState } from "react";
 import { css as css2, keyframes as keyframes2 } from "@emotion/react";
 
 // src/components/StudioModal.tsx
+import React from "react";
 import { css, keyframes } from "@emotion/react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 var fadeIn = keyframes`
@@ -195,6 +196,70 @@ function ConfirmModal({
     ] })
   ] }) });
 }
+var inputStyles = {
+  input: css`
+    width: 100%;
+    padding: 10px 12px;
+    font-size: ${fontSize.base};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    background: ${colors.surface};
+    color: ${colors.text};
+    margin-top: 12px;
+    transition: all 0.15s ease;
+    
+    &:focus {
+      outline: none;
+      border-color: ${colors.primary};
+      box-shadow: 0 0 0 2px ${colors.primaryLight};
+    }
+    
+    &::placeholder {
+      color: ${colors.textMuted};
+    }
+  `
+};
+function InputModal({
+  title,
+  message,
+  inputLabel,
+  defaultValue = "",
+  placeholder,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel
+}) {
+  const [value, setValue] = React.useState(defaultValue);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim()) {
+      onConfirm(value.trim());
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { css: styles.overlay, onClick: onCancel, children: /* @__PURE__ */ jsx("div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx("div", { css: styles.header, children: /* @__PURE__ */ jsx("h3", { css: styles.title, children: title }) }),
+    /* @__PURE__ */ jsxs("div", { css: styles.body, children: [
+      message && /* @__PURE__ */ jsx("p", { css: styles.message, children: message }),
+      inputLabel && /* @__PURE__ */ jsx("label", { css: styles.message, children: inputLabel }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          css: inputStyles.input,
+          type: "text",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          placeholder,
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { css: styles.footer, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", css: [styles.btn, styles.btnCancel], onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx("button", { type: "submit", css: [styles.btn, styles.btnConfirm], disabled: !value.trim(), children: confirmLabel })
+    ] })
+  ] }) }) });
+}
 function AlertModal({
   title,
   message,
@@ -440,9 +505,14 @@ var styles2 = {
     border-radius: 6px;
     overflow: hidden;
   `,
+  searchWrapper: css2`
+    position: relative;
+    display: flex;
+    align-items: center;
+  `,
   searchInput: css2`
     height: ${btnHeight};
-    padding: 0 12px;
+    padding: 0 32px 0 12px;
     border: 1px solid ${colors.border};
     border-radius: 6px;
     font-size: ${fontSize.base};
@@ -461,6 +531,26 @@ var styles2 = {
       color: ${colors.textMuted};
     }
   `,
+  searchClearBtn: css2`
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: ${colors.textMuted};
+    border: none;
+    padding: 3px;
+    cursor: pointer;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      background: ${colors.text};
+    }
+  `,
   viewBtn: css2`
     height: 100%;
     padding: 0 10px;
@@ -811,6 +901,12 @@ function StudioToolbar() {
   const handleSearch = useCallback((e) => {
     setSearchQuery(e.target.value);
   }, [setSearchQuery]);
+  const handleSearchKeyDown = useCallback((e) => {
+    if (e.key === "Escape") {
+      setSearchQuery("");
+      e.target.blur();
+    }
+  }, [setSearchQuery]);
   const hasSelection = selectedItems.size > 0;
   const hasImagesSelected = Array.from(selectedItems).some(
     (path) => path === "public/images" || path.startsWith("public/images/")
@@ -929,16 +1025,28 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            css: styles2.searchInput,
-            type: "text",
-            placeholder: "Search images...",
-            value: searchQuery,
-            onChange: handleSearch
-          }
-        )
+        /* @__PURE__ */ jsxs2("div", { css: styles2.searchWrapper, children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              css: styles2.searchInput,
+              type: "text",
+              placeholder: "Search images...",
+              value: searchQuery,
+              onChange: handleSearch,
+              onKeyDown: handleSearchKeyDown
+            }
+          ),
+          searchQuery && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              css: styles2.searchClearBtn,
+              onClick: () => setSearchQuery(""),
+              title: "Clear search",
+              children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ] })
       ] }),
       /* @__PURE__ */ jsxs2("div", { css: styles2.right, children: [
         hasSelection && /* @__PURE__ */ jsxs2("span", { css: styles2.selectionCount, children: [
@@ -2365,6 +2473,9 @@ var styles5 = {
 function StudioDetailView() {
   const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
   const [showDeleteConfirm, setShowDeleteConfirm] = useState4(false);
+  const [showRenameModal, setShowRenameModal] = useState4(false);
+  const [showProcessConfirm, setShowProcessConfirm] = useState4(false);
+  const [processProgress, setProcessProgress] = useState4(null);
   const [alertMessage, setAlertMessage] = useState4(null);
   const [showCopied, setShowCopied] = useState4(false);
   if (!focusedItem) return null;
@@ -2380,10 +2491,35 @@ function StudioDetailView() {
     setShowCopied(true);
     setTimeout(() => setShowCopied(false), 1500);
   };
-  const handleRename = () => {
-    const newName = prompt("Enter new name:", focusedItem.name);
+  const handleRename = async (newName) => {
+    setShowRenameModal(false);
     if (newName && newName !== focusedItem.name) {
-      console.log("Rename to:", newName);
+      try {
+        const response = await fetch("/api/studio/rename", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            oldPath: focusedItem.path,
+            newName
+          })
+        });
+        if (response.ok) {
+          triggerRefresh();
+          setFocusedItem(null);
+        } else {
+          const data = await response.json();
+          setAlertMessage({
+            title: "Rename Failed",
+            message: data.error || "Failed to rename file"
+          });
+        }
+      } catch (error) {
+        console.error("Rename error:", error);
+        setAlertMessage({
+          title: "Rename Failed",
+          message: "An error occurred while renaming the file"
+        });
+      }
     }
   };
   const handleDelete = async () => {
@@ -2416,8 +2552,59 @@ function StudioDetailView() {
   const handleSync = () => {
     console.log("Sync to CDN:", focusedItem.path);
   };
-  const handleRegenerate = () => {
-    console.log("Regenerate:", focusedItem.path);
+  const handleProcessImage = async () => {
+    setShowProcessConfirm(false);
+    setProcessProgress({
+      current: 0,
+      total: 1,
+      percent: 0,
+      status: "processing",
+      currentFile: focusedItem.name
+    });
+    try {
+      const response = await fetch("/api/studio/reprocess", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          paths: [focusedItem.path]
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Processing failed");
+      }
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response body");
+      }
+      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));
+              setProcessProgress(data);
+            } catch {
+            }
+          }
+        }
+      }
+      triggerRefresh();
+    } catch (error) {
+      console.error("Process error:", error);
+      setProcessProgress({
+        current: 0,
+        total: 1,
+        percent: 0,
+        status: "error",
+        message: "Failed to process image"
+      });
+    }
   };
   const renderMedia = () => {
     if (isImage) {
@@ -2451,6 +2638,36 @@ function StudioDetailView() {
         onClose: () => setAlertMessage(null)
       }
     ),
+    showRenameModal && /* @__PURE__ */ jsx5(
+      InputModal,
+      {
+        title: "Rename File",
+        message: "Enter a new name for the file:",
+        defaultValue: focusedItem.name,
+        placeholder: "Enter new filename",
+        confirmLabel: "Rename",
+        onConfirm: handleRename,
+        onCancel: () => setShowRenameModal(false)
+      }
+    ),
+    showProcessConfirm && /* @__PURE__ */ jsx5(
+      ConfirmModal,
+      {
+        title: "Process Image",
+        message: `Generate thumbnails for "${focusedItem.name}"?`,
+        confirmLabel: "Process",
+        onConfirm: handleProcessImage,
+        onCancel: () => setShowProcessConfirm(false)
+      }
+    ),
+    processProgress && /* @__PURE__ */ jsx5(
+      ProgressModal,
+      {
+        title: "Processing Image",
+        progress: processProgress,
+        onClose: () => setProcessProgress(null)
+      }
+    ),
     /* @__PURE__ */ jsx5("div", { css: styles5.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs5("div", { css: styles5.container, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs5("div", { css: styles5.main, children: [
         /* @__PURE__ */ jsxs5("div", { css: styles5.headerButtons, children: [
@@ -2492,7 +2709,7 @@ function StudioDetailView() {
             ] })
           ] }),
           /* @__PURE__ */ jsxs5("div", { css: styles5.actions, children: [
-            /* @__PURE__ */ jsxs5("button", { css: styles5.actionBtn, onClick: handleRename, children: [
+            /* @__PURE__ */ jsxs5("button", { css: styles5.actionBtn, onClick: () => setShowRenameModal(true), children: [
               /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) }),
               "Rename"
             ] }),
@@ -2500,9 +2717,9 @@ function StudioDetailView() {
               /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, 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" }) }),
               "Sync to CDN"
             ] }),
-            /* @__PURE__ */ jsxs5("button", { css: styles5.actionBtn, onClick: handleRegenerate, children: [
-              /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }),
-              "Regenerate"
+            /* @__PURE__ */ jsxs5("button", { css: styles5.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
+              /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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"
             ] }),
             /* @__PURE__ */ jsxs5("button", { css: [styles5.actionBtn, styles5.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
               /* @__PURE__ */ jsx5("svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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" }) }),
@@ -3139,4 +3356,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-IULAQEIK.mjs.map
+//# sourceMappingURL=StudioUI-5QGFJQXF.mjs.map