@gallop.software/studio 0.1.52 → 0.1.54

package/dist/{StudioUI-5SYZCU5P.js → StudioUI-22FP5AJL.js}

@@ -1,4 +1,4 @@
-"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";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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";
 
 
 
@@ -7,7 +7,7 @@
 var _chunkUFCWGUAGjs = require('./chunk-UFCWGUAG.js');
 
 // src/components/StudioUI.tsx
-var _react = require('react');
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _react3 = require('@emotion/react');
 
 // src/components/StudioContext.tsx
@@ -65,6 +65,7 @@ function useStudio() {
 
 // src/components/StudioModal.tsx
 
+
 var _jsxruntime = require('@emotion/react/jsx-runtime');
 var fadeIn = _react3.keyframes`
   from { opacity: 0; }
@@ -195,6 +196,70 @@ function ConfirmModal({
     ] })
   ] }) });
 }
+var inputStyles = {
+  input: _react3.css`
+    width: 100%;
+    padding: 10px 12px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
+    border-radius: 6px;
+    background: ${_chunkUFCWGUAGjs.colors.surface};
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    margin-top: 12px;
+    transition: all 0.15s ease;
+    
+    &:focus {
+      outline: none;
+      border-color: ${_chunkUFCWGUAGjs.colors.primary};
+      box-shadow: 0 0 0 2px ${_chunkUFCWGUAGjs.colors.primaryLight};
+    }
+    
+    &::placeholder {
+      color: ${_chunkUFCWGUAGjs.colors.textMuted};
+    }
+  `
+};
+function InputModal({
+  title,
+  message,
+  inputLabel,
+  defaultValue = "",
+  placeholder,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel
+}) {
+  const [value, setValue] = _react2.default.useState(defaultValue);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim()) {
+      onConfirm(value.trim());
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.overlay, onClick: onCancel, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: handleSubmit, 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.jsxs.call(void 0, "div", { css: styles.body, children: [
+      message && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles.message, children: message }),
+      inputLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles.message, children: inputLabel }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          css: inputStyles.input,
+          type: "text",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          placeholder,
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.footer, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", css: [styles.btn, styles.btnCancel], onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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: _react3.css`
+    position: relative;
+    display: flex;
+    align-items: center;
+  `,
   searchInput: _react3.css`
     height: ${btnHeight};
-    padding: 0 12px;
+    padding: 0 32px 0 12px;
     border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
     border-radius: 6px;
     font-size: ${_chunkUFCWGUAGjs.fontSize.base};
@@ -461,6 +531,27 @@ var styles2 = {
       color: ${_chunkUFCWGUAGjs.colors.textMuted};
     }
   `,
+  searchClearBtn: _react3.css`
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    color: ${_chunkUFCWGUAGjs.colors.textMuted};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      color: ${_chunkUFCWGUAGjs.colors.text};
+      background: ${_chunkUFCWGUAGjs.colors.surfaceHover};
+    }
+  `,
   viewBtn: _react3.css`
     height: 100%;
     padding: 0 10px;
@@ -929,16 +1020,27 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          "input",
-          {
-            css: styles2.searchInput,
-            type: "text",
-            placeholder: "Search images...",
-            value: searchQuery,
-            onChange: handleSearch
-          }
-        )
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles2.searchWrapper, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              css: styles2.searchInput,
+              type: "text",
+              placeholder: "Search images...",
+              value: searchQuery,
+              onChange: handleSearch
+            }
+          ),
+          searchQuery && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              css: styles2.searchClearBtn,
+              onClick: () => setSearchQuery(""),
+              title: "Clear search",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles2.right, children: [
         hasSelection && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles2.selectionCount, children: [
@@ -1685,6 +1787,7 @@ var styles4 = {
     flex-shrink: 0;
   `,
   copyBtn: _react3.css`
+    position: relative;
     flex-shrink: 0;
     height: 32px;
     width: 32px;
@@ -2364,6 +2467,9 @@ var styles5 = {
 function StudioDetailView() {
   const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
   const [showDeleteConfirm, setShowDeleteConfirm] = _react.useState.call(void 0, false);
+  const [showRenameModal, setShowRenameModal] = _react.useState.call(void 0, false);
+  const [showProcessConfirm, setShowProcessConfirm] = _react.useState.call(void 0, false);
+  const [processProgress, setProcessProgress] = _react.useState.call(void 0, null);
   const [alertMessage, setAlertMessage] = _react.useState.call(void 0, null);
   const [showCopied, setShowCopied] = _react.useState.call(void 0, false);
   if (!focusedItem) return null;
@@ -2379,10 +2485,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 () => {
@@ -2415,8 +2546,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 = _optionalChain([response, 'access', _18 => _18.body, 'optionalAccess', _19 => _19.getReader, 'call', _20 => _20()]);
+      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 (e3) {
+            }
+          }
+        }
+      }
+      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) {
@@ -2450,6 +2632,36 @@ function StudioDetailView() {
         onClose: () => setAlertMessage(null)
       }
     ),
+    showRenameModal && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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__ */ _jsxruntime.jsx.call(void 0, 
+      ConfirmModal,
+      {
+        title: "Process Image",
+        message: `Generate thumbnails for "${focusedItem.name}"?`,
+        confirmLabel: "Process",
+        onConfirm: handleProcessImage,
+        onCancel: () => setShowProcessConfirm(false)
+      }
+    ),
+    processProgress && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ProgressModal,
+      {
+        title: "Processing Image",
+        progress: processProgress,
+        onClose: () => setProcessProgress(null)
+      }
+    ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.overlay, onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.container, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.main, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.headerButtons, children: [
@@ -2491,7 +2703,7 @@ function StudioDetailView() {
             ] })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.actions, children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: handleRename, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: () => setShowRenameModal(true), children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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"
             ] }),
@@ -2499,9 +2711,9 @@ function StudioDetailView() {
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: handleRegenerate, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles5.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "button", { css: [styles5.actionBtn, styles5.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
@@ -3138,4 +3350,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-5SYZCU5P.js.map
+//# sourceMappingURL=StudioUI-22FP5AJL.js.map