@parhelia/core 0.4.12825 → 0.4.12872

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

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useMemo, useCallback, memo, } from "react";
+import { useEffect, useEffectEvent, useState, useRef, useMemo, useCallback, memo, } from "react";
 import { cn } from "../../lib/utils";
 import { SimpleIconButton } from "../ui/SimpleIconButton";
-import { Grid3X3, Square, List, Upload, RefreshCw, Loader2, FileIcon, } from "lucide-react";
+import { ItemNameDialog, } from "../ui/ItemNameDialogNew";
+import { Splitter } from "../ui/Splitter";
+import { useMediaQuery } from "../client/hooks/useMediaQuery";
+import { Grid3X3, Square, List, Upload, RefreshCw, Loader2, FileIcon, ArrowUp, Folder, FolderPlus, } from "lucide-react";
 import { useEditContext } from "../client/editContext";
 import { getChildren } from "../services/contentService";
 import { toast } from "sonner";
@@ -13,12 +16,17 @@ import { Spinner } from "../ui/Spinner";
 import { showItemContextMenu } from "../itemContextMenu";
 import { replaceMediaItemWithFile, uploadMediaFiles } from "./mediaUpload";
 import { Preview } from "./Preview";
+import { MediaDetailsView } from "./MediaDetailsView";
+import { useMediaFolderDrag } from "./useMediaFolderDrag";
+import { MEDIA_ITEM_DRAG_MIME } from "./mediaItemDrag";
+import { getImageFilesFromDataTransfer } from "../utils/dataTransferImages";
 import { getMediaFileTypeLabel } from "./mediaFileType";
 import { parseSitecoreDate } from "../utils/sitecoreDate";
 import { formatDate } from "../utils";
 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 MEDIA_ROOT_ITEM_ID = "3d6658d8-a0bf-4e75-b3e2-d050fabcf4e1";
 const isMediaFolderItem = (item) => [MEDIA_FOLDER_TEMPLATE_ID, MEDIA_NODE_TEMPLATE_ID].includes(normalizeId(item.templateId));
 const getMediaItemTypeLabel = (thumbnail) => {
     if (isMediaFolderItem(thumbnail))
@@ -42,11 +50,25 @@ function MediaMetaCell({ date, author }) {
     return (_jsxs("div", { className: LIST_META_COLUMN, children: [_jsx("div", { className: "text-neutral-grey-100 truncate text-xs", children: parsedDate ? formatDate(parsedDate) : "—" }), _jsx("div", { className: "text-neutral-grey-50 mt-1 truncate text-xs", title: author || undefined, children: authorLabel ?? "—" })] }));
 }
 // Memoized thumbnail item component to prevent unnecessary re-renders
-const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, onReplaceMedia, viewMode, }) => {
+const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, onReplaceMedia, viewMode, itemDragProps, isDropTarget, }) => {
     const hasImage = !!thumbnail.thumbUrl;
+    const selectionProps = {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": thumbnail.name,
+        "aria-pressed": isSelected,
+        onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onClick(event);
+            }
+        },
+    };
     const iconSrc = thumbnail.largeIcon || thumbnail.icon;
     const [isReplaceDragOver, setIsReplaceDragOver] = useState(false);
     const isImageFileDrag = (event) => {
+        if (Array.from(event.dataTransfer.types).includes(MEDIA_ITEM_DRAG_MIME))
+            return false;
         const hasFiles = Array.from(event.dataTransfer.types).includes("Files");
         const items = Array.from(event.dataTransfer.items);
         if (items.length > 0) {
@@ -88,13 +110,34 @@ const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, onR
             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 }) }), _jsx("span", { className: "text-highlight-100 text-xs font-medium", children: "Replace" })] })) : null;
+    const dragProps = {
+        ...itemDragProps,
+        onDragOver: (event) => {
+            itemDragProps.onDragOver?.(event);
+            if (!event.defaultPrevented)
+                handleFileDrag(event);
+        },
+        onDragLeave: (event) => {
+            itemDragProps.onDragLeave?.(event);
+            handleFileDragLeave(event);
+        },
+        onDragEnd: (event) => {
+            itemDragProps.onDragEnd?.(event);
+            setIsReplaceDragOver(false);
+        },
+        onDrop: (event) => {
+            itemDragProps.onDrop?.(event);
+            if (!event.defaultPrevented)
+                handleDrop(event);
+        },
+    };
+    const replaceDropOverlay = isReplaceDragOver || isDropTarget ? (_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 }) }), _jsx("span", { className: "text-highlight-100 text-xs font-medium", children: isDropTarget ? "Move into folder" : "Replace" })] })) : null;
     if (viewMode === "list") {
         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, { strokeWidth: 1, 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", title: thumbnail.name, children: thumbnail.name }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: getMediaItemTypeLabel(thumbnail) })] }), _jsx(MediaMetaCell, { date: thumbnail.created, author: thumbnail.createdBy }), _jsx(MediaMetaCell, { date: thumbnail.updated, author: thumbnail.updatedBy }), replaceDropOverlay] }));
+                    : "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, ...selectionProps, onContextMenu: onContextMenu, onDragEnter: handleFileDrag, onDragOver: handleFileDrag, onDragLeave: handleFileDragLeave, onDragEnd: () => setIsReplaceDragOver(false), onDrop: handleDrop, ...dragProps, 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", { draggable: false, style: { pointerEvents: "none" }, src: thumbnail.thumbUrl, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { draggable: false, style: { pointerEvents: "none", width: "32px", height: "32px" }, src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80" })) : (_jsx(FileIcon, { strokeWidth: 1, 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", title: thumbnail.name, children: thumbnail.name }), _jsx("div", { className: "text-neutral-grey-50 mt-1 text-xs", children: getMediaItemTypeLabel(thumbnail) })] }), _jsx(MediaMetaCell, { date: thumbnail.created, author: thumbnail.createdBy }), _jsx(MediaMetaCell, { date: thumbnail.updated, author: thumbnail.updatedBy }), replaceDropOverlay] }));
     }
     const isLarge = viewMode === "large-grid";
     const gridSrc = isLarge ? thumbnail.previewUrl : thumbnail.thumbUrl;
@@ -102,12 +145,18 @@ const ThumbnailItem = memo(({ thumbnail, isSelected, onClick, onContextMenu, onR
             ? "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, { strokeWidth: 1, 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] }));
+                : "", "border-neutral-grey-10 relative cursor-pointer overflow-hidden rounded-lg border bg-white transition-all duration-200 hover:scale-105"), onClick: onClick, ...selectionProps, onContextMenu: onContextMenu, onDragEnter: handleFileDrag, onDragOver: handleFileDrag, onDragLeave: handleFileDragLeave, onDragEnd: () => setIsReplaceDragOver(false), onDrop: handleDrop, ...dragProps, children: [_jsx("div", { className: "flex aspect-square items-center justify-center bg-white", children: gridSrc ? (_jsx("img", { draggable: false, style: { pointerEvents: "none" }, src: gridSrc, alt: thumbnail.name, className: "max-h-full max-w-full object-contain" })) : iconSrc ? (_jsx("img", { draggable: false, style: { pointerEvents: "none", width: "32px", height: "32px" }, src: iconSrc, alt: thumbnail.name, className: "object-contain opacity-80" })) : (_jsx(FileIcon, { strokeWidth: 1, 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", canCreate = true, }) {
     const [viewMode, setViewMode] = useState("grid");
+    const rootRef = useRef(null);
+    const uploadInProgressRef = useRef(false);
+    const hasSideBySideDetails = useMediaQuery("(min-width: 1024px)");
     const [currentFolderId, setCurrentFolderId] = useState(folderId);
+    const currentLocationRef = useRef("");
+    currentLocationRef.current = `${currentFolderId}:${language}`;
+    const [folderNavigation, setFolderNavigation] = useState();
     const [images, setImages] = useState([]);
     const imagesRef = useRef(images);
     const [selectedImage, setSelectedImage] = useState();
@@ -116,6 +165,8 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
     const lastSelectedImageId = useRef(undefined);
     const [loading, setLoading] = useState(false);
     const [uploading, setUploading] = useState(false);
+    const [creatingFolder, setCreatingFolder] = useState(false);
+    const creatingFolderRef = useRef(false);
     const [isDragOver, setIsDragOver] = useState(false);
     const dragDepthRef = useRef(0);
     const activeLoadKeyRef = useRef(undefined);
@@ -126,6 +177,60 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
     const [searching, setSearching] = useState(false);
     const editContext = useEditContext();
     const sessionId = editContext?.sessionId;
+    useEffect(() => {
+        const repository = editContext?.itemsRepository;
+        if (!repository || !currentFolderId)
+            return;
+        let cancelled = false;
+        setFolderNavigation(undefined);
+        void (async () => {
+            try {
+                const folder = await repository.getItem({
+                    id: currentFolderId,
+                    language,
+                    version: 0,
+                });
+                if (cancelled || !folder)
+                    return;
+                setFolderNavigation({ folder });
+                const parent = folder.parentId && normalizeId(folder.id) !== MEDIA_ROOT_ITEM_ID
+                    ? await repository.getItem({
+                        id: folder.parentId,
+                        language,
+                        version: 0,
+                    })
+                    : undefined;
+                if (!cancelled &&
+                    parent &&
+                    (isMediaFolderItem(parent) ||
+                        normalizeId(parent.id) === MEDIA_ROOT_ITEM_ID)) {
+                    setFolderNavigation({ folder, parent });
+                }
+            }
+            catch (error) {
+                console.error("Error loading media folder navigation:", error);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [currentFolderId, language, editContext?.itemsRepository]);
+    const currentFolder = folderNavigation?.folder.id.toLowerCase() === currentFolderId.toLowerCase()
+        ? folderNavigation.folder
+        : undefined;
+    const parentFolder = currentFolder ? folderNavigation?.parent : undefined;
+    // Files go into the browsed folder only once the folder's own permission has
+    // been read: until its item is in, nothing is uploaded into it. (A paste
+    // right after opening a folder used to upload before its permission was
+    // known.)
+    const folderUpload = !canCreate
+        ? "denied"
+        : !currentFolder
+            ? "unknown"
+            : currentFolder.canCreate
+                ? "allowed"
+                : "denied";
+    const canUploadHere = folderUpload === "allowed";
     useEffect(() => {
         setCurrentFolderId(folderId);
         setSelectedImage(undefined);
@@ -166,6 +271,7 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
                 return;
             setImages(children || []);
             lastLoadedKeyRef.current = loadKey;
+            return children;
         }
         catch (error) {
             console.error("Error loading media files:", error);
@@ -237,6 +343,18 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
             setSearching(false);
         }
     }, 600);
+    const navigateToFolder = useCallback((id) => {
+        handleSearch.cancel();
+        setCurrentFolderId(id);
+        setSelectedImage(undefined);
+        selectedImageRef.current = undefined;
+        setSelectedImageIds([]);
+        lastSelectedImageId.current = undefined;
+        setSearchQuery("");
+        searchQueryRef.current = "";
+        setSearchResults([]);
+        setSearching(false);
+    }, [handleSearch]);
     useEffect(() => {
         if (searchQuery.trim()) {
             handleSearch(searchQuery);
@@ -278,7 +396,9 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
                 }
             }
             const shouldRefreshVisibleMedia = changes.some((change) => {
-                if (change.action === "delete")
+                // Typing in the details panel should not reload the thumbnail grid.
+                if (change.action === "delete" ||
+                    change.source === "local-field-update")
                     return false;
                 if (normalizeId(change.item.id) === normalizedCurrentFolderId &&
                     change.changes.children) {
@@ -324,81 +444,46 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
         setSelectedImageIds([thumbnail.id]);
         lastSelectedImageId.current = thumbnail.id;
     }, [displayImages]);
-    const handleClick = useCallback(async (thumbnail, ev) => {
+    const handleClick = useCallback((thumbnail, ev) => {
         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
-            const contextMenuThumbnail = thumbnail;
-            const itemLanguage = contextMenuThumbnail.language || language;
-            const itemVersion = contextMenuThumbnail.version ?? 0;
-            const slots = editContext.editorSlots;
-            const activeSlotId = editContext.activeSlotId;
-            // If the user clicked inside a non-active slot, `activeSlotId` may still point
-            // to a different slot. Infer the host slot from the DOM and treat that as the base.
-            const hostSlotId = ev.currentTarget
-                .closest('[data-editor-slot="true"]')
-                ?.getAttribute("data-slotid") ?? null;
-            const baseSlotId = hostSlotId || activeSlotId;
-            // Proactively activate the host slot so follow-up UI actions behave consistently.
-            if (hostSlotId && hostSlotId !== activeSlotId) {
-                editContext.setActiveSlot(hostSlotId);
-            }
-            // Check if item is already open in any slot - if so, switch to that slot instead of opening a new one
-            const existingSlot = slots.find((s) => s.itemDescriptor.id === thumbnail.id &&
-                s.itemDescriptor.language === itemLanguage &&
-                s.itemDescriptor.version === itemVersion);
-            if (existingSlot) {
-                // Item is already open - just switch to that slot
-                editContext.setActiveSlot(existingSlot.slotId);
-                // Ensure selectedImage is still set
-                if (selectedImageRef.current?.id !== thumbnail.id) {
-                    setSelectedImage(thumbnail);
-                    selectedImageRef.current = thumbnail;
-                }
-                return;
-            }
-            // Find the slot next to the active one
-            let nextSlotId = null;
-            if (baseSlotId && slots.length > 0) {
-                const baseIndex = slots.findIndex((s) => s.slotId === baseSlotId);
-                if (baseIndex !== -1 && baseIndex < slots.length - 1) {
-                    // There's a slot to the right of the clicked (or active) one
-                    nextSlotId = slots[baseIndex + 1]?.slotId ?? null;
-                }
-            }
-            // Use setTimeout to defer loadItem slightly, allowing selection to render first
-            await new Promise((resolve) => setTimeout(resolve, 0));
-            await editContext.loadItem({
-                id: thumbnail.id,
-                language: itemLanguage,
-                version: itemVersion,
-            }, nextSlotId
-                ? {
-                    targetSlotId: nextSlotId,
-                }
-                : {
-                    openInNewSlot: true,
-                });
-            // Ensure selectedImage is still set after loadItem (in case re-render reset it)
-            if (selectedImageRef.current?.id !== thumbnail.id) {
-                setSelectedImage(thumbnail);
-                selectedImageRef.current = thumbnail;
-            }
+            navigateToFolder(thumbnail.id);
         }
-    }, [editContext, language, updateSelection]);
+    }, [updateSelection, navigateToFolder]);
+    const openFullItem = useCallback((item, event) => {
+        if (!editContext)
+            return;
+        const hostSlotId = event.currentTarget
+            .closest('[data-editor-slot="true"]')
+            ?.getAttribute("data-slotid");
+        if (hostSlotId && hostSlotId !== editContext.activeSlotId)
+            editContext.setActiveSlot(hostSlotId);
+        void editContext
+            .loadItem(item, { openInNewSlot: true })
+            .catch(editContext.showErrorToast);
+    }, [editContext]);
+    const closeDetails = useCallback(() => {
+        setSelectedImage(undefined);
+        selectedImageRef.current = undefined;
+        setSelectedImageIds([]);
+        lastSelectedImageId.current = undefined;
+    }, []);
+    const mediaDrag = useMediaFolderDrag({
+        language,
+        images: displayImages,
+        selectedIds: selectedImageIds,
+        disabled: uploading || creatingFolder,
+        onMoved: (items) => {
+            const movedIds = new Set(items.map((item) => normalizeId(item.id)));
+            if (movedIds.has(normalizeId(selectedImageRef.current?.id)))
+                closeDetails();
+            else
+                setSelectedImageIds((ids) => ids.filter((id) => !movedIds.has(normalizeId(id))));
+            refreshVisibleMedia();
+        },
+    });
     const handleContextMenu = useCallback((thumbnail, ev) => {
         const itemIds = selectedImageIds.includes(thumbnail.id)
             ? selectedImageIds
@@ -426,11 +511,48 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
             },
         });
     }, [editContext, language, selectedImageIds]);
+    const handleCreateFolder = async () => {
+        if (!editContext ||
+            !canCreate ||
+            !currentFolder?.canCreate ||
+            creatingFolderRef.current)
+            return;
+        const parent = currentFolder.descriptor;
+        creatingFolderRef.current = true;
+        setCreatingFolder(true);
+        try {
+            const name = await editContext.openDialog(ItemNameDialog, {
+                title: "New media folder",
+                message: `Create a folder in ${currentFolder.name}.`,
+                headerIcon: _jsx(FolderPlus, { className: "h-5 w-5" }),
+                parentItem: parent,
+            });
+            if (!name?.trim())
+                return;
+            const created = await editContext.operations.createItem(parent, MEDIA_FOLDER_TEMPLATE_ID, name.trim());
+            if (created) {
+                navigateToFolder(created.id);
+                toast.success(`Folder "${name.trim()}" created.`);
+            }
+        }
+        catch (error) {
+            editContext.showErrorToast(error);
+        }
+        finally {
+            creatingFolderRef.current = false;
+            setCreatingFolder(false);
+        }
+    };
+    const refuseUpload = useCallback(() => {
+        toast.error(folderUpload === "unknown"
+            ? "The folder is still loading. Try again in a moment."
+            : "You don't have permission to upload to this folder.");
+    }, [folderUpload]);
     const handleUpload = async () => {
         if (!currentFolderId)
             return;
-        if (!canCreate) {
-            toast.error("You don't have permission to upload to this folder.");
+        if (!canUploadHere) {
+            refuseUpload();
             return;
         }
         const fileInput = document.createElement("input");
@@ -445,14 +567,17 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
         };
         fileInput.click();
     };
-    const uploadFiles = useCallback(async (files) => {
+    const uploadFiles = useCallback(async (files, selectUploaded = false) => {
         if (!currentFolderId || files.length === 0)
             return;
-        if (!canCreate) {
-            toast.error("You don't have permission to upload to this folder.");
+        if (uploading || uploadInProgressRef.current)
+            return;
+        if (!canUploadHere) {
+            refuseUpload();
             return;
         }
         try {
+            uploadInProgressRef.current = true;
             setUploading(true);
             const uploaded = await uploadMediaFiles({
                 files,
@@ -460,8 +585,24 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
                 editContext,
                 language,
             });
-            if (uploaded.length > 0) {
-                await loadMediaFiles(true);
+            const location = `${currentFolderId}:${language}`;
+            if (uploaded.length > 0 && currentLocationRef.current === location) {
+                const children = await loadMediaFiles(true);
+                if (selectUploaded && currentLocationRef.current === location) {
+                    const uploadedId = uploaded[uploaded.length - 1]?.id;
+                    const selected = children?.find((item) => normalizeId(item.id) === normalizeId(uploadedId));
+                    if (selected) {
+                        handleSearch.cancel();
+                        searchQueryRef.current = "";
+                        setSearchQuery("");
+                        setSearchResults([]);
+                        setSearching(false);
+                        selectedImageRef.current = selected;
+                        setSelectedImage(selected);
+                        setSelectedImageIds([selected.id]);
+                        lastSelectedImageId.current = selected.id;
+                    }
+                }
             }
         }
         catch (error) {
@@ -469,9 +610,60 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
             toast.error("Failed to upload files. Please try again.");
         }
         finally {
+            uploadInProgressRef.current = false;
             setUploading(false);
         }
-    }, [currentFolderId, canCreate, editContext, language, loadMediaFiles]);
+    }, [
+        currentFolderId,
+        canUploadHere,
+        refuseUpload,
+        editContext,
+        language,
+        loadMediaFiles,
+        handleSearch,
+        uploading,
+    ]);
+    // An Effect Event: a paste answers with what the last commit shows (the
+    // browsed folder, its permission), not with the render whose passive effect
+    // happened to register the listener last.
+    const onPaste = useEffectEvent((event) => {
+        const root = rootRef.current;
+        if (!root || event.defaultPrevented)
+            return;
+        if (root.checkVisibility && !root.checkVisibility())
+            return;
+        const target = event.target instanceof Element ? event.target : null;
+        const ownDialog = root.closest('[role="dialog"]');
+        const targetDialog = target?.closest('[role="dialog"]');
+        if (targetDialog && targetDialog !== ownDialog)
+            return;
+        // Only the focused browser (or the active slot with body focus) owns paste.
+        if (!target || !root.contains(target)) {
+            if (target !== document.body && target !== document.documentElement)
+                return;
+            if (document.querySelector('[role="dialog"]'))
+                return;
+            const slot = root.closest('[data-editor-slot="true"]');
+            if (slot &&
+                slot.getAttribute("data-slotid") !== editContext?.activeSlotId)
+                return;
+        }
+        // Leave rich-text editors and other paste handlers in control of their content.
+        if (target?.closest('[contenteditable="true"]'))
+            return;
+        const files = getImageFilesFromDataTransfer(event.clipboardData);
+        if (!files.length)
+            return;
+        event.preventDefault();
+        if (creatingFolder || mediaDrag.moving)
+            return;
+        void uploadFiles(files, true);
+    });
+    useEffect(() => {
+        const listener = (event) => onPaste(event);
+        document.addEventListener("paste", listener);
+        return () => document.removeEventListener("paste", listener);
+    }, []);
     const replaceMediaFile = useCallback(async (thumbnail, file) => {
         if (isMediaFolderItem(thumbnail) || uploading)
             return;
@@ -498,25 +690,26 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
             setUploading(false);
         }
     }, [editContext, language, refreshVisibleMedia, uploading]);
-    const isFileDrag = (event) => Array.from(event.dataTransfer.types).includes("Files");
+    const isFileDrag = (event) => !Array.from(event.dataTransfer.types).includes(MEDIA_ITEM_DRAG_MIME) &&
+        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) {
+        if (currentFolderId && !uploading && canUploadHere) {
             setIsDragOver(true);
         }
-    }, [currentFolderId, uploading, canCreate]);
+    }, [currentFolderId, uploading, canUploadHere]);
     const handleDragOver = useCallback((event) => {
         if (!isFileDrag(event))
             return;
         event.preventDefault();
         event.stopPropagation();
         event.dataTransfer.dropEffect =
-            currentFolderId && !uploading && canCreate ? "copy" : "none";
-    }, [currentFolderId, uploading, canCreate]);
+            currentFolderId && !uploading && canUploadHere ? "copy" : "none";
+    }, [currentFolderId, uploading, canUploadHere]);
     const handleDragLeave = useCallback((event) => {
         if (!isFileDrag(event))
             return;
@@ -534,13 +727,13 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
         event.stopPropagation();
         dragDepthRef.current = 0;
         setIsDragOver(false);
-        if (!currentFolderId || uploading || !canCreate)
+        if (!currentFolderId || uploading || !canUploadHere)
             return;
         const files = Array.from(event.dataTransfer.files);
         if (files.length > 0) {
             void uploadFiles(files);
         }
-    }, [currentFolderId, uploading, canCreate, uploadFiles]);
+    }, [currentFolderId, uploading, canUploadHere, uploadFiles]);
     // Create stable click handlers map to prevent ThumbnailItem re-renders
     const clickHandlers = useMemo(() => {
         const handlers = new Map();
@@ -561,37 +754,40 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
                 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), onReplaceMedia: isMediaFolderItem(t)
                     ? undefined
-                    : (file) => void replaceMediaFile(t, file), viewMode: "grid" }, t.id))) }));
+                    : (file) => void replaceMediaFile(t, file), viewMode: "grid", itemDragProps: mediaDrag.getItemProps(t, isMediaFolderItem(t)), isDropTarget: mediaDrag.dropTarget === t.id }, t.id))) }));
     }, [
         displayImages,
         selectedImageIds,
         clickHandlers,
         contextMenuHandlers,
         replaceMediaFile,
+        mediaDrag,
     ]);
     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), onReplaceMedia: isMediaFolderItem(t)
                     ? undefined
-                    : (file) => void replaceMediaFile(t, file), viewMode: "large-grid" }, t.id))) }));
+                    : (file) => void replaceMediaFile(t, file), viewMode: "large-grid", itemDragProps: mediaDrag.getItemProps(t, isMediaFolderItem(t)), isDropTarget: mediaDrag.dropTarget === t.id }, t.id))) }));
     }, [
         displayImages,
         selectedImageIds,
         clickHandlers,
         contextMenuHandlers,
         replaceMediaFile,
+        mediaDrag,
     ]);
     const ListView = useMemo(() => {
         return (_jsxs("div", { className: "flex flex-col gap-1 p-2", children: [_jsxs("div", { className: "text-neutral-grey-50 sticky top-0 z-[1] flex items-center gap-3 border border-transparent bg-white px-3 pb-1 text-[10px] font-medium tracking-wider uppercase", children: [_jsx("div", { className: "w-16 shrink-0" }), _jsx("div", { className: "min-w-0 flex-1", children: "Name" }), _jsx("div", { className: LIST_META_COLUMN, children: "Created" }), _jsx("div", { className: LIST_META_COLUMN, children: "Modified" })] }), 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)))] }));
+                        : (file) => void replaceMediaFile(t, file), viewMode: "list", itemDragProps: mediaDrag.getItemProps(t, isMediaFolderItem(t)), isDropTarget: mediaDrag.dropTarget === t.id }, t.id)))] }));
     }, [
         displayImages,
         selectedImageIds,
         clickHandlers,
         contextMenuHandlers,
         replaceMediaFile,
+        mediaDrag,
     ]);
     const renderContent = useMemo(() => {
         const isDisplayingSearch = searchQuery.trim();
@@ -624,17 +820,41 @@ export function MediaFolderBrowser({ folderId, language = "en", canCreate = true
         LargeGridView,
         ListView,
     ]);
-    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, { strokeWidth: 1, 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(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
+    const detailsOpen = !!selectedImage && !isMediaFolderItem(selectedImage);
+    const mediaList = (_jsx("div", { className: "h-full min-w-0 overflow-x-hidden overflow-y-auto bg-white", style: {
+            scrollbarWidth: "thin",
+            scrollbarColor: "var(--color-neutral-grey-50) var(--color-neutral-grey-5)",
+        }, children: renderContent }));
+    const mediaDetails = (_jsx("div", { className: "h-full overflow-y-auto bg-white", children: selectedImage && !isMediaFolderItem(selectedImage) ? (_jsx(MediaDetailsView, { media: selectedImage, language: language, busy: uploading, onClose: closeDetails, onOpenFullItem: openFullItem, onReplaceMedia: (file) => void replaceMediaFile(selectedImage, file) }, `${selectedImage.id}:${selectedImage.language || language}:${selectedImage.version ?? 0}`)) : (_jsx(Preview, {})) }));
+    return (_jsxs("div", { className: "relative flex h-full flex-col", ref: rootRef, onDragEndCapture: () => {
+            dragDepthRef.current = 0;
+            setIsDragOver(false);
+        }, onDropCapture: () => {
+            dragDepthRef.current = 0;
+            setIsDragOver(false);
+        }, 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, { strokeWidth: 1, className: "h-8 w-8" }), _jsx("span", { className: "text-sm font-medium", children: "Drop files to upload them here" })] }) })), _jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-2 border-b bg-white px-4 py-2", detailsOpen && "max-lg:hidden"), children: [_jsxs("nav", { "aria-label": "Media folder navigation", className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx(SimpleIconButton, { type: "button", icon: _jsx(ArrowUp, { className: "h-4 w-4", strokeWidth: 1 }), label: "Parent folder", className: cn("gap-2 px-2 py-1.5 text-xs", mediaDrag.dropTarget === parentFolder?.id &&
+                                    parentFolder &&
+                                    "bg-highlight-10 ring-highlight-100 ring-2"), disabled: !parentFolder || uploading, ...(parentFolder ? mediaDrag.getDropProps(parentFolder) : {}), onClick: () => parentFolder && navigateToFolder(parentFolder.id), children: "Parent folder" }), currentFolder && (_jsxs("div", { className: "text-neutral-grey-100 flex min-w-0 items-center gap-2 text-xs", title: currentFolder.path, "aria-current": "location", children: [_jsx(Folder, { className: "h-4 w-4 shrink-0", strokeWidth: 1 }), _jsx("span", { className: "truncate font-medium", children: currentFolder.name })] })), _jsxs("span", { className: "text-neutral-grey-50 shrink-0 text-xs", 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(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: creatingFolder ? (_jsx(Loader2, { className: "h-4 w-4 animate-spin" })) : (_jsx(FolderPlus, { className: "h-4 w-4", strokeWidth: 1 })), label: "New folder", className: "ml-2 gap-1.5 px-2", disabled: creatingFolder ||
+                                    uploading ||
+                                    !canCreate ||
+                                    !currentFolder?.canCreate, onClick: () => void handleCreateFolder(), children: _jsx("span", { className: "text-xs", children: "New folder" }) }), _jsx(SimpleIconButton, { icon: _jsx(Upload, { className: "h-6 w-6 p-1", strokeWidth: 1 }), label: folderUpload === "denied"
                                     ? "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" })] }))] }));
+                                    : "Upload Files", size: "large", className: "ml-2", disabled: uploading || !currentFolderId || !canUploadHere, "data-testid": "media-folder-upload-button", 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: cn("border-b bg-white px-4 py-2", detailsOpen && "max-lg:hidden"), 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: hasSideBySideDetails ? (_jsx(Splitter, { localStorageKey: "media-browser-details-splitter", direction: "horizontal", panels: [
+                        {
+                            name: "media-list",
+                            defaultSize: "auto",
+                            minSize: 240,
+                            content: mediaList,
+                        },
+                        {
+                            name: "media-details",
+                            defaultSize: 384,
+                            maxDefaultFraction: 0.5,
+                            minSize: 280,
+                            content: mediaDetails,
+                        },
+                    ] })) : (_jsxs("div", { className: "h-full", children: [_jsx("div", { className: cn("h-full", detailsOpen && "hidden"), children: mediaList }), detailsOpen && (_jsx("div", { className: "absolute inset-0 z-10 bg-white", children: mediaDetails }))] })) })] }));
 }
 //# sourceMappingURL=MediaFolderBrowser.js.map