@gallop.software/studio 0.1.1 → 0.1.2

package/dist/StudioUI-5I3O5VF7.js

@@ -0,0 +1,1382 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+// src/components/StudioUI.tsx
+var _react = require('react');
+var _react3 = require('@emotion/react');
+
+// src/components/StudioContext.tsx
+
+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: () => {
+  }
+};
+var StudioContext = _react.createContext.call(void 0, defaultState);
+function useStudio() {
+  return _react.useContext.call(void 0, StudioContext);
+}
+
+// src/components/StudioToolbar.tsx
+
+
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var styles = {
+  toolbar: _react3.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 24px;
+    background-color: #f9fafb;
+    border-bottom: 1px solid #e5e7eb;
+  `,
+  left: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  right: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  `,
+  btn: _react3.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: _react3.css`
+    color: #374151;
+    
+    &:hover:not(:disabled) {
+      background-color: white;
+    }
+  `,
+  btnDanger: _react3.css`
+    color: #dc2626;
+    
+    &:hover:not(:disabled) {
+      background-color: #fef2f2;
+    }
+  `,
+  icon: _react3.css`
+    width: 16px;
+    height: 16px;
+  `,
+  selectionCount: _react3.css`
+    font-size: 14px;
+    color: #4b5563;
+  `,
+  clearBtn: _react3.css`
+    margin-left: 8px;
+    color: #9333ea;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  viewToggle: _react3.css`
+    display: flex;
+    align-items: center;
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    overflow: hidden;
+  `,
+  viewBtn: _react3.css`
+    padding: 8px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #6b7280;
+    transition: all 0.15s;
+    
+    &:hover {
+      background-color: #f9fafb;
+    }
+  `,
+  viewBtnActive: _react3.css`
+    background-color: #f3e8ff;
+    color: #7c3aed;
+  `
+};
+function StudioToolbar() {
+  const { selectedItems, viewMode, setViewMode, clearSelection } = useStudio();
+  const handleUpload = _react.useCallback.call(void 0, () => {
+    console.log("Upload clicked");
+  }, []);
+  const handleReprocess = _react.useCallback.call(void 0, () => {
+    console.log("Reprocess clicked", selectedItems);
+  }, [selectedItems]);
+  const handleDelete = _react.useCallback.call(void 0, () => {
+    console.log("Delete clicked", selectedItems);
+  }, [selectedItems]);
+  const handleSyncCdn = _react.useCallback.call(void 0, () => {
+    console.log("Sync CDN clicked", selectedItems);
+  }, [selectedItems]);
+  const handleScan = _react.useCallback.call(void 0, () => {
+    console.log("Scan clicked");
+  }, []);
+  const hasSelection = selectedItems.size > 0;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.toolbar, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.left, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToolbarButton, { onClick: handleUpload, icon: "upload", label: "Upload" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ToolbarButton,
+        {
+          onClick: handleReprocess,
+          icon: "refresh",
+          label: "Reprocess",
+          disabled: !hasSelection
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ToolbarButton,
+        {
+          onClick: handleDelete,
+          icon: "trash",
+          label: "Delete",
+          disabled: !hasSelection,
+          variant: "danger"
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        ToolbarButton,
+        {
+          onClick: handleSyncCdn,
+          icon: "cloud",
+          label: "Sync CDN",
+          disabled: !hasSelection
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToolbarButton, { onClick: handleScan, icon: "scan", label: "Scan" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.right, children: [
+      hasSelection && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles.selectionCount, children: [
+        selectedItems.size,
+        " selected",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles.clearBtn, onClick: clearSelection, children: "Clear" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.viewToggle, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            css: [styles.viewBtn, viewMode === "grid" && styles.viewBtnActive],
+            onClick: () => setViewMode("grid"),
+            "aria-label": "Grid view",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridIcon, {})
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            css: [styles.viewBtn, viewMode === "list" && styles.viewBtnActive],
+            onClick: () => setViewMode("list"),
+            "aria-label": "List view",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListIcon, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ToolbarButton({
+  onClick,
+  icon,
+  label,
+  disabled,
+  variant = "default"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      css: [styles.btn, variant === "danger" ? styles.btnDanger : styles.btnDefault],
+      onClick,
+      disabled,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IconComponent, { icon }),
+        label
+      ]
+    }
+  );
+}
+function IconComponent({ icon }) {
+  switch (icon) {
+    case "upload":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) });
+    case "refresh":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 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__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
+    case "cloud":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" }) });
+    case "scan":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
+    default:
+      return null;
+  }
+}
+function GridIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" }) });
+}
+function ListIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 10h16M4 14h16M4 18h16" }) });
+}
+
+// src/components/StudioBreadcrumb.tsx
+
+
+var styles2 = {
+  container: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 24px;
+    background-color: white;
+    border-bottom: 1px solid #f3f4f6;
+  `,
+  backBtn: _react3.css`
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  backIcon: _react3.css`
+    width: 16px;
+    height: 16px;
+    color: #6b7280;
+  `,
+  nav: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+  `,
+  item: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  `,
+  separator: _react3.css`
+    color: #d1d5db;
+  `,
+  btn: _react3.css`
+    padding: 2px 4px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  btnActive: _react3.css`
+    color: #111827;
+    font-weight: 500;
+  `,
+  btnInactive: _react3.css`
+    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__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles2.container, children: [
+    currentPath !== "public" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles2.backBtn, onClick: navigateUp, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles2.backIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "nav", { css: styles2.nav, children: parts.map((part, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles2.item, children: [
+      index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles2.separator, children: "/" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          css: [styles2.btn, index === parts.length - 1 ? styles2.btnActive : styles2.btnInactive],
+          onClick: () => handleClick(index),
+          children: part
+        }
+      )
+    ] }, index)) })
+  ] });
+}
+
+// src/components/StudioFileGrid.tsx
+
+
+
+var spin = _react3.keyframes`
+  to { transform: rotate(360deg); }
+`;
+var styles3 = {
+  loading: _react3.css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+  `,
+  spinner: _react3.css`
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-bottom-color: #9333ea;
+    animation: ${spin} 1s linear infinite;
+  `,
+  empty: _react3.css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+    color: #6b7280;
+  `,
+  emptyIcon: _react3.css`
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+  `,
+  emptyText: _react3.css`
+    font-size: 14px;
+    margin: 0;
+  `,
+  grid: _react3.css`
+    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: _react3.css`
+    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: _react3.css`
+    border-color: #a855f7;
+    background-color: #faf5ff;
+  `,
+  checkbox: _react3.css`
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    z-index: 10;
+    width: 16px;
+    height: 16px;
+    accent-color: #9333ea;
+  `,
+  cdnBadge: _react3.css`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 10;
+    background-color: #dcfce7;
+    color: #15803d;
+    font-size: 12px;
+    padding: 2px 6px;
+    border-radius: 9999px;
+  `,
+  content: _react3.css`
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+  `,
+  folderIcon: _react3.css`
+    width: 64px;
+    height: 64px;
+    color: #facc15;
+  `,
+  image: _react3.css`
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 4px;
+  `,
+  label: _react3.css`
+    padding: 6px 8px;
+    background-color: white;
+    border-top: 1px solid #e5e7eb;
+  `,
+  name: _react3.css`
+    font-size: 12px;
+    color: #374151;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  `,
+  size: _react3.css`
+    font-size: 12px;
+    color: #9ca3af;
+    margin: 0;
+  `
+};
+function StudioFileGrid() {
+  const { currentPath, setCurrentPath, selectedItems, toggleSelection } = useStudio();
+  const [items, setItems] = _react.useState.call(void 0, []);
+  const [loading, setLoading] = _react.useState.call(void 0, true);
+  _react.useEffect.call(void 0, () => {
+    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]);
+  if (loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.spinner }) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.empty, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.emptyText, children: "No files in this folder" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.grid, children: sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    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";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: [styles3.item, isSelected && styles3.itemSelected], onDoubleClick: onOpen, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        type: "checkbox",
+        css: styles3.checkbox,
+        checked: isSelected,
+        onChange: onSelect,
+        onClick: (e) => e.stopPropagation()
+      }
+    ),
+    item.cdnSynced && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles3.cdnBadge, children: "CDN" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles3.content, children: isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles3.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "img",
+      {
+        css: styles3.image,
+        src: item.path.replace("public", ""),
+        alt: item.name,
+        loading: "lazy"
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles3.label, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles3.name, title: item.name, children: item.name }),
+      item.size && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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
+
+
+
+var spin2 = _react3.keyframes`
+  to { transform: rotate(360deg); }
+`;
+var styles4 = {
+  loading: _react3.css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+  `,
+  spinner: _react3.css`
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    border-bottom-color: #9333ea;
+    animation: ${spin2} 1s linear infinite;
+  `,
+  empty: _react3.css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 256px;
+    color: #6b7280;
+  `,
+  table: _react3.css`
+    width: 100%;
+    border-collapse: collapse;
+  `,
+  th: _react3.css`
+    text-align: left;
+    font-size: 12px;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding-bottom: 8px;
+    font-weight: normal;
+  `,
+  thCheckbox: _react3.css`
+    width: 32px;
+  `,
+  thSize: _react3.css`
+    width: 96px;
+  `,
+  thDimensions: _react3.css`
+    width: 128px;
+  `,
+  thCdn: _react3.css`
+    width: 96px;
+  `,
+  tbody: _react3.css`
+    border-top: 1px solid #f3f4f6;
+  `,
+  row: _react3.css`
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f9fafb;
+    }
+  `,
+  rowSelected: _react3.css`
+    background-color: #faf5ff;
+  `,
+  td: _react3.css`
+    padding: 8px 0;
+    border-bottom: 1px solid #f3f4f6;
+  `,
+  checkbox: _react3.css`
+    width: 16px;
+    height: 16px;
+    accent-color: #9333ea;
+  `,
+  nameCell: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  folderIcon: _react3.css`
+    width: 20px;
+    height: 20px;
+    color: #facc15;
+  `,
+  fileIcon: _react3.css`
+    width: 20px;
+    height: 20px;
+    color: #9ca3af;
+  `,
+  name: _react3.css`
+    font-size: 14px;
+    color: #111827;
+  `,
+  meta: _react3.css`
+    font-size: 14px;
+    color: #6b7280;
+  `,
+  cdnBadge: _react3.css`
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: #15803d;
+  `,
+  cdnIcon: _react3.css`
+    width: 12px;
+    height: 12px;
+  `,
+  cdnEmpty: _react3.css`
+    font-size: 12px;
+    color: #9ca3af;
+  `
+};
+function StudioFileList() {
+  const { currentPath, setCurrentPath, selectedItems, toggleSelection } = useStudio();
+  const [items, setItems] = _react.useState.call(void 0, []);
+  const [loading, setLoading] = _react.useState.call(void 0, true);
+  _react.useEffect.call(void 0, () => {
+    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]);
+  if (loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.spinner }) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.empty, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "table", { css: styles4.table, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thCheckbox] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: styles4.th, children: "Name" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thSize], children: "Size" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles4.th, styles4.thCdn], children: "CDN" })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { css: styles4.tbody, children: sortedItems.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { css: [styles4.row, isSelected && styles4.rowSelected], onDoubleClick: onOpen, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        type: "checkbox",
+        css: styles4.checkbox,
+        checked: isSelected,
+        onChange: onSelect,
+        onClick: (e) => e.stopPropagation()
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.nameCell, children: [
+      isFolder ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.folderIcon, fill: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.fileIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles4.name, children: item.name })
+    ] }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: item.size ? formatFileSize2(item.size) : "--" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: [styles4.td, styles4.meta], children: item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { css: styles4.td, children: item.cdnSynced ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { css: styles4.cdnBadge, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
+      "Synced"
+    ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: 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
+
+
+var styles5 = {
+  panel: _react3.css`
+    width: 320px;
+    border-left: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+    padding: 16px;
+    overflow: auto;
+  `,
+  title: _react3.css`
+    font-size: 14px;
+    font-weight: 500;
+    color: #111827;
+    margin: 0 0 16px 0;
+  `,
+  imageContainer: _react3.css`
+    background-color: white;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+    padding: 8px;
+    margin-bottom: 16px;
+  `,
+  image: _react3.css`
+    width: 100%;
+    height: auto;
+    border-radius: 4px;
+  `,
+  info: _react3.css`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  `,
+  row: _react3.css`
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+  `,
+  label: _react3.css`
+    color: #6b7280;
+  `,
+  value: _react3.css`
+    color: #111827;
+  `,
+  valueTruncate: _react3.css`
+    max-width: 128px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `,
+  section: _react3.css`
+    padding-top: 8px;
+    border-top: 1px solid #e5e7eb;
+  `,
+  sectionTitle: _react3.css`
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+    margin: 0 0 8px 0;
+  `,
+  cdnStatus: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #16a34a;
+  `,
+  cdnIcon: _react3.css`
+    width: 16px;
+    height: 16px;
+  `,
+  copyBtn: _react3.css`
+    margin-top: 8px;
+    font-size: 12px;
+    color: #9333ea;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
+  colorSwatch: _react3.css`
+    margin-top: 8px;
+    height: 32px;
+    border-radius: 4px;
+  `,
+  actions: _react3.css`
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+  actionBtn: _react3.css`
+    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: _react3.css`
+    color: #dc2626;
+    
+    &:hover {
+      background-color: #fef2f2;
+    }
+  `
+};
+function StudioPreview() {
+  const { selectedItems, meta } = useStudio();
+  if (selectedItems.size !== 1) {
+    return null;
+  }
+  const selectedPath = Array.from(selectedItems)[0];
+  const imageKey = selectedPath.replace(/^public\/images\//, "").replace(/^public\/originals\//, "");
+  const imageData = _optionalChain([meta, 'optionalAccess', _ => _.images, 'optionalAccess', _2 => _2[imageKey]]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.panel, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles5.title, children: "Preview" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.imageContainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "img",
+      {
+        css: styles5.image,
+        src: selectedPath.replace("public", ""),
+        alt: "Preview"
+      }
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.info, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoRow, { label: "Filename", value: selectedPath.split("/").pop() || "" }),
+      imageData && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          InfoRow,
+          {
+            label: "Original",
+            value: `${imageData.original.width}x${imageData.original.height}`
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          InfoRow,
+          {
+            label: "File size",
+            value: formatFileSize3(imageData.original.fileSize)
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.section, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.sectionTitle, children: "Generated sizes" }),
+          Object.entries(imageData.sizes).map(([size, data]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoRow, { label: size, value: `${data.width}x${data.height}` }, size))
+        ] }),
+        _optionalChain([imageData, 'access', _3 => _3.cdn, 'optionalAccess', _4 => _4.synced]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.section, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles5.sectionTitle, children: "CDN" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.cdnStatus, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles5.cdnIcon, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }),
+            "Synced to CDN"
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              css: styles5.copyBtn,
+              onClick: () => {
+                navigator.clipboard.writeText(`${_optionalChain([imageData, 'access', _5 => _5.cdn, 'optionalAccess', _6 => _6.baseUrl])}${imageData.sizes.full.path}`);
+              },
+              children: "Copy CDN URL"
+            }
+          )
+        ] }),
+        imageData.blurhash && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.section, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              css: styles5.colorSwatch,
+              style: { backgroundColor: imageData.dominantColor },
+              title: `Dominant color: ${imageData.dominantColor}`
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.actions, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles5.actionBtn, children: "Rename" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: [styles5.actionBtn, styles5.actionBtnDanger], children: "Delete" })
+    ] })
+  ] });
+}
+function InfoRow({ label, value, truncate }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles5.row, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles5.label, children: label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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
+
+
+
+var styles6 = {
+  btn: _react3.css`
+    padding: 8px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  icon: _react3.css`
+    width: 20px;
+    height: 20px;
+    color: #6b7280;
+  `,
+  overlay: _react3.css`
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+  backdrop: _react3.css`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+  `,
+  panel: _react3.css`
+    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: _react3.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  `,
+  title: _react3.css`
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+  `,
+  closeBtn: _react3.css`
+    padding: 4px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  sections: _react3.css`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  `,
+  sectionTitle: _react3.css`
+    font-size: 14px;
+    font-weight: 500;
+    color: #111827;
+    margin: 0 0 12px 0;
+  `,
+  description: _react3.css`
+    font-size: 12px;
+    color: #6b7280;
+    margin: 0 0 12px 0;
+  `,
+  code: _react3.css`
+    background-color: #f9fafb;
+    border-radius: 8px;
+    padding: 12px;
+    font-family: monospace;
+    font-size: 12px;
+    color: #4b5563;
+  `,
+  codeLine: _react3.css`
+    margin: 0 0 4px 0;
+    
+    &:last-child {
+      margin: 0;
+    }
+  `,
+  input: _react3.css`
+    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: _react3.css`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  `,
+  label: _react3.css`
+    font-size: 12px;
+    color: #6b7280;
+    display: block;
+    margin-bottom: 4px;
+  `,
+  footer: _react3.css`
+    margin-top: 24px;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  `,
+  cancelBtn: _react3.css`
+    padding: 8px 16px;
+    font-size: 14px;
+    color: #4b5563;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  saveBtn: _react3.css`
+    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] = _react.useState.call(void 0, false);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "12", cy: "12", r: "3" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, SettingsPanel, { onClose: () => setIsOpen(false) })
+  ] });
+}
+function SettingsPanel({ onClose }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.overlay, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles6.backdrop, onClick: onClose }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.panel, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.header, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { css: styles6.title, children: "Settings" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.closeBtn, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles6.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.sections, children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Cloudflare R2" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.description, children: "Configure in .env.local file:" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.code, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.codeLine, children: "CLOUDFLARE_R2_PUBLIC_URL" })
+          ] })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Custom CDN URL" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles6.description, children: "Override the default R2 URL with a custom domain:" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "text", placeholder: "https://cdn.yourdomain.com" })
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles6.sectionTitle, children: "Thumbnail Sizes" }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.grid, children: [
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles6.label, children: "Small" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "number", defaultValue: 300 })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles6.label, children: "Medium" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "number", defaultValue: 700 })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { css: styles6.label, children: "Large" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { css: styles6.input, type: "number", defaultValue: 1400 })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles6.footer, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.cancelBtn, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles6.saveBtn, children: "Save Changes" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/StudioUI.tsx
+
+var styles7 = {
+  container: _react3.css`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  `,
+  header: _react3.css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid #e5e7eb;
+  `,
+  title: _react3.css`
+    font-size: 20px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  `,
+  headerActions: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  closeBtn: _react3.css`
+    padding: 8px;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    
+    &:hover {
+      background-color: #f3f4f6;
+    }
+  `,
+  closeIcon: _react3.css`
+    width: 20px;
+    height: 20px;
+    color: #6b7280;
+  `,
+  content: _react3.css`
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+  `,
+  fileBrowser: _react3.css`
+    flex: 1;
+    overflow: auto;
+    padding: 16px;
+  `
+};
+function StudioUI({ onClose }) {
+  const [currentPath, setCurrentPathInternal] = _react.useState.call(void 0, "public");
+  const [selectedItems, setSelectedItems] = _react.useState.call(void 0, /* @__PURE__ */ new Set());
+  const [viewMode, setViewMode] = _react.useState.call(void 0, "grid");
+  const [meta, setMeta] = _react.useState.call(void 0, null);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
+  const navigateUp = _react.useCallback.call(void 0, () => {
+    if (currentPath === "public") return;
+    const parts = currentPath.split("/");
+    parts.pop();
+    setCurrentPathInternal(parts.join("/") || "public");
+    setSelectedItems(/* @__PURE__ */ new Set());
+  }, [currentPath]);
+  const setCurrentPath = _react.useCallback.call(void 0, (path) => {
+    setCurrentPathInternal(path);
+    setSelectedItems(/* @__PURE__ */ new Set());
+  }, []);
+  const toggleSelection = _react.useCallback.call(void 0, (path) => {
+    setSelectedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const selectAll = _react.useCallback.call(void 0, (items) => {
+    setSelectedItems(new Set(items.map((item) => item.path)));
+  }, []);
+  const clearSelection = _react.useCallback.call(void 0, () => {
+    setSelectedItems(/* @__PURE__ */ new Set());
+  }, []);
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  _react.useEffect.call(void 0, () => {
+    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
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.container, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles7.title, children: "Studio" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.headerActions, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioSettings, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            css: styles7.closeBtn,
+            onClick: onClose,
+            "aria-label": "Close Studio",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioToolbar, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioBreadcrumb, {}),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles7.content, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles7.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioPreview, {})
+    ] })
+  ] }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "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__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+var StudioUI_default = StudioUI;
+
+
+
+exports.StudioUI = StudioUI; exports.default = StudioUI_default;
+//# sourceMappingURL=StudioUI-5I3O5VF7.js.map