html2canvas-pro 2.5.0 → 2.5.1

package/dist/html2canvas-pro.js

@@ -1,5 +1,5 @@
 /*!
-* html2canvas-pro 2.5.0 <https://yorickshan.github.io/html2canvas-pro/>
+* html2canvas-pro 2.5.1 <https://yorickshan.github.io/html2canvas-pro/>
 * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
 * Released under MIT License
 */
@@ -4750,6 +4750,17 @@
 			stops
 		};
 	};
+	/**
+	* repeating-conic-gradient shares the conic-gradient grammar exactly; only
+	* the image type differs, which switches the renderer to periodic stops
+	* stacked across the full sweep.
+	*/
+	const repeatingConicGradient = (context, tokens) => {
+		return {
+			...conicGradient(context, tokens),
+			type: 6
+		};
+	};
 	//#endregion
 	//#region src/css/types/functions/image-set.ts
 	const parseResolution = (token) => {
@@ -4802,6 +4813,9 @@
 	const isConicGradient = (background) => {
 		return background.type === 5;
 	};
+	const isRepeatingConicGradient = (background) => {
+		return background.type === 6;
+	};
 	const image = {
 		name: "image",
 		parse: (context, value) => {
@@ -4847,6 +4861,9 @@
 		"conic-gradient": conicGradient,
 		"-webkit-conic-gradient": conicGradient,
 		"-moz-conic-gradient": conicGradient,
+		"repeating-conic-gradient": repeatingConicGradient,
+		"-webkit-repeating-conic-gradient": repeatingConicGradient,
+		"-moz-repeating-conic-gradient": repeatingConicGradient,
 		"image-set": imageSet,
 		"-webkit-image-set": imageSet
 	};
@@ -5335,6 +5352,7 @@
 		skipCache: true,
 		parse: (context, token) => {
 			if (token.type === 20 && token.value === "none") return null;
+			if (!isSupportedImage(token)) return null;
 			return image.parse(context, token);
 		}
 	};
@@ -7779,9 +7797,12 @@
 					case "open-quote":
 						anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, this.quoteDepth++, true)));
 						break;
-					case "close-quote":
-						anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, --this.quoteDepth, false)));
+					case "close-quote": {
+						const hasOpenQuote = this.quoteDepth > 0;
+						this.quoteDepth = Math.max(0, this.quoteDepth - 1);
+						if (hasOpenQuote) anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, this.quoteDepth, false)));
 						break;
+					}
 					default: anonymousReplacedElement.appendChild(document.createTextNode(token.value));
 				}
 			});
@@ -8123,12 +8144,14 @@
 					const styleBefore = window.getComputedStyle(node, ":before");
 					const before = this.pseudoContents.resolvePseudoContent(node, clone, styleBefore, 0);
 					if (before) clone.insertBefore(before, clone.firstChild);
+				}
+				if (isCustomElement(node)) copyStyles = true;
+				if (!isVideoElement(node)) this.cloneChildNodes(node, clone, copyStyles);
+				if (checkPseudoElements) {
 					const styleAfter = window.getComputedStyle(node, ":after");
 					const after = this.pseudoContents.resolvePseudoContent(node, clone, styleAfter, 1);
 					if (after) clone.appendChild(after);
 				}
-				if (isCustomElement(node)) copyStyles = true;
-				if (!isVideoElement(node)) this.cloneChildNodes(node, clone, copyStyles);
 				this.counters.pop(counters);
 				if (style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node) || copyStyles) copyCSSStyles(style, clone);
 				if (node.scrollTop !== 0 || node.scrollLeft !== 0) this.scrolledElements.push([
@@ -9024,10 +9047,10 @@
 		"UL",
 		"MENU"
 	];
-	const parseNodeTree = (context, node, parent, root) => {
+	const parseNodeTree = (context, node, parent, root, zoomScale = 1) => {
 		for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
 			nextNode = childNode.nextSibling;
-			parseChildNode(context, childNode, parent, root);
+			parseChildNode(context, childNode, parent, root, zoomScale);
 		}
 	};
 	/**
@@ -9038,19 +9061,29 @@
 	* this, slotted shadow-DOM content such as web component labels was silently
 	* dropped because `parseNodeTree` only iterates `node.firstChild` (issue #226).
 	*/
-	const parseChildNode = (context, childNode, parent, root) => {
-		if (isTextNode(childNode) && childNode.data.length > 0) parent.textNodes.push(new TextContainer(context, childNode, parent.styles));
-		else if (isElementNode(childNode)) {
-			if (isSlotElement(childNode) && childNode.assignedNodes) childNode.assignedNodes().forEach((assignedNode) => parseChildNode(context, assignedNode, parent, root));
+	const parseChildNode = (context, childNode, parent, root, zoomScale = 1) => {
+		if (isTextNode(childNode) && childNode.data.length > 0) {
+			const textContainer = new TextContainer(context, childNode, parent.styles);
+			if (zoomScale !== 1) {
+				const originLeft = parent.bounds.left;
+				const originTop = parent.bounds.top;
+				textContainer.textBounds = textContainer.textBounds.map((tb) => new TextBounds(tb.text, new Bounds(originLeft + (tb.bounds.left - originLeft) / zoomScale, originTop + (tb.bounds.top - originTop) / zoomScale, tb.bounds.width / zoomScale, tb.bounds.height / zoomScale)));
+			}
+			parent.textNodes.push(textContainer);
+		} else if (isElementNode(childNode)) {
+			if (isSlotElement(childNode) && childNode.assignedNodes) childNode.assignedNodes().forEach((assignedNode) => parseChildNode(context, assignedNode, parent, root, zoomScale));
 			else {
 				const container = createContainer(context, childNode);
+				const ownZoom = container.styles.zoom || 1;
+				if (ownZoom !== 1) container.bounds = new Bounds(container.bounds.left, container.bounds.top, container.bounds.width / ownZoom, container.bounds.height / ownZoom);
 				if (container.styles.isVisible()) {
 					if (createsRealStackingContext(childNode, container, root)) container.createsRealStackingContext = true;
 					else if (createsStackingContext(container.styles)) container.createsStackingContext = true;
 					if (LIST_OWNERS.indexOf(childNode.tagName) !== -1) container.isListOwner = true;
 					parent.elements.push(container);
-					if (childNode.shadowRoot) parseNodeTree(context, childNode.shadowRoot, container, root);
-					else if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) parseNodeTree(context, childNode, container, root);
+					const childZoom = zoomScale * (container.styles.zoom || 1);
+					if (childNode.shadowRoot) parseNodeTree(context, childNode.shadowRoot, container, root, childZoom);
+					else if (!isTextareaElement(childNode) && !isSVGElement(childNode) && !isSelectElement(childNode)) parseNodeTree(context, childNode, container, root, childZoom);
 				}
 			}
 		}
@@ -9078,6 +9111,7 @@
 	};
 	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
@@ -9497,9 +9531,8 @@
 			if (this.container.styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL) this.effects.push(new BlendEffect(this.container.styles.mixBlendMode));
 			if (this.container.styles.filter !== null) this.effects.push(new FilterEffect(this.container.styles.filter));
 			if (this.container.styles.zoom !== 1) {
-				const origin = this.container.styles.transformOrigin;
-				const offsetX = this.container.bounds.left + getAbsoluteValue(origin[0], this.container.bounds.width);
-				const offsetY = this.container.bounds.top + getAbsoluteValue(origin[1], this.container.bounds.height);
+				const offsetX = this.container.bounds.left;
+				const offsetY = this.container.bounds.top;
 				const z = this.container.styles.zoom;
 				const zoomMatrix = [
 					z,
@@ -9531,7 +9564,7 @@
 		computeEffects(target, surfaceRoot) {
 			let inFlow = [2, 3].indexOf(this.container.styles.position) === -1;
 			let parent = this === surfaceRoot ? null : this.parent;
-			const sourceEffects = (paint) => paint.effects.filter((effect) => paint !== surfaceRoot || !isFilterEffect(effect) && !isOpacityEffect(effect));
+			const sourceEffects = (paint) => paint.effects.filter((effect) => paint !== surfaceRoot || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect));
 			const effects = sourceEffects(this);
 			while (parent) {
 				const croplessEffects = sourceEffects(parent).filter((effect) => !isClipEffect(effect));
@@ -10424,7 +10457,7 @@
 					this.ctx.shadowColor = asString(textShadow.color);
 					this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
 					this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
-					this.ctx.shadowBlur = textShadow.blur.number;
+					this.ctx.shadowBlur = textShadow.blur.number * this.options.scale;
 					this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline, styles.writingMode);
 				});
 				this.ctx.shadowColor = "";
@@ -10574,7 +10607,7 @@
 			this.ctx.textBaseline = "alphabetic";
 			const paintOrder = styles.paintOrder;
 			const baseline = this.measureBaselineCached(fontString ?? "", styles.fontSize.number);
-			if (styles.webkitLineClamp > 0 && (styles.display & 2) !== 0 && styles.overflowY === 1 && text.textBounds.length > 0) {
+			if (styles.webkitLineClamp > 0 && (styles.display & 34) !== 0 && styles.overflowY === 1 && text.textBounds.length > 0) {
 				if (this.renderLineClampedText(text, styles, paintOrder, baseline, containerBounds)) return;
 			}
 			if (styles.textOverflow === 1 && containerBounds && styles.overflowX === 1 && text.textBounds.length > 0 && this.renderEllipsisText(text, styles, paintOrder, baseline, containerBounds)) return;
@@ -10773,6 +10806,7 @@
 				else if (isRadialGradient(backgroundImage)) this.renderRadialGradient(container, backgroundImage, index);
 				else if (isRepeatingRadialGradient(backgroundImage)) this.renderRepeatingRadialGradient(container, backgroundImage, index);
 				else if (isConicGradient(backgroundImage)) this.renderConicGradient(container, backgroundImage, index);
+				else if (isRepeatingConicGradient(backgroundImage)) this.renderRepeatingConicGradient(container, backgroundImage, index);
 				if (layerCount > 0) {
 					if ((blendModes[layerCount] ?? blendModes[0] ?? "normal") !== "normal") this.ctx.restore();
 				}
@@ -10823,45 +10857,43 @@
 				null,
 				null
 			]);
-			const [lineLength, x0, x1, y0, y1] = calculateGradientDirection(backgroundImage.angle, width, height);
+			const [lineLength, lx0, lx1, ly0, ly1] = calculateGradientDirection(backgroundImage.angle, width, height);
+			const gx0 = x + lx0;
+			const gx1 = x + lx1;
+			const gy0 = y + ly0;
+			const gy1 = y + ly1;
 			const processedStops = processColorStops(backgroundImage.stops, lineLength || 1);
 			const lastStop = at(processedStops, processedStops.length - 1);
 			const firstStop = at(processedStops, 0);
-			const stopSpan = lastStop.stop - firstStop.stop;
-			const patternLength = stopSpan * (lineLength || 1);
-			if (patternLength <= 0) {
-				this.renderLinearGradient(container, backgroundImage, index);
+			const period = Math.max(lastStop.stop - firstStop.stop, .01);
+			if (lastStop.stop - firstStop.stop < 1e-6) {
+				const gradient = this.ctx.createLinearGradient(gx0, gy0, gx1, gy1);
+				gradient.addColorStop(0, asString(lastStop.color));
+				gradient.addColorStop(1, asString(lastStop.color));
+				this.path(path);
+				this.ctx.fillStyle = gradient;
+				this.ctx.fill();
 				return;
 			}
-			const dirX = x1 - x0;
-			const dirY = y1 - y0;
-			const scale = patternLength / (Math.sqrt(dirX * dirX + dirY * dirY) || 1);
-			const pX0 = x0;
-			const pY0 = y0;
-			const pX1 = x0 + dirX * scale;
-			const pY1 = y0 + dirY * scale;
-			const ownerDocument = this.canvas.ownerDocument ?? document;
-			const cacheKey = `rlg|${backgroundImage.angle}|${Math.round(patternLength)}|${JSON.stringify(backgroundImage.stops)}`;
-			let pattern = this.patternCache.get(cacheKey);
-			if (!pattern) {
-				const canvas = ownerDocument.createElement("canvas");
-				const canvasSize = Math.max(1, Math.ceil(patternLength));
-				canvas.width = canvasSize;
-				canvas.height = canvasSize;
-				const ctx = canvas.getContext("2d");
-				if (!ctx) return;
-				const gradient = ctx.createLinearGradient(pX0 - x, pY0 - y, pX1 - x, pY1 - y);
-				processedStops.forEach((colorStop) => {
-					gradient.addColorStop((colorStop.stop - firstStop.stop) / stopSpan, asString(colorStop.color));
+			const stops = [];
+			const cycles = Math.ceil(1 / period);
+			for (let k = 0; k < cycles; k++) for (const s of processedStops) {
+				const stop = k * period + (s.stop - firstStop.stop);
+				if (stop > 1) break;
+				stops.push({
+					stop,
+					color: asString(s.color)
 				});
-				ctx.fillStyle = gradient;
-				ctx.fillRect(0, 0, canvasSize, canvasSize);
-				if (canvasSize > 0) {
-					pattern = this.ctx.createPattern(canvas, "repeat");
-					this.patternCache.set(cacheKey, pattern);
-				}
 			}
-			if (pattern) this.renderRepeat(path, pattern, x, y);
+			stops.push({
+				stop: 1,
+				color: asString(lastStop.color)
+			});
+			const gradient = this.ctx.createLinearGradient(gx0, gy0, gx1, gy1);
+			stops.forEach((s) => gradient.addColorStop(Math.min(1, Math.max(0, s.stop)), s.color));
+			this.path(path);
+			this.ctx.fillStyle = gradient;
+			this.ctx.fill();
 		}
 		/**
 		* Render a linear gradient background
@@ -10911,7 +10943,7 @@
 			}
 			if (rx > 0 && ry > 0) {
 				const cacheKey = `rg|${Math.round(x)}x${Math.round(y)}|${Math.round(rx)}x${Math.round(ry)}|${JSON.stringify(backgroundImage.stops)}`;
-				const stops = processColorStops(backgroundImage.stops, rx * 2);
+				const stops = processColorStops(backgroundImage.stops, rx);
 				const lastStop = stops[stops.length - 1];
 				let pattern = this.patternCache.get(cacheKey);
 				if (!pattern) {
@@ -10968,14 +11000,14 @@
 				ry = Math.max(ry, .01);
 			}
 			if (!(rx > 0 && ry > 0)) return;
-			const processed = processColorStops(backgroundImage.stops, rx * 2);
+			const processed = processColorStops(backgroundImage.stops, rx);
 			const firstStop = at(processed, 0);
 			const lastStop = at(processed, processed.length - 1);
 			const period = Math.max(lastStop.stop - firstStop.stop, .01);
 			const stops = [];
-			const rings = Math.ceil(.5 / period);
+			const rings = Math.ceil(1 / period);
 			for (let k = 0; k < rings; k++) for (const s of processed) {
-				const stop = (k * period + (s.stop - firstStop.stop)) / 2;
+				const stop = k * period + (s.stop - firstStop.stop);
 				if (stop > 1) break;
 				stops.push({
 					stop,
@@ -11042,6 +11074,65 @@
 			this.ctx.restore();
 		}
 		/**
+		* Render a repeating conic gradient background.
+		*
+		* Canvas conic gradient stops span the full 2π sweep as [0, 1], so the
+		* one-cycle stop list is stacked k·period + s for k = 0..cycles-1 over the
+		* whole sweep — the same periodic-stop stacking the repeating linear and
+		* radial renderers use along their gradient lines.
+		*/
+		renderRepeatingConicGradient(container, backgroundImage, index) {
+			const [path, left, top, width, height] = calculateBackgroundRendering(container, index, [
+				null,
+				null,
+				null
+			]);
+			const position = backgroundImage.position.length === 0 ? [FIFTY_PERCENT] : backgroundImage.position;
+			const cx = left + getAbsoluteValue(at(position, 0), width);
+			const cy = top + getAbsoluteValue(at(position, position.length - 1), height);
+			const processedStops = processColorStops(backgroundImage.stops, 1);
+			const firstStop = at(processedStops, 0);
+			const lastStop = at(processedStops, processedStops.length - 1);
+			const period = Math.max(lastStop.stop - firstStop.stop, .01);
+			if (lastStop.stop - firstStop.stop < 1e-6) {
+				const gradient = this.ctx.createConicGradient(backgroundImage.angle - Math.PI / 2, cx, cy);
+				gradient.addColorStop(0, asString(lastStop.color));
+				gradient.addColorStop(1, asString(lastStop.color));
+				this.path(path);
+				this.ctx.save();
+				this.ctx.clip();
+				this.ctx.fillStyle = gradient;
+				this.ctx.fill();
+				this.ctx.restore();
+				return;
+			}
+			const stops = [];
+			const cycles = Math.ceil(1 / period);
+			for (let k = 0; k < cycles; k++) for (const s of processedStops) {
+				const stop = k * period + (s.stop - firstStop.stop);
+				if (stop > 1) break;
+				stops.push({
+					stop,
+					color: asString(s.color)
+				});
+			}
+			const lastIncluded = at(stops, stops.length - 1);
+			if (lastIncluded && lastIncluded.stop < 1) stops.push({
+				stop: 1,
+				color: lastIncluded.color
+			});
+			const gradient = this.ctx.createConicGradient(backgroundImage.angle - Math.PI / 2, cx, cy);
+			stops.forEach((s) => {
+				gradient.addColorStop(Math.min(1, Math.max(0, s.stop)), s.color);
+			});
+			this.path(path);
+			this.ctx.save();
+			this.ctx.clip();
+			this.ctx.fillStyle = gradient;
+			this.ctx.fill();
+			this.ctx.restore();
+		}
+		/**
 		* Render a repeating pattern with offset
 		*
 		* @param path - Path to fill
@@ -11466,6 +11557,13 @@
 	* - Filter effects (CSS filter functions)
 	*/
 	/**
+	* Scale `blur(<n>px)` radii in a ctx.filter string by the device-pixel
+	* ratio. Other filter functions (brightness, saturate, …) take
+	* unitless values and are unaffected.
+	*/
+	const BLUR_PX_RE = /blur\((\d+(?:\.\d+)?)px\)/gi;
+	const scaleFilterBlur = (filter, scale) => scale === 1 ? filter : filter.replace(BLUR_PX_RE, (_match, value) => `blur(${parseFloat(value) * scale}px)`);
+	/**
 	* Effects Renderer
 	*
 	* Manages rendering effects stack including opacity, transforms, and clipping.
@@ -11503,6 +11601,7 @@
 			this.saveAtDepth = -1;
 			this.ctx = deps.ctx;
 			this.pathCallback = pathCallback;
+			this.scale = deps.scale ?? 1;
 		}
 		/**
 		* Apply multiple effects.
@@ -11541,11 +11640,11 @@
 			else if (isOpacityEffect(effect)) this.ctx.globalAlpha *= effect.opacity;
 			else if (isBlendEffect(effect)) this.ctx.globalCompositeOperation = effect.compositeOperation;
 			else if (isFilterEffect(effect)) {
-				this.ctx.filter = effect.safeFilterString || "none";
+				this.ctx.filter = scaleFilterBlur(effect.safeFilterString, this.scale) || "none";
 				if (effect.shadow) {
-					this.ctx.shadowOffsetX = effect.shadow.offsetX;
-					this.ctx.shadowOffsetY = effect.shadow.offsetY;
-					this.ctx.shadowBlur = effect.shadow.blur;
+					this.ctx.shadowOffsetX = effect.shadow.offsetX * this.scale;
+					this.ctx.shadowOffsetY = effect.shadow.offsetY * this.scale;
+					this.ctx.shadowBlur = effect.shadow.blur * this.scale;
 					this.ctx.shadowColor = effect.shadow.color;
 				}
 			}
@@ -11690,8 +11789,8 @@
 		let gradient = null;
 		if (layer.type === 1 || layer.type === 3) {
 			const linear = layer;
-			const [lineLength, gx0, gy0, gx1, gy1] = calculateGradientDirection(linear.angle || 0, width, height);
-			gradient = ctx.createLinearGradient(gx0, gy0, gx1, gy1);
+			const [lineLength, lx0, lx1, ly0, ly1] = calculateGradientDirection(linear.angle || 0, width, height);
+			gradient = ctx.createLinearGradient(area.left + lx0, area.top + ly0, area.left + lx1, area.top + ly1);
 			processColorStops(linear.stops, lineLength || 1).forEach((s) => gradient.addColorStop(Math.min(1, Math.max(0, s.stop)), asString(s.color)));
 		} else if (isConicGradient(layer)) {
 			const conic = layer;
@@ -11852,14 +11951,14 @@
 					new Vector(container.bounds.left + size * .84, container.bounds.top + size * .34085),
 					new Vector(container.bounds.left + size * .39363, container.bounds.top + size * .79)
 				]);
-				ctx.fillStyle = asString(container.styles.accentColor ?? 707406591);
+				ctx.fillStyle = asString(container.styles.accentColor ?? 7733247);
 				ctx.fill();
 				ctx.restore();
 			} else if (container.type === "radio" && container.checked) {
 				ctx.save();
 				ctx.beginPath();
 				ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true);
-				ctx.fillStyle = asString(container.styles.accentColor ?? 707406591);
+				ctx.fillStyle = asString(container.styles.accentColor ?? 7733247);
 				ctx.fill();
 				ctx.restore();
 			}
@@ -11958,22 +12057,51 @@
 				const url = img.url;
 				try {
 					const image = await context.cache.match(url);
-					ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top);
+					const fontSize = getAbsoluteValue(styles.fontSize, 0);
+					const naturalWidth = image?.naturalWidth || image.width;
+					const naturalHeight = image?.naturalHeight || image.height;
+					if (naturalWidth <= 0 || naturalHeight <= 0) return;
+					const markerScale = Math.min(fontSize / naturalWidth, fontSize / naturalHeight);
+					const markerWidth = naturalWidth * markerScale;
+					const markerHeight = naturalHeight * markerScale;
+					const markerCenterY = container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width) + computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2;
+					ctx.drawImage(image, container.bounds.left - (markerWidth + 10), markerCenterY - markerHeight / 2, markerWidth, markerHeight);
 				} catch (e) {
 					context.logger.error(`Error loading list-style-image ${url}`);
 					context.onError?.(e instanceof Error ? e : new Error(String(e)));
 				}
 			}
 		} else if (paint.listValue && container.styles.listStyleType !== -1) {
-			const [font] = textRenderer.createFontStyle(styles);
-			ctx.font = font ?? "";
-			ctx.fillStyle = asString(styles.color);
-			ctx.textBaseline = "middle";
-			ctx.textAlign = "right";
-			const bounds = new Bounds(container.bounds.left, container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
-			textRenderer.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
-			ctx.textBaseline = "bottom";
-			ctx.textAlign = "left";
+			const type = container.styles.listStyleType;
+			if (type === 0 || type === 1 || type === 2) {
+				const size = styles.fontSize.number * .45;
+				const cx = container.bounds.left - size * .9;
+				const cy = container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width) + computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2;
+				ctx.save();
+				ctx.fillStyle = asString(styles.color);
+				ctx.beginPath();
+				if (type === 2) ctx.rect(cx - size / 2, cy - size / 2, size, size);
+				else {
+					ctx.arc(cx, cy, size / 2, 0, Math.PI * 2);
+					if (type === 1) {
+						ctx.strokeStyle = asString(styles.color);
+						ctx.lineWidth = size * .18;
+					}
+				}
+				if (type === 1) ctx.stroke();
+				else ctx.fill();
+				ctx.restore();
+			} else {
+				const [font] = textRenderer.createFontStyle(styles);
+				ctx.font = font ?? "";
+				ctx.fillStyle = asString(styles.color);
+				ctx.textBaseline = "middle";
+				ctx.textAlign = "right";
+				const bounds = new Bounds(container.bounds.left, container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1);
+				textRenderer.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2, styles.writingMode);
+				ctx.textBaseline = "bottom";
+				ctx.textAlign = "left";
+			}
 		}
 	}
 	/**
@@ -12216,31 +12344,33 @@
 		constructor(deps) {
 			this.ctx = deps.ctx;
 			this.context = deps.context;
+			this.scale = deps.scale;
 			this.createFontStyle = deps.createFontStyle;
 		}
 		async render(paint) {
 			const container = paint.container;
 			const styles = container.styles;
 			const bounds = container.bounds;
+			const scale = this.scale;
 			if (bounds.width <= 0 || bounds.height <= 0) return;
 			const ownerDocument = this.ctx.canvas.ownerDocument ?? document;
-			const offscreen = ownerDocument.createElement("canvas");
 			const width = Math.ceil(bounds.width);
 			const height = Math.ceil(bounds.height);
-			offscreen.width = width;
-			offscreen.height = height;
-			const offCtx = offscreen.getContext("2d");
-			if (!offCtx) return;
+			const deviceWidth = Math.ceil(bounds.width * scale);
+			const deviceHeight = Math.ceil(bounds.height * scale);
+			const offscreen = this.createLayer(ownerDocument, deviceWidth, deviceHeight);
+			if (!offscreen) return;
+			offscreen.ctx.scale(scale, scale);
 			const [fontString] = this.createFontStyle(styles);
-			offCtx.font = fontString ?? "";
-			offCtx.textBaseline = "alphabetic";
-			offCtx.textAlign = "left";
-			offCtx.direction = styles.direction === 1 ? "rtl" : "ltr";
-			const baseline = measureBaseline(offCtx, styles.fontSize.number);
+			offscreen.ctx.font = fontString ?? "";
+			offscreen.ctx.textBaseline = "alphabetic";
+			offscreen.ctx.textAlign = "left";
+			offscreen.ctx.direction = styles.direction === 1 ? "rtl" : "ltr";
+			const baseline = measureBaseline(offscreen.ctx, styles.fontSize.number);
 			const bgRenderer = new BackgroundRenderer({
-				ctx: offCtx,
+				ctx: offscreen.ctx,
 				context: this.context,
-				canvas: offscreen,
+				canvas: offscreen.canvas,
 				options: {
 					width,
 					height,
@@ -12248,51 +12378,115 @@
 				}
 			});
 			if (!isTransparent(styles.backgroundColor)) {
-				offCtx.fillStyle = asString(styles.backgroundColor);
-				offCtx.fillRect(0, 0, width, height);
+				offscreen.ctx.fillStyle = asString(styles.backgroundColor);
+				offscreen.ctx.fillRect(0, 0, width, height);
 			}
-			offCtx.save();
-			offCtx.translate(-bounds.left, -bounds.top);
+			offscreen.ctx.save();
+			offscreen.ctx.translate(-bounds.left, -bounds.top);
 			await bgRenderer.renderBackgroundImage(container);
-			offCtx.restore();
-			const mask = ownerDocument.createElement("canvas");
-			mask.width = width;
-			mask.height = height;
-			const maskCtx = mask.getContext("2d");
-			if (!maskCtx) return;
-			maskCtx.font = offCtx.font;
-			maskCtx.textBaseline = offCtx.textBaseline;
-			maskCtx.textAlign = offCtx.textAlign;
-			maskCtx.direction = offCtx.direction;
-			maskCtx.fillStyle = "#000";
-			const writingMode = styles.writingMode;
-			const letterSpacing = styles.letterSpacing;
-			for (const textNode of container.textNodes) for (const textBound of textNode.textBounds) {
-				const localLeft = textBound.bounds.left - bounds.left;
-				const localTop = textBound.bounds.top - bounds.top + baseline;
-				if (letterSpacing > 0) this.renderTextMaskWithLetterSpacing(maskCtx, textBound, letterSpacing, localLeft, localTop, writingMode);
-				else maskCtx.fillText(textBound.text, localLeft, localTop);
-			}
-			offCtx.globalCompositeOperation = "destination-in";
-			offCtx.drawImage(mask, 0, 0);
-			this.ctx.drawImage(offscreen, bounds.left, bounds.top);
+			offscreen.ctx.restore();
+			const drawOptions = {
+				bounds,
+				baseline,
+				letterSpacing: styles.letterSpacing,
+				writingMode: styles.writingMode
+			};
+			const mask = this.createGlyphLayer(ownerDocument, deviceWidth, deviceHeight, offscreen.ctx);
+			if (!mask) return;
+			const hasStroke = !!styles.webkitTextStrokeWidth;
+			if (hasStroke) {
+				mask.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+				mask.ctx.lineWidth = styles.webkitTextStrokeWidth;
+				mask.ctx.lineJoin = this.getTextStrokeLineJoin();
+			}
+			for (const textNode of container.textNodes) for (const textBound of textNode.textBounds) this.drawGlyphs(mask, textBound, drawOptions, (ctx, text, x, y) => {
+				ctx.fillText(text, x, y);
+				if (hasStroke) ctx.strokeText(text, x, y);
+			});
+			offscreen.ctx.globalCompositeOperation = "destination-in";
+			offscreen.ctx.drawImage(mask.canvas, 0, 0, width, height);
+			const shadowCanvases = this.renderShadowSilhouettes(paint, ownerDocument, deviceWidth, deviceHeight, offscreen.ctx, styles, drawOptions);
+			if (shadowCanvases) {
+				const composite = this.createLayer(ownerDocument, deviceWidth, deviceHeight);
+				if (!composite) return;
+				for (const shadowCanvas of shadowCanvases) composite.ctx.drawImage(shadowCanvas, 0, 0);
+				composite.ctx.drawImage(offscreen.canvas, 0, 0);
+				this.ctx.drawImage(composite.canvas, bounds.left, bounds.top, bounds.width, bounds.height);
+			} else this.ctx.drawImage(offscreen.canvas, bounds.left, bounds.top, bounds.width, bounds.height);
+		}
+		createLayer(ownerDocument, width, height) {
+			const canvas = ownerDocument.createElement("canvas");
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return null;
+			return {
+				canvas,
+				ctx
+			};
+		}
+		createGlyphLayer(ownerDocument, width, height, fontSource) {
+			const layer = this.createLayer(ownerDocument, width, height);
+			if (!layer) return null;
+			layer.ctx.scale(this.scale, this.scale);
+			layer.ctx.font = fontSource.font;
+			layer.ctx.textBaseline = fontSource.textBaseline;
+			layer.ctx.textAlign = fontSource.textAlign;
+			layer.ctx.direction = fontSource.direction;
+			layer.ctx.fillStyle = "#000";
+			return layer;
 		}
 		/**
-		* Render text glyphs one-by-one as a mask, applying letter-spacing between characters.
-		* This ensures the mask matches how the text renderer lays out the characters.
+		* Draw one text bound onto a glyph layer, splitting into per-glyph draws
+		* when letter-spacing is in effect so the layout matches the main text
+		* renderer. Vertical writing modes fall back to a single draw call.
 		*/
-		renderTextMaskWithLetterSpacing(ctx, text, letterSpacing, x, y, writingMode) {
-			const letters = segmentGraphemes(text.text);
+		drawGlyphs(layer, textBound, drawOptions, draw) {
+			const x = textBound.bounds.left - drawOptions.bounds.left;
+			const y = textBound.bounds.top - drawOptions.bounds.top + drawOptions.baseline;
+			const { letterSpacing, writingMode } = drawOptions;
+			if (letterSpacing <= 0) {
+				draw(layer.ctx, textBound.text, x, y);
+				return;
+			}
+			if (isVerticalWritingMode(writingMode)) {
+				draw(layer.ctx, textBound.text, x, y);
+				return;
+			}
 			let offset = x;
-			for (const letter of letters) {
-				if (isVerticalWritingMode(writingMode)) {
-					ctx.fillText(text.text, x, y);
-					return;
-				}
-				ctx.fillText(letter, offset, y);
-				offset += ctx.measureText(letter).width + letterSpacing;
+			for (const letter of segmentGraphemes(textBound.text)) {
+				draw(layer.ctx, letter, offset, y);
+				offset += layer.ctx.measureText(letter).width + letterSpacing;
 			}
 		}
+		/**
+		* Paint the text-shadow silhouettes for every glyph, one canvas per
+		* shadow, returned front-to-back (the last shadow sits deepest). Returns
+		* null when the element has no text shadows.
+		*/
+		renderShadowSilhouettes(paint, ownerDocument, deviceWidth, deviceHeight, fontSource, styles, drawOptions) {
+			const textShadows = styles.textShadow;
+			if (!textShadows.length) return null;
+			const canvases = [];
+			for (let i = textShadows.length - 1; i >= 0; i--) {
+				const textShadow = at(textShadows, i);
+				const layer = this.createGlyphLayer(ownerDocument, deviceWidth, deviceHeight, fontSource);
+				if (!layer) continue;
+				layer.ctx.shadowColor = asString(textShadow.color);
+				layer.ctx.shadowOffsetX = textShadow.offsetX.number * this.scale;
+				layer.ctx.shadowOffsetY = textShadow.offsetY.number * this.scale;
+				layer.ctx.shadowBlur = textShadow.blur.number * this.scale;
+				layer.ctx.fillStyle = asString(textShadow.color);
+				for (const textNode of paint.container.textNodes) for (const textBound of textNode.textBounds) this.drawGlyphs(layer, textBound, drawOptions, (ctx, text, x, y) => {
+					ctx.fillText(text, x, y);
+				});
+				canvases.push(layer.canvas);
+			}
+			return canvases.length ? canvases : null;
+		}
+		getTextStrokeLineJoin() {
+			return (typeof window !== "undefined" ? window : void 0)?.chrome ? "miter" : "round";
+		}
 	};
 	//#endregion
 	//#region src/render/canvas/canvas-renderer.ts
@@ -12337,7 +12531,10 @@
 				formatPath: (paths) => this.formatPath(paths)
 			});
 			this.borderImageRenderer = new BorderImageRenderer(this.ctx);
-			this.effectsRenderer = new EffectsRenderer({ ctx: this.ctx }, { path: (paths) => this.path(paths) });
+			this.effectsRenderer = new EffectsRenderer({
+				ctx: this.ctx,
+				scale: options.scale
+			}, { path: (paths) => this.path(paths) });
 			this.textRenderer = new TextRenderer({
 				ctx: this.ctx,
 				options: { scale: options.scale }
@@ -12345,6 +12542,7 @@
 			this.textClipRenderer = new TextClipRenderer({
 				ctx: this.ctx,
 				context: this.context,
+				scale: options.scale,
 				createFontStyle: (styles) => this.textRenderer.createFontStyle(styles)
 			});
 			this.context.logger.debug(`Canvas renderer initialized (${options.width}x${options.height}) with scale ${options.scale}`);
@@ -12355,8 +12553,9 @@
 				const filter = parseSimpleFilter(styles.filter);
 				const hasMask = styles.maskImage.length > 0;
 				const reflect = styles.webkitBoxReflect;
-				if (stack.element !== this.surfaceRoot && !this.legacySubtree && (hasMask || reflect || filter && (styles.filter || styles.opacity < 1)) && this.canComposite(stack.element)) {
-					if (!await this.renderCompositedStack(stack, filter, hasMask, reflect)) {
+				const hasBlend = styles.mixBlendMode !== MIX_BLEND_MODE$1.NORMAL;
+				if (stack.element !== this.surfaceRoot && !this.legacySubtree && (hasMask || reflect || hasBlend || filter && (styles.filter || styles.opacity < 1)) && this.canComposite(stack.element)) {
+					if (!await this.renderCompositedStack(stack, filter, hasMask, reflect, hasBlend)) {
 						this.legacySubtree = true;
 						try {
 							await this.renderStackContent(stack);
@@ -12372,7 +12571,7 @@
 		canComposite(paint) {
 			const supported = (container) => {
 				const styles = container.styles;
-				return !styles.isTransformed() && styles.zoom === 1 && styles.mixBlendMode === MIX_BLEND_MODE$1.NORMAL && styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseSimpleFilter(styles.filter) !== null;
+				return !styles.isTransformed() && styles.zoom === 1 && styles.clipPath.type === 0 && !contains(styles.display, 2048) && parseSimpleFilter(styles.filter) !== null;
 			};
 			const subtree = (container) => supported(container) && container.elements.every(subtree);
 			let ancestor = paint.parent;
@@ -12382,7 +12581,7 @@
 			}
 			return subtree(paint.container);
 		}
-		async renderCompositedStack(stack, filter, hasMask, reflect) {
+		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);
@@ -12412,9 +12611,14 @@
 				if (hasMask) await this.applyMask(composited, stack.element.container.styles, bounds);
 				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) && !isClipEffect(effect));
+				const effects = stack.element.getEffects(4, this.surfaceRoot).filter((effect) => !own.includes(effect) || !isFilterEffect(effect) && !isOpacityEffect(effect) && !isBlendEffect(effect) && !isClipEffect(effect));
 				this.effectsRenderer.applyEffects(effects);
-				this.ctx.drawImage(composited, options.x, options.y, composited.width / options.scale, composited.height / options.scale);
+				if (hasBlend) {
+					this.ctx.save();
+					this.ctx.globalCompositeOperation = stack.element.container.styles.mixBlendMode;
+					this.ctx.drawImage(composited, options.x, options.y, composited.width / options.scale, composited.height / options.scale);
+					this.ctx.restore();
+				} else this.ctx.drawImage(composited, options.x, options.y, composited.width / options.scale, composited.height / options.scale);
 				if (reflect) await this.drawReflection(composited, stack.element.container.bounds, bounds, reflect);
 				return true;
 			} catch (error) {
@@ -12504,6 +12708,7 @@
 					maskCanvas.height = h;
 					const mctx = maskCanvas.getContext("2d");
 					if (mctx) {
+						mctx.scale(scale, scale);
 						await paintMaskLayers(mctx, [reflect.mask], {
 							maskPosition: [],
 							maskRepeat: [],
@@ -12524,7 +12729,7 @@
 								ctx.scale(1, -1);
 							}
 							ctx.globalCompositeOperation = "destination-in";
-							ctx.drawImage(maskCanvas, 0, 0);
+							ctx.drawImage(maskCanvas, 0, 0, w, h);
 						} finally {
 							ctx.restore();
 						}
@@ -12736,26 +12941,27 @@
 			}
 			if (styles.borderImageSource) {
 				const source = styles.borderImageSource;
+				const bounds = paint.container.bounds;
+				const borderWidths = [
+					Math.max(0, styles.borderTopWidth),
+					Math.max(0, styles.borderRightWidth),
+					Math.max(0, styles.borderBottomWidth),
+					Math.max(0, styles.borderLeftWidth)
+				];
+				let image = null;
 				if (source.type === 0) {
 					const url = source.url;
 					try {
-						const image = await this.context.cache.match(url);
-						if (image) {
-							const bounds = paint.container.bounds;
-							const borderWidths = [
-								Math.max(0, styles.borderTopWidth),
-								Math.max(0, styles.borderRightWidth),
-								Math.max(0, styles.borderBottomWidth),
-								Math.max(0, styles.borderLeftWidth)
-							];
-							const outset = resolveBorderImageOutset(styles.borderImageOutset, borderWidths);
-							const area = bounds.add(-outset.left, -outset.top, outset.left + outset.right, outset.top + outset.bottom);
-							const widths = resolveBorderImageWidths(styles.borderImageWidth, borderWidths, area);
-							this.borderImageRenderer.renderBorderImage(bounds, image, styles.borderImageSlice, styles.borderImageRepeat, widths[0], widths[1], widths[2], widths[3], outset);
-						}
+						image = await this.context.cache.match(url) ?? null;
 					} catch (e) {
 						this.context.logger.error(`Error loading border-image ${url}`);
 					}
+				} else image = this.rasterizeGradientSource(source, bounds);
+				if (image) {
+					const outset = resolveBorderImageOutset(styles.borderImageOutset, borderWidths);
+					const area = bounds.add(-outset.left, -outset.top, outset.left + outset.right, outset.top + outset.bottom);
+					const widths = resolveBorderImageWidths(styles.borderImageWidth, borderWidths, area);
+					this.borderImageRenderer.renderBorderImage(bounds, image, styles.borderImageSlice, styles.borderImageRepeat, widths[0], widths[1], widths[2], widths[3], outset);
 				}
 				return;
 			}
@@ -12823,6 +13029,91 @@
 			}
 		}
 		/**
+		* Rasterise a gradient border-image-source across the border image area.
+		* CSS allows any <image> as the border-image source; gradients are painted
+		* over the whole border-image box and then sliced by the regular 9-slice
+		* pipeline, matching browser behaviour for `border-image: linear-gradient()`.
+		* Returns null when the gradient could not be painted.
+		*/
+		rasterizeGradientSource(source, bounds) {
+			const width = Math.max(1, Math.ceil(bounds.width));
+			const height = Math.max(1, Math.ceil(bounds.height));
+			const canvas = (this.ctx.canvas.ownerDocument ?? document).createElement("canvas");
+			canvas.width = width;
+			canvas.height = height;
+			const ctx = canvas.getContext("2d");
+			if (!ctx) return null;
+			if (source.type === 1 || source.type === 3) {
+				const gradientImage = source;
+				const [lineLength, x0, y0, x1, y1] = calculateGradientDirection(gradientImage.angle, width, height);
+				const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+				processColorStops(gradientImage.stops, lineLength || width).forEach((colorStop) => {
+					gradient.addColorStop(Math.min(1, Math.max(0, colorStop.stop)), asString(colorStop.color));
+				});
+				ctx.fillStyle = gradient;
+				ctx.fillRect(0, 0, width, height);
+				return canvas;
+			}
+			if (source.type === 2 || source.type === 4) {
+				const gradientImage = source;
+				const cx = getAbsoluteValue(at(gradientImage.position, 0), width);
+				const cy = getAbsoluteValue(at(gradientImage.position, 1), height);
+				const [rx, ry] = calculateRadius(gradientImage, cx, cy, width, height);
+				if (rx <= 0 || ry <= 0) return null;
+				ctx.save();
+				ctx.translate(cx, cy);
+				ctx.scale(1, ry / rx);
+				ctx.translate(-cx, -cy);
+				const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, rx);
+				processColorStops(gradientImage.stops, rx).forEach((colorStop) => {
+					gradient.addColorStop(Math.min(1, Math.max(0, colorStop.stop)), asString(colorStop.color));
+				});
+				ctx.fillStyle = gradient;
+				ctx.fillRect(0, 0, width, height);
+				ctx.restore();
+				return canvas;
+			}
+			if (source.type === 5 || source.type === 6) {
+				const gradientImage = source;
+				const cx = getAbsoluteValue(at(gradientImage.position, 0), width);
+				const cy = getAbsoluteValue(at(gradientImage.position, 1), height);
+				const gradient = ctx.createConicGradient(gradientImage.angle - Math.PI / 2, cx, cy);
+				let stops;
+				if (source.type === 6) {
+					const processed = processColorStops(gradientImage.stops, 1);
+					const first = at(processed, 0);
+					const last = at(processed, processed.length - 1);
+					const period = Math.max(last.stop - first.stop, .01);
+					stops = [];
+					const cycles = Math.ceil(1 / period);
+					for (let k = 0; k < cycles; k++) for (const s of processed) {
+						const stop = k * period + (s.stop - first.stop);
+						if (stop > 1) break;
+						stops.push({
+							stop,
+							color: asString(s.color)
+						});
+					}
+					const lastIncluded = at(stops, stops.length - 1);
+					if (lastIncluded && lastIncluded.stop < 1) stops.push({
+						stop: 1,
+						color: lastIncluded.color
+					});
+				} else stops = processColorStops(gradientImage.stops, Math.max(width, height)).map((colorStop) => ({
+					stop: colorStop.stop,
+					color: asString(colorStop.color)
+				}));
+				stops.forEach((s) => {
+					gradient.addColorStop(Math.min(1, Math.max(0, s.stop)), s.color);
+				});
+				ctx.fillStyle = gradient;
+				ctx.fillRect(0, 0, width, height);
+				return canvas;
+			}
+			this.context.logger.warn("Unsupported border-image source; only URL and gradient images are supported");
+			return null;
+		}
+		/**
 		* Filter the already-painted content beneath the element's border box and
 		* paint the result back, approximating CSS backdrop-filter for the
 		* blur/drop-shadow subset supported by parseSimpleFilter.
@@ -12926,9 +13217,6 @@
 	//#endregion
 	//#region src/core/logger.ts
 	var Logger = class {
-		static {
-			this.instances = {};
-		}
 		constructor({ id, enabled }) {
 			this.id = id;
 			this.enabled = enabled;
@@ -12964,6 +13252,9 @@
 	//#endregion
 	//#region src/core/cache-storage.ts
 	var Cache = class {
+		get _evictionEnabled() {
+			return this._evictionSuspendCount === 0;
+		}
 		constructor(context, _options) {
 			this.context = context;
 			this._options = _options;
@@ -12971,6 +13262,7 @@
 			this._pendingOperations = /* @__PURE__ */ new Map();
 			this._deferMode = false;
 			this._collectedUrls = /* @__PURE__ */ new Set();
+			this._evictionSuspendCount = 0;
 			this.maxSize = _options.maxCacheSize ?? 100;
 			if (this.maxSize < 1) throw new Error("Cache maxSize must be at least 1");
 			if (this.maxSize > 1e4) this.context.logger.warn(`Cache maxSize ${this.maxSize} is very large and may cause memory issues. Consider using a smaller value (recommended: 100-1000).`);
@@ -12981,6 +13273,7 @@
 		*/
 		startDefer() {
 			this._deferMode = true;
+			this._evictionSuspendCount++;
 		}
 		/**
 		* Exit defer mode and load all collected URLs in parallel, respecting
@@ -12998,17 +13291,21 @@
 			this._deferMode = false;
 			const urls = Array.from(this._collectedUrls);
 			this._collectedUrls.clear();
-			if (urls.length === 0) return;
-			const limit = Math.max(1, Math.min(concurrency, 100));
-			this.context.logger.debug(`Preloading ${urls.length} image(s) with concurrency ${limit}`);
-			let settled = 0;
-			onProgress?.(0, urls.length);
-			for (let i = 0; i < urls.length; i += limit) {
-				const batch = urls.slice(i, i + limit);
-				const operations = batch.map((url) => this._addImageWithPending(url));
-				await Promise.allSettled(operations);
-				settled += batch.length;
-				onProgress?.(settled, urls.length);
+			try {
+				if (urls.length === 0) return;
+				const limit = Math.max(1, Math.min(concurrency, 100));
+				this.context.logger.debug(`Preloading ${urls.length} image(s) with concurrency ${limit}`);
+				let settled = 0;
+				onProgress?.(0, urls.length);
+				for (let i = 0; i < urls.length; i += limit) {
+					const batch = urls.slice(i, i + limit);
+					const operations = batch.map((url) => this._addImageWithPending(url));
+					await Promise.allSettled(operations);
+					settled += batch.length;
+					onProgress?.(settled, urls.length);
+				}
+			} finally {
+				this._evictionSuspendCount = Math.max(0, this._evictionSuspendCount - 1);
 			}
 		}
 		addImage(src) {
@@ -13075,7 +13372,7 @@
 		*/
 		set(key, value) {
 			if (this._cache.has(key)) this._cache.delete(key);
-			else if (this._cache.size >= this.maxSize) {
+			else if (this._evictionEnabled && this._cache.size >= this.maxSize) {
 				const lruKey = this._cache.keys().next().value;
 				if (lruKey !== void 0) {
 					this._cache.delete(lruKey);