@jhits/plugin-images 0.0.5 → 0.0.7

package/src/components/GlobalImageEditor/saveLogic.js

@@ -0,0 +1,99 @@
+/**
+ * Save logic for image transforms and effects
+ */
+/**
+ * Normalize position values - convert -50% (centering value) to 0
+ */
+export function normalizePosition(position) {
+    return position === -50 ? 0 : position;
+}
+/**
+ * Get filename from element or API
+ */
+export async function getFilename(semanticId, selectedImage) {
+    var _a, _b;
+    try {
+        const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(semanticId)}`);
+        if (response.ok) {
+            const data = await response.json();
+            return data.filename || semanticId;
+        }
+        else {
+            // If not found, try to extract from element
+            const { element } = selectedImage;
+            if (selectedImage.isBackground) {
+                const imgWrapper = element.querySelector('[data-image-id]');
+                if (imgWrapper) {
+                    const img = imgWrapper.querySelector('img');
+                    if (img && img.src) {
+                        return ((_a = img.src.split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || semanticId;
+                    }
+                }
+            }
+            else {
+                const img = element.tagName === 'IMG' ? element : element.querySelector('img');
+                if (img && img.src) {
+                    return ((_b = img.src.split('/api/uploads/')[1]) === null || _b === void 0 ? void 0 : _b.split('?')[0]) || semanticId;
+                }
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to get filename:', error);
+    }
+    return null;
+}
+/**
+ * Save image transform to API
+ */
+export async function saveTransformToAPI(semanticId, filename, scale, positionX, positionY, brightness, blur) {
+    try {
+        const response = await fetch('/api/plugin-images/resolve', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                id: semanticId,
+                filename,
+                brightness,
+                blur,
+                scale,
+                positionX: normalizePosition(positionX),
+                positionY: normalizePosition(positionY),
+            }),
+        });
+        if (response.ok) {
+            // Dispatch event to notify Image components
+            window.dispatchEvent(new CustomEvent('image-mapping-updated', {
+                detail: {
+                    id: semanticId,
+                    filename,
+                    brightness,
+                    blur,
+                    scale,
+                    positionX: normalizePosition(positionX),
+                    positionY: normalizePosition(positionY),
+                }
+            }));
+            return true;
+        }
+    }
+    catch (error) {
+        console.error('Failed to save transform:', error);
+    }
+    return false;
+}
+/**
+ * Flush pending save immediately
+ */
+export async function flushPendingSave(pending, selectedImage) {
+    const normalizedPositionX = normalizePosition(pending.positionX);
+    const normalizedPositionY = normalizePosition(pending.positionY);
+    await saveTransformToAPI(pending.semanticId, pending.filename, pending.scale, normalizedPositionX, normalizedPositionY, selectedImage.brightness, selectedImage.blur);
+}
+/**
+ * Save image transform with debouncing support
+ * This is a wrapper that handles the debouncing logic
+ */
+export async function saveImageTransform(semanticId, filename, scale, positionX, positionY, brightness, blur) {
+    await saveTransformToAPI(semanticId, filename, scale, positionX, positionY, brightness, blur);
+}

package/src/components/GlobalImageEditor/stylingDetection.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Utilities for detecting styling from DOM elements
+ */
+import type { DetectedStyling } from './types';
+/**
+ * Detect styling properties from an element and its parent containers
+ */
+export declare function detectStyling(element: HTMLElement, imgElement: HTMLImageElement | null): DetectedStyling;
+//# sourceMappingURL=stylingDetection.d.ts.map

package/src/components/GlobalImageEditor/stylingDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylingDetection.d.ts","sourceRoot":"","sources":["stylingDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;GAEG;AACH,wBAAgB,aAAa,CACzB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,gBAAgB,GAAG,IAAI,GACpC,eAAe,CA6GjB"}

package/src/components/GlobalImageEditor/stylingDetection.js

@@ -0,0 +1,110 @@
+/**
+ * Utilities for detecting styling from DOM elements
+ */
+/**
+ * Detect styling properties from an element and its parent containers
+ */
+export function detectStyling(element, imgElement) {
+    // Find the container element (could be the element itself or a parent)
+    let container = element;
+    let parent = element.parentElement;
+    // Look for styling in parent containers (up to 3 levels)
+    for (let i = 0; i < 3 && parent; i++) {
+        const classes = parent.className || '';
+        const computedStyle = window.getComputedStyle(parent);
+        // Check for rounded-full (circular)
+        if (classes.includes('rounded-full')) {
+            container = parent;
+            break;
+        }
+        parent = parent.parentElement;
+    }
+    const containerClasses = container.className || '';
+    const containerStyle = window.getComputedStyle(container);
+    const imgStyle = imgElement ? window.getComputedStyle(imgElement) : null;
+    // Detect border radius
+    let borderRadius = 'rounded-xl'; // default
+    if (containerClasses.includes('rounded-full')) {
+        borderRadius = 'rounded-full';
+    }
+    else if (containerClasses.includes('rounded-3xl')) {
+        borderRadius = 'rounded-3xl';
+    }
+    else if (containerClasses.includes('rounded-2xl')) {
+        borderRadius = 'rounded-2xl';
+    }
+    else if (containerClasses.includes('rounded-xl')) {
+        borderRadius = 'rounded-xl';
+    }
+    else if (containerClasses.includes('rounded-lg')) {
+        borderRadius = 'rounded-lg';
+    }
+    // Detect aspect ratio
+    let aspectRatio = '16/9'; // default
+    // First check the container's computed style
+    const aspectRatioStyle = containerStyle.aspectRatio;
+    if (aspectRatioStyle && aspectRatioStyle !== 'auto') {
+        // Convert CSS aspect-ratio (e.g., "1 / 1") to our format ("1/1")
+        aspectRatio = aspectRatioStyle.replace(/\s+/g, '');
+    }
+    else {
+        // Check for Tailwind aspect ratio classes in container or parents
+        let currentElement = container;
+        let foundAspectRatio = false;
+        // Check up to 3 parent levels for aspect ratio
+        for (let i = 0; i < 3 && currentElement && !foundAspectRatio; i++) {
+            const classes = currentElement.className || '';
+            const computedStyle = window.getComputedStyle(currentElement);
+            // Check computed style first
+            if (computedStyle.aspectRatio && computedStyle.aspectRatio !== 'auto') {
+                aspectRatio = computedStyle.aspectRatio.replace(/\s+/g, '');
+                foundAspectRatio = true;
+                break;
+            }
+            // Check for Tailwind aspect ratio classes (aspect-*, aspect-square, aspect-video, etc.)
+            const aspectMatch = classes.match(/aspect-(\d+\/\d+)|aspect-square|aspect-video/);
+            if (aspectMatch) {
+                if (aspectMatch[1]) {
+                    // Matched aspect-4/5, aspect-16/9, etc.
+                    aspectRatio = aspectMatch[1];
+                }
+                else if (aspectMatch[0] === 'aspect-square') {
+                    aspectRatio = '1/1';
+                }
+                else if (aspectMatch[0] === 'aspect-video') {
+                    aspectRatio = '16/9';
+                }
+                foundAspectRatio = true;
+                break;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        // Fallback checks
+        if (!foundAspectRatio) {
+            if (containerClasses.includes('rounded-full')) {
+                // Circular images are typically 1:1
+                aspectRatio = '1/1';
+            }
+            else {
+                // Try to detect from size classes
+                if (containerClasses.includes('size-') || containerClasses.match(/w-\d+.*h-\d+/)) {
+                    aspectRatio = '1/1';
+                }
+            }
+        }
+    }
+    // Detect object-fit
+    let objectFit = 'cover';
+    if (imgStyle) {
+        const objectFitValue = imgStyle.objectFit || containerStyle.objectFit;
+        if (objectFitValue && ['cover', 'contain', 'fill', 'none', 'scale-down'].includes(objectFitValue)) {
+            objectFit = objectFitValue;
+        }
+    }
+    // Detect object-position
+    let objectPosition = 'center';
+    if (imgStyle) {
+        objectPosition = imgStyle.objectPosition || containerStyle.objectPosition || 'center';
+    }
+    return { aspectRatio, borderRadius, objectFit, objectPosition };
+}

package/src/components/GlobalImageEditor/transformParsing.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Utilities for parsing CSS transforms to extract scale and position values
+ */
+/**
+ * Parse scale from CSS transform string
+ */
+export declare function parseScaleFromTransform(transform: string, container: HTMLElement | null, imgElement: HTMLImageElement | null): number;
+/**
+ * Parse position (X, Y) from CSS transform string
+ * Returns container-relative percentages
+ */
+export declare function parsePositionFromTransform(transform: string): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=transformParsing.d.ts.map

package/src/components/GlobalImageEditor/transformParsing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformParsing.d.ts","sourceRoot":"","sources":["transformParsing.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,uBAAuB,CACnC,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,UAAU,EAAE,gBAAgB,GAAG,IAAI,GACpC,MAAM,CA+BR;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAkCtF"}

package/src/components/GlobalImageEditor/transformParsing.js

@@ -0,0 +1,68 @@
+/**
+ * Utilities for parsing CSS transforms to extract scale and position values
+ */
+/**
+ * Parse scale from CSS transform string
+ */
+export function parseScaleFromTransform(transform, container, imgElement) {
+    const scaleMatch = transform.match(/scale\(([\d.]+)\)/);
+    if (!scaleMatch)
+        return 1.0;
+    const totalScale = parseFloat(scaleMatch[1]);
+    // If totalScale is very small (< 0.1), it's likely wrong
+    if (totalScale < 0.1) {
+        return 1.0;
+    }
+    // Calculate baseScale to extract the actual user scale
+    if (container && imgElement && imgElement.naturalWidth > 0 && imgElement.naturalHeight > 0) {
+        const containerWidth = container.clientWidth || container.offsetWidth;
+        const containerHeight = container.clientHeight || container.offsetHeight;
+        if (containerWidth > 0 && containerHeight > 0) {
+            const widthRatio = containerWidth / imgElement.naturalWidth;
+            const heightRatio = containerHeight / imgElement.naturalHeight;
+            const baseScale = Math.max(widthRatio, heightRatio);
+            if (baseScale > 0 && baseScale < 1) {
+                // Extract the actual scale by dividing totalScale by baseScale
+                const scale = totalScale / baseScale;
+                // Clamp to valid range
+                return Math.max(0.1, Math.min(5.0, scale));
+            }
+        }
+    }
+    return 1.0;
+}
+/**
+ * Parse position (X, Y) from CSS transform string
+ * Returns container-relative percentages
+ */
+export function parsePositionFromTransform(transform) {
+    // Match all translate() calls - skip the first one if it's the centering translate(-50%, -50%)
+    const allTranslates = transform.matchAll(/translate\(([-\d.]+)%,?\s*([-\d.]+)?%?\)/g);
+    const translateArray = Array.from(allTranslates);
+    let positionX = 0;
+    let positionY = 0;
+    if (translateArray.length > 1) {
+        // Use the second translate (the position offset)
+        const positionTranslate = translateArray[1];
+        const appliedX = parseFloat(positionTranslate[1] || '0');
+        const appliedY = parseFloat(positionTranslate[2] || '0');
+        // Only use if it's not the centering translate (safety check)
+        if (appliedX !== -50 || appliedY !== -50) {
+            // With new system, applied value IS the stored value (container-relative)
+            positionX = appliedX;
+            positionY = appliedY;
+        }
+    }
+    else if (translateArray.length === 1) {
+        // Only one translate - check if it's the centering one
+        const translate = translateArray[0];
+        const appliedX = parseFloat(translate[1] || '0');
+        const appliedY = parseFloat(translate[2] || '0');
+        // If it's not the centering translate, use it as position
+        if (appliedX !== -50 || appliedY !== -50) {
+            positionX = appliedX;
+            positionY = appliedY;
+        }
+    }
+    return { x: positionX, y: positionY };
+}

package/src/components/GlobalImageEditor/types.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Types for GlobalImageEditor component
+ */
+export interface SelectedImage {
+    element: HTMLElement;
+    originalSrc: string;
+    brightness: number;
+    blur: number;
+    scale: number;
+    positionX: number;
+    positionY: number;
+    isBackground: boolean;
+    aspectRatio?: string;
+    borderRadius?: string;
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+}
+export interface PluginConfig {
+    enabled: boolean;
+    className?: string;
+    overlayClassName?: string;
+}
+export interface DetectedStyling {
+    aspectRatio: string;
+    borderRadius: string;
+    objectFit: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    objectPosition: string;
+}
+export interface PendingTransform {
+    scale: number;
+    positionX: number;
+    positionY: number;
+    semanticId: string;
+    filename: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/src/components/GlobalImageEditor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IAChE,cAAc,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CACpB"}

package/src/components/GlobalImageEditor/types.js

@@ -0,0 +1,4 @@
+/**
+ * Types for GlobalImageEditor component
+ */
+export {};

package/src/components/GlobalImageEditor.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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']
+ */
+export declare function GlobalImageEditor(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=GlobalImageEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalImageEditor.d.ts","sourceRoot":"","sources":["GlobalImageEditor.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAeH,wBAAgB,iBAAiB,mDAkThC"}

package/src/components/GlobalImageEditor.js

@@ -0,0 +1,227 @@
+/**
+ * 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { X } from 'lucide-react';
+import { ImagePicker } from './ImagePicker';
+import { getPluginConfig } from './GlobalImageEditor/config';
+import { parseImageData } from './GlobalImageEditor/imageDetection';
+import { setupImageHandlers } from './GlobalImageEditor/imageSetup';
+import { saveTransformToAPI, flushPendingSave, getFilename, normalizePosition } from './GlobalImageEditor/saveLogic';
+import { handleImageChange, handleBrightnessChange, handleBlurChange } from './GlobalImageEditor/eventHandlers';
+export function GlobalImageEditor() {
+    // Configuration
+    const config = useMemo(() => getPluginConfig(), []);
+    // State
+    const [selectedImage, setSelectedImage] = useState(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [userRole, setUserRole] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    // Refs for save debouncing
+    const saveTransformTimeoutRef = useRef(null);
+    const pendingTransformRef = useRef(null);
+    // Check if user is admin/dev
+    useEffect(() => {
+        const checkUser = async () => {
+            var _a, _b;
+            try {
+                const res = await fetch('/api/me');
+                const data = await res.json();
+                if (data.loggedIn && (((_a = data.user) === null || _a === void 0 ? void 0 : _a.role) === 'admin' || ((_b = data.user) === null || _b === void 0 ? void 0 : _b.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) => {
+            const { id, currentBrightness, currentBlur } = e.detail || {};
+            if (!id)
+                return;
+            // 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}"]`);
+            if (!element) {
+                element = document.querySelector(`[data-background-image-component="true"][data-background-image-id="${id}"]`);
+            }
+            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);
+        return () => {
+            window.removeEventListener('open-image-editor', handleOpenEditor);
+        };
+    }, [userRole]);
+    // Add click handlers to all images
+    useEffect(() => {
+        if (isLoading || !userRole) {
+            return;
+        }
+        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, positionX, positionY, immediate = false, brightnessOverride, blurOverride) => {
+        var _a, _b;
+        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)
+            return;
+        // 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);
+            // Use override values if provided, otherwise use selectedImage values
+            // IMPORTANT: Overrides contain the latest values from the editor
+            const finalBrightness = brightnessOverride !== undefined ? brightnessOverride : ((_a = selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.brightness) !== null && _a !== void 0 ? _a : 100);
+            const finalBlur = blurOverride !== undefined ? blurOverride : ((_b = selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.blur) !== null && _b !== void 0 ? _b : 0);
+            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) => {
+        if (!selectedImage)
+            return;
+        await handleImageChange(image, selectedImage, handleClose);
+    }, [selectedImage]);
+    const handleBrightnessChangeWrapper = useCallback(async (brightness) => {
+        if (!selectedImage)
+            return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed
+        await handleBrightnessChange(brightness, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+    const handleBlurChangeWrapper = useCallback(async (blur) => {
+        if (!selectedImage)
+            return;
+        // Don't save immediately when in editor - will be saved when "Done" is pressed
+        await handleBlurChange(blur, selectedImage, setSelectedImage, false);
+    }, [selectedImage]);
+    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 (_jsx("div", { 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) {
+                handleClose();
+            }
+        }, children: _jsxs("div", { className: `relative bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col ${config.className || ''}`, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex items-center justify-between p-6 border-b dark:border-neutral-800", children: [_jsx("h2", { className: "text-2xl font-bold dark:text-white", children: "Edit Image" }), _jsx("button", { onClick: handleClose, className: "p-2 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors", "aria-label": "Close editor", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "p-6", children: _jsx(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, onScaleChange: async (newScale) => {
+                            if (selectedImage) {
+                                const updated = Object.assign(Object.assign({}, selectedImage), { scale: newScale });
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(newScale, updated.positionX, updated.positionY);
+                            }
+                        }, onPositionXChange: async (newPositionX) => {
+                            if (selectedImage) {
+                                const updated = Object.assign(Object.assign({}, selectedImage), { positionX: newPositionX });
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, newPositionX, updated.positionY);
+                            }
+                        }, onPositionYChange: async (newPositionY) => {
+                            if (selectedImage) {
+                                const updated = Object.assign(Object.assign({}, selectedImage), { positionY: newPositionY });
+                                setSelectedImage(updated);
+                                await saveImageTransformHandler(updated.scale, updated.positionX, newPositionY);
+                            }
+                        }, onEditorSave: async (finalScale, finalPositionX, finalPositionY, finalBrightness, finalBlur) => {
+                            if (selectedImage) {
+                                // Update selectedImage with final values
+                                // Use provided brightness/blur if available, otherwise use current values
+                                const updated = Object.assign(Object.assign({}, selectedImage), { scale: finalScale, positionX: finalPositionX, positionY: finalPositionY, brightness: finalBrightness !== undefined ? finalBrightness : selectedImage.brightness, blur: finalBlur !== undefined ? finalBlur : selectedImage.blur });
+                                setSelectedImage(updated);
+                                // Save with the final brightness and blur values
+                                await saveImageTransformHandler(finalScale, finalPositionX, finalPositionY, true, updated.brightness, updated.blur);
+                            }
+                        }, showEffects: true, darkMode: false, aspectRatio: selectedImage.aspectRatio, borderRadius: selectedImage.borderRadius, objectFit: selectedImage.objectFit, objectPosition: selectedImage.objectPosition }) })] }) }));
+}

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/Image.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface PluginImageProps {
+    id: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    fill?: boolean;
+    sizes?: string;
+    priority?: boolean;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    objectPosition?: string;
+    style?: React.CSSProperties;
+    editable?: boolean;
+    scale?: number;
+    positionX?: number;
+    positionY?: number;
+    brightness?: number;
+    blur?: number;
+}
+export declare function Image({ id, alt, width, height, className, fill, sizes, priority, objectFit, objectPosition, style, editable, ...props }: PluginImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["Image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAKjF,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,KAAK,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,MAAM,EACN,SAAc,EACd,IAAY,EACZ,KAAK,EACL,QAAgB,EAChB,SAAmB,EACnB,cAAyB,EACzB,KAAK,EACL,QAAe,EACf,GAAG,KAAK,EACX,EAAE,gBAAgB,2CA2SlB"}