@gallop.software/studio 0.1.33 → 0.1.35

package/dist/{StudioUI-IIVOARWK.mjs → StudioUI-Y4BA3RW5.mjs}

@@ -1100,6 +1100,36 @@ var styles3 = {
     object-fit: contain;
     border-radius: 4px;
   `,
+  noThumbnail: css3`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 16px;
+    background: ${colors.background};
+    border: 2px dashed ${colors.border};
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    width: 80%;
+    height: 60%;
+    
+    &:hover {
+      border-color: ${colors.primary};
+      background: ${colors.surfaceHover};
+    }
+  `,
+  noThumbnailIcon: css3`
+    width: 32px;
+    height: 32px;
+    color: ${colors.textMuted};
+  `,
+  noThumbnailText: css3`
+    font-size: ${fontSize.xs};
+    color: ${colors.textMuted};
+    text-align: center;
+  `,
   label: css3`
     padding: 10px 12px;
     background-color: ${colors.surface};
@@ -1179,7 +1209,7 @@ var styles3 = {
   `
 };
 function StudioFileGrid() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem } = useStudio();
+  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh } = useStudio();
   const [items, setItems] = useState2([]);
   const [loading, setLoading] = useState2(true);
   const isInitialLoad = useRef2(true);
@@ -1235,6 +1265,19 @@ function StudioFileGrid() {
       setFocusedItem(item);
     }
   };
+  const handleGenerateThumbnail = async (item) => {
+    try {
+      const imageKey = item.path.replace(/^public\//, "");
+      await fetch("/api/studio/reprocess", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageKeys: [imageKey] })
+      });
+      triggerRefresh();
+    } catch (error) {
+      console.error("Failed to generate thumbnail:", error);
+    }
+  };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
   const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
   const handleSelectAll = () => {
@@ -1271,7 +1314,7 @@ function StudioFileGrid() {
           children: [
             /* @__PURE__ */ jsx3("div", { css: styles3.content, children: /* @__PURE__ */ jsx3("svg", { css: styles3.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
             /* @__PURE__ */ jsxs3("div", { css: styles3.label, children: [
-              /* @__PURE__ */ jsx3("p", { css: styles3.name, children: getParentPath(currentPath) }),
+              /* @__PURE__ */ jsx3("p", { css: styles3.name, children: ".." }),
               /* @__PURE__ */ jsx3("p", { css: styles3.size, children: "Parent folder" })
             ] })
           ]
@@ -1283,15 +1326,17 @@ function StudioFileGrid() {
           item,
           isSelected: selectedItems.has(item.path),
           onClick: (e) => handleItemClick(item, e),
-          onOpen: () => handleOpen(item)
+          onOpen: () => handleOpen(item),
+          onGenerateThumbnail: () => handleGenerateThumbnail(item)
         },
         item.path
       ))
     ] })
   ] });
 }
-function GridItem({ item, isSelected, onClick, onOpen }) {
+function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
   const isFolder = item.type === "folder";
+  const isImage = !isFolder && item.thumbnail !== void 0;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -1315,7 +1360,7 @@ function GridItem({ item, isSelected, onClick, onOpen }) {
           }
         ),
         item.cdnSynced && /* @__PURE__ */ jsx3("span", { css: styles3.cdnBadge, children: "CDN" }),
-        /* @__PURE__ */ jsx3("div", { css: styles3.content, children: isFolder ? /* @__PURE__ */ jsx3("svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : item.thumbnail ? /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx3("div", { css: styles3.content, children: isFolder ? /* @__PURE__ */ jsx3("svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx3(
           "img",
           {
             css: styles3.image,
@@ -1323,6 +1368,20 @@ function GridItem({ item, isSelected, onClick, onOpen }) {
             alt: item.name,
             loading: "lazy"
           }
+        ) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            css: styles3.noThumbnail,
+            onClick: (e) => {
+              e.stopPropagation();
+              onGenerateThumbnail();
+            },
+            title: "Generate thumbnail",
+            children: [
+              /* @__PURE__ */ jsx3("svg", { css: styles3.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, 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" }) }),
+              /* @__PURE__ */ jsx3("span", { css: styles3.noThumbnailText, children: "Generate" })
+            ]
+          }
         ) : /* @__PURE__ */ jsx3("svg", { css: styles3.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx3("div", { css: styles3.label, children: /* @__PURE__ */ jsxs3("div", { css: styles3.labelRow, children: [
           /* @__PURE__ */ jsxs3("div", { css: styles3.labelText, children: [
@@ -1354,11 +1413,6 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function getParentPath(path) {
-  const parts = path.split("/");
-  parts.pop();
-  return parts.join("/") + "/";
-}
 function truncateMiddle(str, maxLength = 24) {
   if (str.length <= maxLength) return str;
   const lastDot = str.lastIndexOf(".");
@@ -1501,12 +1555,37 @@ var styles4 = {
     flex-shrink: 0;
   `,
   thumbnail: css4`
+    max-width: 48px;
+    max-height: 36px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: 4px;
+    flex-shrink: 0;
+    border: 1px solid ${colors.borderLight};
+  `,
+  noThumbnail: css4`
     width: 36px;
     height: 36px;
-    object-fit: cover;
-    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${colors.background};
+    border: 1px dashed ${colors.border};
+    border-radius: 4px;
     flex-shrink: 0;
-    border: 1px solid ${colors.borderLight};
+    cursor: pointer;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      border-color: ${colors.primary};
+      background: ${colors.surfaceHover};
+    }
+  `,
+  noThumbnailIcon: css4`
+    width: 16px;
+    height: 16px;
+    color: ${colors.textMuted};
   `,
   name: css4`
     font-size: ${fontSize.base};
@@ -1556,7 +1635,7 @@ var styles4 = {
   `
 };
 function StudioFileList() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem } = useStudio();
+  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh } = useStudio();
   const [items, setItems] = useState3([]);
   const [loading, setLoading] = useState3(true);
   const isInitialLoad = useRef3(true);
@@ -1608,6 +1687,19 @@ function StudioFileList() {
       setFocusedItem(item);
     }
   };
+  const handleGenerateThumbnail = async (item) => {
+    try {
+      const imageKey = item.path.replace(/^public\//, "");
+      await fetch("/api/studio/reprocess", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageKeys: [imageKey] })
+      });
+      triggerRefresh();
+    } catch (error) {
+      console.error("Failed to generate thumbnail:", error);
+    }
+  };
   const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
   const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
   const handleSelectAll = () => {
@@ -1641,7 +1733,7 @@ function StudioFileList() {
         /* @__PURE__ */ jsx4("td", { css: styles4.td }),
         /* @__PURE__ */ jsx4("td", { css: styles4.td, children: /* @__PURE__ */ jsxs4("div", { css: styles4.nameCell, children: [
           /* @__PURE__ */ jsx4("svg", { css: styles4.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
-          /* @__PURE__ */ jsx4("span", { css: styles4.name, children: getParentPath2(currentPath) })
+          /* @__PURE__ */ jsx4("span", { css: styles4.name, children: ".." })
         ] }) }),
         /* @__PURE__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: "--" }),
         /* @__PURE__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: "Parent folder" }),
@@ -1653,15 +1745,17 @@ function StudioFileList() {
           item,
           isSelected: selectedItems.has(item.path),
           onClick: (e) => handleItemClick(item, e),
-          onOpen: () => handleOpen(item)
+          onOpen: () => handleOpen(item),
+          onGenerateThumbnail: () => handleGenerateThumbnail(item)
         },
         item.path
       ))
     ] })
   ] }) });
 }
-function ListRow({ item, isSelected, onClick, onOpen }) {
+function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
   const isFolder = item.type === "folder";
+  const isImage = !isFolder && item.thumbnail !== void 0;
   return /* @__PURE__ */ jsxs4(
     "tr",
     {
@@ -1685,7 +1779,18 @@ function ListRow({ item, isSelected, onClick, onOpen }) {
           }
         ),
         /* @__PURE__ */ jsx4("td", { css: styles4.td, children: /* @__PURE__ */ jsxs4("div", { css: styles4.nameCell, children: [
-          isFolder ? /* @__PURE__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : item.thumbnail ? /* @__PURE__ */ jsx4("img", { css: styles4.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__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" }) }),
+          isFolder ? /* @__PURE__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx4("img", { css: styles4.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsx4(
+            "button",
+            {
+              css: styles4.noThumbnail,
+              onClick: (e) => {
+                e.stopPropagation();
+                onGenerateThumbnail();
+              },
+              title: "Generate thumbnail",
+              children: /* @__PURE__ */ jsx4("svg", { css: styles4.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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" }) })
+            }
+          ) : /* @__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("span", { css: styles4.name, title: item.name, children: truncateMiddle2(item.name) }),
           /* @__PURE__ */ jsx4(
             "button",
@@ -1714,11 +1819,6 @@ function formatFileSize2(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-function getParentPath2(path) {
-  const parts = path.split("/");
-  parts.pop();
-  return parts.join("/") + "/";
-}
 function truncateMiddle2(str, maxLength = 32) {
   if (str.length <= maxLength) return str;
   const lastDot = str.lastIndexOf(".");
@@ -2021,6 +2121,10 @@ function StudioDetailView() {
               /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "Name" }),
               /* @__PURE__ */ jsx5("span", { css: styles5.infoValueWrap, children: focusedItem.name })
             ] }),
+            /* @__PURE__ */ jsxs5("div", { css: styles5.infoRow, children: [
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "Path" }),
+              /* @__PURE__ */ jsx5("span", { css: styles5.infoValueWrap, children: focusedItem.path.replace(/^public\//, "") })
+            ] }),
             focusedItem.size !== void 0 && /* @__PURE__ */ jsxs5("div", { css: styles5.infoRow, children: [
               /* @__PURE__ */ jsx5("span", { css: styles5.infoLabel, children: "Size" }),
               /* @__PURE__ */ jsx5("span", { css: styles5.infoValue, children: formatFileSize3(focusedItem.size) })
@@ -2537,4 +2641,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-IIVOARWK.mjs.map
+//# sourceMappingURL=StudioUI-Y4BA3RW5.mjs.map