@bejamas/bench 0.0.0-canary.1d776cdf

package/dist/summary-063R0d9g.js

@@ -0,0 +1,1510 @@
+import { createRequire } from "node:module";
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { Launcher } from "chrome-launcher";
+import { gzipSync } from "node:zlib";
+import pixelmatch from "pixelmatch";
+import { PNG } from "pngjs";
+import kleur from "kleur";
+
+//#region package.json
+var name = "@bejamas/bench";
+var version = "0.0.0-canary.1d776cdf";
+
+//#endregion
+//#region src/artifacts.ts
+/**
+* Report files are opt-in. Without a directory there is no writer, so callers
+* use `artifacts?.write(path, encode())`, which also skips the encoding.
+*/
+function createArtifacts(outDir) {
+	if (!outDir) return void 0;
+	const dir = resolve(outDir);
+	mkdirSync(dir, { recursive: true });
+	return {
+		dir,
+		write(path, data) {
+			const file = join(dir, path);
+			mkdirSync(dirname(file), { recursive: true });
+			writeFileSync(file, data);
+			return file;
+		}
+	};
+}
+
+//#endregion
+//#region src/errors.ts
+/** An expected failure with a message that is safe to print without a stack. */
+var BenchError = class extends Error {
+	name = "BenchError";
+};
+
+//#endregion
+//#region src/browser.ts
+function resolveChromePath(explicit) {
+	const chromePath = explicit ?? process.env.CHROME_PATH ?? Launcher.getFirstInstallation();
+	if (!chromePath) throw new BenchError("Google Chrome was not found. Install Chrome, pass --chrome-path or set CHROME_PATH.");
+	return chromePath;
+}
+async function launchBrowser(chromePath) {
+	const { chromium } = await import("playwright-core");
+	return chromium.launch({
+		executablePath: chromePath,
+		headless: true
+	});
+}
+/**
+* Load a page until the network is idle, then scroll through it so lazy images
+* and scroll-triggered content render before anything is measured.
+*/
+async function loadPage(page, url, timeout) {
+	await page.goto(url, {
+		waitUntil: "networkidle",
+		timeout
+	});
+	await page.evaluate(async () => {
+		const step = Math.max(200, Math.floor(window.innerHeight * .8));
+		const pause = () => new Promise((resolve) => setTimeout(resolve, 50));
+		const limit = 1e5;
+		for (let y = 0; y < Math.min(document.documentElement.scrollHeight, limit); y += step) {
+			window.scrollTo(0, y);
+			await pause();
+		}
+		window.scrollTo(0, 0);
+		await document.fonts.ready;
+	});
+	await page.waitForLoadState("networkidle", { timeout }).catch(() => {});
+}
+
+//#endregion
+//#region src/format.ts
+function formatBytes(bytes) {
+	if (bytes === null) return "–";
+	if (Math.abs(bytes) < 1024) return `${bytes} B`;
+	return `${(bytes / 1024).toFixed(2)} KiB`;
+}
+function formatMs(value) {
+	if (value === null) return "–";
+	return value >= 1e3 ? `${(value / 1e3).toFixed(2)} s` : `${value.toFixed(0)} ms`;
+}
+function formatDelta(original, ported, format) {
+	if (original === null || ported === null) return "–";
+	const delta = ported - original;
+	if (delta === 0) return "±0";
+	const sign = delta > 0 ? "+" : "−";
+	const relative = original === 0 ? "" : ` (${sign}${Math.abs(delta / original * 100).toFixed(1)}%)`;
+	return `${sign}${format(Math.abs(delta))}${relative}`;
+}
+function truncate(value, length) {
+	return value.length > length ? `${value.slice(0, length - 1)}…` : value;
+}
+
+//#endregion
+//#region src/stats.ts
+function round(value, digits = 2) {
+	const factor = 10 ** digits;
+	return Math.round(value * factor) / factor;
+}
+/** Median of the defined values, or null when there are none. */
+function median(values) {
+	const sorted = values.filter((value) => typeof value === "number").sort((a, b) => a - b);
+	if (sorted.length === 0) return null;
+	const middle = Math.floor(sorted.length / 2);
+	return sorted.length % 2 === 0 ? (sorted[middle - 1] + sorted[middle]) / 2 : sorted[middle];
+}
+
+//#endregion
+//#region src/metrics.ts
+const FORMATTERS = {
+	ms: formatMs,
+	bytes: formatBytes,
+	count: String,
+	score: (value) => String(round(value, 1)),
+	cls: (value) => String(round(value, 3)),
+	percent: (value) => `${round(value, 3)}%`
+};
+function formatValue(unit, value) {
+	return FORMATTERS[unit](value);
+}
+/** Suffixes a budget value may use, by unit. */
+const UNIT_FACTORS = {
+	ms: {
+		ms: 1,
+		s: 1e3
+	},
+	bytes: {
+		b: 1,
+		kb: 1024,
+		kib: 1024,
+		mb: 1024 ** 2,
+		mib: 1024 ** 2
+	}
+};
+const LIGHTHOUSE = {
+	score: {
+		label: "Performance score",
+		unit: "score",
+		digits: 2,
+		higherIsBetter: true
+	},
+	fcp: {
+		label: "First Contentful Paint",
+		unit: "ms",
+		digits: 2,
+		higherIsBetter: false
+	},
+	lcp: {
+		label: "Largest Contentful Paint",
+		unit: "ms",
+		digits: 2,
+		higherIsBetter: false
+	},
+	tbt: {
+		label: "Total Blocking Time",
+		unit: "ms",
+		digits: 2,
+		higherIsBetter: false
+	},
+	cls: {
+		label: "Cumulative Layout Shift",
+		unit: "cls",
+		digits: 4,
+		higherIsBetter: false
+	},
+	si: {
+		label: "Speed Index",
+		unit: "ms",
+		digits: 2,
+		higherIsBetter: false
+	}
+};
+
+//#endregion
+//#region src/budgets.ts
+const lighthouseMetric = (metric) => ({
+	kind: "change",
+	unit: LIGHTHOUSE[metric].unit,
+	read: ({ lighthouse, comparability }) => {
+		if (!lighthouse) return "the Lighthouse stage did not run";
+		if (!comparability.comparable) return "timings are not comparable between these URLs";
+		const original = lighthouse.original.median[metric];
+		const ported = lighthouse.ported.median[metric];
+		if (original === null || ported === null) return `Lighthouse did not report ${metric}`;
+		return {
+			original,
+			ported
+		};
+	}
+});
+const assetMetric = (unit, read) => ({
+	kind: "change",
+	unit,
+	read: ({ assets }) => assets ? {
+		original: read(assets.original),
+		ported: read(assets.ported)
+	} : "the assets stage did not run"
+});
+const METRICS = {
+	score: lighthouseMetric("score"),
+	fcp: lighthouseMetric("fcp"),
+	lcp: lighthouseMetric("lcp"),
+	tbt: lighthouseMetric("tbt"),
+	cls: lighthouseMetric("cls"),
+	si: lighthouseMetric("si"),
+	js: assetMetric("bytes", (side) => side.categories.js.size),
+	css: assetMetric("bytes", (side) => side.categories.css.size),
+	html: assetMetric("bytes", (side) => side.categories.html.size),
+	fonts: assetMetric("bytes", (side) => side.categories.fonts.size),
+	total: assetMetric("bytes", (side) => side.coreSize),
+	requests: assetMetric("count", (side) => side.requests),
+	pixels: {
+		kind: "absolute",
+		unit: "percent",
+		read: ({ visual }) => {
+			const widths = visual?.widths ?? [];
+			if (widths.length === 0) return "the visual stage did not run";
+			const worst = widths.reduce((a, b) => b.pixels.mismatch > a.pixels.mismatch ? b : a);
+			return {
+				value: worst.pixels.mismatch,
+				detail: `${formatValue("percent", worst.pixels.mismatch)} of pixels differ at ${worst.width}px`
+			};
+		}
+	}
+};
+const isBudgetMetric = (value) => Object.hasOwn(METRICS, value);
+const BUDGET_HELP = `Budgets compare the ported URL with the original. Size and timing budgets
+use the change (ported − original), absolute or relative with %:
+  lcp>10%     fail when LCP grows by more than 10%
+  js>0        fail when route JavaScript (gzip) grows at all
+  total>20kb  fail when HTML + CSS + JS + fonts grow by more than 20 KiB
+  score<-5    fail when the Lighthouse score drops by more than 5 points
+  pixels>1%   fail when screenshots differ in more than 1% of pixels (absolute)
+Metrics: ${Object.keys(METRICS).join(", ")}.`;
+function parseBudgets(inputs) {
+	return inputs.flatMap((input) => input.split(",")).map((part) => part.trim()).filter(Boolean).map(parseBudget);
+}
+function parseBudget(source) {
+	const match = source.match(/^([a-z]+)\s*([<>])\s*(-?\d+(?:\.\d+)?)\s*(%|[a-z]+)?$/i);
+	if (!match) throw new BenchError(`Invalid budget "${source}". Expected <metric><op><value>, e.g. lcp>10%.`);
+	const metric = match[1].toLowerCase();
+	if (!isBudgetMetric(metric)) throw new BenchError(`Unknown budget metric "${metric}" in "${source}". ${Object.keys(METRICS).join(", ")} are supported.`);
+	const spec = METRICS[metric];
+	const unit = match[4]?.toLowerCase();
+	let value = Number(match[3]);
+	if (unit && unit !== "%") {
+		const factors = UNIT_FACTORS[spec.unit] ?? {};
+		if (!Object.hasOwn(factors, unit)) throw new BenchError(`Unit "${unit}" does not apply to ${metric} in "${source}".`);
+		value *= factors[unit];
+	}
+	return {
+		source,
+		metric,
+		op: match[2],
+		value,
+		relative: unit === "%" && spec.kind === "change"
+	};
+}
+const sign = (value) => value > 0 ? "+" : value < 0 ? "−" : "±";
+function evaluateBudget(budget, inputs) {
+	const spec = METRICS[budget.metric];
+	const result = (actual, detail) => ({
+		budget: budget.source,
+		status: (budget.op === ">" ? actual > budget.value : actual < budget.value) ? "fail" : "pass",
+		detail
+	});
+	const skip = (reason) => ({
+		budget: budget.source,
+		status: "skip",
+		detail: reason
+	});
+	if (spec.kind === "absolute") {
+		const reading = spec.read(inputs);
+		if (typeof reading === "string") return skip(reading);
+		return result(reading.value, reading.detail);
+	}
+	const pair = spec.read(inputs);
+	if (typeof pair === "string") return skip(pair);
+	const format = (value) => formatValue(spec.unit, value);
+	const delta = pair.ported - pair.original;
+	const values = `${budget.metric}: ${format(pair.original)} → ${format(pair.ported)}`;
+	if (!budget.relative) return result(delta, `${values} (${sign(delta)}${format(Math.abs(delta))})`);
+	const relative = pair.original === 0 ? delta === 0 ? 0 : Math.sign(delta) * Infinity : delta / pair.original * 100;
+	return result(relative, `${values} (${sign(relative)}${round(Math.abs(relative), 1)}%)`);
+}
+function evaluateBudgets(budgets, inputs) {
+	return budgets.map((budget) => evaluateBudget(budget, inputs));
+}
+
+//#endregion
+//#region src/text.ts
+/**
+* Locate the first region where the visible text of the two pages differs,
+* with `context` words around it and at most `maxWords` words per excerpt.
+*/
+function compareText(original, ported, { context = 12, maxWords = 80 } = {}) {
+	const a = original.split(" ").filter(Boolean);
+	const b = ported.split(" ").filter(Boolean);
+	const result = {
+		identical: original === ported,
+		originalWords: a.length,
+		portedWords: b.length
+	};
+	if (result.identical) return result;
+	let start = 0;
+	while (start < a.length && start < b.length && a[start] === b[start]) start++;
+	let endA = a.length;
+	let endB = b.length;
+	while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) {
+		endA--;
+		endB--;
+	}
+	const excerpt = (words, end) => {
+		const from = Math.max(0, start - context);
+		const to = Math.min(words.length, Math.max(end, start) + context, from + maxWords);
+		return `${from > 0 ? "… " : ""}${words.slice(from, to).join(" ")}${to < words.length ? " …" : ""}`;
+	};
+	return {
+		...result,
+		original: excerpt(a, endA),
+		ported: excerpt(b, endB)
+	};
+}
+
+//#endregion
+//#region src/checks.ts
+const PIXEL_WARNING = 1;
+const check = (id, label, [status, detail]) => ({
+	id,
+	label,
+	status,
+	detail
+});
+function list(values, limit = 3) {
+	const shown = values.slice(0, limit).join("; ");
+	return values.length > limit ? `${shown}; and ${values.length - limit} more` : shown;
+}
+/** Strip the origin so the same path on both servers compares equal. */
+function withoutOrigin(value, finalUrl) {
+	const origin = new URL(finalUrl).origin;
+	return value.split(origin).join("");
+}
+/** Entries the port has and the original doesn't, compared without origins. */
+function newEntries(original, ported, read, key) {
+	const keyOf = (side) => (value) => withoutOrigin(key(value), side.finalUrl);
+	const seen = new Set(read(original).map(keyOf(original)));
+	return read(ported).filter((value) => !seen.has(keyOf(ported)(value)));
+}
+const describeRequest = ({ url, reason }) => `${url} (${reason})`;
+/** One line per host and reason, so a broken CDN reads as one problem. */
+function groupFailures(requests) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const request of requests) {
+		const key = `${new URL(request.url).host} ${request.reason}`;
+		groups.set(key, [...groups.get(key) ?? [], request]);
+	}
+	return [...groups.values()].map((group) => group.length === 1 ? describeRequest(group[0]) : `${group.length} requests to ${new URL(group[0].url).host} (${group[0].reason})`);
+}
+/** Every check for the stages that produced results, in report order. */
+function reportChecks({ comparability, quality, visual }) {
+	return [
+		comparabilityCheck(comparability),
+		...quality ? qualityChecks(quality) : [],
+		...visual ? visualChecks(visual) : []
+	];
+}
+function comparabilityCheck(comparability) {
+	return check("comparability", "Timing comparability", comparability.comparable ? ["pass", "Both URLs run in the same kind of environment."] : ["warn", comparability.reasons.join(" ")]);
+}
+function qualityChecks({ original, ported, text }) {
+	const metadata = [
+		"title",
+		"description",
+		"lang"
+	].filter((key) => original[key] !== ported[key]);
+	const outline = (side) => side.headings.map((heading) => `h${heading.level} ${heading.text}`);
+	const originalOutline = outline(original);
+	const portedOutline = outline(ported);
+	const mismatch = originalOutline.findIndex((heading, index) => heading !== portedOutline[index]);
+	const headingsMatch = originalOutline.length === portedOutline.length && mismatch === -1;
+	const firstDifference = mismatch === -1 ? originalOutline.length : mismatch;
+	const originalViolations = new Map(original.violations.map((violation) => [violation.id, violation.nodes]));
+	const regressions = ported.violations.filter((violation) => violation.nodes > (originalViolations.get(violation.id) ?? 0));
+	const newProblems = [...newEntries(original, ported, (side) => side.errors, (error) => error), ...groupFailures(newEntries(original, ported, (side) => side.failedRequests, describeRequest))];
+	const difference = compareText(original.text, ported.text, {
+		context: 4,
+		maxWords: 20
+	});
+	const portedProblems = ported.errors.length + ported.failedRequests.length;
+	return [
+		check("text", "Visible text", text.identical ? ["pass", `Identical (${text.portedWords} words).`] : ["fail", `Differs: ${text.originalWords} → ${text.portedWords} words. First difference: “${difference.original}” vs “${difference.ported}”.`]),
+		check("metadata", "Title, description and lang", metadata.length === 0 ? ["pass", "Identical."] : ["fail", list(metadata.map((key) => `${key}: ${JSON.stringify(original[key])} → ${JSON.stringify(ported[key])}`))]),
+		check("headings", "Heading outline", headingsMatch ? ["pass", `Identical (${originalOutline.length} headings).`] : ["fail", `${originalOutline.length} → ${portedOutline.length} headings. First difference: “${originalOutline[firstDifference] ?? "(none)"}” vs “${portedOutline[firstDifference] ?? "(none)"}”.`]),
+		check("accessibility", "Accessibility (axe-core)", regressions.length > 0 ? ["fail", `New or more frequent violations: ${list(regressions.map((violation) => `${violation.id} (${violation.nodes})`))}.`] : ported.violations.length > 0 ? ["warn", `No regressions, but ${ported.violations.length} violations remain from the original: ${list(ported.violations.map((violation) => violation.id))}.`] : ["pass", "No violations."]),
+		check("errors", "Browser errors and failed requests", newProblems.length > 0 ? ["fail", list(newProblems)] : portedProblems > 0 ? ["warn", "Only errors that the original also has."] : ["pass", "None."]),
+		check("nested-controls", "Nested interactive controls", [ported.nestedInteractiveControls > original.nestedInteractiveControls ? "fail" : "pass", `${original.nestedInteractiveControls} → ${ported.nestedInteractiveControls}.`])
+	];
+}
+function visualChecks(visual) {
+	return visual.widths.flatMap((result) => {
+		const { pixels } = result;
+		const height = pixels.heightDelta === 0 ? "matches" : `changes by ${pixels.heightDelta > 0 ? "+" : ""}${pixels.heightDelta}px`;
+		return [check(`geometry-${result.width}`, `Layout geometry at ${result.width}px`, result.differences.length > 0 || result.landmarkDifferences.length > 0 ? ["fail", `${result.matchedElements > 0 ? `${result.differences.length} of ${result.matchedElements} matched components and ` : ""}${result.landmarkDifferences.length} page regions differ by more than ${visual.tolerance}px.`] : result.matchedElements === 0 ? ["warn", `No data-slot components matched (${result.originalElements} named in the original, ${result.portedElements} in the port); only page regions were compared.`] : ["pass", `${result.matchedElements} matched components and all page regions are within ${visual.tolerance}px.`]), check(`pixels-${result.width}`, `Screenshot pixels at ${result.width}px`, [pixels.mismatch > PIXEL_WARNING || pixels.heightDelta !== 0 ? "warn" : "pass", `${pixels.mismatch}% of pixels differ; page height ${height}.`])];
+	});
+}
+
+//#endregion
+//#region src/types.ts
+const SIDES = ["original", "ported"];
+const STAGES = [
+	"assets",
+	"quality",
+	"visual",
+	"lighthouse"
+];
+const ASSET_CATEGORIES = [
+	"html",
+	"css",
+	"js",
+	"fonts",
+	"images",
+	"other"
+];
+const LIGHTHOUSE_METRICS = [
+	"score",
+	"fcp",
+	"lcp",
+	"tbt",
+	"cls",
+	"si"
+];
+
+//#endregion
+//#region src/sections.ts
+const cellText = (cell) => typeof cell === "string" ? cell : cell.text;
+const textTable = (headings, rows) => ({
+	headings,
+	align: headings.map(() => "l"),
+	rows
+});
+/** A label column followed by right-aligned values. */
+const valueTable = (headings, rows) => ({
+	headings,
+	align: headings.map((_, index) => index === 0 ? "l" : "r"),
+	rows
+});
+const COMPARISON = [
+	"Original",
+	"Ported",
+	"Change"
+];
+function comparisonRow(label, original, ported, format, higherIsBetter = false) {
+	const delta = original === null || ported === null ? 0 : ported - original;
+	const change = formatDelta(original, ported, format);
+	return [
+		label,
+		original === null ? "–" : format(original),
+		ported === null ? "–" : format(ported),
+		delta === 0 ? change : {
+			text: change,
+			tone: delta > 0 === higherIsBetter ? "better" : "worse"
+		}
+	];
+}
+function budgetItems(report) {
+	return report.budgets.map(({ budget, status, detail }) => ({
+		status,
+		label: budget,
+		detail
+	}));
+}
+/** Stages that failed or were skipped. */
+function stageItems(report) {
+	return [...report.errors.map(({ stage, message }) => ({
+		status: "fail",
+		label: stage,
+		detail: message
+	})), ...report.skipped.map(({ stage, reason }) => ({
+		status: "skip",
+		label: stage,
+		detail: reason
+	}))];
+}
+function lighthouseSection(lighthouse, comparability) {
+	return {
+		title: `Lighthouse ${lighthouse.formFactor}`,
+		notes: [`median of ${lighthouse.runs} run${lighthouse.runs === 1 ? "" : "s"}`, ...comparability.comparable ? [] : ["timings not comparable"]],
+		table: valueTable(["Metric", ...COMPARISON], LIGHTHOUSE_METRICS.map((metric) => {
+			const { label, unit, higherIsBetter } = LIGHTHOUSE[metric];
+			return comparisonRow(label, lighthouse.original.median[metric], lighthouse.ported.median[metric], (value) => formatValue(unit, value), higherIsBetter);
+		}))
+	};
+}
+const ASSET_ROWS = [
+	["js", "JavaScript (gzip)"],
+	["css", "CSS (gzip)"],
+	["html", "HTML (gzip)"],
+	["fonts", "Fonts"],
+	["images", "Images"],
+	["other", "Other"]
+];
+function assetsSection({ original, ported }) {
+	const { viewport } = original;
+	return {
+		title: "Route assets",
+		notes: [`cold load at ${viewport.width}×${viewport.height}`],
+		table: valueTable(["Asset", ...COMPARISON], [
+			...ASSET_ROWS.map(([category, label]) => {
+				const a = original.categories[category];
+				const b = ported.categories[category];
+				return comparisonRow(`${label}, ${a.count} → ${b.count} files`, a.size, b.size, formatBytes);
+			}),
+			comparisonRow("HTML + CSS + JS + fonts", original.coreSize, ported.coreSize, formatBytes),
+			comparisonRow("All requests (transferred)", original.transfer, ported.transfer, formatBytes),
+			comparisonRow("Requests", original.requests, ported.requests, String)
+		])
+	};
+}
+function visualSection(visual) {
+	return {
+		title: "Visual parity",
+		notes: [`within ${visual.tolerance}px`],
+		table: valueTable([
+			"Width",
+			"Matched components",
+			"Component diffs",
+			"Region diffs",
+			"Pixels differing",
+			"Height change"
+		], visual.widths.map((result) => [
+			`${result.width}px`,
+			`${result.matchedElements} of ${result.originalElements}`,
+			String(result.differences.length),
+			String(result.landmarkDifferences.length),
+			`${result.pixels.mismatch}%`,
+			`${result.pixels.heightDelta > 0 ? "+" : ""}${result.pixels.heightDelta}px`
+		]))
+	};
+}
+function qualitySection(quality) {
+	const { original, ported, viewport } = quality;
+	const row = (label, read) => [
+		label,
+		read(original),
+		read(ported)
+	];
+	return {
+		title: "Page quality",
+		notes: [`${viewport.width}×${viewport.height}`],
+		table: valueTable([
+			"Measure",
+			"Original",
+			"Ported"
+		], [
+			row("DOM elements", (side) => String(side.domElements)),
+			row("Serialized DOM", (side) => formatBytes(side.domBytes)),
+			row("axe-core violations", (side) => String(side.violations.length)),
+			row("Browser errors", (side) => String(side.errors.length)),
+			row("Failed requests", (side) => String(side.failedRequests.length))
+		])
+	};
+}
+/** Matched components whose size differs, the first `limit` of them. */
+function componentDifferences(result, { limit, textLength }) {
+	return textTable([
+		"Component",
+		"Text",
+		"Original",
+		"Ported"
+	], result.differences.slice(0, limit).map((difference) => [
+		difference.slot,
+		truncate(difference.text, textLength),
+		difference.original.join(" × "),
+		difference.ported.join(" × ")
+	]));
+}
+const slotCounts = (counts) => Object.entries(counts).sort((a, b) => b[1] - a[1]).map(([slot, count]) => `${slot} (${count})`).join(", ") || "none";
+/** Slots that only one side has, which explain low match counts. */
+function unmatchedSlots(result) {
+	const { unmatchedOriginal, unmatchedPorted } = result;
+	if (Object.keys(unmatchedOriginal).length + Object.keys(unmatchedPorted).length === 0) return [];
+	return [`Only in original: ${slotCounts(unmatchedOriginal)}`, `Only in ported: ${slotCounts(unmatchedPorted)}`];
+}
+
+//#endregion
+//#region src/report.ts
+const STATUS_LABEL = {
+	pass: "✓ pass",
+	fail: "✗ fail",
+	warn: "! warn",
+	skip: "– skip"
+};
+const MAX_DIFFERENCES = 20;
+function escapeCell(value) {
+	return value.replace(/\|/g, "\\|").replace(/\n/g, " ");
+}
+function markdownTable({ headings, align, rows }) {
+	const cells = [headings, ...rows].map((row) => row.map((cell) => escapeCell(cellText(cell))));
+	const widths = headings.map((_, index) => Math.max(3, ...cells.map((row) => row[index].length)));
+	const pad = (value, index) => align[index] === "r" ? value.padStart(widths[index]) : value.padEnd(widths[index]);
+	const line = (row) => `| ${row.map(pad).join(" | ")} |`;
+	const divider = `| ${widths.map((width, index) => align[index] === "r" ? `${"-".repeat(width - 1)}:` : "-".repeat(width)).join(" | ")} |`;
+	return [
+		line(cells[0]),
+		divider,
+		...cells.slice(1).map(line)
+	].join("\n");
+}
+function statusTable(heading, items) {
+	return markdownTable(textTable([
+		heading,
+		"Status",
+		"Detail"
+	], items.map((item) => [
+		item.label,
+		STATUS_LABEL[item.status],
+		item.detail
+	])));
+}
+const box = (value) => value ? `${value.width} × ${value.height} at ${value.x}, ${value.y}` : "missing";
+function renderMarkdown(report, outDir) {
+	const link = (label, file) => file ? `[${label}](${relative(outDir, file).split("\\").join("/")})` : label;
+	const lines = [];
+	const push = (...values) => lines.push(...values.flatMap((value) => [value, ""]));
+	push("# UI bench report", [
+		`- **Original:** ${report.targets.original.finalUrl}`,
+		`- **Ported:** ${report.targets.ported.finalUrl}`,
+		`- **Measured:** ${report.measuredAt} with ${report.environment.browser ?? "Chrome"}, Node ${report.environment.node}`
+	].join("\n"));
+	push(`## Result: ${report.passed ? "PASS" : "FAIL"}`, statusTable("Check", report.checks));
+	const budgets = budgetItems(report);
+	if (budgets.length > 0) push("### Budgets", statusTable("Budget", budgets));
+	const stages = stageItems(report);
+	if (stages.length > 0) push("### Stages", statusTable("Stage", stages));
+	const { lighthouse, assets, visual, quality, comparability } = report;
+	if (lighthouse) {
+		const section = lighthouseSection(lighthouse, comparability);
+		push(`## ${section.title}`, `Median of ${lighthouse.runs} Lighthouse ${lighthouse.version} runs per URL with simulated throttling, run in ${lighthouse.order} order. These are lab results, not field data.${comparability.comparable ? "" : " **Timings are not comparable:** " + comparability.reasons.join(" ")}`, markdownTable(section.table));
+	}
+	if (assets) {
+		const section = assetsSection(assets);
+		const { viewport } = assets.original;
+		push(`## ${section.title}`, `Responses of a cold load at ${viewport.width}×${viewport.height}, until the network is idle. HTML, CSS and JavaScript are recompressed with gzip level 9 so servers with different compression compare equally; other assets use their transferred size.`, markdownTable(section.table));
+	}
+	if (visual) {
+		const section = visualSection(visual);
+		push(`## ${section.title}`, `Visible \`data-slot\` components are matched by slot name, text and order, and their sizes compared within ${visual.tolerance}px. Top-level header, main, section and footer regions are compared by position and size. Screenshot pixels are compared over the area both pages cover.`, markdownTable(section.table));
+		for (const result of visual.widths) {
+			const screenshot = (side) => visual.captures.find((item) => item.side === side && item.width === result.width)?.screenshot ?? null;
+			push(`### ${result.width}px`, `Screenshots: ${link("original", screenshot("original"))}, ${link("ported", screenshot("ported"))}, ${link("diff", result.pixels.diff)}`);
+			if (result.differences.length > 0) {
+				const more = result.differences.length - MAX_DIFFERENCES;
+				push(markdownTable(componentDifferences(result, {
+					limit: MAX_DIFFERENCES,
+					textLength: 40
+				})) + (more > 0 ? `\n\n…and ${more} more in report.json.` : ""));
+			}
+			if (result.landmarkDifferences.length > 0) push(markdownTable(textTable([
+				"Region",
+				"Original",
+				"Ported"
+			], result.landmarkDifferences.slice(0, MAX_DIFFERENCES).map((difference) => [
+				`${difference.index + 1}. ${difference.tag}`,
+				box(difference.original),
+				box(difference.ported)
+			]))));
+			const unmatched = unmatchedSlots(result);
+			if (unmatched.length > 0) push(unmatched.map((line) => `- ${line}`).join("\n"));
+		}
+	}
+	if (quality) {
+		const section = qualitySection(quality);
+		push(`## ${section.title}`, `Measured at ${section.notes.join(", ")}.`, markdownTable(section.table));
+		const { text } = quality;
+		if (!text.identical) push("### First text difference", `- **Original:** ${text.original}\n- **Ported:** ${text.ported}`);
+		for (const label of ["original", "ported"]) {
+			const side = quality[label];
+			if (side.violations.length > 0) push(`### axe-core violations (${label})`, side.violations.map((violation) => `- \`${violation.id}\` (${violation.impact ?? "unknown"}, ${violation.nodes} nodes): ${violation.help}`).join("\n"));
+			const problems = [...side.errors, ...side.failedRequests.map(({ url, reason }) => `${url} (${reason})`)];
+			if (problems.length > 0) push(`### Browser errors (${label})`, problems.map((problem) => `- ${truncate(problem, 300)}`).join("\n"));
+		}
+	}
+	return `${lines.join("\n").trim()}\n`;
+}
+
+//#endregion
+//#region src/sides.ts
+/**
+* Measure the original, then the ported URL. The sides run one after the
+* other so they never compete for CPU or network while being measured.
+*/
+async function bothSides(measure) {
+	return {
+		original: await measure("original"),
+		ported: await measure("ported")
+	};
+}
+
+//#endregion
+//#region src/stages/assets.ts
+const ASSETS_VIEWPORT = {
+	width: 412,
+	height: 823
+};
+const COMPRESSIBLE = /* @__PURE__ */ new Set([
+	"html",
+	"css",
+	"js"
+]);
+function categorize(request, isMainFrame) {
+	switch (request.resourceType()) {
+		case "document": return isMainFrame && request.isNavigationRequest() ? "html" : "other";
+		case "stylesheet": return "css";
+		case "script": return "js";
+		case "font": return "fonts";
+		case "image":
+		case "media": return "images";
+		default: return "other";
+	}
+}
+const sum = (entries, read) => entries.reduce((total, entry) => total + read(entry), 0);
+function summarizeAssets(entries) {
+	const categories = Object.fromEntries(ASSET_CATEGORIES.map((category) => {
+		const files = entries.filter((entry) => entry.category === category);
+		return [category, {
+			count: files.length,
+			transfer: sum(files, (entry) => entry.transfer),
+			raw: sum(files, (entry) => entry.raw),
+			size: COMPRESSIBLE.has(category) ? sum(files, (entry) => entry.gzip ?? 0) : sum(files, (entry) => entry.transfer)
+		}];
+	}));
+	return {
+		categories,
+		coreSize: [
+			"html",
+			"css",
+			"js",
+			"fonts"
+		].reduce((total, category) => total + categories[category].size, 0),
+		requests: entries.length,
+		transfer: sum(entries, (entry) => entry.transfer)
+	};
+}
+/**
+* Record every response of a cold page load. Compression is recomputed from
+* the decoded bodies so local and remote servers are measured the same way.
+*/
+function measureAssets(browser, urls, timeout) {
+	return bothSides((side) => measureSide$1(browser, urls[side], timeout));
+}
+async function measureSide$1(browser, url, timeout) {
+	const context = await browser.newContext({
+		viewport: ASSETS_VIEWPORT,
+		serviceWorkers: "block"
+	});
+	try {
+		const page = await context.newPage();
+		const pending = [];
+		page.on("requestfinished", (request) => {
+			pending.push((async () => {
+				const response = await request.response();
+				if (!response || response.status() >= 300 || response.status() === 204) return null;
+				const category = categorize(request, request.frame() === page.mainFrame());
+				const [sizes, body] = await Promise.all([request.sizes(), response.body().catch(() => null)]);
+				return {
+					url: request.url(),
+					category,
+					transfer: sizes.responseBodySize,
+					raw: body?.byteLength ?? 0,
+					gzip: body && COMPRESSIBLE.has(category) ? gzipSync(body, { level: 9 }).byteLength : null
+				};
+			})().catch(() => null));
+		});
+		await page.goto(url, {
+			waitUntil: "networkidle",
+			timeout
+		});
+		const finalUrl = page.url();
+		const origin = new URL(finalUrl).origin;
+		const entries = (await Promise.all(pending)).filter((entry) => entry !== null).filter((entry) => !entry.url.startsWith("data:")).map((entry) => ({
+			...entry,
+			thirdParty: new URL(entry.url).origin !== origin
+		})).sort((a, b) => a.category.localeCompare(b.category) || a.url.localeCompare(b.url));
+		return {
+			finalUrl,
+			viewport: ASSETS_VIEWPORT,
+			...summarizeAssets(entries),
+			entries
+		};
+	} finally {
+		await context.close();
+	}
+}
+
+//#endregion
+//#region src/stages/lighthouse.ts
+/** The score comes from the performance category, the rest from audits. */
+const AUDITS = {
+	fcp: "first-contentful-paint",
+	lcp: "largest-contentful-paint",
+	tbt: "total-blocking-time",
+	cls: "cumulative-layout-shift",
+	si: "speed-index"
+};
+/** Run order for one round. Alternating cancels out drift such as thermal throttling. */
+function roundOrder(run) {
+	return run % 2 === 1 ? [...SIDES] : [...SIDES].reverse();
+}
+const roundMetric = (metric, value) => typeof value === "number" ? round(value, LIGHTHOUSE[metric].digits) : null;
+async function runLighthouse({ urls, runs, formFactor, chromePath, artifacts, onProgress }) {
+	const { default: lighthouse, desktopConfig } = await import("lighthouse");
+	const { launch } = await import("chrome-launcher");
+	const version = createRequire(import.meta.url)("lighthouse/package.json").version;
+	const chrome = await launch({
+		chromePath,
+		chromeFlags: ["--headless=new", "--disable-dev-shm-usage"]
+	});
+	const results = {
+		original: [],
+		ported: []
+	};
+	try {
+		for (let run = 1; run <= runs; run++) for (const side of roundOrder(run)) {
+			onProgress(`Lighthouse ${formFactor} run ${run}/${runs}: ${side}`);
+			const result = await lighthouse(urls[side], {
+				port: chrome.port,
+				output: "json",
+				logLevel: "error",
+				onlyCategories: ["performance"],
+				throttlingMethod: "simulate",
+				maxWaitForLoad: 45e3
+			}, formFactor === "desktop" ? desktopConfig : void 0);
+			if (!result) throw new Error(`Lighthouse returned no result for the ${side} URL`);
+			const { lhr } = result;
+			if (lhr.runtimeError) throw new Error(`Lighthouse failed for the ${side} URL: ${lhr.runtimeError.message}`);
+			const score = lhr.categories.performance?.score;
+			const audit = (metric) => roundMetric(metric, lhr.audits[AUDITS[metric]]?.numericValue);
+			results[side].push({
+				run,
+				report: artifacts?.write(`lighthouse/${side}-run-${run}.json`, typeof result.report === "string" ? result.report : JSON.stringify(lhr)) ?? null,
+				score: roundMetric("score", typeof score === "number" ? score * 100 : null),
+				fcp: audit("fcp"),
+				lcp: audit("lcp"),
+				tbt: audit("tbt"),
+				cls: audit("cls"),
+				si: audit("si")
+			});
+		}
+	} finally {
+		chrome.kill();
+	}
+	const summarize = (side) => ({
+		runs: results[side],
+		median: Object.fromEntries(LIGHTHOUSE_METRICS.map((metric) => [metric, roundMetric(metric, median(results[side].map((run) => run[metric])))]))
+	});
+	return {
+		formFactor,
+		version,
+		runs,
+		order: "alternating (original, ported), then (ported, original)",
+		original: summarize("original"),
+		ported: summarize("ported")
+	};
+}
+
+//#endregion
+//#region src/stages/problems.ts
+const CORS_BLOCK = /^Access to \w+ at '([^']+)' from origin '[^']+' has been blocked by CORS policy/;
+/**
+* Collects browser errors and broken resources so each problem is reported
+* once: one entry per distinct error message and one per failed URL, with the
+* most specific reason any event gave for it.
+*/
+function createProblemLog() {
+	const errors = /* @__PURE__ */ new Set();
+	const failures = /* @__PURE__ */ new Map();
+	return {
+		consoleError(text) {
+			if (text.startsWith("Failed to load resource")) return;
+			const cors = CORS_BLOCK.exec(text);
+			if (cors) failures.set(cors[1], "blocked by CORS");
+			else errors.add(text);
+		},
+		pageError(message) {
+			errors.add(message);
+		},
+		response(url, status) {
+			if (status >= 400) failures.set(url, `HTTP ${status}`);
+		},
+		requestFailed(url, reason) {
+			if (reason === "net::ERR_ABORTED" || failures.has(url)) return;
+			failures.set(url, reason);
+		},
+		result() {
+			return {
+				errors: [...errors],
+				failedRequests: [...failures].map(([url, reason]) => ({
+					url,
+					reason
+				}))
+			};
+		}
+	};
+}
+
+//#endregion
+//#region src/stages/quality.ts
+const QUALITY_VIEWPORT = {
+	width: 1280,
+	height: 800
+};
+const require = createRequire(import.meta.url);
+let axeSource;
+function readAxeSource() {
+	axeSource ??= readFileSync(require.resolve("axe-core/axe.min.js"), "utf8");
+	return axeSource;
+}
+async function measureQuality(browser, urls, timeout) {
+	const sides = await bothSides((side) => measureSide(browser, urls[side], timeout));
+	return {
+		viewport: QUALITY_VIEWPORT,
+		...sides,
+		text: compareText(sides.original.text, sides.ported.text)
+	};
+}
+async function measureSide(browser, url, timeout) {
+	const context = await browser.newContext({
+		viewport: QUALITY_VIEWPORT,
+		locale: "en-US",
+		bypassCSP: true,
+		serviceWorkers: "block"
+	});
+	try {
+		const page = await context.newPage();
+		const problems = createProblemLog();
+		page.on("console", (message) => {
+			if (message.type() === "error") problems.consoleError(message.text());
+		});
+		page.on("pageerror", (error) => problems.pageError(error.message));
+		page.on("requestfailed", (request) => problems.requestFailed(request.url(), request.failure()?.errorText ?? "failed"));
+		page.on("response", (response) => problems.response(response.url(), response.status()));
+		await loadPage(page, url, timeout);
+		const data = await page.evaluate(() => {
+			const normalize = (value) => value.replace(/\s+/g, " ").trim();
+			return {
+				title: document.title,
+				description: document.querySelector("meta[name=\"description\"]")?.getAttribute("content") ?? null,
+				lang: document.documentElement.getAttribute("lang"),
+				text: normalize(document.body.innerText),
+				headings: [...document.querySelectorAll("h1, h2, h3, h4, h5, h6")].filter((element) => element.checkVisibility()).map((element) => ({
+					level: Number(element.tagName[1]),
+					text: normalize(element.textContent ?? "")
+				})),
+				domElements: document.querySelectorAll("*").length,
+				domBytes: new TextEncoder().encode(document.documentElement.outerHTML).byteLength,
+				nestedInteractiveControls: document.querySelectorAll("button a, a button, button button, a a, button input, a input, button select, a select").length
+			};
+		});
+		await page.addScriptTag({ content: readAxeSource() });
+		const violations = await page.evaluate(async () => {
+			return (await globalThis.axe.run(document)).violations.map((violation) => ({
+				id: violation.id,
+				impact: violation.impact ?? null,
+				help: violation.help,
+				nodes: violation.nodes.length
+			}));
+		});
+		return {
+			finalUrl: page.url(),
+			...data,
+			violations: violations.sort((a, b) => a.id.localeCompare(b.id)),
+			...problems.result()
+		};
+	} finally {
+		await context.close();
+	}
+}
+
+//#endregion
+//#region src/stages/visual.ts
+const VISUAL_HEIGHT = 823;
+async function measureVisual(browser, { urls, widths, tolerance, timeout, artifacts, onProgress }) {
+	const captures = [];
+	const results = [];
+	for (const width of widths) {
+		onProgress(`Capturing layout at ${width}px`);
+		const { original, ported } = await bothSides((side) => capture(browser, {
+			side,
+			url: urls[side],
+			width,
+			timeout,
+			artifacts
+		}));
+		const { comparison, diff } = comparePixels(original.image, ported.image);
+		captures.push(original.capture, ported.capture);
+		results.push({
+			width,
+			...compareGeometry(original.capture, ported.capture, tolerance),
+			pixels: {
+				...comparison,
+				diff: artifacts?.write(`screenshots/diff-${width}.png`, PNG.sync.write(diff)) ?? null
+			}
+		});
+	}
+	return {
+		tolerance,
+		captures,
+		widths: results
+	};
+}
+async function capture(browser, { side, url, width, timeout, artifacts }) {
+	const context = await browser.newContext({
+		viewport: {
+			width,
+			height: VISUAL_HEIGHT
+		},
+		colorScheme: "light",
+		reducedMotion: "reduce",
+		serviceWorkers: "block"
+	});
+	try {
+		const page = await context.newPage();
+		await loadPage(page, url, timeout);
+		const image = await page.screenshot({
+			fullPage: true,
+			animations: "disabled"
+		});
+		const data = await page.evaluate(() => {
+			const round = (value) => Math.round(value * 100) / 100;
+			const box = (element) => {
+				const rect = element.getBoundingClientRect();
+				return {
+					x: round(rect.x + window.scrollX),
+					y: round(rect.y + window.scrollY),
+					width: round(rect.width),
+					height: round(rect.height)
+				};
+			};
+			const elements = [...document.querySelectorAll("[data-slot]")].filter((element) => element.checkVisibility()).map((element) => {
+				const { width, height } = box(element);
+				return {
+					slot: element.getAttribute("data-slot") ?? "",
+					text: (element.textContent ?? "").replace(/\s+/g, " ").trim(),
+					width,
+					height
+				};
+			});
+			const regions = "header, footer, main, section, article, aside, nav";
+			return {
+				elements,
+				landmarks: [...document.querySelectorAll("header, footer, main, section")].filter((element) => element.checkVisibility()).filter((element) => {
+					const parent = element.parentElement?.closest(regions);
+					return !parent || parent.tagName === "MAIN";
+				}).map((element) => ({
+					tag: element.tagName.toLowerCase(),
+					...box(element)
+				})),
+				pageHeight: document.documentElement.scrollHeight
+			};
+		});
+		return {
+			capture: {
+				side,
+				width,
+				screenshot: artifacts?.write(`screenshots/${side}-${width}.png`, image) ?? null,
+				...data
+			},
+			image
+		};
+	} finally {
+		await context.close();
+	}
+}
+/**
+* Part names that don't identify a component (PrimeReact's root, outer and
+* inner wrappers). Matching on them pairs unrelated elements, so they are left
+* out of the comparison and the unmatched lists.
+*/
+const GENERIC_SLOTS = /* @__PURE__ */ new Set([
+	"root",
+	"outer",
+	"inner"
+]);
+const named = (elements) => elements.filter((element) => !GENERIC_SLOTS.has(element.slot));
+const slotKey = (element) => `${element.slot}:${element.text.replace(/\s/g, "")}`;
+function countBySlot(elements) {
+	const counts = {};
+	for (const element of elements) counts[element.slot] = (counts[element.slot] ?? 0) + 1;
+	return counts;
+}
+/**
+* Match named `data-slot` elements by slot name, normalized text and
+* occurrence order, then compare their sizes. Framework wrappers without a
+* matching element on the other side are reported but not treated as
+* differences.
+*/
+function compareGeometry(original, ported, tolerance) {
+	const originalElements = named(original.elements);
+	const portedElements = named(ported.elements);
+	const buckets = /* @__PURE__ */ new Map();
+	for (const element of portedElements) {
+		const key = slotKey(element);
+		if (!buckets.has(key)) buckets.set(key, []);
+		buckets.get(key).push(element);
+	}
+	const differences = [];
+	const unmatchedOriginal = [];
+	let matchedElements = 0;
+	for (const element of originalElements) {
+		const other = buckets.get(slotKey(element))?.shift();
+		if (!other) {
+			unmatchedOriginal.push(element);
+			continue;
+		}
+		matchedElements++;
+		if (Math.abs(element.width - other.width) > tolerance || Math.abs(element.height - other.height) > tolerance) differences.push({
+			slot: element.slot,
+			text: element.text,
+			original: [element.width, element.height],
+			ported: [other.width, other.height]
+		});
+	}
+	const landmarkDifferences = [];
+	const count = Math.max(original.landmarks.length, ported.landmarks.length);
+	for (let index = 0; index < count; index++) {
+		const a = original.landmarks[index];
+		const b = ported.landmarks[index];
+		if (!a || !b || a.tag !== b.tag || [
+			"x",
+			"y",
+			"width",
+			"height"
+		].some((key) => Math.abs(a[key] - b[key]) > tolerance)) {
+			const strip = (landmark) => landmark ? {
+				x: landmark.x,
+				y: landmark.y,
+				width: landmark.width,
+				height: landmark.height
+			} : null;
+			landmarkDifferences.push({
+				index,
+				tag: (a ?? b).tag,
+				original: strip(a),
+				ported: strip(b)
+			});
+		}
+	}
+	return {
+		originalElements: originalElements.length,
+		portedElements: portedElements.length,
+		matchedElements,
+		differences,
+		unmatchedOriginal: countBySlot(unmatchedOriginal),
+		unmatchedPorted: countBySlot([...buckets.values()].flat()),
+		landmarkDifferences
+	};
+}
+function crop(png, width, height) {
+	if (png.width === width && png.height === height) return png.data;
+	const data = Buffer.alloc(width * height * 4);
+	for (let y = 0; y < height; y++) png.data.copy(data, y * width * 4, y * png.width * 4, (y * png.width + width) * 4);
+	return data;
+}
+/**
+* Pixel-diff the overlapping area of two full-page screenshots. The diff image
+* is returned undecoded so it is only encoded when it gets written.
+*/
+function comparePixels(original, ported) {
+	const a = PNG.sync.read(original);
+	const b = PNG.sync.read(ported);
+	const width = Math.min(a.width, b.width);
+	const height = Math.min(a.height, b.height);
+	const diff = new PNG({
+		width,
+		height
+	});
+	const mismatchedPixels = pixelmatch(crop(a, width, height), crop(b, width, height), diff.data, width, height, { threshold: .1 });
+	const total = width * height;
+	return {
+		comparison: {
+			comparedWidth: width,
+			comparedHeight: height,
+			heightDelta: b.height - a.height,
+			mismatchedPixels,
+			mismatch: total === 0 ? 0 : Math.round(mismatchedPixels / total * 1e5) / 1e3
+		},
+		diff
+	};
+}
+
+//#endregion
+//#region src/targets.ts
+const PRIVATE_IPV4 = [
+	/^127\./,
+	/^10\./,
+	/^192\.168\./,
+	/^172\.(?:1[6-9]|2\d|3[01])\./,
+	/^0\.0\.0\.0$/
+];
+function isLocalHost(hostname) {
+	const host = hostname.replace(/^\[|\]$/g, "").toLowerCase();
+	return host === "localhost" || host.endsWith(".localhost") || host.endsWith(".local") || host === "::1" || PRIVATE_IPV4.some((pattern) => pattern.test(host));
+}
+/** Accepts `localhost:4321` or `example.com` as well as full http(s) URLs. */
+function normalizeUrl(input) {
+	const value = input.trim();
+	if (!value) throw new BenchError("A URL is required.");
+	const hasScheme = /^[a-z][a-z\d+.-]*:\/\//i.test(value);
+	let url;
+	try {
+		url = new URL(hasScheme ? value : `http://${value}`);
+	} catch {
+		throw new BenchError(`Invalid URL: ${input}`);
+	}
+	if (url.protocol !== "http:" && url.protocol !== "https:") throw new BenchError(`Only http and https URLs are supported: ${input}`);
+	if (!hasScheme && !isLocalHost(url.hostname)) url.protocol = "https:";
+	return url;
+}
+const DEV_SERVER_MARKERS = [
+	["Astro", /astro\/dist\/runtime\/client\/dev-toolbar|astro-dev-toolbar/],
+	["Vite", /\/@vite\/client/],
+	["Next.js", /\/_next\/static\/[^"']*(?:hmr-client|next-devtools|_browser_dev_|react-refresh)|\/_next\/static\/chunks\/webpack\.js\?v=|\/_next\/webpack-hmr/],
+	["webpack", /webpack-dev-server|__webpack_hmr/],
+	["React Refresh", /@react-refresh|react-refresh-runtime/]
+];
+function detectDevServer(html) {
+	return DEV_SERVER_MARKERS.find(([, pattern]) => pattern.test(html))?.[0] ?? null;
+}
+/** Bot-protection pages would be measured instead of the site. */
+const CHALLENGE_HEADERS = ["x-vercel-mitigated", "cf-mitigated"];
+/**
+* Load the URL in the browser that takes the measurements. Bot protection on
+* hosts such as Vercel and Cloudflare challenges plain HTTP clients but lets
+* Chrome through, so a fetch-based check would reject reachable sites.
+*/
+async function inspectTarget(browser, { side, input, url, timeout }) {
+	const context = await browser.newContext({ serviceWorkers: "block" });
+	try {
+		const page = await context.newPage();
+		let response;
+		try {
+			response = await page.goto(url.href, {
+				waitUntil: "domcontentloaded",
+				timeout
+			});
+		} catch (error) {
+			const reason = (error instanceof Error ? error.message : String(error)).split("\n")[0].replace(/^page\.goto: /, "");
+			throw new BenchError(`Could not reach the ${side} URL ${url.href}: ${reason}`);
+		}
+		if (!response) throw new BenchError(`The ${side} URL ${url.href} returned no response.`);
+		const headers = response.headers();
+		if (CHALLENGE_HEADERS.some((name) => headers[name] === "challenge")) throw new BenchError(`The ${side} URL ${url.href} is behind a bot challenge, which would be measured instead of the page. Allow the benchmark through or measure a local build.`);
+		if (!response.ok()) throw new BenchError(`The ${side} URL ${url.href} responded with HTTP ${response.status()}.`);
+		const contentType = headers["content-type"] ?? "";
+		const html = await response.text().catch(() => "");
+		if (!/html/i.test(contentType) && !/<html[\s>]/i.test(html)) throw new BenchError(`The ${side} URL ${url.href} did not return an HTML page (${contentType || "no content type"}).`);
+		const finalUrl = new URL(page.url());
+		return {
+			side,
+			input,
+			url: url.href,
+			finalUrl: finalUrl.href,
+			status: response.status(),
+			local: isLocalHost(finalUrl.hostname),
+			devServer: detectDevServer(html)
+		};
+	} finally {
+		await context.close();
+	}
+}
+/** Whether timing results from the two targets can be compared fairly. */
+function assessComparability(original, ported) {
+	const reasons = [];
+	if (original.local !== ported.local) reasons.push(`The ${original.local ? "original" : "ported"} URL is local and the ${original.local ? "ported" : "original"} URL is remote, so network, CDN and protocol differences are mixed into timings.`);
+	for (const target of [original, ported]) if (target.devServer) reasons.push(`The ${target.side} URL is served by a development server (${target.devServer}); use a production build.`);
+	return {
+		comparable: reasons.length === 0,
+		reasons
+	};
+}
+
+//#endregion
+//#region src/run.ts
+/** Stages that measure performance, which development servers distort. */
+const PRODUCTION_ONLY = ["assets", "lighthouse"];
+async function runBench(options, log = () => {}) {
+	const budgets = parseBudgets(options.budgets);
+	const inputs = {
+		original: normalizeUrl(options.original),
+		ported: normalizeUrl(options.ported)
+	};
+	const chromePath = resolveChromePath(options.chromePath);
+	const artifacts = createArtifacts(options.outDir);
+	const measuredAt = (/* @__PURE__ */ new Date()).toISOString();
+	const browser = await launchBrowser(chromePath);
+	const browserVersion = browser.version();
+	const inspect = (side) => inspectTarget(browser, {
+		side,
+		input: options[side],
+		url: inputs[side],
+		timeout: options.timeout
+	});
+	let targets;
+	try {
+		log("Checking both URLs");
+		const [original, ported] = await Promise.allSettled([inspect("original"), inspect("ported")]);
+		if (original.status === "rejected") throw original.reason;
+		if (ported.status === "rejected") throw ported.reason;
+		targets = {
+			original: original.value,
+			ported: ported.value
+		};
+	} catch (error) {
+		await browser.close();
+		throw error;
+	}
+	const urls = {
+		original: targets.original.finalUrl,
+		ported: targets.ported.finalUrl
+	};
+	const comparability = assessComparability(targets.original, targets.ported);
+	const devServer = targets.original.devServer ?? targets.ported.devServer;
+	const blocked = devServer && !options.allowDev ? PRODUCTION_ONLY : [];
+	const stages = options.stages.filter((stage) => !blocked.includes(stage));
+	const skipped = options.stages.filter((stage) => blocked.includes(stage)).map((stage) => ({
+		stage,
+		reason: `A development server (${devServer}) was detected. Measure production builds, or pass --allow-dev to measure anyway.`
+	}));
+	const errors = [];
+	async function stage(name, run) {
+		if (!stages.includes(name)) return void 0;
+		try {
+			return await run();
+		} catch (error) {
+			const message = error instanceof Error ? error.message : String(error);
+			errors.push({
+				stage: name,
+				message
+			});
+			log(`${name} failed: ${message}`);
+			return;
+		}
+	}
+	const { timeout } = options;
+	let measured;
+	try {
+		measured = {
+			assets: await stage("assets", () => {
+				log("Measuring route assets");
+				return measureAssets(browser, urls, timeout);
+			}),
+			quality: await stage("quality", () => {
+				log("Checking text, headings, accessibility and browser errors");
+				return measureQuality(browser, urls, timeout);
+			}),
+			visual: await stage("visual", () => measureVisual(browser, {
+				urls,
+				widths: options.widths,
+				tolerance: options.tolerance,
+				timeout,
+				artifacts,
+				onProgress: log
+			}))
+		};
+	} finally {
+		await browser.close();
+	}
+	const lighthouse = await stage("lighthouse", () => runLighthouse({
+		urls,
+		runs: options.runs,
+		formFactor: options.formFactor,
+		chromePath,
+		artifacts,
+		onProgress: log
+	}));
+	const results = {
+		...measured,
+		lighthouse
+	};
+	const checks = reportChecks({
+		comparability,
+		...results
+	});
+	const budgetResults = evaluateBudgets(budgets, {
+		comparability,
+		...results
+	});
+	const { original: _original, ported: _ported, ...rest } = options;
+	const report = {
+		schemaVersion: 1,
+		tool: {
+			name,
+			version
+		},
+		measuredAt,
+		environment: {
+			node: process.version,
+			platform: process.platform,
+			arch: process.arch,
+			browser: `Chrome ${browserVersion}`
+		},
+		options: {
+			...rest,
+			outDir: artifacts?.dir
+		},
+		targets,
+		comparability,
+		skipped,
+		errors,
+		...results,
+		checks,
+		budgets: budgetResults,
+		passed: errors.length === 0 && checks.every((check) => check.status !== "fail") && budgetResults.every((budget) => budget.status !== "fail")
+	};
+	if (!artifacts) return { report };
+	return {
+		report,
+		files: {
+			json: artifacts.write("report.json", `${JSON.stringify(report, null, 2)}\n`),
+			markdown: artifacts.write("report.md", renderMarkdown(report, artifacts.dir))
+		}
+	};
+}
+
+//#endregion
+//#region src/summary.ts
+const STATUS_SYMBOL = {
+	pass: kleur.green("✓"),
+	fail: kleur.red("✗"),
+	warn: kleur.yellow("!"),
+	skip: kleur.dim("–")
+};
+const INDENT = "  ";
+const MAX_COMPONENT_DIFFERENCES = 5;
+const visibleLength = (value) => value.replace(/\x1b\[[0-9;]*m/g, "").length;
+function wrap(text, width) {
+	const lines = [];
+	let line = "";
+	for (const word of text.split(" ")) if (line && visibleLength(line) + 1 + visibleLength(word) > width) {
+		lines.push(line);
+		line = word;
+	} else line = line ? `${line} ${word}` : word;
+	if (line) lines.push(line);
+	return lines;
+}
+const colorCell = (cell) => typeof cell === "string" ? cell : cell.tone === "worse" ? kleur.red(cell.text) : kleur.green(cell.text);
+function columns({ headings, align, rows }) {
+	const cells = rows.map((row) => row.map(colorCell));
+	const widths = headings.map((_, index) => Math.max(...[headings, ...cells].map((row) => visibleLength(row[index]))));
+	const line = (row) => INDENT + row.map((cell, index) => {
+		const padding = " ".repeat(widths[index] - visibleLength(cell));
+		return align[index] === "r" ? padding + cell : cell + padding;
+	}).join("  ").trimEnd();
+	return [kleur.dim(line(headings)), ...cells.map(line)].join("\n");
+}
+/** Label/detail list where details wrap to the terminal width. */
+function statusList(items, width) {
+	const labelWidth = Math.max(...items.map((item) => item.label.length));
+	const detailWidth = Math.max(30, width - 2 - labelWidth - 4);
+	return items.map((item) => {
+		const [first = "", ...rest] = wrap(item.detail, detailWidth);
+		const lead = `${INDENT}${STATUS_SYMBOL[item.status]} ${item.label.padEnd(labelWidth)}  `;
+		const hang = " ".repeat(4 + labelWidth + 2);
+		return [lead + first, ...rest.map((line) => hang + line)].join("\n");
+	}).join("\n");
+}
+function heading(title, notes = []) {
+	return kleur.bold(title) + (notes.length > 0 ? kleur.dim(` · ${notes.join(" · ")}`) : "");
+}
+const sectionBlock = ({ title, notes, table }) => `${heading(title, notes)}\n${columns(table)}`;
+/** Everything a reader needs from the report, formatted for a terminal. */
+function renderSummary(report, width = process.stdout.columns || 100) {
+	const { original, ported } = report.targets;
+	const sections = [`${report.passed ? kleur.green().bold("PASS") : kleur.red().bold("FAIL")}  ${original.finalUrl} ${kleur.dim("→")} ${ported.finalUrl}`, `${heading("Checks")}\n${statusList(report.checks, width)}`];
+	const budgets = budgetItems(report);
+	if (budgets.length > 0) sections.push(`${heading("Budgets")}\n${statusList(budgets, width)}`);
+	const stages = stageItems(report);
+	if (stages.length > 0) sections.push(`${heading("Stages")}\n${statusList(stages, width)}`);
+	const { lighthouse, assets, visual, quality, comparability } = report;
+	if (lighthouse) sections.push(sectionBlock(lighthouseSection(lighthouse, comparability)));
+	if (assets) sections.push(sectionBlock(assetsSection(assets)));
+	if (visual) {
+		const lines = [sectionBlock(visualSection(visual))];
+		for (const result of visual.widths) {
+			if (result.differences.length === 0) continue;
+			const shown = result.differences.length > MAX_COMPONENT_DIFFERENCES ? ` (first ${MAX_COMPONENT_DIFFERENCES} of ${result.differences.length})` : "";
+			lines.push("", `${INDENT}Component differences at ${result.width}px${shown}`, columns(componentDifferences(result, {
+				limit: MAX_COMPONENT_DIFFERENCES,
+				textLength: 32
+			})));
+		}
+		const unmatched = visual.widths[0] ? unmatchedSlots(visual.widths[0]) : [];
+		if (unmatched.length > 0) lines.push("", ...unmatched.flatMap((line) => wrap(line, width - 2)).map((line) => INDENT + kleur.dim(line)));
+		sections.push(lines.join("\n"));
+	}
+	if (quality) sections.push(sectionBlock(qualitySection(quality)));
+	return sections.join("\n\n");
+}
+
+//#endregion
+export { LIGHTHOUSE_METRICS as a, BUDGET_HELP as c, BenchError as d, version as f, ASSET_CATEGORIES as i, evaluateBudgets as l, runBench as n, SIDES as o, renderMarkdown as r, STAGES as s, renderSummary as t, parseBudgets as u };
+//# sourceMappingURL=summary-063R0d9g.js.map