@jhits/plugin-images 0.0.5 → 0.0.6

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@jhits/plugin-images",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Image management and storage plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./src/index.tsx",
-  "types": "./src/index.tsx",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     },
     "./server": {
-      "types": "./src/index.server.ts",
-      "default": "./src/index.server.ts"
+      "types": "./dist/index.server.d.ts",
+      "default": "./dist/index.server.js"
     }
   },
   "dependencies": {
-    "mongodb": "^7.0.0",
-    "lucide-react": "^0.562.0",
-    "@jhits/plugin-core": "0.0.1"
+    "lucide-react": "^0.564.0",
+    "mongodb": "^7.1.0",
+    "@jhits/plugin-core": "0.0.3"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -28,20 +28,24 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20.19.27",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.1",
-    "next": "16.1.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^10.0.0",
+    "eslint-config-next": "16.1.6",
+    "next": "16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
   },
   "files": [
+    "dist",
     "src",
     "package.json"
-  ]
+  ],
+  "scripts": {
+    "build": "tsc"
+  }
 }

package/src/components/GlobalImageEditor.tsx

@@ -236,10 +236,10 @@ export function GlobalImageEditor() {
     if (!isOpen || !selectedImage) {
         return null;
     }
-
+    
     return (
         <div 
-            className={`fixed inset-0 z-[9999] flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
+            className={`fixed inset-0 z-50 flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
             data-image-editor="true"
             onClick={(e) => {
                 if (e.target === e.currentTarget) {

package/src/components/ImageBrowserModal.tsx

@@ -289,10 +289,22 @@ export function ImageBrowserModal({
     const [resolvedSelectedId, setResolvedSelectedId] = useState<string | undefined>(selectedImageId);
     const [internalUploading, setInternalUploading] = useState(false);
     const [mounted, setMounted] = useState(false);
+    const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
     
-    // Handle SSR - ensure we only render portal on client
+    // Handle SSR & portal target - ensure we only render portal on client
     useEffect(() => {
         setMounted(true);
+
+        if (typeof document === 'undefined') return;
+
+        // If we're inside the GlobalImageEditor overlay, portal into that instead of document.body
+        // This ensures the browser modal shares the same stacking context as the global editor
+        const editorContainer = document.querySelector('[data-image-editor="true"]') as HTMLElement | null;
+        if (editorContainer) {
+            setPortalTarget(editorContainer);
+        } else {
+            setPortalTarget(document.body);
+        }
     }, []);
     
     // Debug: Log when selectedImageId prop changes
@@ -650,10 +662,10 @@ export function ImageBrowserModal({
         onClose();
     };
 
-    if (!isOpen || !mounted) return null;
+    if (!isOpen || !mounted || !portalTarget) return null;
 
     const modalContent = (
-        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-in fade-in duration-200">
+        <div className="fixed inset-0 z-[200] flex items-center justify-center p-4 animate-in fade-in duration-200">
             {/* Backdrop */}
             <div
                 className="absolute inset-0 bg-neutral-950/70 backdrop-blur-md"
@@ -677,8 +689,9 @@ export function ImageBrowserModal({
                     <button 
                         onClick={onClose} 
                         className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-xl transition-all duration-200 hover:scale-110 active:scale-95"
+                        aria-label="Close"
                     >
-                        <X size={20} className="text-neutral-400" />
+                        <X size={20} className="text-neutral-500 dark:text-neutral-300 hover:text-neutral-700 dark:hover:text-white transition-colors" />
                     </button>
                 </div>
 
@@ -820,5 +833,5 @@ export function ImageBrowserModal({
         </div>
     );
 
-    return createPortal(modalContent, document.body);
+    return createPortal(modalContent, portalTarget);
 }

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/hooks/useImagePicker.ts

@@ -187,10 +187,21 @@ export function useImagePicker({ value, images }: UseImagePickerOptions) {
                             lastResolvedValueRef.current = value;
                             isResolvingRef.current = false;
                         } else {
-                            // API resolution failed, create fallback object
+                            // API resolution failed - check if it's a semantic ID or actual filename
+                            const isLikelyFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageIdToResolve) || /^\d+-/.test(imageIdToResolve);
+                            
+                            if (!isLikelyFilename) {
+                                // It's a semantic ID that couldn't be resolved - clear selection
+                                // This prevents showing broken URLs like /api/uploads/blog-featured-...
+                                setSelectedImage(null);
+                                lastResolvedValueRef.current = value;
+                                isResolvingRef.current = false;
+                                return;
+                            }
+                            
+                            // It's a filename, create fallback object
                             const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
                             const isRelativeUrl = value.startsWith('/');
-                            const isUrl = isFullUrl || isRelativeUrl;
                             
                             let imageUrl: string;
                             if (isFullUrl) {
@@ -200,7 +211,7 @@ export function useImagePicker({ value, images }: UseImagePickerOptions) {
                                 // Already a relative URL starting with /, use as-is
                                 imageUrl = value;
                             } else {
-                                // It's just a filename or ID, construct the URL
+                                // It's a filename, construct the URL
                                 imageUrl = `/api/uploads/${value}`;
                             }
                             
@@ -225,10 +236,21 @@ export function useImagePicker({ value, images }: UseImagePickerOptions) {
                             isResolvingRef.current = false;
                         }
                     } catch (error) {
-                        // API call failed, create fallback object
+                        // API call failed - check if it's a semantic ID or actual filename
+                        const isLikelyFilename = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(imageIdToResolve) || /^\d+-/.test(imageIdToResolve);
+                        
+                        if (!isLikelyFilename) {
+                            // It's a semantic ID that couldn't be resolved - clear selection
+                            // This prevents showing broken URLs like /api/uploads/blog-featured-...
+                            setSelectedImage(null);
+                            lastResolvedValueRef.current = value;
+                            isResolvingRef.current = false;
+                            return;
+                        }
+                        
+                        // It's a filename, create fallback object
                         const isFullUrl = value.startsWith('http://') || value.startsWith('https://');
                         const isRelativeUrl = value.startsWith('/');
-                        const isUrl = isFullUrl || isRelativeUrl;
                         
                         let imageUrl: string;
                         if (isFullUrl) {
@@ -238,7 +260,7 @@ export function useImagePicker({ value, images }: UseImagePickerOptions) {
                             // Already a relative URL starting with /, use as-is
                             imageUrl = value;
                         } else {
-                            // It's just a filename or ID, construct the URL
+                            // It's a filename, construct the URL
                             imageUrl = `/api/uploads/${value}`;
                         }
                         

package/src/components/GlobalImageEditor/GlobalImageEditor.tsx

@@ -1,374 +0,0 @@
-/**
- * Global Image Editor Component
- * Allows clicking on any image in the client app to edit it (admin/dev only)
- * 
- * Reads configuration from window.__JHITS_PLUGIN_PROPS__['plugin-images']
- */
-
-'use client';
-
-import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { X, Edit2 } from 'lucide-react';
-import { ImagePicker } from '../ImagePicker';
-import type { ImageMetadata } from '../../types';
-import type { SelectedImage, PendingTransform } from './types';
-import { getPluginConfig } from './config';
-import { parseImageData } from './imageDetection';
-import { setupImageHandlers } from './imageSetup';
-import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './saveLogic';
-import { handleImageChange, handleBrightnessChange, handleBlurChange } from './eventHandlers';
-
-export function GlobalImageEditor() {
-    // Configuration
-    const config = useMemo(() => getPluginConfig(), []);
-    
-    // State
-    const [selectedImage, setSelectedImage] = useState<SelectedImage | null>(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [userRole, setUserRole] = useState<string | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-
-    // Refs for save debouncing
-    const saveTransformTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const pendingTransformRef = useRef<PendingTransform | null>(null);
-
-    // Check if user is admin/dev
-    useEffect(() => {
-        const checkUser = async () => {
-            try {
-                const res = await fetch('/api/me');
-                const data = await res.json();
-                if (data.loggedIn && (data.user?.role === 'admin' || data.user?.role === 'dev')) {
-                    setUserRole(data.user.role);
-                }
-            } catch (error) {
-                console.error('Failed to check user role:', error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-        checkUser();
-    }, []);
-
-    // Listen for open-image-editor custom event from Image/BackgroundImage components
-    useEffect(() => {
-        if (!userRole) return;
-
-        const handleOpenEditor = async (e: CustomEvent) => {
-            const { id, currentBrightness, currentBlur } = e.detail || {};
-            if (!id) return;
-
-            console.log('[GlobalImageEditor] open-image-editor event received for id:', id);
-
-            // Find the element by data-image-id or data-background-image-id
-            let element = document.querySelector(`[data-image-id="${id}"], [data-background-image-id="${id}"]`) as HTMLElement;
-            
-            if (!element) {
-                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`) as HTMLElement;
-            }
-
-            if (!element) {
-                console.error('[GlobalImageEditor] Element not found for id:', id);
-                return;
-            }
-
-            // Extract semantic ID
-            const semanticId = element.getAttribute('data-image-id') || 
-                             element.getAttribute('data-background-image-id') || 
-                             id;
-
-            // Parse image data
-            const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
-            
-            if (!imageData) {
-                console.error('[GlobalImageEditor] Failed to parse image data');
-                return;
-            }
-
-            // Store semantic ID on element if not already set
-            if (imageData.isBackground && !element.hasAttribute('data-background-image-id')) {
-                element.setAttribute('data-background-image-id', semanticId);
-            } else if (!imageData.isBackground && !element.hasAttribute('data-image-id')) {
-                element.setAttribute('data-image-id', semanticId);
-            }
-
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        };
-
-        window.addEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
-
-        return () => {
-            window.removeEventListener('open-image-editor', handleOpenEditor as unknown as EventListener);
-        };
-    }, [userRole]);
-
-    // Add click handlers to all images
-    useEffect(() => {
-        if (isLoading || !userRole) {
-            console.log('[GlobalImageEditor] Skipping image handlers - isLoading:', isLoading, 'userRole:', userRole);
-            return;
-        }
-
-        console.log('[GlobalImageEditor] Setting up image handlers for role:', userRole);
-        
-        const cleanup = setupImageHandlers((imageData) => {
-            setSelectedImage(imageData);
-            setIsOpen(true);
-        });
-
-        // Setup immediately and also after a short delay to catch dynamically loaded images
-        const timeoutId = setTimeout(() => {
-            const cleanup2 = setupImageHandlers((imageData) => {
-                setSelectedImage(imageData);
-                setIsOpen(true);
-            });
-            // Note: This creates a new cleanup, but the first one will handle the initial setup
-        }, 500);
-        
-        return () => {
-            clearTimeout(timeoutId);
-            cleanup();
-        };
-    }, [isLoading, userRole]);
-
-    // Save image transform (scale/position) to API with debouncing
-    const saveImageTransformHandler = useCallback(async (
-        scale: number,
-        positionX: number,
-        positionY: number,
-        immediate: boolean = false,
-        brightnessOverride?: number,
-        blurOverride?: number
-    ) => {
-        if (!selectedImage) return;
-
-        const { element } = selectedImage;
-        const semanticId = element.getAttribute('data-image-id') || 
-                         element.getAttribute('data-background-image-id');
-        
-        if (!semanticId) return;
-
-        const filename = await getFilename(semanticId, selectedImage);
-        if (!filename) {
-            console.error('[GlobalImageEditor] getFilename returned null for semanticId:', semanticId);
-            return;
-        }
-        console.log('[GlobalImageEditor] getFilename returned:', filename, 'for semanticId:', semanticId);
-
-        // Use override values if provided, otherwise use selectedImage values
-        // IMPORTANT: Overrides contain the latest values from the editor
-        const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : (selectedImage?.brightness ?? 100);
-        const finalBlur = blurOverride !== undefined ? blurOverride : (selectedImage?.blur ?? 0);
-
-        // Store pending transform
-        pendingTransformRef.current = { 
-            scale, 
-            positionX, 
-            positionY,
-            semanticId,
-            filename
-        };
-
-        // Clear existing timeout
-        if (saveTransformTimeoutRef.current) {
-            clearTimeout(saveTransformTimeoutRef.current);
-            saveTransformTimeoutRef.current = null;
-        }
-
-        // If immediate save is requested (e.g., when "Done" is clicked), save right away
-        if (immediate) {
-            const normalizedPositionX = normalizePosition(positionX);
-            const normalizedPositionY = normalizePosition(positionY);
-
-            console.log('[GlobalImageEditor] Immediate save to API:', { semanticId, filename, scale, normalizedPositionX, normalizedPositionY, finalBrightness, finalBlur });
-            await saveTransformToAPI(
-                semanticId,
-                filename,
-                scale,
-                normalizedPositionX,
-                normalizedPositionY,
-                finalBrightness,
-                finalBlur
-            );
-            pendingTransformRef.current = null;
-            return;
-        }
-
-        // Debounce: save after 300ms of no changes
-        saveTransformTimeoutRef.current = setTimeout(async () => {
-            const pending = pendingTransformRef.current;
-            if (pending && selectedImage) {
-                await flushPendingSave(pending, selectedImage);
-            }
-        }, 300);
-    }, [selectedImage]);
-
-    // Cleanup timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (saveTransformTimeoutRef.current) {
-                clearTimeout(saveTransformTimeoutRef.current);
-            }
-        };
-    }, []);
-
-    // Event handlers
-    const handleImageChangeWrapper = useCallback(async (image: ImageMetadata | null) => {
-        if (!selectedImage) return;
-        await handleImageChange(image, selectedImage, handleClose);
-    }, [selectedImage]);
-
-    const handleBrightnessChangeWrapper = useCallback(async (brightness: number) => {
-        if (!selectedImage) return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed via onEditorSave
-        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-
-    const handleBlurChangeWrapper = useCallback(async (blur: number) => {
-        if (!selectedImage) return;
-        // Don't save immediately when in editor - will be saved when "Done" is pressed via onEditorSave
-        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
-    }, [selectedImage]);
-
-    const handleEditorSave = useCallback(async (
-        finalScale: number,
-        finalPositionX: number,
-        finalPositionY: number,
-        finalBrightness?: number,
-        finalBlur?: number
-    ) => {
-        console.log('[GlobalImageEditor] handleEditorSave callback created/updated');
-        console.log('[GlobalImageEditor] handleEditorSave called:', { finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur, hasSelectedImage: !!selectedImage });
-        if (selectedImage) {
-            // Use provided values if they're not undefined, otherwise fall back to selectedImage values
-            // Note: 0 is a valid value for blur, so we check for undefined explicitly
-            const brightness = finalBrightness !== undefined ? finalBrightness : selectedImage.brightness;
-            const blur = finalBlur !== undefined ? finalBlur : selectedImage.blur;
-            
-            const updated = { 
-                ...selectedImage, 
-                scale: finalScale, 
-                positionX: finalPositionX, 
-                positionY: finalPositionY,
-                brightness,
-                blur,
-            };
-            setSelectedImage(updated);
-            
-            console.log('[GlobalImageEditor] Calling saveImageTransformHandler with:', { finalScale, finalPositionX, finalPositionY, brightness, blur, immediate: true });
-            // Only save once when editor closes with all final values
-            // ImagePicker prevents duplicate calls by not calling individual handlers when onEditorSave is provided
-            await saveImageTransformHandler(
-                finalScale, 
-                finalPositionX, 
-                finalPositionY, 
-                true, 
-                brightness, 
-                blur
-            );
-        } else {
-            console.error('[GlobalImageEditor] handleEditorSave called but selectedImage is null!');
-        }
-    }, [selectedImage, saveImageTransformHandler]);
-
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-        setSelectedImage(null);
-    }, []);
-
-    // Don't render if disabled or user is not admin/dev
-    if (!config.enabled || isLoading || !userRole) {
-        return null;
-    }
-
-    if (!isOpen || !selectedImage) {
-        return null;
-    }
-
-    return (
-        <div 
-            className={`fixed inset-0 z-[9999] flex items-center justify-center ${config.overlayClassName || 'bg-black/50 backdrop-blur-sm'}`}
-            data-image-editor="true"
-            onClick={(e) => {
-                if (e.target === e.currentTarget) {
-                    handleClose();
-                }
-            }}
-        >
-            <div 
-                className={`relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-7xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`}
-                onClick={(e) => e.stopPropagation()}
-            >
-                {/* Header */}
-                <div className="flex items-center justify-between p-6 border-b dark:border-neutral-800">
-                    <h2 className="text-2xl font-bold dark:text-white">Edit Image</h2>
-                    <button
-                        onClick={handleClose}
-                        className="p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                        aria-label="Close editor"
-                    >
-                        <X className="w-5 h-5" />
-                    </button>
-                </div>
-
-                {/* Content */}
-                <div className="p-6">
-                    <ImagePicker
-                        value={selectedImage.element.getAttribute('data-image-id') || selectedImage.element.getAttribute('data-background-image-id') || selectedImage.originalSrc}
-                        onChange={handleImageChangeWrapper}
-                        brightness={selectedImage.brightness}
-                        blur={selectedImage.blur}
-                        scale={selectedImage.scale}
-                        positionX={selectedImage.positionX}
-                        positionY={selectedImage.positionY}
-                        onBrightnessChange={handleBrightnessChangeWrapper}
-                        onBlurChange={handleBlurChangeWrapper}
-                        onEditorSave={handleEditorSave}
-                        onScaleChange={async (newScale) => {
-                            console.log('[GlobalImageEditor] onScaleChange called:', newScale);
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, scale: newScale };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY, false);
-                            }
-                        }}
-                        onPositionXChange={async (newPositionX) => {
-                            console.log('[GlobalImageEditor] onPositionXChange called:', newPositionX);
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, positionX: newPositionX };
-                                setSelectedImage(updated);
-                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY, false);
-                            }
-                        }}
-                        onPositionYChange={async (newPositionY) => {
-                            console.log('[GlobalImageEditor] onPositionYChange called:', newPositionY);
-                            if (selectedImage) {
-                                const updated = { ...selectedImage, positionY: newPositionY };
-                                setSelectedImage(updated);
-                                // If onEditorSave wasn't provided, this might be called when editor closes
-                                // In that case, we should save immediately with all current values including brightness/blur
-                                // We'll save immediately to ensure the final state is persisted
-                                await saveImageTransformHandler(
-                                    updated.scale, 
-                                    updated.positionX, 
-                                    newPositionY, 
-                                    true, // Save immediately - this is likely the final callback when editor closes
-                                    updated.brightness,
-                                    updated.blur
-                                );
-                            }
-                        }}
-                        onEditorSave={handleEditorSave}
-                        showEffects={true}
-                        darkMode={false}
-                        aspectRatio={selectedImage.aspectRatio}
-                        borderRadius={selectedImage.borderRadius}
-                        objectFit={selectedImage.objectFit}
-                        objectPosition={selectedImage.objectPosition}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-}