@jhits/plugin-images 0.0.6 → 0.0.7

package/dist/components/GlobalImageEditor/imageSetup.js

@@ -0,0 +1,260 @@
+/**
+ * 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) => {
+        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 = 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()}`;
+        }
+        // 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(filterStyle.match(/brightness\((\d+)%\)/)?.[1] || '100');
+        const currentBlur = dataBlur
+            ? parseInt(dataBlur)
+            : parseInt(filterStyle.match(/blur\((\d+)px\)/)?.[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/dist/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/dist/components/GlobalImageEditor/saveLogic.d.ts.map

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

package/dist/components/GlobalImageEditor/saveLogic.js

@@ -0,0 +1,98 @@
+/**
+ * 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) {
+    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 img.src.split('/api/uploads/')[1]?.split('?')[0] || semanticId;
+                    }
+                }
+            }
+            else {
+                const img = element.tagName === 'IMG' ? element : element.querySelector('img');
+                if (img && img.src) {
+                    return img.src.split('/api/uploads/')[1]?.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/dist/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/dist/components/GlobalImageEditor/stylingDetection.d.ts.map

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

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

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

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

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

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