@gallop.software/studio 0.1.81 → 0.1.83

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

@@ -7,8 +7,8 @@ import {
 } from "./chunk-HXE6XCG2.mjs";
 
 // src/components/StudioUI.tsx
-import { useEffect as useEffect4, useCallback as useCallback2, useState as useState7 } from "react";
-import { css as css8 } from "@emotion/react";
+import { useEffect as useEffect3, useCallback as useCallback3, useState as useState8 } from "react";
+import { css as css10 } from "@emotion/react";
 
 // src/components/StudioContext.tsx
 import { createContext, useContext } from "react";
@@ -52,6 +52,11 @@ var defaultState = {
   },
   searchQuery: "",
   setSearchQuery: () => {
+  },
+  error: null,
+  showError: () => {
+  },
+  clearError: () => {
   }
 };
 var StudioContext = createContext(defaultState);
@@ -61,7 +66,7 @@ function useStudio() {
 
 // src/components/StudioToolbar.tsx
 import { useCallback, useRef, useState as useState2 } from "react";
-import { css as css3, keyframes as keyframes3 } from "@emotion/react";
+import { css as css4, keyframes as keyframes3 } from "@emotion/react";
 
 // src/components/StudioModal.tsx
 import React from "react";
@@ -669,14 +674,313 @@ function StudioFolderPicker({ selectedItems, currentPath, onMove, onCancel }) {
   ] }) });
 }
 
+// src/components/R2SetupModal.tsx
+import { css as css3 } from "@emotion/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var styles3 = {
+  overlay: css3`
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+    padding: 20px;
+  `,
+  modal: css3`
+    background: ${colors.surface};
+    border-radius: 12px;
+    max-width: 560px;
+    width: 100%;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  `,
+  header: css3`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 24px;
+    border-bottom: 1px solid ${colors.border};
+  `,
+  icon: css3`
+    width: 32px;
+    height: 32px;
+    color: ${colors.primary};
+    flex-shrink: 0;
+  `,
+  title: css3`
+    font-size: ${fontSize.xl};
+    font-weight: 600;
+    color: ${colors.text};
+    margin: 0;
+  `,
+  closeBtn: css3`
+    margin-left: auto;
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    color: ${colors.textMuted};
+    border-radius: 4px;
+    
+    &:hover {
+      color: ${colors.text};
+      background: ${colors.surfaceHover};
+    }
+  `,
+  closeIcon: css3`
+    width: 20px;
+    height: 20px;
+  `,
+  content: css3`
+    padding: 24px;
+  `,
+  intro: css3`
+    font-size: ${fontSize.base};
+    color: ${colors.textSecondary};
+    margin: 0 0 20px 0;
+    line-height: 1.6;
+  `,
+  steps: css3`
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  `,
+  step: css3`
+    display: flex;
+    gap: 12px;
+  `,
+  stepNumber: css3`
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: ${colors.primaryLight};
+    color: ${colors.primary};
+    font-size: ${fontSize.sm};
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  `,
+  stepContent: css3`
+    flex: 1;
+    padding-top: 3px;
+  `,
+  stepTitle: css3`
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: ${colors.text};
+    margin: 0 0 4px 0;
+  `,
+  stepDesc: css3`
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
+    margin: 0;
+    line-height: 1.5;
+  `,
+  link: css3`
+    color: ${colors.primary};
+    text-decoration: none;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  envVars: css3`
+    background: ${colors.background};
+    border: 1px solid ${colors.border};
+    border-radius: 8px;
+    padding: 16px;
+    margin-top: 20px;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+    font-size: 13px;
+    line-height: 1.8;
+    color: ${colors.text};
+    overflow-x: auto;
+  `,
+  envVar: css3`
+    display: block;
+  `,
+  envKey: css3`
+    color: ${colors.primary};
+  `,
+  envValue: css3`
+    color: ${colors.textSecondary};
+  `,
+  footer: css3`
+    padding: 16px 24px;
+    border-top: 1px solid ${colors.border};
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  `,
+  docsBtn: css3`
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    border: 1px solid ${colors.border};
+    background: ${colors.surface};
+    color: ${colors.text};
+    cursor: pointer;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      background: ${colors.surfaceHover};
+      border-color: #d0d5dd;
+    }
+  `,
+  doneBtn: css3`
+    padding: 10px 20px;
+    border-radius: 6px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    border: none;
+    background: ${colors.primary};
+    color: white;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover {
+      background: ${colors.primaryHover};
+    }
+  `,
+  externalIcon: css3`
+    width: 14px;
+    height: 14px;
+  `
+};
+function R2SetupModal({ isOpen, onClose }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx3("div", { css: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs3("div", { css: styles3.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs3("div", { css: styles3.header, children: [
+      /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" }) }),
+      /* @__PURE__ */ jsx3("h2", { css: styles3.title, children: "Set Up CDN Storage" }),
+      /* @__PURE__ */ jsx3("button", { css: styles3.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx3("svg", { css: styles3.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { css: styles3.content, children: [
+      /* @__PURE__ */ jsx3("p", { css: styles3.intro, children: "Sync your images to Cloudflare R2 for faster global delivery. R2 offers generous free tier with no egress fees." }),
+      /* @__PURE__ */ jsxs3("ol", { css: styles3.steps, children: [
+        /* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "1" }),
+          /* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
+            /* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Create a Cloudflare account" }),
+            /* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
+              "Sign up at",
+              " ",
+              /* @__PURE__ */ jsx3("a", { css: styles3.link, href: "https://dash.cloudflare.com/sign-up", target: "_blank", rel: "noopener noreferrer", children: "dash.cloudflare.com" }),
+              " ",
+              "if you don't have one already."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "2" }),
+          /* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
+            /* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Create an R2 bucket" }),
+            /* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
+              "Go to R2 in your Cloudflare dashboard and create a new bucket. Choose a name like ",
+              /* @__PURE__ */ jsx3("code", { children: "my-images" }),
+              "."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "3" }),
+          /* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
+            /* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Enable public access" }),
+            /* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
+              'In bucket settings, enable "Public Access" and copy the public URL (e.g., ',
+              /* @__PURE__ */ jsx3("code", { children: "https://pub-xxx.r2.dev" }),
+              ")."
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "4" }),
+          /* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
+            /* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Create API token" }),
+            /* @__PURE__ */ jsx3("p", { css: styles3.stepDesc, children: 'Go to R2 \u2192 Manage R2 API Tokens \u2192 Create API Token. Select "Object Read & Write" permissions for your bucket.' })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("li", { css: styles3.step, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.stepNumber, children: "5" }),
+          /* @__PURE__ */ jsxs3("div", { css: styles3.stepContent, children: [
+            /* @__PURE__ */ jsx3("h4", { css: styles3.stepTitle, children: "Add environment variables" }),
+            /* @__PURE__ */ jsxs3("p", { css: styles3.stepDesc, children: [
+              "Add these to your ",
+              /* @__PURE__ */ jsx3("code", { children: ".env.local" }),
+              " file:"
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { css: styles3.envVars, children: [
+        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+          "=",
+          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_account_id" })
+        ] }),
+        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+          "=",
+          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_access_key" })
+        ] }),
+        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+          "=",
+          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_secret_key" })
+        ] }),
+        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+          "=",
+          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "your_bucket_name" })
+        ] }),
+        /* @__PURE__ */ jsxs3("span", { css: styles3.envVar, children: [
+          /* @__PURE__ */ jsx3("span", { css: styles3.envKey, children: "CLOUDFLARE_R2_PUBLIC_URL" }),
+          "=",
+          /* @__PURE__ */ jsx3("span", { css: styles3.envValue, children: "https://pub-xxx.r2.dev" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { css: styles3.footer, children: [
+      /* @__PURE__ */ jsxs3(
+        "a",
+        {
+          css: styles3.docsBtn,
+          href: "https://developers.cloudflare.com/r2/get-started/",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: [
+            "R2 Documentation",
+            /* @__PURE__ */ jsx3("svg", { css: styles3.externalIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3("button", { css: styles3.doneBtn, onClick: onClose, children: "Got it" })
+    ] })
+  ] }) });
+}
+
 // src/components/StudioToolbar.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var btnHeight = "36px";
 var spin = keyframes3`
   to { transform: rotate(360deg); }
 `;
-var styles3 = {
-  toolbar: css3`
+var styles4 = {
+  toolbar: css4`
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
@@ -692,21 +996,21 @@ var styles3 = {
       padding: 12px 24px;
     }
   `,
-  left: css3`
+  left: css4`
     display: flex;
     flex-wrap: nowrap;
     flex-shrink: 0;
     align-items: center;
     gap: 8px;
   `,
-  right: css3`
+  right: css4`
     display: flex;
     flex-wrap: nowrap;
     flex-shrink: 0;
     align-items: center;
     gap: 8px;
   `,
-  btn: css3`
+  btn: css4`
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -733,10 +1037,10 @@ var styles3 = {
       opacity: 0.5;
     }
   `,
-  btnIconOnly: css3`
+  btnIconOnly: css4`
     padding: 0 10px;
   `,
-  btnPrimary: css3`
+  btnPrimary: css4`
     background: ${colors.primary};
     border-color: ${colors.primary};
     color: white;
@@ -746,7 +1050,7 @@ var styles3 = {
       border-color: ${colors.primaryHover};
     }
   `,
-  btnDanger: css3`
+  btnDanger: css4`
     color: ${colors.danger};
     
     &:hover:not(:disabled) {
@@ -754,14 +1058,14 @@ var styles3 = {
       border-color: ${colors.danger};
     }
   `,
-  icon: css3`
+  icon: css4`
     width: 16px;
     height: 16px;
   `,
-  iconSpin: css3`
+  iconSpin: css4`
     animation: ${spin} 1s linear infinite;
   `,
-  selectionCount: css3`
+  selectionCount: css4`
     font-size: ${fontSize.base};
     color: ${colors.textSecondary};
     display: flex;
@@ -769,7 +1073,7 @@ var styles3 = {
     gap: 8px;
     margin-right: 8px;
   `,
-  clearBtn: css3`
+  clearBtn: css4`
     color: ${colors.primary};
     background: none;
     border: none;
@@ -782,13 +1086,13 @@ var styles3 = {
       text-decoration: underline;
     }
   `,
-  divider: css3`
+  divider: css4`
     width: 1px;
     height: 24px;
     background: ${colors.border};
     margin: 0 4px;
   `,
-  viewToggle: css3`
+  viewToggle: css4`
     display: flex;
     align-items: center;
     height: ${btnHeight};
@@ -797,12 +1101,12 @@ var styles3 = {
     border-radius: 6px;
     overflow: hidden;
   `,
-  searchWrapper: css3`
+  searchWrapper: css4`
     position: relative;
     display: flex;
     align-items: center;
   `,
-  searchInput: css3`
+  searchInput: css4`
     height: ${btnHeight};
     padding: 0 32px 0 12px;
     border: 1px solid ${colors.border};
@@ -823,7 +1127,7 @@ var styles3 = {
       color: ${colors.textMuted};
     }
   `,
-  searchClearBtn: css3`
+  searchClearBtn: css4`
     position: absolute;
     right: 5px;
     top: 5px;
@@ -843,7 +1147,7 @@ var styles3 = {
       background: ${colors.primaryHover};
     }
   `,
-  viewBtn: css3`
+  viewBtn: css4`
     height: 100%;
     padding: 0 10px;
     background: transparent;
@@ -860,7 +1164,7 @@ var styles3 = {
       background-color: ${colors.surfaceHover};
     }
   `,
-  viewBtnActive: css3`
+  viewBtnActive: css4`
     background-color: ${colors.primaryLight};
     color: ${colors.primary};
     
@@ -893,6 +1197,8 @@ function StudioToolbar() {
   const [showNewFolderModal, setShowNewFolderModal] = useState2(false);
   const [showRenameFolderModal, setShowRenameFolderModal] = useState2(false);
   const [showMoveModal, setShowMoveModal] = useState2(false);
+  const [showR2SetupModal, setShowR2SetupModal] = useState2(false);
+  const [syncing, setSyncing] = useState2(false);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = useCallback(() => {
     fileInputRef.current?.click();
@@ -1189,9 +1495,60 @@ function StudioToolbar() {
       });
     }
   }, [selectedItems, clearSelection, triggerRefresh]);
-  const handleSyncCdn = useCallback(() => {
-    console.log("Sync CDN clicked", selectedItems);
-  }, [selectedItems]);
+  const handleSyncCdn = useCallback(async () => {
+    if (selectedItems.size === 0) return;
+    const imageKeys = Array.from(selectedItems).filter((p) => !p.endsWith("/")).map((p) => "/" + p.replace(/^public\//, ""));
+    if (imageKeys.length === 0) {
+      setAlertMessage({
+        title: "No Images Selected",
+        message: "Please select image files to sync to CDN."
+      });
+      return;
+    }
+    setSyncing(true);
+    try {
+      const response = await fetch("/api/studio/sync", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageKeys })
+      });
+      const data = await response.json();
+      if (response.ok) {
+        const syncedCount = data.synced?.length || 0;
+        const errorCount = data.errors?.length || 0;
+        if (errorCount > 0) {
+          setAlertMessage({
+            title: "Sync Partially Complete",
+            message: `Synced ${syncedCount} images. ${errorCount} failed.`
+          });
+        } else {
+          setAlertMessage({
+            title: "Sync Complete",
+            message: `Successfully synced ${syncedCount} images to CDN.`
+          });
+        }
+        clearSelection();
+        triggerRefresh();
+      } else {
+        if (data.error?.includes("R2 not configured") || data.error?.includes("CLOUDFLARE_R2")) {
+          setShowR2SetupModal(true);
+        } else {
+          setAlertMessage({
+            title: "Sync Failed",
+            message: data.error || "Failed to sync to CDN."
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Sync error:", error);
+      setAlertMessage({
+        title: "Sync Failed",
+        message: "Failed to sync to CDN. Check console for details."
+      });
+    } finally {
+      setSyncing(false);
+    }
+  }, [selectedItems, clearSelection, triggerRefresh]);
   const handleCreateFolder = useCallback(async (folderName) => {
     setShowNewFolderModal(false);
     try {
@@ -1288,8 +1645,8 @@ function StudioToolbar() {
   if (focusedItem) {
     return null;
   }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    showDeleteConfirm && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    showDeleteConfirm && /* @__PURE__ */ jsx4(
       ConfirmModal,
       {
         title: "Delete Items",
@@ -1300,7 +1657,7 @@ function StudioToolbar() {
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
-    showProcessConfirm && /* @__PURE__ */ jsx3(
+    showProcessConfirm && /* @__PURE__ */ jsx4(
       ConfirmModal,
       {
         title: "Process Images",
@@ -1310,7 +1667,7 @@ function StudioToolbar() {
         onCancel: () => setShowProcessConfirm(false)
       }
     ),
-    showProgress && /* @__PURE__ */ jsx3(
+    showProgress && /* @__PURE__ */ jsx4(
       ProgressModal,
       {
         title: "Processing Images",
@@ -1327,7 +1684,7 @@ function StudioToolbar() {
         }
       }
     ),
-    showNewFolderModal && /* @__PURE__ */ jsx3(
+    showNewFolderModal && /* @__PURE__ */ jsx4(
       InputModal,
       {
         title: "New Folder",
@@ -1338,7 +1695,7 @@ function StudioToolbar() {
         onCancel: () => setShowNewFolderModal(false)
       }
     ),
-    showMoveModal && /* @__PURE__ */ jsx3(
+    showMoveModal && /* @__PURE__ */ jsx4(
       StudioFolderPicker,
       {
         selectedItems,
@@ -1350,7 +1707,7 @@ function StudioToolbar() {
         onCancel: () => setShowMoveModal(false)
       }
     ),
-    showRenameFolderModal && selectedFolderPath && /* @__PURE__ */ jsx3(
+    showRenameFolderModal && selectedFolderPath && /* @__PURE__ */ jsx4(
       InputModal,
       {
         title: "Rename Folder",
@@ -1362,7 +1719,7 @@ function StudioToolbar() {
         onCancel: () => setShowRenameFolderModal(false)
       }
     ),
-    alertMessage && /* @__PURE__ */ jsx3(
+    alertMessage && /* @__PURE__ */ jsx4(
       AlertModal,
       {
         title: alertMessage.title,
@@ -1370,8 +1727,15 @@ function StudioToolbar() {
         onClose: () => setAlertMessage(null)
       }
     ),
-    /* @__PURE__ */ jsxs3("div", { css: styles3.toolbar, children: [
-      /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
+      R2SetupModal,
+      {
+        isOpen: showR2SetupModal,
+        onClose: () => setShowR2SetupModal(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { css: styles4.toolbar, children: [
+      /* @__PURE__ */ jsx4(
         "input",
         {
           ref: fileInputRef,
@@ -1382,87 +1746,87 @@ function StudioToolbar() {
           style: { display: "none" }
         }
       ),
-      /* @__PURE__ */ jsxs3("div", { css: styles3.left, children: [
-        /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4("div", { css: styles4.left, children: [
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: [styles3.btn, styles3.btnPrimary],
+            css: [styles4.btn, styles4.btnPrimary],
             onClick: handleUpload,
             disabled: uploading || isInImagesFolder,
             children: [
-              /* @__PURE__ */ jsx3(UploadIcon, {}),
+              /* @__PURE__ */ jsx4(UploadIcon, {}),
               uploading ? "Uploading..." : "Upload"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: styles3.btn,
+            css: styles4.btn,
             onClick: () => singleFolderSelected ? setShowRenameFolderModal(true) : setShowNewFolderModal(true),
             disabled: isInImagesFolder && !singleFolderSelected,
             title: isInImagesFolder && !singleFolderSelected ? "Cannot create folders in protected images folder" : void 0,
             children: [
-              singleFolderSelected ? /* @__PURE__ */ jsx3(RenameIcon, {}) : /* @__PURE__ */ jsx3(FolderPlusIcon, {}),
+              singleFolderSelected ? /* @__PURE__ */ jsx4(RenameIcon, {}) : /* @__PURE__ */ jsx4(FolderPlusIcon, {}),
               singleFolderSelected ? "Rename Folder" : "New Folder"
             ]
           }
         ),
-        /* @__PURE__ */ jsx3("div", { css: styles3.divider }),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx4("div", { css: styles4.divider }),
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: styles3.btn,
+            css: styles4.btn,
             onClick: handleProcessImages,
             disabled: processing || isInImagesFolder,
             title: isInImagesFolder ? "Cannot process images folder" : void 0,
             children: [
-              /* @__PURE__ */ jsx3(ImageStackIcon, {}),
+              /* @__PURE__ */ jsx4(ImageStackIcon, {}),
               processing ? "Processing..." : "Process Images"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: [styles3.btn, styles3.btnDanger],
+            css: [styles4.btn, styles4.btnDanger],
             onClick: handleDeleteClick,
             disabled: !hasSelection,
             children: [
-              /* @__PURE__ */ jsx3(TrashIcon, {}),
+              /* @__PURE__ */ jsx4(TrashIcon, {}),
               "Delete"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: styles3.btn,
+            css: styles4.btn,
             onClick: handleMoveClick,
             disabled: !hasSelection,
             children: [
-              /* @__PURE__ */ jsx3(MoveIcon, {}),
+              /* @__PURE__ */ jsx4(MoveIcon, {}),
               "Move"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
-            css: styles3.btn,
+            css: styles4.btn,
             onClick: handleSyncCdn,
-            disabled: !hasSelection,
+            disabled: !hasSelection || syncing,
             children: [
-              /* @__PURE__ */ jsx3(CloudIcon, {}),
-              "Sync CDN"
+              /* @__PURE__ */ jsx4(CloudIcon, {}),
+              syncing ? "Syncing..." : "Sync CDN"
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { css: styles3.searchWrapper, children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { css: styles4.searchWrapper, children: [
+          /* @__PURE__ */ jsx4(
             "input",
             {
-              css: styles3.searchInput,
+              css: styles4.searchInput,
               type: "text",
               placeholder: "Search images...",
               value: searchQuery,
@@ -1470,48 +1834,48 @@ function StudioToolbar() {
               onKeyDown: handleSearchKeyDown
             }
           ),
-          searchQuery && /* @__PURE__ */ jsx3(
+          searchQuery && /* @__PURE__ */ jsx4(
             "button",
             {
-              css: styles3.searchClearBtn,
+              css: styles4.searchClearBtn,
               onClick: () => setSearchQuery(""),
               title: "Clear search",
-              children: /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              children: /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs3("div", { css: styles3.right, children: [
-        hasSelection && /* @__PURE__ */ jsxs3("span", { css: styles3.selectionCount, children: [
+      /* @__PURE__ */ jsxs4("div", { css: styles4.right, children: [
+        hasSelection && /* @__PURE__ */ jsxs4("span", { css: styles4.selectionCount, children: [
           selectedItems.size,
           " selected",
-          /* @__PURE__ */ jsx3("button", { css: styles3.clearBtn, onClick: clearSelection, children: "Clear" })
+          /* @__PURE__ */ jsx4("button", { css: styles4.clearBtn, onClick: clearSelection, children: "Clear" })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
-            css: [styles3.btn, styles3.btnIconOnly],
+            css: [styles4.btn, styles4.btnIconOnly],
             onClick: handleRefresh,
-            children: /* @__PURE__ */ jsx3(RefreshIcon, { spinning: refreshing })
+            children: /* @__PURE__ */ jsx4(RefreshIcon, { spinning: refreshing })
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { css: styles3.viewToggle, children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs4("div", { css: styles4.viewToggle, children: [
+          /* @__PURE__ */ jsx4(
             "button",
             {
-              css: [styles3.viewBtn, viewMode === "grid" && styles3.viewBtnActive],
+              css: [styles4.viewBtn, viewMode === "grid" && styles4.viewBtnActive],
               onClick: () => setViewMode("grid"),
               "aria-label": "Grid view",
-              children: /* @__PURE__ */ jsx3(GridIcon, {})
+              children: /* @__PURE__ */ jsx4(GridIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "button",
             {
-              css: [styles3.viewBtn, viewMode === "list" && styles3.viewBtnActive],
+              css: [styles4.viewBtn, viewMode === "list" && styles4.viewBtnActive],
               onClick: () => setViewMode("list"),
               "aria-label": "List view",
-              children: /* @__PURE__ */ jsx3(ListIcon, {})
+              children: /* @__PURE__ */ jsx4(ListIcon, {})
             }
           )
         ] })
@@ -1520,82 +1884,270 @@ function StudioToolbar() {
   ] });
 }
 function UploadIcon() {
-  return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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 RefreshIcon({ spinning }) {
-  return /* @__PURE__ */ jsx3("svg", { css: [styles3.icon, spinning && styles3.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: [styles4.icon, spinning && styles4.iconSpin], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) });
 }
 function MoveIcon() {
-  return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) });
+  return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
+  return /* @__PURE__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
 }
 function ImageStackIcon() {
-  return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("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__ */ jsx4("svg", { css: styles4.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
 }
 
 // src/components/StudioFileGrid.tsx
-import { useEffect as useEffect2, useState as useState3, useRef as useRef2 } from "react";
-import { css as css4, keyframes as keyframes4 } from "@emotion/react";
-import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var spin2 = keyframes4`
-  to { transform: rotate(360deg); }
-`;
-var styles4 = {
-  loading: css4`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-  `,
-  spinner: css4`
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 3px solid ${colors.border};
-    border-top-color: ${colors.primary};
-    animation: ${spin2} 0.8s linear infinite;
-  `,
-  empty: css4`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-    color: ${colors.textSecondary};
-  `,
-  emptyIcon: css4`
-    width: 48px;
-    height: 48px;
-    margin-bottom: 16px;
-    opacity: 0.5;
-  `,
-  emptyText: css4`
-    font-size: ${fontSize.base};
-    margin: 0 0 4px 0;
-    
-    &:last-child {
-      color: ${colors.textMuted};
-      font-size: ${fontSize.sm};
+import { useState as useState4 } from "react";
+import { css as css5, keyframes as keyframes4 } from "@emotion/react";
+
+// src/hooks/useFileList.ts
+import { useEffect as useEffect2, useState as useState3, useRef as useRef2, useCallback as useCallback2 } from "react";
+
+// src/lib/api.ts
+var StudioApiClient = class {
+  async get(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.error || `Request failed: ${response.status}`);
+    }
+    return response.json();
+  }
+  async post(url, body) {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: body ? { "Content-Type": "application/json" } : void 0,
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.error || `Request failed: ${response.status}`);
+    }
+    return response.json();
+  }
+  // List handlers
+  async list(path = "public") {
+    return this.get(`/api/studio/list?path=${encodeURIComponent(path)}`);
+  }
+  async search(query) {
+    return this.get(`/api/studio/search?q=${encodeURIComponent(query)}`);
+  }
+  async listFolders() {
+    return this.get("/api/studio/list-folders");
+  }
+  async countImages() {
+    return this.get("/api/studio/count-images");
+  }
+  async folderImages(folders) {
+    return this.get(`/api/studio/folder-images?folders=${encodeURIComponent(folders.join(","))}`);
+  }
+  // File handlers
+  async upload(file, targetPath = "public") {
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("path", targetPath);
+    const response = await fetch("/api/studio/upload", {
+      method: "POST",
+      body: formData
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.error || `Upload failed: ${response.status}`);
+    }
+    return response.json();
+  }
+  async delete(paths) {
+    return this.post("/api/studio/delete", { paths });
+  }
+  async createFolder(parentPath, name) {
+    return this.post("/api/studio/create-folder", { parentPath, name });
+  }
+  async rename(oldPath, newName) {
+    return this.post("/api/studio/rename", { oldPath, newName });
+  }
+  async move(paths, destination) {
+    return this.post("/api/studio/move", { paths, destination });
+  }
+  // Image handlers
+  async sync(imageKeys) {
+    return this.post("/api/studio/sync", { imageKeys });
+  }
+  async reprocess(imageKeys) {
+    return this.post("/api/studio/reprocess", { imageKeys });
+  }
+  // Process all returns a stream, handle separately
+  processAllStream() {
+    return new EventSource("/api/studio/process-all");
+  }
+};
+var studioApi = new StudioApiClient();
+
+// src/hooks/useFileList.ts
+function useFileList() {
+  const {
+    currentPath,
+    setCurrentPath,
+    navigateUp,
+    selectedItems,
+    toggleSelection,
+    selectRange,
+    lastSelectedPath,
+    selectAll,
+    clearSelection,
+    refreshKey,
+    setFocusedItem,
+    triggerRefresh,
+    searchQuery,
+    showError
+  } = useStudio();
+  const [items, setItems] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const isInitialLoad = useRef2(true);
+  const lastPath = useRef2(currentPath);
+  useEffect2(() => {
+    async function loadItems() {
+      const isPathChange = lastPath.current !== currentPath;
+      if (isInitialLoad.current || isPathChange) {
+        setLoading(true);
+      }
+      lastPath.current = currentPath;
+      try {
+        const data = searchQuery && searchQuery.length >= 2 ? await studioApi.search(searchQuery) : await studioApi.list(currentPath);
+        setItems(data.items || []);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to load items";
+        showError("Load Error", message);
+        setItems([]);
+      }
+      setLoading(false);
+      isInitialLoad.current = false;
     }
+    loadItems();
+  }, [currentPath, refreshKey, searchQuery, showError]);
+  const isAtRoot = currentPath === "public";
+  const isSearching = searchQuery && searchQuery.length >= 2;
+  const sortedItems = [...items].sort((a, b) => {
+    if (a.type === "folder" && b.type !== "folder") return -1;
+    if (a.type !== "folder" && b.type === "folder") return 1;
+    return a.name.localeCompare(b.name);
+  });
+  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
+  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
+  const handleItemClick = useCallback2((item, e) => {
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  }, [lastSelectedPath, selectRange, sortedItems, toggleSelection]);
+  const handleOpen = useCallback2((item) => {
+    if (item.type === "folder") {
+      setCurrentPath(item.path);
+    } else {
+      setFocusedItem(item);
+    }
+  }, [setCurrentPath, setFocusedItem]);
+  const handleGenerateThumbnail = useCallback2(async (item) => {
+    try {
+      const imageKey = "/" + item.path.replace(/^public\//, "");
+      await studioApi.reprocess([imageKey]);
+      triggerRefresh();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to generate thumbnail";
+      showError("Processing Error", message);
+    }
+  }, [triggerRefresh, showError]);
+  const handleSelectAll = useCallback2(() => {
+    if (allItemsSelected) {
+      clearSelection();
+    } else {
+      selectAll(sortedItems);
+    }
+  }, [allItemsSelected, clearSelection, selectAll, sortedItems]);
+  return {
+    // State
+    items,
+    loading,
+    sortedItems,
+    // Computed
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    // Context values
+    currentPath,
+    selectedItems,
+    navigateUp,
+    // Handlers
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll
+  };
+}
+
+// src/components/StudioFileGrid.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+var spin2 = keyframes4`
+  to { transform: rotate(360deg); }
+`;
+var styles5 = {
+  loading: css5`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
   `,
-  grid: css4`
+  spinner: css5`
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 3px solid ${colors.border};
+    border-top-color: ${colors.primary};
+    animation: ${spin2} 0.8s linear infinite;
+  `,
+  empty: css5`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+    color: ${colors.textSecondary};
+  `,
+  emptyIcon: css5`
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  `,
+  emptyText: css5`
+    font-size: ${fontSize.base};
+    margin: 0 0 4px 0;
+    
+    &:last-child {
+      color: ${colors.textMuted};
+      font-size: ${fontSize.sm};
+    }
+  `,
+  grid: css5`
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
@@ -1605,7 +2157,7 @@ var styles4 = {
     @media (min-width: 1024px) { grid-template-columns: repeat(4, 1fr); }
     @media (min-width: 1280px) { grid-template-columns: repeat(5, 1fr); }
   `,
-  item: css4`
+  item: css5`
     position: relative;
     border-radius: 8px;
     border: 1px solid ${colors.border};
@@ -1621,7 +2173,7 @@ var styles4 = {
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
     }
   `,
-  itemSelected: css4`
+  itemSelected: css5`
     border-color: ${colors.primary};
     box-shadow: 0 0 0 1px ${colors.primary};
     
@@ -1630,14 +2182,14 @@ var styles4 = {
       box-shadow: 0 0 0 1px ${colors.primary};
     }
   `,
-  parentItem: css4`
+  parentItem: css5`
     cursor: pointer;
     
     &:hover {
       border-color: ${colors.primary};
     }
   `,
-  checkboxWrapper: css4`
+  checkboxWrapper: css5`
     position: absolute;
     top: 0;
     left: 0;
@@ -1645,13 +2197,13 @@ var styles4 = {
     padding: 8px;
     cursor: pointer;
   `,
-  checkbox: css4`
+  checkbox: css5`
     width: 18px;
     height: 18px;
     accent-color: ${colors.primary};
     cursor: pointer;
   `,
-  cdnBadge: css4`
+  cdnBadge: css5`
     position: absolute;
     top: 8px;
     right: 8px;
@@ -1663,7 +2215,7 @@ var styles4 = {
     padding: 2px 8px;
     border-radius: 4px;
   `,
-  content: css4`
+  content: css5`
     position: relative;
     aspect-ratio: 1;
     display: flex;
@@ -1672,20 +2224,20 @@ var styles4 = {
     padding: 16px;
     background: ${colors.background};
   `,
-  folderIcon: css4`
+  folderIcon: css5`
     width: 56px;
     height: 56px;
     color: #f9935e;
   `,
-  imagesFolderIcon: css4`
+  imagesFolderIcon: css5`
     width: 56px;
     height: 56px;
     color: ${colors.imagesFolder};
   `,
-  imagesFolderWrapper: css4`
+  imagesFolderWrapper: css5`
     position: relative;
   `,
-  lockIcon: css4`
+  lockIcon: css5`
     position: absolute;
     bottom: 4px;
     right: 4px;
@@ -1696,23 +2248,23 @@ var styles4 = {
     border-radius: 50%;
     padding: 2px;
   `,
-  parentIcon: css4`
+  parentIcon: css5`
     width: 56px;
     height: 56px;
     color: ${colors.textMuted};
   `,
-  fileIcon: css4`
+  fileIcon: css5`
     width: 40px;
     height: 40px;
     color: ${colors.textMuted};
   `,
-  image: css4`
+  image: css5`
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     border-radius: 4px;
   `,
-  noThumbnail: css4`
+  noThumbnail: css5`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1732,31 +2284,31 @@ var styles4 = {
       background: ${colors.surfaceHover};
     }
   `,
-  noThumbnailIcon: css4`
+  noThumbnailIcon: css5`
     width: 32px;
     height: 32px;
     color: ${colors.textMuted};
   `,
-  noThumbnailText: css4`
+  noThumbnailText: css5`
     font-size: ${fontSize.xs};
     color: ${colors.textMuted};
     text-align: center;
   `,
-  label: css4`
+  label: css5`
     padding: 10px 12px;
     background-color: ${colors.surface};
     border-top: 1px solid ${colors.borderLight};
   `,
-  labelRow: css4`
+  labelRow: css5`
     display: flex;
     flex-direction: column;
     gap: 2px;
   `,
-  labelText: css4`
+  labelText: css5`
     flex: 1;
     min-width: 0;
   `,
-  copyBtn: css4`
+  copyBtn: css5`
     position: absolute;
     top: 4px;
     right: 4px;
@@ -1778,11 +2330,11 @@ var styles4 = {
       color: ${colors.text};
     }
   `,
-  copyIcon: css4`
+  copyIcon: css5`
     width: 18px;
     height: 18px;
   `,
-  tooltip: css4`
+  tooltip: css5`
     position: absolute;
     top: 50%;
     right: 100%;
@@ -1807,7 +2359,7 @@ var styles4 = {
       border-left-color: #1a1f36;
     }
   `,
-  openBtn: css4`
+  openBtn: css5`
     position: absolute;
     bottom: 8px;
     right: 8px;
@@ -1831,7 +2383,7 @@ var styles4 = {
       border-color: ${colors.primary};
     }
   `,
-  name: css4`
+  name: css5`
     font-size: ${fontSize.sm};
     font-weight: 500;
     color: ${colors.text};
@@ -1841,12 +2393,12 @@ var styles4 = {
     margin: 0;
     letter-spacing: -0.01em;
   `,
-  size: css4`
+  size: css5`
     font-size: ${fontSize.xs};
     color: ${colors.textMuted};
     margin: 2px 0 0 0;
   `,
-  selectAllRow: css4`
+  selectAllRow: css5`
     display: flex;
     align-items: center;
     margin-bottom: 16px;
@@ -1855,7 +2407,7 @@ var styles4 = {
     border-radius: 8px;
     border: 1px solid ${colors.border};
   `,
-  selectAllLabel: css4`
+  selectAllLabel: css5`
     display: flex;
     align-items: center;
     gap: 10px;
@@ -1868,100 +2420,44 @@ var styles4 = {
       color: ${colors.text};
     }
   `,
-  selectAllCheckbox: css4`
+  selectAllCheckbox: css5`
     width: 16px;
     height: 16px;
     accent-color: ${colors.primary};
   `
 };
 function StudioFileGrid() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
-  const [items, setItems] = useState3([]);
-  const [loading, setLoading] = useState3(true);
-  const isInitialLoad = useRef2(true);
-  const lastPath = useRef2(currentPath);
-  useEffect2(() => {
-    async function loadItems() {
-      const isPathChange = lastPath.current !== currentPath;
-      if (isInitialLoad.current || isPathChange) {
-        setLoading(true);
-      }
-      lastPath.current = currentPath;
-      try {
-        const url = searchQuery && searchQuery.length >= 2 ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}` : `/api/studio/list?path=${encodeURIComponent(currentPath)}`;
-        const response = await fetch(url);
-        if (response.ok) {
-          const data = await response.json();
-          setItems(data.items || []);
-        }
-      } catch (error) {
-        console.error("Failed to load items:", error);
-      }
-      setLoading(false);
-      isInitialLoad.current = false;
-    }
-    loadItems();
-  }, [currentPath, refreshKey, searchQuery]);
+  const {
+    loading,
+    sortedItems,
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    selectedItems,
+    navigateUp,
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll
+  } = useFileList();
   if (loading) {
-    return /* @__PURE__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
+    return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
   }
-  const isAtRoot = currentPath === "public";
-  if (items.length === 0 && isAtRoot) {
-    return /* @__PURE__ */ jsxs4("div", { css: styles4.empty, children: [
-      /* @__PURE__ */ jsx4("svg", { css: styles4.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx4("p", { css: styles4.emptyText, children: "No files in this folder" }),
-      /* @__PURE__ */ jsx4("p", { css: styles4.emptyText, children: "Upload images to get started" })
+  if (sortedItems.length === 0 && isAtRoot) {
+    return /* @__PURE__ */ jsxs5("div", { css: styles5.empty, children: [
+      /* @__PURE__ */ jsx5("svg", { css: styles5.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+      /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "No files in this folder" }),
+      /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "Upload images to get started" })
     ] });
   }
-  const isSearching = searchQuery && searchQuery.length >= 2;
-  const sortedItems = [...items].sort((a, b) => {
-    if (a.type === "folder" && b.type !== "folder") return -1;
-    if (a.type !== "folder" && b.type === "folder") return 1;
-    return a.name.localeCompare(b.name);
-  });
-  const handleItemClick = (item, e) => {
-    if (e.shiftKey && lastSelectedPath) {
-      selectRange(lastSelectedPath, item.path, sortedItems);
-    } else {
-      toggleSelection(item.path);
-    }
-  };
-  const handleOpen = (item) => {
-    if (item.type === "folder") {
-      setCurrentPath(item.path);
-    } else {
-      setFocusedItem(item);
-    }
-  };
-  const handleGenerateThumbnail = async (item) => {
-    try {
-      const imageKey = item.path.replace(/^public\//, "");
-      await fetch("/api/studio/reprocess", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ imageKeys: [imageKey] })
-      });
-      triggerRefresh();
-    } catch (error) {
-      console.error("Failed to generate thumbnail:", error);
-    }
-  };
-  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
-  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
-  const handleSelectAll = () => {
-    if (allItemsSelected) {
-      clearSelection();
-    } else {
-      selectAll(sortedItems);
-    }
-  };
-  return /* @__PURE__ */ jsxs4("div", { children: [
-    sortedItems.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    sortedItems.length > 0 && /* @__PURE__ */ jsx5("div", { css: styles5.selectAllRow, children: /* @__PURE__ */ jsxs5("label", { css: styles5.selectAllLabel, children: [
+      /* @__PURE__ */ jsx5(
         "input",
         {
           type: "checkbox",
-          css: styles4.selectAllCheckbox,
+          css: styles5.selectAllCheckbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -1973,22 +2469,22 @@ function StudioFileGrid() {
       sortedItems.length,
       ")"
     ] }) }),
-    /* @__PURE__ */ jsxs4("div", { css: styles4.grid, children: [
-      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs5("div", { css: styles5.grid, children: [
+      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5(
         "div",
         {
-          css: [styles4.item, styles4.parentItem],
+          css: [styles5.item, styles5.parentItem],
           onClick: navigateUp,
           children: [
-            /* @__PURE__ */ jsx4("div", { css: styles4.content, children: /* @__PURE__ */ jsx4("svg", { css: styles4.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
-            /* @__PURE__ */ jsxs4("div", { css: styles4.label, children: [
-              /* @__PURE__ */ jsx4("p", { css: styles4.name, children: ".." }),
-              /* @__PURE__ */ jsx4("p", { css: styles4.size, children: "Parent folder" })
+            /* @__PURE__ */ jsx5("div", { css: styles5.content, children: /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }) }),
+            /* @__PURE__ */ jsxs5("div", { css: styles5.label, children: [
+              /* @__PURE__ */ jsx5("p", { css: styles5.name, children: ".." }),
+              /* @__PURE__ */ jsx5("p", { css: styles5.size, children: "Parent folder" })
             ] })
           ]
         }
       ),
-      sortedItems.map((item) => /* @__PURE__ */ jsx4(
+      sortedItems.map((item) => /* @__PURE__ */ jsx5(
         GridItem,
         {
           item,
@@ -2003,7 +2499,7 @@ function StudioFileGrid() {
   ] });
 }
 function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
-  const [showCopied, setShowCopied] = useState3(false);
+  const [showCopied, setShowCopied] = useState4(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
   const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
@@ -2014,46 +2510,46 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
     setShowCopied(true);
     setTimeout(() => setShowCopied(false), 1500);
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      css: [styles4.item, isSelected && styles4.itemSelected],
+      css: [styles5.item, isSelected && styles5.itemSelected],
       onClick,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
-            css: styles4.checkboxWrapper,
+            css: styles5.checkboxWrapper,
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx5(
               "input",
               {
                 type: "checkbox",
-                css: styles4.checkbox,
+                css: styles5.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        item.cdnSynced && /* @__PURE__ */ jsx4("span", { css: styles4.cdnBadge, children: "CDN" }),
-        /* @__PURE__ */ jsxs4("div", { css: styles4.content, children: [
-          /* @__PURE__ */ jsxs4(
+        item.cdnSynced && /* @__PURE__ */ jsx5("span", { css: styles5.cdnBadge, children: "CDN" }),
+        /* @__PURE__ */ jsxs5("div", { css: styles5.content, children: [
+          /* @__PURE__ */ jsxs5(
             "button",
             {
-              css: styles4.copyBtn,
+              css: styles5.copyBtn,
               onClick: handleCopyPath,
               title: "Copy file path",
               children: [
-                showCopied && /* @__PURE__ */ jsx4("span", { css: styles4.tooltip, children: "Copied!" }),
-                /* @__PURE__ */ jsx4("svg", { css: styles4.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("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__ */ jsx5("span", { css: styles5.tooltip, children: "Copied!" }),
+                /* @__PURE__ */ jsx5("svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "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__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
-              css: styles4.openBtn,
+              css: styles5.openBtn,
               onClick: (e) => {
                 e.stopPropagation();
                 onOpen();
@@ -2061,40 +2557,40 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
               children: "Open"
             }
           ),
-          isFolder ? isImagesFolder ? /* @__PURE__ */ jsxs4("div", { css: styles4.imagesFolderWrapper, children: [
-            /* @__PURE__ */ jsx4("svg", { css: styles4.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
-            /* @__PURE__ */ jsx4("svg", { css: styles4.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx4("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__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx4(
+          isFolder ? isImagesFolder ? /* @__PURE__ */ jsxs5("div", { css: styles5.imagesFolderWrapper, children: [
+            /* @__PURE__ */ jsx5("svg", { css: styles5.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
+            /* @__PURE__ */ jsx5("svg", { css: styles5.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("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__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx5(
             "img",
             {
-              css: styles4.image,
+              css: styles5.image,
               src: item.thumbnail,
               alt: item.name,
               loading: "lazy"
             }
-          ) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsxs4(
+          ) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsxs5(
             "button",
             {
-              css: styles4.noThumbnail,
+              css: styles5.noThumbnail,
               onClick: (e) => {
                 e.stopPropagation();
                 onGenerateThumbnail();
               },
               title: "Generate thumbnail",
               children: [
-                /* @__PURE__ */ jsx4("svg", { css: styles4.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 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__ */ jsx4("span", { css: styles4.noThumbnailText, children: "Generate" })
+                /* @__PURE__ */ jsx5("svg", { css: styles5.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+                /* @__PURE__ */ jsx5("span", { css: styles5.noThumbnailText, children: "Generate" })
               ]
             }
-          ) : /* @__PURE__ */ jsx4("svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
+          ) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
         ] }),
-        /* @__PURE__ */ jsx4("div", { css: styles4.label, children: /* @__PURE__ */ jsx4("div", { css: styles4.labelRow, children: /* @__PURE__ */ jsxs4("div", { css: styles4.labelText, children: [
-          /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: truncateMiddle(item.name) }),
-          isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
+        /* @__PURE__ */ jsx5("div", { css: styles5.label, children: /* @__PURE__ */ jsx5("div", { css: styles5.labelRow, children: /* @__PURE__ */ jsxs5("div", { css: styles5.labelText, children: [
+          /* @__PURE__ */ jsx5("p", { css: styles5.name, title: item.name, children: truncateMiddle(item.name) }),
+          isFolder ? /* @__PURE__ */ jsxs5("p", { css: styles5.size, children: [
             item.fileCount !== void 0 ? `${item.fileCount} files` : "",
             item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
             item.totalSize !== void 0 ? formatFileSize(item.totalSize) : ""
-          ] }) : item.size !== void 0 && /* @__PURE__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
+          ] }) : item.size !== void 0 && /* @__PURE__ */ jsx5("p", { css: styles5.size, children: formatFileSize(item.size) })
         ] }) }) })
       ]
     }
@@ -2120,20 +2616,20 @@ function truncateMiddle(str, maxLength = 24) {
 }
 
 // src/components/StudioFileList.tsx
-import { useEffect as useEffect3, useState as useState4, useRef as useRef3 } from "react";
-import { css as css5, keyframes as keyframes5 } from "@emotion/react";
-import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { css as css6, keyframes as keyframes5 } from "@emotion/react";
+import { jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var spin3 = keyframes5`
   to { transform: rotate(360deg); }
 `;
-var styles5 = {
-  loading: css5`
+var styles6 = {
+  loading: css6`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 256px;
   `,
-  spinner: css5`
+  spinner: css6`
     width: 32px;
     height: 32px;
     border-radius: 50%;
@@ -2141,7 +2637,7 @@ var styles5 = {
     border-top-color: ${colors.primary};
     animation: ${spin3} 0.8s linear infinite;
   `,
-  empty: css5`
+  empty: css6`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2149,19 +2645,19 @@ var styles5 = {
     height: 256px;
     color: ${colors.textSecondary};
   `,
-  tableWrapper: css5`
+  tableWrapper: css6`
     background: ${colors.surface};
     border-radius: 8px;
     border: 1px solid ${colors.border};
     overflow-x: auto;
   `,
-  table: css5`
+  table: css6`
     width: 100%;
     min-width: 600px;
     border-collapse: collapse;
     white-space: nowrap;
   `,
-  th: css5`
+  th: css6`
     text-align: left;
     font-size: 11px;
     color: ${colors.textMuted};
@@ -2172,20 +2668,20 @@ var styles5 = {
     background: ${colors.background};
     border-bottom: 1px solid ${colors.border};
   `,
-  thCheckbox: css5`
+  thCheckbox: css6`
     width: 48px;
   `,
-  thSize: css5`
+  thSize: css6`
     width: 96px;
   `,
-  thDimensions: css5`
+  thDimensions: css6`
     width: 128px;
   `,
-  thCdn: css5`
+  thCdn: css6`
     width: 96px;
   `,
-  tbody: css5``,
-  row: css5`
+  tbody: css6``,
+  row: css6`
     cursor: pointer;
     transition: background-color 0.15s ease;
     user-select: none;
@@ -2198,14 +2694,14 @@ var styles5 = {
       border-bottom: 1px solid ${colors.borderLight};
     }
   `,
-  rowSelected: css5`
+  rowSelected: css6`
     background-color: ${colors.primaryLight};
     
     &:hover {
       background-color: ${colors.primaryLight};
     }
   `,
-  parentRow: css5`
+  parentRow: css6`
     cursor: pointer;
     border-bottom: 1px solid ${colors.border};
     
@@ -2213,22 +2709,22 @@ var styles5 = {
       background-color: ${colors.surfaceHover};
     }
   `,
-  td: css5`
+  td: css6`
     padding: 12px 16px;
   `,
-  checkboxCell: css5`
+  checkboxCell: css6`
     padding: 12px 16px;
     cursor: pointer;
     vertical-align: middle;
   `,
-  checkbox: css5`
+  checkbox: css6`
     width: 18px;
     height: 18px;
     accent-color: ${colors.primary};
     cursor: pointer;
     display: block;
   `,
-  actionsCell: css5`
+  actionsCell: css6`
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -2236,7 +2732,7 @@ var styles5 = {
     margin-left: auto;
     flex-shrink: 0;
   `,
-  copyBtn: css5`
+  copyBtn: css6`
     position: relative;
     flex-shrink: 0;
     height: 32px;
@@ -2259,11 +2755,11 @@ var styles5 = {
       color: ${colors.text};
     }
   `,
-  copyIcon: css5`
+  copyIcon: css6`
     width: 16px;
     height: 16px;
   `,
-  tooltip: css5`
+  tooltip: css6`
     position: absolute;
     top: 50%;
     right: 100%;
@@ -2288,13 +2784,13 @@ var styles5 = {
       border-left-color: #1a1f36;
     }
   `,
-  nameCell: css5`
+  nameCell: css6`
     display: flex;
     align-items: center;
     gap: 12px;
     flex: 1;
   `,
-  thumbnailWrapper: css5`
+  thumbnailWrapper: css6`
     width: 48px;
     height: 36px;
     display: flex;
@@ -2302,7 +2798,7 @@ var styles5 = {
     justify-content: center;
     flex-shrink: 0;
   `,
-  folderIconWrapper: css5`
+  folderIconWrapper: css6`
     width: 48px;
     height: 36px;
     display: flex;
@@ -2310,12 +2806,12 @@ var styles5 = {
     justify-content: center;
     flex-shrink: 0;
   `,
-  folderIcon: css5`
+  folderIcon: css6`
     width: 24px;
     height: 24px;
     color: #f9935e;
   `,
-  imagesFolderWrapper: css5`
+  imagesFolderWrapper: css6`
     width: 48px;
     height: 36px;
     display: flex;
@@ -2325,31 +2821,31 @@ var styles5 = {
     position: relative;
     align-items: center;
   `,
-  imagesFolderIcon: css5`
+  imagesFolderIcon: css6`
     width: 24px;
     height: 24px;
     color: ${colors.imagesFolder};
   `,
-  lockIcon: css5`
+  lockIcon: css6`
     width: 10px;
     height: 10px;
     color: ${colors.imagesFolder};
     margin-left: -6px;
     margin-top: 8px;
   `,
-  parentIcon: css5`
+  parentIcon: css6`
     width: 20px;
     height: 20px;
     color: ${colors.textMuted};
     flex-shrink: 0;
   `,
-  fileIcon: css5`
+  fileIcon: css6`
     width: 20px;
     height: 20px;
     color: ${colors.textMuted};
     flex-shrink: 0;
   `,
-  thumbnail: css5`
+  thumbnail: css6`
     max-width: 100%;
     max-height: 100%;
     width: auto;
@@ -2358,7 +2854,7 @@ var styles5 = {
     border-radius: 4px;
     border: 1px solid ${colors.borderLight};
   `,
-  noThumbnail: css5`
+  noThumbnail: css6`
     width: 36px;
     height: 36px;
     display: flex;
@@ -2376,12 +2872,12 @@ var styles5 = {
       background: ${colors.surfaceHover};
     }
   `,
-  noThumbnailIcon: css5`
+  noThumbnailIcon: css6`
     width: 16px;
     height: 16px;
     color: ${colors.textMuted};
   `,
-  name: css5`
+  name: css6`
     font-size: ${fontSize.base};
     font-weight: 500;
     color: ${colors.text};
@@ -2391,11 +2887,11 @@ var styles5 = {
     white-space: nowrap;
     max-width: 300px;
   `,
-  meta: css5`
+  meta: css6`
     font-size: ${fontSize.sm};
     color: ${colors.textSecondary};
   `,
-  cdnBadge: css5`
+  cdnBadge: css6`
     display: inline-flex;
     align-items: center;
     gap: 4px;
@@ -2403,15 +2899,15 @@ var styles5 = {
     font-weight: 500;
     color: ${colors.success};
   `,
-  cdnIcon: css5`
+  cdnIcon: css6`
     width: 12px;
     height: 12px;
   `,
-  cdnEmpty: css5`
+  cdnEmpty: css6`
     font-size: ${fontSize.sm};
     color: ${colors.textMuted};
   `,
-  openBtn: css5`
+  openBtn: css6`
     height: 32px;
     font-size: ${fontSize.sm};
     font-weight: 500;
@@ -2432,89 +2928,33 @@ var styles5 = {
   `
 };
 function StudioFileList() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
-  const [items, setItems] = useState4([]);
-  const [loading, setLoading] = useState4(true);
-  const isInitialLoad = useRef3(true);
-  const lastPath = useRef3(currentPath);
-  useEffect3(() => {
-    async function loadItems() {
-      const isPathChange = lastPath.current !== currentPath;
-      if (isInitialLoad.current || isPathChange) {
-        setLoading(true);
-      }
-      lastPath.current = currentPath;
-      try {
-        const url = searchQuery && searchQuery.length >= 2 ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}` : `/api/studio/list?path=${encodeURIComponent(currentPath)}`;
-        const response = await fetch(url);
-        if (response.ok) {
-          const data = await response.json();
-          setItems(data.items || []);
-        }
-      } catch (error) {
-        console.error("Failed to load items:", error);
-      }
-      setLoading(false);
-      isInitialLoad.current = false;
-    }
-    loadItems();
-  }, [currentPath, refreshKey, searchQuery]);
+  const {
+    loading,
+    sortedItems,
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    selectedItems,
+    navigateUp,
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll
+  } = useFileList();
   if (loading) {
-    return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
+    return /* @__PURE__ */ jsx6("div", { css: styles6.loading, children: /* @__PURE__ */ jsx6("div", { css: styles6.spinner }) });
   }
-  const isAtRoot = currentPath === "public";
-  if (items.length === 0 && isAtRoot) {
-    return /* @__PURE__ */ jsx5("div", { css: styles5.empty, children: /* @__PURE__ */ jsx5("p", { children: "No files in this folder" }) });
+  if (sortedItems.length === 0 && isAtRoot) {
+    return /* @__PURE__ */ jsx6("div", { css: styles6.empty, children: /* @__PURE__ */ jsx6("p", { children: "No files in this folder" }) });
   }
-  const isSearching = searchQuery && searchQuery.length >= 2;
-  const sortedItems = [...items].sort((a, b) => {
-    if (a.type === "folder" && b.type !== "folder") return -1;
-    if (a.type !== "folder" && b.type === "folder") return 1;
-    return a.name.localeCompare(b.name);
-  });
-  const handleItemClick = (item, e) => {
-    if (e.shiftKey && lastSelectedPath) {
-      selectRange(lastSelectedPath, item.path, sortedItems);
-    } else {
-      toggleSelection(item.path);
-    }
-  };
-  const handleOpen = (item) => {
-    if (item.type === "folder") {
-      setCurrentPath(item.path);
-    } else {
-      setFocusedItem(item);
-    }
-  };
-  const handleGenerateThumbnail = async (item) => {
-    try {
-      const imageKey = item.path.replace(/^public\//, "");
-      await fetch("/api/studio/reprocess", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ imageKeys: [imageKey] })
-      });
-      triggerRefresh();
-    } catch (error) {
-      console.error("Failed to generate thumbnail:", error);
-    }
-  };
-  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
-  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
-  const handleSelectAll = () => {
-    if (allItemsSelected) {
-      clearSelection();
-    } else {
-      selectAll(sortedItems);
-    }
-  };
-  return /* @__PURE__ */ jsx5("div", { css: styles5.tableWrapper, children: /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
-    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6("div", { css: styles6.tableWrapper, children: /* @__PURE__ */ jsxs6("table", { css: styles6.table, children: [
+    /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsxs6("tr", { children: [
+      /* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx6(
         "input",
         {
           type: "checkbox",
-          css: styles5.checkbox,
+          css: styles6.checkbox,
           checked: allItemsSelected,
           ref: (el) => {
             if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
@@ -2522,23 +2962,23 @@ function StudioFileList() {
           onChange: handleSelectAll
         }
       ) }),
-      /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
-      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
+      /* @__PURE__ */ jsx6("th", { css: styles6.th, children: "Name" }),
+      /* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thSize], children: "Size" }),
+      /* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ jsx6("th", { css: [styles6.th, styles6.thCdn], children: "CDN" })
     ] }) }),
-    /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
-      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
-        /* @__PURE__ */ jsx5("td", { css: styles5.td }),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-          /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
-          /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
+    /* @__PURE__ */ jsxs6("tbody", { css: styles6.tbody, children: [
+      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs6("tr", { css: styles6.parentRow, onClick: navigateUp, children: [
+        /* @__PURE__ */ jsx6("td", { css: styles6.td }),
+        /* @__PURE__ */ jsx6("td", { css: styles6.td, children: /* @__PURE__ */ jsxs6("div", { css: styles6.nameCell, children: [
+          /* @__PURE__ */ jsx6("svg", { css: styles6.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+          /* @__PURE__ */ jsx6("span", { css: styles6.name, children: ".." })
         ] }) }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
+        /* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: "--" }),
+        /* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: "Parent folder" }),
+        /* @__PURE__ */ jsx6("td", { css: styles6.td, children: "--" })
       ] }),
-      sortedItems.map((item) => /* @__PURE__ */ jsx5(
+      sortedItems.map((item) => /* @__PURE__ */ jsx6(
         ListRow,
         {
           item,
@@ -2553,7 +2993,7 @@ function StudioFileList() {
   ] }) });
 }
 function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
-  const [showCopied, setShowCopied] = useState4(false);
+  const [showCopied, setShowCopied] = useState5(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
   const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
@@ -2564,62 +3004,62 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
     setShowCopied(true);
     setTimeout(() => setShowCopied(false), 1500);
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "tr",
     {
-      css: [styles5.row, isSelected && styles5.rowSelected],
+      css: [styles6.row, isSelected && styles6.rowSelected],
       onClick,
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "td",
           {
-            css: [styles5.td, styles5.checkboxCell],
+            css: [styles6.td, styles6.checkboxCell],
             onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx6(
               "input",
               {
                 type: "checkbox",
-                css: styles5.checkbox,
+                css: styles6.checkbox,
                 checked: isSelected,
                 onChange: () => onClick({})
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-          isFolder ? isImagesFolder ? /* @__PURE__ */ jsxs5("div", { css: styles5.imagesFolderWrapper, children: [
-            /* @__PURE__ */ jsx5("svg", { css: styles5.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
-            /* @__PURE__ */ jsx5("svg", { css: styles5.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("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__ */ jsx5("div", { css: styles5.folderIconWrapper, children: /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx5("div", { css: styles5.thumbnailWrapper, children: /* @__PURE__ */ jsx5("img", { css: styles5.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) }) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsx5("div", { css: styles5.thumbnailWrapper, children: /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("td", { css: styles6.td, children: /* @__PURE__ */ jsxs6("div", { css: styles6.nameCell, children: [
+          isFolder ? isImagesFolder ? /* @__PURE__ */ jsxs6("div", { css: styles6.imagesFolderWrapper, children: [
+            /* @__PURE__ */ jsx6("svg", { css: styles6.imagesFolderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }),
+            /* @__PURE__ */ jsx6("svg", { css: styles6.lockIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6("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__ */ jsx6("div", { css: styles6.folderIconWrapper, children: /* @__PURE__ */ jsx6("svg", { css: styles6.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) }) : isImage && item.hasThumbnail ? /* @__PURE__ */ jsx6("div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ jsx6("img", { css: styles6.thumbnail, src: item.thumbnail, alt: item.name, loading: "lazy" }) }) : isImage && !item.hasThumbnail ? /* @__PURE__ */ jsx6("div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ jsx6(
             "button",
             {
-              css: styles5.noThumbnail,
+              css: styles6.noThumbnail,
               onClick: (e) => {
                 e.stopPropagation();
                 onGenerateThumbnail();
               },
               title: "Generate thumbnail",
-              children: /* @__PURE__ */ jsx5("svg", { css: styles5.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("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__ */ jsx6("svg", { css: styles6.noThumbnailIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsx5("div", { css: styles5.thumbnailWrapper, children: /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) }),
-          /* @__PURE__ */ jsx5("span", { css: styles5.name, title: item.name, children: truncateMiddle2(item.name) }),
-          /* @__PURE__ */ jsxs5("div", { css: styles5.actionsCell, children: [
-            /* @__PURE__ */ jsxs5(
+          ) }) : /* @__PURE__ */ jsx6("div", { css: styles6.thumbnailWrapper, children: /* @__PURE__ */ jsx6("svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) }),
+          /* @__PURE__ */ jsx6("span", { css: styles6.name, title: item.name, children: truncateMiddle2(item.name) }),
+          /* @__PURE__ */ jsxs6("div", { css: styles6.actionsCell, children: [
+            /* @__PURE__ */ jsxs6(
               "button",
               {
-                css: styles5.copyBtn,
+                css: styles6.copyBtn,
                 onClick: handleCopyPath,
                 title: "Copy file path",
                 children: [
-                  showCopied && /* @__PURE__ */ jsx5("span", { css: styles5.tooltip, children: "Copied!" }),
-                  /* @__PURE__ */ jsx5("svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "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__ */ jsx6("span", { css: styles6.tooltip, children: "Copied!" }),
+                  /* @__PURE__ */ jsx6("svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "button",
               {
-                css: styles5.openBtn,
+                css: styles6.openBtn,
                 onClick: (e) => {
                   e.stopPropagation();
                   onOpen();
@@ -2629,12 +3069,12 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
-        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: isFolder ? item.totalSize !== void 0 ? formatFileSize2(item.totalSize) : "--" : item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
-        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs5("span", { css: styles5.cdnBadge, children: [
-          /* @__PURE__ */ jsx5("svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsx6("td", { css: [styles6.td, styles6.meta], children: isFolder ? item.fileCount !== void 0 ? `${item.fileCount} files` : "--" : item.size !== void 0 ? formatFileSize2(item.size) : "--" }),
+        /* @__PURE__ */ jsx6("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__ */ jsx6("td", { css: styles6.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs6("span", { css: styles6.cdnBadge, children: [
+          /* @__PURE__ */ jsx6("svg", { css: styles6.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx6("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__ */ jsx5("span", { css: styles5.cdnEmpty, children: "--" }) })
+        ] }) : /* @__PURE__ */ jsx6("span", { css: styles6.cdnEmpty, children: "--" }) })
       ]
     }
   );
@@ -2659,9 +3099,9 @@ function truncateMiddle2(str, maxLength = 32) {
 }
 
 // src/components/StudioDetailView.tsx
-import { useState as useState5 } from "react";
-import { css as css6 } from "@emotion/react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { css as css7 } from "@emotion/react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
 var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".avi", ".mkv", ".m4v"];
 function isImageFile(filename) {
@@ -2672,8 +3112,8 @@ function isVideoFile(filename) {
   const ext = filename.toLowerCase().substring(filename.lastIndexOf("."));
   return VIDEO_EXTENSIONS.includes(ext);
 }
-var styles6 = {
-  overlay: css6`
+var styles7 = {
+  overlay: css7`
     position: absolute;
     top: 0;
     left: 0;
@@ -2683,7 +3123,7 @@ var styles6 = {
     display: flex;
     background: transparent;
   `,
-  container: css6`
+  container: css7`
     display: flex;
     flex: 1;
     margin: 24px;
@@ -2693,7 +3133,7 @@ var styles6 = {
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
   `,
-  main: css6`
+  main: css7`
     position: relative;
     flex: 1;
     display: flex;
@@ -2704,7 +3144,7 @@ var styles6 = {
     background: ${colors.background};
     overflow: auto;
   `,
-  headerButtons: css6`
+  headerButtons: css7`
     position: absolute;
     top: 16px;
     right: 16px;
@@ -2712,7 +3152,7 @@ var styles6 = {
     gap: 8px;
     z-index: 10;
   `,
-  copyBtn: css6`
+  copyBtn: css7`
     position: relative;
     padding: 8px;
     background: ${colors.surface};
@@ -2730,12 +3170,12 @@ var styles6 = {
       border-color: ${colors.borderHover};
     }
   `,
-  copyIcon: css6`
+  copyIcon: css7`
     width: 20px;
     height: 20px;
     color: ${colors.textSecondary};
   `,
-  tooltip: css6`
+  tooltip: css7`
     position: absolute;
     right: 100%;
     top: 50%;
@@ -2760,7 +3200,7 @@ var styles6 = {
       border-left-color: #1a1f36;
     }
   `,
-  mainCloseBtn: css6`
+  mainCloseBtn: css7`
     padding: 8px;
     background: ${colors.surface};
     border: 1px solid ${colors.border};
@@ -2777,32 +3217,32 @@ var styles6 = {
       border-color: ${colors.borderHover};
     }
   `,
-  mainCloseIcon: css6`
+  mainCloseIcon: css7`
     width: 20px;
     height: 20px;
     color: ${colors.textSecondary};
   `,
-  mediaWrapper: css6`
+  mediaWrapper: css7`
     max-width: 100%;
     max-height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   `,
-  image: css6`
+  image: css7`
     max-width: 100%;
     max-height: calc(100vh - 200px);
     object-fit: contain;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   `,
-  video: css6`
+  video: css7`
     max-width: 100%;
     max-height: calc(100vh - 200px);
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   `,
-  filePlaceholder: css6`
+  filePlaceholder: css7`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -2812,19 +3252,19 @@ var styles6 = {
     border-radius: 12px;
     border: 1px solid ${colors.border};
   `,
-  fileIcon: css6`
+  fileIcon: css7`
     width: 80px;
     height: 80px;
     color: ${colors.textMuted};
     margin-bottom: 16px;
   `,
-  fileName: css6`
+  fileName: css7`
     font-size: ${fontSize.lg};
     font-weight: 600;
     color: ${colors.text};
     margin: 0;
   `,
-  sidebar: css6`
+  sidebar: css7`
     width: 280px;
     background: ${colors.surface};
     border-left: 1px solid ${colors.border};
@@ -2832,36 +3272,36 @@ var styles6 = {
     flex-direction: column;
     overflow: hidden;
   `,
-  sidebarHeader: css6`
+  sidebarHeader: css7`
     padding: 16px 20px;
     border-bottom: 1px solid ${colors.border};
   `,
-  sidebarTitle: css6`
+  sidebarTitle: css7`
     font-size: ${fontSize.base};
     font-weight: 600;
     color: ${colors.text};
     margin: 0;
   `,
-  sidebarContent: css6`
+  sidebarContent: css7`
     flex: 1;
     padding: 20px;
     overflow: auto;
   `,
-  info: css6`
+  info: css7`
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 24px;
   `,
-  infoRow: css6`
+  infoRow: css7`
     display: flex;
     justify-content: space-between;
     font-size: ${fontSize.sm};
   `,
-  infoLabel: css6`
+  infoLabel: css7`
     color: ${colors.textSecondary};
   `,
-  infoValue: css6`
+  infoValue: css7`
     color: ${colors.text};
     font-weight: 500;
     text-align: right;
@@ -2870,7 +3310,7 @@ var styles6 = {
     text-overflow: ellipsis;
     white-space: nowrap;
   `,
-  infoValueWrap: css6`
+  infoValueWrap: css7`
     color: ${colors.text};
     font-weight: 500;
     text-align: right;
@@ -2878,12 +3318,12 @@ var styles6 = {
     word-break: break-all;
     white-space: normal;
   `,
-  actions: css6`
+  actions: css7`
     display: flex;
     flex-direction: column;
     gap: 8px;
   `,
-  actionBtn: css6`
+  actionBtn: css7`
     display: flex;
     align-items: center;
     gap: 10px;
@@ -2904,7 +3344,7 @@ var styles6 = {
       border-color: ${colors.borderHover};
     }
   `,
-  actionBtnDanger: css6`
+  actionBtnDanger: css7`
     color: ${colors.danger};
     
     &:hover {
@@ -2912,7 +3352,7 @@ var styles6 = {
       border-color: ${colors.danger};
     }
   `,
-  actionIcon: css6`
+  actionIcon: css7`
     width: 16px;
     height: 16px;
     flex-shrink: 0;
@@ -2920,12 +3360,14 @@ var styles6 = {
 };
 function StudioDetailView() {
   const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState5(false);
-  const [showRenameModal, setShowRenameModal] = useState5(false);
-  const [showProcessConfirm, setShowProcessConfirm] = useState5(false);
-  const [processProgress, setProcessProgress] = useState5(null);
-  const [alertMessage, setAlertMessage] = useState5(null);
-  const [showCopied, setShowCopied] = useState5(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState6(false);
+  const [showRenameModal, setShowRenameModal] = useState6(false);
+  const [showProcessConfirm, setShowProcessConfirm] = useState6(false);
+  const [showR2SetupModal, setShowR2SetupModal] = useState6(false);
+  const [processProgress, setProcessProgress] = useState6(null);
+  const [alertMessage, setAlertMessage] = useState6(null);
+  const [showCopied, setShowCopied] = useState6(false);
+  const [syncing, setSyncing] = useState6(false);
   if (!focusedItem) return null;
   const isImage = isImageFile(focusedItem.name);
   const isVideo = isVideoFile(focusedItem.name);
@@ -2997,8 +3439,41 @@ function StudioDetailView() {
       });
     }
   };
-  const handleSync = () => {
-    console.log("Sync to CDN:", focusedItem.path);
+  const handleSync = async () => {
+    const imageKey = "/" + focusedItem.path.replace(/^public\//, "");
+    setSyncing(true);
+    try {
+      const response = await fetch("/api/studio/sync", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageKeys: [imageKey] })
+      });
+      const data = await response.json();
+      if (response.ok) {
+        setAlertMessage({
+          title: "Sync Complete",
+          message: "Successfully synced to CDN."
+        });
+        triggerRefresh();
+      } else {
+        if (data.error?.includes("R2 not configured") || data.error?.includes("CLOUDFLARE_R2")) {
+          setShowR2SetupModal(true);
+        } else {
+          setAlertMessage({
+            title: "Sync Failed",
+            message: data.error || "Failed to sync to CDN."
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Sync error:", error);
+      setAlertMessage({
+        title: "Sync Failed",
+        message: "Failed to sync to CDN. Check console for details."
+      });
+    } finally {
+      setSyncing(false);
+    }
   };
   const handleProcessImage = async () => {
     setShowProcessConfirm(false);
@@ -3056,18 +3531,18 @@ function StudioDetailView() {
   };
   const renderMedia = () => {
     if (isImage) {
-      return /* @__PURE__ */ jsx6("img", { css: styles6.image, src: imageSrc, alt: focusedItem.name });
+      return /* @__PURE__ */ jsx7("img", { css: styles7.image, src: imageSrc, alt: focusedItem.name });
     }
     if (isVideo) {
-      return /* @__PURE__ */ jsx6("video", { css: styles6.video, src: imageSrc, controls: true });
+      return /* @__PURE__ */ jsx7("video", { css: styles7.video, src: imageSrc, controls: true });
     }
-    return /* @__PURE__ */ jsxs6("div", { css: styles6.filePlaceholder, children: [
-      /* @__PURE__ */ jsx6("svg", { css: styles6.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }),
-      /* @__PURE__ */ jsx6("p", { css: styles6.fileName, children: focusedItem.name })
+    return /* @__PURE__ */ jsxs7("div", { css: styles7.filePlaceholder, children: [
+      /* @__PURE__ */ jsx7("svg", { css: styles7.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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__ */ jsx7("p", { css: styles7.fileName, children: focusedItem.name })
     ] });
   };
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    showDeleteConfirm && /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    showDeleteConfirm && /* @__PURE__ */ jsx7(
       ConfirmModal,
       {
         title: "Delete File",
@@ -3078,7 +3553,7 @@ function StudioDetailView() {
         onCancel: () => setShowDeleteConfirm(false)
       }
     ),
-    alertMessage && /* @__PURE__ */ jsx6(
+    alertMessage && /* @__PURE__ */ jsx7(
       AlertModal,
       {
         title: alertMessage.title,
@@ -3086,7 +3561,14 @@ function StudioDetailView() {
         onClose: () => setAlertMessage(null)
       }
     ),
-    showRenameModal && /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
+      R2SetupModal,
+      {
+        isOpen: showR2SetupModal,
+        onClose: () => setShowR2SetupModal(false)
+      }
+    ),
+    showRenameModal && /* @__PURE__ */ jsx7(
       InputModal,
       {
         title: "Rename File",
@@ -3098,7 +3580,7 @@ function StudioDetailView() {
         onCancel: () => setShowRenameModal(false)
       }
     ),
-    showProcessConfirm && /* @__PURE__ */ jsx6(
+    showProcessConfirm && /* @__PURE__ */ jsx7(
       ConfirmModal,
       {
         title: "Process Image",
@@ -3108,7 +3590,7 @@ function StudioDetailView() {
         onCancel: () => setShowProcessConfirm(false)
       }
     ),
-    processProgress && /* @__PURE__ */ jsx6(
+    processProgress && /* @__PURE__ */ jsx7(
       ProgressModal,
       {
         title: "Processing Image",
@@ -3116,61 +3598,61 @@ function StudioDetailView() {
         onClose: () => setProcessProgress(null)
       }
     ),
-    /* @__PURE__ */ jsx6("div", { css: styles6.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs6("div", { css: styles6.container, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxs6("div", { css: styles6.main, children: [
-        /* @__PURE__ */ jsxs6("div", { css: styles6.headerButtons, children: [
-          /* @__PURE__ */ jsxs6("button", { css: styles6.copyBtn, onClick: handleCopyPath, title: "Copy file path", children: [
-            showCopied && /* @__PURE__ */ jsx6("span", { css: styles6.tooltip, children: "Copied!" }),
-            /* @__PURE__ */ jsx6("svg", { css: styles6.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsx7("div", { css: styles7.overlay, onClick: handleClose, children: /* @__PURE__ */ jsxs7("div", { css: styles7.container, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxs7("div", { css: styles7.main, children: [
+        /* @__PURE__ */ jsxs7("div", { css: styles7.headerButtons, children: [
+          /* @__PURE__ */ jsxs7("button", { css: styles7.copyBtn, onClick: handleCopyPath, title: "Copy file path", children: [
+            showCopied && /* @__PURE__ */ jsx7("span", { css: styles7.tooltip, children: "Copied!" }),
+            /* @__PURE__ */ jsx7("svg", { css: styles7.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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__ */ jsx6("button", { css: styles6.mainCloseBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx6("svg", { css: styles6.mainCloseIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+          /* @__PURE__ */ jsx7("button", { css: styles7.mainCloseBtn, onClick: handleClose, "aria-label": "Close", children: /* @__PURE__ */ jsx7("svg", { css: styles7.mainCloseIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
         ] }),
-        /* @__PURE__ */ jsx6("div", { css: styles6.mediaWrapper, children: renderMedia() })
+        /* @__PURE__ */ jsx7("div", { css: styles7.mediaWrapper, children: renderMedia() })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { css: styles6.sidebar, children: [
-        /* @__PURE__ */ jsx6("div", { css: styles6.sidebarHeader, children: /* @__PURE__ */ jsx6("h3", { css: styles6.sidebarTitle, children: "Details" }) }),
-        /* @__PURE__ */ jsxs6("div", { css: styles6.sidebarContent, children: [
-          /* @__PURE__ */ jsxs6("div", { css: styles6.info, children: [
-            /* @__PURE__ */ jsxs6("div", { css: styles6.infoRow, children: [
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoLabel, children: "Name" }),
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoValueWrap, children: focusedItem.name })
+      /* @__PURE__ */ jsxs7("div", { css: styles7.sidebar, children: [
+        /* @__PURE__ */ jsx7("div", { css: styles7.sidebarHeader, children: /* @__PURE__ */ jsx7("h3", { css: styles7.sidebarTitle, children: "Details" }) }),
+        /* @__PURE__ */ jsxs7("div", { css: styles7.sidebarContent, children: [
+          /* @__PURE__ */ jsxs7("div", { css: styles7.info, children: [
+            /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Name" }),
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoValueWrap, children: focusedItem.name })
             ] }),
-            /* @__PURE__ */ jsxs6("div", { css: styles6.infoRow, children: [
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoLabel, children: "Path" }),
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoValueWrap, children: focusedItem.path.replace(/^public\//, "") })
+            /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Path" }),
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoValueWrap, children: focusedItem.path.replace(/^public\//, "") })
             ] }),
-            focusedItem.size !== void 0 && /* @__PURE__ */ jsxs6("div", { css: styles6.infoRow, children: [
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoLabel, children: "Size" }),
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoValue, children: formatFileSize3(focusedItem.size) })
+            focusedItem.size !== void 0 && /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Size" }),
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoValue, children: formatFileSize3(focusedItem.size) })
             ] }),
-            focusedItem.dimensions && /* @__PURE__ */ jsxs6("div", { css: styles6.infoRow, children: [
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoLabel, children: "Dimensions" }),
-              /* @__PURE__ */ jsxs6("span", { css: styles6.infoValue, children: [
+            focusedItem.dimensions && /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "Dimensions" }),
+              /* @__PURE__ */ jsxs7("span", { css: styles7.infoValue, children: [
                 focusedItem.dimensions.width,
                 " \xD7 ",
                 focusedItem.dimensions.height
               ] })
             ] }),
-            /* @__PURE__ */ jsxs6("div", { css: styles6.infoRow, children: [
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoLabel, children: "CDN Status" }),
-              /* @__PURE__ */ jsx6("span", { css: styles6.infoValue, children: focusedItem.cdnSynced ? "Synced" : "Not synced" })
+            /* @__PURE__ */ jsxs7("div", { css: styles7.infoRow, children: [
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoLabel, children: "CDN Status" }),
+              /* @__PURE__ */ jsx7("span", { css: styles7.infoValue, children: focusedItem.cdnSynced ? "Synced" : "Not synced" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs6("div", { css: styles6.actions, children: [
-            /* @__PURE__ */ jsxs6("button", { css: styles6.actionBtn, onClick: () => setShowRenameModal(true), children: [
-              /* @__PURE__ */ jsx6("svg", { css: styles6.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsxs7("div", { css: styles7.actions, children: [
+            /* @__PURE__ */ jsxs7("button", { css: styles7.actionBtn, onClick: () => setShowRenameModal(true), children: [
+              /* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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__ */ jsxs6("button", { css: styles6.actionBtn, onClick: handleSync, children: [
-              /* @__PURE__ */ jsx6("svg", { css: styles6.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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" }) }),
-              "Sync to CDN"
+            /* @__PURE__ */ jsxs7("button", { css: styles7.actionBtn, onClick: handleSync, disabled: syncing, children: [
+              /* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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 ? "Syncing..." : "Sync to CDN"
             ] }),
-            /* @__PURE__ */ jsxs6("button", { css: styles6.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
-              /* @__PURE__ */ jsx6("svg", { css: styles6.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsxs7("button", { css: styles7.actionBtn, onClick: () => setShowProcessConfirm(true), children: [
+              /* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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__ */ jsxs6("button", { css: [styles6.actionBtn, styles6.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
-              /* @__PURE__ */ jsx6("svg", { css: styles6.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("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__ */ jsxs7("button", { css: [styles7.actionBtn, styles7.actionBtnDanger], onClick: () => setShowDeleteConfirm(true), children: [
+              /* @__PURE__ */ jsx7("svg", { css: styles7.actionIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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"
             ] })
           ] })
@@ -3186,12 +3668,12 @@ function formatFileSize3(bytes) {
 }
 
 // src/components/StudioSettings.tsx
-import { useState as useState6 } from "react";
-import { css as css7 } from "@emotion/react";
-import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { css as css8 } from "@emotion/react";
+import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var btnHeight2 = "36px";
-var styles7 = {
-  btn: css7`
+var styles8 = {
+  btn: css8`
     height: ${btnHeight2};
     padding: 0 12px;
     background: ${colors.surface};
@@ -3208,12 +3690,12 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  icon: css7`
+  icon: css8`
     width: 16px;
     height: 16px;
     color: ${colors.textSecondary};
   `,
-  overlay: css7`
+  overlay: css8`
     position: fixed;
     top: 0;
     right: 0;
@@ -3226,7 +3708,7 @@ var styles7 = {
     background-color: rgba(26, 31, 54, 0.4);
     backdrop-filter: blur(4px);
   `,
-  panel: css7`
+  panel: css8`
     ${baseReset}
     position: relative;
     background-color: ${colors.surface};
@@ -3236,20 +3718,20 @@ var styles7 = {
     max-width: 512px;
     padding: 24px;
   `,
-  header: css7`
+  header: css8`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
   `,
-  title: css7`
+  title: css8`
     font-size: ${fontSize.xl};
     font-weight: 600;
     color: ${colors.text};
     margin: 0;
     letter-spacing: -0.02em;
   `,
-  closeBtn: css7`
+  closeBtn: css8`
     padding: 6px;
     background: ${colors.surface};
     border: 1px solid ${colors.border};
@@ -3265,26 +3747,26 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  sections: css7`
+  sections: css8`
     display: flex;
     flex-direction: column;
     gap: 24px;
   `,
-  sectionTitle: css7`
+  sectionTitle: css8`
     font-size: ${fontSize.base};
     font-weight: 600;
     color: ${colors.text};
     margin: 0 0 12px 0;
   `,
-  description: css7`
+  description: css8`
     font-size: ${fontSize.sm};
     color: ${colors.textSecondary};
     margin: 0 0 12px 0;
   `,
-  codeWrapper: css7`
+  codeWrapper: css8`
     position: relative;
   `,
-  code: css7`
+  code: css8`
     background-color: ${colors.background};
     border-radius: 8px;
     padding: 12px;
@@ -3296,7 +3778,7 @@ var styles7 = {
     overflow-x: auto;
     white-space: nowrap;
   `,
-  copyBtn: css7`
+  copyBtn: css8`
     position: absolute;
     top: 8px;
     right: 8px;
@@ -3315,7 +3797,7 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  tooltip: css7`
+  tooltip: css8`
     position: absolute;
     bottom: 100%;
     left: 50%;
@@ -3340,19 +3822,19 @@ var styles7 = {
       border-top-color: #1a1f36;
     }
   `,
-  copyIcon: css7`
+  copyIcon: css8`
     width: 14px;
     height: 14px;
     color: ${colors.textSecondary};
   `,
-  codeLine: css7`
+  codeLine: css8`
     margin: 0 0 4px 0;
     
     &:last-child {
       margin: 0;
     }
   `,
-  input: css7`
+  input: css8`
     width: 100%;
     padding: 10px 14px;
     border: 1px solid ${colors.border};
@@ -3372,19 +3854,19 @@ var styles7 = {
       color: ${colors.textMuted};
     }
   `,
-  grid: css7`
+  grid: css8`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
   `,
-  label: css7`
+  label: css8`
     font-size: ${fontSize.xs};
     font-weight: 500;
     color: ${colors.textSecondary};
     display: block;
     margin-bottom: 6px;
   `,
-  footer: css7`
+  footer: css8`
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid ${colors.border};
@@ -3392,7 +3874,7 @@ var styles7 = {
     justify-content: flex-end;
     gap: 12px;
   `,
-  cancelBtn: css7`
+  cancelBtn: css8`
     padding: 10px 18px;
     font-size: ${fontSize.base};
     font-weight: 500;
@@ -3408,7 +3890,7 @@ var styles7 = {
       border-color: ${colors.borderHover};
     }
   `,
-  saveBtn: css7`
+  saveBtn: css8`
     padding: 10px 18px;
     font-size: ${fontSize.base};
     font-weight: 500;
@@ -3426,12 +3908,12 @@ var styles7 = {
   `
 };
 function StudioSettings() {
-  const [isOpen, setIsOpen] = useState6(false);
-  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-    /* @__PURE__ */ jsx7("button", { css: styles7.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs7(
+  const [isOpen, setIsOpen] = useState7(false);
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx8("button", { css: styles8.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs8(
       "svg",
       {
-        css: styles7.icon,
+        css: styles8.icon,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "none",
@@ -3440,12 +3922,12 @@ function StudioSettings() {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx7("circle", { cx: "12", cy: "12", r: "3" }),
-          /* @__PURE__ */ jsx7("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" })
+          /* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "3" }),
+          /* @__PURE__ */ jsx8("path", { d: "M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" })
         ]
       }
     ) }),
-    isOpen && /* @__PURE__ */ jsx7(SettingsPanel, { onClose: () => setIsOpen(false) })
+    isOpen && /* @__PURE__ */ jsx8(SettingsPanel, { onClose: () => setIsOpen(false) })
   ] });
 }
 var envTemplate = `CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789
@@ -3454,72 +3936,147 @@ CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here
 CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket
 CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`;
 function SettingsPanel({ onClose }) {
-  const [copied, setCopied] = useState6(false);
+  const [copied, setCopied] = useState7(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(envTemplate);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ jsx7("div", { css: styles7.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs7("div", { css: styles7.panel, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs7("div", { css: styles7.header, children: [
-      /* @__PURE__ */ jsx7("h2", { css: styles7.title, children: "Settings" }),
-      /* @__PURE__ */ jsx7("button", { css: styles7.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx7("svg", { css: styles7.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+  return /* @__PURE__ */ jsx8("div", { css: styles8.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs8("div", { css: styles8.panel, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
+      /* @__PURE__ */ jsx8("h2", { css: styles8.title, children: "Settings" }),
+      /* @__PURE__ */ jsx8("button", { css: styles8.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx8("svg", { css: styles8.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { css: styles7.sections, children: [
-      /* @__PURE__ */ jsxs7("section", { children: [
-        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Cloudflare R2" }),
-        /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Configure in .env.local file:" }),
-        /* @__PURE__ */ jsxs7("div", { css: styles7.codeWrapper, children: [
-          /* @__PURE__ */ jsxs7("button", { css: styles7.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
-            copied && /* @__PURE__ */ jsx7("span", { css: styles7.tooltip, children: "Copied!" }),
-            /* @__PURE__ */ jsx7("svg", { css: styles7.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7("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__ */ jsxs8("div", { css: styles8.sections, children: [
+      /* @__PURE__ */ jsxs8("section", { children: [
+        /* @__PURE__ */ jsx8("h3", { css: styles8.sectionTitle, children: "Cloudflare R2" }),
+        /* @__PURE__ */ jsx8("p", { css: styles8.description, children: "Configure in .env.local file:" }),
+        /* @__PURE__ */ jsxs8("div", { css: styles8.codeWrapper, children: [
+          /* @__PURE__ */ jsxs8("button", { css: styles8.copyBtn, onClick: handleCopy, title: "Copy to clipboard", children: [
+            copied && /* @__PURE__ */ jsx8("span", { css: styles8.tooltip, children: "Copied!" }),
+            /* @__PURE__ */ jsx8("svg", { css: styles8.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("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__ */ jsxs7("div", { css: styles7.code, children: [
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket" }),
-            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com" })
+          /* @__PURE__ */ jsxs8("div", { css: styles8.code, children: [
+            /* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789" }),
+            /* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here" }),
+            /* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here" }),
+            /* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket" }),
+            /* @__PURE__ */ jsx8("p", { css: styles8.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs7("section", { children: [
-        /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Thumbnail Sizes" }),
-        /* @__PURE__ */ jsxs7("div", { css: styles7.grid, children: [
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Small" }),
-            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 300 })
+      /* @__PURE__ */ jsxs8("section", { children: [
+        /* @__PURE__ */ jsx8("h3", { css: styles8.sectionTitle, children: "Thumbnail Sizes" }),
+        /* @__PURE__ */ jsxs8("div", { css: styles8.grid, children: [
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("label", { css: styles8.label, children: "Small" }),
+            /* @__PURE__ */ jsx8("input", { css: styles8.input, type: "number", defaultValue: 300 })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Medium" }),
-            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 700 })
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("label", { css: styles8.label, children: "Medium" }),
+            /* @__PURE__ */ jsx8("input", { css: styles8.input, type: "number", defaultValue: 700 })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { children: [
-            /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Large" }),
-            /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 1400 })
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx8("label", { css: styles8.label, children: "Large" }),
+            /* @__PURE__ */ jsx8("input", { css: styles8.input, type: "number", defaultValue: 1400 })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { css: styles7.footer, children: [
-      /* @__PURE__ */ jsx7("button", { css: styles7.cancelBtn, onClick: onClose, children: "Cancel" }),
-      /* @__PURE__ */ jsx7("button", { css: styles7.saveBtn, children: "Save Changes" })
+    /* @__PURE__ */ jsxs8("div", { css: styles8.footer, children: [
+      /* @__PURE__ */ jsx8("button", { css: styles8.cancelBtn, onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx8("button", { css: styles8.saveBtn, children: "Save Changes" })
     ] })
   ] }) });
 }
 
+// src/components/ErrorModal.tsx
+import { css as css9 } from "@emotion/react";
+import { jsx as jsx9, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+var styles9 = {
+  overlay: css9`
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+  `,
+  modal: css9`
+    background: ${colors.surface};
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  `,
+  header: css9`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  `,
+  icon: css9`
+    width: 24px;
+    height: 24px;
+    color: ${colors.danger};
+    flex-shrink: 0;
+  `,
+  title: css9`
+    font-size: ${fontSize.lg};
+    font-weight: 600;
+    color: ${colors.text};
+    margin: 0;
+  `,
+  message: css9`
+    font-size: ${fontSize.base};
+    color: ${colors.textSecondary};
+    margin: 0 0 20px 0;
+    line-height: 1.5;
+  `,
+  button: css9`
+    width: 100%;
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    border: none;
+    background: ${colors.primary};
+    color: white;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover {
+      background: ${colors.primaryHover};
+    }
+  `
+};
+function ErrorModal() {
+  const { error, clearError } = useStudio();
+  if (!error) return null;
+  return /* @__PURE__ */ jsx9("div", { css: styles9.overlay, onClick: clearError, children: /* @__PURE__ */ jsxs9("div", { css: styles9.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs9("div", { css: styles9.header, children: [
+      /* @__PURE__ */ jsx9("svg", { css: styles9.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("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__ */ jsx9("h3", { css: styles9.title, children: error.title })
+    ] }),
+    /* @__PURE__ */ jsx9("p", { css: styles9.message, children: error.message }),
+    /* @__PURE__ */ jsx9("button", { css: styles9.button, onClick: clearError, children: "OK" })
+  ] }) });
+}
+
 // src/components/StudioUI.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var btnHeight3 = "36px";
-var styles8 = {
-  container: css8`
+var styles10 = {
+  container: css10`
     ${baseReset}
     display: flex;
     flex-direction: column;
     height: 100%;
     background: ${colors.background};
   `,
-  header: css8`
+  header: css10`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -3528,7 +4085,7 @@ var styles8 = {
     border-bottom: 1px solid ${colors.border};
     position: relative;
   `,
-  title: css8`
+  title: css10`
     font-size: ${fontSize.lg};
     font-weight: 600;
     color: ${colors.text};
@@ -3536,14 +4093,14 @@ var styles8 = {
     letter-spacing: -0.02em;
     flex-shrink: 0;
   `,
-  headerLeft: css8`
+  headerLeft: css10`
     display: flex;
     align-items: center;
     gap: 12px;
     flex: 1;
     min-width: 0;
   `,
-  headerCenter: css8`
+  headerCenter: css10`
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -3551,7 +4108,7 @@ var styles8 = {
     align-items: center;
     max-width: 50%;
   `,
-  breadcrumbs: css8`
+  breadcrumbs: css10`
     display: flex;
     align-items: center;
     gap: 6px;
@@ -3559,11 +4116,11 @@ var styles8 = {
     color: ${colors.textSecondary};
     overflow: hidden;
   `,
-  breadcrumbSeparator: css8`
+  breadcrumbSeparator: css10`
     color: ${colors.border};
     flex-shrink: 0;
   `,
-  breadcrumbItem: css8`
+  breadcrumbItem: css10`
     color: ${colors.textSecondary};
     text-decoration: none;
     cursor: pointer;
@@ -3574,19 +4131,19 @@ var styles8 = {
       color: ${colors.primary};
     }
   `,
-  breadcrumbCurrent: css8`
+  breadcrumbCurrent: css10`
     color: ${colors.text};
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   `,
-  headerActions: css8`
+  headerActions: css10`
     display: flex;
     align-items: center;
     gap: 8px;
   `,
-  headerBtn: css8`
+  headerBtn: css10`
     height: ${btnHeight3};
     padding: 0 12px;
     background: ${colors.surface};
@@ -3603,23 +4160,23 @@ var styles8 = {
       border-color: ${colors.borderHover};
     }
   `,
-  headerIcon: css8`
+  headerIcon: css10`
     width: 16px;
     height: 16px;
     color: ${colors.textSecondary};
   `,
-  content: css8`
+  content: css10`
     flex: 1;
     display: flex;
     overflow: hidden;
   `,
-  fileBrowser: css8`
+  fileBrowser: css10`
     flex: 1;
     min-width: 0;
     overflow: auto;
     padding: 20px 24px;
   `,
-  dropOverlay: css8`
+  dropOverlay: css10`
     position: absolute;
     top: 0;
     left: 0;
@@ -3634,7 +4191,7 @@ var styles8 = {
     z-index: 50;
     pointer-events: none;
   `,
-  dropMessage: css8`
+  dropMessage: css10`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -3643,36 +4200,43 @@ var styles8 = {
     font-size: ${fontSize.lg};
     font-weight: 600;
   `,
-  dropIcon: css8`
+  dropIcon: css10`
     width: 48px;
     height: 48px;
   `
 };
 function StudioUI({ onClose, isVisible = true }) {
-  const [currentPath, setCurrentPathInternal] = useState7("public");
-  const [selectedItems, setSelectedItems] = useState7(/* @__PURE__ */ new Set());
-  const [lastSelectedPath, setLastSelectedPath] = useState7(null);
-  const [viewMode, setViewMode] = useState7("grid");
-  const [focusedItem, setFocusedItem] = useState7(null);
-  const [meta, setMeta] = useState7(null);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [refreshKey, setRefreshKey] = useState7(0);
-  const [searchQuery, setSearchQuery] = useState7("");
-  const [isDragging, setIsDragging] = useState7(false);
-  const triggerRefresh = useCallback2(() => {
+  const [currentPath, setCurrentPathInternal] = useState8("public");
+  const [selectedItems, setSelectedItems] = useState8(/* @__PURE__ */ new Set());
+  const [lastSelectedPath, setLastSelectedPath] = useState8(null);
+  const [viewMode, setViewMode] = useState8("grid");
+  const [focusedItem, setFocusedItem] = useState8(null);
+  const [meta, setMeta] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [refreshKey, setRefreshKey] = useState8(0);
+  const [searchQuery, setSearchQuery] = useState8("");
+  const [error, setError] = useState8(null);
+  const [isDragging, setIsDragging] = useState8(false);
+  const triggerRefresh = useCallback3(() => {
     setRefreshKey((k) => k + 1);
   }, []);
-  const handleDragOver = useCallback2((e) => {
+  const showError = useCallback3((title, message) => {
+    setError({ title, message });
+  }, []);
+  const clearError = useCallback3(() => {
+    setError(null);
+  }, []);
+  const handleDragOver = useCallback3((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(true);
   }, []);
-  const handleDragLeave = useCallback2((e) => {
+  const handleDragLeave = useCallback3((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = useCallback2(async (e) => {
+  const handleDrop = useCallback3(async (e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
@@ -3690,25 +4254,25 @@ function StudioUI({ onClose, isVisible = true }) {
           method: "POST",
           body: formData
         });
-      } catch (error) {
-        console.error("Upload error:", error);
+      } catch (error2) {
+        console.error("Upload error:", error2);
       }
     }
     triggerRefresh();
   }, [currentPath, triggerRefresh]);
-  const navigateUp = useCallback2(() => {
+  const navigateUp = useCallback3(() => {
     if (currentPath === "public") return;
     const parts = currentPath.split("/");
     parts.pop();
     setCurrentPathInternal(parts.join("/") || "public");
     setSelectedItems(/* @__PURE__ */ new Set());
   }, [currentPath]);
-  const setCurrentPath = useCallback2((path) => {
+  const setCurrentPath = useCallback3((path) => {
     setCurrentPathInternal(path);
     setSelectedItems(/* @__PURE__ */ new Set());
     setFocusedItem(null);
   }, []);
-  const toggleSelection = useCallback2((path) => {
+  const toggleSelection = useCallback3((path) => {
     setSelectedItems((prev) => {
       const next = new Set(prev);
       if (next.has(path)) {
@@ -3720,7 +4284,7 @@ function StudioUI({ onClose, isVisible = true }) {
     });
     setLastSelectedPath(path);
   }, []);
-  const selectRange = useCallback2((fromPath, toPath, allItems) => {
+  const selectRange = useCallback3((fromPath, toPath, allItems) => {
     const fromIndex = allItems.findIndex((item) => item.path === fromPath);
     const toIndex = allItems.findIndex((item) => item.path === toPath);
     if (fromIndex === -1 || toIndex === -1) return;
@@ -3735,13 +4299,13 @@ function StudioUI({ onClose, isVisible = true }) {
     });
     setLastSelectedPath(toPath);
   }, []);
-  const selectAll = useCallback2((items) => {
+  const selectAll = useCallback3((items) => {
     setSelectedItems(new Set(items.map((item) => item.path)));
   }, []);
-  const clearSelection = useCallback2(() => {
+  const clearSelection = useCallback3(() => {
     setSelectedItems(/* @__PURE__ */ new Set());
   }, []);
-  const handleKeyDown = useCallback2(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (e.key === "Escape") {
         const target = e.target;
@@ -3757,7 +4321,7 @@ function StudioUI({ onClose, isVisible = true }) {
     },
     [onClose, focusedItem]
   );
-  useEffect4(() => {
+  useEffect3(() => {
     if (isVisible) {
       document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
@@ -3793,43 +4357,47 @@ function StudioUI({ onClose, isVisible = true }) {
     refreshKey,
     triggerRefresh,
     searchQuery,
-    setSearchQuery
+    setSearchQuery,
+    error,
+    showError,
+    clearError
   };
-  return /* @__PURE__ */ jsx8(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, children: [
-    /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
-      /* @__PURE__ */ jsx8("div", { css: styles8.headerLeft, children: /* @__PURE__ */ jsx8("h1", { css: styles8.title, children: "Studio" }) }),
-      /* @__PURE__ */ jsx8("div", { css: styles8.headerCenter, children: /* @__PURE__ */ jsx8(Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
-      /* @__PURE__ */ jsxs8("div", { css: styles8.headerActions, children: [
-        /* @__PURE__ */ jsx8(StudioSettings, {}),
-        /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs10("div", { css: styles10.container, children: [
+    /* @__PURE__ */ jsxs10("div", { css: styles10.header, children: [
+      /* @__PURE__ */ jsx10("div", { css: styles10.headerLeft, children: /* @__PURE__ */ jsx10("h1", { css: styles10.title, children: "Studio" }) }),
+      /* @__PURE__ */ jsx10("div", { css: styles10.headerCenter, children: /* @__PURE__ */ jsx10(Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
+      /* @__PURE__ */ jsxs10("div", { css: styles10.headerActions, children: [
+        /* @__PURE__ */ jsx10(StudioSettings, {}),
+        /* @__PURE__ */ jsx10(
           "button",
           {
-            css: styles8.headerBtn,
+            css: styles10.headerBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
-            children: /* @__PURE__ */ jsx8(CloseIcon, {})
+            children: /* @__PURE__ */ jsx10(CloseIcon, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(StudioToolbar, {}),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx10(StudioToolbar, {}),
+    /* @__PURE__ */ jsxs10(
       "div",
       {
-        css: styles8.content,
+        css: styles10.content,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          isDragging && /* @__PURE__ */ jsx8("div", { css: styles8.dropOverlay, children: /* @__PURE__ */ jsxs8("div", { css: styles8.dropMessage, children: [
-            /* @__PURE__ */ jsx8("svg", { css: styles8.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("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__ */ jsx8("span", { children: "Drop files to upload" })
+          isDragging && /* @__PURE__ */ jsx10("div", { css: styles10.dropOverlay, children: /* @__PURE__ */ jsxs10("div", { css: styles10.dropMessage, children: [
+            /* @__PURE__ */ jsx10("svg", { css: styles10.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("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__ */ jsx10("span", { children: "Drop files to upload" })
           ] }) }),
-          /* @__PURE__ */ jsx8("div", { css: styles8.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx8(StudioFileGrid, {}) : /* @__PURE__ */ jsx8(StudioFileList, {}) })
+          /* @__PURE__ */ jsx10("div", { css: styles10.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx10(StudioFileGrid, {}) : /* @__PURE__ */ jsx10(StudioFileList, {}) })
         ]
       }
     ),
-    focusedItem && /* @__PURE__ */ jsx8(StudioDetailView, {})
+    focusedItem && /* @__PURE__ */ jsx10(StudioDetailView, {}),
+    /* @__PURE__ */ jsx10(ErrorModal, {})
   ] }) });
 }
 function Breadcrumbs({ currentPath, onNavigate }) {
@@ -3838,12 +4406,12 @@ function Breadcrumbs({ currentPath, onNavigate }) {
     name: part,
     path: parts.slice(0, index + 1).join("/")
   }));
-  return /* @__PURE__ */ jsx8("div", { css: styles8.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs8("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    index > 0 && /* @__PURE__ */ jsx8("span", { css: styles8.breadcrumbSeparator, children: "/" }),
-    index === breadcrumbs.length - 1 ? /* @__PURE__ */ jsx8("span", { css: styles8.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx10("div", { css: styles10.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs10("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    index > 0 && /* @__PURE__ */ jsx10("span", { css: styles10.breadcrumbSeparator, children: "/" }),
+    index === breadcrumbs.length - 1 ? /* @__PURE__ */ jsx10("span", { css: styles10.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ jsx10(
       "span",
       {
-        css: styles8.breadcrumbItem,
+        css: styles10.breadcrumbItem,
         onClick: () => onNavigate(crumb.path),
         children: crumb.name
       }
@@ -3851,10 +4419,10 @@ function Breadcrumbs({ currentPath, onNavigate }) {
   ] }, crumb.path)) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "svg",
     {
-      css: styles8.headerIcon,
+      css: styles10.headerIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -3863,8 +4431,8 @@ function CloseIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   );
@@ -3874,4 +4442,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-SS3YMS53.mjs.map
+//# sourceMappingURL=StudioUI-XV7HCEAF.mjs.map