@gallop.software/studio 0.1.83 → 0.1.85

package/dist/{StudioUI-XV7HCEAF.mjs → StudioUI-PPX6VKNU.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-HXE6XCG2.mjs";
 
 // src/components/StudioUI.tsx
-import { useEffect as useEffect3, useCallback as useCallback3, useState as useState8 } from "react";
+import { useEffect as useEffect3, useCallback as useCallback3, useState as useState9 } from "react";
 import { css as css10 } from "@emotion/react";
 
 // src/components/StudioContext.tsx
@@ -65,7 +65,7 @@ function useStudio() {
 }
 
 // src/components/StudioToolbar.tsx
-import { useCallback, useRef, useState as useState2 } from "react";
+import { useCallback, useRef, useState as useState3 } from "react";
 import { css as css4, keyframes as keyframes3 } from "@emotion/react";
 
 // src/components/StudioModal.tsx
@@ -675,8 +675,15 @@ function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }) {
 }
 
 // src/components/R2SetupModal.tsx
+import { useState as useState2 } from "react";
 import { css as css3 } from "@emotion/react";
 import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var ENV_TEMPLATE = `CLOUDFLARE_R2_ACCOUNT_ID=your_account_id
+CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key
+CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_key
+CLOUDFLARE_R2_BUCKET_NAME=your_bucket_name
+CLOUDFLARE_R2_PUBLIC_URL=https://pub-xxx.r2.dev
+NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_URL=https://pub-xxx.r2.dev`;
 var styles3 = {
   overlay: css3`
     position: fixed;
@@ -793,12 +800,16 @@ var styles3 = {
       text-decoration: underline;
     }
   `,
+  envVarsWrapper: css3`
+    position: relative;
+    margin-top: 20px;
+  `,
   envVars: css3`
     background: ${colors.background};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 16px;
-    margin-top: 20px;
+    padding-right: 48px;
     font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
     font-size: 13px;
     line-height: 1.8;
@@ -814,6 +825,57 @@ var styles3 = {
   envValue: css3`
     color: ${colors.textSecondary};
   `,
+  copyBtn: css3`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    cursor: pointer;
+    color: ${colors.textMuted};
+    transition: all 0.15s ease;
+    
+    &:hover {
+      background: ${colors.surfaceHover};
+      color: ${colors.text};
+      border-color: #d0d5dd;
+    }
+  `,
+  copyIcon: css3`
+    width: 16px;
+    height: 16px;
+  `,
+  copiedTooltip: css3`
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    background: #1a1f36;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    margin-right: 6px;
+    pointer-events: none;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      right: -4px;
+      top: 50%;
+      transform: translateY(-50%);
+      border-left: 4px solid #1a1f36;
+      border-top: 4px solid transparent;
+      border-bottom: 4px solid transparent;
+    }
+  `,
   footer: css3`
     padding: 16px 24px;
     border-top: 1px solid ${colors.border};
@@ -862,6 +924,16 @@ var styles3 = {
   `
 };
 function R2SetupModal({ isOpen, onClose }) {
+  const [copied, setCopied] = useState2(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(ENV_TEMPLATE);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
   if (!isOpen) return null;
   return /* @__PURE__ */ jsx3("div", { css: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs3("div", { css: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs3("div", { css: styles3.header, children: [
@@ -926,31 +998,42 @@ function R2SetupModal({ isOpen, onClose }) {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { css: styles3.envVars, children: [
-        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
-          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
-          "=",
-          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_account_id" })
-        ] }),
-        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
-          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
-          "=",
-          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_access_key" })
-        ] }),
-        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
-          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
-          "=",
-          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_secret_key" })
-        ] }),
-        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
-          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
-          "=",
-          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_bucket_name" })
+      /* @__PURE__ */ jsxs3("div", { css: styles3.envVarsWrapper, children: [
+        /* @__PURE__ */ jsxs3("div", { css: styles3.envVars, children: [
+          /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+            /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+            "=",
+            /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_account_id" })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+            /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+            "=",
+            /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_access_key" })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+            /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+            "=",
+            /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_secret_key" })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+            /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+            "=",
+            /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_bucket_name" })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+            /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_PUBLIC_URL" }),
+            "=",
+            /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+            /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "NEXT_PUBLIC_CLOUDFLARE_R2_PUBLIC_URL" }),
+            "=",
+            /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
-          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_PUBLIC_URL" }),
-          "=",
-          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
+        /* @__PURE__ */ jsxs3("button", { css: styles3.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
+          copied && /* @__PURE__ */ jsx3("span", { css: styles3.copiedTooltip, children: "Copied!" }),
+          /* @__PURE__ */ jsx3("svg", { css: styles3.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })
         ] })
       ] })
     ] }),
@@ -1178,27 +1261,27 @@ function StudioToolbar() {
   const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem } = useStudio();
   const fileInputRef = useRef(null);
   const abortControllerRef = useRef(null);
-  const [uploading, setUploading] = useState2(false);
-  const [refreshing, setRefreshing] = useState2(false);
-  const [processing, setProcessing] = useState2(false);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState2(false);
-  const [showProcessConfirm, setShowProcessConfirm] = useState2(false);
-  const [showProgress, setShowProgress] = useState2(false);
-  const [progressState, setProgressState] = useState2({
+  const [uploading, setUploading] = useState3(false);
+  const [refreshing, setRefreshing] = useState3(false);
+  const [processing, setProcessing] = useState3(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState3(false);
+  const [showProcessConfirm, setShowProcessConfirm] = useState3(false);
+  const [showProgress, setShowProgress] = useState3(false);
+  const [progressState, setProgressState] = useState3({
     current: 0,
     total: 0,
     percent: 0,
     status: "processing"
   });
-  const [processCount, setProcessCount] = useState2(0);
-  const [processMode, setProcessMode] = useState2("all");
-  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 [showR2SetupModal, setShowR2SetupModal] = useState2(false);
-  const [syncing, setSyncing] = useState2(false);
+  const [processCount, setProcessCount] = useState3(0);
+  const [processMode, setProcessMode] = useState3("all");
+  const [imagesToProcess, setImagesToProcess] = useState3([]);
+  const [alertMessage, setAlertMessage] = useState3(null);
+  const [showNewFolderModal, setShowNewFolderModal] = useState3(false);
+  const [showRenameFolderModal, setShowRenameFolderModal] = useState3(false);
+  const [showMoveModal, setShowMoveModal] = useState3(false);
+  const [showR2SetupModal, setShowR2SetupModal] = useState3(false);
+  const [syncing, setSyncing] = useState3(false);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = useCallback(() => {
     fileInputRef.current?.click();
@@ -1915,11 +1998,11 @@ function ImageStackIcon() {
 }
 
 // src/components/StudioFileGrid.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 import { css as css5, keyframes as keyframes4 } from "@emotion/react";
 
 // src/hooks/useFileList.ts
-import { useEffect as useEffect2, useState as useState3, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect2, useState as useState4, useRef as useRef2, useCallback as useCallback2 } from "react";
 
 // src/lib/api.ts
 var StudioApiClient = class {
@@ -2018,8 +2101,8 @@ function useFileList() {
     searchQuery,
     showError
   } = useStudio();
-  const [items, setItems] = useState3([]);
-  const [loading, setLoading] = useState3(true);
+  const [items, setItems] = useState4([]);
+  const [loading, setLoading] = useState4(true);
   const isInitialLoad = useRef2(true);
   const lastPath = useRef2(currentPath);
   useEffect2(() => {
@@ -2499,7 +2582,7 @@ function StudioFileGrid() {
   ] });
 }
 function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
-  const [showCopied, setShowCopied] = useState4(false);
+  const [showCopied, setShowCopied] = useState5(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
   const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
@@ -2616,7 +2699,7 @@ function truncateMiddle(str, maxLength = 24) {
 }
 
 // src/components/StudioFileList.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { css as css6, keyframes as keyframes5 } from "@emotion/react";
 import { jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var spin3 = keyframes5`
@@ -2993,7 +3076,7 @@ function StudioFileList() {
   ] }) });
 }
 function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
-  const [showCopied, setShowCopied] = useState5(false);
+  const [showCopied, setShowCopied] = useState6(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
   const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
@@ -3099,7 +3182,7 @@ function truncateMiddle2(str, maxLength = 32) {
 }
 
 // src/components/StudioDetailView.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { css as css7 } from "@emotion/react";
 import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
@@ -3360,14 +3443,14 @@ var styles7 = {
 };
 function StudioDetailView() {
   const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState6(false);
-  const [showRenameModal, setShowRenameModal] = useState6(false);
-  const [showProcessConfirm, setShowProcessConfirm] = useState6(false);
-  const [showR2SetupModal, setShowR2SetupModal] = useState6(false);
-  const [processProgress, setProcessProgress] = useState6(null);
-  const [alertMessage, setAlertMessage] = useState6(null);
-  const [showCopied, setShowCopied] = useState6(false);
-  const [syncing, setSyncing] = useState6(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState7(false);
+  const [showRenameModal, setShowRenameModal] = useState7(false);
+  const [showProcessConfirm, setShowProcessConfirm] = useState7(false);
+  const [showR2SetupModal, setShowR2SetupModal] = useState7(false);
+  const [processProgress, setProcessProgress] = useState7(null);
+  const [alertMessage, setAlertMessage] = useState7(null);
+  const [showCopied, setShowCopied] = useState7(false);
+  const [syncing, setSyncing] = useState7(false);
   if (!focusedItem) return null;
   const isImage = isImageFile(focusedItem.name);
   const isVideo = isVideoFile(focusedItem.name);
@@ -3668,7 +3751,7 @@ function formatFileSize3(bytes) {
 }
 
 // src/components/StudioSettings.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { css as css8 } from "@emotion/react";
 import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var btnHeight2 = "36px";
@@ -3908,7 +3991,7 @@ var styles8 = {
   `
 };
 function StudioSettings() {
-  const [isOpen, setIsOpen] = useState7(false);
+  const [isOpen, setIsOpen] = useState8(false);
   return /* @__PURE__ */ jsxs8(Fragment4, { children: [
     /* @__PURE__ */ jsx8("button", { css: styles8.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs8(
       "svg",
@@ -3936,7 +4019,7 @@ CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here
 CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket
 CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`;
 function SettingsPanel({ onClose }) {
-  const [copied, setCopied] = useState7(false);
+  const [copied, setCopied] = useState8(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(envTemplate);
     setCopied(true);
@@ -4206,17 +4289,17 @@ var styles10 = {
   `
 };
 function StudioUI({ onClose, isVisible = true }) {
-  const [currentPath, setCurrentPathInternal] = useState8("public");
-  const [selectedItems, setSelectedItems] = useState8(/* @__PURE__ */ new Set());
-  const [lastSelectedPath, setLastSelectedPath] = useState8(null);
-  const [viewMode, setViewMode] = useState8("grid");
-  const [focusedItem, setFocusedItem] = useState8(null);
-  const [meta, setMeta] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(false);
-  const [refreshKey, setRefreshKey] = useState8(0);
-  const [searchQuery, setSearchQuery] = useState8("");
-  const [error, setError] = useState8(null);
-  const [isDragging, setIsDragging] = useState8(false);
+  const [currentPath, setCurrentPathInternal] = useState9("public");
+  const [selectedItems, setSelectedItems] = useState9(/* @__PURE__ */ new Set());
+  const [lastSelectedPath, setLastSelectedPath] = useState9(null);
+  const [viewMode, setViewMode] = useState9("grid");
+  const [focusedItem, setFocusedItem] = useState9(null);
+  const [meta, setMeta] = useState9(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [refreshKey, setRefreshKey] = useState9(0);
+  const [searchQuery, setSearchQuery] = useState9("");
+  const [error, setError] = useState9(null);
+  const [isDragging, setIsDragging] = useState9(false);
   const triggerRefresh = useCallback3(() => {
     setRefreshKey((k) => k + 1);
   }, []);
@@ -4442,4 +4525,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-XV7HCEAF.mjs.map
+//# sourceMappingURL=StudioUI-PPX6VKNU.mjs.map