@jhits/plugin-images 0.0.11 → 0.0.12

package/src/components/ImageBrowserModal.tsx

@@ -0,0 +1,837 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Upload, Search, X, Image as ImageIcon, Check, Link as LinkIcon, Loader2, Grid3x3, Grid } from 'lucide-react';
+import type { ImageMetadata } from '../types';
+
+// Masonry Grid Component that maintains item positions
+function MasonryGrid({
+    images,
+    selectedImageId,
+    onSelectImage,
+    onClose,
+    fixedColumns,
+}: {
+    images: ImageMetadata[];
+    selectedImageId?: string;
+    onSelectImage: (image: ImageMetadata) => void;
+    onClose: () => void;
+    fixedColumns?: number;
+}) {
+    
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [columnCount, setColumnCount] = useState(fixedColumns || 2);
+
+    // Calculate column count based on screen size (only if not fixed)
+    useEffect(() => {
+        if (fixedColumns) {
+            setColumnCount(fixedColumns);
+            return;
+        }
+
+        const updateColumnCount = () => {
+            const width = window.innerWidth;
+            let cols = 2;
+            if (width >= 1280) cols = 6;
+            else if (width >= 1024) cols = 5;
+            else if (width >= 768) cols = 4;
+            else if (width >= 640) cols = 3;
+            setColumnCount(cols);
+        };
+
+        updateColumnCount();
+        window.addEventListener('resize', updateColumnCount);
+        return () => window.removeEventListener('resize', updateColumnCount);
+    }, [fixedColumns]);
+
+    // Distribute images into columns using stable round-robin assignment
+    // This ensures items NEVER move once rendered - they always go to the same column
+    // based on their index, preventing reshuffling when new items are added
+    const columns = useMemo(() => {
+        const cols: ImageMetadata[][] = Array.from({ length: columnCount }, () => []);
+
+        images.forEach((image, index) => {
+            // Round-robin: image at index N always goes to column (N % columnCount)
+            // This guarantees stable positions - items never move columns
+            const columnIndex = index % columnCount;
+            cols[columnIndex].push(image);
+        });
+
+        return cols;
+    }, [images, columnCount]);
+
+    return (
+        <div 
+            ref={containerRef}
+            className="grid gap-4"
+            style={{
+                gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+            }}
+        >
+            {columns.map((columnImages, columnIndex) => (
+                <div key={columnIndex} className="flex flex-col gap-4">
+                    {columnImages.map((image, imageIndex) => {
+                        // Normalize both selectedImageId and image identifiers for matching
+                        let normalizedSelectedId = selectedImageId;
+                        let normalizedImageUrl = image.url;
+                        let normalizedImageId = image.id;
+                        let normalizedImageFilename = image.filename;
+                        
+                        // Extract filename from selectedImageId if it's a URL
+                        if (selectedImageId) {
+                            if (selectedImageId.includes('/')) {
+                                const urlParts = selectedImageId.split('/');
+                                normalizedSelectedId = urlParts[urlParts.length - 1]?.split('?')[0] || selectedImageId;
+                            }
+                        }
+                        
+                        // Normalize image URL (remove protocol, domain, query params)
+                        if (image.url) {
+                            // Remove protocol and domain if present
+                            normalizedImageUrl = image.url.replace(/^https?:\/\/[^\/]+/, '');
+                            // Remove query params
+                            normalizedImageUrl = normalizedImageUrl.split('?')[0];
+                            // Extract just the filename
+                            const urlParts = normalizedImageUrl.split('/');
+                            normalizedImageUrl = urlParts[urlParts.length - 1] || normalizedImageUrl;
+                        }
+                        
+                        // Check if image is selected by comparing all possible combinations
+                        const isSelected = Boolean(
+                            selectedImageId && (
+                                // Direct matches
+                                selectedImageId === image.id ||
+                                selectedImageId === image.url ||
+                                selectedImageId === image.filename ||
+                                // Normalized filename matches
+                                normalizedSelectedId === image.id ||
+                                normalizedSelectedId === image.filename ||
+                                normalizedSelectedId === normalizedImageUrl ||
+                                normalizedSelectedId === normalizedImageId ||
+                                normalizedSelectedId === normalizedImageFilename ||
+                                // URL contains/ends with matches
+                                (image.url && selectedImageId && (
+                                    image.url.includes(selectedImageId) ||
+                                    image.url.endsWith(selectedImageId) ||
+                                    selectedImageId.includes(image.url) ||
+                                    selectedImageId.endsWith(image.url) ||
+                                    (normalizedSelectedId && (
+                                        image.url.includes(normalizedSelectedId) ||
+                                        image.url.endsWith(normalizedSelectedId)
+                                    ))
+                                )) ||
+                                // Filename matches
+                                (image.filename && (
+                                    image.filename === normalizedSelectedId ||
+                                    normalizedSelectedId === image.filename
+                                )) ||
+                                // ID matches
+                                (image.id && (
+                                    image.id === normalizedSelectedId ||
+                                    normalizedSelectedId === image.id
+                                ))
+                            )
+                        );
+                        
+                        // Use a unique key combining column index, image index, and image id
+                        // This ensures uniqueness even if image.id is duplicated
+                        const uniqueKey = `${columnIndex}-${imageIndex}-${image.id}-${image.url}`;
+                        
+                        return (
+                            <ImageCard
+                                key={uniqueKey}
+                                image={image}
+                                isSelected={isSelected}
+                                onSelect={() => { 
+                                    onSelectImage(image); 
+                                    onClose(); 
+                                }}
+                            />
+                        );
+                    })}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+// Image Card Component for Masonry Layout
+function ImageCard({ 
+    image, 
+    isSelected, 
+    onSelect 
+}: { 
+    image: ImageMetadata; 
+    isSelected: boolean; 
+    onSelect: () => void;
+}) {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    const imgRef = useRef<HTMLImageElement>(null);
+
+    useEffect(() => {
+        // Check if image is already loaded (cached)
+        const img = imgRef.current;
+        if (img) {
+            if (img.complete && img.naturalWidth > 0) {
+                setImageLoaded(true);
+            } else {
+                // Fallback: if image doesn't load within 5 seconds, show it anyway
+                const timeout = setTimeout(() => {
+                    setImageLoaded(true);
+                }, 5000);
+                
+                return () => clearTimeout(timeout);
+            }
+        }
+    }, [image.url]);
+
+    const handleLoad = () => {
+        setImageLoaded(true);
+        setImageError(false);
+    };
+
+    const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+        console.error('[ImageCard] Image failed to load:', image.url, e);
+        setImageError(true);
+        setImageLoaded(false);
+    };
+
+    return (
+        <button
+            onClick={onSelect}
+            className={`group relative w-full rounded-xl overflow-hidden bg-neutral-100 dark:bg-neutral-800 transition-all duration-200 active:scale-[0.98] shadow-sm hover:shadow-lg block ${
+                isSelected ? 'ring-2 ring-primary ring-offset-1 ring-offset-white dark:ring-offset-neutral-900' : ''
+            }`}
+        >
+                {!imageError ? (
+                    <div className="relative w-full group/image">
+                        <img
+                            ref={imgRef}
+                            src={image.url}
+                            alt={image.filename}
+                            onLoad={handleLoad}
+                            onError={handleError}
+                            className={`w-full h-auto object-cover transition-all duration-300 group-hover/image:scale-105 block ${!imageLoaded ? 'opacity-0' : 'opacity-100'}`}
+                            loading="lazy"
+                        />
+
+                        {/* Loading Overlay - only show if not loaded */}
+                        {!imageLoaded && (
+                            <div className="absolute inset-0 flex items-center justify-center bg-neutral-200 dark:bg-neutral-800 z-10">
+                                <Loader2 size={20} className="text-neutral-400 animate-spin" />
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div className="w-full aspect-square flex flex-col items-center justify-center bg-neutral-200 dark:bg-neutral-800 text-neutral-400">
+                        <ImageIcon size={24} className="mb-2" />
+                        <p className="text-xs font-medium">Failed to load</p>
+                    </div>
+                )}
+
+                {/* Selection Indicator */}
+                {isSelected && (
+                    <>
+                        {/* Border - refined but visible */}
+                        <div className="absolute inset-0 border-2 border-primary rounded-xl pointer-events-none z-30 ring-2 ring-primary/20" />
+                        {/* Badge - refined design */}
+                        <div className="absolute top-2 right-2 bg-primary text-white rounded-md px-2 py-1 shadow-md z-30 flex items-center gap-1.5 backdrop-blur-sm">
+                            <Check size={13} strokeWidth={2.5} className="flex-shrink-0" />
+                            <span className="text-[10px] font-semibold uppercase tracking-wide">Selected</span>
+                        </div>
+                        {/* Subtle background overlay */}
+                        <div className="absolute inset-0 bg-primary/8 dark:bg-primary/12 rounded-xl pointer-events-none z-20" />
+                    </>
+                )}
+
+                {/* Hover Overlay - darken background on button hover, but don't trigger image scaling */}
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200 rounded-xl pointer-events-none" />
+
+                {/* Filename Tooltip */}
+                <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/70 via-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-b-xl pointer-events-none">
+                    <p className="text-[10px] text-white font-semibold truncate leading-tight">{image.filename}</p>
+                </div>
+            </button>
+    );
+}
+
+export interface ImageBrowserModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectImage: (image: ImageMetadata) => void;
+    selectedImageId?: string;
+    darkMode?: boolean;
+    onUpload?: (file: File) => Promise<void>;
+    uploading?: boolean;
+}
+
+const ITEMS_PER_PAGE = 100; // Increased from 24 to load more images per request
+
+export function ImageBrowserModal({
+    isOpen,
+    onClose,
+    onSelectImage,
+    selectedImageId,
+    darkMode = false,
+    onUpload,
+    uploading = false,
+}: ImageBrowserModalProps) {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [externalUrl, setExternalUrl] = useState('');
+    const [images, setImages] = useState<ImageMetadata[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(true);
+    const [total, setTotal] = useState(0);
+    const [resolvedSelectedId, setResolvedSelectedId] = useState<string | undefined>(selectedImageId);
+    const [internalUploading, setInternalUploading] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+    
+    // Handle SSR & portal target - ensure we only render portal on client
+    useEffect(() => {
+        setMounted(true);
+
+        if (typeof document === 'undefined') return;
+
+        // If we're inside the GlobalImageEditor overlay, portal into that instead of document.body
+        // This ensures the browser modal shares the same stacking context as the global editor
+        const editorContainer = document.querySelector('[data-image-editor="true"]') as HTMLElement | null;
+        if (editorContainer) {
+            setPortalTarget(editorContainer);
+        } else {
+            setPortalTarget(document.body);
+        }
+    }, []);
+    
+    // Debug: Log when selectedImageId prop changes
+    useEffect(() => {
+        setResolvedSelectedId(selectedImageId);
+    }, [selectedImageId]);
+    
+    // Load column count from localStorage, default to 3
+    const getStoredColumnCount = (): number => {
+        if (typeof window === 'undefined') return 3;
+        try {
+            const stored = localStorage.getItem('plugin-images-column-count');
+            if (stored) {
+                const parsed = parseInt(stored, 10);
+                // Validate: must be between 3 and 9
+                if (!isNaN(parsed) && parsed >= 3 && parsed <= 9) {
+                    return parsed;
+                }
+            }
+        } catch (error) {
+            // Silently fail - use default
+        }
+        return 3;
+    };
+
+    const [columnCount, setColumnCount] = useState(getStoredColumnCount);
+
+    // Save column count to localStorage whenever it changes
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+        try {
+            localStorage.setItem('plugin-images-column-count', columnCount.toString());
+        } catch (error) {
+            // Silently fail
+        }
+    }, [columnCount]);
+    
+    const modalRef = useRef<HTMLDivElement>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    // Load images from API with pagination
+    const loadImages = useCallback(async (pageNum: number = 1, append: boolean = false) => {
+        if (append) {
+            setLoadingMore(true);
+        } else {
+            setLoading(true);
+        }
+
+        try {
+            const searchParam = searchQuery.trim() ? `&search=${encodeURIComponent(searchQuery.trim())}` : '';
+            const response = await fetch(`/api/plugin-images/list?page=${pageNum}&limit=${ITEMS_PER_PAGE}${searchParam}`);
+            
+            if (response.ok) {
+                const data = await response.json();
+                const newImages = (data.images || []).map((img: ImageMetadata) => {
+                    const imageUrl = img.url || `/api/uploads/${img.filename}`;
+                    // Ensure URL is absolute if it's a relative path
+                    const finalUrl = imageUrl.startsWith('http') ? imageUrl : imageUrl.startsWith('/') ? imageUrl : `/${imageUrl}`;
+                    return {
+                        ...img,
+                        url: finalUrl
+                    };
+                });
+
+                setTotal(data.total || 0);
+                
+                if (append) {
+                    setImages(prev => {
+                        // Deduplicate: use a Map to track unique images by id
+                        const imageMap = new Map<string, ImageMetadata>();
+                        
+                        // Add existing images
+                        prev.forEach((img: ImageMetadata) => {
+                            imageMap.set(img.id, img);
+                        });
+                        
+                        // Add new images (will overwrite duplicates)
+                        newImages.forEach((img: ImageMetadata) => {
+                            imageMap.set(img.id, img);
+                        });
+                        
+                        const updated = Array.from(imageMap.values());
+                        // More images available if: we got a full page AND haven't loaded all images
+                        setHasMore(newImages.length === ITEMS_PER_PAGE && updated.length < (data.total || 0));
+                        return updated;
+                    });
+                } else {
+                    // Deduplicate even for initial load
+                    const imageMap = new Map<string, ImageMetadata>();
+                    newImages.forEach((img: ImageMetadata) => {
+                        imageMap.set(img.id, img);
+                    });
+                    const deduplicated = Array.from(imageMap.values());
+                    setImages(deduplicated);
+                    // More images available if: we got a full page AND haven't loaded all images
+                    setHasMore(deduplicated.length === ITEMS_PER_PAGE && deduplicated.length < (data.total || 0));
+                }
+                
+                setPage(pageNum);
+            } else {
+                console.error('[ImageBrowserModal] Failed to load images:', response.status);
+            }
+        } catch (error) {
+            console.error('[ImageBrowserModal] Failed to load images:', error);
+        } finally {
+            setLoading(false);
+            setLoadingMore(false);
+        }
+    }, [searchQuery]);
+
+    // Load multiple pages in parallel for faster initial load
+    const loadInitialImages = useCallback(async () => {
+        setLoading(true);
+        try {
+            const searchParam = searchQuery.trim() ? `&search=${encodeURIComponent(searchQuery.trim())}` : '';
+            
+            // Load first 2-3 pages in parallel to fill the screen quickly
+            const pagesToLoad = 3;
+            const requests = Array.from({ length: pagesToLoad }, (_, i) => 
+                fetch(`/api/plugin-images/list?page=${i + 1}&limit=${ITEMS_PER_PAGE}${searchParam}`)
+            );
+            
+            const responses = await Promise.all(requests);
+            const results = await Promise.all(responses.map(r => r.ok ? r.json() : { images: [], total: 0 }));
+            
+            // Combine all images
+            const allImages: ImageMetadata[] = [];
+            let totalCount = 0;
+            
+            results.forEach((data, index) => {
+                if (data.images && data.images.length > 0) {
+                    const pageImages = data.images.map((img: ImageMetadata) => {
+                        const imageUrl = img.url || `/api/uploads/${img.filename}`;
+                        const finalUrl = imageUrl.startsWith('http') ? imageUrl : imageUrl.startsWith('/') ? imageUrl : `/${imageUrl}`;
+                        return {
+                            ...img,
+                            url: finalUrl
+                        };
+                    });
+                    allImages.push(...pageImages);
+                }
+                if (index === 0 && data.total) {
+                    totalCount = data.total;
+                }
+            });
+
+            // Deduplicate
+            const imageMap = new Map<string, ImageMetadata>();
+            allImages.forEach((img: ImageMetadata) => {
+                imageMap.set(img.id, img);
+            });
+            const deduplicated = Array.from(imageMap.values());
+            
+            setImages(deduplicated);
+            setTotal(totalCount);
+            setHasMore(deduplicated.length < totalCount);
+            setPage(pagesToLoad);
+        } catch (error) {
+            console.error('[ImageBrowserModal] Error loading initial images:', error);
+            // Fallback to single page load
+            loadImages(1, false);
+        } finally {
+            setLoading(false);
+        }
+    }, [searchQuery, loadImages]);
+
+    // Load more images when scrolling near bottom
+    const handleScroll = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container || loadingMore || !hasMore || loading) return;
+
+        const scrollTop = container.scrollTop;
+        const scrollHeight = container.scrollHeight;
+        const clientHeight = container.clientHeight;
+        
+        // Calculate distance from bottom
+        const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
+        
+        // Load more when within 200px of bottom
+        if (distanceFromBottom < 200) {
+            loadImages(page + 1, true);
+        }
+    }, [page, hasMore, loadingMore, loading, loadImages]);
+
+    // Check if viewport needs more images to fill the screen
+    const checkAndLoadMoreIfNeeded = useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container || loading || loadingMore || !hasMore) return;
+
+        // Check if content fills the viewport (with some margin)
+        const scrollHeight = container.scrollHeight;
+        const clientHeight = container.clientHeight;
+        const needsMoreContent = scrollHeight <= clientHeight + 100; // 100px margin
+
+        if (needsMoreContent) {
+            loadImages(page + 1, true);
+        }
+    }, [loading, loadingMore, hasMore, images.length, page, loadImages]);
+
+    // Auto-load more images when images change and viewport isn't filled
+    useEffect(() => {
+        if (!isOpen || images.length === 0 || loading || loadingMore) return;
+
+        // Wait for DOM to update after images are set and rendered
+        const timeoutId = setTimeout(() => {
+            checkAndLoadMoreIfNeeded();
+        }, 200); // Delay to allow images to render and layout to settle
+
+        return () => clearTimeout(timeoutId);
+    }, [images, isOpen, loading, loadingMore, checkAndLoadMoreIfNeeded]);
+
+    // Check again after loading completes
+    useEffect(() => {
+        if (!isOpen || images.length === 0) return;
+        if (!loading && !loadingMore) {
+            // Loading just finished, check if we need more
+            const timeoutId = setTimeout(() => {
+                checkAndLoadMoreIfNeeded();
+            }, 300); // Give images time to render
+            return () => clearTimeout(timeoutId);
+        }
+    }, [loading, loadingMore, isOpen, images.length, checkAndLoadMoreIfNeeded]);
+
+    // Also check when column count changes (more columns = need more images)
+    useEffect(() => {
+        if (!isOpen || images.length === 0 || loading || loadingMore) return;
+        const timeoutId = setTimeout(() => {
+            checkAndLoadMoreIfNeeded();
+        }, 200);
+        return () => clearTimeout(timeoutId);
+    }, [columnCount, isOpen, loading, loadingMore, checkAndLoadMoreIfNeeded]);
+
+    // Initial load and reset on open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            setPage(1);
+            setImages([]);
+            setHasMore(true);
+            // Use parallel loading for faster initial load
+            loadInitialImages();
+        } else {
+            document.body.style.overflow = 'unset';
+            setSearchQuery('');
+            setImages([]);
+            setPage(1);
+        }
+        return () => { document.body.style.overflow = 'unset'; };
+    }, [isOpen, loadInitialImages, selectedImageId]);
+
+    // Debounced search
+    useEffect(() => {
+        if (!isOpen) return;
+
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+
+        searchTimeoutRef.current = setTimeout(() => {
+            setPage(1);
+            setImages([]);
+            setHasMore(true);
+            // For search, use parallel loading if no search query (faster), otherwise single page
+            if (!searchQuery.trim()) {
+                loadInitialImages();
+            } else {
+                loadImages(1, false);
+            }
+        }, 300);
+
+        return () => {
+            if (searchTimeoutRef.current) {
+                clearTimeout(searchTimeoutRef.current);
+            }
+        };
+    }, [searchQuery, isOpen, loadImages, loadInitialImages]);
+
+    // Reload after upload
+    useEffect(() => {
+        if (!uploading && isOpen && images.length > 0) {
+            // Reload first page to show newly uploaded image
+            loadImages(1, false);
+        }
+    }, [uploading, isOpen, loadImages]);
+
+    // Attach scroll listener
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container) return;
+
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
+
+    // Handle file upload (default handler if onUpload prop is not provided)
+    const handleFileUpload = async (file: File) => {
+        // If onUpload prop is provided, use it
+        if (onUpload) {
+            await onUpload(file);
+            return;
+        }
+
+        // Otherwise, handle upload internally
+        setInternalUploading(true);
+        try {
+            const formData = new FormData();
+            formData.append('file', file);
+
+            const response = await fetch('/api/plugin-images/upload', {
+                method: 'POST',
+                body: formData,
+            });
+
+            const data = await response.json();
+            
+            if (data.success && data.image) {
+                // Reload images to show the newly uploaded image
+                await loadImages(1, false);
+                // Optionally select the newly uploaded image
+                // onSelectImage(data.image);
+            } else {
+                console.error('[ImageBrowserModal] Upload failed:', data.error || 'Unknown error');
+                alert(data.error || 'Failed to upload image');
+            }
+        } catch (error) {
+            console.error('[ImageBrowserModal] Upload error:', error);
+            alert('Failed to upload image');
+        } finally {
+            setInternalUploading(false);
+            // Reset file input
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        }
+    };
+
+    // 4. Handle External URL Logic
+    const handleUseExternalUrl = () => {
+        const url = externalUrl.trim();
+        if (!url) return;
+
+        const externalImage: ImageMetadata = {
+            id: `external-${Date.now()}`,
+            filename: url.split('/').pop()?.split('?')[0] || 'external-image',
+            url: url,
+            size: 0,
+            mimeType: 'image/external',
+            uploadedAt: new Date().toISOString(),
+        };
+
+        onSelectImage(externalImage);
+        setExternalUrl('');
+        onClose();
+    };
+
+    if (!isOpen || !mounted || !portalTarget) return null;
+
+    const modalContent = (
+        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 animate-in fade-in duration-200">
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-neutral-950/70 backdrop-blur-md"
+                onClick={onClose}
+            />
+
+            <div
+                ref={modalRef}
+                className={`relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-3xl shadow-2xl flex flex-col overflow-hidden border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300 ${darkMode ? 'dark' : ''}`}
+            >
+                {/* Header */}
+                <div className="px-6 py-5 border-b border-neutral-200 dark:border-neutral-800 bg-gradient-to-r from-neutral-50 to-white dark:from-neutral-900 dark:to-neutral-950 flex items-center justify-between">
+                    <div>
+                        <h2 className="text-2xl font-black uppercase tracking-tight dark:text-white">Media Library</h2>
+                        {total > 0 && (
+                            <p className="text-xs text-neutral-500 font-semibold uppercase tracking-wider mt-1">
+                                {total} {total === 1 ? 'image' : 'images'}
+                            </p>
+                        )}
+                    </div>
+                    <button 
+                        onClick={onClose} 
+                        className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-all duration-200 hover:scale-110 active:scale-95"
+                        aria-label="Close"
+                    >
+                        <X size={20} className="text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-white transition-colors" />
+                    </button>
+                </div>
+
+                {/* Toolbar */}
+                <div className="px-6 py-4 bg-neutral-50/50 dark:bg-neutral-900/30 border-b border-neutral-200 dark:border-neutral-800 flex flex-col sm:flex-row gap-3">
+                    <div className="relative flex-1">
+                        <Search size={16} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400" />
+                        <input
+                            type="text"
+                            placeholder="Search images..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            className="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-xl text-sm font-medium focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all shadow-sm"
+                        />
+                    </div>
+                    <div className="flex items-center gap-3">
+                        {/* Column Count Slider */}
+                        <div className="flex items-center gap-3 bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-xl px-4 py-2.5 shadow-sm">
+                            <Grid3x3 size={16} className="text-neutral-400 flex-shrink-0" />
+                            <div className="flex items-center gap-3 min-w-[140px]">
+                                <span className="text-sm font-bold text-neutral-700 dark:text-neutral-300 min-w-[24px] text-right tabular-nums">
+                                    {columnCount}
+                                </span>
+                                <input
+                                    type="range"
+                                    min="3"
+                                    max="9"
+                                    value={columnCount}
+                                    onChange={(e) => setColumnCount(parseInt(e.target.value))}
+                                    className="flex-1 h-2 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary"
+                                />
+                            </div>
+                            <span className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+                                cols
+                            </span>
+                        </div>
+                        <button
+                            onClick={() => fileInputRef.current?.click()}
+                            disabled={uploading || internalUploading}
+                            className="flex items-center justify-center gap-2 px-5 py-2.5 bg-primary text-white rounded-xl font-semibold text-sm hover:bg-primary/90 disabled:opacity-50 transition-all duration-200 shadow-md hover:shadow-lg active:scale-[0.98]"
+                        >
+                            {(uploading || internalUploading) ? <Loader2 size={16} className="animate-spin" /> : <Upload size={16} />}
+                            Upload
+                        </button>
+                    </div>
+                </div>
+
+                {/* Content Area */}
+                <div 
+                    ref={scrollContainerRef}
+                    className="flex-1 overflow-y-auto p-6"
+                    style={{ scrollbarWidth: 'thin' }}
+                >
+                    {loading && images.length === 0 ? (
+                        <div className="h-full flex flex-col items-center justify-center space-y-4">
+                            <Loader2 size={48} className="text-primary animate-spin" />
+                            <p className="text-sm font-semibold text-neutral-500 uppercase tracking-wider">Loading Library...</p>
+                        </div>
+                    ) : images.length === 0 ? (
+                        <div className="h-full flex flex-col items-center justify-center text-center py-16">
+                            <div className="p-5 bg-gradient-to-br from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900 rounded-2xl mb-4 shadow-inner">
+                                <ImageIcon size={36} className="text-neutral-400" />
+                            </div>
+                            <h3 className="text-lg font-bold dark:text-white mb-2">No images found</h3>
+                            <p className="text-sm text-neutral-500 max-w-sm">
+                                {searchQuery.trim() 
+                                    ? 'Try a different search term or upload a new image.'
+                                    : 'Upload your first image to get started.'}
+                            </p>
+                        </div>
+                    ) : (
+                        <>
+                            <MasonryGrid 
+                                images={images} 
+                                selectedImageId={resolvedSelectedId} 
+                                onSelectImage={(image) => {
+                                    onSelectImage(image);
+                                }} 
+                                onClose={onClose}
+                                fixedColumns={columnCount}
+                            />
+
+                            {/* Loading More Indicator */}
+                            {loadingMore && (
+                                <div className="flex justify-center items-center py-8">
+                                    <Loader2 size={24} className="text-primary animate-spin" />
+                                </div>
+                            )}
+
+                            {/* End of List Indicator */}
+                            {!hasMore && images.length > 0 && (
+                                <div className="text-center py-6">
+                                    <p className="text-xs text-neutral-400 font-semibold uppercase tracking-wider">
+                                        All {total} images loaded
+                                    </p>
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+
+                {/* Footer / External URL */}
+                <div className="px-6 py-4 bg-gradient-to-r from-neutral-50 to-white dark:from-neutral-900 dark:to-neutral-950 border-t border-neutral-200 dark:border-neutral-800 flex flex-col sm:flex-row items-center gap-3">
+                    <div className="flex items-center gap-2 text-neutral-400 min-w-max">
+                        <LinkIcon size={14} />
+                        <span className="text-[10px] font-bold uppercase tracking-wider">External URL</span>
+                    </div>
+                    <div className="flex-1 flex w-full gap-2">
+                        <input
+                            type="text"
+                            placeholder="Paste image URL here..."
+                            value={externalUrl}
+                            onChange={(e) => setExternalUrl(e.target.value)}
+                            onKeyDown={(e) => e.key === 'Enter' && handleUseExternalUrl()}
+                            className="flex-1 px-3 py-2 bg-white dark:bg-neutral-950 border border-neutral-200 dark:border-neutral-800 rounded-lg text-xs font-medium focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all shadow-sm"
+                        />
+                        <button
+                            onClick={handleUseExternalUrl}
+                            className="px-4 py-2 bg-neutral-900 dark:bg-white dark:text-neutral-900 text-white rounded-lg text-xs font-semibold hover:opacity-90 transition-all duration-200 active:scale-[0.98]"
+                        >
+                            Import
+                        </button>
+                    </div>
+                </div>
+
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        if (file) {
+                            handleFileUpload(file);
+                        }
+                    }}
+                    className="hidden"
+                />
+            </div>
+        </div>
+    );
+
+    return createPortal(modalContent, portalTarget);
+}