@slidev/cli 52.19.1 → 52.20.0

package/dist/pptx-D2UE590V.mjs

@@ -0,0 +1,1907 @@
+import fs from "node:fs/promises";
+import { dim, yellow } from "ansis";
+import { Buffer } from "node:buffer";
+//#region node/commands/pptx/ir.ts
+const INCHES_PER_PX = 1 / 96;
+/** Points per pixel (72 pt per inch against 96 px per inch), for font size, letter spacing and line height. */
+const PT_PER_PX = .75;
+//#endregion
+//#region node/commands/pptx/build.ts
+/**
+* Extra width beyond the measured glyph bounds: PowerPoint sets the same
+* string slightly wider than Chromium, so a tight single-line box re-wraps.
+* Single-line boxes get the generous value and `wrap: false`; multi-line
+* boxes re-wrap anyway, and widening them pushes into the next column.
+*/
+const SLACK_SINGLE_LINE_PX = 12;
+const SLACK_MULTI_LINE_PX = 2;
+function hex(color) {
+	const channel = (v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0").toUpperCase();
+	return `${channel(color.r)}${channel(color.g)}${channel(color.b)}`;
+}
+/**
+* CSS alpha (0 opaque..1) to PowerPoint transparency (0 opaque..100), or
+* undefined when fully opaque: `pptxgenjs` tests the field for truthiness.
+*/
+function transparency(color) {
+	if (color.a >= 1) return void 0;
+	return Math.round((1 - color.a) * 100);
+}
+/** Canvas pixels to inches, which is what every `pptxgenjs` coordinate wants. */
+function inch(px) {
+	return px * INCHES_PER_PX;
+}
+/** Canvas pixels to points, which is what every `pptxgenjs` type size wants. */
+function pt(px) {
+	return px * PT_PER_PX;
+}
+function runProps(run) {
+	const options = {
+		fontFace: run.fontFamily,
+		fontSize: pt(run.fontSize)
+	};
+	if (run.bold) options.bold = true;
+	if (run.italic) options.italic = true;
+	if (run.strike) options.strike = true;
+	if (run.underline) options.underline = { style: run.underlineStyle ?? "sng" };
+	else if (run.link) options.underline = { style: "none" };
+	if (run.color) {
+		options.color = hex(run.color);
+		const alpha = transparency(run.color);
+		if (alpha !== void 0) options.transparency = alpha;
+	}
+	if (run.letterSpacing) options.charSpacing = pt(run.letterSpacing);
+	if (run.link) options.hyperlink = { url: run.link };
+	if (run.endsParagraph) options.breakLine = true;
+	if (run.breakBefore) options.softBreakBefore = true;
+	return options;
+}
+function addText(slide, node) {
+	const slack = node.lineCount === 1 ? SLACK_SINGLE_LINE_PX : SLACK_MULTI_LINE_PX;
+	let x = node.rect.x;
+	if (node.align === "center") x -= slack / 2;
+	else if (node.align === "right") x -= slack;
+	slide.addText(node.runs.map((run) => ({
+		text: run.text,
+		options: runProps(run)
+	})), {
+		x: inch(x),
+		y: inch(node.rect.y),
+		w: inch(node.rect.w + slack),
+		h: inch(node.rect.h),
+		align: node.align,
+		margin: 0,
+		valign: node.valign ?? "top",
+		fit: "none",
+		isTextBox: true,
+		wrap: node.lineCount > 1,
+		...node.lineCount > 1 ? { lineSpacing: pt(node.lineHeight) } : {}
+	});
+}
+/**
+* One side of a border, as its own filled rectangle: `pptxgenjs` gives a shape
+* one uniform `line`, and `addShape(LINE)` centers its stroke on the geometry,
+* putting half the border outside the element box.
+*/
+function addEdge(slide, shapeType, box, side, border) {
+	const { x, y, w, h } = box.rect;
+	const t = border.width;
+	const rect = side === 0 ? {
+		x,
+		y,
+		w,
+		h: t
+	} : side === 1 ? {
+		x: x + w - t,
+		y,
+		w: t,
+		h
+	} : side === 2 ? {
+		x,
+		y: y + h - t,
+		w,
+		h: t
+	} : {
+		x,
+		y,
+		w: t,
+		h
+	};
+	if (border.style !== "solid") {
+		slide.addShape(shapeType.line, {
+			x: inch(rect.x),
+			y: inch(rect.y),
+			w: inch(side === 0 || side === 2 ? rect.w : 0),
+			h: inch(side === 0 || side === 2 ? 0 : rect.h),
+			line: {
+				color: hex(border.color),
+				transparency: transparency(border.color),
+				width: pt(border.width),
+				dashType: border.style === "dotted" ? "sysDot" : "dash"
+			}
+		});
+		return;
+	}
+	slide.addShape(shapeType.rect, {
+		x: inch(rect.x),
+		y: inch(rect.y),
+		w: inch(rect.w),
+		h: inch(rect.h),
+		fill: {
+			color: hex(border.color),
+			transparency: transparency(border.color)
+		}
+	});
+}
+function sameBorder(a, b) {
+	if (!a || !b) return a === b;
+	return a.width === b.width && a.style === b.style && hex(a.color) === hex(b.color) && a.color.a === b.color.a;
+}
+function addBox(slide, shapeType, node) {
+	const borders = node.borders;
+	const uniform = borders && borders[0] && sameBorder(borders[0], borders[1]) && sameBorder(borders[1], borders[2]) && sameBorder(borders[2], borders[3]);
+	if (!node.fill && !uniform && !node.shadow) {
+		for (const side of [
+			0,
+			1,
+			2,
+			3
+		]) {
+			const border = borders?.[side];
+			if (border && border.width > 0) addEdge(slide, shapeType, node, side, border);
+		}
+		return;
+	}
+	const options = {
+		x: inch(node.rect.x),
+		y: inch(node.rect.y),
+		w: inch(node.rect.w),
+		h: inch(node.rect.h)
+	};
+	if (node.fill) options.fill = {
+		color: hex(node.fill),
+		transparency: transparency(node.fill)
+	};
+	if (uniform && borders[0]) options.line = {
+		color: hex(borders[0].color),
+		width: pt(borders[0].width),
+		dashType: borders[0].style === "solid" ? "solid" : borders[0].style === "dotted" ? "sysDot" : "dash",
+		transparency: transparency(borders[0].color)
+	};
+	if (node.shadow) options.shadow = {
+		type: "outer",
+		blur: pt(node.shadow.blur),
+		offset: pt(node.shadow.offset),
+		angle: node.shadow.angle,
+		color: hex(node.shadow.color),
+		opacity: node.shadow.color.a
+	};
+	if (node.radius) {
+		const shorter = Math.min(node.rect.w, node.rect.h);
+		options.rectRadius = inch(Math.min(node.radius, shorter / 2));
+		slide.addShape(shapeType.roundRect, options);
+	} else slide.addShape(shapeType.rect, options);
+	if (borders && !uniform) for (const side of [
+		0,
+		1,
+		2,
+		3
+	]) {
+		const border = borders[side];
+		if (border && border.width > 0) addEdge(slide, shapeType, node, side, border);
+	}
+}
+function addPicture(slide, node) {
+	const options = {
+		data: node.data,
+		x: inch(node.rect.x),
+		y: inch(node.rect.y),
+		w: inch(node.rect.w),
+		h: inch(node.rect.h)
+	};
+	if (node.kind === "image") {
+		if (node.alt) options.altText = node.alt;
+		if (node.link) options.hyperlink = { url: node.link };
+		if (node.crop) {
+			options.w = inch(node.crop.w);
+			options.h = inch(node.crop.h);
+			options.sizing = {
+				type: "crop",
+				x: inch(node.crop.x),
+				y: inch(node.crop.y),
+				w: inch(node.rect.w),
+				h: inch(node.rect.h)
+			};
+		}
+	} else options.altText = `Rendered as an image because of CSS ${node.reason}`;
+	slide.addImage(options);
+}
+/**
+* Build the deck. The constructor is passed in so the caller keeps its dynamic
+* `import('pptxgenjs')`, which keeps the library off the CLI's startup path.
+*/
+async function buildPptx(Pptx, slides, options) {
+	const pptx = new Pptx();
+	const layoutName = `${options.width}x${options.height}`;
+	pptx.defineLayout({
+		name: layoutName,
+		width: inch(options.width),
+		height: inch(options.height)
+	});
+	pptx.layout = layoutName;
+	pptx.company = "Created using Slidev";
+	if (options.title) pptx.title = options.title;
+	if (options.author) pptx.author = options.author;
+	if (options.subject) pptx.subject = options.subject;
+	for (const ir of slides) {
+		const slide = pptx.addSlide();
+		if (ir.fallbackPng) slide.background = { data: ir.fallbackPng };
+		else {
+			if (ir.background) slide.background = {
+				color: hex(ir.background),
+				transparency: transparency(ir.background)
+			};
+			for (const node of ir.nodes) switch (node.kind) {
+				case "box":
+					addBox(slide, pptx.ShapeType, node);
+					break;
+				case "text":
+					addText(slide, node);
+					break;
+				case "image":
+				case "raster": addPicture(slide, node);
+			}
+		}
+		if (ir.note) slide.addNotes(ir.note);
+	}
+	return await pptx.write({ outputType: "nodebuffer" });
+}
+//#endregion
+//#region node/commands/pptx/capture.ts
+/**
+* The only Playwright glue in the exporter. Rasterization runs as a second phase,
+* after every measurement is in hand, because isolating an element for a screenshot
+* means mutating the DOM of the live app. Only inline `visibility`/`background-color`
+* (no reflow) and the viewport height are touched; width is what `PrintContainer`
+* scales from, so the coordinates the walker measured stay valid here.
+*/
+const ID_ATTRIBUTE = "data-slidev-export-id";
+/** Marks an element this module hid, and remembers what to put back. */
+const RESTORE_ATTRIBUTE = "data-slidev-export-restore";
+/**
+* Cache the document plus every open shadow root on `window`. `isolate` and `restore`
+* both need to see inside shadow roots (Mermaid renders into one), and rescanning the
+* tree per capture is a full walk per picture. Built on first use, after every slide has rendered.
+*/
+async function installRootFinder(page) {
+	await page.evaluate(() => {
+		if (window.__slidevExportRoots) return;
+		let cache;
+		window.__slidevExportRoots = () => {
+			if (cache) return cache;
+			const found = [document];
+			const collect = (root) => {
+				for (const el of Array.from(root.querySelectorAll("*"))) {
+					const shadow = el.shadowRoot;
+					if (shadow) {
+						found.push(shadow);
+						collect(shadow);
+					}
+				}
+			};
+			collect(document);
+			cache = found;
+			return cache;
+		};
+	});
+}
+/**
+* Hide everything except the target and its ancestors. `locator.screenshot()` clips
+* the page to the element's box rather than isolating it, so overlapping content would
+* be captured and then drawn again as shapes. `visibility` rather than `display`:
+* `display: none` reflows and moves the target.
+*/
+async function isolate(page, id, hideDescendants) {
+	return await page.evaluate(({ id, idAttribute, restoreAttribute, hideDescendants }) => {
+		const roots = window.__slidevExportRoots();
+		let target = null;
+		for (const root of roots) {
+			const hit = root.querySelector(`[${idAttribute}="${id}"]`);
+			if (hit) {
+				target = hit;
+				break;
+			}
+		}
+		if (!target) return false;
+		const hide = (el) => {
+			const html = el;
+			html.setAttribute(restoreAttribute, html.style.visibility || "");
+			html.style.visibility = "hidden";
+		};
+		const clear = (el) => {
+			const html = el;
+			html.setAttribute(`${restoreAttribute}-bg`, html.style.backgroundColor || "");
+			html.style.backgroundColor = "transparent";
+		};
+		if (hideDescendants) {
+			for (const child of Array.from(target.children)) hide(child);
+			const html = target;
+			html.setAttribute(`${restoreAttribute}-color`, html.style.color || "");
+			html.style.color = "transparent";
+		}
+		let node = target;
+		for (;;) {
+			const parent = node.parentElement;
+			if (parent) {
+				for (const sibling of Array.from(parent.children)) if (sibling !== node) hide(sibling);
+				clear(parent);
+				node = parent;
+				continue;
+			}
+			const root = node.getRootNode();
+			if (!root || !root.host) break;
+			for (const sibling of Array.from(root.children)) if (sibling !== node) hide(sibling);
+			node = root.host;
+		}
+		return true;
+	}, {
+		id,
+		idAttribute: ID_ATTRIBUTE,
+		restoreAttribute: RESTORE_ATTRIBUTE,
+		hideDescendants
+	});
+}
+/**
+* Put back everything `isolate` hid. Driven off an attribute rather than a remembered
+* list, so it is correct even if a previous restore was interrupted. Runs in a
+* `finally`: a half-hidden deck corrupts every capture after it.
+*/
+async function restore(page) {
+	await page.evaluate((restoreAttribute) => {
+		const roots = window.__slidevExportRoots();
+		const all = (selector) => roots.flatMap((root) => Array.from(root.querySelectorAll(selector)));
+		for (const el of all(`[${restoreAttribute}-bg]`)) {
+			const previous = el.getAttribute(`${restoreAttribute}-bg`) ?? "";
+			const style = el.style;
+			if (previous) style.backgroundColor = previous;
+			else style.removeProperty("background-color");
+			el.removeAttribute(`${restoreAttribute}-bg`);
+		}
+		for (const el of all(`[${restoreAttribute}-color]`)) {
+			const previous = el.getAttribute(`${restoreAttribute}-color`) ?? "";
+			const style = el.style;
+			if (previous) style.color = previous;
+			else style.removeProperty("color");
+			el.removeAttribute(`${restoreAttribute}-color`);
+		}
+		for (const el of all(`[${restoreAttribute}]`)) {
+			const previous = el.getAttribute(restoreAttribute) ?? "";
+			const style = el.style;
+			if (previous) style.visibility = previous;
+			else style.removeProperty("visibility");
+			el.removeAttribute(restoreAttribute);
+		}
+	}, RESTORE_ATTRIBUTE);
+}
+/**
+* Screenshot an element, or return undefined; never throws, since two of the three
+* call sites are fallback paths. `locator.screenshot()` is not used: on a print page
+* far taller than its viewport it returns a region from elsewhere on the page
+* entirely, so the element's live box is read and the page clipped at it instead.
+*/
+async function shoot(page, selector) {
+	try {
+		const locator = page.locator(selector).first();
+		if (!await locator.count()) return void 0;
+		const box = await locator.boundingBox();
+		if (!box || box.width <= 0 || box.height <= 0) return void 0;
+		const scrollY = await page.evaluate(() => window.scrollY);
+		return await shootClip(page, {
+			x: box.x,
+			y: box.y + scrollY,
+			w: box.width,
+			h: box.height
+		});
+	} catch {
+		return;
+	}
+}
+/**
+* Chromium silently truncates captures past roughly twenty thousand CSS pixels, and
+* the print route sizes its viewport to the whole deck, so on a long deck every clip
+* below that point fails. Clips are taken through a short, scrolled viewport instead.
+*/
+const CLIP_VIEWPORT_MIN_HEIGHT = 2e3;
+/**
+* A viewport tall enough to hold the tallest thing being captured: with `canvasWidth: 3840`
+* a single 16:9 slide is 2160 tall, so a fixed height would fail every whole-slide clip.
+*/
+function clipViewportHeight(slides, requests) {
+	const tallest = Math.max(0, ...slides.map((slide) => slide.size.h), ...requests.map((request) => request.clip?.h ?? 0));
+	return Math.max(CLIP_VIEWPORT_MIN_HEIGHT, Math.ceil(tallest) + 200);
+}
+/**
+* Screenshot a rectangle of the document. `clip` is in document coordinates while
+* Playwright reads it as viewport-relative, so the region is scrolled to first and the
+* clip rebased onto the scroll position actually reached. `fullPage` is not an option:
+* on a long deck it asks Chromium for a bitmap large enough to kill the page.
+*/
+async function shootClip(page, clip) {
+	const x = Math.max(0, clip.x);
+	const y = Math.max(0, clip.y);
+	const w = clip.w - (x - clip.x);
+	const h = clip.h - (y - clip.y);
+	if (w <= 0 || h <= 0) return void 0;
+	try {
+		const scrollY = await page.evaluate((top) => {
+			window.scrollTo(0, top);
+			return window.scrollY;
+		}, Math.max(0, y - 1));
+		return `data:image/png;base64,${(await page.screenshot({
+			clip: {
+				x,
+				y: y - scrollY,
+				width: w,
+				height: h
+			},
+			omitBackground: true,
+			timeout: 1e4
+		})).toString("base64")}`;
+	} catch {
+		return;
+	}
+}
+/**
+* Whether a data URI can be embedded as-is. pptxgenjs needs `image/<type>;base64,` and
+* emits nothing for a URL-encoded data URI; SVG is rasterized on this path regardless.
+* Both fall through to a screenshot.
+*/
+function isUsableDataUri(url) {
+	return /^data:image\/(?!svg\+xml)[\w.+-]+;base64,/.test(url);
+}
+/**
+* Fetch an image through `APIRequestContext`, which is not subject to CORS;
+* the in-page route, `canvas.toDataURL()`, throws on a cross-origin image.
+*/
+async function fetchImage(page, url) {
+	if (url.startsWith("data:")) return isUsableDataUri(url) ? url : void 0;
+	try {
+		const response = await page.context().request.get(url, { timeout: 15e3 });
+		if (!response.ok()) return void 0;
+		const type = response.headers()["content-type"]?.split(";")[0] ?? "image/png";
+		if (type.includes("svg")) return void 0;
+		const body = await response.body();
+		return `data:${type};base64,${Buffer.from(body).toString("base64")}`;
+	} catch {
+		return;
+	}
+}
+/**
+* Run every capture through one short, scrollable viewport. Resizing reflows the page,
+* so it happens once around all of them rather than per capture; boxes are read live
+* inside this viewport, so they stay consistent with it.
+*/
+async function throughShortViewport(page, needed, height, fn) {
+	if (!needed) {
+		await fn();
+		return;
+	}
+	const viewport = page.viewportSize();
+	try {
+		if (viewport && viewport.height > height) await page.setViewportSize({
+			width: viewport.width,
+			height
+		});
+		await fn();
+	} finally {
+		if (viewport) await page.setViewportSize(viewport);
+		await page.evaluate(() => window.scrollTo(0, 0));
+	}
+}
+/** Fill in every picture the IR asked for, and shoot whole-slide fallbacks. Mutates `slides` in place. */
+async function capture(page, slides, requests) {
+	const report = {
+		rastersCaptured: 0,
+		rastersFailed: 0,
+		imagesFetched: 0,
+		imagesDropped: 0,
+		isolationMissed: 0,
+		fallbackSlides: []
+	};
+	await installRootFinder(page);
+	const rasterBySource = /* @__PURE__ */ new Map();
+	const imagesBySource = /* @__PURE__ */ new Map();
+	for (const slide of slides) for (const node of slide.nodes) if (node.kind === "raster") {
+		const list = rasterBySource.get(node.sourceId) ?? [];
+		list.push(node);
+		rasterBySource.set(node.sourceId, list);
+	} else if (node.kind === "image") {
+		const list = imagesBySource.get(node.sourceId) ?? [];
+		list.push(node);
+		imagesBySource.set(node.sourceId, list);
+	}
+	const fulfil = async (request) => {
+		let data;
+		try {
+			if (request.isolate && !await isolate(page, request.isolateId ?? request.sourceId, request.hideDescendants)) report.isolationMissed++;
+			data = request.clip ? await shootClip(page, request.clip) : await shoot(page, `[${ID_ATTRIBUTE}="${request.sourceId}"]`);
+		} catch {
+			data = void 0;
+		} finally {
+			if (request.isolate) await restore(page);
+		}
+		for (const node of rasterBySource.get(request.sourceId) ?? []) if (data) {
+			node.data = data;
+			report.rastersCaptured++;
+		} else report.rastersFailed++;
+	};
+	const viewportHeight = clipViewportHeight(slides, requests);
+	await throughShortViewport(page, !!requests.length || !!imagesBySource.size, viewportHeight, async () => {
+		for (const request of requests) await fulfil(request);
+		for (const [sourceId, nodes] of imagesBySource) {
+			let data = await fetchImage(page, nodes[0].data);
+			if (data) report.imagesFetched++;
+			else try {
+				if (!await isolate(page, sourceId, false)) report.isolationMissed++;
+				data = await shoot(page, `[${ID_ATTRIBUTE}="${sourceId}"]`);
+				if (data) report.imagesFetched++;
+			} finally {
+				await restore(page);
+			}
+			if (!data) continue;
+			for (const node of nodes) node.data = data;
+		}
+	});
+	for (const slide of slides) slide.nodes = slide.nodes.filter((node) => {
+		if (node.kind === "raster") return !!node.data;
+		if (node.kind === "image" && !node.data.startsWith("data:")) {
+			report.imagesDropped++;
+			return false;
+		}
+		return true;
+	});
+	await throughShortViewport(page, slides.some((slide) => !!slide.fallbackReason), viewportHeight, async () => {
+		for (const slide of slides) {
+			if (!slide.fallbackReason) continue;
+			const shot = await shoot(page, `[id="${slide.containerId}"]`);
+			if (shot) {
+				slide.fallbackPng = shot;
+				report.fallbackSlides.push({
+					no: slide.no,
+					reason: slide.fallbackReason
+				});
+			} else {
+				report.fallbackSlides.push({
+					no: slide.no,
+					reason: `${slide.fallbackReason}, and the replacement screenshot failed, so the slide is incomplete`
+				});
+				slide.fallbackReason = void 0;
+			}
+		}
+	});
+	return report;
+}
+//#endregion
+//#region node/commands/pptx/color.ts
+function numbers(body) {
+	return body.split(/[\s,/]+/).filter(Boolean).map((token) => {
+		const n = Number.parseFloat(token);
+		return token.endsWith("%") ? n / 100 : n;
+	});
+}
+function srgbChannel(v) {
+	const c = v <= .0031308 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - .055;
+	return Math.max(0, Math.min(255, Math.round(c * 255)));
+}
+/** Oklab to sRGB, per the CSS Color 4 conversion. */
+function oklabToRgb(L, a, b) {
+	const l = (L + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (L - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (L - .0894841775 * a - 1.291485548 * b) ** 3;
+	return [
+		srgbChannel(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s),
+		srgbChannel(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s),
+		srgbChannel(-.0041960863 * l - .7034186147 * m + 1.707614701 * s)
+	];
+}
+function hueToRgb(h, s, l) {
+	const c = (1 - Math.abs(2 * l - 1)) * s;
+	const hp = (h % 360 + 360) % 360 / 60;
+	const x = c * (1 - Math.abs(hp % 2 - 1));
+	const [r, g, b] = hp < 1 ? [
+		c,
+		x,
+		0
+	] : hp < 2 ? [
+		x,
+		c,
+		0
+	] : hp < 3 ? [
+		0,
+		c,
+		x
+	] : hp < 4 ? [
+		0,
+		x,
+		c
+	] : hp < 5 ? [
+		x,
+		0,
+		c
+	] : [
+		c,
+		0,
+		x
+	];
+	const m = l - c / 2;
+	const to255 = (v) => Math.max(0, Math.min(255, Math.round((v + m) * 255)));
+	return [
+		to255(r),
+		to255(g),
+		to255(b)
+	];
+}
+/**
+* A computed CSS color, in any syntax Chromium actually serializes: a theme
+* authored in modern syntax keeps `oklch()`, `color()` or `hsl()` in the
+* computed value, and dropping those loses every fill on the slide.
+*/
+function parseColor(value, unparsed) {
+	if (!value) return void 0;
+	const text = value.trim();
+	if (text === "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	};
+	const fn = text.match(/^([a-z-]+)\(([^)]+)\)$/i);
+	if (!fn) {
+		unparsed?.add(text);
+		return;
+	}
+	const name = fn[1].toLowerCase();
+	if (name === "color") {
+		const tokens = fn[2].trim().split(/[\s,/]+/).filter(Boolean);
+		const channels = numbers(tokens.slice(1).join(" "));
+		if (tokens[0] === "srgb" && channels.length >= 3 && !channels.slice(0, 3).some(Number.isNaN)) return {
+			r: Math.round(channels[0] * 255),
+			g: Math.round(channels[1] * 255),
+			b: Math.round(channels[2] * 255),
+			a: channels.length > 3 && !Number.isNaN(channels[3]) ? channels[3] : 1
+		};
+		unparsed?.add(text);
+		return;
+	}
+	const parts = numbers(fn[2]);
+	if (parts.some(Number.isNaN)) {
+		unparsed?.add(text);
+		return;
+	}
+	const alpha = (index) => parts.length > index ? parts[index] : 1;
+	if (name === "rgb" || name === "rgba") {
+		if (parts.length < 3) return void 0;
+		const channel = (v, raw) => raw.includes("%") ? v * 255 : v;
+		const raw = fn[2].split(/[\s,/]+/).filter(Boolean);
+		return {
+			r: channel(parts[0], raw[0] ?? ""),
+			g: channel(parts[1], raw[1] ?? ""),
+			b: channel(parts[2], raw[2] ?? ""),
+			a: alpha(3)
+		};
+	}
+	if (name === "hsl" || name === "hsla") {
+		if (parts.length < 3) return void 0;
+		const [r, g, b] = hueToRgb(parts[0], parts[1], parts[2]);
+		return {
+			r,
+			g,
+			b,
+			a: alpha(3)
+		};
+	}
+	if (name === "oklch" || name === "oklab") {
+		if (parts.length < 3) return void 0;
+		const L = parts[0];
+		const [a, b] = name === "oklch" ? [parts[1] * Math.cos(parts[2] * Math.PI / 180), parts[1] * Math.sin(parts[2] * Math.PI / 180)] : [parts[1], parts[2]];
+		const [r, g, bb] = oklabToRgb(L, a, b);
+		return {
+			r,
+			g,
+			b: bb,
+			a: alpha(3)
+		};
+	}
+	unparsed?.add(text);
+}
+/** Whether a color contributes any ink at all. */
+function isVisible(color) {
+	return !!color && color.a > 0;
+}
+/**
+* Fold an element's effective opacity into a color's own alpha: DrawingML has
+* no element-level or group opacity, only per-fill alpha. The walker compounds
+* the value down the tree, since CSS `opacity` does not inherit.
+*/
+function withOpacity(color, opacity) {
+	if (!color) return void 0;
+	if (opacity === void 0 || !Number.isFinite(opacity) || opacity >= 1) return color;
+	return {
+		...color,
+		a: color.a * Math.max(0, opacity)
+	};
+}
+//#endregion
+//#region node/commands/pptx/normalize.ts
+/**
+* `RawSnapshot` to `SlideIr`: every judgement in the exporter, in one pure module with
+* no DOM or Playwright access, so each rule is testable from a hand-written fixture.
+* Where a rule looks over-specific, it is a bug that already happened; see `normalize.test.ts`.
+*/
+/**
+* Fraction of the slide that may be rasterized before the whole slide falls back to
+* a picture: past this, a half-vector slide invites editing that will not work.
+*/
+const RASTER_AREA_LIMIT = .6;
+/**
+* Fraction of a line's width kept free so PowerPoint does not re-wrap it: PowerPoint
+* sets the same string a little wider than Chromium, so a shrink-wrapped container
+* gains a wrap. The headroom scales with the line.
+*/
+/**
+* How much loose text a row of chips may hold and still be a row of chips.
+*
+* A separator between keys is punctuation; a sentence carrying inline `<code>`
+* is words, and that stays one editable box.
+*/
+const SEPARATOR_MAX_CHARS = 3;
+const WRAP_HEADROOM = .02;
+const WRAP_HEADROOM_MIN_PX = 4;
+/**
+* CSS `display` values whose children are laid out, not flowed as text.
+*
+* `table-cell` and `table-caption` are excluded: a table lays out its rows and
+* a row its cells, but the CONTENTS of a cell flow like any block, so treating
+* one as a layout container split `<kbd>right</kbd> / <kbd>space</kbd>` into
+* three boxes and left the slash sitting on the first key.
+*
+* `list-item` is absent for the same reason: it flows its children as text,
+* and its ::marker is emitted before they are visited.
+*/
+const LAYOUT_DISPLAY = /^(?:flex|grid|inline-flex|inline-grid|table(?!-cell|-caption))/;
+/**
+* `display` values whose box participates in a line box and whose children flow as
+* text. `inline-flex`, `inline-grid` and `inline-table` are excluded on purpose: they
+* lay their children out as boxes, so a naive `^inline` match would concatenate their cells.
+*/
+const INLINE_DISPLAY = /^(?:inline(?:-block)?$|contents|ruby)/;
+const RASTER_TAGS = {
+	SVG: "svg",
+	CANVAS: "canvas",
+	VIDEO: "media",
+	AUDIO: "media",
+	IFRAME: "iframe"
+};
+function parseLength(value, basis) {
+	if (!value) return 0;
+	const n = Number.parseFloat(value);
+	if (Number.isNaN(n)) return 0;
+	if (value.trim().endsWith("%")) return basis === void 0 ? 0 : n / 100 * basis;
+	return n;
+}
+/**
+* The part of `rect` on the slide, or undefined. Slides are `overflow: hidden`
+* while PowerPoint has no clipping, so an unclamped shape stays on the canvas off
+* the edge; a rect can also run to tens of millions of pixels.
+*/
+function clipToSlide(rect, size) {
+	const x = Math.max(rect.x, 0);
+	const y = Math.max(rect.y, 0);
+	const right = Math.min(rect.x + rect.w, size.w);
+	const bottom = Math.min(rect.y + rect.h, size.h);
+	if (right <= x || bottom <= y) return void 0;
+	return {
+		x,
+		y,
+		w: right - x,
+		h: bottom - y
+	};
+}
+/** Whether two rects share any area at all. */
+function overlaps(a, b) {
+	return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+}
+function borderOf(style, side, unparsed) {
+	const width = parseLength(style[`border${side}Width`]);
+	const lineStyle = style[`border${side}Style`];
+	const color = parseColor(style[`border${side}Color`], unparsed);
+	if (width <= 0 || !lineStyle || lineStyle === "none" || lineStyle === "hidden" || !isVisible(color)) return void 0;
+	return {
+		width,
+		color,
+		style: lineStyle === "dashed" ? "dashed" : lineStyle === "dotted" ? "dotted" : "solid"
+	};
+}
+/**
+* Why this element cannot be drawn as shapes, or undefined if it can. Everything listed
+* lacks a DrawingML primitive; the honest move is one picture at the exact box.
+*/
+function rasterReasonFor(node, style) {
+	if (node.hasForeignObject) return "foreign-object";
+	if (node.isMath) return "math";
+	const tagReason = RASTER_TAGS[node.tag];
+	if (tagReason) return tagReason;
+	if (!style) return void 0;
+	if (style.webkitBackgroundClip === "text") return "background-clip-text";
+	if (style.backgroundImage && style.backgroundImage !== "none") return "background-image";
+	if (style.filter && style.filter !== "none") return "filter";
+	if (style.backdropFilter && style.backdropFilter !== "none") return "backdrop-filter";
+	if (style.mixBlendMode && style.mixBlendMode !== "normal") return "mix-blend-mode";
+	if (style.clipPath && style.clipPath !== "none") return "clip-path";
+	if (style.transform && style.transform !== "none") return "transform";
+	if (style.writingMode && style.writingMode !== "horizontal-tb") return "writing-mode";
+}
+/**
+* Whether a rasterized element needs its siblings hidden during capture: a backdrop has
+* content painted on top of it, which would bake into the picture and be drawn again as
+* shapes. A leaf such as an `<svg>` has nothing on top.
+*/
+function needsIsolation(reason) {
+	return reason === "background-image" || reason === "backdrop-filter" || reason === "filter" || reason === "mix-blend-mode";
+}
+function applyTransform(text, transform) {
+	switch (transform) {
+		case "uppercase": return text.toUpperCase();
+		case "lowercase": return text.toLowerCase();
+		case "capitalize": return text.replace(/\b\p{L}/gu, (c) => c.toUpperCase());
+		default: return text;
+	}
+}
+function resolveLineHeight(style) {
+	const fontSize = parseLength(style.fontSize);
+	if (!style.lineHeight || style.lineHeight === "normal") return fontSize * 1.2;
+	return parseLength(style.lineHeight) || fontSize * 1.2;
+}
+function alignOf(style) {
+	switch (style?.textAlign) {
+		case "center": return "center";
+		case "right":
+		case "end": return "right";
+		case "justify": return "justify";
+		default: return "left";
+	}
+}
+/**
+* CSS keywords rather than typefaces; naming one in the file makes PowerPoint
+* substitute its default silently, so the fallback must skip these as well.
+*/
+const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+	"system-ui",
+	"ui-sans-serif",
+	"ui-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"sans-serif",
+	"serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"math",
+	"emoji",
+	"fangsong",
+	"inherit",
+	"initial",
+	"unset"
+]);
+function fallbackFamily(stack) {
+	for (const raw of stack.split(",")) {
+		const family = raw.trim().replace(/^["']|["']$/g, "").replace(/\s+Variable$/, "");
+		if (!family || family.startsWith("-") || GENERIC_FAMILIES.has(family.toLowerCase())) continue;
+		return family;
+	}
+	return "Arial";
+}
+function runFrom(text, style, fontResolution, unparsed, link, opacity, rule) {
+	const weight = Number(style.fontWeight);
+	const decoration = style.textDecorationLine || "";
+	const family = fontResolution[style.fontFamily] || fallbackFamily(style.fontFamily);
+	const run = {
+		text: applyTransform(text, style.textTransform),
+		fontSize: parseLength(style.fontSize),
+		fontFamily: family
+	};
+	if (weight >= 600) run.bold = true;
+	if (style.fontStyle === "italic" || style.fontStyle === "oblique") run.italic = true;
+	if (decoration.includes("underline")) run.underline = true;
+	else if (rule) {
+		run.underline = true;
+		run.underlineStyle = rule;
+	}
+	if (decoration.includes("line-through")) run.strike = true;
+	const color = withOpacity(parseColor(style.color, unparsed), opacity);
+	if (isVisible(color)) run.color = color;
+	const spacing = parseLength(style.letterSpacing);
+	if (spacing) run.letterSpacing = spacing;
+	if (link) run.link = link;
+	return run;
+}
+function boundsOf(rects) {
+	const x = Math.min(...rects.map((r) => r.x));
+	const y = Math.min(...rects.map((r) => r.y));
+	return {
+		x,
+		y,
+		w: Math.max(...rects.map((r) => r.x + r.w)) - x,
+		h: Math.max(...rects.map((r) => r.y + r.h)) - y
+	};
+}
+/**
+* Group glyph rects into line boxes by vertical overlap, not by equal top: runs of
+* different sizes on the same line align on the baseline, so their tops differ, and
+* sub-pixel layout defeats rounding. A shared line overlaps by more than half the shorter rect.
+*/
+function lineGroups(rects) {
+	const groups = [];
+	for (const rect of [...rects].sort((a, b) => a.y - b.y)) {
+		const current = groups[groups.length - 1];
+		const overlap = current ? Math.min(current.bottom, rect.y + rect.h) - Math.max(current.top, rect.y) : 0;
+		if (current && overlap > .5 * Math.min(rect.h, current.bottom - current.top)) {
+			current.bottom = Math.max(current.bottom, rect.y + rect.h);
+			current.top = Math.min(current.top, rect.y);
+		} else groups.push({
+			top: rect.y,
+			bottom: rect.y + rect.h
+		});
+	}
+	return groups;
+}
+function countLines(rects) {
+	return lineGroups(rects).length;
+}
+/**
+* How far apart the browser actually set the lines, or undefined for one line. The computed
+* `line-height` is too small whenever a heading mixes sizes; the median keeps one
+* unusually tall line from stretching the rest.
+*/
+function measuredLineHeight(rects) {
+	const groups = lineGroups(rects);
+	if (groups.length < 2) return void 0;
+	const gaps = groups.slice(1).map((group, index) => group.top - groups[index].top);
+	gaps.sort((a, b) => a - b);
+	const median = gaps[Math.floor(gaps.length / 2)];
+	return median > 0 ? median : void 0;
+}
+/**
+* The first non-inset `box-shadow`, as PowerPoint's polar form: an angle and a
+* distance. Multiple shadows and inset shadows have no equivalent and are dropped.
+*/
+function parseShadow(value, unparsed) {
+	if (!value || value === "none" || value.includes("inset")) return void 0;
+	const color = parseColor(value.match(/^[a-z-]+\([^)]+\)/i)?.[0], unparsed);
+	if (!isVisible(color)) return void 0;
+	const lengths = [...value.matchAll(/(-?[\d.]+)px/g)].map((m) => Number(m[1]));
+	if (lengths.length < 2) return void 0;
+	const [x, y, blur = 0] = lengths;
+	return {
+		blur,
+		offset: Math.round(Math.hypot(x, y) * 100) / 100,
+		angle: Math.round((Math.atan2(y, x) * 180 / Math.PI + 360) % 360),
+		color
+	};
+}
+/** One slide's `RawNode` tree to its `IrNode` list. Every helper below closes over the per-slide index and accumulators. */
+function buildSlideIr(slide, styles, fontResolution, unparsed) {
+	const byId = /* @__PURE__ */ new Map();
+	const childIndex = /* @__PURE__ */ new Map();
+	let nodes = [];
+	const requests = [];
+	let rasterArea = 0;
+	const pageRects = /* @__PURE__ */ new Map();
+	const boxed = /* @__PURE__ */ new Set();
+	/** Paint layer per emitted node, parallel to `nodes`. */
+	const layers = [];
+	/** Pseudo-element id to the id of the element it belongs to. */
+	const originators = /* @__PURE__ */ new Map();
+	const size = slide.size;
+	for (const node of slide.nodes) {
+		byId.set(node.id, node);
+		const siblings = childIndex.get(node.parent) ?? [];
+		siblings.push(node);
+		childIndex.set(node.parent, siblings);
+	}
+	/**
+	* Where an element paints: CSS puts positioned elements above in-flow content
+	* whatever the document order says. Two tiers and a z-index cover what a slide deck actually does.
+	*/
+	function layerOf(node) {
+		let current = node;
+		while (current) {
+			const style = styleOf(current);
+			if (style && style.position !== "static" && style.position !== "") {
+				const z = Number.parseInt(style.zIndex, 10);
+				return {
+					tier: 1,
+					z: Number.isNaN(z) ? 0 : z
+				};
+			}
+			current = byId.get(current.parent);
+		}
+		return {
+			tier: 0,
+			z: 0
+		};
+	}
+	function push(node, source) {
+		nodes.push(node);
+		layers.push(layerOf(source));
+	}
+	function styleOf(node) {
+		return node.style >= 0 ? styles[node.style] : void 0;
+	}
+	function childrenOf(id) {
+		return childIndex.get(id) ?? [];
+	}
+	/** The nearest ancestor element's style, which is what styles a text node. */
+	function inheritedStyle(node) {
+		let current = node;
+		while (current) {
+			const style = styleOf(current);
+			if (style) return style;
+			current = byId.get(current.parent);
+		}
+	}
+	function linkFor(node) {
+		let current = node;
+		while (current) {
+			if (current.href) return current.href;
+			current = byId.get(current.parent);
+		}
+	}
+	/** Whether an inline element paints something of its own behind its text. */
+	function hasDecoration(node) {
+		const style = styleOf(node);
+		if (!style) return false;
+		if (isVisible(withOpacity(parseColor(style.backgroundColor, unparsed), node.opacity))) return true;
+		return [
+			"Top",
+			"Right",
+			"Bottom",
+			"Left"
+		].some((side) => borderOf(style, side, unparsed));
+	}
+	function isInline(node) {
+		if (node.tag === "#text") return true;
+		const style = styleOf(node);
+		return !!style && INLINE_DISPLAY.test(style.display);
+	}
+	function run() {
+		for (const root of childrenOf(-1)) visit(root);
+		const order = nodes.map((node, index) => ({
+			node,
+			index,
+			layer: layers[index]
+		}));
+		order.sort((a, b) => a.layer.tier - b.layer.tier || a.layer.z - b.layer.z || a.index - b.index);
+		nodes = order.map((entry) => entry.node);
+		const texts = nodes.filter((n) => n.kind === "text");
+		const drawnOver = nodes.filter((n) => n.kind === "text" || n.kind === "image");
+		for (const node of nodes) {
+			if (node.kind !== "raster") continue;
+			if (drawnOver.some((other) => overlaps(other.rect, node.rect))) node.isolate = true;
+			requests.push({
+				sourceId: node.sourceId,
+				isolate: node.isolate,
+				hideDescendants: node.hideDescendants,
+				clip: pageRects.get(node.sourceId),
+				isolateId: originators.get(node.sourceId)
+			});
+			if (texts.some((text) => overlaps(text.rect, node.rect))) continue;
+			const visible = clipToSlide(node.rect, size);
+			if (visible) rasterArea += visible.w * visible.h;
+		}
+		return {
+			nodes,
+			requests,
+			rasterArea,
+			textCount: texts.length
+		};
+	}
+	/** Whether a picture was actually emitted for this element. */
+	function emitRaster(node, reason) {
+		if (node.tag === "::BEFORE" || node.tag === "::AFTER") {
+			pageRects.set(node.id, node.pageRect);
+			originators.set(node.id, node.parent);
+		}
+		const isolate = needsIsolation(reason);
+		const visible = clipToSlide(node.rect, size);
+		if (!visible) return false;
+		const overflows = visible.w !== node.rect.w || visible.h !== node.rect.h;
+		if (overflows && node.pageRect) pageRects.set(node.id, {
+			x: node.pageRect.x + (visible.x - node.rect.x),
+			y: node.pageRect.y + (visible.y - node.rect.y),
+			w: visible.w,
+			h: visible.h
+		});
+		push({
+			kind: "raster",
+			sourceId: node.id,
+			hideDescendants: isolate,
+			rect: overflows ? visible : node.rect,
+			data: "",
+			reason,
+			isolate
+		}, node);
+		return true;
+	}
+	function emitImage(node) {
+		if (!node.src) return;
+		const rect = clipToSlide(node.rect, size);
+		if (!rect) return;
+		const clipped = rect.w !== node.rect.w || rect.h !== node.rect.h;
+		push({
+			kind: "image",
+			sourceId: node.id,
+			rect,
+			data: node.src,
+			alt: node.alt,
+			link: linkFor(node),
+			...clipped ? { crop: {
+				x: rect.x - node.rect.x,
+				y: rect.y - node.rect.y,
+				w: node.rect.w,
+				h: node.rect.h
+			} } : {}
+		}, node);
+	}
+	function emitBox(node, style) {
+		if (boxed.has(node.id)) return;
+		boxed.add(node.id);
+		const fill = withOpacity(parseColor(style.backgroundColor, unparsed), node.opacity);
+		const borders = [
+			borderOf(style, "Top", unparsed),
+			borderOf(style, "Right", unparsed),
+			borderOf(style, "Bottom", unparsed),
+			borderOf(style, "Left", unparsed)
+		];
+		const hasBorder = borders.some(Boolean);
+		const radius = parseLength(style.borderTopLeftRadius, Math.min(node.rect.w, node.rect.h));
+		if (!isVisible(fill) && !hasBorder) return;
+		const shadow = parseShadow(style.boxShadow, unparsed);
+		const boxes = node.fragments?.length ? node.fragments : [node.rect];
+		for (const source of boxes) {
+			const rect = clipToSlide(source, size);
+			if (!rect) continue;
+			const box = {
+				kind: "box",
+				sourceId: node.id,
+				rect
+			};
+			if (isVisible(fill)) box.fill = fill;
+			if (hasBorder) box.borders = borders;
+			if (radius > 0) box.radius = radius;
+			if (shadow) box.shadow = shadow;
+			push(box, node);
+		}
+	}
+	function visit(node) {
+		if (node.tag === "::BEFORE" || node.tag === "::AFTER") {
+			const style = styleOf(node);
+			if (!style) return;
+			const reason = rasterReasonFor(node, style);
+			if (reason && emitRaster(node, reason)) return;
+			emitBox(node, style);
+			if (node.text) push({
+				kind: "text",
+				sourceId: node.id,
+				rect: node.rect,
+				elementRect: node.rect,
+				lineCount: 1,
+				align: alignOf(style),
+				valign: "middle",
+				lineHeight: resolveLineHeight(style),
+				runs: [runFrom(node.text, style, fontResolution, unparsed)]
+			}, node);
+			return;
+		}
+		if (node.tag === "#text") {
+			emitTextGroup([node]);
+			return;
+		}
+		const style = styleOf(node);
+		const reason = rasterReasonFor(node, style);
+		if (reason && emitRaster(node, reason)) {
+			if (!needsIsolation(reason)) return;
+			visitChildren(node);
+			return;
+		}
+		if (style) emitBox(node, style);
+		if (node.tag === "IMG") {
+			emitImage(node);
+			return;
+		}
+		if (node.marker && style) {
+			const markerRect = {
+				x: Math.max(0, node.rect.x - parseLength(style.fontSize) * 1.2),
+				y: node.rect.y,
+				w: parseLength(style.fontSize) * 1.2,
+				h: resolveLineHeight(style)
+			};
+			push({
+				kind: "text",
+				sourceId: node.id,
+				rect: markerRect,
+				elementRect: markerRect,
+				lineCount: 1,
+				align: "left",
+				valign: "middle",
+				lineHeight: resolveLineHeight(style),
+				runs: [runFrom(node.marker, style, fontResolution, unparsed, void 0, node.opacity)]
+			}, node);
+		}
+		visitChildren(node);
+	}
+	function visitChildren(node) {
+		const style = styleOf(node);
+		const children = childrenOf(node.id);
+		if (!children.length) return;
+		if (style && LAYOUT_DISPLAY.test(style.display)) {
+			for (const child of children) visit(child);
+			return;
+		}
+		let group = [];
+		const flush = () => {
+			if (group.length) {
+				emitTextGroup(group);
+				group = [];
+			}
+		};
+		const lineBox = (child) => child.glyphRects?.length ? boundsOf(child.glyphRects) : child.rect;
+		const placed = children.filter((child) => isInline(child) && lineBox(child).h > 0);
+		const oneLine = placed.length > 1 && lineGroups(placed.map(lineBox)).length === 1;
+		const loose = children.filter((child) => child.tag === "#text").map((child) => (child.text ?? "").replace(/\s+/g, "")).join("");
+		const labelRow = oneLine && loose.length <= SEPARATOR_MAX_CHARS && placed.some((child) => hasDecoration(child));
+		for (const child of children) if (isInline(child)) {
+			if (labelRow || hasDecoration(child) && children.length === 1) {
+				flush();
+				emitTextGroup([child], labelRow);
+				continue;
+			}
+			group.push(child);
+		} else {
+			flush();
+			visit(child);
+		}
+		flush();
+	}
+	/** Every text node under an inline subtree, in document order. */
+	function collectText(node, out) {
+		if (node.tag === "#text") {
+			out.push(node);
+			return;
+		}
+		const style = styleOf(node);
+		const reason = rasterReasonFor(node, style);
+		if (reason && emitRaster(node, reason)) return;
+		if (node.tag === "BR") {
+			out.push(node);
+			return;
+		}
+		if (node.tag === "IMG") {
+			emitImage(node);
+			return;
+		}
+		if (style && !isInline(node)) {
+			visit(node);
+			return;
+		}
+		for (const child of childrenOf(node.id)) collectText(child, out);
+	}
+	/**
+	* The underline an inline element draws with `border-bottom`, if that is all
+	* it draws. Slidev rules its links this way.
+	*
+	* Only when the bottom is the only border and there is no fill: anything
+	* more is a box, and a box has to stay a shape.
+	*/
+	function underlineRule(node) {
+		const style = styleOf(node);
+		if (!style || !isInline(node)) return void 0;
+		if (isVisible(parseColor(style.backgroundColor, unparsed))) return void 0;
+		const bottom = borderOf(style, "Bottom", unparsed);
+		if (!bottom) return void 0;
+		for (const side of [
+			"Top",
+			"Right",
+			"Left"
+		]) if (borderOf(style, side, unparsed)) return void 0;
+		return bottom.style === "dashed" ? "dash" : bottom.style === "dotted" ? "dotted" : "sng";
+	}
+	/** The underline rule an ancestor of this text node draws, if any. */
+	function ruleOver(node) {
+		let current = byId.get(node.parent);
+		while (current) {
+			const rule = underlineRule(current);
+			if (rule) return rule;
+			current = byId.get(current.parent);
+		}
+	}
+	function emitTextGroup(group, fragment = false) {
+		for (const node of group) {
+			if (node.tag === "#text") continue;
+			const own = styleOf(node);
+			if (underlineRule(node)) boxed.add(node.id);
+			if (own) emitBox(node, own);
+			forEachDescendant(node, (descendant) => {
+				const style = styleOf(descendant);
+				if (style) emitBox(descendant, style);
+			});
+		}
+		const textNodes = [];
+		for (const node of group) collectText(node, textNodes);
+		if (!textNodes.length) return;
+		const runs = [];
+		const rects = [];
+		/**
+		* Line breaks waiting for the next run; a count, since two consecutive `<br>` need an
+		* empty run between them. Held against the next run so a trailing break does not add an empty last line.
+		*/
+		let pendingBreaks = 0;
+		const addRun = (text, style, node) => {
+			while (pendingBreaks > 1 && runs.length) {
+				runs.push({
+					...runFrom("", style, fontResolution, unparsed, void 0, node.opacity),
+					breakBefore: true
+				});
+				pendingBreaks--;
+			}
+			const newRun = runFrom(text, style, fontResolution, unparsed, linkFor(node), node.opacity, ruleOver(node));
+			if (pendingBreaks && runs.length) newRun.breakBefore = true;
+			pendingBreaks = 0;
+			runs.push(newRun);
+		};
+		for (const textNode of textNodes) {
+			if (textNode.tag === "BR") {
+				pendingBreaks++;
+				continue;
+			}
+			const style = inheritedStyle(textNode);
+			if (!style) continue;
+			const raw = textNode.text ?? "";
+			if (!raw) continue;
+			if (style.whiteSpace.startsWith("pre")) {
+				raw.split("\n").forEach((line, index) => {
+					if (index > 0) pendingBreaks++;
+					if (line) addRun(line, style, textNode);
+				});
+				rects.push(...textNode.glyphRects ?? []);
+				continue;
+			}
+			const text = raw.replace(/\s+/g, " ");
+			if (!text.trim()) {
+				if (runs.length && !runs[runs.length - 1].text.endsWith(" ")) runs[runs.length - 1].text += " ";
+				continue;
+			}
+			addRun(text, style, textNode);
+			rects.push(...textNode.glyphRects ?? [textNode.rect]);
+		}
+		if (!runs.length || !rects.length) return;
+		if (!fragment) runs.forEach((run, index) => {
+			const opensLine = index === 0 || run.breakBefore;
+			const closesLine = index === runs.length - 1 || runs[index + 1]?.breakBefore;
+			if (opensLine) run.text = run.text.replace(/^ +/, "");
+			if (closesLine) run.text = run.text.replace(/ +$/, "");
+		});
+		const container = byId.get(group[0].parent);
+		const containerStyle = container ? styleOf(container) : void 0;
+		const anchorStyle = containerStyle ?? inheritedStyle(textNodes[0]);
+		const glyphs = boundsOf(rects);
+		const lineCount = countLines(rects);
+		/**
+		* The box PowerPoint will wrap inside. Wrapped text's glyph bounds are the width of
+		* the longest line, which guarantees a second, tighter wrap; the browser wrapped
+		* against the container's content box, so reproduce that. Single-line text keeps its exact glyph bounds.
+		*/
+		let rect = glyphs;
+		let align = alignOf(anchorStyle);
+		/** Widen a box that has no room for PowerPoint's wider metrics. */
+		const withHeadroom = (box) => {
+			const headroom = box.w - glyphs.w;
+			const wanted = Math.max(WRAP_HEADROOM_MIN_PX, glyphs.w * WRAP_HEADROOM);
+			if (headroom >= wanted) return box;
+			const extra = wanted - Math.max(0, headroom);
+			return {
+				x: align === "center" ? box.x - extra / 2 : align === "right" ? box.x - extra : box.x,
+				y: box.y,
+				w: box.w + extra,
+				h: box.h
+			};
+		};
+		let valign;
+		if (group.length === 1 && group[0].tag !== "#text" && hasDecoration(group[0])) {
+			rect = group[0].rect;
+			align = "center";
+			valign = "middle";
+		} else if (lineCount > 1 && container && containerStyle) {
+			const left = parseLength(containerStyle.paddingLeft);
+			const right = parseLength(containerStyle.paddingRight);
+			const width = container.rect.w - left - right;
+			if (width > 0) rect = withHeadroom({
+				x: container.rect.x + left,
+				y: glyphs.y,
+				w: width,
+				h: glyphs.h
+			});
+		}
+		if (!clipToSlide(rect, size)) return;
+		push({
+			kind: "text",
+			sourceId: group[0].id,
+			rect,
+			elementRect: container?.rect ?? glyphs,
+			lineCount,
+			align,
+			valign,
+			lineHeight: measuredLineHeight(rects) ?? resolveLineHeight(anchorStyle),
+			runs
+		}, group[0]);
+	}
+	function forEachDescendant(node, fn) {
+		for (const child of childrenOf(node.id)) {
+			if (child.tag !== "#text") fn(child);
+			forEachDescendant(child, fn);
+		}
+	}
+	return run();
+}
+function normalize(snapshot, options) {
+	const unparsedColors = /* @__PURE__ */ new Set();
+	const slides = [];
+	const rasterRequests = [];
+	for (const raw of snapshot.slides) {
+		const { nodes, requests, rasterArea, textCount } = buildSlideIr(raw, snapshot.styles, snapshot.fontResolution, unparsedColors);
+		const ir = {
+			no: raw.no,
+			clickIndex: raw.clickIndex,
+			containerId: raw.containerId,
+			size: raw.size,
+			background: parseColor(raw.background, unparsedColors),
+			nodes,
+			note: options.notes.get(raw.no)
+		};
+		const slideArea = raw.size.w * raw.size.h;
+		if (raw.nodes.some((n) => n.tag === "#text" && (n.text ?? "").trim()) && textCount === 0) ir.fallbackReason = "no text could be recovered from a slide that has text";
+		else if (slideArea > 0 && rasterArea / slideArea > RASTER_AREA_LIMIT) ir.fallbackReason = `${Math.min(100, Math.round(rasterArea / slideArea * 100))}% of the slide had to be rasterized`;
+		if (!ir.fallbackReason) rasterRequests.push(...requests);
+		slides.push(ir);
+	}
+	return {
+		slides,
+		rasterRequests,
+		unparsedColors: [...unparsedColors].sort()
+	};
+}
+//#endregion
+//#region node/commands/pptx/walker.ts
+/**
+* The one function that runs inside the browser. Invariant: zero free variables.
+* Playwright serializes this function's source and evaluates it where none of this
+* module's imports exist, so everything it needs is nested inside it or passed as a
+* parameter; `walker.test.ts` enforces this mechanically. The type-only import above
+* is erased at compile time and is safe.
+*
+* It extracts facts only a live layout engine can supply and makes no decisions;
+* every judgement lives in `normalize.ts`, where it can be unit-tested.
+*/
+function collectSnapshot(options) {
+	const STYLE_KEYS = [
+		"display",
+		"position",
+		"zIndex",
+		"visibility",
+		"opacity",
+		"color",
+		"backgroundColor",
+		"backgroundImage",
+		"fontFamily",
+		"fontSize",
+		"fontWeight",
+		"fontStyle",
+		"textAlign",
+		"textDecorationLine",
+		"textTransform",
+		"letterSpacing",
+		"lineHeight",
+		"whiteSpace",
+		"paddingLeft",
+		"paddingRight",
+		"borderTopWidth",
+		"borderTopStyle",
+		"borderTopColor",
+		"borderRightWidth",
+		"borderRightStyle",
+		"borderRightColor",
+		"borderBottomWidth",
+		"borderBottomStyle",
+		"borderBottomColor",
+		"borderLeftWidth",
+		"borderLeftStyle",
+		"borderLeftColor",
+		"borderTopLeftRadius",
+		"boxShadow",
+		"filter",
+		"backdropFilter",
+		"mixBlendMode",
+		"clipPath",
+		"transform",
+		"writingMode",
+		"webkitBackgroundClip",
+		"top",
+		"right",
+		"bottom",
+		"left",
+		"width",
+		"height",
+		"overflow"
+	];
+	/** Strips the quotes CSS keeps around a `content` or font family value. */
+	const RE_QUOTES = /^["']|["']$/g;
+	const styles = [];
+	const styleIndex = /* @__PURE__ */ new Map();
+	/**
+	* Intern a computed style: `getComputedStyle` exposes several hundred properties,
+	* so serializing a full style per node turns a snapshot into megabytes crossing
+	* the CDP boundary. A few hundred nodes collapse to a few dozen distinct styles.
+	*/
+	function intern(computed) {
+		const record = {};
+		for (const key of STYLE_KEYS) record[key] = computed[key] ?? "";
+		const key = JSON.stringify(record);
+		const existing = styleIndex.get(key);
+		if (existing !== void 0) return existing;
+		const index = styles.length;
+		styles.push(record);
+		styleIndex.set(key, index);
+		return index;
+	}
+	/**
+	* Which family a CSS font stack actually resolves to on this machine, measured by
+	* rendering a probe string and comparing widths: `document.fonts.check()` returns
+	* true for families that do not exist.
+	*/
+	const unplaceablePseudos = [];
+	const fontResolution = {};
+	const probeContext = document.createElement("canvas").getContext("2d");
+	const PROBE = "mmmmmmmmmmlliWWWWWW0Oo";
+	const BASES = [
+		"monospace",
+		"sans-serif",
+		"serif"
+	];
+	const baseWidths = {};
+	for (const base of BASES) {
+		probeContext.font = `72px ${base}`;
+		baseWidths[base] = probeContext.measureText(PROBE).width;
+	}
+	function isAvailable(family) {
+		for (const base of BASES) {
+			probeContext.font = `72px "${family}", ${base}`;
+			if (probeContext.measureText(PROBE).width !== baseWidths[base]) return true;
+		}
+		return false;
+	}
+	const GENERIC = [
+		"system-ui",
+		"ui-sans-serif",
+		"ui-serif",
+		"ui-monospace",
+		"ui-rounded",
+		"sans-serif",
+		"serif",
+		"monospace",
+		"cursive",
+		"fantasy",
+		"math",
+		"emoji",
+		"fangsong",
+		"inherit",
+		"initial",
+		"unset"
+	];
+	function resolveStack(stack) {
+		if (stack in fontResolution) return;
+		for (const raw of stack.split(",")) {
+			const family = raw.trim().replace(RE_QUOTES, "");
+			if (!family) continue;
+			if (GENERIC.includes(family.toLowerCase()) || family.charAt(0) === "-") continue;
+			const cleaned = family.replace(/\s+Variable$/, "");
+			if (isAvailable(family) || isAvailable(cleaned)) {
+				fontResolution[stack] = cleaned;
+				return;
+			}
+		}
+		fontResolution[stack] = "";
+	}
+	/**
+	* The nearest painted background color at or above the slide container; themes
+	* can put `bg-main` on an ancestor rather than on the container itself.
+	*/
+	function backgroundOf(container) {
+		const probe = document.createElement("canvas").getContext("2d");
+		let node = container;
+		while (node) {
+			const color = getComputedStyle(node).backgroundColor;
+			if (color && color !== "transparent") {
+				if (!probe) return color;
+				probe.clearRect(0, 0, 1, 1);
+				probe.fillStyle = color;
+				probe.fillRect(0, 0, 1, 1);
+				if (probe.getImageData(0, 0, 1, 1).data[3] !== 0) return color;
+			}
+			node = node.parentElement;
+		}
+	}
+	/**
+	* The text an ordinary list marker renders, which the DOM never exposes; ordered
+	* lists need the ordinal counted over previous list-item siblings.
+	*/
+	function markerGlyph(el, listStyleType) {
+		const BULLETS = {
+			"disc": "• ",
+			"circle": "◦ ",
+			"square": "▪ ",
+			"disclosure-open": "▾ ",
+			"disclosure-closed": "▸ "
+		};
+		if (listStyleType in BULLETS) return BULLETS[listStyleType];
+		let ordinal = 1;
+		let sibling = el.previousElementSibling;
+		while (sibling) {
+			if (getComputedStyle(sibling).display === "list-item") ordinal++;
+			sibling = sibling.previousElementSibling;
+		}
+		const parent = el.parentElement;
+		const start = parent && parent.tagName.toUpperCase() === "OL" ? Number(parent.getAttribute("start") || "1") : 1;
+		const value = ordinal + (Number.isFinite(start) ? start : 1) - 1;
+		if (listStyleType === "lower-alpha" || listStyleType === "lower-latin") return `${String.fromCharCode(96 + (value - 1) % 26 + 1)}. `;
+		if (listStyleType === "upper-alpha" || listStyleType === "upper-latin") return `${String.fromCharCode(64 + (value - 1) % 26 + 1)}. `;
+		return `${value}. `;
+	}
+	const containers = Array.from(document.querySelectorAll(options.containerSelector));
+	const slides = [];
+	let nextId = 0;
+	for (const container of containers) {
+		const containerRect = container.getBoundingClientRect();
+		if (containerRect.width === 0 || containerRect.height === 0) continue;
+		const parts = (container.id || "").split("-");
+		const no = Number(parts[0]);
+		const clickIndex = Number(parts[1]) - 1;
+		if (!Number.isFinite(no)) continue;
+		const nodes = [];
+		function relative(rect) {
+			return {
+				x: rect.left - containerRect.left,
+				y: rect.top - containerRect.top,
+				w: rect.width,
+				h: rect.height
+			};
+		}
+		function walk(node, parent, fromShadowRoot, inheritedOpacity) {
+			if (node.nodeType === 3) {
+				const text = node.textContent ?? "";
+				if (!text) return;
+				const range = document.createRange();
+				range.selectNodeContents(node);
+				const rects = Array.from(range.getClientRects());
+				range.detach();
+				if (!rects.length) {
+					if (text.trim()) return;
+					nodes.push({
+						id: nextId++,
+						parent,
+						tag: "#text",
+						style: -1,
+						rect: {
+							x: 0,
+							y: 0,
+							w: 0,
+							h: 0
+						},
+						glyphRects: [],
+						text
+					});
+					return;
+				}
+				const bounds = {
+					left: Math.min(...rects.map((r) => r.left)),
+					top: Math.min(...rects.map((r) => r.top)),
+					width: Math.max(...rects.map((r) => r.right)) - Math.min(...rects.map((r) => r.left)),
+					height: Math.max(...rects.map((r) => r.bottom)) - Math.min(...rects.map((r) => r.top))
+				};
+				nodes.push({
+					id: nextId++,
+					parent,
+					tag: "#text",
+					style: -1,
+					rect: relative(bounds),
+					glyphRects: rects.map(relative),
+					text,
+					...inheritedOpacity < 1 ? { opacity: inheritedOpacity } : {}
+				});
+				return;
+			}
+			if (node.nodeType !== 1) return;
+			const el = node;
+			const id = nextId++;
+			const computed = getComputedStyle(el);
+			if (computed.display === "none" || computed.visibility === "hidden") return;
+			const own = Number(computed.opacity);
+			const effectiveOpacity = inheritedOpacity * (Number.isFinite(own) ? own : 1);
+			if (effectiveOpacity === 0) return;
+			el.setAttribute(options.idAttribute, String(id));
+			resolveStack(computed.fontFamily);
+			const box = el.getBoundingClientRect();
+			const record = {
+				id,
+				parent,
+				tag: el.tagName.toUpperCase(),
+				style: intern(computed),
+				rect: relative(box),
+				pageRect: {
+					x: box.left + window.scrollX,
+					y: box.top + window.scrollY,
+					w: box.width,
+					h: box.height
+				}
+			};
+			if (effectiveOpacity < 1) record.opacity = effectiveOpacity;
+			if (computed.display === "inline") {
+				const fragments = Array.from(el.getClientRects());
+				if (fragments.length > 1) record.fragments = fragments.map(relative);
+			}
+			if (fromShadowRoot) record.fromShadowRoot = true;
+			if (el.classList.contains("katex")) record.isMath = true;
+			if (el.tagName.toUpperCase() === "IMG") {
+				record.src = el.currentSrc || el.src;
+				const alt = el.alt;
+				if (alt) record.alt = alt;
+			}
+			if (el.tagName.toUpperCase() === "A") {
+				const href = el.href;
+				if (href) record.href = href;
+			}
+			if (el.tagName.toUpperCase() === "SVG" && el.querySelector("foreignObject")) record.hasForeignObject = true;
+			if (computed.display === "list-item") {
+				const marker = getComputedStyle(el, "::marker");
+				if (marker && marker.content && marker.content !== "none" && marker.content !== "normal") record.marker = marker.content.replace(RE_QUOTES, "");
+				else if (computed.listStyleType !== "none") record.marker = markerGlyph(el, computed.listStyleType);
+			}
+			nodes.push(record);
+			for (const which of ["::before", "::after"]) {
+				const pseudo = getComputedStyle(el, which);
+				if (!pseudo || !pseudo.content || pseudo.content === "none") continue;
+				if (!(pseudo.content !== "normal" || pseudo.backgroundImage && pseudo.backgroundImage !== "none")) continue;
+				if (pseudo.position !== "absolute" || computed.position === "static") {
+					unplaceablePseudos.push(`${el.tagName.toLowerCase()}${which}`);
+					continue;
+				}
+				const own = el.getBoundingClientRect();
+				const width = Number.parseFloat(pseudo.width) || 0;
+				const height = Number.parseFloat(pseudo.height) || 0;
+				if (width <= 0 || height <= 0) {
+					unplaceablePseudos.push(`${el.tagName.toLowerCase()}${which}`);
+					continue;
+				}
+				const px = (value) => Number.parseFloat(value) || 0;
+				const left = pseudo.left === "auto" ? own.width - px(pseudo.right) - width : px(pseudo.left);
+				const top = pseudo.top === "auto" ? own.height - px(pseudo.bottom) - height : px(pseudo.top);
+				const box = {
+					left: own.left + left,
+					top: own.top + top,
+					width,
+					height
+				};
+				const pageRect = {
+					x: box.left + window.scrollX,
+					y: box.top + window.scrollY,
+					w: width,
+					h: height
+				};
+				const text = pseudo.content.replace(RE_QUOTES, "");
+				nodes.push({
+					id: nextId++,
+					parent: id,
+					tag: which === "::before" ? "::BEFORE" : "::AFTER",
+					style: intern(pseudo),
+					rect: relative(box),
+					pageRect,
+					...text && pseudo.content !== "normal" ? { text } : {}
+				});
+			}
+			const shadow = el.shadowRoot;
+			if (shadow) for (const child of Array.from(shadow.childNodes)) walk(child, id, true, effectiveOpacity);
+			for (const child of Array.from(el.childNodes)) walk(child, id, fromShadowRoot, effectiveOpacity);
+		}
+		for (const child of Array.from(container.childNodes)) walk(child, -1, false, 1);
+		slides.push({
+			no,
+			clickIndex: Number.isFinite(clickIndex) ? clickIndex : 0,
+			containerId: container.id,
+			size: {
+				w: containerRect.width,
+				h: containerRect.height
+			},
+			background: backgroundOf(container),
+			nodes
+		});
+	}
+	return {
+		slides,
+		styles,
+		fontResolution,
+		unplaceablePseudos
+	};
+}
+//#endregion
+//#region node/commands/pptx/index.ts
+/**
+* Export the deck as PowerPoint with native shapes and editable text. One
+* navigation covers everything: the print route renders every slide and click
+* step into a single tall page, so there is no per-slide loop here and
+* `--with-clicks` needs no special handling.
+*/
+async function exportPptxEditable(ctx, output) {
+	await ctx.go("print");
+	await ctx.page.addStyleTag({ content: "*, *::before, *::after { animation-play-state: paused !important; transition: none !important; }" });
+	const snapshot = await ctx.page.evaluate(collectSnapshot, {
+		containerSelector: ".print-slide-container",
+		idAttribute: ID_ATTRIBUTE
+	});
+	snapshot.slides = snapshot.slides.filter((slide) => ctx.pages.includes(slide.no));
+	const notes = /* @__PURE__ */ new Map();
+	ctx.slides.forEach((slide, index) => notes.set(index + 1, slide.note));
+	const { slides, rasterRequests, unparsedColors } = normalize(snapshot, { notes });
+	const report = await capture(ctx.page, slides, rasterRequests);
+	const title = ctx.slides[0];
+	const pptxgenjs = await import("pptxgenjs");
+	const buffer = await buildPptx(pptxgenjs.default ?? pptxgenjs, slides, {
+		width: ctx.width,
+		height: ctx.height,
+		title: title?.title,
+		author: title?.frontmatter?.author,
+		subject: title?.frontmatter?.info
+	});
+	const written = output.endsWith(".pptx") ? output : `${output}.pptx`;
+	await fs.writeFile(written, buffer);
+	return {
+		output: written,
+		slideCount: slides.length,
+		fallbackSlides: report.fallbackSlides,
+		imagesDropped: report.imagesDropped,
+		isolationMissed: report.isolationMissed,
+		rastersFailed: report.rastersFailed,
+		unparsedColors,
+		unplaceablePseudos: [...new Set(snapshot.unplaceablePseudos ?? [])].sort(),
+		fontsNamed: [...new Set(Object.values(snapshot.fontResolution).filter(Boolean))].sort()
+	};
+}
+/** Print what the export could not do, after the progress bar has stopped. */
+function reportEditableExport(result) {
+	for (const slide of result.fallbackSlides) console.warn(yellow(`  slide ${slide.no}: exported as an image (${slide.reason})`));
+	if (result.imagesDropped) console.warn(yellow(`  ${result.imagesDropped} image(s) could not be read and were left out`));
+	if (result.rastersFailed) console.warn(yellow(`  ${result.rastersFailed} element(s) could not be captured as a picture and were left out`));
+	if (result.unparsedColors.length) {
+		console.warn(yellow(`  ${result.unparsedColors.length} color value(s) could not be read, so those fills are missing:`));
+		console.warn(dim(`    ${result.unparsedColors.slice(0, 5).join(", ")}`));
+	}
+	if (result.isolationMissed) console.warn(yellow(`  ${result.isolationMissed} picture(s) could not be isolated, so their slide may show doubled text`));
+	if (result.unplaceablePseudos.length) {
+		console.warn(yellow(`  ${result.unplaceablePseudos.length} CSS decoration(s) could not be placed and were left out:`));
+		console.warn(dim(`    ${result.unplaceablePseudos.slice(0, 5).join(", ")}`));
+	}
+	if (result.fontsNamed.length) {
+		console.warn(dim(`  fonts named in this file: ${result.fontsNamed.join(", ")}`));
+		console.warn(dim("  a .pptx names fonts rather than embedding them, so recipients need these installed"));
+	}
+}
+//#endregion
+export { exportPptxEditable, reportEditableExport };