drp-imagesdk 2.0.0

package/dist/image-sdk.min.js

@@ -0,0 +1,1978 @@
+var DRP = (function (exports) {
+    'use strict';
+
+    const VERSION = '1.0.0';
+
+    const FORMAT_SIGNATURES = {
+        jpeg: new Uint8Array([0xff, 0xd8, 0xff]),
+        png: new Uint8Array([0x89, 0x50, 0x4e, 0x47]),
+        webp: new Uint8Array([0x52, 0x49, 0x46, 0x46]),
+        gif: new Uint8Array([0x47, 0x49, 0x46]),
+        bmp: new Uint8Array([0x42, 0x4d]),
+    };
+    function validateFile(file, maxSize) {
+        if (!file || !(file instanceof File)) {
+            return maxSize !== undefined
+                ? { valid: false, size: 0, maxSize, message: 'Not a valid File object' }
+                : false;
+        }
+        if (file.size === 0) {
+            return maxSize !== undefined
+                ? { valid: false, size: 0, maxSize, message: 'File is empty' }
+                : false;
+        }
+        const validTypes = [
+            'image/jpeg',
+            'image/png',
+            'image/webp',
+            'image/gif',
+            'image/bmp',
+            'image/avif',
+        ];
+        if (!validTypes.includes(file.type)) {
+            return maxSize !== undefined
+                ? { valid: false, size: file.size, maxSize, message: `Unsupported file type: ${file.type}` }
+                : false;
+        }
+        if (maxSize !== undefined) {
+            const valid = file.size <= maxSize;
+            return {
+                valid,
+                size: file.size,
+                maxSize,
+                message: valid
+                    ? 'File validation passed'
+                    : `File size exceeds maximum allowed size`,
+            };
+        }
+        return true;
+    }
+    async function detectFormat(file) {
+        const buffer = await file.slice(0, 12).arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        for (const [format, signature] of Object.entries(FORMAT_SIGNATURES)) {
+            if (signature.every((byte, i) => bytes[i] === byte)) {
+                if (format === 'webp' && bytes[8] === 0x57 && bytes[9] === 0x45) {
+                    return 'webp';
+                }
+                if (format === 'webp' && bytes[8] === 0x41 && bytes[9] === 0x56) {
+                    return 'avif';
+                }
+                return format;
+            }
+        }
+        throw new Error('Unable to detect image format');
+    }
+    async function loadImage(source) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => {
+                URL.revokeObjectURL(img.src);
+                resolve(img);
+            };
+            img.onerror = () => {
+                reject(new Error('Failed to load image'));
+            };
+            if (typeof source === 'string') {
+                img.src = source;
+            }
+            else {
+                if (!validateFile(source)) {
+                    reject(new Error('Invalid file'));
+                    return;
+                }
+                img.src = URL.createObjectURL(source);
+            }
+        });
+    }
+    async function getImageInfo(file) {
+        const format = await detectFormat(file);
+        const img = await loadImage(file);
+        return {
+            width: img.width,
+            height: img.height,
+            format,
+            size: file.size,
+        };
+    }
+    function imageToCanvas(img) {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        return canvas;
+    }
+    function canvasToImageData(canvas) {
+        const ctx = canvas.getContext('2d');
+        return ctx.getImageData(0, 0, canvas.width, canvas.height);
+    }
+    function imageDataToCanvas(imageData) {
+        const canvas = document.createElement('canvas');
+        canvas.width = imageData.width;
+        canvas.height = imageData.height;
+        const ctx = canvas.getContext('2d');
+        ctx.putImageData(new window.ImageData(imageData.data, imageData.width, imageData.height), 0, 0);
+        return canvas;
+    }
+
+    async function cropImage(source, options) {
+        let img;
+        if (typeof source === 'string' || source instanceof File) {
+            img = await loadImage(source);
+        }
+        else if (source instanceof HTMLImageElement) {
+            img = source;
+        }
+        else {
+            img = new Image();
+            img.src = source.toDataURL();
+            await new Promise((resolve) => {
+                img.onload = () => resolve();
+            });
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = options.width;
+        canvas.height = options.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, options.x, options.y, options.width, options.height, 0, 0, options.width, options.height);
+        return canvas;
+    }
+    function cropCanvas(canvas, options) {
+        const cropped = document.createElement('canvas');
+        cropped.width = options.width;
+        cropped.height = options.height;
+        const ctx = cropped.getContext('2d');
+        ctx.drawImage(canvas, options.x, options.y, options.width, options.height, 0, 0, options.width, options.height);
+        return cropped;
+    }
+
+    function calculateDimensions(originalWidth, originalHeight, options) {
+        let { width, height } = options;
+        const maintainAspectRatio = options.maintainAspectRatio ?? true;
+        if (!width && !height) {
+            return { width: originalWidth, height: originalHeight };
+        }
+        if (maintainAspectRatio) {
+            const aspectRatio = originalWidth / originalHeight;
+            if (width && !height) {
+                height = Math.round(width / aspectRatio);
+            }
+            else if (!width && height) {
+                width = Math.round(height * aspectRatio);
+            }
+            else {
+                const targetRatio = width / height;
+                if (targetRatio > aspectRatio) {
+                    width = Math.round(height * aspectRatio);
+                }
+                else {
+                    height = Math.round(width / aspectRatio);
+                }
+            }
+        }
+        else {
+            width = width ?? originalWidth;
+            height = height ?? originalHeight;
+        }
+        return { width: width, height: height };
+    }
+    async function resizeImage(source, options) {
+        let img;
+        if (typeof source === 'string' || source instanceof File) {
+            img = await loadImage(source);
+        }
+        else if (source instanceof HTMLImageElement) {
+            img = source;
+        }
+        else {
+            img = new Image();
+            img.src = source.toDataURL();
+            await new Promise((resolve) => {
+                img.onload = () => resolve();
+            });
+        }
+        const { width, height } = calculateDimensions(img.width, img.height, options);
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(img, 0, 0, width, height);
+        return canvas;
+    }
+    function resizeCanvas(canvas, options) {
+        const { width, height } = calculateDimensions(canvas.width, canvas.height, options);
+        const resized = document.createElement('canvas');
+        resized.width = width;
+        resized.height = height;
+        const ctx = resized.getContext('2d');
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(canvas, 0, 0, width, height);
+        return resized;
+    }
+
+    async function rotateImage(source, options) {
+        let canvas;
+        if (typeof source === 'string' || source instanceof File) {
+            const img = await loadImage(source);
+            canvas = imageToCanvas(img);
+        }
+        else if (source instanceof HTMLImageElement) {
+            canvas = imageToCanvas(source);
+        }
+        else {
+            canvas = source;
+        }
+        const { degrees, backgroundColor = 'transparent' } = options;
+        const radians = (degrees * Math.PI) / 180;
+        const sin = Math.abs(Math.sin(radians));
+        const cos = Math.abs(Math.cos(radians));
+        const newWidth = Math.round(canvas.width * cos + canvas.height * sin);
+        const newHeight = Math.round(canvas.width * sin + canvas.height * cos);
+        const rotated = document.createElement('canvas');
+        rotated.width = newWidth;
+        rotated.height = newHeight;
+        const ctx = rotated.getContext('2d');
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, newWidth, newHeight);
+        ctx.translate(newWidth / 2, newHeight / 2);
+        ctx.rotate(radians);
+        ctx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2);
+        return rotated;
+    }
+    async function flipImage(source, options) {
+        let canvas;
+        if (typeof source === 'string' || source instanceof File) {
+            const img = await loadImage(source);
+            canvas = imageToCanvas(img);
+        }
+        else if (source instanceof HTMLImageElement) {
+            canvas = imageToCanvas(source);
+        }
+        else {
+            canvas = source;
+        }
+        const { horizontal = false, vertical = false } = options;
+        const flipped = document.createElement('canvas');
+        flipped.width = canvas.width;
+        flipped.height = canvas.height;
+        const ctx = flipped.getContext('2d');
+        if (horizontal) {
+            ctx.translate(canvas.width, 0);
+            ctx.scale(-1, 1);
+        }
+        if (vertical) {
+            ctx.translate(0, canvas.height);
+            ctx.scale(1, -1);
+        }
+        ctx.drawImage(canvas, 0, 0);
+        return flipped;
+    }
+    function rotateCanvas(canvas, options) {
+        const { degrees, backgroundColor = 'transparent' } = options;
+        const radians = (degrees * Math.PI) / 180;
+        const sin = Math.abs(Math.sin(radians));
+        const cos = Math.abs(Math.cos(radians));
+        const newWidth = Math.round(canvas.width * cos + canvas.height * sin);
+        const newHeight = Math.round(canvas.width * sin + canvas.height * cos);
+        const rotated = document.createElement('canvas');
+        rotated.width = newWidth;
+        rotated.height = newHeight;
+        const ctx = rotated.getContext('2d');
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, newWidth, newHeight);
+        ctx.translate(newWidth / 2, newHeight / 2);
+        ctx.rotate(radians);
+        ctx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2);
+        return rotated;
+    }
+    function flipCanvas(canvas, options) {
+        const { horizontal = false, vertical = false } = options;
+        const flipped = document.createElement('canvas');
+        flipped.width = canvas.width;
+        flipped.height = canvas.height;
+        const ctx = flipped.getContext('2d');
+        if (horizontal) {
+            ctx.translate(canvas.width, 0);
+            ctx.scale(-1, 1);
+        }
+        if (vertical) {
+            ctx.translate(0, canvas.height);
+            ctx.scale(1, -1);
+        }
+        ctx.drawImage(canvas, 0, 0);
+        return flipped;
+    }
+
+    function applyAdjustments(canvas, adjustments) {
+        const ctx = canvas.getContext('2d');
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        const data = imageData.data;
+        let { brightness = 0, contrast = 0, saturation = 0, temperature = 0, tint = 0, grayscale = false, sepia = false, } = adjustments;
+        const brightnessValue = brightness / 100;
+        const contrastValue = (contrast + 100) / 100;
+        const saturationValue = (saturation + 100) / 100;
+        for (let i = 0; i < data.length; i += 4) {
+            let r = data[i];
+            let g = data[i + 1];
+            let b = data[i + 2];
+            r = r + brightnessValue * 255;
+            g = g + brightnessValue * 255;
+            b = b + brightnessValue * 255;
+            r = ((r / 255 - 0.5) * contrastValue + 0.5) * 255;
+            g = ((g / 255 - 0.5) * contrastValue + 0.5) * 255;
+            b = ((b / 255 - 0.5) * contrastValue + 0.5) * 255;
+            const gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+            r = r + (gray - r) * (1 - saturationValue);
+            g = g + (gray - g) * (1 - saturationValue);
+            b = b + (gray - b) * (1 - saturationValue);
+            if (temperature !== 0) {
+                const tempValue = temperature / 100;
+                r = r + tempValue * 30;
+                b = b - tempValue * 30;
+            }
+            if (tint !== 0) {
+                const tintValue = tint / 100;
+                g = g + tintValue * 30;
+            }
+            if (grayscale) {
+                const gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+                r = gray;
+                g = gray;
+                b = gray;
+            }
+            if (sepia) {
+                const sepiaR = r * 0.393 + g * 0.769 + b * 0.189;
+                const sepiaG = r * 0.349 + g * 0.686 + b * 0.168;
+                const sepiaB = r * 0.272 + g * 0.534 + b * 0.131;
+                r = sepiaR;
+                g = sepiaG;
+                b = sepiaB;
+            }
+            data[i] = Math.max(0, Math.min(255, r));
+            data[i + 1] = Math.max(0, Math.min(255, g));
+            data[i + 2] = Math.max(0, Math.min(255, b));
+        }
+        const result = document.createElement('canvas');
+        result.width = canvas.width;
+        result.height = canvas.height;
+        const resultCtx = result.getContext('2d');
+        resultCtx.putImageData(imageData, 0, 0);
+        return result;
+    }
+
+    const FILTERS = {
+        original: {
+            brightness: 0,
+            contrast: 0,
+            saturation: 0,
+            temperature: 0,
+            tint: 0,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        vintage: {
+            brightness: 10,
+            contrast: -10,
+            saturation: -30,
+            temperature: 20,
+            tint: 10,
+            grayscale: false,
+            sepia: true,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        blackAndWhite: {
+            brightness: 0,
+            contrast: 20,
+            saturation: -100,
+            temperature: 0,
+            tint: 0,
+            grayscale: true,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        warm: {
+            brightness: 5,
+            contrast: 5,
+            saturation: 10,
+            temperature: 30,
+            tint: 5,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        cool: {
+            brightness: 5,
+            contrast: 5,
+            saturation: 10,
+            temperature: -30,
+            tint: -5,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        cinematic: {
+            brightness: -5,
+            contrast: 30,
+            saturation: -20,
+            temperature: -10,
+            tint: 5,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        fade: {
+            brightness: 15,
+            contrast: -20,
+            saturation: -30,
+            temperature: 0,
+            tint: 0,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 90,
+        },
+        dramatic: {
+            brightness: -10,
+            contrast: 40,
+            saturation: -40,
+            temperature: -10,
+            tint: 0,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+        soft: {
+            brightness: 10,
+            contrast: -10,
+            saturation: -10,
+            temperature: 5,
+            tint: 0,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 1,
+            opacity: 95,
+        },
+        highContrast: {
+            brightness: 5,
+            contrast: 50,
+            saturation: 15,
+            temperature: 0,
+            tint: 0,
+            grayscale: false,
+            sepia: false,
+            hueRotate: 0,
+            blur: 0,
+            opacity: 100,
+        },
+    };
+    function getFilterConfig(preset) {
+        return { ...FILTERS[preset] };
+    }
+    function applyFilter(canvas, preset) {
+        if (preset === 'original') {
+            return canvas;
+        }
+        const config = FILTERS[preset];
+        const result = document.createElement('canvas');
+        result.width = canvas.width;
+        result.height = canvas.height;
+        const ctx = result.getContext('2d');
+        let filterString = '';
+        if (config.brightness !== 0) {
+            filterString += `brightness(${100 + config.brightness}%) `;
+        }
+        if (config.contrast !== 0) {
+            filterString += `contrast(${100 + config.contrast}%) `;
+        }
+        if (config.saturation !== 0) {
+            filterString += `saturate(${100 + config.saturation}%) `;
+        }
+        if (config.hueRotate !== 0) {
+            filterString += `hue-rotate(${config.hueRotate}deg) `;
+        }
+        if (config.blur > 0) {
+            filterString += `blur(${config.blur}px) `;
+        }
+        if (config.opacity < 100) {
+            filterString += `opacity(${config.opacity}%) `;
+        }
+        if (config.grayscale) {
+            filterString += 'grayscale(100%) ';
+        }
+        if (config.sepia) {
+            filterString += 'sepia(100%) ';
+        }
+        ctx.filter = filterString.trim() || 'none';
+        ctx.drawImage(canvas, 0, 0);
+        if (config.temperature !== 0 || config.tint !== 0) {
+            const imageData = ctx.getImageData(0, 0, result.width, result.height);
+            const data = imageData.data;
+            const tempValue = config.temperature / 100;
+            const tintValue = config.tint / 100;
+            for (let i = 0; i < data.length; i += 4) {
+                if (tempValue !== 0) {
+                    data[i] = Math.max(0, Math.min(255, data[i] + tempValue * 30));
+                    data[i + 2] = Math.max(0, Math.min(255, data[i + 2] - tempValue * 30));
+                }
+                if (tintValue !== 0) {
+                    data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + tintValue * 30));
+                }
+            }
+            ctx.putImageData(imageData, 0, 0);
+        }
+        return result;
+    }
+    const AVAILABLE_FILTERS = [
+        'original',
+        'vintage',
+        'blackAndWhite',
+        'warm',
+        'cool',
+        'cinematic',
+        'fade',
+        'dramatic',
+        'soft',
+        'highContrast',
+    ];
+    function getFilterName(preset) {
+        const names = {
+            original: 'Original',
+            vintage: 'Vintage',
+            blackAndWhite: 'Black & White',
+            warm: 'Warm',
+            cool: 'Cool',
+            cinematic: 'Cinematic',
+            fade: 'Fade',
+            dramatic: 'Dramatic',
+            soft: 'Soft',
+            highContrast: 'High Contrast',
+        };
+        return names[preset];
+    }
+
+    const MIME_TYPES = {
+        jpeg: 'image/jpeg',
+        png: 'image/png',
+        webp: 'image/webp',
+        avif: 'image/avif',
+        gif: 'image/gif',
+        bmp: 'image/bmp',
+    };
+    const EXTENSIONS = {
+        jpeg: '.jpg',
+        png: '.png',
+        webp: '.webp',
+        avif: '.avif',
+        gif: '.gif',
+        bmp: '.bmp',
+    };
+    function getMimeType(format) {
+        return MIME_TYPES[format];
+    }
+    function getExtension(format) {
+        return EXTENSIONS[format];
+    }
+    function getSupportedFormats() {
+        return ['jpeg', 'png', 'webp', 'avif', 'gif', 'bmp'];
+    }
+    async function convertImage(source, options) {
+        const onProgress = options.onProgress;
+        let canvas;
+        onProgress?.({ phase: 'loading', percent: 0, message: 'Loading image...' });
+        if ('maxFileSize' in options && options.maxFileSize && source instanceof File) {
+            if (source.size > options.maxFileSize) {
+                throw new Error(`File size exceeds maximum allowed size of ${options.maxFileSize} bytes`);
+            }
+        }
+        if (typeof source === 'string' || source instanceof File) {
+            const img = await loadImage(source);
+            canvas = imageToCanvas(img);
+        }
+        else if (source instanceof HTMLImageElement) {
+            canvas = imageToCanvas(source);
+        }
+        else {
+            canvas = source;
+        }
+        onProgress?.({ phase: 'processing', percent: 30, message: 'Processing image...' });
+        if (options.width || options.height) {
+            const { width, height } = calculateOutputDimensions(canvas.width, canvas.height, options);
+            const resized = document.createElement('canvas');
+            resized.width = width;
+            resized.height = height;
+            const ctx = resized.getContext('2d');
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            ctx.drawImage(canvas, 0, 0, width, height);
+            canvas = resized;
+        }
+        onProgress?.({ phase: 'encoding', percent: 70, message: 'Encoding image...' });
+        const mimeType = MIME_TYPES[options.format];
+        const quality = options.quality ? options.quality / 100 : undefined;
+        const blob = await new Promise((resolve) => {
+            canvas.toBlob(resolve, mimeType, quality);
+        });
+        if (!blob) {
+            throw new Error(`Failed to convert to ${options.format}`);
+        }
+        onProgress?.({ phase: 'complete', percent: 100, message: 'Done' });
+        return blob;
+    }
+    async function convertToFile(source, options, filename) {
+        const blob = await convertImage(source, options);
+        const ext = EXTENSIONS[options.format];
+        const name = filename.replace(/\.[^/.]+$/, '') + ext;
+        return new File([blob], name, { type: MIME_TYPES[options.format] });
+    }
+    function calculateOutputDimensions(originalWidth, originalHeight, options) {
+        let { width, height } = options;
+        const maintainAspectRatio = options.maintainAspectRatio ?? true;
+        if (!width && !height) {
+            return { width: originalWidth, height: originalHeight };
+        }
+        if (maintainAspectRatio) {
+            const aspectRatio = originalWidth / originalHeight;
+            if (width && !height) {
+                height = Math.round(width / aspectRatio);
+            }
+            else if (!width && height) {
+                width = Math.round(height * aspectRatio);
+            }
+            else {
+                const targetRatio = width / height;
+                if (targetRatio > aspectRatio) {
+                    width = Math.round(height * aspectRatio);
+                }
+                else {
+                    height = Math.round(width / aspectRatio);
+                }
+            }
+        }
+        else {
+            width = width ?? originalWidth;
+            height = height ?? originalHeight;
+        }
+        return { width: width, height: height };
+    }
+    function isFormatSupported(format) {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        return new Promise((resolve) => {
+            canvas.toBlob((blob) => {
+                resolve(blob !== null);
+            }, MIME_TYPES[format]);
+        });
+    }
+
+    let layerCounter = 0;
+    function generateLayerId() {
+        return `layer_${Date.now()}_${++layerCounter}`;
+    }
+    function createTextLayer(options = {}) {
+        return {
+            id: generateLayerId(),
+            type: 'text',
+            name: options.name || 'Text',
+            visible: true,
+            locked: false,
+            opacity: options.opacity ?? 100,
+            x: options.x ?? 50,
+            y: options.y ?? 50,
+            width: options.width ?? 200,
+            height: options.height ?? 50,
+            rotation: options.rotation ?? 0,
+            zIndex: options.zIndex ?? 0,
+            content: options.content || 'Hello World',
+            fontFamily: options.fontFamily || 'Arial',
+            fontSize: options.fontSize ?? 24,
+            fontWeight: options.fontWeight || 'normal',
+            color: options.color || '#000000',
+            alignment: options.alignment || 'left',
+            letterSpacing: options.letterSpacing ?? 0,
+            lineHeight: options.lineHeight ?? 1.5,
+        };
+    }
+    function createShapeLayer(options = {}) {
+        return {
+            id: generateLayerId(),
+            type: 'shape',
+            name: options.name || 'Shape',
+            visible: true,
+            locked: false,
+            opacity: options.opacity ?? 100,
+            x: options.x ?? 50,
+            y: options.y ?? 50,
+            width: options.width ?? 100,
+            height: options.height ?? 100,
+            rotation: options.rotation ?? 0,
+            zIndex: options.zIndex ?? 0,
+            shapeType: options.shapeType || 'rectangle',
+            fill: options.fill || '#3b82f6',
+            stroke: options.stroke || '#1e40af',
+            strokeWidth: options.strokeWidth ?? 2,
+        };
+    }
+    function createImageLayer(imageElement, options = {}) {
+        return {
+            id: generateLayerId(),
+            type: 'image',
+            name: options.name || 'Image',
+            visible: true,
+            locked: false,
+            opacity: options.opacity ?? 100,
+            x: options.x ?? 0,
+            y: options.y ?? 0,
+            width: options.width ?? imageElement.width,
+            height: options.height ?? imageElement.height,
+            rotation: options.rotation ?? 0,
+            zIndex: options.zIndex ?? 0,
+            imageElement,
+            originalWidth: imageElement.width,
+            originalHeight: imageElement.height,
+        };
+    }
+    function sortLayersByZIndex(layers) {
+        return [...layers].sort((a, b) => a.zIndex - b.zIndex);
+    }
+    function getMaxZIndex(layers) {
+        if (layers.length === 0)
+            return 0;
+        return Math.max(...layers.map((l) => l.zIndex));
+    }
+    function moveLayerUp(layers, layerId) {
+        const index = layers.findIndex((l) => l.id === layerId);
+        if (index === -1 || index === layers.length - 1)
+            return layers;
+        const newLayers = [...layers];
+        const current = newLayers[index];
+        const next = newLayers[index + 1];
+        newLayers[index] = { ...next, zIndex: current.zIndex };
+        newLayers[index + 1] = { ...current, zIndex: next.zIndex };
+        return newLayers;
+    }
+    function moveLayerDown(layers, layerId) {
+        const index = layers.findIndex((l) => l.id === layerId);
+        if (index <= 0)
+            return layers;
+        const newLayers = [...layers];
+        const current = newLayers[index];
+        const prev = newLayers[index - 1];
+        newLayers[index] = { ...prev, zIndex: current.zIndex };
+        newLayers[index - 1] = { ...current, zIndex: prev.zIndex };
+        return newLayers;
+    }
+    function duplicateLayer(layer) {
+        const newLayer = { ...layer };
+        newLayer.id = generateLayerId();
+        newLayer.name = `${layer.name} Copy`;
+        return newLayer;
+    }
+    function renderLayersToCanvas(layers, width, height) {
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext('2d');
+        const sortedLayers = sortLayersByZIndex(layers);
+        for (const layer of sortedLayers) {
+            if (!layer.visible)
+                continue;
+            ctx.save();
+            ctx.globalAlpha = layer.opacity / 100;
+            if (layer.rotation !== 0) {
+                const centerX = layer.x + layer.width / 2;
+                const centerY = layer.y + layer.height / 2;
+                ctx.translate(centerX, centerY);
+                ctx.rotate((layer.rotation * Math.PI) / 180);
+                ctx.translate(-centerX, -centerY);
+            }
+            switch (layer.type) {
+                case 'text':
+                    renderTextLayer(ctx, layer);
+                    break;
+                case 'shape':
+                    renderShapeLayer(ctx, layer);
+                    break;
+                case 'image':
+                    renderImageLayer(ctx, layer);
+                    break;
+            }
+            ctx.restore();
+        }
+        return canvas;
+    }
+    function renderTextLayer(ctx, layer) {
+        ctx.fillStyle = layer.color;
+        ctx.font = `${layer.fontWeight} ${layer.fontSize}px ${layer.fontFamily}`;
+        ctx.textAlign = layer.alignment;
+        ctx.textBaseline = 'top';
+        const lines = layer.content.split('\n');
+        const lineHeight = layer.fontSize * layer.lineHeight;
+        lines.forEach((line, index) => {
+            ctx.fillText(line, layer.x, layer.y + index * lineHeight);
+        });
+    }
+    function renderShapeLayer(ctx, layer) {
+        ctx.fillStyle = layer.fill;
+        ctx.strokeStyle = layer.stroke;
+        ctx.lineWidth = layer.strokeWidth;
+        switch (layer.shapeType) {
+            case 'rectangle':
+                ctx.fillRect(layer.x, layer.y, layer.width, layer.height);
+                ctx.strokeRect(layer.x, layer.y, layer.width, layer.height);
+                break;
+            case 'circle':
+                ctx.beginPath();
+                ctx.ellipse(layer.x + layer.width / 2, layer.y + layer.height / 2, layer.width / 2, layer.height / 2, 0, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+                break;
+            case 'line':
+                ctx.beginPath();
+                ctx.moveTo(layer.x, layer.y);
+                ctx.lineTo(layer.x + layer.width, layer.y + layer.height);
+                ctx.stroke();
+                break;
+        }
+    }
+    function renderImageLayer(ctx, layer) {
+        ctx.drawImage(layer.imageElement, layer.x, layer.y, layer.width, layer.height);
+    }
+
+    async function readMetadata(file) {
+        const metadata = {};
+        if (file.type === 'image/jpeg') {
+            try {
+                metadata.exif = await readExifData(file);
+            }
+            catch {
+                metadata.exif = undefined;
+            }
+        }
+        return metadata;
+    }
+    async function readExifData(file) {
+        const buffer = await file.arrayBuffer();
+        const view = new DataView(buffer);
+        if (view.getUint16(0, false) !== 0xffd8) {
+            return {};
+        }
+        const metadata = {};
+        let offset = 2;
+        while (offset < buffer.byteLength) {
+            const marker = view.getUint16(offset, false);
+            offset += 2;
+            if (marker === 0xffe1) {
+                view.getUint16(offset, false);
+                const exifData = parseExif(view, offset + 2);
+                Object.assign(metadata, exifData);
+                break;
+            }
+            if ((marker & 0xff00) === 0xff00) {
+                const length = view.getUint16(offset, false);
+                offset += length;
+            }
+            else {
+                break;
+            }
+        }
+        return metadata;
+    }
+    function parseExif(view, start, _length) {
+        const metadata = {};
+        const header = String.fromCharCode(view.getUint8(start), view.getUint8(start + 1), view.getUint8(start + 2), view.getUint8(start + 3));
+        if (header !== 'Exif') {
+            return metadata;
+        }
+        const byteOrder = view.getUint16(start + 4, false);
+        const littleEndian = byteOrder === 0x4949;
+        metadata.byteOrder = littleEndian ? 'Little-endian' : 'Big-endian';
+        return metadata;
+    }
+    function generateCustomMetadata(options) {
+        const custom = {};
+        if (options.custom) {
+            Object.assign(custom, options.custom);
+        }
+        custom.application = '@our-org/image-sdk';
+        custom.exportedAt = new Date().toISOString();
+        return custom;
+    }
+    async function exportWithMetadata(blob, format, metadata) {
+        if (!metadata) {
+            return blob;
+        }
+        if (format === 'png') {
+            return addPngTextChunk(blob, metadata);
+        }
+        return blob;
+    }
+    async function addPngTextChunk(blob, metadata) {
+        const buffer = await blob.arrayBuffer();
+        const view = new DataView(buffer);
+        if (view.getUint32(0, false) !== 0x89504e47) {
+            return blob;
+        }
+        const chunks = [];
+        chunks.push(buffer.slice(0, 8));
+        let offset = 8;
+        while (offset < buffer.byteLength) {
+            const chunkLength = view.getUint32(offset, false);
+            const chunkType = String.fromCharCode(view.getUint8(offset + 4), view.getUint8(offset + 5), view.getUint8(offset + 6), view.getUint8(offset + 7));
+            if (chunkType === 'IEND') {
+                const textData = createPngTextData(metadata);
+                if (textData) {
+                    const textChunk = createPngChunk('tEXt', textData);
+                    chunks.push(textChunk);
+                }
+            }
+            chunks.push(buffer.slice(offset, offset + 12 + chunkLength));
+            offset += 12 + chunkLength;
+        }
+        const totalLength = chunks.reduce((acc, chunk) => acc + chunk.byteLength, 0);
+        const result = new Uint8Array(totalLength);
+        let resultOffset = 0;
+        for (const chunk of chunks) {
+            result.set(new Uint8Array(chunk), resultOffset);
+            resultOffset += chunk.byteLength;
+        }
+        return new Blob([result], { type: 'image/png' });
+    }
+    function createPngTextData(metadata) {
+        const custom = generateCustomMetadata(metadata);
+        const text = JSON.stringify(custom);
+        const encoder = new TextEncoder();
+        return encoder.encode(`Comment\0${text}`);
+    }
+    function createPngChunk(type, data) {
+        const length = data.byteLength;
+        const chunk = new ArrayBuffer(12 + length);
+        const view = new DataView(chunk);
+        view.setUint32(0, length, false);
+        const typeBytes = new TextEncoder().encode(type);
+        new Uint8Array(chunk).set(typeBytes, 4);
+        new Uint8Array(chunk).set(data, 8);
+        let crc = 0xffffffff;
+        for (let i = 4; i < 8 + length; i++) {
+            crc ^= new Uint8Array(chunk)[i];
+            for (let j = 0; j < 8; j++) {
+                crc = (crc >>> 1) ^ (crc & 1 ? 0xedb88320 : 0);
+            }
+        }
+        view.setUint32(8 + length, (crc ^ 0xffffffff) >>> 0, false);
+        return chunk;
+    }
+    function removeMetadata(blob) {
+        return blob;
+    }
+
+    const MAX_BINARY_SEARCH_ITERATIONS = 8;
+    const PRESET_CONFIGS = {
+        web: { format: 'webp', quality: 75, maxDimension: 1920 },
+        email: { format: 'jpeg', quality: 70, maxDimension: 800 },
+        print: { format: 'jpeg', quality: 95, maxDimension: 3000 },
+        thumbnail: { format: 'webp', quality: 60, maxDimension: 400 },
+    };
+    function canvasToBlob$1(canvas, mimeType, quality) {
+        return new Promise((resolve) => {
+            canvas.toBlob(resolve, mimeType, quality);
+        });
+    }
+    function estimateSize(canvas, format, quality) {
+        const mimeType = getMimeType(format);
+        const q = quality / 100;
+        if (format === 'png' || format === 'bmp' || format === 'gif') {
+            return canvasToBlob$1(canvas, mimeType).then((blob) => blob?.size ?? 0);
+        }
+        return canvasToBlob$1(canvas, mimeType, q).then((blob) => blob?.size ?? 0);
+    }
+    async function compressToTargetSize(source, options) {
+        const { targetSize, tolerance = 5, maxFileSize, format = 'jpeg', width, height, maintainAspectRatio = true, onProgress, } = options;
+        let canvas;
+        onProgress?.({ phase: 'loading', percent: 0, message: 'Loading image...' });
+        if (typeof source === 'string' || source instanceof File) {
+            const img = await loadImage(source);
+            canvas = imageToCanvas(img);
+        }
+        else if (source instanceof HTMLImageElement) {
+            canvas = imageToCanvas(source);
+        }
+        else {
+            canvas = source;
+        }
+        if (maxFileSize) {
+            const initialBlob = await canvasToBlob$1(canvas, getMimeType(format));
+            if (initialBlob && initialBlob.size > maxFileSize) {
+                throw new Error(`File size (${formatBytes(initialBlob.size)}) exceeds max allowed size (${formatBytes(maxFileSize)})`);
+            }
+        }
+        if (options.maxDimension) {
+            const maxDim = Math.max(canvas.width, canvas.height);
+            if (maxDim > options.maxDimension) {
+                const scale = options.maxDimension / maxDim;
+                const scaled = document.createElement('canvas');
+                scaled.width = Math.round(canvas.width * scale);
+                scaled.height = Math.round(canvas.height * scale);
+                const ctx = scaled.getContext('2d');
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                ctx.drawImage(canvas, 0, 0, scaled.width, scaled.height);
+                canvas = scaled;
+            }
+        }
+        if (width || height) {
+            canvas = resizeCanvasForCompression(canvas, {
+                width,
+                height,
+                maintainAspectRatio,
+            });
+        }
+        onProgress?.({ phase: 'processing', percent: 20, message: 'Analyzing image...' });
+        if (!targetSize) {
+            const blob = await canvasToBlob$1(canvas, getMimeType(format), options.quality ? options.quality / 100 : undefined);
+            if (!blob)
+                throw new Error('Failed to encode image');
+            return {
+                blob,
+                actualSize: blob.size,
+                withinTarget: !maxFileSize || blob.size <= maxFileSize,
+                quality: options.quality ?? 100,
+                format,
+            };
+        }
+        const mimeType = getMimeType(format);
+        if (format === 'png' || format === 'bmp' || format === 'gif') {
+            const blob = await canvasToBlob$1(canvas, mimeType);
+            if (!blob)
+                throw new Error('Failed to encode image');
+            return {
+                blob,
+                actualSize: blob.size,
+                targetSize,
+                withinTarget: blob.size <= targetSize,
+                quality: 100,
+                format,
+            };
+        }
+        onProgress?.({ phase: 'encoding', percent: 40, message: 'Optimizing compression...' });
+        let low = 0.01;
+        let high = 1.0;
+        let bestQuality = 0.5;
+        let bestBlob = null;
+        let bestDiff = Infinity;
+        const baselineBlob = await canvasToBlob$1(canvas, mimeType, 0.5);
+        if (!baselineBlob)
+            throw new Error('Failed to encode image');
+        if (baselineBlob.size <= targetSize) {
+            low = 0.5;
+            bestBlob = baselineBlob;
+            bestQuality = 0.5;
+            bestDiff = targetSize - baselineBlob.size;
+        }
+        else {
+            high = 0.5;
+            bestBlob = baselineBlob;
+            bestQuality = 0.5;
+            bestDiff = baselineBlob.size - targetSize;
+        }
+        for (let i = 0; i < MAX_BINARY_SEARCH_ITERATIONS; i++) {
+            const mid = (low + high) / 2;
+            const blob = await canvasToBlob$1(canvas, mimeType, mid);
+            if (!blob)
+                break;
+            const diff = Math.abs(blob.size - targetSize);
+            if (diff < bestDiff) {
+                bestDiff = diff;
+                bestBlob = blob;
+                bestQuality = mid;
+            }
+            if (blob.size > targetSize) {
+                high = mid;
+            }
+            else {
+                low = mid;
+            }
+            const progress = 40 + ((i + 1) / MAX_BINARY_SEARCH_ITERATIONS) * 50;
+            onProgress?.({
+                phase: 'encoding',
+                percent: progress,
+                message: `Optimizing... pass ${i + 1}/${MAX_BINARY_SEARCH_ITERATIONS}`,
+            });
+        }
+        if (!bestBlob) {
+            throw new Error('Failed to compress image to target size');
+        }
+        const toleranceBytes = targetSize * (tolerance / 100);
+        const withinTarget = bestBlob.size <= targetSize + toleranceBytes;
+        onProgress?.({ phase: 'complete', percent: 100, message: 'Done' });
+        return {
+            blob: bestBlob,
+            actualSize: bestBlob.size,
+            targetSize,
+            withinTarget,
+            quality: Math.round(bestQuality * 100),
+            format,
+        };
+    }
+    function validateFileSize(file, maxSize) {
+        if (!maxSize) {
+            return { valid: true, size: file.size, message: 'File size check passed' };
+        }
+        const valid = file.size <= maxSize;
+        return {
+            valid,
+            size: file.size,
+            maxSize,
+            message: valid
+                ? 'File size check passed'
+                : `File size (${formatBytes(file.size)}) exceeds limit (${formatBytes(maxSize)})`,
+        };
+    }
+    async function getCompressionPreview(source, format = 'jpeg') {
+        let canvas;
+        if (typeof source === 'string' || source instanceof File) {
+            const img = await loadImage(source);
+            canvas = imageToCanvas(img);
+        }
+        else if (source instanceof HTMLImageElement) {
+            canvas = imageToCanvas(source);
+        }
+        else {
+            canvas = source;
+        }
+        const originalSize = await estimateSize(canvas, 'png', 100);
+        const quality100 = await estimateSize(canvas, format, 100);
+        const quality75 = await estimateSize(canvas, format, 75);
+        const quality50 = await estimateSize(canvas, format, 50);
+        let estimatedSize;
+        let recommendedQuality;
+        if (quality75 <= originalSize * 0.7) {
+            estimatedSize = quality75;
+            recommendedQuality = 75;
+        }
+        else if (quality50 <= originalSize * 0.5) {
+            estimatedSize = quality50;
+            recommendedQuality = 50;
+        }
+        else {
+            estimatedSize = quality100;
+            recommendedQuality = 100;
+        }
+        const estimatedSavingsPercent = originalSize > 0 ? ((originalSize - estimatedSize) / originalSize) * 100 : 0;
+        const recommendedFormat = format === 'png' ? 'webp' : format;
+        return {
+            originalWidth: canvas.width,
+            originalHeight: canvas.height,
+            originalSize,
+            estimatedSize,
+            estimatedSavingsPercent: Math.max(0, Math.round(estimatedSavingsPercent)),
+            recommendedFormat,
+            recommendedQuality,
+        };
+    }
+    async function smartCompress(source, preset = 'web', onProgress) {
+        const config = PRESET_CONFIGS[preset];
+        const options = {
+            format: config.format,
+            quality: config.quality,
+            maxDimension: config.maxDimension,
+            onProgress,
+        };
+        if (preset === 'email') {
+            options.targetSize = 1024 * 1024;
+            options.tolerance = 10;
+        }
+        else if (preset === 'thumbnail') {
+            options.targetSize = 100 * 1024;
+            options.tolerance = 15;
+        }
+        else if (preset === 'web') {
+            options.targetSize = 500 * 1024;
+            options.tolerance = 10;
+        }
+        return compressToTargetSize(source, options);
+    }
+    function resizeCanvasForCompression(canvas, options) {
+        let { width, height } = options;
+        const { maintainAspectRatio } = options;
+        if (!width && !height)
+            return canvas;
+        const aspectRatio = canvas.width / canvas.height;
+        if (maintainAspectRatio) {
+            if (width && !height) {
+                height = Math.round(width / aspectRatio);
+            }
+            else if (!width && height) {
+                width = Math.round(height * aspectRatio);
+            }
+            else {
+                const targetRatio = width / height;
+                if (targetRatio > aspectRatio) {
+                    width = Math.round(height * aspectRatio);
+                }
+                else {
+                    height = Math.round(width / aspectRatio);
+                }
+            }
+        }
+        else {
+            width = width ?? canvas.width;
+            height = height ?? canvas.height;
+        }
+        const resized = document.createElement('canvas');
+        resized.width = width;
+        resized.height = height;
+        const ctx = resized.getContext('2d');
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(canvas, 0, 0, width, height);
+        return resized;
+    }
+    function formatBytes(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+
+    async function createEditor(source) {
+        let img;
+        if (typeof source === 'string' || source instanceof File) {
+            img = await loadImage(source);
+        }
+        else {
+            img = source;
+        }
+        const originalCanvas = imageToCanvas(img);
+        let currentCanvas = originalCanvas;
+        const state = {
+            width: originalCanvas.width,
+            height: originalCanvas.height,
+            layers: [],
+            adjustments: {},
+            filter: 'original',
+            history: [],
+            historyIndex: -1,
+        };
+        function saveState() {
+            state.history = state.history.slice(0, state.historyIndex + 1);
+            state.history.push({
+                ...state,
+                layers: [...state.layers],
+                adjustments: { ...state.adjustments },
+            });
+            state.historyIndex = state.history.length - 1;
+        }
+        function applyAllTransformations() {
+            let canvas = originalCanvas;
+            canvas = applyAdjustments(canvas, state.adjustments);
+            canvas = applyFilter(canvas, state.filter);
+            if (state.layers.length > 0) {
+                const layersCanvas = renderLayersToCanvas(state.layers, state.width, state.height);
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(layersCanvas, 0, 0);
+            }
+            return canvas;
+        }
+        saveState();
+        return {
+            getWidth: () => currentCanvas.width,
+            getHeight: () => currentCanvas.height,
+            getCanvas: () => currentCanvas,
+            crop: (options) => {
+                currentCanvas = cropCanvas(currentCanvas, options);
+                state.width = currentCanvas.width;
+                state.height = currentCanvas.height;
+                saveState();
+            },
+            resize: (options) => {
+                currentCanvas = resizeCanvas(currentCanvas, options);
+                state.width = currentCanvas.width;
+                state.height = currentCanvas.height;
+                saveState();
+            },
+            rotate: (options) => {
+                currentCanvas = rotateCanvas(currentCanvas, options);
+                state.width = currentCanvas.width;
+                state.height = currentCanvas.height;
+                saveState();
+            },
+            flip: (options) => {
+                currentCanvas = flipCanvas(currentCanvas, options);
+                saveState();
+            },
+            adjust: (adjustments) => {
+                state.adjustments = { ...state.adjustments, ...adjustments };
+                currentCanvas = applyAllTransformations();
+                saveState();
+            },
+            applyFilter: (filter) => {
+                state.filter = filter;
+                currentCanvas = applyAllTransformations();
+                saveState();
+            },
+            addLayer: (layer) => {
+                const maxZ = getMaxZIndex(state.layers);
+                layer.zIndex = maxZ + 1;
+                state.layers.push(layer);
+                currentCanvas = applyAllTransformations();
+                saveState();
+            },
+            removeLayer: (layerId) => {
+                state.layers = state.layers.filter((l) => l.id !== layerId);
+                currentCanvas = applyAllTransformations();
+                saveState();
+            },
+            getLayers: () => [...state.layers],
+            export: async (options) => {
+                let blob = await convertImage(currentCanvas, options);
+                if (options.metadata) {
+                    blob = await exportWithMetadata(blob, options.format, options.metadata);
+                }
+                return blob;
+            },
+            compress: async (options) => {
+                const result = await compressToTargetSize(currentCanvas, options);
+                if (options.metadata) {
+                    return exportWithMetadata(result.blob, options.format, options.metadata);
+                }
+                return result.blob;
+            },
+            undo: () => {
+                if (state.historyIndex > 0) {
+                    state.historyIndex--;
+                    const prev = state.history[state.historyIndex];
+                    state.width = prev.width;
+                    state.height = prev.height;
+                    state.layers = [...prev.layers];
+                    state.adjustments = { ...prev.adjustments };
+                    state.filter = prev.filter;
+                    currentCanvas = applyAllTransformations();
+                }
+            },
+            redo: () => {
+                if (state.historyIndex < state.history.length - 1) {
+                    state.historyIndex++;
+                    const next = state.history[state.historyIndex];
+                    state.width = next.width;
+                    state.height = next.height;
+                    state.layers = [...next.layers];
+                    state.adjustments = { ...next.adjustments };
+                    state.filter = next.filter;
+                    currentCanvas = applyAllTransformations();
+                }
+            },
+            canUndo: () => state.historyIndex > 0,
+            canRedo: () => state.historyIndex < state.history.length - 1,
+            reset: () => {
+                currentCanvas = originalCanvas;
+                state.width = originalCanvas.width;
+                state.height = originalCanvas.height;
+                state.layers = [];
+                state.adjustments = {};
+                state.filter = 'original';
+                state.history = [];
+                state.historyIndex = -1;
+                saveState();
+            },
+        };
+    }
+
+    function createZoomState() {
+        return { zoom: 1, panX: 0, panY: 0 };
+    }
+    function zoomIn(state, step) {
+        const s = step ?? 0.25;
+        const newZoom = Math.min(state.zoom + s, 5);
+        return { ...state, zoom: newZoom };
+    }
+    function zoomOut(state, step) {
+        const s = step ?? 0.25;
+        const newZoom = Math.max(state.zoom - s, 0.1);
+        return { ...state, zoom: newZoom };
+    }
+    function zoomToFit(_state, canvasWidth, canvasHeight, containerWidth, containerHeight) {
+        const scaleX = containerWidth / canvasWidth;
+        const scaleY = containerHeight / canvasHeight;
+        const zoom = Math.min(scaleX, scaleY) * 0.9;
+        return {
+            zoom: Math.max(0.1, Math.min(zoom, 5)),
+            panX: 0,
+            panY: 0,
+        };
+    }
+    function zoomTo100(_state, canvasWidth, canvasHeight, containerWidth, containerHeight) {
+        return {
+            zoom: 1,
+            panX: (containerWidth - canvasWidth) / 2,
+            panY: (containerHeight - canvasHeight) / 2,
+        };
+    }
+    function pan(state, deltaX, deltaY) {
+        return {
+            ...state,
+            panX: state.panX + deltaX,
+            panY: state.panY + deltaY,
+        };
+    }
+    function zoomAtPoint(state, delta, clientX, clientY, containerRect) {
+        const factor = delta > 0 ? 1.1 : 0.9;
+        const newZoom = Math.max(0.1, Math.min(state.zoom * factor, 5));
+        const mouseX = clientX - containerRect.left;
+        const mouseY = clientY - containerRect.top;
+        const zoomRatio = newZoom / state.zoom;
+        const newPanX = mouseX - (mouseX - state.panX) * zoomRatio;
+        const newPanY = mouseY - (mouseY - state.panY) * zoomRatio;
+        return {
+            zoom: newZoom,
+            panX: newPanX,
+            panY: newPanY,
+        };
+    }
+    function getCanvasTransform(state) {
+        return `translate(${state.panX}px, ${state.panY}px) scale(${state.zoom})`;
+    }
+
+    const EXPORT_PRESETS = [
+        { name: 'instagram-post', label: 'Instagram Post', width: 1080, height: 1080, category: 'Instagram' },
+        { name: 'instagram-story', label: 'Instagram Story', width: 1080, height: 1920, category: 'Instagram' },
+        { name: 'instagram-reel', label: 'Instagram Reel', width: 1080, height: 1920, category: 'Instagram' },
+        { name: 'twitter-post', label: 'Twitter/X Post', width: 1200, height: 675, category: 'Twitter' },
+        { name: 'twitter-header', label: 'Twitter/X Header', width: 1500, height: 500, category: 'Twitter' },
+        { name: 'facebook-post', label: 'Facebook Post', width: 1200, height: 630, category: 'Facebook' },
+        { name: 'facebook-cover', label: 'Facebook Cover', width: 820, height: 312, category: 'Facebook' },
+        { name: 'youtube-thumbnail', label: 'YouTube Thumbnail', width: 1280, height: 720, category: 'YouTube' },
+        { name: 'youtube-banner', label: 'YouTube Banner', width: 2560, height: 1440, category: 'YouTube' },
+        { name: 'linkedin-post', label: 'LinkedIn Post', width: 1200, height: 627, category: 'LinkedIn' },
+        { name: 'linkedin-cover', label: 'LinkedIn Cover', width: 1584, height: 396, category: 'LinkedIn' },
+        { name: 'pinterest-pin', label: 'Pinterest Pin', width: 1000, height: 1500, category: 'Pinterest' },
+        { name: 'tiktok', label: 'TikTok', width: 1080, height: 1920, category: 'TikTok' },
+    ];
+    function getExportPreset(name) {
+        return EXPORT_PRESETS.find((p) => p.name === name);
+    }
+    function getPresetsByCategory() {
+        return EXPORT_PRESETS.reduce((acc, preset) => {
+            if (!acc[preset.category]) {
+                acc[preset.category] = [];
+            }
+            acc[preset.category].push(preset);
+            return acc;
+        }, {});
+    }
+
+    let worker = null;
+    let messageId = 0;
+    const pendingMessages = new Map();
+    function getWorker() {
+        if (typeof Worker === 'undefined')
+            return null;
+        if (!worker) {
+            try {
+                const workerCode = `
+        self.onmessage = function(e) {
+          const { id, type, payload } = e.data;
+          
+          try {
+            let result;
+            
+            switch (type) {
+              case 'resize': {
+                const { imageData, width, height } = payload;
+                const canvas = new OffscreenCanvas(width, height);
+                const ctx = canvas.getContext('2d');
+                const imgData = new ImageData(
+                  new Uint8ClampedArray(imageData.data),
+                  imageData.width,
+                  imageData.height
+                );
+                const tempCanvas = new OffscreenCanvas(imageData.width, imageData.height);
+                const tempCtx = tempCanvas.getContext('2d');
+                tempCtx.putImageData(imgData, 0, 0);
+                ctx.imageSmoothingEnabled = true;
+                ctx.imageSmoothingQuality = 'high';
+                ctx.drawImage(tempCanvas, 0, 0, width, height);
+                result = ctx.getImageData(0, 0, width, height);
+                break;
+              }
+              
+              case 'adjust': {
+                const { imageData: imgData2, adjustments } = payload;
+                const data = new Uint8ClampedArray(imgData2.data);
+                const { brightness = 0, contrast = 0, saturation = 0 } = adjustments;
+                
+                const brightnessValue = brightness / 100;
+                const contrastValue = (contrast + 100) / 100;
+                const saturationValue = (saturation + 100) / 100;
+                
+                for (let i = 0; i < data.length; i += 4) {
+                  let r = data[i] + brightnessValue * 255;
+                  let g = data[i + 1] + brightnessValue * 255;
+                  let b = data[i + 2] + brightnessValue * 255;
+                  
+                  r = ((r / 255 - 0.5) * contrastValue + 0.5) * 255;
+                  g = ((g / 255 - 0.5) * contrastValue + 0.5) * 255;
+                  b = ((b / 255 - 0.5) * contrastValue + 0.5) * 255;
+                  
+                  const gray = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+                  r = r + (gray - r) * (1 - saturationValue);
+                  g = g + (gray - g) * (1 - saturationValue);
+                  b = b + (gray - b) * (1 - saturationValue);
+                  
+                  data[i] = Math.max(0, Math.min(255, r));
+                  data[i + 1] = Math.max(0, Math.min(255, g));
+                  data[i + 2] = Math.max(0, Math.min(255, b));
+                }
+                
+                result = { data: data.buffer, width: imgData2.width, height: imgData2.height };
+                break;
+              }
+              
+              default:
+                throw new Error('Unknown operation: ' + type);
+            }
+            
+            self.postMessage({ id, type: 'result', payload: result });
+          } catch (err) {
+            self.postMessage({ id, type: 'error', error: err.message });
+          }
+        };
+      `;
+                const blob = new Blob([workerCode], { type: 'application/javascript' });
+                worker = new Worker(URL.createObjectURL(blob));
+                worker.onmessage = (e) => {
+                    const { id, type, payload, error } = e.data;
+                    const pending = pendingMessages.get(id);
+                    if (pending) {
+                        pendingMessages.delete(id);
+                        if (type === 'error') {
+                            pending.reject(new Error(error));
+                        }
+                        else {
+                            pending.resolve(payload);
+                        }
+                    }
+                };
+                worker.onerror = (e) => {
+                    console.error('Worker error:', e);
+                };
+            }
+            catch {
+                return null;
+            }
+        }
+        return worker;
+    }
+    function isWorkerSupported() {
+        return typeof Worker !== 'undefined' && typeof OffscreenCanvas !== 'undefined';
+    }
+    async function processInWorker(operation) {
+        const w = getWorker();
+        if (!w) {
+            throw new Error('Web Worker not supported');
+        }
+        const id = `msg_${++messageId}`;
+        return new Promise((resolve, reject) => {
+            pendingMessages.set(id, { resolve, reject });
+            w.postMessage({ id, ...operation });
+        });
+    }
+    function terminateWorker() {
+        if (worker) {
+            worker.terminate();
+            worker = null;
+            pendingMessages.clear();
+        }
+    }
+
+    const DRP_NAME = 'Digital Resolution Pro';
+    const DRP_VERSION = '1.0.0';
+    const DRP_TAG = 'drp';
+    function getDRPVersion() {
+        return DRP_VERSION;
+    }
+    function getDRPInfo() {
+        return { name: DRP_NAME, version: DRP_VERSION, tag: DRP_TAG };
+    }
+    function getDRPFilename(originalName, format) {
+        const baseName = originalName.replace(/\.[^/.]+$/, '');
+        const ext = format ? getExtension(format) : '.' + originalName.split('.').pop();
+        return `${baseName}-${DRP_TAG}${ext}`;
+    }
+    function isDRPFile(filename) {
+        const pattern = new RegExp(`-${DRP_TAG}\\.[^.]+$`);
+        return pattern.test(filename);
+    }
+    function stripDRPTag(filename) {
+        return filename.replace(new RegExp(`-${DRP_TAG}(\\.[^.]+)$`), '$1');
+    }
+
+    async function batchProcess(files, operation, onProgress) {
+        const results = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            onProgress?.({
+                current: i + 1,
+                total: files.length,
+                file,
+                phase: 'processing',
+            });
+            try {
+                let blob;
+                switch (operation.type) {
+                    case 'convert':
+                        blob = await convertImage(file, operation.options);
+                        break;
+                    case 'resize': {
+                        const canvas = await resizeImage(file, {
+                            width: operation.options?.width,
+                            height: operation.options?.height,
+                            maintainAspectRatio: operation.options?.maintainAspectRatio,
+                        });
+                        blob = await convertImage(canvas, {
+                            format: operation.options?.format || 'png',
+                            quality: operation.options?.quality,
+                        });
+                        break;
+                    }
+                    case 'filter': {
+                        const img = await resizeImage(file, { width: 800, maintainAspectRatio: true });
+                        const filtered = applyFilter(img, operation.options?.preset || 'original');
+                        blob = await convertImage(filtered, {
+                            format: operation.options?.format || 'png',
+                            quality: operation.options?.quality,
+                        });
+                        break;
+                    }
+                    case 'compress': {
+                        const result = await compressToTargetSize(file, {
+                            format: operation.options?.format || 'webp',
+                            targetSize: operation.options?.targetSize,
+                            tolerance: operation.options?.tolerance,
+                            maxFileSize: operation.options?.maxFileSize,
+                            maxDimension: operation.options?.maxDimension,
+                            quality: operation.options?.quality,
+                            width: operation.options?.width,
+                            height: operation.options?.height,
+                            maintainAspectRatio: operation.options?.maintainAspectRatio,
+                        });
+                        blob = result.blob;
+                        break;
+                    }
+                    default:
+                        throw new Error(`Unknown operation: ${operation.type}`);
+                }
+                results.push({ file, blob, success: true });
+            }
+            catch (error) {
+                results.push({
+                    file,
+                    blob: new Blob(),
+                    success: false,
+                    error: error instanceof Error ? error.message : 'Unknown error',
+                });
+            }
+        }
+        onProgress?.({
+            current: files.length,
+            total: files.length,
+            file: files[files.length - 1],
+            phase: 'complete',
+        });
+        return results;
+    }
+    function downloadBatchResult(result) {
+        if (!result.success)
+            return;
+        const url = URL.createObjectURL(result.blob);
+        const a = document.createElement('a');
+        a.href = url;
+        const ext = result.file.name.split('.').pop() || 'png';
+        a.download = getDRPFilename(result.file.name, ext);
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    async function downloadAllBatchResults(results) {
+        for (const result of results) {
+            if (result.success) {
+                downloadBatchResult(result);
+                await new Promise((r) => setTimeout(r, 100));
+            }
+        }
+    }
+
+    function parseSize(input) {
+        if (typeof input === 'number')
+            return input;
+        const str = input.trim().toUpperCase();
+        const match = str.match(/^([\d.]+)\s*(B|KB|MB|GB)$/);
+        if (!match)
+            throw new Error(`Invalid size format: "${input}". Use "500KB", "2MB", etc.`);
+        const value = parseFloat(match[1]);
+        const unit = match[2];
+        switch (unit) {
+            case 'B': return value;
+            case 'KB': return value * 1024;
+            case 'MB': return value * 1024 * 1024;
+            case 'GB': return value * 1024 * 1024 * 1024;
+            default: return value;
+        }
+    }
+    function parseFlip(input) {
+        if (input === true)
+            return { horizontal: true };
+        if (input === false)
+            return {};
+        switch (input) {
+            case 'horizontal': return { horizontal: true };
+            case 'vertical': return { vertical: true };
+            case 'both': return { horizontal: true, vertical: true };
+            default: return {};
+        }
+    }
+    function normalizeCrop(crop) {
+        return {
+            x: crop.x,
+            y: crop.y,
+            width: 'width' in crop ? crop.width : crop.width,
+            height: 'height' in crop ? crop.height : crop.height,
+        };
+    }
+    async function process(source, options = {}) {
+        const { format = 'webp', quality = 80, targetSize, tolerance = 10, width, height, maintainAspectRatio = true, crop: cropOpts, rotate: rotateDeg, flip: flipOpts, filter: filterPreset, adjustments: adjOpts, metadata: metaOpts, onProgress, } = options;
+        onProgress?.({ phase: 'loading', percent: 0, message: 'Loading image...' });
+        let canvas;
+        if (source instanceof Blob && !(source instanceof File)) {
+            const url = URL.createObjectURL(source);
+            const img = await loadImage(url);
+            URL.revokeObjectURL(url);
+            canvas = imageToCanvas(img);
+        }
+        else if (typeof source === 'string' || source instanceof File) {
+            const img = await loadImage(source);
+            canvas = imageToCanvas(img);
+        }
+        else if (source instanceof HTMLImageElement) {
+            canvas = imageToCanvas(source);
+        }
+        else if (source instanceof HTMLCanvasElement) {
+            canvas = source;
+        }
+        else {
+            throw new Error('DRP: Invalid source. Provide a File, Blob, URL string, HTMLImageElement, or HTMLCanvasElement.');
+        }
+        canvas.width;
+        canvas.height;
+        let step = 0;
+        const totalSteps = [cropOpts, width || height, rotateDeg, flipOpts, adjOpts, filterPreset, true].filter(Boolean).length;
+        function progress(phase, msg) {
+            step++;
+            onProgress?.({ phase, percent: Math.round((step / totalSteps) * 80), message: msg });
+        }
+        if (cropOpts) {
+            progress('processing', 'Cropping...');
+            canvas = await cropImage(canvas, normalizeCrop(cropOpts));
+        }
+        if (width || height) {
+            progress('processing', 'Resizing...');
+            canvas = await resizeImage(canvas, {
+                width,
+                height,
+                maintainAspectRatio,
+            });
+        }
+        if (rotateDeg) {
+            progress('processing', 'Rotating...');
+            canvas = await rotateImage(canvas, { degrees: rotateDeg });
+        }
+        if (flipOpts) {
+            progress('processing', 'Flipping...');
+            canvas = await flipImage(canvas, parseFlip(flipOpts));
+        }
+        if (adjOpts) {
+            progress('processing', 'Adjusting...');
+            canvas = applyAdjustments(canvas, adjOpts);
+        }
+        if (filterPreset && filterPreset !== 'original') {
+            progress('processing', 'Applying filter...');
+            canvas = applyFilter(canvas, filterPreset);
+        }
+        onProgress?.({ phase: 'encoding', percent: 80, message: 'Encoding...' });
+        let blob;
+        let actualQuality = quality;
+        let actualFormat = format;
+        if (targetSize) {
+            const targetBytes = parseSize(targetSize);
+            const result = await compressToTargetSize(canvas, {
+                format,
+                quality,
+                targetSize: targetBytes,
+                tolerance,
+                onProgress: onProgress
+                    ? (e) => onProgress({ ...e, percent: 80 + Math.round(e.percent * 0.2) })
+                    : undefined,
+            });
+            blob = result.blob;
+            actualQuality = result.quality;
+            actualFormat = result.format;
+        }
+        else {
+            const mimeType = getMimeTypeForFormat(format);
+            const q = quality / 100;
+            let encoded;
+            if (format === 'png' || format === 'bmp' || format === 'gif') {
+                encoded = await canvasToBlob(canvas, mimeType);
+            }
+            else {
+                encoded = await canvasToBlob(canvas, mimeType, q);
+            }
+            if (!encoded) {
+                throw new Error(`DRP: Failed to encode to ${format}`);
+            }
+            blob = encoded;
+        }
+        if (metaOpts && (metaOpts.preserve || metaOpts.custom)) {
+            blob = await exportWithMetadata(blob, actualFormat, metaOpts);
+        }
+        onProgress?.({ phase: 'complete', percent: 100, message: 'Done' });
+        return {
+            blob,
+            size: blob.size,
+            format: actualFormat,
+            quality: actualQuality,
+            width: canvas.width,
+            height: canvas.height,
+        };
+    }
+    function getMimeTypeForFormat(format) {
+        const map = {
+            jpeg: 'image/jpeg',
+            png: 'image/png',
+            webp: 'image/webp',
+            avif: 'image/avif',
+            gif: 'image/gif',
+            bmp: 'image/bmp',
+        };
+        return map[format] || 'image/webp';
+    }
+    function canvasToBlob(canvas, mimeType, quality) {
+        return new Promise((resolve) => {
+            canvas.toBlob(resolve, mimeType, quality);
+        });
+    }
+    function DRP(source, options) {
+        return process(source, options);
+    }
+    DRP.process = process;
+    DRP.version = () => VERSION;
+    DRP.formats = () => ['jpeg', 'png', 'webp', 'avif', 'gif', 'bmp'];
+    DRP.filters = () => [
+        'original', 'vintage', 'blackAndWhite', 'warm', 'cool',
+        'cinematic', 'fade', 'dramatic', 'soft', 'highContrast',
+    ];
+    DRP.presets = () => EXPORT_PRESETS;
+    DRP.editor = (source) => createEditor(source);
+    DRP.batch = (files, operation, onProgress) => batchProcess(files, operation, onProgress);
+    DRP.validate = (file, maxSize) => validateFileSize(file, maxSize);
+    DRP.preview = (source, format) => getCompressionPreview(source, format);
+    DRP.readMetadata = (source) => readMetadata(source);
+
+    exports.AVAILABLE_FILTERS = AVAILABLE_FILTERS;
+    exports.DRP = DRP;
+    exports.DRP_NAME = DRP_NAME;
+    exports.DRP_TAG = DRP_TAG;
+    exports.DRP_VERSION = DRP_VERSION;
+    exports.EXPORT_PRESETS = EXPORT_PRESETS;
+    exports.VERSION = VERSION;
+    exports.applyAdjustments = applyAdjustments;
+    exports.applyFilter = applyFilter;
+    exports.batchProcess = batchProcess;
+    exports.canvasToImageData = canvasToImageData;
+    exports.compressToTargetSize = compressToTargetSize;
+    exports.convertImage = convertImage;
+    exports.convertToFile = convertToFile;
+    exports.createEditor = createEditor;
+    exports.createImageLayer = createImageLayer;
+    exports.createShapeLayer = createShapeLayer;
+    exports.createTextLayer = createTextLayer;
+    exports.createZoomState = createZoomState;
+    exports.cropCanvas = cropCanvas;
+    exports.cropImage = cropImage;
+    exports.detectFormat = detectFormat;
+    exports.downloadAllBatchResults = downloadAllBatchResults;
+    exports.downloadBatchResult = downloadBatchResult;
+    exports.duplicateLayer = duplicateLayer;
+    exports.exportWithMetadata = exportWithMetadata;
+    exports.flipCanvas = flipCanvas;
+    exports.flipImage = flipImage;
+    exports.generateCustomMetadata = generateCustomMetadata;
+    exports.getCanvasTransform = getCanvasTransform;
+    exports.getCompressionPreview = getCompressionPreview;
+    exports.getDRPFilename = getDRPFilename;
+    exports.getDRPInfo = getDRPInfo;
+    exports.getDRPVersion = getDRPVersion;
+    exports.getExportPreset = getExportPreset;
+    exports.getExtension = getExtension;
+    exports.getFilterConfig = getFilterConfig;
+    exports.getFilterName = getFilterName;
+    exports.getImageInfo = getImageInfo;
+    exports.getMaxZIndex = getMaxZIndex;
+    exports.getMimeType = getMimeType;
+    exports.getPresetsByCategory = getPresetsByCategory;
+    exports.getSupportedFormats = getSupportedFormats;
+    exports.imageDataToCanvas = imageDataToCanvas;
+    exports.imageToCanvas = imageToCanvas;
+    exports.isDRPFile = isDRPFile;
+    exports.isFormatSupported = isFormatSupported;
+    exports.isWorkerSupported = isWorkerSupported;
+    exports.loadImage = loadImage;
+    exports.moveLayerDown = moveLayerDown;
+    exports.moveLayerUp = moveLayerUp;
+    exports.pan = pan;
+    exports.processInWorker = processInWorker;
+    exports.readMetadata = readMetadata;
+    exports.removeMetadata = removeMetadata;
+    exports.renderLayersToCanvas = renderLayersToCanvas;
+    exports.resizeCanvas = resizeCanvas;
+    exports.resizeImage = resizeImage;
+    exports.rotateCanvas = rotateCanvas;
+    exports.rotateImage = rotateImage;
+    exports.smartCompress = smartCompress;
+    exports.sortLayersByZIndex = sortLayersByZIndex;
+    exports.stripDRPTag = stripDRPTag;
+    exports.terminateWorker = terminateWorker;
+    exports.validateFile = validateFile;
+    exports.validateFileSize = validateFileSize;
+    exports.zoomAtPoint = zoomAtPoint;
+    exports.zoomIn = zoomIn;
+    exports.zoomOut = zoomOut;
+    exports.zoomTo100 = zoomTo100;
+    exports.zoomToFit = zoomToFit;
+
+    return exports;
+
+})({});