@jhits/plugin-images 0.0.5 → 0.0.7

package/dist/api/uploads/[filename]/route.js

@@ -0,0 +1,80 @@
+/**
+ * Image Uploads API Route
+ * Serves uploaded images for the plugin-images system
+ */
+import { NextResponse } from 'next/server';
+import { readFile, unlink } from 'fs/promises';
+import path from 'path';
+export async function GET(request, { params }) {
+    const { filename } = await params;
+    // Security: Prevent directory traversal (only allow the filename)
+    const sanitizedFilename = path.basename(filename);
+    const uploadsDir = path.join(process.cwd(), 'data', 'uploads');
+    // If filename doesn't have an extension, try common image extensions
+    let filePath = path.join(uploadsDir, sanitizedFilename);
+    const hasExtension = path.extname(sanitizedFilename).length > 0;
+    if (!hasExtension) {
+        // Try common image extensions
+        const extensions = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg'];
+        let found = false;
+        for (const ext of extensions) {
+            const testPath = filePath + ext;
+            try {
+                await readFile(testPath);
+                filePath = testPath;
+                found = true;
+                break;
+            }
+            catch {
+                // Continue to next extension
+            }
+        }
+        if (!found) {
+            // If no extension found, try the original filename
+            filePath = path.join(uploadsDir, sanitizedFilename);
+        }
+    }
+    try {
+        const fileBuffer = await readFile(filePath);
+        // Determine content type based on extension
+        const ext = path.extname(filePath).toLowerCase();
+        let contentType = 'application/octet-stream';
+        if (ext === '.png')
+            contentType = 'image/png';
+        else if (ext === '.jpg' || ext === '.jpeg')
+            contentType = 'image/jpeg';
+        else if (ext === '.gif')
+            contentType = 'image/gif';
+        else if (ext === '.webp')
+            contentType = 'image/webp';
+        else if (ext === '.svg')
+            contentType = 'image/svg+xml';
+        return new NextResponse(fileBuffer, {
+            headers: {
+                'Content-Type': contentType,
+                'Cache-Control': 'public, max-age=31536000, immutable',
+            },
+        });
+    }
+    catch (e) {
+        // Don't log errors for missing files - it's expected for some requests
+        return new NextResponse('File not found', { status: 404 });
+    }
+}
+export async function DELETE(request, { params }) {
+    const { filename } = await params;
+    // Security: Prevent directory traversal (only allow the filename)
+    const sanitizedFilename = path.basename(filename);
+    const filePath = path.join(process.cwd(), 'data', 'uploads', sanitizedFilename);
+    try {
+        await unlink(filePath);
+        return NextResponse.json({ success: true, message: 'File deleted' });
+    }
+    catch (e) {
+        if (e.code === 'ENOENT') {
+            return NextResponse.json({ error: 'File not found' }, { status: 404 });
+        }
+        console.error('File deletion error:', e);
+        return NextResponse.json({ error: 'Failed to delete file', detail: e.message }, { status: 500 });
+    }
+}

package/dist/api-server.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Plugin Images - Server-Only API Exports
+ * This file is only imported in server-side code (API routes)
+ *
+ * IMPORTANT: This file uses Node.js modules (fs, path, etc.) and should NEVER
+ * be imported in client-side code. Only use in server-side API routes.
+ */
+export * from './api';
+//# sourceMappingURL=api-server.d.ts.map

package/dist/api-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-server.d.ts","sourceRoot":"","sources":["../src/api-server.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,OAAO,CAAC"}

package/dist/api-server.js

@@ -0,0 +1,9 @@
+/**
+ * Plugin Images - Server-Only API Exports
+ * This file is only imported in server-side code (API routes)
+ *
+ * IMPORTANT: This file uses Node.js modules (fs, path, etc.) and should NEVER
+ * be imported in client-side code. Only use in server-side API routes.
+ */
+// Re-export everything from the API index
+export * from './api';

package/dist/components/BackgroundImage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface BackgroundImageProps {
+    id: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    backgroundSize?: 'cover' | 'contain' | 'auto' | string;
+    backgroundPosition?: string;
+}
+export declare function BackgroundImage({ id, className, style, children, backgroundSize, backgroundPosition, }: BackgroundImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BackgroundImage.d.ts.map

package/dist/components/BackgroundImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundImage.d.ts","sourceRoot":"","sources":["../../src/components/BackgroundImage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,oBAAoB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,wBAAgB,eAAe,CAAC,EAC5B,EAAE,EACF,SAAc,EACd,KAAU,EACV,QAAQ,EACR,cAAwB,EACxB,kBAA6B,GAChC,EAAE,oBAAoB,2CAqEtB"}

package/dist/components/BackgroundImage.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Image } from './Image';
+import { Edit2 } from 'lucide-react';
+export function BackgroundImage({ id, className = '', style = {}, children, backgroundSize = 'cover', backgroundPosition = 'center', }) {
+    const [isAdmin, setIsAdmin] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const checkUser = async () => {
+            try {
+                const res = await fetch('/api/me');
+                const data = await res.json();
+                if (data.loggedIn && ['admin', 'dev'].includes(data.user?.role)) {
+                    setIsAdmin(true);
+                }
+            }
+            catch (error) {
+                console.error('Auth error:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        checkUser();
+    }, []);
+    const handleEditClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        window.dispatchEvent(new CustomEvent('open-image-editor', { detail: { id } }));
+    };
+    return (_jsxs("div", { className: `group relative overflow-hidden ${className}`, style: { ...style, minHeight: style.minHeight ?? '300px' }, "data-background-id": id, children: [_jsx("div", { className: "absolute inset-0 z-0", children: _jsx(Image, { id: id, alt: "", fill: true, priority: true, className: "w-full h-full", objectFit: backgroundSize, objectPosition: backgroundPosition, editable: false }) }), _jsx("div", { className: "relative z-10 w-full h-full", children: children }), !isLoading && isAdmin && (_jsxs("button", { onClick: handleEditClick, className: "absolute bottom-8 left-8 z-50 flex items-center gap-3 px-6 py-3 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 rounded-full shadow-2xl border border-neutral-200 dark:border-neutral-700 opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 ease-out", children: [_jsx(Edit2, { size: 16, className: "text-primary" }), _jsx("span", { className: "text-[11px] font-black uppercase tracking-widest", children: "Edit Background" })] }))] }));
+}

package/dist/components/GlobalImageEditor/config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Configuration utilities for GlobalImageEditor
+ */
+import type { PluginConfig } from './types';
+/**
+ * Read plugin configuration from window global
+ */
+export declare function getPluginConfig(): PluginConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/components/GlobalImageEditor/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalImageEditor/config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C;;GAEG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAW9C"}

package/dist/components/GlobalImageEditor/config.js

@@ -0,0 +1,17 @@
+/**
+ * Configuration utilities for GlobalImageEditor
+ */
+/**
+ * Read plugin configuration from window global
+ */
+export function getPluginConfig() {
+    if (typeof window === 'undefined') {
+        return { enabled: false };
+    }
+    const pluginProps = window.__JHITS_PLUGIN_PROPS__?.['plugin-images'];
+    return {
+        enabled: pluginProps?.enabled !== undefined ? pluginProps.enabled : true,
+        className: pluginProps?.className,
+        overlayClassName: pluginProps?.overlayClassName,
+    };
+}

package/dist/components/GlobalImageEditor/eventHandlers.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Event handlers for image changes and effects
+ */
+import type { SelectedImage } from './types';
+import type { ImageMetadata } from '../../types';
+/**
+ * Apply image changes to DOM and save to API
+ */
+export declare function handleImageChange(image: ImageMetadata | null, selectedImage: SelectedImage, onClose: () => void): Promise<void>;
+/**
+ * Handle brightness change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export declare function handleBrightnessChange(brightness: number, selectedImage: SelectedImage, setSelectedImage: (image: SelectedImage) => void, saveImmediately?: boolean): Promise<void>;
+/**
+ * Handle blur change
+ * @param saveImmediately - If true, save to API immediately. If false, only update state/DOM (for editor preview)
+ */
+export declare function handleBlurChange(blur: number, selectedImage: SelectedImage, setSelectedImage: (image: SelectedImage) => void, saveImmediately?: boolean): Promise<void>;
+//# sourceMappingURL=eventHandlers.d.ts.map

package/dist/components/GlobalImageEditor/eventHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalImageEditor/eventHandlers.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD;;GAEG;AACH,wBAAsB,iBAAiB,CACnC,KAAK,EAAE,aAAa,GAAG,IAAI,EAC3B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,MAAM,IAAI,GACpB,OAAO,CAAC,IAAI,CAAC,CAiDf;AAoID;;;GAGG;AACH,wBAAsB,sBAAsB,CACxC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAChD,eAAe,GAAE,OAAc,GAChC,OAAO,CAAC,IAAI,CAAC,CAyBf;AAED;;;GAGG;AACH,wBAAsB,gBAAgB,CAClC,IAAI,EAAE,MAAM,EACZ,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAChD,eAAe,GAAE,OAAc,GAChC,OAAO,CAAC,IAAI,CAAC,CAyBf"}

package/dist/components/GlobalImageEditor/eventHandlers.js

@@ -0,0 +1,210 @@
+/**
+ * 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) {
+    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 = image.url.split('/').pop()?.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) {
+    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 urlMatch[1].split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+        }
+    }
+    else {
+        let imgSrc = null;
+        if (element instanceof HTMLImageElement && element.src) {
+            imgSrc = element.src;
+        }
+        else {
+            const img = element.querySelector('img');
+            if (img?.src) {
+                imgSrc = img.src;
+            }
+        }
+        if (imgSrc) {
+            return imgSrc.split('/api/uploads/')[1]?.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({
+        ...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({
+        ...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/dist/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/dist/components/GlobalImageEditor/imageDetection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageDetection.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalImageEditor/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/dist/components/GlobalImageEditor/imageDetection.js

@@ -0,0 +1,135 @@
+/**
+ * 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 ?? 100;
+    let blur = 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 {
+        element,
+        originalSrc: currentSrc,
+        brightness,
+        blur,
+        scale,
+        positionX,
+        positionY,
+        isBackground,
+        ...styling,
+    };
+}

package/dist/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/dist/components/GlobalImageEditor/imageSetup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageSetup.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalImageEditor/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"}