@gallop.software/studio 0.1.81 → 0.1.82

package/dist/{StudioUI-RH4ZXWKP.js → StudioUI-YFDO5MGG.js}

@@ -52,6 +52,11 @@ var defaultState = {
   },
   searchQuery: "",
   setSearchQuery: () => {
+  },
+  error: null,
+  showError: () => {
+  },
+  clearError: () => {
   }
 };
 var StudioContext = _react.createContext.call(void 0, defaultState);
@@ -1554,6 +1559,194 @@ function ImageStackIcon() {
 
 
 
+// src/hooks/useFileList.ts
+
+
+// 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] = _react.useState.call(void 0, []);
+  const [loading, setLoading] = _react.useState.call(void 0, true);
+  const isInitialLoad = _react.useRef.call(void 0, true);
+  const lastPath = _react.useRef.call(void 0, currentPath);
+  _react.useEffect.call(void 0, () => {
+    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 = _react.useCallback.call(void 0, (item, e) => {
+    if (e.shiftKey && lastSelectedPath) {
+      selectRange(lastSelectedPath, item.path, sortedItems);
+    } else {
+      toggleSelection(item.path);
+    }
+  }, [lastSelectedPath, selectRange, sortedItems, toggleSelection]);
+  const handleOpen = _react.useCallback.call(void 0, (item) => {
+    if (item.type === "folder") {
+      setCurrentPath(item.path);
+    } else {
+      setFocusedItem(item);
+    }
+  }, [setCurrentPath, setFocusedItem]);
+  const handleGenerateThumbnail = _react.useCallback.call(void 0, 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 = _react.useCallback.call(void 0, () => {
+    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
+
 var spin2 = _react3.keyframes`
   to { transform: rotate(360deg); }
 `;
@@ -1875,86 +2068,30 @@ var styles4 = {
   `
 };
 function StudioFileGrid() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
-  const [items, setItems] = _react.useState.call(void 0, []);
-  const [loading, setLoading] = _react.useState.call(void 0, true);
-  const isInitialLoad = _react.useRef.call(void 0, true);
-  const lastPath = _react.useRef.call(void 0, currentPath);
-  _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.spinner }) });
   }
-  const isAtRoot = currentPath === "public";
-  if (items.length === 0 && isAtRoot) {
+  if (sortedItems.length === 0 && isAtRoot) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles4.empty, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles4.emptyIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles4.emptyText, children: "No files in this folder" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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 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__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
     sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles4.selectAllRow, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { css: styles4.selectAllLabel, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2432,82 +2569,26 @@ var styles5 = {
   `
 };
 function StudioFileList() {
-  const { currentPath, setCurrentPath, navigateUp, selectedItems, toggleSelection, selectRange, lastSelectedPath, selectAll, clearSelection, refreshKey, setFocusedItem, triggerRefresh, searchQuery } = useStudio();
-  const [items, setItems] = _react.useState.call(void 0, []);
-  const [loading, setLoading] = _react.useState.call(void 0, true);
-  const isInitialLoad = _react.useRef.call(void 0, true);
-  const lastPath = _react.useRef.call(void 0, currentPath);
-  _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.loading, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.spinner }) });
   }
-  const isAtRoot = currentPath === "public";
-  if (items.length === 0 && isAtRoot) {
+  if (sortedItems.length === 0 && isAtRoot) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.empty, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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 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__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles5.tableWrapper, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { css: styles5.table, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "tr", { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { css: [styles5.th, styles5.thCheckbox], children: sortedItems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3508,10 +3589,85 @@ function SettingsPanel({ onClose }) {
   ] }) });
 }
 
+// src/components/ErrorModal.tsx
+
+
+var styles8 = {
+  overlay: _react3.css`
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1100;
+  `,
+  modal: _react3.css`
+    background: ${_chunkUFCWGUAGjs.colors.surface};
+    border-radius: 12px;
+    padding: 24px;
+    max-width: 400px;
+    width: 90%;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+  `,
+  header: _react3.css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  `,
+  icon: _react3.css`
+    width: 24px;
+    height: 24px;
+    color: ${_chunkUFCWGUAGjs.colors.danger};
+    flex-shrink: 0;
+  `,
+  title: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.lg};
+    font-weight: 600;
+    color: ${_chunkUFCWGUAGjs.colors.text};
+    margin: 0;
+  `,
+  message: _react3.css`
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    color: ${_chunkUFCWGUAGjs.colors.textSecondary};
+    margin: 0 0 20px 0;
+    line-height: 1.5;
+  `,
+  button: _react3.css`
+    width: 100%;
+    padding: 10px 16px;
+    border-radius: 6px;
+    font-size: ${_chunkUFCWGUAGjs.fontSize.base};
+    font-weight: 500;
+    border: none;
+    background: ${_chunkUFCWGUAGjs.colors.primary};
+    color: white;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover {
+      background: ${_chunkUFCWGUAGjs.colors.primaryHover};
+    }
+  `
+};
+function ErrorModal() {
+  const { error, clearError } = useStudio();
+  if (!error) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.overlay, onClick: clearError, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.icon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "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__ */ _jsxruntime.jsx.call(void 0, "h3", { css: styles8.title, children: error.title })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles8.message, children: error.message }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { css: styles8.button, onClick: clearError, children: "OK" })
+  ] }) });
+}
+
 // src/components/StudioUI.tsx
 
 var btnHeight3 = "36px";
-var styles8 = {
+var styles9 = {
   container: _react3.css`
     ${_chunkUFCWGUAGjs.baseReset}
     display: flex;
@@ -3658,10 +3814,17 @@ function StudioUI({ onClose, isVisible = true }) {
   const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
   const [refreshKey, setRefreshKey] = _react.useState.call(void 0, 0);
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
+  const [error, setError] = _react.useState.call(void 0, null);
   const [isDragging, setIsDragging] = _react.useState.call(void 0, false);
   const triggerRefresh = _react.useCallback.call(void 0, () => {
     setRefreshKey((k) => k + 1);
   }, []);
+  const showError = _react.useCallback.call(void 0, (title, message) => {
+    setError({ title, message });
+  }, []);
+  const clearError = _react.useCallback.call(void 0, () => {
+    setError(null);
+  }, []);
   const handleDragOver = _react.useCallback.call(void 0, (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -3690,8 +3853,8 @@ function StudioUI({ onClose, isVisible = true }) {
           method: "POST",
           body: formData
         });
-      } catch (error) {
-        console.error("Upload error:", error);
+      } catch (error2) {
+        console.error("Upload error:", error2);
       }
     }
     triggerRefresh();
@@ -3793,18 +3956,21 @@ function StudioUI({ onClose, isVisible = true }) {
     refreshKey,
     triggerRefresh,
     searchQuery,
-    setSearchQuery
+    setSearchQuery,
+    error,
+    showError,
+    clearError
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.container, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.header, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.headerLeft, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles8.title, children: "Studio" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.headerCenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.headerActions, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.container, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.header, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.headerLeft, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { css: styles9.title, children: "Studio" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.headerCenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Breadcrumbs, { currentPath, onNavigate: setCurrentPath }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.headerActions, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioSettings, {}),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
-            css: styles8.headerBtn,
+            css: styles9.headerBtn,
             onClick: onClose,
             "aria-label": "Close Studio",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CloseIcon, {})
@@ -3816,20 +3982,21 @@ function StudioUI({ onClose, isVisible = true }) {
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        css: styles8.content,
+        css: styles9.content,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,
         onDrop: handleDrop,
         children: [
-          isDragging && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.dropOverlay, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles8.dropMessage, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles8.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
+          isDragging && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.dropOverlay, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles9.dropMessage, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { css: styles9.dropIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "Drop files to upload" })
           ] }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.fileBrowser, children: viewMode === "grid" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileGrid, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioFileList, {}) })
         ]
       }
     ),
-    focusedItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioDetailView, {})
+    focusedItem && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioDetailView, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ErrorModal, {})
   ] }) });
 }
 function Breadcrumbs({ currentPath, onNavigate }) {
@@ -3838,12 +4005,12 @@ function Breadcrumbs({ currentPath, onNavigate }) {
     name: part,
     path: parts.slice(0, index + 1).join("/")
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles8.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.breadcrumbSeparator, children: "/" }),
-    index === breadcrumbs.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles8.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles9.breadcrumbs, children: breadcrumbs.map((crumb, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    index > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles9.breadcrumbSeparator, children: "/" }),
+    index === breadcrumbs.length - 1 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { css: styles9.breadcrumbCurrent, children: crumb.name }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "span",
       {
-        css: styles8.breadcrumbItem,
+        css: styles9.breadcrumbItem,
         onClick: () => onNavigate(crumb.path),
         children: crumb.name
       }
@@ -3854,7 +4021,7 @@ function CloseIcon() {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "svg",
     {
-      css: styles8.headerIcon,
+      css: styles9.headerIcon,
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "none",
@@ -3874,4 +4041,4 @@ var StudioUI_default = StudioUI;
 
 
 exports.StudioUI = StudioUI; exports.default = StudioUI_default;
-//# sourceMappingURL=StudioUI-RH4ZXWKP.js.map
+//# sourceMappingURL=StudioUI-YFDO5MGG.js.map