@ogygia/devtools 0.0.0 → 0.11.0

package/dist/devtools/regions.js

@@ -0,0 +1,132 @@
+import { props_sidecar_of, tool_made } from "@ogygia/core/internal/instruments";
+import { snapshot } from "@ogygia/core/events";
+// src/devtools/regions.ts
+/**
+* Pure, UI-free helpers the devtools components share — region classification off the DOM attributes
+* the compiler already emits, resource-timing byte lookups, and event queries over the bus buffer.
+* No Svelte, no styling: the `.svelte` components own all presentation.
+*/
+const JS_EXT_RE = /\.js$/;
+function region_kind(el) {
+	if (el.getAttribute("render") === "defer") return "hole";
+	if (el.getAttribute("wake") === "none") return "lake";
+	return "island";
+}
+function region_info(el) {
+	const kind = region_kind(el);
+	const parent = el.hasAttribute("data-nested") ? el.parentElement?.closest("ogygia-region") ?? void 0 : void 0;
+	return {
+		el,
+		kind,
+		wake: el.getAttribute("wake") || (kind === "hole" ? "fetch" : "load"),
+		entry: el.getAttribute("entry"),
+		src: el.getAttribute("src"),
+		fp: el.getAttribute("data-og-fp"),
+		hydrated: el.hasAttribute("data-hydrated") || !!parent?.hasAttribute("data-hydrated"),
+		...parent ? { rides: parent } : {}
+	};
+}
+/** Every `<ogygia-region>` on the page, as {@link RegionInfo}. */
+function all_regions() {
+	return Array.from(document.querySelectorAll("ogygia-region"), region_info);
+}
+/**
+* The raw devalue text of a region's `<script data-ogygia-props>` sidecar (the props that crossed the
+* boundary), or null. Mirrors the runtime's own sibling walk (skips `<link>` CSS hints). Returned as
+* TEXT so this module stays devalue-free; the detail view decodes it.
+*/
+function region_props_sidecar(el) {
+	return props_sidecar_of(el)?.textContent ?? null;
+}
+/** basename of a URL/path (drops query + directory). */
+function basename(url) {
+	return (url.split("?")[0].split("#")[0].split("/").pop() || url).trim();
+}
+/** basename without a trailing `.js`, for a compact chunk label. */
+function short_chunk(url) {
+	if (!url) return "";
+	const b = basename(url).replace(JS_EXT_RE, "");
+	return b.length > 24 ? b.slice(0, 23) + "…" : b;
+}
+/** The island id from an entry URL, or '': `<id>` in the dev server's `virtual:ogygia/island/<id>.js`
+*  and in a build's `og-region.<id>.js` (the name maps key the bare id — with the prefix left on, every
+*  tab in a build showed hashes). */
+function island_id(entry) {
+	if (!entry) return "";
+	const id = basename(entry).replace(JS_EXT_RE, "");
+	return id.startsWith(BUILT_PREFIX) ? id.slice(BUILT_PREFIX.length) : id;
+}
+const BUILT_PREFIX = "og-region.";
+/**
+* The compiler's `island id → component name` map (dev-only), published on `window` by the
+* `virtual:ogygia/devtools-names` side-effect module the runtime/devtools boot pulls in. Empty off a
+* devtools build. Lets every tab label a region "Counter" instead of a hashed entry.
+*/
+function region_names() {
+	return typeof window !== "undefined" && window.__ogygia_region_names || {};
+}
+/** Component name for an island entry URL, or `short_chunk(entry)` when unknown. */
+function region_name(entry) {
+	const id = island_id(entry);
+	return id && region_names()[id] || short_chunk(entry ?? null);
+}
+/**
+* Transitive dev size for an island entry — the compiler's module-graph estimate (wrapper +
+* component + everything imported), published on `window.__ogygia_region_bytes` by the dock's mount
+* fetch. `null` when the island is still cold (never woken → no subgraph yet) or off a dev build.
+*/
+function region_transitive(entry) {
+	const id = island_id(entry);
+	const map = typeof window !== "undefined" && window.__ogygia_region_bytes || null;
+	return id && map && map[id] || null;
+}
+/** Component name for a region fingerprint — joined to its live `<ogygia-region>` in the DOM. */
+function region_name_by_fp(fp) {
+	if (!fp || typeof document === "undefined") return fp || "";
+	const entry = document.querySelector(`ogygia-region[data-og-fp="${CSS.escape(fp)}"]`)?.getAttribute("entry");
+	return (entry ? region_name(entry) : "") || fp;
+}
+/** kB with one decimal. */
+function kb(bytes) {
+	return (bytes / 1024).toFixed(1) + " kB";
+}
+/** Resource-timing entry for a chunk, matched by hashed basename (unique per build). */
+function timing_for(entry) {
+	if (typeof performance === "undefined") return void 0;
+	const base = basename(entry);
+	if (!base) return void 0;
+	return timing_index().get(base);
+}
+let index_len = -1;
+let index = /* @__PURE__ */ new Map();
+function timing_index() {
+	const res = performance.getEntriesByType("resource");
+	if (res.length !== index_len) {
+		index = /* @__PURE__ */ new Map();
+		for (const r of res) if (!tool_made(r)) index.set(basename(r.name), r);
+		index_len = res.length;
+	}
+	return index;
+}
+/** Over-the-wire + decoded bytes for a chunk entry (0/0 when not yet loaded or size hidden). */
+function chunk_bytes(entry) {
+	const t = timing_for(entry);
+	if (!t) return {
+		wire: 0,
+		raw: 0,
+		loaded: false
+	};
+	const wire = t.encodedBodySize || t.transferSize || t.decodedBodySize || 0;
+	return {
+		wire,
+		raw: t.decodedBodySize || wire,
+		loaded: true
+	};
+}
+/** Latest buffered event matching a predicate (newest wins), or null. */
+function latest_event(pred) {
+	const events = snapshot();
+	for (let i = events.length - 1; i >= 0; i--) if (pred(events[i])) return events[i];
+	return null;
+}
+export { all_regions, basename, chunk_bytes, island_id, kb, latest_event, region_info, region_kind, region_name, region_name_by_fp, region_names, region_props_sidecar, region_transitive, short_chunk, timing_for };

package/dist/devtools/session.d.ts

@@ -0,0 +1,31 @@
+import { SessionClick, SessionData, SessionData as SessionData$1, SessionFrame, SessionInteraction, SessionNav, SessionRequest, SessionShift } from "@ogygia/core/insights";
+/** Names for a session's islands: its own record first, then the page as it is now. */
+export declare function session_names(s: SessionData$1, now: (fp: string) => string): (fp: string) => string;
+/** A page's part of a session, saved on page hide so the next document picks the session up. */
+interface SavedPart {
+  origin: number;
+  data: SessionData$1;
+}
+/** On a devtools boot: a session a previous page was recording goes on here. */
+export declare function resume_session_if_any(): boolean;
+/** Was a session saved by the page before (without resuming it). */
+export declare function session_waiting(): boolean;
+/** `button#buy.primary` — a short readable name for an element. */
+export declare function describe_el(el: Element | null | undefined): string;
+interface Recorder {
+  stop(): Promise<SessionData$1>;
+  started: number;
+}
+export declare function set_last_session(s: {
+  data: SessionData$1;
+  report: unknown;
+} | null): void;
+export declare function get_last_session(): {
+  data: SessionData$1;
+  report: unknown;
+} | null;
+export declare function last_session_version(): number;
+export declare function recording(): Recorder | null;
+/** Start recording (or go on with the parts earlier pages saved — `resume_session_if_any`). */
+export declare function start_session(prior?: SavedPart[]): Recorder;
+export type { SessionClick, SessionData, SessionFrame, SessionInteraction, SessionNav, SessionRequest, SessionShift };

package/dist/devtools/session.js

@@ -0,0 +1,455 @@
+import { all_regions, region_name } from "./regions.js";
+import { add_sink, snapshot } from "@ogygia/core/events";
+// src/devtools/session.ts
+/**
+* THE SESSION RECORDER — press record, use the page, press stop. Everything the browser can tell
+* about that stretch is collected here (session-insights.ts turns it into findings):
+*  - every interaction (Event Timing, from 16 ms): its target, input delay / processing / paint;
+*  - long tasks, and long animation frames with the scripts that ran in them (where supported);
+*  - the main thread sampled (JS Self-Profiling, where the document allows it);
+*  - layout shifts, with whether input caused them, and the element that moved;
+*  - every request made (resource timing: size, time, status);
+*  - DOM changes per island (a MutationObserver), errors and rejections, console errors;
+*  - the heap before and after (where the browser exposes it);
+*  - the devtools bus: islands woken, hydrations, failures, recoveries, navigations, hole fetches.
+* Elements are kept by WeakRef so the tab can point at them without holding the page alive.
+*/
+const CLICKABLE = "a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"tab\"],[role=\"menuitem\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"option\"],[onclick],[tabindex]:not([tabindex=\"-1\"])";
+/** What a visitor takes for a control: one in its ancestry, or a pointer cursor where they clicked. */
+function looks_clickable(el) {
+	if (el.closest(CLICKABLE)) return true;
+	try {
+		return getComputedStyle(el).cursor === "pointer";
+	} catch {
+		return false;
+	}
+}
+/** Names for a session's islands: its own record first, then the page as it is now. */
+function session_names(s, now) {
+	return (fp) => s.names?.[fp] || now(fp);
+}
+const SAVED_KEY = "ogygia:devtools:session";
+/** Shift every time in a part by `d` ms (another document's clock onto this one's). */
+function shift_part(s, d) {
+	const t = (xs) => xs.map((x) => ({
+		...x,
+		t: Math.round((x.t + d) * 10) / 10
+	}));
+	return {
+		...s,
+		from: s.from + d,
+		to: s.to + d,
+		interactions: t(s.interactions),
+		longtasks: t(s.longtasks),
+		frames: t(s.frames),
+		shifts: t(s.shifts),
+		requests: t(s.requests),
+		mut_log: t(s.mut_log),
+		clicks: t(s.clicks),
+		errors: t(s.errors),
+		navs: t(s.navs ?? []),
+		events: s.events.map((e) => ({
+			...e,
+			t: e.t + d
+		})),
+		pages: t(s.pages)
+	};
+}
+/** Several pages' parts as one session on the current document's clock. */
+function merge_parts(parts, current) {
+	const here = performance.timeOrigin;
+	const all = [...parts.map((p) => shift_part(p.data, p.origin - here)), current];
+	const cat = (k) => all.flatMap((p) => p[k]);
+	const muts = /* @__PURE__ */ new Map();
+	for (const p of all) for (const m of p.mutations) {
+		const k = m.fp ?? "";
+		const prev = muts.get(k);
+		muts.set(k, {
+			fp: m.fp,
+			count: (prev?.count ?? 0) + m.count,
+			el: m.el ?? prev?.el ?? null
+		});
+	}
+	return {
+		...current,
+		from: all[0].from,
+		interactions: cat("interactions"),
+		longtasks: cat("longtasks"),
+		frames: cat("frames"),
+		shifts: cat("shifts"),
+		requests: cat("requests"),
+		mut_log: cat("mut_log"),
+		clicks: cat("clicks"),
+		errors: cat("errors"),
+		navs: all.flatMap((p) => p.navs ?? []),
+		events: cat("events"),
+		pages: cat("pages"),
+		mutations: [...muts.values()].sort((a, b) => b.count - a.count),
+		heap: current.heap,
+		names: Object.assign({}, ...all.map((p) => p.names ?? {}))
+	};
+}
+/** On a devtools boot: a session a previous page was recording goes on here. */
+function resume_session_if_any() {
+	let parts = null;
+	try {
+		const raw = sessionStorage.getItem(SAVED_KEY);
+		if (raw) parts = JSON.parse(raw);
+		sessionStorage.removeItem(SAVED_KEY);
+	} catch {
+		parts = null;
+	}
+	if (!parts?.length || active) return false;
+	start_session(parts);
+	return true;
+}
+/** Was a session saved by the page before (without resuming it). */
+function session_waiting() {
+	try {
+		return !!sessionStorage.getItem(SAVED_KEY);
+	} catch {
+		return false;
+	}
+}
+const ISLAND = "ogygia-region[data-og-fp]";
+const r1 = (n) => Math.round(n * 10) / 10;
+function island_of(node) {
+	return (node && node.nodeType === 1 ? node : node?.parentElement ?? null)?.closest?.(ISLAND) ?? null;
+}
+/** `button#buy.primary` — a short readable name for an element. */
+function describe_el(el) {
+	if (!el) return "(unknown)";
+	let s = el.localName;
+	if (el.id) s += "#" + el.id;
+	const cls = typeof el.className === "string" ? el.className.trim().split(" ").filter((c) => c && !c.startsWith("svelte-")).slice(0, 2) : [];
+	if (cls.length) s += "." + cls.join(".");
+	const text = (el.textContent ?? "").trim().slice(0, 24);
+	return text ? `${s} "${text}${(el.textContent ?? "").trim().length > 24 ? "…" : ""}"` : s;
+}
+let active = null;
+/** the last finished session (its data + report), for every tab: the Record tab writes it, the
+*  island detail reads its island's part (the report type lives in session-insights.ts) */
+let last_session = null;
+let last_version = 0;
+function set_last_session(s) {
+	last_session = s;
+	last_version++;
+}
+function get_last_session() {
+	return last_session;
+}
+function last_session_version() {
+	return last_version;
+}
+function recording() {
+	return active;
+}
+/** Start recording (or go on with the parts earlier pages saved — `resume_session_if_any`). */
+function start_session(prior) {
+	if (active) return active;
+	const from = performance.now();
+	const seq0 = snapshot().at(-1)?.seq ?? -1;
+	const interactions = [];
+	const longtasks = [];
+	const frames = [];
+	const shifts = [];
+	const errors = [];
+	const muts = /* @__PURE__ */ new Map();
+	const names = {};
+	const note_names = () => {
+		for (const r of all_regions()) if (r.fp && !names[r.fp]) names[r.fp] = region_name(r.entry);
+	};
+	note_names();
+	const off_nav = add_sink((e) => {
+		if (e.name === "nav.start") note_names();
+	});
+	const observers = [];
+	const watch = (type, cb, extra = {}) => {
+		try {
+			const po = new PerformanceObserver((l) => cb(l.getEntries()));
+			po.observe({
+				type,
+				...extra
+			});
+			observers.push({
+				po,
+				cb
+			});
+		} catch {}
+	};
+	watch("event", (es) => {
+		for (const e of es) {
+			if (e.startTime < from || interactions.length >= 2e3) continue;
+			const target = e.target ?? null;
+			const el = target && target.nodeType === 1 ? target : null;
+			const island = island_of(target);
+			interactions.push({
+				t: r1(e.startTime),
+				name: e.name,
+				duration: r1(e.duration),
+				input_delay: r1(Math.max(0, e.processingStart - e.startTime)),
+				processing: r1(Math.max(0, e.processingEnd - e.processingStart)),
+				presentation: r1(Math.max(0, e.startTime + e.duration - e.processingEnd)),
+				id: e.interactionId ?? 0,
+				target: describe_el(el),
+				fp: island?.getAttribute("data-og-fp") ?? null,
+				el: el ? new WeakRef(el) : null
+			});
+		}
+	}, { durationThreshold: 16 });
+	watch("longtask", (es) => {
+		for (const e of es) if (e.startTime >= from && longtasks.length < 2e3) longtasks.push({
+			t: r1(e.startTime),
+			ms: r1(e.duration)
+		});
+	});
+	watch("long-animation-frame", (es) => {
+		for (const e of es) {
+			if (e.startTime < from || frames.length >= 1e3) continue;
+			frames.push({
+				t: r1(e.startTime),
+				ms: r1(e.duration),
+				blocking: r1(e.blockingDuration ?? 0),
+				scripts: (e.scripts ?? []).slice(0, 8).map((s) => ({
+					source: s.sourceURL ?? "",
+					fn: s.sourceFunctionName ?? "",
+					invoker: s.invoker ?? "",
+					ms: r1(s.duration ?? 0)
+				}))
+			});
+		}
+	});
+	watch("layout-shift", (es) => {
+		for (const e of es) {
+			if (e.startTime < from || shifts.length >= 500) continue;
+			const node = e.sources?.[0]?.node ?? null;
+			const el = node && node.nodeType === 1 ? node : node?.parentElement ?? null;
+			shifts.push({
+				t: r1(e.startTime),
+				value: Math.round((e.value ?? 0) * 1e4) / 1e4,
+				input: !!e.hadRecentInput,
+				fp: island_of(node)?.getAttribute("data-og-fp") ?? null,
+				el: el ? new WeakRef(el) : null
+			});
+		}
+	});
+	const mut_log = [];
+	const mo = new MutationObserver((records) => {
+		const now = r1(performance.now());
+		const seen = /* @__PURE__ */ new Set();
+		for (const m of records) {
+			const island = island_of(m.target);
+			muts.set(island, (muts.get(island) ?? 0) + 1);
+			const fp = island?.getAttribute("data-og-fp") ?? null;
+			if (!seen.has(fp) && mut_log.length < 2e4) {
+				seen.add(fp);
+				mut_log.push({
+					t: now,
+					fp
+				});
+			}
+		}
+	});
+	const clicks = [];
+	const on_click = (e) => {
+		if (clicks.length >= 2e3) return;
+		const el = e.target instanceof Element ? e.target : null;
+		if (el?.closest("[data-ogygia-devtools-host]")) return;
+		clicks.push({
+			t: r1(e.timeStamp),
+			target: describe_el(el),
+			fp: island_of(el)?.getAttribute("data-og-fp") ?? null,
+			el: el ? new WeakRef(el) : null,
+			...el && looks_clickable(el) ? { clickable: true } : {}
+		});
+	};
+	addEventListener("click", on_click, {
+		capture: true,
+		passive: true
+	});
+	const navs = [];
+	let handling = null;
+	const on_input = (e) => {
+		const el = e.target instanceof Element ? e.target : null;
+		if (!el || el.closest("[data-ogygia-devtools-host]")) return;
+		handling = {
+			target: describe_el(el),
+			fp: island_of(el)?.getAttribute("data-og-fp") ?? null,
+			until: performance.now() + 50
+		};
+	};
+	const INPUTS = [
+		"click",
+		"submit",
+		"keydown",
+		"change"
+	];
+	for (const type of INPUTS) addEventListener(type, on_input, {
+		capture: true,
+		passive: true
+	});
+	const navigation = globalThis.navigation;
+	const on_navigate = (e) => {
+		const n = e;
+		if (!n.destination || navs.length >= 200) return;
+		const now = performance.now();
+		const by = n.sourceElement ?? null;
+		const input = handling && now <= handling.until ? handling : null;
+		navs.push({
+			url: n.destination.url,
+			t: r1(now),
+			type: n.navigationType ?? "",
+			source: by ? describe_el(by) : input?.target ?? null,
+			fp: by ? island_of(by)?.getAttribute("data-og-fp") ?? null : input?.fp ?? null
+		});
+	};
+	navigation?.addEventListener("navigate", on_navigate);
+	const requests = [];
+	watch("resource", (es) => {
+		for (const r of es) {
+			if (r.startTime < from || requests.length >= 2e3 || r.name.includes("/__profiler/") || r.name.includes("/__ogygia_devtools")) continue;
+			const st = r.serverTiming ?? [];
+			requests.push({
+				url: r.name,
+				type: r.initiatorType,
+				t: r1(r.startTime),
+				ms: r1(r.duration),
+				bytes: r.transferSize || r.decodedBodySize || 0,
+				status: typeof r.responseStatus === "number" && r.responseStatus > 0 ? r.responseStatus : null,
+				...st.length ? { server: st.slice(0, 8).map((x) => ({
+					name: x.name,
+					ms: r1(x.duration),
+					desc: x.description
+				})) } : {}
+			});
+		}
+	});
+	try {
+		mo.observe(document.body, {
+			subtree: true,
+			childList: true,
+			characterData: true,
+			attributes: true
+		});
+	} catch {}
+	const on_error = (e) => errors.length < 200 && errors.push({
+		t: r1(performance.now()),
+		message: String(e.message || e.error || "error").slice(0, 300)
+	});
+	const on_rej = (e) => errors.length < 200 && errors.push({
+		t: r1(performance.now()),
+		message: "unhandled rejection: " + String(e.reason?.message ?? e.reason).slice(0, 280)
+	});
+	addEventListener("error", on_error);
+	addEventListener("unhandledrejection", on_rej);
+	const console_error = console.error;
+	console.error = (...args) => {
+		if (errors.length < 200) errors.push({
+			t: r1(performance.now()),
+			message: "console.error: " + args.map((a) => a instanceof Error ? a.message : String(a)).join(" ").slice(0, 280)
+		});
+		console_error.apply(console, args);
+	};
+	let prof = null;
+	let cpu_off = null;
+	const Ctor = globalThis.Profiler;
+	if (!Ctor) cpu_off = "unsupported";
+	else try {
+		prof = new Ctor({
+			sampleInterval: 10,
+			maxBufferSize: 6e4
+		});
+	} catch {
+		cpu_off = "no-policy";
+	}
+	const heap0 = performance.memory?.usedJSHeapSize ?? null;
+	/** stop watching (the entries still queued count too) */
+	const detach = () => {
+		for (const { po, cb } of observers) try {
+			const left = po.takeRecords();
+			if (left.length) cb(left);
+			po.disconnect();
+		} catch {}
+		mo.disconnect();
+		off_nav();
+		removeEventListener("error", on_error);
+		removeEventListener("unhandledrejection", on_rej);
+		removeEventListener("click", on_click, { capture: true });
+		for (const type of INPUTS) removeEventListener(type, on_input, { capture: true });
+		navigation?.removeEventListener("navigate", on_navigate);
+		removeEventListener("pagehide", on_hide);
+		console.error = console_error;
+	};
+	/** this document's part of the session */
+	const collect = (cpu) => {
+		const heap1 = performance.memory?.usedJSHeapSize ?? null;
+		return {
+			from,
+			to: performance.now(),
+			interactions,
+			longtasks,
+			frames,
+			shifts,
+			requests,
+			mutations: [...muts].map(([el, count]) => ({
+				fp: el?.getAttribute("data-og-fp") ?? null,
+				count,
+				el: el ? new WeakRef(el) : null
+			})).sort((a, b) => b.count - a.count),
+			mut_log,
+			clicks,
+			errors,
+			navs,
+			heap: heap0 !== null && heap1 !== null ? {
+				from: heap0,
+				to: heap1
+			} : null,
+			events: snapshot().filter((e) => e.seq > seq0 && e.realm === "client"),
+			cpu,
+			cpu_off,
+			page: location.pathname,
+			pages: [{
+				url: location.pathname + location.search,
+				t: from
+			}],
+			names: (note_names(), { ...names })
+		};
+	};
+	const on_hide = (e) => {
+		if (e.persisted || active !== rec) return;
+		detach();
+		active = null;
+		const strip = (s) => JSON.parse(JSON.stringify({
+			...s,
+			cpu: null
+		}, (k, v) => k === "el" ? null : v));
+		try {
+			sessionStorage.setItem(SAVED_KEY, JSON.stringify([...prior ?? [], {
+				origin: performance.timeOrigin,
+				data: strip(collect(null))
+			}]));
+		} catch {}
+	};
+	addEventListener("pagehide", on_hide);
+	const rec = {
+		started: prior?.length ? prior[0].data.from + (prior[0].origin - performance.timeOrigin) : from,
+		async stop() {
+			active = null;
+			detach();
+			let cpu = null;
+			if (prof) try {
+				cpu = await prof.stop();
+			} catch {
+				cpu = null;
+			}
+			const here = collect(cpu);
+			try {
+				sessionStorage.removeItem(SAVED_KEY);
+			} catch {}
+			return prior?.length ? merge_parts(prior, here) : here;
+		}
+	};
+	active = rec;
+	return rec;
+}
+export { describe_el, get_last_session, last_session_version, recording, resume_session_if_any, session_names, session_waiting, set_last_session, start_session };

package/dist/devtools/since-load.d.ts

@@ -0,0 +1,50 @@
+import { PartedVital, VitalPart } from "@ogygia/core/insights";
+export interface LoadSnapshot {
+  path: string;
+  /** epoch ms the picture was taken */
+  at: number;
+  /** `dev`: the dev server's own doing (its first compile, the CSS it adds with JavaScript) */
+  findings: {
+    code: string;
+    names: string[];
+    dev?: true;
+  }[];
+  /** `compile_ms`: on the dev server, the part of its load that was the server compiling its files
+   *  on that first request (page-insights `dev_compile_ms`) — not the code's own cost */
+  islands: {
+    name: string;
+    load_ms: number;
+    hydrate_ms: number;
+    compile_ms?: number;
+  }[];
+  vitals: {
+    key: string;
+    value: number;
+  }[];
+  /** each split vital's parts (page-insights `vital_parts`); older pictures have none */
+  parts?: Partial<Record<PartedVital, VitalPart[]>>;
+  /** the dev server compiled the page on this load's request (its first byte waited on that) */
+  page_compiled?: true;
+  /** its layout shift came from the CSS the dev server adds with JavaScript */
+  cls_dev?: true;
+}
+export interface SinceLoad {
+  ago_ms: number;
+  fixed: string[];
+  added: string[];
+  moved: {
+    what: string;
+    a: number;
+    b: number;
+    unit: "ms" | "";
+    better: boolean;
+    part?: {
+      label: string;
+      a: number;
+      b: number;
+    };
+  }[];
+  /** what was left out of the compare, and why (the last load was the dev server's first compile) */
+  note?: string;
+}
+export declare function since_load(prev: LoadSnapshot, now: LoadSnapshot, at?: number): SinceLoad | null;