html2canvas-pro 2.5.0 → 2.5.1

package/dist/html2canvas-pro.esm.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
 */
@@ -4743,6 +4743,17 @@ const conicGradient = (context, tokens) => {
 		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) => {
@@ -4795,6 +4806,9 @@ const isRepeatingRadialGradient = (background) => {
 const isConicGradient = (background) => {
 	return background.type === 5;
 };
+const isRepeatingConicGradient = (background) => {
+	return background.type === 6;
+};
 const image = {
 	name: "image",
 	parse: (context, value) => {
@@ -4840,6 +4854,9 @@ const SUPPORTED_IMAGE_FUNCTIONS = {
 	"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
 };
@@ -5328,6 +5345,7 @@ const listStyleImage = {
 	skipCache: true,
 	parse: (context, token) => {
 		if (token.type === 20 && token.value === "none") return null;
+		if (!isSupportedImage(token)) return null;
 		return image.parse(context, token);
 	}
 };
@@ -7772,9 +7790,12 @@ var PseudoContentResolver = class {
 				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));
 			}
 		});
@@ -8116,12 +8137,14 @@ var DocumentCloner = class {
 				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([
@@ -9017,10 +9040,10 @@ const LIST_OWNERS = [
 	"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);
 	}
 };
 /**
@@ -9031,19 +9054,29 @@ const parseNodeTree = (context, node, parent, root) => {
 * 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);
 			}
 		}
 	}
@@ -9071,6 +9104,7 @@ const createsRealStackingContext = (node, container, root) => {
 };
 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
@@ -9490,9 +9524,8 @@ var ElementPaint = class {
 		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,
@@ -9524,7 +9557,7 @@ var ElementPaint = class {
 	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));
@@ -10417,7 +10450,7 @@ var TextRenderer = class {
 				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 = "";
@@ -10567,7 +10600,7 @@ var TextRenderer = class {
 		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;
@@ -10766,6 +10799,7 @@ var BackgroundRenderer = class {
 			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();
 			}
@@ -10816,45 +10850,43 @@ var BackgroundRenderer = class {
 			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
@@ -10904,7 +10936,7 @@ var BackgroundRenderer = class {
 		}
 		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) {
@@ -10961,14 +10993,14 @@ var BackgroundRenderer = class {
 			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,
@@ -11035,6 +11067,65 @@ var BackgroundRenderer = class {
 		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
@@ -11459,6 +11550,13 @@ var BorderImageRenderer = class {
 * - 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.
@@ -11496,6 +11594,7 @@ var EffectsRenderer = class {
 		this.saveAtDepth = -1;
 		this.ctx = deps.ctx;
 		this.pathCallback = pathCallback;
+		this.scale = deps.scale ?? 1;
 	}
 	/**
 	* Apply multiple effects.
@@ -11534,11 +11633,11 @@ var EffectsRenderer = class {
 		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;
 			}
 		}
@@ -11683,8 +11782,8 @@ const paintGradientLayer = (ctx, layer, area) => {
 	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;
@@ -11845,14 +11944,14 @@ function renderFormElements(ctx, textRenderer, pathFn, container, styles) {
 				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();
 		}
@@ -11951,22 +12050,51 @@ async function renderListMarker(ctx, context, textRenderer, paint, container, st
 			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";
+		}
 	}
 }
 /**
@@ -12209,31 +12337,33 @@ var TextClipRenderer = class {
 	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,
@@ -12241,51 +12371,115 @@ var TextClipRenderer = class {
 			}
 		});
 		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
@@ -12330,7 +12524,10 @@ var CanvasRenderer = class CanvasRenderer {
 			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 }
@@ -12338,6 +12535,7 @@ var CanvasRenderer = class CanvasRenderer {
 		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}`);
@@ -12348,8 +12546,9 @@ var CanvasRenderer = class CanvasRenderer {
 			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);
@@ -12365,7 +12564,7 @@ var CanvasRenderer = class CanvasRenderer {
 	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;
@@ -12375,7 +12574,7 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 		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);
@@ -12405,9 +12604,14 @@ var CanvasRenderer = class CanvasRenderer {
 			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) {
@@ -12497,6 +12701,7 @@ var CanvasRenderer = class CanvasRenderer {
 				maskCanvas.height = h;
 				const mctx = maskCanvas.getContext("2d");
 				if (mctx) {
+					mctx.scale(scale, scale);
 					await paintMaskLayers(mctx, [reflect.mask], {
 						maskPosition: [],
 						maskRepeat: [],
@@ -12517,7 +12722,7 @@ var CanvasRenderer = class CanvasRenderer {
 							ctx.scale(1, -1);
 						}
 						ctx.globalCompositeOperation = "destination-in";
-						ctx.drawImage(maskCanvas, 0, 0);
+						ctx.drawImage(maskCanvas, 0, 0, w, h);
 					} finally {
 						ctx.restore();
 					}
@@ -12729,26 +12934,27 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 		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;
 		}
@@ -12816,6 +13022,91 @@ var CanvasRenderer = class CanvasRenderer {
 		}
 	}
 	/**
+	* 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.
@@ -12919,9 +13210,6 @@ var ForeignObjectRenderer = class {
 //#endregion
 //#region src/core/logger.ts
 var Logger = class {
-	static {
-		this.instances = {};
-	}
 	constructor({ id, enabled }) {
 		this.id = id;
 		this.enabled = enabled;
@@ -12957,6 +13245,9 @@ var Logger = class {
 //#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;
@@ -12964,6 +13255,7 @@ var Cache = class {
 		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).`);
@@ -12974,6 +13266,7 @@ var Cache = class {
 	*/
 	startDefer() {
 		this._deferMode = true;
+		this._evictionSuspendCount++;
 	}
 	/**
 	* Exit defer mode and load all collected URLs in parallel, respecting
@@ -12991,17 +13284,21 @@ var Cache = class {
 		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) {
@@ -13068,7 +13365,7 @@ var Cache = class {
 	*/
 	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);