@jhits/plugin-images 0.0.5 → 0.0.7

package/src/components/ImageEditor.js

@@ -0,0 +1,173 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useImperativeHandle, forwardRef, useMemo } from 'react';
+import { ZoomIn, RotateCcw, Maximize2, Sun, Droplets } from 'lucide-react';
+import { getImageTransform, getImageFilter } from '../utils/transforms';
+export const ImageEditor = forwardRef(({ imageUrl, scale, positionX, positionY, brightness = 100, blur = 0, onScaleChange, onPositionChange, onBrightnessChange, onBlurChange, aspectRatio = '16/9', borderRadius = 'rounded-xl', imageId, }, ref) => {
+    const containerRef = useRef(null);
+    const imageRef = useRef(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, positionX, positionY, localBrightness, localBlur]);
+    const getClampedPosition = useCallback((x, y, currentScale) => {
+        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) => {
+        const s = Math.max(0.1, Math.min(5.0, newScale));
+        onScaleChange(s);
+        const clamped = getClampedPosition(positionX, positionY, s);
+        onPositionChange(clamped.x, clamped.y);
+    };
+    const calculateBaseScale = useCallback(() => {
+        var _a, _b;
+        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 = (_a = container.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth;
+            const parentHeight = (_b = container.parentElement) === null || _b === void 0 ? void 0 : _b.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) => {
+            if (!containerRef.current || !imageRef.current || baseScale === 0)
+                return;
+            const rect = containerRef.current.getBoundingClientRect();
+            // Calculate movement in screen pixels
+            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 newPositionX = dragStartPosition.x + dx;
+            const newPositionY = dragStartPosition.y + dy;
+            const clamped = getClampedPosition(newPositionX, newPositionY, scale);
+            onPositionChange(clamped.x, clamped.y);
+        };
+        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]);
+    const aspectValue = useMemo(() => {
+        if (aspectRatio === 'auto')
+            return undefined;
+        const [w, h] = aspectRatio.split('/').map(Number);
+        return w / h;
+    }, [aspectRatio]);
+    return (_jsxs("div", { className: "flex flex-col lg:flex-row gap-6 h-full", children: [_jsx("div", { className: "flex-1 bg-neutral-50 dark:bg-neutral-950 rounded-2xl p-4 lg:p-6 flex items-center justify-center border border-neutral-300 dark:border-neutral-700 relative group/canvas min-w-0", children: _jsx("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' }, 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();
+                    }, children: _jsx("img", { ref: imageRef, src: imageUrl, alt: "Editor", onLoad: calculateBaseScale, className: "absolute max-w-none select-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%)',
+                            transformOrigin: 'center center'
+                        }, draggable: false }) }) }), _jsx("div", { className: "w-full lg:w-80 space-y-4", children: _jsxs("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", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(ZoomIn, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Zoom Level"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [Math.round(scale * 100), "%"] }), _jsx("button", { onClick: () => handleScaleChange(1), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset zoom", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("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" })] }), onBrightnessChange && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(Sun, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Brightness"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [Math.round(localBrightness), "%"] }), _jsx("button", { onClick: () => setLocalBrightness(100), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset brightness", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("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" })] })), onBlurChange && (_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsxs("label", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 flex items-center gap-2", children: [_jsx(Droplets, { size: 14, className: "text-neutral-600 dark:text-neutral-300" }), " Blur"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-xs font-mono font-bold text-primary dark:text-primary", children: [localBlur, "px"] }), _jsx("button", { onClick: () => setLocalBlur(0), className: "p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", title: "Reset blur", children: _jsx(RotateCcw, { size: 12, className: "text-neutral-500 dark:text-neutral-400" }) })] })] }), _jsx("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" })] })), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("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", children: [_jsx(Maximize2, { size: 16, className: "text-neutral-700 dark:text-neutral-300" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Center" })] }), _jsxs("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", children: [_jsx(RotateCcw, { size: 16, className: "text-neutral-700 dark:text-neutral-300" }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Reset All" })] })] })] }) })] }));
+});
+ImageEditor.displayName = 'ImageEditor';

package/src/components/ImagePicker.d.ts

@@ -0,0 +1,3 @@
+import type { ImagePickerProps } from '../types';
+export declare function ImagePicker({ value, onChange, brightness, blur, scale, positionX, positionY, aspectRatio, borderRadius, onBrightnessChange, onBlurChange, onScaleChange, onPositionXChange, onPositionYChange, onEditorSave, autoOpenEditor, }: ImagePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImagePicker.d.ts.map

package/src/components/ImagePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePicker.d.ts","sourceRoot":"","sources":["ImagePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EAAE,QAAQ,EAAE,UAAgB,EAAE,IAAQ,EAAE,KAAW,EAAE,SAAa,EAAE,SAAa,EACtF,WAAoB,EAAE,YAA2B,EAAE,kBAAkB,EAAE,YAAY,EACnF,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,YAAY,EAAE,cAAsB,GAC5F,EAAE,gBAAgB,2CAuPlB"}

package/src/components/ImagePicker.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Search, Image as ImageIcon, Settings } from 'lucide-react';
+import { ImageEditor } from './ImageEditor';
+import { ImageBrowserModal } from './ImageBrowserModal';
+import { useImagePicker } from '../hooks/useImagePicker';
+import { getImageTransform, getImageFilter } from '../utils/transforms';
+import { getFallbackImageUrl } from '../utils/fallback';
+export function ImagePicker({ 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, }) {
+    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(null);
+    const [previewImageError, setPreviewImageError] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const [portalTarget, setPortalTarget] = useState(null);
+    const previewImageRef = useRef(null);
+    const previewContainerRef = useRef(null);
+    const editorRef = useRef(null);
+    const { selectedImage, setSelectedImage } = useImagePicker({ value, images: [] });
+    // Reset preview error when selected image changes
+    useEffect(() => {
+        setPreviewImageError(false);
+    }, [selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.id, selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.url]);
+    // Handle SSR & portal target - ensure we only render portal on client
+    useEffect(() => {
+        var _a;
+        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 = (_a = previewContainerRef.current) === null || _a === void 0 ? void 0 : _a.closest('[data-image-editor="true"]');
+        if (editorContainer) {
+            setPortalTarget(editorContainer);
+        }
+        else {
+            setPortalTarget(document.body);
+        }
+    }, []);
+    // 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;
+        }
+    }, [autoOpenEditor, selectedImage, isEditorOpen]);
+    useEffect(() => {
+        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 === null || onScaleChange === void 0 ? void 0 : onScaleChange(final.scale);
+                // Update positions - these will trigger saves
+                onPositionXChange === null || onPositionXChange === void 0 ? void 0 : 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 === null || onPositionYChange === void 0 ? void 0 : 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);
+        return w / h;
+    }, [aspectRatio]);
+    return (_jsxs("div", { className: "space-y-6", children: [selectedImage ? (_jsx("div", { className: "relative group max-w-md mx-auto", children: _jsxs("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%' }, children: [_jsx("div", { ref: previewContainerRef, className: "relative w-full h-full overflow-hidden", children: previewImageError ? (_jsx("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',
+                                } })) : (_jsx("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',
+                                } })) }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300 pointer-events-none" })] }) })) : (_jsxs("div", { 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", children: [_jsx("div", { className: "p-4 bg-white/50 dark:bg-neutral-800/50 rounded-full mb-3 group-hover:scale-110 transition-transform duration-300", children: _jsx(ImageIcon, { size: 28, className: "group-hover:scale-110 transition-transform duration-300" }) }), _jsx("span", { className: "text-xs font-bold uppercase tracking-[0.15em] group-hover:tracking-[0.2em] transition-all duration-300", children: "Select Image" })] })), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [_jsxs("button", { 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]", children: [_jsx(Search, { size: 16 }), "Browse"] }), _jsxs("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", children: [_jsx(Settings, { size: 16 }), "Edit"] })] }), isEditorOpen && selectedImage && mounted && portalTarget && createPortal(_jsx("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", children: _jsxs("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", children: [_jsx("div", { className: "flex-1 overflow-hidden p-4 lg:p-6", children: _jsx(ImageEditor, { ref: editorRef, imageUrl: selectedImage.url, scale: transforms.scale, positionX: transforms.positionX, positionY: transforms.positionY, brightness: brightness, blur: blur, onScaleChange: (s) => setTransforms(t => (Object.assign(Object.assign({}, 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 => (Object.assign(Object.assign({}, t), { positionX: x, positionY: y })));
+                                }, onBrightnessChange: onBrightnessChange, onBlurChange: onBlurChange, aspectRatio: aspectRatio, borderRadius: borderRadius }) }), _jsxs("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", children: [_jsx("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]", children: "Cancel" }), _jsx("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]", children: "Done" })] })] }) }), portalTarget), _jsx(ImageBrowserModal, { isOpen: isBrowserOpen, onClose: () => setIsBrowserOpen(false), onSelectImage: (image) => {
+                    setSelectedImage(image);
+                    onChange === null || onChange === void 0 ? void 0 : 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 })] }));
+}

package/src/components/ImagePicker.tsx

@@ -9,6 +9,7 @@ import { ImageEditor, type ImageEditorHandle } from './ImageEditor';
 import { ImageBrowserModal } from './ImageBrowserModal';
 import { useImagePicker } from '../hooks/useImagePicker';
 import { getImageTransform, getImageFilter } from '../utils/transforms';
+import { getFallbackImageUrl } from '../utils/fallback';
 
 export function ImagePicker({
     value, onChange, brightness = 100, blur = 0, scale = 1.0, positionX = 0, positionY = 0,
@@ -20,16 +21,34 @@ export function ImagePicker({
     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: [] });
 
-    // Handle SSR - ensure we only render portal on client
+    // 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);
+        } else {
+            setPortalTarget(document.body);
+        }
     }, []);
 
     // Auto-open editor if requested (e.g., when opening from edit button)
@@ -115,17 +134,36 @@ 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">
-                            <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',
-                                }}
-                            />
+                            {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',
+                                    }}
+                                />
+                            )}
                         </div>
                         {/* Overlay on hover */}
                         <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300 pointer-events-none" />
@@ -161,8 +199,8 @@ export function ImagePicker({
                 </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">
+            {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="flex-1 overflow-hidden p-4 lg:p-6">
                             <ImageEditor
@@ -201,7 +239,7 @@ export function ImagePicker({
                         </div>
                     </div>
                 </div>,
-                document.body
+                portalTarget
             )}
 
             <ImageBrowserModal

package/src/components/ImagesPluginInit.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Images Plugin Initialization Component
+ *
+ * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
+ * and renders the GlobalImageEditor if enabled.
+ *
+ * Render this once in your app layout after calling initImagesPlugin().
+ */
+/**
+ * Images Plugin Initialization Component
+ *
+ * Renders the global image editor if enabled in the plugin configuration.
+ * This component should be rendered in your app layout.
+ *
+ * @example
+ * ```tsx
+ * import { ImagesPluginInit } from '@jhits/plugin-images';
+ *
+ * // After calling initImagesPlugin() in a useEffect or script
+ * <ImagesPluginInit />
+ * ```
+ */
+export declare function ImagesPluginInit(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ImagesPluginInit.d.ts.map

package/src/components/ImagesPluginInit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagesPluginInit.d.ts","sourceRoot":"","sources":["ImagesPluginInit.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,4CAE/B"}

package/src/components/ImagesPluginInit.js

@@ -0,0 +1,28 @@
+/**
+ * Images Plugin Initialization Component
+ *
+ * This component reads from window.__JHITS_PLUGIN_PROPS__['plugin-images']
+ * and renders the GlobalImageEditor if enabled.
+ *
+ * Render this once in your app layout after calling initImagesPlugin().
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GlobalImageEditor } from './GlobalImageEditor';
+/**
+ * Images Plugin Initialization Component
+ *
+ * Renders the global image editor if enabled in the plugin configuration.
+ * This component should be rendered in your app layout.
+ *
+ * @example
+ * ```tsx
+ * import { ImagesPluginInit } from '@jhits/plugin-images';
+ *
+ * // After calling initImagesPlugin() in a useEffect or script
+ * <ImagesPluginInit />
+ * ```
+ */
+export function ImagesPluginInit() {
+    return _jsx(GlobalImageEditor, {});
+}

package/src/hooks/useImagePicker.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Hook for Image Picker Logic
+ */
+import type { ImageMetadata } from '../types';
+export interface UseImagePickerOptions {
+    value?: string;
+    images: ImageMetadata[];
+}
+export declare function useImagePicker({ value, images }: UseImagePickerOptions): {
+    selectedImage: ImageMetadata | null;
+    setSelectedImage: import("react").Dispatch<import("react").SetStateAction<ImageMetadata | null>>;
+    uploading: boolean;
+    fileInputRef: import("react").RefObject<HTMLInputElement | null>;
+    handleFileSelect: (e?: React.ChangeEvent<HTMLInputElement> | {
+        target: {
+            files: File[] | null;
+        };
+    }) => Promise<any>;
+};
+//# sourceMappingURL=useImagePicker.d.ts.map

package/src/hooks/useImagePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePicker.d.ts","sourceRoot":"","sources":["useImagePicker.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,qBAAqB;;;;;2BA6R/B,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG;QAAE,MAAM,EAAE;YAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;SAAE,CAAA;KAAE;EA8CjH"}