@jhits/plugin-images 0.0.13 → 0.0.15

package/src/components/ImageEditor.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import React, { useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo } from 'react';
-import { ZoomIn, RotateCcw, Move, Maximize2, Sun, Droplets } from 'lucide-react';
-import { getImageTransform, getImageFilter } from '../utils/transforms';
+import { ZoomIn, RotateCcw, Maximize2, Sun, Droplets } from 'lucide-react';
+import { getImageFilter } from '../utils/transforms';
 
 export interface ImageEditorProps {
     imageUrl: string;
@@ -40,153 +40,51 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({
     imageId,
 }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
-    const imageRef = useRef<HTMLImageElement>(null);
     const [isDragging, setIsDragging] = useState(false);
     const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
     const [dragStartPosition, setDragStartPosition] = useState({ x: 0, y: 0 });
-    const [baseScale, setBaseScale] = useState(0);
     
-    // Local state for brightness and blur (only applied on save)
     const [localBrightness, setLocalBrightness] = useState(brightness);
     const [localBlur, setLocalBlur] = useState(blur);
 
-    // Keep internal values in a ref to avoid stale closure issues during the final save
-    const currentValues = useRef({ scale, positionX, positionY, brightness, blur });
-    useEffect(() => {
-        currentValues.current = { scale, positionX, positionY, brightness: localBrightness, blur: localBlur };
-    }, [scale, positionX, positionY, localBrightness, localBlur]);
-    
-    // Reset local values when props change (when editor opens with new values)
     useEffect(() => {
         setLocalBrightness(brightness);
         setLocalBlur(blur);
     }, [brightness, blur]);
 
-    // EXPOSE TO PARENT: Return current values so Parent can handle the DB Save
     useImperativeHandle(ref, () => ({
         flushSave: async () => {
-            // Read the latest values directly from props/state (they're in the dependency array, so they're current)
-            // The ref is kept in sync via useEffect, but read directly from props to avoid any timing issues
-            const latestScale = scale;
-            const latestPositionX = positionX;
-            const latestPositionY = positionY;
-            const latestBrightness = localBrightness;
-            const latestBlur = localBlur;
-            
-            // Update the ref to ensure it's in sync (for any other code that might read it)
-            currentValues.current = { 
-                scale: latestScale, 
-                positionX: latestPositionX, 
-                positionY: latestPositionY, 
-                brightness: latestBrightness, 
-                blur: latestBlur 
-            };
-            
-            // DON'T call onBrightnessChange/onBlurChange here - they trigger saves
-            // The parent (via onEditorSave) will handle saving all values together
-            // This prevents duplicate saves
-            
             return {
-                scale: Math.max(0.1, Math.min(5.0, latestScale)),
-                positionX: latestPositionX,
-                positionY: latestPositionY,
-                brightness: latestBrightness,
-                blur: latestBlur
+                scale: Math.max(0.1, Math.min(5.0, scale)),
+                positionX: positionX,
+                positionY: positionY,
+                brightness: localBrightness,
+                blur: localBlur
             };
         }
     }), [scale, positionX, positionY, localBrightness, localBlur]);
 
-    const getClampedPosition = useCallback((x: number, y: number, currentScale: number) => {
-        if (!containerRef.current || !imageRef.current || baseScale === 0) return { x, y };
-        const totalScale = baseScale * currentScale;
-        const containerWidth = containerRef.current.offsetWidth;
-        const containerHeight = containerRef.current.offsetHeight;
-        
-        // With minWidth/minHeight, the image maintains its natural aspect ratio
-        // but is scaled to cover the container. The scaled dimensions are based on natural size.
-        const scaledWidth = imageRef.current.naturalWidth * totalScale;
-        const scaledHeight = imageRef.current.naturalHeight * totalScale;
-        const overflowX = Math.max(0, (scaledWidth - containerWidth) / 2);
-        const overflowY = Math.max(0, (scaledHeight - containerHeight) / 2);
-        
-        // Convert overflow limits to percentage of CONTAINER (not natural size)
-        // Position values are container-relative, so limits must be too
-        const limitX = containerWidth > 0 ? (overflowX / containerWidth) * 100 : 0;
-        const limitY = containerHeight > 0 ? (overflowY / containerHeight) * 100 : 0;
-        
-        return { x: Math.max(-limitX, Math.min(limitX, x)), y: Math.max(-limitY, Math.min(limitY, y)) };
-    }, [baseScale]);
-
     const handleScaleChange = (newScale: number) => {
-        const s = Math.max(0.1, Math.min(5.0, newScale));
-        onScaleChange(s);
-        const clamped = getClampedPosition(positionX, positionY, s);
-        onPositionChange(clamped.x, clamped.y);
+        onScaleChange(Math.max(0.1, Math.min(5.0, newScale)));
     };
 
-    const calculateBaseScale = useCallback(() => {
-        if (!imageRef.current || !containerRef.current) return;
-        const img = imageRef.current;
-        const container = containerRef.current;
-        const containerWidth = container.offsetWidth;
-        const containerHeight = container.offsetHeight;
-        
-        // Ensure container has dimensions before calculating
-        if (containerWidth === 0 || containerHeight === 0) {
-            // Try to get dimensions from computed styles or parent
-            const parentWidth = container.parentElement?.clientWidth;
-            const parentHeight = container.parentElement?.clientHeight;
-            
-            if (parentWidth && parentHeight && img.naturalWidth > 0) {
-                const widthRatio = parentWidth / img.naturalWidth;
-                const heightRatio = parentHeight / img.naturalHeight;
-                const calculatedBaseScale = Math.max(widthRatio, heightRatio);
-                setBaseScale(calculatedBaseScale);
-            }
-            return;
-        }
-        
-        if (img.naturalWidth === 0 || img.naturalHeight === 0) return;
-        setBaseScale(Math.max(containerWidth / img.naturalWidth, containerHeight / img.naturalHeight));
-    }, []);
-
-    useEffect(() => {
-        if (!containerRef.current) return;
-        const obs = new ResizeObserver(calculateBaseScale);
-        obs.observe(containerRef.current);
-        return () => obs.disconnect();
-    }, [calculateBaseScale]);
-
     useEffect(() => {
         if (!isDragging) return;
         const move = (e: MouseEvent) => {
-            if (!containerRef.current || !imageRef.current || baseScale === 0) return;
-            const rect = containerRef.current.getBoundingClientRect();
-            
-            // Calculate movement in screen pixels
+            if (!containerRef.current) return;
             const mouseDeltaX = e.clientX - dragStart.x;
             const mouseDeltaY = e.clientY - dragStart.y;
             
-            // Convert screen pixel movement to percentage of CONTAINER
-            // Since the image is now width: 100%; height: 100%, percentages are container-relative
-            // This makes position values consistent across different container sizes
-            const dx = containerRef.current && containerRef.current.offsetWidth > 0
-                ? (mouseDeltaX / containerRef.current.offsetWidth) * 100
-                : 0;
-            const dy = containerRef.current && containerRef.current.offsetHeight > 0
-                ? (mouseDeltaY / containerRef.current.offsetHeight) * 100
-                : 0;
+            const dx = (mouseDeltaX / containerRef.current.offsetWidth) * 100;
+            const dy = (mouseDeltaY / containerRef.current.offsetHeight) * 100;
             
-            const newPositionX = dragStartPosition.x + dx;
-            const newPositionY = dragStartPosition.y + dy;
-            const clamped = getClampedPosition(newPositionX, newPositionY, scale);
-            onPositionChange(clamped.x, clamped.y);
+            onPositionChange(dragStartPosition.x + dx, dragStartPosition.y + dy);
         };
         const up = () => setIsDragging(false);
         window.addEventListener('mousemove', move);
         window.addEventListener('mouseup', up);
         return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); };
-    }, [isDragging, dragStart, dragStartPosition, scale, baseScale, getClampedPosition, onPositionChange]);
+    }, [isDragging, dragStart, dragStartPosition, onPositionChange]);
 
     const aspectValue = useMemo(() => {
         if (aspectRatio === 'auto') return undefined;
@@ -200,31 +98,26 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({
                 <div
                     ref={containerRef}
                     className={`relative shadow-2xl overflow-hidden ${borderRadius} bg-neutral-100 dark:bg-neutral-900 w-full max-w-full border border-neutral-200 dark:border-neutral-800`}
-                    style={{ aspectRatio: aspectValue, height: aspectValue && aspectValue < 1 ? '400px' : 'auto', width: aspectValue && aspectValue < 1 ? 'auto' : '100%', cursor: isDragging ? 'grabbing' : 'grab' }}
+                    style={{ 
+                        aspectRatio: aspectValue, 
+                        cursor: isDragging ? 'grabbing' : 'grab' 
+                    }}
                     onMouseDown={(e) => { 
                         setIsDragging(true); 
                         setDragStart({ x: e.clientX, y: e.clientY }); 
-                        // Convert stored position to visual percentage for dragging
-                        // stored = visual, so we can use positionX directly as visual percentage
                         setDragStartPosition({ x: positionX, y: positionY }); 
                         e.preventDefault(); 
                     }}
                 >
                     <img
-                        ref={imageRef} src={imageUrl} alt="Editor" onLoad={calculateBaseScale}
-                        className="absolute max-w-none select-none"
+                        src={imageUrl} 
+                        alt="Editor" 
+                        className="w-full h-full object-cover select-none pointer-events-none"
                         style={{ 
-                            top: '50%', 
-                            left: '50%', 
-                            width: 'auto',  // Allow image to maintain natural aspect ratio
-                            height: 'auto', // Allow image to maintain natural aspect ratio
-                            minWidth: '100%', // Ensure image covers container width
-                            minHeight: '100%', // Ensure image covers container height
                             filter: getImageFilter(localBrightness, localBlur), 
-                            transform: baseScale > 0 ? getImageTransform({ scale, positionX, positionY, baseScale }, true) : 'translate(-50%, -50%)', 
+                            transform: `translate(${positionX}%, ${positionY}%) scale(${scale})`,
                             transformOrigin: 'center center' 
                         }}
-                        draggable={false}
                     />
                 </div>
             </div>
@@ -233,16 +126,10 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({
                 <div className="p-6 bg-white dark:bg-neutral-900 rounded-3xl border border-neutral-200 dark:border-neutral-800 shadow-lg dark:shadow-neutral-950/50 space-y-6">
                     <div>
                         <div className="flex justify-between items-center mb-4">
-                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2"><ZoomIn size={14} className="text-neutral-600 dark:text-neutral-300" /> Zoom Level</label>
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2">Zoom Level</label>
                             <div className="flex items-center gap-2">
-                                <span className="text-xs font-mono font-bold text-primary dark:text-primary">{Math.round(scale * 100)}%</span>
-                                <button 
-                                    onClick={() => handleScaleChange(1)} 
-                                    className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                    title="Reset zoom"
-                                >
-                                    <RotateCcw size={12} className="text-neutral-500 dark:text-neutral-400" />
-                                </button>
+                                <span className="text-xs font-mono font-bold text-primary">{Math.round(scale * 100)}%</span>
+                                <button onClick={() => handleScaleChange(1)} className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg"><RotateCcw size={12} /></button>
                             </div>
                         </div>
                         <input type="range" min="0.1" max="5" step="0.01" value={scale} onChange={(e) => handleScaleChange(parseFloat(e.target.value))} className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" />
@@ -250,74 +137,25 @@ export const ImageEditor = forwardRef<ImageEditorHandle, ImageEditorProps>(({
                     
                     {onBrightnessChange && (
                         <div>
-                            <div className="flex justify-between items-center mb-4">
-                                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2"><Sun size={14} className="text-neutral-600 dark:text-neutral-300" /> Brightness</label>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-xs font-mono font-bold text-primary dark:text-primary">{Math.round(localBrightness)}%</span>
-                                    <button 
-                                        onClick={() => setLocalBrightness(100)} 
-                                        className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                        title="Reset brightness"
-                                    >
-                                        <RotateCcw size={12} className="text-neutral-500 dark:text-neutral-400" />
-                                    </button>
-                                </div>
-                            </div>
-                            <input 
-                                type="range" 
-                                min="0" 
-                                max="200" 
-                                step="1" 
-                                value={localBrightness} 
-                                onChange={(e) => setLocalBrightness(parseInt(e.target.value))} 
-                                className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" 
-                            />
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 mb-4 block">Brightness</label>
+                            <input type="range" min="0" max="200" step="1" value={localBrightness} onChange={(e) => setLocalBrightness(parseInt(e.target.value))} className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" />
                         </div>
                     )}
                     
                     {onBlurChange && (
                         <div>
-                            <div className="flex justify-between items-center mb-4">
-                                <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2"><Droplets size={14} className="text-neutral-600 dark:text-neutral-300" /> Blur</label>
-                                <div className="flex items-center gap-2">
-                                    <span className="text-xs font-mono font-bold text-primary dark:text-primary">{localBlur}px</span>
-                                    <button 
-                                        onClick={() => setLocalBlur(0)} 
-                                        className="p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                                        title="Reset blur"
-                                    >
-                                        <RotateCcw size={12} className="text-neutral-500 dark:text-neutral-400" />
-                                    </button>
-                                </div>
-                            </div>
-                            <input 
-                                type="range" 
-                                min="0" 
-                                max="20" 
-                                step="0.5" 
-                                value={localBlur} 
-                                onChange={(e) => setLocalBlur(parseFloat(e.target.value))} 
-                                className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" 
-                            />
+                            <label className="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 mb-4 block">Blur</label>
+                            <input type="range" min="0" max="20" step="0.5" value={localBlur} onChange={(e) => setLocalBlur(parseFloat(e.target.value))} className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-primary" />
                         </div>
                     )}
                     
                     <div className="grid grid-cols-2 gap-3">
-                        <button onClick={() => onPositionChange(0, 0)} className="flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30">
-                            <Maximize2 size={16} className="text-neutral-700 dark:text-neutral-300" /><span className="text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">Center</span>
-                        </button>
-                        <button onClick={() => {
-                            handleScaleChange(1);
-                            if (onBrightnessChange) setLocalBrightness(100);
-                            if (onBlurChange) setLocalBlur(0);
-                            onPositionChange(0, 0);
-                        }} className="flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl hover:bg-primary/10 dark:hover:bg-primary/20 transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30">
-                            <RotateCcw size={16} className="text-neutral-700 dark:text-neutral-300" /><span className="text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">Reset All</span>
-                        </button>
+                        <button onClick={() => onPositionChange(0, 0)} className="flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl border border-transparent hover:border-primary/20"><Maximize2 size={16} /><span className="text-[9px] font-black uppercase tracking-widest">Center</span></button>
+                        <button onClick={() => { handleScaleChange(1); setLocalBrightness(100); setLocalBlur(0); onPositionChange(0, 0); }} className="flex flex-col items-center gap-2 p-4 bg-neutral-50 dark:bg-neutral-800 rounded-2xl border border-transparent hover:border-primary/20"><RotateCcw size={16} /><span className="text-[9px] font-black uppercase tracking-widest">Reset</span></button>
                     </div>
                 </div>
             </div>
         </div>
     );
 });
-ImageEditor.displayName = 'ImageEditor';
+ImageEditor.displayName = 'ImageEditor';

package/src/components/ImagePicker.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { useState, useEffect, 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';
+import { getImageFilter } from '../utils/transforms';
 import { getFallbackImageUrl } from '../utils/fallback';
 
 export function ImagePicker({
@@ -20,29 +19,21 @@ export function ImagePicker({
     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 [previewImageError, setPreviewImageError] = useState(false);
     const [mounted, setMounted] = useState(false);
     const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
-    const previewImageRef = useRef<HTMLImageElement>(null);
     const previewContainerRef = useRef<HTMLDivElement>(null);
     const editorRef = useRef<ImageEditorHandle | null>(null);
 
     const { selectedImage, setSelectedImage } = useImagePicker({ value, images: [] });
 
-    // Reset preview error when selected image changes
     useEffect(() => {
         setPreviewImageError(false);
     }, [selectedImage?.id, selectedImage?.url]);
 
-    // 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/editor modals share the same stacking context
         const editorContainer = previewContainerRef.current?.closest('[data-image-editor="true"]') as HTMLElement | null;
         if (editorContainer) {
             setPortalTarget(editorContainer);
@@ -51,19 +42,15 @@ export function ImagePicker({
         }
     }, []);
 
-    // 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 (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;
         }
@@ -73,55 +60,26 @@ export function ImagePicker({
         if (!isEditorOpen) setTransforms({ scale: scale >= 0.1 ? scale : 1.0, positionX, positionY });
     }, [scale, positionX, positionY, isEditorOpen]);
 
-    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);
-    }, []);
-
-    // 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;
-
         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 {
-                // 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);
             }
-
-            // 5. Close the editor
             setIsEditorOpen(false);
         } catch (error) {
             console.error('[ImagePicker] Failed to get editor values:', error);
         }
     };
 
-
     const aspectValue = useMemo(() => {
         if (aspectRatio === 'auto') return undefined;
         const [w, h] = aspectRatio.split('/').map(Number);
@@ -134,38 +92,18 @@ export function ImagePicker({
                 <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">
-                            {previewImageError ? (
-                                <img
-                                    src={getFallbackImageUrl()}
-                                    alt={selectedImage.filename || 'Image not found'}
-                                    className="absolute max-w-none"
-                                    style={{
-                                        top: '50%', left: '50%', width: 'auto', height: 'auto',
-                                        minWidth: '100%', minHeight: '100%',
-                                        transform: 'translate(-50%, -50%)',
-                                        transformOrigin: 'center center',
-                                        objectFit: 'cover',
-                                    }}
-                                />
-                            ) : (
-                                <img
-                                    ref={previewImageRef} 
-                                    src={selectedImage.url} 
-                                    alt={selectedImage.filename}
-                                    className="absolute max-w-none" 
-                                    onLoad={calculatePreviewBaseScale}
-                                    onError={() => setPreviewImageError(true)}
-                                    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',
-                                    }}
-                                />
-                            )}
+                            <img
+                                src={previewImageError ? getFallbackImageUrl() : selectedImage.url} 
+                                alt={selectedImage.filename}
+                                onError={() => setPreviewImageError(true)}
+                                className="w-full h-full object-cover"
+                                style={{
+                                    filter: getImageFilter(brightness, blur),
+                                    transform: `translate(${transforms.positionX}%, ${transforms.positionY}%) scale(${transforms.scale})`,
+                                    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>
                 </div>
@@ -186,22 +124,20 @@ export function ImagePicker({
                     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
+                    <Search size={16} /> Browse
                 </button>
                 <button
                     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"
+                    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"
                 >
-                    <Settings size={16} />
-                    Edit
+                    <Settings size={16} /> Edit
                 </button>
             </div>
 
             {isEditorOpen && selectedImage && mounted && portalTarget && createPortal(
                 <div className="fixed inset-0 z-[200] 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="w-full max-w-4xl bg-white dark:bg-neutral-900 rounded-3xl overflow-hidden shadow-2xl 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}
@@ -212,11 +148,7 @@ export function ImagePicker({
                                 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 }));
-                                }}
+                                onPositionChange={(x, y) => setTransforms(t => ({ ...t, positionX: x, positionY: y }))}
                                 onBrightnessChange={onBrightnessChange}
                                 onBlurChange={onBlurChange}
                                 aspectRatio={aspectRatio}
@@ -224,18 +156,8 @@ export function ImagePicker({
                             />
                         </div>
                         <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={() => 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]"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                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]"
-                            >
-                                Done
-                            </button>
+                            <button 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">Cancel</button>
+                            <button onClick={handleEditorSave} className="px-8 py-2.5 bg-primary text-white rounded-xl font-semibold shadow-md">Done</button>
                         </div>
                     </div>
                 </div>,
@@ -250,16 +172,9 @@ export function ImagePicker({
                     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;
-                })()}
+                selectedImageId={selectedImage?.filename || selectedImage?.url || selectedImage?.id || value}
                 darkMode={false}
             />
         </div>
     );
-}
+}