@gallop.software/studio 0.1.78 → 0.1.80

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

@@ -1582,6 +1582,10 @@ var styles4 = {
     &:hover {
       border-color: #d0d5dd;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
+      
+      button[title="Rename"] {
+        opacity: 1;
+      }
     }
   `,
   itemSelected: css4`
@@ -1741,6 +1745,35 @@ 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;
@@ -1841,6 +1874,7 @@ 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(() => {
@@ -1909,6 +1943,22 @@ 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 = () => {
@@ -1919,6 +1969,18 @@ 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",
@@ -1958,14 +2020,15 @@ function StudioFileGrid() {
           isSelected: selectedItems.has(item.path),
           onClick: (e) => handleItemClick(item, e),
           onOpen: () => handleOpen(item),
-          onGenerateThumbnail: () => handleGenerateThumbnail(item)
+          onGenerateThumbnail: () => handleGenerateThumbnail(item),
+          onRename: () => setRenameItem(item)
         },
         item.path
       ))
     ] })
   ] });
 }
-function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
+function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
   const [showCopied, setShowCopied] = useState3(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
@@ -2052,7 +2115,21 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
           ) : /* @__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__ */ jsx4("p", { css: styles4.name, title: item.name, children: truncateMiddle(item.name) }),
+          /* @__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" }) })
+              }
+            )
+          ] }),
           isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
             item.fileCount !== void 0 ? `${item.fileCount} files` : "",
             item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
@@ -2398,6 +2475,7 @@ 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(() => {
@@ -2462,6 +2540,22 @@ 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 = () => {
@@ -2471,51 +2565,66 @@ function StudioFileList() {
       selectAll(sortedItems);
     }
   };
-  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;
+  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)
           },
-          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
-      ))
+          item.path
+        ))
+      ] })
     ] })
-  ] }) });
+  ] });
 }
-function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
+function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
   const [showCopied, setShowCopied] = useState4(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
@@ -2579,6 +2688,18 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
                 ]
               }
             ),
+            /* @__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",
               {
@@ -3837,4 +3958,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-PMJDMXUP.mjs.map
+//# sourceMappingURL=StudioUI-VPNL5NMI.mjs.map