@gallop.software/studio 0.1.93 → 0.1.94

package/dist/{StudioUI-77EWSAVJ.js → StudioUI-QBIGDYYL.js}

@@ -1107,13 +1107,385 @@ function R2SetupModal({ isOpen, onClose }) {
   ] }) });
 }
 
+// src/components/AddNewModal.tsx
+
+
+
+var fadeIn3 = _react3.keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var slideIn3 = _react3.keyframes`
+  from { 
+    opacity: 0;
+    transform: translateY(-8px) scale(0.98);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+`;
+var styles4 = {
+  overlay: _react3.css`
+    position: fixed;
+    inset: 0;
+    background-color: rgba(26, 31, 54, 0.4);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    animation: ${fadeIn3} 0.15s ease-out;
+    font-family: ${_chunkUFCWGUAGjs.fontStack};
+  `,
+  modal: _react3.css`
+    ${_chunkUFCWGUAGjs.baseReset}
+    background-color: ${_chunkUFCWGUAGjs.colors.surface};
+    border-radius: 12px;
+    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
+    max-width: 520px;
+    width: 90%;
+    animation: ${slideIn3} 0.2s ease-out;
+    overflow: hidden;
+  `,
+  header: _react3.css`
+    padding: 24px 24px 0;
+  `,
+  title: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.lg};
+    font-weight: 600;
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    margin: 0;
+    letter-spacing: -0.02em;
+  `,
+  tabs: _react3.css`
+    display: flex;
+    gap: 0;
+    margin-top: 16px;
+    border-bottom: 1px solid ${_chunkUFCWGUAGjs.colors.border};
+  `,
+  tab: _react3.css`
+    padding: 12px 20px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    font-weight: 500;
+    color: ${_chunkUFCWGUAGjs.colors.textSecondary};
+    background: none;
+    border: none;
+    cursor: pointer;
+    position: relative;
+    transition: color 0.15s;
+    
+    &:hover {
+      color: ${_chunkUFCWGUAGjs.colors.text};
+    }
+  `,
+  tabActive: _react3.css`
+    color: ${_chunkUFCWGUAGjs.colors.primary};
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: ${_chunkUFCWGUAGjs.colors.primary};
+    }
+  `,
+  body: _react3.css`
+    padding: 24px;
+    min-height: 200px;
+  `,
+  dropzone: _react3.css`
+    border: 2px dashed ${_chunkUFCWGUAGjs.colors.border};
+    border-radius: 8px;
+    padding: 40px 24px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.15s;
+    
+    &:hover {
+      border-color: ${_chunkUFCWGUAGjs.colors.primary};
+      background-color: ${_chunkUFCWGUAGjs.colors.primaryLight};
+    }
+  `,
+  dropzoneActive: _react3.css`
+    border-color: ${_chunkUFCWGUAGjs.colors.primary};
+    background-color: ${_chunkUFCWGUAGjs.colors.primaryLight};
+  `,
+  dropzoneIcon: _react3.css`
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 16px;
+    color: ${_chunkUFCWGUAGjs.colors.textMuted};
+  `,
+  dropzoneText: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    margin: 0 0 4px;
+  `,
+  dropzoneHint: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
+    color: ${_chunkUFCWGUAGjs.colors.textSecondary};
+    margin: 0;
+  `,
+  textarea: _react3.css`
+    width: 100%;
+    min-height: 150px;
+    padding: 12px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+    border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
+    border-radius: 8px;
+    resize: vertical;
+    
+    &:focus {
+      outline: none;
+      border-color: ${_chunkUFCWGUAGjs.colors.primary};
+      box-shadow: 0 0 0 3px ${_chunkUFCWGUAGjs.colors.primaryLight};
+    }
+    
+    &::placeholder {
+      color: ${_chunkUFCWGUAGjs.colors.textMuted};
+    }
+  `,
+  textareaLabel: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
+    color: ${_chunkUFCWGUAGjs.colors.textSecondary};
+    margin: 0 0 8px;
+  `,
+  footer: _react3.css`
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid ${_chunkUFCWGUAGjs.colors.border};
+    background-color: ${_chunkUFCWGUAGjs.colors.background};
+  `,
+  btn: _react3.css`
+    padding: 10px 18px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    font-weight: 500;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    letter-spacing: -0.01em;
+  `,
+  btnCancel: _react3.css`
+    background-color: ${_chunkUFCWGUAGjs.colors.surface};
+    border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    
+    &:hover {
+      background-color: ${_chunkUFCWGUAGjs.colors.surfaceHover};
+      border-color: ${_chunkUFCWGUAGjs.colors.borderHover};
+    }
+  `,
+  btnConfirm: _react3.css`
+    background-color: ${_chunkUFCWGUAGjs.colors.primary};
+    border: 1px solid ${_chunkUFCWGUAGjs.colors.primary};
+    color: white;
+    
+    &:hover:not(:disabled) {
+      background-color: ${_chunkUFCWGUAGjs.colors.primaryHover};
+      border-color: ${_chunkUFCWGUAGjs.colors.primaryHover};
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `,
+  fileInput: _react3.css`
+    display: none;
+  `,
+  selectedFiles: _react3.css`
+    margin-top: 16px;
+    padding: 12px;
+    background-color: ${_chunkUFCWGUAGjs.colors.background};
+    border-radius: 6px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
+    color: ${_chunkUFCWGUAGjs.colors.text};
+  `
+};
+function AddNewModal({ currentPath, onClose, onUploadComplete }) {
+  const [activeTab, setActiveTab] = _react.useState.call(void 0, "upload");
+  const [selectedFiles, setSelectedFiles] = _react.useState.call(void 0, []);
+  const [urlInput, setUrlInput] = _react.useState.call(void 0, "");
+  const [isDragging, setIsDragging] = _react.useState.call(void 0, false);
+  const [uploading, setUploading] = _react.useState.call(void 0, false);
+  const [importing, setImporting] = _react.useState.call(void 0, false);
+  const fileInputRef = _react.useRef.call(void 0, null);
+  const handleFileSelect = _react.useCallback.call(void 0, (files) => {
+    if (files) {
+      setSelectedFiles(Array.from(files));
+    }
+  }, []);
+  const handleDrop = _react.useCallback.call(void 0, (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFileSelect(e.dataTransfer.files);
+  }, [handleFileSelect]);
+  const handleUpload = _react.useCallback.call(void 0, async () => {
+    if (selectedFiles.length === 0) return;
+    setUploading(true);
+    try {
+      for (const file of selectedFiles) {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("path", currentPath);
+        await fetch("/api/studio/upload", {
+          method: "POST",
+          body: formData
+        });
+      }
+      onUploadComplete();
+      onClose();
+    } catch (error) {
+      console.error("Upload failed:", error);
+    } finally {
+      setUploading(false);
+    }
+  }, [selectedFiles, currentPath, onUploadComplete, onClose]);
+  const handleImport = _react.useCallback.call(void 0, async () => {
+    const urls = urlInput.split("\n").map((url) => url.trim()).filter((url) => url.length > 0);
+    if (urls.length === 0) return;
+    setImporting(true);
+    try {
+      const response = await fetch("/api/studio/import", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ urls })
+      });
+      const reader = _optionalChain([response, 'access', _2 => _2.body, 'optionalAccess', _3 => _3.getReader, 'call', _4 => _4()]);
+      if (!reader) throw new Error("No reader");
+      const decoder = new TextDecoder();
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        const text = decoder.decode(value);
+        const lines = text.split("\n\n").filter((line) => line.startsWith("data: "));
+        for (const line of lines) {
+          const data = JSON.parse(line.replace("data: ", ""));
+          if (data.type === "complete") {
+            onUploadComplete();
+            onClose();
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Import failed:", error);
+    } finally {
+      setImporting(false);
+    }
+  }, [urlInput, onUploadComplete, onClose]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.overlay, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles4.title, children: "Add New" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.tabs, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            css: [styles4.tab, activeTab === "upload" && styles4.tabActive],
+            onClick: () => setActiveTab("upload"),
+            children: "Upload Files"
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            css: [styles4.tab, activeTab === "import" && styles4.tabActive],
+            onClick: () => setActiveTab("import"),
+            children: "Import URLs"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.body, children: activeTab === "upload" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        "div",
+        {
+          css: [styles4.dropzone, isDragging && styles4.dropzoneActive],
+          onClick: () => _optionalChain([fileInputRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.click, 'call', _7 => _7()]),
+          onDragOver: (e) => {
+            e.preventDefault();
+            setIsDragging(true);
+          },
+          onDragLeave: () => setIsDragging(false),
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.dropzoneIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.dropzoneText, children: "Drop files here or click to browse" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.dropzoneHint, children: "Supports images and other media files" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          css: styles4.fileInput,
+          onChange: (e) => handleFileSelect(e.target.files)
+        }
+      ),
+      selectedFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.selectedFiles, children: [
+        selectedFiles.length,
+        " file",
+        selectedFiles.length !== 1 ? "s" : "",
+        " selected"
+      ] })
+    ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.textareaLabel, children: "Paste image URLs (one per line)" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "textarea",
+        {
+          css: styles4.textarea,
+          value: urlInput,
+          onChange: (e) => setUrlInput(e.target.value),
+          placeholder: `https://cdn.example.com/photos/image1.jpg
+https://cdn.example.com/photos/image2.jpg`
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.footer, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          css: [styles4.btn, styles4.btnCancel],
+          onClick: onClose,
+          children: "Cancel"
+        }
+      ),
+      activeTab === "upload" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          css: [styles4.btn, styles4.btnConfirm],
+          onClick: handleUpload,
+          disabled: selectedFiles.length === 0 || uploading,
+          children: uploading ? "Uploading..." : "Upload"
+        }
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          css: [styles4.btn, styles4.btnConfirm],
+          onClick: handleImport,
+          disabled: !urlInput.trim() || importing,
+          children: importing ? "Importing..." : "Import"
+        }
+      )
+    ] })
+  ] }) });
+}
+
 // src/components/StudioToolbar.tsx
 
 var btnHeight = "36px";
 var spin = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles4 = {
+var styles5 = {
   toolbar: _react3.css`
     display: flex;
     flex-wrap: nowrap;
@@ -1312,6 +1684,7 @@ function StudioToolbar() {
   const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh, focusedItem, scanRequested, clearScanRequest } = useStudio();
   const fileInputRef = _react.useRef.call(void 0, null);
   const abortControllerRef = _react.useRef.call(void 0, null);
+  const [showAddNewModal, setShowAddNewModal] = _react.useState.call(void 0, false);
   const [uploading, setUploading] = _react.useState.call(void 0, false);
   const [scanning, setScanning] = _react.useState.call(void 0, false);
   const [processing, setProcessing] = _react.useState.call(void 0, false);
@@ -1338,7 +1711,7 @@ function StudioToolbar() {
   const [pushing, setPushing] = _react.useState.call(void 0, false);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = _react.useCallback.call(void 0, () => {
-    _optionalChain([fileInputRef, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.click, 'call', _4 => _4()]);
+    _optionalChain([fileInputRef, 'access', _8 => _8.current, 'optionalAccess', _9 => _9.click, 'call', _10 => _10()]);
   }, []);
   const handleScan = _react.useCallback.call(void 0, async () => {
     setScanning(true);
@@ -1353,7 +1726,7 @@ function StudioToolbar() {
     });
     try {
       const response = await fetch("/api/studio/scan", { method: "POST" });
-      const reader = _optionalChain([response, 'access', _5 => _5.body, 'optionalAccess', _6 => _6.getReader, 'call', _7 => _7()]);
+      const reader = _optionalChain([response, 'access', _11 => _11.body, 'optionalAccess', _12 => _12.getReader, 'call', _13 => _13()]);
       if (!reader) throw new Error("No reader");
       const decoder = new TextDecoder();
       let buffer = "";
@@ -1527,7 +1900,7 @@ function StudioToolbar() {
       const selectedPaths2 = Array.from(selectedItems);
       const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
       const selectedImagePaths = selectedPaths2.filter((p) => {
-        const ext = _optionalChain([p, 'access', _8 => _8.split, 'call', _9 => _9("."), 'access', _10 => _10.pop, 'call', _11 => _11(), 'optionalAccess', _12 => _12.toLowerCase, 'call', _13 => _13()]) || "";
+        const ext = _optionalChain([p, 'access', _14 => _14.split, 'call', _15 => _15("."), 'access', _16 => _16.pop, 'call', _17 => _17(), 'optionalAccess', _18 => _18.toLowerCase, 'call', _19 => _19()]) || "";
         return imageExtensions.includes(ext);
       });
       const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
@@ -1690,12 +2063,12 @@ function StudioToolbar() {
         const data = await response.json();
         if (response.ok) {
           setProgressState({
-            current: _optionalChain([data, 'access', _14 => _14.processed, 'optionalAccess', _15 => _15.length]) || 0,
-            total: _optionalChain([data, 'access', _16 => _16.processed, 'optionalAccess', _17 => _17.length]) || 0,
+            current: _optionalChain([data, 'access', _20 => _20.processed, 'optionalAccess', _21 => _21.length]) || 0,
+            total: _optionalChain([data, 'access', _22 => _22.processed, 'optionalAccess', _23 => _23.length]) || 0,
             percent: 100,
             status: "complete",
-            processed: _optionalChain([data, 'access', _18 => _18.processed, 'optionalAccess', _19 => _19.length]) || 0,
-            errors: _optionalChain([data, 'access', _20 => _20.errors, 'optionalAccess', _21 => _21.length]) || 0
+            processed: _optionalChain([data, 'access', _24 => _24.processed, 'optionalAccess', _25 => _25.length]) || 0,
+            errors: _optionalChain([data, 'access', _26 => _26.errors, 'optionalAccess', _27 => _27.length]) || 0
           });
           clearSelection();
           triggerRefresh();
@@ -1772,7 +2145,7 @@ function StudioToolbar() {
     const selectedPaths2 = Array.from(selectedItems);
     const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
     const selectedImagePaths = selectedPaths2.filter((p) => {
-      const ext = _optionalChain([p, 'access', _22 => _22.split, 'call', _23 => _23("."), 'access', _24 => _24.pop, 'call', _25 => _25(), 'optionalAccess', _26 => _26.toLowerCase, 'call', _27 => _27()]) || "";
+      const ext = _optionalChain([p, 'access', _28 => _28.split, 'call', _29 => _29("."), 'access', _30 => _30.pop, 'call', _31 => _31(), 'optionalAccess', _32 => _32.toLowerCase, 'call', _33 => _33()]) || "";
       return imageExtensions.includes(ext);
     });
     const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
@@ -1807,7 +2180,7 @@ function StudioToolbar() {
     const selectedPaths2 = Array.from(selectedItems);
     const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
     const selectedImagePaths = selectedPaths2.filter((p) => {
-      const ext = _optionalChain([p, 'access', _28 => _28.split, 'call', _29 => _29("."), 'access', _30 => _30.pop, 'call', _31 => _31(), 'optionalAccess', _32 => _32.toLowerCase, 'call', _33 => _33()]) || "";
+      const ext = _optionalChain([p, 'access', _34 => _34.split, 'call', _35 => _35("."), 'access', _36 => _36.pop, 'call', _37 => _37(), 'optionalAccess', _38 => _38.toLowerCase, 'call', _39 => _39()]) || "";
       return imageExtensions.includes(ext);
     });
     const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
@@ -1858,16 +2231,16 @@ function StudioToolbar() {
           });
           const data = await response.json();
           if (!response.ok) {
-            if (_optionalChain([data, 'access', _34 => _34.error, 'optionalAccess', _35 => _35.includes, 'call', _36 => _36("R2 not configured")]) || _optionalChain([data, 'access', _37 => _37.error, 'optionalAccess', _38 => _38.includes, 'call', _39 => _39("CLOUDFLARE_R2")])) {
+            if (_optionalChain([data, 'access', _40 => _40.error, 'optionalAccess', _41 => _41.includes, 'call', _42 => _42("R2 not configured")]) || _optionalChain([data, 'access', _43 => _43.error, 'optionalAccess', _44 => _44.includes, 'call', _45 => _45("CLOUDFLARE_R2")])) {
               setShowProgress(false);
               setShowR2SetupModal(true);
               return;
             }
             errors++;
             errorMessages.push(data.error || `Failed: ${imageKey}`);
-          } else if (_optionalChain([data, 'access', _40 => _40.pushed, 'optionalAccess', _41 => _41.length]) > 0) {
+          } else if (_optionalChain([data, 'access', _46 => _46.pushed, 'optionalAccess', _47 => _47.length]) > 0) {
             pushed++;
-          } else if (_optionalChain([data, 'access', _42 => _42.errors, 'optionalAccess', _43 => _43.length]) > 0) {
+          } else if (_optionalChain([data, 'access', _48 => _48.errors, 'optionalAccess', _49 => _49.length]) > 0) {
             errors++;
             for (const errMsg of data.errors) {
               errorMessages.push(errMsg);
@@ -2095,7 +2468,18 @@ function StudioToolbar() {
         onClose: () => setShowR2SetupModal(false)
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.toolbar, children: [
+    showAddNewModal && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      AddNewModal,
+      {
+        currentPath,
+        onClose: () => setShowAddNewModal(false),
+        onUploadComplete: () => {
+          setShowAddNewModal(false);
+          triggerRefresh();
+        }
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.toolbar, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
@@ -2107,23 +2491,23 @@ function StudioToolbar() {
           style: { display: "none" }
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.left, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.left, children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: [styles4.btn, styles4.btnPrimary],
-            onClick: handleUpload,
+            css: [styles5.btn, styles5.btnPrimary],
+            onClick: () => setShowAddNewModal(true),
             disabled: uploading || isInImagesFolder,
             children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UploadIcon, {}),
-              uploading ? "Uploading..." : "Upload"
+              "Add New"
             ]
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: styles4.btn,
+            css: styles5.btn,
             onClick: () => singleFolderSelected ? setShowRenameFolderModal(true) : setShowNewFolderModal(true),
             disabled: isInImagesFolder && !singleFolderSelected,
             title: isInImagesFolder && !singleFolderSelected ? "Cannot create folders in protected images folder" : void 0,
@@ -2133,11 +2517,11 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.divider }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.divider }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: styles4.btn,
+            css: styles5.btn,
             onClick: handleProcessImages,
             disabled: processing || isInImagesFolder,
             title: isInImagesFolder ? "Cannot process images folder" : void 0,
@@ -2150,7 +2534,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: [styles4.btn, styles4.btnDanger],
+            css: [styles5.btn, styles5.btnDanger],
             onClick: handleDeleteClick,
             disabled: !hasSelection,
             children: [
@@ -2162,7 +2546,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: styles4.btn,
+            css: styles5.btn,
             onClick: handleMoveClick,
             disabled: !hasSelection,
             children: [
@@ -2174,7 +2558,7 @@ function StudioToolbar() {
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: styles4.btn,
+            css: styles5.btn,
             onClick: handleSyncClick,
             disabled: !hasSelection,
             children: [
@@ -2183,11 +2567,11 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.searchWrapper, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.searchWrapper, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "input",
             {
-              css: styles4.searchInput,
+              css: styles5.searchInput,
               type: "text",
               placeholder: "Search images...",
               value: searchQuery,
@@ -2198,7 +2582,7 @@ function StudioToolbar() {
           searchQuery && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: styles4.searchClearBtn,
+              css: styles5.searchClearBtn,
               onClick: () => setSearchQuery(""),
               title: "Clear search",
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
@@ -2206,16 +2590,16 @@ function StudioToolbar() {
           )
         ] })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.right, children: [
-        hasSelection && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles4.selectionCount, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.right, children: [
+        hasSelection && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles5.selectionCount, children: [
           selectedItems.size,
           " selected",
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles4.clearBtn, onClick: clearSelection, children: "Clear" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles5.clearBtn, onClick: clearSelection, children: "Clear" })
         ] }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "button",
           {
-            css: styles4.btn,
+            css: styles5.btn,
             onClick: handleScan,
             disabled: scanning,
             children: [
@@ -2224,11 +2608,11 @@ function StudioToolbar() {
             ]
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.viewToggle, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.viewToggle, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: [styles4.viewBtn, viewMode === "grid" && styles4.viewBtnActive],
+              css: [styles5.viewBtn, viewMode === "grid" && styles5.viewBtnActive],
               onClick: () => setViewMode("grid"),
               "aria-label": "Grid view",
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridIcon, {})
@@ -2237,7 +2621,7 @@ function StudioToolbar() {
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: [styles4.viewBtn, viewMode === "list" && styles4.viewBtnActive],
+              css: [styles5.viewBtn, viewMode === "list" && styles5.viewBtnActive],
               onClick: () => setViewMode("list"),
               "aria-label": "List view",
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListIcon, {})
@@ -2249,34 +2633,34 @@ function StudioToolbar() {
   ] });
 }
 function UploadIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
 }
 function ScanIcon({ spinning }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: [styles4.icon, spinning && styles4.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: [styles5.icon, spinning && styles5.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
 }
 function TrashIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
 }
 function FolderPlusIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) });
 }
 function CloudIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
 }
 function GridIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" }) });
 }
 function ListIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
 }
 function ImageStackIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) });
 }
 
 // src/components/StudioFileGrid.tsx
@@ -2480,7 +2864,7 @@ function useFileList() {
 var spin2 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles5 = {
+var styles6 = {
   loading: _react3.css`
     display: flex;
     align-items: center;
@@ -2838,17 +3222,17 @@ function StudioFileGrid() {
     triggerScan
   } = useFileList();
   if (loading) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.spinner }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.spinner }) });
   }
   if (metaEmpty && isAtRoot) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.empty, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.emptyText, children: "No files tracked yet" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.emptyText, children: "Click Scan to discover files in your public folder" }),
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.empty, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyText, children: "No files tracked yet" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyText, children: "Click Scan to discover files in your public folder" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          css: styles5.scanButton,
+          css: styles6.scanButton,
           onClick: triggerScan,
           children: "Scan for Files"
         }
@@ -2856,19 +3240,19 @@ function StudioFileGrid() {
     ] });
   }
   if (sortedItems.length === 0 && isAtRoot) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.empty, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.emptyText, children: "No files in this folder" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.emptyText, children: "Upload images or click Scan in the toolbar" })
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.empty, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyText, children: "No files in this folder" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyText, children: "Upload images or click Scan in the toolbar" })
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-    sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.selectAllRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { css: styles5.selectAllLabel, children: [
+    sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.selectAllRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { css: styles6.selectAllLabel, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           type: "checkbox",
-          css: styles5.selectAllCheckbox,
+          css: styles6.selectAllCheckbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -2880,17 +3264,17 @@ function StudioFileGrid() {
       sortedItems.length,
       ")"
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.grid, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.grid, children: [
       !isAtRoot && !isSearching && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
         {
-          css: [styles5.item, styles5.parentItem],
+          css: [styles6.item, styles6.parentItem],
           onClick: navigateUp,
           children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.content, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.label, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.name, children: ".." }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.size, children: "Parent folder" })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.content, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.label, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.name, children: ".." }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.size, children: "Parent folder" })
             ] })
           ]
         }
@@ -2924,43 +3308,43 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      css: [styles5.item, isSelected && styles5.itemSelected],
+      css: [styles6.item, isSelected && styles6.itemSelected],
       onClick,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "div",
           {
-            css: styles5.checkboxWrapper,
+            css: styles6.checkboxWrapper,
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
                 type: "checkbox",
-                css: styles5.checkbox,
+                css: styles6.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        item.cdnPushed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.cdnBadge, children: "CDN" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.content, children: [
+        item.cdnPushed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.cdnBadge, children: "CDN" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.content, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "button",
             {
-              css: styles5.copyBtn,
+              css: styles6.copyBtn,
               onClick: handleCopyPath,
               title: "Copy file path",
               children: [
-                showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.tooltip, children: "Copied!" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
+                showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.tooltip, children: "Copied!" }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
               ]
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: styles5.openBtn,
+              css: styles6.openBtn,
               onClick: (e) => {
                 e.stopPropagation();
                 onOpen();
@@ -2968,13 +3352,13 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
               children: "Open"
             }
           ),
-          isFolder ? isImagesFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.imagesFolderWrapper, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
-          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+          isFolder ? isImagesFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.imagesFolderWrapper, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
+          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
             "img",
             {
-              css: styles5.image,
+              css: styles6.image,
               src: item.thumbnail,
               alt: item.name,
               loading: "lazy"
@@ -2982,26 +3366,26 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
           ) : isImage && !item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "button",
             {
-              css: styles5.noThumbnail,
+              css: styles6.noThumbnail,
               onClick: (e) => {
                 e.stopPropagation();
                 onGenerateThumbnail();
               },
               title: "Generate thumbnail",
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.noThumbnailText, children: "Generate" })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.noThumbnailText, children: "Generate" })
               ]
             }
-          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.labelRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.labelText, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.name, title: item.name, children: truncateMiddle(item.name) }),
-          isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles5.size, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.labelRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.labelText, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.name, title: item.name, children: truncateMiddle(item.name) }),
+          isFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { css: styles6.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__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.size, children: formatFileSize(item.size) })
+          ] }) : item.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.size, children: formatFileSize(item.size) })
         ] }) }) })
       ]
     }
@@ -3033,7 +3417,7 @@ function truncateMiddle(str, maxLength = 24) {
 var spin3 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
-var styles6 = {
+var styles7 = {
   loading: _react3.css`
     display: flex;
     align-items: center;
@@ -3384,16 +3768,16 @@ function StudioFileList() {
     triggerScan
   } = useFileList();
   if (loading) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.spinner }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.spinner }) });
   }
   if (metaEmpty && isAtRoot) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.empty, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.empty, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No files tracked yet" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyHint, children: "Click Scan to discover files in your public folder" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.emptyHint, children: "Click Scan to discover files in your public folder" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          css: styles6.scanButton,
+          css: styles7.scanButton,
           onClick: triggerScan,
           children: "Scan for Files"
         }
@@ -3401,18 +3785,18 @@ function StudioFileList() {
     ] });
   }
   if (sortedItems.length === 0 && isAtRoot) {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.empty, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.empty, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No files in this folder" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.emptyHint, children: "Upload images or click Scan in the toolbar" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.emptyHint, children: "Upload images or click Scan in the toolbar" })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.tableWrapper, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { css: styles6.table, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.tableWrapper, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { css: styles7.table, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles6.th, styles6.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles7.th, styles7.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           type: "checkbox",
-          css: styles6.checkbox,
+          css: styles7.checkbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -3420,21 +3804,21 @@ function StudioFileList() {
           onChange: handleSelectAll
         }
       ) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: styles6.th, children: "Name" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles6.th, styles6.thSize], children: "Size" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles6.th, styles6.thDimensions], children: "Dimensions" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles6.th, styles6.thCdn], children: "CDN" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: styles7.th, children: "Name" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles7.th, styles7.thSize], children: "Size" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles7.th, styles7.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles7.th, styles7.thCdn], children: "CDN" })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tbody", { css: styles6.tbody, children: [
-      !isAtRoot && !isSearching && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { css: styles6.parentRow, onClick: navigateUp, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles6.td }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles6.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.nameCell, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.name, children: ".." })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tbody", { css: styles7.tbody, children: [
+      !isAtRoot && !isSearching && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { css: styles7.parentRow, onClick: navigateUp, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles7.td }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles7.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.nameCell, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.name, children: ".." })
         ] }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles6.td, styles6.meta], children: "--" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles6.td, styles6.meta], children: "Parent folder" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles6.td, children: "--" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles7.td, styles7.meta], children: "--" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles7.td, styles7.meta], children: "Parent folder" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles7.td, children: "--" })
       ] }),
       sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         ListRow,
@@ -3465,59 +3849,59 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "tr",
     {
-      css: [styles6.row, isSelected && styles6.rowSelected],
+      css: [styles7.row, isSelected && styles7.rowSelected],
       onClick,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "td",
           {
-            css: [styles6.td, styles6.checkboxCell],
+            css: [styles7.td, styles7.checkboxCell],
             onClick: (e) => e.stopPropagation(),
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "input",
               {
                 type: "checkbox",
-                css: styles6.checkbox,
+                css: styles7.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles6.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.nameCell, children: [
-          isFolder ? isImagesFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.imagesFolderWrapper, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
-          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.folderIconWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles6.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) }) : isImage && !item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles7.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.nameCell, children: [
+          isFolder ? isImagesFolder ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.imagesFolderWrapper, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z", clipRule: "evenodd" }) })
+          ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.folderIconWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles7.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) }) : isImage && !item.hasThumbnail ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
-              css: styles6.noThumbnail,
+              css: styles7.noThumbnail,
               onClick: (e) => {
                 e.stopPropagation();
                 onGenerateThumbnail();
               },
               title: "Generate thumbnail",
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) })
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.name, title: item.name, children: truncateMiddle2(item.name) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.actionsCell, children: [
+          ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.thumbnailWrapper, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.name, title: item.name, children: truncateMiddle2(item.name) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.actionsCell, children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
               "button",
               {
-                css: styles6.copyBtn,
+                css: styles7.copyBtn,
                 onClick: handleCopyPath,
                 title: "Copy file path",
                 children: [
-                  showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.tooltip, children: "Copied!" }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
+                  showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.tooltip, children: "Copied!" }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
                 ]
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                css: styles6.openBtn,
+                css: styles7.openBtn,
                 onClick: (e) => {
                   e.stopPropagation();
                   onOpen();
@@ -3527,12 +3911,12 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles6.td, styles6.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles6.td, styles6.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles6.td, children: item.cdnPushed ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles6.cdnBadge, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles7.td, styles7.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles7.td, styles7.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles7.td, children: item.cdnPushed ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles7.cdnBadge, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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"
-        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles6.cdnEmpty, children: "--" }) })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.cdnEmpty, children: "--" }) })
       ]
     }
   );
@@ -3570,7 +3954,7 @@ function isVideoFile(filename) {
   const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
   return VIDEO_EXTENSIONS.includes(ext);
 }
-var styles7 = {
+var styles8 = {
   overlay: _react3.css`
     position: absolute;
     top: 0;
@@ -3914,7 +4298,7 @@ function StudioDetailView() {
         });
         triggerRefresh();
       } else {
-        if (_optionalChain([data, 'access', _44 => _44.error, 'optionalAccess', _45 => _45.includes, 'call', _46 => _46("R2 not configured")]) || _optionalChain([data, 'access', _47 => _47.error, 'optionalAccess', _48 => _48.includes, 'call', _49 => _49("CLOUDFLARE_R2")])) {
+        if (_optionalChain([data, 'access', _50 => _50.error, 'optionalAccess', _51 => _51.includes, 'call', _52 => _52("R2 not configured")]) || _optionalChain([data, 'access', _53 => _53.error, 'optionalAccess', _54 => _54.includes, 'call', _55 => _55("CLOUDFLARE_R2")])) {
           setShowR2SetupModal(true);
         } else {
           setAlertMessage({
@@ -3953,7 +4337,7 @@ function StudioDetailView() {
       if (!response.ok) {
         throw new Error("Processing failed");
       }
-      const reader = _optionalChain([response, 'access', _50 => _50.body, 'optionalAccess', _51 => _51.getReader, 'call', _52 => _52()]);
+      const reader = _optionalChain([response, 'access', _56 => _56.body, 'optionalAccess', _57 => _57.getReader, 'call', _58 => _58()]);
       if (!reader) {
         throw new Error("No response body");
       }
@@ -3989,14 +4373,14 @@ function StudioDetailView() {
   };
   const renderMedia = () => {
     if (isImage) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles7.image, src: imageSrc, alt: focusedItem.name });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { css: styles8.image, src: imageSrc, alt: focusedItem.name });
     }
     if (isVideo) {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { css: styles7.video, src: imageSrc, controls: true });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "video", { css: styles8.video, src: imageSrc, controls: true });
     }
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.filePlaceholder, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles7.fileName, children: focusedItem.name })
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.filePlaceholder, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.fileName, children: focusedItem.name })
     ] });
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
@@ -4056,61 +4440,61 @@ function StudioDetailView() {
         onClose: () => setProcessProgress(null)
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.overlay, onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.container, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.main, children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.headerButtons, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles7.copyBtn, onClick: handleCopyPath, title: "Copy file path", children: [
-            showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.tooltip, children: "Copied!" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.overlay, onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.container, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.main, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.headerButtons, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles8.copyBtn, onClick: handleCopyPath, title: "Copy file path", children: [
+            showCopied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.tooltip, children: "Copied!" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
           ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles7.mainCloseBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.mainCloseIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles8.mainCloseBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.mainCloseIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.mediaWrapper, children: renderMedia() })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.mediaWrapper, children: renderMedia() })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.sidebar, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.sidebarHeader, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles7.sidebarTitle, children: "Details" }) }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.sidebarContent, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.info, children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.infoRow, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoLabel, children: "Name" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoValueWrap, children: focusedItem.name })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.sidebar, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.sidebarHeader, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles8.sidebarTitle, children: "Details" }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.sidebarContent, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.info, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoLabel, children: "Name" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoValueWrap, children: focusedItem.name })
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.infoRow, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoLabel, children: "Path" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoValueWrap, children: focusedItem.path.replace(/^public\//, "") })
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoLabel, children: "Path" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoValueWrap, children: focusedItem.path.replace(/^public\//, "") })
             ] }),
-            focusedItem.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.infoRow, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoLabel, children: "Size" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoValue, children: formatFileSize3(focusedItem.size) })
+            focusedItem.size !== void 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoLabel, children: "Size" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoValue, children: formatFileSize3(focusedItem.size) })
             ] }),
-            focusedItem.dimensions && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.infoRow, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoLabel, children: "Dimensions" }),
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles7.infoValue, children: [
+            focusedItem.dimensions && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoLabel, children: "Dimensions" }),
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles8.infoValue, children: [
                 focusedItem.dimensions.width,
                 " \xD7 ",
                 focusedItem.dimensions.height
               ] })
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.infoRow, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoLabel, children: "CDN Status" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles7.infoValue, children: focusedItem.cdnPushed ? "Pushed" : "Not pushed" })
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.infoRow, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoLabel, children: "CDN Status" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.infoValue, children: focusedItem.cdnPushed ? "Pushed" : "Not pushed" })
             ] })
           ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.actions, children: [
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles7.actionBtn, onClick: () => setShowRenameModal(true), children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.actions, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles8.actionBtn, onClick: () => setShowRenameModal(true), children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
               "Rename"
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles7.actionBtn, onClick: handleSync, disabled: pushing, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles8.actionBtn, onClick: handleSync, disabled: pushing, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) }),
               syncing ? "Pushing..." : "Push to CDN"
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles7.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles8.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" }) }),
               "Process Image"
             ] }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: [styles7.actionBtn, styles7.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: [styles8.actionBtn, styles8.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }),
               "Delete"
             ] })
           ] })
@@ -4130,7 +4514,7 @@ function formatFileSize3(bytes) {
 
 
 var btnHeight2 = "36px";
-var styles8 = {
+var styles9 = {
   btn: _react3.css`
     height: ${btnHeight2};
     padding: 0 12px;
@@ -4363,15 +4747,94 @@ var styles8 = {
       background-color: ${_chunkUFCWGUAGjs.colors.primaryHover};
       border-color: ${_chunkUFCWGUAGjs.colors.primaryHover};
     }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `,
+  cdnList: _react3.css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+  cdnRow: _react3.css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+  cdnInput: _react3.css`
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid ${_chunkUFCWGUAGjs.colors.border};
+    border-radius: 6px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    background: ${_chunkUFCWGUAGjs.colors.surface};
+    transition: all 0.15s ease;
+    
+    &:focus {
+      outline: none;
+      border-color: ${_chunkUFCWGUAGjs.colors.primary};
+      box-shadow: 0 0 0 3px ${_chunkUFCWGUAGjs.colors.primaryLight};
+    }
+  `,
+  cdnIndex: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
+    color: ${_chunkUFCWGUAGjs.colors.textMuted};
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+  `,
+  cdnDeleteBtn: _react3.css`
+    padding: 6px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: ${_chunkUFCWGUAGjs.colors.textMuted};
+    transition: color 0.15s;
+    flex-shrink: 0;
+    
+    &:hover {
+      color: ${_chunkUFCWGUAGjs.colors.danger};
+    }
+  `,
+  cdnAddBtn: _react3.css`
+    padding: 8px 12px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.sm};
+    font-weight: 500;
+    color: ${_chunkUFCWGUAGjs.colors.primary};
+    background: ${_chunkUFCWGUAGjs.colors.primaryLight};
+    border: 1px dashed ${_chunkUFCWGUAGjs.colors.primary};
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-top: 8px;
+    
+    &:hover {
+      background: ${_chunkUFCWGUAGjs.colors.surface};
+    }
+  `,
+  warning: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.xs};
+    color: ${_chunkUFCWGUAGjs.colors.danger};
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: ${_chunkUFCWGUAGjs.colors.dangerLight};
+    border-radius: 6px;
   `
 };
 function StudioSettings() {
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles8.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles9.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "svg",
       {
-        css: styles8.icon,
+        css: styles9.icon,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "none",
@@ -4394,56 +4857,143 @@ 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 { triggerRefresh } = useStudio();
   const [copied, setCopied] = _react.useState.call(void 0, false);
+  const [cdnUrls, setCdnUrls] = _react.useState.call(void 0, []);
+  const [loading, setLoading] = _react.useState.call(void 0, true);
+  const [saving, setSaving] = _react.useState.call(void 0, false);
+  const [hasChanges, setHasChanges] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    async function loadCdns() {
+      try {
+        const response = await fetch("/api/studio/cdns");
+        const data = await response.json();
+        setCdnUrls(data.cdns || []);
+      } catch (error) {
+        console.error("Failed to load CDN URLs:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadCdns();
+  }, []);
   const handleCopy = () => {
     navigator.clipboard.writeText(envTemplate);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.overlay, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.panel, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { css: styles8.title, children: "Settings" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles8.closeBtn, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+  const handleCdnChange = _react.useCallback.call(void 0, (index, value) => {
+    setCdnUrls((prev) => {
+      const updated = [...prev];
+      updated[index] = value;
+      return updated;
+    });
+    setHasChanges(true);
+  }, []);
+  const handleAddCdn = _react.useCallback.call(void 0, () => {
+    setCdnUrls((prev) => [...prev, ""]);
+    setHasChanges(true);
+  }, []);
+  const handleDeleteCdn = _react.useCallback.call(void 0, (index) => {
+    setCdnUrls((prev) => prev.filter((_, i) => i !== index));
+    setHasChanges(true);
+  }, []);
+  const handleSave = _react.useCallback.call(void 0, async () => {
+    setSaving(true);
+    try {
+      const response = await fetch("/api/studio/cdns", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cdns: cdnUrls.filter((url) => url.trim()) })
+      });
+      if (response.ok) {
+        setHasChanges(false);
+        triggerRefresh();
+        onClose();
+      }
+    } catch (error) {
+      console.error("Failed to save CDN URLs:", error);
+    } finally {
+      setSaving(false);
+    }
+  }, [cdnUrls, triggerRefresh, onClose]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.overlay, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { css: styles9.title, children: "Settings" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles9.closeBtn, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles9.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.sections, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.sections, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles8.sectionTitle, children: "Cloudflare R2" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.description, children: "Configure in .env.local file:" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.codeWrapper, children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles8.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
-            copied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.tooltip, children: "Copied!" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles9.sectionTitle, children: "CDN URLs" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.description, children: "Manage CDN base URLs used by your images:" }),
+        loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.description, children: "Loading..." }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.cdnList, children: cdnUrls.map((url, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.cdnRow, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles9.cdnIndex, children: index }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "input",
+              {
+                css: styles9.cdnInput,
+                type: "text",
+                value: url,
+                onChange: (e) => handleCdnChange(index, e.target.value),
+                placeholder: "https://cdn.example.com"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                css: styles9.cdnDeleteBtn,
+                onClick: () => handleDeleteCdn(index),
+                title: "Delete CDN URL",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) })
+              }
+            )
+          ] }, index)) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles9.cdnAddBtn, onClick: handleAddCdn, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }),
+            "Add CDN URL"
+          ] }),
+          cdnUrls.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.warning, children: "Warning: Changing CDN URLs may break image references. The index numbers correspond to image `c` values." })
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles9.sectionTitle, children: "Cloudflare R2 Credentials" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.description, children: "Configure in .env.local file:" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.codeWrapper, children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { css: styles9.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
+            copied && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles9.tooltip, children: "Copied!" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles9.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" }) })
           ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.code, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com" })
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.code, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com" })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles8.sectionTitle, children: "Thumbnail Sizes" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.grid, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles9.sectionTitle, children: "Thumbnail Sizes" }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.grid, children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles8.label, children: "Small" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles8.input, type: "number", defaultValue: 300 })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles9.label, children: "Small" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles9.input, type: "number", defaultValue: 300 })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles8.label, children: "Medium" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles8.input, type: "number", defaultValue: 700 })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles9.label, children: "Medium" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles9.input, type: "number", defaultValue: 700 })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles8.label, children: "Large" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles8.input, type: "number", defaultValue: 1400 })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles9.label, children: "Large" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles9.input, type: "number", defaultValue: 1400 })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.footer, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles8.cancelBtn, onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles8.saveBtn, children: "Save Changes" })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.footer, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles9.cancelBtn, onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles9.saveBtn, onClick: handleSave, disabled: saving || !hasChanges, children: saving ? "Saving..." : "Save Changes" })
     ] })
   ] }) });
 }
@@ -4451,7 +5001,7 @@ function SettingsPanel({ onClose }) {
 // src/components/ErrorModal.tsx
 
 
-var styles9 = {
+var styles10 = {
   overlay: _react3.css`
     position: fixed;
     inset: 0;
@@ -4513,20 +5063,20 @@ var styles9 = {
 function ErrorModal() {
   const { error, clearError } = useStudio();
   if (!error) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.overlay, onClick: clearError, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.modal, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles9.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles9.title, children: error.title })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles10.overlay, onClick: clearError, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles10.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles10.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles10.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles10.title, children: error.title })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles9.message, children: error.message }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles9.button, onClick: clearError, children: "OK" })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles10.message, children: error.message }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles10.button, onClick: clearError, children: "OK" })
   ] }) });
 }
 
 // src/components/StudioUI.tsx
 
 var btnHeight3 = "36px";
-var styles10 = {
+var styles11 = {
   container: _react3.css`
     ${_chunkUFCWGUAGjs.baseReset}
     display: flex;
@@ -4832,16 +5382,16 @@ function StudioUI({ onClose, isVisible = true }) {
     showError,
     clearError
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles10.container, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles10.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles10.headerLeft, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles10.title, children: "Studio" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles10.headerCenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles10.headerActions, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles11.container, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles11.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles11.headerLeft, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles11.title, children: "Studio" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles11.headerCenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles11.headerActions, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioSettings, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
-            css: styles10.headerBtn,
+            css: styles11.headerBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {})
@@ -4853,16 +5403,16 @@ function StudioUI({ onClose, isVisible = true }) {
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        css: styles10.content,
+        css: styles11.content,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          isDragging && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles10.dropOverlay, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles10.dropMessage, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles10.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
+          isDragging && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles11.dropOverlay, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles11.dropMessage, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles11.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Drop files to upload" })
           ] }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles10.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles11.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) })
         ]
       }
     ),
@@ -4876,12 +5426,12 @@ function Breadcrumbs({ currentPath, onNavigate }) {
     name: part,
     path: parts.slice(0, index + 1).join("/")
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles10.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles10.breadcrumbSeparator, children: "/" }),
-    index === breadcrumbs.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles10.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles11.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles11.breadcrumbSeparator, children: "/" }),
+    index === breadcrumbs.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles11.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "span",
       {
-        css: styles10.breadcrumbItem,
+        css: styles11.breadcrumbItem,
         onClick: () => onNavigate(crumb.path),
         children: crumb.name
       }
@@ -4892,7 +5442,7 @@ function CloseIcon() {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
     {
-      css: styles10.headerIcon,
+      css: styles11.headerIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -4912,4 +5462,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-77EWSAVJ.js.map
+//# sourceMappingURL=StudioUI-QBIGDYYL.js.map