@jhits/plugin-images 0.0.1

package/src/components/GlobalImageEditor.tsx

@@ -0,0 +1,778 @@
+/**
+ * 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 } from 'react';
+import { X, Edit2 } from 'lucide-react';
+import { ImagePicker } from './ImagePicker';
+import type { ImageMetadata } from '../types';
+
+export function GlobalImageEditor() {
+    // Read config from window global (set by initImagesPlugin)
+    const config = useMemo(() => {
+        if (typeof window === 'undefined') {
+            return { enabled: false };
+        }
+        
+        const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__?.['plugin-images'];
+        return {
+            enabled: pluginProps?.enabled !== undefined ? pluginProps.enabled : true,
+            className: pluginProps?.className,
+            overlayClassName: pluginProps?.overlayClassName,
+        };
+    }, []);
+    const [selectedImage, setSelectedImage] = useState<{
+        element: HTMLElement;
+        originalSrc: string;
+        brightness: number;
+        blur: number;
+        isBackground: boolean;
+    } | null>(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [userRole, setUserRole] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    // 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) {
+                // Try finding by background image component
+                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;
+            }
+
+            // Determine if it's a background image
+            const isBackground = element.hasAttribute('data-background-image-component') || 
+                                element.hasAttribute('data-background-image-id');
+
+            // Get current image source - handle Next.js Image wrapper
+            let currentSrc = '';
+            let actualImgElement: HTMLImageElement | null = null;
+
+            if (isBackground) {
+                // For background images, look for nested Image component
+                const imgWrapper = element.querySelector('[data-image-id]');
+                if (imgWrapper) {
+                    actualImgElement = imgWrapper.querySelector('img') || null;
+                } else {
+                    // Fallback: look for any img inside
+                    actualImgElement = element.querySelector('img');
+                }
+                
+                if (actualImgElement) {
+                    currentSrc = actualImgElement.src;
+                } else {
+                    // Try computed style as last resort
+                    const bgImage = window.getComputedStyle(element).backgroundImage;
+                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+                    if (urlMatch && urlMatch[1]) {
+                        currentSrc = urlMatch[1];
+                    }
+                }
+            } else {
+                // For regular images, find the actual img element (Next.js wraps it)
+                if (element.tagName === 'IMG') {
+                    actualImgElement = element as HTMLImageElement;
+                    currentSrc = actualImgElement.src;
+                } else {
+                    // Next.js Image wraps img in span/picture
+                    actualImgElement = element.querySelector('img');
+                    if (actualImgElement) {
+                        currentSrc = actualImgElement.src;
+                    }
+                }
+            }
+
+            if (!currentSrc) {
+                console.error('[GlobalImageEditor] Could not determine image source for id:', id);
+                return;
+            }
+
+            // Extract semantic ID
+            const semanticId = element.getAttribute('data-image-id') || 
+                             element.getAttribute('data-background-image-id') || 
+                             id;
+
+            // Get current brightness and blur from the wrapper element (where filter is applied)
+            const filterStyle = element.style.filter || window.getComputedStyle(element).filter || '';
+            const brightness = currentBrightness ?? 
+                (parseInt(filterStyle.match(/brightness\((\d+)%\)/)?.[1] || '100'));
+            const blur = currentBlur ?? 
+                (parseInt(filterStyle.match(/blur\((\d+)px\)/)?.[1] || '0'));
+
+            console.log('[GlobalImageEditor] Opening editor for:', { id, semanticId, currentSrc, brightness, blur, isBackground });
+
+            setSelectedImage({
+                element,
+                originalSrc: currentSrc,
+                brightness,
+                blur,
+                isBackground,
+            });
+
+            // Store semantic ID on element if not already set
+            if (isBackground && !element.hasAttribute('data-background-image-id')) {
+                element.setAttribute('data-background-image-id', semanticId);
+            } else if (!isBackground && !element.hasAttribute('data-image-id')) {
+                element.setAttribute('data-image-id', semanticId);
+            }
+
+            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);
+        
+        // Declare cleanupFunctions outside setupImages so it's accessible in the cleanup function
+        const cleanupFunctions: Array<() => void> = [];
+        
+        // Wait a bit for images to load and DOM to be ready
+        const setupImages = () => {
+        const handleImageClick = (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            
+            // Only handle clicks on images that use the plugin components
+            // Check if it's an img element with data-image-id (from plugin Image component)
+            let img = target.closest('img[data-image-id]') as HTMLImageElement | null;
+            let isBackground = false;
+            let element: HTMLElement | null = null;
+            let currentSrc = '';
+            
+            if (img) {
+                // This is a plugin Image component
+                element = img;
+                currentSrc = img.src;
+            } else {
+                // Check if it's an element with background-image
+                // First check for BackgroundImage component
+                let bgElement = target.closest('[data-background-image-component]') as HTMLElement | null;
+                
+                if (bgElement) {
+                    // This is a BackgroundImage component
+                    element = bgElement;
+                    isBackground = true;
+                    
+                    // Try to get image source from nested Image component first
+                    const imgInside = bgElement.querySelector('img[data-image-id]') as HTMLImageElement | null;
+                    if (imgInside) {
+                        currentSrc = imgInside.src;
+                    } else {
+                        // Fallback to background-image CSS
+                        const bgImage = window.getComputedStyle(bgElement).backgroundImage;
+                        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+                        if (urlMatch && urlMatch[1]) {
+                            currentSrc = urlMatch[1];
+                        }
+                    }
+                }
+            }
+            
+            if (!element || !currentSrc) return;
+            
+            // Don't handle images in modals or the editor itself
+            if (element.closest('[data-image-editor]') || element.closest('[role="dialog"]')) {
+                return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Extract semantic ID from data attribute
+            let semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id');
+            
+            // If not found, try to extract from the src URL
+            if (!semanticId && currentSrc.includes('/api/uploads/')) {
+                const urlPart = currentSrc.split('/api/uploads/')[1]?.split('?')[0];
+                // If it looks like a semantic ID (no extension or timestamp), use it
+                if (urlPart && !/^\d+-/.test(urlPart) && !/\.(jpg|jpeg|png|webp|gif|svg)$/i.test(urlPart)) {
+                    semanticId = decodeURIComponent(urlPart);
+                }
+            }
+            
+            // If still not found, generate one
+            if (!semanticId) {
+                semanticId = element.closest('[data-image-id]')?.getAttribute('data-image-id') || 
+                            `image-${Date.now()}`;
+            }
+            
+            // Check for existing filter or data attributes
+            const filterStyle = element.style.filter || window.getComputedStyle(element).filter || '';
+            const dataBrightness = element.getAttribute('data-brightness');
+            const dataBlur = element.getAttribute('data-blur');
+            const currentBrightness = dataBrightness 
+                ? parseInt(dataBrightness) 
+                : parseInt(filterStyle.match(/brightness\((\d+)%\)/)?.[1] || '100');
+            const currentBlur = dataBlur 
+                ? parseInt(dataBlur) 
+                : parseInt(filterStyle.match(/blur\((\d+)px\)/)?.[1] || '0');
+
+            setSelectedImage({
+                element,
+                originalSrc: currentSrc,
+                brightness: currentBrightness,
+                blur: currentBlur,
+                isBackground,
+            });
+            
+            // Store semantic ID on element for later use
+            if (isBackground) {
+                element.setAttribute('data-background-image-id', semanticId);
+            } else {
+                element.setAttribute('data-image-id', semanticId);
+            }
+            setIsOpen(true);
+        };
+
+        // Add click listeners and hover effects to all images
+        // Only select images that use the plugin components (have data-image-id or are inside BackgroundImage)
+        const images = document.querySelectorAll('img[data-image-id]:not([data-no-edit])') as NodeListOf<HTMLImageElement>;
+        
+        // Find elements with BackgroundImage components only
+        // Only BackgroundImage components should be editable, not all elements with background-image
+        const bgElements: HTMLElement[] = [];
+        const backgroundImageComponents = document.querySelectorAll('[data-background-image-component]');
+        backgroundImageComponents.forEach(el => {
+            bgElements.push(el as HTMLElement);
+        });
+        
+        console.log('[GlobalImageEditor] Found', images.length, 'images and', bgElements.length, 'background images to make editable');
+        
+        images.forEach((img, index) => {
+            console.log(`[GlobalImageEditor] Setting up image ${index + 1}:`, img.src);
+            // Store original position for cleanup
+            const originalPosition = img.style.position;
+            
+            img.style.cursor = 'pointer';
+            img.setAttribute('data-editable-image', 'true');
+            img.addEventListener('click', handleImageClick as EventListener);
+            
+            // Find the best container for the indicator
+            // Next.js Image wraps in span, so we need to find the right parent
+            let indicatorContainer: HTMLElement = img;
+            let parent = img.parentElement;
+            
+            // Check if parent is a span (Next.js Image wrapper)
+            if (parent && (parent.tagName === 'SPAN' || parent.tagName === 'DIV')) {
+                const parentStyle = window.getComputedStyle(parent);
+                // Use parent if it has relative/absolute positioning or is a block element
+                if (parentStyle.position !== 'static' || 
+                    (parentStyle.display !== 'inline' && parentStyle.display !== 'inline-block')) {
+                    indicatorContainer = parent as HTMLElement;
+                }
+            }
+            
+            // Ensure container has relative positioning
+            const containerStyle = window.getComputedStyle(indicatorContainer);
+            if (containerStyle.position === 'static') {
+                indicatorContainer.style.position = 'relative';
+            }
+            
+            // Get actual dimensions
+            const rect = indicatorContainer.getBoundingClientRect();
+            
+            console.log(`[GlobalImageEditor] Using container for image ${index + 1}:`, indicatorContainer.tagName, `(${rect.width}x${rect.height})`);
+            
+            const indicator = document.createElement('div');
+            indicator.className = 'image-edit-indicator';
+            indicator.setAttribute('data-image-index', index.toString());
+            indicator.style.cssText = `
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: rgba(0, 0, 0, 0.4);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 0;
+                transition: opacity 0.2s ease;
+                pointer-events: none;
+                z-index: 10000;
+                border-radius: inherit;
+                box-sizing: border-box;
+            `;
+            
+            const label = document.createElement('div');
+            label.style.cssText = `
+                background: rgba(0, 0, 0, 0.9);
+                color: white;
+                padding: 8px 16px;
+                border-radius: 8px;
+                font-size: 12px;
+                font-weight: bold;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+            `;
+            label.textContent = 'Click to Edit';
+            indicator.appendChild(label);
+            
+            indicatorContainer.appendChild(indicator);
+            console.log(`[GlobalImageEditor] Added hover indicator to image ${index + 1}, container:`, indicatorContainer.tagName);
+            
+            const addHoverEffect = () => {
+                console.log(`[GlobalImageEditor] Hover enter on image ${index + 1}`);
+                indicator.style.opacity = '1';
+            };
+            
+            const removeHoverEffect = () => {
+                console.log(`[GlobalImageEditor] Hover leave on image ${index + 1}`);
+                indicator.style.opacity = '0';
+            };
+            
+            // Add hover listeners to both image and container
+            img.addEventListener('mouseenter', addHoverEffect);
+            img.addEventListener('mouseleave', removeHoverEffect);
+            if (indicatorContainer !== img) {
+                indicatorContainer.addEventListener('mouseenter', addHoverEffect);
+                indicatorContainer.addEventListener('mouseleave', removeHoverEffect);
+            }
+            
+            cleanupFunctions.push(() => {
+                img.removeEventListener('click', handleImageClick as EventListener);
+                img.removeEventListener('mouseenter', addHoverEffect);
+                img.removeEventListener('mouseleave', removeHoverEffect);
+                if (indicatorContainer !== img) {
+                    indicatorContainer.removeEventListener('mouseenter', addHoverEffect);
+                    indicatorContainer.removeEventListener('mouseleave', removeHoverEffect);
+                    if (indicatorContainer.style.position === 'relative') {
+                        indicatorContainer.style.position = '';
+                    }
+                }
+                img.removeAttribute('data-editable-image');
+                img.style.cursor = '';
+                img.style.position = originalPosition;
+                indicator.remove();
+            });
+        });
+        
+        // Process background images - show a button instead of hover overlay
+        bgElements.forEach((bgEl, index) => {
+            // Skip BackgroundImage components - they already have their own edit button
+            if (bgEl.hasAttribute('data-background-image-component')) {
+                console.log(`[GlobalImageEditor] Skipping BackgroundImage component ${index + 1} - it has its own edit button`);
+                return;
+            }
+            const originalPosition = bgEl.style.position;
+            if (!bgEl.style.position || bgEl.style.position === 'static') {
+                bgEl.style.position = 'relative';
+            }
+            
+            bgEl.setAttribute('data-editable-background', 'true');
+            bgEl.setAttribute('data-background-image', 'true');
+            
+            // Create a button indicator instead of hover overlay
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'background-edit-button-container';
+            buttonContainer.setAttribute('data-image-index', `bg-${index}`);
+            buttonContainer.style.cssText = `
+                position: absolute;
+                top: 12px;
+                right: 12px;
+                z-index: 10000;
+                pointer-events: auto;
+            `;
+            
+            const editButton = document.createElement('button');
+            editButton.className = 'background-edit-button';
+            editButton.setAttribute('type', 'button');
+            editButton.style.cssText = `
+                background: rgba(0, 0, 0, 0.8);
+                color: white;
+                border: 2px solid rgba(255, 255, 255, 0.3);
+                padding: 10px 20px;
+                border-radius: 8px;
+                font-size: 12px;
+                font-weight: bold;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+                cursor: pointer;
+                transition: all 0.2s ease;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            `;
+            editButton.innerHTML = `
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                </svg>
+                Edit Background
+            `;
+            
+            // Add hover effect to button
+            editButton.addEventListener('mouseenter', () => {
+                editButton.style.background = 'rgba(0, 0, 0, 0.95)';
+                editButton.style.borderColor = 'rgba(255, 255, 255, 0.5)';
+                editButton.style.transform = 'translateY(-2px)';
+                editButton.style.boxShadow = '0 6px 16px rgba(0, 0, 0, 0.5)';
+            });
+            
+            editButton.addEventListener('mouseleave', () => {
+                editButton.style.background = 'rgba(0, 0, 0, 0.8)';
+                editButton.style.borderColor = 'rgba(255, 255, 255, 0.3)';
+                editButton.style.transform = 'translateY(0)';
+                editButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.4)';
+            });
+            
+            // Handle button click
+            editButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleImageClick(e as any);
+            });
+            
+            buttonContainer.appendChild(editButton);
+            bgEl.appendChild(buttonContainer);
+            
+            console.log(`[GlobalImageEditor] Added edit button to background image ${index + 1}`);
+            
+            cleanupFunctions.push(() => {
+                bgEl.removeAttribute('data-editable-background');
+                bgEl.removeAttribute('data-background-image');
+                bgEl.style.position = originalPosition;
+                buttonContainer.remove();
+            });
+        });
+
+        }; // End of setupImages function
+        
+        // Setup immediately and also after a short delay to catch dynamically loaded images
+        setupImages();
+        const timeoutId = setTimeout(setupImages, 500);
+        
+        return () => {
+            clearTimeout(timeoutId);
+            cleanupFunctions.forEach(cleanup => cleanup());
+        };
+    }, [isLoading, userRole]);
+
+    // Apply image changes
+    const handleImageChange = async (image: ImageMetadata | null) => {
+        if (!selectedImage) return;
+
+        const { element } = selectedImage;
+        
+        if (image) {
+            // Get the semantic ID that was stored when the image was clicked
+            // Check both data-image-id and data-background-image-id
+            const semanticId = element.getAttribute('data-image-id') || 
+                             element.getAttribute('data-background-image-id');
+            
+            if (!semanticId) {
+                console.error('[GlobalImageEditor] No semantic ID found for image', {
+                    hasDataImageId: element.hasAttribute('data-image-id'),
+                    hasDataBackgroundImageId: element.hasAttribute('data-background-image-id'),
+                    element: element,
+                });
+                return;
+            }
+            
+            // Extract filename from image URL or use image.id
+            const filename = image.url.split('/').pop()?.split('?')[0] || image.id;
+            
+            // Save the mapping between semantic ID and filename, including effects
+            try {
+                const response = await fetch('/api/plugin-images/resolve', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        id: semanticId, 
+                        filename,
+                        brightness: selectedImage.brightness,
+                        blur: selectedImage.blur,
+                    }),
+                });
+                
+                if (response.ok) {
+                    console.log(`[GlobalImageEditor] Saved mapping: ${semanticId} -> ${filename} (brightness: ${selectedImage.brightness}%, blur: ${selectedImage.blur}px)`);
+                } else {
+                    console.error('[GlobalImageEditor] Failed to save mapping:', await response.text());
+                }
+            } catch (error) {
+                console.error('Failed to save image mapping:', error);
+            }
+            
+            // Update image src immediately - handle background images differently
+            if (selectedImage.isBackground) {
+                // For background images, update the nested Image component
+                const imgWrapper = element.querySelector('[data-image-id]');
+                if (imgWrapper) {
+                    // Find the actual img element inside the wrapper
+                    const img = imgWrapper.querySelector('img');
+                    if (img) {
+                        img.src = image.url;
+                        img.setAttribute('data-edited-src', image.url);
+                    }
+                } else {
+                    // Fallback: update background-image style if no nested Image component
+                    const bgImage = window.getComputedStyle(element).backgroundImage;
+                    if (bgImage && bgImage !== 'none') {
+                        element.style.backgroundImage = `url(${image.url})`;
+                    }
+                }
+                
+                // Store attributes on the background container
+                element.setAttribute('data-background-image-id', semanticId);
+                element.setAttribute('data-edited-src', image.url);
+                element.setAttribute('data-brightness', selectedImage.brightness.toString());
+                element.setAttribute('data-blur', selectedImage.blur.toString());
+                
+                // Apply filter to the wrapper element
+                if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+                    element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+                } else {
+                    element.style.filter = '';
+                }
+            } else {
+                // For regular images, update the img element directly
+                if (element.tagName === 'IMG') {
+                    (element as HTMLImageElement).src = image.url;
+                    element.setAttribute('data-edited-src', image.url);
+                    element.setAttribute('data-image-id', semanticId);
+                    element.setAttribute('data-brightness', selectedImage.brightness.toString());
+                    element.setAttribute('data-blur', selectedImage.blur.toString());
+                    
+                    // Apply filter
+                    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+                        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+                    } else {
+                        element.style.filter = '';
+                    }
+                } else {
+                    // Next.js Image wrapper - find the actual img element
+                    const img = element.querySelector('img');
+                    if (img) {
+                        img.src = image.url;
+                        img.setAttribute('data-edited-src', image.url);
+                    }
+                    element.setAttribute('data-image-id', semanticId);
+                    element.setAttribute('data-edited-src', image.url);
+                    element.setAttribute('data-brightness', selectedImage.brightness.toString());
+                    element.setAttribute('data-blur', selectedImage.blur.toString());
+                    
+                    // Apply filter to wrapper
+                    if (selectedImage.brightness !== 100 || selectedImage.blur !== 0) {
+                        element.style.filter = `brightness(${selectedImage.brightness}%) blur(${selectedImage.blur}px)`;
+                    } else {
+                        element.style.filter = '';
+                    }
+                }
+            }
+            
+            // Dispatch a custom event to notify Image components to re-resolve
+            window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+                detail: { id: semanticId, filename, brightness: selectedImage.brightness, blur: selectedImage.blur }
+            }));
+            
+            // Close the editor
+            handleClose();
+        }
+    };
+
+    const handleBrightnessChange = async (brightness: number) => {
+        if (!selectedImage) return;
+        
+        const { element } = selectedImage;
+        const semanticId = element.getAttribute('data-image-id') || 
+                          element.getAttribute('data-background-image-id');
+        const currentFilter = element.style.filter || '';
+        const blurMatch = currentFilter.match(/blur\((\d+)px\)/);
+        const blur = blurMatch ? parseInt(blurMatch[1]) : selectedImage.blur;
+        
+        // Update the selectedImage state
+        setSelectedImage({
+            ...selectedImage,
+            brightness,
+        });
+        
+        element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+        element.setAttribute('data-brightness', brightness.toString());
+        
+        // Save the effect immediately
+        if (semanticId) {
+            try {
+                let filename = semanticId;
+                if (selectedImage.isBackground) {
+                    const bgImage = window.getComputedStyle(element).backgroundImage;
+                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+                    if (urlMatch && urlMatch[1]) {
+                        filename = urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+                    }
+                } else {
+                    filename = (element as HTMLImageElement).src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+                }
+                await fetch('/api/plugin-images/resolve', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        id: semanticId, 
+                        filename,
+                        brightness,
+                        blur,
+                    }),
+                });
+            } catch (error) {
+                console.error('Failed to save brightness:', error);
+            }
+        }
+    };
+
+    const handleBlurChange = async (blur: number) => {
+        if (!selectedImage) return;
+        
+        const { element } = selectedImage;
+        const semanticId = element.getAttribute('data-image-id') || 
+                          element.getAttribute('data-background-image-id');
+        const currentFilter = element.style.filter || '';
+        const brightnessMatch = currentFilter.match(/brightness\((\d+)%\)/);
+        const brightness = brightnessMatch ? parseInt(brightnessMatch[1]) : selectedImage.brightness;
+        
+        // Update the selectedImage state
+        setSelectedImage({
+            ...selectedImage,
+            blur,
+        });
+        
+        element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+        element.setAttribute('data-blur', blur.toString());
+        
+        // Save the effect immediately
+        if (semanticId) {
+            try {
+                let filename = semanticId;
+                if (selectedImage.isBackground) {
+                    const bgImage = window.getComputedStyle(element).backgroundImage;
+                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+                    if (urlMatch && urlMatch[1]) {
+                        filename = urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+                    }
+                } else {
+                    filename = (element as HTMLImageElement).src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+                }
+                await fetch('/api/plugin-images/resolve', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ 
+                        id: semanticId, 
+                        filename,
+                        brightness,
+                        blur,
+                    }),
+                });
+            } catch (error) {
+                console.error('Failed to save blur:', error);
+            }
+        }
+    };
+
+    const handleClose = () => {
+        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
+            data-image-editor
+            className={config.overlayClassName || "fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"}
+            onClick={handleClose}
+        >
+            <div
+                onClick={(e) => e.stopPropagation()}
+                className={config.className || "w-full max-w-2xl max-h-[90vh] bg-dashboard-card rounded-2xl border border-dashboard-border shadow-2xl m-4 overflow-y-auto"}
+            >
+                {/* Header */}
+                <div className="p-6 border-b border-dashboard-border flex items-center justify-between sticky top-0 bg-dashboard-card z-10">
+                    <div className="flex items-center gap-3">
+                        <Edit2 size={20} className="text-neutral-600 dark:text-neutral-400" />
+                        <h2 className="text-lg font-black uppercase tracking-tighter text-neutral-950 dark:text-white">
+                            Edit Image
+                        </h2>
+                    </div>
+                    <button
+                        onClick={handleClose}
+                        className="p-2 hover:bg-dashboard-bg rounded-lg transition-colors"
+                    >
+                        <X size={20} className="text-neutral-500 dark:text-neutral-400" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="p-6">
+                    <ImagePicker
+                        value={selectedImage.originalSrc}
+                        onChange={handleImageChange}
+                        brightness={selectedImage.brightness}
+                        blur={selectedImage.blur}
+                        onBrightnessChange={handleBrightnessChange}
+                        onBlurChange={handleBlurChange}
+                        showEffects={true}
+                        darkMode={false}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
+