@gallop.software/studio 0.1.80 → 0.1.82

package/dist/{StudioUI-VPNL5NMI.mjs → StudioUI-VJVOSOPD.mjs}

@@ -7,8 +7,8 @@ import {
 } from "./chunk-HXE6XCG2.mjs";
 
 // src/components/StudioUI.tsx
-import { useEffect as useEffect4, useCallback as useCallback2, useState as useState7 } from "react";
-import { css as css8 } from "@emotion/react";
+import { useEffect as useEffect3, useCallback as useCallback3, useState as useState8 } from "react";
+import { css as css9 } from "@emotion/react";
 
 // src/components/StudioContext.tsx
 import { createContext, useContext } from "react";
@@ -52,6 +52,11 @@ var defaultState = {
   },
   searchQuery: "",
   setSearchQuery: () => {
+  },
+  error: null,
+  showError: () => {
+  },
+  clearError: () => {
   }
 };
 var StudioContext = createContext(defaultState);
@@ -891,6 +896,7 @@ function StudioToolbar() {
   const [imagesToProcess, setImagesToProcess] = useState2([]);
   const [alertMessage, setAlertMessage] = useState2(null);
   const [showNewFolderModal, setShowNewFolderModal] = useState2(false);
+  const [showRenameFolderModal, setShowRenameFolderModal] = useState2(false);
   const [showMoveModal, setShowMoveModal] = useState2(false);
   const isInImagesFolder = currentPath === "public/images" || currentPath.startsWith("public/images/");
   const handleUpload = useCallback(() => {
@@ -947,13 +953,13 @@ function StudioToolbar() {
   const handleProcessImages = useCallback(async () => {
     const hasSelection2 = selectedItems.size > 0;
     if (hasSelection2) {
-      const selectedPaths = Array.from(selectedItems);
+      const selectedPaths2 = Array.from(selectedItems);
       const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "ico", "bmp", "tiff", "tif"];
-      const selectedImagePaths = selectedPaths.filter((p) => {
+      const selectedImagePaths = selectedPaths2.filter((p) => {
         const ext = p.split(".").pop()?.toLowerCase() || "";
         return imageExtensions.includes(ext);
       });
-      const selectedFolders = selectedPaths.filter((p) => !p.includes(".") || p.endsWith("/"));
+      const selectedFolders = selectedPaths2.filter((p) => !p.includes(".") || p.endsWith("/"));
       if (selectedFolders.length > 0) {
         try {
           const response = await fetch(`/api/studio/folder-images?folders=${encodeURIComponent(selectedFolders.join(","))}`);
@@ -1263,6 +1269,27 @@ function StudioToolbar() {
     }
   }, [setSearchQuery]);
   const hasSelection = selectedItems.size > 0;
+  const selectedPaths = Array.from(selectedItems);
+  const singleFolderSelected = selectedPaths.length === 1 && !selectedPaths[0].includes(".");
+  const selectedFolderPath = singleFolderSelected ? selectedPaths[0] : null;
+  const selectedFolderName = selectedFolderPath ? selectedFolderPath.split("/").pop() || "" : "";
+  const handleRenameFolder = useCallback(async (newName) => {
+    if (!selectedFolderPath) return;
+    setShowRenameFolderModal(false);
+    try {
+      const response = await fetch("/api/studio/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ oldPath: selectedFolderPath, newName })
+      });
+      if (response.ok) {
+        clearSelection();
+        triggerRefresh();
+      }
+    } catch (error) {
+      console.error("Failed to rename folder:", error);
+    }
+  }, [selectedFolderPath, clearSelection, triggerRefresh]);
   if (focusedItem) {
     return null;
   }
@@ -1328,6 +1355,18 @@ function StudioToolbar() {
         onCancel: () => setShowMoveModal(false)
       }
     ),
+    showRenameFolderModal && selectedFolderPath && /* @__PURE__ */ jsx3(
+      InputModal,
+      {
+        title: "Rename Folder",
+        message: "Enter a new name for the folder:",
+        placeholder: selectedFolderName,
+        defaultValue: selectedFolderName,
+        confirmLabel: "Rename",
+        onConfirm: handleRenameFolder,
+        onCancel: () => setShowRenameFolderModal(false)
+      }
+    ),
     alertMessage && /* @__PURE__ */ jsx3(
       AlertModal,
       {
@@ -1365,12 +1404,12 @@ function StudioToolbar() {
           "button",
           {
             css: styles3.btn,
-            onClick: () => setShowNewFolderModal(true),
-            disabled: isInImagesFolder,
-            title: isInImagesFolder ? "Cannot create folders in protected images folder" : void 0,
+            onClick: () => singleFolderSelected ? setShowRenameFolderModal(true) : setShowNewFolderModal(true),
+            disabled: isInImagesFolder && !singleFolderSelected,
+            title: isInImagesFolder && !singleFolderSelected ? "Cannot create folders in protected images folder" : void 0,
             children: [
-              /* @__PURE__ */ jsx3(FolderPlusIcon, {}),
-              "New Folder"
+              singleFolderSelected ? /* @__PURE__ */ jsx3(RenameIcon, {}) : /* @__PURE__ */ jsx3(FolderPlusIcon, {}),
+              singleFolderSelected ? "Rename Folder" : "New Folder"
             ]
           }
         ),
@@ -1497,6 +1536,9 @@ function TrashIcon() {
 function FolderPlusIcon() {
   return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" }) });
 }
+function RenameIcon() {
+  return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) });
+}
 function MoveIcon() {
   return /* @__PURE__ */ jsx3("svg", { css: styles3.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" }) });
 }
@@ -1514,8 +1556,196 @@ function ImageStackIcon() {
 }
 
 // src/components/StudioFileGrid.tsx
-import { useEffect as useEffect2, useState as useState3, useRef as useRef2 } from "react";
+import { useState as useState4 } from "react";
 import { css as css4, keyframes as keyframes4 } from "@emotion/react";
+
+// src/hooks/useFileList.ts
+import { useEffect as useEffect2, useState as useState3, useRef as useRef2, useCallback as useCallback2 } from "react";
+
+// src/lib/api.ts
+var StudioApiClient = class {
+  async get(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.error || `Request failed: ${response.status}`);
+    }
+    return response.json();
+  }
+  async post(url, body) {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: body ? { "Content-Type": "application/json" } : void 0,
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.error || `Request failed: ${response.status}`);
+    }
+    return response.json();
+  }
+  // List handlers
+  async list(path = "public") {
+    return this.get(`/api/studio/list?path=${encodeURIComponent(path)}`);
+  }
+  async search(query) {
+    return this.get(`/api/studio/search?q=${encodeURIComponent(query)}`);
+  }
+  async listFolders() {
+    return this.get("/api/studio/list-folders");
+  }
+  async countImages() {
+    return this.get("/api/studio/count-images");
+  }
+  async folderImages(folders) {
+    return this.get(`/api/studio/folder-images?folders=${encodeURIComponent(folders.join(","))}`);
+  }
+  // File handlers
+  async upload(file, targetPath = "public") {
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("path", targetPath);
+    const response = await fetch("/api/studio/upload", {
+      method: "POST",
+      body: formData
+    });
+    if (!response.ok) {
+      const data = await response.json().catch(() => ({}));
+      throw new Error(data.error || `Upload failed: ${response.status}`);
+    }
+    return response.json();
+  }
+  async delete(paths) {
+    return this.post("/api/studio/delete", { paths });
+  }
+  async createFolder(parentPath, name) {
+    return this.post("/api/studio/create-folder", { parentPath, name });
+  }
+  async rename(oldPath, newName) {
+    return this.post("/api/studio/rename", { oldPath, newName });
+  }
+  async move(paths, destination) {
+    return this.post("/api/studio/move", { paths, destination });
+  }
+  // Image handlers
+  async sync(imageKeys) {
+    return this.post("/api/studio/sync", { imageKeys });
+  }
+  async reprocess(imageKeys) {
+    return this.post("/api/studio/reprocess", { imageKeys });
+  }
+  // Process all returns a stream, handle separately
+  processAllStream() {
+    return new EventSource("/api/studio/process-all");
+  }
+};
+var studioApi = new StudioApiClient();
+
+// src/hooks/useFileList.ts
+function useFileList() {
+  const {
+    currentPath,
+    setCurrentPath,
+    navigateUp,
+    selectedItems,
+    toggleSelection,
+    selectRange,
+    lastSelectedPath,
+    selectAll,
+    clearSelection,
+    refreshKey,
+    setFocusedItem,
+    triggerRefresh,
+    searchQuery,
+    showError
+  } = useStudio();
+  const [items, setItems] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const isInitialLoad = useRef2(true);
+  const lastPath = useRef2(currentPath);
+  useEffect2(() => {
+    async function loadItems() {
+      const isPathChange = lastPath.current !== currentPath;
+      if (isInitialLoad.current || isPathChange) {
+        setLoading(true);
+      }
+      lastPath.current = currentPath;
+      try {
+        const data = searchQuery && searchQuery.length >= 2 ? await studioApi.search(searchQuery) : await studioApi.list(currentPath);
+        setItems(data.items || []);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to load items";
+        showError("Load Error", message);
+        setItems([]);
+      }
+      setLoading(false);
+      isInitialLoad.current = false;
+    }
+    loadItems();
+  }, [currentPath, refreshKey, searchQuery, showError]);
+  const isAtRoot = currentPath === "public";
+  const isSearching = searchQuery && searchQuery.length >= 2;
+  const sortedItems = [...items].sort((a, b) => {
+    if (a.type === "folder" && b.type !== "folder") return -1;
+    if (a.type !== "folder" && b.type === "folder") return 1;
+    return a.name.localeCompare(b.name);
+  });
+  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
+  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
+  const handleItemClick = useCallback2((item, e) => {
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  }, [lastSelectedPath, selectRange, sortedItems, toggleSelection]);
+  const handleOpen = useCallback2((item) => {
+    if (item.type === "folder") {
+      setCurrentPath(item.path);
+    } else {
+      setFocusedItem(item);
+    }
+  }, [setCurrentPath, setFocusedItem]);
+  const handleGenerateThumbnail = useCallback2(async (item) => {
+    try {
+      const imageKey = "/" + item.path.replace(/^public\//, "");
+      await studioApi.reprocess([imageKey]);
+      triggerRefresh();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to generate thumbnail";
+      showError("Processing Error", message);
+    }
+  }, [triggerRefresh, showError]);
+  const handleSelectAll = useCallback2(() => {
+    if (allItemsSelected) {
+      clearSelection();
+    } else {
+      selectAll(sortedItems);
+    }
+  }, [allItemsSelected, clearSelection, selectAll, sortedItems]);
+  return {
+    // State
+    items,
+    loading,
+    sortedItems,
+    // Computed
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    // Context values
+    currentPath,
+    selectedItems,
+    navigateUp,
+    // Handlers
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll
+  };
+}
+
+// src/components/StudioFileGrid.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "@emotion/react/jsx-runtime";
 var spin2 = keyframes4`
   to { transform: rotate(360deg); }
@@ -1582,10 +1812,6 @@ var styles4 = {
     &:hover {
       border-color: #d0d5dd;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
-      
-      button[title="Rename"] {
-        opacity: 1;
-      }
     }
   `,
   itemSelected: css4`
@@ -1745,35 +1971,6 @@ var styles4 = {
       color: ${colors.text};
     }
   `,
-  nameRow: css4`
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  `,
-  renameBtn: css4`
-    flex-shrink: 0;
-    height: 20px;
-    width: 20px;
-    color: ${colors.textMuted};
-    background: transparent;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.15s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    
-    &:hover {
-      color: ${colors.text};
-    }
-  `,
-  renameIcon: css4`
-    width: 14px;
-    height: 14px;
-  `,
   copyIcon: css4`
     width: 18px;
     height: 18px;
@@ -1871,116 +2068,31 @@ var styles4 = {
   `
 };
 function StudioFileGrid() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
-  const [items, setItems] = useState3([]);
-  const [loading, setLoading] = useState3(true);
-  const [renameItem, setRenameItem] = useState3(null);
-  const isInitialLoad = useRef2(true);
-  const lastPath = useRef2(currentPath);
-  useEffect2(() => {
-    async function loadItems() {
-      const isPathChange = lastPath.current !== currentPath;
-      if (isInitialLoad.current || isPathChange) {
-        setLoading(true);
-      }
-      lastPath.current = currentPath;
-      try {
-        const url = searchQuery && searchQuery.length >= 2 ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}` : `/api/studio/list?path=${encodeURIComponent(currentPath)}`;
-        const response = await fetch(url);
-        if (response.ok) {
-          const data = await response.json();
-          setItems(data.items || []);
-        }
-      } catch (error) {
-        console.error("Failed to load items:", error);
-      }
-      setLoading(false);
-      isInitialLoad.current = false;
-    }
-    loadItems();
-  }, [currentPath, refreshKey, searchQuery]);
+  const {
+    loading,
+    sortedItems,
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    selectedItems,
+    navigateUp,
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll
+  } = useFileList();
   if (loading) {
     return /* @__PURE__ */ jsx4("div", { css: styles4.loading, children: /* @__PURE__ */ jsx4("div", { css: styles4.spinner }) });
   }
-  const isAtRoot = currentPath === "public";
-  if (items.length === 0 && isAtRoot) {
+  if (sortedItems.length === 0 && isAtRoot) {
     return /* @__PURE__ */ jsxs4("div", { css: styles4.empty, children: [
       /* @__PURE__ */ jsx4("svg", { css: styles4.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
       /* @__PURE__ */ jsx4("p", { css: styles4.emptyText, children: "No files in this folder" }),
       /* @__PURE__ */ jsx4("p", { css: styles4.emptyText, children: "Upload images to get started" })
     ] });
   }
-  const isSearching = searchQuery && searchQuery.length >= 2;
-  const sortedItems = [...items].sort((a, b) => {
-    if (a.type === "folder" && b.type !== "folder") return -1;
-    if (a.type !== "folder" && b.type === "folder") return 1;
-    return a.name.localeCompare(b.name);
-  });
-  const handleItemClick = (item, e) => {
-    if (e.shiftKey && lastSelectedPath) {
-      selectRange(lastSelectedPath, item.path, sortedItems);
-    } else {
-      toggleSelection(item.path);
-    }
-  };
-  const handleOpen = (item) => {
-    if (item.type === "folder") {
-      setCurrentPath(item.path);
-    } else {
-      setFocusedItem(item);
-    }
-  };
-  const handleGenerateThumbnail = async (item) => {
-    try {
-      const imageKey = item.path.replace(/^public\//, "");
-      await fetch("/api/studio/reprocess", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ imageKeys: [imageKey] })
-      });
-      triggerRefresh();
-    } catch (error) {
-      console.error("Failed to generate thumbnail:", error);
-    }
-  };
-  const handleRename = async (newName) => {
-    if (!renameItem) return;
-    setRenameItem(null);
-    try {
-      const response = await fetch("/api/studio/rename", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ oldPath: renameItem.path, newName })
-      });
-      if (response.ok) {
-        triggerRefresh();
-      }
-    } catch (error) {
-      console.error("Failed to rename:", error);
-    }
-  };
-  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
-  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
-  const handleSelectAll = () => {
-    if (allItemsSelected) {
-      clearSelection();
-    } else {
-      selectAll(sortedItems);
-    }
-  };
   return /* @__PURE__ */ jsxs4("div", { children: [
-    renameItem && /* @__PURE__ */ jsx4(
-      InputModal,
-      {
-        title: renameItem.type === "folder" ? "Rename Folder" : "Rename File",
-        message: "Enter a new name:",
-        placeholder: renameItem.name,
-        defaultValue: renameItem.name,
-        confirmLabel: "Rename",
-        onConfirm: handleRename,
-        onCancel: () => setRenameItem(null)
-      }
-    ),
     sortedItems.length > 0 && /* @__PURE__ */ jsx4("div", { css: styles4.selectAllRow, children: /* @__PURE__ */ jsxs4("label", { css: styles4.selectAllLabel, children: [
       /* @__PURE__ */ jsx4(
         "input",
@@ -2020,16 +2132,15 @@ function StudioFileGrid() {
           isSelected: selectedItems.has(item.path),
           onClick: (e) => handleItemClick(item, e),
           onOpen: () => handleOpen(item),
-          onGenerateThumbnail: () => handleGenerateThumbnail(item),
-          onRename: () => setRenameItem(item)
+          onGenerateThumbnail: () => handleGenerateThumbnail(item)
         },
         item.path
       ))
     ] })
   ] });
 }
-function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
-  const [showCopied, setShowCopied] = useState3(false);
+function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
+  const [showCopied, setShowCopied] = useState4(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
   const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
@@ -2115,21 +2226,7 @@ function GridItem({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRe
           ) : /* @__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: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) })
         ] }),
         /* @__PURE__ */ jsx4("div", { css: styles4.label, children: /* @__PURE__ */ jsx4("div", { css: styles4.labelRow, children: /* @__PURE__ */ jsxs4("div", { css: styles4.labelText, children: [
-          /* @__PURE__ */ jsxs4("div", { css: styles4.nameRow, children: [
-            /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: truncateMiddle(item.name) }),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                css: styles4.renameBtn,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRename();
-                },
-                title: "Rename",
-                children: /* @__PURE__ */ jsx4("svg", { css: styles4.renameIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx4("p", { css: styles4.name, title: item.name, children: truncateMiddle(item.name) }),
           isFolder ? /* @__PURE__ */ jsxs4("p", { css: styles4.size, children: [
             item.fileCount !== void 0 ? `${item.fileCount} files` : "",
             item.fileCount !== void 0 && item.totalSize !== void 0 ? " \xB7 " : "",
@@ -2160,7 +2257,7 @@ function truncateMiddle(str, maxLength = 24) {
 }
 
 // src/components/StudioFileList.tsx
-import { useEffect as useEffect3, useState as useState4, useRef as useRef3 } from "react";
+import { useState as useState5 } from "react";
 import { css as css5, keyframes as keyframes5 } from "@emotion/react";
 import { jsx as jsx5, jsxs as jsxs5 } from "@emotion/react/jsx-runtime";
 var spin3 = keyframes5`
@@ -2472,160 +2569,72 @@ var styles5 = {
   `
 };
 function StudioFileList() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
-  const [items, setItems] = useState4([]);
-  const [loading, setLoading] = useState4(true);
-  const [renameItem, setRenameItem] = useState4(null);
-  const isInitialLoad = useRef3(true);
-  const lastPath = useRef3(currentPath);
-  useEffect3(() => {
-    async function loadItems() {
-      const isPathChange = lastPath.current !== currentPath;
-      if (isInitialLoad.current || isPathChange) {
-        setLoading(true);
-      }
-      lastPath.current = currentPath;
-      try {
-        const url = searchQuery && searchQuery.length >= 2 ? `/api/studio/search?q=${encodeURIComponent(searchQuery)}` : `/api/studio/list?path=${encodeURIComponent(currentPath)}`;
-        const response = await fetch(url);
-        if (response.ok) {
-          const data = await response.json();
-          setItems(data.items || []);
-        }
-      } catch (error) {
-        console.error("Failed to load items:", error);
-      }
-      setLoading(false);
-      isInitialLoad.current = false;
-    }
-    loadItems();
-  }, [currentPath, refreshKey, searchQuery]);
+  const {
+    loading,
+    sortedItems,
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    selectedItems,
+    navigateUp,
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll
+  } = useFileList();
   if (loading) {
     return /* @__PURE__ */ jsx5("div", { css: styles5.loading, children: /* @__PURE__ */ jsx5("div", { css: styles5.spinner }) });
   }
-  const isAtRoot = currentPath === "public";
-  if (items.length === 0 && isAtRoot) {
+  if (sortedItems.length === 0 && isAtRoot) {
     return /* @__PURE__ */ jsx5("div", { css: styles5.empty, children: /* @__PURE__ */ jsx5("p", { children: "No files in this folder" }) });
   }
-  const isSearching = searchQuery && searchQuery.length >= 2;
-  const sortedItems = [...items].sort((a, b) => {
-    if (a.type === "folder" && b.type !== "folder") return -1;
-    if (a.type !== "folder" && b.type === "folder") return 1;
-    return a.name.localeCompare(b.name);
-  });
-  const handleItemClick = (item, e) => {
-    if (e.shiftKey && lastSelectedPath) {
-      selectRange(lastSelectedPath, item.path, sortedItems);
-    } else {
-      toggleSelection(item.path);
-    }
-  };
-  const handleOpen = (item) => {
-    if (item.type === "folder") {
-      setCurrentPath(item.path);
-    } else {
-      setFocusedItem(item);
-    }
-  };
-  const handleGenerateThumbnail = async (item) => {
-    try {
-      const imageKey = item.path.replace(/^public\//, "");
-      await fetch("/api/studio/reprocess", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ imageKeys: [imageKey] })
-      });
-      triggerRefresh();
-    } catch (error) {
-      console.error("Failed to generate thumbnail:", error);
-    }
-  };
-  const handleRename = async (newName) => {
-    if (!renameItem) return;
-    setRenameItem(null);
-    try {
-      const response = await fetch("/api/studio/rename", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ oldPath: renameItem.path, newName })
-      });
-      if (response.ok) {
-        triggerRefresh();
-      }
-    } catch (error) {
-      console.error("Failed to rename:", error);
-    }
-  };
-  const allItemsSelected = sortedItems.length > 0 && sortedItems.every((item) => selectedItems.has(item.path));
-  const someItemsSelected = sortedItems.some((item) => selectedItems.has(item.path));
-  const handleSelectAll = () => {
-    if (allItemsSelected) {
-      clearSelection();
-    } else {
-      selectAll(sortedItems);
-    }
-  };
-  return /* @__PURE__ */ jsxs5("div", { css: styles5.tableWrapper, children: [
-    renameItem && /* @__PURE__ */ jsx5(
-      InputModal,
-      {
-        title: renameItem.type === "folder" ? "Rename Folder" : "Rename File",
-        message: "Enter a new name:",
-        placeholder: renameItem.name,
-        defaultValue: renameItem.name,
-        confirmLabel: "Rename",
-        onConfirm: handleRename,
-        onCancel: () => setRenameItem(null)
-      }
-    ),
-    /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
-      /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
-          "input",
-          {
-            type: "checkbox",
-            css: styles5.checkbox,
-            checked: allItemsSelected,
-            ref: (el) => {
-              if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
-            },
-            onChange: handleSelectAll
-          }
-        ) }),
-        /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
-        /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
-      ] }) }),
-      /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
-        !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
-          /* @__PURE__ */ jsx5("td", { css: styles5.td }),
-          /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
-            /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
-            /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
-          ] }) }),
-          /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
-          /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
-          /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
-        ] }),
-        sortedItems.map((item) => /* @__PURE__ */ jsx5(
-          ListRow,
-          {
-            item,
-            isSelected: selectedItems.has(item.path),
-            onClick: (e) => handleItemClick(item, e),
-            onOpen: () => handleOpen(item),
-            onGenerateThumbnail: () => handleGenerateThumbnail(item),
-            onRename: () => setRenameItem(item)
+  return /* @__PURE__ */ jsx5("div", { css: styles5.tableWrapper, children: /* @__PURE__ */ jsxs5("table", { css: styles5.table, children: [
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsxs5("tr", { children: [
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "checkbox",
+          css: styles5.checkbox,
+          checked: allItemsSelected,
+          ref: (el) => {
+            if (el) el.indeterminate = someItemsSelected && !allItemsSelected;
           },
-          item.path
-        ))
-      ] })
+          onChange: handleSelectAll
+        }
+      ) }),
+      /* @__PURE__ */ jsx5("th", { css: styles5.th, children: "Name" }),
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thSize], children: "Size" }),
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thDimensions], children: "Dimensions" }),
+      /* @__PURE__ */ jsx5("th", { css: [styles5.th, styles5.thCdn], children: "CDN" })
+    ] }) }),
+    /* @__PURE__ */ jsxs5("tbody", { css: styles5.tbody, children: [
+      !isAtRoot && !isSearching && /* @__PURE__ */ jsxs5("tr", { css: styles5.parentRow, onClick: navigateUp, children: [
+        /* @__PURE__ */ jsx5("td", { css: styles5.td }),
+        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: /* @__PURE__ */ jsxs5("div", { css: styles5.nameCell, children: [
+          /* @__PURE__ */ jsx5("svg", { css: styles5.parentIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" }) }),
+          /* @__PURE__ */ jsx5("span", { css: styles5.name, children: ".." })
+        ] }) }),
+        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "--" }),
+        /* @__PURE__ */ jsx5("td", { css: [styles5.td, styles5.meta], children: "Parent folder" }),
+        /* @__PURE__ */ jsx5("td", { css: styles5.td, children: "--" })
+      ] }),
+      sortedItems.map((item) => /* @__PURE__ */ jsx5(
+        ListRow,
+        {
+          item,
+          isSelected: selectedItems.has(item.path),
+          onClick: (e) => handleItemClick(item, e),
+          onOpen: () => handleOpen(item),
+          onGenerateThumbnail: () => handleGenerateThumbnail(item)
+        },
+        item.path
+      ))
     ] })
-  ] });
+  ] }) });
 }
-function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRename }) {
-  const [showCopied, setShowCopied] = useState4(false);
+function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }) {
+  const [showCopied, setShowCopied] = useState5(false);
   const isFolder = item.type === "folder";
   const isImage = !isFolder && item.thumbnail !== void 0;
   const isImagesFolder = isFolder && (item.name === "images" || item.path.includes("/images/"));
@@ -2688,18 +2697,6 @@ function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail, onRen
                 ]
               }
             ),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                css: styles5.copyBtn,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRename();
-                },
-                title: "Rename",
-                children: /* @__PURE__ */ jsx5("svg", { css: styles5.copyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })
-              }
-            ),
             /* @__PURE__ */ jsx5(
               "button",
               {
@@ -2743,7 +2740,7 @@ function truncateMiddle2(str, maxLength = 32) {
 }
 
 // src/components/StudioDetailView.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { css as css6 } from "@emotion/react";
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
 var IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".ico", ".bmp", ".tiff", ".tif"];
@@ -3004,12 +3001,12 @@ var styles6 = {
 };
 function StudioDetailView() {
   const { focusedItem, setFocusedItem, triggerRefresh, clearSelection } = useStudio();
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState5(false);
-  const [showRenameModal, setShowRenameModal] = useState5(false);
-  const [showProcessConfirm, setShowProcessConfirm] = useState5(false);
-  const [processProgress, setProcessProgress] = useState5(null);
-  const [alertMessage, setAlertMessage] = useState5(null);
-  const [showCopied, setShowCopied] = useState5(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState6(false);
+  const [showRenameModal, setShowRenameModal] = useState6(false);
+  const [showProcessConfirm, setShowProcessConfirm] = useState6(false);
+  const [processProgress, setProcessProgress] = useState6(null);
+  const [alertMessage, setAlertMessage] = useState6(null);
+  const [showCopied, setShowCopied] = useState6(false);
   if (!focusedItem) return null;
   const isImage = isImageFile(focusedItem.name);
   const isVideo = isVideoFile(focusedItem.name);
@@ -3270,7 +3267,7 @@ function formatFileSize3(bytes) {
 }
 
 // src/components/StudioSettings.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { css as css7 } from "@emotion/react";
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var btnHeight2 = "36px";
@@ -3510,7 +3507,7 @@ var styles7 = {
   `
 };
 function StudioSettings() {
-  const [isOpen, setIsOpen] = useState6(false);
+  const [isOpen, setIsOpen] = useState7(false);
   return /* @__PURE__ */ jsxs7(Fragment4, { children: [
     /* @__PURE__ */ jsx7("button", { css: styles7.btn, onClick: () => setIsOpen(true), "aria-label": "Settings", children: /* @__PURE__ */ jsxs7(
       "svg",
@@ -3538,7 +3535,7 @@ CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here
 CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket
 CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`;
 function SettingsPanel({ onClose }) {
-  const [copied, setCopied] = useState6(false);
+  const [copied, setCopied] = useState7(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(envTemplate);
     setCopied(true);
@@ -3592,18 +3589,93 @@ function SettingsPanel({ onClose }) {
   ] }) });
 }
 
-// src/components/StudioUI.tsx
+// src/components/ErrorModal.tsx
+import { css as css8 } from "@emotion/react";
 import { jsx as jsx8, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
-var btnHeight3 = "36px";
 var styles8 = {
-  container: css8`
+  overlay: css8`
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+  `,
+  modal: css8`
+    background: ${colors.surface};
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  `,
+  header: css8`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  `,
+  icon: css8`
+    width: 24px;
+    height: 24px;
+    color: ${colors.danger};
+    flex-shrink: 0;
+  `,
+  title: css8`
+    font-size: ${fontSize.lg};
+    font-weight: 600;
+    color: ${colors.text};
+    margin: 0;
+  `,
+  message: css8`
+    font-size: ${fontSize.base};
+    color: ${colors.textSecondary};
+    margin: 0 0 20px 0;
+    line-height: 1.5;
+  `,
+  button: css8`
+    width: 100%;
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    border: none;
+    background: ${colors.primary};
+    color: white;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover {
+      background: ${colors.primaryHover};
+    }
+  `
+};
+function ErrorModal() {
+  const { error, clearError } = useStudio();
+  if (!error) return null;
+  return /* @__PURE__ */ jsx8("div", { css: styles8.overlay, onClick: clearError, children: /* @__PURE__ */ jsxs8("div", { css: styles8.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
+      /* @__PURE__ */ jsx8("svg", { css: styles8.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+      /* @__PURE__ */ jsx8("h3", { css: styles8.title, children: error.title })
+    ] }),
+    /* @__PURE__ */ jsx8("p", { css: styles8.message, children: error.message }),
+    /* @__PURE__ */ jsx8("button", { css: styles8.button, onClick: clearError, children: "OK" })
+  ] }) });
+}
+
+// src/components/StudioUI.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
+var btnHeight3 = "36px";
+var styles9 = {
+  container: css9`
     ${baseReset}
     display: flex;
     flex-direction: column;
     height: 100%;
     background: ${colors.background};
   `,
-  header: css8`
+  header: css9`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -3612,7 +3684,7 @@ var styles8 = {
     border-bottom: 1px solid ${colors.border};
     position: relative;
   `,
-  title: css8`
+  title: css9`
     font-size: ${fontSize.lg};
     font-weight: 600;
     color: ${colors.text};
@@ -3620,14 +3692,14 @@ var styles8 = {
     letter-spacing: -0.02em;
     flex-shrink: 0;
   `,
-  headerLeft: css8`
+  headerLeft: css9`
     display: flex;
     align-items: center;
     gap: 12px;
     flex: 1;
     min-width: 0;
   `,
-  headerCenter: css8`
+  headerCenter: css9`
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -3635,7 +3707,7 @@ var styles8 = {
     align-items: center;
     max-width: 50%;
   `,
-  breadcrumbs: css8`
+  breadcrumbs: css9`
     display: flex;
     align-items: center;
     gap: 6px;
@@ -3643,11 +3715,11 @@ var styles8 = {
     color: ${colors.textSecondary};
     overflow: hidden;
   `,
-  breadcrumbSeparator: css8`
+  breadcrumbSeparator: css9`
     color: ${colors.border};
     flex-shrink: 0;
   `,
-  breadcrumbItem: css8`
+  breadcrumbItem: css9`
     color: ${colors.textSecondary};
     text-decoration: none;
     cursor: pointer;
@@ -3658,19 +3730,19 @@ var styles8 = {
       color: ${colors.primary};
     }
   `,
-  breadcrumbCurrent: css8`
+  breadcrumbCurrent: css9`
     color: ${colors.text};
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   `,
-  headerActions: css8`
+  headerActions: css9`
     display: flex;
     align-items: center;
     gap: 8px;
   `,
-  headerBtn: css8`
+  headerBtn: css9`
     height: ${btnHeight3};
     padding: 0 12px;
     background: ${colors.surface};
@@ -3687,23 +3759,23 @@ var styles8 = {
       border-color: ${colors.borderHover};
     }
   `,
-  headerIcon: css8`
+  headerIcon: css9`
     width: 16px;
     height: 16px;
     color: ${colors.textSecondary};
   `,
-  content: css8`
+  content: css9`
     flex: 1;
     display: flex;
     overflow: hidden;
   `,
-  fileBrowser: css8`
+  fileBrowser: css9`
     flex: 1;
     min-width: 0;
     overflow: auto;
     padding: 20px 24px;
   `,
-  dropOverlay: css8`
+  dropOverlay: css9`
     position: absolute;
     top: 0;
     left: 0;
@@ -3718,7 +3790,7 @@ var styles8 = {
     z-index: 50;
     pointer-events: none;
   `,
-  dropMessage: css8`
+  dropMessage: css9`
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -3727,36 +3799,43 @@ var styles8 = {
     font-size: ${fontSize.lg};
     font-weight: 600;
   `,
-  dropIcon: css8`
+  dropIcon: css9`
     width: 48px;
     height: 48px;
   `
 };
 function StudioUI({ onClose, isVisible = true }) {
-  const [currentPath, setCurrentPathInternal] = useState7("public");
-  const [selectedItems, setSelectedItems] = useState7(/* @__PURE__ */ new Set());
-  const [lastSelectedPath, setLastSelectedPath] = useState7(null);
-  const [viewMode, setViewMode] = useState7("grid");
-  const [focusedItem, setFocusedItem] = useState7(null);
-  const [meta, setMeta] = useState7(null);
-  const [isLoading, setIsLoading] = useState7(false);
-  const [refreshKey, setRefreshKey] = useState7(0);
-  const [searchQuery, setSearchQuery] = useState7("");
-  const [isDragging, setIsDragging] = useState7(false);
-  const triggerRefresh = useCallback2(() => {
+  const [currentPath, setCurrentPathInternal] = useState8("public");
+  const [selectedItems, setSelectedItems] = useState8(/* @__PURE__ */ new Set());
+  const [lastSelectedPath, setLastSelectedPath] = useState8(null);
+  const [viewMode, setViewMode] = useState8("grid");
+  const [focusedItem, setFocusedItem] = useState8(null);
+  const [meta, setMeta] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(false);
+  const [refreshKey, setRefreshKey] = useState8(0);
+  const [searchQuery, setSearchQuery] = useState8("");
+  const [error, setError] = useState8(null);
+  const [isDragging, setIsDragging] = useState8(false);
+  const triggerRefresh = useCallback3(() => {
     setRefreshKey((k) => k + 1);
   }, []);
-  const handleDragOver = useCallback2((e) => {
+  const showError = useCallback3((title, message) => {
+    setError({ title, message });
+  }, []);
+  const clearError = useCallback3(() => {
+    setError(null);
+  }, []);
+  const handleDragOver = useCallback3((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(true);
   }, []);
-  const handleDragLeave = useCallback2((e) => {
+  const handleDragLeave = useCallback3((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
   }, []);
-  const handleDrop = useCallback2(async (e) => {
+  const handleDrop = useCallback3(async (e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
@@ -3774,25 +3853,25 @@ function StudioUI({ onClose, isVisible = true }) {
           method: "POST",
           body: formData
         });
-      } catch (error) {
-        console.error("Upload error:", error);
+      } catch (error2) {
+        console.error("Upload error:", error2);
       }
     }
     triggerRefresh();
   }, [currentPath, triggerRefresh]);
-  const navigateUp = useCallback2(() => {
+  const navigateUp = useCallback3(() => {
     if (currentPath === "public") return;
     const parts = currentPath.split("/");
     parts.pop();
     setCurrentPathInternal(parts.join("/") || "public");
     setSelectedItems(/* @__PURE__ */ new Set());
   }, [currentPath]);
-  const setCurrentPath = useCallback2((path) => {
+  const setCurrentPath = useCallback3((path) => {
     setCurrentPathInternal(path);
     setSelectedItems(/* @__PURE__ */ new Set());
     setFocusedItem(null);
   }, []);
-  const toggleSelection = useCallback2((path) => {
+  const toggleSelection = useCallback3((path) => {
     setSelectedItems((prev) => {
       const next = new Set(prev);
       if (next.has(path)) {
@@ -3804,7 +3883,7 @@ function StudioUI({ onClose, isVisible = true }) {
     });
     setLastSelectedPath(path);
   }, []);
-  const selectRange = useCallback2((fromPath, toPath, allItems) => {
+  const selectRange = useCallback3((fromPath, toPath, allItems) => {
     const fromIndex = allItems.findIndex((item) => item.path === fromPath);
     const toIndex = allItems.findIndex((item) => item.path === toPath);
     if (fromIndex === -1 || toIndex === -1) return;
@@ -3819,13 +3898,13 @@ function StudioUI({ onClose, isVisible = true }) {
     });
     setLastSelectedPath(toPath);
   }, []);
-  const selectAll = useCallback2((items) => {
+  const selectAll = useCallback3((items) => {
     setSelectedItems(new Set(items.map((item) => item.path)));
   }, []);
-  const clearSelection = useCallback2(() => {
+  const clearSelection = useCallback3(() => {
     setSelectedItems(/* @__PURE__ */ new Set());
   }, []);
-  const handleKeyDown = useCallback2(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (e.key === "Escape") {
         const target = e.target;
@@ -3841,7 +3920,7 @@ function StudioUI({ onClose, isVisible = true }) {
     },
     [onClose, focusedItem]
   );
-  useEffect4(() => {
+  useEffect3(() => {
     if (isVisible) {
       document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
@@ -3877,43 +3956,47 @@ function StudioUI({ onClose, isVisible = true }) {
     refreshKey,
     triggerRefresh,
     searchQuery,
-    setSearchQuery
+    setSearchQuery,
+    error,
+    showError,
+    clearError
   };
-  return /* @__PURE__ */ jsx8(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8("div", { css: styles8.container, children: [
-    /* @__PURE__ */ jsxs8("div", { css: styles8.header, children: [
-      /* @__PURE__ */ jsx8("div", { css: styles8.headerLeft, children: /* @__PURE__ */ jsx8("h1", { css: styles8.title, children: "Studio" }) }),
-      /* @__PURE__ */ jsx8("div", { css: styles8.headerCenter, children: /* @__PURE__ */ jsx8(Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
-      /* @__PURE__ */ jsxs8("div", { css: styles8.headerActions, children: [
-        /* @__PURE__ */ jsx8(StudioSettings, {}),
-        /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9("div", { css: styles9.container, children: [
+    /* @__PURE__ */ jsxs9("div", { css: styles9.header, children: [
+      /* @__PURE__ */ jsx9("div", { css: styles9.headerLeft, children: /* @__PURE__ */ jsx9("h1", { css: styles9.title, children: "Studio" }) }),
+      /* @__PURE__ */ jsx9("div", { css: styles9.headerCenter, children: /* @__PURE__ */ jsx9(Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
+      /* @__PURE__ */ jsxs9("div", { css: styles9.headerActions, children: [
+        /* @__PURE__ */ jsx9(StudioSettings, {}),
+        /* @__PURE__ */ jsx9(
           "button",
           {
-            css: styles8.headerBtn,
+            css: styles9.headerBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
-            children: /* @__PURE__ */ jsx8(CloseIcon, {})
+            children: /* @__PURE__ */ jsx9(CloseIcon, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx8(StudioToolbar, {}),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx9(StudioToolbar, {}),
+    /* @__PURE__ */ jsxs9(
       "div",
       {
-        css: styles8.content,
+        css: styles9.content,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          isDragging && /* @__PURE__ */ jsx8("div", { css: styles8.dropOverlay, children: /* @__PURE__ */ jsxs8("div", { css: styles8.dropMessage, children: [
-            /* @__PURE__ */ jsx8("svg", { css: styles8.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("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" }) }),
-            /* @__PURE__ */ jsx8("span", { children: "Drop files to upload" })
+          isDragging && /* @__PURE__ */ jsx9("div", { css: styles9.dropOverlay, children: /* @__PURE__ */ jsxs9("div", { css: styles9.dropMessage, children: [
+            /* @__PURE__ */ jsx9("svg", { css: styles9.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx9("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" }) }),
+            /* @__PURE__ */ jsx9("span", { children: "Drop files to upload" })
           ] }) }),
-          /* @__PURE__ */ jsx8("div", { css: styles8.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx8(StudioFileGrid, {}) : /* @__PURE__ */ jsx8(StudioFileList, {}) })
+          /* @__PURE__ */ jsx9("div", { css: styles9.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ jsx9(StudioFileGrid, {}) : /* @__PURE__ */ jsx9(StudioFileList, {}) })
         ]
       }
     ),
-    focusedItem && /* @__PURE__ */ jsx8(StudioDetailView, {})
+    focusedItem && /* @__PURE__ */ jsx9(StudioDetailView, {}),
+    /* @__PURE__ */ jsx9(ErrorModal, {})
   ] }) });
 }
 function Breadcrumbs({ currentPath, onNavigate }) {
@@ -3922,12 +4005,12 @@ function Breadcrumbs({ currentPath, onNavigate }) {
     name: part,
     path: parts.slice(0, index + 1).join("/")
   }));
-  return /* @__PURE__ */ jsx8("div", { css: styles8.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs8("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    index > 0 && /* @__PURE__ */ jsx8("span", { css: styles8.breadcrumbSeparator, children: "/" }),
-    index === breadcrumbs.length - 1 ? /* @__PURE__ */ jsx8("span", { css: styles8.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { css: styles9.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ jsxs9("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    index > 0 && /* @__PURE__ */ jsx9("span", { css: styles9.breadcrumbSeparator, children: "/" }),
+    index === breadcrumbs.length - 1 ? /* @__PURE__ */ jsx9("span", { css: styles9.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ jsx9(
       "span",
       {
-        css: styles8.breadcrumbItem,
+        css: styles9.breadcrumbItem,
         onClick: () => onNavigate(crumb.path),
         children: crumb.name
       }
@@ -3935,10 +4018,10 @@ function Breadcrumbs({ currentPath, onNavigate }) {
   ] }, crumb.path)) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "svg",
     {
-      css: styles8.headerIcon,
+      css: styles9.headerIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -3947,8 +4030,8 @@ function CloseIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx8("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-        /* @__PURE__ */ jsx8("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        /* @__PURE__ */ jsx9("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx9("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
       ]
     }
   );
@@ -3958,4 +4041,4 @@ export {
   StudioUI,
   StudioUI_default as default
 };
-//# sourceMappingURL=StudioUI-VPNL5NMI.mjs.map
+//# sourceMappingURL=StudioUI-VJVOSOPD.mjs.map