@jhits/plugin-images 0.0.4 → 0.0.5

package/src/components/ImagePicker.tsx

@@ -1,541 +1,227 @@
-/**
- * Image Picker Component
- * Allows uploading, searching, and selecting images with brightness/blur controls
- */
-
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
-import { Upload, Search, X, Image as ImageIcon, SlidersHorizontal, Check, Link as LinkIcon } from 'lucide-react';
-import type { ImageMetadata, ImagePickerProps } from '../types';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Search, Image as ImageIcon, Settings } from 'lucide-react';
+import type { ImagePickerProps } from '../types';
+import type { ImageMetadata } from '../types';
+import { ImageEditor, type ImageEditorHandle } from './ImageEditor';
+import { ImageBrowserModal } from './ImageBrowserModal';
+import { useImagePicker } from '../hooks/useImagePicker';
+import { getImageTransform, getImageFilter } from '../utils/transforms';
 
 export function ImagePicker({
-    value,
-    onChange,
-    darkMode = false,
-    showEffects = true,
-    brightness = 100,
-    blur = 0,
-    onBrightnessChange,
-    onBlurChange,
+    value, onChange, brightness = 100, blur = 0, scale = 1.0, positionX = 0, positionY = 0,
+    aspectRatio = '16/9', borderRadius = 'rounded-xl', onBrightnessChange, onBlurChange,
+    onScaleChange, onPositionXChange, onPositionYChange, onEditorSave, autoOpenEditor = false,
 }: ImagePickerProps) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [images, setImages] = useState<ImageMetadata[]>([]);
-    const [loading, setLoading] = useState(false);
-    const [uploading, setUploading] = useState(false);
-    const [searchQuery, setSearchQuery] = useState('');
-    const [selectedImage, setSelectedImage] = useState<ImageMetadata | null>(null);
-    const [page, setPage] = useState(1);
-    const [hasMore, setHasMore] = useState(true);
-    const [externalUrl, setExternalUrl] = useState('');
-    const [showUrlInput, setShowUrlInput] = useState(false);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const modalRef = useRef<HTMLDivElement>(null);
 
-    // Load images
-    const loadImages = async (reset = false) => {
-        if (loading) return;
-        
-        setLoading(true);
-        try {
-            const currentPage = reset ? 1 : page;
-            const response = await fetch(
-                `/api/plugin-images/list?page=${currentPage}&limit=20&search=${encodeURIComponent(searchQuery)}`
-            );
-            const data = await response.json();
-            
-            if (reset) {
-                setImages(data.images);
-                setPage(2);
-            } else {
-                setImages(prev => [...prev, ...data.images]);
-                setPage(prev => prev + 1);
-            }
-            
-            setHasMore(data.images.length === 20);
-        } catch (error) {
-            console.error('Failed to load images:', error);
-        } finally {
-            setLoading(false);
-        }
-    };
+    const [transforms, setTransforms] = useState({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
+    const [isEditorOpen, setIsEditorOpen] = useState(false);
+    const [isBrowserOpen, setIsBrowserOpen] = useState(false);
+    const [previewBaseScale, setPreviewBaseScale] = useState<number | null>(null);
+    const [mounted, setMounted] = useState(false);
+    const previewImageRef = useRef<HTMLImageElement>(null);
+    const previewContainerRef = useRef<HTMLDivElement>(null);
+    const editorRef = useRef<ImageEditorHandle | null>(null);
+
+    const { selectedImage, setSelectedImage } = useImagePicker({ value, images: [] });
 
-    // Load images when modal opens
+    // Handle SSR - ensure we only render portal on client
     useEffect(() => {
-        if (isOpen) {
-            loadImages(true);
-        }
-    }, [isOpen, searchQuery]);
+        setMounted(true);
+    }, []);
 
-    // Find selected image from value (can be ID or URL)
+    // Auto-open editor if requested (e.g., when opening from edit button)
+    // Only auto-open once when the prop first becomes true, not on every render
+    const hasAutoOpenedRef = useRef(false);
     useEffect(() => {
-        if (value) {
-            // First, try to find by ID (preferred method)
-            let found = images.find(img => img.id === value);
-            
-            // If not found by ID, try to find by URL
-            if (!found) {
-                found = images.find(img => img.url === value);
-            }
-            
-            if (found) {
-                setSelectedImage(found);
-            } else if (!selectedImage) {
-                // Create a temporary image object from the value if not found in list
-                // This handles cases where the image was set externally or is an ID
-                const isUrl = value.startsWith('http://') || value.startsWith('https://') || value.startsWith('/');
-                const urlParts = isUrl ? value.split('/') : [];
-                const filename = isUrl ? urlParts[urlParts.length - 1] : value;
-                
-                setSelectedImage({
-                    id: isUrl ? filename : value, // Use value as ID if it's not a URL
-                    filename,
-                    url: isUrl ? value : `/api/uploads/${value}`, // Construct URL if value is an ID
-                    size: 0,
-                    mimeType: 'image/jpeg',
-                    uploadedAt: new Date().toISOString(),
-                });
-            }
-        } else {
-            setSelectedImage(null);
+        if (autoOpenEditor && selectedImage && !isEditorOpen && !hasAutoOpenedRef.current) {
+            // Small delay to ensure ImagePicker is fully rendered
+            const timer = setTimeout(() => {
+                setIsEditorOpen(true);
+                hasAutoOpenedRef.current = true;
+            }, 100);
+            return () => clearTimeout(timer);
+        }
+        // Reset the flag when autoOpenEditor becomes false
+        if (!autoOpenEditor) {
+            hasAutoOpenedRef.current = false;
         }
-    }, [value, images]);
+    }, [autoOpenEditor, selectedImage, isEditorOpen]);
 
-    // Handle file upload
-    const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
+    useEffect(() => {
+        if (!isEditorOpen) setTransforms({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
+    }, [scale, positionX, positionY, isEditorOpen]);
 
-        setUploading(true);
-        try {
-            const formData = new FormData();
-            formData.append('file', file);
+    const calculatePreviewBaseScale = useCallback(() => {
+        if (!previewImageRef.current || !previewContainerRef.current) return;
+        const fit = Math.max(previewContainerRef.current.offsetWidth / previewImageRef.current.naturalWidth,
+            previewContainerRef.current.offsetHeight / previewImageRef.current.naturalHeight);
+        setPreviewBaseScale(fit);
+    }, []);
 
-            const response = await fetch('/api/plugin-images/upload', {
-                method: 'POST',
-                body: formData,
-            });
+    // Handle editor save - delegate to parent callbacks instead of saving directly
+    // This ensures all saves go through a single location (GlobalImageEditor.saveImageTransform)
+    const handleEditorSave = async () => {
+        if (!editorRef.current || !selectedImage) return;
 
-            const data = await response.json();
-            
-            if (data.success && data.image) {
-                // Reload images list
-                await loadImages(true);
-                // Select the newly uploaded image
-                setSelectedImage(data.image);
-                onChange(data.image);
+        try {
+            // 1. Get current values from Editor UI (this will also call onBrightnessChange and onBlurChange)
+            const final = await editorRef.current.flushSave();
+
+            // 2. Normalize position values - if they're -50% (centering value), treat as 0
+            const normalizedPositionX = final.positionX === -50 ? 0 : final.positionX;
+            const normalizedPositionY = final.positionY === -50 ? 0 : final.positionY;
+
+            // 3. If onEditorSave is provided, use it exclusively to prevent duplicate saves
+            // Otherwise, update parent state through individual callbacks
+            console.log('[ImagePicker] handleEditorSave - final values:', final, 'has onEditorSave:', !!onEditorSave);
+            if (onEditorSave) {
+                // onEditorSave handles everything - don't call individual handlers to avoid duplicates
+                console.log('[ImagePicker] Calling onEditorSave with:', { scale: final.scale, positionX: normalizedPositionX, positionY: normalizedPositionY, brightness: final.brightness, blur: final.blur });
+                onEditorSave(final.scale, normalizedPositionX, normalizedPositionY, final.brightness, final.blur);
             } else {
-                alert(data.error || 'Failed to upload image');
+                // Fallback: update parent state through individual callbacks
+                // Since onEditorSave is not provided, call all callbacks and they should handle saving
+                // The last one (onPositionYChange) will trigger the final save
+                console.log('[ImagePicker] No onEditorSave, using individual callbacks');
+                // Update scale first
+                onScaleChange?.(final.scale);
+                // Update positions - these will trigger saves
+                onPositionXChange?.(normalizedPositionX);
+                // Last callback - this should trigger the final save with all values
+                // We need to ensure this saves immediately with all final values including brightness/blur
+                onPositionYChange?.(normalizedPositionY);
             }
-        } catch (error) {
-            console.error('Upload error:', error);
-            alert('Failed to upload image');
-        } finally {
-            setUploading(false);
-            if (fileInputRef.current) {
-                fileInputRef.current.value = '';
-            }
-        }
-    };
 
-    // Handle image selection
-    const handleSelectImage = (image: ImageMetadata) => {
-        setSelectedImage(image);
-        onChange(image);
-        // Reset effects when selecting a new image (optional - could preserve them)
-        // onBrightnessChange?.(100);
-        // onBlurChange?.(0);
-    };
-
-    // Handle remove image
-    const handleRemove = () => {
-        setSelectedImage(null);
-        onChange(null);
-    };
-
-    // Validate if URL is an image
-    const isValidImageUrl = (url: string): boolean => {
-        try {
-            const urlObj = new URL(url);
-            const pathname = urlObj.pathname.toLowerCase();
-            const imageExtensions = ['.jpg', '.jpeg', '.png', '.webp', '.gif', '.svg'];
-            return imageExtensions.some(ext => pathname.endsWith(ext)) || 
-                   urlObj.hostname.includes('unsplash.com') ||
-                   urlObj.hostname.includes('pixabay.com') ||
-                   urlObj.hostname.includes('pexels.com') ||
-                   url.includes('image') ||
-                   url.includes('img');
-        } catch {
-            return false;
-        }
-    };
-
-    // Handle external URL
-    const handleUseExternalUrl = () => {
-        if (!externalUrl.trim()) {
-            alert('Please enter an image URL');
-            return;
-        }
-
-        if (!isValidImageUrl(externalUrl)) {
-            if (!confirm('This might not be a valid image URL. Continue anyway?')) {
-                return;
-            }
+            // 5. Close the editor
+            setIsEditorOpen(false);
+        } catch (error) {
+            console.error('[ImagePicker] Failed to get editor values:', error);
         }
-
-        // Create image metadata from external URL
-        const urlParts = externalUrl.split('/');
-        const filename = urlParts[urlParts.length - 1].split('?')[0] || 'external-image.jpg';
-        
-        const externalImage: ImageMetadata = {
-            id: `external-${Date.now()}`,
-            filename,
-            url: externalUrl,
-            size: 0,
-            mimeType: 'image/jpeg',
-            uploadedAt: new Date().toISOString(),
-        };
-
-        setSelectedImage(externalImage);
-        onChange(externalImage);
-        setExternalUrl('');
-        setShowUrlInput(false);
-        setIsOpen(false);
     };
 
-    // Close modal on outside click
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
-                setIsOpen(false);
-            }
-        };
 
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-            return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
-    }, [isOpen]);
+    const aspectValue = useMemo(() => {
+        if (aspectRatio === 'auto') return undefined;
+        const [w, h] = aspectRatio.split('/').map(Number);
+        return w / h;
+    }, [aspectRatio]);
 
     return (
-        <div className="space-y-4">
-            {/* Current Image Preview */}
+        <div className="space-y-6">
             {selectedImage ? (
-                <div className="relative group">
-                    <div className="relative rounded-xl overflow-hidden border-2 border-dashboard-border aspect-video bg-dashboard-bg">
-                        <img
-                            src={selectedImage.url}
-                            alt={selectedImage.alt || selectedImage.filename}
-                            className="w-full h-full object-cover"
-                            style={{
-                                filter: `brightness(${brightness}%) blur(${blur}px)`,
-                            }}
-                        />
-                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
-                            <button
-                                onClick={handleRemove}
-                                className="opacity-0 group-hover:opacity-100 p-2 bg-red-500 text-white rounded-full transition-opacity"
-                            >
-                                <X size={16} />
-                            </button>
+                <div className="relative group max-w-md mx-auto">
+                    <div className={`relative ${borderRadius} overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 shadow-lg transition-all duration-300 hover:shadow-xl`} style={{ aspectRatio: aspectValue, width: '100%' }}>
+                        <div ref={previewContainerRef} className="relative w-full h-full overflow-hidden">
+                            <img
+                                ref={previewImageRef} src={selectedImage.url} alt={selectedImage.filename}
+                                className="absolute max-w-none" onLoad={calculatePreviewBaseScale}
+                                style={{
+                                    top: '50%', left: '50%', width: 'auto', height: 'auto',
+                                    minWidth: '100%', minHeight: '100%',
+                                    filter: getImageFilter(brightness, blur),
+                                    transform: previewBaseScale ? getImageTransform({ scale: transforms.scale, positionX: transforms.positionX, positionY: transforms.positionY, baseScale: previewBaseScale }, true) : 'translate(-50%, -50%)',
+                                    transformOrigin: 'center center',
+                                }}
+                            />
                         </div>
+                        {/* Overlay on hover */}
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300 pointer-events-none" />
                     </div>
-                    <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-2 truncate">
-                        {selectedImage.filename}
-                    </p>
                 </div>
             ) : (
                 <div
-                    onClick={() => setIsOpen(true)}
-                    className="relative aspect-video bg-dashboard-bg rounded-xl border-2 border-dashed border-dashboard-border flex flex-col items-center justify-center text-neutral-400 dark:text-neutral-500 hover:bg-dashboard-card hover:border-primary cursor-pointer transition-all"
+                    onClick={() => setIsBrowserOpen(true)}
+                    className="aspect-video bg-gradient-to-br from-neutral-50 to-neutral-100 dark:from-neutral-900 dark:to-neutral-950 rounded-2xl border-2 border-dashed border-neutral-300 dark:border-neutral-800 flex flex-col items-center justify-center text-neutral-400 hover:border-primary hover:text-primary cursor-pointer transition-all duration-300 hover:shadow-lg group"
                 >
-                    <ImageIcon size={32} className="mb-2" />
-                    <span className="text-xs font-bold uppercase tracking-wider">Select Image</span>
+                    <div className="p-4 bg-white/50 dark:bg-neutral-800/50 rounded-full mb-3 group-hover:scale-110 transition-transform duration-300">
+                        <ImageIcon size={28} className="group-hover:scale-110 transition-transform duration-300" />
+                    </div>
+                    <span className="text-xs font-bold uppercase tracking-[0.15em] group-hover:tracking-[0.2em] transition-all duration-300">Select Image</span>
                 </div>
             )}
 
-            {/* Action Buttons */}
-            <div className="flex gap-2">
+            <div className="flex flex-wrap items-center justify-center gap-3">
                 <button
-                    onClick={() => setIsOpen(true)}
-                    className="flex-1 px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl text-sm font-bold text-dashboard-text hover:bg-dashboard-bg transition-colors flex items-center justify-center gap-2"
+                    onClick={() => setIsBrowserOpen(true)}
+                    className="flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]"
                 >
                     <Search size={16} />
                     Browse
                 </button>
                 <button
-                    onClick={() => fileInputRef.current?.click()}
-                    disabled={uploading}
-                    className="flex-1 px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
-                >
-                    <Upload size={16} />
-                    {uploading ? 'Uploading...' : 'Upload'}
-                </button>
-                <button
-                    onClick={() => setShowUrlInput(!showUrlInput)}
-                    className="px-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl text-sm font-bold text-dashboard-text hover:bg-dashboard-bg transition-colors flex items-center justify-center gap-2"
+                    onClick={() => setIsEditorOpen(true)}
+                    disabled={!selectedImage}
+                    className="flex items-center justify-center gap-2 px-5 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl text-sm font-semibold text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-750 hover:border-neutral-300 dark:hover:border-neutral-600 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98] disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:shadow-sm disabled:hover:scale-100"
                 >
-                    <LinkIcon size={16} />
-                    URL
+                    <Settings size={16} />
+                    Edit
                 </button>
             </div>
 
-            {/* External URL Input */}
-            {showUrlInput && (
-                <div className="p-4 bg-dashboard-bg rounded-xl border border-dashboard-border space-y-2">
-                    <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase">
-                        External Image URL
-                    </label>
-                    <div className="flex gap-2">
-                        <input
-                            type="url"
-                            value={externalUrl}
-                            onChange={(e) => setExternalUrl(e.target.value)}
-                            onKeyDown={(e) => {
-                                if (e.key === 'Enter') {
-                                    handleUseExternalUrl();
-                                }
-                            }}
-                            placeholder="https://example.com/image.jpg"
-                            className="flex-1 px-3 py-2 bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100"
-                        />
-                        <button
-                            onClick={handleUseExternalUrl}
-                            className="px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors"
-                        >
-                            Use
-                        </button>
-                        <button
-                            onClick={() => {
-                                setShowUrlInput(false);
-                                setExternalUrl('');
-                            }}
-                            className="px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-400 rounded-lg text-sm font-bold hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors"
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
-            )}
-
-            {/* Effects Controls */}
-            {showEffects && selectedImage && (
-                <div className="space-y-3 p-4 bg-dashboard-bg rounded-xl border border-dashboard-border">
-                    <div className="flex items-center gap-2 mb-3">
-                        <SlidersHorizontal size={14} className="text-neutral-500 dark:text-neutral-400" />
-                        <label className="text-[10px] text-neutral-500 dark:text-neutral-400 uppercase font-bold">
-                            Image Effects
-                        </label>
-                    </div>
-                    
-                    {/* Brightness */}
-                    <div>
-                        <div className="flex items-center justify-between mb-2">
-                            <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400">
-                                Brightness
-                            </label>
-                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-500">
-                                {brightness}%
-                            </span>
-                        </div>
-                        <input
-                            type="range"
-                            min="0"
-                            max="200"
-                            value={brightness}
-                            onChange={(e) => onBrightnessChange?.(parseInt(e.target.value))}
-                            className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-primary"
-                        />
-                    </div>
-
-                    {/* Blur */}
-                    <div>
-                        <div className="flex items-center justify-between mb-2">
-                            <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400">
-                                Blur
-                            </label>
-                            <span className="text-xs font-bold text-neutral-500 dark:text-neutral-500">
-                                {blur}px
-                            </span>
-                        </div>
-                        <input
-                            type="range"
-                            min="0"
-                            max="20"
-                            value={blur}
-                            onChange={(e) => onBlurChange?.(parseInt(e.target.value))}
-                            className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-primary"
-                        />
-                    </div>
-                </div>
-            )}
-
-            {/* Hidden file input */}
-            <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/*"
-                onChange={handleFileSelect}
-                className="hidden"
-            />
-
-            {/* Image Browser Modal */}
-            {isOpen && (
-                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-                    <div
-                        ref={modalRef}
-                        className={`w-full max-w-4xl max-h-[80vh] bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 shadow-2xl flex flex-col ${
-                            darkMode ? 'dark' : ''
-                        }`}
-                    >
-                        {/* Modal Header */}
-                        <div className="p-6 border-b border-dashboard-border flex items-center justify-between">
-                            <h2 className="text-lg font-black uppercase tracking-tighter text-dashboard-text">
-                                Select Image
-                            </h2>
-                            <button
-                                onClick={() => setIsOpen(false)}
-                                className="p-2 hover:bg-dashboard-bg rounded-lg transition-colors"
-                            >
-                                <X size={20} className="text-neutral-500 dark:text-neutral-400" />
-                            </button>
-                        </div>
-
-                        {/* Search Bar */}
-                        <div className="p-4 border-b border-dashboard-border">
-                            <div className="relative">
-                                <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500" />
-                                <input
-                                    type="text"
-                                    value={searchQuery}
-                                    onChange={(e) => {
-                                        setSearchQuery(e.target.value);
-                                        setPage(1);
-                                    }}
-                                    placeholder="Search images..."
-                                    className="w-full pl-10 pr-4 py-2 bg-dashboard-card border border-dashboard-border rounded-xl text-sm font-bold outline-none focus:border-primary transition-all text-dashboard-text"
-                                />
-                            </div>
-                        </div>
-
-                        {/* Image Grid */}
-                        <div className="flex-1 overflow-y-auto p-4">
-                            {loading && images.length === 0 ? (
-                                <div className="text-center py-12">
-                                    <div className="animate-pulse text-neutral-400 dark:text-neutral-500">
-                                        Loading images...
-                                    </div>
-                                </div>
-                            ) : images.length === 0 ? (
-                                <div className="text-center py-12">
-                                    <ImageIcon size={48} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
-                                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
-                                        No images found
-                                    </p>
-                                    <button
-                                        onClick={() => fileInputRef.current?.click()}
-                                        className="text-sm font-bold text-primary hover:underline"
-                                    >
-                                        Upload your first image
-                                    </button>
-                                </div>
-                            ) : (
-                                <div className="grid grid-cols-4 gap-4">
-                                    {images.map((image) => (
-                                        <button
-                                            key={image.id}
-                                            onClick={() => {
-                                                handleSelectImage(image);
-                                                setIsOpen(false);
-                                            }}
-                                            className={`relative aspect-square rounded-xl overflow-hidden border-2 transition-all ${
-                                                selectedImage?.id === image.id
-                                                    ? 'border-primary ring-2 ring-primary/20'
-                                                    : 'border-neutral-200 dark:border-neutral-700 hover:border-primary/50'
-                                            }`}
-                                        >
-                                            <img
-                                                src={image.url}
-                                                alt={image.alt || image.filename}
-                                                className="w-full h-full object-cover"
-                                            />
-                                            {selectedImage?.id === image.id && (
-                                                <div className="absolute inset-0 bg-primary/20 flex items-center justify-center">
-                                                    <div className="bg-primary text-white rounded-full p-2">
-                                                        <Check size={16} />
-                                                    </div>
-                                                </div>
-                                            )}
-                                        </button>
-                                    ))}
-                                </div>
-                            )}
-
-                            {/* Load More */}
-                            {hasMore && !loading && (
-                                <div className="text-center mt-4">
-                                    <button
-                                        onClick={() => loadImages(false)}
-                                        className="px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-lg text-sm font-bold hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
-                                    >
-                                        Load More
-                                    </button>
-                                </div>
-                            )}
-                        </div>
-
-                        {/* External URL Input in Modal */}
-                        <div className="p-4 border-t border-neutral-200 dark:border-neutral-800">
-                            <label className="text-xs font-bold text-neutral-600 dark:text-neutral-400 uppercase mb-2 block">
-                                Or use external URL
-                            </label>
-                            <div className="flex gap-2">
-                                <input
-                                    type="url"
-                                    value={externalUrl}
-                                    onChange={(e) => setExternalUrl(e.target.value)}
-                                    onKeyDown={(e) => {
-                                        if (e.key === 'Enter') {
-                                            handleUseExternalUrl();
-                                        }
-                                    }}
-                                    placeholder="https://example.com/image.jpg"
-                                    className="flex-1 px-3 py-2 bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100"
-                                />
-                                <button
-                                    onClick={handleUseExternalUrl}
-                                    className="px-4 py-2 bg-primary text-white rounded-lg text-sm font-bold hover:bg-primary/90 transition-colors flex items-center gap-2"
-                                >
-                                    <LinkIcon size={16} />
-                                    Use URL
-                                </button>
-                            </div>
+            {isEditorOpen && selectedImage && mounted && createPortal(
+                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-neutral-950/80 dark:bg-neutral-950/90 backdrop-blur-md p-4 animate-in fade-in duration-200">
+                    <div className="w-full max-w-4xl bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden shadow-2xl dark:shadow-neutral-950/50 flex flex-col max-h-[85vh] border border-neutral-200 dark:border-neutral-800 animate-in zoom-in-95 duration-300">
+                        <div className="flex-1 overflow-hidden p-4 lg:p-6">
+                            <ImageEditor
+                                ref={editorRef}
+                                imageUrl={selectedImage.url}
+                                scale={transforms.scale}
+                                positionX={transforms.positionX}
+                                positionY={transforms.positionY}
+                                brightness={brightness}
+                                blur={blur}
+                                onScaleChange={(s) => setTransforms(t => ({ ...t, scale: s }))}
+                                onPositionChange={(x, y) => {
+                                    // Only update local state during drag - don't trigger saves
+                                    // Saves will happen when editor closes via onEditorSave
+                                    setTransforms(t => ({ ...t, positionX: x, positionY: y }));
+                                }}
+                                onBrightnessChange={onBrightnessChange}
+                                onBlurChange={onBlurChange}
+                                aspectRatio={aspectRatio}
+                                borderRadius={borderRadius}
+                            />
                         </div>
-
-                        {/* Modal Footer */}
-                        <div className="p-4 border-t border-neutral-200 dark:border-neutral-800 flex items-center justify-between">
+                        <div className="px-6 py-5 border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50/80 dark:bg-neutral-900/80 backdrop-blur-sm flex justify-end gap-3">
                             <button
-                                onClick={() => fileInputRef.current?.click()}
-                                disabled={uploading}
-                                className="px-4 py-2 bg-primary text-white rounded-xl text-sm font-bold hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
+                                onClick={() => setIsEditorOpen(false)}
+                                className="px-6 py-2.5 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl font-semibold text-neutral-700 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all duration-200 shadow-sm hover:shadow-md active:scale-[0.98]"
                             >
-                                <Upload size={16} />
-                                {uploading ? 'Uploading...' : 'Upload New Image'}
+                                Cancel
                             </button>
                             <button
-                                onClick={() => {
-                                    setIsOpen(false);
-                                    setExternalUrl('');
-                                }}
-                                className="px-4 py-2 bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-xl text-sm font-bold hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+                                onClick={handleEditorSave}
+                                className="px-8 py-2.5 bg-primary text-white rounded-xl font-semibold shadow-md hover:shadow-lg hover:bg-primary/90 transition-all duration-200 active:scale-[0.98]"
                             >
-                                Close
+                                Done
                             </button>
                         </div>
                     </div>
-                </div>
+                </div>,
+                document.body
             )}
+
+            <ImageBrowserModal
+                isOpen={isBrowserOpen}
+                onClose={() => setIsBrowserOpen(false)}
+                onSelectImage={(image) => {
+                    setSelectedImage(image);
+                    onChange?.(image);
+                    setIsBrowserOpen(false);
+                }}
+                selectedImageId={(() => {
+                    // Use resolved image's filename/URL if available, otherwise fall back to value
+                    // This ensures semantic IDs are resolved to actual filenames for matching
+                    if (selectedImage) {
+                        return selectedImage.filename || selectedImage.url || selectedImage.id || value;
+                    }
+                    return value;
+                })()}
+                darkMode={false}
+            />
         </div>
     );
-}
-
+}