@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/profiler/browser-findings.d.ts

@@ -0,0 +1,25 @@
+import { ClientWindows, InteractionCpu } from "./client-windows.js";
+import { Visit } from "./visit.js";
+import { HeldOpen, PageReport } from "@ogygia/core/insights";
+export interface BrowserFinding {
+  severity: "info" | "warn";
+  code: string;
+  message: string;
+  fix?: string;
+  /** the islands it is about (the devtools light them up on the page) */
+  fps: string[];
+}
+/** The Page tab's report of one visit. `rows`: the profiled render's islands (fp, entry, name);
+ *  `windows`: the browser's CPU cut by island (the findings then name the function behind a cost). */
+export declare function browser_page_report(visit: Visit, rows: readonly {
+  fp: string;
+  entry: string;
+  name: string;
+  own_bytes?: number;
+}[], windows?: ClientWindows, third?: {
+  origin: string;
+  named?: string[];
+  by_host: Map<string, number> | null;
+}, hole_name?: (id: string, p?: string) => string, hole_server?: (id: string, p?: string) => number | undefined, interaction_cpu?: InteractionCpu, dev?: boolean, held_open?: HeldOpen): PageReport | null;
+/** The report's share of them: the codes it does not already make, severities in its two levels. */
+export declare function browser_findings(report: PageReport | null): BrowserFinding[];

package/dist/profiler/browser-findings.js

@@ -0,0 +1,260 @@
+import { analyze_page, browser_of } from "@ogygia/core/insights";
+// src/profiler/browser-findings.ts
+/**
+* THE BROWSER'S FINDINGS IN THE REPORT — the devtools Page tab's brain (insights/page-insights.ts)
+* run on the visit the beacon sent, so the report and the Page tab say the same thing about the same
+* load: clicked before it woke, hydrating moved the layout, one long hydrate, waited for its turn,
+* eager below the fold, woke late, the largest paint repainted, a failed island with its error.
+*
+* The regions come from the visit itself (where each sat on the page, how it wakes, whether it
+* woke); their names from the profiled render's island rows, joined by fingerprint, then by entry.
+* Findings the report already makes its own way are left to it: a recovery (hydration-mismatch),
+* an island that never woke (never-hydrated), the vitals, the render-blocking files.
+*/
+/** codes the report makes from its own data (render-blocking only when it weighed the page's files:
+*  the report.ts caller drops the browser's then — on a dev server it weighs nothing, and the
+*  browser's timing of the blocking file is all there is) */
+const SKIP = /* @__PURE__ */ new Set([
+	"recovered",
+	"never-woke",
+	"vital-ttfb",
+	"vital-fcp",
+	"vital-lcp",
+	"vital-cls",
+	"vital-inp"
+]);
+/** `og-region.<id>.<hash>.js` → `og-region.<id>.js` (a location's identity); anything else as is. */
+function identity_file(file) {
+	if (!file.startsWith("og-region.")) return file;
+	const parts = file.split(".");
+	return parts.length === 4 ? `${parts[0]}.${parts[1]}.${parts[3]}` : file;
+}
+function name_from_entry(entry) {
+	const q = entry.indexOf("?");
+	const path = q === -1 ? entry : entry.slice(0, q);
+	const base = path.slice(path.lastIndexOf("/") + 1);
+	return base.endsWith(".svelte") ? base.slice(0, -7) : base || entry;
+}
+const kind_of = (c) => c === "component" || c === "app" ? "app" : c === "dependency" ? "dependency" : c === "svelte" ? "svelte" : "browser";
+const as_fn = (f) => ({
+	name: f.name,
+	file: f.file,
+	line: f.line,
+	kind: kind_of(f.category),
+	self_ms: f.self_ms,
+	total_ms: f.total_ms
+});
+/** The browser's CPU cut by island, in the shape the Page tab's analysis quotes from. */
+function cpu_summary(w) {
+	const islands = {};
+	for (const [fp, v] of Object.entries(w.islands)) islands[fp] = {
+		ms: v.ms,
+		top: v.top.map(as_fn)
+	};
+	return {
+		window_ms: 0,
+		busy_ms: 0,
+		by_kind: [],
+		fns: [],
+		files: [],
+		islands,
+		outside: {
+			ms: w.outside.ms,
+			top: w.outside.top.map(as_fn)
+		},
+		interval_ms: 0
+	};
+}
+/** The Page tab's report of one visit. `rows`: the profiled render's islands (fp, entry, name);
+*  `windows`: the browser's CPU cut by island (the findings then name the function behind a cost). */
+function browser_page_report(visit, rows, windows, third, hole_name, hole_server, interaction_cpu, dev, held_open) {
+	if (!visit.regions?.length && !visit.islands.length && !visit.holes_failed?.length && !visit.holes_answered?.length && !visit.hole_batches?.length && !visit.restores?.length && !visit.preload_misses?.length && !visit.entry_fallbacks?.length && !visit.refetched?.length && !visit.navs?.length && !visit.shifts?.length && !visit.interaction && !visit.paints?.lcp && !visit.dom && !visit.images_oversized?.length && !visit.font_faces?.length && !visit.preloads_unused?.length && !visit.images_eager_below?.length && !visit.forced_layout?.length && !visit.images_unsized?.length && !visit.scroll_jank?.length && !visit.uncompressed?.length && !visit.nav.raw) return null;
+	const by_fp = new Map(rows.map((r) => [r.fp, r.name]));
+	const by_entry = new Map(rows.map((r) => [r.entry, r.name]));
+	const file_of = (entry) => {
+		const q = entry.indexOf("?");
+		const p = q === -1 ? entry : entry.slice(0, q);
+		return p.slice(p.lastIndexOf("/") + 1);
+	};
+	const by_file = new Map(rows.map((r) => [file_of(r.entry), r.name]));
+	const named = (entry) => by_entry.get(entry) ?? by_file.get(file_of(entry)) ?? name_from_entry(entry);
+	const name_of = (fp, entry) => by_fp.get(fp) ?? (entry ? named(entry) : fp.slice(0, 8));
+	const regions = (visit.regions ?? []).map((r) => {
+		const kind = r.defer ? "hole" : r.wake === "none" ? "lake" : "island";
+		const own = kind === "island" ? (rows.find((x) => x.fp === r.fp) ?? (r.entry ? rows.find((x) => x.entry === r.entry) : void 0))?.own_bytes : void 0;
+		return {
+			fp: r.fp,
+			name: name_of(r.fp, r.entry),
+			kind,
+			wake: r.wake || (kind === "hole" ? "fetch" : "load"),
+			hydrated: !!r.hydrated,
+			top: r.top,
+			height: r.height,
+			...own ? { own_bytes: own } : {},
+			...kind === "island" && r.hidden ? {
+				hidden: true,
+				...r.headless ? { headless: true } : {}
+			} : {}
+		};
+	});
+	const known = new Set(regions.map((r) => r.fp));
+	for (const i of visit.islands) if (!known.has(i.fp)) {
+		known.add(i.fp);
+		regions.push({
+			fp: i.fp,
+			name: name_of(i.fp, i.entry),
+			kind: "island",
+			wake: rows.find((r) => r.fp === i.fp) ? "load" : "",
+			hydrated: true
+		});
+	}
+	const failures = (visit.regions ?? []).filter((r) => r.failed !== void 0).map((r) => ({
+		fp: r.fp,
+		message: r.failed || "it threw",
+		...r.failed_span ? { span: r.failed_span } : {},
+		...r.failed_turn !== void 0 ? { turn: r.failed_turn } : {}
+	}));
+	const span = (s) => s ? {
+		ms: s.ms,
+		top: s.top.map(as_fn)
+	} : null;
+	const browser = browser_of(visit.ua);
+	const input = {
+		...dev ? { dev: true } : {},
+		...browser ? { browser } : {},
+		...visit.dock_open_at !== void 0 ? { dock_open_at: visit.dock_open_at } : {},
+		...held_open ? { held_open } : {},
+		...interaction_cpu ? { interaction_cpu: {
+			t: interaction_cpu.t,
+			mapped: interaction_cpu.mapped === true,
+			wait: span(interaction_cpu.wait),
+			handler: span(interaction_cpu.handler)
+		} } : {},
+		vitals: visit.vitals ?? {},
+		visit: {
+			nav: visit.nav.start_hidden ? (({ req_start: _q, res_start: _s, res_end, ...rest }) => res_end > 0 ? {
+				...rest,
+				res_end
+			} : rest)(visit.nav) : visit.nav,
+			paints: visit.paints,
+			resources: visit.resources,
+			resource_totals: visit.resource_totals,
+			viewport: visit.viewport,
+			...visit.scripts ? { scripts: visit.scripts } : {},
+			...visit.warnings ? { warnings: visit.warnings } : {},
+			...visit.preload_misses ? { preload_misses: visit.preload_misses } : {},
+			...visit.font_faces ? { font_faces: visit.font_faces } : {},
+			...visit.images_oversized ? { images_oversized: visit.images_oversized } : {},
+			...visit.dom ? { dom: visit.dom } : {},
+			...visit.preloads_unused ? { preloads_unused: visit.preloads_unused } : {},
+			...visit.uncompressed ? { uncompressed: visit.uncompressed } : {},
+			...visit.images_eager_below ? { images_eager_below: visit.images_eager_below } : {},
+			...visit.images_unsized ? { images_unsized: visit.images_unsized } : {},
+			...visit.forced_layout ? { forced_layout: visit.forced_layout } : {},
+			...visit.scroll_jank ? { scroll_jank: visit.scroll_jank.map((j) => ({
+				...j,
+				scripts: j.scripts.map((s) => {
+					const own = by_file.get(identity_file(file_of(s.url)));
+					return own ? {
+						...s,
+						island: own
+					} : s;
+				})
+			})) } : {},
+			...visit.navs ? { navs: visit.navs } : {},
+			...visit.entry_fallbacks ? { entry_fallbacks: visit.entry_fallbacks.map((f) => ({
+				...f,
+				name: named(f.entry)
+			})) } : {},
+			...visit.interaction ? { interaction: {
+				...visit.interaction,
+				scripts: visit.interaction.scripts?.map((s) => {
+					const own = by_file.get(identity_file(file_of(s.url)));
+					return own ? {
+						...s,
+						island: own
+					} : s;
+				})
+			} } : {},
+			...visit.refetched ? { refetched: visit.refetched.map((f) => {
+				if (!f.entry) return f;
+				const own = by_entry.get(f.entry) ?? by_file.get(file_of(f.entry));
+				return {
+					...f,
+					name: own ?? (f.hole && hole_name ? `the island in ${hole_name(f.hole)}` : named(f.entry))
+				};
+			}) } : {},
+			...third ? {
+				origin: third.origin,
+				...third.named ? { named: third.named } : {}
+			} : {}
+		},
+		islands: visit.islands,
+		firsts: visit.firsts,
+		shifts: visit.shifts,
+		longtasks: visit.longtasks,
+		...visit.longtasks_from ? { longtasks_from: visit.longtasks_from } : {},
+		...visit.shifts_from ? { shifts_from: visit.shifts_from } : {},
+		...visit.holes_failed?.length ? { hole_failures: visit.holes_failed.map((h) => ({
+			name: hole_name?.(h.id) ?? `the hole ${h.id}`,
+			reason: h.reason,
+			...h.final_path ? { final_url: h.final_path } : {},
+			...h.message ? { message: h.message } : {},
+			attempts: h.attempts
+		})) } : {},
+		...visit.holes_answered?.length ? { hole_waits: visit.holes_answered.map((h) => {
+			const server_ms = hole_server?.(h.id, h.p) ?? h.render;
+			const shown_at = Math.max(visit.paints?.fcp ?? 0, h.start);
+			return {
+				name: hole_name?.(h.id, h.p) ?? `the hole ${h.id}`,
+				wait_ms: Math.max(0, Math.round(h.t - shown_at)),
+				below_fold: h.below_fold,
+				shown_at,
+				...server_ms !== void 0 ? { server_ms } : {},
+				...h.queue !== void 0 ? { server_queue_ms: h.queue } : {},
+				...h.left !== void 0 ? {
+					left_at: h.left,
+					first_at: h.first,
+					end_at: h.end
+				} : {},
+				...h.batch !== void 0 ? { batch_size: h.batch } : {}
+			};
+		}) } : {},
+		...visit.restores?.length ? { restore_events: visit.restores } : {},
+		...visit.hole_batches?.length ? { hole_batches: visit.hole_batches.map((b) => ({
+			sent: b.sent,
+			delivered: b.delivered,
+			status: b.status,
+			...b.refused ? { refused: b.refused } : {},
+			...b.final_url ? { final_url: b.final_url } : {},
+			names: b.ids.map((id) => id && hole_name?.(id) || "a hole")
+		})) } : {}
+	};
+	const cpu = windows ? cpu_summary(windows) : null;
+	const by_host = third?.by_host ? Object.fromEntries(third.by_host) : void 0;
+	return analyze_page(input, regions, failures, Infinity, cpu ? {
+		...cpu,
+		by_host
+	} : by_host ? {
+		...cpu_summary({
+			islands: {},
+			outside: {
+				ms: 0,
+				top: []
+			}
+		}),
+		by_host
+	} : null);
+}
+/** The report's share of them: the codes it does not already make, severities in its two levels. */
+function browser_findings(report) {
+	if (!report) return [];
+	return report.findings.filter((f) => !SKIP.has(f.code)).map((f) => ({
+		severity: f.severity === "info" ? "info" : "warn",
+		code: f.code,
+		message: `In the browser: ${f.message}`,
+		...f.fix ? { fix: f.fix } : {},
+		fps: f.fps
+	}));
+}
+export { browser_findings, browser_page_report };

package/dist/profiler/byte-strip.d.ts

@@ -0,0 +1,58 @@
+import { StreamTail } from "./stream-tail.js";
+export type StripKind = "head" | "style" | "css-link" | "runtime" | "script" | "seed" | "remote-seed" | "props" | "holes" | "island" | "lake" | "hole" | "shadow" | "markup";
+export interface StripSegment {
+  kind: StripKind;
+  start: number;
+  end: number;
+  /** an island's fingerprint / a script's type — what the report names the segment by */
+  label?: string;
+}
+export interface ByteStrip {
+  total: number;
+  segments: StripSegment[];
+  /** bytes per kind over the whole document (shadow DOM counted wherever it sits, islands included) */
+  by_kind: Partial<Record<StripKind, number>>;
+  /** declarative shadow roots anywhere in the document, bytes — a design system's server render */
+  shadow_bytes: number;
+  shadow_count: number;
+  /** the elements the markup makes: the whole document's, and the islands holding the most */
+  elements?: {
+    total: number;
+    islands: {
+      fp: string;
+      n: number;
+    }[];
+  };
+  /** the `src` of each `<img>` with no width or height (the first 8): room the browser cannot hold */
+  unsized_images?: string[];
+  /** when each chunk of the document LEFT the server (end offset, ms after the render began) —
+   *  present when the page streamed in more than one chunk */
+  chunks?: {
+    end: number;
+    t: number;
+  }[];
+  /** what held the document open after its early part (stream-tail.ts), when it paused long */
+  tail?: StreamTail;
+}
+/** When a byte left the server, from the chunk stamps: the chunk that carried it. */
+export declare function left_at(offset: number, chunks: {
+  end: number;
+  t: number;
+}[]): number | undefined;
+export declare function byte_strip(html: string): ByteStrip;
+/** The elements markup makes from `start` to `end`: each opening tag once (`walk_tags`). */
+export declare function count_elements(html: string, start: number, end: number): number;
+/** IMAGES THE BROWSER CANNOT HOLD ROOM FOR: each `<img>` with no `width` or no `height` attribute
+ *  (and not `hidden`): until its file arrives the browser does not know its height, so the page
+ *  below it moves when it does — unless CSS sizes it. Their `src`s (the first 8), in the order of the
+ *  page. `lower` is the lowercased document (tags), `raw` the document as sent (to read the `src`). No regex. */
+export declare function unsized_images(lower: string, raw: string): string[];
+/** A segment's arrival at the browser, given the document's download span from navigation timing:
+ *  bytes are assumed to arrive at a steady rate between the first byte and the last. */
+export declare function arrival_ms(s: {
+  start: number;
+  end: number;
+}, total: number, res_start: number, res_end: number): {
+  first: number;
+  last: number;
+};

package/dist/profiler/byte-strip.js

@@ -0,0 +1,228 @@
+import { scanRegions } from "@ogygia/core/internal/server";
+// src/profiler/byte-strip.ts
+/**
+* THE DOCUMENT AS A BYTE STRIP — what each byte of the HTML the server sent IS: head markup,
+* inline styles, stylesheet links, the runtime bootstrap, other scripts, the page seed, the remote
+* seed, the island props tail, the holes record, each island's markup (named by its fingerprint,
+* the report joins it to the island's row), lakes and holes, declarative shadow DOM a design
+* system rendered, and plain markup. Pure: a string in, ordered segments out. The report draws
+* the strip with the time each byte left the server and the time the browser had it.
+*/
+/** When a byte left the server, from the chunk stamps: the chunk that carried it. */
+function left_at(offset, chunks) {
+	for (const c of chunks) if (offset < c.end) return c.t;
+	return chunks.length ? chunks[chunks.length - 1].t : void 0;
+}
+const SCRIPT_RE = /<script\b([^>]*)>[\s\S]*?<\/script\s*>/gi;
+const STYLE_RE = /<style\b[^>]*>[\s\S]*?<\/style\s*>/gi;
+const LINK_RE = /<link\b[^>]*>/gi;
+const TEMPLATE_RE = /<template\b[^>]*\bshadowrootmode\b[^>]*>[\s\S]*?<\/template\s*>/gi;
+const HEAD_END_RE = /<\/head\s*>/i;
+const REL_STYLESHEET_RE = /\brel\s*=\s*["']?(?:[^"'>\s]*\s)?stylesheet\b/i;
+const FP_ATTR = "data-og-fp";
+function script_kind(attrs) {
+	if (/data-ogygia-runtime/.test(attrs)) return { kind: "runtime" };
+	if (/data-ogygia-props/.test(attrs)) return { kind: "props" };
+	if (/data-ogygia-holes/.test(attrs)) return { kind: "holes" };
+	if (/application\/ogygia-page/.test(attrs)) return { kind: "seed" };
+	if (/application\/ogygia-remote/.test(attrs)) return { kind: "remote-seed" };
+	const type = /\btype\s*=\s*["']?([^"'\s>]+)/i.exec(attrs)?.[1];
+	const src = /\bsrc\s*=\s*["']?([^"'\s>]+)/i.exec(attrs)?.[1];
+	return {
+		kind: "script",
+		label: src ? `src ${src.split("/").pop()}` : type ? `type ${type}` : "inline"
+	};
+}
+function byte_strip(html) {
+	const spans = [];
+	let m;
+	SCRIPT_RE.lastIndex = 0;
+	while (m = SCRIPT_RE.exec(html)) spans.push({
+		...script_kind(m[1]),
+		start: m.index,
+		end: m.index + m[0].length
+	});
+	STYLE_RE.lastIndex = 0;
+	while (m = STYLE_RE.exec(html)) spans.push({
+		kind: "style",
+		start: m.index,
+		end: m.index + m[0].length
+	});
+	LINK_RE.lastIndex = 0;
+	while (m = LINK_RE.exec(html)) if (REL_STYLESHEET_RE.test(m[0])) spans.push({
+		kind: "css-link",
+		start: m.index,
+		end: m.index + m[0].length,
+		label: /\bhref\s*=\s*["']?([^"'\s>]+)/i.exec(m[0])?.[1]?.split("/").pop()
+	});
+	let shadow_bytes = 0;
+	let shadow_count = 0;
+	TEMPLATE_RE.lastIndex = 0;
+	while (m = TEMPLATE_RE.exec(html)) {
+		shadow_bytes += m[0].length;
+		shadow_count++;
+		spans.push({
+			kind: "shadow",
+			start: m.index,
+			end: m.index + m[0].length
+		});
+	}
+	try {
+		for (const r of scanRegions(html)) {
+			if (r.depth !== 0) continue;
+			const kind = r.kind === "island" ? "island" : r.kind === "lake" ? "lake" : r.kind === "hole" ? "hole" : "markup";
+			spans.push({
+				kind,
+				start: r.start,
+				end: r.end,
+				label: r.attrs[FP_ATTR] ?? r.attrs.entry ?? r.attrs.name
+			});
+		}
+	} catch {}
+	spans.sort((a, b) => a.start - b.start || b.end - a.end);
+	const head_end = HEAD_END_RE.exec(html);
+	const head_at = head_end ? head_end.index + head_end[0].length : 0;
+	const out = [];
+	let pos = 0;
+	const fill = (to) => {
+		if (to <= pos) return;
+		if (pos < head_at && to > head_at) {
+			out.push({
+				kind: "head",
+				start: pos,
+				end: head_at
+			});
+			out.push({
+				kind: "markup",
+				start: head_at,
+				end: to
+			});
+		} else out.push({
+			kind: to <= head_at ? "head" : "markup",
+			start: pos,
+			end: to
+		});
+		pos = to;
+	};
+	for (const s of spans) {
+		if (s.start < pos) continue;
+		fill(s.start);
+		out.push(s);
+		pos = s.end;
+	}
+	fill(html.length);
+	const by_kind = {};
+	for (const s of out) by_kind[s.kind] = (by_kind[s.kind] ?? 0) + (s.end - s.start);
+	if (shadow_bytes) by_kind.shadow = shadow_bytes;
+	const lower = html.toLowerCase();
+	const islands = out.filter((s) => s.kind === "island" && s.label).map((s) => ({
+		fp: s.label,
+		n: count_elements(lower, s.start, s.end)
+	}));
+	islands.sort((a, b) => b.n - a.n);
+	const unsized = unsized_images(lower, html);
+	return {
+		total: html.length,
+		segments: out,
+		by_kind,
+		shadow_bytes,
+		shadow_count,
+		elements: {
+			total: count_elements(lower, 0, lower.length),
+			islands: islands.slice(0, 3)
+		},
+		...unsized.length ? { unsized_images: unsized } : {}
+	};
+}
+/** Raw-text elements: their contents are text, not elements. A `<template>`'s contents (a
+*  declarative shadow root's too) are not in the document's own elements either. */
+const OPAQUE = [
+	"script",
+	"style",
+	"textarea",
+	"title",
+	"template",
+	"noscript"
+];
+/** Every opening tag markup makes from `start` to `end`, once: its name and where its `<` is,
+*  skipping comments and the contents of raw-text elements and templates. `html` lowercased. No regex. */
+function walk_tags(html, start, end, on_tag) {
+	let i = html.indexOf("<", start);
+	while (i !== -1 && i < end) {
+		const c = html.charCodeAt(i + 1);
+		if (c === 33 && html.startsWith("<!--", i)) {
+			const e = html.indexOf("-->", i + 4);
+			i = e === -1 ? -1 : html.indexOf("<", e + 3);
+			continue;
+		}
+		if (c >= 97 && c <= 122) {
+			let j = i + 1;
+			while (j < end) {
+				const d = html.charCodeAt(j);
+				if (!(d >= 97 && d <= 122 || d >= 48 && d <= 57 || d === 45)) break;
+				j++;
+			}
+			const tag = html.slice(i + 1, j);
+			on_tag(tag, i);
+			if (OPAQUE.includes(tag)) {
+				const close = html.indexOf("</" + tag, j);
+				i = close === -1 ? -1 : html.indexOf("<", close + 2);
+				continue;
+			}
+		}
+		i = html.indexOf("<", i + 1);
+	}
+}
+/** The elements markup makes from `start` to `end`: each opening tag once (`walk_tags`). */
+function count_elements(html, start, end) {
+	let n = 0;
+	walk_tags(html, start, end, () => n++);
+	return n;
+}
+/** IMAGES THE BROWSER CANNOT HOLD ROOM FOR: each `<img>` with no `width` or no `height` attribute
+*  (and not `hidden`): until its file arrives the browser does not know its height, so the page
+*  below it moves when it does — unless CSS sizes it. Their `src`s (the first 8), in the order of the
+*  page. `lower` is the lowercased document (tags), `raw` the document as sent (to read the `src`). No regex. */
+function unsized_images(lower, raw) {
+	const out = [];
+	walk_tags(lower, 0, lower.length, (tag, at) => {
+		if (tag !== "img" || out.length >= 8) return;
+		const close = lower.indexOf(">", at);
+		if (close === -1) return;
+		const attrs = lower.slice(at + 4, close);
+		const has = (name) => {
+			let k = attrs.indexOf(name);
+			while (k !== -1) {
+				const before = attrs.charCodeAt(k - 1);
+				const after = attrs.charCodeAt(k + name.length);
+				if ((k === 0 || before === 32 || before === 9 || before === 10 || before === 13) && (after === 61 || after === 32 || after === 62 || Number.isNaN(after))) return true;
+				k = attrs.indexOf(name, k + 1);
+			}
+			return false;
+		};
+		if (has("width") && has("height") || has("hidden")) return;
+		const s = attrs.indexOf("src=");
+		if (s === -1) return;
+		const q = raw.charAt(at + 4 + s + 4);
+		const quoted = q === "\"" || q === "'";
+		const from = at + 4 + s + (quoted ? 5 : 4);
+		let to = quoted ? raw.indexOf(q, from) : from;
+		if (!quoted) while (to < close && raw.charCodeAt(to) > 32 && raw.charCodeAt(to) !== 62) to++;
+		out.push(raw.slice(from, to === -1 ? from : to).slice(0, 300));
+	});
+	return out;
+}
+/** A segment's arrival at the browser, given the document's download span from navigation timing:
+*  bytes are assumed to arrive at a steady rate between the first byte and the last. */
+function arrival_ms(s, total, res_start, res_end) {
+	if (total <= 0 || res_end <= res_start) return {
+		first: res_start,
+		last: res_start
+	};
+	const per = (res_end - res_start) / total;
+	return {
+		first: res_start + s.start * per,
+		last: res_start + s.end * per
+	};
+}
+export { arrival_ms, byte_strip, count_elements, left_at, unsized_images };

package/dist/profiler/client-files.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Where the BROWSER's scripts live on disk: a browser CPU trace names its frames by URL
+ * (`https://site/_app/immutable/chunks/X.js`), and the source maps for those chunks sit next to
+ * the built client files, not on the server's chunk paths. These helpers find the client output
+ * dir and turn an app asset URL into the local file, so the same resolver that names server
+ * frames names browser frames too. Pure; the host supplies `exists`.
+ */
+/** Kit's client output dirs to try, most likely first: the adapter's layout (`build/index.js` →
+ *  `build/client`), Kit's own output during `vite preview`, and the two under the cwd. */
+export declare function client_dir_candidates(entry_dir: string | undefined, cwd: string, join: (...p: string[]) => string): string[];
+/** The path of an app asset inside the client dir (`/base/_app/immutable/chunks/X.js` →
+ *  `_app/immutable/chunks/X.js`), or undefined when the URL is not one of the app's own. */
+export declare function app_asset_rel(pathname: string): string | undefined;
+/** A finder from URL to local file: same-origin app assets only, the first client dir that has
+ *  the file wins, cached per URL. `origin` is the page's origin (the beacon's request origin). */
+export declare function client_file_finder(origin: string | undefined, dirs: readonly string[], exists: (p: string) => boolean, join: (...p: string[]) => string): (url: string) => string | undefined;

package/dist/profiler/client-files.js

@@ -0,0 +1,60 @@
+// src/profiler/client-files.ts
+/**
+* Where the BROWSER's scripts live on disk: a browser CPU trace names its frames by URL
+* (`https://site/_app/immutable/chunks/X.js`), and the source maps for those chunks sit next to
+* the built client files, not on the server's chunk paths. These helpers find the client output
+* dir and turn an app asset URL into the local file, so the same resolver that names server
+* frames names browser frames too. Pure; the host supplies `exists`.
+*/
+/** Kit's client output dirs to try, most likely first: the adapter's layout (`build/index.js` →
+*  `build/client`), Kit's own output during `vite preview`, and the two under the cwd. */
+function client_dir_candidates(entry_dir, cwd, join) {
+	const out = [];
+	const add = (d) => {
+		if (!out.includes(d)) out.push(d);
+	};
+	if (entry_dir) {
+		add(join(entry_dir, "client"));
+		add(join(entry_dir, "..", "client"));
+	}
+	add(join(cwd, ".svelte-kit", "output", "client"));
+	add(join(cwd, "build", "client"));
+	return out;
+}
+/** The path of an app asset inside the client dir (`/base/_app/immutable/chunks/X.js` →
+*  `_app/immutable/chunks/X.js`), or undefined when the URL is not one of the app's own. */
+function app_asset_rel(pathname) {
+	const i = pathname.indexOf("/_app/");
+	if (i === -1) return void 0;
+	const rel = pathname.slice(i + 1);
+	if (rel.split("/").some((s) => s === ".." || s === "")) return void 0;
+	return rel;
+}
+/** A finder from URL to local file: same-origin app assets only, the first client dir that has
+*  the file wins, cached per URL. `origin` is the page's origin (the beacon's request origin). */
+function client_file_finder(origin, dirs, exists, join) {
+	const cache = /* @__PURE__ */ new Map();
+	let dir;
+	return (url) => {
+		const hit = cache.get(url);
+		if (hit !== void 0 || cache.has(url)) return hit;
+		let file;
+		try {
+			const u = new URL(url, origin ?? "http://x");
+			if (!origin || u.origin === origin) {
+				const rel = app_asset_rel(u.pathname);
+				if (rel) {
+					if (dir && exists(join(dir, rel))) file = join(dir, rel);
+					else for (const d of dirs) if (exists(join(d, rel))) {
+						dir = d;
+						file = join(d, rel);
+						break;
+					}
+				}
+			}
+		} catch {}
+		cache.set(url, file);
+		return file;
+	};
+}
+export { app_asset_rel, client_dir_candidates, client_file_finder };