@bensitu/image-editor 1.3.0 → 1.4.0

package/src/image-editor.js

@@ -1,7 +1,7 @@
 /**
  * @file image-editor.js
  * @module image-editor
- * @version 1.3.0
+ * @version 1.4.0
  * @author Ben Situ
  * @license MIT
  * @description Lightweight canvas-based image editor with masking/transform/export support.
@@ -196,6 +196,8 @@ function ensureFabric() {
                 downsampleMaxWidth: 4000,
                 downsampleMaxHeight: 3000,
                 downsampleQuality: 0.92,
+                preserveSourceFormat: true,
+                downsampleMimeType: null,
                 imageLoadTimeoutMs: 30000,
 
                 exportMultiplier: 1,
@@ -255,6 +257,7 @@ function ensureFabric() {
             this.maxHistorySize = 50;
 
             this._handlersByElementKey = {};
+            this._elementCache = {};
 
             this._lastMask = null;
             this._lastMaskInitialLeft = null;
@@ -267,8 +270,14 @@ function ensureFabric() {
             this._cropHandlers = [];
             this._cropPrevEvented = null;
             this._prevSelectionSetting = undefined;
-            this._containerOriginalOverflow = undefined;
+            this._containerOriginalOverflow = null;
+            this._lastContainerViewportSize = null;
+            this._canvasElementOriginalStyle = null;
+            this._visibilityStateByElement = new WeakMap();
             this._scrollbarSizeCache = null;
+            this._activeAnimationRejectors = new Set();
+            this._disposed = false;
+            this._initialized = false;
 
             this.onImageLoaded = typeof options.onImageLoaded === 'function' ? options.onImageLoaded : null;
 
@@ -341,6 +350,16 @@ function ensureFabric() {
          */
         init(idMap = {}) {
             if (!this._fabricLoaded) return;
+            if (this._initialized || this.canvas) this.dispose();
+            this._disposed = false;
+            this._initialized = true;
+            this.animationQueue = new AnimationQueue();
+            this.historyManager = new HistoryManager(this.maxHistorySize);
+            this._visibilityStateByElement = new WeakMap();
+            this._activeAnimationRejectors = new Set();
+            this._containerOriginalOverflow = null;
+            this._lastContainerViewportSize = null;
+            this._canvasElementOriginalStyle = null;
 
             const defaults = {
                 canvas: 'fabricCanvas',
@@ -369,6 +388,7 @@ function ensureFabric() {
             };
 
             this.elements = { ...defaults, ...idMap };
+            this._elementCache = {};
 
             this._initCanvas();
             this._bindEvents();
@@ -413,19 +433,25 @@ function ensureFabric() {
          * @private
          */
         _initCanvas() {
-            const canvasElement = document.getElementById(this.elements.canvas);
+            const canvasElement = this._getElement('canvas');
             if (!canvasElement) throw new Error('Canvas is not found: ' + this.elements.canvas);
             this.canvasElement = canvasElement;
+            this._canvasElementOriginalStyle = {
+                display: canvasElement.style.display || '',
+                width: canvasElement.style.width || '',
+                height: canvasElement.style.height || '',
+                maxWidth: canvasElement.style.maxWidth || ''
+            };
 
             // Decide which element acts as the viewport for size fallback and scrolling.
             if (this.elements.canvasContainer) {
-                const containerElement = document.getElementById(this.elements.canvasContainer);
+                const containerElement = this._getElement('canvasContainer');
                 this.containerElement = containerElement || canvasElement.parentElement;
             } else {
                 this.containerElement = canvasElement.parentElement;
             }
 
-            this.placeholderElement = document.getElementById(this.elements.imgPlaceholder) || null;
+            this.placeholderElement = this._getElement('imgPlaceholder') || null;
 
             // Prefer a measured container size when it is available.
             let initialWidth = this.options.canvasWidth;
@@ -436,6 +462,11 @@ function ensureFabric() {
                 if (containerWidth > 0 && containerHeight > 0) {
                     initialWidth = containerWidth;
                     initialHeight = containerHeight;
+
+                    this._lastContainerViewportSize = {
+                        width: containerWidth,
+                        height: containerHeight
+                    };
                 }
             }
 
@@ -460,6 +491,24 @@ function ensureFabric() {
             this.canvasElement.style.display = 'block';
         }
 
+        /**
+         * Returns a configured DOM element and caches lookups for hot UI paths.
+         *
+         * @param {string} key - Key in the configured element map.
+         * @returns {HTMLElement|null} The configured element, or null when missing.
+         * @private
+         */
+        _getElement(key) {
+            const id = this.elements && this.elements[key];
+            if (!id) return null;
+            if (this._elementCache && Object.prototype.hasOwnProperty.call(this._elementCache, key)) {
+                return this._elementCache[key];
+            }
+            const element = document.getElementById(id);
+            if (this._elementCache) this._elementCache[key] = element || null;
+            return element || null;
+        }
+
         /**
          * Records a history entry after Fabric finishes modifying one or more masks.
          *
@@ -504,9 +553,7 @@ function ensureFabric() {
          */
         _syncContainerOverflow(options = {}) {
             if (!this.containerElement || !this.containerElement.style) return;
-            if (this._containerOriginalOverflow === undefined) {
-                this._containerOriginalOverflow = this.containerElement.style.overflow || '';
-            }
+            this._captureContainerOverflowState();
 
             const shouldPreserveScroll = options.preserveScroll === true;
             if (this.options.coverImageToCanvas) {
@@ -522,10 +569,26 @@ function ensureFabric() {
                     this.containerElement.scrollTop = 0;
                 }
             } else {
-                this.containerElement.style.overflow = this._containerOriginalOverflow;
+                this._restoreContainerOverflowState();
             }
         }
 
+        _captureContainerOverflowState() {
+            if (!this.containerElement || !this.containerElement.style || this._containerOriginalOverflow) return;
+            this._containerOriginalOverflow = {
+                overflow: this.containerElement.style.overflow || '',
+                overflowX: this.containerElement.style.overflowX || '',
+                overflowY: this.containerElement.style.overflowY || ''
+            };
+        }
+
+        _restoreContainerOverflowState() {
+            if (!this.containerElement || !this.containerElement.style || !this._containerOriginalOverflow) return;
+            this.containerElement.style.overflow = this._containerOriginalOverflow.overflow;
+            this.containerElement.style.overflowX = this._containerOriginalOverflow.overflowX;
+            this.containerElement.style.overflowY = this._containerOriginalOverflow.overflowY;
+        }
+
         /** 
          * DOM / UI bindings
          * @private
@@ -533,54 +596,61 @@ function ensureFabric() {
         _bindEvents() {
             // Click anywhere on the upload area opens the native file dialog
             this._bindIfExists('uploadArea', 'click', () => {
-                const uploadAreaElement = document.getElementById(this.elements.uploadArea);
+                const uploadAreaElement = this._getElement('uploadArea');
                 if (this._isElementDisabled(uploadAreaElement)) return;
-                document.getElementById(this.elements.imageInput)?.click();
+                this._getElement('imageInput')?.click();
             });
             // File-input change
             this._bindIfExists('imageInput', 'change', (event) => {
                 const file = event.target.files && event.target.files[0];
-                if (file) this._loadImageFile(file);
+                if (file) {
+                    this._loadImageFile(file)
+                        .catch(error => this._reportError('Image file could not be loaded', error))
+                        .finally(() => {
+                            event.target.value = '';
+                        });
+                }
             });
             // Zoom & reset
-            this._bindIfExists('zoomInBtn', 'click', () => this.scaleImage(this.currentScale + this.options.scaleStep));
-            this._bindIfExists('zoomOutBtn', 'click', () => this.scaleImage(this.currentScale - this.options.scaleStep));
-            this._bindIfExists('resetBtn', 'click', () => { this.resetImageTransform(); });
+            this._bindIfExists('zoomInBtn', 'click', () => this.scaleImage(this.currentScale + this.options.scaleStep).catch(error => this._reportError('scaleImage failed', error)));
+            this._bindIfExists('zoomOutBtn', 'click', () => this.scaleImage(this.currentScale - this.options.scaleStep).catch(error => this._reportError('scaleImage failed', error)));
+            this._bindIfExists('resetBtn', 'click', () => { this.resetImageTransform().catch(error => this._reportError('resetImageTransform failed', error)); });
             // Mask management
             this._bindIfExists('addMaskBtn', 'click', () => this.createMask());
             this._bindIfExists('removeMaskBtn', 'click', () => this.removeSelectedMask());
             this._bindIfExists('removeAllMasksBtn', 'click', () => this.removeAllMasks());
             // Merge + download
-            this._bindIfExists('mergeBtn', 'click', () => this.mergeMasks());
+            this._bindIfExists('mergeBtn', 'click', () => this.mergeMasks().catch(error => this._reportError('merge error', error)));
             this._bindIfExists('downloadBtn', 'click', () => this.downloadImage());
             // Undo + Redo
-            this._bindIfExists('undoBtn', 'click', () => this.undo());
-            this._bindIfExists('redoBtn', 'click', () => this.redo());
+            this._bindIfExists('undoBtn', 'click', () => this.undo().catch(error => this._reportError('undo failed', error)));
+            this._bindIfExists('redoBtn', 'click', () => this.redo().catch(error => this._reportError('redo failed', error)));
 
             // Rotation buttons (step can be overridden by two input fields)
             this._bindIfExists('rotateLeftBtn', 'click', () => {
-                const rotationInputElement = document.getElementById(this.elements.rotationLeftInput);
+                const rotationInputElement = this._getElement('rotationLeftInput');
                 let step = this.options.rotationStep;
                 if (rotationInputElement) {
                     const parsedStep = parseFloat(rotationInputElement.value);
                     if (!isNaN(parsedStep)) step = parsedStep;
                 }
-                this.rotateImage(this.currentRotation - step);
+                this.rotateImage(this.currentRotation - step).catch(error => this._reportError('rotateImage failed', error));
             });
             this._bindIfExists('rotateRightBtn', 'click', () => {
-                const rotationInputElement = document.getElementById(this.elements.rotationRightInput);
+                const rotationInputElement = this._getElement('rotationRightInput');
                 let step = this.options.rotationStep;
                 if (rotationInputElement) {
                     const parsedStep = parseFloat(rotationInputElement.value);
                     if (!isNaN(parsedStep)) step = parsedStep;
                 }
-                this.rotateImage(this.currentRotation + step);
+                this.rotateImage(this.currentRotation + step).catch(error => this._reportError('rotateImage failed', error));
             });
 
             // Crop bindings (optional: bound only if element IDs exist in elements)
             this._bindIfExists('cropBtn', 'click', () => this.enterCropMode());
             this._bindIfExists('applyCropBtn', 'click', () => { this.applyCrop().catch(error => this._reportError('applyCrop failed', error)); });
             this._bindIfExists('cancelCropBtn', 'click', () => this.cancelCrop());
+            this._bindIfExists('maskList', 'click', (event) => this._handleMaskListClick(event));
         }
 
         /**
@@ -592,7 +662,7 @@ function ensureFabric() {
          * @private
          */
         _bindIfExists(key, eventName, handler) {
-            const element = document.getElementById(this.elements[key]);
+            const element = this._getElement(key);
             if (element) {
                 element.addEventListener(eventName, handler);
                 this._handlersByElementKey = this._handlersByElementKey || {};
@@ -605,14 +675,37 @@ function ensureFabric() {
          * Reads an image File as a data URL and loads it into the Fabric canvas.
          *
          * @param {File} file - Image file selected by the user.
+         * @returns {Promise<void>} Resolves after the selected file is loaded.
          * @private
          */
         _loadImageFile(file) {
-            if (!file || !file.type.startsWith('image/')) return;
-            const reader = new FileReader();
-            reader.onload = (event) => this.loadImage(event.target.result);
-            reader.onerror = (event) => { this._reportError('Image file could not be read', event); };
-            reader.readAsDataURL(file);
+            if (!this._isSupportedImageFile(file)) {
+                const error = new Error('Selected file is not a supported image');
+                this._reportError('Selected file is not a supported image', error);
+                return Promise.reject(error);
+            }
+
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    this.loadImage(event.target.result)
+                        .then(resolve)
+                        .catch(reject);
+                };
+                reader.onerror = (event) => {
+                    const error = new Error('Image file could not be read');
+                    this._reportError('Image file could not be read', event);
+                    reject(error);
+                };
+                reader.readAsDataURL(file);
+            });
+        }
+
+        _isSupportedImageFile(file) {
+            if (!file) return false;
+            if (typeof file.type === 'string' && file.type.startsWith('image/')) return true;
+            const fileName = String(file.name || '');
+            return /\.(avif|bmp|gif|jpe?g|png|webp)$/i.test(fileName);
         }
 
         /**
@@ -645,120 +738,113 @@ function ensureFabric() {
          */
         async loadImage(imageBase64, options = {}) {
             if (!this._fabricLoaded) return;
-            if (!this.canvas) return;
+            if (!this.canvas || this._disposed) return;
             if (!imageBase64 || typeof imageBase64 !== 'string' || !imageBase64.startsWith('data:image/')) return;
+            this._assertIdleForOperation('loadImage');
 
             this._warnOnImageLayoutOptionConflict();
-            this._setPlaceholderVisible(false);
-            this._syncContainerOverflow({ preserveScroll: options.preserveScroll === true });
-
-            const imageElement = await this._createImageElement(imageBase64);
-
-            let loadSource = imageBase64;
-            if (this.options.downsampleOnLoad) {
-                const shouldResize =
-                    imageElement.naturalWidth > this.options.downsampleMaxWidth ||
-                    imageElement.naturalHeight > this.options.downsampleMaxHeight;
-                if (shouldResize) {
-                    const ratio = Math.min(
-                        this.options.downsampleMaxWidth / imageElement.naturalWidth,
-                        this.options.downsampleMaxHeight / imageElement.naturalHeight
-                    );
-                    const targetWidth = Math.round(imageElement.naturalWidth * ratio);
-                    const targetHeight = Math.round(imageElement.naturalHeight * ratio);
-                    loadSource = this._resampleImageToDataURL(imageElement, targetWidth, targetHeight, this.options.downsampleQuality);
+            const transaction = this._captureLoadImageTransaction();
+
+            try {
+                const imageElement = await this._createImageElement(imageBase64);
+                if (this._disposed || !this.canvas) throw new Error('Editor was disposed while loading image');
+
+                let loadSource = imageBase64;
+                if (this.options.downsampleOnLoad) {
+                    const shouldResize =
+                        imageElement.naturalWidth > this.options.downsampleMaxWidth ||
+                        imageElement.naturalHeight > this.options.downsampleMaxHeight;
+                    if (shouldResize) {
+                        const ratio = Math.min(
+                            this.options.downsampleMaxWidth / imageElement.naturalWidth,
+                            this.options.downsampleMaxHeight / imageElement.naturalHeight
+                        );
+                        const targetWidth = Math.round(imageElement.naturalWidth * ratio);
+                        const targetHeight = Math.round(imageElement.naturalHeight * ratio);
+                        loadSource = this._resampleImageToDataURL(
+                            imageElement,
+                            targetWidth,
+                            targetHeight,
+                            this.options.downsampleQuality,
+                            imageBase64
+                        );
+                    }
                 }
-            }
 
-            // Create fabric.Image from URL
-            return new Promise((resolve, reject) => {
-                fabric.Image.fromURL(loadSource, (fabricImage) => {
-                    try {
-                        if (!fabricImage) throw new Error('Image could not be loaded');
-
-                        this.canvas.discardActiveObject();
-                        this._hideAllMaskLabels();
-                        this.canvas.clear();
-                        this.canvas.setBackgroundColor(this.options.backgroundColor, this.canvas.renderAll.bind(this.canvas));
-
-                        fabricImage.set({ originX: 'left', originY: 'top', selectable: false, evented: false });
-
-                        const imageWidth = fabricImage.width;
-                        const imageHeight = fabricImage.height;
-
-                        const viewport = this._getContainerViewportSize();
-                        const minWidth = viewport.width;
-                        const minHeight = viewport.height;
-
-                        if (this.options.fitImageToCanvas) {
-                            // Fit into the visible viewport, shrinking only when the image is larger.
-                            const canvasWidth = Math.max(1, minWidth - 1);
-                            const canvasHeight = Math.max(1, minHeight - 1);
-                            this._setCanvasSizeInt(canvasWidth, canvasHeight);
-                            const fitScale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight, 1);
-                            fabricImage.set({ left: 0, top: 0 });
-                            fabricImage.scale(fitScale);
-                            this.baseImageScale = fabricImage.scaleX || 1;
-                        } else if (this.options.coverImageToCanvas) {
-                            const layout = this._calculateCoverCanvasLayout(imageWidth, imageHeight);
-                            this._setCanvasSizeInt(layout.canvasWidth, layout.canvasHeight);
-                            fabricImage.set({ left: 0, top: 0 });
-                            fabricImage.scale(layout.scale);
-                            this.baseImageScale = fabricImage.scaleX || 1;
-                        } else if (this.options.expandCanvasToImage) {
-                            // Expand canvas so that it fully contains the image
-                            const canvasWidth = Math.max(minWidth, Math.floor(imageWidth));
-                            const canvasHeight = Math.max(minHeight, Math.floor(imageHeight));
-                            this._setCanvasSizeInt(canvasWidth, canvasHeight);
-                            fabricImage.set({ left: 0, top: 0 });
-                            fabricImage.scale(1);
-                            this.baseImageScale = 1;
-                        } else {
-                            // Keep existing canvas size and center the image
-                            const canvasWidth = Math.max(this.options.canvasWidth, minWidth);
-                            const canvasHeight = Math.max(this.options.canvasHeight, minHeight);
-                            this._setCanvasSizeInt(canvasWidth, canvasHeight);
-                            const fitScale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight, 1);
-                            fabricImage.set({ left: 0, top: 0 });
-                            fabricImage.scale(fitScale);
-                            this.baseImageScale = fabricImage.scaleX || 1;
-                        }
-                        // Put the image onto the canvas
-                        this.originalImage = fabricImage;
-                        this.canvas.add(fabricImage);
-                        this.canvas.sendToBack(fabricImage);
-
-                        // Reset mask placement memory
-                        this._lastMask = null;
-                        this._lastMaskInitialLeft = null;
-                        this._lastMaskInitialTop = null;
-                        this._lastMaskInitialWidth = null;
-
-                        this.maskCounter = 0;
-                        this.currentScale = 1;
-                        this.currentRotation = 0;
-
-                        this._updateInputs();
-                        this._updateMaskList();
-                        this.isImageLoadedToCanvas = true;
-                        this._updateUI();
-                        this.canvas.renderAll();
-                        try {
-                            this._lastSnapshot = this._serializeCanvasState();
-                        } catch (error) {
-                            this._reportWarning('loadImage: failed to capture initial canvas snapshot', error);
-                        }
+                const fabricImage = await this._createFabricImageFromURL(loadSource);
+                if (this._disposed || !this.canvas) throw new Error('Editor was disposed while loading image');
+                
+                this.canvas.discardActiveObject();
+                this._hideAllMaskLabels();
+                this.canvas.clear();
+                this.canvas.setBackgroundColor(this.options.backgroundColor, this.canvas.renderAll.bind(this.canvas));
+
+                fabricImage.set({ originX: 'left', originY: 'top', selectable: false, evented: false });
+                this._setPlaceholderVisible(false);
+                this._syncContainerOverflow({ preserveScroll: options.preserveScroll === true });
+
+                const imageWidth = fabricImage.width;
+                const imageHeight = fabricImage.height;
+
+                const viewport = this._getContainerViewportSize();
+                const minWidth = viewport.width;
+                const minHeight = viewport.height;
+
+                if (this.options.fitImageToCanvas) {
+                    const canvasWidth = Math.max(1, minWidth - 1);
+                    const canvasHeight = Math.max(1, minHeight - 1);
+                    this._setCanvasSizeInt(canvasWidth, canvasHeight);
+                    const fitScale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight, 1);
+                    fabricImage.set({ left: 0, top: 0 });
+                    fabricImage.scale(fitScale);
+                    this.baseImageScale = fabricImage.scaleX || 1;
+                } else if (this.options.coverImageToCanvas) {
+                    const layout = this._calculateCoverCanvasLayout(imageWidth, imageHeight);
+                    this._setCanvasSizeInt(layout.canvasWidth, layout.canvasHeight);
+                    fabricImage.set({ left: 0, top: 0 });
+                    fabricImage.scale(layout.scale);
+                    this.baseImageScale = fabricImage.scaleX || 1;
+                } else if (this.options.expandCanvasToImage) {
+                    const canvasWidth = Math.max(minWidth, Math.floor(imageWidth));
+                    const canvasHeight = Math.max(minHeight, Math.floor(imageHeight));
+                    this._setCanvasSizeInt(canvasWidth, canvasHeight);
+                    fabricImage.set({ left: 0, top: 0 });
+                    fabricImage.scale(1);
+                    this.baseImageScale = 1;
+                } else {
+                    const canvasWidth = Math.max(this.options.canvasWidth, minWidth);
+                    const canvasHeight = Math.max(this.options.canvasHeight, minHeight);
+                    this._setCanvasSizeInt(canvasWidth, canvasHeight);
+                    const fitScale = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight, 1);
+                    fabricImage.set({ left: 0, top: 0 });
+                    fabricImage.scale(fitScale);
+                    this.baseImageScale = fabricImage.scaleX || 1;
+                }
 
-                        if (typeof this.onImageLoaded === 'function') {
-                            this.onImageLoaded();
-                        }
+                this.originalImage = fabricImage;
+                this.canvas.add(fabricImage);
+                this.canvas.sendToBack(fabricImage);
 
-                        resolve();
-                    } catch (error) {
-                        reject(error);
-                    }
-                }, { crossOrigin: 'anonymous' });
-            });
+                this._clearMaskPlacementMemory();
+                if (options.resetMaskCounter !== false) this.maskCounter = 0;
+                this.currentScale = 1;
+                this.currentRotation = 0;
+
+                // this._setPlaceholderVisible(false);
+                this._updateInputs();
+                this._updateMaskList();
+                this.isImageLoadedToCanvas = true;
+                this._updateUI();
+                this.canvas.renderAll();
+                this._lastSnapshot = this._captureCanvasStateOrThrow('loadImage');
+
+                if (typeof this.onImageLoaded === 'function') {
+                    this.onImageLoaded();
+                }
+            } catch (error) {
+                await this._rollbackLoadImageTransaction(transaction);
+                throw error;
+            }
         }
 
         /**
@@ -810,24 +896,142 @@ function ensureFabric() {
             });
         }
 
+        _createFabricImageFromURL(dataUrl, timeoutMs = this.options.imageLoadTimeoutMs) {
+            return new Promise((resolve, reject) => {
+                const safeTimeoutMs = this._getSafeTimeoutMs(timeoutMs);
+                let isSettled = false;
+                let timerId;
+                const settle = (callback) => {
+                    if (isSettled) return;
+                    isSettled = true;
+                    clearTimeout(timerId);
+                    callback();
+                };
+
+                timerId = setTimeout(() => {
+                    settle(() => reject(new Error('Fabric image load timed out')));
+                }, safeTimeoutMs);
+
+                try {
+                    fabric.Image.fromURL(dataUrl, (fabricImage) => {
+                        settle(() => {
+                            if (!fabricImage) {
+                                reject(new Error('Image could not be loaded'));
+                                return;
+                            }
+                            resolve(fabricImage);
+                        });
+                    }, { crossOrigin: 'anonymous' });
+                } catch (error) {
+                    settle(() => reject(error));
+                }
+            });
+        }
+
+        _getSafeTimeoutMs(timeoutMs) {
+            const safeTimeoutMs = Number(timeoutMs);
+            return Number.isFinite(safeTimeoutMs) && safeTimeoutMs > 0 ? safeTimeoutMs : 30000;
+        }
+
+        _captureLoadImageTransaction() {
+            return {
+                canvasState: this._serializeCanvasState(),
+                originalImage: this.originalImage,
+                baseImageScale: this.baseImageScale,
+                currentScale: this.currentScale,
+                currentRotation: this.currentRotation,
+                maskCounter: this.maskCounter,
+                isImageLoadedToCanvas: this.isImageLoadedToCanvas,
+                lastSnapshot: this._lastSnapshot,
+                lastMask: this._lastMask,
+                lastMaskInitialLeft: this._lastMaskInitialLeft,
+                lastMaskInitialTop: this._lastMaskInitialTop,
+                lastMaskInitialWidth: this._lastMaskInitialWidth,
+                containerOverflow: this.containerElement && this.containerElement.style ? {
+                    overflow: this.containerElement.style.overflow || '',
+                    overflowX: this.containerElement.style.overflowX || '',
+                    overflowY: this.containerElement.style.overflowY || ''
+                } : null,
+                scrollLeft: this.containerElement ? this.containerElement.scrollLeft : 0,
+                scrollTop: this.containerElement ? this.containerElement.scrollTop : 0,
+                placeholderVisibility: this._captureElementVisibility(this.placeholderElement),
+                canvasVisibility: this._captureElementVisibility(this._getCanvasVisibilityElement())
+            };
+        }
+
+        async _rollbackLoadImageTransaction(transaction) {
+            if (!transaction || !this.canvas || this._disposed) return;
+            try {
+                if (transaction.canvasState) await this.loadFromState(transaction.canvasState);
+            } catch (error) {
+                this._reportError('loadImage rollback failed', error);
+            }
+
+            this.baseImageScale = transaction.baseImageScale;
+            this.currentScale = transaction.currentScale;
+            this.currentRotation = transaction.currentRotation;
+            this.maskCounter = transaction.maskCounter;
+            this.isImageLoadedToCanvas = transaction.isImageLoadedToCanvas;
+            this._lastSnapshot = transaction.lastSnapshot;
+            this._lastMaskInitialLeft = transaction.lastMaskInitialLeft;
+            this._lastMaskInitialTop = transaction.lastMaskInitialTop;
+            this._lastMaskInitialWidth = transaction.lastMaskInitialWidth;
+            this._containerOriginalOverflow = transaction.containerOverflow;
+            this._restoreElementVisibility(this.placeholderElement, transaction.placeholderVisibility);
+            this._restoreElementVisibility(this._getCanvasVisibilityElement(), transaction.canvasVisibility);
+            if (this.containerElement) {
+                this.containerElement.scrollLeft = transaction.scrollLeft;
+                this.containerElement.scrollTop = transaction.scrollTop;
+                this._restoreContainerOverflowState();
+            }
+            this._updateInputs();
+            this._updateMaskList();
+            this._updateUI();
+            if (this.canvas) this.canvas.renderAll();
+        }
+
         /**
-         * Resamples the given image element to a new width and height and returns the result as a JPEG data URL.
+         * Resamples the given image element to a new width and height and returns the result as a data URL.
          * 
          * @param {HTMLImageElement} imageElement - The image element to resample.
          * @param {number} targetWidth - Target width (in pixels) for the resampled image.
          * @param {number} targetHeight - Target height (in pixels) for the resampled image.
-         * @param {number} [quality=0.92] - JPEG image quality between 0 and 1 (optional, default 0.92).
-         * @returns {string} A data URL representing the resampled image as JPEG.
+         * @param {number} [quality=0.92] - Image quality between 0 and 1 for lossy formats.
+         * @param {string|null} [sourceDataUrl=null] - Source data URL used to preserve alpha-capable formats.
+         * @returns {string} A data URL representing the resampled image.
          * @private
          */
-        _resampleImageToDataURL(imageElement, targetWidth, targetHeight, quality = 0.92) {
+        _resampleImageToDataURL(imageElement, targetWidth, targetHeight, quality = 0.92, sourceDataUrl = null) {
             const offscreenCanvas = document.createElement('canvas');
             offscreenCanvas.width = targetWidth;
             offscreenCanvas.height = targetHeight;
             const context = offscreenCanvas.getContext('2d');
             if (!context) throw new Error('2D canvas context is unavailable');
             context.drawImage(imageElement, 0, 0, imageElement.naturalWidth, imageElement.naturalHeight, 0, 0, targetWidth, targetHeight);
-            return offscreenCanvas.toDataURL('image/jpeg', quality);
+            return offscreenCanvas.toDataURL(this._getDownsampleMimeType(sourceDataUrl), quality);
+        }
+
+        _getDataUrlMimeType(dataUrl) {
+            const match = String(dataUrl || '').match(/^data:([^;,]+)[;,]/i);
+            return match ? match[1].toLowerCase() : '';
+        }
+
+        _getDownsampleMimeType(sourceDataUrl) {
+            if (this.options.downsampleMimeType) {
+                const requestedFormat = this._normalizeImageFormat(this.options.downsampleMimeType);
+                return `image/${requestedFormat}`;
+            }
+            const sourceMimeType = this._getDataUrlMimeType(sourceDataUrl);
+            if (this.options.preserveSourceFormat !== false && (sourceMimeType === 'image/png' || sourceMimeType === 'image/webp')) {
+                return sourceMimeType;
+            }
+            return 'image/jpeg';
+        }
+
+        _captureCanvasStateOrThrow(context) {
+            const snapshot = this._serializeCanvasState();
+            if (!snapshot) throw new Error(`${context}: canvas state is unavailable`);
+            return snapshot;
         }
 
         /** 
@@ -849,7 +1053,6 @@ function ensureFabric() {
             if (this.canvasElement) {
                 this.canvasElement.style.width = integerWidth + 'px';
                 this.canvasElement.style.height = integerHeight + 'px';
-                this.canvasElement.style.maxWidth = 'none';
             }
         }
 
@@ -868,21 +1071,42 @@ function ensureFabric() {
                 };
             }
 
+            const measuredWidth = Math.floor(this.containerElement.clientWidth || 0);
+            const measuredHeight = Math.floor(this.containerElement.clientHeight || 0);
+            let width = Math.max(1, measuredWidth || this._lastContainerViewportSize?.width || this.options.canvasWidth || 1);
+            let height = Math.max(1, measuredHeight || this._lastContainerViewportSize?.height || this.options.canvasHeight || 1);
+
+            if (measuredWidth > 0 && measuredHeight > 0) {
+                this._lastContainerViewportSize = { width: measuredWidth, height: measuredHeight };
+            }
+
             if (this._hasFixedContainerScrollbars()) {
-                return {
-                    width: Math.max(1, Math.floor(this.containerElement.clientWidth || this.options.canvasWidth || 1)),
-                    height: Math.max(1, Math.floor(this.containerElement.clientHeight || this.options.canvasHeight || 1))
-                };
+                return { width, height };
             }
 
-            const width = Math.max(1, Math.floor(this.containerElement.clientWidth || this.options.canvasWidth || 1));
-            const height = Math.max(1, Math.floor(this.containerElement.clientHeight || this.options.canvasHeight || 1));
+            const overflow = this._getContainerOverflowValues();
+            const canScrollX = overflow.x.some(value => value === 'auto' || value === 'scroll');
+            const canScrollY = overflow.y.some(value => value === 'auto' || value === 'scroll');
+            const hasHorizontalScrollbar = canScrollX && this.containerElement.scrollWidth > this.containerElement.clientWidth;
+            const hasVerticalScrollbar = canScrollY && this.containerElement.scrollHeight > this.containerElement.clientHeight;
+
+            if (hasHorizontalScrollbar || hasVerticalScrollbar) {
+                const scrollbar = this._getScrollbarSize();
+                if (hasVerticalScrollbar) width += scrollbar.width;
+                if (hasHorizontalScrollbar) height += scrollbar.height;
+            }
 
             return { width, height };
         }
 
-        _hasFixedContainerScrollbars() {
-            if (!this.containerElement) return false;
+        /**
+         * Reads inline and computed overflow values for both scroll axes.
+         *
+         * @returns {{x:string[], y:string[]}} Overflow values grouped by axis.
+         * @private
+         */
+        _getContainerOverflowValues() {
+            if (!this.containerElement) return { x: [], y: [] };
             const inlineOverflow = this.containerElement.style.overflow;
             const inlineOverflowX = this.containerElement.style.overflowX;
             const inlineOverflowY = this.containerElement.style.overflowY;
@@ -897,8 +1121,16 @@ function ensureFabric() {
                 computedOverflowY = style.overflowY;
             }
 
-            return [inlineOverflow, inlineOverflowX, inlineOverflowY, computedOverflow, computedOverflowX, computedOverflowY]
-                .some(value => value === 'scroll');
+            return {
+                x: [inlineOverflow, inlineOverflowX, computedOverflow, computedOverflowX],
+                y: [inlineOverflow, inlineOverflowY, computedOverflow, computedOverflowY]
+            };
+        }
+
+        _hasFixedContainerScrollbars() {
+            if (!this.containerElement) return false;
+            const overflow = this._getContainerOverflowValues();
+            return [...overflow.x, ...overflow.y].some(value => value === 'scroll');
         }
 
         _getScrollbarSize() {
@@ -948,8 +1180,8 @@ function ensureFabric() {
             const scrollbar = this._getScrollbarSize();
             let hasVertical = false;
             let hasHorizontal = false;
-            let effectiveWidth = viewport.width;
-            let effectiveHeight = viewport.height;
+            let effectiveWidth;
+            let effectiveHeight;
 
             for (let i = 0; i < 4; i += 1) {
                 effectiveWidth = Math.max(1, viewport.width - (hasVertical ? scrollbar.width : 0));
@@ -1000,8 +1232,8 @@ function ensureFabric() {
             let scale = 1;
             let contentWidth = imageWidth;
             let contentHeight = imageHeight;
-            let effectiveWidth = viewport.width;
-            let effectiveHeight = viewport.height;
+            let effectiveWidth;
+            let effectiveHeight;
 
             for (let i = 0; i < 4; i += 1) {
                 effectiveWidth = Math.max(1, viewport.width - (hasVertical ? scrollbar.width : 0));
@@ -1062,26 +1294,36 @@ function ensureFabric() {
         _withNormalizedMaskStyles(callback) {
             if (!this.canvas) return callback();
             const masks = this.canvas.getObjects().filter(object => object.maskId);
-            const maskStyleBackups = masks.map(mask => ({
-                object: mask,
-                stroke: mask.stroke,
-                strokeWidth: mask.strokeWidth,
-                opacity: mask.opacity
-            }));
+            const maskStyleBackups = [];
 
             try {
                 masks.forEach(mask => {
-                    mask.set(this._getMaskNormalStyle(mask));
+                    const normalStyle = this._getMaskNormalStyle(mask);
+                    const stylePatch = {};
+                    Object.keys(normalStyle).forEach(property => {
+                        if (mask[property] !== normalStyle[property]) {
+                            stylePatch[property] = normalStyle[property];
+                        }
+                    });
+                    const changedProperties = Object.keys(stylePatch);
+                    if (!changedProperties.length) return;
+
+                    const backup = { object: mask };
+                    changedProperties.forEach(property => {
+                        backup[property] = mask[property];
+                    });
+                    maskStyleBackups.push(backup);
+                    mask.set(stylePatch);
                 });
                 return callback();
             } finally {
                 maskStyleBackups.forEach(backup => {
                     try {
-                        backup.object.set({
-                            stroke: backup.stroke,
-                            strokeWidth: backup.strokeWidth,
-                            opacity: backup.opacity
+                        const restorePatch = {};
+                        Object.keys(backup).forEach(property => {
+                            if (property !== 'object') restorePatch[property] = backup[property];
                         });
+                        backup.object.set(restorePatch);
                     } catch (error) { void error; }
                 });
             }
@@ -1233,6 +1475,7 @@ function ensureFabric() {
                 };
                 timerId = setTimeout(() => {
                     settle(() => reject(new Error('Image crop load timed out')));
+                    // Clearing src prevents later network/decode work; already-dispatched onload work is guarded by settle().
                     try { imageElement.src = ''; } catch (error) { void error; }
                 }, safeTimeoutMs);
                 imageElement.onload = () => {
@@ -1260,7 +1503,7 @@ function ensureFabric() {
         }
 
         /**
-         * Exports the whole Fabric canvas, then crops the requested source region from that export.
+         * Exports a source region directly through Fabric's region export options.
          *
          * @param {Object} region - Canvas source region and export options.
          * @param {number} region.sourceX - Source region x coordinate.
@@ -1273,15 +1516,17 @@ function ensureFabric() {
          * @returns {Promise<string>} Resolves with an image data URL for the cropped region.
          * @private
          */
-        async _exportCanvasRegionToDataURL({ sourceX, sourceY, sourceWidth, sourceHeight, multiplier = 1, quality = 0.92, format = 'jpeg' }) {
+        _exportCanvasRegionToDataURL({ sourceX, sourceY, sourceWidth, sourceHeight, multiplier = 1, quality = 0.92, format = 'jpeg' }) {
             const safeMultiplier = Math.max(1, Number(multiplier) || 1);
-            const fullDataUrl = this.canvas.toDataURL({
+            return this.canvas.toDataURL({
                 format,
                 quality,
-                multiplier: safeMultiplier
+                multiplier: safeMultiplier,
+                left: sourceX,
+                top: sourceY,
+                width: sourceWidth,
+                height: sourceHeight
             });
-
-            return this._cropDataUrl(fullDataUrl, sourceX, sourceY, sourceWidth, sourceHeight, safeMultiplier, format, quality);
         }
 
         /** 
@@ -1295,12 +1540,41 @@ function ensureFabric() {
         _getObjectTopLeftPoint(fabricObject) {
             if (!fabricObject) return { x: 0, y: 0 };
             fabricObject.setCoords();
-            const coords = typeof fabricObject.getCoords === 'function' ? fabricObject.getCoords() : null;
-            if (coords && coords.length) return coords[0];
             const boundingRect = fabricObject.getBoundingRect(true, true);
             return { x: boundingRect.left, y: boundingRect.top };
         }
 
+        _getObjectCoordinateTopLeftPoint(fabricObject) {
+            if (!fabricObject) return { x: 0, y: 0 };
+            fabricObject.setCoords();
+            const coords = typeof fabricObject.getCoords === 'function' ? fabricObject.getCoords() : null;
+            if (coords && coords.length) return coords[0];
+            return this._getObjectTopLeftPoint(fabricObject);
+        }
+
+        _getObjectOriginPoint(fabricObject, originX, originY) {
+            if (!fabricObject) return { x: 0, y: 0 };
+            if (typeof fabricObject.getPointByOrigin === 'function') {
+                return fabricObject.getPointByOrigin(originX, originY);
+            }
+            return this._getObjectTopLeftPoint(fabricObject);
+        }
+
+        _translateObjectByCanvasOffset(fabricObject, deltaX, deltaY) {
+            if (!fabricObject) return;
+            if (typeof fabricObject.getCenterPoint === 'function' && typeof fabricObject.setPositionByOrigin === 'function') {
+                const center = fabricObject.getCenterPoint();
+                const nextCenter = new fabric.Point(center.x + deltaX, center.y + deltaY);
+                fabricObject.setPositionByOrigin(nextCenter, 'center', 'center');
+            } else {
+                fabricObject.set({
+                    left: (fabricObject.left || 0) + deltaX,
+                    top: (fabricObject.top || 0) + deltaY
+                });
+            }
+            fabricObject.setCoords();
+        }
+
         /**
          * Sets the object's origin at the specified origin point, keeping a reference point fixed in position.
          * 
@@ -1369,8 +1643,10 @@ function ensureFabric() {
         _expandCanvasToFitObjects(fabricObjects, padding = 10) {
             if (!this.canvas || !Array.isArray(fabricObjects) || !fabricObjects.length || !this._shouldResizeCanvasToContentBounds()) return;
             try {
-                let requiredWidth = this.canvas.getWidth();
-                let requiredHeight = this.canvas.getHeight();
+                const currentWidth = this.canvas.getWidth();
+                const currentHeight = this.canvas.getHeight();
+                let requiredWidth = currentWidth;
+                let requiredHeight = currentHeight;
                 fabricObjects.forEach(fabricObject => {
                     if (!fabricObject) return;
                     if (typeof fabricObject.setCoords === 'function') fabricObject.setCoords();
@@ -1378,11 +1654,23 @@ function ensureFabric() {
                     requiredWidth = Math.max(requiredWidth, Math.ceil(boundingRect.left + boundingRect.width + padding));
                     requiredHeight = Math.max(requiredHeight, Math.ceil(boundingRect.top + boundingRect.height + padding));
                 });
-                const minWidth = this.containerElement ? Math.floor(this.containerElement.clientWidth || 0) : 0;
-                const minHeight = this.containerElement ? Math.floor(this.containerElement.clientHeight || 0) : 0;
-                const newWidth = Math.max(this.canvas.getWidth(), minWidth, requiredWidth);
-                const newHeight = Math.max(this.canvas.getHeight(), minHeight, requiredHeight);
-                if (newWidth !== this.canvas.getWidth() || newHeight !== this.canvas.getHeight()) {
+                const shouldUseScrollSafeViewport = this.options.fitImageToCanvas || this.options.coverImageToCanvas;
+
+                let minWidth = 0;
+                let minHeight = 0;
+                if (shouldUseScrollSafeViewport) {
+                    const viewport = this._getContainerViewportSize();
+                    const safetyMargin = this._getScrollSafetyMargin();
+
+                    minWidth = Math.max(1, viewport.width - safetyMargin);
+                    minHeight = Math.max(1, viewport.height - safetyMargin);
+                } else if (this.containerElement) {
+                    minWidth = Math.floor(this.containerElement.clientWidth || 0);
+                    minHeight = Math.floor(this.containerElement.clientHeight || 0);
+                }
+                const newWidth = Math.max(currentWidth, minWidth, requiredWidth);
+                const newHeight = Math.max(currentHeight, minHeight, requiredHeight);
+                if (newWidth !== currentWidth  || newHeight !== currentHeight) {
                     this._setCanvasSizeInt(newWidth, newHeight);
                 }
             } catch (error) {
@@ -1413,6 +1701,69 @@ function ensureFabric() {
             return this.animationQueue.add(() => this._scaleImageImpl(factor, options));
         }
 
+        _assertIdleForOperation(operationName) {
+            if (this._disposed || !this.canvas) throw new Error(`${operationName} cannot run after the editor has been disposed`);
+            if (this.isAnimating || (this.animationQueue && this.animationQueue.isBusy())) {
+                throw new Error(`${operationName} cannot run while an animation is running`);
+            }
+        }
+
+        _canMutateNow(operationName) {
+            try {
+                this._assertIdleForOperation(operationName);
+                return true;
+            } catch (error) {
+                this._reportError(`${operationName} blocked`, error);
+                return false;
+            }
+        }
+
+        _rejectActiveAnimations(reason) {
+            const error = reason instanceof Error ? reason : new Error(String(reason || 'Animation cancelled'));
+            this._activeAnimationRejectors.forEach(reject => {
+                try { reject(error); } catch (rejectError) { void rejectError; }
+            });
+            this._activeAnimationRejectors.clear();
+        }
+
+        _animateFabricProperty(fabricObject, property, value) {
+            return new Promise((resolve, reject) => {
+                if (this._disposed || !this.canvas || !fabricObject) {
+                    reject(new Error('Animation cannot start after editor disposal'));
+                    return;
+                }
+
+                let isSettled = false;
+                const duration = Math.max(0, Number(this.options.animationDuration) || 0);
+                const timeoutMs = Math.max(1000, duration + 1000);
+                let timerId;
+                const settle = (callback) => {
+                    if (isSettled) return;
+                    isSettled = true;
+                    clearTimeout(timerId);
+                    this._activeAnimationRejectors.delete(reject);
+                    callback();
+                };
+
+                this._activeAnimationRejectors.add(reject);
+                timerId = setTimeout(() => {
+                    settle(() => reject(new Error(`Animation timed out while changing ${property}`)));
+                }, timeoutMs);
+
+                try {
+                    fabricObject.animate(property, value, {
+                        duration,
+                        onChange: () => {
+                            if (!this._disposed && this.canvas) this.canvas.renderAll();
+                        },
+                        onComplete: () => settle(resolve)
+                    });
+                } catch (error) {
+                    settle(() => reject(error));
+                }
+            });
+        }
+
         /** 
          * Scales the original image by a given factor, with animation.
          * Returns a promise that resolves when the scale animation is complete.
@@ -1420,37 +1771,29 @@ function ensureFabric() {
          * @returns {Promise<void>} Promise that resolves once the scaling animation finishes.
          * @private
          */
-        _scaleImageImpl(factor, options = {}) {
-            if (!this.originalImage) return Promise.resolve();
-            if (this.isAnimating) return Promise.resolve();
+        async _scaleImageImpl(factor, options = {}) {
+            if (!this.originalImage || this._disposed) return;
+            if (this.isAnimating) return;
             const saveHistory = options.saveHistory !== false;
-            factor = Math.max(this.options.minScale, Math.min(this.options.maxScale, factor));
-            this.currentScale = factor;
-            this.isAnimating = true;
-            this._updateUI();
+            let didStartAnimation = false;
+            try {
+                factor = Math.max(this.options.minScale, Math.min(this.options.maxScale, factor));
+                this.currentScale = factor;
+                this.isAnimating = true;
+                didStartAnimation = true;
+                this._updateUI();
 
-            const targetScale = this.baseImageScale * factor;
+                const targetScale = this.baseImageScale * factor;
 
-            // Scale around current top-left (recompute)
-            const topLeft = this._getObjectTopLeftPoint(this.originalImage);
-            this._setObjectOriginKeepingPosition(this.originalImage, 'left', 'top', topLeft);
+                const topLeft = this._getObjectTopLeftPoint(this.originalImage);
+                this._setObjectOriginKeepingPosition(this.originalImage, 'left', 'top', topLeft);
 
-            const scaleXAnimation = new Promise((resolve) => {
-                this.originalImage.animate('scaleX', targetScale, {
-                    duration: this.options.animationDuration,
-                    onChange: this.canvas.renderAll.bind(this.canvas),
-                    onComplete: resolve
-                });
-            });
-            const scaleYAnimation = new Promise((resolve) => {
-                this.originalImage.animate('scaleY', targetScale, {
-                    duration: this.options.animationDuration,
-                    onChange: this.canvas.renderAll.bind(this.canvas),
-                    onComplete: resolve
-                });
-            });
+                await Promise.all([
+                    this._animateFabricProperty(this.originalImage, 'scaleX', targetScale),
+                    this._animateFabricProperty(this.originalImage, 'scaleY', targetScale)
+                ]);
+                if (this._disposed || !this.canvas || !this.originalImage) throw new Error('Editor was disposed during scale animation');
 
-            return Promise.all([scaleXAnimation, scaleYAnimation]).then(() => {
                 this.originalImage.set({ scaleX: targetScale, scaleY: targetScale });
                 this.originalImage.setCoords();
 
@@ -1460,17 +1803,17 @@ function ensureFabric() {
 
                 this._alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
 
-                // Sync mask labels
                 this.canvas.getObjects().forEach(object => { if (object.maskId) this._syncMaskLabel(object); });
 
-                this.isAnimating = false;
                 this._updateInputs();
-                this._updateUI();
                 if (saveHistory) this.saveState();
-            }).catch(() => {
-                this.isAnimating = false;
-                this._updateUI();
-            });
+            } finally {
+                if (didStartAnimation) {
+                    this.isAnimating = false;
+                    this._updateInputs();
+                    this._updateUI();
+                }
+            }
         }
 
         /** 
@@ -1491,27 +1834,29 @@ function ensureFabric() {
          * @returns {Promise<void>} Promise that resolves once the rotation animation finishes.
          * @private
          */
-        _rotateImageImpl(degrees, options = {}) {
-            if (!this.originalImage) return Promise.resolve();
-            if (this.isAnimating) return Promise.resolve();
-            if (isNaN(degrees)) return Promise.resolve();
+        async _rotateImageImpl(degrees, options = {}) {
+            if (!this.originalImage || this._disposed) return;
+            if (this.isAnimating) return;
+            if (isNaN(degrees)) return;
             const saveHistory = options.saveHistory !== false;
-            this.currentRotation = degrees;
-            this.isAnimating = true;
-            this._updateUI();
+            const image = this.originalImage;
+            const previousOriginX = image.originX || 'left';
+            const previousOriginY = image.originY || 'top';
+            const previousOriginPoint = this._getObjectOriginPoint(image, previousOriginX, previousOriginY);
+            let didStartAnimation = false;
+            let didCompleteRotation = false;
+            try {
+                this.currentRotation = degrees;
+                this.isAnimating = true;
+                didStartAnimation = true;
+                this._updateUI();
 
-            const center = this.originalImage.getCenterPoint();
-            this._setObjectOriginKeepingPosition(this.originalImage, 'center', 'center', center);
+                const center = image.getCenterPoint();
+                this._setObjectOriginKeepingPosition(image, 'center', 'center', center);
 
-            const rotationAnimation = new Promise((resolve) => {
-                this.originalImage.animate('angle', degrees, {
-                    duration: this.options.animationDuration,
-                    onChange: this.canvas.renderAll.bind(this.canvas),
-                    onComplete: resolve
-                });
-            });
+                await this._animateFabricProperty(image, 'angle', degrees);
+                if (this._disposed || !this.canvas || !this.originalImage) throw new Error('Editor was disposed during rotation animation');
 
-            return rotationAnimation.then(() => {
                 this.originalImage.set('angle', degrees);
                 this.originalImage.setCoords();
 
@@ -1521,20 +1866,24 @@ function ensureFabric() {
 
                 this._alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
 
-                const newTopLeft = this._getObjectTopLeftPoint(this.originalImage);
+                const newTopLeft = this._getObjectCoordinateTopLeftPoint(this.originalImage);
                 this._setObjectOriginKeepingPosition(this.originalImage, 'left', 'top', newTopLeft);
 
-                // Sync mask labels
                 this.canvas.getObjects().forEach(object => { if (object.maskId) this._syncMaskLabel(object); });
 
-                this.isAnimating = false;
                 this._updateInputs();
-                this._updateUI();
                 if (saveHistory) this.saveState();
-            }).catch(() => {
-                this.isAnimating = false;
-                this._updateUI();
-            });
+                didCompleteRotation = true;
+            } finally {
+                if (!didCompleteRotation && !this._disposed && image) {
+                    this._setObjectOriginKeepingPosition(image, previousOriginX, previousOriginY, previousOriginPoint);
+                }
+                if (didStartAnimation) {
+                    this.isAnimating = false;
+                    this._updateInputs();
+                    this._updateUI();
+                }
+            }
         }
 
         /**
@@ -1547,13 +1896,14 @@ function ensureFabric() {
             if (!this.originalImage) return Promise.resolve();
 
             return this.animationQueue.add(async () => {
-                const before = this._lastSnapshot || this._serializeCanvasState();
+                const before = this._lastSnapshot || this._captureCanvasStateOrThrow('resetImageTransform');
                 await this._scaleImageImpl(1, { saveHistory: false });
                 await this._rotateImageImpl(0, { saveHistory: false });
-                const after = this._serializeCanvasState();
+                const after = this._captureCanvasStateOrThrow('resetImageTransform');
                 this._pushStateTransition(before, after);
             }).catch(error => {
                 this._reportError('resetImageTransform() failed', error);
+                throw error;
             });
         }
 
@@ -1575,17 +1925,35 @@ function ensureFabric() {
          * @public
          */
         loadFromState(serializedState) {
-            if (!serializedState || !this.canvas) return Promise.resolve();
+            if (!serializedState || !this.canvas || this._disposed) return Promise.resolve();
+            if (this._cropMode || this._cropRect) {
+                this._removeCropRect();
+                this._restoreCropObjectState();
+                this._cropMode = false;
+                if (this._prevSelectionSetting !== undefined && this.canvas) {
+                    this.canvas.selection = !!this._prevSelectionSetting;
+                }
+                this._prevSelectionSetting = undefined;
+            }
 
-            return new Promise((resolve) => {
+            return new Promise((resolve, reject) => {
                 try {
                     const state = (typeof serializedState === 'string')
                         ? JSON.parse(serializedState)
                         : serializedState;
                     const editorMetadata = state && state.imageEditorMetadata ? state.imageEditorMetadata : null;
 
-                    this.canvas.loadFromJSON(state, () => {
+                    this.canvas.loadFromJSON(state, async () => {
                         try {
+                            if (this._disposed || !this.canvas) {
+                                reject(new Error('Editor was disposed while loading state'));
+                                return;
+                            }
+                            await this._waitForFabricImagesReady(this.canvas.getObjects());
+                            if (this._disposed || !this.canvas) {
+                                reject(new Error('Editor was disposed while loading state'));
+                                return;
+                            }
                             this._hideAllMaskLabels();
                             const canvasObjects = this.canvas.getObjects();
                             this.originalImage = canvasObjects.find(object => object.type === 'image' && !object.maskId) || null;
@@ -1644,20 +2012,48 @@ function ensureFabric() {
                             this._updatePlaceholderStatus();
                             this._lastSnapshot = this._serializeCanvasState();
                             this._updateUI();
+                            resolve();
                         } catch (callbackError) {
                             this._reportError('loadFromState() failed', callbackError);
-                        } finally {
-                            resolve();
+                            reject(callbackError);
                         }
                     });
 
                 } catch (error) {
                     this._reportError('loadFromState() failed', error);
-                    resolve();
+                    reject(error);
                 }
             });
         }
 
+        async _waitForFabricImagesReady(canvasObjects) {
+            const imageObjects = (canvasObjects || []).filter(object => object && object.type === 'image');
+            await Promise.all(imageObjects.map(object => this._waitForImageElementReady(
+                typeof object.getElement === 'function' ? object.getElement() : object._element
+            )));
+        }
+
+        _waitForImageElementReady(imageElement) {
+            if (!imageElement) return Promise.resolve();
+            if (imageElement.complete || imageElement.naturalWidth > 0 || imageElement.width > 0) return Promise.resolve();
+            return new Promise((resolve, reject) => {
+                let isSettled = false;
+                const timerId = setTimeout(() => {
+                    settle(() => reject(new Error('Image load timed out while restoring state')));
+                }, this._getSafeTimeoutMs(this.options.imageLoadTimeoutMs));
+                const settle = (callback) => {
+                    if (isSettled) return;
+                    isSettled = true;
+                    clearTimeout(timerId);
+                    imageElement.onload = null;
+                    imageElement.onerror = null;
+                    callback();
+                };
+                imageElement.onload = () => settle(resolve);
+                imageElement.onerror = (error) => settle(() => reject(error));
+            });
+        }
+
         /**
          * Saves the current editable canvas state as an undoable history transition.
          *
@@ -1669,10 +2065,9 @@ function ensureFabric() {
          */
         saveState() {
             if (!this.canvas) return;
-            const activeObject = this.canvas.getActiveObject();
 
             try {
-                const after = this._serializeCanvasState();
+                const after = this._captureCanvasStateOrThrow('saveState');
                 const before = this._lastSnapshot || after;
                 if (after === before) return;
                 let executedOnce = false;
@@ -1693,9 +2088,6 @@ function ensureFabric() {
             } catch (error) {
                 this._reportWarning('saveState: failed to save canvas snapshot', error);
             } finally {
-                if (activeObject && activeObject.maskId && !activeObject.__label && this.canvas.getObjects().includes(activeObject)) {
-                    this._handleSelectionChanged([activeObject]);
-                }
                 this._updateUI();
             }
         }
@@ -1712,7 +2104,10 @@ function ensureFabric() {
          * @private
          */
         _pushStateTransition(before, after) {
-            if (!before || !after) return;
+            if (!before || !after) {
+                this._reportWarning('History transition skipped because a canvas snapshot is unavailable');
+                return;
+            }
             if (before === after) return;
             if (!this.historyManager) this.historyManager = new HistoryManager(this.maxHistorySize || 50);
 
@@ -1734,7 +2129,10 @@ function ensureFabric() {
         undo() {
             return this.historyManager.undo()
                 .then(() => { this._updateUI(); })
-                .catch(error => { this._reportError('undo failed', error); });
+                .catch(error => {
+                    this._reportError('undo failed', error);
+                    throw error;
+                });
         }
 
         /**
@@ -1746,7 +2144,10 @@ function ensureFabric() {
         redo() {
             return this.historyManager.redo()
                 .then(() => { this._updateUI(); })
-                .catch(error => { this._reportError('redo failed', error); });
+                .catch(error => {
+                    this._reportError('redo failed', error);
+                    throw error;
+                });
         }
 
         _rebindMaskEvents(mask) {
@@ -1768,23 +2169,17 @@ function ensureFabric() {
             }
             if (Object.keys(metadata).length) mask.set(metadata);
 
-            const normalStyle = {
-                stroke: mask.originalStroke || '#ccc',
-                strokeWidth: mask.originalStrokeWidth,
-                opacity: mask.originalAlpha
-            };
-            const hoverStyle = {
-                stroke: '#ff5500',
-                strokeWidth: 2,
-                opacity: Math.min(mask.originalAlpha + 0.2, 1)
-            };
-
             const mouseover = () => {
-                mask.set(hoverStyle);
+                const opacity = Number(mask.originalAlpha);
+                mask.set({
+                    stroke: '#ff5500',
+                    strokeWidth: 2,
+                    opacity: Math.min((Number.isFinite(opacity) ? opacity : 0.5) + 0.2, 1)
+                });
                 if (mask.canvas) mask.canvas.requestRenderAll();
             };
             const mouseout = () => {
-                mask.set(normalStyle);
+                mask.set(this._getMaskNormalStyle(mask));
                 if (mask.canvas) mask.canvas.requestRenderAll();
             };
 
@@ -1823,6 +2218,7 @@ function ensureFabric() {
          */
         createMask(config = {}) {
             if (!this.canvas) return null;
+            if (!this._canMutateNow('createMask')) return null;
             const shapeType = config.shape || 'rect';
             // Normalize mask defaults before applying caller-provided overrides.
             const maskConfig = {
@@ -1841,37 +2237,43 @@ function ensureFabric() {
 
             // Always start placement relative to canvas left/top.
             const firstOffset = 10;
-            let left = firstOffset;
-            let top = firstOffset;
+            let left;
+            let top;
+
+            const getCanvasBasis = (axis) => {
+                const canvasWidth = this.canvas ? this.canvas.getWidth() : 0;
+                const canvasHeight = this.canvas ? this.canvas.getHeight() : 0;
+                if (axis === 'height') return canvasHeight;
+                if (axis === 'min') return Math.min(canvasWidth, canvasHeight);
+                return canvasWidth;
+            };
 
-            const resolveValue = (value, fallback) => {
+            const resolveValue = (value, fallback, axis = 'width') => {
                 if (typeof value === 'function')
                     return value(this.canvas, this.options);
                 if (typeof value === 'string' && value.endsWith('%')) {
-                    const percent = parseFloat(value) / 100;
-                    return Math.floor((this.canvas ? this.canvas.getWidth() : 0) * percent);
+                    const percent = Number.parseFloat(value) / 100;
+                    if (!Number.isFinite(percent)) return fallback;
+                    return Math.floor(getCanvasBasis(axis) * percent);
                 }
                 return value != null ? value : fallback;
-            }
+            };
 
             if (maskConfig.left === undefined && this._lastMask) {
                 const previousMask = this._lastMask;
-                let previousMaskRight = previousMask.left;
-
-                if (previousMask.getScaledWidth) {
-                    previousMaskRight += previousMask.getScaledWidth();
-                } else if (previousMask.width) {
-                    previousMaskRight += previousMask.width * (previousMask.scaleX ?? 1);
-                }
-                left = Math.round(previousMaskRight + maskConfig.gap);
-                top = previousMask.top ?? firstOffset;
+                if (typeof previousMask.setCoords === 'function') previousMask.setCoords();
+                const previousBounds = typeof previousMask.getBoundingRect === 'function'
+                    ? previousMask.getBoundingRect(true, true)
+                    : { left: previousMask.left || firstOffset, top: previousMask.top || firstOffset, width: previousMask.width || 0 };
+                left = Math.round(previousBounds.left + previousBounds.width + maskConfig.gap);
+                top = Math.round(previousBounds.top ?? firstOffset);
             } else {
-                left = resolveValue(maskConfig.left, firstOffset);
-                top = resolveValue(maskConfig.top, firstOffset);
+                left = resolveValue(maskConfig.left, firstOffset, 'width');
+                top = resolveValue(maskConfig.top, firstOffset, 'height');
             }
 
-            maskConfig.width = resolveValue(maskConfig.width, this.options.defaultMaskWidth);
-            maskConfig.height = resolveValue(maskConfig.height, this.options.defaultMaskHeight);
+            maskConfig.width = resolveValue(maskConfig.width, this.options.defaultMaskWidth, 'width');
+            maskConfig.height = resolveValue(maskConfig.height, this.options.defaultMaskHeight, 'height');
             maskConfig.left = left;
             maskConfig.top = top;
 
@@ -1883,7 +2285,7 @@ function ensureFabric() {
                     case 'circle':
                         mask = new fabric.Circle({
                             left, top,
-                            radius: resolveValue(maskConfig.radius, Math.min(maskConfig.width, maskConfig.height) / 2),
+                            radius: resolveValue(maskConfig.radius, Math.min(maskConfig.width, maskConfig.height) / 2, 'min'),
                             fill: maskConfig.color,
                             opacity: maskConfig.alpha,
                             angle: maskConfig.angle,
@@ -1893,8 +2295,8 @@ function ensureFabric() {
                     case 'ellipse':
                         mask = new fabric.Ellipse({
                             left, top,
-                            rx: resolveValue(maskConfig.rx, maskConfig.width / 2),
-                            ry: resolveValue(maskConfig.ry, maskConfig.height / 2),
+                            rx: resolveValue(maskConfig.rx, maskConfig.width / 2, 'width'),
+                            ry: resolveValue(maskConfig.ry, maskConfig.height / 2, 'height'),
                             fill: maskConfig.color,
                             opacity: maskConfig.alpha,
                             angle: maskConfig.angle,
@@ -1922,8 +2324,8 @@ function ensureFabric() {
                     default:
                         mask = new fabric.Rect({
                             left, top,
-                            width: resolveValue(maskConfig.width, this.options.defaultMaskWidth),
-                            height: resolveValue(maskConfig.height, this.options.defaultMaskHeight),
+                            width: resolveValue(maskConfig.width, this.options.defaultMaskWidth, 'width'),
+                            height: resolveValue(maskConfig.height, this.options.defaultMaskHeight, 'height'),
                             fill: maskConfig.color,
                             opacity: maskConfig.alpha,
                             angle: maskConfig.angle,
@@ -1964,7 +2366,7 @@ function ensureFabric() {
             // Store placement values so the next mask can be positioned beside this one.
             this._lastMaskInitialLeft = left;
             this._lastMaskInitialTop = top;
-            this._lastMaskInitialWidth = resolveValue(maskConfig.width, this.options.defaultMaskWidth);
+            this._lastMaskInitialWidth = resolveValue(maskConfig.width, this.options.defaultMaskWidth, 'width');
 
             const maskId = ++this.maskCounter;
             mask.set({
@@ -2002,6 +2404,8 @@ function ensureFabric() {
          * The associated label is also removed. UI and mask list are updated.
          */
         removeSelectedMask() {
+            if (!this.canvas) return;
+            if (!this._canMutateNow('removeSelectedMask')) return;
             const activeObject = this.canvas.getActiveObject();
             const selectedMasks = this._getModifiedMasks(activeObject);
             if (!selectedMasks.length) return;
@@ -2030,6 +2434,8 @@ function ensureFabric() {
          * UI and internal mask placement memory are reset.
          */
         removeAllMasks(options = {}) {
+            if (!this.canvas) return;
+            if (!this._canMutateNow('removeAllMasks')) return;
             const saveHistory = options.saveHistory !== false;
             const masks = this.canvas.getObjects().filter(object => object.maskId);
             masks.forEach(mask => this._removeLabelForMask(mask));
@@ -2095,6 +2501,10 @@ function ensureFabric() {
             let textObject = null;
             if (this.options.label && typeof this.options.label.create === 'function') {
                 textObject = this.options.label.create(mask, fabric);
+                if (!textObject || typeof textObject.set !== 'function') {
+                    this._reportWarning('label.create() returned an invalid Fabric object; using the default label');
+                    textObject = null;
+                }
             }
             if (!textObject) {
                 let labelText = mask.maskName;
@@ -2161,10 +2571,11 @@ function ensureFabric() {
             if (!this.options.maskLabelOnSelect) return;
             if (!mask.__label) return;
 
-            const coords = mask.getCoords ? mask.getCoords() : null;
-            if (!coords || coords.length < 4) return;
+            if (typeof mask.setCoords === 'function') mask.setCoords();
+            const bounds = mask.getBoundingRect ? mask.getBoundingRect(true, true) : null;
+            if (!bounds) return;
 
-            const tl = coords[0];
+            const tl = { x: bounds.left, y: bounds.top };
             const center = mask.getCenterPoint();
 
             const vx = center.x - tl.x;
@@ -2247,7 +2658,7 @@ function ensureFabric() {
          * @private
          */
         _updateMaskList() {
-            const maskListElement = document.getElementById(this.elements.maskList);
+            const maskListElement = this._getElement('maskList');
             if (!maskListElement) return;
             maskListElement.innerHTML = '';
             const masks = this.canvas.getObjects().filter(object => object.maskId);
@@ -2255,11 +2666,22 @@ function ensureFabric() {
                 const listItemElement = document.createElement('li');
                 listItemElement.className = 'list-group-item mask-item';
                 listItemElement.textContent = mask.maskName;
-                listItemElement.onclick = () => { this.canvas.setActiveObject(mask); this._handleSelectionChanged([mask]); };
+                listItemElement.dataset.maskId = String(mask.maskId);
                 maskListElement.appendChild(listItemElement);
             });
         }
 
+        _handleMaskListClick(event) {
+            if (!this.canvas) return;
+            const itemElement = event.target && event.target.closest ? event.target.closest('.mask-item') : null;
+            if (!itemElement || !itemElement.dataset) return;
+            const maskId = Number(itemElement.dataset.maskId);
+            const mask = this.canvas.getObjects().find(object => Number(object.maskId) === maskId);
+            if (!mask) return;
+            this.canvas.setActiveObject(mask);
+            this._handleSelectionChanged([mask]);
+        }
+
         /**
          * Updates the visual selection (CSS 'active') state for the mask list in the DOM.
          * 
@@ -2267,12 +2689,13 @@ function ensureFabric() {
          * @private
          */
         _updateMaskListSelection(selectedMask) {
-            const maskListElement = document.getElementById(this.elements.maskList);
+            const maskListElement = this._getElement('maskList');
             if (!maskListElement) return;
             const maskItems = maskListElement.querySelectorAll('.mask-item');
             maskItems.forEach(item => {
-                const isSelected = !!selectedMask && item.textContent === selectedMask.maskName;
+                const isSelected = !!selectedMask && Number(item.dataset.maskId) === Number(selectedMask.maskId);
                 item.classList.toggle('active', isSelected);
+                item.classList.toggle('selected', isSelected);
             });
         }
 
@@ -2288,6 +2711,7 @@ function ensureFabric() {
          */
         async mergeMasks() {
             if (!this.originalImage) return;
+            this._assertIdleForOperation('mergeMasks');
             const masks = this.canvas.getObjects().filter(object => object.maskId);
             if (!masks.length) return;
 
@@ -2298,11 +2722,12 @@ function ensureFabric() {
                 const beforeJson = this._serializeCanvasState();
                 const merged = await this.exportImageBase64({ exportImageArea: true, multiplier: this.options.exportMultiplier });
                 this.removeAllMasks({ saveHistory: false });
-                await this.loadImage(merged, { preserveScroll: true });
+                await this.loadImage(merged, { preserveScroll: true, resetMaskCounter: false });
                 const afterJson = this._serializeCanvasState();
                 this._pushStateTransition(beforeJson, afterJson);
             } catch (error) {
                 this._reportError('merge error', error);
+                throw error;
             }
         }
 
@@ -2326,6 +2751,7 @@ function ensureFabric() {
          */
         downloadImage(fileName = this.options.defaultDownloadFileName) {
             if (!this.originalImage) return;
+            if (!this._canMutateNow('downloadImage')) return;
             const exportImageArea = this.options.exportImageAreaByDefault;
             this.exportImageBase64({ exportImageArea, multiplier: this.options.exportMultiplier })
                 .then(imageBase64 => {
@@ -2357,6 +2783,7 @@ function ensureFabric() {
          */
         async exportImageBase64(options = {}) {
             if (!this.originalImage) throw new Error('No image loaded');
+            this._assertIdleForOperation('exportImageBase64');
             const exportImageArea = typeof options.exportImageArea === 'boolean' ? options.exportImageArea : this.options.exportImageAreaByDefault;
             const multiplier = options.multiplier || this.options.exportMultiplier || 1;
             const quality = this._normalizeQuality(options.quality ?? this.options.downsampleQuality);
@@ -2374,7 +2801,7 @@ function ensureFabric() {
                     this.originalImage.setCoords();
                     const imageBounds = this.originalImage.getBoundingRect(true, true);
                     const exportRegion = this._getClampedCanvasRegion(imageBounds, { includePartialPixels: false });
-                    return await this._exportCanvasRegionToDataURL({
+                    return this._exportCanvasRegionToDataURL({
                         ...exportRegion,
                         multiplier,
                         quality,
@@ -2420,7 +2847,7 @@ function ensureFabric() {
                 const exportRegion = this._getClampedCanvasRegion(imageBounds, { includePartialPixels: false });
 
                 // Crop precisely in offscreen canvas
-                finalBase64 = await this._exportCanvasRegionToDataURL({
+                finalBase64 = this._exportCanvasRegionToDataURL({
                     ...exportRegion,
                     multiplier,
                     quality,
@@ -2478,6 +2905,7 @@ function ensureFabric() {
          */
         async exportImageFile(options = {}) {
             if (!this.originalImage) throw new Error('No image loaded');
+            this._assertIdleForOperation('exportImageFile');
             const {
                 mergeMask = true,
                 fileType = 'jpeg',
@@ -2519,6 +2947,7 @@ function ensureFabric() {
                             offscreenCanvas.width = imageElement.width;
                             offscreenCanvas.height = imageElement.height;
                             const context = offscreenCanvas.getContext('2d');
+                            if (!context) throw new Error('Unable to create 2D canvas context for export conversion');
                             context.drawImage(imageElement, 0, 0);
                             const convertedDataUrl = offscreenCanvas.toDataURL(`image/${safeFileType}`, quality);
                             resolve(convertedDataUrl);
@@ -2591,13 +3020,15 @@ function ensureFabric() {
                 if (this._cropHandlers && this._cropHandlers.length) {
                     this._cropHandlers.forEach(targetHandlers => {
                         targetHandlers.handlers.forEach(handlerRecord => {
-                            targetHandlers.target.off(handlerRecord.eventName, handlerRecord.handler);
+                            if (targetHandlers.target && typeof targetHandlers.target.off === 'function') {
+                                targetHandlers.target.off(handlerRecord.eventName, handlerRecord.handler);
+                            }
                         });
                     });
                 }
             } catch (error) { void error; }
 
-            try { this.canvas.remove(this._cropRect); } catch (error) { void error; }
+            try { if (this.canvas) this.canvas.remove(this._cropRect); } catch (error) { void error; }
             this._cropRect = null;
             this._cropHandlers = [];
         }
@@ -2613,7 +3044,9 @@ function ensureFabric() {
          */
         enterCropMode() {
             if (!this.canvas || !this.originalImage || this._cropMode) return;
+            if (!this._canMutateNow('enterCropMode')) return;
             if (!this.isImageLoaded()) return;
+            this._removeCropRect();
             this._cropMode = true;
 
             // Disable group selection so only the crop rectangle can be manipulated.
@@ -2747,17 +3180,18 @@ function ensureFabric() {
          */
         async applyCrop() {
             if (!this.canvas || !this._cropMode || !this._cropRect) return;
+            this._assertIdleForOperation('applyCrop');
 
             // Fabric does not update control coordinates automatically after programmatic transforms.
             this._cropRect.setCoords();
             const rectBounds = this._cropRect.getBoundingRect(true, true);
 
-            const cropRegion = this._getClampedCanvasRegion(rectBounds);
+            const cropRegion = this._getClampedCanvasRegion(rectBounds, { includePartialPixels: false });
             const shouldPreserveMasks = !!(this.options.crop && this.options.crop.preserveMasksAfterCrop);
 
             this._restoreCropObjectState();
 
-            let beforeJson = null;
+            let beforeJson;
             try {
                 beforeJson = this._serializeCanvasState();
             } catch (error) {
@@ -2782,12 +3216,8 @@ function ensureFabric() {
                             this._removeLabelForMask(mask);
                             this.canvas.remove(mask);
                             if (shouldPreserveMasks && intersectsCrop) {
-                                mask.set({
-                                    left: (mask.left || 0) - cropRegion.sourceX,
-                                    top: (mask.top || 0) - cropRegion.sourceY,
-                                    visible: true
-                                });
-                                mask.setCoords();
+                                this._translateObjectByCanvasOffset(mask, -cropRegion.sourceX, -cropRegion.sourceY);
+                                mask.set({ visible: true });
                                 preservedMasks.push(mask);
                             }
                         } catch (error) {
@@ -2825,7 +3255,7 @@ function ensureFabric() {
 
             // Load the cropped image as the new base image.
             try {
-                await this.loadImage(croppedBase64);
+                await this.loadImage(croppedBase64, { resetMaskCounter: false });
                 if (preservedMasks.length) {
                     preservedMasks.forEach(mask => {
                         this._rebindMaskEvents(mask);
@@ -2843,9 +3273,9 @@ function ensureFabric() {
             }
 
             // Create an after snapshot and push one history command for the crop operation.
-            let afterJson = null;
+            let afterJson;
             try {
-                afterJson = this._serializeCanvasState();
+                afterJson = preservedMasks.length ? this._serializeCanvasState() : this._lastSnapshot;
             } catch (error) {
                 this._reportWarning('applyCrop: failed to serialize after state', error);
                 afterJson = null;
@@ -2871,7 +3301,7 @@ function ensureFabric() {
          * @private
          */
         _updateInputs() {
-            const scaleInputElement = document.getElementById(this.elements.scaleRate);
+            const scaleInputElement = this._getElement('scaleRate');
             if (scaleInputElement) scaleInputElement.value = Math.round(this.currentScale * 100);
         }
 
@@ -2881,6 +3311,7 @@ function ensureFabric() {
          * @private
          */
         _updateUI() {
+            if (!this.canvas) return;
             const hasImage = !!this.originalImage;
             const masks = hasImage ? this.canvas.getObjects().filter(object => object.maskId) : [];
             const hasMasks = masks.length > 0;
@@ -2894,7 +3325,7 @@ function ensureFabric() {
             if (isInCropMode) {
                 // Disable all controls except the crop action buttons while crop mode is active.
                 for (const key of Object.keys(this.elements || {})) {
-                    const element = document.getElementById(this.elements[key]);
+                    const element = this._getElement(key);
                     if (!element) continue;
                     if (key === 'applyCropBtn' || key === 'cancelCropBtn') {
                         this._setDisabled(key, false);
@@ -2932,7 +3363,7 @@ function ensureFabric() {
          * @private
          */
         _setDisabled(key, disabled) {
-            const element = document.getElementById(this.elements[key]);
+            const element = this._getElement(key);
             if (!element) return;
             if ('disabled' in element) {
                 element.disabled = !!disabled;
@@ -2970,16 +3401,66 @@ function ensureFabric() {
          * @private
          */
         _setPlaceholderVisible(show) {
-            if (!this.placeholderElement || !this.containerElement) return;
-            if (show) {
-                this.placeholderElement.classList.remove('d-none');
-                this.placeholderElement.classList.add('d-flex');
-                this.containerElement.classList.add('d-none');
+            if (this.placeholderElement) this._setElementVisible(this.placeholderElement, show);
+            const canvasVisibilityElement = this._getCanvasVisibilityElement();
+            if (canvasVisibilityElement && canvasVisibilityElement !== this.placeholderElement) {
+                this._setElementVisible(canvasVisibilityElement, !show);
+            }
+        }
+
+        _getCanvasVisibilityElement() {
+            const wrapperElement = this.canvas && this.canvas.wrapperEl ? this.canvas.wrapperEl : null;
+            if (
+                this.containerElement &&
+                this.placeholderElement &&
+                (this.containerElement === this.placeholderElement || this.containerElement.contains(this.placeholderElement))
+            ) {
+                return wrapperElement || this.canvasElement;
+            }
+            return this.containerElement || wrapperElement || this.canvasElement;
+        }
+
+        /**
+         * Updates element visibility.
+         *
+         * @param {HTMLElement} element - Element whose visibility should be updated.
+         * @param {boolean} isVisible - If true, removes the hidden state.
+         * @returns {void}
+         * @private
+         */
+        _setElementVisible(element, isVisible) {
+            if (!element) return;
+            this._rememberElementVisibility(element);
+            element.hidden = !isVisible;
+            element.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
+            if (element.classList) {
+                element.classList.toggle('d-none', !isVisible);
+            }
+        }
+
+        _rememberElementVisibility(element) {
+            if (!element || this._visibilityStateByElement.has(element)) return;
+            this._visibilityStateByElement.set(element, this._captureElementVisibility(element));
+        }
+
+        _captureElementVisibility(element) {
+            if (!element) return null;
+            return {
+                hidden: element.hidden,
+                ariaHidden: element.getAttribute('aria-hidden'),
+                className: element.className
+            };
+        }
+
+        _restoreElementVisibility(element, state) {
+            if (!element || !state) return;
+            element.hidden = !!state.hidden;
+            if (state.ariaHidden === null) {
+                element.removeAttribute('aria-hidden');
             } else {
-                this.placeholderElement.classList.remove('d-flex');
-                this.placeholderElement.classList.add('d-none');
-                this.containerElement.classList.remove('d-none');
+                element.setAttribute('aria-hidden', state.ariaHidden);
             }
+            element.className = state.className || '';
         }
 
         /**
@@ -2988,11 +3469,16 @@ function ensureFabric() {
          * @public
          */
         dispose() {
+            this._disposed = true;
+            this._rejectActiveAnimations(new Error('Editor disposed during animation'));
+            if (this.animationQueue) {
+                this.animationQueue.cancelAll(new Error('Editor disposed'));
+            }
+
             // Remove bound DOM event listeners
             try {
-                for (const key in (this._handlersByElementKey || {})) {
-                    const handlers = this._handlersByElementKey[key] || [];
-                    const element = document.getElementById(this.elements[key]);
+                for (const [key, handlers] of Object.entries(this._handlersByElementKey || {})) {
+                    const element = this._getElement(key);
                     if (!element) continue;
                     handlers.forEach(handlerRecord => {
                         try { element.removeEventListener(handlerRecord.eventName, handlerRecord.handler); } catch (error) { void error; }
@@ -3005,8 +3491,25 @@ function ensureFabric() {
                 this._cropRect = null;
             }
 
-            if (this.containerElement && this._containerOriginalOverflow !== undefined) {
-                try { this.containerElement.style.overflow = this._containerOriginalOverflow; } catch (error) { void error; }
+            if (this.containerElement && this._containerOriginalOverflow) {
+                try { this._restoreContainerOverflowState(); } catch (error) { void error; }
+            }
+
+            if (this._visibilityStateByElement) {
+                try {
+                    [this.placeholderElement, this._getCanvasVisibilityElement()].forEach(element => {
+                        const state = element ? this._visibilityStateByElement.get(element) : null;
+                        if (state) this._restoreElementVisibility(element, state);
+                    });
+                } catch (error) { void error; }
+            }
+
+            if (this.canvasElement && this._canvasElementOriginalStyle) {
+                try {
+                    this.canvasElement.style.display = this._canvasElementOriginalStyle.display;
+                    this.canvasElement.style.width = this._canvasElementOriginalStyle.width;
+                    this.canvasElement.style.height = this._canvasElementOriginalStyle.height;
+                } catch (error) { void error; }
             }
 
             if (this.canvas) {
@@ -3016,6 +3519,19 @@ function ensureFabric() {
                 this.isImageLoadedToCanvas = false;
             }
             this._handlersByElementKey = {};
+            this._elementCache = {};
+            this._clearMaskPlacementMemory();
+            this.originalImage = null;
+            this.baseImageScale = 1;
+            this.currentScale = 1;
+            this.currentRotation = 0;
+            this.isAnimating = false;
+            this._cropMode = false;
+            this._cropRect = null;
+            this._cropHandlers = [];
+            this._cropPrevEvented = null;
+            this._prevSelectionSetting = undefined;
+            this._initialized = false;
         }
     }
 
@@ -3068,6 +3584,7 @@ function ensureFabric() {
              * @type {boolean}
              */
             this.isRunning = false;
+            this.currentTask = null;
         }
 
         /**
@@ -3078,13 +3595,32 @@ function ensureFabric() {
          */
         async add(animationFn) {
             return new Promise((resolve, reject) => {
-                this.animationTasks.push({ animationFn, resolve, reject });
+                this.animationTasks.push({ animationFn, resolve, reject, isSettled: false });
                 if (!this.isRunning) {
                     this._drainQueue();
                 }
             });
         }
 
+        isBusy() {
+            return this.isRunning || this.animationTasks.length > 0;
+        }
+
+        cancelAll(reason = new Error('Animation queue cancelled')) {
+            const cancellationError = reason instanceof Error ? reason : new Error(String(reason));
+            const tasks = [
+                ...(this.currentTask ? [this.currentTask] : []),
+                ...this.animationTasks.splice(0)
+            ];
+            tasks.forEach(task => {
+                if (!task || task.isSettled) return;
+                task.isSettled = true;
+                task.reject(cancellationError);
+            });
+            this.isRunning = false;
+            this.currentTask = null;
+        }
+
         /**
          * Runs queued animation tasks sequentially until the queue is empty.
          *
@@ -3092,22 +3628,30 @@ function ensureFabric() {
          * @returns {Promise<void>}
          */
         async _drainQueue() {
-            if (this.animationTasks.length === 0) {
-                this.isRunning = false;
-                return;
-            }
-
+            if (this.isRunning) return;
             this.isRunning = true;
-            const { animationFn, resolve, reject } = this.animationTasks.shift();
 
-            try {
-                const result = await animationFn();
-                resolve(result);
-            } catch (error) {
-                reject(error);
+            while (this.animationTasks.length > 0) {
+                const task = this.animationTasks.shift();
+                this.currentTask = task;
+
+                try {
+                    const result = await task.animationFn();
+                    if (!task.isSettled) {
+                        task.isSettled = true;
+                        task.resolve(result);
+                    }
+                } catch (error) {
+                    if (!task.isSettled) {
+                        task.isSettled = true;
+                        task.reject(error);
+                    }
+                } finally {
+                    if (this.currentTask === task) this.currentTask = null;
+                }
             }
 
-            await this._drainQueue();
+            this.isRunning = false;
         }
     }
 
@@ -3163,16 +3707,8 @@ function ensureFabric() {
          * @private
          */
         enqueue(task) {
-            const nextTask = this.pending.then(task, task);
-            let pendingAfterTask;
-            const resetPending = () => {
-                if (this.pending === pendingAfterTask) {
-                    this.pending = Promise.resolve();
-                }
-            };
-
-            pendingAfterTask = nextTask.then(resetPending, resetPending);
-            this.pending = pendingAfterTask;
+            const nextTask = this.pending.then(() => Promise.resolve().then(task));
+            this.pending = nextTask.catch(() => undefined);
             return nextTask;
         }
 
@@ -3184,8 +3720,14 @@ function ensureFabric() {
          * @returns {void}
          */
         execute(command) {
-            command.execute();
+            const result = command.execute();
+            if (result && typeof result.then === 'function') {
+                return Promise.resolve(result).then(() => {
+                    this.push(command);
+                });
+            }
             this.push(command);
+            return result;
         }
 
         /**
@@ -3205,9 +3747,8 @@ function ensureFabric() {
 
             if (this.history.length > this.maxSize) {
                 this.history.shift();
-            } else {
-                this.currentIndex++;
             }
+            this.currentIndex = this.history.length - 1;
         }
 
         /**