@gallop.software/studio 0.1.15 → 0.1.17

package/dist/{StudioUI-QWSXK4R6.mjs → StudioUI-SKFFRT7U.mjs}

@@ -709,14 +709,19 @@ var styles4 = {
       border-color: #a855f7;
     }
   `,
-  checkbox: css4`
+  checkboxWrapper: css4`
     position: absolute;
-    top: 8px;
-    left: 8px;
+    top: 0;
+    left: 0;
     z-index: 10;
+    padding: 8px;
+    cursor: pointer;
+  `,
+  checkbox: css4`
     width: 16px;
     height: 16px;
     accent-color: #9333ea;
+    cursor: pointer;
   `,
   cdnBadge: css4`
     position: absolute;
@@ -741,6 +746,11 @@ var styles4 = {
     height: 64px;
     color: #facc15;
   `,
+  fileIcon: css4`
+    width: 48px;
+    height: 48px;
+    color: #9ca3af;
+  `,
   image: css4`
     max-width: 100%;
     max-height: 100%;
@@ -825,16 +835,6 @@ function StudioFileGrid() {
     if (a.type !== "folder" && b.type === "folder") return 1;
     return a.name.localeCompare(b.name);
   });
-  const files = sortedItems.filter((item) => item.type !== "folder");
-  const allFilesSelected = files.length > 0 && files.every((item) => selectedItems.has(item.path));
-  const someFilesSelected = files.some((item) => selectedItems.has(item.path));
-  const handleSelectAll = () => {
-    if (allFilesSelected) {
-      clearSelection();
-    } else {
-      selectAll(files);
-    }
-  };
   const handleItemClick = (item, e) => {
     if (item.type === "folder") {
       setCurrentPath(item.path);
@@ -846,22 +846,38 @@ function StudioFileGrid() {
       toggleSelection(item.path);
     }
   };
+  const handleCheckboxClick = (item, e) => {
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  };
+  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
+  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
+  const handleSelectAll = () => {
+    if (allItemsSelected) {
+      clearSelection();
+    } else {
+      selectAll(sortedItems);
+    }
+  };
   return /* @__PURE__ */ jsxs4("div", { children: [
-    files.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
+    sortedItems.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
       /* @__PURE__ */ jsx4(
         "input",
         {
           type: "checkbox",
           css: styles4.selectAllCheckbox,
-          checked: allFilesSelected,
+          checked: allItemsSelected,
           ref: (el) => {
-            if (el) el.indeterminate = someFilesSelected && !allFilesSelected;
+            if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
           },
           onChange: handleSelectAll
         }
       ),
       "Select all (",
-      files.length,
+      sortedItems.length,
       ")"
     ] }) }),
     /* @__PURE__ */ jsx4("div", { css: styles4.grid, children: sortedItems.map((item) => /* @__PURE__ */ jsx4(
@@ -869,42 +885,53 @@ function StudioFileGrid() {
       {
         item,
         isSelected: selectedItems.has(item.path),
-        onClick: (e) => handleItemClick(item, e)
+        onClick: (e) => handleItemClick(item, e),
+        onCheckboxClick: (e) => handleCheckboxClick(item, e)
       },
       item.path
     )) })
   ] });
 }
-function GridItem({ item, isSelected, onClick }) {
+function GridItem({ item, isSelected, onClick, onCheckboxClick }) {
   const isFolder = item.type === "folder";
   return /* @__PURE__ */ jsxs4("div", { css: [styles4.item, isSelected && styles4.itemSelected], onClick, children: [
-    !isFolder && /* @__PURE__ */ jsx4(
-      "input",
+    /* @__PURE__ */ jsx4(
+      "div",
       {
-        type: "checkbox",
-        css: styles4.checkbox,
-        checked: isSelected,
-        onChange: () => {
-        },
+        css: styles4.checkboxWrapper,
         onClick: (e) => {
           e.stopPropagation();
-          onClick(e);
-        }
+          onCheckboxClick(e);
+        },
+        children: /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "checkbox",
+            css: styles4.checkbox,
+            checked: isSelected,
+            onChange: () => {
+            }
+          }
+        )
       }
     ),
     item.cdnSynced && /* @__PURE__ */ jsx4("span", { css: styles4.cdnBadge, children: "CDN" }),
-    /* @__PURE__ */ jsx4("div", { css: styles4.content, 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" }) }) : /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx4("div", { css: styles4.content, 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.image,
-        src: item.path.replace("public", ""),
+        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" }) }) }),
     /* @__PURE__ */ jsxs4("div", { css: styles4.label, children: [
       /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: item.name }),
-      item.size && /* @__PURE__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
+      isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
+        item.fileCount !== void 0 ? `${item.fileCount} files` : "",
+        item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
+        item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
+      ] }) : item.size !== void 0 && /* @__PURE__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
     ] })
   ] });
 }
@@ -992,10 +1019,15 @@ var styles5 = {
     padding: 8px 0;
     border-bottom: 1px solid #f3f4f6;
   `,
+  checkboxCell: css5`
+    padding: 8px 12px;
+    cursor: pointer;
+  `,
   checkbox: css5`
     width: 16px;
     height: 16px;
     accent-color: #9333ea;
+    cursor: pointer;
   `,
   nameCell: css5`
     display: flex;
@@ -1012,6 +1044,13 @@ var styles5 = {
     height: 20px;
     color: #9ca3af;
   `,
+  thumbnail: css5`
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    border-radius: 4px;
+    flex-shrink: 0;
+  `,
   name: css5`
     font-size: 14px;
     color: #111827;
@@ -1067,16 +1106,6 @@ function StudioFileList() {
     if (a.type !== "folder" && b.type === "folder") return 1;
     return a.name.localeCompare(b.name);
   });
-  const files = sortedItems.filter((item) => item.type !== "folder");
-  const allFilesSelected = files.length > 0 && files.every((item) => selectedItems.has(item.path));
-  const someFilesSelected = files.some((item) => selectedItems.has(item.path));
-  const handleSelectAll = () => {
-    if (allFilesSelected) {
-      clearSelection();
-    } else {
-      selectAll(files);
-    }
-  };
   const handleItemClick = (item, e) => {
     if (item.type === "folder") {
       setCurrentPath(item.path);
@@ -1088,16 +1117,32 @@ function StudioFileList() {
       toggleSelection(item.path);
     }
   };
+  const handleCheckboxClick = (item, e) => {
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  };
+  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
+  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
+  const handleSelectAll = () => {
+    if (allItemsSelected) {
+      clearSelection();
+    } else {
+      selectAll(sortedItems);
+    }
+  };
   return /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
     /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: files.length > 0 && /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
         "input",
         {
           type: "checkbox",
           css: styles5.checkbox,
-          checked: allFilesSelected,
+          checked: allItemsSelected,
           ref: (el) => {
-            if (el) el.indeterminate = someFilesSelected && !allFilesSelected;
+            if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
           },
           onChange: handleSelectAll
         }
@@ -1112,35 +1157,42 @@ function StudioFileList() {
       {
         item,
         isSelected: selectedItems.has(item.path),
-        onClick: (e) => handleItemClick(item, e)
+        onClick: (e) => handleItemClick(item, e),
+        onCheckboxClick: (e) => handleCheckboxClick(item, e)
       },
       item.path
     )) })
   ] });
 }
-function ListRow({ item, isSelected, onClick }) {
+function ListRow({ item, isSelected, onClick, onCheckboxClick }) {
   const isFolder = item.type === "folder";
   return /* @__PURE__ */ jsxs5("tr", { css: [styles5.row, isSelected && styles5.rowSelected], onClick, children: [
-    /* @__PURE__ */ jsx5("td", { css: styles5.td, children: !isFolder && /* @__PURE__ */ jsx5(
-      "input",
+    /* @__PURE__ */ jsx5(
+      "td",
       {
-        type: "checkbox",
-        css: styles5.checkbox,
-        checked: isSelected,
-        onChange: () => {
-        },
+        css: [styles5.td, styles5.checkboxCell],
         onClick: (e) => {
           e.stopPropagation();
-          onClick(e);
-        }
+          onCheckboxClick(e);
+        },
+        children: /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "checkbox",
+            css: styles5.checkbox,
+            checked: isSelected,
+            onChange: () => {
+            }
+          }
+        )
       }
-    ) }),
+    ),
     /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-      isFolder ? /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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" }) }) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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" }) }),
+      isFolder ? /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx5("img", { css: styles5.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx5("span", { css: styles5.name, children: item.name })
     ] }) }),
-    /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: item.size ? formatFileSize2(item.size) : "--" }),
-    /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
+    /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+    /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
     /* @__PURE__ */ jsx5("td", { css: styles5.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs5("span", { css: styles5.cdnBadge, children: [
       /* @__PURE__ */ jsx5("svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
       "Synced"
@@ -1157,6 +1209,16 @@ function formatFileSize2(bytes) {
 import { useState as useState4 } from "react";
 import { css as css6 } from "@emotion/react";
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
+var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".avi", ".mkv", ".m4v"];
+function isImageFile(filename) {
+  const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
+  return IMAGE_EXTENSIONS.includes(ext);
+}
+function isVideoFile(filename) {
+  const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
+  return VIDEO_EXTENSIONS.includes(ext);
+}
 var styles6 = {
   panel: css6`
     width: 320px;
@@ -1255,6 +1317,27 @@ var styles6 = {
     color: #9ca3af;
     margin: 0;
   `,
+  filePlaceholder: css6`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120px;
+  `,
+  fileIcon: css6`
+    width: 64px;
+    height: 64px;
+    color: #9ca3af;
+  `,
+  folderIcon: css6`
+    width: 64px;
+    height: 64px;
+    color: #facc15;
+  `,
+  video: css6`
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+  `,
   actions: css6`
     margin-top: 16px;
     padding-top: 16px;
@@ -1367,20 +1450,44 @@ function StudioPreview() {
     ] });
   }
   const selectedPath = Array.from(selectedItems)[0];
-  const imageKey = selectedPath.replace(/^public\/images\//, "").replace(/^public\/originals\//, "");
+  const isFolder = !selectedPath.includes(".") || selectedPath.endsWith("/");
+  const filename = selectedPath.split("/").pop() || "";
+  const isImage = isImageFile(filename);
+  const isVideo = isVideoFile(filename);
+  const imageKey = selectedPath.replace(/^public\/images\//, "").replace(/^public\/originals\//, "").replace(/^public\//, "");
   const imageData = meta?.images?.[imageKey];
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    modals,
-    /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
-      /* @__PURE__ */ jsx6("h3", { css: styles6.title, children: "Preview" }),
-      /* @__PURE__ */ jsx6("div", { css: styles6.imageContainer, children: /* @__PURE__ */ jsx6(
+  const renderPreview = () => {
+    if (isFolder) {
+      return /* @__PURE__ */ jsx6("div", { css: styles6.filePlaceholder, children: /* @__PURE__ */ jsx6("svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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" }) }) });
+    }
+    if (isImage) {
+      return /* @__PURE__ */ jsx6(
         "img",
         {
           css: styles6.image,
           src: selectedPath.replace("public", ""),
           alt: "Preview"
         }
-      ) }),
+      );
+    }
+    if (isVideo) {
+      return /* @__PURE__ */ jsx6(
+        "video",
+        {
+          css: styles6.video,
+          src: selectedPath.replace("public", ""),
+          controls: true,
+          muted: true
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx6("div", { css: styles6.filePlaceholder, children: /* @__PURE__ */ jsx6("svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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" }) }) });
+  };
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    modals,
+    /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
+      /* @__PURE__ */ jsx6("h3", { css: styles6.title, children: "Preview" }),
+      /* @__PURE__ */ jsx6("div", { css: styles6.imageContainer, children: renderPreview() }),
       /* @__PURE__ */ jsxs6("div", { css: styles6.info, children: [
         /* @__PURE__ */ jsx6(InfoRow, { label: "Filename", value: selectedPath.split("/").pop() || "" }),
         imageData && /* @__PURE__ */ jsxs6(Fragment2, { children: [
@@ -1884,4 +1991,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-QWSXK4R6.mjs.map
+//# sourceMappingURL=StudioUI-SKFFRT7U.mjs.map