@gallop.software/studio 0.1.0 → 0.1.2

package/dist/StudioUI-BBXJCQ3O.mjs

@@ -0,0 +1,1382 @@
+"use client";
+
+// src/components/StudioUI.tsx
+import { useEffect as useEffect3, useCallback as useCallback2, useState as useState4 } 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: () => {
+  }
+};
+var StudioContext = createContext(defaultState);
+function useStudio() {
+  return useContext(StudioContext);
+}
+
+// src/components/StudioToolbar.tsx
+import { useCallback } 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 } = useStudio();
+  const handleUpload = useCallback(() => {
+    console.log("Upload clicked");
+  }, []);
+  const handleReprocess = useCallback(() => {
+    console.log("Reprocess clicked", selectedItems);
+  }, [selectedItems]);
+  const handleDelete = useCallback(() => {
+    console.log("Delete clicked", selectedItems);
+  }, [selectedItems]);
+  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__ */ jsxs("div", { css: styles.left, children: [
+      /* @__PURE__ */ jsx(ToolbarButton, { onClick: handleUpload, icon: "upload", label: "Upload" }),
+      /* @__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 } 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 } = useStudio();
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(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]);
+  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";
+  return /* @__PURE__ */ jsxs3("div", { css: [styles3.item, isSelected && styles3.itemSelected], onDoubleClick: onOpen, children: [
+    /* @__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 useState2 } from "react";
+import { css as css4, keyframes as keyframes2 } from "@emotion/react";
+import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
+var 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 } = useStudio();
+  const [items, setItems] = useState2([]);
+  const [loading, setLoading] = useState2(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]);
+  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";
+  return /* @__PURE__ */ jsxs4("tr", { css: [styles4.row, isSelected && styles4.rowSelected], onDoubleClick: onOpen, children: [
+    /* @__PURE__ */ jsx4("td", { css: styles4.td, children: /* @__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;
+  `,
+  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 } = useStudio();
+  if (selectedItems.size !== 1) {
+    return null;
+  }
+  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], 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 useState3 } 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] = useState3(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;
+    overflow: auto;
+    padding: 16px;
+  `
+};
+function StudioUI({ onClose }) {
+  const [currentPath, setCurrentPathInternal] = useState4("public");
+  const [selectedItems, setSelectedItems] = useState4(/* @__PURE__ */ new Set());
+  const [viewMode, setViewMode] = useState4("grid");
+  const [meta, setMeta] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(false);
+  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
+  };
+  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-BBXJCQ3O.mjs.map