@gallop.software/studio 0.1.80 → 0.1.81

package/dist/{StudioUI-VPNL5NMI.mjs → StudioUI-SS3YMS53.mjs}

@@ -891,6 +891,7 @@ function StudioToolbar() {
   const [imagesToProcess, setImagesToProcess] = useState2([]);
   const [alertMessage, setAlertMessage] = useState2(null);
   const [showNewFolderModal, setShowNewFolderModal] = useState2(false);
+  const [showRenameFolderModal, setShowRenameFolderModal] = useState2(false);
   const [showMoveModal, setShowMoveModal] = useState2(false);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = useCallback(() => {
@@ -947,13 +948,13 @@ function StudioToolbar() {
   const handleProcessImages = useCallback(async () => {
     const hasSelection2 = selectedItems.size > 0;
     if (hasSelection2) {
-      const selectedPaths = Array.from(selectedItems);
+      const selectedPaths2 = Array.from(selectedItems);
       const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
-      const selectedImagePaths = selectedPaths.filter((p) => {
+      const selectedImagePaths = selectedPaths2.filter((p) => {
         const ext = p.split(".").pop()?.toLowerCase() || "";
         return imageExtensions.includes(ext);
       });
-      const selectedFolders = selectedPaths.filter((p) => !p.includes(".") || p.endsWith("/"));
+      const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
       if (selectedFolders.length > 0) {
         try {
           const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(","))}`);
@@ -1263,6 +1264,27 @@ function StudioToolbar() {
     }
   }, [setSearchQuery]);
   const hasSelection = selectedItems.size > 0;
+  const selectedPaths = Array.from(selectedItems);
+  const singleFolderSelected = selectedPaths.length === 1 && !selectedPaths[0].includes(".");
+  const selectedFolderPath = singleFolderSelected ? selectedPaths[0] : null;
+  const selectedFolderName = selectedFolderPath ? selectedFolderPath.split("/").pop() || "" : "";
+  const handleRenameFolder = useCallback(async (newName) => {
+    if (!selectedFolderPath) return;
+    setShowRenameFolderModal(false);
+    try {
+      const response = await fetch("/api/studio/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ oldPath: selectedFolderPath, newName })
+      });
+      if (response.ok) {
+        clearSelection();
+        triggerRefresh();
+      }
+    } catch (error) {
+      console.error("Failed to rename folder:", error);
+    }
+  }, [selectedFolderPath, clearSelection, triggerRefresh]);
   if (focusedItem) {
     return null;
   }
@@ -1328,6 +1350,18 @@ function StudioToolbar() {
         onCancel: () => setShowMoveModal(false)
       }
     ),
+    showRenameFolderModal && selectedFolderPath && /* @__PURE__ */ jsx3(
+      InputModal,
+      {
+        title: "Rename Folder",
+        message: "Enter a new name for the folder:",
+        placeholder: selectedFolderName,
+        defaultValue: selectedFolderName,
+        confirmLabel: "Rename",
+        onConfirm: handleRenameFolder,
+        onCancel: () => setShowRenameFolderModal(false)
+      }
+    ),
     alertMessage && /* @__PURE__ */ jsx3(
       AlertModal,
       {
@@ -1365,12 +1399,12 @@ function StudioToolbar() {
           "button",
           {
             css: styles3.btn,
-            onClick: () => setShowNewFolderModal(true),
-            disabled: isInImagesFolder,
-            title: isInImagesFolder ? "Cannot create folders in protected images folder" : void 0,
+            onClick: () => singleFolderSelected ? setShowRenameFolderModal(true) : setShowNewFolderModal(true),
+            disabled: isInImagesFolder && !singleFolderSelected,
+            title: isInImagesFolder && !singleFolderSelected ? "Cannot create folders in protected images folder" : void 0,
             children: [
-              /* @__PURE__ */ jsx3(FolderPlusIcon, {}),
-              "New Folder"
+              singleFolderSelected ? /* @__PURE__ */ jsx3(RenameIcon, {}) : /* @__PURE__ */ jsx3(FolderPlusIcon, {}),
+              singleFolderSelected ? "Rename Folder" : "New Folder"
             ]
           }
         ),
@@ -1497,6 +1531,9 @@ function TrashIcon() {
 function FolderPlusIcon() {
   return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" }) });
 }
+function RenameIcon() {
+  return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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" }) });
+}
 function MoveIcon() {
   return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) });
 }
@@ -1582,10 +1619,6 @@ var styles4 = {
     &:hover {
       border-color: #d0d5dd;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
-      
-      button[title="Rename"] {
-        opacity: 1;
-      }
     }
   `,
   itemSelected: css4`
@@ -1745,35 +1778,6 @@ var styles4 = {
       color: ${colors.text};
     }
   `,
-  nameRow: css4`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  `,
-  renameBtn: css4`
-    flex-shrink: 0;
-    height: 20px;
-    width: 20px;
-    color: ${colors.textMuted};
-    background: transparent;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    
-    &:hover {
-      color: ${colors.text};
-    }
-  `,
-  renameIcon: css4`
-    width: 14px;
-    height: 14px;
-  `,
   copyIcon: css4`
     width: 18px;
     height: 18px;
@@ -1874,7 +1878,6 @@ function StudioFileGrid() {
   const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
   const [items, setItems] = useState3([]);
   const [loading, setLoading] = useState3(true);
-  const [renameItem, setRenameItem] = useState3(null);
   const isInitialLoad = useRef2(true);
   const lastPath = useRef2(currentPath);
   useEffect2(() => {
@@ -1943,22 +1946,6 @@ function StudioFileGrid() {
       console.error("Failed to generate thumbnail:", error);
     }
   };
-  const handleRename = async (newName) => {
-    if (!renameItem) return;
-    setRenameItem(null);
-    try {
-      const response = await fetch("/api/studio/rename", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ oldPath: renameItem.path, newName })
-      });
-      if (response.ok) {
-        triggerRefresh();
-      }
-    } catch (error) {
-      console.error("Failed to rename:", error);
-    }
-  };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
   const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
   const handleSelectAll = () => {
@@ -1969,18 +1956,6 @@ function StudioFileGrid() {
     }
   };
   return /* @__PURE__ */ jsxs4("div", { children: [
-    renameItem && /* @__PURE__ */ jsx4(
-      InputModal,
-      {
-        title: renameItem.type === "folder" ? "Rename Folder" : "Rename File",
-        message: "Enter a new name:",
-        placeholder: renameItem.name,
-        defaultValue: renameItem.name,
-        confirmLabel: "Rename",
-        onConfirm: handleRename,
-        onCancel: () => setRenameItem(null)
-      }
-    ),
     sortedItems.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
       /* @__PURE__ */ jsx4(
         "input",
@@ -2020,15 +1995,14 @@ function StudioFileGrid() {
           isSelected: selectedItems.has(item.path),
           onClick: (e) => handleItemClick(item, e),
           onOpen: () => handleOpen(item),
-          onGenerateThumbnail: () => handleGenerateThumbnail(item),
-          onRename: () => setRenameItem(item)
+          onGenerateThumbnail: () => handleGenerateThumbnail(item)
         },
         item.path
       ))
     ] })
   ] });
 }
-function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
+function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
   const [showCopied, setShowCopied] = useState3(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
@@ -2115,21 +2089,7 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRe
           ) : /* @__PURE__ */ jsx4("svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4("div", { css: styles4.label, children: /* @__PURE__ */ jsx4("div", { css: styles4.labelRow, children: /* @__PURE__ */ jsxs4("div", { css: styles4.labelText, children: [
-          /* @__PURE__ */ jsxs4("div", { css: styles4.nameRow, children: [
-            /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: truncateMiddle(item.name) }),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                css: styles4.renameBtn,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRename();
-                },
-                title: "Rename",
-                children: /* @__PURE__ */ jsx4("svg", { css: styles4.renameIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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" }) })
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: truncateMiddle(item.name) }),
           isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
             item.fileCount !== void 0 ? `${item.fileCount} files` : "",
             item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
@@ -2475,7 +2435,6 @@ function StudioFileList() {
   const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
   const [items, setItems] = useState4([]);
   const [loading, setLoading] = useState4(true);
-  const [renameItem, setRenameItem] = useState4(null);
   const isInitialLoad = useRef3(true);
   const lastPath = useRef3(currentPath);
   useEffect3(() => {
@@ -2540,22 +2499,6 @@ function StudioFileList() {
       console.error("Failed to generate thumbnail:", error);
     }
   };
-  const handleRename = async (newName) => {
-    if (!renameItem) return;
-    setRenameItem(null);
-    try {
-      const response = await fetch("/api/studio/rename", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ oldPath: renameItem.path, newName })
-      });
-      if (response.ok) {
-        triggerRefresh();
-      }
-    } catch (error) {
-      console.error("Failed to rename:", error);
-    }
-  };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
   const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
   const handleSelectAll = () => {
@@ -2565,66 +2508,51 @@ function StudioFileList() {
       selectAll(sortedItems);
     }
   };
-  return /* @__PURE__ */ jsxs5("div", { css: styles5.tableWrapper, children: [
-    renameItem && /* @__PURE__ */ jsx5(
-      InputModal,
-      {
-        title: renameItem.type === "folder" ? "Rename Folder" : "Rename File",
-        message: "Enter a new name:",
-        placeholder: renameItem.name,
-        defaultValue: renameItem.name,
-        confirmLabel: "Rename",
-        onConfirm: handleRename,
-        onCancel: () => setRenameItem(null)
-      }
-    ),
-    /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
-      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
-          "input",
-          {
-            type: "checkbox",
-            css: styles5.checkbox,
-            checked: allItemsSelected,
-            ref: (el) => {
-              if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
-            },
-            onChange: handleSelectAll
-          }
-        ) }),
-        /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
-      ] }) }),
-      /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
-        !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
-          /* @__PURE__ */ jsx5("td", { css: styles5.td }),
-          /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-            /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
-            /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
-          ] }) }),
-          /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
-          /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
-          /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
-        ] }),
-        sortedItems.map((item) => /* @__PURE__ */ jsx5(
-          ListRow,
-          {
-            item,
-            isSelected: selectedItems.has(item.path),
-            onClick: (e) => handleItemClick(item, e),
-            onOpen: () => handleOpen(item),
-            onGenerateThumbnail: () => handleGenerateThumbnail(item),
-            onRename: () => setRenameItem(item)
+  return /* @__PURE__ */ jsx5("div", { css: styles5.tableWrapper, children: /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "checkbox",
+          css: styles5.checkbox,
+          checked: allItemsSelected,
+          ref: (el) => {
+            if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
           },
-          item.path
-        ))
-      ] })
+          onChange: handleSelectAll
+        }
+      ) }),
+      /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
+    ] }) }),
+    /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
+      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
+        /* @__PURE__ */ jsx5("td", { css: styles5.td }),
+        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
+          /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+          /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
+        ] }) }),
+        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
+        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
+        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
+      ] }),
+      sortedItems.map((item) => /* @__PURE__ */ jsx5(
+        ListRow,
+        {
+          item,
+          isSelected: selectedItems.has(item.path),
+          onClick: (e) => handleItemClick(item, e),
+          onOpen: () => handleOpen(item),
+          onGenerateThumbnail: () => handleGenerateThumbnail(item)
+        },
+        item.path
+      ))
     ] })
-  ] });
+  ] }) });
 }
-function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
+function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
   const [showCopied, setShowCopied] = useState4(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
@@ -2688,18 +2616,6 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRen
                 ]
               }
             ),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                css: styles5.copyBtn,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRename();
-                },
-                title: "Rename",
-                children: /* @__PURE__ */ jsx5("svg", { css: styles5.copyIcon, 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" }) })
-              }
-            ),
             /* @__PURE__ */ jsx5(
               "button",
               {
@@ -3958,4 +3874,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-VPNL5NMI.mjs.map
+//# sourceMappingURL=StudioUI-SS3YMS53.mjs.map