@jhits/plugin-images 0.0.6 → 0.0.7

package/src/components/GlobalImageEditor/eventHandlers.js

@@ -0,0 +1,206 @@
+/**
+ * Event handlers for image changes and effects
+ */
+import { getFilename, saveTransformToAPI, normalizePosition } from './saveLogic';
+/**
+ * Apply image changes to DOM and save to API
+ */
+export async function handleImageChange(image, selectedImage, onClose) {
+    var _a;
+    if (!image)
+        return;
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') ||
+        element.getAttribute('data-background-image-id');
+    if (!semanticId) {
+        console.error('[GlobalImageEditor] No semantic ID found for image');
+        return;
+    }
+    // Extract filename from image URL or use image.id
+    const filename = ((_a = image.url.split('/').pop()) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || image.id;
+    const normalizedPositionX = normalizePosition(selectedImage.positionX);
+    const normalizedPositionY = normalizePosition(selectedImage.positionY);
+    // Save the mapping between semantic ID and filename, including effects and transforms
+    await saveTransformToAPI(semanticId, filename, selectedImage.scale, normalizedPositionX, normalizedPositionY, selectedImage.brightness, selectedImage.blur);
+    // Update image src immediately - handle background images differently
+    if (selectedImage.isBackground) {
+        updateBackgroundImage(element, image.url, selectedImage, normalizedPositionX, normalizedPositionY);
+    }
+    else {
+        updateRegularImage(element, image.url, semanticId, selectedImage, normalizedPositionX, normalizedPositionY);
+    }
+    // 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,
+            scale: selectedImage.scale,
+            positionX: selectedImage.positionX,
+            positionY: selectedImage.positionY,
+        }
+    }));
+    onClose();
+}
+/**
+ * Update background image element
+ */
+function updateBackgroundImage(element, imageUrl, selectedImage, normalizedPositionX, normalizedPositionY) {
+    // For background images, update the nested Image component
+    const imgWrapper = element.querySelector('[data-image-id]');
+    if (imgWrapper) {
+        const img = imgWrapper.querySelector('img');
+        if (img) {
+            img.src = imageUrl;
+            img.setAttribute('data-edited-src', imageUrl);
+            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
+            img.style.transformOrigin = 'center center';
+        }
+    }
+    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(${imageUrl})`;
+        }
+    }
+    // Store attributes on the background container
+    const semanticId = element.getAttribute('data-image-id') || element.getAttribute('data-background-image-id') || '';
+    element.setAttribute('data-background-image-id', semanticId);
+    element.setAttribute('data-edited-src', imageUrl);
+    element.setAttribute('data-brightness', selectedImage.brightness.toString());
+    element.setAttribute('data-blur', selectedImage.blur.toString());
+    element.setAttribute('data-scale', selectedImage.scale.toString());
+    element.setAttribute('data-position-x', normalizedPositionX.toString());
+    element.setAttribute('data-position-y', normalizedPositionY.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 = '';
+    }
+}
+/**
+ * Update regular image element
+ */
+function updateRegularImage(element, imageUrl, semanticId, selectedImage, normalizedPositionX, normalizedPositionY) {
+    if (element.tagName === 'IMG') {
+        element.src = imageUrl;
+        element.setAttribute('data-edited-src', imageUrl);
+        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 = imageUrl;
+            img.setAttribute('data-edited-src', imageUrl);
+            img.style.transform = `scale(${selectedImage.scale}) translate(${normalizedPositionX}%, ${normalizedPositionY}%)`;
+            img.style.transformOrigin = 'center center';
+        }
+        element.setAttribute('data-image-id', semanticId);
+        element.setAttribute('data-edited-src', imageUrl);
+        element.setAttribute('data-brightness', selectedImage.brightness.toString());
+        element.setAttribute('data-blur', selectedImage.blur.toString());
+        element.setAttribute('data-scale', selectedImage.scale.toString());
+        element.setAttribute('data-position-x', normalizedPositionX.toString());
+        element.setAttribute('data-position-y', normalizedPositionY.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 = '';
+        }
+    }
+}
+/**
+ * Get filename from element for saving effects
+ */
+async function getFilenameFromElement(semanticId, selectedImage) {
+    var _a, _b;
+    const filename = await getFilename(semanticId, selectedImage);
+    if (filename)
+        return filename;
+    const { element } = selectedImage;
+    if (selectedImage.isBackground) {
+        const bgImage = window.getComputedStyle(element).backgroundImage;
+        const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+        if (urlMatch && urlMatch[1]) {
+            return ((_a = urlMatch[1].split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.split('?')[0]) || semanticId;
+        }
+    }
+    else {
+        let imgSrc = null;
+        if (element instanceof HTMLImageElement && element.src) {
+            imgSrc = element.src;
+        }
+        else {
+            const img = element.querySelector('img');
+            if (img === null || img === void 0 ? void 0 : img.src) {
+                imgSrc = img.src;
+            }
+        }
+        if (imgSrc) {
+            return ((_b = imgSrc.split('/api/uploads/')[1]) === null || _b === void 0 ? void 0 : _b.split('?')[0]) || semanticId;
+        }
+    }
+    return semanticId;
+}
+/**
+ * Handle brightness change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export async function handleBrightnessChange(brightness, selectedImage, setSelectedImage, saveImmediately = true) {
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') ||
+        element.getAttribute('data-background-image-id');
+    if (!semanticId)
+        return;
+    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(Object.assign(Object.assign({}, selectedImage), { brightness }));
+    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+    element.setAttribute('data-brightness', brightness.toString());
+    // Save the effect immediately only if requested (not when in editor)
+    if (saveImmediately) {
+        const filename = await getFilenameFromElement(semanticId, selectedImage);
+        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
+    }
+}
+/**
+ * Handle blur change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export async function handleBlurChange(blur, selectedImage, setSelectedImage, saveImmediately = true) {
+    const { element } = selectedImage;
+    const semanticId = element.getAttribute('data-image-id') ||
+        element.getAttribute('data-background-image-id');
+    if (!semanticId)
+        return;
+    const currentFilter = element.style.filter || '';
+    const brightnessMatch = currentFilter.match(/brightness\((\d+)%\)/);
+    const brightness = brightnessMatch ? parseInt(brightnessMatch[1]) : selectedImage.brightness;
+    // Update the selectedImage state
+    setSelectedImage(Object.assign(Object.assign({}, selectedImage), { blur }));
+    element.style.filter = `brightness(${brightness}%) blur(${blur}px)`;
+    element.setAttribute('data-blur', blur.toString());
+    // Save the effect immediately only if requested (not when in editor)
+    if (saveImmediately) {
+        const filename = await getFilenameFromElement(semanticId, selectedImage);
+        await saveTransformToAPI(semanticId, filename, selectedImage.scale, selectedImage.positionX, selectedImage.positionY, brightness, blur);
+    }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Image detection and parsing utilities
+ */
+import type { SelectedImage } from './types';
+/**
+ * Extract image source from element (handles Next.js Image wrapper)
+ */
+export declare function getImageSource(element: HTMLElement, isBackground: boolean): {
+    currentSrc: string;
+    actualImgElement: HTMLImageElement | null;
+};
+/**
+ * Parse image data from element to create SelectedImage
+ */
+export declare function parseImageData(element: HTMLElement, id: string, currentBrightness?: number, currentBlur?: number): SelectedImage | null;
+//# sourceMappingURL=imageDetection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"imageDetection.d.ts","sourceRoot":"","sources":["imageDetection.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,GAAG;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAC7C,CAmCA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC1B,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE,MAAM,EACV,iBAAiB,CAAC,EAAE,MAAM,EAC1B,WAAW,CAAC,EAAE,MAAM,GACrB,aAAa,GAAG,IAAI,CAoGtB"}

package/src/components/GlobalImageEditor/imageDetection.js

@@ -0,0 +1,130 @@
+/**
+ * Image detection and parsing utilities
+ */
+import { parseScaleFromTransform, parsePositionFromTransform } from './transformParsing';
+import { detectStyling } from './stylingDetection';
+/**
+ * Extract image source from element (handles Next.js Image wrapper)
+ */
+export function getImageSource(element, isBackground) {
+    let currentSrc = '';
+    let actualImgElement = 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;
+            if (actualImgElement) {
+                currentSrc = actualImgElement.src;
+            }
+            else {
+                // Fallback: try to get from background-image style
+                const bgImage = window.getComputedStyle(element).backgroundImage;
+                const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
+                if (urlMatch && urlMatch[1]) {
+                    currentSrc = urlMatch[1];
+                }
+            }
+        }
+    }
+    else {
+        // For regular images, check if element is img or wrapper
+        if (element.tagName === 'IMG') {
+            actualImgElement = element;
+            currentSrc = actualImgElement.src;
+        }
+        else {
+            // Next.js Image wrapper - find the actual img element
+            actualImgElement = element.querySelector('img');
+            if (actualImgElement) {
+                currentSrc = actualImgElement.src;
+            }
+        }
+    }
+    return { currentSrc, actualImgElement };
+}
+/**
+ * Parse image data from element to create SelectedImage
+ */
+export function parseImageData(element, id, currentBrightness, currentBlur) {
+    const isBackground = element.hasAttribute('data-background-image-component') ||
+        element.hasAttribute('data-background-image-id');
+    const { currentSrc, actualImgElement } = getImageSource(element, isBackground);
+    if (!currentSrc) {
+        console.error('[GlobalImageEditor] No image source found for element');
+        return null;
+    }
+    // Get semantic ID
+    const semanticId = element.getAttribute('data-image-id') ||
+        element.getAttribute('data-background-image-id') ||
+        id;
+    // Parse brightness and blur from data attributes or filter style
+    let brightness = currentBrightness !== null && currentBrightness !== void 0 ? currentBrightness : 100;
+    let blur = currentBlur !== null && currentBlur !== void 0 ? currentBlur : 0;
+    const dataBrightness = element.getAttribute('data-brightness');
+    const dataBlur = element.getAttribute('data-blur');
+    if (dataBrightness) {
+        brightness = parseInt(dataBrightness);
+    }
+    else if (actualImgElement) {
+        const filterStyle = actualImgElement.style.filter || window.getComputedStyle(actualImgElement).filter;
+        if (filterStyle && filterStyle !== 'none') {
+            const brightnessMatch = filterStyle.match(/brightness\((\d+)%\)/);
+            if (brightnessMatch) {
+                brightness = parseInt(brightnessMatch[1]);
+            }
+        }
+    }
+    if (dataBlur) {
+        blur = parseInt(dataBlur);
+    }
+    else if (actualImgElement) {
+        const filterStyle = actualImgElement.style.filter || window.getComputedStyle(actualImgElement).filter;
+        if (filterStyle && filterStyle !== 'none') {
+            const blurMatch = filterStyle.match(/blur\((\d+)px\)/);
+            if (blurMatch) {
+                blur = parseInt(blurMatch[1]);
+            }
+        }
+    }
+    // Parse scale and position
+    let scale = 1.0;
+    let positionX = 0;
+    let positionY = 0;
+    const dataScale = element.getAttribute('data-scale');
+    const dataPositionX = element.getAttribute('data-position-x');
+    const dataPositionY = element.getAttribute('data-position-y');
+    if (dataScale) {
+        scale = parseFloat(dataScale);
+    }
+    else if (actualImgElement) {
+        const imgTransform = actualImgElement.style.transform || window.getComputedStyle(actualImgElement).transform;
+        if (imgTransform && imgTransform !== 'none') {
+            // Find container for baseScale calculation
+            const container = actualImgElement.closest('[class*="relative"]') || actualImgElement.parentElement;
+            scale = parseScaleFromTransform(imgTransform, container, actualImgElement);
+        }
+    }
+    if (dataPositionX) {
+        positionX = parseFloat(dataPositionX);
+    }
+    else if (actualImgElement) {
+        const imgTransform = actualImgElement.style.transform || window.getComputedStyle(actualImgElement).transform;
+        if (imgTransform && imgTransform !== 'none') {
+            const position = parsePositionFromTransform(imgTransform);
+            positionX = position.x;
+            positionY = position.y;
+        }
+    }
+    if (dataPositionY) {
+        positionY = parseFloat(dataPositionY);
+    }
+    // Detect styling
+    const styling = detectStyling(element, actualImgElement);
+    return Object.assign({ element, originalSrc: currentSrc, brightness,
+        blur,
+        scale,
+        positionX,
+        positionY,
+        isBackground }, styling);
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Image setup and click handlers
+ */
+import type { SelectedImage } from './types';
+/**
+ * Setup click handlers and hover effects for all images
+ */
+export declare function setupImageHandlers(onImageClick: (image: SelectedImage) => void): () => void;
+//# sourceMappingURL=imageSetup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"imageSetup.d.ts","sourceRoot":"","sources":["imageSetup.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK7C;;GAEG;AACH,wBAAgB,kBAAkB,CAC9B,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAC7C,MAAM,IAAI,CAmSZ"}

package/src/components/GlobalImageEditor/imageSetup.js

@@ -0,0 +1,261 @@
+/**
+ * Image setup and click handlers
+ */
+import { parseImageData } from './imageDetection';
+/**
+ * Setup click handlers and hover effects for all images
+ */
+export function setupImageHandlers(onImageClick) {
+    const cleanupFunctions = [];
+    const handleImageClick = (e) => {
+        var _a, _b, _c, _d;
+        const target = e.target;
+        // Only handle clicks on images that use the plugin components
+        let img = target.closest('img[data-image-id]');
+        let isBackground = false;
+        let element = 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
+            let bgElement = target.closest('[data-background-image-component]');
+            if (bgElement) {
+                element = bgElement;
+                isBackground = true;
+                // Try to get image source from nested Image component first
+                const imgInside = bgElement.querySelector('img[data-image-id]');
+                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 = (_a = currentSrc.split('/api/uploads/')[1]) === null || _a === void 0 ? void 0 : _a.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 = ((_b = element.closest('[data-image-id]')) === null || _b === void 0 ? void 0 : _b.getAttribute('data-image-id')) ||
+                `image-${Date.now()}`;
+        }
+        // Parse image data
+        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(((_c = filterStyle.match(/brightness\((\d+)%\)/)) === null || _c === void 0 ? void 0 : _c[1]) || '100');
+        const currentBlur = dataBlur
+            ? parseInt(dataBlur)
+            : parseInt(((_d = filterStyle.match(/blur\((\d+)px\)/)) === null || _d === void 0 ? void 0 : _d[1]) || '0');
+        // Parse image data using the detection utility
+        const imageData = parseImageData(element, semanticId, currentBrightness, currentBlur);
+        if (!imageData) {
+            console.error('[GlobalImageEditor] Failed to parse image data');
+            return;
+        }
+        // Store semantic ID on element for later use
+        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);
+        }
+        onImageClick(imageData);
+    };
+    // Add click listeners and hover effects to all images
+    const images = document.querySelectorAll('img[data-image-id]:not([data-no-edit])');
+    // Find elements with BackgroundImage components
+    const bgElements = [];
+    const backgroundImageComponents = document.querySelectorAll('[data-background-image-component]');
+    backgroundImageComponents.forEach(el => {
+        bgElements.push(el);
+    });
+    images.forEach((img, index) => {
+        const originalPosition = img.style.position;
+        img.style.cursor = 'pointer';
+        img.setAttribute('data-editable-image', 'true');
+        img.addEventListener('click', handleImageClick);
+        // Find the best container for the indicator
+        let indicatorContainer = img;
+        let parent = img.parentElement;
+        if (parent && (parent.tagName === 'SPAN' || parent.tagName === 'DIV')) {
+            const parentStyle = window.getComputedStyle(parent);
+            if (parentStyle.position !== 'static' ||
+                (parentStyle.display !== 'inline' && parentStyle.display !== 'inline-block')) {
+                indicatorContainer = parent;
+            }
+        }
+        // Ensure container has relative positioning
+        const containerStyle = window.getComputedStyle(indicatorContainer);
+        if (containerStyle.position === 'static') {
+            indicatorContainer.style.position = 'relative';
+        }
+        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);
+        const addHoverEffect = () => {
+            indicator.style.opacity = '1';
+        };
+        const removeHoverEffect = () => {
+            indicator.style.opacity = '0';
+        };
+        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);
+            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) => {
+        if (bgEl.hasAttribute('data-background-image-component')) {
+            return; // Skip BackgroundImage components - they have their own edit button
+        }
+        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');
+        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
+        `;
+        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)';
+        });
+        editButton.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            handleImageClick(e);
+        });
+        buttonContainer.appendChild(editButton);
+        bgEl.appendChild(buttonContainer);
+        cleanupFunctions.push(() => {
+            bgEl.removeAttribute('data-editable-background');
+            bgEl.removeAttribute('data-background-image');
+            bgEl.style.position = originalPosition;
+            buttonContainer.remove();
+        });
+    });
+    return () => {
+        cleanupFunctions.forEach(cleanup => cleanup());
+    };
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Save logic for image transforms and effects
+ */
+import type { SelectedImage, PendingTransform } from './types';
+/**
+ * Normalize position values - convert -50% (centering value) to 0
+ */
+export declare function normalizePosition(position: number): number;
+/**
+ * Get filename from element or API
+ */
+export declare function getFilename(semanticId: string, selectedImage: SelectedImage): Promise<string | null>;
+/**
+ * Save image transform to API
+ */
+export declare function saveTransformToAPI(semanticId: string, filename: string, scale: number, positionX: number, positionY: number, brightness: number, blur: number): Promise<boolean>;
+/**
+ * Flush pending save immediately
+ */
+export declare function flushPendingSave(pending: PendingTransform, selectedImage: SelectedImage): Promise<void>;
+/**
+ * Save image transform with debouncing support
+ * This is a wrapper that handles the debouncing logic
+ */
+export declare function saveImageTransform(semanticId: string, filename: string, scale: number, positionX: number, positionY: number, brightness: number, blur: number): Promise<void>;
+//# sourceMappingURL=saveLogic.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"saveLogic.d.ts","sourceRoot":"","sources":["saveLogic.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED;;GAEG;AACH,wBAAsB,WAAW,CAC7B,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,aAAa,GAC7B,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA4BxB;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACpC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACb,OAAO,CAAC,OAAO,CAAC,CAmClB;AAED;;GAEG;AACH,wBAAsB,gBAAgB,CAClC,OAAO,EAAE,gBAAgB,EACzB,aAAa,EAAE,aAAa,GAC7B,OAAO,CAAC,IAAI,CAAC,CAaf;AAED;;;GAGG;AACH,wBAAsB,kBAAkB,CACpC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACb,OAAO,CAAC,IAAI,CAAC,CAEf"}