@gallop.software/studio 0.1.7 → 0.1.9

package/dist/{StudioUI-2CBIV4Q5.mjs → StudioUI-RS5UCUIN.mjs}

@@ -1,8 +1,8 @@
 "use client";
 
 // src/components/StudioUI.tsx
-import { useEffect as useEffect3, useCallback as useCallback2, useState as useState5 } from "react";
-import { css as css7 } from "@emotion/react";
+import { useEffect as useEffect3, useCallback as useCallback2, useState as useState6 } from "react";
+import { css as css8 } from "@emotion/react";
 
 // src/components/StudioContext.tsx
 import { createContext, useContext } from "react";
@@ -49,10 +49,149 @@ function useStudio() {
 
 // src/components/StudioToolbar.tsx
 import { useCallback, useRef, useState } from "react";
-import { css } from "@emotion/react";
+import { css as css2 } from "@emotion/react";
+
+// src/components/StudioModal.tsx
+import { css, keyframes } from "@emotion/react";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+var fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var slideIn = keyframes`
+  from { 
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to { 
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
 var styles = {
-  toolbar: css`
+  overlay: css`
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    animation: ${fadeIn} 0.15s ease-out;
+  `,
+  modal: css`
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    max-width: 400px;
+    width: 90%;
+    animation: ${slideIn} 0.15s ease-out;
+  `,
+  header: css`
+    padding: 20px 24px 0;
+  `,
+  title: css`
+    font-size: 18px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  `,
+  body: css`
+    padding: 12px 24px 24px;
+  `,
+  message: css`
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+    line-height: 1.5;
+  `,
+  footer: css`
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 24px;
+    border-top: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+    border-radius: 0 0 12px 12px;
+  `,
+  btn: css`
+    padding: 8px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.15s;
+  `,
+  btnCancel: css`
+    background-color: white;
+    border: 1px solid #d1d5db;
+    color: #374151;
+    
+    &:hover {
+      background-color: #f9fafb;
+    }
+  `,
+  btnConfirm: css`
+    background-color: #9333ea;
+    border: 1px solid #9333ea;
+    color: white;
+    
+    &:hover {
+      background-color: #7c3aed;
+    }
+  `,
+  btnDanger: css`
+    background-color: #dc2626;
+    border: 1px solid #dc2626;
+    color: white;
+    
+    &:hover {
+      background-color: #b91c1c;
+    }
+  `
+};
+function ConfirmModal({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsx("div", { css: styles.overlay, onClick: onCancel, children: /* @__PURE__ */ jsxs("div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("div", { css: styles.header, children: /* @__PURE__ */ jsx("h3", { css: styles.title, children: title }) }),
+    /* @__PURE__ */ jsx("div", { css: styles.body, children: /* @__PURE__ */ jsx("p", { css: styles.message, children: message }) }),
+    /* @__PURE__ */ jsxs("div", { css: styles.footer, children: [
+      /* @__PURE__ */ jsx("button", { css: [styles.btn, styles.btnCancel], onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          css: [styles.btn, variant === "danger" ? styles.btnDanger : styles.btnConfirm],
+          onClick: onConfirm,
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+function AlertModal({
+  title,
+  message,
+  buttonLabel = "OK",
+  onClose
+}) {
+  return /* @__PURE__ */ jsx("div", { css: styles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { css: styles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx("div", { css: styles.header, children: /* @__PURE__ */ jsx("h3", { css: styles.title, children: title }) }),
+    /* @__PURE__ */ jsx("div", { css: styles.body, children: /* @__PURE__ */ jsx("p", { css: styles.message, children: message }) }),
+    /* @__PURE__ */ jsx("div", { css: styles.footer, children: /* @__PURE__ */ jsx("button", { css: [styles.btn, styles.btnConfirm], onClick: onClose, children: buttonLabel }) })
+  ] }) });
+}
+
+// src/components/StudioToolbar.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+var styles2 = {
+  toolbar: css2`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -60,17 +199,17 @@ var styles = {
     background-color: #f9fafb;
     border-bottom: 1px solid #e5e7eb;
   `,
-  left: css`
+  left: css2`
     display: flex;
     align-items: center;
     gap: 8px;
   `,
-  right: css`
+  right: css2`
     display: flex;
     align-items: center;
     gap: 16px;
   `,
-  btn: css`
+  btn: css2`
     display: flex;
     align-items: center;
     gap: 8px;
@@ -88,29 +227,29 @@ var styles = {
       opacity: 0.5;
     }
   `,
-  btnDefault: css`
+  btnDefault: css2`
     color: #374151;
     
     &:hover:not(:disabled) {
       background-color: white;
     }
   `,
-  btnDanger: css`
+  btnDanger: css2`
     color: #dc2626;
     
     &:hover:not(:disabled) {
       background-color: #fef2f2;
     }
   `,
-  icon: css`
+  icon: css2`
     width: 16px;
     height: 16px;
   `,
-  selectionCount: css`
+  selectionCount: css2`
     font-size: 14px;
     color: #4b5563;
   `,
-  clearBtn: css`
+  clearBtn: css2`
     margin-left: 8px;
     color: #9333ea;
     background: none;
@@ -122,7 +261,7 @@ var styles = {
       text-decoration: underline;
     }
   `,
-  viewToggle: css`
+  viewToggle: css2`
     display: flex;
     align-items: center;
     background-color: white;
@@ -130,7 +269,7 @@ var styles = {
     border-radius: 8px;
     overflow: hidden;
   `,
-  viewBtn: css`
+  viewBtn: css2`
     padding: 8px;
     background: none;
     border: none;
@@ -142,7 +281,7 @@ var styles = {
       background-color: #f9fafb;
     }
   `,
-  viewBtnActive: css`
+  viewBtnActive: css2`
     background-color: #f3e8ff;
     color: #7c3aed;
   `
@@ -151,6 +290,8 @@ function StudioToolbar() {
   const { selectedItems, viewMode, setViewMode, clearSelection, currentPath, triggerRefresh } = useStudio();
   const fileInputRef = useRef(null);
   const [uploading, setUploading] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [alertMessage, setAlertMessage] = useState(null);
   const handleUpload = useCallback(() => {
     fileInputRef.current?.click();
   }, []);
@@ -170,13 +311,19 @@ function StudioToolbar() {
         if (!response.ok) {
           const error = await response.json();
           console.error("Upload failed:", error);
-          alert(`Failed to upload ${file.name}: ${error.error || "Unknown error"}`);
+          setAlertMessage({
+            title: "Upload Failed",
+            message: `Failed to upload ${file.name}: ${error.error || "Unknown error"}`
+          });
         }
       }
       triggerRefresh();
     } catch (error) {
       console.error("Upload error:", error);
-      alert("Upload failed. Check console for details.");
+      setAlertMessage({
+        title: "Upload Failed",
+        message: "Upload failed. Check console for details."
+      });
     } finally {
       setUploading(false);
       if (fileInputRef.current) {
@@ -187,9 +334,12 @@ function StudioToolbar() {
   const handleReprocess = useCallback(() => {
     console.log("Reprocess clicked", selectedItems);
   }, [selectedItems]);
-  const handleDelete = useCallback(async () => {
+  const handleDeleteClick = useCallback(() => {
     if (selectedItems.size === 0) return;
-    if (!confirm(`Delete ${selectedItems.size} item(s)?`)) return;
+    setShowDeleteConfirm(true);
+  }, [selectedItems]);
+  const handleDeleteConfirm = useCallback(async () => {
+    setShowDeleteConfirm(false);
     try {
       const response = await fetch("/api/studio/delete", {
         method: "POST",
@@ -201,11 +351,17 @@ function StudioToolbar() {
         triggerRefresh();
       } else {
         const error = await response.json();
-        alert(`Delete failed: ${error.error || "Unknown error"}`);
+        setAlertMessage({
+          title: "Delete Failed",
+          message: error.error || "Unknown error"
+        });
       }
     } catch (error) {
       console.error("Delete error:", error);
-      alert("Delete failed. Check console for details.");
+      setAlertMessage({
+        title: "Delete Failed",
+        message: "Delete failed. Check console for details."
+      });
     }
   }, [selectedItems, clearSelection, triggerRefresh]);
   const handleSyncCdn = useCallback(() => {
@@ -215,83 +371,104 @@ function StudioToolbar() {
     console.log("Scan clicked");
   }, []);
   const hasSelection = selectedItems.size > 0;
-  return /* @__PURE__ */ jsxs("div", { css: styles.toolbar, children: [
-    /* @__PURE__ */ jsx(
-      "input",
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    showDeleteConfirm && /* @__PURE__ */ jsx2(
+      ConfirmModal,
       {
-        ref: fileInputRef,
-        type: "file",
-        multiple: true,
-        accept: "image/*",
-        onChange: handleFileChange,
-        style: { display: "none" }
+        title: "Delete Items",
+        message: `Are you sure you want to delete ${selectedItems.size} item(s)? This action cannot be undone.`,
+        confirmLabel: "Delete",
+        variant: "danger",
+        onConfirm: handleDeleteConfirm,
+        onCancel: () => setShowDeleteConfirm(false)
       }
     ),
-    /* @__PURE__ */ jsxs("div", { css: styles.left, children: [
-      /* @__PURE__ */ jsx(
-        ToolbarButton,
-        {
-          onClick: handleUpload,
-          icon: "upload",
-          label: uploading ? "Uploading..." : "Upload",
-          disabled: uploading
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ToolbarButton,
-        {
-          onClick: handleReprocess,
-          icon: "refresh",
-          label: "Reprocess",
-          disabled: !hasSelection
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ToolbarButton,
-        {
-          onClick: handleDelete,
-          icon: "trash",
-          label: "Delete",
-          disabled: !hasSelection,
-          variant: "danger"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ToolbarButton,
+    alertMessage && /* @__PURE__ */ jsx2(
+      AlertModal,
+      {
+        title: alertMessage.title,
+        message: alertMessage.message,
+        onClose: () => setAlertMessage(null)
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { css: styles2.toolbar, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
         {
-          onClick: handleSyncCdn,
-          icon: "cloud",
-          label: "Sync CDN",
-          disabled: !hasSelection
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: "image/*",
+          onChange: handleFileChange,
+          style: { display: "none" }
         }
       ),
-      /* @__PURE__ */ jsx(ToolbarButton, { onClick: handleScan, icon: "scan", label: "Scan" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { css: styles.right, children: [
-      hasSelection && /* @__PURE__ */ jsxs("span", { css: styles.selectionCount, children: [
-        selectedItems.size,
-        " selected",
-        /* @__PURE__ */ jsx("button", { css: styles.clearBtn, onClick: clearSelection, children: "Clear" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { css: styles.viewToggle, children: [
-        /* @__PURE__ */ jsx(
-          "button",
+      /* @__PURE__ */ jsxs2("div", { css: styles2.left, children: [
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
           {
-            css: [styles.viewBtn, viewMode === "grid" && styles.viewBtnActive],
-            onClick: () => setViewMode("grid"),
-            "aria-label": "Grid view",
-            children: /* @__PURE__ */ jsx(GridIcon, {})
+            onClick: handleUpload,
+            icon: "upload",
+            label: uploading ? "Uploading..." : "Upload",
+            disabled: uploading
           }
         ),
-        /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
           {
-            css: [styles.viewBtn, viewMode === "list" && styles.viewBtnActive],
-            onClick: () => setViewMode("list"),
-            "aria-label": "List view",
-            children: /* @__PURE__ */ jsx(ListIcon, {})
+            onClick: handleReprocess,
+            icon: "refresh",
+            label: "Reprocess",
+            disabled: !hasSelection
           }
-        )
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
+          {
+            onClick: handleDeleteClick,
+            icon: "trash",
+            label: "Delete",
+            disabled: !hasSelection,
+            variant: "danger"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
+          {
+            onClick: handleSyncCdn,
+            icon: "cloud",
+            label: "Sync CDN",
+            disabled: !hasSelection
+          }
+        ),
+        /* @__PURE__ */ jsx2(ToolbarButton, { onClick: handleScan, icon: "scan", label: "Scan" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { css: styles2.right, children: [
+        hasSelection && /* @__PURE__ */ jsxs2("span", { css: styles2.selectionCount, children: [
+          selectedItems.size,
+          " selected",
+          /* @__PURE__ */ jsx2("button", { css: styles2.clearBtn, onClick: clearSelection, children: "Clear" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { css: styles2.viewToggle, children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              css: [styles2.viewBtn, viewMode === "grid" && styles2.viewBtnActive],
+              onClick: () => setViewMode("grid"),
+              "aria-label": "Grid view",
+              children: /* @__PURE__ */ jsx2(GridIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              css: [styles2.viewBtn, viewMode === "list" && styles2.viewBtnActive],
+              onClick: () => setViewMode("list"),
+              "aria-label": "List view",
+              children: /* @__PURE__ */ jsx2(ListIcon, {})
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -303,14 +480,14 @@ function ToolbarButton({
   disabled,
   variant = "default"
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "button",
     {
-      css: [styles.btn, variant === "danger" ? styles.btnDanger : styles.btnDefault],
+      css: [styles2.btn, variant === "danger" ? styles2.btnDanger : styles2.btnDefault],
       onClick,
       disabled,
       children: [
-        /* @__PURE__ */ jsx(IconComponent, { icon }),
+        /* @__PURE__ */ jsx2(IconComponent, { icon }),
         label
       ]
     }
@@ -319,31 +496,31 @@ function ToolbarButton({
 function IconComponent({ icon }) {
   switch (icon) {
     case "upload":
-      return /* @__PURE__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("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__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("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" }) });
     case "refresh":
-      return /* @__PURE__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("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__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("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" }) });
     case "trash":
-      return /* @__PURE__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("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__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("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" }) });
     case "cloud":
-      return /* @__PURE__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("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__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("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" }) });
     case "scan":
-      return /* @__PURE__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
+      return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
     default:
       return null;
   }
 }
 function GridIcon() {
-  return /* @__PURE__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("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__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("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__ */ jsx("svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
+  return /* @__PURE__ */ jsx2("svg", { css: styles2.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
 }
 
 // src/components/StudioBreadcrumb.tsx
-import { css as css2 } from "@emotion/react";
-import { jsx as jsx2, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
-var styles2 = {
-  container: css2`
+import { css as css3 } from "@emotion/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var styles3 = {
+  container: css3`
     display: flex;
     align-items: center;
     gap: 8px;
@@ -351,7 +528,7 @@ var styles2 = {
     background-color: white;
     border-bottom: 1px solid #f3f4f6;
   `,
-  backBtn: css2`
+  backBtn: css3`
     padding: 4px;
     background: none;
     border: none;
@@ -363,26 +540,26 @@ var styles2 = {
       background-color: #f3f4f6;
     }
   `,
-  backIcon: css2`
+  backIcon: css3`
     width: 16px;
     height: 16px;
     color: #6b7280;
   `,
-  nav: css2`
+  nav: css3`
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 14px;
   `,
-  item: css2`
+  item: css3`
     display: flex;
     align-items: center;
     gap: 4px;
   `,
-  separator: css2`
+  separator: css3`
     color: #d1d5db;
   `,
-  btn: css2`
+  btn: css3`
     padding: 2px 4px;
     background: none;
     border: none;
@@ -394,11 +571,11 @@ var styles2 = {
       background-color: #f3f4f6;
     }
   `,
-  btnActive: css2`
+  btnActive: css3`
     color: #111827;
     font-weight: 500;
   `,
-  btnInactive: css2`
+  btnInactive: css3`
     color: #6b7280;
     
     &:hover {
@@ -413,14 +590,14 @@ function StudioBreadcrumb() {
     const newPath = parts.slice(0, index + 1).join("/");
     setCurrentPath(newPath);
   };
-  return /* @__PURE__ */ jsxs2("div", { css: styles2.container, children: [
-    currentPath !== "public" && /* @__PURE__ */ jsx2("button", { css: styles2.backBtn, onClick: navigateUp, "aria-label": "Go back", children: /* @__PURE__ */ jsx2("svg", { css: styles2.backIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
-    /* @__PURE__ */ jsx2("nav", { css: styles2.nav, children: parts.map((part, index) => /* @__PURE__ */ jsxs2("span", { css: styles2.item, children: [
-      index > 0 && /* @__PURE__ */ jsx2("span", { css: styles2.separator, children: "/" }),
-      /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { css: styles3.container, children: [
+    currentPath !== "public" && /* @__PURE__ */ jsx3("button", { css: styles3.backBtn, onClick: navigateUp, "aria-label": "Go back", children: /* @__PURE__ */ jsx3("svg", { css: styles3.backIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+    /* @__PURE__ */ jsx3("nav", { css: styles3.nav, children: parts.map((part, index) => /* @__PURE__ */ jsxs3("span", { css: styles3.item, children: [
+      index > 0 && /* @__PURE__ */ jsx3("span", { css: styles3.separator, children: "/" }),
+      /* @__PURE__ */ jsx3(
         "button",
         {
-          css: [styles2.btn, index === parts.length - 1 ? styles2.btnActive : styles2.btnInactive],
+          css: [styles3.btn, index === parts.length - 1 ? styles3.btnActive : styles3.btnInactive],
           onClick: () => handleClick(index),
           children: part
         }
@@ -431,19 +608,19 @@ function StudioBreadcrumb() {
 
 // src/components/StudioFileGrid.tsx
 import { useEffect, useState as useState2 } from "react";
-import { css as css3, keyframes } from "@emotion/react";
-import { jsx as jsx3, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
-var spin = keyframes`
+import { css as css4, keyframes as keyframes2 } from "@emotion/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+var spin = keyframes2`
   to { transform: rotate(360deg); }
 `;
-var styles3 = {
-  loading: css3`
+var styles4 = {
+  loading: css4`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 256px;
   `,
-  spinner: css3`
+  spinner: css4`
     width: 32px;
     height: 32px;
     border-radius: 50%;
@@ -451,7 +628,7 @@ var styles3 = {
     border-bottom-color: #9333ea;
     animation: ${spin} 1s linear infinite;
   `,
-  empty: css3`
+  empty: css4`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -459,16 +636,16 @@ var styles3 = {
     height: 256px;
     color: #6b7280;
   `,
-  emptyIcon: css3`
+  emptyIcon: css4`
     width: 48px;
     height: 48px;
     margin-bottom: 16px;
   `,
-  emptyText: css3`
+  emptyText: css4`
     font-size: 14px;
     margin: 0;
   `,
-  grid: css3`
+  grid: css4`
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
@@ -478,7 +655,7 @@ var styles3 = {
     @media (min-width: 1024px) { grid-template-columns: repeat(5, 1fr); }
     @media (min-width: 1280px) { grid-template-columns: repeat(6, 1fr); }
   `,
-  item: css3`
+  item: css4`
     position: relative;
     border-radius: 8px;
     border: 2px solid transparent;
@@ -491,11 +668,15 @@ var styles3 = {
       border-color: #e5e7eb;
     }
   `,
-  itemSelected: css3`
+  itemSelected: css4`
     border-color: #a855f7;
     background-color: #faf5ff;
+    
+    &:hover {
+      border-color: #a855f7;
+    }
   `,
-  checkbox: css3`
+  checkbox: css4`
     position: absolute;
     top: 8px;
     left: 8px;
@@ -504,7 +685,7 @@ var styles3 = {
     height: 16px;
     accent-color: #9333ea;
   `,
-  cdnBadge: css3`
+  cdnBadge: css4`
     position: absolute;
     top: 8px;
     right: 8px;
@@ -515,30 +696,30 @@ var styles3 = {
     padding: 2px 6px;
     border-radius: 9999px;
   `,
-  content: css3`
+  content: css4`
     aspect-ratio: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
   `,
-  folderIcon: css3`
+  folderIcon: css4`
     width: 64px;
     height: 64px;
     color: #facc15;
   `,
-  image: css3`
+  image: css4`
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     border-radius: 4px;
   `,
-  label: css3`
+  label: css4`
     padding: 6px 8px;
     background-color: white;
     border-top: 1px solid #e5e7eb;
   `,
-  name: css3`
+  name: css4`
     font-size: 12px;
     color: #374151;
     white-space: nowrap;
@@ -546,19 +727,19 @@ var styles3 = {
     text-overflow: ellipsis;
     margin: 0;
   `,
-  size: css3`
+  size: css4`
     font-size: 12px;
     color: #9ca3af;
     margin: 0;
   `,
-  selectAllRow: css3`
+  selectAllRow: css4`
     display: flex;
     align-items: center;
     margin-bottom: 12px;
     padding-bottom: 12px;
     border-bottom: 1px solid #e5e7eb;
   `,
-  selectAllLabel: css3`
+  selectAllLabel: css4`
     display: flex;
     align-items: center;
     gap: 8px;
@@ -570,7 +751,7 @@ var styles3 = {
       color: #374151;
     }
   `,
-  selectAllCheckbox: css3`
+  selectAllCheckbox: css4`
     width: 16px;
     height: 16px;
     accent-color: #9333ea;
@@ -597,13 +778,13 @@ function StudioFileGrid() {
     loadItems();
   }, [currentPath, refreshKey]);
   if (loading) {
-    return /* @__PURE__ */ jsx3("div", { css: styles3.loading, children: /* @__PURE__ */ jsx3("div", { css: styles3.spinner }) });
+    return /* @__PURE__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
   }
   if (items.length === 0) {
-    return /* @__PURE__ */ jsxs3("div", { css: styles3.empty, children: [
-      /* @__PURE__ */ jsx3("svg", { css: styles3.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
-      /* @__PURE__ */ jsx3("p", { css: styles3.emptyText, children: "No files in this folder" }),
-      /* @__PURE__ */ jsx3("p", { css: styles3.emptyText, children: "Upload images to get started" })
+    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" })
     ] });
   }
   const sortedItems = [...items].sort((a, b) => {
@@ -632,13 +813,13 @@ function StudioFileGrid() {
       toggleSelection(item.path);
     }
   };
-  return /* @__PURE__ */ jsxs3("div", { children: [
-    files.length > 0 && /* @__PURE__ */ jsx3("div", { css: styles3.selectAllRow, children: /* @__PURE__ */ jsxs3("label", { css: styles3.selectAllLabel, children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    files.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
+      /* @__PURE__ */ jsx4(
         "input",
         {
           type: "checkbox",
-          css: styles3.selectAllCheckbox,
+          css: styles4.selectAllCheckbox,
           checked: allFilesSelected,
           ref: (el) => {
             if (el) el.indeterminate = someFilesSelected && !allFilesSelected;
@@ -650,7 +831,7 @@ function StudioFileGrid() {
       files.length,
       ")"
     ] }) }),
-    /* @__PURE__ */ jsx3("div", { css: styles3.grid, children: sortedItems.map((item) => /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("div", { css: styles4.grid, children: sortedItems.map((item) => /* @__PURE__ */ jsx4(
       GridItem,
       {
         item,
@@ -663,31 +844,31 @@ function StudioFileGrid() {
 }
 function GridItem({ item, isSelected, onClick }) {
   const isFolder = item.type === "folder";
-  return /* @__PURE__ */ jsxs3("div", { css: [styles3.item, isSelected && styles3.itemSelected], onClick, children: [
-    !isFolder && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { css: [styles4.item, isSelected && styles4.itemSelected], onClick, children: [
+    !isFolder && /* @__PURE__ */ jsx4(
       "input",
       {
         type: "checkbox",
-        css: styles3.checkbox,
+        css: styles4.checkbox,
         checked: isSelected,
         onChange: () => {
         },
         onClick: (e) => e.stopPropagation()
       }
     ),
-    item.cdnSynced && /* @__PURE__ */ jsx3("span", { css: styles3.cdnBadge, children: "CDN" }),
-    /* @__PURE__ */ jsx3("div", { css: styles3.content, children: isFolder ? /* @__PURE__ */ jsx3("svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : /* @__PURE__ */ jsx3(
+    item.cdnSynced && /* @__PURE__ */ jsx4("span", { css: styles4.cdnBadge, children: "CDN" }),
+    /* @__PURE__ */ jsx4("div", { css: styles4.content, children: isFolder ? /* @__PURE__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : /* @__PURE__ */ jsx4(
       "img",
       {
-        css: styles3.image,
+        css: styles4.image,
         src: item.path.replace("public", ""),
         alt: item.name,
         loading: "lazy"
       }
     ) }),
-    /* @__PURE__ */ jsxs3("div", { css: styles3.label, children: [
-      /* @__PURE__ */ jsx3("p", { css: styles3.name, title: item.name, children: item.name }),
-      item.size && /* @__PURE__ */ jsx3("p", { css: styles3.size, children: formatFileSize(item.size) })
+    /* @__PURE__ */ jsxs4("div", { css: styles4.label, children: [
+      /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: item.name }),
+      item.size && /* @__PURE__ */ jsx4("p", { css: styles4.size, children: formatFileSize(item.size) })
     ] })
   ] });
 }
@@ -699,19 +880,19 @@ function formatFileSize(bytes) {
 
 // src/components/StudioFileList.tsx
 import { useEffect as useEffect2, useState as useState3 } from "react";
-import { css as css4, keyframes as keyframes2 } from "@emotion/react";
-import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var spin2 = keyframes2`
+import { css as css5, keyframes as keyframes3 } from "@emotion/react";
+import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
+var spin2 = keyframes3`
   to { transform: rotate(360deg); }
 `;
-var styles4 = {
-  loading: css4`
+var styles5 = {
+  loading: css5`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 256px;
   `,
-  spinner: css4`
+  spinner: css5`
     width: 32px;
     height: 32px;
     border-radius: 50%;
@@ -719,7 +900,7 @@ var styles4 = {
     border-bottom-color: #9333ea;
     animation: ${spin2} 1s linear infinite;
   `,
-  empty: css4`
+  empty: css5`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -727,11 +908,11 @@ var styles4 = {
     height: 256px;
     color: #6b7280;
   `,
-  table: css4`
+  table: css5`
     width: 100%;
     border-collapse: collapse;
   `,
-  th: css4`
+  th: css5`
     text-align: left;
     font-size: 12px;
     color: #6b7280;
@@ -740,22 +921,22 @@ var styles4 = {
     padding-bottom: 8px;
     font-weight: normal;
   `,
-  thCheckbox: css4`
+  thCheckbox: css5`
     width: 32px;
   `,
-  thSize: css4`
+  thSize: css5`
     width: 96px;
   `,
-  thDimensions: css4`
+  thDimensions: css5`
     width: 128px;
   `,
-  thCdn: css4`
+  thCdn: css5`
     width: 96px;
   `,
-  tbody: css4`
+  tbody: css5`
     border-top: 1px solid #f3f4f6;
   `,
-  row: css4`
+  row: css5`
     cursor: pointer;
     transition: background-color 0.15s;
     
@@ -763,53 +944,57 @@ var styles4 = {
       background-color: #f9fafb;
     }
   `,
-  rowSelected: css4`
+  rowSelected: css5`
     background-color: #faf5ff;
+    
+    &:hover {
+      background-color: #faf5ff;
+    }
   `,
-  td: css4`
+  td: css5`
     padding: 8px 0;
     border-bottom: 1px solid #f3f4f6;
   `,
-  checkbox: css4`
+  checkbox: css5`
     width: 16px;
     height: 16px;
     accent-color: #9333ea;
   `,
-  nameCell: css4`
+  nameCell: css5`
     display: flex;
     align-items: center;
     gap: 8px;
   `,
-  folderIcon: css4`
+  folderIcon: css5`
     width: 20px;
     height: 20px;
     color: #facc15;
   `,
-  fileIcon: css4`
+  fileIcon: css5`
     width: 20px;
     height: 20px;
     color: #9ca3af;
   `,
-  name: css4`
+  name: css5`
     font-size: 14px;
     color: #111827;
   `,
-  meta: css4`
+  meta: css5`
     font-size: 14px;
     color: #6b7280;
   `,
-  cdnBadge: css4`
+  cdnBadge: css5`
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-size: 12px;
     color: #15803d;
   `,
-  cdnIcon: css4`
+  cdnIcon: css5`
     width: 12px;
     height: 12px;
   `,
-  cdnEmpty: css4`
+  cdnEmpty: css5`
     font-size: 12px;
     color: #9ca3af;
   `
@@ -835,10 +1020,10 @@ function StudioFileList() {
     loadItems();
   }, [currentPath, refreshKey]);
   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 }) });
   }
   if (items.length === 0) {
-    return /* @__PURE__ */ jsx4("div", { css: styles4.empty, children: /* @__PURE__ */ jsx4("p", { children: "No files in this folder" }) });
+    return /* @__PURE__ */ jsx5("div", { css: styles5.empty, children: /* @__PURE__ */ jsx5("p", { children: "No files in this folder" }) });
   }
   const sortedItems = [...items].sort((a, b) => {
     if (a.type === "folder" && b.type !== "folder") return -1;
@@ -866,13 +1051,13 @@ function StudioFileList() {
       toggleSelection(item.path);
     }
   };
-  return /* @__PURE__ */ jsxs4("table", { css: styles4.table, children: [
-    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
-      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thCheckbox], children: files.length > 0 && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: files.length > 0 && /* @__PURE__ */ jsx5(
         "input",
         {
           type: "checkbox",
-          css: styles4.checkbox,
+          css: styles5.checkbox,
           checked: allFilesSelected,
           ref: (el) => {
             if (el) el.indeterminate = someFilesSelected && !allFilesSelected;
@@ -880,12 +1065,12 @@ function StudioFileList() {
           onChange: handleSelectAll
         }
       ) }),
-      /* @__PURE__ */ jsx4("th", { css: styles4.th, children: "Name" }),
-      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thSize], children: "Size" }),
-      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thDimensions], children: "Dimensions" }),
-      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thCdn], children: "CDN" })
+      /* @__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__ */ jsx4("tbody", { css: styles4.tbody, children: sortedItems.map((item) => /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5("tbody", { css: styles5.tbody, children: sortedItems.map((item) => /* @__PURE__ */ jsx5(
       ListRow,
       {
         item,
@@ -898,28 +1083,28 @@ function StudioFileList() {
 }
 function ListRow({ item, isSelected, onClick }) {
   const isFolder = item.type === "folder";
-  return /* @__PURE__ */ jsxs4("tr", { css: [styles4.row, isSelected && styles4.rowSelected], onClick, children: [
-    /* @__PURE__ */ jsx4("td", { css: styles4.td, children: !isFolder && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("tr", { css: [styles5.row, isSelected && styles5.rowSelected], onClick, children: [
+    /* @__PURE__ */ jsx5("td", { css: styles5.td, children: !isFolder && /* @__PURE__ */ jsx5(
       "input",
       {
         type: "checkbox",
-        css: styles4.checkbox,
+        css: styles5.checkbox,
         checked: isSelected,
         onChange: () => {
         },
         onClick: (e) => e.stopPropagation()
       }
     ) }),
-    /* @__PURE__ */ jsx4("td", { css: styles4.td, children: /* @__PURE__ */ jsxs4("div", { css: styles4.nameCell, children: [
-      isFolder ? /* @__PURE__ */ jsx4("svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : /* @__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: "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.name, children: item.name })
+    /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
+      isFolder ? /* @__PURE__ */ jsx5("svg", { css: styles5.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : /* @__PURE__ */ jsx5("svg", { css: styles5.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+      /* @__PURE__ */ jsx5("span", { css: styles5.name, children: item.name })
     ] }) }),
-    /* @__PURE__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: item.size ? formatFileSize2(item.size) : "--" }),
-    /* @__PURE__ */ jsx4("td", { css: [styles4.td, styles4.meta], children: item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
-    /* @__PURE__ */ jsx4("td", { css: styles4.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs4("span", { css: styles4.cdnBadge, children: [
-      /* @__PURE__ */ jsx4("svg", { css: styles4.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx4("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__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: item.size ? formatFileSize2(item.size) : "--" }),
+    /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
+    /* @__PURE__ */ jsx5("td", { css: styles5.td, children: item.cdnSynced ? /* @__PURE__ */ jsxs5("span", { css: styles5.cdnBadge, children: [
+      /* @__PURE__ */ jsx5("svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
       "Synced"
-    ] }) : /* @__PURE__ */ jsx4("span", { css: styles4.cdnEmpty, children: "--" }) })
+    ] }) : /* @__PURE__ */ jsx5("span", { css: styles5.cdnEmpty, children: "--" }) })
   ] });
 }
 function formatFileSize2(bytes) {
@@ -929,78 +1114,79 @@ function formatFileSize2(bytes) {
 }
 
 // src/components/StudioPreview.tsx
-import { css as css5 } from "@emotion/react";
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
-var styles5 = {
-  panel: css5`
+import { useState as useState4 } from "react";
+import { css as css6 } from "@emotion/react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var styles6 = {
+  panel: css6`
     width: 320px;
     border-left: 1px solid #e5e7eb;
     background-color: #f9fafb;
     padding: 16px;
     overflow: auto;
   `,
-  title: css5`
+  title: css6`
     font-size: 14px;
     font-weight: 500;
     color: #111827;
     margin: 0 0 16px 0;
   `,
-  imageContainer: css5`
+  imageContainer: css6`
     background-color: white;
     border-radius: 8px;
     border: 1px solid #e5e7eb;
     padding: 8px;
     margin-bottom: 16px;
   `,
-  image: css5`
+  image: css6`
     width: 100%;
     height: auto;
     border-radius: 4px;
   `,
-  info: css5`
+  info: css6`
     display: flex;
     flex-direction: column;
     gap: 12px;
   `,
-  row: css5`
+  row: css6`
     display: flex;
     justify-content: space-between;
     font-size: 12px;
   `,
-  label: css5`
+  label: css6`
     color: #6b7280;
   `,
-  value: css5`
+  value: css6`
     color: #111827;
   `,
-  valueTruncate: css5`
+  valueTruncate: css6`
     max-width: 128px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   `,
-  section: css5`
+  section: css6`
     padding-top: 8px;
     border-top: 1px solid #e5e7eb;
   `,
-  sectionTitle: css5`
+  sectionTitle: css6`
     font-size: 12px;
     font-weight: 500;
     color: #6b7280;
     margin: 0 0 8px 0;
   `,
-  cdnStatus: css5`
+  cdnStatus: css6`
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: #16a34a;
   `,
-  cdnIcon: css5`
+  cdnIcon: css6`
     width: 16px;
     height: 16px;
   `,
-  copyBtn: css5`
+  copyBtn: css6`
     margin-top: 8px;
     font-size: 12px;
     color: #9333ea;
@@ -1013,23 +1199,23 @@ var styles5 = {
       text-decoration: underline;
     }
   `,
-  colorSwatch: css5`
+  colorSwatch: css6`
     margin-top: 8px;
     height: 32px;
     border-radius: 4px;
   `,
-  emptyState: css5`
+  emptyState: css6`
     display: flex;
     align-items: center;
     justify-content: center;
     height: 200px;
   `,
-  emptyText: css5`
+  emptyText: css6`
     font-size: 14px;
     color: #9ca3af;
     margin: 0;
   `,
-  actions: css5`
+  actions: css6`
     margin-top: 16px;
     padding-top: 16px;
     border-top: 1px solid #e5e7eb;
@@ -1037,7 +1223,7 @@ var styles5 = {
     flex-direction: column;
     gap: 8px;
   `,
-  actionBtn: css5`
+  actionBtn: css6`
     width: 100%;
     padding: 8px 12px;
     font-size: 14px;
@@ -1052,7 +1238,7 @@ var styles5 = {
       background-color: #f9fafb;
     }
   `,
-  actionBtnDanger: css5`
+  actionBtnDanger: css6`
     color: #dc2626;
     
     &:hover {
@@ -1062,9 +1248,14 @@ var styles5 = {
 };
 function StudioPreview() {
   const { selectedItems, meta, triggerRefresh, clearSelection } = useStudio();
-  const handleDelete = async () => {
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState4(false);
+  const [alertMessage, setAlertMessage] = useState4(null);
+  const handleDeleteClick = () => {
     if (selectedItems.size === 0) return;
-    if (!confirm(`Delete ${selectedItems.size} item(s)?`)) return;
+    setShowDeleteConfirm(true);
+  };
+  const handleDeleteConfirm = async () => {
+    setShowDeleteConfirm(false);
     try {
       const response = await fetch("/api/studio/delete", {
         method: "POST",
@@ -1076,106 +1267,142 @@ function StudioPreview() {
         triggerRefresh();
       } else {
         const error = await response.json();
-        alert(`Delete failed: ${error.error || "Unknown error"}`);
+        setAlertMessage({
+          title: "Delete Failed",
+          message: error.error || "Unknown error"
+        });
       }
     } catch (error) {
       console.error("Delete error:", error);
-      alert("Delete failed. Check console for details.");
+      setAlertMessage({
+        title: "Delete Failed",
+        message: "Delete failed. Check console for details."
+      });
     }
   };
+  const modals = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    showDeleteConfirm && /* @__PURE__ */ jsx6(
+      ConfirmModal,
+      {
+        title: "Delete Items",
+        message: `Are you sure you want to delete ${selectedItems.size} item(s)? This action cannot be undone.`,
+        confirmLabel: "Delete",
+        variant: "danger",
+        onConfirm: handleDeleteConfirm,
+        onCancel: () => setShowDeleteConfirm(false)
+      }
+    ),
+    alertMessage && /* @__PURE__ */ jsx6(
+      AlertModal,
+      {
+        title: alertMessage.title,
+        message: alertMessage.message,
+        onClose: () => setAlertMessage(null)
+      }
+    )
+  ] });
   if (selectedItems.size === 0) {
-    return /* @__PURE__ */ jsxs5("div", { css: styles5.panel, children: [
-      /* @__PURE__ */ jsx5("h3", { css: styles5.title, children: "Preview" }),
-      /* @__PURE__ */ jsx5("div", { css: styles5.emptyState, children: /* @__PURE__ */ jsx5("p", { css: styles5.emptyText, children: "Select an image to preview" }) })
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      modals,
+      /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
+        /* @__PURE__ */ jsx6("h3", { css: styles6.title, children: "Preview" }),
+        /* @__PURE__ */ jsx6("div", { css: styles6.emptyState, children: /* @__PURE__ */ jsx6("p", { css: styles6.emptyText, children: "Select an image to preview" }) })
+      ] })
     ] });
   }
   if (selectedItems.size > 1) {
-    return /* @__PURE__ */ jsxs5("div", { css: styles5.panel, children: [
-      /* @__PURE__ */ jsxs5("h3", { css: styles5.title, children: [
-        selectedItems.size,
-        " items selected"
-      ] }),
-      /* @__PURE__ */ jsx5("div", { css: styles5.actions, children: /* @__PURE__ */ jsxs5("button", { css: [styles5.actionBtn, styles5.actionBtnDanger], onClick: handleDelete, children: [
-        "Delete ",
-        selectedItems.size,
-        " items"
-      ] }) })
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      modals,
+      /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
+        /* @__PURE__ */ jsxs6("h3", { css: styles6.title, children: [
+          selectedItems.size,
+          " items selected"
+        ] }),
+        /* @__PURE__ */ jsx6("div", { css: styles6.actions, children: /* @__PURE__ */ jsxs6("button", { css: [styles6.actionBtn, styles6.actionBtnDanger], onClick: handleDeleteClick, children: [
+          "Delete ",
+          selectedItems.size,
+          " items"
+        ] }) })
+      ] })
     ] });
   }
   const selectedPath = Array.from(selectedItems)[0];
   const imageKey = selectedPath.replace(/^public\/images\//, "").replace(/^public\/originals\//, "");
   const imageData = meta?.images?.[imageKey];
-  return /* @__PURE__ */ jsxs5("div", { css: styles5.panel, children: [
-    /* @__PURE__ */ jsx5("h3", { css: styles5.title, children: "Preview" }),
-    /* @__PURE__ */ jsx5("div", { css: styles5.imageContainer, children: /* @__PURE__ */ jsx5(
-      "img",
-      {
-        css: styles5.image,
-        src: selectedPath.replace("public", ""),
-        alt: "Preview"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs5("div", { css: styles5.info, children: [
-      /* @__PURE__ */ jsx5(InfoRow, { label: "Filename", value: selectedPath.split("/").pop() || "" }),
-      imageData && /* @__PURE__ */ jsxs5(Fragment, { children: [
-        /* @__PURE__ */ jsx5(
-          InfoRow,
-          {
-            label: "Original",
-            value: `${imageData.original.width}x${imageData.original.height}`
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          InfoRow,
-          {
-            label: "File size",
-            value: formatFileSize3(imageData.original.fileSize)
-          }
-        ),
-        /* @__PURE__ */ jsxs5("div", { css: styles5.section, children: [
-          /* @__PURE__ */ jsx5("p", { css: styles5.sectionTitle, children: "Generated sizes" }),
-          Object.entries(imageData.sizes).map(([size, data]) => /* @__PURE__ */ jsx5(InfoRow, { label: size, value: `${data.width}x${data.height}` }, size))
-        ] }),
-        imageData.cdn?.synced && /* @__PURE__ */ jsxs5("div", { css: styles5.section, children: [
-          /* @__PURE__ */ jsx5("p", { css: styles5.sectionTitle, children: "CDN" }),
-          /* @__PURE__ */ jsxs5("div", { css: styles5.cdnStatus, children: [
-            /* @__PURE__ */ jsx5("svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx5("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
-            "Synced to CDN"
-          ] }),
-          /* @__PURE__ */ jsx5(
-            "button",
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    modals,
+    /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
+      /* @__PURE__ */ jsx6("h3", { css: styles6.title, children: "Preview" }),
+      /* @__PURE__ */ jsx6("div", { css: styles6.imageContainer, children: /* @__PURE__ */ jsx6(
+        "img",
+        {
+          css: styles6.image,
+          src: selectedPath.replace("public", ""),
+          alt: "Preview"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs6("div", { css: styles6.info, children: [
+        /* @__PURE__ */ jsx6(InfoRow, { label: "Filename", value: selectedPath.split("/").pop() || "" }),
+        imageData && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(
+            InfoRow,
             {
-              css: styles5.copyBtn,
-              onClick: () => {
-                navigator.clipboard.writeText(`${imageData.cdn?.baseUrl}${imageData.sizes.full.path}`);
-              },
-              children: "Copy CDN URL"
+              label: "Original",
+              value: `${imageData.original.width}x${imageData.original.height}`
             }
-          )
-        ] }),
-        imageData.blurhash && /* @__PURE__ */ jsxs5("div", { css: styles5.section, children: [
-          /* @__PURE__ */ jsx5(InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
-          /* @__PURE__ */ jsx5(
-            "div",
+          ),
+          /* @__PURE__ */ jsx6(
+            InfoRow,
             {
-              css: styles5.colorSwatch,
-              style: { backgroundColor: imageData.dominantColor },
-              title: `Dominant color: ${imageData.dominantColor}`
+              label: "File size",
+              value: formatFileSize3(imageData.original.fileSize)
             }
-          )
+          ),
+          /* @__PURE__ */ jsxs6("div", { css: styles6.section, children: [
+            /* @__PURE__ */ jsx6("p", { css: styles6.sectionTitle, children: "Generated sizes" }),
+            Object.entries(imageData.sizes).map(([size, data]) => /* @__PURE__ */ jsx6(InfoRow, { label: size, value: `${data.width}x${data.height}` }, size))
+          ] }),
+          imageData.cdn?.synced && /* @__PURE__ */ jsxs6("div", { css: styles6.section, children: [
+            /* @__PURE__ */ jsx6("p", { css: styles6.sectionTitle, children: "CDN" }),
+            /* @__PURE__ */ jsxs6("div", { css: styles6.cdnStatus, 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 to CDN"
+            ] }),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                css: styles6.copyBtn,
+                onClick: () => {
+                  navigator.clipboard.writeText(`${imageData.cdn?.baseUrl}${imageData.sizes.full.path}`);
+                },
+                children: "Copy CDN URL"
+              }
+            )
+          ] }),
+          imageData.blurhash && /* @__PURE__ */ jsxs6("div", { css: styles6.section, children: [
+            /* @__PURE__ */ jsx6(InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                css: styles6.colorSwatch,
+                style: { backgroundColor: imageData.dominantColor },
+                title: `Dominant color: ${imageData.dominantColor}`
+              }
+            )
+          ] })
         ] })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { css: styles6.actions, children: [
+        /* @__PURE__ */ jsx6("button", { css: styles6.actionBtn, children: "Rename" }),
+        /* @__PURE__ */ jsx6("button", { css: [styles6.actionBtn, styles6.actionBtnDanger], onClick: handleDeleteClick, children: "Delete" })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs5("div", { css: styles5.actions, children: [
-      /* @__PURE__ */ jsx5("button", { css: styles5.actionBtn, children: "Rename" }),
-      /* @__PURE__ */ jsx5("button", { css: [styles5.actionBtn, styles5.actionBtnDanger], onClick: handleDelete, children: "Delete" })
     ] })
   ] });
 }
 function InfoRow({ label, value, truncate }) {
-  return /* @__PURE__ */ jsxs5("div", { css: styles5.row, children: [
-    /* @__PURE__ */ jsx5("span", { css: styles5.label, children: label }),
-    /* @__PURE__ */ jsx5("span", { css: [styles5.value, truncate && styles5.valueTruncate], title: truncate ? value : void 0, children: value })
+  return /* @__PURE__ */ jsxs6("div", { css: styles6.row, children: [
+    /* @__PURE__ */ jsx6("span", { css: styles6.label, children: label }),
+    /* @__PURE__ */ jsx6("span", { css: [styles6.value, truncate && styles6.valueTruncate], title: truncate ? value : void 0, children: value })
   ] });
 }
 function formatFileSize3(bytes) {
@@ -1185,11 +1412,11 @@ function formatFileSize3(bytes) {
 }
 
 // src/components/StudioSettings.tsx
-import { useState as useState4 } from "react";
-import { css as css6 } from "@emotion/react";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
-var styles6 = {
-  btn: css6`
+import { useState as useState5 } 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 styles7 = {
+  btn: css7`
     padding: 8px;
     background: none;
     border: none;
@@ -1201,12 +1428,12 @@ var styles6 = {
       background-color: #f3f4f6;
     }
   `,
-  icon: css6`
+  icon: css7`
     width: 20px;
     height: 20px;
     color: #6b7280;
   `,
-  overlay: css6`
+  overlay: css7`
     position: fixed;
     top: 0;
     right: 0;
@@ -1217,7 +1444,7 @@ var styles6 = {
     align-items: center;
     justify-content: center;
   `,
-  backdrop: css6`
+  backdrop: css7`
     position: absolute;
     top: 0;
     right: 0;
@@ -1225,7 +1452,7 @@ var styles6 = {
     left: 0;
     background-color: rgba(0, 0, 0, 0.3);
   `,
-  panel: css6`
+  panel: css7`
     position: relative;
     background-color: white;
     border-radius: 12px;
@@ -1234,18 +1461,18 @@ var styles6 = {
     max-width: 512px;
     padding: 24px;
   `,
-  header: css6`
+  header: css7`
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
   `,
-  title: css6`
+  title: css7`
     font-size: 18px;
     font-weight: 600;
     margin: 0;
   `,
-  closeBtn: css6`
+  closeBtn: css7`
     padding: 4px;
     background: none;
     border: none;
@@ -1256,23 +1483,23 @@ var styles6 = {
       background-color: #f3f4f6;
     }
   `,
-  sections: css6`
+  sections: css7`
     display: flex;
     flex-direction: column;
     gap: 24px;
   `,
-  sectionTitle: css6`
+  sectionTitle: css7`
     font-size: 14px;
     font-weight: 500;
     color: #111827;
     margin: 0 0 12px 0;
   `,
-  description: css6`
+  description: css7`
     font-size: 12px;
     color: #6b7280;
     margin: 0 0 12px 0;
   `,
-  code: css6`
+  code: css7`
     background-color: #f9fafb;
     border-radius: 8px;
     padding: 12px;
@@ -1280,14 +1507,14 @@ var styles6 = {
     font-size: 12px;
     color: #4b5563;
   `,
-  codeLine: css6`
+  codeLine: css7`
     margin: 0 0 4px 0;
     
     &:last-child {
       margin: 0;
     }
   `,
-  input: css6`
+  input: css7`
     width: 100%;
     padding: 8px 12px;
     border: 1px solid #e5e7eb;
@@ -1299,24 +1526,24 @@ var styles6 = {
       box-shadow: 0 0 0 2px #a855f7;
     }
   `,
-  grid: css6`
+  grid: css7`
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
   `,
-  label: css6`
+  label: css7`
     font-size: 12px;
     color: #6b7280;
     display: block;
     margin-bottom: 4px;
   `,
-  footer: css6`
+  footer: css7`
     margin-top: 24px;
     display: flex;
     justify-content: flex-end;
     gap: 12px;
   `,
-  cancelBtn: css6`
+  cancelBtn: css7`
     padding: 8px 16px;
     font-size: 14px;
     color: #4b5563;
@@ -1329,7 +1556,7 @@ var styles6 = {
       background-color: #f3f4f6;
     }
   `,
-  saveBtn: css6`
+  saveBtn: css7`
     padding: 8px 16px;
     font-size: 14px;
     color: white;
@@ -1344,12 +1571,12 @@ var styles6 = {
   `
 };
 function StudioSettings() {
-  const [isOpen, setIsOpen] = useState4(false);
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx6("button", { css: styles6.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs6(
+  const [isOpen, setIsOpen] = useState5(false);
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx7("button", { css: styles7.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs7(
       "svg",
       {
-        css: styles6.icon,
+        css: styles7.icon,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: "none",
@@ -1358,93 +1585,93 @@ function StudioSettings() {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "3" }),
-          /* @__PURE__ */ jsx6("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__ */ 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" })
         ]
       }
     ) }),
-    isOpen && /* @__PURE__ */ jsx6(SettingsPanel, { onClose: () => setIsOpen(false) })
+    isOpen && /* @__PURE__ */ jsx7(SettingsPanel, { onClose: () => setIsOpen(false) })
   ] });
 }
 function SettingsPanel({ onClose }) {
-  return /* @__PURE__ */ jsxs6("div", { css: styles6.overlay, children: [
-    /* @__PURE__ */ jsx6("div", { css: styles6.backdrop, onClick: onClose }),
-    /* @__PURE__ */ jsxs6("div", { css: styles6.panel, children: [
-      /* @__PURE__ */ jsxs6("div", { css: styles6.header, children: [
-        /* @__PURE__ */ jsx6("h2", { css: styles6.title, children: "Settings" }),
-        /* @__PURE__ */ jsx6("button", { css: styles6.closeBtn, onClick: onClose, children: /* @__PURE__ */ jsx6("svg", { css: styles6.icon, 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" }) }) })
+  return /* @__PURE__ */ jsxs7("div", { css: styles7.overlay, children: [
+    /* @__PURE__ */ jsx7("div", { css: styles7.backdrop, onClick: onClose }),
+    /* @__PURE__ */ jsxs7("div", { css: styles7.panel, 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" }) }) })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { css: styles6.sections, children: [
-        /* @__PURE__ */ jsxs6("section", { children: [
-          /* @__PURE__ */ jsx6("h3", { css: styles6.sectionTitle, children: "Cloudflare R2" }),
-          /* @__PURE__ */ jsx6("p", { css: styles6.description, children: "Configure in .env.local file:" }),
-          /* @__PURE__ */ jsxs6("div", { css: styles6.code, children: [
-            /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
-            /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
-            /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
-            /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
-            /* @__PURE__ */ jsx6("p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
+      /* @__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.code, children: [
+            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+            /* @__PURE__ */ jsx7("p", { css: styles7.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs6("section", { children: [
-          /* @__PURE__ */ jsx6("h3", { css: styles6.sectionTitle, children: "Custom CDN URL" }),
-          /* @__PURE__ */ jsx6("p", { css: styles6.description, children: "Override the default R2 URL with a custom domain:" }),
-          /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
+        /* @__PURE__ */ jsxs7("section", { children: [
+          /* @__PURE__ */ jsx7("h3", { css: styles7.sectionTitle, children: "Custom CDN URL" }),
+          /* @__PURE__ */ jsx7("p", { css: styles7.description, children: "Override the default R2 URL with a custom domain:" }),
+          /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
         ] }),
-        /* @__PURE__ */ jsxs6("section", { children: [
-          /* @__PURE__ */ jsx6("h3", { css: styles6.sectionTitle, children: "Thumbnail Sizes" }),
-          /* @__PURE__ */ jsxs6("div", { css: styles6.grid, children: [
-            /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Small" }),
-              /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "number", defaultValue: 300 })
+        /* @__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__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Medium" }),
-              /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "number", defaultValue: 700 })
+            /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Medium" }),
+              /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 700 })
             ] }),
-            /* @__PURE__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Large" }),
-              /* @__PURE__ */ jsx6("input", { css: styles6.input, type: "number", defaultValue: 1400 })
+            /* @__PURE__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Large" }),
+              /* @__PURE__ */ jsx7("input", { css: styles7.input, type: "number", defaultValue: 1400 })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { css: styles6.footer, children: [
-        /* @__PURE__ */ jsx6("button", { css: styles6.cancelBtn, onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx6("button", { css: styles6.saveBtn, children: "Save Changes" })
+      /* @__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" })
       ] })
     ] })
   ] });
 }
 
 // src/components/StudioUI.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
-var styles7 = {
-  container: css7`
+import { jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
+var styles8 = {
+  container: css8`
     display: flex;
     flex-direction: column;
     height: 100%;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   `,
-  header: css7`
+  header: css8`
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 24px;
     border-bottom: 1px solid #e5e7eb;
   `,
-  title: css7`
+  title: css8`
     font-size: 20px;
     font-weight: 600;
     color: #111827;
     margin: 0;
   `,
-  headerActions: css7`
+  headerActions: css8`
     display: flex;
     align-items: center;
     gap: 8px;
   `,
-  closeBtn: css7`
+  closeBtn: css8`
     padding: 8px;
     background: none;
     border: none;
@@ -1456,17 +1683,17 @@ var styles7 = {
       background-color: #f3f4f6;
     }
   `,
-  closeIcon: css7`
+  closeIcon: css8`
     width: 20px;
     height: 20px;
     color: #6b7280;
   `,
-  content: css7`
+  content: css8`
     flex: 1;
     display: flex;
     overflow: hidden;
   `,
-  fileBrowser: css7`
+  fileBrowser: css8`
     flex: 1;
     min-width: 0;
     overflow: auto;
@@ -1474,13 +1701,13 @@ var styles7 = {
   `
 };
 function StudioUI({ onClose }) {
-  const [currentPath, setCurrentPathInternal] = useState5("public");
-  const [selectedItems, setSelectedItems] = useState5(/* @__PURE__ */ new Set());
-  const [lastSelectedPath, setLastSelectedPath] = useState5(null);
-  const [viewMode, setViewMode] = useState5("grid");
-  const [meta, setMeta] = useState5(null);
-  const [isLoading, setIsLoading] = useState5(false);
-  const [refreshKey, setRefreshKey] = useState5(0);
+  const [currentPath, setCurrentPathInternal] = useState6("public");
+  const [selectedItems, setSelectedItems] = useState6(/* @__PURE__ */ new Set());
+  const [lastSelectedPath, setLastSelectedPath] = useState6(null);
+  const [viewMode, setViewMode] = useState6("grid");
+  const [meta, setMeta] = useState6(null);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [refreshKey, setRefreshKey] = useState6(0);
   const triggerRefresh = useCallback2(() => {
     setRefreshKey((k) => k + 1);
   }, []);
@@ -1569,35 +1796,35 @@ function StudioUI({ onClose }) {
     refreshKey,
     triggerRefresh
   };
-  return /* @__PURE__ */ jsx7(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs7("div", { css: styles7.container, children: [
-    /* @__PURE__ */ jsxs7("div", { css: styles7.header, children: [
-      /* @__PURE__ */ jsx7("h1", { css: styles7.title, children: "Studio" }),
-      /* @__PURE__ */ jsxs7("div", { css: styles7.headerActions, children: [
-        /* @__PURE__ */ jsx7(StudioSettings, {}),
-        /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, children: [
+    /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
+      /* @__PURE__ */ jsx8("h1", { css: styles8.title, children: "Studio" }),
+      /* @__PURE__ */ jsxs8("div", { css: styles8.headerActions, children: [
+        /* @__PURE__ */ jsx8(StudioSettings, {}),
+        /* @__PURE__ */ jsx8(
           "button",
           {
-            css: styles7.closeBtn,
+            css: styles8.closeBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
-            children: /* @__PURE__ */ jsx7(CloseIcon, {})
+            children: /* @__PURE__ */ jsx8(CloseIcon, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx7(StudioToolbar, {}),
-    /* @__PURE__ */ jsx7(StudioBreadcrumb, {}),
-    /* @__PURE__ */ jsxs7("div", { css: styles7.content, children: [
-      /* @__PURE__ */ jsx7("div", { css: styles7.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx7(StudioFileGrid, {}) : /* @__PURE__ */ jsx7(StudioFileList, {}) }),
-      /* @__PURE__ */ jsx7(StudioPreview, {})
+    /* @__PURE__ */ jsx8(StudioToolbar, {}),
+    /* @__PURE__ */ jsx8(StudioBreadcrumb, {}),
+    /* @__PURE__ */ jsxs8("div", { css: styles8.content, children: [
+      /* @__PURE__ */ jsx8("div", { css: styles8.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx8(StudioFileGrid, {}) : /* @__PURE__ */ jsx8(StudioFileList, {}) }),
+      /* @__PURE__ */ jsx8(StudioPreview, {})
     ] })
   ] }) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "svg",
     {
-      css: styles7.closeIcon,
+      css: styles8.closeIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -1606,8 +1833,8 @@ function CloseIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   );
@@ -1617,4 +1844,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-2CBIV4Q5.mjs.map
+//# sourceMappingURL=StudioUI-RS5UCUIN.mjs.map