@ogygia/core 0.0.0 → 0.11.0

package/dist/insights/page-insights.js

@@ -0,0 +1,2157 @@
+import { without_comments as without_comments$1, without_runtime_marks } from "../runtime/beacon.js";
+import { hazard_fix, hazard_words } from "./hydration-hazards.js";
+import { OWN_PACKAGE_NAMES } from "../own-package.js";
+import "../runtime/concurrency.js";
+import { fn_label } from "./cpu.js";
+import { third_party, third_party_findings } from "./third-party.js";
+// src/insights/page-insights.ts
+/**
+* The Page tab's brain — pure, DOM-free, so the planted-problem answer key and the unit tests run it
+* on plain data. In: what the browser saw of this document (runtime/beacon.ts `beacon_page()`), the
+* regions on the page (read off the DOM by the tab), and the bus's hydration failures. Out: the
+* vitals rated, one row per island (wake → module → turn → hydrated, with what hit it), and the
+* findings — each naming the island(s) it is about, so the tab can light them up on the page.
+*
+* Every finding is something the browser MEASURED on this visit; nothing is guessed from source.
+* Thresholds are the public web-vitals ones; the island ones are chosen so a healthy page shows
+* none (the lab page's decoys hold that line).
+*/
+/** markup as a visitor's eyes compare it: no comments (Svelte's re-anchored block markers), no
+*  marks the runtime itself set on the regions inside */
+const without_comments = (html) => without_runtime_marks(without_comments$1(html));
+/** when an island's own work ended: its effects, when they ran after `hydrate()` returned */
+const work_end = (i) => Math.max(i.done, i.fx ?? 0);
+/** The runtime runs this many hole requests at once (runtime/session.ts `server_gate`). */
+const HOLE_GATE = 3;
+/**
+* The page seed's defer ids → the `page.data` key each stands for (top level and one level down):
+* the seed (`application/ogygia-page`, the flat devalue form) holds a defer marker `[name, i]` per
+* streamed promise, the marker's payload the id the streamed resolve script settles. From the whole
+* document's HTML or the seed script's own text. indexOf only.
+*/
+function defer_keys(html, marker = "OgygiaDefer") {
+	const out = /* @__PURE__ */ new Map();
+	let text = html;
+	const at = html.indexOf("application/ogygia-page");
+	if (at !== -1) {
+		const open = html.indexOf(">", at);
+		const close = html.indexOf("<\/script", open);
+		if (open === -1 || close === -1) return out;
+		text = html.slice(open + 1, close);
+	}
+	let arr;
+	try {
+		const parsed = JSON.parse(text);
+		if (!Array.isArray(parsed)) return out;
+		arr = parsed;
+	} catch {
+		return out;
+	}
+	const id_of = (i) => {
+		const v = typeof i === "number" ? arr[i] : void 0;
+		if (!Array.isArray(v) || v[0] !== marker) return null;
+		let p = arr[v[1]];
+		if (Array.isArray(p)) p = arr[p[0]];
+		return typeof p === "number" ? p : null;
+	};
+	const root = arr[0];
+	const data = root && typeof root.data === "number" ? arr[root.data] : void 0;
+	if (!data || typeof data !== "object" || Array.isArray(data)) return out;
+	for (const [key, idx] of Object.entries(data)) {
+		const id = id_of(idx);
+		if (id !== null) {
+			out.set(id, key);
+			continue;
+		}
+		const inner = typeof idx === "number" ? arr[idx] : void 0;
+		if (inner && typeof inner === "object" && !Array.isArray(inner)) for (const [k2, i2] of Object.entries(inner)) {
+			const id2 = id_of(i2);
+			if (id2 !== null) out.set(id2, `${key}.${k2}`);
+		}
+	}
+	return out;
+}
+const LIMITS = {
+	ttfb: [
+		800,
+		1800,
+		"TTFB"
+	],
+	fcp: [
+		1800,
+		3e3,
+		"FCP"
+	],
+	lcp: [
+		2500,
+		4e3,
+		"LCP"
+	],
+	cls: [
+		.1,
+		.25,
+		"CLS"
+	],
+	inp: [
+		200,
+		500,
+		"INP"
+	]
+};
+/** The browser a page ran in, by name and major version (`Safari 18`, `Chrome 141`, `Firefox 133`,
+*  `Edge 141`), from its user-agent string by plain search; null when it says nothing known. Some
+*  findings are one engine's (Safari reports no layout shifts; a preload one engine reuses another
+*  fetches again): the profiler's report and the Page tab name which. */
+function browser_of(ua) {
+	if (!ua) return null;
+	const major = (token) => {
+		const at = ua.indexOf(token);
+		if (at === -1) return "";
+		let v = "";
+		for (let i = at + token.length; i < ua.length; i++) {
+			const c = ua.charCodeAt(i);
+			if (c < 48 || c > 57) break;
+			v += ua[i];
+		}
+		return v ? " " + v : "";
+	};
+	if (ua.includes("Edg/")) return "Edge" + major("Edg/");
+	if (ua.includes("OPR/")) return "Opera" + major("OPR/");
+	if (ua.includes("Firefox/")) return "Firefox" + major("Firefox/");
+	if (ua.includes("Chrome/")) return "Chrome" + major("Chrome/");
+	if (ua.includes("Safari/") && ua.includes("Version/")) return "Safari" + major("Version/");
+	return null;
+}
+/** The engine family a user agent runs on: what makes two browsers measure a page differently (Edge
+*  and Chrome are one; Safari reports no layout shifts and refetches a preload Chromium reuses). */
+function engine_of(ua) {
+	const b = browser_of(ua);
+	if (!b) return null;
+	if (b.startsWith("Safari")) return "webkit";
+	if (b.startsWith("Firefox")) return "gecko";
+	return "chromium";
+}
+/** The packages a dev server's `_metadata.json` `optimized` keys name: `svelte/internal/client` →
+*  `svelte`, `@scope/lib/x` → `@scope/lib`, `ogygia > @neodrag/svelte` (a dependency's dependency) →
+*  `@neodrag/svelte`, each once. */
+function prebundled_names(keys) {
+	const names = /* @__PURE__ */ new Set();
+	for (const key of keys) {
+		const at = key.lastIndexOf(" > ");
+		const parts = (at === -1 ? key : key.slice(at + 3)).split("/");
+		names.add(parts[0].startsWith("@") ? `${parts[0]}/${parts[1] ?? ""}` : parts[0]);
+	}
+	return [...names];
+}
+/**
+* ONE PACKAGE, TWO COPIES ON THE DEV SERVER: of the scripts the page loaded, the ones served raw from a
+* package's folder (`/node_modules/<pkg>/…`, not `.vite/`) whose package Vite also pre-bundled — each
+* package once, with how many raw files and one of them. String search: it runs on the Page tab tick.
+* ogygia is one package under its two names (`ogygia` re-exports `@ogygia/core`): an app pre-bundles
+* `ogygia/…` while the compiler's imports load core's files raw.
+*/
+function dev_two_copies(urls, prebundled) {
+	const name_of = (pkg) => OWN_PACKAGE_NAMES.includes(pkg) ? "ogygia" : pkg;
+	const pre = new Set(prebundled.map(name_of));
+	const by = /* @__PURE__ */ new Map();
+	for (const u of urls) {
+		const nm = u.lastIndexOf("/node_modules/");
+		if (nm === -1 || u.includes("/node_modules/.vite/")) continue;
+		const parts = u.slice(nm + 14).split("?")[0].split("/");
+		const folder = parts[0].startsWith("@") ? `${parts[0]}/${parts[1] ?? ""}` : parts[0];
+		const pkg = name_of(folder);
+		if (!pre.has(pkg)) continue;
+		const g = by.get(pkg);
+		if (g) g.raw++;
+		else by.set(pkg, {
+			pkg,
+			raw: 1,
+			example: parts.slice(folder.startsWith("@") ? 2 : 1).join("/")
+		});
+	}
+	return [...by.values()].sort((a, b) => b.raw - a.raw);
+}
+/**
+* THE INLINE THRESHOLD THAT TAKES THE SMALL SHEETS OFF THE PAINT: Kit inlines its route stylesheets
+* under `inlineStyleThreshold` (ogygia's island sheets follow the same setting), as `<style>` in the
+* HTML — no request to wait on. Of the blocking build stylesheets (`/_app/immutable/`), the smallest
+* first, while each is 8 KB or less and the HTML grows by 24 KB at most: the threshold that inlines
+* them (just over the largest, in whole KB), how many, how many bytes. Null under two sheets. The
+* profiler's page weight (`style`) and the Page tab's resources (`css`) both ask it.
+*/
+function inline_threshold_tune(blocking) {
+	const sheets = blocking.filter((x) => (x.kind === "style" || x.kind === "css") && x.url.includes("/_app/immutable/") && x.bytes > 0).sort((a, b) => a.bytes - b.bytes);
+	let files = 0;
+	let bytes = 0;
+	let largest = 0;
+	for (const s of sheets) {
+		if (s.bytes > 8192 || bytes + s.bytes > 24576) break;
+		files++;
+		bytes += s.bytes;
+		largest = s.bytes;
+	}
+	if (files < 2) return null;
+	return {
+		threshold: (Math.floor(largest / 1024) + 1) * 1024,
+		files,
+		bytes
+	};
+}
+/** the named islands' own lines that draw differently in the browser (the dev server's reading) */
+function hazards_of(page, names) {
+	const want = new Set(names);
+	return (page.island_code ?? []).filter((c) => want.has(c.name)).flatMap((c) => c.hazards ?? []);
+}
+/** text sent uncompressed: named past this many bytes in all (the HTML and the files), a warning past
+*  the second (on a slow connection, ~100 KB uncompressed is most of a second more) */
+const UNCOMPRESSED_FINDING = 20480;
+const UNCOMPRESSED_WARN = 102400;
+/** eager islands below the first screen whose own code is this many wire bytes: a warning */
+const EAGER_BELOW_WARN = 51200;
+/** …and under this, its bytes are not the point: its hydration is */
+const EAGER_BELOW_SMALL = 4096;
+/** a shift counts against an island when it lands within this long after the island hydrated */
+const SHIFT_WINDOW_MS = 600;
+/** a hydrate step this long is a long task of its own */
+const LONG_HYDRATE_MS = 50;
+/** waiting this long for a turn after the module arrived */
+const LONG_QUEUE_MS = 150;
+/** a hole on the first screen whose fallback showed this long (a skeleton a visitor stares at) */
+const SLOW_HOLE_MS = 1e3;
+/** a wait with nothing ahead this long is the scheduler's own (its viewport snapshot waits at most
+*  48 ms by design, and its first report lands within a frame or two) */
+const HELD_IDLE_MS = 40;
+/** an in-app navigation this long before the new page shows is felt (a click that seems to do
+*  nothing); twice past a second, a warning */
+const SLOW_NAV_MS = 400;
+const SLOW_NAV_WARN_MS = 1e3;
+/** a module load this slow */
+const SLOW_LOAD_MS = 800;
+/** an above-the-fold island still asleep this long after the largest paint */
+const LATE_MS = 1e3;
+/** a wake-at-load island still asleep this long after the load event */
+const NEVER_MS = 3e3;
+/** a page of this many elements or more is named (the beacon reports from the same count) */
+const DOM_LARGE = 1500;
+/** early by less than this is a tie, not a lost click */
+const EARLY_SLACK_MS = 8;
+const EAGER = /* @__PURE__ */ new Set(["load", "idle"]);
+const round = (n, d = 1) => {
+	const k = 10 ** d;
+	return Math.round(n * k) / k;
+};
+function rate(key, value) {
+	const [good, poor] = LIMITS[key];
+	return value <= good ? "good" : value < poor ? "fair" : "poor";
+}
+/** Two markups that differ, and differ only in percent-encoding (`a/b` against `a%2Fb`): equal
+*  once both are decoded. A stray `%` that is not an escape (text reading "50%") makes it `false`. */
+function encoding_only(a, b) {
+	a = without_comments(a);
+	b = without_comments(b);
+	if (a === b || !a.includes("%") && !b.includes("%")) return false;
+	try {
+		return decodeURIComponent(a) === decodeURIComponent(b);
+	} catch {
+		return false;
+	}
+}
+/** Where two strings first differ, as a short "server … / now …" pair (the markup-changed proof). */
+function first_difference(a, b, span = 60) {
+	a = without_comments(a);
+	b = without_comments(b);
+	if (a === b) return null;
+	const n = Math.min(a.length, b.length);
+	let i = 0;
+	while (i < n && a.charCodeAt(i) === b.charCodeAt(i)) i++;
+	let from = Math.max(0, i - 24);
+	for (let j = i - 1; j >= Math.max(0, i - 24); j--) {
+		const c = a[j];
+		if (c === " " || c === ">") {
+			from = j + 1;
+			break;
+		}
+	}
+	return {
+		at: i,
+		server: a.slice(from, i + span),
+		now: b.slice(from, i + span)
+	};
+}
+/** At the first difference `at`: an attribute of a CUSTOM ELEMENT empty on the server (`name=""`)
+*  that the browser holds as `"true"` / `"false"` — written bare (Svelte hands a custom element its
+*  attributes as values, and a bare one's is `true`; measured: `={true}` and `=""` agree on both
+*  sides). Its name, the element's tag, the browser's value. */
+function boolean_attr_at(server, now, at) {
+	if (at < 2 || server.charCodeAt(at - 1) !== 34 || server.charCodeAt(at - 2) !== 61 || server.charCodeAt(at) !== 34) return null;
+	const v = now.startsWith("true\"", at) ? "true" : now.startsWith("false\"", at) ? "false" : null;
+	if (!v) return null;
+	let s = at - 2;
+	while (s > 0) {
+		const c = server.charCodeAt(s - 1);
+		if (c === 32 || c === 10 || c === 9 || c === 60 || c === 34) break;
+		s--;
+	}
+	const name = server.slice(s, at - 2);
+	const lt = server.lastIndexOf("<", s);
+	if (!name || lt === -1) return null;
+	let e = lt + 1;
+	while (e < s && server.charCodeAt(e) !== 32 && server.charCodeAt(e) !== 10 && server.charCodeAt(e) !== 9) e++;
+	const tag = server.slice(lt + 1, e);
+	return tag.indexOf("-") !== -1 ? {
+		name,
+		tag,
+		now: v
+	} : null;
+}
+function analyze_page(page, regions, failures = [], now = Infinity, cpu = null) {
+	/** " — mostly in `fn (file:line)`" from the CPU trace, for a finding about this island (or '') */
+	const why_cpu = (fp) => {
+		const f = fp ? cpu?.islands[fp]?.top[0] : cpu?.outside.top[0];
+		if (!f || f.self_ms < 5) return "";
+		if (fp && f.name === name_of(fp) && f.file) return `; mostly its own code (${f.file.slice(f.file.lastIndexOf("/") + 1)}${f.line !== null ? `:${f.line}` : ""})`;
+		return `; mostly ${fn_label(f)}`;
+	};
+	/** " — mostly <script>" from the long animation frames, when no CPU trace names it (or '') */
+	const why_script = () => {
+		const top = page.visit?.scripts?.[0];
+		if (!top || top.ms < 30) return "";
+		const q = top.url.indexOf("?");
+		const path = q === -1 ? top.url : top.url.slice(0, q);
+		let where = path;
+		try {
+			const u = new URL(path);
+			where = (page.visit?.origin && u.origin === page.visit.origin ? "" : u.host) + u.pathname;
+		} catch {}
+		return `; mostly ${where} (${Math.round(top.ms)} ms)`;
+	};
+	const findings = [];
+	const by_fp = /* @__PURE__ */ new Map();
+	for (const r of regions) if (r.fp && !by_fp.has(r.fp)) by_fp.set(r.fp, r);
+	const name_of = (fp, entry) => fp && by_fp.get(fp)?.name || entry || fp || "an island";
+	const vh = page.visit?.viewport?.[1] ?? 0;
+	const vw = page.visit?.viewport?.[0] ?? 0;
+	const vitals = [];
+	for (const key of [
+		"ttfb",
+		"fcp",
+		"lcp",
+		"cls",
+		"inp"
+	]) {
+		const v = page.vitals[key];
+		if (typeof v !== "number" || !Number.isFinite(v)) continue;
+		vitals.push({
+			key,
+			label: LIMITS[key][2],
+			value: v,
+			rating: rate(key, v)
+		});
+	}
+	const latest = /* @__PURE__ */ new Map();
+	for (const i of page.islands) latest.set(i.fp, i);
+	const island_tops = /* @__PURE__ */ new Map();
+	for (const r of regions) if (r.kind === "island" && typeof r.top === "number") (island_tops.get(r.name) ?? island_tops.set(r.name, []).get(r.name)).push(r.top);
+	const sheet_of = (url) => {
+		const q = url.indexOf(".svelte?");
+		return q === -1 ? null : url.slice(url.lastIndexOf("/", q) + 1, q);
+	};
+	const dev_css = page.dev ? (page.visit?.resources ?? []).filter((r) => r.url.includes("type=style")).map((r) => ({
+		end: r.end,
+		of: sheet_of(r.url)
+	})) : [];
+	const by_dev_css = (t, name, top) => dev_css.some((e) => {
+		if (e.end > t + 5 || t - e.end > 250) return false;
+		const tops = e.of && e.of !== name ? island_tops.get(e.of) : void 0;
+		return !(tops && typeof top === "number" && tops.every((x) => x > top));
+	});
+	const rows = [];
+	for (const i of latest.values()) {
+		const fact = by_fp.get(i.fp);
+		const lo = i.turn ?? i.loaded;
+		const end = work_end(i);
+		let shift = 0;
+		for (const s of page.shifts) if (s.fp === i.fp && s.t >= i.done - 16 && s.t <= end + SHIFT_WINDOW_MS && !by_dev_css(s.t, fact?.name ?? "", fact?.top)) shift += s.value;
+		let lt = 0;
+		for (const t of page.longtasks) {
+			const a = Math.max(t.t, lo);
+			const b = Math.min(t.t + t.ms, end);
+			if (b > a) lt += b - a;
+		}
+		const first = page.firsts.find((f) => f.fp === i.fp);
+		const early = first && first.t < i.done - EARLY_SLACK_MS ? i.done - first.t : null;
+		rows.push({
+			fp: i.fp,
+			name: name_of(i.fp, i.entry),
+			wake: fact?.wake ?? "",
+			load_ms: round(Math.max(0, i.loaded - i.t0)),
+			queue_ms: i.turn !== void 0 ? round(Math.max(0, i.turn - i.loaded)) : null,
+			hydrate_ms: round(Math.max(0, end - lo)),
+			t0: i.t0,
+			done: end,
+			recovered: !!i.recovered,
+			changed: !!i.changed,
+			shift: round(shift, 4),
+			longtask_ms: round(lt),
+			early_ms: early === null ? null : round(early),
+			below_fold: !!(fact && vh && typeof fact.top === "number" && fact.top >= vh),
+			cpu_ms: cpu ? cpu.islands[i.fp]?.ms ?? 0 : null
+		});
+	}
+	rows.sort((a, b) => a.t0 - b.t0);
+	for (const f of failures) {
+		let why = f.message.split("\n")[0].trim();
+		while (why.endsWith(".")) why = why.slice(0, -1);
+		findings.push({
+			code: "hydrate-failed",
+			severity: "error",
+			message: `${name_of(f.fp)} failed to hydrate: ${clip(why)}. It shows its server HTML and does nothing.`,
+			fix: "Open the browser console for the stack; the island module threw while loading or mounting.",
+			fps: f.fp ? [f.fp] : []
+		});
+	}
+	const all_recovered = rows.filter((r) => r.recovered);
+	const touched_page = !!page.restore_events?.length;
+	const same = touched_page ? [] : all_recovered.filter((r) => {
+		const i = page.islands.find((x) => x.fp === r.fp);
+		return !r.changed && !i?.healed && i?.ssr_bytes !== void 0;
+	});
+	const rewired = same.filter((r) => page.islands.find((x) => x.fp === r.fp)?.markers);
+	if (rewired.length) {
+		const one = rewired.length === 1;
+		const m = page.islands.find((x) => x.fp === rewired[0].fp).markers;
+		findings.push({
+			code: "recovered",
+			severity: "error",
+			message: `${list(rewired.map((r) => r.name))} threw away the server HTML and rendered again in the browser (a flash and a double render): ${one ? "its" : "their"} markup arrived with Svelte's hidden block markers unpaired (${one ? "" : `${rewired[0].name}: `}${m[0]} opening, ${m[1]} closing), and a render always pairs them. Something rewrote ${one ? "it" : "them"} between the server and the browser; the markup the component drew is the same.`,
+			fix: "Find the rewrite: a transformPageChunk or HTML middleware after the render, an edge rewriter, or a proxy that strips HTML comments. Keep it out of ogygia-region subtrees (or run it before ogygia’s render), and let comments through.",
+			fps: rewired.map((r) => r.fp)
+		});
+	}
+	const host_shape = same.filter((r) => !rewired.includes(r));
+	if (host_shape.length) {
+		const same = host_shape;
+		const one = same.length === 1;
+		findings.push({
+			code: "recovered",
+			severity: "error",
+			message: `${list(same.map((r) => r.name))} threw away the server HTML and rendered again in the browser (a flash and a double render) — and drew the same markup ${one ? "it" : "they"} threw away: only Svelte's hidden block markers disagreed. ${one ? "Its" : "Their"} code drew no other tree: the island's host and its server render disagree on structure (a wrapper of ogygia's), or a block ({#if}, {#each}) took another branch to the same output.`,
+			fix: "Report it to ogygia with this page and how the island is placed (keep:, inside a snippet, nested in another island): a host that hydrates in another shape than it renders is ogygia's bug. If a block's two branches draw the same thing, give them one branch.",
+			fps: same.map((r) => r.fp)
+		});
+	}
+	const recovered = all_recovered.filter((r) => !same.includes(r));
+	if (recovered.length) {
+		const touched = recovered.some((r) => page.islands.find((i) => i.fp === r.fp)?.healed) || touched_page;
+		const lines = touched ? [] : hazards_of(page, recovered.map((r) => r.name));
+		findings.push({
+			code: "recovered",
+			severity: "error",
+			message: `${list(recovered.map((r) => r.name))} threw away the server HTML and rendered again in the browser (a flash and a double render). ` + (touched ? "Something changed the markup between the server and hydration." : "No script in the browser edited " + (recovered.length === 1 ? "it" : "them") + " before waking: either its HTML was rewritten on the way from the server, or the component itself drew a different tree in the browser." + (lines.length ? ` ${hazard_words(lines)}` : "")),
+			fix: touched ? "Look for a script that edits the page before islands wake (an A/B tool, a DOM injector), or markup the browser rewrites (invalid nesting like a <div> in a <p>)." : lines.length ? `${hazard_fix(lines)} If it is none of them, look for a rewrite on the way (a transformPageChunk, an HTML middleware or edge rewriter).` : "Look for a rewrite on the way (a transformPageChunk, an HTML middleware or edge rewriter), then in its components for what the browser sees differently: a block ({#if}, {#each}, {#await}) whose condition reads `window`, `Date`, `Math.random()` or storage; a context set only on the server (a csr=false layout's setContext); an `await` at the top of its script; or markup the browser rewrites (a <div> in a <p>).",
+			fps: recovered.map((r) => r.fp)
+		});
+	}
+	const all_changed = rows.filter((r) => r.changed && !r.recovered);
+	const encoded = all_changed.filter((r) => {
+		const s = page.snapshots?.find((x) => x.fp === r.fp);
+		return !!s && encoding_only(s.ssr, s.hydrated);
+	});
+	const changed = all_changed.filter((r) => !encoded.includes(r));
+	if (encoded.length) {
+		const s = page.snapshots.find((x) => x.fp === encoded[0].fp);
+		const d = first_difference(s.ssr, s.hydrated);
+		findings.push({
+			code: "markup-encoded",
+			severity: "info",
+			message: `${list(encoded.map((r) => r.name))} rendered the same markup in the browser but for how a URL is encoded${d ? ` (server "${clip(d.server)}", browser "${clip(d.now)}")` : ""}: the same address, nothing changes on screen.`,
+			fix: "Nothing to fix for a visitor. If a test or a cache compares the HTML byte for byte, write the URL the same way on both sides (both encoded, or neither).",
+			fps: encoded.map((r) => r.fp)
+		});
+	}
+	if (changed.length) {
+		const snap = page.snapshots?.find((s) => s.fp === changed[0].fp);
+		const d = snap ? first_difference(snap.ssr, snap.hydrated) : null;
+		const bool = d && snap ? boolean_attr_at(without_comments(snap.ssr), without_comments(snap.hydrated), d.at) : null;
+		const changed_lines = hazards_of(page, changed.map((r) => r.name));
+		findings.push({
+			code: "markup-changed",
+			severity: "warn",
+			message: `${list(changed.map((r) => r.name))} rendered different markup in the browser than on the server, so the page changes as it wakes.` + (d ? ` First difference in ${changed[0].name}: server "${clip(d.server)}", browser "${clip(d.now)}".` : "") + (changed_lines.length && !bool ? ` ${hazard_words(changed_lines)}` : ""),
+			fix: bool ? `\`${bool.name}\` on <${bool.tag}> is written bare: the server writes ${bool.name}="" and Svelte's hydrate sets it to "${bool.now}" — Svelte hands a custom element its attributes as values, and a bare attribute's value is \`true\`. So the island's markup changes as it wakes, and CSS or the component reading the value sees two. Give it a value, the same on both sides: \`${bool.name}=""\` (or \`${bool.name}="true"\` when the component reads it as a flag).` : changed_lines.length ? hazard_fix(changed_lines) : "Render the same thing on both sides: move time, random values, and browser-only reads (window, localStorage) into an effect or an event, or pass them in as props.",
+			fps: changed.map((r) => r.fp)
+		});
+	}
+	const early = rows.filter((r) => r.early_ms !== null && r.wake !== "interaction");
+	const asleep_hit = page.firsts.map((f) => by_fp.get(f.fp)).filter((r) => !!r && r.kind === "island" && r.wake !== "interaction" && !r.hydrated && !latest.has(r.fp));
+	const early_labels = [...early.map((r) => `${r.name} (${Math.round(r.early_ms)} ms before it woke)`), ...asleep_hit.map((r) => `${r.name} (still asleep)`)];
+	if (early_labels.length) findings.push({
+		code: "early-click",
+		severity: "warn",
+		message: `A visitor reached ${list(early_labels)} before it was awake, so the first click did nothing.`,
+		fix: "Wake it sooner (a smaller module, or wake='load' if it is idle), or use wake='interaction' so the first click wakes it and is replayed.",
+		fps: [...early.map((r) => r.fp), ...asleep_hit.map((r) => r.fp)]
+	});
+	const shifted = rows.filter((r) => r.shift >= .01);
+	if (shifted.length) findings.push({
+		code: "hydration-shift",
+		severity: shifted.some((r) => r.shift >= .1) ? "warn" : "info",
+		message: `Hydrating ${list(shifted.map((r) => `${r.name} (CLS ${r.shift})`))} moved the layout: the island's size changed when it woke.` + (page.shifts_from === "boxes" ? " (Estimated: this browser reports no layout shifts, so each is the island's box before and after it woke, scored the way a layout shift is.)" : ""),
+		fix: "Render the island at its final size on the server (the same content, or a placeholder with a fixed height), so waking it changes nothing on screen.",
+		fps: shifted.map((r) => r.fp)
+	});
+	const heavy = rows.filter((r) => r.hydrate_ms >= LONG_HYDRATE_MS);
+	if (heavy.length) findings.push({
+		code: "long-hydrate",
+		severity: "warn",
+		message: `${list(heavy.map((r) => `${r.name} (${r.hydrate_ms} ms${why_cpu(r.fp)})`))} took one long task to hydrate. The page cannot respond to input while it runs.`,
+		fix: "Do less at mount: defer work the first paint does not need to an effect or idle callback, render long lists lazily, or split the island.",
+		fps: heavy.map((r) => r.fp)
+	});
+	const queued = rows.filter((r) => r.queue_ms !== null && r.queue_ms >= LONG_QUEUE_MS);
+	if (queued.length) {
+		const ahead = /* @__PURE__ */ new Map();
+		for (const q of queued) {
+			const a = q.t0 + q.load_ms;
+			const b = a + (q.queue_ms ?? 0);
+			for (const o of rows) {
+				if (o === q) continue;
+				const lo = o.done - o.hydrate_ms;
+				if (Math.min(b, o.done) - Math.max(a, lo) > 1) ahead.set(o.name, Math.max(ahead.get(o.name) ?? 0, o.hydrate_ms));
+			}
+		}
+		const top = [...ahead].sort((x, y) => y[1] - x[1]).slice(0, 3);
+		const held_for = /* @__PURE__ */ new Map();
+		for (const q of queued) {
+			if (!q.below_fold) continue;
+			const a = q.t0 + q.load_ms;
+			const b = a + (q.queue_ms ?? 0);
+			const spans = rows.filter((o) => o !== q && !o.below_fold).map((o) => ({
+				name: o.name,
+				s: o.t0,
+				e: o.t0 + o.load_ms,
+				failed: false
+			}));
+			for (const f of failures) {
+				if (!f.span || !f.fp) continue;
+				const top_px = by_fp.get(f.fp)?.top;
+				if (typeof top_px === "number" && vh && top_px >= vh) continue;
+				spans.push({
+					name: name_of(f.fp),
+					s: f.span[0],
+					e: f.span[1],
+					failed: true
+				});
+			}
+			for (const sp of spans) {
+				const hit = Math.min(b, sp.e) - Math.max(a, sp.s);
+				if (hit >= 50) held_for.set(sp.name, {
+					ms: Math.max(held_for.get(sp.name)?.ms ?? 0, hit),
+					failed: sp.failed
+				});
+			}
+		}
+		const holders = [...held_for].sort((x, y) => y[1].ms - x[1].ms).slice(0, 3);
+		const held_ms = holders[0]?.[1].ms ?? 0;
+		findings.push({
+			code: "queued",
+			severity: "info",
+			message: `${list(queued.map((r) => `${r.name} (${r.queue_ms} ms)`))} had its code but waited for its turn` + (holders.length && held_ms >= (top[0]?.[1] ?? 0) ? `, held for ${list(holders.map(([n, h]) => `${n} (${Math.round(h.ms)} ms${h.failed ? ", which then failed" : ""})`))} on the first screen, still loading ${holders.length === 1 ? "its" : "their"} code: viewport first, the islands a visitor sees wake before the ones below.` : top.length && top[0][1] >= 10 ? `, behind ${list(top.map(([n, m]) => `${n} (${Math.round(m)} ms)`))}: islands hydrate one per task, viewport first.` : ": islands hydrate after the page is parsed and painted, one per task, viewport first."),
+			fix: holders.length && held_ms >= (top[0]?.[1] ?? 0) ? `The first-screen island${holders.length === 1 ? "" : "s"} loading slowly ${holders.length === 1 ? "is" : "are"} the cost: make ${holders.length === 1 ? "its" : "their"} code smaller or faster to load${holders.some(([, h]) => h.failed) ? " (and fix the one that failed)" : ""}. The hold is bounded (a second), so a module that never comes cannot stall the rest.` : "The islands ahead of it are the cost. Make them lighter, or move islands that are not needed at load to wake='visible' or 'idle'.",
+			fps: queued.map((r) => r.fp)
+		});
+	}
+	{
+		const f = explain_held_open(page, rows, name_of);
+		if (f) findings.push(f);
+	}
+	{
+		const gate = Math.max(page.visit?.nav?.dcl ?? 0, page.visit?.paints?.fcp ?? 0) + 20;
+		const steps = rows.map((o) => [o.done - o.hydrate_ms, o.done]);
+		const held = [];
+		for (const r of rows) {
+			if (r.queue_ms === null || r.queue_ms < HELD_IDLE_MS) continue;
+			const a = Math.max(r.t0 + r.load_ms, gate);
+			const b = r.t0 + r.load_ms + r.queue_ms;
+			if (b - a < HELD_IDLE_MS) continue;
+			const busy = [];
+			for (let i = 0; i < rows.length; i++) {
+				const o = rows[i];
+				if (o === r) continue;
+				busy.push([steps[i][0], steps[i][1]]);
+				if (r.below_fold && !o.below_fold) busy.push([o.t0, o.t0 + o.load_ms]);
+			}
+			if (r.below_fold) for (const f of failures) {
+				if (!f.span || !f.fp) continue;
+				const top = by_fp.get(f.fp)?.top;
+				if (typeof top === "number" && vh && top >= vh) continue;
+				busy.push([f.span[0], f.span[1]]);
+			}
+			for (const f of failures) if (f.span && typeof f.turn === "number" && f.turn <= f.span[1]) busy.push([f.turn, f.span[1]]);
+			for (const t of page.longtasks) busy.push([t.t, t.t + t.ms]);
+			busy.sort((x, y) => x[0] - y[0]);
+			let covered = 0;
+			let at = a;
+			for (const [s, e] of busy) {
+				const lo = Math.max(s, at);
+				const hi = Math.min(e, b);
+				if (hi > lo) {
+					covered += hi - lo;
+					at = hi;
+				}
+			}
+			const idle = b - a - covered;
+			if (idle >= HELD_IDLE_MS) held.push({
+				r,
+				idle
+			});
+		}
+		if (held.length) {
+			const med = [...held].sort((x, y) => x.idle - y.idle)[held.length >> 1].idle;
+			findings.push({
+				code: "held-idle",
+				severity: "warn",
+				message: `${held.length === 1 ? held[0].r.name : `${held.length} islands`} had ${held.length === 1 ? "its" : "their"} code but waited ${held.length === 1 ? Math.round(held[0].idle) : `about ${Math.round(med)}`} ms for ${held.length === 1 ? "its" : "their"} turn while no other island was hydrating and nothing on the first screen was still loading. Nothing on the page explains the wait: ogygia's scheduler held ${held.length === 1 ? "it" : "them"}.`,
+				fix: "This is ogygia’s own wait, not your code. Please report it with this page: the island names, their wake, and whether it happened on load or on a scroll.",
+				fps: held.slice(0, 20).map((h) => h.r.fp)
+			});
+		}
+	}
+	const slow = rows.filter((r) => r.load_ms >= SLOW_LOAD_MS);
+	const compiled = slow.filter((r) => dev_compile_ms(page, r) >= r.load_ms * .5);
+	if (slow.length) findings.push({
+		code: "slow-module",
+		severity: "info",
+		message: `${list(slow.map((r) => `${r.name} (${r.load_ms} ms)`))} waited a long time for its code to arrive.` + (compiled.length ? ` ${compiled.length === slow.length ? "Most of the wait" : `For ${list(compiled.map((r) => r.name))}, most of it`} was the dev server compiling the files on this first request: reload for a warm reading.` : ""),
+		fix: "Check the island's imports in the Bytes tab: a big dependency, or a chain of imports loaded one after another. (Dev serves modules one by one; a build is faster.)",
+		fps: slow.map((r) => r.fp)
+	});
+	const eager_below = regions.filter((r) => r.kind === "island" && EAGER.has(r.wake) && !r.hidden && vh && typeof r.top === "number" && r.top >= vh);
+	if (eager_below.length) {
+		const own = /* @__PURE__ */ new Map();
+		for (const r of eager_below) if (r.own_bytes) own.set(r.name, r.own_bytes);
+		const own_total = [...own.values()].reduce((s, n) => s + n, 0);
+		const kb = (n) => n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`;
+		const one = new Set(eager_below.map((r) => r.name)).size === 1;
+		findings.push({
+			code: "eager-offscreen",
+			severity: own_total >= EAGER_BELOW_WARN ? "warn" : "info",
+			message: `${list(eager_below.map((r) => r.name))} start${one ? "s" : ""} below the first screen but load${one ? "s" : ""} code at page load.` + (!own_total ? "" : own_total < EAGER_BELOW_SMALL ? ` Only ${kb(own_total)} of it is ${one ? "its own" : "theirs alone"} (the rest other islands load too): a later wake saves ${one ? "its" : "their"} hydration on the first load more than bytes.` : ` ${kb(own_total)} of it ${one ? "is its own" : "is theirs alone"} (no other island loads it): that much leaves the first load with a later wake.`),
+			fix: "Use wake='visible': its code loads when it scrolls into view, and the islands on the first screen wake sooner.",
+			fps: eager_below.map((r) => r.fp)
+		});
+	}
+	if (page.dev && page.prebundled?.length) {
+		const twice = dev_two_copies((page.visit?.resources ?? []).filter((r) => r.type === "script").map((r) => r.url), page.prebundled);
+		if (twice.length) {
+			const top = twice[0];
+			findings.push({
+				code: "dev-two-copies",
+				severity: "warn",
+				message: `${list(twice.map((t) => t.pkg))} load${twice.length === 1 ? "s" : ""} twice on the dev server: pre-bundled by Vite (.vite/deps) and raw from ${twice.length === 1 ? "its" : "their"} folder (${top.pkg}: ${top.raw} file${top.raw === 1 ? "" : "s"}, e.g. ${top.example}). A module that keeps state then has two copies: one side writes what the other never reads, and the bug shows only in dev.`,
+				fix: `Give ${twice.length === 1 ? "it" : "each"} one copy: add ${twice.map((t) => `'${t.pkg}'`).join(", ")} to \`optimizeDeps.exclude\` so every import is served raw, or to \`optimizeDeps.include\` with every path it is imported by. (ogygia excludes itself; check the app's own \`optimizeDeps.include\` does not list it.)`,
+				fps: []
+			});
+		}
+	}
+	const broke = new Set(failures.map((f) => f.fp));
+	const eager_hidden = regions.filter((r) => r.kind === "island" && EAGER.has(r.wake) && r.hidden && !r.headless && !broke.has(r.fp));
+	const headless = regions.filter((r) => r.kind === "island" && EAGER.has(r.wake) && r.headless && !broke.has(r.fp) && (r.own_bytes ?? 0) >= EAGER_BELOW_SMALL);
+	if (headless.length) {
+		const own = /* @__PURE__ */ new Map();
+		for (const r of headless) own.set(r.name, r.own_bytes);
+		const names = [...own.keys()];
+		const one = names.length === 1;
+		const total = [...own.values()].reduce((s, n) => s + n, 0);
+		const kb = (n) => `${(n / 1024).toFixed(1)} KB`;
+		findings.push({
+			code: "headless-island",
+			severity: total >= EAGER_BELOW_WARN ? "warn" : "info",
+			message: `${list(names.map((n) => `${n} (${kb(own.get(n))} of its own)`))} render${one ? "s" : ""} nothing to see — only hidden markers — and load${one ? "s" : ""} ${one ? "its" : "their"} code at page load to run ${one ? "its" : "their"} effects.`,
+			fix: `Worth it if the effects must run at start. Otherwise ${headless.some((r) => r.wake === "load") ? "run them later (`wake: 'idle'`, after the page settles), or " : ""}move them into an island the visitor touches, where they load with it.`,
+			fps: headless.map((r) => r.fp)
+		});
+	}
+	if (eager_hidden.length) {
+		const names = [...new Set(eager_hidden.map((r) => r.name))];
+		const one = names.length === 1;
+		const query_of = /* @__PURE__ */ new Map();
+		for (const r of eager_hidden) if (r.shows_at && !query_of.has(r.name)) query_of.set(r.name, r.shows_at);
+		const shown = names.filter((n) => query_of.has(n));
+		const unknown = names.filter((n) => !query_of.has(n));
+		const own = /* @__PURE__ */ new Map();
+		for (const r of eager_hidden) if (r.own_bytes) own.set(r.name, r.own_bytes);
+		const own_total = [...own.values()].reduce((s, n) => s + n, 0);
+		const kb = (n) => n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`;
+		const shows = shown.length ? [one ? `the page's CSS shows it only at ${query_of.get(shown[0])}` : `the page's CSS shows ${shown.map((n) => `${n} only at ${query_of.get(n)}`).join(", ")}`] : [];
+		const bare = unknown.length ? one ? "no box of its own, hidden by its CSS or empty" : `${list(unknown)} ${unknown.length === 1 ? "has" : "have"} no box of ${unknown.length === 1 ? "its" : "their"} own (hidden by CSS, or empty)` : "";
+		const first_q = shown.length ? query_of.get(shown[0]) : "";
+		findings.push({
+			code: "eager-hidden",
+			severity: own_total >= EAGER_BELOW_WARN ? "warn" : "info",
+			message: `${list(names)} draw${one ? "s" : ""} nothing on this screen (${vw ? `${vw} px wide` : "this size"}) but load${one ? "s" : ""} ${one ? "its" : "their"} code at page load: ${[...shows, ...bare ? [bare] : []].join("; ")}.` + (own_total ? ` ${kb(own_total)} of that code ${one ? "is its own" : "is theirs alone"}.` : ""),
+			fix: (shown.length === 1 ? `Wake ${one ? "it" : shown[0]} by that media query (\`with { wake: '${first_q}' }\`): the code loads only on the screens that show it, and wakes there as the screen changes.` : shown.length ? `Wake each by its media query (${shown.map((n) => `${n}: \`with { wake: '${query_of.get(n)}' }\``).join(", ")}): the code loads only on the screens that show them, and wakes there as the screen changes.` : "") + (unknown.length ? `${shown.length ? ` For ${list(unknown)}: if` : "If"} it shows only on some screens, wake it by a media query (\`with { wake: '(max-width: …)' }\`); if it opens on a click, \`wake: 'interaction'\`.` : ""),
+			fps: eager_hidden.map((r) => r.fp)
+		});
+	}
+	const lcp = page.visit?.paints?.lcp ?? page.vitals.lcp;
+	if (typeof lcp === "number") {
+		const late = rows.filter((r) => EAGER.has(r.wake) && !r.below_fold && r.done - lcp >= LATE_MS);
+		const compiling = late.filter((r) => r.done - lcp - dev_compile_ms(page, r) < LATE_MS);
+		if (late.length) findings.push({
+			code: "late-interactive",
+			severity: compiling.length === late.length ? "info" : "warn",
+			message: `${list(late.map((r) => `${r.name} (${Math.round(r.done - lcp)} ms)`))} on the first screen woke long after the page looked finished (LCP ${Math.round(lcp)} ms). A visitor can click it and get nothing in that gap.` + (compiling.length ? ` ${compiling.length === late.length ? "Most of the gap" : `For ${list(compiling.map((r) => r.name))}, most of it`} was the dev server compiling its code on this first request: reload for a warm reading.` : ""),
+			fix: "Shrink what it loads and what hydrates before it, or render it as plain HTML (a lake) if it does not need to be interactive at once.",
+			fps: late.map((r) => r.fp)
+		});
+		const lcp_fp = page.visit?.paints?.lcp_fp;
+		const hit = lcp_fp ? rows.find((r) => r.fp === lcp_fp) : void 0;
+		if (hit && (hit.recovered || hit.changed && (page.visit?.paints?.lcp_replaced || lcp >= hit.done))) findings.push({
+			code: "lcp-repaint",
+			severity: "warn",
+			message: `The largest paint (${page.visit?.paints?.lcp_tag ?? "element"}) is inside ${hit.name}, which changed its markup on hydration — the biggest thing on screen repaints as it wakes.`,
+			fix: "Make the island render the same markup on both sides (see the markup finding), or keep the hero out of the island.",
+			fps: [hit.fp]
+		});
+	}
+	const lp = page.visit?.paints;
+	if (lp?.lcp_lazy) {
+		const file = lp.lcp_url ? lp.lcp_url.slice(lp.lcp_url.lastIndexOf("/") + 1).split("?")[0] : "";
+		findings.push({
+			code: "lcp-lazy",
+			severity: "warn",
+			message: `The largest paint (${lp.lcp_tag ?? "img"}${file ? ` ${file}` : ""}${lp.lcp_fp ? ` in ${by_fp.get(lp.lcp_fp)?.name ?? lp.lcp_fp.slice(0, 8)}` : ""}) carries loading="lazy": the browser waits to fetch it until layout says it is on screen, and puts it behind the page's other downloads.`,
+			fix: "Drop `loading=\"lazy\"` on images of the first screen (keep it for the ones below), and give the hero `fetchpriority=\"high\"`.",
+			fps: lp.lcp_fp ? [lp.lcp_fp] : []
+		});
+	}
+	const fcp_at = page.visit?.paints?.fcp ?? page.vitals.fcp;
+	const faces = page.visit?.font_faces;
+	if (faces?.length && typeof fcp_at === "number") {
+		const late = [];
+		for (const r of page.visit?.resources ?? []) {
+			if (r.type !== "font" || r.end - fcp_at < 100) continue;
+			const face = faces.find((f) => f.urls.includes(r.url));
+			if (!face || face.display !== "auto" && face.display !== "block") continue;
+			if (late.some((l) => l.family === face.family)) continue;
+			late.push({
+				family: face.family,
+				display: face.display,
+				after: Math.round(r.end - fcp_at),
+				file: r.url.slice(r.url.lastIndexOf("/") + 1).split("?")[0]
+			});
+		}
+		const html_end = page.visit?.nav?.res_end;
+		const held = [];
+		if (!late.length && typeof html_end === "number" && fcp_at - html_end >= 300) for (const r of page.visit?.resources ?? []) {
+			if (r.type !== "font" || r.end > fcp_at || fcp_at - r.end > 60) continue;
+			const face = faces.find((f) => f.urls.includes(r.url));
+			if (!face || face.display !== "auto" && face.display !== "block") continue;
+			if (held.some((l) => l.family === face.family)) continue;
+			held.push({
+				family: face.family,
+				display: face.display,
+				at: Math.round(r.end),
+				file: r.url.slice(r.url.lastIndexOf("/") + 1).split("?")[0]
+			});
+		}
+		if (late.length || held.length) findings.push({
+			code: "font-invisible",
+			severity: "warn",
+			message: late.length ? `Text in ${list(late.map((l) => `'${l.family}' (${l.file}, ${l.after} ms after the first paint)`))} stayed invisible until its font arrived: font-display is ${late[0].display}, so the browser hides the text, up to 3 s, rather than show a fallback.` : `Text in ${list(held.map((l) => `'${l.family}' (${l.file}, in at ${l.at} ms)`))} held the first paint: nothing showed until its font arrived (the first paint at ${Math.round(fcp_at)} ms, ${Math.round(fcp_at - html_end)} ms after the HTML). Font-display is ${held[0].display}, so the browser hides the text, up to 3 s, rather than show a fallback.`,
+			fix: "Give the @font-face `font-display: swap` (the text shows in a fallback at once, then switches) or `optional` (no switch, no shift), and preload the font file the first screen needs.",
+			fps: []
+		});
+	}
+	{
+		const fcp = page.visit?.paints?.fcp ?? page.vitals.fcp;
+		const at = page.dock_open_at;
+		if (typeof at === "number" && typeof fcp === "number" && fcp >= at && fcp - at <= 250) findings.push({
+			code: "dock-in-paint",
+			severity: "info",
+			message: `The devtools dock was open as this page loaded (from ${Math.round(at)} ms), and the first paint was recorded just after it (${Math.round(fcp)} ms): the browser may have counted the dock's own text as the page's first paint${page.browser?.startsWith("Safari") ? ` — ${page.browser} its largest paint too` : ""}, so the paint numbers here can read early.`,
+			fix: "Close the dock and reload: the page's own paints are measured without it. (Open it again after the load; it reads the same visit.)",
+			fps: []
+		});
+	}
+	const big = (page.visit?.images_oversized ?? []).map((i) => ({
+		...i,
+		waste: Math.round(i.bytes * (1 - i.shown[0] * i.shown[1] * i.dpr * i.dpr / (i.natural[0] * i.natural[1])))
+	})).sort((a, b) => b.waste - a.waste);
+	const big_waste = big.reduce((n, i) => n + i.waste, 0);
+	if (big.length && big_waste >= 5e4) {
+		const kb = (n) => `${Math.round(n / 1024)} KB`;
+		const file = (u) => u.slice(u.lastIndexOf("/") + 1).split("?")[0] || u;
+		const named = big.slice(0, 3).map((i) => `${file(i.url)} (${i.natural[0]}×${i.natural[1]}, shown at ${i.shown[0]}×${i.shown[1]}${i.dpr !== 1 ? ` on a ${i.dpr}× screen` : ""}${i.fp ? ` in ${name_of(i.fp)}` : ""})`);
+		findings.push({
+			code: "image-oversized",
+			severity: "warn",
+			message: `${list(big.length > 3 ? [...named, `${big.length - 3} more`] : named)} ${big.length === 1 ? "is" : "are"} sent far bigger than shown: about ${kb(big_waste)} of ${kb(big.reduce((n, i) => n + i.bytes, 0))} is pixels nobody sees.`,
+			fix: "Serve each image near the size it shows at: a `srcset` with a few widths and a `sizes` that says how wide it shows (the browser picks the smallest that is sharp), or resize the file itself.",
+			fps: [...new Set(big.flatMap((i) => i.fp ? [i.fp] : []))]
+		});
+	}
+	const jank = page.visit?.scroll_jank ?? [];
+	const jank_ms = jank.reduce((n, j) => n + j.ms, 0);
+	const worst = jank.reduce((m, j) => Math.max(m, j.ms), 0);
+	if (jank.length && (worst >= 100 || jank_ms >= 200)) {
+		const file = (u) => {
+			const q = u.indexOf("?");
+			const p = q === -1 ? u : u.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1) || "an inline script";
+		};
+		const by = /* @__PURE__ */ new Map();
+		for (const j of jank) for (const s of j.scripts) {
+			const fn = s.fn.length > 2 ? s.fn : "";
+			const where = s.island ? `${s.island}'s code` : file(s.url);
+			const label = `${fn ? `${fn} (${where})` : where}${s.invoker ? `, run by ${s.invoker}` : ""}`;
+			const e = by.get(label);
+			if (e) e.ms += s.ms;
+			else by.set(label, {
+				label,
+				ms: s.ms
+			});
+		}
+		const top = [...by.values()].sort((a, b) => b.ms - a.ms)[0];
+		findings.push({
+			code: "scroll-jank",
+			severity: "warn",
+			message: `Scrolling stalled: ${jank.length} frame${jank.length === 1 ? "" : "s"} took ${jank.length === 1 ? `${Math.round(worst)} ms` : `up to ${Math.round(worst)} ms (${Math.round(jank_ms)} ms in all)`} while the page scrolled${top ? `, mostly ${top.label} (${Math.round(top.ms)} ms)` : ""}: the page could not follow the visitor's scroll.`,
+			fix: "Do little in a scroll handler: mark it passive, do the work once per frame (requestAnimationFrame), or watch with an IntersectionObserver instead of measuring on every scroll event.",
+			fps: []
+		});
+	}
+	const forced = page.visit?.forced_layout ?? [];
+	if (forced.length) {
+		const file = (u) => {
+			const q = u.indexOf("?");
+			const p = q === -1 ? u : u.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1) || "an inline script";
+		};
+		const groups = /* @__PURE__ */ new Map();
+		for (const f of forced) {
+			let best;
+			let best_overlap = 0;
+			for (const i of page.islands) {
+				const from = i.turn ?? i.loaded;
+				const overlap = Math.min(work_end(i), f.end) - Math.max(from, f.start);
+				if (overlap > best_overlap) {
+					best_overlap = overlap;
+					best = i;
+				}
+			}
+			const key = best ? best.fp : `${f.url}\0${f.fn}`;
+			const label = best ? `${name_of(best.fp, best.entry)} while it hydrated` : `${file(f.url)}${f.fn ? ` (${f.fn})` : ""}`;
+			const g = groups.get(key);
+			if (g) {
+				g.ms += f.ms;
+				g.n++;
+			} else groups.set(key, {
+				label,
+				...best ? { fp: best.fp } : {},
+				ms: f.ms,
+				n: 1
+			});
+		}
+		const top = [...groups.values()].filter((g) => g.ms >= 30).sort((a, b) => b.ms - a.ms);
+		if (top.length) findings.push({
+			code: "forced-layout",
+			severity: "warn",
+			message: `${list(top.slice(0, 3).map((g) => `${g.label} (${Math.round(g.ms)} ms${g.fp ? why_cpu(g.fp) : ""})`))} made the browser recalculate style and layout in the middle of running: the code read sizes or positions (offsetWidth, getBoundingClientRect, getComputedStyle) after changing the page, so each read laid the page out again.`,
+			fix: "Read every size first, then make every change (or put the changes in one requestAnimationFrame); never read layout between DOM writes in a loop. Sizes CSS can handle (width from the content, a fixed aspect ratio) need no read at all.",
+			fps: top.flatMap((g) => g.fp ? [g.fp] : [])
+		});
+	}
+	const below = page.visit?.images_eager_below ?? [];
+	const below_bytes = below.reduce((n, i) => n + i.bytes, 0);
+	if (below.length && below_bytes >= 1e5) {
+		const kb = (n) => `${Math.round(n / 1024)} KB`;
+		const file = (u) => u.slice(u.lastIndexOf("/") + 1).split("?")[0] || u;
+		const vh = page.visit?.viewport?.[1];
+		const by_file = /* @__PURE__ */ new Map();
+		for (const i of below) {
+			const g = by_file.get(file(i.url));
+			if (g) {
+				g.n++;
+				g.bytes += i.bytes;
+				g.top = Math.min(g.top, i.top);
+			} else by_file.set(file(i.url), {
+				n: 1,
+				bytes: i.bytes,
+				top: i.top,
+				...i.fp ? { fp: i.fp } : {}
+			});
+		}
+		const groups = [...by_file].sort((a, b) => b[1].bytes - a[1].bytes);
+		const named = groups.slice(0, 3).map(([f, g]) => `${f}${g.n > 1 ? ` ×${g.n}` : ""} (${kb(g.bytes)}, ${vh ? `${(g.top / vh).toFixed(1)} screens` : `${g.top}px`} down${g.fp ? `, in ${name_of(g.fp)}` : ""})`);
+		findings.push({
+			code: "images-eager-below",
+			severity: "warn",
+			message: `${list(groups.length > 3 ? [...named, `${groups.length - 3} more`] : named)} ${below.length === 1 ? "loads" : "load"} at start though far below the first screen: ${kb(below_bytes)} that competed with the first screen's files for the network.`,
+			fix: "Give images below the first screen `loading=\"lazy\"` (and their width and height, so nothing shifts when they arrive): the browser fetches them as the visitor scrolls near.",
+			fps: [...new Set(below.flatMap((i) => i.fp ? [i.fp] : []))]
+		});
+	}
+	const unsized = page.visit?.images_unsized ?? [];
+	if (unsized.length) {
+		const file = (u) => u.slice(u.lastIndexOf("/") + 1).split("?")[0] || u;
+		const names = [...new Set(unsized.map(file))];
+		const cls = page.vitals.cls;
+		const moved = typeof cls === "number" && cls >= .1;
+		findings.push({
+			code: "img-unsized",
+			severity: moved ? "warn" : "info",
+			message: `${names.length === 1 ? `${names[0]} has` : `${list(names.slice(0, 4))}${names.length > 4 ? ` and ${names.length - 4} more` : ""} have`} no size the browser knows before the file comes (no width and height, no CSS aspect-ratio), so what is below moves when it arrives${moved ? ` — and this page moved (CLS ${Math.round(cls * 100) / 100})` : " (unless CSS sets its height)"}.`,
+			fix: "Give each `<img>` its width and height attributes (the file’s own; CSS can still scale it), or a CSS aspect-ratio: the browser then holds the room from the first paint.",
+			fps: []
+		});
+	}
+	const dom = page.visit?.dom;
+	if (dom && dom.nodes >= 1500) {
+		const top = dom.islands[0];
+		const held = top && top.nodes >= dom.nodes * .3 ? top : void 0;
+		const n = (x) => x.toLocaleString("en-US");
+		findings.push({
+			code: "dom-large",
+			severity: "warn",
+			message: `The page has ${n(dom.nodes)} elements${dom.depth ? ` (nested ${dom.depth} deep; the most children, ${n(dom.widest.children)}, under ${dom.widest.at})` : ""}` + (held ? `, ${n(held.nodes)} of them inside ${name_of(held.fp)}: an island hydrates over every element of its own, so it pays for all of them as it wakes.` : ": every element costs memory and style and layout work on each change."),
+			fix: held ? `Render fewer at once in ${name_of(held.fp)}: page or window a long list (only what is on screen), and keep big static markup outside the island (a lake costs nothing to hydrate).` : "Render fewer at once: page or window long lists (only what is on screen), and flatten markup that nests wrappers for layout alone.",
+			fps: held ? [held.fp] : []
+		});
+	}
+	const load_end = page.visit?.nav?.load ?? 0;
+	if (load_end && now - load_end >= NEVER_MS) {
+		const failed = new Set(failures.map((f) => f.fp));
+		const asleep = regions.filter((r) => r.kind === "island" && r.wake === "load" && !r.hydrated && !failed.has(r.fp));
+		if (asleep.length) findings.push({
+			code: "never-woke",
+			severity: "warn",
+			message: `${list(asleep.map((r) => r.name))} should have woken at load but ${asleep.length === 1 ? "is" : "are"} still asleep ${Math.round((now - load_end) / 1e3)} s later.`,
+			fix: "Look in the console for a module that never loaded, or an island nested in one that has not woken (it wakes with its parent).",
+			fps: asleep.map((r) => r.fp)
+		});
+	}
+	for (const v of vitals) {
+		if (v.rating === "good") continue;
+		const head = `${v.label} is ${v.key === "cls" ? v.value : `${Math.round(v.value)} ms`} (${v.rating === "poor" ? "poor" : "needs work"}; good is ${v.key === "cls" ? "≤ " + LIMITS[v.key][0] : "≤ " + LIMITS[v.key][0] + " ms"}).`;
+		const why = v.key === "inp" ? explain_interaction(page.visit?.interaction, rows, name_of, page.visit?.origin, page.interaction_cpu) : v.key === "lcp" ? explain_lcp(page, name_of) : v.key === "cls" ? explain_cls(page, rows, name_of) : v.key === "ttfb" ? explain_ttfb(page) : v.key === "fcp" ? explain_fcp(page) : null;
+		findings.push({
+			code: why ? v.key === "inp" ? "slow-interaction" : v.key === "lcp" ? "slow-lcp" : v.key === "ttfb" ? "slow-ttfb" : v.key === "fcp" ? "slow-fcp" : "shift-cause" : `vital-${v.key}`,
+			severity: why && "note" in why && why.note ? "info" : v.rating === "poor" ? "warn" : "info",
+			message: why ? `${head} ${why.message}` : head,
+			...why ? { fix: why.fix } : {},
+			fps: v.key === "lcp" && page.visit?.paints?.lcp_fp ? [page.visit.paints.lcp_fp] : why?.fps ?? [],
+			...(v.key === "ttfb" || v.key === "cls") && why && "note" in why && why.note ? { dev_compile: true } : {}
+		});
+	}
+	if (page.visit?.nav?.start_hidden) findings.push({
+		code: "first-byte-hidden",
+		severity: "info",
+		message: `The browser gave no time for this page's request and first byte (${page.browser?.startsWith("Safari") ? "Safari does" : "it does"} that for a cross-origin-isolated page, one sent with Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy): the time to first byte and its parts are missing here, not zero. The rest of the visit stands.`,
+		fix: "Read the first byte from a Chromium visit, or from the server side (the profiler times the render itself).",
+		fps: []
+	});
+	const fcp = page.visit?.paints?.fcp ?? page.vitals.fcp ?? Infinity;
+	const blocking = (page.visit?.resources ?? []).filter((r) => r.blocking && r.start < fcp).map((r) => ({
+		url: r.url,
+		ms: round(r.end - r.start),
+		bytes: r.transfer ?? r.size ?? 0
+	})).sort((a, b) => b.ms - a.ms);
+	const html_at = page.visit?.nav?.res_start ?? page.visit?.nav?.res_end ?? 0;
+	let blocked_until = 0;
+	for (const r of page.visit?.resources ?? []) if (r.blocking && r.start < fcp) blocked_until = Math.max(blocked_until, r.end);
+	const held_ms = blocking.length ? Math.max(0, blocked_until - html_at) : 0;
+	const fcp_card = held_ms >= 200 ? findings.find((f) => f.code === "slow-fcp" && f.message.includes("waiting for") && f.message.includes(short(blocking[0].url))) : void 0;
+	const tune = held_ms >= 200 ? inline_threshold_tune((page.visit?.resources ?? []).filter((r) => r.blocking && r.start < fcp).map((r) => ({
+		url: r.url,
+		kind: r.type,
+		bytes: r.size ?? 0
+	}))) : null;
+	const tune_text = tune ? `With \`kit: { inlineStyleThreshold: ${tune.threshold} }\` in svelte.config.js, ${tune.files} of these stylesheets (${(tune.bytes / 1024).toFixed(1)} KB) arrive inside the HTML: ${blocking.length - tune.files} file${blocking.length - tune.files === 1 ? "" : "s"} left to wait on instead of ${blocking.length}.` : "";
+	if (fcp_card) {
+		if (held_ms >= 600) fcp_card.severity = "warn";
+		if (tune_text) fcp_card.fix = `${fcp_card.fix ?? ""} ${tune_text}`.trim();
+	} else if (held_ms >= 200) findings.push({
+		code: "render-blocking",
+		severity: held_ms >= 600 ? "warn" : "info",
+		message: `${blocking.length} file${blocking.length === 1 ? "" : "s"} blocked the first paint for ${Math.round(held_ms)} ms after the HTML arrived; the slowest took ${Math.round(blocking[0].ms)} ms (${short(blocking[0].url)}).`,
+		fix: tune_text ? `${tune_text} Merge or trim the rest, and load scripts as modules (they do not block).` : "Inline small stylesheets, merge the rest, and load scripts as modules (they do not block).",
+		fps: []
+	});
+	const bytes_by = /* @__PURE__ */ new Map();
+	if (page.visit?.resource_totals?.length) for (const t of page.visit.resource_totals) bytes_by.set(t.type, { ...t });
+	else for (const r of page.visit?.resources ?? []) {
+		const b = bytes_by.get(r.type) ?? {
+			type: r.type,
+			count: 0,
+			transfer: 0,
+			size: 0
+		};
+		b.count++;
+		b.transfer += r.transfer ?? 0;
+		b.size += r.size ?? 0;
+		bytes_by.set(r.type, b);
+	}
+	let longtask_ms = 0;
+	for (const t of page.longtasks) longtask_ms += t.ms;
+	const in_hydration = rows.reduce((s, r) => s + r.longtask_ms, 0);
+	const other = longtask_ms - in_hydration;
+	if (other >= 150) {
+		const biggest = page.longtasks.reduce((m, t) => t.ms > m.ms ? t : m, page.longtasks[0]);
+		const frames = page.longtasks_from === "frames";
+		findings.push({
+			code: "long-tasks",
+			severity: "info",
+			message: frames ? `The main thread stalled ${Math.round(other)} ms outside any island's hydration (the longest ${Math.round(biggest.ms)} ms at ${Math.round(biggest.t)} ms). This browser reports no long tasks: these are the frames it drew more than 50 ms late, so each is the stall a visitor saw, not the script's exact span. Page scripts, not islands, held the main thread.` : `${Math.round(other)} ms of long tasks ran outside any island's hydration (the longest ${Math.round(biggest.ms)} ms at ${Math.round(biggest.t)} ms${why_cpu(null) || why_script()}). Page scripts, not islands, held the main thread.`,
+			fix: "Record a Performance trace around that time to see the script; third-party tags are the usual cause.",
+			fps: []
+		});
+	}
+	const warns = page.visit?.warnings ?? [];
+	if (warns.length) {
+		const by = /* @__PURE__ */ new Map();
+		for (const w of warns) {
+			const key = `${w.code}|${w.file ?? ""}`;
+			const g = by.get(key) ?? {
+				code: w.code,
+				file: w.file,
+				fps: /* @__PURE__ */ new Set(),
+				n: 0
+			};
+			g.n++;
+			if (w.fp) g.fps.add(w.fp);
+			by.set(key, g);
+		}
+		const groups = [...by.values()];
+		const fps = [...new Set(groups.flatMap((g) => [...g.fps]))];
+		findings.push({
+			code: "svelte-hydration-warning",
+			severity: "warn",
+			message: `Svelte warned while hydrating: ${groups.slice(0, 3).map((g) => `${g.code}${g.file ? ` in ${short(g.file)}` : ""}${g.fps.size ? ` (${list([...g.fps].map((fp) => name_of(fp)))})` : ""}${g.n > 1 ? ` ×${g.n}` : ""}`).join("; ")}. The server and the browser disagreed; Svelte kept the server's value, so the screen does not show it.`,
+			fix: "Make the value the same on both sides (a value only the server has belongs in props; time, random and browser-only reads belong in an effect).",
+			fps
+		});
+	}
+	const empty = [...new Set(page.empty_slots ?? [])];
+	if (empty.length) findings.push({
+		code: "empty-slot",
+		severity: "warn",
+		message: `${list(empty.map((fp) => name_of(fp)))} shows its children in a slot with nothing in it: an island's children are the server's HTML, so children the server did not render (a condition that was false there) cannot appear in the browser.`,
+		fix: "Render the children on the server and hide them (the hidden attribute, or CSS) instead of wrapping them in {#if}; or make the part that appears later its own island inside the component.",
+		fps: empty
+	});
+	const kb = (n) => `${Math.round(n / 1024)} KB`;
+	for (const c of page.island_code ?? []) {
+		const b = c.barrels[0];
+		if (b) findings.push({
+			code: "island-barrel",
+			severity: "warn",
+			message: `${c.name} still imports a barrel whole: ${b.file}, and the ${b.fanout} modules behind it ride into the island${c.barrels.length > 1 ? ` (and ${c.barrels.length - 1} more barrel${c.barrels.length > 2 ? "s" : ""})` : ""}. A Svelte component is never side-effect free to the bundler, so what the island does not use still ships.`,
+			fix: `Import what the island uses from its own file, or turn on ogygia({ barrels }). If it is on, the build log names why this one was left ("barrels: skipped …").`,
+			fps: c.fp ? [c.fp] : []
+		});
+		const big = c.top[0];
+		if (big && c.bytes >= 30720 && big.bytes >= c.bytes * .4 && c.top.length > 1) findings.push({
+			code: "island-heavy-module",
+			severity: "info",
+			message: `${big.file.split("/").pop()} is ${Math.round(big.bytes / c.bytes * 100)}% of ${c.name}'s code (${kb(big.bytes)} of ${kb(c.bytes)} in dev).`,
+			fix: "That one module is where the island’s weight is: split it (one module per piece), load it when it is needed, or render it on the server.",
+			fps: c.fp ? [c.fp] : []
+		});
+	}
+	const slow_holes = (page.hole_waits ?? []).filter((h) => !h.below_fold && h.wait_ms >= SLOW_HOLE_MS).sort((a, b) => b.wait_ms - a.wait_ms);
+	if (slow_holes.length) {
+		const secs = (ms) => `${(ms / 1e3).toFixed(1)} s`;
+		const dur = (ms) => ms >= 1e3 ? secs(ms) : `${Math.round(ms)} ms`;
+		const all = page.hole_waits ?? [];
+		const split = (h) => {
+			const shown = h.shown_at ?? -Infinity;
+			const before = h.left_at !== void 0 && h.shown_at !== void 0 ? Math.max(0, h.left_at - shown) : void 0;
+			const ttfb = h.first_at !== void 0 && h.left_at !== void 0 ? Math.max(0, h.first_at - Math.max(h.left_at, shown)) : void 0;
+			const ahead = h.left_at === void 0 || h.batch_size ? 0 : all.filter((o) => o !== h && o.left_at !== void 0 && o.end_at !== void 0 && o.left_at < h.left_at && o.end_at >= h.left_at - 50).length;
+			return {
+				before,
+				queue: h.server_queue_ms,
+				server: h.server_ms ?? ttfb,
+				rendered: h.server_ms !== void 0,
+				ahead
+			};
+		};
+		const parts = (h) => {
+			const s = split(h);
+			const out = [];
+			if (s.before !== void 0 && s.before >= 200) out.push(`${dur(s.before)} before its request left`);
+			if (s.queue !== void 0 && s.queue >= 200) out.push(`${dur(s.queue)} waiting for a render slot on the server`);
+			if (s.server !== void 0 && s.server >= 50) out.push(`${dur(s.server)} ${s.rendered ? "the server render" : "waiting on the server"}`);
+			if (h.batch_size && h.batch_size > 1) out.push(`its part of one request for ${h.batch_size} holes`);
+			return out.length ? `: ${out.join(", ")}` : "";
+		};
+		const splits = slow_holes.map(split);
+		const slotted = splits.every((s, i) => s.queue !== void 0 && s.queue >= slow_holes[i].wait_ms * .4);
+		const late = !slotted && splits.every((s, i) => s.before !== void 0 && s.before >= slow_holes[i].wait_ms * .4);
+		const gated = late && splits.some((s) => s.ahead >= HOLE_GATE);
+		const known = splits.filter((s) => s.server !== void 0);
+		const render_bound = !late && !slotted && known.length === splits.length && splits.every((s, i) => s.server >= slow_holes[i].wait_ms * .6);
+		const elsewhere = !late && !slotted && known.length === splits.length && splits.every((s, i) => s.server < slow_holes[i].wait_ms * .4);
+		const ahead = Math.max(...splits.map((s) => s.ahead));
+		findings.push({
+			code: "hole-slow",
+			severity: slow_holes[0].wait_ms >= SLOW_HOLE_MS * 1.5 ? "warn" : "info",
+			message: `${list(slow_holes.map((h) => `${h.name} (${secs(h.wait_ms)}${parts(h)})`))} showed ${slow_holes.length === 1 ? "its" : "their"} fallback on the first screen that long before ${slow_holes.length === 1 ? "its" : "their"} answer came.`,
+			fix: slotted ? `It waited on the server for a render slot: a server process renders 4 holes at a time, and each holds its slot while it awaits its data, so slow holes make the next one wait (every visitor’s, on that process). Make the slow holes answer sooner (a maxAge, faster data), or put fewer of them on one page. The Server-Timing on its answer has the split.` : gated ? `It waited for its turn: the runtime runs ${HOLE_GATE} hole requests at a time, and ${ahead} were ahead of it. Put fewer holes on the first screen (render the ones that are the same for every visitor with the page, or merge small ones into one), or make the ones ahead answer sooner (a maxAge).` : late ? "Its request left late: the page was busy (long tasks) when it was due, or the hole woke late. The long tasks and the wake order on this tab show which." : render_bound ? `${splits.every((s) => s.rendered) ? "The server render" : "The server"} is the wait: give the hole a maxAge if its answer is the same for a while, start its data sooner (or in parallel), or render it with the page if it is the same for every visitor.` : elsewhere ? splits.every((s) => s.before !== void 0) ? "The server answered quickly and the request left on time: the wait came after the first byte (a large answer, its styles, or the swap) or on the network." : "The server answered quickly: the wait came before or around the request. Its request started late (the page was busy, or the hole woke late), or the network or something in front of the server held it. The report’s One clock section shows when it left." : "The hole’s server render or its data is slow: give it a maxAge if its answer is the same for a while, start its data sooner, or render it with the page if it is the same for every visitor. The profiler’s Holes section has its server time.",
+			fps: []
+		});
+	}
+	const drift = page.fp_drift ?? [];
+	if (drift.length) {
+		const first = drift[0];
+		const whose = (d) => drift.length === 1 ? "its" : `${d.name}'s`;
+		const said = (d) => d.path ? `${whose(d)} prop \`${d.path}\` was ${d.was}, now ${d.now}` : d.was !== void 0 ? `${whose(d)} props went from …${d.was}… to …${d.now}…` : `${whose(d)} props changed`;
+		findings.push({
+			code: "fp-unstable",
+			severity: "info",
+			message: `${list(drift.map((d) => d.name))} got a new fingerprint since your last load of this page: ${said(first)}${drift.length > 1 ? ` (and ${drift.length - 1} more)` : ""}. If the page's data did not change, that value is made fresh on every render.`,
+			fix: "The router compares fingerprints to keep a live island across a navigation, and the fingerprint is part of the page’s bytes: an island whose props change on every render is patched on every navigation, and a cache keyed on the HTML (a CDN, a post-render cache, a postrender store, an ETag) misses every time. Make the value the same for the same inputs: take it from load data, compute it in the browser (an effect), or leave it out of the props.",
+			fps: drift.map((d) => d.fp).filter((x) => !!x)
+		});
+	}
+	for (const l of page.leftovers ?? []) {
+		const what = [];
+		if (l.intervals) what.push(l.intervals === 1 ? "an interval running" : `${l.intervals} intervals running`);
+		if (l.listeners.length) what.push(l.listeners.length === 1 ? `a ${l.listeners[0]} listener attached` : `${l.listeners.length} listeners attached (${counted(l.listeners)})`);
+		const ran = l.intervals ? ` (still running: ${l.fires} run${l.fires === 1 ? "" : "s"} so far${l.last_ago !== void 0 ? `, the last ${l.last_ago < 1e3 ? `${l.last_ago} ms` : `${(l.last_ago / 1e3).toFixed(1)} s`} ago` : ""})` : "";
+		findings.push({
+			code: "island-leftover",
+			severity: "warn",
+			message: `${l.name} left ${list(what)} after it left the page${ran}. Each visit to its page adds another, and each keeps the island's state in memory.`,
+			fix: "Take back what the island starts when it goes: return a cleanup from the `$effect` that started it (`clearInterval(id)`, `removeEventListener` with the same function and capture), or pass an AbortSignal and abort it there. The router keeps the document across navigations, so nothing a page left behind is cleared by the next page.",
+			fps: []
+		});
+	}
+	const bf = page.bfcache;
+	const ns = page.server_profile?.no_store;
+	if (bf && (bf.unload.length || bf.not_restored?.length) || ns) {
+		const unload = bf?.unload ?? [];
+		findings.push({
+			code: "bfcache-blocked",
+			severity: "warn",
+			message: (unload.length ? `${list(unload)} ${unload.length === 1 ? "adds" : "add"} an 'unload' listener: the browser keeps no page with one in its back/forward cache, so Back and Forward load this page from the server again instead of showing it at once.` : ns ? `The page answers with Cache-Control: ${ns} (the profiler's last run of it saw so): the browser keeps no page marked no-store in its back/forward cache, so Back and Forward load it from the server again instead of showing it at once.` : "This load came from Back or Forward, and the browser did not restore the page from its back/forward cache: it loaded from the server again.") + (unload.length && ns ? ` It also answers with Cache-Control: ${ns}, which keeps it out too.` : "") + (bf?.not_restored?.length ? ` The browser's reasons for this load: ${bf.not_restored.join(", ")}.` : ""),
+			fix: "Listen to 'pagehide' (or 'visibilitychange') instead of 'unload': it runs at the same moment and keeps the cache. A `Cache-Control: no-store` on the page keeps it out too.",
+			fps: []
+		});
+	}
+	const blockers = page.scroll_blockers ?? [];
+	if (blockers.length) {
+		const said = [...new Set(blockers.map((b) => `${b.owner}'s '${b.type}' listener on ${b.on}${b.forced ? " (passive: false)" : ""}`))];
+		findings.push({
+			code: "scroll-blocking",
+			severity: "warn",
+			message: `${list(said.slice(0, 3))}${said.length > 3 ? ` and ${said.length - 3} more` : ""} ${said.length === 1 ? "holds" : "hold"} scrolling: the browser must run ${said.length === 1 ? "it" : "each"} before it moves the page (it might call preventDefault), on every wheel turn or touch move, and a busy main thread then makes scrolling stutter.`,
+			fix: "Add `{ passive: true }` when the listener never calls preventDefault. To stop scrolling, use CSS instead (`overscroll-behavior`, `touch-action`), so the browser can scroll without asking.",
+			fps: []
+		});
+	}
+	const late = (page.restore_events ?? []).filter((e) => e.kind === "late");
+	if (late.length) {
+		const islands = [...new Set(late.map((e) => e.island).filter((x) => !!x))];
+		const names = islands.map((fp) => by_fp.get(fp)?.name ?? fp.slice(0, 8));
+		findings.push({
+			code: "restore-late",
+			severity: "warn",
+			message: `${counted(late.map((e) => `<${e.host}>`))} ${late.length === 1 ? "was" : "were"} upgraded by ${late.length === 1 ? "its" : "their"} component before ogygia restored ${late.length === 1 ? "it" : "them"}: ${late.length === 1 ? "it keeps" : "they keep"} the server render's scoped form${names.length ? `, and ${list(names)} ${names.length === 1 ? "hydrates" : "hydrate"} against that (expect a heal or a client re-render)` : ""}.`,
+			fix: "The component’s definition ran before ogygia’s restorer, which runs at the end of the body: a blocking <script> (no type=module, no defer) in the head, or before the host, defines it. Load the component library as a module or with defer — every module and deferred script runs after the restore.",
+			fps: islands
+		});
+	}
+	const broken = (page.restore_events ?? []).filter((e) => e.kind === "mismatch");
+	if (broken.length) {
+		const islands = [...new Set(broken.map((e) => e.island).filter((x) => !!x))];
+		findings.push({
+			code: "restore-mismatch",
+			severity: "warn",
+			message: `The server transform left ${counted(broken.map((e) => `<${e.host}>`))} different from what Svelte rendered, after ogygia restored it: ${clip(broken[0].diff ?? "the children differ")}.`,
+			fix: "The transform changed Svelte-owned markup ogygia could not put back: a child it dropped, or moved out of the plan’s <slot> wrappers, or a text it rewrote with no mark. Keep Svelte’s children inside the slot wrappers as they came; the island inside will otherwise heal or render again in the browser.",
+			fps: islands
+		});
+	}
+	for (const b of page.hole_batches ?? []) {
+		const missed = b.sent - b.delivered;
+		if (missed <= 0) continue;
+		const what = b.refused === "redirected" ? `was redirected${b.final_url ? ` to ${path_of(b.final_url)}` : ""}` : b.refused === "document" ? `was answered with a page${b.final_url ? ` (${path_of(b.final_url)})` : ""}, not the holes` : b.status === 0 ? "failed (the request itself)" : b.status >= 400 ? `was answered ${b.status}` : `ended without ${missed === b.sent ? "any of them" : `${missed} of them`}`;
+		const front = b.refused !== void 0 || b.status === 405 || b.status === 403 || b.status === 401 || b.status === 404;
+		findings.push({
+			code: "hole-batch-missed",
+			severity: missed === b.sent ? "warn" : "info",
+			message: `The one request for ${b.sent} holes (${counted(b.names)}) ${what}: ${missed === b.sent ? "every one" : `${missed}`} then fetched on its own — ${missed + 1} requests instead of 1, each starting only after the batch ended.`,
+			fix: front ? "Something in front of ogygia.handle() took the batch: a handle (auth, locale, a method filter) or a firewall / CDN rule that allows only GET on the islands endpoint. Let POST through to it there — it is the same signed capabilities as each GET, verified the same way." : "The server could not render those holes in the batch (a render failed, or an answer was too large to box). Each hole’s own request then shows its error; the Network panel has the batch’s response.",
+			fps: []
+		});
+	}
+	const misses = page.visit?.preload_misses ?? [];
+	if (misses.length) {
+		const file = (u) => {
+			const q = u.indexOf("?");
+			const p = q === -1 ? u : u.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1) || u;
+		};
+		const kb = (n) => n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`;
+		const safari = !!page.browser?.startsWith("Safari");
+		const ours = (m) => m.type === "fetch" && m.crossorigin === "anonymous" && m.hole === true;
+		const safari_fetch = (m) => safari && m.type === "fetch" && m.crossorigin !== null;
+		const varies = (m) => !!m.vary && m.vary.toLowerCase().split(",").some((v) => v.trim() === "origin" || v.trim() === "*");
+		const safari_font = (m) => safari && m.type === "font" && m.crossorigin !== null && varies(m);
+		const why = (m) => safari_font(m) ? `its answer says \`Vary: ${m.vary}\`: ${page.browser} does not reuse a font preload that varies by Origin once the @font-face asking for it comes from a stylesheet added after the page parsed${page.dev ? " (on a dev server both are common: it answers every file with Vary: Origin and adds the page's CSS by script)" : ""}` : ours(m) ? `ogygia's own hole preload and its runtime's fetch match (crossorigin="anonymous", credentials same-origin)${safari ? `; ${page.browser} never hands a fetch preload to a later fetch() — whatever its crossorigin or Cache-Control — so it fetched the answer again` : ""}` : safari_fetch(m) ? `${page.browser} never hands a fetch preload to a later fetch(), whatever its crossorigin, credentials or Cache-Control: in Safari it is always a second download (Chromium uses it)` : m.type === "font" && m.crossorigin === null ? "a font always loads in CORS mode: its preload needs `crossorigin`" : m.type === "fetch" && m.crossorigin === null ? "a fetch preload needs `crossorigin` (`anonymous` for a same-origin `fetch()`, `use-credentials` for `credentials: \"include\"`)" : m.type === "fetch" || m.type === "font" ? `its \`crossorigin="${m.crossorigin}"\`${m.crossorigin ? "" : " (anonymous)"} does not match the request's credentials` : m.type === "script" ? "a module script is preloaded with `<link rel=\"modulepreload\">`, not `rel=\"preload\" as=\"script\"`" : "its `as` or `crossorigin` does not match how the page requests the file";
+		const wasted = misses.reduce((a, m) => a + m.bytes, 0);
+		findings.push({
+			code: "preload-unused",
+			severity: "warn",
+			message: `${list(misses.map((m) => `${file(m.url)} (${kb(m.bytes)})`))} ${misses.length === 1 ? "was" : "were"} preloaded, then downloaded again: the browser could not use the preload${misses.length === 1 ? "" : "s"}, and the page paid ${kb(wasted)} twice.`,
+			fix: `${[...new Set(misses.map(why))].map((w) => w[0].toUpperCase() + w.slice(1)).join(". ")}.` + (misses.every(ours) ? " Nothing in the page's markup to change: it is the hole preload ogygia writes, in a browser that never uses one." : [
+				misses.some((m) => !ours(m) && safari_fetch(m)) ? " No attribute changes a fetch preload in Safari: to start the request early there too, begin it in an inline script and hand its promise to the code that reads it — or drop the preload where Safari is most of the traffic." : "",
+				misses.some(safari_font) ? page.dev ? " For the fonts: a build drops the dev server's habits (its CSS linked, its files answered by the host), so check whether the host also answers fonts with Vary: Origin and whether a stylesheet naming them is added by script." : " For the fonts: answer them without `Vary: Origin` (a font is the same whoever asks; a CORS header alone does not need it), or name them in a stylesheet the HTML links." : "",
+				misses.some((m) => !ours(m) && !safari_fetch(m) && !safari_font(m)) ? " The preload and the request must match exactly, or the browser fetches the file again." : ""
+			].join("")),
+			fps: []
+		});
+	}
+	const never = page.visit?.preloads_unused ?? [];
+	if (never.length) {
+		const file = (u) => {
+			const q = u.indexOf("?");
+			const p = q === -1 ? u : u.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1) || u;
+		};
+		const kb = (n) => n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`;
+		const WHAT = {
+			image: "no image on the page shows it",
+			font: "no @font-face names it",
+			style: "no stylesheet link loads it"
+		};
+		findings.push({
+			code: "preload-never-used",
+			severity: "warn",
+			message: `${list(never.map((p) => `${file(p.url)} (${p.as}${p.bytes ? `, ${kb(p.bytes)}` : ""}: ${WHAT[p.as] ?? "nothing uses it"})`))} ${never.length === 1 ? "was" : "were"} preloaded, but nothing on the page used ${never.length === 1 ? "it" : "them"} 3 s after load: the bytes competed with the files the first screen needed.`,
+			fix: "Remove the preload, or point it at the file the page really uses: the same URL the `<img>` or CSS asks for, the exact file the `@font-face` names.",
+			fps: []
+		});
+	}
+	const raw_files = page.dev ? [] : page.visit?.uncompressed ?? [];
+	const raw_doc = !page.dev && page.visit?.nav?.raw ? page.visit.nav.size ?? 0 : 0;
+	const raw_total = raw_files.reduce((s, f) => s + f.bytes, 0) + raw_doc;
+	if (raw_total >= UNCOMPRESSED_FINDING) {
+		const file = (u) => {
+			const q = u.indexOf("?");
+			const p = q === -1 ? u : u.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1) || u;
+		};
+		const kb = (n) => `${(n / 1024).toFixed(1)} KB`;
+		const names = [...raw_doc ? [`the page's HTML (${kb(raw_doc)})`] : [], ...raw_files.slice(0, 4).map((f) => `${file(f.url)} (${f.type}, ${kb(f.bytes)})`)];
+		const more = raw_files.length - 4;
+		findings.push({
+			code: "uncompressed",
+			severity: raw_total >= UNCOMPRESSED_WARN ? "warn" : "info",
+			message: `${list(names)}${more > 0 ? ` and ${more} more` : ""} came down uncompressed: ${kb(raw_total)} over the wire where gzip or brotli usually sends a quarter to a third of that. Every visitor on a slow connection waits for the difference.`,
+			fix: "Turn on compression where the response leaves your server: a compression middleware, the adapter's precompress option for built files, or the CDN's setting. A `Cache-Control: no-transform` on the response, or a proxy that strips `Accept-Encoding`, also keeps it off.",
+			fps: []
+		});
+	}
+	const gone = page.visit?.entry_fallbacks ?? [];
+	if (gone.length) {
+		const name = (f) => {
+			if (f.name) return f.name;
+			const q = f.entry.indexOf("?");
+			const p = q === -1 ? f.entry : f.entry.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1);
+		};
+		const woke = gone.filter((f) => f.recovered);
+		const dead = gone.filter((f) => !f.recovered);
+		const parts = [];
+		if (woke.length) parts.push(`${list(woke.map(name))} woke on the current build's code through ${woke.length === 1 ? "its" : "their"} stable name${woke.length === 1 ? "" : "s"}: the page's HTML and ${woke.length === 1 ? "that island" : "those islands"} now come from different builds`);
+		if (dead.length) parts.push(`${list(dead.map(name))} stayed asleep: ${dead.length === 1 ? "its" : "their"} stable name failed too`);
+		findings.push({
+			code: "island-file-gone",
+			severity: dead.length ? "error" : "warn",
+			message: `${gone.length === 1 ? "An island" : `${gone.length} islands`} could not load ${gone.length === 1 ? "its own file" : "their own files"} (${list(gone.map((f) => f.src.slice(f.src.lastIndexOf("/") + 1)))}): this page came from a cache that outlived the build that made it. ${parts.join(". ")}.`,
+			fix: "Keep the previous build's `_app/immutable/` files as long as your HTML stays cached (a CDN, a service worker) — a cached page then runs its own build throughout — or purge the cached HTML when you deploy.",
+			fps: []
+		});
+	}
+	const navs = page.visit?.navs ?? [];
+	const slow_navs = navs.map((n, i) => ({
+		n,
+		ms: n.swapped - n.t,
+		next: navs[i + 1]?.t ?? Infinity
+	})).filter((x) => x.ms >= SLOW_NAV_MS).sort((a, b) => b.ms - a.ms).slice(0, 3);
+	for (const { n, ms, next } of slow_navs) {
+		const fetch_ms = n.fetched - n.t;
+		const styles_ms = n.styled - n.fetched;
+		const swap_ms = n.swapped - n.styled;
+		const woke = page.islands.filter((i) => i.t0 >= n.t && i.t0 < next);
+		const wake_end = woke.length ? Math.max(...woke.map(work_end)) : n.swapped;
+		const heaviest = woke.map((i) => ({
+			name: name_of(i.fp),
+			ms: work_end(i) - (i.turn ?? i.loaded)
+		})).sort((a, b) => b.ms - a.ms)[0];
+		const kb_of = (b) => b >= 1024 ? `${Math.round(b / 1024)} KB` : `${b} B`;
+		const known = n.server !== void 0 && n.download !== void 0;
+		const head_start = known && n.prefetched ? Math.max(0, n.server + n.download - fetch_ms) : 0;
+		const fetch_text = n.prefetched ? `${Math.round(fetch_ms)} ms still waiting for the page after the click (prefetched on hover${known ? ` ${Math.round(head_start)} ms earlier: the server took ${Math.round(n.server)} ms to answer` : ""})` : `${Math.round(fetch_ms)} ms fetching the page from the server${known ? ` (${Math.round(n.server)} ms waiting for its first byte, ${Math.round(n.download)} ms downloading${n.bytes ? ` ${kb_of(n.bytes)}` : ""})` : ""}`;
+		const heavy_page = known && n.download > n.server;
+		const parts = [
+			{
+				key: "fetch",
+				ms: fetch_ms,
+				text: fetch_text
+			},
+			{
+				key: "styles",
+				ms: styles_ms,
+				text: `${Math.round(styles_ms)} ms loading its stylesheets`
+			},
+			{
+				key: "swap",
+				ms: swap_ms,
+				text: `${Math.round(swap_ms)} ms swapping it in`
+			}
+		];
+		const top = parts.reduce((a, b) => b.ms > a.ms ? b : a);
+		const srv = n.on_server;
+		const srv_other = srv ? Math.max(0, srv.ms - srv.cpu_ms - srv.net_ms) : 0;
+		const srv_top = !srv ? null : srv.cpu_ms >= srv.net_ms && srv.cpu_ms >= srv_other ? "cpu" : srv.net_ms >= srv_other ? "net" : "other";
+		const server_sentence = srv ? ` On the server that page took ${srv.ms} ms: ${srv.cpu_ms} ms running code, ${srv.net_count ? `${srv.net_ms} ms waiting on ${srv.net_count} outbound call${srv.net_count === 1 ? "" : "s"}` : "no outbound calls"}, and ${srv_other} ms waiting on something else${srv.inflight ? ` (${srv.inflight} other request${srv.inflight === 1 ? " was" : "s were"} running: its CPU is shared)` : ""}.` : "";
+		findings.push({
+			code: "slow-navigation",
+			severity: ms >= SLOW_NAV_WARN_MS ? "warn" : "info",
+			message: `The in-app navigation to ${n.to} took ${Math.round(ms)} ms before the new page showed: ${parts.map((p) => p.text).join(", ")}.` + (top.key === "fetch" && !heavy_page ? server_sentence : "") + (top.key === "fetch" && !heavy_page && !srv && page.server_profiles ? server_says(page.server_profiles[n.to.split("?")[0]]).replace("this page", "that page") : "") + (woke.length ? ` Then ${woke.length === 1 ? "its island woke" : `${woke.length} islands woke`} over ${Math.round(Math.max(0, wake_end - n.swapped))} ms${heaviest && heaviest.ms >= 20 ? ` (${heaviest.name} ${Math.round(heaviest.ms)} ms to hydrate)` : ""}.` : ""),
+			fix: top.key === "fetch" && heavy_page ? `The page itself is the wait: ${n.bytes ? `${kb_of(n.bytes)} of HTML` : "its HTML"} took longer to download than the server took to answer. Send less (render below-the-fold parts later, trim repeated markup and inline data), and make sure it is compressed.` : top.key === "fetch" && srv_top === "cpu" ? "The server's own code is the wait: profile that page (its report names the slow load or component and the lines in it), and render less on it." : top.key === "fetch" && srv_top === "net" ? "The page's outbound calls are the wait: run them in parallel instead of one after another, cache the ones that repeat, or move the slow one out of the page's load (stream it, or a hole)." : top.key === "fetch" && srv_top === "other" ? "The server waited on something that is neither its code nor an outbound call it could see: a timer, a lock, a connection pool, a database driver that does not use fetch. Look at what that page's load awaits." : top.key === "fetch" ? "The server's answer is the wait: make that page's load faster (profile the page itself: its report names the slow load), or render it with less. The router starts the fetch at the click, so the server's time is the visitor's." : top.key === "styles" ? "Its stylesheets were not in the browser yet: the router waits for them so the page never shows unstyled. Share one stylesheet across pages, or keep each page's small, so the next page's are cached or quick." : "The swap itself is heavy: a large page body to parse and put in, or many islands to reconcile. Send less HTML (render below-the-fold parts later), or split the page.",
+			fps: []
+		});
+	}
+	const again = page.visit?.refetched ?? [];
+	if (again.length) {
+		const name = (f) => {
+			if (f.name) return f.name;
+			if (f.runtime) return "the runtime";
+			const q = f.url.indexOf("?");
+			const p = q === -1 ? f.url : f.url.slice(0, q);
+			return p.slice(p.lastIndexOf("/") + 1);
+		};
+		const revalidated = again.filter((f) => f.how === "revalidated").sort((a, b) => b.ms - a.ms);
+		const downloaded = again.filter((f) => f.how === "downloaded").sort((a, b) => b.bytes - a.bytes);
+		const parts = [];
+		if (revalidated.length) parts.push(`${revalidated.length === 1 ? "one was" : `${revalidated.length} were`} revalidated with the server (${list(revalidated.map(name))}): a round trip each${revalidated.length === 1 ? ` (${Math.round(revalidated[0].ms)} ms)` : `, the slowest ${Math.round(revalidated[0].ms)} ms`}, for ${revalidated.length === 1 ? "a file" : "files"} that cannot change`);
+		if (downloaded.length) parts.push(`${downloaded.length === 1 ? "one" : downloaded.length} came down again on this reload (${list(downloaded.map(name))}, ${kb(downloaded.reduce((a, f) => a + f.bytes, 0))}) though the browser had just loaded ${downloaded.length === 1 ? "it" : "them"}`);
+		findings.push({
+			code: "files-fetched-again",
+			severity: "warn",
+			message: `The browser asked the server again for ${again.length === 1 ? "a file it already had" : `${again.length} files it already had`}: ${parts.join("; ")}. Their names change with their content, so a browser can keep them for good.`,
+			fix: "Serve `_app/immutable/` with `cache-control: public, max-age=31536000, immutable` (SvelteKit's adapters do; a proxy, a CDN rule or a custom server in front can override it). The devtools Page tab shows the header the host sends.",
+			fps: []
+		});
+	}
+	for (const h of page.hole_failures ?? []) {
+		const path = (u) => {
+			if (!u) return "";
+			try {
+				return new URL(u, "http://x").pathname;
+			} catch {
+				return u;
+			}
+		};
+		if (h.reason === "forbidden") {
+			const why = h.message ?? "no reason given";
+			const split = why.startsWith("foreign-key");
+			const front = why.startsWith("not ogygia");
+			findings.push({
+				code: "hole-failed",
+				severity: "error",
+				message: front ? `${h.name} never got its answer: something in front of ogygia's handle refused the request (403 without x-ogygia-deny), and the fallback stands.` : `${h.name} never got its answer: the islands endpoint refused its capability (403: ${why}), and the fallback stands.`,
+				fix: split ? "The page and its islands endpoint came from different deployments, each signing with its own key: route the islands endpoint to the deployment that served the page, and give every deployment the same OGYGIA_SECRET at runtime." : front ? `ogygia's handle never saw this request: a proxy, CDN or firewall in front of it (bot protection, a WAF rule) refused ${path(h.endpoint)}. Let that path through there.` : why === "unknown-id" ? "The page names a hole the answering deployment does not have: the page came from a build whose holes differ (a hole component moved or was renamed, or its import options changed), kept by a cache across a deploy or served by another backend." : `Open ${h.endpoint ?? "the hole’s endpoint"} (signed for this page): its x-ogygia-deny header says why the server refused it.`,
+				fps: h.fp ? [h.fp] : []
+			});
+			continue;
+		}
+		const refused = h.reason !== "error";
+		findings.push({
+			code: "hole-failed",
+			severity: "error",
+			message: refused ? `${h.name} never got its answer: the request ${h.reason === "redirected" ? `was redirected to ${path(h.final_url)}` : `was answered with a whole page (${path(h.final_url)})`}. Something in front of ogygia's handle took it, and the fallback stands.` : `${h.name} never got its answer: the request failed ${h.attempts} time${h.attempts === 1 ? "" : "s"} (${h.message ?? "no reason given"}), and the fallback stands.`,
+			fix: refused ? `A handle that runs before ogygia's (an auth redirect, a locale bounce, a 404 page) answered the islands endpoint (${path(h.endpoint)}). Let that path through untouched there.` : `Open ${h.endpoint ?? "the hole’s endpoint"} (signed for this page) for the server's answer: the hole's server render threw, or the network dropped the request.`,
+			fps: h.fp ? [h.fp] : []
+		});
+	}
+	const origin = page.visit?.origin;
+	const host_ms = new Map(Object.entries(cpu?.by_host ?? {}));
+	for (const s of page.visit?.scripts ?? []) {
+		let host = "";
+		try {
+			host = new URL(s.url).host;
+		} catch {
+			continue;
+		}
+		host_ms.set(host, Math.max(host_ms.get(host) ?? 0, 0) + (cpu?.by_host?.[host] ? 0 : s.ms));
+	}
+	const tp = origin ? third_party(page.visit?.resources ?? [], origin, cpu?.by_host || page.visit?.scripts ? host_ms : null, page.visit?.named ? new Set(page.visit.named) : void 0, page.visit?.nav?.dom_interactive, page.visit?.in_page ? new Set(page.visit.in_page) : void 0) : null;
+	const edited = [...page.islands.filter((i) => i.changed || i.recovered || i.healed).map((i) => ({
+		name: name_of(i.fp, i.entry),
+		done: i.done
+	})), ...failures.map((f) => ({
+		name: name_of(f.fp),
+		done: Infinity
+	}))];
+	for (const f of third_party_findings(tp, edited)) findings.push({
+		...f,
+		fps: []
+	});
+	const order = {
+		error: 0,
+		warn: 1,
+		info: 2
+	};
+	findings.sort((a, b) => order[a.severity] - order[b.severity]);
+	for (const f of findings) if (f.fps.length > 1) f.fps = [...new Set(f.fps)];
+	return {
+		vitals,
+		rows,
+		findings,
+		blocking,
+		bytes: [...bytes_by.values()].sort((a, b) => b.transfer + b.size - (a.transfer + a.size)),
+		longtask_ms: round(longtask_ms),
+		third_party: tp
+	};
+}
+/**
+* THE LARGEST PAINT, EXPLAINED: the element, the island it is in, and its four parts — the wait for
+* the HTML's first byte, the delay before the browser began fetching its resource (the image found
+* late: in CSS, added by a script, lazy), the resource's download, and the delay after it arrived
+* before it painted (blocking CSS or scripts, or the element shown by a script). A text paint has
+* no resource: first byte, then render. The fix is for the part that cost most.
+*/
+/** THE FONT THE LARGEST PAINT WAITED FOR: a text paint (no file of its own) that came within 200 ms
+*  of a font file landing after the first paint, whose face hides its text until then (font-display
+*  auto/block). The page's text was there all along, invisible: the font, not the server, set the
+*  LCP. Shared by the Page tab's split and the profiler's LCP gap. */
+function lcp_font(visit) {
+	const p = visit?.paints;
+	const faces = visit?.font_faces;
+	if (!p || p.lcp_url || typeof p.lcp !== "number" || typeof p.fcp !== "number" || !faces?.length) return null;
+	let best = null;
+	for (const r of visit.resources ?? []) {
+		const held_first = typeof visit.nav?.res_end === "number" && p.fcp - visit.nav.res_end >= 300 && r.end <= p.fcp && p.fcp - r.end <= 60;
+		if (r.type !== "font" || r.end <= p.fcp && !held_first || r.end - p.lcp > 100 || p.lcp - r.end > 200) continue;
+		const face = faces.find((f) => f.urls.includes(r.url));
+		if (!face || face.display !== "auto" && face.display !== "block") continue;
+		const end = Math.min(r.end, p.lcp);
+		if (!best || end > best.end) best = {
+			family: face.family,
+			file: r.url.slice(r.url.lastIndexOf("/") + 1).split("?")[0],
+			end
+		};
+	}
+	return best;
+}
+/** WHAT THE LARGEST PAINT'S DOWNLOAD SHARED THE NETWORK WITH: images far below the first screen,
+*  not lazy, whose own download overlapped the largest paint's file (or, a text paint, the wait from
+*  the first byte to the paint). Shared by the Page tab's split and the profiler's LCP gap. */
+function lcp_rivals(visit) {
+	const below = visit?.images_eager_below;
+	const p = visit?.paints;
+	if (!visit || !below?.length || typeof p?.lcp !== "number") return null;
+	const resources = visit.resources ?? [];
+	const res = p.lcp_url ? resources.find((r) => r.url === p.lcp_url) : void 0;
+	const from = res ? res.req_start ?? res.start : visit.nav?.res_start ?? visit.nav?.res_end ?? 0;
+	const to = res ? res.end : p.lcp;
+	let bytes = 0;
+	const files = [];
+	for (const i of below) {
+		const r = resources.find((x) => x.url === i.url);
+		if (!r || r.start >= to || r.end <= from) continue;
+		bytes += i.bytes;
+		const f = i.url.slice(i.url.lastIndexOf("/") + 1).split("?")[0];
+		if (!files.includes(f)) files.push(f);
+	}
+	return bytes ? {
+		bytes,
+		files
+	} : null;
+}
+/** elements whose largest paint is their own file; any other with a URL painted a CSS background */
+const LCP_OWN_FILE = /* @__PURE__ */ new Set([
+	"img",
+	"image",
+	"video",
+	"svg",
+	"input"
+]);
+/**
+* WHY THE BROWSER FOUND THE LARGEST PAINT'S FILE LATE, from what the visit saw: a CSS background
+* (found only once its stylesheet is in and the element laid out), an image its island's code added
+* as it woke (the request began after it hydrated: the server HTML had none), or an `<img>` in the
+* HTML at the low priority an image starts at. The generic advice when none of them is it.
+*/
+function late_found(p, res, islands, name_of) {
+	const tag = p?.lcp_tag ?? "";
+	if (p?.lcp_lazy) return "It carries `loading=\"lazy\"`: the browser held its fetch until layout said it was on screen. Drop it from the first screen's images, and give this one `fetchpriority=\"high\"`.";
+	if (p?.lcp_url && tag && !LCP_OWN_FILE.has(tag)) return `It is a CSS background image (on the ${tag}): the browser finds it only once the stylesheet has arrived and the element is laid out. Put it in the server HTML as an \`<img>\` with \`fetchpriority="high"\`, or preload it (\`<link rel="preload" as="image" fetchpriority="high">\`).`;
+	const asked = res ? res.req_start ?? res.start : void 0;
+	const island = p?.lcp_fp ? islands.find((i) => i.fp === p.lcp_fp) : void 0;
+	if (island && asked !== void 0 && asked >= island.done - 1) return `Its request began at ${Math.round(asked)} ms, after ${name_of(p?.lcp_fp)} woke (hydrated at ${Math.round(island.done)} ms): the server HTML did not carry it, the island's code added it. Render the \`<img>\` (the same src) in the island's server markup, so the browser finds it in the HTML.`;
+	if (tag === "img" && p?.lcp_priority !== "high") return "It is an `<img>` the browser could find in the HTML, but an image starts at low priority, behind the page's scripts and stylesheets: give it `fetchpriority=\"high\"` (and never `loading=\"lazy\"` on the first screen).";
+	if (tag === "img" && p?.held?.outcome === "cap") return `It asks for high priority, and ogygia held its own downloads back for it — but it had not arrived after ${p.held.waited_ms} ms, so they started anyway. The file itself is slow to arrive: serve it smaller (a resized, modern-format image) or from a faster origin.`;
+	if (tag === "img") return "It already asks for high priority: something before it held the browser back (a blocking script in the `<head>`, a long chain of stylesheets). Preload it in the `<head>` (`<link rel=\"preload\" as=\"image\" fetchpriority=\"high\">`), ahead of the rest.";
+	return "The browser found it late: put it in the HTML as an `<img>` (not a CSS background or a script-added one), never `loading=\"lazy\"` on the first screen, and preload it with `fetchpriority=\"high\"`.";
+}
+function explain_lcp(page, name_of) {
+	const p = page.visit?.paints;
+	const lcp = p?.lcp ?? page.vitals.lcp;
+	const ttfb = page.visit?.nav?.res_start;
+	if (typeof lcp !== "number" || typeof ttfb !== "number" || !(lcp > 0)) return null;
+	const file = (u) => {
+		const q = u.indexOf("?");
+		const s = q === -1 ? u : u.slice(0, q);
+		return s.slice(s.lastIndexOf("/") + 1) || u;
+	};
+	const res = p?.lcp_url ? (page.visit?.resources ?? []).find((r) => r.url === p.lcp_url) : void 0;
+	const what = `${p?.lcp_tag ? `the ${p.lcp_tag}` : "an element"}${p?.lcp_url ? ` (${file(p.lcp_url)})` : ""}${p?.lcp_fp ? ` in ${name_of(p.lcp_fp)}` : ""}`;
+	const ms = (n) => `${Math.round(Math.max(0, n))} ms`;
+	let parts;
+	const font = res ? null : lcp_font(page.visit);
+	if (font) parts = [
+		{
+			key: "ttfb",
+			ms: ttfb,
+			text: `${ms(ttfb)} until the HTML's first byte`
+		},
+		{
+			key: "font",
+			ms: font.end - ttfb,
+			text: `${ms(font.end - ttfb)} waiting for its font '${font.family}' (${font.file}), the text invisible until it came`
+		},
+		{
+			key: "render",
+			ms: lcp - font.end,
+			text: `${ms(lcp - font.end)} more before it painted`
+		}
+	];
+	else if (res) {
+		const asked = res.req_start ?? res.start;
+		parts = [
+			{
+				key: "ttfb",
+				ms: ttfb,
+				text: `${ms(ttfb)} until the HTML's first byte`
+			},
+			{
+				key: "delay",
+				ms: asked - ttfb,
+				text: `${ms(asked - ttfb)} before the browser began fetching it`
+			},
+			{
+				key: "load",
+				ms: res.end - asked,
+				text: `${ms(res.end - asked)} downloading it`
+			},
+			{
+				key: "render",
+				ms: lcp - res.end,
+				text: `${ms(lcp - res.end)} more before it painted`
+			}
+		];
+	} else parts = [{
+		key: "ttfb",
+		ms: ttfb,
+		text: `${ms(ttfb)} until the HTML's first byte`
+	}, {
+		key: "render",
+		ms: lcp - ttfb,
+		text: `${ms(lcp - ttfb)} more before it painted`
+	}];
+	const top = parts.reduce((a, b) => b.ms > a.ms ? b : a);
+	const fix = top.key === "ttfb" ? "The server's first byte is most of it: make the page's own render faster (the profiler's report of this page names the slow load), or cache it." : top.key === "font" ? "The text was there, hidden by its font: give the @font-face `font-display: swap` (or `optional`) and preload the font file, so the text paints at once." : top.key === "delay" ? late_found(p, res, page.islands, name_of) : top.key === "load" ? "The file itself is slow to download: make it smaller (a modern format, sized to how it is shown, `srcset`), and serve it from close by." : "It was ready but did not paint: render-blocking stylesheets or scripts held the first paint, or a script (an island waking) shows the element. Render it with the server HTML, and inline or trim what blocks.";
+	const rivals = top.key === "load" || top.key === "delay" || top.key === "font" ? lcp_rivals(page.visit) : null;
+	const kb = (n) => `${Math.round(n / 1024)} KB`;
+	return {
+		message: `The largest paint was ${what}: ${parts.map((x) => x.text).join(", ")}.${rivals ? ` Beside it, ${kb(rivals.bytes)} of images far below the first screen downloaded (${rivals.files.join(", ")}).` : ""}`,
+		fix: rivals ? `${fix} And give the images below the first screen \`loading="lazy"\`: they took a share of the network the largest paint needed.` : fix,
+		fps: p?.lcp_fp ? [p.lcp_fp] : []
+	};
+}
+/** a vital moved when it changed by at least this much AND a fifth of the old value (CLS: this much) */
+const VITAL_FLOOR = {
+	ttfb: 50,
+	fcp: 100,
+	lcp: 100,
+	inp: 40,
+	cls: .05
+};
+/** the part named only when it moved at least this much */
+const PART_FLOOR_MS = 50;
+/**
+* WHICH VITALS MOVED between two visits of a page, past the noise, and for a split vital the part
+* that moved most. ONE rule for both tools: the profiler's "since your last profile" and the Page
+* tab's "since your last load" read the same moves. `parts(side, key)` gives a side's parts.
+*/
+function vitals_moved(a, b, parts) {
+	const out = [];
+	for (const key of [
+		"ttfb",
+		"fcp",
+		"lcp",
+		"cls",
+		"inp"
+	]) {
+		const x = a[key];
+		const y = b[key];
+		if (typeof x !== "number" || typeof y !== "number") continue;
+		const d = Math.abs(y - x);
+		if (!(key === "cls" ? d >= VITAL_FLOOR.cls : d >= Math.max(VITAL_FLOOR[key], x * .2))) continue;
+		const m = {
+			key,
+			a: x,
+			b: y
+		};
+		if (key !== "cls") {
+			const pa = parts("a", key);
+			const pb = parts("b", key);
+			if (pa && pb) {
+				let best;
+				for (const q of pb) {
+					const was = pa.find((p) => p.key === q.key);
+					if (!was) continue;
+					if (!best || Math.abs(q.ms - was.ms) > Math.abs(best.b - best.a)) best = {
+						label: q.label,
+						a: Math.round(was.ms),
+						b: Math.round(q.ms)
+					};
+				}
+				if (best && Math.abs(best.b - best.a) >= PART_FLOOR_MS) m.part = best;
+			}
+		}
+		out.push(m);
+	}
+	return out;
+}
+function vital_parts(page, key) {
+	if (key === "inp") {
+		const i = page.visit?.interaction;
+		if (!i || !(i.delay + i.processing + i.presentation > 0)) return null;
+		return [
+			{
+				key: "delay",
+				label: "the wait before its handlers",
+				ms: i.delay
+			},
+			{
+				key: "handler",
+				label: "its handlers",
+				ms: i.processing
+			},
+			{
+				key: "paint",
+				label: "painting the next frame",
+				ms: i.presentation
+			}
+		];
+	}
+	const nav = page.visit?.nav;
+	if (key === "ttfb") {
+		const p = nav?.phases;
+		if (!p) return null;
+		return [
+			{
+				key: "redirect",
+				label: "redirects",
+				ms: p.redirect ?? 0
+			},
+			{
+				key: "worker",
+				label: "the service worker",
+				ms: p.worker ?? 0
+			},
+			{
+				key: "dns",
+				label: "the address lookup",
+				ms: p.dns ?? 0
+			},
+			{
+				key: "connect",
+				label: "connecting",
+				ms: (p.connect ?? 0) + (p.tls ?? 0)
+			},
+			{
+				key: "wait",
+				label: "the server's answer",
+				ms: p.wait ?? 0
+			}
+		];
+	}
+	const first = nav?.res_start;
+	if (typeof first !== "number") return null;
+	if (key === "fcp") {
+		const fcp = page.visit?.paints?.fcp ?? page.vitals.fcp;
+		if (typeof fcp !== "number") return null;
+		const html_end = Math.max(first, nav?.res_end ?? first);
+		const blocked_until = (page.visit?.resources ?? []).filter((r) => r.blocking && r.start < fcp).reduce((m, r) => Math.max(m, r.end), html_end);
+		return [
+			{
+				key: "ttfb",
+				label: "the first byte",
+				ms: first
+			},
+			{
+				key: "html",
+				label: "the HTML download",
+				ms: html_end - first
+			},
+			{
+				key: "blocking",
+				label: "the files that block the paint",
+				ms: blocked_until - html_end
+			},
+			{
+				key: "render",
+				label: "the rest before the paint",
+				ms: fcp - blocked_until
+			}
+		];
+	}
+	const p = page.visit?.paints;
+	const lcp = p?.lcp ?? page.vitals.lcp;
+	if (typeof lcp !== "number") return null;
+	const res = p?.lcp_url ? (page.visit?.resources ?? []).find((r) => r.url === p.lcp_url) : void 0;
+	const font = res ? null : lcp_font(page.visit);
+	if (font) return [
+		{
+			key: "ttfb",
+			label: "the first byte",
+			ms: first
+		},
+		{
+			key: "font",
+			label: `its font '${font.family}'`,
+			ms: font.end - first
+		},
+		{
+			key: "render",
+			label: "the render",
+			ms: lcp - font.end
+		}
+	];
+	if (!res) return [{
+		key: "ttfb",
+		label: "the first byte",
+		ms: first
+	}, {
+		key: "render",
+		label: "the render",
+		ms: lcp - first
+	}];
+	const asked = res.req_start ?? res.start;
+	return [
+		{
+			key: "ttfb",
+			label: "the first byte",
+			ms: first
+		},
+		{
+			key: "delay",
+			label: "finding the image",
+			ms: asked - first
+		},
+		{
+			key: "load",
+			label: "its download",
+			ms: res.end - asked
+		},
+		{
+			key: "render",
+			label: "painting it",
+			ms: lcp - res.end
+		}
+	];
+}
+/** the document stayed open at least this long after its first byte (the browser side), or its tail
+*  came this long after the rest (the server side) */
+const HELD_OPEN_MS = 250;
+/**
+* THE DOCUMENT HELD OPEN: the page painted early, but its HTML kept coming — and islands wake only
+* once the whole document is in (DOMContentLoaded, the wake gate), so every island waited for its
+* end, even one that reads nothing late. Usually a load's streamed promise: the response stays open
+* until the last one settles. From the browser (the navigation's first and last byte, the paint,
+* the islands' hydrate steps after the end) and, when known, what held it (`held_open`: each streamed
+* promise by its `page.data` key and when it settled). With no visit, the profiled render alone
+* says it (its chunks: the early part, then the tail after the longest pause).
+*/
+function explain_held_open(page, rows, name_of) {
+	const ms = (n) => `${Math.round(n)} ms`;
+	const kb = (n) => n >= 1024 ? `${(n / 1024).toFixed(1)} KB` : `${n} B`;
+	const held = page.held_open;
+	const last_at = held?.keys.length ? Math.max(...held.keys.map((k) => k.at)) : void 0;
+	const holders = held && last_at !== void 0 ? held.keys.filter((k) => k.at >= last_at - 20) : [];
+	const holder_text = holders.length ? holders.map((k) => k.key ? `\`page.data.${k.key}\`` : "a streamed promise").filter((x, i, a) => a.indexOf(x) === i).join(", ") : "";
+	const fix_streamed = "A promise the load returns without awaiting streams, and the document stays open until it settles, so every island waits for it. If the islands need the value anyway, await it in the load: the page ships with it, and nothing waits after. If only one part of the page needs it, make that part a server island (`render: 'deferred'`): it loads after the page, and the page's islands wake without it.";
+	const nav = page.visit?.nav;
+	const fcp = page.visit?.paints?.fcp ?? page.vitals.fcp;
+	if (nav && typeof nav.res_start === "number" && typeof nav.res_end === "number") {
+		const open = nav.res_end - nav.res_start;
+		if (open < HELD_OPEN_MS || typeof fcp !== "number" || fcp > nav.res_end - 150) return null;
+		const end = nav.res_end;
+		const waited = rows.filter((r) => r.done - r.hydrate_ms >= end - 5);
+		if (!waited.length) return null;
+		const first = Math.min(...waited.map((r) => r.done - r.hydrate_ms));
+		const names = waited.slice(0, 4).map((r) => name_of(r.fp) || r.name);
+		const more = waited.length > names.length ? ` and ${waited.length - names.length} more` : "";
+		const why = holder_text ? held.side === "server" ? `; on the server the last ${kb(held.late_bytes ?? 0)} left ${ms((held.late_ms ?? 0) - (held.early_ms ?? 0))} after the rest, held by ${holder_text}` : `; it was held by ${holder_text}, settled at ${ms(last_at)}` : "";
+		const big = !holder_text && (nav.size ?? 0) >= 3e5;
+		return {
+			code: "html-held-open",
+			severity: end - fcp >= 300 ? "warn" : "info",
+			message: `The page painted at ${ms(fcp)}, but its HTML kept coming until ${ms(end)} (${ms(open)} after its first byte)${why}. Islands wake only once the whole document is in (DOMContentLoaded${nav.dcl ? ` at ${ms(nav.dcl)}` : ""}), so ${names.join(", ")}${more} waited: the first hydrated at ${ms(first)}, ${ms(first - fcp)} after the paint.`,
+			fix: holder_text ? fix_streamed : big ? `The HTML itself is large (${kb(nav.size)}): its download is the wait. Ship less markup: page long lists, move what is below the fold into a server island (\`render: 'deferred'\`), and keep big data out of the page seed.` : `Something kept the response open after its first part: usually a promise a load returns without awaiting (it streams, and the document ends only when it settles), or a proxy that buffers. The profiler's report of this page names what the late bytes were. ${fix_streamed}`,
+			fps: waited.map((r) => r.fp)
+		};
+	}
+	if (!held || held.side !== "server" || !holder_text || !held.islands) return null;
+	const pause = (held.late_ms ?? 0) - (held.early_ms ?? 0);
+	if (pause < HELD_OPEN_MS) return null;
+	return {
+		code: "html-held-open",
+		severity: "warn",
+		message: `The document streamed: its first ${kb(held.early_bytes ?? 0)} left the server ${ms(held.early_ms ?? 0)} into the render, but it stayed open until ${ms(held.late_ms ?? 0)}, held by ${holder_text}. In the browser, islands wake only once the whole document is in (DOMContentLoaded), so the page's ${held.islands} island${held.islands === 1 ? "" : "s"} wait${held.islands === 1 ? "s" : ""} ${ms(pause)} longer for it.`,
+		fix: fix_streamed,
+		fps: []
+	};
+}
+/**
+* THE FIRST PAINT, EXPLAINED: its four parts — the wait for the HTML's first byte, the HTML's own
+* download, the files that blocked the paint after it (stylesheets, classic scripts in the head:
+* the slowest named), and the rest before the paint (the main thread busy: long tasks before it).
+* The fix is the costliest part's.
+*/
+function explain_fcp(page) {
+	const nav = page.visit?.nav;
+	const fcp = page.visit?.paints?.fcp ?? page.vitals.fcp;
+	if (typeof fcp !== "number" || typeof nav?.res_start !== "number") return null;
+	const first = nav.res_start;
+	const html_end = Math.max(first, nav.res_end ?? first);
+	const blockers = (page.visit?.resources ?? []).filter((r) => r.blocking && r.start < fcp);
+	const blocked_until = blockers.reduce((m, r) => Math.max(m, r.end), html_end);
+	const slowest = blockers.reduce((a, r) => !a || r.end - r.start > a.end - a.start ? r : a, void 0);
+	const busy = page.longtasks.filter((t) => t.t < fcp && t.t + t.ms > blocked_until).reduce((a, t) => a + Math.min(t.t + t.ms, fcp) - Math.max(t.t, blocked_until), 0);
+	const ms = (n) => `${Math.round(Math.max(0, n))} ms`;
+	const file = (u) => {
+		const q = u.indexOf("?");
+		const s = q === -1 ? u : u.slice(0, q);
+		return s.slice(s.lastIndexOf("/") + 1) || u;
+	};
+	const parts = [
+		{
+			key: "ttfb",
+			ms: first,
+			text: `${ms(first)} until the HTML's first byte`
+		},
+		{
+			key: "html",
+			ms: html_end - first,
+			text: `${ms(html_end - first)} downloading the HTML`
+		},
+		{
+			key: "blocking",
+			ms: blocked_until - html_end,
+			text: `${ms(blocked_until - html_end)} waiting for ${blockers.length === 1 ? "a file that blocks" : `${blockers.length} files that block`} the paint${slowest ? ` (the slowest ${file(slowest.url)}, ${ms(slowest.end - slowest.start)})` : ""}`
+		},
+		{
+			key: "render",
+			ms: fcp - blocked_until,
+			text: `${ms(fcp - blocked_until)} more before it painted${busy >= 50 ? ` (${ms(busy)} of it long tasks)` : ""}`
+		}
+	].filter((p) => p.ms >= 1 || p.key === "ttfb");
+	const top = parts.reduce((a, b) => b.ms > a.ms ? b : a);
+	const fix = top.key === "ttfb" ? "The server's first byte is most of it: see the first-byte finding (and the profiler's report of this page) for where the server's time went." : top.key === "html" ? "The HTML itself is slow to arrive: send less of it (render below-the-fold parts later, trim inline data), and make sure it is compressed." : top.key === "blocking" ? `The paint waits for ${slowest ? file(slowest.url) : "blocking files"}: inline the few rules the first screen needs and load the rest without blocking, and give scripts in the head \`defer\` or \`type="module"\`.` : "Everything had arrived, but the main thread was busy: a script ran before the first paint. Move it after (defer it, or run it on idle).";
+	return {
+		message: `The first paint came after ${parts.map((p) => p.text).join(", ")}.`,
+		fix,
+		fps: []
+	};
+}
+/**
+* THE WAIT FOR THE FIRST BYTE, EXPLAINED: the steps the browser timed before it (a redirect, a
+* service worker starting, the DNS lookup, the connection and its TLS, the request until the
+* server answered), and — when the document carries it — what the server's own Server-Timing says
+* its wait went to. The fix is the costliest step's.
+*/
+/** What the profiler's last run of the page says the server did (or how to find out). */
+function server_says(brief) {
+	if (!brief) return " Profile this page (the Profiler tab) to see where the server’s time went.";
+	const ago = brief.ago_min < 1 ? "just now" : `${Math.round(brief.ago_min)} min ago`;
+	if (brief.prerendered) return ` The profiler's last run of this page (${ago}) found it prerendered${brief.prerendered === "file" ? ": the server answered with the file the build wrote, no render ran" : " (its route exports prerender)"} — its first byte is a file being served, so a slow one is the host or the network, not a render to profile.`;
+	return ` The profiler's last run of this page (${ago}): the server render took ${Math.round(brief.render_ms)} ms${brief.calls ? `, ${brief.calls} outbound call${brief.calls === 1 ? "" : "s"} (${Math.round(brief.calls_ms)} ms)` : ", no outbound calls"}${brief.top ? `; it says: ${brief.top}` : ""}.`;
+}
+function explain_ttfb(page) {
+	const p = page.visit?.nav?.phases;
+	if (!p) return null;
+	const ms = (n) => `${Math.round(n)} ms`;
+	const steps = [
+		{
+			key: "redirect",
+			ms: p.redirect ?? 0,
+			text: `${ms(p.redirect ?? 0)} in redirects`
+		},
+		{
+			key: "worker",
+			ms: p.worker ?? 0,
+			text: `${ms(p.worker ?? 0)} starting a service worker`
+		},
+		{
+			key: "dns",
+			ms: p.dns ?? 0,
+			text: `${ms(p.dns ?? 0)} looking up the address`
+		},
+		{
+			key: "connect",
+			ms: (p.connect ?? 0) + (p.tls ?? 0),
+			text: `${ms((p.connect ?? 0) + (p.tls ?? 0))} connecting${p.tls ? ` (${ms(p.tls)} of it TLS)` : ""}`
+		},
+		{
+			key: "wait",
+			ms: p.wait ?? 0,
+			text: `${ms(p.wait ?? 0)} waiting for the server's answer`
+		}
+	].filter((s) => s.ms >= 1);
+	if (!steps.length) return null;
+	const top = steps.reduce((a, b) => b.ms > a.ms ? b : a);
+	const st = (page.visit?.nav?.server_timing ?? []).filter((s) => s.ms >= 1).sort((a, b) => b.ms - a.ms).slice(0, 4);
+	const said = st.length ? ` The server's Server-Timing says: ${list(st.map((s) => `${s.desc || s.name} ${ms(s.ms)}`))}.` : "";
+	const ssr = (page.visit?.nav?.server_timing ?? []).find((s) => s.name === "ssr");
+	const beyond = ssr && p.wait ? Math.max(0, p.wait - ssr.ms) : 0;
+	const compiling = !!page.dev && top.key === "wait" && beyond >= Math.max(300, (p.wait ?? 0) / 2);
+	const split = top.key === "wait" && ssr && beyond >= 200 ? ` Of the ${ms(p.wait ?? 0)} wait, the render was ${ms(ssr.ms)}; the other ${ms(beyond)} came before it${compiling ? " — on the dev server, the page compiling on its first request" : " (a hook, a proxy, a cold start)"}.` : "";
+	const fix = compiling ? "Reload the page: on the dev server a page is compiled on its first request, and that is most of this first byte. A build (or a second visit) shows the real one." : top.key === "redirect" ? "The redirects are the cost: link to the final address (the trailing slash, https, the locale) so the browser asks once." : top.key === "worker" ? "The service worker's start is the cost: keep it small, or turn on navigation preload so the page's request leaves while it starts." : top.key === "dns" || top.key === "connect" ? "Reaching the server is the cost: serve the page from closer to the visitor (a CDN at the edge), and keep the connection modern (HTTP/2 or 3, TLS 1.3)." : page.server_profiles && page.server_profile?.prerendered ? "The page is a prerendered file, and still slow to arrive: serve it from close to the visitor (a CDN keeps the built files at the edge), and check what stands in front of the files — a function or a middleware answering them first, a cold start, a slow origin." : "The server's answer is the cost: profile the page (its report names the slow load and the lines in it), cache the HTML where it is the same for everyone, or stream it so the first byte leaves before the slow part.";
+	const profiled = page.server_profiles && top.key === "wait" && !compiling ? server_says(page.server_profile) : "";
+	return {
+		message: `Before the page's first byte: ${steps.map((s) => s.text).join(", ")}.${said}${split}${profiled}`,
+		fix,
+		fps: [],
+		...compiling ? { note: true } : {}
+	};
+}
+/**
+* THE WORST LAYOUT SHIFTS, EXPLAINED: CLS scores the worst burst of shifts (a session: shifts under a
+* second apart, five seconds at most). This names what moved in it (the island, else the element),
+* and what made it move — by what happened just before its biggest shift: a hole's answer swapped
+* in, an image arrived with no size set, a web font swapped in, an island hydrated. The fix is the
+* cause's; an unknown one says what to look at.
+*/
+function explain_cls(page, rows, name_of) {
+	const shifts = [...page.shifts].sort((a, b) => a.t - b.t);
+	if (!shifts.length) return null;
+	let best = [];
+	let best_sum = 0;
+	let cur = [];
+	let cur_sum = 0;
+	for (const s of shifts) {
+		if (cur.length && (s.t - cur[cur.length - 1].t > 1e3 || s.t - cur[0].t > 5e3)) {
+			cur = [];
+			cur_sum = 0;
+		}
+		cur.push(s);
+		cur_sum += s.value;
+		if (cur_sum > best_sum) {
+			best = cur.slice();
+			best_sum = cur_sum;
+		}
+	}
+	if (!best.length) return null;
+	const moved = /* @__PURE__ */ new Map();
+	for (const s of best) {
+		const who = s.fp ? name_of(s.fp) : s.tag || "an element";
+		moved.set(who, (moved.get(who) ?? 0) + s.value);
+	}
+	const top = [...moved].sort((a, b) => b[1] - a[1]).slice(0, 3);
+	const round3 = (n) => Math.round(n * 1e3) / 1e3;
+	const big = best.reduce((a, b) => b.value > a.value ? b : a);
+	const WINDOW = 250;
+	const file = (u) => {
+		const q = u.indexOf("?");
+		const s = q === -1 ? u : u.slice(0, q);
+		return s.slice(s.lastIndexOf("/") + 1) || u;
+	};
+	const causes = [];
+	for (const h of page.hole_waits ?? []) if (h.shown_at !== void 0) causes.push({
+		at: h.shown_at + h.wait_ms,
+		kind: "hole",
+		name: h.name
+	});
+	for (const r of page.visit?.resources ?? []) if (r.type === "img") causes.push({
+		at: r.end,
+		kind: "img",
+		name: file(r.url)
+	});
+	else if (r.type === "font") causes.push({
+		at: r.end,
+		kind: "font",
+		name: file(r.url)
+	});
+	else if (page.dev && r.url.includes("type=style")) causes.push({
+		at: r.end,
+		kind: "devcss",
+		name: file(r.url)
+	});
+	for (const r of rows) causes.push({
+		at: r.done,
+		kind: "island",
+		name: r.name
+	});
+	let cause;
+	for (const c of causes) if (c.at <= big.t + 5 && big.t - c.at <= WINDOW && (!cause || c.at > cause.at)) cause = c;
+	const because = !cause ? "" : cause.kind === "hole" ? ` It came right after ${cause.name.startsWith("the hole") ? cause.name : `the hole ${cause.name}`}'s answer swapped in: the answer is not the size of its fallback.` : cause.kind === "img" ? ` It came right after the image ${cause.name} arrived: it had no size set, so the page made room when it loaded.` : cause.kind === "font" ? ` It came right after the web font ${cause.name} arrived: text re-laid out in it.` : cause.kind === "devcss" ? ` It came right after ${cause.name}'s styles arrived: the dev server adds a component's CSS with JavaScript after the first paint, so the page re-laid out in them. A build links that CSS in the head — this shift is the dev server's, not your page's.` : ` It came right after ${cause.name} hydrated: the island's size changed as it woke.`;
+	const fix = !cause ? "Nothing the page timed explains it: look for content added above what is on screen (a banner, an ad, a late script), or an animation that moves layout instead of `transform`." : cause.kind === "hole" ? "Give the hole a fallback the size of its answer (a placeholder with a fixed or `min-height`), so the swap changes nothing around it." : cause.kind === "img" ? "Set the image's `width` and `height` (or an `aspect-ratio`) so its space is kept before it loads." : cause.kind === "font" ? "Match the fallback font's metrics (`size-adjust`, `ascent-override`), or preload the font, so the swap does not move text." : cause.kind === "devcss" ? "Nothing to fix for this shift: check the page on a build (preview or deploy), where the CSS is in the head before the first paint." : "Render the island at its final size on the server (the same content, or a placeholder of that height), so waking it changes nothing on screen.";
+	return {
+		message: `The worst burst of shifts added ${round3(best_sum)}, ${best.length === 1 ? "in one shift" : `over ${best.length} shifts in ${Math.round(best[best.length - 1].t - best[0].t)} ms`}: what moved was ${list(top.map(([n, v]) => `${n} (${round3(v)})`))}.${because}`,
+		fix,
+		fps: [...new Set(best.map((s) => s.fp).filter((f) => !!f))],
+		...cause?.kind === "devcss" ? { note: true } : {}
+	};
+}
+/** One long-frame script, told: `BusyTimer.svelte's planted_busy_timer (a timer, 400 ms)`. */
+function describe_script(s) {
+	let who = s.island ?? "";
+	if (!who) {
+		const q = s.url.indexOf("?");
+		const p = q === -1 ? s.url : s.url.slice(0, q);
+		who = p.slice(p.lastIndexOf("/") + 1) || "a script";
+	}
+	const kind = script_kind(s.invoker);
+	return `${who}${s.fn ? `'s ${s.fn}` : ""} (${kind ? `${kind}, ` : ""}${Math.round(s.ms)} ms)`;
+}
+/** What ran a long-frame script, from its invoker: a timer, an animation frame, a promise, … */
+function script_kind(inv) {
+	return inv.startsWith("TimerHandler") ? "a timer" : inv.startsWith("FrameRequestCallback") ? "an animation frame" : inv.includes("requestIdleCallback") ? "an idle callback" : inv.includes(".then") || inv.startsWith("Promise") ? "a promise" : inv.includes(".on") ? "an event handler" : "";
+}
+/** THE SLOWEST INTERACTION, explained: where it landed, which phase cost the time, and what held
+*  it — an island hydrating, a script in a long frame, the handler's own code, or the paint. */
+function explain_interaction(i, rows, name_of, origin, cpu) {
+	if (!i || !(i.delay + i.processing + i.presentation > 0)) return null;
+	const what = i.name === "click" || i.name.startsWith("pointer") || i.name.startsWith("mouse") ? "a click" : i.name.startsWith("key") ? "a key press" : `a ${i.name}`;
+	const where = i.fp ? `in ${name_of(i.fp)}` : "outside any island";
+	const on = i.target ? ` on ${i.target}` : "";
+	const ms = (n) => `${Math.round(n)} ms`;
+	const phases = [
+		{
+			key: "delay",
+			ms: i.delay,
+			text: `${ms(i.delay)} before its handlers could run`
+		},
+		{
+			key: "handler",
+			ms: i.processing,
+			text: `${ms(i.processing)} in its handlers`
+		},
+		{
+			key: "paint",
+			ms: i.presentation,
+			text: `${ms(i.presentation)} to paint the next frame`
+		}
+	];
+	const top = phases.reduce((a, b) => b.ms > a.ms ? b : a);
+	const scripts = i.scripts ?? [];
+	const of_phase = (p) => scripts.filter((s) => s.phase === p);
+	const wait_end = i.t + i.delay;
+	const hydrating = rows.filter((r) => r.fp !== i.fp && Math.min(r.done, wait_end) - Math.max(r.done - r.hydrate_ms, i.t) > 1);
+	const behind = hydrating.length ? `${list(hydrating.map((r) => r.name))} ${hydrating.length === 1 ? "was" : "were"} hydrating` : of_phase("delay").length ? `the main thread was running ${list(of_phase("delay").slice(0, 3).map(describe_script))}` : "";
+	const handler = of_phase("handler")[0];
+	const own_origin = (url) => {
+		if (!origin) return true;
+		try {
+			return new URL(url, origin).origin === origin;
+		} catch {
+			return true;
+		}
+	};
+	const sampled = cpu && Math.abs(cpu.t - i.t) < 2 ? cpu : void 0;
+	const readable = (f) => f.file.endsWith(".svelte") || f.file.startsWith("src/") || f.file.includes("/src/");
+	const pick = (s) => {
+		const f = s?.top.find((x) => x.kind === "app") ?? s?.top[0];
+		return f && readable(f) ? f : void 0;
+	};
+	const handler_fn = pick(sampled?.handler);
+	const wait_fn = pick(sampled?.wait);
+	const fn_label$1 = (f) => sampled?.mapped ? fn_label(f) : fn_label({
+		...f,
+		line: null
+	});
+	const own_handler = !!handler && !!i.fp && handler.invoker.includes(".on") && own_origin(handler.url);
+	const handler_text = handler_fn ? `${own_handler || !handler && i.fp ? `${name_of(i.fp)}'s ${fn_label$1(handler_fn)}` : fn_label$1(handler_fn)}, ${Math.round(handler_fn.self_ms)} ms sampled` : !handler ? "" : own_handler ? `${name_of(i.fp)}'s own ${i.name} handler` : describe_script(handler);
+	const wait_text = hydrating.length ? behind : wait_fn ? `the main thread was running ${fn_label$1(wait_fn)}, ${Math.round(wait_fn.self_ms)} ms sampled${of_phase("delay")[0] && script_kind(of_phase("delay")[0].invoker) ? `, run by ${script_kind(of_phase("delay")[0].invoker)}` : ""}` : behind;
+	const forced_ms = of_phase("handler").reduce((s, x) => s + (x.forced ?? 0), 0);
+	const forced = forced_ms >= 16 && forced_ms >= i.processing * .3 ? Math.min(forced_ms, i.processing) : 0;
+	const forced_text = forced ? `; ${ms(forced)} of it the browser laying the page out again because the code read sizes after changing it` : "";
+	const parts = phases.map((p) => {
+		if (p.key === "delay" && wait_text && p.ms >= 16) return `${p.text} (${wait_text})`;
+		if (p.key === "handler" && handler_text && p.ms >= 16) return `${p.text} (mostly ${handler_text}${forced_text})`;
+		if (p.key === "handler" && forced) return `${p.text} (${forced_text.slice(2)})`;
+		return p.text;
+	});
+	return {
+		message: `The slowest was ${what}${on} ${where}: ${parts[0]}, ${parts[1]}, ${parts[2]}.`,
+		fix: top.key === "delay" ? hydrating.length ? "The input waited for islands to hydrate: wake the ones not needed at once later (wake=\"visible\" or \"idle\"), or make their hydration lighter, so a click is never queued behind it." : "The input waited for other work on the main thread: split that long task (yield between steps with `await new Promise(r => setTimeout(r))`), or move it off the main thread, or run it when the visitor is not interacting." : top.key === "handler" ? forced ? "Much of the handler is forced layout: it reads a size or position (offsetHeight, getBoundingClientRect, getComputedStyle) after changing the page, and the browser lays the page out again for each read. Read every size first, then make the changes (or batch them in one requestAnimationFrame); never read between writes in a loop." : "The handler itself is the cost: update the screen first and do the heavy part after the next frame (`requestAnimationFrame` then `setTimeout`), do less per event, or move the work to a worker." : "Painting the result is the cost: the handler changed a lot of the page. Change less per update (a shorter list, `content-visibility: auto` for off-screen parts), and avoid reading layout right after writing it.",
+		fps: i.fp ? [i.fp] : []
+	};
+}
+/** Names with their copies counted: `BatchHole ×4`, `Menu and Cart ×2`. */
+/**
+* On the dev server: how much of an island's code load was the server COMPILING files on this
+* request — the time (overlaps counted once) the server took to answer each file fetched in its load
+* window, when that took 80 ms or more (a transform: a warm dev server answers in a few). 0 off the
+* dev server, or when the visit does not list the files.
+*/
+function dev_compile_ms(page, r) {
+	if (!page.dev) return 0;
+	const from = r.t0 - 5;
+	const to = r.t0 + r.load_ms + 5;
+	const spans = [];
+	for (const f of page.visit?.resources ?? []) {
+		if (f.req_start === void 0 || f.res_start === void 0 || f.req_start < from || f.res_start > to) continue;
+		if (f.res_start - f.req_start >= 80) spans.push([f.req_start, f.res_start]);
+	}
+	spans.sort((a, b) => a[0] - b[0]);
+	let total = 0;
+	let end = -Infinity;
+	for (const [a, b] of spans) {
+		if (b <= end) continue;
+		total += b - Math.max(a, end);
+		end = b;
+	}
+	return total;
+}
+function counted(names) {
+	const n = /* @__PURE__ */ new Map();
+	for (const s of names) n.set(s, (n.get(s) ?? 0) + 1);
+	return list([...n].map(([s, c]) => c > 1 ? `${s} ×${c}` : s));
+}
+/** A URL's path (and query), for naming where something answered from. */
+function path_of(url) {
+	try {
+		const u = new URL(url, "http://x");
+		return u.pathname + u.search;
+	} catch {
+		return url;
+	}
+}
+function list(names) {
+	const uniq = [...new Set(names)];
+	if (uniq.length <= 1) return uniq[0] ?? "";
+	if (uniq.length <= 4) return uniq.slice(0, -1).join(", ") + " and " + uniq[uniq.length - 1];
+	return uniq.slice(0, 3).join(", ") + ` and ${uniq.length - 3} more`;
+}
+function clip(s) {
+	const one = s.split("\n").join(" ");
+	return one.length > 70 ? one.slice(0, 69) + "…" : one;
+}
+function short(url) {
+	const q = url.indexOf("?");
+	const path = q === -1 ? url : url.slice(0, q);
+	return path.slice(path.lastIndexOf("/") + 1) || path;
+}
+export { DOM_LARGE, analyze_page, boolean_attr_at, browser_of, defer_keys, dev_compile_ms, dev_two_copies, encoding_only, engine_of, explain_held_open, first_difference, inline_threshold_tune, late_found, lcp_font, lcp_rivals, prebundled_names, rate, vital_parts, vitals_moved };