html2canvas-pro 2.6.0 → 2.6.2

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.6.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.6.2 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -10,7 +10,7 @@
 		__esModule: { value: true },
 		[Symbol.toStringTag]: { value: "Module" }
 	});
-	//#region src/config.ts
+	// src/config.ts
 	/**
 	* Html2Canvas Configuration
 	*
@@ -53,8 +53,7 @@
 			});
 		}
 	};
-	//#endregion
-	//#region src/core/validator.ts
+	// src/core/validator.ts
 	/**
 	* Input Validator
 	*
@@ -442,8 +441,7 @@
 			...config
 		});
 	}
-	//#endregion
-	//#region src/core/performance-monitor.ts
+	// src/core/performance-monitor.ts
 	/**
 	* Performance Monitor
 	*
@@ -452,7 +450,8 @@
 	*
 	* Usage:
 	* ```typescript
-	* const monitor = new PerformanceMonitor(context);
+	* // Standalone (logs disabled) or with the render pipeline's context.
+	* const monitor = new PerformanceMonitor(null);
 	*
 	* monitor.start('clone');
 	* await cloneDocument();
@@ -462,13 +461,13 @@
 	* ```
 	*/
 	var PerformanceMonitor = class {
-		context;
+		logger;
 		activeMetrics = /* @__PURE__ */ new Map();
 		completedMetrics = [];
 		enabled;
 		getTime;
-		constructor(context, enabled = true) {
-			this.context = context;
+		constructor(logger, enabled = true) {
+			this.logger = logger;
 			this.enabled = enabled;
 			this.getTime = typeof performance !== "undefined" && typeof performance.now === "function" ? () => performance.now() : () => Date.now();
 		}
@@ -480,7 +479,7 @@
 		*/
 		start(name, metadata) {
 			if (!this.enabled) return;
-			if (this.activeMetrics.has(name)) this.context?.logger.warn(`Performance metric '${name}' already started. Overwriting.`);
+			if (this.activeMetrics.has(name)) this.logger?.warn(`Performance metric '${name}' already started. Overwriting.`);
 			this.activeMetrics.set(name, {
 				name,
 				startTime: this.getTime(),
@@ -497,14 +496,14 @@
 			if (!this.enabled) return;
 			const metric = this.activeMetrics.get(name);
 			if (!metric) {
-				this.context?.logger.warn(`Performance metric '${name}' not found. Was start() called?`);
+				this.logger?.warn(`Performance metric '${name}' not found. Was start() called?`);
 				return;
 			}
 			metric.endTime = this.getTime();
 			metric.duration = metric.endTime - metric.startTime;
 			this.completedMetrics.push(metric);
 			this.activeMetrics.delete(name);
-			this.context?.logger.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
+			this.logger?.debug(`⏱️  ${name}: ${metric.duration.toFixed(2)}ms`, metric.metadata);
 			return metric;
 		}
 		/**
@@ -584,11 +583,12 @@
 		* Log performance summary to console
 		*/
 		logSummary() {
-			if (!this.enabled || this.completedMetrics.length === 0 || !this.context) return;
+			if (!this.enabled || this.completedMetrics.length === 0 || !this.logger) return;
+			const logger = this.logger;
 			const summary = this.getSummary();
-			this.context.logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
+			logger.info(`\n📊 Performance Summary (Total: ${summary.totalDuration.toFixed(2)}ms):`);
 			summary.breakdown.sort((a, b) => b.duration - a.duration).forEach((item) => {
-				this.context.logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
+				logger.info(`  ${item.name.padEnd(20)} ${item.duration.toFixed(2).padStart(8)}ms  ${item.percentage.padStart(6)}`);
 			});
 		}
 		/**
@@ -612,8 +612,7 @@
 			return Array.from(this.activeMetrics.keys());
 		}
 	};
-	//#endregion
-	//#region src/css/layout/bounds.ts
+	// src/css/layout/bounds.ts
 	var Bounds = class Bounds {
 		left;
 		top;
@@ -649,8 +648,7 @@
 		if (!body || !documentElement) throw new Error(`Unable to get document size`);
 		return new Bounds(0, 0, Math.max(Math.max(body.scrollWidth, documentElement.scrollWidth), Math.max(body.offsetWidth, documentElement.offsetWidth), Math.max(body.clientWidth, documentElement.clientWidth)), Math.max(Math.max(body.scrollHeight, documentElement.scrollHeight), Math.max(body.offsetHeight, documentElement.offsetHeight), Math.max(body.clientHeight, documentElement.clientHeight)));
 	};
-	//#endregion
-	//#region src/core/util.ts
+	// src/core/util.ts
 	/**
 	* Indexed access where the shape/arity is guaranteed by construction (the CSS
 	* grammar or a preceding length check). Throws on the impossible case instead
@@ -728,8 +726,7 @@
 		const exp = exponent.length ? parseInt(String.fromCodePoint(...exponent), 10) : 0;
 		return sign * (int + frac * Math.pow(10, -fracd)) * Math.pow(10, expsign * exp);
 	};
-	//#endregion
-	//#region src/css/syntax/token-singletons.ts
+	// src/css/syntax/token-singletons.ts
 	const LEFT_PARENTHESIS_TOKEN = { type: 2 };
 	const RIGHT_PARENTHESIS_TOKEN = { type: 3 };
 	const COMMA_TOKEN = { type: 4 };
@@ -751,8 +748,7 @@
 	const RIGHT_SQUARE_BRACKET_TOKEN = { type: 29 };
 	const WHITESPACE_TOKEN = { type: 31 };
 	const EOF_TOKEN = { type: 32 };
-	//#endregion
-	//#region src/css/syntax/tokenizer.ts
+	// src/css/syntax/tokenizer.ts
 	var Tokenizer = class Tokenizer {
 		static _pool = [];
 		static MAX_POOL_SIZE = 40;
@@ -1208,8 +1204,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/syntax/parser.ts
+	// src/css/syntax/parser.ts
 	var Parser = class Parser {
 		_tokens;
 		constructor(tokens) {
@@ -1318,8 +1313,7 @@
 		if (type === 28 && token.type === 29) return true;
 		return type === 2 && token.type === 3;
 	};
-	//#endregion
-	//#region src/css/types/safe-eval.ts
+	// src/css/types/safe-eval.ts
 	/**
 	* Safe arithmetic expression evaluator — replaces `new Function()`.
 	*
@@ -1377,8 +1371,7 @@
 		}
 		return stack.length === 1 ? stack[0] ?? NaN : NaN;
 	};
-	//#endregion
-	//#region src/css/types/color-math.ts
+	// src/css/types/color-math.ts
 	/**
 	* Color mathematics utilities
 	* Extracted to break circular dependency between srgb.ts and color-utilities.ts
@@ -1399,8 +1392,7 @@
 			A[6] * B[0] + A[7] * B[1] + A[8] * B[2]
 		];
 	};
-	//#endregion
-	//#region src/css/types/color-spaces/srgb.ts
+	// src/css/types/color-spaces/srgb.ts
 	/**
 	* SRGB related functions
 	*/
@@ -1509,11 +1501,9 @@
 			args[3]
 		];
 	};
-	//#endregion
-	//#region src/css/types/length.ts
+	// src/css/types/length.ts
 	const isLength = (token) => token.type === 17 || token.type === 15;
-	//#endregion
-	//#region src/css/types/length-percentage.ts
+	// src/css/types/length-percentage.ts
 	const isLengthPercentage = (token) => token.type === 16 || isLength(token) || isCalcWithPercentage(token);
 	/**
 	* Check if a token is a CalcWithPercentage deferred token.
@@ -1637,8 +1627,7 @@
 		}
 		return token.number;
 	};
-	//#endregion
-	//#region src/css/types/angle.ts
+	// src/css/types/angle.ts
 	const DEG = "deg";
 	const GRAD = "grad";
 	const RAD = "rad";
@@ -1691,8 +1680,7 @@
 		return 0;
 	};
 	const deg = (deg) => Math.PI * deg / 180;
-	//#endregion
-	//#region src/css/types/color-utilities.ts
+	// src/css/types/color-utilities.ts
 	const isTransparent = (color) => (255 & color) === 0;
 	const asString = (color) => {
 		const alpha = 255 & color;
@@ -2147,8 +2135,7 @@
 			args[3]
 		]);
 	};
-	//#endregion
-	//#region src/css/types/color-spaces/p3.ts
+	// src/css/types/color-spaces/p3.ts
 	/**
 	* Display-P3 related functions
 	*/
@@ -2266,8 +2253,7 @@
 			args[3]
 		]);
 	};
-	//#endregion
-	//#region src/css/types/color-spaces/a98.ts
+	// src/css/types/color-spaces/a98.ts
 	/**
 	* A98-RGB related functions
 	*/
@@ -2373,8 +2359,7 @@
 			args[3]
 		]);
 	};
-	//#endregion
-	//#region src/css/types/color-spaces/pro-photo.ts
+	// src/css/types/color-spaces/pro-photo.ts
 	/**
 	* Pro Photo related functions
 	*/
@@ -2499,8 +2484,7 @@
 			args[3]
 		]);
 	};
-	//#endregion
-	//#region src/css/types/color-spaces/rec2020.ts
+	// src/css/types/color-spaces/rec2020.ts
 	/**
 	* REC2020 related functions
 	*/
@@ -2621,8 +2605,7 @@
 			args[3]
 		]);
 	};
-	//#endregion
-	//#region src/css/types/functions/color-mix.ts
+	// src/css/types/functions/color-mix.ts
 	const HUE_DEG_INDEX = {
 		lch: 2,
 		oklch: 2,
@@ -3008,8 +2991,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/types/color.ts
+	// src/css/types/color.ts
 	const color$1 = {
 		name: "color",
 		parse: (context, value) => {
@@ -3413,8 +3395,7 @@
 		YELLOW: 4294902015,
 		YELLOWGREEN: 2597139199
 	};
-	//#endregion
-	//#region src/dom/node-type-guards.ts
+	// src/dom/node-type-guards.ts
 	/**
 	* DOM Node Type Guards
 	*
@@ -3470,8 +3451,7 @@
 	* SVG elements also do not support pseudo-elements.
 	*/
 	const canHavePseudoElements = (element) => !isSVGElementNode(element) && !VOID_OR_REPLACED_TAGS.has(element.tagName);
-	//#endregion
-	//#region src/css/property-descriptors/list-style-type.ts
+	// src/css/property-descriptors/list-style-type.ts
 	const listStyleType = {
 		name: "list-style-type",
 		initialValue: "none",
@@ -3536,11 +3516,9 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/core/bitwise.ts
+	// src/core/bitwise.ts
 	const contains = (bit, value) => (bit & value) !== 0;
-	//#endregion
-	//#region src/css/types/functions/counter.ts
+	// src/css/types/functions/counter.ts
 	var CounterState = class {
 		counters = {};
 		getCounterValue(name) {
@@ -3956,8 +3934,7 @@
 			default: return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/display.ts
+	// src/css/property-descriptors/display.ts
 	const display = {
 		name: "display",
 		initialValue: "inline-block",
@@ -4006,8 +3983,7 @@
 		}
 		return 0;
 	};
-	//#endregion
-	//#region src/css/property-descriptors/float.ts
+	// src/css/property-descriptors/float.ts
 	const float = {
 		name: "float",
 		initialValue: "none",
@@ -4023,8 +3999,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/overflow.ts
+	// src/css/property-descriptors/overflow.ts
 	const overflow = {
 		name: "overflow",
 		initialValue: "visible",
@@ -4042,8 +4017,7 @@
 			});
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-decoration-color.ts
+	// src/css/property-descriptors/text-decoration-color.ts
 	const textDecorationColor = {
 		name: `text-decoration-color`,
 		initialValue: "transparent",
@@ -4051,8 +4025,7 @@
 		type: 3,
 		format: "color"
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-decoration-line.ts
+	// src/css/property-descriptors/text-decoration-line.ts
 	const textDecorationLine = {
 		name: "text-decoration-line",
 		initialValue: "none",
@@ -4070,8 +4043,7 @@
 			}).filter((line) => line !== 0);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/content.ts
+	// src/css/property-descriptors/content.ts
 	const content = {
 		name: "content",
 		initialValue: "none",
@@ -4084,8 +4056,7 @@
 			return tokens;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/quotes.ts
+	// src/css/property-descriptors/quotes.ts
 	const quotes = {
 		name: "quotes",
 		initialValue: "none",
@@ -4115,8 +4086,7 @@
 		if (!quote) return "";
 		return open ? quote.open : quote.close;
 	};
-	//#endregion
-	//#region src/css/property-descriptors/counter-increment.ts
+	// src/css/property-descriptors/counter-increment.ts
 	/** Shared counter-ID parsing: returns next number or a fallback default. */
 	const parseCounterValue = (tokens, defaultNumber) => {
 		const entries = [];
@@ -4146,8 +4116,7 @@
 			}));
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/counter-reset.ts
+	// src/css/property-descriptors/counter-reset.ts
 	const counterReset = {
 		name: "counter-reset",
 		initialValue: "none",
@@ -4161,8 +4130,7 @@
 			}));
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-clip.ts
+	// src/css/property-descriptors/background-clip.ts
 	const backgroundClip = {
 		name: "background-clip",
 		initialValue: "border-box",
@@ -4179,8 +4147,7 @@
 			});
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-color.ts
+	// src/css/property-descriptors/background-color.ts
 	const backgroundColor = {
 		name: `background-color`,
 		initialValue: "transparent",
@@ -4188,8 +4155,7 @@
 		type: 3,
 		format: "color"
 	};
-	//#endregion
-	//#region src/css/types/functions/gradient.ts
+	// src/css/types/functions/gradient.ts
 	const parseColorStop = (context, args) => {
 		const color = color$1.parse(context, at(args, 0));
 		const stop = args[1];
@@ -4325,8 +4291,7 @@
 		}
 		return [rx, ry];
 	};
-	//#endregion
-	//#region src/css/types/functions/linear-gradient.ts
+	// src/css/types/functions/linear-gradient.ts
 	const linearGradient = (context, tokens) => {
 		let angle$2 = deg(180);
 		const stops = [];
@@ -4350,8 +4315,7 @@
 			type: 1
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/-prefix-linear-gradient.ts
+	// src/css/types/functions/-prefix-linear-gradient.ts
 	const prefixLinearGradient = (context, tokens) => {
 		let angle$1 = deg(180);
 		const stops = [];
@@ -4380,8 +4344,7 @@
 			type: 1
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/-webkit-gradient.ts
+	// src/css/types/functions/-webkit-gradient.ts
 	const webkitGradient = (context, tokens) => {
 		const angle = deg(180);
 		const stops = [];
@@ -4443,8 +4406,7 @@
 			type
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/radial-gradient.ts
+	// src/css/types/functions/radial-gradient.ts
 	const CLOSEST_SIDE = "closest-side";
 	const FARTHEST_SIDE = "farthest-side";
 	const CLOSEST_CORNER = "closest-corner";
@@ -4524,8 +4486,7 @@
 			type: 2
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/-prefix-radial-gradient.ts
+	// src/css/types/functions/-prefix-radial-gradient.ts
 	const prefixRadialGradient = (context, tokens) => {
 		let shape = 1;
 		let size = 3;
@@ -4596,16 +4557,14 @@
 			type: 2
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/repeating-linear-gradient.ts
+	// src/css/types/functions/repeating-linear-gradient.ts
 	const repeatingLinearGradient = (context, tokens) => {
 		return {
 			...linearGradient(context, tokens),
 			type: 3
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/repeating-radial-gradient.ts
+	// src/css/types/functions/repeating-radial-gradient.ts
 	/**
 	* repeating-radial-gradient shares the radial-gradient grammar exactly; only
 	* the image type differs, which switches the renderer to periodic stops.
@@ -4616,8 +4575,7 @@
 			type: 4
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/conic-gradient.ts
+	// src/css/types/functions/conic-gradient.ts
 	/**
 	* conic-gradient( [ from <angle> ]? [ at <position> ]?, <color-stop-list> )
 	*
@@ -4687,8 +4645,7 @@
 			type: 6
 		};
 	};
-	//#endregion
-	//#region src/css/types/functions/image-set.ts
+	// src/css/types/functions/image-set.ts
 	const parseResolution = (token) => {
 		if (!token) return 1;
 		if (isDimensionToken(token)) {
@@ -4722,8 +4679,7 @@
 		const chosen = at(satisfying.length > 0 ? satisfying : candidates.slice().sort((a, b) => b.resolution - a.resolution), 0);
 		return image.parse(context, chosen.imageToken);
 	};
-	//#endregion
-	//#region src/css/types/image.ts
+	// src/css/types/image.ts
 	const isLinearGradient = (background) => {
 		return background.type === 1;
 	};
@@ -4793,8 +4749,7 @@
 		"image-set": imageSet,
 		"-webkit-image-set": imageSet
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-image.ts
+	// src/css/property-descriptors/background-image.ts
 	const backgroundImage = {
 		name: "background-image",
 		initialValue: "none",
@@ -4808,8 +4763,7 @@
 			return tokens.filter((value) => nonFunctionArgSeparator(value) && isSupportedImage(value)).map((value) => image.parse(context, value));
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-origin.ts
+	// src/css/property-descriptors/background-origin.ts
 	const backgroundOrigin = {
 		name: "background-origin",
 		initialValue: "border-box",
@@ -4825,8 +4779,7 @@
 			});
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-position.ts
+	// src/css/property-descriptors/background-position.ts
 	const backgroundPosition = {
 		name: "background-position",
 		initialValue: "0% 0%",
@@ -4838,8 +4791,7 @@
 			}).map(parseLengthPercentageTuple);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-repeat.ts
+	// src/css/property-descriptors/background-repeat.ts
 	const backgroundRepeat = {
 		name: "background-repeat",
 		initialValue: "repeat",
@@ -4859,8 +4811,7 @@
 			default: return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/background-size.ts
+	// src/css/property-descriptors/background-size.ts
 	const backgroundSize = {
 		name: "background-size",
 		initialValue: "0",
@@ -4871,8 +4822,7 @@
 		}
 	};
 	const isBackgroundSizeInfoToken = (value) => isIdentToken(value) || isLengthPercentage(value);
-	//#endregion
-	//#region src/css/property-descriptors/border-color.ts
+	// src/css/property-descriptors/border-color.ts
 	const borderColorForSide = (side) => ({
 		name: `border-${side}-color`,
 		initialValue: "transparent",
@@ -4884,8 +4834,7 @@
 	const borderRightColor = borderColorForSide("right");
 	const borderBottomColor = borderColorForSide("bottom");
 	const borderLeftColor = borderColorForSide("left");
-	//#endregion
-	//#region src/css/property-descriptors/border-radius.ts
+	// src/css/property-descriptors/border-radius.ts
 	const borderRadiusForSide = (side) => ({
 		name: `border-${side}-radius`,
 		initialValue: "0 0",
@@ -4897,8 +4846,7 @@
 	const borderTopRightRadius = borderRadiusForSide("top-right");
 	const borderBottomRightRadius = borderRadiusForSide("bottom-right");
 	const borderBottomLeftRadius = borderRadiusForSide("bottom-left");
-	//#endregion
-	//#region src/css/property-descriptors/border-style.ts
+	// src/css/property-descriptors/border-style.ts
 	const borderStyleForSide = (side) => ({
 		name: `border-${side}-style`,
 		initialValue: "solid",
@@ -4918,8 +4866,7 @@
 	const borderRightStyle = borderStyleForSide("right");
 	const borderBottomStyle = borderStyleForSide("bottom");
 	const borderLeftStyle = borderStyleForSide("left");
-	//#endregion
-	//#region src/css/property-descriptors/border-width.ts
+	// src/css/property-descriptors/border-width.ts
 	const borderWidthForSide = (side) => ({
 		name: `border-${side}-width`,
 		initialValue: "0",
@@ -4934,8 +4881,7 @@
 	const borderRightWidth = borderWidthForSide("right");
 	const borderBottomWidth = borderWidthForSide("bottom");
 	const borderLeftWidth = borderWidthForSide("left");
-	//#endregion
-	//#region src/css/property-descriptors/clip-path.ts
+	// src/css/property-descriptors/clip-path.ts
 	const NONE = { type: 0 };
 	/**
 	* Parse a shape-radius token: <length-percentage> | closest-side | farthest-side.
@@ -5156,8 +5102,7 @@
 			return NONE;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/color.ts
+	// src/css/property-descriptors/color.ts
 	const color = {
 		name: `color`,
 		initialValue: "transparent",
@@ -5165,8 +5110,7 @@
 		type: 3,
 		format: "color"
 	};
-	//#endregion
-	//#region src/css/property-descriptors/direction.ts
+	// src/css/property-descriptors/direction.ts
 	const direction = {
 		name: "direction",
 		initialValue: "ltr",
@@ -5179,8 +5123,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/font-family.ts
+	// src/css/property-descriptors/font-family.ts
 	const fontFamily = {
 		name: `font-family`,
 		initialValue: "",
@@ -5217,8 +5160,7 @@
 			return results.map((result, index) => quoted[index] || result.indexOf(" ") !== -1 ? `'${result.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\f/g, "\\c ")}'` : result);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/font-size.ts
+	// src/css/property-descriptors/font-size.ts
 	const fontSize = {
 		name: `font-size`,
 		initialValue: "0",
@@ -5226,8 +5168,7 @@
 		type: 3,
 		format: "length"
 	};
-	//#endregion
-	//#region src/css/property-descriptors/letter-spacing.ts
+	// src/css/property-descriptors/letter-spacing.ts
 	const letterSpacing = {
 		name: "letter-spacing",
 		initialValue: "0",
@@ -5240,8 +5181,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/line-break.ts
+	// src/css/property-descriptors/line-break.ts
 	const lineBreak = {
 		name: "line-break",
 		initialValue: "normal",
@@ -5254,8 +5194,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/line-height.ts
+	// src/css/property-descriptors/line-height.ts
 	const lineHeight = {
 		name: "line-height",
 		initialValue: "normal",
@@ -5268,8 +5207,7 @@
 		else if (isLengthPercentage(token)) return getAbsoluteValue(token, fontSize);
 		return fontSize;
 	};
-	//#endregion
-	//#region src/css/property-descriptors/list-style-image.ts
+	// src/css/property-descriptors/list-style-image.ts
 	const listStyleImage = {
 		name: "list-style-image",
 		initialValue: "none",
@@ -5282,8 +5220,7 @@
 			return image.parse(context, token);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/list-style-position.ts
+	// src/css/property-descriptors/list-style-position.ts
 	const listStylePosition = {
 		name: "list-style-position",
 		initialValue: "outside",
@@ -5296,8 +5233,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/margin.ts
+	// src/css/property-descriptors/margin.ts
 	const marginForSide = (side) => ({
 		name: `margin-${side}`,
 		initialValue: "0",
@@ -5308,8 +5244,7 @@
 	const marginRight = marginForSide("right");
 	const marginBottom = marginForSide("bottom");
 	const marginLeft = marginForSide("left");
-	//#endregion
-	//#region src/css/property-descriptors/overflow-wrap.ts
+	// src/css/property-descriptors/overflow-wrap.ts
 	const overflowWrap = {
 		name: "overflow-wrap",
 		initialValue: "normal",
@@ -5322,8 +5257,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/padding.ts
+	// src/css/property-descriptors/padding.ts
 	const paddingForSide = (side) => ({
 		name: `padding-${side}`,
 		initialValue: "0",
@@ -5335,8 +5269,7 @@
 	const paddingRight = paddingForSide("right");
 	const paddingBottom = paddingForSide("bottom");
 	const paddingLeft = paddingForSide("left");
-	//#endregion
-	//#region src/css/property-descriptors/text-align.ts
+	// src/css/property-descriptors/text-align.ts
 	const textAlign = {
 		name: "text-align",
 		initialValue: "left",
@@ -5351,8 +5284,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/position.ts
+	// src/css/property-descriptors/position.ts
 	const position = {
 		name: "position",
 		initialValue: "static",
@@ -5368,8 +5300,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-shadow.ts
+	// src/css/property-descriptors/text-shadow.ts
 	const textShadow = {
 		name: "text-shadow",
 		initialValue: "none",
@@ -5399,8 +5330,7 @@
 			});
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-transform.ts
+	// src/css/property-descriptors/text-transform.ts
 	const textTransform = {
 		name: "text-transform",
 		initialValue: "none",
@@ -5415,8 +5345,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/transform.ts
+	// src/css/property-descriptors/transform.ts
 	const transform$1 = {
 		name: "transform",
 		initialValue: "none",
@@ -5471,8 +5400,7 @@
 		matrix3d,
 		rotate: rotate$1
 	};
-	//#endregion
-	//#region src/css/property-descriptors/transform-origin.ts
+	// src/css/property-descriptors/transform-origin.ts
 	const DEFAULT_VALUE = {
 		type: 16,
 		number: 50,
@@ -5490,8 +5418,7 @@
 			return [at(origins, 0), at(origins, 1)];
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/rotate.ts
+	// src/css/property-descriptors/rotate.ts
 	const rotate = {
 		name: "rotate",
 		initialValue: "none",
@@ -5506,8 +5433,7 @@
 			return null;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/visibility.ts
+	// src/css/property-descriptors/visibility.ts
 	const visibility = {
 		name: "visibility",
 		initialValue: "none",
@@ -5521,8 +5447,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/word-break.ts
+	// src/css/property-descriptors/word-break.ts
 	const wordBreak = {
 		name: "word-break",
 		initialValue: "normal",
@@ -5536,8 +5461,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/white-space.ts
+	// src/css/property-descriptors/white-space.ts
 	const whiteSpace = {
 		name: "white-space",
 		initialValue: "normal",
@@ -5553,8 +5477,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/writing-mode.ts
+	// src/css/property-descriptors/writing-mode.ts
 	const isVerticalWritingMode = (writingMode) => writingMode !== 0;
 	const isSidewaysWritingMode = (writingMode) => writingMode === 3 || writingMode === 4;
 	const writingMode = {
@@ -5572,8 +5495,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/z-index.ts
+	// src/css/property-descriptors/z-index.ts
 	const zIndex = {
 		name: "z-index",
 		initialValue: "auto",
@@ -5591,8 +5513,7 @@
 			throw new Error(`Invalid z-index number parsed`);
 		}
 	};
-	//#endregion
-	//#region src/css/types/time.ts
+	// src/css/types/time.ts
 	const time = {
 		name: "time",
 		parse: (_context, value) => {
@@ -5603,8 +5524,7 @@
 			throw new Error(`Unsupported time type`);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/opacity.ts
+	// src/css/property-descriptors/opacity.ts
 	const opacity = {
 		name: "opacity",
 		initialValue: "1",
@@ -5615,8 +5535,7 @@
 			return 1;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-decoration-style.ts
+	// src/css/property-descriptors/text-decoration-style.ts
 	const textDecorationStyle = {
 		name: "text-decoration-style",
 		initialValue: "solid",
@@ -5632,8 +5551,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-decoration-thickness.ts
+	// src/css/property-descriptors/text-decoration-thickness.ts
 	const textDecorationThickness = {
 		name: "text-decoration-thickness",
 		initialValue: "auto",
@@ -5648,8 +5566,7 @@
 			return "auto";
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-underline-offset.ts
+	// src/css/property-descriptors/text-underline-offset.ts
 	const textUnderlineOffset = {
 		name: "text-underline-offset",
 		initialValue: "auto",
@@ -5663,8 +5580,7 @@
 			return "auto";
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/font-weight.ts
+	// src/css/property-descriptors/font-weight.ts
 	const fontWeight = {
 		name: "font-weight",
 		initialValue: "normal",
@@ -5679,8 +5595,7 @@
 			return 400;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/font-variant.ts
+	// src/css/property-descriptors/font-variant.ts
 	const fontVariant = {
 		name: "font-variant",
 		initialValue: "none",
@@ -5690,8 +5605,7 @@
 			return tokens.filter(isIdentToken).map((token) => token.value);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/font-style.ts
+	// src/css/property-descriptors/font-style.ts
 	const fontStyle = {
 		name: "font-style",
 		initialValue: "normal",
@@ -5705,8 +5619,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/duration.ts
+	// src/css/property-descriptors/duration.ts
 	const duration = {
 		name: "duration",
 		initialValue: "0s",
@@ -5716,8 +5629,7 @@
 			return tokens.filter(isDimensionToken).map((token) => time.parse(context, token));
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/box-shadow.ts
+	// src/css/property-descriptors/box-shadow.ts
 	const boxShadow = {
 		name: "box-shadow",
 		initialValue: "none",
@@ -5751,8 +5663,7 @@
 			});
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/paint-order.ts
+	// src/css/property-descriptors/paint-order.ts
 	const paintOrder = {
 		name: "paint-order",
 		initialValue: "normal",
@@ -5782,8 +5693,7 @@
 			return layers;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/webkit-text-stroke-color.ts
+	// src/css/property-descriptors/webkit-text-stroke-color.ts
 	const webkitTextStrokeColor = {
 		name: `-webkit-text-stroke-color`,
 		initialValue: "currentcolor",
@@ -5791,8 +5701,7 @@
 		type: 3,
 		format: "color"
 	};
-	//#endregion
-	//#region src/css/property-descriptors/webkit-text-stroke-width.ts
+	// src/css/property-descriptors/webkit-text-stroke-width.ts
 	const webkitTextStrokeWidth = {
 		name: `-webkit-text-stroke-width`,
 		initialValue: "0",
@@ -5803,8 +5712,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/webkit-line-clamp.ts
+	// src/css/property-descriptors/webkit-line-clamp.ts
 	/**
 	* -webkit-line-clamp property descriptor
 	* Used with display: -webkit-box and -webkit-box-orient: vertical
@@ -5821,8 +5729,7 @@
 			return 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/object-fit.ts
+	// src/css/property-descriptors/object-fit.ts
 	const objectFit = {
 		name: "object-fit",
 		initialValue: "fill",
@@ -5843,8 +5750,7 @@
 		}
 		return 0;
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-overflow.ts
+	// src/css/property-descriptors/text-overflow.ts
 	const textOverflow = {
 		name: "text-overflow",
 		initialValue: "clip",
@@ -5857,8 +5763,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/image-rendering.ts
+	// src/css/property-descriptors/image-rendering.ts
 	const imageRendering = {
 		name: "image-rendering",
 		initialValue: "auto",
@@ -5877,8 +5782,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/mix-blend-mode.ts
+	// src/css/property-descriptors/mix-blend-mode.ts
 	const MIX_BLEND_MODE$1 = {
 		NORMAL: "normal",
 		MULTIPLY: "multiply",
@@ -5907,8 +5811,7 @@
 			return VALID_VALUES$1.has(token) ? token : MIX_BLEND_MODE$1.NORMAL;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/filter.ts
+	// src/css/property-descriptors/filter.ts
 	const filter = {
 		name: "filter",
 		initialValue: "none",
@@ -5978,8 +5881,7 @@
 		}
 		return parts.join("").trim();
 	};
-	//#endregion
-	//#region src/css/property-descriptors/font-variant-ligatures.ts
+	// src/css/property-descriptors/font-variant-ligatures.ts
 	const fontVariantLigatures = {
 		name: "font-variant-ligatures",
 		initialValue: "normal",
@@ -6000,8 +5902,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/zoom.ts
+	// src/css/property-descriptors/zoom.ts
 	const zoom = {
 		name: "zoom",
 		initialValue: "1",
@@ -6013,8 +5914,7 @@
 			return 1;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/object-position.ts
+	// src/css/property-descriptors/object-position.ts
 	const objectPosition = {
 		name: "object-position",
 		initialValue: "50% 50%",
@@ -6076,8 +5976,7 @@
 			return modes.length > 0 ? modes : ["normal"];
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/border-image-source.ts
+	// src/css/property-descriptors/border-image-source.ts
 	const borderImageSource = {
 		name: "border-image-source",
 		initialValue: "none",
@@ -6091,8 +5990,7 @@
 			return image.parse(context, at(filtered, 0));
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/border-image-slice.ts
+	// src/css/property-descriptors/border-image-slice.ts
 	const fillSides$1 = (sides) => {
 		const result = [...sides];
 		if (result.length === 1) {
@@ -6141,8 +6039,7 @@
 			};
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/border-image-repeat.ts
+	// src/css/property-descriptors/border-image-repeat.ts
 	const parseRepeatValue = (value) => {
 		switch (value) {
 			case "repeat": return 1;
@@ -6167,8 +6064,7 @@
 			};
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/box-decoration-break.ts
+	// src/css/property-descriptors/box-decoration-break.ts
 	const boxDecorationBreak = {
 		name: "box-decoration-break",
 		initialValue: "slice",
@@ -6181,8 +6077,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/accent-color.ts
+	// src/css/property-descriptors/accent-color.ts
 	const accentColor = {
 		name: "accent-color",
 		initialValue: "auto",
@@ -6193,8 +6088,7 @@
 			return color$1.parse(context, token);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/webkit-text-fill-color.ts
+	// src/css/property-descriptors/webkit-text-fill-color.ts
 	const webkitTextFillColor = {
 		name: "-webkit-text-fill-color",
 		initialValue: "currentcolor",
@@ -6205,8 +6099,7 @@
 			return color$1.parse(context, token);
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/isolation.ts
+	// src/css/property-descriptors/isolation.ts
 	const isolation = {
 		name: "isolation",
 		initialValue: "auto",
@@ -6216,8 +6109,52 @@
 			return value === "isolate" ? 1 : 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/outline.ts
+	// src/css/property-descriptors/will-change.ts
+	const STACKING_HINTS = /* @__PURE__ */ new Set([
+		"transform",
+		"translate",
+		"rotate",
+		"scale",
+		"opacity",
+		"filter",
+		"backdrop-filter",
+		"mix-blend-mode",
+		"isolation",
+		"clip-path",
+		"mask",
+		"mask-image",
+		"mask-border",
+		"perspective",
+		"contain",
+		"offset-path",
+		"offset-distance",
+		"offset-rotate",
+		"top",
+		"left",
+		"bottom",
+		"right",
+		"z-index"
+	]);
+	const willChange = {
+		name: "will-change",
+		initialValue: "auto",
+		prefix: false,
+		type: 1,
+		parse: (_context, tokens) => {
+			return tokens.some((token) => isIdentToken(token) && STACKING_HINTS.has(token.value)) ? 1 : 0;
+		}
+	};
+	// src/css/property-descriptors/contain.ts
+	const contain = {
+		name: "contain",
+		initialValue: "none",
+		prefix: false,
+		type: 2,
+		parse: (_context, value) => {
+			return /\b(paint|strict|content)\b/.test(value) ? 1 : 0;
+		}
+	};
+	// src/css/property-descriptors/outline.ts
 	const outlineStyle = {
 		name: "outline-style",
 		initialValue: "none",
@@ -6260,8 +6197,7 @@
 			return isDimensionToken(token) || isNumberToken(token) ? token.number : 0;
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/backdrop-filter.ts
+	// src/css/property-descriptors/backdrop-filter.ts
 	const backdropFilter = {
 		name: "backdrop-filter",
 		initialValue: "none",
@@ -6269,8 +6205,7 @@
 		type: 1,
 		parse: (context, tokens) => filter.parse(context, tokens)
 	};
-	//#endregion
-	//#region src/css/property-descriptors/mask.ts
+	// src/css/property-descriptors/mask.ts
 	const maskImage = {
 		name: "mask-image",
 		initialValue: "none",
@@ -6300,8 +6235,7 @@
 		type: 1,
 		parse: backgroundSize.parse
 	};
-	//#endregion
-	//#region src/css/property-descriptors/text-emphasis.ts
+	// src/css/property-descriptors/text-emphasis.ts
 	const SHAPES = [
 		"dot",
 		"circle",
@@ -6376,8 +6310,7 @@
 			};
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/border-image-width.ts
+	// src/css/property-descriptors/border-image-width.ts
 	const fillSides = (sides) => {
 		const result = [...sides];
 		if (result.length === 1) {
@@ -6474,8 +6407,7 @@
 			};
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/webkit-box-reflect.ts
+	// src/css/property-descriptors/webkit-box-reflect.ts
 	/**
 	* -webkit-box-reflect: <direction> <offset>? <mask-image>?
 	*
@@ -6519,8 +6451,7 @@
 			};
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/translate.ts
+	// src/css/property-descriptors/translate.ts
 	const translate = {
 		name: "translate",
 		initialValue: "none",
@@ -6533,8 +6464,7 @@
 			return [at(values, 0), values.length > 1 ? at(values, 1) : ZERO_LENGTH];
 		}
 	};
-	//#endregion
-	//#region src/css/property-descriptors/scale.ts
+	// src/css/property-descriptors/scale.ts
 	const scale = {
 		name: "scale",
 		initialValue: "none",
@@ -6569,8 +6499,7 @@
 	* never fires, the mount is rejected instead of hanging forever.
 	*/
 	const IFRAME_LOAD_WATCHDOG_MS = 6e4;
-	//#endregion
-	//#region src/css/parse.ts
+	// src/css/parse.ts
 	const STANDARD_PROPERTIES = [
 		[
 			"animationDuration",
@@ -7007,6 +6936,16 @@
 			isolation,
 			"isolation"
 		],
+		[
+			"willChange",
+			willChange,
+			"will-change"
+		],
+		[
+			"contain",
+			contain,
+			"contain"
+		],
 		[
 			"outlineColor",
 			outlineColor,
@@ -7138,8 +7077,7 @@
 		}
 		return result;
 	};
-	//#endregion
-	//#region src/css/grouped/border-styles.ts
+	// src/css/grouped/border-styles.ts
 	/**
 	* Read-only grouped accessor for border-related CSS properties.
 	*
@@ -7216,8 +7154,7 @@
 			return this.styles.boxShadow;
 		}
 	};
-	//#endregion
-	//#region src/css/grouped/background-styles.ts
+	// src/css/grouped/background-styles.ts
 	/**
 	* Read-only grouped accessor for background-related CSS properties.
 	*
@@ -7255,8 +7192,7 @@
 			return this.styles.backgroundBlendMode;
 		}
 	};
-	//#endregion
-	//#region src/css/grouped/font-styles.ts
+	// src/css/grouped/font-styles.ts
 	/**
 	* Read-only grouped accessor for font/text-related CSS properties.
 	*
@@ -7351,8 +7287,7 @@
 			return this.styles.paintOrder;
 		}
 	};
-	//#endregion
-	//#region src/css/grouped/layout-styles.ts
+	// src/css/grouped/layout-styles.ts
 	/**
 	* Read-only grouped accessor for layout/display/positioning CSS properties.
 	*
@@ -7480,8 +7415,7 @@
 			return this.styles.isInlineLevel();
 		}
 	};
-	//#endregion
-	//#region src/css/index.ts
+	// src/css/index.ts
 	var CSSParsedDeclaration = class {
 		animationDuration;
 		backgroundClip;
@@ -7575,6 +7509,8 @@
 		accentColor;
 		webkitTextFillColor;
 		isolation;
+		willChange;
+		contain;
 		outlineColor;
 		outlineStyle;
 		outlineWidth;
@@ -7673,8 +7609,7 @@
 			this.counterReset = parse(context, counterReset, declaration.counterReset);
 		}
 	};
-	//#endregion
-	//#region src/core/debugger.ts
+	// src/core/debugger.ts
 	const elementDebuggerAttribute = "data-html2canvas-debug";
 	const getElementDebugType = (element) => {
 		if (typeof element.getAttribute !== "function") return 0;
@@ -7690,8 +7625,7 @@
 		const elementType = getElementDebugType(element);
 		return elementType === 1 || type === elementType;
 	};
-	//#endregion
-	//#region src/dom/adopted-styles.ts
+	// src/dom/adopted-styles.ts
 	/**
 	* Constructable stylesheet cloning (adoptedStyleSheets).
 	*
@@ -7732,8 +7666,7 @@
 		if (nonce) style.nonce = nonce;
 		return style;
 	};
-	//#endregion
-	//#region src/dom/slot-cloner.ts
+	// src/dom/slot-cloner.ts
 	/** Exported for reuse in document-cloner.ts */
 	const IGNORE_ATTRIBUTE = "data-html2canvas-ignore";
 	/**
@@ -7870,8 +7803,7 @@
 			if (style) target.appendChild(style);
 		}
 	};
-	//#endregion
-	//#region src/dom/copy-css-styles.ts
+	// src/dom/copy-css-styles.ts
 	/**
 	* Computed-style copying for cloned elements.
 	*
@@ -7899,8 +7831,7 @@
 		if (parts.length > 0) target.style.cssText = parts.join(";") + ";";
 		return target;
 	};
-	//#endregion
-	//#region src/dom/pseudo-content.ts
+	// src/dom/pseudo-content.ts
 	/**
 	* Pseudo-element (::before / ::after) content resolution.
 	*
@@ -7920,19 +7851,19 @@
 }`;
 	/**
 	* Inject the stylesheet that hides pseudo-element surrogate containers.
-	* Called on the cloned <body> so the surrogates themselves never render.
+	* Added to the cloned <head> so the surrogates themselves never render.
 	*/
-	const createPseudoHideStyles = (body, cspNonce) => {
-		createStyles(body, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
+	const createPseudoHideStyles = (parent, cspNonce) => {
+		createStyles(parent, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
          .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`, cspNonce);
 	};
-	const createStyles = (body, styles, cspNonce) => {
-		const document = body.ownerDocument;
+	const createStyles = (parent, styles, cspNonce) => {
+		const document = parent.ownerDocument;
 		if (document) {
 			const style = document.createElement("style");
 			style.textContent = styles;
 			if (cspNonce) style.nonce = cspNonce;
-			body.appendChild(style);
+			parent.appendChild(style);
 		}
 	};
 	/**
@@ -8006,8 +7937,7 @@
 			return anonymousReplacedElement;
 		}
 	};
-	//#endregion
-	//#region src/core/abort-helper.ts
+	// src/core/abort-helper.ts
 	/**
 	* AbortSignal helper utilities.
 	*/
@@ -8022,8 +7952,7 @@
 	const throwIfAborted = (signal) => {
 		if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
 	};
-	//#endregion
-	//#region src/dom/iframe-mount.ts
+	// src/dom/iframe-mount.ts
 	const trustedTypePolicies = /* @__PURE__ */ new WeakMap();
 	/**
 	* Resolve the Trusted Types policy used for writing the clone document.
@@ -8052,9 +7981,20 @@
 		cloneIframeContainer.style.position = "fixed";
 		cloneIframeContainer.style.left = "-10000px";
 		cloneIframeContainer.style.top = "0px";
-		cloneIframeContainer.style.border = "0";
 		cloneIframeContainer.width = bounds.width.toString();
 		cloneIframeContainer.height = bounds.height.toString();
+		const contentBox = [
+			["width", `${bounds.width}px`],
+			["height", `${bounds.height}px`],
+			["min-width", "0px"],
+			["max-width", "none"],
+			["min-height", "0px"],
+			["max-height", "none"],
+			["box-sizing", "content-box"],
+			["padding", "0px"],
+			["border", "0"]
+		];
+		for (const [property, value] of contentBox) cloneIframeContainer.style.setProperty(property, value, "important");
 		cloneIframeContainer.scrolling = "no";
 		cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, "true");
 		(customContainer || ownerDocument.body).appendChild(cloneIframeContainer);
@@ -8187,6 +8127,11 @@
 			pending.push(new Promise((resolve) => {
 				let elapsed = 0;
 				const timer = setInterval(() => {
+					if (signal?.aborted) {
+						clearInterval(timer);
+						resolve();
+						return;
+					}
 					elapsed += 50;
 					const currentSheet = style.sheet;
 					if (currentSheet && isSheetFullyApplied(currentSheet) || elapsed >= timeoutMs) {
@@ -8357,8 +8302,7 @@
 			throw error;
 		});
 	};
-	//#endregion
-	//#region src/dom/document-cloner.ts
+	// src/dom/document-cloner.ts
 	/**
 	* Find the parent ShadowRoot of an element, if any
 	* @param element - The element to check
@@ -8403,6 +8347,7 @@
 			}
 			this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false);
 			this.appendDocumentAdoptedStyles(element.ownerDocument);
+			this.appendPseudoHideStyles();
 		}
 		/**
 		* Re-materialise the source document's constructable stylesheets
@@ -8422,6 +8367,16 @@
 			const style = createAdoptedStylesElement(this.documentElement.ownerDocument ?? ownerDocument, sheets, this.options.cspNonce);
 			if (style) head.appendChild(style);
 		}
+		/**
+		* Add the rules that hide the source ::before / ::after (the clone draws
+		* them as surrogate elements) to the clone's <head>. Inside <body> the
+		* <style> would be one of its children, and `body > :first-child`,
+		* `:nth-child()` and sibling selectors would match the wrong elements.
+		*/
+		appendPseudoHideStyles() {
+			const head = this.documentElement.getElementsByTagName("head").item(0);
+			createPseudoHideStyles(head ?? this.documentElement, this.options.cspNonce);
+		}
 		toIFrame(ownerDocument, windowSize) {
 			return mountCloneInIFrame(this.context, ownerDocument, windowSize, {
 				documentElement: this.documentElement,
@@ -8557,7 +8512,6 @@
 				const style = window.getComputedStyle(node);
 				const checkPseudoElements = canHavePseudoElements(node);
 				if (this.referenceElement === node && isHTMLElementNode(clone)) this.clonedReferenceElement = clone;
-				if (isBodyElement(clone)) createPseudoHideStyles(clone, this.options.cspNonce);
 				const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
 				if (checkPseudoElements) {
 					const styleBefore = window.getComputedStyle(node, ":before");
@@ -8591,8 +8545,7 @@
 			return false;
 		}
 	};
-	//#endregion
-	//#region src/dom/dom-normalizer.ts
+	// src/dom/dom-normalizer.ts
 	/**
 	* Normalize element styles for accurate rendering
 	* This includes disabling animations and neutralizing transforms.
@@ -8680,8 +8633,115 @@
 			if (originalStyles.scale !== void 0) element.style.scale = originalStyles.scale;
 		}
 	};
-	//#endregion
-	//#region src/dom/element-container.ts
+	// src/dom/filter-reference.ts
+	const SVG_NS$1 = "http://www.w3.org/2000/svg";
+	const XLINK_NS = "http://www.w3.org/1999/xlink";
+	const REGION_DEFAULTS = {
+		x: "-10%",
+		y: "-10%",
+		width: "120%",
+		height: "120%"
+	};
+	const PRESENTATION_PROPERTIES = [
+		"color-interpolation-filters",
+		"flood-color",
+		"flood-opacity",
+		"lighting-color"
+	];
+	const REFERENCE_RE = /^(["']?)(#[^"'\s()]+)\1$/;
+	const URL_RE = /url\(\s*([^)]*?)\s*\)/g;
+	/** The `#id` of a same-document url() body (`"#id"`, `'#id'` or `#id`), or null. */
+	const parseFilterReference = (body) => {
+		const match = REFERENCE_RE.exec(body.trim());
+		return match ? match[2] : null;
+	};
+	/**
+	* Resolve every same-document url() reference of a computed filter value.
+	* References that cannot be expressed in the serialized SVG are left out, so
+	* the compositor rejects the chain and the subtree keeps the legacy renderer.
+	*/
+	function resolveFilterReferences(element, filter, box) {
+		if (!filter || filter.indexOf("url(") === -1) return void 0;
+		const references = /* @__PURE__ */ new Map();
+		const seen = /* @__PURE__ */ new Set();
+		for (const match of filter.matchAll(URL_RE)) {
+			const ref = parseFilterReference(match[1]);
+			if (!ref || seen.has(ref)) continue;
+			seen.add(ref);
+			const reference = resolveFilterReference(element.ownerDocument, ref, box);
+			if (reference) references.set(ref, reference);
+		}
+		return references;
+	}
+	function resolveFilterReference(document, ref, box) {
+		const source = document.getElementById(ref.slice(1));
+		if (!source || source.namespaceURI !== SVG_NS$1 || source.localName !== "filter") return null;
+		if (!isSelfContained(source)) return null;
+		const region = filterRegion(source, box);
+		if (!region) return null;
+		const copy = source.cloneNode(true);
+		inlinePresentation(source, copy);
+		copy.removeAttribute("id");
+		copy.setAttribute("filterUnits", "userSpaceOnUse");
+		Object.keys(region).forEach((name) => copy.setAttribute(name, String(region[name])));
+		const outset = Math.max(0, -region.x, -region.y, region.x + region.width - box.width, region.y + region.height - box.height);
+		return {
+			element: copy,
+			region,
+			outset: Math.ceil(outset)
+		};
+	}
+	const hasHref = (node) => node.hasAttribute("href") || node.hasAttributeNS(XLINK_NS, "href");
+	function isSelfContained(source) {
+		if (source.getAttribute("primitiveUnits") === "objectBoundingBox" || hasHref(source)) return false;
+		for (const primitive of Array.from(source.querySelectorAll("*"))) {
+			if (primitive.localName === "feImage" || hasHref(primitive)) return false;
+			for (const name of [
+				"x",
+				"y",
+				"width",
+				"height"
+			]) if ((primitive.getAttribute(name) ?? "").indexOf("%") !== -1) return false;
+		}
+		return true;
+	}
+	function filterRegion(source, box) {
+		const boundingBox = source.getAttribute("filterUnits") !== "userSpaceOnUse";
+		const read = (name, size) => {
+			const raw = (source.getAttribute(name) ?? (boundingBox ? REGION_DEFAULTS[name] : "")).trim();
+			if (raw === "") return null;
+			const percentage = raw.endsWith("%");
+			const value = Number(percentage ? raw.slice(0, -1) : raw.replace(/px$/, ""));
+			if (!Number.isFinite(value)) return null;
+			if (boundingBox) return (percentage ? value / 100 : value) * size;
+			return percentage ? null : value;
+		};
+		const x = read("x", box.width);
+		const y = read("y", box.height);
+		const width = read("width", box.width);
+		const height = read("height", box.height);
+		if (x === null || y === null || width === null || height === null || width <= 0 || height <= 0) return null;
+		return {
+			x,
+			y,
+			width,
+			height
+		};
+	}
+	function inlinePresentation(source, copy) {
+		const view = source.ownerDocument.defaultView;
+		if (!view) return;
+		const sources = [source, ...Array.from(source.querySelectorAll("*"))];
+		const copies = [copy, ...Array.from(copy.querySelectorAll("*"))];
+		sources.forEach((node, index) => {
+			const style = view.getComputedStyle(node);
+			for (const property of PRESENTATION_PROPERTIES) {
+				const value = style.getPropertyValue(property);
+				if (value) copies[index]?.setAttribute(property, value);
+			}
+		});
+	}
+	// src/dom/element-container.ts
 	var ElementContainer = class {
 		context;
 		styles;
@@ -8694,6 +8754,11 @@
 		* bounds to leave a matching gap (issue #227).
 		*/
 		legendBounds;
+		/**
+		* Same-document `filter: url(#id)` references, resolved while the cloned
+		* DOM is available. The surface compositor renders them in an SVG pass.
+		*/
+		filterReferences;
 		createsStackingContext = false;
 		createsRealStackingContext = false;
 		isListOwner = false;
@@ -8718,6 +8783,7 @@
 					this.bounds = new Bounds(this.bounds.left, borderBoxTop, this.bounds.width, this.bounds.height - (borderBoxTop - this.bounds.top));
 				}
 			}
+			this.filterReferences = resolveFilterReferences(element, this.styles.filter, this.bounds);
 			if (isDebugging(element, 4)) this.debugRender = true;
 		}
 		/**
@@ -8740,8 +8806,7 @@
 			for (const child of this.elements) child.restoreTree();
 		}
 	};
-	//#endregion
-	//#region src/core/features.ts
+	// src/core/features.ts
 	/**
 	* Runtime feature detection.
 	*
@@ -8827,8 +8892,7 @@
 			return value;
 		}
 	};
-	//#endregion
-	//#region src/css/layout/text.ts
+	// src/css/layout/text.ts
 	var TextBounds = class {
 		text;
 		bounds;
@@ -8903,8 +8967,7 @@
 		if (isVerticalWritingMode(styles.writingMode)) return segmentGraphemes(value);
 		return styles.letterSpacing !== 0 ? segmentGraphemes(value) : segmentWords(value);
 	};
-	//#endregion
-	//#region src/dom/text-container.ts
+	// src/dom/text-container.ts
 	var TextContainer = class {
 		text;
 		textBounds;
@@ -8927,8 +8990,7 @@
 		if (m.length > 0) return p1 + p2.toUpperCase();
 		return m;
 	};
-	//#endregion
-	//#region src/dom/replaced-elements/image-element-container.ts
+	// src/dom/replaced-elements/image-element-container.ts
 	var ImageElementContainer = class extends ElementContainer {
 		src;
 		intrinsicWidth;
@@ -8941,8 +9003,7 @@
 			this.context.cache.addImage(this.src);
 		}
 	};
-	//#endregion
-	//#region src/dom/replaced-elements/canvas-element-container.ts
+	// src/dom/replaced-elements/canvas-element-container.ts
 	var CanvasElementContainer = class extends ElementContainer {
 		canvas;
 		intrinsicWidth;
@@ -8954,8 +9015,7 @@
 			this.intrinsicHeight = canvas.height;
 		}
 	};
-	//#endregion
-	//#region src/dom/replaced-elements/svg-element-container.ts
+	// src/dom/replaced-elements/svg-element-container.ts
 	const BOX_OFFSET_PROPERTIES = [
 		"position",
 		"inset",
@@ -9005,8 +9065,7 @@
 			this.context.cache.addImage(this.svg);
 		}
 	};
-	//#endregion
-	//#region src/dom/elements/li-element-container.ts
+	// src/dom/elements/li-element-container.ts
 	var LIElementContainer = class extends ElementContainer {
 		value;
 		constructor(context, element, options = {}) {
@@ -9014,8 +9073,7 @@
 			this.value = element.value;
 		}
 	};
-	//#endregion
-	//#region src/dom/elements/ol-element-container.ts
+	// src/dom/elements/ol-element-container.ts
 	var OLElementContainer = class extends ElementContainer {
 		start;
 		reversed;
@@ -9025,8 +9083,7 @@
 			this.reversed = typeof element.reversed === "boolean" && element.reversed === true;
 		}
 	};
-	//#endregion
-	//#region src/dom/replaced-elements/input-element-container.ts
+	// src/dom/replaced-elements/input-element-container.ts
 	const CHECKBOX_BORDER_RADIUS = [{
 		type: 15,
 		flags: 0,
@@ -9081,8 +9138,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/dom/elements/select-element-container.ts
+	// src/dom/elements/select-element-container.ts
 	var SelectElementContainer = class extends ElementContainer {
 		value;
 		constructor(context, element, options = {}) {
@@ -9091,8 +9147,7 @@
 			this.value = option ? option.text || "" : "";
 		}
 	};
-	//#endregion
-	//#region src/dom/elements/textarea-element-container.ts
+	// src/dom/elements/textarea-element-container.ts
 	var TextareaElementContainer = class extends ElementContainer {
 		value;
 		constructor(context, element, options = {}) {
@@ -9100,8 +9155,7 @@
 			this.value = element.value;
 		}
 	};
-	//#endregion
-	//#region src/dom/replaced-elements/iframe-element-container.ts
+	// src/dom/replaced-elements/iframe-element-container.ts
 	var IFrameElementContainer = class extends ElementContainer {
 		src;
 		width;
@@ -9132,8 +9186,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/dom/node-parser.ts
+	// src/dom/node-parser.ts
 	const LIST_OWNERS = [
 		"OL",
 		"UL",
@@ -9199,15 +9252,14 @@
 		return container;
 	};
 	const createsRealStackingContext = (node, container, root) => {
-		return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || Boolean(container.styles.backdropFilter) || container.styles.maskImage.length > 0 || Boolean(container.styles.webkitBoxReflect) || container.styles.isolation === 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
+		return container.styles.isPositionedWithZIndex() || container.styles.opacity < 1 || Boolean(container.styles.filter) || Boolean(container.styles.backdropFilter) || container.styles.maskImage.length > 0 || Boolean(container.styles.webkitBoxReflect) || container.styles.isolation === 1 || container.styles.willChange === 1 || container.styles.contain === 1 || container.styles.isTransformed() || isBodyElement(node) && root.styles.isTransparent();
 	};
 	const createsStackingContext = (styles) => {
 		if (styles.isPositioned() || styles.isFloating()) return true;
 		if (styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL) return true;
 		return contains(styles.display, 268435456) || contains(styles.display, 33554432) || contains(styles.display, 536870912) || contains(styles.display, 134217728);
 	};
-	//#endregion
-	//#region src/render/path.ts
+	// src/render/path.ts
 	const equalPath = (a, b) => {
 		if (a.length === b.length) return a.some((v, i) => v === b[i]);
 		return false;
@@ -9223,8 +9275,7 @@
 			return point;
 		});
 	};
-	//#endregion
-	//#region src/render/vector.ts
+	// src/render/vector.ts
 	var Vector = class Vector {
 		type;
 		x;
@@ -9238,8 +9289,7 @@
 			return new Vector(this.x + deltaX, this.y + deltaY);
 		}
 	};
-	//#endregion
-	//#region src/render/bezier-curve.ts
+	// src/render/bezier-curve.ts
 	const lerp = (a, b, t) => {
 		return new Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
 	};
@@ -9273,8 +9323,7 @@
 		}
 	};
 	const isBezierCurve = (path) => path.type === 1;
-	//#endregion
-	//#region src/render/bound-curves.ts
+	// src/render/bound-curves.ts
 	var BoundCurves = class {
 		topLeftBorderDoubleOuterBox;
 		topRightBorderDoubleOuterBox;
@@ -9398,8 +9447,7 @@
 			curves.bottomLeftPaddingBox
 		];
 	};
-	//#endregion
-	//#region src/render/effects.ts
+	// src/render/effects.ts
 	var TransformEffect = class {
 		offsetX;
 		offsetY;
@@ -9606,8 +9654,7 @@
 	const isClipPathEffect = (effect) => effect.type === 3;
 	const isBlendEffect = (effect) => effect.type === 4;
 	const isFilterEffect = (effect) => effect.type === 5;
-	//#endregion
-	//#region src/render/stacking-context.ts
+	// src/render/stacking-context.ts
 	var StackingContext = class {
 		element;
 		negativeZIndex;
@@ -9930,8 +9977,7 @@
 		processListItems(paintContainer.container, listItems);
 		return root;
 	};
-	//#endregion
-	//#region src/render/canvas/gradient-rasterizer.ts
+	// src/render/canvas/gradient-rasterizer.ts
 	const clampStop = (stop) => Math.min(1, Math.max(0, stop));
 	/**
 	* Stack the one-cycle stop list periodically across [0, 1]. Returns null for
@@ -10010,8 +10056,7 @@
 			ry
 		};
 	};
-	//#endregion
-	//#region src/render/box-sizing.ts
+	// src/render/box-sizing.ts
 	const paddingBox = (element) => {
 		const bounds = element.bounds;
 		const styles = element.styles;
@@ -10026,8 +10071,7 @@
 		const paddingBottom = getAbsoluteValue(styles.paddingBottom, bounds.width);
 		return bounds.add(paddingLeft + styles.borderLeftWidth, paddingTop + styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight), -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom));
 	};
-	//#endregion
-	//#region src/render/background.ts
+	// src/render/background.ts
 	const calculateBackgroundPositioningArea = (backgroundOrigin, element) => {
 		if (backgroundOrigin === 0) return element.bounds;
 		if (backgroundOrigin === 2) return contentBox(element);
@@ -10128,8 +10172,7 @@
 			];
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/filter-surface.ts
+	// src/render/canvas/filter-surface.ts
 	var FilterSurfaceError = class extends Error {};
 	const releaseSurface = (canvas) => {
 		canvas.width = canvas.height = 0;
@@ -10233,6 +10276,13 @@
 				value: Number.parseFloat(numeric) * (percentage ? 1 / 100 : 1)
 			};
 		}
+		if (name === "url") {
+			const ref = parseFilterReference(body);
+			return ref ? {
+				kind: "url",
+				ref
+			} : null;
+		}
 		return null;
 	};
 	/** Split on whitespace outside parentheses so rgba(...) colours stay one token. */
@@ -10288,22 +10338,25 @@
 			case "blur": return `blur(${fn.value * scale}px)`;
 			case "drop-shadow": return `drop-shadow(${fn.x * scale}px ${fn.y * scale}px ${fn.blur * scale}px ${fn.color})`;
 			case "unitless": return fn.name === "hue-rotate" ? `hue-rotate(${fn.value}deg)` : `${fn.name}(${fn.value})`;
+			case "url": return `url("${fn.ref}")`;
 		}
 	}).join(" ");
 	/**
 	* Outset (in CSS pixels) a surface must grow so blur/shadow spillover is not
 	* cropped. Unitless functions never spread beyond the bounds. Consecutive
-	* blurs compound, so their radii sum.
+	* blurs compound, so their radii sum. A url() reference can paint up to its
+	* filter region, which may extend beyond the border box.
 	*/
-	function filterOutset(filter) {
+	function filterOutset(filter, references) {
 		let blurSum = 0;
 		let maxShadowOffset = 0;
+		let referenceOutset = 0;
 		for (const fn of filter.functions) if (fn.kind === "blur") blurSum += fn.value;
 		else if (fn.kind === "drop-shadow") {
 			blurSum += fn.blur;
 			maxShadowOffset = Math.max(maxShadowOffset, Math.abs(fn.x), Math.abs(fn.y));
-		}
-		return Math.ceil(3 * blurSum + maxShadowOffset);
+		} else if (fn.kind === "url") referenceOutset += references?.get(fn.ref)?.outset ?? 0;
+		return Math.ceil(3 * blurSum + maxShadowOffset + referenceOutset);
 	}
 	function canvasLike(source) {
 		const canvas = (source.ownerDocument ?? document).createElement("canvas");
@@ -10399,8 +10452,9 @@
 		if (blurs > 0 && shadows > 0) return filter.functions.findIndex((fn) => fn.kind === "blur") < filter.functions.findIndex((fn) => fn.kind === "drop-shadow");
 		return true;
 	};
-	async function renderFilterSurface(source, filter, opacity, scale, signal) {
+	async function renderFilterSurface(source, filter, opacity, scale, signal, references) {
 		throwIfAborted(signal);
+		if (filter.functions.some((fn) => fn.kind === "url")) return renderReferencedFilterSurface(source, filter, opacity, scale, signal, references);
 		if (filter.functions.length > 0 && supportsNativeFilters(source.ownerDocument ?? document)) {
 			const output = tryNativeFilterSurface(source, filter, opacity, scale, signal);
 			if (output) return output;
@@ -10408,6 +10462,136 @@
 		if (!isSvgExpressible(filter)) throw new FilterSurfaceError("Filter chain requires native canvas filters");
 		return renderSvgFilterSurface(source, filter, opacity, scale, signal);
 	}
+	/**
+	* Split a chain at its url() references: each reference is one SVG pass, and
+	* the standard functions between them run through the usual backends. Every
+	* step filters the previous step's complete output at alpha 1, then CSS
+	* opacity is applied once, as for any other chain.
+	*/
+	async function renderReferencedFilterSurface(source, filter, opacity, scale, signal, context) {
+		const steps = [];
+		for (const fn of filter.functions) {
+			if (fn.kind === "url") {
+				const reference = context?.references?.get(fn.ref);
+				if (!reference) throw new FilterSurfaceError(`Filter reference ${fn.ref} cannot be resolved`);
+				steps.push(reference);
+				continue;
+			}
+			const last = steps[steps.length - 1];
+			if (Array.isArray(last)) last.push(fn);
+			else steps.push([fn]);
+		}
+		const origin = context?.origin ?? {
+			x: 0,
+			y: 0
+		};
+		const last = steps[steps.length - 1];
+		const opacityApplied = Array.isArray(last);
+		let current = source;
+		try {
+			for (const step of steps) {
+				const next = Array.isArray(step) ? await renderFilterSurface(current, { functions: step }, step === last ? opacity : 1, scale, signal) : await renderReferenceSurface(current, step, origin, scale, signal);
+				if (current !== source) releaseSurface(current);
+				current = next;
+			}
+			if (opacityApplied || opacity === 1) {
+				const output = current;
+				current = source;
+				return output;
+			}
+			return drawWithOpacity(current, opacity);
+		} finally {
+			if (current !== source) releaseSurface(current);
+		}
+	}
+	function drawWithOpacity(source, opacity) {
+		const output = canvasLike(source);
+		const context = output.getContext("2d");
+		if (!context) {
+			releaseSurface(output);
+			throw new FilterSurfaceError("Filter surface canvas is unavailable");
+		}
+		context.globalAlpha = opacity;
+		try {
+			context.drawImage(source, 0, 0);
+			return output;
+		} catch {
+			releaseSurface(output);
+			throw new FilterSurfaceError("Filter surface image cannot be drawn");
+		}
+	}
+	const SVG_NS = "http://www.w3.org/2000/svg";
+	function createSvgElement(owner, tag, attributes = {}) {
+		const node = owner.createElementNS(SVG_NS, tag);
+		Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
+		return node;
+	}
+	function serializeSurface(source) {
+		try {
+			const url = source.toDataURL("image/png");
+			if (url === "data:,") throw new Error("Canvas size is unsupported");
+			return url;
+		} catch {
+			throw new FilterSurfaceError("Filter surface pixels cannot be serialized");
+		}
+	}
+	/** Decode a filtered SVG image and draw it onto a surface-sized canvas. */
+	async function drawSvgSurface(svg, source, opacity, signal) {
+		const imageWindow = (source.ownerDocument ?? document).defaultView;
+		const image = imageWindow?.Image ? new imageWindow.Image() : new Image();
+		let output;
+		try {
+			image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
+			await decodeSurface(image, signal);
+			throwIfAborted(signal);
+			output = canvasLike(source);
+			const context = output.getContext("2d");
+			if (!context) throw new FilterSurfaceError("Filter surface canvas is unavailable");
+			context.globalAlpha = opacity;
+			context.drawImage(image, 0, 0);
+			return output;
+		} catch (error) {
+			if (output) releaseSurface(output);
+			if (signal?.aborted) throwIfAborted(signal);
+			throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
+		} finally {
+			image.removeAttribute("src");
+		}
+	}
+	/**
+	* Apply a referenced SVG filter to the complete surface. The viewBox is in CSS
+	* pixels, so the filter's user units scale with the capture, and the image is
+	* placed so user space starts at the element's border box, as it does for the
+	* live element. Canvas filters cannot express either: their lengths are in
+	* device pixels and their bounding box is the whole canvas.
+	*/
+	async function renderReferenceSurface(source, reference, origin, scale, signal) {
+		throwIfAborted(signal);
+		const owner = source.ownerDocument ?? document;
+		const width = source.width / scale;
+		const height = source.height / scale;
+		const svg = createSvgElement(owner, "svg", {
+			width: source.width,
+			height: source.height,
+			viewBox: `0 0 ${width} ${height}`
+		});
+		const defs = createSvgElement(owner, "defs");
+		const filterElement = owner.importNode(reference.element, true);
+		filterElement.setAttribute("id", "composited-reference");
+		defs.appendChild(filterElement);
+		svg.appendChild(defs);
+		const group = createSvgElement(owner, "g", { transform: `translate(${origin.x} ${origin.y})` });
+		group.appendChild(createSvgElement(owner, "image", {
+			x: -origin.x,
+			y: -origin.y,
+			width,
+			height,
+			href: serializeSurface(source),
+			filter: "url(#composited-reference)"
+		}));
+		svg.appendChild(group);
+		return drawSvgSurface(svg, source, 1, signal);
+	}
 	async function renderSvgFilterSurface(source, filter, opacity, scale, signal) {
 		throwIfAborted(signal);
 		const blur = filter.functions.find((fn) => fn.kind === "blur");
@@ -10419,29 +10603,9 @@
 			blur: shadow.blur,
 			color: shadow.color
 		} : void 0;
-		if (!blurValue && !shadowValue) {
-			const output = canvasLike(source);
-			const context = output.getContext("2d");
-			if (!context) {
-				releaseSurface(output);
-				throw new FilterSurfaceError("Filter surface canvas is unavailable");
-			}
-			context.globalAlpha = opacity;
-			try {
-				context.drawImage(source, 0, 0);
-				return output;
-			} catch {
-				releaseSurface(output);
-				throw new FilterSurfaceError("Filter surface image cannot be drawn");
-			}
-		}
-		const namespace = "http://www.w3.org/2000/svg";
+		if (!blurValue && !shadowValue) return drawWithOpacity(source, opacity);
 		const svgDocument = source.ownerDocument ?? document;
-		const element = (tag, attributes = {}) => {
-			const node = svgDocument.createElementNS(namespace, tag);
-			Object.entries(attributes).forEach(([key, value]) => node.setAttribute(key, String(value)));
-			return node;
-		};
+		const element = (tag, attributes = {}) => createSvgElement(svgDocument, tag, attributes);
 		const svg = element("svg", {
 			width: source.width,
 			height: source.height,
@@ -10483,39 +10647,13 @@
 		}
 		defs.appendChild(filterElement);
 		svg.appendChild(defs);
-		let sourceUrl;
-		try {
-			sourceUrl = source.toDataURL("image/png");
-			if (sourceUrl === "data:,") throw new Error("Canvas size is unsupported");
-		} catch {
-			throw new FilterSurfaceError("Filter surface pixels cannot be serialized");
-		}
 		svg.appendChild(element("image", {
 			width: source.width,
 			height: source.height,
-			href: sourceUrl,
+			href: serializeSurface(source),
 			filter: "url(#composited-filter)"
 		}));
-		const imageWindow = svgDocument.defaultView;
-		const image = imageWindow?.Image ? new imageWindow.Image() : new Image();
-		let output;
-		try {
-			image.src = `data:image/svg+xml,${encodeURIComponent(new XMLSerializer().serializeToString(svg))}`;
-			await decodeSurface(image, signal);
-			throwIfAborted(signal);
-			output = canvasLike(source);
-			const context = output.getContext("2d");
-			if (!context) throw new FilterSurfaceError("Filter surface canvas is unavailable");
-			context.globalAlpha = opacity;
-			context.drawImage(image, 0, 0);
-			return output;
-		} catch (error) {
-			if (output) releaseSurface(output);
-			if (signal?.aborted) throwIfAborted(signal);
-			throw error instanceof FilterSurfaceError ? error : new FilterSurfaceError("Filter surface image cannot be drawn");
-		} finally {
-			image.removeAttribute("src");
-		}
+		return drawSvgSurface(svg, source, opacity, signal);
 	}
 	function reserveSurface(budget, width, height) {
 		const pixels = width * height * 4;
@@ -10539,7 +10677,7 @@
 		}
 		for (const child of container.elements) if (child.styles.isVisible()) bounds = union(bounds, surfaceBounds(child));
 		const filter = parseFilterChain(styles.filter);
-		return expand(bounds, filter ? filterOutset(filter) : 0);
+		return expand(bounds, filter ? filterOutset(filter, container.filterReferences) : 0);
 	}
 	function cropSurface(bounds, viewport, margin, scale) {
 		const area = expand(viewport, margin);
@@ -10549,8 +10687,91 @@
 		const bottom = Math.ceil(Math.min(bounds.top + bounds.height, area.top + area.height) * scale) / scale;
 		return new Bounds(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
 	}
-	//#endregion
-	//#region src/render/canvas/text/text-decoration-renderer.ts
+	// src/render/matrix.ts
+	/**
+	* 2D affine matrix utilities for the composited-surface render path.
+	*
+	* Matrices use the canvas `transform(a, b, c, d, e, f)` column-vector
+	* convention:
+	*
+	*     | a c e |       | x' |   | a·x + c·y + e |
+	*     | b d f |  ×    | y' | = | b·x + d·y + f |
+	*     | 0 0 1 |       |  1 |   |       1       |
+	*
+	* `TransformEffect` carries the same tuple order, so effects and bounds can
+	* share these helpers. Composition follows the canvas post-multiply rule:
+	* `multiplyMatrix(ancestor, own)` equals `ancestor` followed by `own`.
+	*/
+	const IDENTITY_MATRIX = [
+		1,
+		0,
+		0,
+		1,
+		0,
+		0
+	];
+	const isIdentityMatrix = (m) => m[0] === 1 && m[1] === 0 && m[2] === 0 && m[3] === 1 && m[4] === 0 && m[5] === 0;
+	/**
+	* Compose two transforms: the result applies `a` first, then `b`
+	* (canvas post-multiply, matching successive `ctx.transform` calls).
+	*/
+	const multiplyMatrix = (a, b) => [
+		a[0] * b[0] + a[2] * b[1],
+		a[1] * b[0] + a[3] * b[1],
+		a[0] * b[2] + a[2] * b[3],
+		a[1] * b[2] + a[3] * b[3],
+		a[0] * b[4] + a[2] * b[5] + a[4],
+		a[1] * b[4] + a[3] * b[5] + a[5]
+	];
+	/** Apply a matrix to a point, returning the mapped [x, y]. */
+	const applyMatrixToPoint = (m, x, y) => [m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]];
+	/**
+	* Map a layout-space Bounds through the matrix and return the axis-aligned
+	* bounding box of the four transformed corners. Non-uniform scales and
+	* rotations grow the box; this is intentionally conservative.
+	*/
+	const transformBoundsToAabb = (m, bounds) => {
+		const corners = [
+			applyMatrixToPoint(m, bounds.left, bounds.top),
+			applyMatrixToPoint(m, bounds.left + bounds.width, bounds.top),
+			applyMatrixToPoint(m, bounds.left, bounds.top + bounds.height),
+			applyMatrixToPoint(m, bounds.left + bounds.width, bounds.top + bounds.height)
+		];
+		const left = Math.min(...corners.map((p) => p[0]));
+		const right = Math.max(...corners.map((p) => p[0]));
+		const top = Math.min(...corners.map((p) => p[1]));
+		const bottom = Math.max(...corners.map((p) => p[1]));
+		return new Bounds(left, top, right - left, bottom - top);
+	};
+	/**
+	* Invert an affine matrix. Returns null for singular matrices
+	* (zero-scale transforms have no meaningful inverse).
+	*/
+	const invertMatrix = (m) => {
+		const det = m[0] * m[3] - m[1] * m[2];
+		if (!Number.isFinite(det) || det === 0) return null;
+		const invDet = 1 / det;
+		return [
+			m[3] * invDet,
+			-m[1] * invDet,
+			-m[2] * invDet,
+			m[0] * invDet,
+			(m[2] * m[5] - m[3] * m[4]) * invDet,
+			(m[1] * m[4] - m[0] * m[5]) * invDet
+		];
+	};
+	/**
+	* Map a visual-space viewport back into the layout space of `m`'s inputs.
+	* Used where a crop window (visual coordinates) must select content measured
+	* in layout coordinates: the conservative answer is the AABB of the inverse
+	* viewport corners.
+	*/
+	const inverseTransformBoundsToAabb = (m, bounds) => {
+		const inverse = invertMatrix(m);
+		if (!inverse) return null;
+		return transformBoundsToAabb(inverse, bounds);
+	};
+	// src/render/canvas/text/text-decoration-renderer.ts
 	var TextDecorationRenderer = class {
 		ctx;
 		constructor(ctx) {
@@ -10638,8 +10859,7 @@
 			this.ctx.restore();
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/font-utils.ts
+	// src/render/canvas/font-utils.ts
 	/**
 	* Font measurement utility
 	*
@@ -10674,8 +10894,7 @@
 	const measureBaseline = (ctx, fallback) => {
 		return measureFontMetrics(ctx, fallback).baseline;
 	};
-	//#endregion
-	//#region src/render/canvas/text-renderer.ts
+	// src/render/canvas/text-renderer.ts
 	const TEXT_OVERFLOW_EPSILON = 1;
 	/**
 	* Detect CJK (Chinese, Japanese, Korean) characters in a string.
@@ -11101,8 +11320,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/canvas-path.ts
+	// src/render/canvas/canvas-path.ts
 	const formatCanvasPath = (ctx, paths) => {
 		paths.forEach((point, index) => {
 			const start = isBezierCurve(point) ? point.start : point;
@@ -11116,8 +11334,7 @@
 		formatCanvasPath(ctx, paths);
 		ctx.closePath();
 	};
-	//#endregion
-	//#region src/core/lru-map.ts
+	// src/core/lru-map.ts
 	/**
 	* Generic LRU (Least-Recently-Used) wrapper over a native `Map`.
 	*
@@ -11175,8 +11392,7 @@
 			this._map.clear();
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/background-renderer.ts
+	// src/render/canvas/background-renderer.ts
 	/**
 	* Background Renderer
 	*
@@ -11539,8 +11755,7 @@
 			createCanvasPath(this.ctx, paths);
 		}
 	};
-	//#endregion
-	//#region src/render/border.ts
+	// src/render/border.ts
 	const parsePathForBorder = (curves, borderSide) => {
 		switch (borderSide) {
 			case 0: return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftPaddingBox, curves.topRightBorderBox, curves.topRightPaddingBox);
@@ -11593,8 +11808,7 @@
 		else path.push(inner1);
 		return path;
 	};
-	//#endregion
-	//#region src/render/canvas/border-renderer.ts
+	// src/render/canvas/border-renderer.ts
 	/**
 	* Border Renderer
 	*
@@ -11728,8 +11942,7 @@
 			this.ctx.restore();
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/border-image-renderer.ts
+	// src/render/canvas/border-image-renderer.ts
 	/**
 	* Resolve border-image-width to per-side pixel widths. `auto` uses the
 	* corresponding border width, numbers multiply it, lengths are absolute and
@@ -11937,8 +12150,7 @@
 			this.ctx.restore();
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/effects-renderer.ts
+	// src/render/canvas/effects-renderer.ts
 	/**
 	* Effects Renderer
 	*
@@ -12086,8 +12298,7 @@
 			return this.activeEffects.length > 0;
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/mask-renderer.ts
+	// src/render/canvas/mask-renderer.ts
 	/**
 	* Mask Renderer
 	*
@@ -12234,8 +12445,7 @@
 			} else paintGradientLayer(ctx, layer, area);
 		}
 	};
-	//#endregion
-	//#region src/render/object-fit.ts
+	// src/render/object-fit.ts
 	const calculateObjectFitRendering = (intrinsicWidth, intrinsicHeight, box, objectFit, objectPosition) => {
 		let sx = 0;
 		let sy = 0;
@@ -12321,8 +12531,7 @@
 			dh
 		};
 	};
-	//#endregion
-	//#region src/render/canvas/content-renderer.ts
+	// src/render/canvas/content-renderer.ts
 	/**
 	* Render replaced elements: Image, Canvas, SVG, IFrame.
 	*/
@@ -12543,8 +12752,7 @@
 			default: return "left";
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/box-shadow-geometry.ts
+	// src/render/canvas/box-shadow-geometry.ts
 	const shadowRadius = (radius, spread) => {
 		const delta = spread > radius ? spread * (1 + Math.pow(radius / spread - 1, 3)) : spread;
 		return Math.max(0, radius + delta);
@@ -12588,8 +12796,7 @@
 			return new BezierCurve(resize(point.start), resize(point.startControl), resize(point.endControl), resize(point.end));
 		});
 	};
-	//#endregion
-	//#region src/render/canvas/box-shadow-transform.ts
+	// src/render/canvas/box-shadow-transform.ts
 	const shadowSpace = (matrix, width, height) => {
 		const { a, b, c, d, e, f } = matrix;
 		if (![
@@ -12632,8 +12839,7 @@
 			uniform: Math.abs(xx - yy) <= tolerance && Math.abs(xy) <= tolerance
 		};
 	};
-	//#endregion
-	//#region src/render/canvas/box-shadow-painter.ts
+	// src/render/canvas/box-shadow-painter.ts
 	const complement = (ctx, rect, hole) => {
 		ctx.beginPath();
 		ctx.rect(rect.left, rect.top, rect.width, rect.height);
@@ -12761,8 +12967,7 @@
 			ctx.restore();
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/text-clip-renderer.ts
+	// src/render/canvas/text-clip-renderer.ts
 	var TextClipRenderer = class {
 		ctx;
 		context;
@@ -12922,8 +13127,7 @@
 			return canvases.length ? canvases : null;
 		}
 	};
-	//#endregion
-	//#region src/render/canvas/canvas-renderer.ts
+	// src/render/canvas/canvas-renderer.ts
 	var CanvasRenderer = class CanvasRenderer {
 		surfaceRoot;
 		surfaceBudget;
@@ -13001,7 +13205,9 @@
 				const hasMask = styles.maskImage.length > 0;
 				const reflect = styles.webkitBoxReflect;
 				const hasBlend = styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL;
-				if (stack.element !== this.surfaceRoot && !this.legacySubtree && (hasMask || reflect || hasBlend || filter !== null && (hasFilter || styles.opacity < 1)) && this.canComposite(stack.element)) {
+				const reflectTransformed = reflect && !isIdentityMatrix(this.ancestorTransform(stack.element));
+				if (reflectTransformed) this.context.logger.warn("-webkit-box-reflect under an ancestor transform is not supported; the reflection is skipped for this subtree");
+				if (stack.element !== this.surfaceRoot && !this.legacySubtree && !reflectTransformed && (hasMask || reflect || hasBlend || filter !== null && (hasFilter || styles.opacity < 1)) && this.canComposite(stack.element)) {
 					if (!await this.renderCompositedStack(stack, filter, hasMask, reflect, hasBlend)) {
 						this.legacySubtree = true;
 						try {
@@ -13018,7 +13224,7 @@
 		canComposite(paint) {
 			const supported = (container) => {
 				const styles = container.styles;
-				return !styles.isTransformed() && styles.zoom === 1 && styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseFilterChain(styles.filter) !== null;
+				return styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseFilterChain(styles.filter) !== null;
 			};
 			const subtree = (container) => supported(container) && container.elements.every(subtree);
 			let ancestor = paint.parent;
@@ -13028,24 +13234,82 @@
 			}
 			return subtree(paint.container);
 		}
+		/**
+		* Root-to-element transform accumulated from the ancestor chain's
+		* TransformEffects (including zoom), stopping at the surface root. The
+		* element's own TransformEffect is intentionally excluded: inside the
+		* offscreen surface it is still applied by the normal effects pass, and
+		* at composition time it is filtered from the recomposed effect list.
+		*/
+		ancestorTransform(paint) {
+			const chain = [];
+			let node = paint;
+			while (node && node !== this.surfaceRoot) {
+				for (const effect of node.effects) if (isTransformEffect(effect)) chain.push(effect);
+				node = node.parent;
+			}
+			if (chain.length === 0) return IDENTITY_MATRIX;
+			let matrix = IDENTITY_MATRIX;
+			for (let i = chain.length - 1; i >= 0; i--) {
+				const effect = at(chain, i);
+				const anchored = multiplyMatrix(multiplyMatrix([
+					1,
+					0,
+					0,
+					1,
+					effect.offsetX,
+					effect.offsetY
+				], effect.matrix), [
+					1,
+					0,
+					0,
+					1,
+					-effect.offsetX,
+					-effect.offsetY
+				]);
+				matrix = multiplyMatrix(matrix, anchored);
+			}
+			return matrix;
+		}
 		async renderCompositedStack(stack, filter, hasMask, reflect, hasBlend = false) {
 			const signal = this.options.signal;
 			if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
-			const bounds = cropSurface(surfaceBounds(stack.element.container), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filter ? filterOutset(filter) : 0, this.options.scale);
+			const container = stack.element.container;
+			const ancestorMatrix = this.ancestorTransform(stack.element);
+			const ownTransforms = stack.element.effects.filter(isTransformEffect);
+			let chainMatrix = ancestorMatrix;
+			for (const effect of ownTransforms) chainMatrix = multiplyMatrix(chainMatrix, multiplyMatrix(multiplyMatrix([
+				1,
+				0,
+				0,
+				1,
+				effect.offsetX,
+				effect.offsetY
+			], effect.matrix), [
+				1,
+				0,
+				0,
+				1,
+				-effect.offsetX,
+				-effect.offsetY
+			]));
+			const layoutBounds = surfaceBounds(container);
+			const bounds = cropSurface(isIdentityMatrix(chainMatrix) ? layoutBounds : transformBoundsToAabb(chainMatrix, layoutBounds), new Bounds(this.options.x, this.options.y, this.options.width, this.options.height), filter ? filterOutset(filter, container.filterReferences) : 0, this.options.scale);
 			if (!bounds.width || !bounds.height) return true;
 			const reserved = reserveSurface(this.surfaceBudget, Math.ceil(bounds.width * this.options.scale), Math.ceil(bounds.height * this.options.scale));
 			if (!reserved) {
-				this.context.logger.info("Filter surface budget exceeded; using the existing renderer");
+				this.context.logger.warn("Filter surface budget exceeded; mask/filter/blend effects are dropped for this subtree");
 				return false;
 			}
+			const surfaceWindow = isIdentityMatrix(ancestorMatrix) || !hasMask ? bounds : inverseTransformBoundsToAabb(ancestorMatrix, bounds) ?? bounds;
 			const options = {
 				...this.options,
 				canvas: void 0,
 				backgroundColor: null,
-				x: bounds.left,
-				y: bounds.top,
-				width: bounds.width,
-				height: bounds.height
+				x: surfaceWindow.left,
+				y: surfaceWindow.top,
+				width: surfaceWindow.width,
+				height: surfaceWindow.height
 			};
 			let source;
 			let filtered;
@@ -13053,12 +13317,18 @@
 				source = new CanvasRenderer(this.context, options, stack.element, this.surfaceBudget);
 				await source.renderStackContent(stack);
 				source.effectsRenderer.applyEffects([]);
-				if (filter) filtered = await renderFilterSurface(source.canvas, filter, stack.element.container.styles.opacity, options.scale, signal);
+				if (filter) filtered = await renderFilterSurface(source.canvas, filter, container.styles.opacity, options.scale, signal, {
+					references: container.filterReferences,
+					origin: {
+						x: container.bounds.left - surfaceWindow.left,
+						y: container.bounds.top - surfaceWindow.top
+					}
+				});
 				const composited = filtered ?? source.canvas;
-				if (hasMask) await this.applyMask(composited, stack.element.container.styles, bounds);
+				if (hasMask) await this.applyMask(composited, stack.element.container.styles, surfaceWindow, container.bounds, ownTransforms);
 				if (signal?.aborted) throw new DOMException("The operation was aborted.", "AbortError");
 				const own = stack.element.effects;
-				const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect));
+				const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect) && !isTransformEffect(effect));
 				this.effectsRenderer.applyEffects(effects);
 				if (hasBlend) {
 					this.ctx.save();
@@ -13082,8 +13352,15 @@
 		* Composite an alpha mask onto a finished element surface: all mask
 		* layers are painted additively into a mask surface, then kept pixels are
 		* selected with destination-in.
+		*
+		* Coordinate spaces: the source surface paints in LAYOUT space (the
+		* ancestor TransformEffects stay active on the main canvas and transform
+		* the draw-back), so the mask must be painted in layout space too —
+		* anchored to the element's border box (containerBounds) — riding ONLY
+		* the element's own transform effects, which apply inside the surface
+		* rather than at draw-back.
 		*/
-		async applyMask(surface, styles, bounds) {
+		async applyMask(surface, styles, surfaceWindow, containerBounds, ownTransforms) {
 			const ctx = surface.getContext("2d");
 			if (!ctx) return;
 			const maskCanvas = this.context.resourceDocument.createElement("canvas");
@@ -13095,14 +13372,21 @@
 				return;
 			}
 			maskCtx.scale(this.options.scale, this.options.scale);
-			maskCtx.translate(-bounds.left, -bounds.top);
+			maskCtx.translate(-surfaceWindow.left, -surfaceWindow.top);
+			for (let i = ownTransforms.length - 1; i >= 0; i--) {
+				const effect = at(ownTransforms, i);
+				maskCtx.translate(effect.offsetX, effect.offsetY);
+				maskCtx.transform(...effect.matrix);
+				maskCtx.translate(-effect.offsetX, -effect.offsetY);
+			}
+			const layoutArea = {
+				left: containerBounds.left,
+				top: containerBounds.top,
+				width: containerBounds.width,
+				height: containerBounds.height
+			};
 			try {
-				await paintMaskLayers(maskCtx, styles.maskImage, styles, {
-					left: bounds.left,
-					top: bounds.top,
-					width: bounds.width,
-					height: bounds.height
-				}, async (url) => await this.context.cache.match(url));
+				await paintMaskLayers(maskCtx, styles.maskImage, styles, layoutArea, async (url) => await this.context.cache.match(url));
 			} catch (error) {
 				this.context.logger.error(`Error rendering mask-image: ${error instanceof Error ? error.message : error}`);
 				releaseSurface(maskCanvas);
@@ -13246,7 +13530,7 @@
 				y: this.options.y,
 				width: this.options.width,
 				height: this.options.height
-			}, (ctx, opts) => new CanvasRenderer(ctx, opts), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
+			}, (ctx, opts) => new CanvasRenderer(ctx, opts, void 0, this.surfaceBudget), container, curves, styles, (c, cv, img) => this.renderReplacedElement(c, cv, img));
 			renderFormElements(this.ctx, this.textRenderer, this.path.bind(this), container, styles);
 			await renderListMarker(this.ctx, this.context, this.textRenderer, paint, container, styles);
 		}
@@ -13642,8 +13926,7 @@
 	const hasTextBackgroundClip = (styles) => {
 		return styles.backgroundClip.some((clip) => clip === 3);
 	};
-	//#endregion
-	//#region src/render/canvas/foreignobject-renderer.ts
+	// src/render/canvas/foreignobject-renderer.ts
 	var ForeignObjectRenderer = class {
 		canvas;
 		ctx;
@@ -13708,8 +13991,7 @@
 			for (const [property, value] of previous) style[property] = value;
 		};
 	};
-	//#endregion
-	//#region src/core/logger.ts
+	// src/core/logger.ts
 	var Logger = class {
 		id;
 		enabled;
@@ -13746,8 +14028,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/core/cache-storage.ts
+	// src/core/cache-storage.ts
 	var Cache = class {
 		context;
 		_options;
@@ -13992,8 +14273,7 @@
 	const isInlineBase64Image = (src) => INLINE_BASE64.test(src);
 	const isBlobImage = (src) => src.substring(0, 4) === "blob";
 	const isSVG = (src) => src.slice(-3).toLowerCase() === "svg" || INLINE_SVG.test(src);
-	//#endregion
-	//#region src/core/origin-checker.ts
+	// src/core/origin-checker.ts
 	/**
 	* Origin Checker
 	*
@@ -14045,8 +14325,7 @@
 			return this.origin;
 		}
 	};
-	//#endregion
-	//#region src/core/context.ts
+	// src/core/context.ts
 	var Context = class Context {
 		static instanceCount = 1;
 		instanceName = `#${Context.instanceCount++}`;
@@ -14093,8 +14372,7 @@
 			this._windowBounds = this._windowBounds.add(left, top, 0, 0);
 		}
 	};
-	//#endregion
-	//#region src/core/config-assembler.ts
+	// src/core/config-assembler.ts
 	/**
 	* Coerce known numeric options from string (or other) values to actual numbers.
 	* Mutates the opts object in place — this is intentionally a normalisation
@@ -14171,8 +14449,7 @@
 		imageSmoothing: opts.imageSmoothing,
 		imageSmoothingQuality: opts.imageSmoothingQuality
 	});
-	//#endregion
-	//#region src/core/background-parser.ts
+	// src/core/background-parser.ts
 	/**
 	* Resolve the background colour for the rendered canvas, following CSS
 	* background propagation rules:
@@ -14193,8 +14470,7 @@
 		const defaultBackgroundColor = typeof backgroundColorOverride === "string" ? parseColor(context, backgroundColorOverride) : backgroundColorOverride === null ? 0 : 4294967295;
 		return element === ownerDocument.documentElement ? isTransparent(documentBackgroundColor) ? isTransparent(bodyBackgroundColor) ? defaultBackgroundColor : bodyBackgroundColor : documentBackgroundColor : defaultBackgroundColor;
 	};
-	//#endregion
-	//#region src/core/render-element.ts
+	// src/core/render-element.ts
 	const emitProgress = (onProgress, context, phase, progress) => {
 		if (!onProgress) return;
 		try {
@@ -14223,7 +14499,7 @@
 		const windowBounds = new Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight);
 		const context = new Context(contextOptions, windowBounds, config);
 		const performanceMonitoring = opts.enablePerformanceMonitoring ?? opts.logging ?? false;
-		const perfMonitor = new PerformanceMonitor(context, performanceMonitoring);
+		const perfMonitor = new PerformanceMonitor(context.logger, performanceMonitoring);
 		perfMonitor.start("total", {
 			width: windowOptions.windowWidth,
 			height: windowOptions.windowHeight
@@ -14292,8 +14568,7 @@
 		emitProgress(opts.onProgress, context, "render", 100);
 		return canvas;
 	};
-	//#endregion
-	//#region src/index.ts
+	// src/index.ts
 	/**
 	* Renders an HTML element to a `<canvas>` element.
 	*
@@ -14329,7 +14604,6 @@
 		});
 		return renderElement(element, options, finalConfig);
 	};
-	//#endregion
 	exports.Html2CanvasConfig = Html2CanvasConfig;
 	exports.PerformanceMonitor = PerformanceMonitor;
 	exports.Validator = Validator;