@gallop.software/studio 0.1.6 → 0.1.8

package/dist/StudioUI-PW3ZGLXL.mjs

@@ -1,1523 +0,0 @@
-"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";
-
-// 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: () => {
-  },
-  selectAll: () => {
-  },
-  clearSelection: () => {
-  },
-  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 } from "@emotion/react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-var styles = {
-  toolbar: css`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 24px;
-    background-color: #f9fafb;
-    border-bottom: 1px solid #e5e7eb;
-  `,
-  left: css`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `,
-  right: css`
-    display: flex;
-    align-items: center;
-    gap: 16px;
-  `,
-  btn: css`
-    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: css`
-    color: #374151;
-    
-    &:hover:not(:disabled) {
-      background-color: white;
-    }
-  `,
-  btnDanger: css`
-    color: #dc2626;
-    
-    &:hover:not(:disabled) {
-      background-color: #fef2f2;
-    }
-  `,
-  icon: css`
-    width: 16px;
-    height: 16px;
-  `,
-  selectionCount: css`
-    font-size: 14px;
-    color: #4b5563;
-  `,
-  clearBtn: css`
-    margin-left: 8px;
-    color: #9333ea;
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 14px;
-    
-    &:hover {
-      text-decoration: underline;
-    }
-  `,
-  viewToggle: css`
-    display: flex;
-    align-items: center;
-    background-color: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    overflow: hidden;
-  `,
-  viewBtn: css`
-    padding: 8px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: #6b7280;
-    transition: all 0.15s;
-    
-    &:hover {
-      background-color: #f9fafb;
-    }
-  `,
-  viewBtnActive: css`
-    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 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);
-          alert(`Failed to upload ${file.name}: ${error.error || "Unknown error"}`);
-        }
-      }
-      triggerRefresh();
-    } catch (error) {
-      console.error("Upload error:", error);
-      alert("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 handleDelete = useCallback(async () => {
-    if (selectedItems.size === 0) return;
-    if (!confirm(`Delete ${selectedItems.size} item(s)?`)) return;
-    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();
-        alert(`Delete failed: ${error.error || "Unknown error"}`);
-      }
-    } catch (error) {
-      console.error("Delete error:", error);
-      alert("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__ */ jsxs("div", { css: styles.toolbar, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        multiple: true,
-        accept: "image/*",
-        onChange: handleFileChange,
-        style: { display: "none" }
-      }
-    ),
-    /* @__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,
-        {
-          onClick: handleSyncCdn,
-          icon: "cloud",
-          label: "Sync CDN",
-          disabled: !hasSelection
-        }
-      ),
-      /* @__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",
-          {
-            css: [styles.viewBtn, viewMode === "grid" && styles.viewBtnActive],
-            onClick: () => setViewMode("grid"),
-            "aria-label": "Grid view",
-            children: /* @__PURE__ */ jsx(GridIcon, {})
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            css: [styles.viewBtn, viewMode === "list" && styles.viewBtnActive],
-            onClick: () => setViewMode("list"),
-            "aria-label": "List view",
-            children: /* @__PURE__ */ jsx(ListIcon, {})
-          }
-        )
-      ] })
-    ] })
-  ] });
-}
-function ToolbarButton({
-  onClick,
-  icon,
-  label,
-  disabled,
-  variant = "default"
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      css: [styles.btn, variant === "danger" ? styles.btnDanger : styles.btnDefault],
-      onClick,
-      disabled,
-      children: [
-        /* @__PURE__ */ jsx(IconComponent, { icon }),
-        label
-      ]
-    }
-  );
-}
-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" }) });
-    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" }) });
-    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" }) });
-    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" }) });
-    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" }) });
-    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" }) });
-}
-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" }) });
-}
-
-// 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`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 24px;
-    background-color: white;
-    border-bottom: 1px solid #f3f4f6;
-  `,
-  backBtn: css2`
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.15s;
-    
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  `,
-  backIcon: css2`
-    width: 16px;
-    height: 16px;
-    color: #6b7280;
-  `,
-  nav: css2`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 14px;
-  `,
-  item: css2`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  `,
-  separator: css2`
-    color: #d1d5db;
-  `,
-  btn: css2`
-    padding: 2px 4px;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: all 0.15s;
-    
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  `,
-  btnActive: css2`
-    color: #111827;
-    font-weight: 500;
-  `,
-  btnInactive: css2`
-    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__ */ 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(
-        "button",
-        {
-          css: [styles2.btn, index === parts.length - 1 ? styles2.btnActive : styles2.btnInactive],
-          onClick: () => handleClick(index),
-          children: part
-        }
-      )
-    ] }, index)) })
-  ] });
-}
-
-// 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`
-  to { transform: rotate(360deg); }
-`;
-var styles3 = {
-  loading: css3`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-  `,
-  spinner: css3`
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 2px solid transparent;
-    border-bottom-color: #9333ea;
-    animation: ${spin} 1s linear infinite;
-  `,
-  empty: css3`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-    color: #6b7280;
-  `,
-  emptyIcon: css3`
-    width: 48px;
-    height: 48px;
-    margin-bottom: 16px;
-  `,
-  emptyText: css3`
-    font-size: 14px;
-    margin: 0;
-  `,
-  grid: css3`
-    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: css3`
-    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: css3`
-    border-color: #a855f7;
-    background-color: #faf5ff;
-  `,
-  checkbox: css3`
-    position: absolute;
-    top: 8px;
-    left: 8px;
-    z-index: 10;
-    width: 16px;
-    height: 16px;
-    accent-color: #9333ea;
-  `,
-  cdnBadge: css3`
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 10;
-    background-color: #dcfce7;
-    color: #15803d;
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 9999px;
-  `,
-  content: css3`
-    aspect-ratio: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 16px;
-  `,
-  folderIcon: css3`
-    width: 64px;
-    height: 64px;
-    color: #facc15;
-  `,
-  image: css3`
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    border-radius: 4px;
-  `,
-  label: css3`
-    padding: 6px 8px;
-    background-color: white;
-    border-top: 1px solid #e5e7eb;
-  `,
-  name: css3`
-    font-size: 12px;
-    color: #374151;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin: 0;
-  `,
-  size: css3`
-    font-size: 12px;
-    color: #9ca3af;
-    margin: 0;
-  `
-};
-function StudioFileGrid() {
-  const { currentPath, setCurrentPath, selectedItems, toggleSelection, 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__ */ jsx3("div", { css: styles3.loading, children: /* @__PURE__ */ jsx3("div", { css: styles3.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" })
-    ] });
-  }
-  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);
-  });
-  return /* @__PURE__ */ jsx3("div", { css: styles3.grid, children: sortedItems.map((item) => /* @__PURE__ */ jsx3(
-    GridItem,
-    {
-      item,
-      isSelected: selectedItems.has(item.path),
-      onSelect: () => toggleSelection(item.path),
-      onOpen: () => {
-        if (item.type === "folder") {
-          setCurrentPath(item.path);
-        }
-      }
-    },
-    item.path
-  )) });
-}
-function GridItem({ item, isSelected, onSelect, onOpen }) {
-  const isFolder = item.type === "folder";
-  const handleClick = () => {
-    if (isFolder) {
-      onOpen();
-    } else {
-      onSelect();
-    }
-  };
-  return /* @__PURE__ */ jsxs3("div", { css: [styles3.item, isSelected && styles3.itemSelected], onClick: handleClick, children: [
-    !isFolder && /* @__PURE__ */ jsx3(
-      "input",
-      {
-        type: "checkbox",
-        css: styles3.checkbox,
-        checked: isSelected,
-        onChange: onSelect,
-        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(
-      "img",
-      {
-        css: styles3.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) })
-    ] })
-  ] });
-}
-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 css4, keyframes as keyframes2 } from "@emotion/react";
-import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
-var spin2 = 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: ${spin2} 1s linear infinite;
-  `,
-  empty: css4`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 256px;
-    color: #6b7280;
-  `,
-  table: css4`
-    width: 100%;
-    border-collapse: collapse;
-  `,
-  th: css4`
-    text-align: left;
-    font-size: 12px;
-    color: #6b7280;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    padding-bottom: 8px;
-    font-weight: normal;
-  `,
-  thCheckbox: css4`
-    width: 32px;
-  `,
-  thSize: css4`
-    width: 96px;
-  `,
-  thDimensions: css4`
-    width: 128px;
-  `,
-  thCdn: css4`
-    width: 96px;
-  `,
-  tbody: css4`
-    border-top: 1px solid #f3f4f6;
-  `,
-  row: css4`
-    cursor: pointer;
-    transition: background-color 0.15s;
-    
-    &:hover {
-      background-color: #f9fafb;
-    }
-  `,
-  rowSelected: css4`
-    background-color: #faf5ff;
-  `,
-  td: css4`
-    padding: 8px 0;
-    border-bottom: 1px solid #f3f4f6;
-  `,
-  checkbox: css4`
-    width: 16px;
-    height: 16px;
-    accent-color: #9333ea;
-  `,
-  nameCell: css4`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `,
-  folderIcon: css4`
-    width: 20px;
-    height: 20px;
-    color: #facc15;
-  `,
-  fileIcon: css4`
-    width: 20px;
-    height: 20px;
-    color: #9ca3af;
-  `,
-  name: css4`
-    font-size: 14px;
-    color: #111827;
-  `,
-  meta: css4`
-    font-size: 14px;
-    color: #6b7280;
-  `,
-  cdnBadge: css4`
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    color: #15803d;
-  `,
-  cdnIcon: css4`
-    width: 12px;
-    height: 12px;
-  `,
-  cdnEmpty: css4`
-    font-size: 12px;
-    color: #9ca3af;
-  `
-};
-function StudioFileList() {
-  const { currentPath, setCurrentPath, selectedItems, toggleSelection, 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__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
-  }
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx4("div", { css: styles4.empty, children: /* @__PURE__ */ jsx4("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);
-  });
-  return /* @__PURE__ */ jsxs4("table", { css: styles4.table, children: [
-    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { children: [
-      /* @__PURE__ */ jsx4("th", { css: [styles4.th, styles4.thCheckbox] }),
-      /* @__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__ */ jsx4("tbody", { css: styles4.tbody, children: sortedItems.map((item) => /* @__PURE__ */ jsx4(
-      ListRow,
-      {
-        item,
-        isSelected: selectedItems.has(item.path),
-        onSelect: () => toggleSelection(item.path),
-        onOpen: () => {
-          if (item.type === "folder") {
-            setCurrentPath(item.path);
-          }
-        }
-      },
-      item.path
-    )) })
-  ] });
-}
-function ListRow({ item, isSelected, onSelect, onOpen }) {
-  const isFolder = item.type === "folder";
-  const handleClick = () => {
-    if (isFolder) {
-      onOpen();
-    } else {
-      onSelect();
-    }
-  };
-  return /* @__PURE__ */ jsxs4("tr", { css: [styles4.row, isSelected && styles4.rowSelected], onClick: handleClick, children: [
-    /* @__PURE__ */ jsx4("td", { css: styles4.td, children: !isFolder && /* @__PURE__ */ jsx4(
-      "input",
-      {
-        type: "checkbox",
-        css: styles4.checkbox,
-        checked: isSelected,
-        onChange: onSelect,
-        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__ */ 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" }) }),
-      "Synced"
-    ] }) : /* @__PURE__ */ jsx4("span", { css: styles4.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 { css as css5 } from "@emotion/react";
-import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
-var styles5 = {
-  panel: css5`
-    width: 320px;
-    border-left: 1px solid #e5e7eb;
-    background-color: #f9fafb;
-    padding: 16px;
-    overflow: auto;
-  `,
-  title: css5`
-    font-size: 14px;
-    font-weight: 500;
-    color: #111827;
-    margin: 0 0 16px 0;
-  `,
-  imageContainer: css5`
-    background-color: white;
-    border-radius: 8px;
-    border: 1px solid #e5e7eb;
-    padding: 8px;
-    margin-bottom: 16px;
-  `,
-  image: css5`
-    width: 100%;
-    height: auto;
-    border-radius: 4px;
-  `,
-  info: css5`
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  `,
-  row: css5`
-    display: flex;
-    justify-content: space-between;
-    font-size: 12px;
-  `,
-  label: css5`
-    color: #6b7280;
-  `,
-  value: css5`
-    color: #111827;
-  `,
-  valueTruncate: css5`
-    max-width: 128px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
-  section: css5`
-    padding-top: 8px;
-    border-top: 1px solid #e5e7eb;
-  `,
-  sectionTitle: css5`
-    font-size: 12px;
-    font-weight: 500;
-    color: #6b7280;
-    margin: 0 0 8px 0;
-  `,
-  cdnStatus: css5`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-    color: #16a34a;
-  `,
-  cdnIcon: css5`
-    width: 16px;
-    height: 16px;
-  `,
-  copyBtn: css5`
-    margin-top: 8px;
-    font-size: 12px;
-    color: #9333ea;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    
-    &:hover {
-      text-decoration: underline;
-    }
-  `,
-  colorSwatch: css5`
-    margin-top: 8px;
-    height: 32px;
-    border-radius: 4px;
-  `,
-  emptyState: css5`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-  `,
-  emptyText: css5`
-    font-size: 14px;
-    color: #9ca3af;
-    margin: 0;
-  `,
-  actions: css5`
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid #e5e7eb;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  `,
-  actionBtn: css5`
-    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: css5`
-    color: #dc2626;
-    
-    &:hover {
-      background-color: #fef2f2;
-    }
-  `
-};
-function StudioPreview() {
-  const { selectedItems, meta, triggerRefresh, clearSelection } = useStudio();
-  const handleDelete = async () => {
-    if (selectedItems.size === 0) return;
-    if (!confirm(`Delete ${selectedItems.size} item(s)?`)) return;
-    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();
-        alert(`Delete failed: ${error.error || "Unknown error"}`);
-      }
-    } catch (error) {
-      console.error("Delete error:", error);
-      alert("Delete failed. Check console for details.");
-    }
-  };
-  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" }) })
-    ] });
-  }
-  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"
-      ] }) })
-    ] });
-  }
-  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",
-            {
-              css: styles5.copyBtn,
-              onClick: () => {
-                navigator.clipboard.writeText(`${imageData.cdn?.baseUrl}${imageData.sizes.full.path}`);
-              },
-              children: "Copy CDN URL"
-            }
-          )
-        ] }),
-        imageData.blurhash && /* @__PURE__ */ jsxs5("div", { css: styles5.section, children: [
-          /* @__PURE__ */ jsx5(InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
-          /* @__PURE__ */ jsx5(
-            "div",
-            {
-              css: styles5.colorSwatch,
-              style: { backgroundColor: imageData.dominantColor },
-              title: `Dominant color: ${imageData.dominantColor}`
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__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 })
-  ] });
-}
-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 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`
-    padding: 8px;
-    background: none;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background-color 0.15s;
-    
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  `,
-  icon: css6`
-    width: 20px;
-    height: 20px;
-    color: #6b7280;
-  `,
-  overlay: css6`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `,
-  backdrop: css6`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.3);
-  `,
-  panel: css6`
-    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: css6`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 24px;
-  `,
-  title: css6`
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-  `,
-  closeBtn: css6`
-    padding: 4px;
-    background: none;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  `,
-  sections: css6`
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-  `,
-  sectionTitle: css6`
-    font-size: 14px;
-    font-weight: 500;
-    color: #111827;
-    margin: 0 0 12px 0;
-  `,
-  description: css6`
-    font-size: 12px;
-    color: #6b7280;
-    margin: 0 0 12px 0;
-  `,
-  code: css6`
-    background-color: #f9fafb;
-    border-radius: 8px;
-    padding: 12px;
-    font-family: monospace;
-    font-size: 12px;
-    color: #4b5563;
-  `,
-  codeLine: css6`
-    margin: 0 0 4px 0;
-    
-    &:last-child {
-      margin: 0;
-    }
-  `,
-  input: css6`
-    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: css6`
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-  `,
-  label: css6`
-    font-size: 12px;
-    color: #6b7280;
-    display: block;
-    margin-bottom: 4px;
-  `,
-  footer: css6`
-    margin-top: 24px;
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-  `,
-  cancelBtn: css6`
-    padding: 8px 16px;
-    font-size: 14px;
-    color: #4b5563;
-    background: none;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  `,
-  saveBtn: css6`
-    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] = useState4(false);
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx6("button", { css: styles6.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs6(
-      "svg",
-      {
-        css: styles6.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__ */ 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" })
-        ]
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ jsx6(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" }) }) })
-      ] }),
-      /* @__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__ */ 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__ */ 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__ */ jsxs6("div", { children: [
-              /* @__PURE__ */ jsx6("label", { css: styles6.label, children: "Medium" }),
-              /* @__PURE__ */ jsx6("input", { css: styles6.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__ */ 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" })
-      ] })
-    ] })
-  ] });
-}
-
-// src/components/StudioUI.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
-var styles7 = {
-  container: css7`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  `,
-  header: css7`
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 24px;
-    border-bottom: 1px solid #e5e7eb;
-  `,
-  title: css7`
-    font-size: 20px;
-    font-weight: 600;
-    color: #111827;
-    margin: 0;
-  `,
-  headerActions: css7`
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  `,
-  closeBtn: css7`
-    padding: 8px;
-    background: none;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background-color 0.15s;
-    
-    &:hover {
-      background-color: #f3f4f6;
-    }
-  `,
-  closeIcon: css7`
-    width: 20px;
-    height: 20px;
-    color: #6b7280;
-  `,
-  content: css7`
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  `,
-  fileBrowser: css7`
-    flex: 1;
-    min-width: 0;
-    overflow: auto;
-    padding: 16px;
-  `
-};
-function StudioUI({ onClose }) {
-  const [currentPath, setCurrentPathInternal] = useState5("public");
-  const [selectedItems, setSelectedItems] = useState5(/* @__PURE__ */ new Set());
-  const [viewMode, setViewMode] = useState5("grid");
-  const [meta, setMeta] = useState5(null);
-  const [isLoading, setIsLoading] = useState5(false);
-  const [refreshKey, setRefreshKey] = useState5(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;
-    });
-  }, []);
-  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,
-    selectAll,
-    clearSelection,
-    viewMode,
-    setViewMode,
-    meta,
-    setMeta,
-    isLoading,
-    setIsLoading,
-    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(
-          "button",
-          {
-            css: styles7.closeBtn,
-            onClick: onClose,
-            "aria-label": "Close Studio",
-            children: /* @__PURE__ */ jsx7(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, {})
-    ] })
-  ] }) });
-}
-function CloseIcon() {
-  return /* @__PURE__ */ jsxs7(
-    "svg",
-    {
-      css: styles7.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__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ]
-    }
-  );
-}
-var StudioUI_default = StudioUI;
-export {
-  StudioUI,
-  StudioUI_default as default
-};
-//# sourceMappingURL=StudioUI-PW3ZGLXL.mjs.map