@gallop.software/studio 0.1.0

package/dist/StudioUI-4ST2P6R7.mjs

@@ -0,0 +1,991 @@
+"use client";
+
+// src/components/StudioUI.tsx
+import { useEffect as useEffect3, useCallback as useCallback2, useState as useState4 } from "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 { jsx, jsxs } from "react/jsx-runtime";
+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", { className: "flex items-center justify-between px-6 py-3 bg-gray-50 border-b border-gray-200", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", 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", { className: "flex items-center gap-4", children: [
+      hasSelection && /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600", children: [
+        selectedItems.size,
+        " selected",
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: clearSelection,
+            className: "ml-2 text-purple-600 hover:underline",
+            children: "Clear"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-white border border-gray-200 rounded-lg overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setViewMode("grid"),
+            className: `p-2 ${viewMode === "grid" ? "bg-purple-100 text-purple-700" : "text-gray-500 hover:bg-gray-50"}`,
+            "aria-label": "Grid view",
+            children: /* @__PURE__ */ jsx(GridIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setViewMode("list"),
+            className: `p-2 ${viewMode === "list" ? "bg-purple-100 text-purple-700" : "text-gray-500 hover:bg-gray-50"}`,
+            "aria-label": "List view",
+            children: /* @__PURE__ */ jsx(ListIcon, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ToolbarButton({
+  onClick,
+  icon,
+  label,
+  disabled,
+  variant = "default"
+}) {
+  const baseStyles = "flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors";
+  const variantStyles = variant === "danger" ? "text-red-600 hover:bg-red-50 disabled:text-red-300" : "text-gray-700 hover:bg-white disabled:text-gray-400";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick,
+      disabled,
+      className: `${baseStyles} ${variantStyles} ${disabled ? "cursor-not-allowed" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(IconComponent, { icon }),
+        label
+      ]
+    }
+  );
+}
+function IconComponent({ icon }) {
+  const className = "w-4 h-4";
+  switch (icon) {
+    case "upload":
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className,
+          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",
+        {
+          className,
+          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",
+        {
+          className,
+          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",
+        {
+          className,
+          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",
+        {
+          className,
+          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",
+    {
+      className: "w-4 h-4",
+      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",
+    {
+      className: "w-4 h-4",
+      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 { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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", { className: "flex items-center gap-2 px-6 py-2 bg-white border-b border-gray-100", children: [
+    currentPath !== "public" && /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: navigateUp,
+        className: "p-1 hover:bg-gray-100 rounded transition-colors",
+        "aria-label": "Go back",
+        children: /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            className: "w-4 h-4 text-gray-500",
+            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", { className: "flex items-center gap-1 text-sm", children: parts.map((part, index) => /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1", children: [
+      index > 0 && /* @__PURE__ */ jsx2("span", { className: "text-gray-300", children: "/" }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => handleClick(index),
+          className: `px-1 py-0.5 rounded hover:bg-gray-100 transition-colors ${index === parts.length - 1 ? "text-gray-900 font-medium" : "text-gray-500 hover:text-gray-700"}`,
+          children: part
+        }
+      )
+    ] }, index)) })
+  ] });
+}
+
+// src/components/StudioFileGrid.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+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", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx3("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" }) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center h-64 text-gray-500", children: [
+      /* @__PURE__ */ jsx3(
+        "svg",
+        {
+          className: "w-12 h-12 mb-4",
+          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", { children: "No files in this folder" }),
+      /* @__PURE__ */ jsx3("p", { className: "text-sm", 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", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4", 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",
+    {
+      className: `relative group rounded-lg border-2 overflow-hidden cursor-pointer transition-all ${isSelected ? "border-purple-500 bg-purple-50" : "border-transparent hover:border-gray-200 bg-gray-50"}`,
+      onDoubleClick: onOpen,
+      children: [
+        /* @__PURE__ */ jsx3("div", { className: "absolute top-2 left-2 z-10", children: /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "checkbox",
+            checked: isSelected,
+            onChange: onSelect,
+            onClick: (e) => e.stopPropagation(),
+            className: "w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+          }
+        ) }),
+        item.cdnSynced && /* @__PURE__ */ jsx3("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx3("span", { className: "bg-green-100 text-green-700 text-xs px-1.5 py-0.5 rounded-full", children: "CDN" }) }),
+        /* @__PURE__ */ jsx3("div", { className: "aspect-square flex items-center justify-center p-4", children: isFolder ? /* @__PURE__ */ jsx3(FolderIcon, {}) : /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: item.path.replace("public", ""),
+            alt: item.name,
+            className: "max-w-full max-h-full object-contain rounded",
+            loading: "lazy"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs3("div", { className: "px-2 py-1.5 bg-white border-t", children: [
+          /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-700 truncate", title: item.name, children: item.name }),
+          item.size && /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-400", children: formatFileSize(item.size) })
+        ] })
+      ]
+    }
+  );
+}
+function FolderIcon() {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      className: "w-16 h-16 text-yellow-400",
+      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" })
+    }
+  );
+}
+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 { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx4("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" }) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-center justify-center h-64 text-gray-500", 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", { className: "w-full", children: [
+    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs4("tr", { className: "text-left text-xs text-gray-500 uppercase tracking-wider", children: [
+      /* @__PURE__ */ jsx4("th", { className: "w-8 pb-2" }),
+      /* @__PURE__ */ jsx4("th", { className: "pb-2", children: "Name" }),
+      /* @__PURE__ */ jsx4("th", { className: "pb-2 w-24", children: "Size" }),
+      /* @__PURE__ */ jsx4("th", { className: "pb-2 w-32", children: "Dimensions" }),
+      /* @__PURE__ */ jsx4("th", { className: "pb-2 w-24", children: "CDN" })
+    ] }) }),
+    /* @__PURE__ */ jsx4("tbody", { className: "divide-y divide-gray-100", 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",
+    {
+      className: `cursor-pointer transition-colors ${isSelected ? "bg-purple-50" : "hover:bg-gray-50"}`,
+      onDoubleClick: onOpen,
+      children: [
+        /* @__PURE__ */ jsx4("td", { className: "py-2", children: /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "checkbox",
+            checked: isSelected,
+            onChange: onSelect,
+            onClick: (e) => e.stopPropagation(),
+            className: "w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
+          }
+        ) }),
+        /* @__PURE__ */ jsx4("td", { className: "py-2", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          isFolder ? /* @__PURE__ */ jsx4(
+            "svg",
+            {
+              className: "w-5 h-5 text-yellow-400",
+              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",
+            {
+              className: "w-5 h-5 text-gray-400",
+              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", { className: "text-sm text-gray-900", children: item.name })
+        ] }) }),
+        /* @__PURE__ */ jsx4("td", { className: "py-2 text-sm text-gray-500", children: item.size ? formatFileSize2(item.size) : "--" }),
+        /* @__PURE__ */ jsx4("td", { className: "py-2 text-sm text-gray-500", children: item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : "--" }),
+        /* @__PURE__ */ jsx4("td", { className: "py-2", children: item.cdnSynced ? /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1 text-xs text-green-700", children: [
+          /* @__PURE__ */ jsx4("svg", { className: "w-3 h-3", 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", { className: "text-xs text-gray-400", 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 { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+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", { className: "w-80 border-l border-gray-200 bg-gray-50 p-4 overflow-auto", children: [
+    /* @__PURE__ */ jsx5("h3", { className: "text-sm font-medium text-gray-900 mb-4", children: "Preview" }),
+    /* @__PURE__ */ jsx5("div", { className: "bg-white rounded-lg border border-gray-200 p-2 mb-4", children: /* @__PURE__ */ jsx5(
+      "img",
+      {
+        src: selectedPath.replace("public", ""),
+        alt: "Preview",
+        className: "w-full h-auto rounded"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs5("div", { className: "space-y-3", 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", { className: "pt-2 border-t border-gray-200", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium text-gray-500 mb-2", 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", { className: "pt-2 border-t border-gray-200", children: [
+          /* @__PURE__ */ jsx5("p", { className: "text-xs font-medium text-gray-500 mb-2", children: "CDN" }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 text-xs text-green-600", children: [
+            /* @__PURE__ */ jsx5(
+              "svg",
+              {
+                className: "w-4 h-4",
+                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",
+            {
+              onClick: () => {
+                navigator.clipboard.writeText(
+                  `${imageData.cdn?.baseUrl}${imageData.sizes.full.path}`
+                );
+              },
+              className: "mt-2 text-xs text-purple-600 hover:underline",
+              children: "Copy CDN URL"
+            }
+          )
+        ] }),
+        imageData.blurhash && /* @__PURE__ */ jsxs5("div", { className: "pt-2 border-t border-gray-200", children: [
+          /* @__PURE__ */ jsx5(InfoRow, { label: "Blurhash", value: imageData.blurhash, truncate: true }),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "mt-2 h-8 rounded",
+              style: { backgroundColor: imageData.dominantColor },
+              title: `Dominant color: ${imageData.dominantColor}`
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "mt-4 pt-4 border-t border-gray-200 space-y-2", children: [
+      /* @__PURE__ */ jsx5("button", { className: "w-full px-3 py-2 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors", children: "Rename" }),
+      /* @__PURE__ */ jsx5("button", { className: "w-full px-3 py-2 text-sm text-red-600 bg-white border border-gray-200 rounded-lg hover:bg-red-50 transition-colors", children: "Delete" })
+    ] })
+  ] });
+}
+function InfoRow({
+  label,
+  value,
+  truncate
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex justify-between text-xs", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-gray-500", children: label }),
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: `text-gray-900 ${truncate ? "truncate max-w-32" : ""}`,
+        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 { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function StudioSettings() {
+  const [isOpen, setIsOpen] = useState3(false);
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+        "aria-label": "Settings",
+        children: /* @__PURE__ */ jsxs6(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "w-5 h-5 text-gray-500",
+            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", { className: "fixed inset-0 z-[10000] flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 bg-black/30", onClick: onClose }),
+    /* @__PURE__ */ jsxs6("div", { className: "relative bg-white rounded-xl shadow-xl w-full max-w-lg p-6", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between mb-6", children: [
+        /* @__PURE__ */ jsx6("h2", { className: "text-lg font-semibold", children: "Settings" }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-1 hover:bg-gray-100 rounded-lg",
+            children: /* @__PURE__ */ jsx6(
+              "svg",
+              {
+                className: "w-5 h-5 text-gray-500",
+                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", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs6("section", { children: [
+          /* @__PURE__ */ jsx6("h3", { className: "text-sm font-medium text-gray-900 mb-3", children: "Cloudflare R2" }),
+          /* @__PURE__ */ jsx6("p", { className: "text-xs text-gray-500 mb-3", children: "Configure in .env.local file:" }),
+          /* @__PURE__ */ jsxs6("div", { className: "bg-gray-50 rounded-lg p-3 font-mono text-xs text-gray-600 space-y-1", children: [
+            /* @__PURE__ */ jsx6("div", { children: "CLOUDFLARE_R2_ACCOUNT_ID" }),
+            /* @__PURE__ */ jsx6("div", { children: "CLOUDFLARE_R2_ACCESS_KEY_ID" }),
+            /* @__PURE__ */ jsx6("div", { children: "CLOUDFLARE_R2_SECRET_ACCESS_KEY" }),
+            /* @__PURE__ */ jsx6("div", { children: "CLOUDFLARE_R2_BUCKET_NAME" }),
+            /* @__PURE__ */ jsx6("div", { children: "CLOUDFLARE_R2_PUBLIC_URL" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("section", { children: [
+          /* @__PURE__ */ jsx6("h3", { className: "text-sm font-medium text-gray-900 mb-3", children: "Custom CDN URL" }),
+          /* @__PURE__ */ jsx6("p", { className: "text-xs text-gray-500 mb-3", children: "Override the default R2 URL with a custom domain:" }),
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              type: "text",
+              placeholder: "https://cdn.yourdomain.com",
+              className: "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs6("section", { children: [
+          /* @__PURE__ */ jsx6("h3", { className: "text-sm font-medium text-gray-900 mb-3", children: "Thumbnail Sizes" }),
+          /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-3 gap-3", children: [
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsx6("label", { className: "text-xs text-gray-500", children: "Small" }),
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "number",
+                  defaultValue: 300,
+                  className: "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsx6("label", { className: "text-xs text-gray-500", children: "Medium" }),
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "number",
+                  defaultValue: 700,
+                  className: "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { children: [
+              /* @__PURE__ */ jsx6("label", { className: "text-xs text-gray-500", children: "Large" }),
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "number",
+                  defaultValue: 1400,
+                  className: "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "mt-6 flex justify-end gap-3", children: [
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            onClick: onClose,
+            className: "px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx6("button", { className: "px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg", children: "Save Changes" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/StudioUI.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+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", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx7("h1", { className: "text-xl font-semibold text-gray-900", children: "Studio" }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7(StudioSettings, {}),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: onClose,
+            className: "p-2 hover:bg-gray-100 rounded-lg transition-colors",
+            "aria-label": "Close Studio",
+            children: /* @__PURE__ */ jsx7(CloseIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx7(StudioToolbar, {}),
+    /* @__PURE__ */ jsx7(StudioBreadcrumb, {}),
+    /* @__PURE__ */ jsxs7("div", { className: "flex-1 flex overflow-hidden", children: [
+      /* @__PURE__ */ jsx7("div", { className: "flex-1 overflow-auto p-4", children: viewMode === "grid" ? /* @__PURE__ */ jsx7(StudioFileGrid, {}) : /* @__PURE__ */ jsx7(StudioFileList, {}) }),
+      /* @__PURE__ */ jsx7(StudioPreview, {})
+    ] })
+  ] }) });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs7(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "w-5 h-5 text-gray-500",
+      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-4ST2P6R7.mjs.map