@zkmake/three-meter 0.6.0 → 0.8.0

package/dist/{mount-perf-hud-C5wdjgmM.js → mount-perf-hud-B_cmTG2M.js}

@@ -1,3 +1,36 @@
+//#region src/ui/budgets.ts
+const DEFAULT_TARGET_FPS = 60;
+const FLOORS = /* @__PURE__ */ new Set(["fps", "low"]);
+const resolveBudgets = (budgets) => {
+	const targetFps = budgets && budgets.targetFps || DEFAULT_TARGET_FPS;
+	const frameMs = 1e3 / targetFps;
+	if (budgets === false) return {
+		frameMs,
+		limits: {}
+	};
+	const merged = {
+		cpu: frameMs,
+		fps: targetFps * .95,
+		gpu: frameMs,
+		low: targetFps / 2,
+		p99: frameMs * 1.5,
+		...budgets
+	};
+	const limits = {};
+	for (const [key, limit] of Object.entries(merged)) if (key !== "targetFps" && typeof limit === "number" && Number.isFinite(limit)) limits[key] = limit;
+	return {
+		frameMs,
+		limits
+	};
+};
+const isFloor = (key) => FLOORS.has(key);
+/** `null` means the value isn't known yet (no frames, no GPU timer), which is never over. */
+const isOverBudget = (resolved, key, value) => {
+	const limit = resolved.limits[key];
+	if (limit === void 0 || value === null) return false;
+	return isFloor(key) ? value < limit : value > limit;
+};
+//#endregion
 //#region src/ui/theme.ts
 const THEME_MODES = [
 	"dark",
@@ -453,6 +486,7 @@ const dockPanel = (element, options = {}) => {
 //#endregion
 //#region src/ui/icons.ts
 const ICON_MARKUP = {
+	flame: "<path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"/>",
 	activity: "<path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"/>",
 	box: "<path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"/><path d=\"m3.3 7 8.7 5 8.7-5\"/><path d=\"M12 22V12\"/>",
 	circleDot: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/>",
@@ -493,7 +527,7 @@ const createIcon = (name, className) => {
 };
 //#endregion
 //#region package.json
-var version = "0.6.0";
+var version = "0.8.0";
 //#endregion
 //#region src/ui/clipboard.ts
 /**
@@ -571,7 +605,7 @@ const METRIC_HELP = {
 //#region src/ui/report.ts
 /**
 * A plain-text snapshot of the monitor for bug reports: versions, backend and
-* GPU, the current sample, stutter stats and the page. Fenced as a `text`
+* GPU, the current sample, stutter stats, the scene's top meshes and the page. Fenced as a `text`
 * code block so GitHub and Slack keep the line breaks.
 */
 const BACKEND_LABELS = {
@@ -586,7 +620,13 @@ const backendLabel = (environment) => {
 	return environment.fallback ? `${label} fallback` : label;
 };
 const ms = (value) => `${value.toFixed(1)} ms`;
-const renderReport = ({ environment, page, sample, stats }) => {
+/** Top meshes by draw calls, three at most: `Top: cubes ×2,000 (1 call, 24K tris) · …`. */
+const topMeshes = (cost) => `Top: ${cost.meshes.slice(0, 3).map((entry) => {
+	const copies = entry.instances > 1 ? ` ×${formatCount(entry.instances)}` : "";
+	const calls = `${formatCount(entry.calls)} ${entry.calls === 1 ? "call" : "calls"}`;
+	return `${entry.label}${copies} (${calls}, ${formatCount(entry.triangles)} tris)`;
+}).join(" · ")}`;
+const renderReport = ({ cost, environment, page, sample, stats }) => {
 	const { render, resources } = sample;
 	const heading = [
 		`three-meter v${version}`,
@@ -617,6 +657,7 @@ const renderReport = ({ environment, page, sample, stats }) => {
 			`shaders ${formatCount(resources.programs)}`
 		].join(" · ")
 	];
+	if (cost && cost.meshes.length > 0) lines.push(topMeshes(cost));
 	if (page) lines.push(`Viewport ${page.width}×${page.height} @${page.dpr}x`, page.userAgent);
 	return [
 		"```text",
@@ -632,6 +673,7 @@ const readPage = () => typeof window === "undefined" ? null : {
 };
 /** The report for `monitor` right now, as Markdown ready to paste into an issue. */
 const formatReport = (monitor) => renderReport({
+	cost: monitor.getSceneCost(),
 	environment: monitor.getEnvironment(),
 	page: readPage(),
 	sample: monitor.getSample(),
@@ -639,7 +681,7 @@ const formatReport = (monitor) => renderReport({
 });
 //#endregion
 //#region src/ui/sparkline.ts
-function drawSparkline(ctx, width, height, values, style) {
+function drawSparkline(ctx, width, height, values, style, guide) {
 	ctx.clearRect(0, 0, width, height);
 	if (values.length < 2) return;
 	let max = 0;
@@ -658,6 +700,17 @@ function drawSparkline(ctx, width, height, values, style) {
 	ctx.closePath();
 	ctx.fillStyle = style.fill;
 	ctx.fill();
+	if (guide && guide.value > 0 && guide.value <= range) {
+		const y = Math.round(toY(guide.value)) + .5;
+		ctx.save();
+		ctx.setLineDash([3, 3]);
+		ctx.strokeStyle = guide.color;
+		ctx.beginPath();
+		ctx.moveTo(0, y);
+		ctx.lineTo(width, y);
+		ctx.stroke();
+		ctx.restore();
+	}
 }
 //#endregion
 //#region src/ui/performance-view.ts
@@ -734,6 +787,24 @@ const THEME_OPTIONS = [
 const RELEASE_URL = `https://github.com/zkmake/three-meter/releases/tag/v${version}`;
 /** How long the report button says `copied` / `failed` before reading `copy` again. */
 const COPY_FEEDBACK_MS = 1500;
+/** Walking the scene graph isn't free; the top-costs list refreshes at 2 Hz while open. */
+const COSTS_INTERVAL_MS = 500;
+const COSTS_ROWS = 5;
+const COST_GROUPS = [{
+	group: "meshes",
+	label: "meshes"
+}, {
+	group: "materials",
+	label: "materials"
+}];
+const COSTS_HELP = "The scene's biggest draw costs in the main render pass, estimated from the scene graph. Hidden and off-screen objects are left out; shadow and post-processing passes aren't counted. Click a row to log its objects to the console.";
+/** `×2,000` for instances or copies; nothing for a single object. */
+const copiesOf = (entry) => entry.instances > 1 ? `×${formatCount(entry.instances)}` : "";
+const costTitle = (entry) => {
+	const objects = entry.objects.length;
+	const shape = entry.instances > objects ? `${formatCount(entry.instances)} instances in ${objects === 1 ? "one object" : `${objects} objects`}` : `${formatCount(objects)} ${objects === 1 ? "object" : "separate objects"}`;
+	return `${entry.label}: ${shape}, ${formatCount(entry.calls)} draw ${entry.calls === 1 ? "call" : "calls"}, ${formatCount(entry.triangles)} triangles. Click to log to the console.`;
+};
 const readTiming = (sample, metric) => {
 	switch (metric) {
 		case "fps": return sample.fps;
@@ -742,92 +813,130 @@ const readTiming = (sample, metric) => {
 	}
 };
 const isTimingAvailable = (sample, metric) => metric !== "gpu" || sample.gpu.available;
+const whole = (value) => Math.round(value).toString();
+const tenths = (value) => value.toFixed(1);
 const NUMBERS = [
 	{
+		format: whole,
 		icon: "gauge",
 		key: "fps",
 		label: "FPS",
-		read: (sample) => Math.round(sample.fps).toString()
+		value: (sample) => sample.fps || null
 	},
 	{
+		format: formatCount,
 		icon: "layers",
 		key: "calls",
 		label: "Calls",
-		read: (sample) => formatCount(sample.render.calls)
+		value: (sample) => sample.render.calls
 	},
 	{
+		format: tenths,
 		icon: "cpu",
 		key: "cpu",
 		label: "CPU",
-		read: (sample) => sample.cpu.toFixed(1)
+		unit: "ms",
+		value: (sample) => sample.cpu
 	},
 	{
+		format: tenths,
 		icon: "zap",
 		key: "gpu",
 		label: "GPU",
-		read: (sample) => sample.gpu.available ? sample.gpu.ms.toFixed(1) : "—"
+		unit: "ms",
+		value: (sample) => sample.gpu.available ? sample.gpu.ms : null
 	},
 	{
+		format: whole,
 		icon: "trendingDown",
 		key: "low",
 		label: "1% low",
-		read: (_sample, stats) => stats.frames ? Math.round(stats.lowFps).toString() : "—"
+		value: (_sample, stats) => stats.frames ? stats.lowFps : null
 	},
 	{
+		format: tenths,
 		icon: "timer",
 		key: "p99",
 		label: "Frame p99",
-		read: (_sample, stats) => stats.frames ? stats.p99Ms.toFixed(1) : "—"
+		unit: "ms",
+		value: (_sample, stats) => stats.frames ? stats.p99Ms : null
 	},
 	{
+		format: formatCount,
 		icon: "activity",
 		key: "hitches",
 		label: "Hitches",
-		read: (_sample, stats) => stats.frames ? formatCount(stats.hitches) : "—"
+		value: (_sample, stats) => stats.frames ? stats.hitches : null
 	},
 	{
+		format: formatCount,
 		icon: "triangle",
 		key: "triangles",
 		label: "Triangles",
-		read: (sample) => formatCount(sample.render.triangles)
+		value: (sample) => sample.render.triangles
 	},
 	{
+		format: formatCount,
 		icon: "spline",
 		key: "lines",
 		label: "Lines",
-		read: (sample) => formatCount(sample.render.lines)
+		value: (sample) => sample.render.lines
 	},
 	{
+		format: formatCount,
 		icon: "circleDot",
 		key: "points",
 		label: "Points",
-		read: (sample) => formatCount(sample.render.points)
+		value: (sample) => sample.render.points
 	},
 	{
+		format: formatCount,
 		icon: "repeat",
 		key: "passes",
 		label: "Render passes",
-		read: (sample) => formatCount(sample.render.passes)
+		value: (sample) => sample.render.passes
 	},
 	{
+		format: formatCount,
 		icon: "box",
 		key: "geometries",
 		label: "Geometries",
-		read: (sample) => formatCount(sample.resources.geometries)
+		value: (sample) => sample.resources.geometries
 	},
 	{
+		format: formatCount,
 		icon: "image",
 		key: "textures",
 		label: "Textures",
-		read: (sample) => formatCount(sample.resources.textures)
+		value: (sample) => sample.resources.textures
 	},
 	{
+		format: formatCount,
 		icon: "palette",
 		key: "shaders",
 		label: "Shaders",
-		read: (sample) => formatCount(sample.resources.programs)
+		value: (sample) => sample.resources.programs
 	}
 ];
+const NUMBER_BY_KEY = new Map(NUMBERS.map((config) => [config.key, config]));
+/** Canvas can't read CSS custom properties; the budget line's amber per theme. */
+const GUIDE_COLOR = {
+	dark: "rgba(245, 158, 11, 0.75)",
+	light: "rgba(180, 83, 9, 0.7)"
+};
+/** `Budget: at most 16.7 ms` / `at least 57`, or `""` without one. */
+const budgetTitle = (budgets, key) => {
+	const limit = budgets.limits[key];
+	const config = NUMBER_BY_KEY.get(key);
+	if (limit === void 0 || !config) return "";
+	return `Budget: ${isFloor(key) ? "at least" : "at most"} ${config.format(limit)}${config.unit ? ` ${config.unit}` : ""}`;
+};
+/** The sample value a timing graph shows, `null` when not known. */
+const timingValue = (sample, metric) => {
+	if (!isTimingAvailable(sample, metric)) return null;
+	const value = readTiming(sample, metric);
+	return metric === "fps" && value === 0 ? null : value;
+};
 /**
 * Host-agnostic widget that paints {@link Sample}s. Mount {@link element}
 * anywhere; the view drives its own throttled repaint. Compact is the floating
@@ -860,10 +969,19 @@ var PerformanceView = class {
 	hudGridEl;
 	hudGraphs = /* @__PURE__ */ new Map();
 	hudNumberEls = /* @__PURE__ */ new Map();
+	budgets;
 	rafId = null;
 	lastPaintAt = 0;
 	resizeObserver;
 	unsubscribe;
+	costsOpen = false;
+	costGroup = "meshes";
+	costSort = "calls";
+	lastCostsAt = -Infinity;
+	costsBodyEl;
+	costsListEl;
+	costGroupRadios = /* @__PURE__ */ new Map();
+	costSortButtons = /* @__PURE__ */ new Map();
 	constructor(options) {
 		this.monitor = options.monitor;
 		this.settings = options.settings ?? new HudSettings();
@@ -872,6 +990,7 @@ var PerformanceView = class {
 		this.theme.setOverride(this.settings.theme);
 		this.mode = options.mode ?? "full";
 		this.minIntervalMs = 1e3 / (options.refreshHz ?? 10);
+		this.budgets = resolveBudgets(options.budgets);
 		this.element = document.createElement("div");
 		this.element.className = "perf-monitor";
 		this.applyModeClass();
@@ -901,6 +1020,11 @@ var PerformanceView = class {
 	getMode() {
 		return this.mode;
 	}
+	/** Replace the budgets; `false` turns them all off. Applies on the next paint. */
+	setBudgets(budgets) {
+		this.budgets = resolveBudgets(budgets);
+		this.applyBudgetTitles();
+	}
 	dispose() {
 		this.stop();
 		this.unsubscribe();
@@ -922,17 +1046,60 @@ var PerformanceView = class {
 			if (this.settings.info) this.renderFooter();
 			return;
 		}
-		for (const config of TIMINGS) {
-			const available = isTimingAvailable(sample, config.metric);
-			const valueEl = this.graphValueEls.get(config.metric);
-			valueEl.textContent = available ? this.formatTiming(config, readTiming(sample, config.metric)) : "unavailable";
-			const graph = this.graphCanvases.get(config.metric);
-			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(config.metric) : [], config.style[this.theme.resolved]);
-		}
+		for (const config of TIMINGS) this.paintGraph(config, sample, this.graphValueEls.get(config.metric), this.graphCanvases.get(config.metric), "unavailable");
 		const stats = this.monitor.getFrameStats();
-		for (const config of NUMBERS) this.statValueEls.get(config.key).textContent = config.read(sample, stats);
+		for (const config of NUMBERS) this.paintNumber(config, this.statValueEls.get(config.key), sample, stats);
+		if (this.costsOpen && performance.now() - this.lastCostsAt >= COSTS_INTERVAL_MS) this.renderCosts();
 		this.renderFooter();
 	}
+	renderCosts() {
+		this.lastCostsAt = performance.now();
+		const cost = this.monitor.getSceneCost();
+		if (!cost) {
+			this.costsListEl.replaceChildren(this.costsNote("No scene rendered yet."));
+			return;
+		}
+		const entries = [...this.costGroup === "meshes" ? cost.meshes : cost.materials];
+		if (this.costSort === "triangles") entries.sort((a, b) => b.triangles - a.triangles || b.calls - a.calls);
+		if (entries.length === 0) {
+			this.costsListEl.replaceChildren(this.costsNote("Nothing drawn."));
+			return;
+		}
+		const rows = entries.slice(0, COSTS_ROWS).map((entry) => {
+			const row = document.createElement("button");
+			row.type = "button";
+			row.className = "perf-monitor__cost";
+			row.title = costTitle(entry);
+			const name = document.createElement("span");
+			name.className = "perf-monitor__cost-name";
+			name.textContent = entry.label;
+			const copies = copiesOf(entry);
+			if (copies) {
+				const suffix = document.createElement("span");
+				suffix.className = "perf-monitor__cost-copies";
+				suffix.textContent = ` ${copies}`;
+				name.append(suffix);
+			}
+			const calls = document.createElement("span");
+			calls.className = "perf-monitor__cost-value";
+			calls.textContent = formatCount(entry.calls);
+			const triangles = document.createElement("span");
+			triangles.className = "perf-monitor__cost-value";
+			triangles.textContent = formatCount(entry.triangles);
+			row.append(name, calls, triangles);
+			row.addEventListener("click", () => {
+				console.log(`three-meter: ${entry.label}`, entry.objects);
+			});
+			return row;
+		});
+		this.costsListEl.replaceChildren(...rows);
+	}
+	costsNote(text) {
+		const note = document.createElement("div");
+		note.className = "perf-monitor__costs-note";
+		note.textContent = text;
+		return note;
+	}
 	/** The monitor caches the environment once its backend settles; until then this re-reads. */
 	renderFooter() {
 		const environment = this.monitor.getEnvironment();
@@ -954,16 +1121,38 @@ var PerformanceView = class {
 	renderHud(sample) {
 		const stats = this.hudNumberEls.size > 0 ? this.monitor.getFrameStats() : null;
 		for (const [key, element] of this.hudNumberEls) {
-			const config = NUMBERS.find((number) => number.key === key);
-			if (config && stats) element.textContent = config.read(sample, stats);
+			const config = NUMBER_BY_KEY.get(key);
+			if (config && stats) this.paintNumber(config, element, sample, stats);
 		}
 		for (const [metric, graph] of this.hudGraphs) {
 			const config = TIMINGS.find((timing) => timing.metric === metric);
-			const available = isTimingAvailable(sample, metric);
-			graph.valueEl.textContent = available ? this.formatTiming(config, readTiming(sample, metric)) : "—";
-			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(metric) : [], config.style[this.theme.resolved]);
+			this.paintGraph(config, sample, graph.valueEl, graph, "—");
 		}
 	}
+	paintNumber(config, element, sample, stats) {
+		const value = config.value(sample, stats);
+		element.textContent = value === null ? "—" : config.format(value);
+		element.classList.toggle("is-over", isOverBudget(this.budgets, config.key, value));
+	}
+	/** Value and sparkline, with the budget line drawn once the series reaches it. */
+	paintGraph(config, sample, valueEl, graph, missing) {
+		const value = timingValue(sample, config.metric);
+		const available = isTimingAvailable(sample, config.metric);
+		const limit = this.budgets.limits[config.metric];
+		valueEl.textContent = available ? this.formatTiming(config, readTiming(sample, config.metric)) : missing;
+		valueEl.classList.toggle("is-over", isOverBudget(this.budgets, config.metric, value));
+		drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(config.metric) : [], config.style[this.theme.resolved], limit === void 0 ? void 0 : {
+			color: GUIDE_COLOR[this.theme.resolved],
+			value: limit
+		});
+	}
+	/** Each value's tooltip names its budget, so amber explains itself. */
+	applyBudgetTitles() {
+		for (const [key, element] of this.statValueEls) element.title = budgetTitle(this.budgets, key);
+		for (const [key, element] of this.hudNumberEls) element.title = budgetTitle(this.budgets, key);
+		for (const [metric, element] of this.graphValueEls) element.title = budgetTitle(this.budgets, metric);
+		for (const [metric, graph] of this.hudGraphs) graph.valueEl.title = budgetTitle(this.budgets, metric);
+	}
 	formatTiming(config, value) {
 		return `${config.format(value)}${config.unit ? ` ${config.unit}` : ""}`;
 	}
@@ -1102,7 +1291,7 @@ var PerformanceView = class {
 		this.footerHardwareEl.append(this.footerBackendEl, this.footerGpuEl);
 		footerBody.append(softwareRow, this.footerHardwareEl);
 		footer.append(createIcon("info", "perf-monitor__icon"), footerBody, this.infoCheckbox);
-		this.element.append(hud, options, graphs, stats, footer);
+		this.element.append(hud, options, graphs, stats, this.buildCosts(), footer);
 	}
 	rebuildHud() {
 		const { selection } = this.settings;
@@ -1156,6 +1345,7 @@ var PerformanceView = class {
 			this.hudGridEl.append(item);
 			this.hudNumberEls.set(config.key, value);
 		}
+		this.applyBudgetTitles();
 		this.resizeCanvases();
 	}
 	onSelectionChanged() {
@@ -1172,6 +1362,71 @@ var PerformanceView = class {
 		applyTheme(this.element, this.theme);
 		for (const [mode, radio] of this.themeRadios) radio.setAttribute("aria-checked", String(mode === this.theme.effective));
 	}
+	/** "top costs": a toggle row, then meshes / materials and a sortable top five. */
+	buildCosts() {
+		const section = document.createElement("div");
+		section.className = "perf-monitor__section perf-monitor__costs";
+		const toggleRow = document.createElement("label");
+		toggleRow.className = "perf-monitor__row";
+		toggleRow.title = COSTS_HELP;
+		const label = document.createElement("span");
+		label.className = "perf-monitor__label";
+		label.textContent = "top costs";
+		const checkbox = this.buildCheckbox(false, "Show the scene's biggest draw costs", (on) => {
+			this.costsOpen = on;
+			this.costsBodyEl.hidden = !on;
+			if (on) this.renderCosts();
+		});
+		toggleRow.append(createIcon("flame", "perf-monitor__icon"), label, checkbox);
+		this.costsBodyEl = document.createElement("div");
+		this.costsBodyEl.className = "perf-monitor__costs-body";
+		this.costsBodyEl.hidden = true;
+		const head = document.createElement("div");
+		head.className = "perf-monitor__cost perf-monitor__cost--head";
+		const segment = document.createElement("div");
+		segment.className = "perf-monitor__segment";
+		segment.setAttribute("role", "radiogroup");
+		segment.setAttribute("aria-label", "Group costs by");
+		for (const option of COST_GROUPS) {
+			const radio = document.createElement("button");
+			radio.type = "button";
+			radio.className = "perf-monitor__segment-option perf-monitor__segment-option--text";
+			radio.setAttribute("role", "radio");
+			radio.setAttribute("aria-checked", String(option.group === this.costGroup));
+			radio.textContent = option.label;
+			radio.addEventListener("click", () => {
+				this.costGroup = option.group;
+				for (const [group, button] of this.costGroupRadios) button.setAttribute("aria-checked", String(group === option.group));
+				this.renderCosts();
+			});
+			this.costGroupRadios.set(option.group, radio);
+			segment.append(radio);
+		}
+		head.append(segment);
+		for (const sort of ["calls", "triangles"]) {
+			const button = document.createElement("button");
+			button.type = "button";
+			button.className = "perf-monitor__cost-sort";
+			button.textContent = sort === "calls" ? "calls" : "tris";
+			button.title = `Sort by ${sort === "calls" ? "draw calls" : "triangles"}`;
+			button.setAttribute("aria-pressed", String(sort === this.costSort));
+			button.addEventListener("click", () => {
+				this.costSort = sort;
+				for (const [key, other] of this.costSortButtons) other.setAttribute("aria-pressed", String(key === sort));
+				this.renderCosts();
+			});
+			this.costSortButtons.set(sort, button);
+			head.append(button);
+		}
+		this.costsListEl = document.createElement("div");
+		this.costsListEl.className = "perf-monitor__costs-list";
+		const hint = document.createElement("span");
+		hint.className = "perf-monitor__hint";
+		hint.textContent = COSTS_HELP;
+		this.costsBodyEl.append(head, this.costsListEl, hint);
+		section.append(toggleRow, this.costsBodyEl);
+		return section;
+	}
 	buildReportRow() {
 		const row = document.createElement("div");
 		row.className = "perf-monitor__row perf-monitor__row--static";
@@ -1256,6 +1511,7 @@ const PERF_HUD_STYLES = `
   --perf-row: rgba(255, 255, 255, 0.04);
   --perf-border: rgba(255, 255, 255, 0.12);
   --perf-accent: #60a5fa;
+  --perf-warn: #f59e0b;
   --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
 
   color-scheme: dark;
@@ -1270,6 +1526,7 @@ const PERF_HUD_STYLES = `
   --perf-row: rgba(0, 0, 0, 0.05);
   --perf-border: rgba(0, 0, 0, 0.12);
   --perf-accent: #2563eb;
+  --perf-warn: #b45309;
   --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
 
   color-scheme: light;
@@ -1466,6 +1723,96 @@ const PERF_HUD_STYLES = `
   outline-offset: 1px;
 }
 
+/* Top costs: name, calls, triangles. Rows are buttons that log their objects. */
+.perf-monitor__costs-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-top: 2px;
+}
+
+.perf-monitor__costs-body[hidden] {
+  display: none;
+}
+
+.perf-monitor__cost {
+  /* Rows are buttons, which shrink to their content without a width. */
+  box-sizing: border-box;
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 5ch 6ch;
+  gap: 6px;
+  align-items: baseline;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.perf-monitor__cost:not(.perf-monitor__cost--head):hover {
+  background: var(--perf-row);
+}
+
+.perf-monitor__cost:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: -1px;
+}
+
+.perf-monitor__cost--head {
+  align-items: center;
+  cursor: default;
+}
+
+.perf-monitor__cost-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--perf-fg-dim);
+}
+
+.perf-monitor__cost-copies {
+  color: var(--perf-muted);
+}
+
+.perf-monitor__cost-value {
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+}
+
+.perf-monitor__cost-sort {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--perf-muted);
+  font: inherit;
+  font-size: 10px;
+  text-align: right;
+  cursor: pointer;
+}
+
+.perf-monitor__cost-sort[aria-pressed="true"] {
+  color: var(--perf-fg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.perf-monitor__segment-option--text {
+  width: auto;
+  padding: 0 5px;
+  font: inherit;
+  font-size: 10px;
+}
+
+.perf-monitor__costs-note {
+  padding: 2px 6px;
+  color: var(--perf-muted);
+  font-size: 10px;
+}
+
 .perf-monitor__checkbox {
   flex: none;
   margin: 0;
@@ -1581,13 +1928,15 @@ const PERF_HUD_STYLES = `
 }
 
 .perf-monitor__badge.is-fallback {
-  border-color: #f59e0b;
-  color: #f59e0b;
+  border-color: var(--perf-warn);
+  color: var(--perf-warn);
 }
 
-.perf-monitor[data-theme="light"] .perf-monitor__badge.is-fallback {
-  border-color: #d97706;
-  color: #b45309;
+/* Past its budget. The value's tooltip names the budget. */
+.perf-monitor__value.is-over,
+.perf-monitor__hud-value.is-over,
+.perf-monitor__graph-value.is-over {
+  color: var(--perf-warn);
 }
 
 .perf-monitor__link {
@@ -1782,6 +2131,7 @@ const mountPerfHud = (monitor, options = {}) => {
 	const toggle = disc("Toggle full performance metrics", "", "sliders");
 	tools.append(grip, toggle);
 	const view = new PerformanceView({
+		budgets: options.budgets,
 		mode: options.mode ?? "compact",
 		monitor,
 		refreshHz: options.refreshHz,
@@ -1857,6 +2207,7 @@ const mountPerfHud = (monitor, options = {}) => {
 		},
 		element: host,
 		getMode: () => view.getMode(),
+		setBudgets: (budgets) => view.setBudgets(budgets),
 		setMode,
 		getTheme: () => theme.mode,
 		setTheme: (mode) => theme.setMode(mode),
@@ -1866,6 +2217,6 @@ const mountPerfHud = (monitor, options = {}) => {
 	};
 };
 //#endregion
-export { formatReport as a, HudSettings as c, isThemeMode as d, PerformanceView as i, HudTheme as l, PERF_HUD_STYLES as n, dockPanel as o, injectStyles as r, DEFAULT_STORAGE_KEY as s, mountPerfHud as t, THEME_MODES as u };
+export { formatReport as a, HudSettings as c, isThemeMode as d, resolveBudgets as f, PerformanceView as i, HudTheme as l, PERF_HUD_STYLES as n, dockPanel as o, injectStyles as r, DEFAULT_STORAGE_KEY as s, mountPerfHud as t, THEME_MODES as u };
 
-//# sourceMappingURL=mount-perf-hud-C5wdjgmM.js.map
+//# sourceMappingURL=mount-perf-hud-B_cmTG2M.js.map