@jhits/plugin-images 0.0.8 → 0.0.9

package/src/components/ImageBrowserModal.js

@@ -1,504 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { 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 } from 'lucide-react';
-// Masonry Grid Component that maintains item positions
-function MasonryGrid({ images, selectedImageId, onSelectImage, onClose, fixedColumns, }) {
-    const containerRef = useRef(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 = 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 (_jsx("div", { ref: containerRef, className: "grid gap-4", style: {
-            gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
-        }, children: columns.map((columnImages, columnIndex) => (_jsx("div", { className: "flex flex-col gap-4", children: columnImages.map((image, imageIndex) => {
-                var _a;
-                // 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 = ((_a = urlParts[urlParts.length - 1]) === null || _a === void 0 ? void 0 : _a.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 (_jsx(ImageCard, { image: image, isSelected: isSelected, onSelect: () => {
-                        onSelectImage(image);
-                        onClose();
-                    } }, uniqueKey));
-            }) }, columnIndex))) }));
-}
-// Image Card Component for Masonry Layout
-function ImageCard({ image, isSelected, onSelect }) {
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const [imageError, setImageError] = useState(false);
-    const imgRef = useRef(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) => {
-        console.error('[ImageCard] Image failed to load:', image.url, e);
-        setImageError(true);
-        setImageLoaded(false);
-    };
-    return (_jsxs("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' : ''}`, children: [!imageError ? (_jsxs("div", { className: "relative w-full group/image", children: [_jsx("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" }), !imageLoaded && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-200 dark:bg-neutral-800 z-10", children: _jsx(Loader2, { size: 20, className: "text-neutral-400 animate-spin" }) }))] })) : (_jsxs("div", { className: "w-full aspect-square flex flex-col items-center justify-center bg-neutral-200 dark:bg-neutral-800 text-neutral-400", children: [_jsx(ImageIcon, { size: 24, className: "mb-2" }), _jsx("p", { className: "text-xs font-medium", children: "Failed to load" })] })), isSelected && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 border-2 border-primary rounded-xl pointer-events-none z-30 ring-2 ring-primary/20" }), _jsxs("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", children: [_jsx(Check, { size: 13, strokeWidth: 2.5, className: "flex-shrink-0" }), _jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wide", children: "Selected" })] }), _jsx("div", { className: "absolute inset-0 bg-primary/8 dark:bg-primary/12 rounded-xl pointer-events-none z-20" })] })), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200 rounded-xl pointer-events-none" }), _jsx("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", children: _jsx("p", { className: "text-[10px] text-white font-semibold truncate leading-tight", children: image.filename }) })] }));
-}
-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, }) {
-    const [searchQuery, setSearchQuery] = useState('');
-    const [externalUrl, setExternalUrl] = useState('');
-    const [images, setImages] = useState([]);
-    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(selectedImageId);
-    const [internalUploading, setInternalUploading] = useState(false);
-    const [mounted, setMounted] = useState(false);
-    const [portalTarget, setPortalTarget] = useState(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"]');
-        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 = () => {
-        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(null);
-    const scrollContainerRef = useRef(null);
-    const fileInputRef = useRef(null);
-    const searchTimeoutRef = useRef(null);
-    // Load images from API with pagination
-    const loadImages = useCallback(async (pageNum = 1, append = 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) => {
-                    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 Object.assign(Object.assign({}, 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();
-                        // Add existing images
-                        prev.forEach((img) => {
-                            imageMap.set(img.id, img);
-                        });
-                        // Add new images (will overwrite duplicates)
-                        newImages.forEach((img) => {
-                            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();
-                    newImages.forEach((img) => {
-                        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 = [];
-            let totalCount = 0;
-            results.forEach((data, index) => {
-                if (data.images && data.images.length > 0) {
-                    const pageImages = data.images.map((img) => {
-                        const imageUrl = img.url || `/api/uploads/${img.filename}`;
-                        const finalUrl = imageUrl.startsWith('http') ? imageUrl : imageUrl.startsWith('/') ? imageUrl : `/${imageUrl}`;
-                        return Object.assign(Object.assign({}, img), { url: finalUrl });
-                    });
-                    allImages.push(...pageImages);
-                }
-                if (index === 0 && data.total) {
-                    totalCount = data.total;
-                }
-            });
-            // Deduplicate
-            const imageMap = new Map();
-            allImages.forEach((img) => {
-                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) => {
-        // 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 = () => {
-        var _a;
-        const url = externalUrl.trim();
-        if (!url)
-            return;
-        const externalImage = {
-            id: `external-${Date.now()}`,
-            filename: ((_a = url.split('/').pop()) === null || _a === void 0 ? void 0 : _a.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 = (_jsxs("div", { className: "fixed inset-0 z-[200] flex items-center justify-center p-4 animate-in fade-in duration-200", children: [_jsx("div", { className: "absolute inset-0 bg-neutral-950/70 backdrop-blur-md", onClick: onClose }), _jsxs("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' : ''}`, children: [_jsxs("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", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-black uppercase tracking-tight dark:text-white", children: "Media Library" }), total > 0 && (_jsxs("p", { className: "text-xs text-neutral-500 font-semibold uppercase tracking-wider mt-1", children: [total, " ", total === 1 ? 'image' : 'images'] }))] }), _jsx("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", children: _jsx(X, { size: 20, className: "text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-white transition-colors" }) })] }), _jsxs("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", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { size: 16, className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-neutral-400" }), _jsx("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" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("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", children: [_jsx(Grid3x3, { size: 16, className: "text-neutral-400 flex-shrink-0" }), _jsxs("div", { className: "flex items-center gap-3 min-w-[140px]", children: [_jsx("span", { className: "text-sm font-bold text-neutral-700 dark:text-neutral-300 min-w-[24px] text-right tabular-nums", children: columnCount }), _jsx("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" })] }), _jsx("span", { className: "text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "cols" })] }), _jsxs("button", { onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.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]", children: [(uploading || internalUploading) ? _jsx(Loader2, { size: 16, className: "animate-spin" }) : _jsx(Upload, { size: 16 }), "Upload"] })] })] }), _jsx("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto p-6", style: { scrollbarWidth: 'thin' }, children: loading && images.length === 0 ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center space-y-4", children: [_jsx(Loader2, { size: 48, className: "text-primary animate-spin" }), _jsx("p", { className: "text-sm font-semibold text-neutral-500 uppercase tracking-wider", children: "Loading Library..." })] })) : images.length === 0 ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-16", children: [_jsx("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", children: _jsx(ImageIcon, { size: 36, className: "text-neutral-400" }) }), _jsx("h3", { className: "text-lg font-bold dark:text-white mb-2", children: "No images found" }), _jsx("p", { className: "text-sm text-neutral-500 max-w-sm", children: searchQuery.trim()
-                                        ? 'Try a different search term or upload a new image.'
-                                        : 'Upload your first image to get started.' })] })) : (_jsxs(_Fragment, { children: [_jsx(MasonryGrid, { images: images, selectedImageId: resolvedSelectedId, onSelectImage: (image) => {
-                                        onSelectImage(image);
-                                    }, onClose: onClose, fixedColumns: columnCount }), loadingMore && (_jsx("div", { className: "flex justify-center items-center py-8", children: _jsx(Loader2, { size: 24, className: "text-primary animate-spin" }) })), !hasMore && images.length > 0 && (_jsx("div", { className: "text-center py-6", children: _jsxs("p", { className: "text-xs text-neutral-400 font-semibold uppercase tracking-wider", children: ["All ", total, " images loaded"] }) }))] })) }), _jsxs("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", children: [_jsxs("div", { className: "flex items-center gap-2 text-neutral-400 min-w-max", children: [_jsx(LinkIcon, { size: 14 }), _jsx("span", { className: "text-[10px] font-bold uppercase tracking-wider", children: "External URL" })] }), _jsxs("div", { className: "flex-1 flex w-full gap-2", children: [_jsx("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" }), _jsx("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]", children: "Import" })] })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: (e) => {
-                            var _a;
-                            const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                            if (file) {
-                                handleFileUpload(file);
-                            }
-                        }, className: "hidden" })] })] }));
-    return createPortal(modalContent, portalTarget);
-}