camox 0.43.0 → 0.45.0

package/dist/features/canvas/canvasFrameCapture.js

@@ -0,0 +1,364 @@
+import { BLOCK_OVERLAP_SELECTOR } from "./canvasFrameDocument.js";
+
+//#region src/features/canvas/canvasFrameCapture.ts
+const XHTML = "http://www.w3.org/1999/xhtml";
+const URL_PATTERN = /url\(\s*(["']?)([^"')]+)\1\s*\)/g;
+/**
+* Draws same-origin frames into images, with the browser's own rendering: a frame's content
+* and stylesheets go into an SVG `<foreignObject>`, which the browser lays out and paints like
+* any page. Canvas frames are documents we build, so their stylesheets copy over as text, and
+* nothing is inlined element by element. An SVG drawn as an image loads nothing, so fonts and
+* images are embedded as data URLs, fetched once for every frame the capturer draws.
+*/
+function createFrameCapturer() {
+	const resources = /* @__PURE__ */ new Map();
+	const sheets = /* @__PURE__ */ new Map();
+	function fetchBlob(url) {
+		return fetch(url, {
+			mode: "cors",
+			credentials: "omit"
+		}).then((response) => response.ok ? response.blob() : null).catch(() => null);
+	}
+	function embed(url) {
+		if (url.startsWith("data:")) return Promise.resolve(url);
+		let embedded = resources.get(url);
+		if (!embedded) {
+			embedded = fetchBlob(url).then((blob) => blob && dataUrl(blob));
+			resources.set(url, embedded);
+		}
+		return embedded;
+	}
+	/**
+	* An image at no more than the size it's drawn at, so large photos don't make the browser
+	* decode them in full to draw a small thumbnail. Resizing happens off the main thread.
+	*/
+	function embedImage(url, width, height) {
+		if (url.startsWith("data:") || !width || !height) return embed(url);
+		const key = `${url}#${width}x${height}`;
+		let embedded = resources.get(key);
+		if (!embedded) {
+			embedded = fetchBlob(url).then(async (blob) => {
+				if (!blob) return null;
+				try {
+					const bitmap = await createImageBitmap(blob);
+					const factor = Math.max(width / bitmap.width, height / bitmap.height);
+					if (factor >= 1) {
+						bitmap.close();
+						return dataUrl(blob);
+					}
+					const canvas = new OffscreenCanvas(Math.ceil(bitmap.width * factor), Math.ceil(bitmap.height * factor));
+					const context = canvas.getContext("2d");
+					if (!context) return dataUrl(blob);
+					context.imageSmoothingQuality = "high";
+					context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+					bitmap.close();
+					return dataUrl(await canvas.convertToBlob({
+						type: "image/webp",
+						quality: .9
+					}));
+				} catch {
+					return dataUrl(blob);
+				}
+			});
+			resources.set(key, embedded);
+		}
+		return embedded;
+	}
+	/** A cross-origin stylesheet's text, which its CSSOM doesn't expose. */
+	function sheetText(href) {
+		let text = sheets.get(href);
+		if (!text) {
+			text = fetch(href, {
+				mode: "cors",
+				credentials: "omit"
+			}).then((response) => response.ok ? response.text() : null).catch(() => null);
+			sheets.set(href, text);
+		}
+		return text;
+	}
+	async function embedUrls(css) {
+		const urls = /* @__PURE__ */ new Set();
+		for (const match of css.matchAll(URL_PATTERN)) if (!match[2].startsWith("data:") && !match[2].startsWith("#")) urls.add(match[2]);
+		if (!urls.size) return css;
+		const embedded = /* @__PURE__ */ new Map();
+		await Promise.all(Array.from(urls, async (url) => {
+			const data = await embed(url);
+			if (data) embedded.set(url, data);
+		}));
+		return css.replace(URL_PATTERN, (match, _quote, url) => {
+			const data = embedded.get(url);
+			return data ? `url("${data}")` : match;
+		});
+	}
+	async function collectStyles(doc) {
+		const collected = {
+			rules: [],
+			fontFaces: []
+		};
+		const pending = [];
+		for (const sheet of [...Array.from(doc.styleSheets), ...doc.adoptedStyleSheets]) {
+			if (sheet.disabled) continue;
+			const media = sheet.media.mediaText;
+			const wrap = media && media !== "all" ? (css) => `@media ${media} {${css}}` : noWrap;
+			const base = sheet.href ?? doc.baseURI;
+			let rules;
+			try {
+				rules = sheet.cssRules;
+			} catch {
+				if (!sheet.href) continue;
+				const index = collected.rules.push("") - 1;
+				const href = sheet.href;
+				pending.push(sheetText(href).then((text) => {
+					if (text == null) return;
+					const parsed = new (doc.defaultView ?? window).CSSStyleSheet();
+					parsed.replaceSync(text.replace(/@import[^;]+;/g, ""));
+					const own = {
+						rules: [],
+						fontFaces: []
+					};
+					collectRules(parsed.cssRules, href, own, wrap);
+					collected.rules[index] = own.rules.join("\n");
+					collected.fontFaces.push(...own.fontFaces);
+				}));
+				continue;
+			}
+			collectRules(rules, base, collected, wrap);
+		}
+		await Promise.all(pending);
+		return collected;
+	}
+	/** The `@font-face` rules of faces the frame loaded, each with its first source embedded. */
+	async function embedFonts(doc, fontFaces) {
+		const loaded = [];
+		doc.fonts.forEach((face) => {
+			if (face.status === "loaded") loaded.push(face);
+		});
+		return (await Promise.all(fontFaces.map(async ({ family, css }) => {
+			const faces = loaded.filter((face) => unquote(face.family) === family);
+			if (!faces.length) return "";
+			const range = /unicode-range:\s*([^;]+);/.exec(css)?.[1].replace(/\s/g, "").toUpperCase();
+			const weight = /font-weight:\s*([^;]+);/.exec(css)?.[1].trim();
+			const style = /font-style:\s*([^;]+);/.exec(css)?.[1].trim();
+			if (!faces.some((face) => (!range || face.unicodeRange.replace(/\s/g, "").toUpperCase() === range) && (!weight || face.weight === weight) && (!style || face.style === style))) return "";
+			const source = /src:\s*([^;]+);/.exec(css);
+			const first = source && /url\("([^"]+)"\)(\s*format\([^)]*\))?/.exec(source[1]);
+			if (!source || !first) return css;
+			const data = await embed(first[1]);
+			if (!data) return "";
+			return css.replace(source[0], `src: url("${data}")${first[2] ?? ""};`);
+		}))).filter(Boolean).join("\n");
+	}
+	/** The SVG drawing `doc`'s content at `width` by `height` CSS pixels, at `scale`. */
+	async function documentSvg(doc, width, height, scale, blockOverlap) {
+		const view = doc.defaultView;
+		if (!view || !doc.body) throw new Error("The frame has no document to capture.");
+		const html = doc.documentElement.cloneNode(false);
+		const body = doc.body.cloneNode(true);
+		html.appendChild(body);
+		const originals = doc.body.querySelectorAll("*");
+		const clones = body.querySelectorAll("*");
+		const clonesOf = /* @__PURE__ */ new Map();
+		const fixes = [];
+		for (let index = 0; index < originals.length; index++) {
+			const original = originals[index];
+			const clone = clones[index];
+			clonesOf.set(original, clone);
+			const tag = original.localName;
+			if (tag === "img") {
+				const image = original;
+				const url = image.currentSrc || image.src;
+				clone.removeAttribute("srcset");
+				clone.removeAttribute("sizes");
+				clone.removeAttribute("loading");
+				fixes.push(embedImage(url, Math.ceil(image.clientWidth * scale), Math.ceil(image.clientHeight * scale)).then((data) => data ? clone.setAttribute("src", data) : clone.removeAttribute("src")));
+			} else if (tag === "source" && original.parentElement?.localName === "picture") clone.remove();
+			else if (tag === "iframe") {
+				const frame = original;
+				const replacement = replaceElement(clone, original, "img");
+				replacement.removeAttribute("src");
+				replacement.removeAttribute("srcdoc");
+				const nested = sameOriginDocument(frame);
+				if (nested && frame.clientWidth && frame.clientHeight) fixes.push(documentSvg(nested, frame.clientWidth, frame.clientHeight, scale).then((svg) => replacement.setAttribute("src", svgUrl(svg))).catch(() => {}));
+			} else if (tag === "canvas" || tag === "video") {
+				const replacement = replaceElement(clone, original, "img");
+				replacement.removeAttribute("src");
+				try {
+					const drawn = doc.createElement("canvas");
+					const media = original;
+					drawn.width = "videoWidth" in media ? media.videoWidth : media.width;
+					drawn.height = "videoHeight" in media ? media.videoHeight : media.height;
+					drawn.getContext("2d")?.drawImage(media, 0, 0);
+					replacement.setAttribute("src", drawn.toDataURL());
+				} catch {
+					const poster = original.poster;
+					if (poster) fixes.push(embed(poster).then((data) => data && replacement.setAttribute("src", data)));
+				}
+			} else if (tag === "object" || tag === "embed") replaceElement(clone, original, "div").style.setProperty("display", view.getComputedStyle(original).display);
+			else if (tag === "input") {
+				const input = original;
+				if (input.type === "checkbox" || input.type === "radio") {
+					if (input.checked) clone.setAttribute("checked", "");
+					else clone.removeAttribute("checked");
+				} else clone.setAttribute("value", input.value);
+			} else if (tag === "textarea") clone.textContent = original.value;
+			else if (tag === "option") {
+				if (original.selected) clone.setAttribute("selected", "");
+				else clone.removeAttribute("selected");
+			} else if (tag === "script" || tag === "noscript") clone.remove();
+			const inline = clone.getAttribute("style");
+			if (inline?.includes("url(")) fixes.push(embedUrls(absoluteUrls(inline, doc.baseURI)).then((css) => clone.setAttribute("style", css)));
+		}
+		for (const element of Array.from(body.querySelectorAll("[data-camox-studio]"))) element.remove();
+		freezeAnimations(doc, clonesOf);
+		const background = [doc.documentElement, doc.body].map((element) => view.getComputedStyle(element).backgroundColor).find((color) => color && color !== "rgba(0, 0, 0, 0)");
+		if (blockOverlap !== void 0) html.style.setProperty("--camox-block-overlap", `${blockOverlap}px`);
+		html.style.setProperty("width", `${width}px`);
+		html.style.setProperty("height", `${height}px`);
+		html.style.setProperty("overflow", "hidden", "important");
+		const styles = await collectStyles(doc);
+		const rules = styles.rules.join("\n").replace(/:root\b/g, "html");
+		const [fonts, css] = await Promise.all([
+			embedFonts(doc, styles.fontFaces),
+			embedUrls(rules),
+			Promise.all(fixes)
+		]);
+		const style = doc.createElementNS(XHTML, "style");
+		style.textContent = `${fonts}\n${css}`;
+		const head = doc.createElementNS(XHTML, "head");
+		head.appendChild(style);
+		html.insertBefore(head, body);
+		const markup = new XMLSerializer().serializeToString(html);
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">` + (background ? `<rect width="100%" height="100%" fill="${background}"/>` : "") + `<foreignObject x="0" y="0" width="100%" height="100%">${markup}</foreignObject></svg>`;
+	}
+	/**
+	* Draws a same-origin frame, as its content is now, at `scale` times its CSS size. Its
+	* animations are frozen where they are.
+	*/
+	async function capture(frame, { scale, blockOverlap }) {
+		const doc = sameOriginDocument(frame);
+		const width = frame.offsetWidth;
+		let height = frame.offsetHeight;
+		if (!doc || !width || !height) throw new Error("The frame can't be captured.");
+		const overlap = blockOverlapOf(doc);
+		if (blockOverlap !== void 0 && blockOverlap !== overlap) height += doc.querySelectorAll(BLOCK_OVERLAP_SELECTOR).length * (overlap - blockOverlap);
+		const svg = await documentSvg(doc, width, height, scale, blockOverlap);
+		const image = new Image();
+		image.src = svgUrl(svg);
+		await image.decode();
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.round(width * scale));
+		canvas.height = Math.max(1, Math.round(height * scale));
+		const context = canvas.getContext("2d");
+		if (!context) throw new Error("The frame can't be drawn.");
+		context.imageSmoothingQuality = "high";
+		context.drawImage(image, 0, 0, canvas.width, canvas.height);
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/webp", .92));
+		if (!blob) throw new Error("The frame's capture can't be encoded.");
+		return {
+			blob,
+			width,
+			height
+		};
+	}
+	return { capture };
+}
+const noWrap = (css) => css;
+function collectRules(rules, base, collected, wrap) {
+	for (const rule of Array.from(rules)) {
+		if ("styleSheet" in rule) {
+			const imported = rule;
+			if (!imported.styleSheet) continue;
+			let inner = wrap;
+			const media = imported.media.mediaText;
+			if (media) inner = wrapIn(inner, `@media ${media}`);
+			if (imported.layerName != null) inner = wrapIn(inner, `@layer ${imported.layerName}`);
+			try {
+				collectRules(imported.styleSheet.cssRules, imported.styleSheet.href ?? base, collected, inner);
+			} catch {}
+			continue;
+		}
+		if (rule.cssText.trimStart().startsWith("@font-face")) {
+			const family = unquote(rule.style.getPropertyValue("font-family"));
+			collected.fontFaces.push({
+				family,
+				css: wrap(absoluteUrls(rule.cssText, base))
+			});
+			continue;
+		}
+		collected.rules.push(wrap(absoluteUrls(rule.cssText, base)));
+	}
+}
+function wrapIn(wrap, at) {
+	return (css) => wrap(`${at} {${css}}`);
+}
+function absoluteUrls(css, base) {
+	return css.replace(URL_PATTERN, (match, _quote, url) => {
+		if (url.startsWith("data:") || url.startsWith("#")) return match;
+		try {
+			return `url("${new URL(url, base).href}")`;
+		} catch {
+			return match;
+		}
+	});
+}
+function unquote(value) {
+	return value.replace(/["']/g, "").trim();
+}
+function sameOriginDocument(frame) {
+	try {
+		return frame.contentDocument?.body ? frame.contentDocument : null;
+	} catch {
+		return null;
+	}
+}
+function replaceElement(clone, original, tag) {
+	const replacement = clone.ownerDocument.createElementNS(XHTML, tag);
+	for (const attribute of Array.from(original.attributes)) replacement.setAttribute(attribute.name, attribute.value);
+	clone.replaceWith(replacement);
+	return replacement;
+}
+/** CSS animations stop at their current time; scripted ones keep their current look. */
+function freezeAnimations(doc, clonesOf) {
+	const view = doc.defaultView;
+	if (!view) return;
+	const byElement = /* @__PURE__ */ new Map();
+	for (const animation of doc.getAnimations()) {
+		const effect = animation.effect;
+		if (!effect?.target || effect.pseudoElement) continue;
+		byElement.set(effect.target, [...byElement.get(effect.target) ?? [], animation]);
+	}
+	for (const [element, animations] of byElement) {
+		const clone = clonesOf.get(element);
+		if (!clone) continue;
+		const computed = view.getComputedStyle(element);
+		if (animations.some((animation) => "animationName" in animation)) {
+			const delays = computed.animationName.split(",").map((name) => {
+				const animation = animations.find((candidate) => candidate.animationName === name.trim());
+				return `${-(Number(animation?.currentTime) || 0)}ms`;
+			});
+			clone.style.setProperty("animation-delay", delays.join(", "), "important");
+			clone.style.setProperty("animation-play-state", "paused", "important");
+		}
+		if (animations.some((animation) => !("animationName" in animation) && !("transitionProperty" in animation))) {
+			clone.style.setProperty("transform", computed.transform, "important");
+			clone.style.setProperty("opacity", computed.opacity, "important");
+		}
+	}
+}
+function blockOverlapOf(doc) {
+	return parseFloat(doc.documentElement.style.getPropertyValue("--camox-block-overlap")) || 0;
+}
+function svgUrl(svg) {
+	return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+function dataUrl(blob) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(reader.result);
+		reader.onerror = () => reject(reader.error);
+		reader.readAsDataURL(blob);
+	});
+}
+
+//#endregion
+export { createFrameCapturer };

package/dist/features/canvas/canvasFrameDocument.js

@@ -0,0 +1,317 @@
+import { PREVIEW_PAUSED_ATTRIBUTE } from "../../core/lib/previewPaused.js";
+import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "../preview/components/previewStyles.js";
+
+//#region src/features/canvas/canvasFrameDocument.ts
+/** Freezes CSS animations, including ones that start while the frame is paused. */
+const PAUSED_ANIMATIONS_STYLE = `html[${PREVIEW_PAUSED_ATTRIBUTE}] *, html[${PREVIEW_PAUSED_ATTRIBUTE}] *::before, html[${PREVIEW_PAUSED_ATTRIBUTE}] *::after { animation-play-state: paused !important; }`;
+/** Set by the camera on elements that hold Canvas frames: see `canvasBlockOverlap`. */
+const BLOCK_OVERLAP_ATTRIBUTE = "data-canvas-block-overlap";
+const BLOCK = "[data-camox-viewport-block]";
+/** Every block after the first, in its container or a later one, covers the end of the one before. */
+const BLOCK_OVERLAP_SELECTOR = `:is(${BLOCK}, :has(${BLOCK})) ~ ${BLOCK}, :is(${BLOCK}, :has(${BLOCK})) ~ * ${BLOCK}`;
+const BLOCK_OVERLAP_STYLE = `${BLOCK_OVERLAP_SELECTOR} { margin-top: calc(-1 * var(--camox-block-overlap, 0px)); }`;
+/**
+* How far, in CSS pixels, each block in a Canvas frame overlaps the one before it.
+* Where two blocks meet partway through a screen pixel, each covers only part of
+* it, and whatever is under both (the site's background, often unlike either
+* block) shows through as a light seam. Zoomed out, an overlap of at least a
+* device pixel covers it, at the cost of about as much of a block's bottom edge. From
+* 100%, where seams are rare, borders stay exact. Powers of two change a page's
+* height only at a few zooms.
+*/
+function canvasBlockOverlap(scale, pixelRatio) {
+	if (scale >= 1) return 0;
+	return 2 ** Math.max(0, Math.ceil(Math.log2(1 / (scale * pixelRatio))));
+}
+function canvasPageHref(input) {
+	return new URL(`${input.runtimeBasePath.replace(/\/$/, "")}/${input.pathname.replace(/^\//, "")}`, input.href).href;
+}
+/** Only whole viewport height declarations, not arbitrary values, calc(), or media queries. */
+function logicalViewportValue(value) {
+	const trimmed = value.trim();
+	return /^100(?:s|l|d)?vh$/i.test(trimmed) ? `var(--camox-viewport-height, ${trimmed})` : null;
+}
+/**
+* The top-level rule count of each sheet once all of it has been adapted. Every
+* measurement adapts, so a sheet is only walked again once rules are inserted
+* into or removed from it, as CSS-in-JS libraries do. Replacing a style
+* element's text creates a new sheet.
+*/
+const adaptedRuleCounts = /* @__PURE__ */ new WeakMap();
+/** Mutate this iframe's CSSOM in place so layers, breakpoints and !important keep their order. */
+function adaptCanvasStyleSheets(doc) {
+	const visited = /* @__PURE__ */ new Set();
+	/** Whether the sheet is settled: false while one of its imports is still loading. */
+	function visitSheet(sheet) {
+		if (visited.has(sheet)) return true;
+		visited.add(sheet);
+		try {
+			const rules = sheet.cssRules;
+			if (adaptedRuleCounts.get(sheet) === rules.length) return true;
+			const settled = visitRules(rules);
+			if (settled) adaptedRuleCounts.set(sheet, rules.length);
+			return settled;
+		} catch {
+			return true;
+		}
+	}
+	function visitRules(rules) {
+		let settled = true;
+		for (const rule of Array.from(rules)) {
+			if ("style" in rule) {
+				const style = rule.style;
+				for (const property of [
+					"height",
+					"min-height",
+					"max-height"
+				]) {
+					const replacement = logicalViewportValue(style.getPropertyValue(property));
+					if (replacement) style.setProperty(property, replacement, style.getPropertyPriority(property));
+				}
+			}
+			if ("cssRules" in rule && !visitRules(rule.cssRules)) settled = false;
+			if ("styleSheet" in rule) {
+				const imported = rule.styleSheet;
+				if (!imported || !visitSheet(imported)) settled = false;
+			}
+		}
+		return settled;
+	}
+	for (const sheet of [...Array.from(doc.styleSheets), ...Array.from(doc.adoptedStyleSheets ?? [])]) visitSheet(sheet);
+}
+/** Build before loading so relative styles/images resolve against the page, never /_camox/canvas. */
+function createCanvasDocument(previewDocument, href) {
+	const doc = new DOMParser().parseFromString(previewDocument ?? "<!doctype html><html><head></head><body><div id=\"root\" data-camox-preview-root></div></body></html>", "text/html");
+	if (!previewDocument) {
+		for (const style of document.head.querySelectorAll("style, link[rel=\"stylesheet\"]")) if (isSiteStyle(style)) doc.head.appendChild(style.cloneNode(true));
+	}
+	doc.querySelectorAll("base").forEach((base) => base.remove());
+	const base = doc.createElement("base");
+	base.href = href;
+	doc.head.insertBefore(base, doc.head.firstChild);
+	doc.querySelectorAll("script").forEach((script) => script.remove());
+	doc.querySelector("[data-camox-preview-root]")?.replaceChildren();
+	doc.documentElement.style.setProperty("overscroll-behavior", "none");
+	doc.body.style.setProperty("overscroll-behavior", "none");
+	const paused = doc.createElement("style");
+	paused.textContent = PAUSED_ANIMATIONS_STYLE;
+	doc.head.appendChild(paused);
+	return `<!doctype html>${doc.documentElement.outerHTML}`;
+}
+/**
+* Give a loaded document what `createCanvasDocument` builds into a Canvas frame's,
+* for as long as it shows in the Canvas: no swipe navigation, CSS animations that
+* pause with the frame, and a page as tall as its content. Returns how to undo
+* all of it, so the document can fill the Preview again.
+*/
+function adoptCanvasDocument(iframe, root, viewportHeight) {
+	const doc = root.ownerDocument;
+	const paused = doc.createElement("style");
+	paused.textContent = PAUSED_ANIMATIONS_STYLE;
+	doc.head.appendChild(paused);
+	const restored = [doc.documentElement, doc.body].map((element) => ({
+		element,
+		overscroll: element.style.getPropertyValue("overscroll-behavior"),
+		overflow: element.style.getPropertyValue("overflow"),
+		overflowPriority: element.style.getPropertyPriority("overflow")
+	}));
+	for (const { element } of restored) element.style.setProperty("overscroll-behavior", "none");
+	const stopObserving = observeCanvasDocument(iframe, root, viewportHeight);
+	return () => {
+		stopObserving();
+		paused.remove();
+		for (const { element, overscroll, overflow, overflowPriority } of restored) {
+			element.style.setProperty("overscroll-behavior", overscroll);
+			element.style.setProperty("overflow", overflow, overflowPriority);
+		}
+		doc.documentElement.style.removeProperty("--camox-viewport-height");
+		iframe.style.removeProperty("height");
+	};
+}
+function isMedia(target) {
+	const name = target?.localName;
+	return name === "video" || name === "audio";
+}
+/**
+* Pause a frame's document: its animations, transitions and media, including
+* media that starts playing while paused. JavaScript-driven animations are up
+* to blocks, which can watch the document's paused attribute. Returns how to
+* resume exactly what it paused.
+*/
+function pauseCanvasDocument(doc) {
+	doc.documentElement.setAttribute(PREVIEW_PAUSED_ATTRIBUTE, "");
+	const animations = [];
+	for (const animation of doc.getAnimations?.() ?? []) {
+		if ("animationName" in animation || animation.playState !== "running") continue;
+		animation.pause();
+		animations.push(animation);
+	}
+	const media = /* @__PURE__ */ new Set();
+	const pauseMedia = (element) => {
+		if (element.paused) return;
+		element.pause();
+		media.add(element);
+	};
+	doc.querySelectorAll("video, audio").forEach((element) => {
+		if (isMedia(element)) pauseMedia(element);
+	});
+	const onPlay = (event) => {
+		if (isMedia(event.target)) pauseMedia(event.target);
+	};
+	doc.addEventListener("play", onPlay, true);
+	return () => {
+		doc.removeEventListener("play", onPlay, true);
+		doc.documentElement.removeAttribute(PREVIEW_PAUSED_ATTRIBUTE);
+		for (const animation of animations) if (animation.playState === "paused") animation.play();
+		for (const element of media) if (element.isConnected && element.paused) element.play().catch(() => {});
+	};
+}
+/**
+* The stylesheets of a site document's head, which shape how any content
+* renders in it. Pages of a site share them, while their titles, metadata and
+* preloads differ.
+*/
+function canvasDocumentStyles(previewDocument) {
+	if (!previewDocument) return "";
+	const doc = new DOMParser().parseFromString(previewDocument, "text/html");
+	return Array.from(doc.head.querySelectorAll("style, link[rel=\"stylesheet\"]")).map((style) => style.outerHTML).join("\n");
+}
+function measureCanvasDocument(iframe, root, baseline, fit = "page") {
+	const doc = root.ownerDocument;
+	adaptCanvasStyleSheets(doc);
+	iframe.style.height = `${baseline}px`;
+	const bodyRect = doc.body.getBoundingClientRect();
+	const rootRect = root.getBoundingClientRect();
+	if (fit === "content") {
+		const height = exactBottom(rootRect.bottom, root.scrollHeight + rootRect.top);
+		iframe.style.height = `${Math.max(1, height)}px`;
+		return;
+	}
+	const height = exactBottom(Math.max(rootRect.bottom, bodyRect.bottom), doc.body.scrollHeight + bodyRect.top, doc.documentElement.scrollHeight, root.scrollHeight + rootRect.top);
+	iframe.style.height = `${Math.max(baseline, height)}px`;
+}
+/**
+* The bottom of a document's content, from its boxes' exact, often fractional,
+* bottom. A frame any taller shows a sliver of the document's own background
+* under the last block, which a scaled Canvas can draw as a bright line. Scroll
+* heights are rounded to whole pixels, so they only count where content
+* overflows past those boxes.
+*/
+function exactBottom(boxesBottom, ...scrollBottoms) {
+	const scrollBottom = Math.max(...scrollBottoms);
+	return scrollBottom > boxesBottom + 1 ? scrollBottom : boxesBottom;
+}
+/**
+* Re-measure at a fixed baseline, not at the previous full-page height: document scrollHeight
+* is at least viewport height and therefore cannot shrink an already expanded iframe.
+*
+* While `suspended` (a resting frame, whose content is hidden), the frame keeps its size.
+* Once `resume` is called, it re-measures only if its content or size changed meanwhile.
+*/
+function observeCanvasDocument(iframe, root, viewportHeight, fit = "page", suspended = () => false) {
+	const doc = root.ownerDocument;
+	const baseline = Math.max(1, viewportHeight);
+	doc.documentElement.style.setProperty("--camox-viewport-height", `${baseline}px`);
+	doc.documentElement.style.setProperty("overflow", "hidden", "important");
+	doc.body.style.setProperty("overflow", "hidden", "important");
+	const overlapStyle = doc.createElement("style");
+	overlapStyle.textContent = BLOCK_OVERLAP_STYLE;
+	doc.head.appendChild(overlapStyle);
+	const followOverlap = () => {
+		const overlap = iframe.closest(`[${BLOCK_OVERLAP_ATTRIBUTE}]`);
+		const pixels = Number(overlap?.getAttribute(BLOCK_OVERLAP_ATTRIBUTE)) || 0;
+		doc.documentElement.style.setProperty("--camox-block-overlap", `${pixels}px`);
+	};
+	followOverlap();
+	const overlapChanges = new MutationObserver(followOverlap);
+	overlapChanges.observe(iframe.ownerDocument.documentElement, {
+		subtree: true,
+		attributes: true,
+		attributeFilter: [BLOCK_OVERLAP_ATTRIBUTE]
+	});
+	let frame = 0;
+	let disposed = false;
+	const sizes = /* @__PURE__ */ new Map();
+	const size = (element) => {
+		const rect = element.getBoundingClientRect();
+		return `${rect.width}:${rect.height}`;
+	};
+	const resize = new ResizeObserver((entries) => {
+		if (entries.some(({ target }) => sizes.get(target) !== size(target))) schedule();
+	});
+	function measure() {
+		frame = 0;
+		if (suspended()) return;
+		measureCanvasDocument(iframe, root, baseline, fit);
+		const elements = /* @__PURE__ */ new Set([
+			doc.body,
+			root,
+			...root.querySelectorAll("*")
+		]);
+		for (const element of sizes.keys()) {
+			if (elements.has(element)) continue;
+			resize.unobserve(element);
+			sizes.delete(element);
+		}
+		for (const element of elements) {
+			if (!sizes.has(element)) resize.observe(element);
+			sizes.set(element, size(element));
+		}
+	}
+	function schedule() {
+		if (disposed || frame) return;
+		frame = requestAnimationFrame(measure);
+	}
+	let changedWhileSuspended = false;
+	function contentChanged() {
+		if (suspended()) changedWhileSuspended = true;
+		schedule();
+	}
+	const isUnsizedChange = (record) => record.type === "attributes" && (root.contains(record.target) || record.attributeName === "data-camox-paused");
+	const mutations = new MutationObserver((records) => {
+		if (!records.every(isUnsizedChange)) contentChanged();
+	});
+	mutations.observe(root, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		characterData: true
+	});
+	mutations.observe(doc.head, {
+		subtree: true,
+		childList: true,
+		attributes: true,
+		characterData: true
+	});
+	mutations.observe(doc.documentElement, { attributes: true });
+	mutations.observe(doc.body, { attributes: true });
+	doc.addEventListener("load", contentChanged, true);
+	doc.addEventListener("error", contentChanged, true);
+	doc.fonts?.addEventListener("loadingdone", contentChanged);
+	doc.fonts?.ready.then(contentChanged);
+	measure();
+	const resume = () => {
+		if (disposed) return;
+		requestAnimationFrame(() => {
+			if (suspended()) return;
+			if (changedWhileSuspended || [doc.body, root].some((el) => sizes.get(el) !== size(el))) schedule();
+			changedWhileSuspended = false;
+		});
+	};
+	const stop = () => {
+		disposed = true;
+		cancelAnimationFrame(frame);
+		resize.disconnect();
+		mutations.disconnect();
+		overlapChanges.disconnect();
+		overlapStyle.remove();
+		doc.documentElement.style.removeProperty("--camox-block-overlap");
+		doc.removeEventListener("load", contentChanged, true);
+		doc.removeEventListener("error", contentChanged, true);
+		doc.fonts?.removeEventListener("loadingdone", contentChanged);
+	};
+	return Object.assign(stop, { resume });
+}
+
+//#endregion
+export { BLOCK_OVERLAP_SELECTOR, adaptCanvasStyleSheets, adoptCanvasDocument, canvasBlockOverlap, canvasDocumentStyles, canvasPageHref, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument };