@gallop.software/studio 0.1.6 → 0.1.8

package/dist/StudioUI-5I7VRE4F.mjs

@@ -0,0 +1,1839 @@
+"use client";
+
+// src/components/StudioUI.tsx
+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";
+var defaultState = {
+  isOpen: false,
+  openStudio: () => {
+  },
+  closeStudio: () => {
+  },
+  toggleStudio: () => {
+  },
+  currentPath: "public",
+  setCurrentPath: () => {
+  },
+  navigateUp: () => {
+  },
+  selectedItems: /* @__PURE__ */ new Set(),
+  toggleSelection: () => {
+  },
+  selectRange: () => {
+  },
+  selectAll: () => {
+  },
+  clearSelection: () => {
+  },
+  lastSelectedPath: null,
+  viewMode: "grid",
+  setViewMode: () => {
+  },
+  meta: null,
+  setMeta: () => {
+  },
+  isLoading: false,
+  setIsLoading: () => {
+  },
+  refreshKey: 0,
+  triggerRefresh: () => {
+  }
+};
+var StudioContext = createContext(defaultState);
+function useStudio() {
+  return useContext(StudioContext);
+}
+
+// src/components/StudioToolbar.tsx
+import { useCallback, useRef, useState } from "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 = {
+  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;
+    padding: 12px 24px;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+  `,
+  left: css2`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  right: css2`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  `,
+  btn: css2`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+  btnDefault: css2`
+    color: #374151;
+    
+    &:hover:not(:disabled) {
+      background-color: white;
+    }
+  `,
+  btnDanger: css2`
+    color: #dc2626;
+    
+    &:hover:not(:disabled) {
+      background-color: #fef2f2;
+    }
+  `,
+  icon: css2`
+    width: 16px;
+    height: 16px;
+  `,
+  selectionCount: css2`
+    font-size: 14px;
+    color: #4b5563;
+  `,
+  clearBtn: css2`
+    margin-left: 8px;
+    color: #9333ea;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  viewToggle: css2`
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+  `,
+  viewBtn: css2`
+    padding: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #6b7280;
+    transition: all 0.15s;
+    
+    &:hover {
+      background-color: #f9fafb;
+    }
+  `,
+  viewBtnActive: css2`
+    background-color: #f3e8ff;
+    color: #7c3aed;
+  `
+};
+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();
+  }, []);
+  const handleFileChange = useCallback(async (e) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    setUploading(true);
+    try {
+      for (const file of Array.from(files)) {
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("path", currentPath);
+        const response = await fetch("/api/studio/upload", {
+          method: "POST",
+          body: formData
+        });
+        if (!response.ok) {
+          const error = await response.json();
+          console.error("Upload failed:", error);
+          setAlertMessage({
+            title: "Upload Failed",
+            message: `Failed to upload ${file.name}: ${error.error || "Unknown error"}`
+          });
+        }
+      }
+      triggerRefresh();
+    } catch (error) {
+      console.error("Upload error:", error);
+      setAlertMessage({
+        title: "Upload Failed",
+        message: "Upload failed. Check console for details."
+      });
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  }, [currentPath, triggerRefresh]);
+  const handleReprocess = useCallback(() => {
+    console.log("Reprocess clicked", selectedItems);
+  }, [selectedItems]);
+  const handleDeleteClick = useCallback(() => {
+    if (selectedItems.size === 0) return;
+    setShowDeleteConfirm(true);
+  }, [selectedItems]);
+  const handleDeleteConfirm = useCallback(async () => {
+    setShowDeleteConfirm(false);
+    try {
+      const response = await fetch("/api/studio/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ paths: Array.from(selectedItems) })
+      });
+      if (response.ok) {
+        clearSelection();
+        triggerRefresh();
+      } else {
+        const error = await response.json();
+        setAlertMessage({
+          title: "Delete Failed",
+          message: error.error || "Unknown error"
+        });
+      }
+    } catch (error) {
+      console.error("Delete error:", error);
+      setAlertMessage({
+        title: "Delete Failed",
+        message: "Delete failed. Check console for details."
+      });
+    }
+  }, [selectedItems, clearSelection, triggerRefresh]);
+  const handleSyncCdn = useCallback(() => {
+    console.log("Sync CDN clicked", selectedItems);
+  }, [selectedItems]);
+  const handleScan = useCallback(() => {
+    console.log("Scan clicked");
+  }, []);
+  const hasSelection = selectedItems.size > 0;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    showDeleteConfirm && /* @__PURE__ */ jsx2(
+      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__ */ jsx2(
+      AlertModal,
+      {
+        title: alertMessage.title,
+        message: alertMessage.message,
+        onClose: () => setAlertMessage(null)
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { css: styles2.toolbar, children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          multiple: true,
+          accept: "image/*",
+          onChange: handleFileChange,
+          style: { display: "none" }
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { css: styles2.left, children: [
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
+          {
+            onClick: handleUpload,
+            icon: "upload",
+            label: uploading ? "Uploading..." : "Upload",
+            disabled: uploading
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ToolbarButton,
+          {
+            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, {})
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ToolbarButton({
+  onClick,
+  icon,
+  label,
+  disabled,
+  variant = "default"
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      css: [styles2.btn, variant === "danger" ? styles2.btnDanger : styles2.btnDefault],
+      onClick,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx2(IconComponent, { icon }),
+        label
+      ]
+    }
+  );
+}
+function IconComponent({ icon }) {
+  switch (icon) {
+    case "upload":
+      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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 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;
+    padding: 8px 24px;
+    background-color: white;
+    border-bottom: 1px solid #f3f4f6;
+  `,
+  backBtn: css3`
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  backIcon: css3`
+    width: 16px;
+    height: 16px;
+    color: #6b7280;
+  `,
+  nav: css3`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+  `,
+  item: css3`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  `,
+  separator: css3`
+    color: #d1d5db;
+  `,
+  btn: css3`
+    padding: 2px 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  btnActive: css3`
+    color: #111827;
+    font-weight: 500;
+  `,
+  btnInactive: css3`
+    color: #6b7280;
+    
+    &:hover {
+      color: #374151;
+    }
+  `
+};
+function StudioBreadcrumb() {
+  const { currentPath, setCurrentPath, navigateUp } = useStudio();
+  const parts = currentPath.split("/").filter(Boolean);
+  const handleClick = (index) => {
+    const newPath = parts.slice(0, index + 1).join("/");
+    setCurrentPath(newPath);
+  };
+  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: [styles3.btn, index === parts.length - 1 ? styles3.btnActive : styles3.btnInactive],
+          onClick: () => handleClick(index),
+          children: part
+        }
+      )
+    ] }, index)) })
+  ] });
+}
+
+// src/components/StudioFileGrid.tsx
+import { useEffect, useState as useState2 } 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 spin = keyframes2`
+  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: 2px solid transparent;
+    border-bottom-color: #9333ea;
+    animation: ${spin} 1s linear infinite;
+  `,
+  empty: css4`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+    color: #6b7280;
+  `,
+  emptyIcon: css4`
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+  `,
+  emptyText: css4`
+    font-size: 14px;
+    margin: 0;
+  `,
+  grid: css4`
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    
+    @media (min-width: 640px) { grid-template-columns: repeat(3, 1fr); }
+    @media (min-width: 768px) { grid-template-columns: repeat(4, 1fr); }
+    @media (min-width: 1024px) { grid-template-columns: repeat(5, 1fr); }
+    @media (min-width: 1280px) { grid-template-columns: repeat(6, 1fr); }
+  `,
+  item: css4`
+    position: relative;
+    border-radius: 8px;
+    border: 2px solid transparent;
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.15s;
+    background-color: #f9fafb;
+    
+    &:hover {
+      border-color: #e5e7eb;
+    }
+  `,
+  itemSelected: css4`
+    border-color: #a855f7;
+    background-color: #faf5ff;
+  `,
+  checkbox: css4`
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 10;
+    width: 16px;
+    height: 16px;
+    accent-color: #9333ea;
+  `,
+  cdnBadge: css4`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+    background-color: #dcfce7;
+    color: #15803d;
+    font-size: 12px;
+    padding: 2px 6px;
+    border-radius: 9999px;
+  `,
+  content: css4`
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+  `,
+  folderIcon: css4`
+    width: 64px;
+    height: 64px;
+    color: #facc15;
+  `,
+  image: css4`
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+  `,
+  label: css4`
+    padding: 6px 8px;
+    background-color: white;
+    border-top: 1px solid #e5e7eb;
+  `,
+  name: css4`
+    font-size: 12px;
+    color: #374151;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  `,
+  size: css4`
+    font-size: 12px;
+    color: #9ca3af;
+    margin: 0;
+  `,
+  selectAllRow: css4`
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e5e7eb;
+  `,
+  selectAllLabel: css4`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #6b7280;
+    cursor: pointer;
+    
+    &:hover {
+      color: #374151;
+    }
+  `,
+  selectAllCheckbox: css4`
+    width: 16px;
+    height: 16px;
+    accent-color: #9333ea;
+  `
+};
+function StudioFileGrid() {
+  const { currentPath, setCurrentPath, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey } = useStudio();
+  const [items, setItems] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  useEffect(() => {
+    async function loadItems() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/studio/list?path=${encodeURIComponent(currentPath)}`);
+        if (response.ok) {
+          const data = await response.json();
+          setItems(data.items || []);
+        }
+      } catch (error) {
+        console.error("Failed to load items:", error);
+      }
+      setLoading(false);
+    }
+    loadItems();
+  }, [currentPath, refreshKey]);
+  if (loading) {
+    return /* @__PURE__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
+  }
+  if (items.length === 0) {
+    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) => {
+    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 files = sortedItems.filter((item) => item.type !== "folder");
+  const allFilesSelected = files.length > 0 && files.every((item) => selectedItems.has(item.path));
+  const someFilesSelected = files.some((item) => selectedItems.has(item.path));
+  const handleSelectAll = () => {
+    if (allFilesSelected) {
+      clearSelection();
+    } else {
+      selectAll(files);
+    }
+  };
+  const handleItemClick = (item, e) => {
+    if (item.type === "folder") {
+      setCurrentPath(item.path);
+      return;
+    }
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  };
+  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: styles4.selectAllCheckbox,
+          checked: allFilesSelected,
+          ref: (el) => {
+            if (el) el.indeterminate = someFilesSelected && !allFilesSelected;
+          },
+          onChange: handleSelectAll
+        }
+      ),
+      "Select all (",
+      files.length,
+      ")"
+    ] }) }),
+    /* @__PURE__ */ jsx4("div", { css: styles4.grid, children: sortedItems.map((item) => /* @__PURE__ */ jsx4(
+      GridItem,
+      {
+        item,
+        isSelected: selectedItems.has(item.path),
+        onClick: (e) => handleItemClick(item, e)
+      },
+      item.path
+    )) })
+  ] });
+}
+function GridItem({ item, isSelected, onClick }) {
+  const isFolder = item.type === "folder";
+  return /* @__PURE__ */ jsxs4("div", { css: [styles4.item, isSelected && styles4.itemSelected], onClick, children: [
+    !isFolder && /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "checkbox",
+        css: styles4.checkbox,
+        checked: isSelected,
+        onChange: () => {
+        },
+        onClick: (e) => e.stopPropagation()
+      }
+    ),
+    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: styles4.image,
+        src: item.path.replace("public", ""),
+        alt: item.name,
+        loading: "lazy"
+      }
+    ) }),
+    /* @__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) })
+    ] })
+  ] });
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/components/StudioFileList.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+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 styles5 = {
+  loading: css5`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+  `,
+  spinner: css5`
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-bottom-color: #9333ea;
+    animation: ${spin2} 1s linear infinite;
+  `,
+  empty: css5`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+    color: #6b7280;
+  `,
+  table: css5`
+    width: 100%;
+    border-collapse: collapse;
+  `,
+  th: css5`
+    text-align: left;
+    font-size: 12px;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding-bottom: 8px;
+    font-weight: normal;
+  `,
+  thCheckbox: css5`
+    width: 32px;
+  `,
+  thSize: css5`
+    width: 96px;
+  `,
+  thDimensions: css5`
+    width: 128px;
+  `,
+  thCdn: css5`
+    width: 96px;
+  `,
+  tbody: css5`
+    border-top: 1px solid #f3f4f6;
+  `,
+  row: css5`
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f9fafb;
+    }
+  `,
+  rowSelected: css5`
+    background-color: #faf5ff;
+  `,
+  td: css5`
+    padding: 8px 0;
+    border-bottom: 1px solid #f3f4f6;
+  `,
+  checkbox: css5`
+    width: 16px;
+    height: 16px;
+    accent-color: #9333ea;
+  `,
+  nameCell: css5`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  folderIcon: css5`
+    width: 20px;
+    height: 20px;
+    color: #facc15;
+  `,
+  fileIcon: css5`
+    width: 20px;
+    height: 20px;
+    color: #9ca3af;
+  `,
+  name: css5`
+    font-size: 14px;
+    color: #111827;
+  `,
+  meta: css5`
+    font-size: 14px;
+    color: #6b7280;
+  `,
+  cdnBadge: css5`
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: #15803d;
+  `,
+  cdnIcon: css5`
+    width: 12px;
+    height: 12px;
+  `,
+  cdnEmpty: css5`
+    font-size: 12px;
+    color: #9ca3af;
+  `
+};
+function StudioFileList() {
+  const { currentPath, setCurrentPath, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey } = useStudio();
+  const [items, setItems] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  useEffect2(() => {
+    async function loadItems() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/studio/list?path=${encodeURIComponent(currentPath)}`);
+        if (response.ok) {
+          const data = await response.json();
+          setItems(data.items || []);
+        }
+      } catch (error) {
+        console.error("Failed to load items:", error);
+      }
+      setLoading(false);
+    }
+    loadItems();
+  }, [currentPath, refreshKey]);
+  if (loading) {
+    return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
+  }
+  if (items.length === 0) {
+    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;
+    if (a.type !== "folder" && b.type === "folder") return 1;
+    return a.name.localeCompare(b.name);
+  });
+  const files = sortedItems.filter((item) => item.type !== "folder");
+  const allFilesSelected = files.length > 0 && files.every((item) => selectedItems.has(item.path));
+  const someFilesSelected = files.some((item) => selectedItems.has(item.path));
+  const handleSelectAll = () => {
+    if (allFilesSelected) {
+      clearSelection();
+    } else {
+      selectAll(files);
+    }
+  };
+  const handleItemClick = (item, e) => {
+    if (item.type === "folder") {
+      setCurrentPath(item.path);
+      return;
+    }
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  };
+  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: styles5.checkbox,
+          checked: allFilesSelected,
+          ref: (el) => {
+            if (el) el.indeterminate = someFilesSelected && !allFilesSelected;
+          },
+          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__ */ jsx5("tbody", { css: styles5.tbody, children: sortedItems.map((item) => /* @__PURE__ */ jsx5(
+      ListRow,
+      {
+        item,
+        isSelected: selectedItems.has(item.path),
+        onClick: (e) => handleItemClick(item, e)
+      },
+      item.path
+    )) })
+  ] });
+}
+function ListRow({ item, isSelected, onClick }) {
+  const isFolder = item.type === "folder";
+  return /* @__PURE__ */ jsxs5("tr", { css: [styles5.row, isSelected && styles5.rowSelected], onClick, children: [
+    /* @__PURE__ */ jsx5("td", { css: styles5.td, children: !isFolder && /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "checkbox",
+        css: styles5.checkbox,
+        checked: isSelected,
+        onChange: () => {
+        },
+        onClick: (e) => e.stopPropagation()
+      }
+    ) }),
+    /* @__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__ */ 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__ */ jsx5("span", { css: styles5.cdnEmpty, children: "--" }) })
+  ] });
+}
+function formatFileSize2(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/components/StudioPreview.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 = {
+  panel: css6`
+    width: 320px;
+    border-left: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+    padding: 16px;
+    overflow: auto;
+  `,
+  title: css6`
+    font-size: 14px;
+    font-weight: 500;
+    color: #111827;
+    margin: 0 0 16px 0;
+  `,
+  imageContainer: css6`
+    background-color: white;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+    padding: 8px;
+    margin-bottom: 16px;
+  `,
+  image: css6`
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+  `,
+  info: css6`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  `,
+  row: css6`
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+  `,
+  label: css6`
+    color: #6b7280;
+  `,
+  value: css6`
+    color: #111827;
+  `,
+  valueTruncate: css6`
+    max-width: 128px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,
+  section: css6`
+    padding-top: 8px;
+    border-top: 1px solid #e5e7eb;
+  `,
+  sectionTitle: css6`
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+    margin: 0 0 8px 0;
+  `,
+  cdnStatus: css6`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #16a34a;
+  `,
+  cdnIcon: css6`
+    width: 16px;
+    height: 16px;
+  `,
+  copyBtn: css6`
+    margin-top: 8px;
+    font-size: 12px;
+    color: #9333ea;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  colorSwatch: css6`
+    margin-top: 8px;
+    height: 32px;
+    border-radius: 4px;
+  `,
+  emptyState: css6`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+  `,
+  emptyText: css6`
+    font-size: 14px;
+    color: #9ca3af;
+    margin: 0;
+  `,
+  actions: css6`
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+  actionBtn: css6`
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    color: #374151;
+    
+    &:hover {
+      background-color: #f9fafb;
+    }
+  `,
+  actionBtnDanger: css6`
+    color: #dc2626;
+    
+    &:hover {
+      background-color: #fef2f2;
+    }
+  `
+};
+function StudioPreview() {
+  const { selectedItems, meta, triggerRefresh, clearSelection } = useStudio();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState4(false);
+  const [alertMessage, setAlertMessage] = useState4(null);
+  const handleDeleteClick = () => {
+    if (selectedItems.size === 0) return;
+    setShowDeleteConfirm(true);
+  };
+  const handleDeleteConfirm = async () => {
+    setShowDeleteConfirm(false);
+    try {
+      const response = await fetch("/api/studio/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ paths: Array.from(selectedItems) })
+      });
+      if (response.ok) {
+        clearSelection();
+        triggerRefresh();
+      } else {
+        const error = await response.json();
+        setAlertMessage({
+          title: "Delete Failed",
+          message: error.error || "Unknown error"
+        });
+      }
+    } catch (error) {
+      console.error("Delete error:", error);
+      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__ */ 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__ */ 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__ */ 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,
+            {
+              label: "Original",
+              value: `${imageData.original.width}x${imageData.original.height}`
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            InfoRow,
+            {
+              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" })
+      ] })
+    ] })
+  ] });
+}
+function InfoRow({ label, value, truncate }) {
+  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) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// src/components/StudioSettings.tsx
+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;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  icon: css7`
+    width: 20px;
+    height: 20px;
+    color: #6b7280;
+  `,
+  overlay: css7`
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+  backdrop: css7`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+  `,
+  panel: css7`
+    position: relative;
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    max-width: 512px;
+    padding: 24px;
+  `,
+  header: css7`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  `,
+  title: css7`
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+  `,
+  closeBtn: css7`
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  sections: css7`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  `,
+  sectionTitle: css7`
+    font-size: 14px;
+    font-weight: 500;
+    color: #111827;
+    margin: 0 0 12px 0;
+  `,
+  description: css7`
+    font-size: 12px;
+    color: #6b7280;
+    margin: 0 0 12px 0;
+  `,
+  code: css7`
+    background-color: #f9fafb;
+    border-radius: 8px;
+    padding: 12px;
+    font-family: monospace;
+    font-size: 12px;
+    color: #4b5563;
+  `,
+  codeLine: css7`
+    margin: 0 0 4px 0;
+    
+    &:last-child {
+      margin: 0;
+    }
+  `,
+  input: css7`
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 14px;
+    
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px #a855f7;
+    }
+  `,
+  grid: css7`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  `,
+  label: css7`
+    font-size: 12px;
+    color: #6b7280;
+    display: block;
+    margin-bottom: 4px;
+  `,
+  footer: css7`
+    margin-top: 24px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  `,
+  cancelBtn: css7`
+    padding: 8px 16px;
+    font-size: 14px;
+    color: #4b5563;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  saveBtn: css7`
+    padding: 8px 16px;
+    font-size: 14px;
+    color: white;
+    background-color: #9333ea;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #7c3aed;
+    }
+  `
+};
+function StudioSettings() {
+  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: styles7.icon,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        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" })
+        ]
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsx7(SettingsPanel, { onClose: () => setIsOpen(false) })
+  ] });
+}
+function SettingsPanel({ onClose }) {
+  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__ */ 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__ */ 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__ */ 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__ */ jsxs7("div", { children: [
+              /* @__PURE__ */ jsx7("label", { css: styles7.label, children: "Medium" }),
+              /* @__PURE__ */ jsx7("input", { css: styles7.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__ */ 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 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: css8`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid #e5e7eb;
+  `,
+  title: css8`
+    font-size: 20px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  `,
+  headerActions: css8`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  closeBtn: css8`
+    padding: 8px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  closeIcon: css8`
+    width: 20px;
+    height: 20px;
+    color: #6b7280;
+  `,
+  content: css8`
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  `,
+  fileBrowser: css8`
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+    padding: 16px;
+  `
+};
+function StudioUI({ onClose }) {
+  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);
+  }, []);
+  const navigateUp = useCallback2(() => {
+    if (currentPath === "public") return;
+    const parts = currentPath.split("/");
+    parts.pop();
+    setCurrentPathInternal(parts.join("/") || "public");
+    setSelectedItems(/* @__PURE__ */ new Set());
+  }, [currentPath]);
+  const setCurrentPath = useCallback2((path) => {
+    setCurrentPathInternal(path);
+    setSelectedItems(/* @__PURE__ */ new Set());
+  }, []);
+  const toggleSelection = useCallback2((path) => {
+    setSelectedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+    setLastSelectedPath(path);
+  }, []);
+  const selectRange = useCallback2((fromPath, toPath, allItems) => {
+    const files = allItems.filter((item) => item.type !== "folder");
+    const fromIndex = files.findIndex((item) => item.path === fromPath);
+    const toIndex = files.findIndex((item) => item.path === toPath);
+    if (fromIndex === -1 || toIndex === -1) return;
+    const start = Math.min(fromIndex, toIndex);
+    const end = Math.max(fromIndex, toIndex);
+    setSelectedItems((prev) => {
+      const next = new Set(prev);
+      for (let i = start; i <= end; i++) {
+        next.add(files[i].path);
+      }
+      return next;
+    });
+    setLastSelectedPath(toPath);
+  }, []);
+  const selectAll = useCallback2((items) => {
+    setSelectedItems(new Set(items.map((item) => item.path)));
+  }, []);
+  const clearSelection = useCallback2(() => {
+    setSelectedItems(/* @__PURE__ */ new Set());
+  }, []);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  useEffect3(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [handleKeyDown]);
+  const contextValue = {
+    isOpen: true,
+    openStudio: () => {
+    },
+    closeStudio: onClose,
+    toggleStudio: onClose,
+    currentPath,
+    setCurrentPath,
+    navigateUp,
+    selectedItems,
+    toggleSelection,
+    selectRange,
+    selectAll,
+    clearSelection,
+    lastSelectedPath,
+    viewMode,
+    setViewMode,
+    meta,
+    setMeta,
+    isLoading,
+    setIsLoading,
+    refreshKey,
+    triggerRefresh
+  };
+  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: styles8.closeBtn,
+            onClick: onClose,
+            "aria-label": "Close Studio",
+            children: /* @__PURE__ */ jsx8(CloseIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__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__ */ jsxs8(
+    "svg",
+    {
+      css: styles8.closeIcon,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      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" })
+      ]
+    }
+  );
+}
+var StudioUI_default = StudioUI;
+export {
+  StudioUI,
+  StudioUI_default as default
+};
+//# sourceMappingURL=StudioUI-5I7VRE4F.mjs.map