@bensitu/image-editor 2.0.0 → 2.1.0

package/dist/cjs/index.cjs

@@ -52,20 +52,27 @@ class AnimationQueue {
         return this.add(() => Promise.resolve()).then(() => undefined, () => undefined);
     }
     async drainQueue() {
-        if (this.queue.length === 0) {
-            this.running = false;
+        if (this.running)
             return;
-        }
         this.running = true;
-        const entry = this.queue.shift();
         try {
-            await entry.run();
-            entry.resolve();
+            while (this.queue.length > 0) {
+                const entry = this.queue.shift();
+                try {
+                    await entry.run();
+                    entry.resolve();
+                }
+                catch (error) {
+                    entry.reject(error);
+                }
+            }
         }
-        catch (error) {
-            entry.reject(error);
+        finally {
+            this.running = false;
+            if (this.queue.length > 0) {
+                void this.drainQueue();
+            }
         }
-        void this.drainQueue();
     }
 }
 
@@ -92,6 +99,61 @@ function reportError(options, error, message) {
     }
 }
 
+const FORMAT_ALIAS_TABLE = Object.freeze({
+    jpeg: 'jpeg',
+    jpg: 'jpeg',
+    'image/jpeg': 'jpeg',
+    png: 'png',
+    'image/png': 'png',
+    webp: 'webp',
+    'image/webp': 'webp',
+});
+const MIME_TABLE = Object.freeze({
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    webp: 'image/webp',
+});
+function normalizeImageFormat(input) {
+    var _a;
+    return (_a = tryNormalizeImageFormat(input)) !== null && _a !== void 0 ? _a : 'jpeg';
+}
+function tryNormalizeImageFormat(input) {
+    var _a;
+    if (!input)
+        return null;
+    const key = String(input).toLowerCase();
+    if (Object.prototype.hasOwnProperty.call(FORMAT_ALIAS_TABLE, key)) {
+        return (_a = FORMAT_ALIAS_TABLE[key]) !== null && _a !== void 0 ? _a : null;
+    }
+    return null;
+}
+function mimeTypeFor(format) {
+    return MIME_TABLE[format];
+}
+function clampQuality(quality, fallback) {
+    const numeric = Number(quality);
+    if (!Number.isFinite(numeric))
+        return fallback;
+    return Math.max(0, Math.min(1, numeric));
+}
+function resolveExportFormat(options, downsampleQuality) {
+    var _a;
+    const providedOptions = options !== null && options !== void 0 ? options : {};
+    const fileType = providedOptions.fileType;
+    const formatAlias = providedOptions.format;
+    const requested = fileType || formatAlias;
+    const format = normalizeImageFormat(requested);
+    const mimeType = mimeTypeFor(format);
+    if (format === 'png') {
+        return { format, mimeType, quality: undefined };
+    }
+    const rawQuality = (_a = providedOptions.quality) !== null && _a !== void 0 ? _a : downsampleQuality;
+    const quality = clampQuality(rawQuality, downsampleQuality);
+    return { format, mimeType, quality };
+}
+
+const EMPTY_DEFAULT_MASK_CONFIG = Object.freeze({});
+const DEFAULT_LAYOUT_MODE = 'expand';
 const DEFAULT_OPTIONS = {
     canvasWidth: 800,
     canvasHeight: 600,
@@ -101,9 +163,8 @@ const DEFAULT_OPTIONS = {
     maxScale: 5.0,
     scaleStep: 0.05,
     rotationStep: 90,
-    expandCanvasToImage: true,
-    fitImageToCanvas: false,
-    coverImageToCanvas: false,
+    defaultLayoutMode: DEFAULT_LAYOUT_MODE,
+    layoutMode: DEFAULT_LAYOUT_MODE,
     downsampleOnLoad: true,
     downsampleMaxWidth: 4000,
     downsampleMaxHeight: 3000,
@@ -118,6 +179,7 @@ const DEFAULT_OPTIONS = {
     mergeMaskByDefault: true,
     defaultMaskWidth: 50,
     defaultMaskHeight: 80,
+    defaultMaskConfig: EMPTY_DEFAULT_MASK_CONFIG,
     maskRotatable: false,
     maskLabelOnSelect: true,
     maskLabelOffset: 3,
@@ -159,6 +221,16 @@ const DEFAULT_CROP = {
     preserveMasksAfterCrop: false,
     allowRotationOfCropRect: false,
     exportFileType: 'source'};
+const DEFAULT_MOSAIC_CONFIG = Object.freeze({
+    brushSize: 48,
+    blockSize: 8,
+    previewStroke: '#333',
+    previewStrokeWidth: 1,
+    previewStrokeDashArray: Object.freeze([4, 4]),
+    previewFill: 'rgba(0,0,0,0)',
+    outputFileType: 'source',
+    outputQuality: undefined,
+});
 const KNOWN_TOP_LEVEL_KEYS = new Set([
     'canvasWidth',
     'canvasHeight',
@@ -168,9 +240,7 @@ const KNOWN_TOP_LEVEL_KEYS = new Set([
     'maxScale',
     'scaleStep',
     'rotationStep',
-    'expandCanvasToImage',
-    'fitImageToCanvas',
-    'coverImageToCanvas',
+    'defaultLayoutMode',
     'downsampleOnLoad',
     'downsampleMaxWidth',
     'downsampleMaxHeight',
@@ -185,6 +255,7 @@ const KNOWN_TOP_LEVEL_KEYS = new Set([
     'mergeMaskByDefault',
     'defaultMaskWidth',
     'defaultMaskHeight',
+    'defaultMaskConfig',
     'maskRotatable',
     'maskLabelOnSelect',
     'maskLabelOffset',
@@ -205,10 +276,44 @@ const KNOWN_TOP_LEVEL_KEYS = new Set([
     'onWarning',
     'label',
     'crop',
+    'defaultMosaicConfig',
 ]);
 function normalizeCallback(value) {
     return typeof value === 'function' ? value : null;
 }
+function isLayoutMode(value) {
+    return value === 'fit' || value === 'cover' || value === 'expand';
+}
+function normalizeLayoutMode(value) {
+    return isLayoutMode(value) ? value : DEFAULT_LAYOUT_MODE;
+}
+function isConfigObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function copyDefaultMaskConfigValue(value) {
+    return Array.isArray(value) ? [...value] : value;
+}
+function normalizeDefaultMaskConfig(value) {
+    if (!isConfigObject(value))
+        return EMPTY_DEFAULT_MASK_CONFIG;
+    const normalized = {};
+    for (const [key, optionValue] of Object.entries(value)) {
+        if (key === 'onCreate' || key === 'fabricGenerator' || key === 'styles')
+            continue;
+        normalized[key] = copyDefaultMaskConfigValue(optionValue);
+    }
+    const styles = value.styles;
+    if (isConfigObject(styles)) {
+        const copiedStyles = {};
+        for (const [key, styleValue] of Object.entries(styles)) {
+            copiedStyles[key] = copyDefaultMaskConfigValue(styleValue);
+        }
+        Object.freeze(copiedStyles);
+        normalized.styles = copiedStyles;
+    }
+    Object.freeze(normalized);
+    return normalized;
+}
 function normalizePositiveInteger(value, fallback) {
     const numeric = Number(value);
     if (!Number.isFinite(numeric) || numeric <= 0)
@@ -264,6 +369,151 @@ function normalizeOptionalQuality(value) {
         return undefined;
     return Math.max(0, Math.min(1, numeric));
 }
+function hasOwn(object, key) {
+    return Object.prototype.hasOwnProperty.call(object, key);
+}
+function isFiniteNumber$1(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+function normalizeMosaicPositiveNumber(value, fallback) {
+    return isFiniteNumber$1(value) && value > 0 ? value : fallback;
+}
+function normalizeMosaicBlockSize(value, fallback) {
+    return isFiniteNumber$1(value) && value > 0 ? Math.max(1, Math.floor(value)) : fallback;
+}
+function normalizeMosaicNonNegativeNumber(value, fallback) {
+    return isFiniteNumber$1(value) && value >= 0 ? value : fallback;
+}
+function normalizeMosaicDashArray(value, fallback) {
+    if (value === null)
+        return null;
+    if (Array.isArray(value) &&
+        value.every((entry) => typeof entry === 'number' && Number.isFinite(entry) && entry >= 0)) {
+        return [...value];
+    }
+    return fallback ? [...fallback] : null;
+}
+function normalizeMosaicOutputFileType(value, fallback) {
+    var _a;
+    if (value === 'source')
+        return 'source';
+    if (typeof value !== 'string')
+        return fallback;
+    return (_a = tryNormalizeImageFormat(value)) !== null && _a !== void 0 ? _a : fallback;
+}
+function normalizeMosaicOutputQuality(value, fallback) {
+    if (value === undefined || value === null)
+        return undefined;
+    if (!isFiniteNumber$1(value))
+        return fallback;
+    return Math.max(0, Math.min(1, value));
+}
+function cloneResolvedMosaicConfig(config) {
+    return {
+        ...config,
+        previewStrokeDashArray: config.previewStrokeDashArray
+            ? [...config.previewStrokeDashArray]
+            : null,
+    };
+}
+function normalizeMosaicConfig(input, fallback) {
+    if (!isConfigObject(input))
+        return cloneResolvedMosaicConfig(fallback);
+    return mergeMosaicConfigPatch(fallback, input);
+}
+function mergeMosaicConfigPatch(current, patch, fallback = current) {
+    const raw = isConfigObject(patch) ? patch : {};
+    const next = cloneResolvedMosaicConfig(current);
+    if (hasOwn(raw, 'brushSize')) {
+        next.brushSize = normalizeMosaicPositiveNumber(raw.brushSize, fallback.brushSize);
+    }
+    if (hasOwn(raw, 'blockSize')) {
+        next.blockSize = normalizeMosaicBlockSize(raw.blockSize, fallback.blockSize);
+    }
+    if (hasOwn(raw, 'previewStroke')) {
+        next.previewStroke =
+            typeof raw.previewStroke === 'string' ? raw.previewStroke : fallback.previewStroke;
+    }
+    if (hasOwn(raw, 'previewStrokeWidth')) {
+        next.previewStrokeWidth = normalizeMosaicNonNegativeNumber(raw.previewStrokeWidth, fallback.previewStrokeWidth);
+    }
+    if (hasOwn(raw, 'previewStrokeDashArray')) {
+        next.previewStrokeDashArray = normalizeMosaicDashArray(raw.previewStrokeDashArray, fallback.previewStrokeDashArray);
+    }
+    if (hasOwn(raw, 'previewFill')) {
+        next.previewFill =
+            typeof raw.previewFill === 'string' ? raw.previewFill : fallback.previewFill;
+    }
+    if (hasOwn(raw, 'outputFileType')) {
+        next.outputFileType = normalizeMosaicOutputFileType(raw.outputFileType, fallback.outputFileType);
+    }
+    if (hasOwn(raw, 'outputQuality')) {
+        next.outputQuality = normalizeMosaicOutputQuality(raw.outputQuality, fallback.outputQuality);
+    }
+    return next;
+}
+function getInvalidMosaicConfigFields(input) {
+    const raw = isConfigObject(input) ? input : {};
+    const invalid = [];
+    if (hasOwn(raw, 'brushSize') &&
+        !(typeof raw.brushSize === 'number' && Number.isFinite(raw.brushSize) && raw.brushSize > 0)) {
+        invalid.push('brushSize');
+    }
+    if (hasOwn(raw, 'blockSize') &&
+        !(typeof raw.blockSize === 'number' && Number.isFinite(raw.blockSize) && raw.blockSize > 0)) {
+        invalid.push('blockSize');
+    }
+    if (hasOwn(raw, 'previewStroke') && typeof raw.previewStroke !== 'string') {
+        invalid.push('previewStroke');
+    }
+    if (hasOwn(raw, 'previewStrokeWidth') &&
+        !(typeof raw.previewStrokeWidth === 'number' &&
+            Number.isFinite(raw.previewStrokeWidth) &&
+            raw.previewStrokeWidth >= 0)) {
+        invalid.push('previewStrokeWidth');
+    }
+    if (hasOwn(raw, 'previewStrokeDashArray')) {
+        const value = raw.previewStrokeDashArray;
+        const valid = value === null ||
+            (Array.isArray(value) &&
+                value.every((entry) => typeof entry === 'number' && Number.isFinite(entry) && entry >= 0));
+        if (!valid)
+            invalid.push('previewStrokeDashArray');
+    }
+    if (hasOwn(raw, 'previewFill') && typeof raw.previewFill !== 'string') {
+        invalid.push('previewFill');
+    }
+    if (hasOwn(raw, 'outputFileType')) {
+        const value = raw.outputFileType;
+        const valid = value === 'source' || (typeof value === 'string' && tryNormalizeImageFormat(value));
+        if (!valid)
+            invalid.push('outputFileType');
+    }
+    if (hasOwn(raw, 'outputQuality') &&
+        raw.outputQuality !== undefined &&
+        raw.outputQuality !== null &&
+        !(typeof raw.outputQuality === 'number' && Number.isFinite(raw.outputQuality))) {
+        invalid.push('outputQuality');
+    }
+    return invalid;
+}
+function areResolvedMosaicConfigsEqual(left, right) {
+    const leftDash = left.previewStrokeDashArray;
+    const rightDash = right.previewStrokeDashArray;
+    const dashEqual = leftDash === rightDash ||
+        (Array.isArray(leftDash) &&
+            Array.isArray(rightDash) &&
+            leftDash.length === rightDash.length &&
+            leftDash.every((value, index) => value === rightDash[index]));
+    return (left.brushSize === right.brushSize &&
+        left.blockSize === right.blockSize &&
+        left.previewStroke === right.previewStroke &&
+        left.previewStrokeWidth === right.previewStrokeWidth &&
+        dashEqual &&
+        left.previewFill === right.previewFill &&
+        left.outputFileType === right.outputFileType &&
+        left.outputQuality === right.outputQuality);
+}
 function resolveOptions(input) {
     var _a, _b, _c, _d;
     const raw = input !== null && input !== void 0 ? input : {};
@@ -271,7 +521,7 @@ function resolveOptions(input) {
     for (const key of Object.keys(raw)) {
         if (!KNOWN_TOP_LEVEL_KEYS.has(key))
             continue;
-        if (key === 'label' || key === 'crop')
+        if (key === 'label' || key === 'crop' || key === 'defaultMosaicConfig')
             continue;
         if (key === 'onImageLoadStart' ||
             key === 'onImageLoaded' ||
@@ -300,6 +550,12 @@ function resolveOptions(input) {
             resolved.exportAreaByDefault = normalizeExportArea(value);
             continue;
         }
+        if (key === 'defaultLayoutMode') {
+            const layoutMode = normalizeLayoutMode(value);
+            resolved.defaultLayoutMode = layoutMode;
+            resolved.layoutMode = layoutMode;
+            continue;
+        }
         if (key === 'canvasWidth') {
             resolved.canvasWidth = normalizePositiveInteger(value, DEFAULT_OPTIONS.canvasWidth);
             continue;
@@ -352,6 +608,10 @@ function resolveOptions(input) {
             resolved.defaultMaskHeight = normalizePositiveFiniteNumber(value, DEFAULT_OPTIONS.defaultMaskHeight);
             continue;
         }
+        if (key === 'defaultMaskConfig') {
+            resolved.defaultMaskConfig = normalizeDefaultMaskConfig(value);
+            continue;
+        }
         if (key === 'maskLabelOffset') {
             resolved.maskLabelOffset = normalizeNonNegativeFiniteNumber(value, DEFAULT_OPTIONS.maskLabelOffset);
             continue;
@@ -403,11 +663,17 @@ function resolveOptions(input) {
         exportQuality: normalizeOptionalQuality(userCrop.exportQuality),
     };
     Object.freeze(crop);
-    return {
+    const defaultMosaicConfig = normalizeMosaicConfig(raw.defaultMosaicConfig, DEFAULT_MOSAIC_CONFIG);
+    if (defaultMosaicConfig.previewStrokeDashArray) {
+        Object.freeze(defaultMosaicConfig.previewStrokeDashArray);
+    }
+    Object.freeze(defaultMosaicConfig);
+    return Object.freeze({
         ...resolved,
         label,
         crop,
-    };
+        defaultMosaicConfig,
+    });
 }
 
 class OperationGuard {
@@ -442,6 +708,12 @@ class OperationGuard {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "animationAborters", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
     }
     isAnimating() {
         return this.isAnimationActive;
@@ -470,6 +742,28 @@ class OperationGuard {
         this.isLoadingActive = false;
         this.currentOperationName = null;
         this.currentOperationToken = null;
+        for (const abort of this.animationAborters) {
+            try {
+                abort();
+            }
+            catch {
+            }
+        }
+        this.animationAborters.clear();
+    }
+    registerAnimationAborter(abort) {
+        if (this.isDisposedFlag) {
+            try {
+                abort();
+            }
+            catch {
+            }
+            return () => undefined;
+        }
+        this.animationAborters.add(abort);
+        return () => {
+            this.animationAborters.delete(abort);
+        };
     }
     beginLoading() {
         this.isLoadingActive = true;
@@ -560,6 +854,7 @@ const SNAPSHOT_CUSTOM_KEYS = [
     'borderColor',
     'cornerColor',
     'cornerSize',
+    'isMosaicPreview',
 ];
 function copySnapshotCustomPropsFromCanvas(canvasObjects, jsonObjects) {
     if (!Array.isArray(jsonObjects))
@@ -611,6 +906,8 @@ function copySnapshotCustomPropsFromCanvas(canvasObjects, jsonObjects) {
             jsonObject.isCropRect = true;
         if (liveObject.maskLabel === true)
             jsonObject.maskLabel = true;
+        if (liveObject.isMosaicPreview === true)
+            jsonObject.isMosaicPreview = true;
     }
 }
 function isActiveSelectionObject(object) {
@@ -621,9 +918,7 @@ function isActiveSelectionObject(object) {
         return true;
     const isType = object.isType;
     return (typeof isType === 'function' &&
-        (isType.call(object, 'ActiveSelection') ||
-            isType.call(object, 'activeSelection') ||
-            isType.call(object, 'activeselection')));
+        (isType.call(object, 'ActiveSelection') || isType.call(object, 'activeSelection')));
 }
 function saveState(input) {
     var _a, _b, _c;
@@ -640,7 +935,7 @@ function saveState(input) {
     const jsonObj = canvas.toJSON(SNAPSHOT_CUSTOM_KEYS);
     copySnapshotCustomPropsFromCanvas(canvas.getObjects(), jsonObj.objects);
     if (Array.isArray(jsonObj.objects)) {
-        jsonObj.objects = jsonObj.objects.filter((o) => o.isCropRect !== true && o.maskLabel !== true);
+        jsonObj.objects = jsonObj.objects.filter((o) => o.isCropRect !== true && o.maskLabel !== true && o.isMosaicPreview !== true);
     }
     jsonObj._editorState = {
         currentScale,
@@ -1312,59 +1607,6 @@ function getObjectBBox(object) {
     };
 }
 
-const FORMAT_ALIAS_TABLE = Object.freeze({
-    jpeg: 'jpeg',
-    jpg: 'jpeg',
-    'image/jpeg': 'jpeg',
-    png: 'png',
-    'image/png': 'png',
-    webp: 'webp',
-    'image/webp': 'webp',
-});
-const MIME_TABLE = Object.freeze({
-    jpeg: 'image/jpeg',
-    png: 'image/png',
-    webp: 'image/webp',
-});
-function normalizeImageFormat(input) {
-    var _a;
-    return (_a = tryNormalizeImageFormat(input)) !== null && _a !== void 0 ? _a : 'jpeg';
-}
-function tryNormalizeImageFormat(input) {
-    var _a;
-    if (!input)
-        return null;
-    const key = String(input).toLowerCase();
-    if (Object.prototype.hasOwnProperty.call(FORMAT_ALIAS_TABLE, key)) {
-        return (_a = FORMAT_ALIAS_TABLE[key]) !== null && _a !== void 0 ? _a : null;
-    }
-    return null;
-}
-function mimeTypeFor(format) {
-    return MIME_TABLE[format];
-}
-function clampQuality(quality, fallback) {
-    const numeric = Number(quality);
-    if (!Number.isFinite(numeric))
-        return fallback;
-    return Math.max(0, Math.min(1, numeric));
-}
-function resolveExportFormat(options, downsampleQuality) {
-    var _a;
-    const providedOptions = options !== null && options !== void 0 ? options : {};
-    const fileType = providedOptions.fileType;
-    const formatAlias = providedOptions.format;
-    const requested = fileType || formatAlias;
-    const format = normalizeImageFormat(requested);
-    const mimeType = mimeTypeFor(format);
-    if (format === 'png') {
-        return { format, mimeType, quality: undefined };
-    }
-    const rawQuality = (_a = providedOptions.quality) !== null && _a !== void 0 ? _a : downsampleQuality;
-    const quality = clampQuality(rawQuality, downsampleQuality);
-    return { format, mimeType, quality };
-}
-
 const CROP_RECT_FILL = 'rgba(0,0,0,0.12)';
 const CROP_RECT_STROKE = '#00aaff';
 const CROP_RECT_DASH = [6, 4];
@@ -1479,14 +1721,16 @@ function maskIntersectsRegion(mask, region) {
 function capturePreservedMasks(canvas, cropRegion, maskBackups = []) {
     var _a;
     const records = [];
-    const styleBackupByMask = new Map(maskBackups.map((backup) => [backup.object, backup]));
+    const styleBackupByMask = maskBackups.length > 0
+        ? new Map(maskBackups.map((backup) => [backup.object, backup]))
+        : null;
     const masks = canvas.getObjects().filter(isMaskObject);
     for (const mask of masks) {
         try {
             mask.setCoords();
             const intersects = maskIntersectsRegion(mask, cropRegion);
             if (intersects) {
-                const styleBackup = (_a = styleBackupByMask.get(mask)) !== null && _a !== void 0 ? _a : captureMaskStyleBackup(mask);
+                const styleBackup = (_a = styleBackupByMask === null || styleBackupByMask === void 0 ? void 0 : styleBackupByMask.get(mask)) !== null && _a !== void 0 ? _a : captureMaskStyleBackup(mask);
                 records.push({
                     mask,
                     left: finiteNumberOrFallback(mask.left, 0),
@@ -1762,62 +2006,948 @@ async function applyCrop(context) {
     }
 }
 
-function resolveMultiplier(requested, fallback) {
-    const num = Number(requested);
-    if (Number.isFinite(num) && num > 0)
-        return num;
-    const fallbackValue = Number(fallback);
-    return Number.isFinite(fallbackValue) && fallbackValue > 0 ? fallbackValue : 1;
-}
-function resolveExportArea(requested, fallback) {
-    if (requested === 'canvas' || requested === 'image')
-        return requested;
-    return fallback === 'canvas' ? 'canvas' : 'image';
-}
-function resolveExportOptions(context, options) {
-    const providedOptions = options !== null && options !== void 0 ? options : {};
+function computeDownsampleDimensions(srcWidth, srcHeight, maxWidth, maxHeight) {
+    if (!isPositiveFinite$1(srcWidth) ||
+        !isPositiveFinite$1(srcHeight) ||
+        !isPositiveFinite$1(maxWidth) ||
+        !isPositiveFinite$1(maxHeight)) {
+        return {
+            width: Math.max(1, Math.round(srcWidth) || 1),
+            height: Math.max(1, Math.round(srcHeight) || 1),
+            needsResize: false,
+        };
+    }
+    const needsResize = srcWidth > maxWidth || srcHeight > maxHeight;
+    if (!needsResize) {
+        return { width: srcWidth, height: srcHeight, needsResize: false };
+    }
+    const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
     return {
-        exportArea: resolveExportArea(providedOptions.exportArea, context.options.exportAreaByDefault),
-        mergeMask: typeof providedOptions.mergeMask === 'boolean'
-            ? providedOptions.mergeMask
-            : context.options.mergeMaskByDefault,
-        multiplier: resolveMultiplier(providedOptions.multiplier, context.options.exportMultiplier),
-        format: resolveExportFormat(providedOptions, context.options.downsampleQuality),
+        width: Math.max(1, Math.round(srcWidth * ratio)),
+        height: Math.max(1, Math.round(srcHeight * ratio)),
+        needsResize: true,
     };
 }
-function readCanvasDimension(canvas, getterName, propertyName) {
-    const canvasLike = canvas;
-    const getter = canvasLike[getterName];
-    const value = typeof getter === 'function' ? getter.call(canvasLike) : canvasLike[propertyName];
-    return Math.max(1, Math.ceil(Number.isFinite(value) ? Number(value) : 1));
+function isPositiveFinite$1(value) {
+    return Number.isFinite(value) && value > 0;
 }
-function assertExportPixelBudget(context, multiplier, region) {
-    var _a, _b;
-    const sourceWidth = (_a = region === null || region === void 0 ? void 0 : region.width) !== null && _a !== void 0 ? _a : readCanvasDimension(context.canvas, 'getWidth', 'width');
-    const sourceHeight = (_b = region === null || region === void 0 ? void 0 : region.height) !== null && _b !== void 0 ? _b : readCanvasDimension(context.canvas, 'getHeight', 'height');
-    const outputWidth = Math.max(1, Math.ceil(sourceWidth * multiplier));
-    const outputHeight = Math.max(1, Math.ceil(sourceHeight * multiplier));
-    const pixelCount = outputWidth * outputHeight;
-    const maxPixels = context.options.maxExportPixels;
-    if (!Number.isFinite(pixelCount) || pixelCount > maxPixels) {
-        throw new RangeError(`[ImageEditor] Export size ${outputWidth}x${outputHeight} ` +
-            `(${pixelCount} pixels) exceeds maxExportPixels (${maxPixels}).`);
+function selectDownsampleMimeType(sourceMime, preserveSourceFormat, downsampleMimeType) {
+    if (downsampleMimeType)
+        return downsampleMimeType;
+    if (preserveSourceFormat && (sourceMime === 'image/png' || sourceMime === 'image/webp')) {
+        return sourceMime;
     }
+    return 'image/jpeg';
 }
-function computeExportRegion(context, exportArea) {
-    if (exportArea === 'canvas')
-        return { region: null, partialEdges: null };
-    const originalImage = context.getOriginalImage();
-    if (!originalImage)
-        return { region: null, partialEdges: null };
-    const bounds = getObjectBBox(originalImage);
-    const canvasLike = context.canvas;
-    const canvasWidth = typeof canvasLike.getWidth === 'function' ? canvasLike.getWidth() : canvasLike.width;
-    const canvasHeight = typeof canvasLike.getHeight === 'function' ? canvasLike.getHeight() : canvasLike.height;
-    if (!hasMeaningfulCanvasRegion(bounds, canvasWidth, canvasHeight)) {
-        throw new ExportError('exportImageBase64 failed: image export region is empty.');
+function detectSourceMimeType(dataUrl) {
+    const match = /^data:(image\/[a-z0-9+\-.]+)\s*;/i.exec(dataUrl);
+    return match ? match[1].toLowerCase() : null;
+}
+function resampleImage(imageElement, maxWidth, maxHeight, sourceMime, preserveSourceFormat, downsampleMimeType, quality, ownerDocument) {
+    var _a;
+    const { width, height } = computeDownsampleDimensions(imageElement.naturalWidth, imageElement.naturalHeight, maxWidth, maxHeight);
+    const mimeType = selectDownsampleMimeType(sourceMime, preserveSourceFormat, downsampleMimeType);
+    const documentForCanvas = (_a = ownerDocument !== null && ownerDocument !== void 0 ? ownerDocument : imageElement.ownerDocument) !== null && _a !== void 0 ? _a : (typeof document !== 'undefined' ? document : null);
+    if (!documentForCanvas) {
+        throw new DownsampleError('Failed to obtain an owner document for downsampling.');
     }
-    return {
+    const offscreenCanvas = documentForCanvas.createElement('canvas');
+    offscreenCanvas.width = width;
+    offscreenCanvas.height = height;
+    const context = offscreenCanvas.getContext('2d');
+    if (!context) {
+        throw new DownsampleError('Failed to obtain a 2D context for downsampling.');
+    }
+    context.drawImage(imageElement, 0, 0, imageElement.naturalWidth, imageElement.naturalHeight, 0, 0, width, height);
+    const dataUrl = mimeType === 'image/png'
+        ? offscreenCanvas.toDataURL(mimeType)
+        : offscreenCanvas.toDataURL(mimeType, quality);
+    return { dataUrl, width, height, mimeType };
+}
+
+function withTimeout(promise, ms, label) {
+    return new Promise((resolve, reject) => {
+        const start = Date.now();
+        const timeoutId = setTimeout(() => {
+            reject(new ImageLoadTimeoutError(label, Date.now() - start));
+        }, ms);
+        promise.then((value) => {
+            clearTimeout(timeoutId);
+            resolve(value);
+        }, (err) => {
+            clearTimeout(timeoutId);
+            reject(err);
+        });
+    });
+}
+
+const MATRIX_DETERMINANT_EPSILON = 1e-8;
+const MATRIX_SCALE_EPSILON = 1e-8;
+function toMatrix2D(matrix) {
+    if (matrix.length < 6)
+        return null;
+    const a = matrix[0];
+    const b = matrix[1];
+    const c = matrix[2];
+    const d = matrix[3];
+    const e = matrix[4];
+    const f = matrix[5];
+    if (!Number.isFinite(a) ||
+        !Number.isFinite(b) ||
+        !Number.isFinite(c) ||
+        !Number.isFinite(d) ||
+        !Number.isFinite(e) ||
+        !Number.isFinite(f)) {
+        return null;
+    }
+    return { a: a, b: b, c: c, d: d, e: e, f: f };
+}
+function invertMatrix(matrix) {
+    const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+    if (!Number.isFinite(determinant) || Math.abs(determinant) < MATRIX_DETERMINANT_EPSILON) {
+        return null;
+    }
+    return {
+        a: matrix.d / determinant,
+        b: -matrix.b / determinant,
+        c: -matrix.c / determinant,
+        d: matrix.a / determinant,
+        e: (matrix.c * matrix.f - matrix.d * matrix.e) / determinant,
+        f: (matrix.b * matrix.e - matrix.a * matrix.f) / determinant,
+    };
+}
+function transformPoint(point, matrix) {
+    return {
+        x: matrix.a * point.x + matrix.c * point.y + matrix.e,
+        y: matrix.b * point.x + matrix.d * point.y + matrix.f,
+    };
+}
+function getSourceRadiusFromMatrix(matrix, canvasRadius) {
+    const scaleX = Math.hypot(matrix.a, matrix.b);
+    const scaleY = Math.hypot(matrix.c, matrix.d);
+    const minScale = Math.min(scaleX > MATRIX_SCALE_EPSILON ? scaleX : Number.POSITIVE_INFINITY, scaleY > MATRIX_SCALE_EPSILON ? scaleY : Number.POSITIVE_INFINITY);
+    if (!Number.isFinite(minScale) || minScale <= 0)
+        return canvasRadius;
+    return canvasRadius / minScale;
+}
+function getMosaicImagePoint(fabric, image, canvasPoint, brushDiameterCanvasPx) {
+    const width = Number(image.width) || 0;
+    const height = Number(image.height) || 0;
+    const brushDiameter = Number(brushDiameterCanvasPx);
+    if (width <= 0 ||
+        height <= 0 ||
+        !Number.isFinite(canvasPoint.x) ||
+        !Number.isFinite(canvasPoint.y) ||
+        !Number.isFinite(brushDiameter) ||
+        brushDiameter <= 0) {
+        return null;
+    }
+    const matrix = toMatrix2D(image.calcTransformMatrix());
+    if (!matrix)
+        return null;
+    const inverse = invertMatrix(matrix);
+    if (!inverse)
+        return null;
+    const localPoint = transformPoint(canvasPoint, inverse);
+    const sourceX = localPoint.x + width / 2;
+    const sourceY = localPoint.y + height / 2;
+    if (sourceX < 0 || sourceY < 0 || sourceX > width || sourceY > height) {
+        return null;
+    }
+    return {
+        sourceX,
+        sourceY,
+        sourceRadius: getSourceRadiusFromMatrix(matrix, brushDiameter / 2),
+    };
+}
+
+function normalizeBlockSize(value) {
+    return Number.isFinite(value) && value > 0 ? Math.max(1, Math.floor(value)) : 1;
+}
+function isInsideCircle(x, y, centerX, centerY, radiusSquared) {
+    const dx = x - centerX;
+    const dy = y - centerY;
+    return dx * dx + dy * dy <= radiusSquared;
+}
+function pixelOffset(width, x, y) {
+    return (y * width + x) * 4;
+}
+function applyCircularMosaicToImageData(options) {
+    var _a, _b, _c, _d;
+    const { imageData } = options;
+    const { width, height, data } = imageData;
+    const centerX = Number(options.centerX);
+    const centerY = Number(options.centerY);
+    const radius = Number(options.radius);
+    if (!Number.isFinite(centerX) ||
+        !Number.isFinite(centerY) ||
+        !Number.isFinite(radius) ||
+        radius <= 0 ||
+        width <= 0 ||
+        height <= 0) {
+        return false;
+    }
+    const blockSize = normalizeBlockSize(options.blockSize);
+    const minX = Math.max(0, Math.floor(centerX - radius));
+    const maxX = Math.min(width - 1, Math.ceil(centerX + radius));
+    const minY = Math.max(0, Math.floor(centerY - radius));
+    const maxY = Math.min(height - 1, Math.ceil(centerY + radius));
+    if (minX > maxX || minY > maxY)
+        return false;
+    const radiusSquared = radius * radius;
+    let processed = false;
+    for (let blockY = minY; blockY <= maxY; blockY += blockSize) {
+        for (let blockX = minX; blockX <= maxX; blockX += blockSize) {
+            const blockMaxX = Math.min(maxX, blockX + blockSize - 1);
+            const blockMaxY = Math.min(maxY, blockY + blockSize - 1);
+            let sampleOffset = -1;
+            for (let y = blockY; y <= blockMaxY && sampleOffset < 0; y += 1) {
+                for (let x = blockX; x <= blockMaxX; x += 1) {
+                    if (!isInsideCircle(x, y, centerX, centerY, radiusSquared))
+                        continue;
+                    sampleOffset = pixelOffset(width, x, y);
+                    break;
+                }
+            }
+            if (sampleOffset < 0)
+                continue;
+            const red = (_a = data[sampleOffset]) !== null && _a !== void 0 ? _a : 0;
+            const green = (_b = data[sampleOffset + 1]) !== null && _b !== void 0 ? _b : 0;
+            const blue = (_c = data[sampleOffset + 2]) !== null && _c !== void 0 ? _c : 0;
+            const alpha = (_d = data[sampleOffset + 3]) !== null && _d !== void 0 ? _d : 0;
+            for (let y = blockY; y <= blockMaxY; y += 1) {
+                for (let x = blockX; x <= blockMaxX; x += 1) {
+                    if (!isInsideCircle(x, y, centerX, centerY, radiusSquared))
+                        continue;
+                    const offset = pixelOffset(width, x, y);
+                    data[offset] = red;
+                    data[offset + 1] = green;
+                    data[offset + 2] = blue;
+                    data[offset + 3] = alpha;
+                    processed = true;
+                }
+            }
+        }
+    }
+    return processed;
+}
+
+const MAX_PENDING_MOSAIC_POINTS = 4096;
+function getCanvasDocument$2(context) {
+    var _a, _b, _c, _d, _e;
+    const element = (_b = (_a = context.canvas).getElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+    return ((_e = (_c = element === null || element === void 0 ? void 0 : element.ownerDocument) !== null && _c !== void 0 ? _c : (_d = context.canvas.lowerCanvasEl) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document);
+}
+function isFinitePoint(value) {
+    const point = value;
+    return (!!point &&
+        typeof point.x === 'number' &&
+        Number.isFinite(point.x) &&
+        typeof point.y === 'number' &&
+        Number.isFinite(point.y));
+}
+function getPointerFromFabricEvent(canvas, event) {
+    const fabricEvent = event;
+    if (isFinitePoint(fabricEvent.scenePoint))
+        return fabricEvent.scenePoint;
+    if (isFinitePoint(fabricEvent.pointer))
+        return fabricEvent.pointer;
+    if (isFinitePoint(fabricEvent.absolutePointer))
+        return fabricEvent.absolutePointer;
+    if (fabricEvent.e && typeof canvas.getPointer === 'function') {
+        const pointer = canvas.getPointer(fabricEvent.e);
+        if (isFinitePoint(pointer))
+            return pointer;
+    }
+    return null;
+}
+function safeRender(canvas) {
+    try {
+        canvas.requestRenderAll();
+    }
+    catch {
+        try {
+            canvas.renderAll();
+        }
+        catch {
+        }
+    }
+}
+function createPreviewCircle(context) {
+    var _a;
+    const config = context.getMosaicConfig();
+    const circle = new context.fabric.Circle({
+        left: 0,
+        top: 0,
+        radius: config.brushSize / 2,
+        originX: 'center',
+        originY: 'center',
+        fill: config.previewFill,
+        stroke: config.previewStroke,
+        strokeWidth: config.previewStrokeWidth,
+        strokeDashArray: (_a = config.previewStrokeDashArray) !== null && _a !== void 0 ? _a : undefined,
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+        visible: false,
+    });
+    circle.isMosaicPreview = true;
+    return circle;
+}
+function ensurePreviewCircle(context, session) {
+    var _a;
+    const { canvas } = context;
+    const circle = (_a = session.previewCircle) !== null && _a !== void 0 ? _a : createPreviewCircle(context);
+    session.previewCircle = circle;
+    if (!canvas.getObjects().includes(circle)) {
+        canvas.add(circle);
+    }
+    canvas.bringObjectToFront(circle);
+    updateMosaicPreview(context);
+    return circle;
+}
+function removePreviewCircle(context, session) {
+    const circle = session.previewCircle;
+    if (!circle)
+        return;
+    try {
+        context.canvas.remove(circle);
+    }
+    catch {
+    }
+    session.previewCircle = null;
+}
+function createPreviewImage(context, sourceImage, rasterCache) {
+    const image = new context.fabric.FabricImage(rasterCache.offscreenCanvas, {
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+        visible: true,
+    });
+    copyBaseImageProperties(image, sourceImage);
+    image.set({
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+        visible: true,
+    });
+    image.isMosaicPreview = true;
+    return image;
+}
+function placePreviewImageAfterBase(context, previewImage, sourceImage) {
+    var _a, _b;
+    const sourceIndex = context.canvas.getObjects().indexOf(sourceImage);
+    if (sourceIndex < 0)
+        return;
+    try {
+        (_b = (_a = context.canvas).moveObjectTo) === null || _b === void 0 ? void 0 : _b.call(_a, previewImage, sourceIndex + 1);
+    }
+    catch {
+    }
+}
+function ensurePreviewImage(context, session, sourceImage) {
+    var _a;
+    const rasterCache = session.rasterCache;
+    if (!rasterCache)
+        return null;
+    const previewImage = (_a = session.previewImage) !== null && _a !== void 0 ? _a : createPreviewImage(context, sourceImage, rasterCache);
+    session.previewImage = previewImage;
+    copyBaseImageProperties(previewImage, sourceImage);
+    previewImage.set({
+        selectable: false,
+        evented: false,
+        excludeFromExport: true,
+        objectCaching: false,
+        visible: true,
+    });
+    previewImage.dirty = true;
+    if (!context.canvas.getObjects().includes(previewImage)) {
+        context.canvas.add(previewImage);
+    }
+    placePreviewImageAfterBase(context, previewImage, sourceImage);
+    const circle = session.previewCircle;
+    if (circle && context.canvas.getObjects().includes(circle)) {
+        context.canvas.bringObjectToFront(circle);
+    }
+    return previewImage;
+}
+function removePreviewImage(context, session) {
+    const image = session.previewImage;
+    if (!image)
+        return;
+    try {
+        context.canvas.remove(image);
+    }
+    catch {
+    }
+    session.previewImage = null;
+}
+function hidePreview(context) {
+    var _a;
+    const circle = (_a = context.getMosaicSession()) === null || _a === void 0 ? void 0 : _a.previewCircle;
+    if (!circle)
+        return;
+    circle.set({ visible: false });
+    safeRender(context.canvas);
+}
+function movePreview(context, point) {
+    const session = context.getMosaicSession();
+    if (!session)
+        return;
+    const circle = ensurePreviewCircle(context, session);
+    circle.set({ left: point.x, top: point.y, visible: true });
+    safeRender(context.canvas);
+}
+function attachCanvasHandler(context, session, eventName, callback) {
+    context.canvas.on(eventName, callback);
+    session.handlers.push({ eventName, callback });
+}
+function detachCanvasHandlers(context, session) {
+    for (const record of session.handlers) {
+        try {
+            context.canvas.off(record.eventName, record.callback);
+        }
+        catch {
+        }
+    }
+    session.handlers = [];
+}
+function restoreObjectStates(session) {
+    for (const record of session.prevObjectStates) {
+        try {
+            record.object.set({ evented: record.evented, selectable: record.selectable });
+        }
+        catch {
+        }
+    }
+    session.prevObjectStates = [];
+}
+function getImageSource(image) {
+    var _a;
+    const imageWithSource = image;
+    try {
+        const src = (_a = imageWithSource.getSrc) === null || _a === void 0 ? void 0 : _a.call(imageWithSource);
+        if (typeof src === 'string' && src.length > 0)
+            return src;
+    }
+    catch {
+    }
+    return typeof imageWithSource.src === 'string' && imageWithSource.src.length > 0
+        ? imageWithSource.src
+        : null;
+}
+function imageDimension(value) {
+    const numeric = Number(value);
+    return Number.isFinite(numeric) && numeric > 0 ? Math.floor(numeric) : 0;
+}
+function decodeImageSource(ownerDocument, source) {
+    return new Promise((resolve, reject) => {
+        const imageElement = ownerDocument.createElement('img');
+        const cleanup = () => {
+            if (typeof imageElement.removeEventListener === 'function') {
+                imageElement.removeEventListener('load', handleLoad);
+                imageElement.removeEventListener('error', handleError);
+            }
+            else {
+                imageElement.onload = null;
+                imageElement.onerror = null;
+            }
+        };
+        const handleLoad = () => {
+            const width = imageDimension(imageElement.naturalWidth || imageElement.width);
+            const height = imageDimension(imageElement.naturalHeight || imageElement.height);
+            cleanup();
+            if (width <= 0 || height <= 0) {
+                reject(new Error('Mosaic image decode failed: source image has no dimensions.'));
+                return;
+            }
+            resolve({ element: imageElement, width, height });
+        };
+        const handleError = (event) => {
+            cleanup();
+            const message = typeof event === 'string'
+                ? `Mosaic image decode failed: ${event}`
+                : 'Mosaic image decode failed.';
+            reject(new Error(message));
+        };
+        if (!source.startsWith('data:')) {
+            imageElement.crossOrigin = 'anonymous';
+        }
+        if (typeof imageElement.addEventListener === 'function') {
+            imageElement.addEventListener('load', handleLoad, { once: true });
+            imageElement.addEventListener('error', handleError, { once: true });
+        }
+        else {
+            imageElement.onload = handleLoad;
+            imageElement.onerror = handleError;
+        }
+        imageElement.src = source;
+    });
+}
+function toSupportedMimeType(mimeType) {
+    return mimeType === 'image/jpeg' || mimeType === 'image/png' || mimeType === 'image/webp'
+        ? mimeType
+        : null;
+}
+function mimeToFormat(mimeType) {
+    if (mimeType === 'image/jpeg')
+        return 'jpeg';
+    if (mimeType === 'image/webp')
+        return 'webp';
+    return 'png';
+}
+function resolveMosaicOutputFormat(context, source) {
+    var _a, _b, _c, _d;
+    const config = context.getMosaicConfig();
+    const requested = config.outputFileType;
+    const format = requested === 'source'
+        ? mimeToFormat((_b = (_a = context.getCurrentImageMimeType()) !== null && _a !== void 0 ? _a : toSupportedMimeType(detectSourceMimeType(source))) !== null && _b !== void 0 ? _b : 'image/png')
+        : ((_c = tryNormalizeImageFormat(String(requested))) !== null && _c !== void 0 ? _c : 'png');
+    const mimeType = mimeTypeFor(format);
+    if (format === 'png')
+        return { mimeType };
+    return {
+        mimeType,
+        quality: (_d = config.outputQuality) !== null && _d !== void 0 ? _d : context.options.downsampleQuality,
+    };
+}
+async function createFabricImageFromDataUrl(context, dataUrl) {
+    return await withTimeout(context.fabric.FabricImage.fromURL(dataUrl, { crossOrigin: 'anonymous' }), context.options.imageLoadTimeoutMs, 'Mosaic FabricImage.fromURL');
+}
+function copyBaseImageProperties(target, source) {
+    target.set({
+        left: source.left,
+        top: source.top,
+        scaleX: source.scaleX,
+        scaleY: source.scaleY,
+        angle: source.angle,
+        skewX: source.skewX,
+        skewY: source.skewY,
+        flipX: source.flipX,
+        flipY: source.flipY,
+        originX: source.originX,
+        originY: source.originY,
+        selectable: source.selectable,
+        evented: source.evented,
+        hasControls: source.hasControls,
+        hoverCursor: source.hoverCursor,
+    });
+    target.setCoords();
+}
+function replaceBaseImage(context, oldImage, newImage, mimeType) {
+    const { canvas } = context;
+    let oldRemoved = false;
+    let newAdded = false;
+    try {
+        copyBaseImageProperties(newImage, oldImage);
+        canvas.remove(oldImage);
+        oldRemoved = true;
+        canvas.add(newImage);
+        newAdded = true;
+        canvas.sendObjectToBack(newImage);
+        context.setOriginalImage(newImage);
+        context.setCurrentImageMimeType(mimeType);
+        canvas.renderAll();
+    }
+    catch (error) {
+        try {
+            if (newAdded)
+                canvas.remove(newImage);
+            if (oldRemoved && !canvas.getObjects().includes(oldImage)) {
+                canvas.add(oldImage);
+                canvas.sendObjectToBack(oldImage);
+            }
+            context.setOriginalImage(oldImage);
+        }
+        catch {
+        }
+        throw error;
+    }
+}
+function pushMosaicHistory(context, after) {
+    var _a;
+    const before = (_a = context.getLastSnapshot()) !== null && _a !== void 0 ? _a : after;
+    if (!before || !after || before === after)
+        return;
+    context.historyManager.push(new Command(async () => {
+        await context.loadFromState(after);
+    }, async () => {
+        await context.loadFromState(before);
+    }));
+    context.setLastSnapshot(after);
+}
+async function getOrCreateRasterCache(context, session, source) {
+    if (session.rasterCache)
+        return session.rasterCache;
+    const ownerDocument = getCanvasDocument$2(context);
+    const decoded = await decodeImageSource(ownerDocument, source);
+    const offscreenCanvas = ownerDocument.createElement('canvas');
+    offscreenCanvas.width = decoded.width;
+    offscreenCanvas.height = decoded.height;
+    const renderingContext = offscreenCanvas.getContext('2d');
+    if (!renderingContext) {
+        reportError(context.options, new Error('Mosaic could not obtain a 2D canvas context.'), 'Mosaic apply failed.');
+        return null;
+    }
+    renderingContext.drawImage(decoded.element, 0, 0, decoded.width, decoded.height);
+    let imageData;
+    try {
+        imageData = renderingContext.getImageData(0, 0, decoded.width, decoded.height);
+    }
+    catch (error) {
+        reportError(context.options, error, 'Mosaic apply failed because the source image pixels could not be read.');
+        return null;
+    }
+    const rasterCache = {
+        offscreenCanvas,
+        renderingContext,
+        imageData,
+        source,
+        width: decoded.width,
+        height: decoded.height,
+    };
+    session.rasterCache = rasterCache;
+    return rasterCache;
+}
+function applyMosaicImagePoint(context, session, sourceImage, imagePoint) {
+    const rasterCache = session.rasterCache;
+    if (!rasterCache)
+        return false;
+    const config = context.getMosaicConfig();
+    const previousPoint = session.lastImagePoint;
+    const points = previousPoint
+        ? interpolateMosaicPoints(previousPoint, imagePoint)
+        : [imagePoint];
+    let changed = false;
+    for (const point of points) {
+        changed =
+            applyCircularMosaicToImageData({
+                imageData: rasterCache.imageData,
+                centerX: point.sourceX,
+                centerY: point.sourceY,
+                radius: point.sourceRadius,
+                blockSize: config.blockSize,
+            }) || changed;
+    }
+    session.lastImagePoint = imagePoint;
+    if (changed) {
+        session.hasUncommittedChanges = true;
+        rasterCache.renderingContext.putImageData(rasterCache.imageData, 0, 0);
+        ensurePreviewImage(context, session, sourceImage);
+        safeRender(context.canvas);
+    }
+    return changed;
+}
+function interpolateMosaicPoints(start, end) {
+    const dx = end.sourceX - start.sourceX;
+    const dy = end.sourceY - start.sourceY;
+    const distance = Math.hypot(dx, dy);
+    const minRadius = Math.min(start.sourceRadius, end.sourceRadius);
+    const spacing = Math.max(1, minRadius / 2);
+    const steps = Math.max(1, Math.ceil(distance / spacing));
+    const points = [];
+    for (let index = 1; index <= steps; index += 1) {
+        const t = index / steps;
+        points.push({
+            sourceX: start.sourceX + dx * t,
+            sourceY: start.sourceY + dy * t,
+            sourceRadius: start.sourceRadius + (end.sourceRadius - start.sourceRadius) * t,
+        });
+    }
+    return points;
+}
+async function applyMosaicPointToCache(context, expectedSession, canvasPoint) {
+    const session = context.getMosaicSession();
+    if (!session || session !== expectedSession)
+        return;
+    const originalImage = context.getOriginalImage();
+    if (!originalImage || !context.isImageLoaded())
+        return;
+    const config = context.getMosaicConfig();
+    const imagePoint = getMosaicImagePoint(context.fabric, originalImage, canvasPoint, config.brushSize);
+    if (!imagePoint) {
+        session.lastImagePoint = null;
+        return;
+    }
+    const source = getImageSource(originalImage);
+    if (!source) {
+        reportWarning(context.options, new Error('Mosaic cannot read the current image source.'), 'Mosaic skipped because the image source is unavailable.');
+        return;
+    }
+    const rasterCache = await getOrCreateRasterCache(context, session, source);
+    if (!rasterCache)
+        return;
+    applyMosaicImagePoint(context, session, originalImage, imagePoint);
+}
+async function commitMosaicChanges(context, session, callbackContext) {
+    var _a;
+    session.commitRequested = false;
+    session.lastImagePoint = null;
+    if (!session.hasUncommittedChanges || !session.rasterCache)
+        return;
+    const originalImage = context.getOriginalImage();
+    if (!originalImage || !context.isImageLoaded())
+        return;
+    const source = (_a = getImageSource(originalImage)) !== null && _a !== void 0 ? _a : session.rasterCache.source;
+    const rasterCache = session.rasterCache;
+    rasterCache.renderingContext.putImageData(rasterCache.imageData, 0, 0);
+    const output = resolveMosaicOutputFormat(context, source);
+    const nextDataUrl = output.quality === undefined
+        ? rasterCache.offscreenCanvas.toDataURL(output.mimeType)
+        : rasterCache.offscreenCanvas.toDataURL(output.mimeType, output.quality);
+    const nextImage = await createFabricImageFromDataUrl(context, nextDataUrl);
+    removePreviewCircle(context, session);
+    removePreviewImage(context, session);
+    try {
+        replaceBaseImage(context, originalImage, nextImage, output.mimeType);
+        const after = context.captureSnapshot();
+        pushMosaicHistory(context, after);
+        rasterCache.source = nextDataUrl;
+        session.hasUncommittedChanges = false;
+    }
+    finally {
+        if (context.getMosaicSession() === session) {
+            ensurePreviewCircle(context, session);
+        }
+    }
+    context.updateInputs();
+    context.updateUi();
+    context.emitImageChanged(callbackContext);
+}
+async function drainMosaicQueue(context, expectedSession) {
+    const session = context.getMosaicSession();
+    if (!session || session !== expectedSession || session.isApplying)
+        return;
+    session.isApplying = true;
+    const callbackContext = context.buildCallbackContext('applyMosaic', false);
+    context.emitBusyChangeIfChanged(callbackContext);
+    context.updateUi();
+    try {
+        while (context.getMosaicSession() === session && session.pendingCanvasPoints.length > 0) {
+            const point = session.pendingCanvasPoints.shift();
+            if (point) {
+                await applyMosaicPointToCache(context, session, point);
+            }
+        }
+        if (context.getMosaicSession() === session && session.commitRequested) {
+            await commitMosaicChanges(context, session, callbackContext);
+        }
+    }
+    finally {
+        if (context.getMosaicSession() === session) {
+            session.isApplying = false;
+        }
+        context.emitBusyChangeIfChanged(callbackContext);
+        context.updateUi();
+        if (context.getMosaicSession() === session &&
+            (session.pendingCanvasPoints.length > 0 || session.commitRequested)) {
+            void drainMosaicQueue(context, session).catch((error) => {
+                reportError(context.options, error, 'Mosaic apply failed.');
+            });
+        }
+    }
+}
+function enqueueMosaicPoint(context, canvasPoint) {
+    const session = context.getMosaicSession();
+    if (!session)
+        return;
+    session.pendingCanvasPoints.push(canvasPoint);
+    if (session.pendingCanvasPoints.length > MAX_PENDING_MOSAIC_POINTS) {
+        session.pendingCanvasPoints.splice(0, session.pendingCanvasPoints.length - MAX_PENDING_MOSAIC_POINTS);
+    }
+    void drainMosaicQueue(context, session).catch((error) => {
+        reportError(context.options, error, 'Mosaic apply failed.');
+    });
+}
+function requestMosaicCommit(context, session) {
+    session.commitRequested = true;
+    void drainMosaicQueue(context, session).catch((error) => {
+        reportError(context.options, error, 'Mosaic apply failed.');
+    });
+}
+function installMosaicHandlers(context, session) {
+    attachCanvasHandler(context, session, 'mouse:move', (event) => {
+        const pointer = getPointerFromFabricEvent(context.canvas, event);
+        if (!pointer) {
+            hidePreview(context);
+            return;
+        }
+        movePreview(context, pointer);
+        const currentSession = context.getMosaicSession();
+        if (currentSession === null || currentSession === void 0 ? void 0 : currentSession.isPointerDown) {
+            enqueueMosaicPoint(context, pointer);
+        }
+    });
+    attachCanvasHandler(context, session, 'mouse:out', () => {
+        hidePreview(context);
+        const currentSession = context.getMosaicSession();
+        if (currentSession === null || currentSession === void 0 ? void 0 : currentSession.isPointerDown) {
+            currentSession.isPointerDown = false;
+            requestMosaicCommit(context, currentSession);
+        }
+    });
+    attachCanvasHandler(context, session, 'mouse:down', (event) => {
+        const pointer = getPointerFromFabricEvent(context.canvas, event);
+        if (!pointer)
+            return;
+        const currentSession = context.getMosaicSession();
+        if (!currentSession)
+            return;
+        currentSession.isPointerDown = true;
+        currentSession.lastImagePoint = null;
+        enqueueMosaicPoint(context, pointer);
+    });
+    attachCanvasHandler(context, session, 'mouse:up', (event) => {
+        const currentSession = context.getMosaicSession();
+        if (!currentSession)
+            return;
+        const pointer = getPointerFromFabricEvent(context.canvas, event);
+        if (pointer) {
+            movePreview(context, pointer);
+            enqueueMosaicPoint(context, pointer);
+        }
+        currentSession.isPointerDown = false;
+        requestMosaicCommit(context, currentSession);
+    });
+}
+function enterMosaicMode(context) {
+    if (context.getMosaicSession())
+        return;
+    if (!context.isImageLoaded() || !context.getOriginalImage())
+        return;
+    const { canvas } = context;
+    context.hideAllMaskLabels();
+    canvas.discardActiveObject();
+    const prevSelection = !!canvas.selection;
+    const prevDefaultCursor = canvas.defaultCursor;
+    const prevObjectStates = canvas.getObjects().map((object) => {
+        var _a, _b;
+        return ({
+            object,
+            evented: (_a = object.evented) !== null && _a !== void 0 ? _a : true,
+            selectable: (_b = object.selectable) !== null && _b !== void 0 ? _b : true,
+        });
+    });
+    for (const record of prevObjectStates) {
+        try {
+            record.object.set({ evented: false, selectable: false });
+        }
+        catch {
+        }
+    }
+    canvas.selection = false;
+    canvas.defaultCursor = 'crosshair';
+    const session = {
+        previewCircle: null,
+        previewImage: null,
+        prevSelection,
+        prevDefaultCursor,
+        prevObjectStates,
+        handlers: [],
+        rasterCache: null,
+        pendingCanvasPoints: [],
+        isPointerDown: false,
+        isApplying: false,
+        commitRequested: false,
+        hasUncommittedChanges: false,
+        lastImagePoint: null,
+    };
+    context.setMosaicSession(session);
+    ensurePreviewCircle(context, session);
+    installMosaicHandlers(context, session);
+    canvas.renderAll();
+}
+function exitMosaicMode(context) {
+    var _a;
+    const session = context.getMosaicSession();
+    if (!session)
+        return;
+    detachCanvasHandlers(context, session);
+    removePreviewCircle(context, session);
+    removePreviewImage(context, session);
+    restoreObjectStates(session);
+    context.canvas.selection = !!session.prevSelection;
+    context.canvas.defaultCursor = (_a = session.prevDefaultCursor) !== null && _a !== void 0 ? _a : 'default';
+    context.setMosaicSession(null);
+    context.canvas.renderAll();
+}
+function updateMosaicPreview(context) {
+    var _a;
+    const session = context.getMosaicSession();
+    const circle = session === null || session === void 0 ? void 0 : session.previewCircle;
+    if (!session || !circle)
+        return;
+    const config = context.getMosaicConfig();
+    circle.set({
+        radius: config.brushSize / 2,
+        fill: config.previewFill,
+        stroke: config.previewStroke,
+        strokeWidth: config.previewStrokeWidth,
+        strokeDashArray: (_a = config.previewStrokeDashArray) !== null && _a !== void 0 ? _a : undefined,
+    });
+    context.canvas.bringObjectToFront(circle);
+    safeRender(context.canvas);
+}
+
+function resolveMultiplier(requested, fallback) {
+    const num = Number(requested);
+    if (Number.isFinite(num) && num > 0)
+        return num;
+    const fallbackValue = Number(fallback);
+    return Number.isFinite(fallbackValue) && fallbackValue > 0 ? fallbackValue : 1;
+}
+function resolveExportArea(requested, fallback) {
+    if (requested === 'canvas' || requested === 'image')
+        return requested;
+    return fallback === 'canvas' ? 'canvas' : 'image';
+}
+function resolveExportOptions(context, options) {
+    const providedOptions = options !== null && options !== void 0 ? options : {};
+    return {
+        exportArea: resolveExportArea(providedOptions.exportArea, context.options.exportAreaByDefault),
+        mergeMask: typeof providedOptions.mergeMask === 'boolean'
+            ? providedOptions.mergeMask
+            : context.options.mergeMaskByDefault,
+        multiplier: resolveMultiplier(providedOptions.multiplier, context.options.exportMultiplier),
+        format: resolveExportFormat(providedOptions, context.options.downsampleQuality),
+    };
+}
+function readCanvasDimension(canvas, getterName, propertyName) {
+    const canvasLike = canvas;
+    const getter = canvasLike[getterName];
+    const value = typeof getter === 'function' ? getter.call(canvasLike) : canvasLike[propertyName];
+    return Math.max(1, Math.ceil(Number.isFinite(value) ? Number(value) : 1));
+}
+function assertExportPixelBudget(context, multiplier, region) {
+    var _a, _b;
+    const sourceWidth = (_a = region === null || region === void 0 ? void 0 : region.width) !== null && _a !== void 0 ? _a : readCanvasDimension(context.canvas, 'getWidth', 'width');
+    const sourceHeight = (_b = region === null || region === void 0 ? void 0 : region.height) !== null && _b !== void 0 ? _b : readCanvasDimension(context.canvas, 'getHeight', 'height');
+    const outputWidth = Math.max(1, Math.ceil(sourceWidth * multiplier));
+    const outputHeight = Math.max(1, Math.ceil(sourceHeight * multiplier));
+    const pixelCount = outputWidth * outputHeight;
+    const maxPixels = context.options.maxExportPixels;
+    if (!Number.isFinite(pixelCount) || pixelCount > maxPixels) {
+        throw new RangeError(`[ImageEditor] Export size ${outputWidth}x${outputHeight} ` +
+            `(${pixelCount} pixels) exceeds maxExportPixels (${maxPixels}).`);
+    }
+}
+function computeExportRegion(context, exportArea) {
+    if (exportArea === 'canvas')
+        return { region: null, partialEdges: null };
+    const originalImage = context.getOriginalImage();
+    if (!originalImage)
+        return { region: null, partialEdges: null };
+    const bounds = getObjectBBox(originalImage);
+    const canvasLike = context.canvas;
+    const canvasWidth = typeof canvasLike.getWidth === 'function' ? canvasLike.getWidth() : canvasLike.width;
+    const canvasHeight = typeof canvasLike.getHeight === 'function' ? canvasLike.getHeight() : canvasLike.height;
+    if (!hasMeaningfulCanvasRegion(bounds, canvasWidth, canvasHeight)) {
+        throw new ExportError('exportImageBase64 failed: image export region is empty.');
+    }
+    return {
         region: getClampedCanvasRegion(bounds, canvasWidth, canvasHeight, {
             includePartialPixels: true,
         }),
@@ -2030,7 +3160,7 @@ function loadImageElement(dataUrl) {
         imageElement.src = dataUrl;
     });
 }
-async function sealPartialTransparentEdges(dataUrl, edges) {
+async function sealPartialTransparentEdges(dataUrl, edges, target) {
     if (!hasPartialEdges(edges))
         return dataUrl;
     const imageElement = await loadImageElement(dataUrl);
@@ -2078,7 +3208,9 @@ async function sealPartialTransparentEdges(dataUrl, edges) {
             sealPixel(x, height - 1, x, height - 2);
     }
     canvasContext.putImageData(imageData, 0, 0);
-    return offscreenCanvas.toDataURL('image/png');
+    return target.quality === undefined
+        ? offscreenCanvas.toDataURL(target.mimeType)
+        : offscreenCanvas.toDataURL(target.mimeType, target.quality);
 }
 function getJpegBackgroundColor(backgroundColor) {
     return resolveCanvasFillStyle(backgroundColor);
@@ -2115,6 +3247,11 @@ function createColorValidationContext() {
         return null;
     }
 }
+function getCanvasDocument$1(canvas) {
+    var _a, _b, _c, _d, _e;
+    const canvasLike = canvas;
+    return ((_e = (_c = (_b = (_a = canvasLike.getElement) === null || _a === void 0 ? void 0 : _a.call(canvasLike)) === null || _b === void 0 ? void 0 : _b.ownerDocument) !== null && _c !== void 0 ? _c : (_d = canvasLike.lowerCanvasEl) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document);
+}
 function isTransparentCssColor(value) {
     const normalized = value.trim().toLowerCase();
     if (normalized === 'transparent')
@@ -2158,12 +3295,11 @@ async function convertDataUrlToOpaqueJpeg(dataUrl, backgroundColor, quality) {
 }
 function dataUrlToBytes(dataUrl) {
     var _a;
-    const match = /^data:image\/[a-z0-9.+-]+;base64,([A-Za-z0-9+/=\s]+)$/i.exec(dataUrl);
-    if (!match || !((_a = match[1]) === null || _a === void 0 ? void 0 : _a.trim())) {
+    const match = /^data:image\/[a-z0-9.+-]+;base64,([A-Za-z0-9+/=]+)$/i.exec(dataUrl);
+    const base64 = (_a = match === null || match === void 0 ? void 0 : match[1]) !== null && _a !== void 0 ? _a : '';
+    if (!base64) {
         throw new Error('exportImageFile received a malformed or empty image data URL.');
     }
-    const commaAt = dataUrl.indexOf(',');
-    const base64 = dataUrl.slice(commaAt + 1).replace(/\s/g, '');
     if (typeof globalThis.atob === 'function') {
         const binary = globalThis.atob(base64);
         const buffer = new ArrayBuffer(binary.length);
@@ -2222,7 +3358,10 @@ async function exportImageBase64(context, options) {
         const renderQuality = renderFormat === 'png' ? undefined : resolved.format.quality;
         let dataUrl = await withMaskExportState(context, resolved.mergeMask, async () => renderCanvasToDataUrl(context.canvas, renderFormat, renderQuality, resolved.multiplier, region));
         if (region) {
-            dataUrl = await sealPartialTransparentEdges(dataUrl, partialEdges);
+            const sealedFormat = resolved.format.format === 'jpeg'
+                ? { format: 'png', mimeType: 'image/png', quality: undefined }
+                : resolved.format;
+            dataUrl = await sealPartialTransparentEdges(dataUrl, partialEdges, sealedFormat);
             if (resolved.format.format === 'jpeg') {
                 dataUrl = await convertDataUrlToOpaqueJpeg(dataUrl, context.options.backgroundColor, resolved.format.quality);
             }
@@ -2278,15 +3417,17 @@ function downloadImage(context, fileName) {
         .then((dataUrl) => {
         if (!dataUrl)
             return;
-        const link = document.createElement('a');
+        const ownerDocument = getCanvasDocument$1(context.canvas);
+        const link = ownerDocument.createElement('a');
         link.download = resolvedFileName;
         link.href = dataUrl;
-        document.body.appendChild(link);
+        const body = ownerDocument.body;
+        body.appendChild(link);
         try {
             link.click();
         }
         finally {
-            document.body.removeChild(link);
+            body.removeChild(link);
         }
     })
         .catch((error) => {
@@ -2345,26 +3486,10 @@ async function mergeMasks(context) {
             console.warn('[ImageEditor] mergeMasks: rollback failed', rollbackError);
         }
         if (error instanceof MergeMasksError)
-            throw error;
-        const message = error instanceof Error ? `mergeMasks failed: ${error.message}` : 'mergeMasks failed';
-        throw new MergeMasksError(message, error);
-    }
-}
-
-function withTimeout(promise, ms, label) {
-    return new Promise((resolve, reject) => {
-        const start = Date.now();
-        const timeoutId = setTimeout(() => {
-            reject(new ImageLoadTimeoutError(label, Date.now() - start));
-        }, ms);
-        promise.then((value) => {
-            clearTimeout(timeoutId);
-            resolve(value);
-        }, (err) => {
-            clearTimeout(timeoutId);
-            reject(err);
-        });
-    });
+            throw error;
+        const message = error instanceof Error ? `mergeMasks failed: ${error.message}` : 'mergeMasks failed';
+        throw new MergeMasksError(message, error);
+    }
 }
 
 function forceReflow(element) {
@@ -2373,26 +3498,8 @@ function forceReflow(element) {
     void element.offsetWidth;
 }
 
-function selectLayoutStrategy(options) {
-    if (options.fitImageToCanvas)
-        return 'fit';
-    if (options.coverImageToCanvas)
-        return 'cover';
-    return 'expand';
-}
-function detectLayoutConflict(options) {
-    if (!options.fitImageToCanvas || !options.coverImageToCanvas)
-        return null;
-    const enabled = ['fit', 'cover'];
-    if (options.expandCanvasToImage)
-        enabled.push('expand');
-    const selected = selectLayoutStrategy(options);
-    return {
-        enabled,
-        selected,
-        message: `Layout flags ${enabled.map((s) => `\`${s}\``).join(', ')} are enabled simultaneously. ` +
-            `Using precedence \`fit > cover > expand\`; selected \`${selected}\`.`,
-    };
+function selectLayoutStrategy(mode) {
+    return mode;
 }
 class ViewportCache {
     constructor() {
@@ -2596,60 +3703,6 @@ function applyCanvasDimensions(canvas, width, height, containerElement) {
     forceReflow(containerElement);
 }
 
-function computeDownsampleDimensions(srcWidth, srcHeight, maxWidth, maxHeight) {
-    if (!isPositiveFinite$1(srcWidth) ||
-        !isPositiveFinite$1(srcHeight) ||
-        !isPositiveFinite$1(maxWidth) ||
-        !isPositiveFinite$1(maxHeight)) {
-        return {
-            width: Math.max(1, Math.round(srcWidth) || 1),
-            height: Math.max(1, Math.round(srcHeight) || 1),
-            needsResize: false,
-        };
-    }
-    const needsResize = srcWidth > maxWidth || srcHeight > maxHeight;
-    if (!needsResize) {
-        return { width: srcWidth, height: srcHeight, needsResize: false };
-    }
-    const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
-    return {
-        width: Math.max(1, Math.round(srcWidth * ratio)),
-        height: Math.max(1, Math.round(srcHeight * ratio)),
-        needsResize: true,
-    };
-}
-function isPositiveFinite$1(value) {
-    return Number.isFinite(value) && value > 0;
-}
-function selectDownsampleMimeType(sourceMime, preserveSourceFormat, downsampleMimeType) {
-    if (downsampleMimeType)
-        return downsampleMimeType;
-    if (preserveSourceFormat && (sourceMime === 'image/png' || sourceMime === 'image/webp')) {
-        return sourceMime;
-    }
-    return 'image/jpeg';
-}
-function detectSourceMimeType(dataUrl) {
-    const match = /^data:(image\/[a-z0-9+\-.]+)\s*;/i.exec(dataUrl);
-    return match ? match[1].toLowerCase() : null;
-}
-function resampleImage(imageElement, maxWidth, maxHeight, sourceMime, preserveSourceFormat, downsampleMimeType, quality) {
-    const { width, height } = computeDownsampleDimensions(imageElement.naturalWidth, imageElement.naturalHeight, maxWidth, maxHeight);
-    const mimeType = selectDownsampleMimeType(sourceMime, preserveSourceFormat, downsampleMimeType);
-    const offscreenCanvas = document.createElement('canvas');
-    offscreenCanvas.width = width;
-    offscreenCanvas.height = height;
-    const context = offscreenCanvas.getContext('2d');
-    if (!context) {
-        throw new DownsampleError('Failed to obtain a 2D context for downsampling.');
-    }
-    context.drawImage(imageElement, 0, 0, imageElement.naturalWidth, imageElement.naturalHeight, 0, 0, width, height);
-    const dataUrl = mimeType === 'image/png'
-        ? offscreenCanvas.toDataURL(mimeType)
-        : offscreenCanvas.toDataURL(mimeType, quality);
-    return { dataUrl, width, height, mimeType };
-}
-
 async function loadImage(context, imageBase64, loadOptions = {}) {
     if (typeof imageBase64 !== 'string' || !imageBase64.startsWith('data:image/')) {
         return;
@@ -2661,14 +3714,10 @@ async function loadImage(context, imageBase64, loadOptions = {}) {
     const containerScrollLeft = context.containerElement
         ? context.containerElement.scrollLeft
         : null;
-    const containerOverflow = context.containerElement
-        ? context.containerElement.style.overflow
-        : null;
     const bundle = {
         placeholderHidden,
         containerScrollTop,
         containerScrollLeft,
-        containerOverflow,
         originalImage: context.getOriginalImage(),
         isImageLoadedToCanvas: context.getIsImageLoadedToCanvas(),
         lastSnapshot: context.getLastSnapshot(),
@@ -2690,7 +3739,7 @@ async function loadImage(context, imageBase64, loadOptions = {}) {
             decode.cleanup(true);
             throw error;
         }
-        const loadSource = maybeDownsample(imageElement, imageBase64, context.options);
+        const loadSource = maybeDownsample(imageElement, imageBase64, context.options, getCanvasDocument(context.canvas));
         const fabricImage = await withTimeout(context.fabric.FabricImage.fromURL(loadSource.dataUrl, { crossOrigin: 'anonymous' }), context.options.imageLoadTimeoutMs, 'FabricImage.fromURL');
         context.canvas.discardActiveObject();
         context.canvas.clear();
@@ -2802,7 +3851,7 @@ function toSupportedImageMimeType(mimeType) {
         ? mimeType
         : null;
 }
-function maybeDownsample(imageElement, originalDataUrl, options) {
+function maybeDownsample(imageElement, originalDataUrl, options, ownerDocument) {
     const originalMimeType = toSupportedImageMimeType(detectSourceMimeType(originalDataUrl));
     if (!options.downsampleOnLoad) {
         return { dataUrl: originalDataUrl, mimeType: originalMimeType };
@@ -2817,13 +3866,18 @@ function maybeDownsample(imageElement, originalDataUrl, options) {
         return { dataUrl: originalDataUrl, mimeType: originalMimeType };
     }
     const sourceMime = detectSourceMimeType(originalDataUrl);
-    const resampledImage = resampleImage(imageElement, options.downsampleMaxWidth, options.downsampleMaxHeight, sourceMime, options.preserveSourceFormat, options.downsampleMimeType, options.downsampleQuality);
+    const resampledImage = resampleImage(imageElement, options.downsampleMaxWidth, options.downsampleMaxHeight, sourceMime, options.preserveSourceFormat, options.downsampleMimeType, options.downsampleQuality, ownerDocument);
     const actualMimeType = toSupportedImageMimeType(detectSourceMimeType(resampledImage.dataUrl));
     return {
         dataUrl: resampledImage.dataUrl,
         mimeType: actualMimeType !== null && actualMimeType !== void 0 ? actualMimeType : resampledImage.mimeType,
     };
 }
+function getCanvasDocument(canvas) {
+    var _a, _b, _c, _d, _e;
+    const canvasLike = canvas;
+    return ((_e = (_c = (_b = (_a = canvasLike.getElement) === null || _a === void 0 ? void 0 : _a.call(canvasLike)) === null || _b === void 0 ? void 0 : _b.ownerDocument) !== null && _c !== void 0 ? _c : (_d = canvasLike.lowerCanvasEl) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : (typeof document !== 'undefined' ? document : undefined));
+}
 function computeLayout(context, fabricImage) {
     var _a, _b, _c, _d;
     const imageWidth = (_a = fabricImage.width) !== null && _a !== void 0 ? _a : 0;
@@ -2833,7 +3887,7 @@ function computeLayout(context, fabricImage) {
         width: context.options.canvasWidth,
         height: context.options.canvasHeight,
     }, scrollbarSize);
-    const strategy = selectLayoutStrategy(context.options);
+    const strategy = selectLayoutStrategy(context.options.layoutMode);
     if (strategy === 'fit') {
         return computeFitLayout(imageWidth, imageHeight, context.options.canvasWidth, context.options.canvasHeight, viewport);
     }
@@ -2848,14 +3902,6 @@ function serializeCanvas(canvas) {
     return JSON.stringify(json);
 }
 async function replayRollback(context, bundle) {
-    if (context.containerElement && bundle.containerOverflow !== null) {
-        try {
-            context.containerElement.style.overflow = bundle.containerOverflow;
-        }
-        catch (rollbackError) {
-            console.warn('[ImageEditor] rollback: overflow restore failed', rollbackError);
-        }
-    }
     try {
         await context.canvas.loadFromJSON(JSON.parse(bundle.canvasJson));
         context.canvas.renderAll();
@@ -2889,16 +3935,56 @@ async function replayRollback(context, bundle) {
     }
 }
 
+const ANIMATION_SETTLE_GRACE_MS = 1000;
 function animateProps(object, props, options, guard) {
     return new Promise((resolve, reject) => {
         const propCount = Object.keys(props).length;
-        if (propCount === 0) {
+        if (propCount === 0 || guard.isDisposed()) {
             resolve();
             return;
         }
         let completed = 0;
+        let settled = false;
+        let aborters = [];
+        let timeoutId = null;
+        let unregisterAborter = null;
+        const cleanup = () => {
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            unregisterAborter === null || unregisterAborter === void 0 ? void 0 : unregisterAborter();
+            unregisterAborter = null;
+        };
+        const settle = () => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            resolve();
+        };
+        const fail = (error) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanup();
+            reject(error);
+        };
+        const abortAndSettle = () => {
+            for (const abort of aborters) {
+                try {
+                    abort();
+                }
+                catch {
+                }
+            }
+            settle();
+        };
+        const duration = Number.isFinite(options.duration) ? Math.max(0, options.duration) : 0;
+        timeoutId = setTimeout(abortAndSettle, duration + ANIMATION_SETTLE_GRACE_MS);
+        unregisterAborter = guard.registerAnimationAborter(abortAndSettle);
         try {
-            object.animate(props, {
+            const animationResult = object.animate(props, {
                 duration: options.duration,
                 onChange: () => {
                     var _a;
@@ -2908,15 +3994,27 @@ function animateProps(object, props, options, guard) {
                 },
                 onComplete: () => {
                     if (++completed >= propCount)
-                        resolve();
+                        settle();
                 },
             });
+            aborters = collectAnimationAborters(animationResult);
         }
         catch (error) {
-            reject(error);
+            fail(error);
         }
     });
 }
+function collectAnimationAborters(animationResult) {
+    const handles = Array.isArray(animationResult)
+        ? animationResult
+        : animationResult && typeof animationResult === 'object'
+            ? Object.values(animationResult)
+            : [animationResult];
+    return handles.flatMap((handle) => {
+        const abort = handle === null || handle === void 0 ? void 0 : handle.abort;
+        return typeof abort === 'function' ? [() => abort.call(handle)] : [];
+    });
+}
 function restoreOrigin(object, originX, originY) {
     try {
         object.set({ originX, originY });
@@ -3082,10 +4180,8 @@ function coercePoint(pt) {
 }
 
 const POLYGON_AREA_EPSILON = 1e-6;
-let nextMaskUid = 0;
 function createMaskUid(maskId) {
-    nextMaskUid += 1;
-    return `mask-${maskId}-${nextMaskUid}`;
+    return `mask-${maskId}`;
 }
 function isFabricObjectLike(value) {
     if (!value || typeof value !== 'object')
@@ -3093,6 +4189,26 @@ function isFabricObjectLike(value) {
     const candidate = value;
     return typeof candidate.set === 'function' && typeof candidate.on === 'function';
 }
+function isStyleObject(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function mergeMaskConfig(defaultMaskConfig, config) {
+    const safeDefaultConfig = { ...defaultMaskConfig };
+    const defaultStyles = safeDefaultConfig.styles;
+    delete safeDefaultConfig.onCreate;
+    delete safeDefaultConfig.fabricGenerator;
+    delete safeDefaultConfig.styles;
+    const configStyles = isStyleObject(config.styles) ? config.styles : {};
+    const safeDefaultStyles = isStyleObject(defaultStyles) ? defaultStyles : {};
+    return {
+        ...safeDefaultConfig,
+        ...config,
+        styles: {
+            ...safeDefaultStyles,
+            ...configStyles,
+        },
+    };
+}
 function warnInvalidMask(options, reason) {
     reportWarning(options, null, `createMask skipped: ${reason}.`);
 }
@@ -3178,11 +4294,11 @@ function createMask(context, config = {}) {
     const { canvas, options, fabric: fabricModule } = context;
     if (!canvas)
         return null;
-    const shapeType = (_a = config.shape) !== null && _a !== void 0 ? _a : 'rect';
-    if (!validateNumericInputs(options, config))
+    const mergedConfig = mergeMaskConfig(options.defaultMaskConfig, config);
+    const shapeType = (_a = mergedConfig.shape) !== null && _a !== void 0 ? _a : 'rect';
+    if (!validateNumericInputs(options, mergedConfig))
         return null;
     const resolvedConfig = {
-        shape: shapeType,
         width: options.defaultMaskWidth,
         height: options.defaultMaskHeight,
         color: 'rgba(0,0,0,0.5)',
@@ -3192,13 +4308,14 @@ function createMask(context, config = {}) {
         top: undefined,
         angle: 0,
         selectable: true,
-        ...config,
+        ...mergedConfig,
+        shape: shapeType,
     };
     const firstOffset = 10;
     let left;
     let top;
     const previousMask = context.getLastMask();
-    if (config.left === undefined && previousMask) {
+    if (mergedConfig.left === undefined && previousMask) {
         const previousRight = ((_b = previousMask.left) !== null && _b !== void 0 ? _b : 0) +
             (typeof previousMask.getScaledWidth === 'function'
                 ? previousMask.getScaledWidth()
@@ -3207,17 +4324,21 @@ function createMask(context, config = {}) {
         top = (_f = previousMask.top) !== null && _f !== void 0 ? _f : firstOffset;
     }
     else {
-        left = resolveNumeric(config.left, 'x', firstOffset, canvas, options);
-        top = resolveNumeric(config.top, 'y', firstOffset, canvas, options);
+        left = resolveNumeric(mergedConfig.left, 'x', firstOffset, canvas, options);
+        top = resolveNumeric(mergedConfig.top, 'y', firstOffset, canvas, options);
     }
-    resolvedConfig.width = resolveNumeric(config.width, 'x', options.defaultMaskWidth, canvas, options);
-    resolvedConfig.height = resolveNumeric(config.height, 'y', options.defaultMaskHeight, canvas, options);
-    const rx = config.rx !== undefined ? resolveNumeric(config.rx, 'x', 0, canvas, options) : undefined;
-    const ry = config.ry !== undefined ? resolveNumeric(config.ry, 'y', 0, canvas, options) : undefined;
+    resolvedConfig.width = resolveNumeric(mergedConfig.width, 'x', options.defaultMaskWidth, canvas, options);
+    resolvedConfig.height = resolveNumeric(mergedConfig.height, 'y', options.defaultMaskHeight, canvas, options);
+    const rx = mergedConfig.rx !== undefined
+        ? resolveNumeric(mergedConfig.rx, 'x', 0, canvas, options)
+        : undefined;
+    const ry = mergedConfig.ry !== undefined
+        ? resolveNumeric(mergedConfig.ry, 'y', 0, canvas, options)
+        : undefined;
     const radius = shapeType === 'circle'
-        ? resolveNumeric(config.radius, 'x', Math.min(resolvedConfig.width, resolvedConfig.height) / 2, canvas, options)
+        ? resolveNumeric(mergedConfig.radius, 'x', Math.min(resolvedConfig.width, resolvedConfig.height) / 2, canvas, options)
         : undefined;
-    const polygonPoints = shapeType === 'polygon' ? resolvePolygonPoints(options, config.points) : null;
+    const polygonPoints = shapeType === 'polygon' ? resolvePolygonPoints(options, mergedConfig.points) : null;
     if (!validateFiniteField(options, 'left', left) ||
         !validateFiniteField(options, 'top', top) ||
         !validatePositiveField(options, 'width', resolvedConfig.width) ||
@@ -3233,7 +4354,7 @@ function createMask(context, config = {}) {
         (shapeType === 'polygon' && polygonPoints === null)) {
         return null;
     }
-    if (options.expandCanvasToImage) {
+    if (options.layoutMode === 'expand') {
         const requiredWidth = Math.ceil(left + resolvedConfig.width + 10);
         const requiredHeight = Math.ceil(top + resolvedConfig.height + 10);
         const nextWidth = Math.max(canvas.getWidth(), requiredWidth);
@@ -3248,8 +4369,8 @@ function createMask(context, config = {}) {
         }
     }
     let mask;
-    if (typeof resolvedConfig.fabricGenerator === 'function') {
-        const generated = resolvedConfig.fabricGenerator(resolvedConfig, canvas, options);
+    if (typeof config.fabricGenerator === 'function') {
+        const generated = config.fabricGenerator(resolvedConfig, canvas, options);
         if (!isFabricObjectLike(generated)) {
             reportWarning(options, generated, 'createMask skipped: fabricGenerator did not return a Fabric object.');
             return null;
@@ -3325,16 +4446,17 @@ function createMask(context, config = {}) {
         }
     }
     const maskObject = mask;
-    maskObject.selectable = 'selectable' in config ? !!config.selectable : true;
-    maskObject.evented = 'evented' in config ? !!config.evented : true;
-    maskObject.hasControls = 'hasControls' in config ? !!config.hasControls : true;
+    maskObject.selectable = 'selectable' in mergedConfig ? !!mergedConfig.selectable : true;
+    maskObject.evented = 'evented' in mergedConfig ? !!mergedConfig.evented : true;
+    maskObject.hasControls = 'hasControls' in mergedConfig ? !!mergedConfig.hasControls : true;
     maskObject.transparentCorners =
-        'transparentCorners' in config ? !!config.transparentCorners : false;
-    maskObject.strokeUniform = 'strokeUniform' in config ? !!config.strokeUniform : true;
+        'transparentCorners' in mergedConfig ? !!mergedConfig.transparentCorners : false;
+    maskObject.strokeUniform =
+        'strokeUniform' in mergedConfig ? !!mergedConfig.strokeUniform : true;
     maskObject.lockRotation = !options.maskRotatable;
-    maskObject.borderColor = (_o = config.borderColor) !== null && _o !== void 0 ? _o : 'red';
-    maskObject.cornerColor = (_p = config.cornerColor) !== null && _p !== void 0 ? _p : 'black';
-    maskObject.cornerSize = (_q = config.cornerSize) !== null && _q !== void 0 ? _q : 8;
+    maskObject.borderColor = (_o = mergedConfig.borderColor) !== null && _o !== void 0 ? _o : 'red';
+    maskObject.cornerColor = (_p = mergedConfig.cornerColor) !== null && _p !== void 0 ? _p : 'black';
+    maskObject.cornerSize = (_q = mergedConfig.cornerSize) !== null && _q !== void 0 ? _q : 8;
     const styles = ((_r = resolvedConfig.styles) !== null && _r !== void 0 ? _r : {});
     if ('stroke' in styles) {
         maskObject.stroke = styles.stroke;
@@ -3369,9 +4491,9 @@ function createMask(context, config = {}) {
     }
     canvas.renderAll();
     context.saveCanvasState();
-    if (typeof resolvedConfig.onCreate === 'function') {
+    if (typeof config.onCreate === 'function') {
         try {
-            resolvedConfig.onCreate(maskObject, canvas);
+            config.onCreate(maskObject, canvas);
         }
         catch (error) {
             reportWarning(options, error, 'createMask onCreate callback threw.');
@@ -3527,11 +4649,17 @@ function hideAllMaskLabels(context) {
     });
 }
 
+function getMaskListDocument(context) {
+    var _a, _b, _c, _d, _e;
+    const canvasLike = context.canvas;
+    return ((_e = (_c = (_b = (_a = canvasLike === null || canvasLike === void 0 ? void 0 : canvasLike.getElement) === null || _a === void 0 ? void 0 : _a.call(canvasLike)) === null || _b === void 0 ? void 0 : _b.ownerDocument) !== null && _c !== void 0 ? _c : (_d = canvasLike === null || canvasLike === void 0 ? void 0 : canvasLike.lowerCanvasEl) === null || _d === void 0 ? void 0 : _d.ownerDocument) !== null && _e !== void 0 ? _e : document);
+}
 function renderMaskList(context) {
     const listId = context.getListElementId();
     if (!listId)
         return;
-    const listEl = document.getElementById(listId);
+    const ownerDocument = getMaskListDocument(context);
+    const listEl = ownerDocument.getElementById(listId);
     if (!listEl || !context.canvas)
         return;
     listEl.innerHTML = '';
@@ -3540,7 +4668,7 @@ function renderMaskList(context) {
         .getObjects()
         .filter(isMaskObject)
         .forEach((mask) => {
-        const listItemElement = document.createElement('li');
+        const listItemElement = ownerDocument.createElement('li');
         listItemElement.className = 'list-group-item mask-item';
         listItemElement.textContent = mask.maskName;
         listItemElement.dataset.maskId = String(mask.maskId);
@@ -3563,7 +4691,7 @@ function updateMaskListSelection(context, selectedMask) {
     const listId = context.getListElementId();
     if (!listId)
         return;
-    const listEl = document.getElementById(listId);
+    const listEl = getMaskListDocument(context).getElementById(listId);
     if (!listEl)
         return;
     const selectedId = selectedMask ? String(selectedMask.maskId) : null;
@@ -3574,7 +4702,7 @@ function updateMaskListSelection(context, selectedMask) {
 }
 
 class DomBindings {
-    constructor(resolveElementId, isDisposed) {
+    constructor(resolveElementId, isDisposed, resolveDocument = () => document) {
         Object.defineProperty(this, "registry", {
             enumerable: true,
             configurable: true,
@@ -3593,14 +4721,21 @@ class DomBindings {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "resolveDocument", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.resolveElementId = resolveElementId;
         this.isDisposed = isDisposed;
+        this.resolveDocument = resolveDocument;
     }
     bindIfExists(key, eventType, handler) {
         const id = this.resolveElementId(key);
         if (!id)
             return false;
-        const element = document.getElementById(id);
+        const element = this.resolveDocument().getElementById(id);
         if (!element)
             return false;
         const wrapped = (event) => {
@@ -3617,7 +4752,7 @@ class DomBindings {
             const id = this.resolveElementId(entry.elementKey);
             if (!id)
                 continue;
-            const element = document.getElementById(id);
+            const element = this.resolveDocument().getElementById(id);
             if (!element)
                 continue;
             try {
@@ -3698,8 +4833,8 @@ function resetFileInput(input) {
 }
 
 const LAYOUT_EPSILON = 0.5;
-const INTERNAL_OPERATION_TOKEN = Symbol.for('ImageEditorInternalOperation');
-const INTERNAL_ALLOW_DURING_ANIMATION_QUEUE = Symbol.for('ImageEditorAllowDuringAnimationQueue');
+const INTERNAL_OPERATION_TOKEN = Symbol('ImageEditorInternalOperation');
+const INTERNAL_ALLOW_DURING_ANIMATION_QUEUE = Symbol('ImageEditorAllowDuringAnimationQueue');
 const CROP_MODE_CONTROL_KEYS = [
     'scalePercentageInput',
     'rotateLeftDegreesInput',
@@ -3720,9 +4855,85 @@ const CROP_MODE_CONTROL_KEYS = [
     'enterCropModeButton',
     'applyCropButton',
     'cancelCropButton',
+    'enterMosaicModeButton',
+    'exitMosaicModeButton',
+    'mosaicBrushSizeInput',
+    'mosaicBlockSizeInput',
 ];
 const CROP_MODE_ENABLED_KEYS = ['applyCropButton', 'cancelCropButton'];
 const CROP_SESSION_ALLOWED_OPERATIONS = new Set(['applyCrop', 'cancelCrop']);
+const MOSAIC_MODE_CONTROL_KEYS = [
+    'scalePercentageInput',
+    'rotateLeftDegreesInput',
+    'rotateRightDegreesInput',
+    'rotateLeftButton',
+    'rotateRightButton',
+    'createMaskButton',
+    'removeSelectedMaskButton',
+    'removeAllMasksButton',
+    'mergeMasksButton',
+    'downloadImageButton',
+    'zoomInButton',
+    'zoomOutButton',
+    'resetImageTransformButton',
+    'undoButton',
+    'redoButton',
+    'imageInput',
+    'enterCropModeButton',
+    'applyCropButton',
+    'cancelCropButton',
+    'enterMosaicModeButton',
+    'exitMosaicModeButton',
+    'mosaicBrushSizeInput',
+    'mosaicBlockSizeInput',
+];
+const MOSAIC_MODE_ENABLED_KEYS = [
+    'exitMosaicModeButton',
+    'mosaicBrushSizeInput',
+    'mosaicBlockSizeInput',
+];
+const MOSAIC_SESSION_ALLOWED_OPERATIONS = new Set([
+    'exitMosaicMode',
+    'applyMosaic',
+    'setMosaicConfig',
+    'resetMosaicConfig',
+    'setMosaicBrushSize',
+    'setMosaicBlockSize',
+    'saveState',
+]);
+const SCROLLBAR_SETTLE_EPSILON = 1;
+const IMAGE_EDITOR_OPERATIONS = new Set([
+    'init',
+    'loadImage',
+    'loadFromState',
+    'saveState',
+    'scaleImage',
+    'rotateImage',
+    'resetImageTransform',
+    'createMask',
+    'removeSelectedMask',
+    'removeAllMasks',
+    'mergeMasks',
+    'enterCropMode',
+    'applyCrop',
+    'cancelCrop',
+    'enterMosaicMode',
+    'exitMosaicMode',
+    'applyMosaic',
+    'setMosaicConfig',
+    'resetMosaicConfig',
+    'setMosaicBrushSize',
+    'setMosaicBlockSize',
+    'undo',
+    'redo',
+    'exportImageBase64',
+    'exportImageFile',
+    'downloadImage',
+    'dispose',
+]);
+function isImageEditorOperation(value) {
+    return value !== null && IMAGE_EDITOR_OPERATIONS.has(value);
+}
 class ImageEditor {
     constructor(fabricModuleOrOptions = {}, options = {}) {
         var _a;
@@ -3744,6 +4955,24 @@ class ImageEditor {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "currentLayoutMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'expand'
+        });
+        Object.defineProperty(this, "defaultMosaicConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentMosaicConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "canvas", {
             enumerable: true,
             configurable: true,
@@ -3882,6 +5111,12 @@ class ImageEditor {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "mosaicSession", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "domBindings", {
             enumerable: true,
             configurable: true,
@@ -3922,9 +5157,15 @@ class ImageEditor {
         this.fabricModule = (_a = detected.fabric) !== null && _a !== void 0 ? _a : {};
         this.isFabricLoaded = detected.isFabricLoaded;
         this.options = resolveOptions(detected.options);
-        const layoutConflict = detectLayoutConflict(this.options);
-        if (layoutConflict) {
-            reportWarning(this.options, null, layoutConflict.message);
+        this.currentLayoutMode = this.options.layoutMode;
+        this.defaultMosaicConfig = this.options.defaultMosaicConfig;
+        this.currentMosaicConfig = cloneResolvedMosaicConfig(this.defaultMosaicConfig);
+        const rawDefaultLayoutMode = detected.options
+            .defaultLayoutMode;
+        if (rawDefaultLayoutMode !== undefined && !isLayoutMode(rawDefaultLayoutMode)) {
+            reportWarning(this.options, new TypeError(`[ImageEditor] Unsupported defaultLayoutMode ` +
+                `${JSON.stringify(rawDefaultLayoutMode)}. ` +
+                'Expected "fit", "cover", or "expand".'), 'Invalid defaultLayoutMode fell back to "expand".');
         }
         this.operationGuard = new OperationGuard();
         this.animQueue = new AnimationQueue();
@@ -3966,10 +5207,14 @@ class ImageEditor {
             enterCropModeButton: 'enterCropModeButton',
             applyCropButton: 'applyCropButton',
             cancelCropButton: 'cancelCropButton',
+            enterMosaicModeButton: 'enterMosaicModeButton',
+            exitMosaicModeButton: 'exitMosaicModeButton',
+            mosaicBrushSizeInput: 'mosaicBrushSizeInput',
+            mosaicBlockSizeInput: 'mosaicBlockSizeInput',
             uploadArea: 'uploadArea',
         };
         this.elements = { ...defaults, ...idMap };
-        this.domBindings = new DomBindings((key) => this.elements[key], () => this.isDisposed);
+        this.domBindings = new DomBindings((key) => this.elements[key], () => this.isDisposed, () => { var _a, _b; return (_b = (_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document; });
         this.initCanvas();
         this.transformController = new TransformController(this.buildTransformContext());
         this.bindDomEvents();
@@ -4120,6 +5365,26 @@ class ImageEditor {
         this.bindElementIfExists('cancelCropButton', 'click', () => {
             this.cancelCrop();
         });
+        this.bindElementIfExists('enterMosaicModeButton', 'click', () => {
+            this.enterMosaicMode();
+        });
+        this.bindElementIfExists('exitMosaicModeButton', 'click', () => {
+            this.exitMosaicMode();
+        });
+        const bindMosaicSizeInput = (key, applyValue) => {
+            const handler = (event) => {
+                const parsed = parseFloat(event.target.value);
+                applyValue(parsed);
+            };
+            this.bindElementIfExists(key, 'input', handler);
+            this.bindElementIfExists(key, 'change', handler);
+        };
+        bindMosaicSizeInput('mosaicBrushSizeInput', (value) => {
+            this.setMosaicBrushSize(value);
+        });
+        bindMosaicSizeInput('mosaicBlockSizeInput', (value) => {
+            this.setMosaicBlockSize(value);
+        });
     }
     bindElementIfExists(key, event, handler) {
         var _a;
@@ -4155,6 +5420,9 @@ class ImageEditor {
         }
     }
     async loadImage(base64, options = {}) {
+        return this.loadImageInternal(base64, options);
+    }
+    async loadImageInternal(base64, options = {}) {
         if (!this.isFabricLoaded || !this.canvas)
             return;
         if (this.isDisposed)
@@ -4174,7 +5442,7 @@ class ImageEditor {
         const loadImageContext = {
             fabric: this.fabricModule,
             canvas: this.canvas,
-            options: this.options,
+            options: this.getRuntimeOptions(),
             containerElement: this.containerElement,
             placeholderElement: this.placeholderElement,
             viewportCache: this.viewportCache,
@@ -4266,6 +5534,11 @@ class ImageEditor {
             !CROP_SESSION_ALLOWED_OPERATIONS.has(operationName)) {
             throw new Error(`[ImageEditor] Cannot run "${operationName}" while crop mode is active.`);
         }
+        if (this.mosaicSession &&
+            !this.operationGuard.isOwnOperation(token) &&
+            !MOSAIC_SESSION_ALLOWED_OPERATIONS.has(operationName)) {
+            throw new Error(`[ImageEditor] Cannot run "${operationName}" while mosaic mode is active.`);
+        }
         if (this.animQueue.isBusy() && !this.canRunDuringAnimationQueue(options)) {
             throw new Error(`[ImageEditor] Cannot run "${operationName}" while an animation is queued.`);
         }
@@ -4275,10 +5548,17 @@ class ImageEditor {
             this.assertIdleForOperation(operationName, options);
             return true;
         }
-        catch {
+        catch (error) {
+            if (!this.isExpectedIdleGuardError(error, operationName)) {
+                throw error;
+            }
             return false;
         }
     }
+    isExpectedIdleGuardError(error, operationName) {
+        return (error instanceof Error &&
+            error.message.startsWith(`[ImageEditor] Cannot run "${operationName}" `));
+    }
     assertCanQueueAnimation(operationName, options) {
         this.operationGuard.assertCanQueueAnimation(operationName, this.getInternalOperationToken(options));
     }
@@ -4290,17 +5570,26 @@ class ImageEditor {
             ((_b = this.originalImage.height) !== null && _b !== void 0 ? _b : 0) > 0);
     }
     isBusy() {
-        return this.operationGuard.isBusy() || this.animQueue.isBusy() || this.cropSession !== null;
+        return (this.operationGuard.isBusy() ||
+            this.animQueue.isBusy() ||
+            this.cropSession !== null ||
+            this.mosaicSession !== null);
     }
     setLayoutMode(mode) {
-        if (mode !== 'fit' && mode !== 'cover' && mode !== 'expand') {
+        if (!isLayoutMode(mode)) {
             reportWarning(this.options, new TypeError(`[ImageEditor] Unsupported layout mode ${JSON.stringify(mode)}. ` +
                 'Expected "fit", "cover", or "expand".'), 'Ignored invalid layout mode.');
             return;
         }
-        this.options.fitImageToCanvas = mode === 'fit';
-        this.options.coverImageToCanvas = mode === 'cover';
-        this.options.expandCanvasToImage = mode === 'expand';
+        this.currentLayoutMode = mode;
+    }
+    getRuntimeOptions() {
+        if (this.currentLayoutMode === this.options.layoutMode)
+            return this.options;
+        return Object.freeze({
+            ...this.options,
+            layoutMode: this.currentLayoutMode,
+        });
     }
     buildCallbackContext(operation, isInternalOperation = false) {
         return { operation, isInternalOperation };
@@ -4309,7 +5598,7 @@ class ImageEditor {
         const internal = this.getInternalOperationToken(options);
         const activeOperation = this.operationGuard.activeOperationName();
         if (internal && activeOperation) {
-            return this.buildCallbackContext(activeOperation, true);
+            return this.buildCallbackContext(isImageEditorOperation(activeOperation) ? activeOperation : fallback, true);
         }
         return this.buildCallbackContext(fallback, false);
     }
@@ -4376,6 +5665,7 @@ class ImageEditor {
             currentRotation: this.currentRotation,
             isBusy: this.isBusy(),
             isCropMode: this.cropSession !== null,
+            isMosaicMode: this.mosaicSession !== null,
             canUndo: this.historyManager.canUndo(),
             canRedo: this.historyManager.canRedo(),
             canvasWidth,
@@ -4463,7 +5753,7 @@ class ImageEditor {
         const boundingRect = this.originalImage.getBoundingRect();
         const scrollbarSize = measureScrollbarSize((_b = (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : null);
         const viewport = this.measureLayoutViewport(scrollbarSize);
-        if (this.options.fitImageToCanvas || this.options.coverImageToCanvas) {
+        if (this.currentLayoutMode === 'fit' || this.currentLayoutMode === 'cover') {
             const canvasSize = computeScrollableCanvasSize(boundingRect.width, boundingRect.height, viewport, scrollbarSize);
             this.setCanvasSizePx(canvasSize.width, canvasSize.height);
             return;
@@ -4485,14 +5775,14 @@ class ImageEditor {
         const canvasH = Math.ceil(this.canvas.getHeight());
         const clipsImage = boundingRect.width > canvasW + LAYOUT_EPSILON ||
             boundingRect.height > canvasH + LAYOUT_EPSILON;
-        if (this.options.fitImageToCanvas || this.options.coverImageToCanvas) {
+        if (this.currentLayoutMode === 'fit' || this.currentLayoutMode === 'cover') {
             const staleOverflowWidth = canvasW > viewport.width + LAYOUT_EPSILON &&
                 boundingRect.width <= viewport.width + LAYOUT_EPSILON;
             const staleOverflowHeight = canvasH > viewport.height + LAYOUT_EPSILON &&
                 boundingRect.height <= viewport.height + LAYOUT_EPSILON;
             return clipsImage || staleOverflowWidth || staleOverflowHeight;
         }
-        if (this.options.expandCanvasToImage) {
+        if (this.currentLayoutMode === 'expand') {
             const expectedW = Math.max(viewport.width, Math.ceil(boundingRect.width));
             const expectedH = Math.max(viewport.height, Math.ceil(boundingRect.height));
             return (Math.abs(canvasW - expectedW) > LAYOUT_EPSILON ||
@@ -4500,6 +5790,33 @@ class ImageEditor {
         }
         return clipsImage;
     }
+    settleFitCoverScrollbarsAfterStateRestore() {
+        if (!this.canvas ||
+            !this.containerElement ||
+            (this.currentLayoutMode !== 'fit' && this.currentLayoutMode !== 'cover')) {
+            return;
+        }
+        const canvasW = Math.ceil(this.canvas.getWidth());
+        const canvasH = Math.ceil(this.canvas.getHeight());
+        if (canvasW <= 1 || canvasH <= 1)
+            return;
+        const clientW = Math.floor(this.containerElement.clientWidth || 0);
+        const clientH = Math.floor(this.containerElement.clientHeight || 0);
+        if (clientW <= 0 || clientH <= 0)
+            return;
+        const scrollW = Math.ceil(this.containerElement.scrollWidth || 0);
+        const scrollH = Math.ceil(this.containerElement.scrollHeight || 0);
+        const hasHorizontalScrollbar = scrollW > clientW + LAYOUT_EPSILON;
+        const hasVerticalScrollbar = scrollH > clientH + LAYOUT_EPSILON;
+        if (!hasHorizontalScrollbar && !hasVerticalScrollbar)
+            return;
+        const nudgeWidth = hasVerticalScrollbar && Math.abs(canvasW - clientW) <= SCROLLBAR_SETTLE_EPSILON;
+        const nudgeHeight = hasHorizontalScrollbar && Math.abs(canvasH - clientH) <= SCROLLBAR_SETTLE_EPSILON;
+        if (!nudgeWidth && !nudgeHeight)
+            return;
+        this.setCanvasSizePx(nudgeWidth ? canvasW - 1 : canvasW, nudgeHeight ? canvasH - 1 : canvasH);
+        this.setCanvasSizePx(canvasW, canvasH);
+    }
     captureImageDisplayGeometry() {
         if (!this.canvas || !this.originalImage)
             return null;
@@ -4564,11 +5881,7 @@ class ImageEditor {
             afterTransformSnap: () => {
                 if (this.isDisposed || !this.canvas || !this.originalImage)
                     return;
-                if (this.options.expandCanvasToImage ||
-                    this.options.coverImageToCanvas ||
-                    this.options.fitImageToCanvas) {
-                    this.updateCanvasSizeToImageBounds();
-                }
+                this.updateCanvasSizeToImageBounds();
                 this.alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
                 this.canvas
                     .getObjects()
@@ -4736,14 +6049,13 @@ class ImageEditor {
                 this.currentImageMimeType = null;
             }
             this.isImageLoadedToCanvas = !!this.originalImage;
-            if (this.originalImage &&
-                (this.options.expandCanvasToImage ||
-                    this.options.coverImageToCanvas ||
-                    this.options.fitImageToCanvas) &&
-                this.shouldNormalizeCanvasSizeAfterStateRestore()) {
+            if (this.originalImage && this.shouldNormalizeCanvasSizeAfterStateRestore()) {
                 this.updateCanvasSizeToImageBounds();
                 this.alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
             }
+            if (this.originalImage) {
+                this.settleFitCoverScrollbarsAfterStateRestore();
+            }
             const restoredMasks = restoredState.objects.filter(isMaskObject);
             this.lastMask = restoredMasks.reduce((lastMask, maskObject) => !lastMask || maskObject.maskId > lastMask.maskId ? maskObject : lastMask, null);
             restoredMasks.forEach((maskObject) => {
@@ -4803,16 +6115,12 @@ class ImageEditor {
             if (after === before) {
                 return;
             }
-            let executedOnce = false;
             const cmd = new Command(async () => {
-                if (executedOnce) {
-                    await this.loadFromStateInternal(after, this.withAnimationQueueBypass());
-                }
-                executedOnce = true;
+                await this.loadFromStateInternal(after, this.withAnimationQueueBypass());
             }, async () => {
                 await this.loadFromStateInternal(before, this.withAnimationQueueBypass());
             });
-            this.historyManager.execute(cmd);
+            this.historyManager.push(cmd);
             this.lastSnapshot = after;
         }
         catch (error) {
@@ -4927,7 +6235,7 @@ class ImageEditor {
         return {
             fabric: this.fabricModule,
             canvas: this.canvas,
-            options: this.options,
+            options: this.getRuntimeOptions(),
             getLastMask: () => this.lastMask,
             setLastMask: (maskObject) => {
                 this.lastMask = maskObject;
@@ -5128,7 +6436,7 @@ class ImageEditor {
             containerElement: this.containerElement,
             loadImage: async (base64, providedOptions) => {
                 const geometry = this.captureImageDisplayGeometry();
-                await this.loadImage(base64, this.withInternalOperationOptions(operationToken, providedOptions));
+                await this.loadImageInternal(base64, this.withInternalOperationOptions(operationToken, providedOptions !== null && providedOptions !== void 0 ? providedOptions : {}));
                 this.restoreMergedImageDisplayGeometry(geometry);
             },
             saveState: () => this.captureSnapshotInternal(),
@@ -5141,8 +6449,9 @@ class ImageEditor {
     }
     captureSnapshotInternal() {
         var _a;
-        if (!this.canvas)
-            return '';
+        if (!this.canvas) {
+            throw new Error('[ImageEditor] Cannot capture canvas snapshot before init or after dispose.');
+        }
         const activeMask = this.getActiveMaskForSnapshot();
         this.hideAllMaskLabels();
         return saveState({
@@ -5161,9 +6470,134 @@ class ImageEditor {
         const activeObject = this.canvas.getActiveObject();
         if (activeObject && isMaskObject(activeObject))
             return activeObject;
-        return ((_a = this.canvas
+        const labeledMasks = this.canvas
             .getObjects()
-            .find((object) => isMaskObject(object) && !!object.labelObject)) !== null && _a !== void 0 ? _a : null);
+            .filter((object) => isMaskObject(object) && !!object.labelObject);
+        return labeledMasks.length === 1 ? ((_a = labeledMasks[0]) !== null && _a !== void 0 ? _a : null) : null;
+    }
+    enterMosaicMode() {
+        if (!this.canvas || !this.originalImage)
+            return;
+        if (this.mosaicSession)
+            return;
+        if (!this.isImageLoaded())
+            return;
+        if (!this.canRunIdleOperation('enterMosaicMode'))
+            return;
+        enterMosaicMode(this.buildMosaicControllerContext());
+        this.updateInputs();
+        this.updateUi();
+        const callbackContext = this.buildCallbackContext('enterMosaicMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    exitMosaicMode() {
+        if (!this.canvas || !this.mosaicSession)
+            return;
+        if (!this.canRunIdleOperation('exitMosaicMode'))
+            return;
+        exitMosaicMode(this.buildMosaicControllerContext());
+        this.updateInputs();
+        this.updateUi();
+        const callbackContext = this.buildCallbackContext('exitMosaicMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    isMosaicMode() {
+        return this.mosaicSession !== null;
+    }
+    getMosaicConfig() {
+        return cloneResolvedMosaicConfig(this.currentMosaicConfig);
+    }
+    setMosaicConfig(config) {
+        this.applyMosaicConfigPatch(config, 'setMosaicConfig');
+    }
+    resetMosaicConfig() {
+        if (this.isDisposed)
+            return;
+        const nextConfig = cloneResolvedMosaicConfig(this.defaultMosaicConfig);
+        if (areResolvedMosaicConfigsEqual(this.currentMosaicConfig, nextConfig))
+            return;
+        this.currentMosaicConfig = nextConfig;
+        if (this.mosaicSession && this.canvas) {
+            updateMosaicPreview(this.buildMosaicControllerContext());
+        }
+        this.updateInputs();
+        this.updateUi();
+        this.emitImageChanged(this.buildCallbackContext('resetMosaicConfig', false));
+    }
+    setMosaicBrushSize(size) {
+        this.applyMosaicConfigPatch({ brushSize: size }, 'setMosaicBrushSize');
+    }
+    setMosaicBlockSize(size) {
+        this.applyMosaicConfigPatch({ blockSize: size }, 'setMosaicBlockSize');
+    }
+    applyMosaicConfigPatch(config, operation) {
+        if (this.isDisposed)
+            return;
+        if (config === null || typeof config !== 'object' || Array.isArray(config)) {
+            reportWarning(this.options, new TypeError('[ImageEditor] Invalid Mosaic config object.'), 'Ignored invalid Mosaic config.');
+            return;
+        }
+        const invalidFields = getInvalidMosaicConfigFields(config);
+        if (invalidFields.length > 0) {
+            reportWarning(this.options, new TypeError(`[ImageEditor] Ignored invalid Mosaic config field(s): ` +
+                `${invalidFields.join(', ')}.`), 'Ignored invalid Mosaic config fields.');
+        }
+        const nextConfig = mergeMosaicConfigPatch(this.currentMosaicConfig, config);
+        if (areResolvedMosaicConfigsEqual(this.currentMosaicConfig, nextConfig))
+            return;
+        this.currentMosaicConfig = nextConfig;
+        if (this.mosaicSession && this.canvas) {
+            updateMosaicPreview(this.buildMosaicControllerContext());
+        }
+        this.updateInputs();
+        this.updateUi();
+        this.emitImageChanged(this.buildCallbackContext(operation, false));
+    }
+    buildMosaicControllerContext() {
+        return {
+            fabric: this.fabricModule,
+            canvas: this.canvas,
+            options: this.options,
+            historyManager: this.historyManager,
+            getMosaicConfig: () => cloneResolvedMosaicConfig(this.currentMosaicConfig),
+            isImageLoaded: () => this.isImageLoaded(),
+            getOriginalImage: () => this.originalImage,
+            setOriginalImage: (image) => {
+                this.originalImage = image;
+            },
+            getCurrentImageMimeType: () => this.currentImageMimeType,
+            setCurrentImageMimeType: (mimeType) => {
+                this.currentImageMimeType = mimeType;
+            },
+            getLastSnapshot: () => this.lastSnapshot,
+            setLastSnapshot: (snapshot) => {
+                this.lastSnapshot = snapshot;
+            },
+            captureSnapshot: () => this.captureSnapshotInternal(),
+            loadFromState: (snapshot) => this.loadFromStateInternal(snapshot, this.withAnimationQueueBypass()),
+            updateUi: () => {
+                this.updateUi();
+            },
+            updateInputs: () => {
+                this.updateInputs();
+            },
+            hideAllMaskLabels: () => {
+                this.hideAllMaskLabels();
+            },
+            emitImageChanged: (context) => {
+                this.emitImageChanged(context);
+            },
+            emitBusyChangeIfChanged: (context) => {
+                this.emitBusyChangeIfChanged(context);
+            },
+            buildCallbackContext: (operation, isInternal) => this.buildCallbackContext(operation, isInternal),
+            getMosaicSession: () => this.mosaicSession,
+            setMosaicSession: (session) => {
+                this.mosaicSession = session;
+            },
+        };
     }
     enterCropMode() {
         if (!this.canvas || !this.originalImage)
@@ -5236,7 +6670,7 @@ class ImageEditor {
             },
             saveState: () => this.captureSnapshotInternal(),
             loadFromState: (snapshot) => this.loadFromStateInternal(snapshot, this.withInternalOperationOptions(operationToken, this.withAnimationQueueBypass())),
-            loadImage: (base64, providedOptions) => this.loadImage(base64, this.withInternalOperationOptions(operationToken, providedOptions)),
+            loadImage: (base64, providedOptions) => this.loadImageInternal(base64, this.withInternalOperationOptions(operationToken, providedOptions !== null && providedOptions !== void 0 ? providedOptions : {})),
             getMaskCounter: () => this.maskCounter,
             setMaskCounter: (n) => {
                 this.maskCounter = n;
@@ -5248,13 +6682,28 @@ class ImageEditor {
     }
     updateInputs() {
         const scaleId = this.elements.scalePercentageInput;
-        if (!scaleId)
-            return;
-        const scaleInputElement = document.getElementById(scaleId);
-        if (scaleInputElement)
-            scaleInputElement.value = String(Math.round(this.currentScale * 100));
+        if (scaleId) {
+            const scaleInputElement = document.getElementById(scaleId);
+            if (scaleInputElement) {
+                scaleInputElement.value = String(Math.round(this.currentScale * 100));
+            }
+        }
+        const mosaicConfig = this.getMosaicConfig();
+        const mosaicBrushSizeInputId = this.elements.mosaicBrushSizeInput;
+        if (mosaicBrushSizeInputId) {
+            const brushInput = document.getElementById(mosaicBrushSizeInputId);
+            if (brushInput)
+                brushInput.value = String(mosaicConfig.brushSize);
+        }
+        const mosaicBlockSizeInputId = this.elements.mosaicBlockSizeInput;
+        if (mosaicBlockSizeInputId) {
+            const blockInput = document.getElementById(mosaicBlockSizeInputId);
+            if (blockInput)
+                blockInput.value = String(mosaicConfig.blockSize);
+        }
     }
     updateUi() {
+        var _a;
         if (!this.canvas)
             return;
         const hasImage = !!this.originalImage;
@@ -5266,13 +6715,22 @@ class ImageEditor {
         const canUndo = this.historyManager.canUndo();
         const canRedo = this.historyManager.canRedo();
         const isInCropMode = this.cropSession !== null;
+        const isInMosaicMode = this.mosaicSession !== null;
         const isBusy = this.operationGuard.isBusy() || this.animQueue.isBusy();
+        const isMosaicApplying = ((_a = this.mosaicSession) === null || _a === void 0 ? void 0 : _a.isApplying) === true;
         if (isInCropMode) {
             CROP_MODE_CONTROL_KEYS.forEach((key) => {
                 this.setControlEnabled(key, !isBusy && CROP_MODE_ENABLED_KEYS.includes(key));
             });
             return;
         }
+        if (isInMosaicMode) {
+            MOSAIC_MODE_CONTROL_KEYS.forEach((key) => {
+                this.setControlEnabled(key, !isBusy && !isMosaicApplying && MOSAIC_MODE_ENABLED_KEYS.includes(key));
+            });
+            this.setControlEnabled('imageInput', false);
+            return;
+        }
         this.setControlEnabled('scalePercentageInput', hasImage && !isBusy);
         this.setControlEnabled('rotateLeftDegreesInput', hasImage && !isBusy);
         this.setControlEnabled('rotateRightDegreesInput', hasImage && !isBusy);
@@ -5289,6 +6747,10 @@ class ImageEditor {
         this.setControlEnabled('undoButton', hasImage && !isBusy && canUndo);
         this.setControlEnabled('redoButton', hasImage && !isBusy && canRedo);
         this.setControlEnabled('enterCropModeButton', hasImage && !isBusy);
+        this.setControlEnabled('enterMosaicModeButton', hasImage && !isBusy);
+        this.setControlEnabled('exitMosaicModeButton', false);
+        this.setControlEnabled('mosaicBrushSizeInput', !this.isDisposed);
+        this.setControlEnabled('mosaicBlockSizeInput', !this.isDisposed);
         this.setControlEnabled('imageInput', !isBusy);
         this.setControlEnabled('applyCropButton', false);
         this.setControlEnabled('cancelCropButton', false);
@@ -5386,6 +6848,14 @@ class ImageEditor {
             }
             this.cropSession = null;
         }
+        if (this.mosaicSession && this.canvas) {
+            try {
+                exitMosaicMode(this.buildMosaicControllerContext());
+            }
+            catch {
+            }
+            this.mosaicSession = null;
+        }
         if (this.canvas) {
             try {
                 void Promise.resolve(this.canvas.dispose()).catch(() => {