@jhits/plugin-images 0.0.5 → 0.0.7

package/dist/components/ImageBrowserModal.js

@@ -0,0 +1,507 @@
+'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) => {
+                // 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 (_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 {
+                        ...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 {
+                            ...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 = () => {
+        const url = externalUrl.trim();
+        if (!url)
+            return;
+        const externalImage = {
+            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 = (_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: () => 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]", 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) => {
+                            const file = e.target.files?.[0];
+                            if (file) {
+                                handleFileUpload(file);
+                            }
+                        }, className: "hidden" })] })] }));
+    return createPortal(modalContent, portalTarget);
+}

package/dist/components/ImageEditor.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface ImageEditorProps {
+    imageUrl: string;
+    scale: number;
+    positionX: number;
+    positionY: number;
+    brightness?: number;
+    blur?: number;
+    onScaleChange: (scale: number) => void;
+    onPositionChange: (x: number, y: number) => void;
+    onBrightnessChange?: (brightness: number) => void;
+    onBlurChange?: (blur: number) => void;
+    aspectRatio?: string;
+    borderRadius?: string;
+    imageId?: string;
+}
+export interface ImageEditorHandle {
+    flushSave: () => Promise<{
+        scale: number;
+        positionX: number;
+        positionY: number;
+        brightness: number;
+        blur: number;
+    }>;
+}
+export declare const ImageEditor: React.ForwardRefExoticComponent<ImageEditorProps & React.RefAttributes<ImageEditorHandle>>;
+//# sourceMappingURL=ImageEditor.d.ts.map

package/dist/components/ImageEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditor.d.ts","sourceRoot":"","sources":["../../src/components/ImageEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAIlH,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvH;AAED,eAAO,MAAM,WAAW,4FAuStB,CAAC"}