@parhelia/core 0.1.12907 → 0.1.12909

package/dist/editor/media-selector/AiImageSearchPrompt.js

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { useEditContext } from "../client/editContext";
 import { executePrompt } from "../services/aiService";
 import { createEditorAiContext } from "../ai/editorAiContext";
-import { FilterInput } from "../../components/FilterInput";
+import { SearchInput } from "../../components/SearchInput";
 import { Button } from "../../components/ui/button";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils";
@@ -62,8 +62,8 @@ export function AiImageSearchPrompt({ onSearchPromptChange, initialValue, }) {
             }
         }
     };
-    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FilterInput, { ref: inputRef, value: prompt, onChange: setPrompt, className: "flex-1", placeholder: "Search media library...", loading: loadingPrompt, showSearchIcon: true, showClearIcon: true, size: "md" }), canUseAi && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: () => suggestPrompt(), disabled: loadingPrompt, variant: "outline", size: "icon", className: cn("h-8 w-8 shrink-0 transition-all duration-300", loadingPrompt
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SearchInput, { ref: inputRef, value: prompt, onChange: setPrompt, className: "flex-1", placeholder: "Search media library...", loading: loadingPrompt, showSearchIcon: true, showClearIcon: true, size: "md" }), canUseAi && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { onClick: () => suggestPrompt(), disabled: loadingPrompt, variant: "outline", size: "icon", className: cn("h-8 w-8 shrink-0 transition-all duration-300", loadingPrompt
                                 ? "bg-primary/5"
-                                : "hover:bg-primary/10 hover:text-primary hover:border-primary/50"), children: loadingPrompt ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin text-primary" })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 22 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-primary", children: [_jsx("path", { d: "M14.0062 3.46766C14.2345 3.41253 14.4444 3.35739 14.6542 3.30225C14.9073 3.23485 15.1665 3.17971 15.4134 3.09394C16.37 2.7386 16.9748 2.06467 17.2341 1.09054C17.3266 0.735194 17.4192 0.37985 17.5118 0.0306331C17.5118 0.0183798 17.5118 0.0122532 17.5303 0C17.5488 0.0612662 17.5612 0.122532 17.5797 0.183799C17.6784 0.557522 17.7587 0.931246 17.8821 1.29884C18.2154 2.2791 18.9005 2.91014 19.9065 3.18584C20.2644 3.28387 20.6286 3.36964 20.9865 3.46766C21.0051 3.46766 21.0174 3.47379 21.0483 3.48604C20.9125 3.5228 20.7891 3.55344 20.6594 3.58407C20.3262 3.67597 19.9867 3.74336 19.6596 3.85364C18.7091 4.19061 18.0981 4.85841 17.8266 5.82641C17.7216 6.20014 17.6291 6.57386 17.518 6.95371C17.518 6.93533 17.5056 6.91695 17.4994 6.89857C17.4007 6.51872 17.3143 6.13887 17.197 5.76515C16.8823 4.72975 16.191 4.06195 15.1356 3.774C14.7777 3.67597 14.4197 3.5902 14.0617 3.4983C14.0432 3.4983 14.0309 3.49217 14 3.47992L14.0062 3.46766Z", fill: "currentColor" }), _jsx("path", { d: "M0.5 9.29394C1.04312 9.15303 1.54922 9.02437 2.05531 8.88958C2.66632 8.72416 3.28968 8.60163 3.88218 8.3872C6.17811 7.54173 7.63467 5.91817 8.2642 3.57168C8.49256 2.72008 8.71475 1.86848 8.93694 1.01688C8.94311 0.992372 8.94928 0.967866 8.98014 0.943359C9.01717 1.0904 9.06037 1.23744 9.09741 1.37835C9.33194 2.27284 9.52326 3.17957 9.81951 4.05568C10.6219 6.42055 12.2636 7.9277 14.6829 8.58938C15.547 8.82219 16.4172 9.03662 17.2813 9.2633C17.3183 9.27556 17.3554 9.28168 17.4232 9.30619C17.09 9.39196 16.7937 9.46548 16.4913 9.54513C15.689 9.75956 14.8681 9.91885 14.0904 10.2007C11.8007 11.0155 10.3379 12.6207 9.6899 14.9488C9.43686 15.8494 9.21467 16.75 8.95545 17.6629C8.94311 17.62 8.93077 17.5771 8.91842 17.5281C8.67772 16.6152 8.47405 15.6963 8.19631 14.7956C7.43717 12.3021 5.77077 10.7031 3.24031 10.0108C2.38242 9.77794 1.51836 9.56351 0.654297 9.34295C0.617265 9.3307 0.580234 9.32457 0.5 9.30006L0.5 9.29394Z", fill: "currentColor" }), _jsx("path", { d: "M14.0062 15.7881C14.2345 15.733 14.4444 15.6778 14.6542 15.6227C14.9073 15.5553 15.1665 15.5001 15.4134 15.4144C16.37 15.059 16.9748 14.3851 17.2341 13.411C17.3266 13.0556 17.4192 12.7003 17.5118 12.3511C17.5118 12.3388 17.5118 12.3327 17.5303 12.3204C17.5488 12.3817 17.5612 12.443 17.5797 12.5042C17.6784 12.878 17.7587 13.2517 17.8821 13.6193C18.2154 14.5995 18.9005 15.2306 19.9065 15.5063C20.2644 15.6043 20.6286 15.6901 20.9865 15.7881C21.0051 15.7881 21.0174 15.7942 21.0483 15.8065C20.9125 15.8432 20.7891 15.8739 20.6594 15.9045C20.3262 15.9964 19.9867 16.0638 19.6596 16.1741C18.7091 16.511 18.0981 17.1788 17.8266 18.1468C17.7216 18.5206 17.6291 18.8943 17.518 19.2741C17.518 19.2558 17.5056 19.2374 17.4994 19.219C17.4007 18.8392 17.3143 18.4593 17.197 18.0856C16.8823 17.0502 16.191 16.3824 15.1356 16.0944C14.7777 15.9964 14.4197 15.9106 14.0617 15.8187C14.0432 15.8187 14.0309 15.8126 14 15.8004L14.0062 15.7881Z", fill: "currentColor" })] })) }) }), _jsx(TooltipContent, { children: "AI-powered search terms" })] }))] }));
+                                : "hover:bg-primary/10 hover:text-primary hover:border-primary/50"), children: loadingPrompt ? (_jsx(Loader2, { className: "text-primary h-4 w-4 animate-spin" })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 22 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-primary", children: [_jsx("path", { d: "M14.0062 3.46766C14.2345 3.41253 14.4444 3.35739 14.6542 3.30225C14.9073 3.23485 15.1665 3.17971 15.4134 3.09394C16.37 2.7386 16.9748 2.06467 17.2341 1.09054C17.3266 0.735194 17.4192 0.37985 17.5118 0.0306331C17.5118 0.0183798 17.5118 0.0122532 17.5303 0C17.5488 0.0612662 17.5612 0.122532 17.5797 0.183799C17.6784 0.557522 17.7587 0.931246 17.8821 1.29884C18.2154 2.2791 18.9005 2.91014 19.9065 3.18584C20.2644 3.28387 20.6286 3.36964 20.9865 3.46766C21.0051 3.46766 21.0174 3.47379 21.0483 3.48604C20.9125 3.5228 20.7891 3.55344 20.6594 3.58407C20.3262 3.67597 19.9867 3.74336 19.6596 3.85364C18.7091 4.19061 18.0981 4.85841 17.8266 5.82641C17.7216 6.20014 17.6291 6.57386 17.518 6.95371C17.518 6.93533 17.5056 6.91695 17.4994 6.89857C17.4007 6.51872 17.3143 6.13887 17.197 5.76515C16.8823 4.72975 16.191 4.06195 15.1356 3.774C14.7777 3.67597 14.4197 3.5902 14.0617 3.4983C14.0432 3.4983 14.0309 3.49217 14 3.47992L14.0062 3.46766Z", fill: "currentColor" }), _jsx("path", { d: "M0.5 9.29394C1.04312 9.15303 1.54922 9.02437 2.05531 8.88958C2.66632 8.72416 3.28968 8.60163 3.88218 8.3872C6.17811 7.54173 7.63467 5.91817 8.2642 3.57168C8.49256 2.72008 8.71475 1.86848 8.93694 1.01688C8.94311 0.992372 8.94928 0.967866 8.98014 0.943359C9.01717 1.0904 9.06037 1.23744 9.09741 1.37835C9.33194 2.27284 9.52326 3.17957 9.81951 4.05568C10.6219 6.42055 12.2636 7.9277 14.6829 8.58938C15.547 8.82219 16.4172 9.03662 17.2813 9.2633C17.3183 9.27556 17.3554 9.28168 17.4232 9.30619C17.09 9.39196 16.7937 9.46548 16.4913 9.54513C15.689 9.75956 14.8681 9.91885 14.0904 10.2007C11.8007 11.0155 10.3379 12.6207 9.6899 14.9488C9.43686 15.8494 9.21467 16.75 8.95545 17.6629C8.94311 17.62 8.93077 17.5771 8.91842 17.5281C8.67772 16.6152 8.47405 15.6963 8.19631 14.7956C7.43717 12.3021 5.77077 10.7031 3.24031 10.0108C2.38242 9.77794 1.51836 9.56351 0.654297 9.34295C0.617265 9.3307 0.580234 9.32457 0.5 9.30006L0.5 9.29394Z", fill: "currentColor" }), _jsx("path", { d: "M14.0062 15.7881C14.2345 15.733 14.4444 15.6778 14.6542 15.6227C14.9073 15.5553 15.1665 15.5001 15.4134 15.4144C16.37 15.059 16.9748 14.3851 17.2341 13.411C17.3266 13.0556 17.4192 12.7003 17.5118 12.3511C17.5118 12.3388 17.5118 12.3327 17.5303 12.3204C17.5488 12.3817 17.5612 12.443 17.5797 12.5042C17.6784 12.878 17.7587 13.2517 17.8821 13.6193C18.2154 14.5995 18.9005 15.2306 19.9065 15.5063C20.2644 15.6043 20.6286 15.6901 20.9865 15.7881C21.0051 15.7881 21.0174 15.7942 21.0483 15.8065C20.9125 15.8432 20.7891 15.8739 20.6594 15.9045C20.3262 15.9964 19.9867 16.0638 19.6596 16.1741C18.7091 16.511 18.0981 17.1788 17.8266 18.1468C17.7216 18.5206 17.6291 18.8943 17.518 19.2741C17.518 19.2558 17.5056 19.2374 17.4994 19.219C17.4007 18.8392 17.3143 18.4593 17.197 18.0856C16.8823 17.0502 16.191 16.3824 15.1356 16.0944C14.7777 15.9964 14.4197 15.9106 14.0617 15.8187C14.0432 15.8187 14.0309 15.8126 14 15.8004L14.0062 15.7881Z", fill: "currentColor" })] })) }) }), _jsx(TooltipContent, { children: "AI-powered search terms" })] }))] }));
 }
 //# sourceMappingURL=AiImageSearchPrompt.js.map

package/dist/editor/media-selector/MediaFolderBrowser.d.ts

@@ -1,5 +1,6 @@
-export declare function MediaFolderBrowser({ folderId, language, onMediaSelected, }: {
+export declare function MediaFolderBrowser({ folderId, language, canCreate, }: {
     folderId: string;
     language?: string;
+    canCreate?: boolean;
     onMediaSelected?: (mediaId: string) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/editor/media-selector/MediaFolderBrowser.js

@@ -1,45 +1,128 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef, useMemo, useCallback, memo, } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../../components/ui/button";
+import { SimpleIconButton } from "../ui/SimpleIconButton";
 import { Grid3X3, Square, List, Upload, RefreshCw, Loader2, FileIcon, } from "lucide-react";
 import { useEditContext } from "../client/editContext";
 import { getChildren } from "../services/contentService";
 import { toast } from "sonner";
-import { FilterInput } from "../../components/FilterInput";
+import { SearchInput } from "../../components/SearchInput";
 import { executeSearch } from "../services/searchService";
 import { useDebouncedCallback } from "use-debounce";
 import { Spinner } from "../ui/Spinner";
 import { showItemContextMenu } from "../itemContextMenu";
+import { replaceMediaItemWithFile, uploadMediaFiles } from "./mediaUpload";
+import { Preview } from "./Preview";
+import { getMediaFileTypeLabel } from "./mediaFileType";
+const normalizeId = (id) => id?.toLowerCase() ?? "";
+const MEDIA_FOLDER_TEMPLATE_ID = "fe5dd826-48c6-436d-b87a-7c4210c7413b";
+const MEDIA_NODE_TEMPLATE_ID = "239f9cf4-e5a0-44e0-b342-0f32cd4c6d8b";
+const isMediaFolderItem = (item) => [MEDIA_FOLDER_TEMPLATE_ID, MEDIA_NODE_TEMPLATE_ID].includes(normalizeId(item.templateId));
+const getMediaItemTypeLabel = (thumbnail) => {
+    if (isMediaFolderItem(thumbnail))
+        return "Folder";
+    return getMediaFileTypeLabel(thumbnail) || "File";
+};
 // Memoized thumbnail item component to prevent unnecessary re-renders
-const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, viewMode, }) => {
+const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, onReplaceMedia, viewMode, }) => {
     const hasImage = !!thumbnail.thumbUrl;
     const iconSrc = thumbnail.largeIcon || thumbnail.icon;
+    const [isReplaceDragOver, setIsReplaceDragOver] = useState(false);
+    const isImageFileDrag = (event) => {
+        const hasFiles = Array.from(event.dataTransfer.types).includes("Files");
+        const items = Array.from(event.dataTransfer.items);
+        if (items.length > 0) {
+            if (hasFiles && items.some((item) => item.kind === "file")) {
+                return true;
+            }
+            return items.some((item) => item.kind === "file" &&
+                (item.type.startsWith("image/") || item.type === ""));
+        }
+        return Array.from(event.dataTransfer.types).includes("Files");
+    };
+    const handleFileDrag = (event) => {
+        if (!onReplaceMedia || !isImageFileDrag(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = "move";
+        setIsReplaceDragOver(true);
+    };
+    const handleFileDragLeave = (event) => {
+        if (!onReplaceMedia || !isReplaceDragOver)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (event.relatedTarget instanceof Node &&
+            event.currentTarget.contains(event.relatedTarget)) {
+            return;
+        }
+        setIsReplaceDragOver(false);
+    };
+    const handleDrop = (event) => {
+        if (!onReplaceMedia || !isImageFileDrag(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        setIsReplaceDragOver(false);
+        const file = Array.from(event.dataTransfer.files)[0];
+        if (file) {
+            onReplaceMedia(file);
+        }
+    };
+    const replaceDropOverlay = isReplaceDragOver ? (_jsxs("div", { className: "pointer-events-none absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-white/65 backdrop-blur-[1px]", children: [_jsx("div", { className: "bg-highlight-100 flex h-9 w-9 items-center justify-center rounded-full text-white shadow-sm", children: _jsx(Upload, { className: "h-4 w-4", strokeWidth: 1.5 }) }), _jsx("span", { className: "text-highlight-100 text-xs font-medium", children: "Replace" })] })) : null;
     if (viewMode === "list") {
-        return (_jsxs("div", { className: cn(isSelected
-                ? "border-blue-300 bg-blue-100"
-                : "bg-white hover:bg-gray-50", "flex cursor-pointer items-center gap-3 rounded-lg border p-3 transition-colors duration-200"), onClick: onClick, onContextMenu: onContextMenu, children: [_jsx("div", { className: "flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-md bg-gray-50", children: hasImage ? (_jsx("img", { src: thumbnail.thumbUrl, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80", style: { width: "32px", height: "32px" } })) : (_jsx(FileIcon, { className: "h-8 w-8 text-gray-400" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-dark truncate text-xs font-medium", children: thumbnail.name }), _jsx("div", { className: "mt-1 text-xs text-gray-500", children: "Media File" })] })] }));
+        return (_jsxs("div", { className: cn(isReplaceDragOver
+                ? "border-highlight-100 bg-highlight-10 ring-highlight-100/40 shadow-md ring-2"
+                : isSelected
+                    ? "border-feedback-blue bg-feedback-blue-light"
+                    : "hover:bg-neutral-grey-5 bg-white", "relative flex cursor-pointer items-center gap-3 overflow-hidden rounded-lg border p-3 transition-all duration-200"), onClick: onClick, onContextMenu: onContextMenu, onDragEnter: handleFileDrag, onDragOver: handleFileDrag, onDragLeave: handleFileDragLeave, onDragEnd: () => setIsReplaceDragOver(false), onDrop: handleDrop, children: [_jsx("div", { className: "bg-neutral-grey-5 flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-md", children: hasImage ? (_jsx("img", { src: thumbnail.thumbUrl, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80", style: { width: "32px", height: "32px" } })) : (_jsx(FileIcon, { className: "text-neutral-grey-50 h-8 w-8" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-neutral-grey-100 truncate text-xs font-normal", children: thumbnail.name }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: getMediaItemTypeLabel(thumbnail) })] }), replaceDropOverlay] }));
     }
     const isLarge = viewMode === "large-grid";
     const gridSrc = isLarge ? thumbnail.previewUrl : thumbnail.thumbUrl;
-    return (_jsxs("div", { className: cn(isSelected
-            ? "shadow-lg ring-2 ring-blue-500"
-            : "shadow-sm hover:shadow-md", "cursor-pointer overflow-hidden rounded-lg bg-white transition-all duration-200 hover:scale-105"), onClick: onClick, onContextMenu: onContextMenu, children: [_jsx("div", { className: "flex aspect-square items-center justify-center bg-gray-50", children: gridSrc ? (_jsx("img", { src: gridSrc, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80", style: { width: "32px", height: "32px" } })) : (_jsx(FileIcon, { className: cn("text-gray-400", isLarge ? "h-20 w-20" : "h-12 w-12") })) }), _jsx("div", { className: isLarge ? "p-3" : "p-2", children: _jsx("div", { className: cn("line-clamp-2 break-all text-gray-700", isLarge ? "text-sm font-medium" : "text-xs font-medium"), children: thumbnail.name }) })] }));
+    return (_jsxs("div", { className: cn(isReplaceDragOver
+            ? "ring-highlight-100/60 scale-[1.02] ring-2"
+            : isSelected
+                ? "ring-feedback-blue ring-2"
+                : "", "border-neutral-grey-10 relative cursor-pointer overflow-hidden rounded-lg border bg-white transition-all duration-200 hover:scale-105"), onClick: onClick, onContextMenu: onContextMenu, onDragEnter: handleFileDrag, onDragOver: handleFileDrag, onDragLeave: handleFileDragLeave, onDragEnd: () => setIsReplaceDragOver(false), onDrop: handleDrop, children: [_jsx("div", { className: "flex aspect-square items-center justify-center bg-white", children: gridSrc ? (_jsx("img", { src: gridSrc, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80", style: { width: "32px", height: "32px" } })) : (_jsx(FileIcon, { className: cn("text-neutral-grey-50", isLarge ? "h-20 w-20" : "h-12 w-12") })) }), _jsx("div", { className: isLarge ? "p-3" : "p-2", children: _jsx("div", { className: "text-neutral-grey-100 line-clamp-2 text-xs font-normal break-all", children: thumbnail.name }) }), replaceDropOverlay] }));
 });
 ThumbnailItem.displayName = "ThumbnailItem";
-export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected, }) {
+export function MediaFolderBrowser({ folderId, language = "en", canCreate = true, }) {
     const [viewMode, setViewMode] = useState("grid");
+    const [currentFolderId, setCurrentFolderId] = useState(folderId);
     const [images, setImages] = useState([]);
+    const imagesRef = useRef(images);
     const [selectedImage, setSelectedImage] = useState();
     const [selectedImageIds, setSelectedImageIds] = useState([]);
     const selectedImageRef = useRef(selectedImage);
     const lastSelectedImageId = useRef(undefined);
     const [loading, setLoading] = useState(false);
     const [uploading, setUploading] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const dragDepthRef = useRef(0);
+    const activeLoadKeyRef = useRef(undefined);
+    const lastLoadedKeyRef = useRef(undefined);
     const [searchQuery, setSearchQuery] = useState("");
+    const searchQueryRef = useRef(searchQuery);
     const [searchResults, setSearchResults] = useState([]);
     const [searching, setSearching] = useState(false);
     const editContext = useEditContext();
+    const sessionId = editContext?.sessionId;
+    useEffect(() => {
+        setCurrentFolderId(folderId);
+        setSelectedImage(undefined);
+        selectedImageRef.current = undefined;
+        setSelectedImageIds([]);
+        lastSelectedImageId.current = undefined;
+        setSearchQuery("");
+        setSearchResults([]);
+    }, [folderId]);
+    useEffect(() => {
+        imagesRef.current = images;
+    }, [images]);
+    useEffect(() => {
+        searchQueryRef.current = searchQuery;
+    }, [searchQuery]);
     // Keep ref in sync with state
     useEffect(() => {
         selectedImageRef.current = selectedImage;
@@ -48,27 +131,42 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
         setSelectedImageIds((ids) => (ids.length === 0 ? [selectedImage.id] : ids));
         lastSelectedImageId.current ??= selectedImage.id;
     }, [selectedImage]);
-    useEffect(() => {
-        loadMediaFiles();
-    }, [folderId]);
-    const loadMediaFiles = async () => {
-        if (!editContext || !folderId)
+    const loadMediaFiles = useCallback(async (force = false) => {
+        if (!sessionId || !currentFolderId)
+            return;
+        const loadKey = `${sessionId}:${currentFolderId}:${language}`;
+        if (!force &&
+            (activeLoadKeyRef.current === loadKey ||
+                lastLoadedKeyRef.current === loadKey)) {
             return;
+        }
+        activeLoadKeyRef.current = loadKey;
         setLoading(true);
         try {
-            const children = await getChildren(folderId, editContext.sessionId, [], false, language);
+            const children = await getChildren(currentFolderId, sessionId, [], false, language);
+            if (activeLoadKeyRef.current !== loadKey)
+                return;
             setImages(children || []);
+            lastLoadedKeyRef.current = loadKey;
         }
         catch (error) {
             console.error("Error loading media files:", error);
+            if (activeLoadKeyRef.current !== loadKey)
+                return;
             setImages([]);
         }
         finally {
-            setLoading(false);
+            if (activeLoadKeyRef.current === loadKey) {
+                activeLoadKeyRef.current = undefined;
+                setLoading(false);
+            }
         }
-    };
+    }, [currentFolderId, language, sessionId]);
+    useEffect(() => {
+        void loadMediaFiles();
+    }, [loadMediaFiles]);
     const handleSearch = useDebouncedCallback(async (query) => {
-        if (!editContext || !folderId || !query.trim()) {
+        if (!editContext || !currentFolderId || !query.trim()) {
             setSearchResults([]);
             setSearching(false);
             return;
@@ -79,7 +177,7 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
                 index: "master",
                 query: query.trim(),
                 editContext,
-                rootItemIds: [folderId],
+                rootItemIds: [currentFolderId],
                 maxResults: 50,
             });
             if (result.type === "success") {
@@ -90,8 +188,16 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
                     name: item.name,
                     thumbUrl: item.thumbUrl || "",
                     previewUrl: item.previewUrl || item.thumbUrl || "",
+                    downloadUrl: item.downloadUrl,
                     icon: item.icon || "",
                     largeIcon: item.largeIcon || "",
+                    extension: item.extension,
+                    mimeType: item.mimeType,
+                    templateName: item.templateName,
+                    templateId: item.templateId,
+                    hasChildren: item.hasChildren,
+                    language: item.language,
+                    version: item.version,
                 }));
                 setSearchResults(thumbnails);
             }
@@ -116,7 +222,57 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
         else {
             setSearchResults([]);
         }
-    }, [searchQuery]);
+    }, [handleSearch, searchQuery]);
+    const refreshVisibleMedia = useCallback(() => {
+        const currentSearchQuery = searchQueryRef.current.trim();
+        if (currentSearchQuery) {
+            handleSearch(currentSearchQuery);
+            return;
+        }
+        void loadMediaFiles(true);
+    }, [handleSearch, loadMediaFiles]);
+    useEffect(() => {
+        if (!editContext?.itemsRepository || !currentFolderId)
+            return;
+        const unsubscribe = editContext.itemsRepository.subscribeItemsChanged((changes) => {
+            const normalizedCurrentFolderId = normalizeId(currentFolderId);
+            const deletedIds = changes
+                .filter((change) => change.action === "delete" &&
+                normalizeId(change.parentId) === normalizedCurrentFolderId)
+                .map((change) => normalizeId(change.item.id))
+                .filter(Boolean);
+            if (deletedIds.length > 0) {
+                const deletedIdSet = new Set(deletedIds);
+                setImages((items) => items.filter((item) => !deletedIdSet.has(normalizeId(item.id))));
+                setSearchResults((items) => items.filter((item) => !deletedIdSet.has(normalizeId(item.id))));
+                setSelectedImageIds((ids) => ids.filter((id) => !deletedIdSet.has(normalizeId(id))));
+                if (selectedImageRef.current) {
+                    const selectedId = normalizeId(selectedImageRef.current.id);
+                    if (deletedIdSet.has(selectedId)) {
+                        selectedImageRef.current = undefined;
+                        lastSelectedImageId.current = undefined;
+                        setSelectedImage(undefined);
+                    }
+                }
+            }
+            const shouldRefreshVisibleMedia = changes.some((change) => {
+                if (change.action === "delete")
+                    return false;
+                if (normalizeId(change.item.id) === normalizedCurrentFolderId &&
+                    change.changes.children) {
+                    return true;
+                }
+                const changedItemId = normalizeId(change.item.id);
+                return imagesRef.current.some((image) => normalizeId(image.id) === changedItemId);
+            });
+            if (shouldRefreshVisibleMedia) {
+                refreshVisibleMedia();
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [editContext?.itemsRepository, currentFolderId, refreshVisibleMedia]);
     const displayImages = useMemo(() => {
         return searchQuery.trim() ? searchResults : images;
     }, [searchQuery, searchResults, images]);
@@ -150,6 +306,16 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
         updateSelection(thumbnail, ev);
         if (ev.shiftKey || ev.ctrlKey || ev.metaKey)
             return;
+        if (isMediaFolderItem(thumbnail)) {
+            setCurrentFolderId(thumbnail.id);
+            setSelectedImage(undefined);
+            selectedImageRef.current = undefined;
+            setSelectedImageIds([]);
+            lastSelectedImageId.current = undefined;
+            setSearchQuery("");
+            setSearchResults([]);
+            return;
+        }
         // Open the media item in the slot next to the active one (or create new if no next slot exists)
         if (editContext) {
             // Check if thumbnail has language/version (from ItemTreeNodeData) or use defaults
@@ -239,8 +405,12 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
         });
     }, [editContext, language, selectedImageIds]);
     const handleUpload = async () => {
-        if (!folderId)
+        if (!currentFolderId)
+            return;
+        if (!canCreate) {
+            toast.error("You don't have permission to upload to this folder.");
             return;
+        }
         const fileInput = document.createElement("input");
         fileInput.type = "file";
         fileInput.multiple = true;
@@ -253,33 +423,102 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
         };
         fileInput.click();
     };
-    const uploadFiles = async (files) => {
-        const formData = new FormData();
-        files.forEach((file, index) => {
-            formData.append("file" + index, file);
-        });
+    const uploadFiles = useCallback(async (files) => {
+        if (!currentFolderId || files.length === 0)
+            return;
+        if (!canCreate) {
+            toast.error("You don't have permission to upload to this folder.");
+            return;
+        }
         try {
             setUploading(true);
-            const response = await fetch("/parhelia/upload?folder=" + folderId, {
-                method: "POST",
-                body: formData,
+            const uploaded = await uploadMediaFiles({
+                files,
+                folderId: currentFolderId,
+                editContext,
+                language,
             });
-            if (!response.ok) {
-                throw new Error("Upload failed");
+            if (uploaded.length > 0) {
+                await loadMediaFiles(true);
             }
-            // Reload media files after successful upload
-            await loadMediaFiles();
         }
         catch (error) {
             console.error("Error uploading files:", error);
-            if (editContext) {
-                toast.error("Failed to upload files. Please try again.");
+            toast.error("Failed to upload files. Please try again.");
+        }
+        finally {
+            setUploading(false);
+        }
+    }, [currentFolderId, canCreate, editContext, language, loadMediaFiles]);
+    const replaceMediaFile = useCallback(async (thumbnail, file) => {
+        if (isMediaFolderItem(thumbnail) || uploading)
+            return;
+        dragDepthRef.current = 0;
+        setIsDragOver(false);
+        try {
+            setUploading(true);
+            const result = await replaceMediaItemWithFile({
+                file,
+                mediaItem: thumbnail,
+                editContext,
+                language,
+            });
+            if (result) {
+                refreshVisibleMedia();
+                const selectedId = result.id || thumbnail.id;
+                selectedImageRef.current = thumbnail;
+                setSelectedImage(thumbnail);
+                setSelectedImageIds([selectedId]);
+                lastSelectedImageId.current = selectedId;
             }
         }
         finally {
             setUploading(false);
         }
-    };
+    }, [editContext, language, refreshVisibleMedia, uploading]);
+    const isFileDrag = (event) => Array.from(event.dataTransfer.types).includes("Files");
+    const handleDragEnter = useCallback((event) => {
+        if (!isFileDrag(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        dragDepthRef.current += 1;
+        if (currentFolderId && !uploading && canCreate) {
+            setIsDragOver(true);
+        }
+    }, [currentFolderId, uploading, canCreate]);
+    const handleDragOver = useCallback((event) => {
+        if (!isFileDrag(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect =
+            currentFolderId && !uploading && canCreate ? "copy" : "none";
+    }, [currentFolderId, uploading, canCreate]);
+    const handleDragLeave = useCallback((event) => {
+        if (!isFileDrag(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+        if (dragDepthRef.current === 0) {
+            setIsDragOver(false);
+        }
+    }, []);
+    const handleDrop = useCallback((event) => {
+        if (!isFileDrag(event))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        dragDepthRef.current = 0;
+        setIsDragOver(false);
+        if (!currentFolderId || uploading || !canCreate)
+            return;
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length > 0) {
+            void uploadFiles(files);
+        }
+    }, [currentFolderId, uploading, canCreate, uploadFiles]);
     // Create stable click handlers map to prevent ThumbnailItem re-renders
     const clickHandlers = useMemo(() => {
         const handlers = new Map();
@@ -298,16 +537,40 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
     const GridView = useMemo(() => {
         return (_jsx("div", { className: "grid gap-3 p-4", style: {
                 gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
-            }, children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), viewMode: "grid" }, t.id))) }));
-    }, [displayImages, selectedImageIds, clickHandlers, contextMenuHandlers]);
+            }, children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), onReplaceMedia: isMediaFolderItem(t)
+                    ? undefined
+                    : (file) => void replaceMediaFile(t, file), viewMode: "grid" }, t.id))) }));
+    }, [
+        displayImages,
+        selectedImageIds,
+        clickHandlers,
+        contextMenuHandlers,
+        replaceMediaFile,
+    ]);
     const LargeGridView = useMemo(() => {
         return (_jsx("div", { className: "grid gap-4 p-4", style: {
                 gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
-            }, children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), viewMode: "large-grid" }, t.id))) }));
-    }, [displayImages, selectedImageIds, clickHandlers, contextMenuHandlers]);
+            }, children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), onReplaceMedia: isMediaFolderItem(t)
+                    ? undefined
+                    : (file) => void replaceMediaFile(t, file), viewMode: "large-grid" }, t.id))) }));
+    }, [
+        displayImages,
+        selectedImageIds,
+        clickHandlers,
+        contextMenuHandlers,
+        replaceMediaFile,
+    ]);
     const ListView = useMemo(() => {
-        return (_jsx("div", { className: "flex flex-col gap-1 p-2", children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), viewMode: "list" }, t.id))) }));
-    }, [displayImages, selectedImageIds, clickHandlers, contextMenuHandlers]);
+        return (_jsx("div", { className: "flex flex-col gap-1 p-2", children: displayImages.map((t) => (_jsx(ThumbnailItem, { thumbnail: t, isSelected: selectedImageIds.includes(t.id), onClick: clickHandlers.get(t.id) || (() => undefined), onContextMenu: contextMenuHandlers.get(t.id) || (() => undefined), onReplaceMedia: isMediaFolderItem(t)
+                    ? undefined
+                    : (file) => void replaceMediaFile(t, file), viewMode: "list" }, t.id))) }));
+    }, [
+        displayImages,
+        selectedImageIds,
+        clickHandlers,
+        contextMenuHandlers,
+        replaceMediaFile,
+    ]);
     const renderContent = useMemo(() => {
         const isDisplayingSearch = searchQuery.trim();
         const currentLoading = isDisplayingSearch ? searching : loading;
@@ -315,7 +578,7 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
             return (_jsx("div", { className: "flex h-64 items-center justify-center", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin" }) }));
         }
         if (displayImages.length === 0) {
-            return (_jsxs("div", { className: "flex h-64 flex-col items-center justify-center text-gray-500", children: [_jsx("div", { className: "mb-4 text-4xl", children: isDisplayingSearch ? "🔍" : "📁" }), _jsx("div", { className: "text-lg font-medium", children: isDisplayingSearch ? "No results found" : "No media files found" }), _jsx("div", { className: "text-sm", children: isDisplayingSearch
+            return (_jsxs("div", { className: "text-neutral-grey-50 flex h-64 flex-col items-center justify-center", children: [_jsx("div", { className: "mb-4 text-4xl", children: isDisplayingSearch ? "🔍" : "📁" }), _jsx("div", { className: "text-lg font-medium", children: isDisplayingSearch ? "No results found" : "No media files found" }), _jsx("div", { className: "text-sm", children: isDisplayingSearch
                             ? "Try a different search term"
                             : "Upload some media files to get started" })] }));
         }
@@ -339,11 +602,17 @@ export function MediaFolderBrowser({ folderId, language = "en", onMediaSelected,
         LargeGridView,
         ListView,
     ]);
-    return (_jsxs("div", { className: "relative flex h-full flex-col", children: [uploading && (_jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/50 backdrop-blur-[1px]", children: [_jsx(Spinner, { size: "3xl" }), _jsx("span", { className: "text-sm font-medium text-gray-500", children: "Uploading media..." })] })), _jsxs("div", { className: "flex items-center justify-between border-b bg-gray-50 px-4 py-2", children: [_jsxs("div", { className: "text-xs font-medium text-gray-700", children: [searchQuery.trim() ? searchResults.length : images.length, " media file", (searchQuery.trim() ? searchResults.length : images.length) !== 1
+    return (_jsxs("div", { className: "relative flex h-full flex-col", onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [uploading && (_jsxs("div", { className: "absolute inset-0 z-10 flex items-center justify-center gap-2 bg-white/50 backdrop-blur-[1px]", children: [_jsx(Spinner, { size: "3xl" }), _jsx("span", { className: "text-neutral-grey-50 text-sm font-medium", children: "Uploading media..." })] })), isDragOver && !uploading && (_jsx("div", { className: "bg-feedback-blue-light/70 pointer-events-none absolute inset-0 z-10 flex items-center justify-center backdrop-blur-[1px]", children: _jsxs("div", { className: "border-feedback-blue text-feedback-blue flex flex-col items-center gap-2 rounded-lg border-2 border-dashed bg-white/90 px-8 py-6 shadow-sm", children: [_jsx(Upload, { className: "h-8 w-8" }), _jsx("span", { className: "text-sm font-medium", children: "Drop files to upload them here" })] }) })), _jsxs("div", { className: "flex items-center justify-between border-b bg-white px-4 py-2", children: [_jsxs("div", { className: "text-neutral-grey-100 text-xs font-medium", children: [searchQuery.trim() ? searchResults.length : images.length, " media file", (searchQuery.trim() ? searchResults.length : images.length) !== 1
                                 ? "s"
-                                : "", searchQuery.trim() && " found"] }), _jsxs("div", { className: "flex gap-1", children: [_jsx(Button, { size: "sm", variant: viewMode === "grid" ? "outline" : "default", onClick: () => setViewMode("grid"), title: "Grid View", className: "p-1", children: _jsx(Grid3X3, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", variant: viewMode === "large-grid" ? "outline" : "default", onClick: () => setViewMode("large-grid"), title: "Large Grid View", className: "p-1", children: _jsx(Square, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", variant: viewMode === "list" ? "outline" : "default", onClick: () => setViewMode("list"), title: "List View", className: "p-1", children: _jsx(List, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", onClick: handleUpload, disabled: uploading || !folderId, title: "Upload Files", className: "ml-2 p-1", children: _jsx(Upload, { className: "h-4 w-4" }) }), _jsx(Button, { size: "sm", onClick: loadMediaFiles, title: "Refresh", className: "ml-1 p-1", children: _jsx(RefreshCw, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "border-b bg-white px-4 py-2", children: _jsx(FilterInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Search media files...", loading: searching, onClear: () => setSearchQuery("") }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto", style: {
-                    scrollbarWidth: "thin",
-                    scrollbarColor: "#9CA3AF #F3F4F6",
-                }, children: renderContent }), selectedImage && (_jsxs("div", { className: "border-t bg-gray-50 p-3", children: [_jsxs("div", { className: "text-dark truncate text-xs font-medium", children: ["Selected: ", selectedImage.name] }), _jsx("div", { className: "mt-1 text-xs text-gray-500", children: "Click to select media item" })] }))] }));
+                                : "", searchQuery.trim() && " found"] }), _jsxs("div", { className: "flex gap-1", children: [_jsx(SimpleIconButton, { icon: _jsx(Grid3X3, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Grid View", size: "large", selected: viewMode === "grid", onClick: () => setViewMode("grid") }), _jsx(SimpleIconButton, { icon: _jsx(Square, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Large Grid View", size: "large", selected: viewMode === "large-grid", onClick: () => setViewMode("large-grid") }), _jsx(SimpleIconButton, { icon: _jsx(List, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "List View", size: "large", selected: viewMode === "list", onClick: () => setViewMode("list") }), _jsx(SimpleIconButton, { icon: _jsx(Upload, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: !canCreate
+                                    ? "You don't have permission to upload to this folder."
+                                    : "Upload Files", size: "large", className: "ml-2", disabled: uploading || !currentFolderId || !canCreate, onClick: handleUpload }), _jsx(SimpleIconButton, { icon: _jsx(RefreshCw, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: "Refresh", size: "large", className: "ml-1", onClick: () => void loadMediaFiles(true) })] })] }), _jsx("div", { className: "border-b bg-white px-4 py-2", children: _jsx(SearchInput, { value: searchQuery, onChange: setSearchQuery, placeholder: "Search media files...", loading: searching, onClear: () => setSearchQuery("") }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden bg-white", children: _jsxs("div", { className: "flex h-full min-h-0", children: [_jsx("div", { className: "min-w-0 flex-1 overflow-x-hidden overflow-y-auto bg-white", style: {
+                                scrollbarWidth: "thin",
+                                scrollbarColor: "var(--color-neutral-grey-50) var(--color-neutral-grey-5)",
+                            }, children: renderContent }), _jsx("div", { className: "bg-neutral-grey-5/30 hidden w-72 shrink-0 overflow-y-auto border-l lg:block", children: _jsx(Preview, { selectedImage: selectedImage, onReplaceMedia: (image, file) => {
+                                    if (isMediaFolderItem(image))
+                                        return;
+                                    void replaceMediaFile(image, file);
+                                } }) })] }) }), selectedImage && (_jsxs("div", { className: "bg-neutral-grey-5 border-t p-3 lg:hidden", children: [_jsxs("div", { className: "text-neutral-grey-100 truncate text-xs font-medium", children: ["Selected: ", selectedImage.name] }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: "Click to select media item" })] }))] }));
 }
 //# sourceMappingURL=MediaFolderBrowser.js.map