@zkmake/three-meter 0.9.2 → 0.11.0

package/dist/{mount-perf-hud-BL84ddLm.js → mount-perf-hud-DZKJ1L3J.js}

@@ -1,17 +1,24 @@
 //#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 FLOORS = /* @__PURE__ */ new Set([
+	"fps",
+	"headroom",
+	"low"
+]);
+/** `detectedHz` is the monitor's refresh reading; an explicit `targetFps` wins over it. */
+const resolveBudgets = (budgets, detectedHz = null) => {
+	const targetFps = budgets && budgets.targetFps || detectedHz || DEFAULT_TARGET_FPS;
 	const frameMs = 1e3 / targetFps;
 	if (budgets === false) return {
 		frameMs,
-		limits: {}
+		limits: {},
+		targetFps
 	};
 	const merged = {
 		cpu: frameMs,
 		fps: targetFps * .95,
 		gpu: frameMs,
+		headroom: 0,
 		low: targetFps / 2,
 		p99: frameMs * 1.5,
 		...budgets
@@ -20,7 +27,8 @@ const resolveBudgets = (budgets) => {
 	for (const [key, limit] of Object.entries(merged)) if (key !== "targetFps" && typeof limit === "number" && Number.isFinite(limit)) limits[key] = limit;
 	return {
 		frameMs,
-		limits
+		limits,
+		targetFps
 	};
 };
 const isFloor = (key) => FLOORS.has(key);
@@ -486,6 +494,9 @@ const dockPanel = (element, options = {}) => {
 //#endregion
 //#region src/ui/icons.ts
 const ICON_MARKUP = {
+	eye: "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+	eyeOff: "<path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\"/><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\"/><path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\"/><path d=\"m2 2 20 20\"/>",
+	hourglass: "<path d=\"M5 22h14\"/><path d=\"M5 2h14\"/><path d=\"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22\"/><path d=\"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2\"/>",
 	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\"/>",
@@ -526,991 +537,32 @@ const createIcon = (name, className) => {
 	return svg;
 };
 //#endregion
-//#region package.json
-var name = "@zkmake/three-meter";
-var version = "0.9.2";
-//#endregion
-//#region src/ui/clipboard.ts
-/**
-* Copy text from a click handler. The async Clipboard API needs a secure
-* context and the `clipboard-write` permission; a dev server opened over a LAN
-* IP has neither, and some embeds deny the permission. The fallback is the old
-* select-a-textarea `execCommand("copy")`, still honoured inside a user gesture.
-*/
-const copyWithSelection = (text) => {
-	const textarea = document.createElement("textarea");
-	textarea.value = text;
-	textarea.setAttribute("readonly", "");
-	textarea.style.position = "fixed";
-	textarea.style.opacity = "0";
-	textarea.style.pointerEvents = "none";
-	const previous = document.activeElement;
-	document.body.append(textarea);
-	textarea.select();
-	try {
-		return document.execCommand("copy");
-	} catch {
-		return false;
-	} finally {
-		textarea.remove();
-		previous?.focus?.();
-	}
-};
-const copyText = async (text) => {
-	try {
-		await navigator.clipboard.writeText(text);
-		return true;
-	} catch {
-		return copyWithSelection(text);
-	}
-};
-//#endregion
-//#region src/ui/format.ts
-/**
-* Number formatting for the card. Counts stay exact with thousands separators
-* while they fit the compact grid's 6ch value column (`99,999`), then switch
-* to compact notation (`250K`, `1.4M`, `12.3M`, `1.2B`) so a triangle count in
-* the millions can't run into the neighbouring label.
-*/
-const COMPACT_FROM = 1e5;
-const exact = new Intl.NumberFormat("en-US");
-const compact = new Intl.NumberFormat("en-US", {
-	maximumFractionDigits: 1,
-	notation: "compact"
-});
-const formatCount = (value) => Math.abs(value) < COMPACT_FROM ? exact.format(value) : compact.format(value);
-//#endregion
-//#region src/ui/metric-help.ts
-/**
-* One plain-language line per metric: what it is, and what a bad reading
-* means. Shown as the label's tooltip and, with "explain metrics" on, under
-* each row. Keyed like the stat rows; the graphs reuse `fps`, `cpu`, `gpu`.
-*/
-const METRIC_HELP = {
-	calls: "Separate draw commands sent to the GPU this frame. Fewer is better: merge or instance meshes that share a material.",
-	cpu: "JavaScript time per frame: your update code plus three.js preparing the render. It has to fit the frame budget (16.7 ms at 60 FPS).",
-	fps: "Frames drawn per second. Higher is smoother; most displays top out at 60 or 120.",
-	geometries: "Geometries held in GPU memory. Should level off; a steady climb is a leak, so dispose() what you remove.",
-	gpu: "Time the graphics card spent drawing the frame. High means shaders, overdraw or resolution are the bottleneck.",
-	hitches: "Frames that took over twice as long as usual, in the last 1,000 frames. Each one is a visible stutter.",
-	lines: "Line segments drawn this frame.",
-	low: "Frame rate during the slowest 1% of frames. Far below FPS means stutter the average hides.",
-	p99: "99% of frames finished within this many ms. Above the frame budget (16.7 ms at 60 FPS) means dropped frames.",
-	passes: "Times renderer.render() ran this frame. Shadows, post-processing and extra cameras each add passes.",
-	points: "Points drawn this frame.",
-	shaders: "Compiled shader programs. A jump mid-session usually means a stutter while a new material compiled.",
-	textures: "Textures held in GPU memory. Should level off; a steady climb is a leak, so dispose() what you remove.",
-	triangles: "Triangles drawn this frame. Mostly GPU cost: use lower-poly models or level of detail to cut it."
-};
-//#endregion
-//#region src/ui/report.ts
+//#region src/ui/styles.ts
 /**
-* A plain-text snapshot of the monitor for bug reports: versions, backend and
-* 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.
+* The HUD stylesheet as a string, so the package works without a bundler and
+* injects itself once per document. `.perf-monitor` is the metrics card,
+* `.perf-hud` the floating host around it. Both namespaced so a host page can
+* override safely; the `--perf-*` custom properties are the theming surface.
+*
+* Both elements carry `data-theme="dark" | "light"` (see `HudTheme`) and each
+* resolves its own tokens from it, so the card also themes when mounted on
+* its own, outside a `.perf-hud`.
 */
-const BACKEND_LABELS = {
-	webgl: "WebGL",
-	webgl2: "WebGL2",
-	webgpu: "WebGPU"
-};
-/** `WebGPU`, `WebGL2`, `WebGL2 fallback`, or `""` before the backend settles. */
-const backendLabel = (environment) => {
-	if (!environment.backend) return "";
-	const label = BACKEND_LABELS[environment.backend];
-	return environment.fallback ? `${label} fallback` : label;
-};
-const ms = (value) => `${value.toFixed(1)} ms`;
-/** 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}`,
-		environment.three ? `three r${environment.three}` : "",
-		backendLabel(environment),
-		environment.gpu ?? ""
-	].filter(Boolean);
-	const frames = stats.frames === 0 ? `FPS ${Math.round(sample.fps)}` : [
-		`FPS ${Math.round(sample.fps)}`,
-		`1% low ${Math.round(stats.lowFps)}`,
-		`p99 ${ms(stats.p99Ms)}`,
-		`hitches ${formatCount(stats.hitches)} / ${formatCount(stats.frames)} frames`
-	].join(" · ");
-	const lines = [
-		heading.join(" · "),
-		frames,
-		`CPU ${ms(sample.cpu)} · GPU ${sample.gpu.available ? ms(sample.gpu.ms) : "unavailable"}`,
-		[
-			`Calls ${formatCount(render.calls)}`,
-			`passes ${formatCount(render.passes)}`,
-			`triangles ${formatCount(render.triangles)}`,
-			`lines ${formatCount(render.lines)}`,
-			`points ${formatCount(render.points)}`
-		].join(" · "),
-		[
-			`Geometries ${formatCount(resources.geometries)}`,
-			`textures ${formatCount(resources.textures)}`,
-			`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",
-		...lines,
-		"```"
-	].join("\n");
-};
-const readPage = () => typeof window === "undefined" ? null : {
-	dpr: window.devicePixelRatio || 1,
-	height: window.innerHeight,
-	userAgent: navigator.userAgent,
-	width: window.innerWidth
-};
-/** 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(),
-	stats: monitor.getFrameStats()
-});
-//#endregion
-//#region src/ui/sparkline.ts
-function drawSparkline(ctx, width, height, values, style, guide) {
-	ctx.clearRect(0, 0, width, height);
-	if (values.length < 2) return;
-	let max = 0;
-	for (const value of values) if (value > max) max = value;
-	const range = max * 1.1 || 1;
-	const stepX = width / (values.length - 1);
-	const toY = (value) => height - value / range * height;
-	ctx.beginPath();
-	ctx.moveTo(0, toY(values[0]));
-	for (let index = 1; index < values.length; index += 1) ctx.lineTo(index * stepX, toY(values[index]));
-	ctx.lineWidth = 1;
-	ctx.strokeStyle = style.stroke;
-	ctx.stroke();
-	ctx.lineTo(width, height);
-	ctx.lineTo(0, height);
-	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
-const TIMINGS = [
-	{
-		format: (value) => Math.round(value).toString(),
-		icon: "gauge",
-		label: "FPS",
-		metric: "fps",
-		style: {
-			dark: {
-				fill: "rgba(74, 222, 128, 0.15)",
-				stroke: "#4ade80"
-			},
-			light: {
-				fill: "rgba(22, 163, 74, 0.12)",
-				stroke: "#16a34a"
-			}
-		},
-		unit: ""
-	},
-	{
-		format: (value) => value.toFixed(1),
-		icon: "cpu",
-		label: "CPU",
-		metric: "cpu",
-		style: {
-			dark: {
-				fill: "rgba(96, 165, 250, 0.15)",
-				stroke: "#60a5fa"
-			},
-			light: {
-				fill: "rgba(37, 99, 235, 0.12)",
-				stroke: "#2563eb"
-			}
-		},
-		unit: "ms"
-	},
-	{
-		format: (value) => value.toFixed(1),
-		icon: "zap",
-		label: "GPU",
-		metric: "gpu",
-		style: {
-			dark: {
-				fill: "rgba(244, 114, 182, 0.15)",
-				stroke: "#f472b6"
-			},
-			light: {
-				fill: "rgba(219, 39, 119, 0.12)",
-				stroke: "#db2777"
-			}
-		},
-		unit: "ms"
-	}
-];
-const THEME_OPTIONS = [
-	{
-		icon: "sun",
-		label: "Light theme",
-		mode: "light"
-	},
-	{
-		icon: "monitor",
-		label: "Match the system theme",
-		mode: "system"
-	},
-	{
-		icon: "moon",
-		label: "Dark theme",
-		mode: "dark"
-	}
-];
-/** The monorepo tags each package's releases `@zkmake/three-meter@0.9.2`. */
-const RELEASE_URL = `https://github.com/zkmake/three-kit/releases/tag/${encodeURIComponent(`${name}@${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;
-		case "cpu": return sample.cpu;
-		case "gpu": return sample.gpu.ms;
-	}
-};
-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",
-		value: (sample) => sample.fps || null
-	},
-	{
-		format: formatCount,
-		icon: "layers",
-		key: "calls",
-		label: "Calls",
-		value: (sample) => sample.render.calls
-	},
-	{
-		format: tenths,
-		icon: "cpu",
-		key: "cpu",
-		label: "CPU",
-		unit: "ms",
-		value: (sample) => sample.cpu
-	},
-	{
-		format: tenths,
-		icon: "zap",
-		key: "gpu",
-		label: "GPU",
-		unit: "ms",
-		value: (sample) => sample.gpu.available ? sample.gpu.ms : null
-	},
-	{
-		format: whole,
-		icon: "trendingDown",
-		key: "low",
-		label: "1% low",
-		value: (_sample, stats) => stats.frames ? stats.lowFps : null
-	},
-	{
-		format: tenths,
-		icon: "timer",
-		key: "p99",
-		label: "Frame p99",
-		unit: "ms",
-		value: (_sample, stats) => stats.frames ? stats.p99Ms : null
-	},
-	{
-		format: formatCount,
-		icon: "activity",
-		key: "hitches",
-		label: "Hitches",
-		value: (_sample, stats) => stats.frames ? stats.hitches : null
-	},
-	{
-		format: formatCount,
-		icon: "triangle",
-		key: "triangles",
-		label: "Triangles",
-		value: (sample) => sample.render.triangles
-	},
-	{
-		format: formatCount,
-		icon: "spline",
-		key: "lines",
-		label: "Lines",
-		value: (sample) => sample.render.lines
-	},
-	{
-		format: formatCount,
-		icon: "circleDot",
-		key: "points",
-		label: "Points",
-		value: (sample) => sample.render.points
-	},
-	{
-		format: formatCount,
-		icon: "repeat",
-		key: "passes",
-		label: "Render passes",
-		value: (sample) => sample.render.passes
-	},
-	{
-		format: formatCount,
-		icon: "box",
-		key: "geometries",
-		label: "Geometries",
-		value: (sample) => sample.resources.geometries
-	},
-	{
-		format: formatCount,
-		icon: "image",
-		key: "textures",
-		label: "Textures",
-		value: (sample) => sample.resources.textures
-	},
-	{
-		format: formatCount,
-		icon: "palette",
-		key: "shaders",
-		label: "Shaders",
-		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
-* HUD; full is the checkbox list that chooses what compact shows. Styles are
-* not injected here. Call `injectStyles()` or use `mountPerfHud`.
-*/
-var PerformanceView = class {
-	element;
-	settings;
-	theme;
-	ownsTheme;
-	unsubscribeTheme;
-	monitor;
-	minIntervalMs;
-	mode;
-	graphValueEls = /* @__PURE__ */ new Map();
-	graphCanvases = /* @__PURE__ */ new Map();
-	graphCheckboxes = /* @__PURE__ */ new Map();
-	statValueEls = /* @__PURE__ */ new Map();
-	statCheckboxes = /* @__PURE__ */ new Map();
-	infoCheckbox;
-	themeRadios = /* @__PURE__ */ new Map();
-	footerThreeEl;
-	footerHardwareEl;
-	footerBackendEl;
-	footerGpuEl;
-	lastEnvironmentKey = "";
-	hudGraphsEl;
-	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();
-		this.ownsTheme = !options.theme;
-		this.theme = options.theme ?? new HudTheme();
-		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();
-		this.resizeObserver = new ResizeObserver(() => this.resizeCanvases());
-		this.build();
-		this.applyInfoClass();
-		this.rebuildHud();
-		this.onThemeChanged();
-		this.unsubscribe = this.settings.subscribe(() => this.onSelectionChanged());
-		this.unsubscribeTheme = this.theme.subscribe(() => this.onThemeChanged());
-	}
-	start() {
-		if (this.rafId === null) this.rafId = requestAnimationFrame(this.frame);
-	}
-	stop() {
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
-	}
-	setMode(mode) {
-		if (mode === this.mode) return;
-		this.mode = mode;
-		this.applyModeClass();
-		this.resizeCanvases();
-	}
-	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();
-		this.unsubscribeTheme();
-		if (this.ownsTheme) this.theme.dispose();
-		this.resizeObserver.disconnect();
-		this.element.remove();
-	}
-	frame = (now) => {
-		this.rafId = requestAnimationFrame(this.frame);
-		if (now - this.lastPaintAt < this.minIntervalMs) return;
-		this.lastPaintAt = now;
-		this.render();
-	};
-	render() {
-		const sample = this.monitor.getSample();
-		if (this.mode === "compact") {
-			this.renderHud(sample);
-			if (this.settings.info) this.renderFooter();
-			return;
-		}
-		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.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();
-		const three = environment.three ? `three r${environment.three}` : "";
-		const backend = backendLabel(environment);
-		const gpu = environment.gpu ?? "";
-		const key = `${three}\n${backend}\n${gpu}`;
-		if (key === this.lastEnvironmentKey) return;
-		this.lastEnvironmentKey = key;
-		this.footerThreeEl.textContent = three;
-		this.footerBackendEl.textContent = backend;
-		this.footerBackendEl.hidden = backend === "";
-		this.footerBackendEl.title = environment.fallback ? "WebGPURenderer couldn't get WebGPU and fell back to WebGL2" : "";
-		this.footerBackendEl.classList.toggle("is-fallback", environment.fallback);
-		this.footerGpuEl.textContent = gpu;
-		this.footerGpuEl.title = gpu;
-		this.footerHardwareEl.hidden = backend === "" && gpu === "";
-	}
-	renderHud(sample) {
-		const stats = this.hudNumberEls.size > 0 ? this.monitor.getFrameStats() : null;
-		for (const [key, element] of this.hudNumberEls) {
-			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);
-			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}` : ""}`;
-	}
-	build() {
-		const hud = document.createElement("div");
-		hud.className = "perf-monitor__hud";
-		this.hudGraphsEl = document.createElement("div");
-		this.hudGraphsEl.className = "perf-monitor__hud-graphs";
-		this.hudGridEl = document.createElement("div");
-		this.hudGridEl.className = "perf-monitor__hud-grid";
-		hud.append(this.hudGraphsEl, this.hudGridEl);
-		const options = document.createElement("div");
-		options.className = "perf-monitor__section perf-monitor__options";
-		const themeRow = document.createElement("div");
-		themeRow.className = "perf-monitor__row perf-monitor__row--static";
-		const themeLabel = document.createElement("span");
-		themeLabel.className = "perf-monitor__label";
-		themeLabel.textContent = "theme";
-		const segment = document.createElement("div");
-		segment.className = "perf-monitor__segment";
-		segment.setAttribute("role", "radiogroup");
-		segment.setAttribute("aria-label", "Panel theme");
-		for (const option of THEME_OPTIONS) {
-			const radio = document.createElement("button");
-			radio.type = "button";
-			radio.className = "perf-monitor__segment-option";
-			radio.setAttribute("role", "radio");
-			radio.setAttribute("aria-checked", "false");
-			radio.setAttribute("aria-label", option.label);
-			radio.title = option.label;
-			radio.append(createIcon(option.icon, "perf-monitor__icon"));
-			radio.addEventListener("click", () => this.settings.setTheme(option.mode));
-			this.themeRadios.set(option.mode, radio);
-			segment.append(radio);
-		}
-		themeRow.append(createIcon("contrast", "perf-monitor__icon"), themeLabel, segment);
-		const explainRow = document.createElement("label");
-		explainRow.className = "perf-monitor__row";
-		const explainCheckbox = this.buildCheckbox(false, "Explain each metric", (on) => this.element.classList.toggle("perf-monitor--explain", on));
-		const explainLabel = document.createElement("span");
-		explainLabel.className = "perf-monitor__label";
-		explainLabel.textContent = "explain metrics";
-		explainRow.append(createIcon("help", "perf-monitor__icon"), explainLabel, explainCheckbox);
-		options.append(themeRow, explainRow, this.buildReportRow());
-		const graphs = document.createElement("div");
-		graphs.className = "perf-monitor__graphs";
-		for (const config of TIMINGS) {
-			const graph = document.createElement("div");
-			graph.className = "perf-monitor__graph";
-			const canvas = document.createElement("canvas");
-			canvas.className = "perf-monitor__canvas";
-			const overlay = document.createElement("label");
-			overlay.className = "perf-monitor__graph-overlay perf-monitor__graph-overlay--toggle";
-			const head = document.createElement("span");
-			head.className = "perf-monitor__graph-head";
-			const checkbox = this.buildCheckbox(this.settings.isGraphEnabled(config.metric), `Show ${config.label} graph in HUD`, (on) => this.settings.setGraphEnabled(config.metric, on));
-			this.graphCheckboxes.set(config.metric, checkbox);
-			const label = document.createElement("span");
-			label.className = "perf-monitor__graph-label";
-			label.textContent = config.label;
-			label.title = METRIC_HELP[config.metric] ?? "";
-			const value = document.createElement("span");
-			value.className = "perf-monitor__graph-value";
-			value.textContent = "—";
-			this.graphValueEls.set(config.metric, value);
-			const tail = document.createElement("span");
-			tail.className = "perf-monitor__graph-head";
-			tail.append(value, checkbox);
-			head.append(createIcon(config.icon, "perf-monitor__icon"), label);
-			overlay.append(head, tail);
-			graph.append(canvas, overlay);
-			graphs.append(graph);
-			const ctx = canvas.getContext("2d");
-			if (ctx) {
-				this.graphCanvases.set(config.metric, {
-					canvas,
-					ctx,
-					height: 0,
-					width: 0
-				});
-				this.resizeObserver.observe(graph);
-			}
-		}
-		const stats = document.createElement("div");
-		stats.className = "perf-monitor__section";
-		for (const config of NUMBERS) {
-			const rowEl = document.createElement("label");
-			rowEl.className = "perf-monitor__row";
-			const checkbox = this.buildCheckbox(this.settings.isNumberEnabled(config.key), `Show ${config.label} in HUD`, (on) => this.settings.setNumberEnabled(config.key, on));
-			this.statCheckboxes.set(config.key, checkbox);
-			const help = METRIC_HELP[config.key] ?? "";
-			const label = document.createElement("span");
-			label.className = "perf-monitor__label";
-			label.textContent = config.label;
-			label.title = help;
-			const value = document.createElement("span");
-			value.className = "perf-monitor__value";
-			value.textContent = "—";
-			this.statValueEls.set(config.key, value);
-			const hint = document.createElement("span");
-			hint.className = "perf-monitor__hint";
-			hint.textContent = help;
-			rowEl.append(createIcon(config.icon, "perf-monitor__icon"), label, value, checkbox, hint);
-			stats.append(rowEl);
-		}
-		const footer = document.createElement("div");
-		footer.className = "perf-monitor__footer";
-		this.infoCheckbox = this.buildCheckbox(this.settings.info, "Show version and environment in HUD", (on) => this.settings.setInfo(on));
-		const footerBody = document.createElement("div");
-		footerBody.className = "perf-monitor__footer-body";
-		const softwareRow = document.createElement("div");
-		softwareRow.className = "perf-monitor__footer-row";
-		const release = document.createElement("a");
-		release.className = "perf-monitor__link";
-		release.href = RELEASE_URL;
-		release.target = "_blank";
-		release.rel = "noopener noreferrer";
-		release.title = `Release notes for v${version}`;
-		release.textContent = `three-meter v${version}`;
-		this.footerThreeEl = document.createElement("span");
-		softwareRow.append(release, this.footerThreeEl);
-		this.footerHardwareEl = document.createElement("div");
-		this.footerHardwareEl.className = "perf-monitor__footer-row";
-		this.footerHardwareEl.hidden = true;
-		this.footerBackendEl = document.createElement("span");
-		this.footerBackendEl.className = "perf-monitor__badge";
-		this.footerGpuEl = document.createElement("span");
-		this.footerGpuEl.className = "perf-monitor__footer-gpu";
-		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, this.buildCosts(), footer);
-	}
-	rebuildHud() {
-		const { selection } = this.settings;
-		for (const graph of this.hudGraphs.values()) this.resizeObserver.unobserve(graph.canvas.parentElement ?? graph.canvas);
-		this.hudGraphs.clear();
-		this.hudNumberEls.clear();
-		this.hudGraphsEl.replaceChildren();
-		this.hudGridEl.replaceChildren();
-		for (const config of TIMINGS) {
-			if (!selection.graphs.has(config.metric)) continue;
-			const row = document.createElement("div");
-			row.className = "perf-monitor__hud-graph";
-			const canvas = document.createElement("canvas");
-			canvas.className = "perf-monitor__canvas";
-			const overlay = document.createElement("div");
-			overlay.className = "perf-monitor__graph-overlay";
-			const label = document.createElement("span");
-			label.className = "perf-monitor__graph-label";
-			label.textContent = config.label;
-			label.title = METRIC_HELP[config.metric] ?? "";
-			const head = document.createElement("span");
-			head.className = "perf-monitor__graph-head";
-			head.append(createIcon(config.icon, "perf-monitor__icon"), label);
-			const value = document.createElement("span");
-			value.className = "perf-monitor__graph-value";
-			value.textContent = "—";
-			overlay.append(head, value);
-			row.append(canvas, overlay);
-			this.hudGraphsEl.append(row);
-			const ctx = canvas.getContext("2d");
-			if (ctx) {
-				this.hudGraphs.set(config.metric, {
-					canvas,
-					ctx,
-					height: 0,
-					valueEl: value,
-					width: 0
-				});
-				this.resizeObserver.observe(row);
-			}
-		}
-		for (const config of NUMBERS) {
-			if (!selection.numbers.has(config.key)) continue;
-			const item = document.createElement("div");
-			item.className = "perf-monitor__hud-item";
-			const label = document.createElement("span");
-			label.className = "perf-monitor__hud-label";
-			label.title = METRIC_HELP[config.key] ?? "";
-			label.append(createIcon(config.icon, "perf-monitor__icon"), config.label);
-			const value = document.createElement("span");
-			value.className = "perf-monitor__hud-value";
-			value.textContent = "—";
-			item.append(label, value);
-			this.hudGridEl.append(item);
-			this.hudNumberEls.set(config.key, value);
-		}
-		this.applyBudgetTitles();
-		this.resizeCanvases();
-	}
-	onSelectionChanged() {
-		for (const [metric, checkbox] of this.graphCheckboxes) checkbox.checked = this.settings.isGraphEnabled(metric);
-		for (const [key, checkbox] of this.statCheckboxes) checkbox.checked = this.settings.isNumberEnabled(key);
-		this.infoCheckbox.checked = this.settings.info;
-		this.applyInfoClass();
-		this.theme.setOverride(this.settings.theme);
-		this.rebuildHud();
-	}
-	/** Repaint the palette and mark the radio matching what applies (pick, else consumer mode). */
-	onThemeChanged() {
-		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";
-		const label = document.createElement("span");
-		label.className = "perf-monitor__label";
-		label.textContent = "report";
-		const button = document.createElement("button");
-		button.type = "button";
-		button.className = "perf-monitor__button";
-		button.title = "Copy versions, GPU and current metrics as Markdown for a bug report";
-		button.textContent = "copy";
-		let resetTimer = 0;
-		const flash = (text) => {
-			button.textContent = text;
-			window.clearTimeout(resetTimer);
-			resetTimer = window.setTimeout(() => {
-				button.textContent = "copy";
-			}, COPY_FEEDBACK_MS);
-		};
-		button.addEventListener("click", () => {
-			copyText(formatReport(this.monitor)).then((copied) => flash(copied ? "copied" : "failed"));
-		});
-		row.append(createIcon("clipboard", "perf-monitor__icon"), label, button);
-		return row;
-	}
-	buildCheckbox(checked, title, onChange) {
-		const checkbox = document.createElement("input");
-		checkbox.type = "checkbox";
-		checkbox.className = "perf-monitor__checkbox";
-		checkbox.checked = checked;
-		checkbox.title = title;
-		checkbox.setAttribute("aria-label", title);
-		checkbox.addEventListener("change", () => onChange(checkbox.checked));
-		return checkbox;
-	}
-	applyInfoClass() {
-		this.element.classList.toggle("perf-monitor--info", this.settings.info);
-	}
-	applyModeClass() {
-		this.element.classList.toggle("perf-monitor--compact", this.mode === "compact");
-		this.element.classList.toggle("perf-monitor--full", this.mode === "full");
-	}
-	resizeCanvases() {
-		const dpr = window.devicePixelRatio || 1;
-		const sizeAll = (graphs) => {
-			for (const graph of graphs) {
-				const { canvas, ctx } = graph;
-				const width = canvas.clientWidth;
-				const height = canvas.clientHeight;
-				if (width === 0 || height === 0) continue;
-				canvas.width = Math.round(width * dpr);
-				canvas.height = Math.round(height * dpr);
-				ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-				graph.width = width;
-				graph.height = height;
-			}
-		};
-		sizeAll(this.graphCanvases.values());
-		sizeAll(this.hudGraphs.values());
-	}
-};
-//#endregion
-//#region src/ui/styles.ts
-/**
-* The HUD stylesheet as a string, so the package works without a bundler and
-* injects itself once per document. `.perf-monitor` is the metrics card,
-* `.perf-hud` the floating host around it. Both namespaced so a host page can
-* override safely; the `--perf-*` custom properties are the theming surface.
-*
-* Both elements carry `data-theme="dark" | "light"` (see `HudTheme`) and each
-* resolves its own tokens from it, so the card also themes when mounted on
-* its own, outside a `.perf-hud`.
-*/
-const STYLE_ATTRIBUTE = "data-three-meter";
-const PERF_HUD_STYLES = `
-.perf-hud,
-.perf-monitor {
-  --perf-bg: rgba(22, 24, 29, 0.85);
-  --perf-fg: #e6e8eb;
-  --perf-fg-dim: #c5c8ce;
-  --perf-muted: #8b909a;
-  --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;
+const STYLE_ATTRIBUTE = "data-three-meter";
+const PERF_HUD_STYLES = `
+.perf-hud,
+.perf-monitor {
+  --perf-bg: rgba(22, 24, 29, 0.85);
+  --perf-fg: #e6e8eb;
+  --perf-fg-dim: #c5c8ce;
+  --perf-muted: #8b909a;
+  --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;
 }
 
 .perf-hud[data-theme="light"],
@@ -1732,11 +784,10 @@ const PERF_HUD_STYLES = `
 }
 
 .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;
+  grid-template-columns: minmax(0, 1fr) 5ch 6ch 14px;
   gap: 6px;
   align-items: baseline;
   padding: 2px 6px;
@@ -1746,13 +797,58 @@ const PERF_HUD_STYLES = `
   color: inherit;
   font: inherit;
   text-align: left;
-  cursor: pointer;
+  cursor: default;
 }
 
 .perf-monitor__cost:not(.perf-monitor__cost--head):hover {
   background: var(--perf-row);
 }
 
+.perf-monitor__cost.is-hidden .perf-monitor__cost-name {
+  opacity: 0.6;
+  text-decoration: line-through;
+}
+
+/* What hiding saved, across the calls and tris columns. */
+.perf-monitor__cost-saved {
+  grid-column: 2 / span 2;
+  color: var(--perf-accent);
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.perf-monitor__cost-eye {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--perf-muted);
+  cursor: pointer;
+  align-self: center;
+}
+
+.perf-monitor__cost-eye .perf-monitor__icon {
+  width: 12px;
+  height: 12px;
+  color: inherit;
+}
+
+.perf-monitor__cost-eye:hover,
+.perf-monitor__cost-eye[aria-pressed="true"] {
+  color: var(--perf-fg);
+}
+
+.perf-monitor__cost-eye:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: 1px;
+}
+
 .perf-monitor__cost:focus-visible {
   outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
   outline-offset: -1px;
@@ -1763,13 +859,30 @@ const PERF_HUD_STYLES = `
   cursor: default;
 }
 
+/* The name is a button: a click logs the row's objects. */
 .perf-monitor__cost-name {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--perf-fg-dim);
 }
 
+.perf-monitor__cost-name:hover {
+  color: var(--perf-fg);
+}
+
+.perf-monitor__cost-name:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: 1px;
+}
+
 .perf-monitor__cost-copies {
   color: var(--perf-muted);
 }
@@ -1989,21 +1102,24 @@ const PERF_HUD_STYLES = `
   touch-action: none;
 }
 
-.perf-hud--full > .perf-monitor {
+.perf-hud--full .perf-hud__card > .perf-monitor {
   width: 16rem;
   max-width: 100%;
 }
 
 /* Room for the hints, so most fit on two or three lines. Plus padding, this fills the host's 20rem cap. */
-.perf-hud--full > .perf-monitor--explain {
+.perf-hud--full .perf-hud__card > .perf-monitor--explain {
   width: 19rem;
 }
 
-.perf-hud > .perf-monitor {
+/* The card every dev panel sits in (\`mountDevPanel\`): the brand label, then the panel's content. */
+.perf-hud__card {
   position: relative;
   z-index: 1;
+  display: flex;
+  flex-direction: column;
   max-height: 70vh;
-  overflow: auto;
+  overflow: hidden;
   background: var(--perf-bg);
   border-radius: 6px;
   box-shadow: var(--perf-shadow);
@@ -2012,10 +1128,59 @@ const PERF_HUD_STYLES = `
   transition: opacity 0.25s ease;
 }
 
-.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {
+.perf-hud__card > .perf-monitor {
+  min-height: 0;
+  overflow: auto;
+}
+
+.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-hud__card {
   opacity: 0.32;
 }
 
+.perf-hud__brand {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 0;
+  color: var(--perf-muted);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+/* Alone in the card: pad it all round. */
+.perf-hud__brand:last-child {
+  padding-bottom: 6px;
+}
+
+.perf-hud__brand-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.perf-hud__brand-name::before {
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  background: var(--perf-accent);
+  content: "";
+}
+
+.perf-hud__brand-detail {
+  margin-left: auto;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.perf-hud__brand-detail:empty {
+  display: none;
+}
+
 .perf-hud__hotspot {
   position: absolute;
   z-index: 0;
@@ -2101,50 +1266,1275 @@ const PERF_HUD_STYLES = `
   background: var(--perf-accent);
   color: var(--perf-bg);
 }
-`;
+`;
+/**
+* Append the stylesheet to `target`'s head, once. Call before mounting a view
+* by hand; {@link mountPerfHud} does it for you unless told not to.
+*/
+const injectStyles = (target = document) => {
+	if (target.head.querySelector(`style[${STYLE_ATTRIBUTE}]`)) return;
+	const style = target.createElement("style");
+	style.setAttribute(STYLE_ATTRIBUTE, "");
+	style.textContent = PERF_HUD_STYLES;
+	target.head.append(style);
+};
+//#endregion
+//#region src/ui/dev-panel.ts
+/**
+* The frame every zkmake dev panel shares, so they look and handle alike: a fixed host docked to a
+* screen edge, a card with a brand label on top and the panel's content under it, and three discs
+* on the inward side — drag grip, expand/compact, dim on leave — that stay hidden until the pointer
+* is near or someone taps. `mountPerfHud` is one; `@zkmake/three-textures`' panel is another.
+*/
+const TOUCH_LINGER_MS = 2500;
+const disc = (label, className, icon) => {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = `perf-hud__disc ${className}`.trim();
+	button.setAttribute("aria-label", label);
+	button.title = label;
+	button.append(createIcon(icon, "perf-hud__icon"));
+	return button;
+};
+/** A dim flag in localStorage, for panels with no settings of their own. */
+const storedDim = (key) => {
+	const listeners = /* @__PURE__ */ new Set();
+	let on = false;
+	try {
+		on = key !== null && localStorage.getItem(key) === "1";
+	} catch {}
+	return {
+		get: () => on,
+		set: (next) => {
+			on = next;
+			try {
+				if (key !== null) localStorage.setItem(key, next ? "1" : "0");
+			} catch {}
+			for (const listener of listeners) listener();
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+};
+const mountDevPanel = (options) => {
+	const parent = options.parent ?? document.body;
+	const dim = options.dim ?? storedDim(options.storageKey === null ? null : `${options.storageKey}:dim`);
+	if (options.injectStyles ?? true) injectStyles(parent.ownerDocument);
+	const host = document.createElement("div");
+	host.className = "perf-hud";
+	host.dataset.edge = "left";
+	host.setAttribute("aria-label", options.label);
+	const hotspot = document.createElement("div");
+	hotspot.className = "perf-hud__hotspot";
+	hotspot.setAttribute("aria-hidden", "true");
+	const tools = document.createElement("div");
+	tools.className = "perf-hud__tools";
+	const grip = disc(`Drag the ${options.brand} panel`, "perf-hud__drag", "grip");
+	const toggle = disc(options.toggleLabel ?? "Expand or compact the panel", "", "sliders");
+	const dimDisc = disc("Dim the panel when the pointer leaves", "perf-hud__dim", "blend");
+	dimDisc.addEventListener("click", () => dim.set(!dim.get()));
+	toggle.addEventListener("click", () => options.onToggle());
+	tools.append(grip, toggle, dimDisc);
+	const card = document.createElement("div");
+	card.className = "perf-hud__card";
+	const brand = document.createElement("div");
+	brand.className = "perf-hud__brand";
+	const name = document.createElement("span");
+	name.className = "perf-hud__brand-name";
+	name.textContent = options.brand;
+	const detail = document.createElement("span");
+	detail.className = "perf-hud__brand-detail";
+	brand.append(name, detail);
+	card.append(brand, options.content);
+	host.append(hotspot, tools, card);
+	parent.append(host);
+	const applyDim = () => {
+		host.classList.toggle("perf-hud--dim", dim.get());
+		dimDisc.setAttribute("aria-pressed", String(dim.get()));
+		dimDisc.title = `Dim on leave: ${dim.get() ? "on" : "off"}`;
+	};
+	applyDim();
+	applyTheme(host, options.theme);
+	const unsubscribeDim = dim.subscribe(applyDim);
+	const unsubscribeTheme = options.theme.subscribe(() => applyTheme(host, options.theme));
+	const dock = dockPanel(host, {
+		defaultPlacement: options.defaultPlacement,
+		handle: grip,
+		storageKey: options.storageKey
+	});
+	let edge = host.dataset.edge;
+	const edgeWatch = new MutationObserver(() => {
+		const next = host.dataset.edge;
+		if (next !== edge) {
+			edge = next;
+			options.onEdgeChange?.(edge);
+		}
+	});
+	edgeWatch.observe(host, {
+		attributes: true,
+		attributeFilter: ["data-edge"]
+	});
+	options.onEdgeChange?.(edge);
+	let hideTimer = 0;
+	const sleep = () => {
+		if (host.classList.contains("is-dragging")) return;
+		host.classList.remove("is-awake");
+	};
+	const wake = (linger) => {
+		host.classList.add("is-awake");
+		window.clearTimeout(hideTimer);
+		if (linger) hideTimer = window.setTimeout(sleep, TOUCH_LINGER_MS);
+	};
+	const onEnter = () => {
+		wake(false);
+	};
+	const onLeave = (event) => {
+		if (host.contains(event.relatedTarget)) return;
+		if (event.pointerType === "touch" || event.pointerType === "pen") {
+			wake(true);
+			return;
+		}
+		sleep();
+	};
+	const onDown = (event) => {
+		wake(event.pointerType !== "mouse");
+	};
+	host.addEventListener("pointerenter", onEnter);
+	host.addEventListener("pointerleave", onLeave);
+	host.addEventListener("pointerdown", onDown);
+	return {
+		element: host,
+		card,
+		detail,
+		refresh: () => {
+			requestAnimationFrame(() => dock.refresh());
+		},
+		dispose: () => {
+			window.clearTimeout(hideTimer);
+			edgeWatch.disconnect();
+			host.removeEventListener("pointerenter", onEnter);
+			host.removeEventListener("pointerleave", onLeave);
+			host.removeEventListener("pointerdown", onDown);
+			unsubscribeDim();
+			unsubscribeTheme();
+			dock.dispose();
+			host.remove();
+		}
+	};
+};
+//#endregion
+//#region package.json
+var name = "@zkmake/three-meter";
+var version = "0.11.0";
+//#endregion
+//#region src/ui/clipboard.ts
+/**
+* Copy text from a click handler. The async Clipboard API needs a secure
+* context and the `clipboard-write` permission; a dev server opened over a LAN
+* IP has neither, and some embeds deny the permission. The fallback is the old
+* select-a-textarea `execCommand("copy")`, still honoured inside a user gesture.
+*/
+const copyWithSelection = (text) => {
+	const textarea = document.createElement("textarea");
+	textarea.value = text;
+	textarea.setAttribute("readonly", "");
+	textarea.style.position = "fixed";
+	textarea.style.opacity = "0";
+	textarea.style.pointerEvents = "none";
+	const previous = document.activeElement;
+	document.body.append(textarea);
+	textarea.select();
+	try {
+		return document.execCommand("copy");
+	} catch {
+		return false;
+	} finally {
+		textarea.remove();
+		previous?.focus?.();
+	}
+};
+const copyText = async (text) => {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {
+		return copyWithSelection(text);
+	}
+};
+//#endregion
+//#region src/ui/format.ts
+/**
+* Number formatting for the card. Counts stay exact with thousands separators
+* while they fit the compact grid's 6ch value column (`99,999`), then switch
+* to compact notation (`250K`, `1.4M`, `12.3M`, `1.2B`) so a triangle count in
+* the millions can't run into the neighbouring label.
+*/
+const COMPACT_FROM = 1e5;
+const exact = new Intl.NumberFormat("en-US");
+const compact = new Intl.NumberFormat("en-US", {
+	maximumFractionDigits: 1,
+	notation: "compact"
+});
+const formatCount = (value) => Math.abs(value) < COMPACT_FROM ? exact.format(value) : compact.format(value);
+//#endregion
+//#region src/ui/hider.ts
+var Hider = class {
+	groups = /* @__PURE__ */ new Map();
+	/** Each hidden object's `visible` from before the first group hid it. */
+	original = /* @__PURE__ */ new Map();
+	hide(key, objects) {
+		if (this.groups.has(key)) return;
+		const hideable = objects.filter((object) => typeof object === "object" && object !== null);
+		this.groups.set(key, hideable);
+		for (const object of hideable) {
+			if (!this.original.has(object)) this.original.set(object, object.visible !== false);
+			object.visible = false;
+		}
+	}
+	show(key) {
+		const objects = this.groups.get(key);
+		if (!objects) return;
+		this.groups.delete(key);
+		for (const object of objects) if (!this.heldElsewhere(object)) {
+			object.visible = this.original.get(object) ?? true;
+			this.original.delete(object);
+		}
+	}
+	isHidden(key) {
+		return this.groups.has(key);
+	}
+	/** Hidden group keys, in the order they were hidden. */
+	keys() {
+		return [...this.groups.keys()];
+	}
+	restoreAll() {
+		for (const key of this.keys()) this.show(key);
+	}
+	heldElsewhere(object) {
+		for (const objects of this.groups.values()) if (objects.includes(object)) return true;
+		return false;
+	}
+};
+//#endregion
+//#region src/ui/metric-help.ts
+/**
+* One plain-language line per metric: what it is, and what a bad reading
+* means. Shown as the label's tooltip and, with "explain metrics" on, under
+* each row. Keyed like the stat rows; the graphs reuse `fps`, `cpu`, `gpu`.
+*/
+const METRIC_HELP = {
+	calls: "Separate draw commands sent to the GPU this frame. Fewer is better: merge or instance meshes that share a material.",
+	cpu: "JavaScript time per frame: your update code plus three.js preparing the render. It has to fit the frame budget (16.7 ms at 60 FPS).",
+	fps: "Frames drawn per second. Higher is smoother; most displays top out at 60 or 120.",
+	geometries: "Geometries held in GPU memory. Should level off; a steady climb is a leak, so dispose() what you remove.",
+	headroom: "Spare time left in each frame: the frame budget minus whichever of CPU and GPU took longer. Below zero, frames miss the display's refresh.",
+	refresh: "The rate the loop runs at when it keeps up: the display's refresh rate, or the app's own cap. Budgets use it unless you set targetFps.",
+	gpu: "Time the graphics card spent drawing the frame. High means shaders, overdraw or resolution are the bottleneck.",
+	hitches: "Frames that took over twice as long as usual, in the last 1,000 frames. Each one is a visible stutter.",
+	lines: "Line segments drawn this frame.",
+	low: "Frame rate during the slowest 1% of frames. Far below FPS means stutter the average hides.",
+	p99: "99% of frames finished within this many ms. Above the frame budget (16.7 ms at 60 FPS) means dropped frames.",
+	passes: "Times renderer.render() ran this frame. Shadows, post-processing and extra cameras each add passes.",
+	points: "Points drawn this frame.",
+	shaders: "Compiled shader programs. A jump mid-session usually means a stutter while a new material compiled.",
+	textures: "Textures held in GPU memory. Should level off; a steady climb is a leak, so dispose() what you remove.",
+	triangles: "Triangles drawn this frame. Mostly GPU cost: use lower-poly models or level of detail to cut it."
+};
+//#endregion
+//#region src/ui/report.ts
+/**
+* A plain-text snapshot of the monitor for bug reports: versions, backend and
+* 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 = {
+	webgl: "WebGL",
+	webgl2: "WebGL2",
+	webgpu: "WebGPU"
+};
+/** `WebGPU`, `WebGL2`, `WebGL2 fallback`, or `""` before the backend settles. */
+const backendLabel = (environment) => {
+	if (!environment.backend) return "";
+	const label = BACKEND_LABELS[environment.backend];
+	return environment.fallback ? `${label} fallback` : label;
+};
+const ms = (value) => `${value.toFixed(1)} ms`;
+/** 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}`,
+		environment.three ? `three r${environment.three}` : "",
+		backendLabel(environment),
+		environment.gpu ?? ""
+	].filter(Boolean);
+	const frames = stats.frames === 0 ? `FPS ${Math.round(sample.fps)}` : [
+		`FPS ${Math.round(sample.fps)}`,
+		`1% low ${Math.round(stats.lowFps)}`,
+		`p99 ${ms(stats.p99Ms)}`,
+		`hitches ${formatCount(stats.hitches)} / ${formatCount(stats.frames)} frames`
+	].join(" · ");
+	const timing = [`CPU ${ms(sample.cpu)}`, `GPU ${sample.gpu.available ? ms(sample.gpu.ms) : "unavailable"}`];
+	if (stats.refreshHz) {
+		const busiest = Math.max(sample.cpu, sample.gpu.available ? sample.gpu.ms : 0);
+		timing.push(`refresh ${stats.refreshHz} Hz`, `headroom ${ms(1e3 / stats.refreshHz - busiest)}`);
+	}
+	const lines = [
+		heading.join(" · "),
+		frames,
+		timing.join(" · "),
+		[
+			`Calls ${formatCount(render.calls)}`,
+			`passes ${formatCount(render.passes)}`,
+			`triangles ${formatCount(render.triangles)}`,
+			`lines ${formatCount(render.lines)}`,
+			`points ${formatCount(render.points)}`
+		].join(" · "),
+		[
+			`Geometries ${formatCount(resources.geometries)}`,
+			`textures ${formatCount(resources.textures)}`,
+			`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",
+		...lines,
+		"```"
+	].join("\n");
+};
+const readPage = () => typeof window === "undefined" ? null : {
+	dpr: window.devicePixelRatio || 1,
+	height: window.innerHeight,
+	userAgent: navigator.userAgent,
+	width: window.innerWidth
+};
+/** 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(),
+	stats: monitor.getFrameStats()
+});
+//#endregion
+//#region src/ui/sparkline.ts
+function drawSparkline(ctx, width, height, values, style, guide) {
+	ctx.clearRect(0, 0, width, height);
+	if (values.length < 2) return;
+	let max = 0;
+	for (const value of values) if (value > max) max = value;
+	const range = max * 1.1 || 1;
+	const stepX = width / (values.length - 1);
+	const toY = (value) => height - value / range * height;
+	ctx.beginPath();
+	ctx.moveTo(0, toY(values[0]));
+	for (let index = 1; index < values.length; index += 1) ctx.lineTo(index * stepX, toY(values[index]));
+	ctx.lineWidth = 1;
+	ctx.strokeStyle = style.stroke;
+	ctx.stroke();
+	ctx.lineTo(width, height);
+	ctx.lineTo(0, height);
+	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
+const TIMINGS = [
+	{
+		format: (value) => Math.round(value).toString(),
+		icon: "gauge",
+		label: "FPS",
+		metric: "fps",
+		style: {
+			dark: {
+				fill: "rgba(74, 222, 128, 0.15)",
+				stroke: "#4ade80"
+			},
+			light: {
+				fill: "rgba(22, 163, 74, 0.12)",
+				stroke: "#16a34a"
+			}
+		},
+		unit: ""
+	},
+	{
+		format: (value) => value.toFixed(1),
+		icon: "cpu",
+		label: "CPU",
+		metric: "cpu",
+		style: {
+			dark: {
+				fill: "rgba(96, 165, 250, 0.15)",
+				stroke: "#60a5fa"
+			},
+			light: {
+				fill: "rgba(37, 99, 235, 0.12)",
+				stroke: "#2563eb"
+			}
+		},
+		unit: "ms"
+	},
+	{
+		format: (value) => value.toFixed(1),
+		icon: "zap",
+		label: "GPU",
+		metric: "gpu",
+		style: {
+			dark: {
+				fill: "rgba(244, 114, 182, 0.15)",
+				stroke: "#f472b6"
+			},
+			light: {
+				fill: "rgba(219, 39, 119, 0.12)",
+				stroke: "#db2777"
+			}
+		},
+		unit: "ms"
+	}
+];
+const THEME_OPTIONS = [
+	{
+		icon: "sun",
+		label: "Light theme",
+		mode: "light"
+	},
+	{
+		icon: "monitor",
+		label: "Match the system theme",
+		mode: "system"
+	},
+	{
+		icon: "moon",
+		label: "Dark theme",
+		mode: "dark"
+	}
+];
+/** The monorepo tags each package's releases `@zkmake/three-meter@0.9.2`. */
+const RELEASE_URL = `https://github.com/zkmake/three-kit/releases/tag/${encodeURIComponent(`${name}@${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; use the eye to hide them and measure the time they cost.";
+/** Frames averaged on each side of hiding a row. */
+const MEASURE_FRAMES = 30;
+/** How long after hiding before the saving is read, so the average holds only frames without the row. */
+const MEASURE_SETTLE_MS = 700;
+const meanOfLast = (values, count) => {
+	const tail = values.slice(-count);
+	return tail.length === 0 ? 0 : tail.reduce((sum, value) => sum + value, 0) / tail.length;
+};
+/** `×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;
+		case "cpu": return sample.cpu;
+		case "gpu": return sample.gpu.ms;
+	}
+};
+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",
+		value: (sample) => sample.fps || null
+	},
+	{
+		format: formatCount,
+		icon: "layers",
+		key: "calls",
+		label: "Calls",
+		value: (sample) => sample.render.calls
+	},
+	{
+		format: tenths,
+		icon: "cpu",
+		key: "cpu",
+		label: "CPU",
+		unit: "ms",
+		value: (sample) => sample.cpu
+	},
+	{
+		format: tenths,
+		icon: "zap",
+		key: "gpu",
+		label: "GPU",
+		unit: "ms",
+		value: (sample) => sample.gpu.available ? sample.gpu.ms : null
+	},
+	{
+		format: tenths,
+		icon: "hourglass",
+		key: "headroom",
+		label: "Headroom",
+		unit: "ms",
+		value: (sample, _stats, frameMs) => sample.fps ? frameMs - Math.max(sample.cpu, sample.gpu.available ? sample.gpu.ms : 0) : null
+	},
+	{
+		format: (value) => `${Math.round(value)} Hz`,
+		icon: "monitor",
+		key: "refresh",
+		label: "Refresh",
+		unit: "Hz",
+		value: (_sample, stats) => stats.refreshHz
+	},
+	{
+		format: whole,
+		icon: "trendingDown",
+		key: "low",
+		label: "1% low",
+		value: (_sample, stats) => stats.frames ? stats.lowFps : null
+	},
+	{
+		format: tenths,
+		icon: "timer",
+		key: "p99",
+		label: "Frame p99",
+		unit: "ms",
+		value: (_sample, stats) => stats.frames ? stats.p99Ms : null
+	},
+	{
+		format: formatCount,
+		icon: "activity",
+		key: "hitches",
+		label: "Hitches",
+		value: (_sample, stats) => stats.frames ? stats.hitches : null
+	},
+	{
+		format: formatCount,
+		icon: "triangle",
+		key: "triangles",
+		label: "Triangles",
+		value: (sample) => sample.render.triangles
+	},
+	{
+		format: formatCount,
+		icon: "spline",
+		key: "lines",
+		label: "Lines",
+		value: (sample) => sample.render.lines
+	},
+	{
+		format: formatCount,
+		icon: "circleDot",
+		key: "points",
+		label: "Points",
+		value: (sample) => sample.render.points
+	},
+	{
+		format: formatCount,
+		icon: "repeat",
+		key: "passes",
+		label: "Render passes",
+		value: (sample) => sample.render.passes
+	},
+	{
+		format: formatCount,
+		icon: "box",
+		key: "geometries",
+		label: "Geometries",
+		value: (sample) => sample.resources.geometries
+	},
+	{
+		format: formatCount,
+		icon: "image",
+		key: "textures",
+		label: "Textures",
+		value: (sample) => sample.resources.textures
+	},
+	{
+		format: formatCount,
+		icon: "palette",
+		key: "shaders",
+		label: "Shaders",
+		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;
+};
 /**
-* Append the stylesheet to `target`'s head, once. Call before mounting a view
-* by hand; {@link mountPerfHud} does it for you unless told not to.
+* Host-agnostic widget that paints {@link Sample}s. Mount {@link element}
+* anywhere; the view drives its own throttled repaint. Compact is the floating
+* HUD; full is the checkbox list that chooses what compact shows. Styles are
+* not injected here. Call `injectStyles()` or use `mountPerfHud`.
 */
-const injectStyles = (target = document) => {
-	if (target.head.querySelector(`style[${STYLE_ATTRIBUTE}]`)) return;
-	const style = target.createElement("style");
-	style.setAttribute(STYLE_ATTRIBUTE, "");
-	style.textContent = PERF_HUD_STYLES;
-	target.head.append(style);
+var PerformanceView = class {
+	element;
+	settings;
+	theme;
+	ownsTheme;
+	unsubscribeTheme;
+	monitor;
+	minIntervalMs;
+	mode;
+	graphValueEls = /* @__PURE__ */ new Map();
+	graphCanvases = /* @__PURE__ */ new Map();
+	graphCheckboxes = /* @__PURE__ */ new Map();
+	statValueEls = /* @__PURE__ */ new Map();
+	statCheckboxes = /* @__PURE__ */ new Map();
+	infoCheckbox;
+	themeRadios = /* @__PURE__ */ new Map();
+	footerThreeEl;
+	footerHardwareEl;
+	footerBackendEl;
+	footerGpuEl;
+	lastEnvironmentKey = "";
+	hudGraphsEl;
+	hudGridEl;
+	hudGraphs = /* @__PURE__ */ new Map();
+	hudNumberEls = /* @__PURE__ */ new Map();
+	budgets;
+	budgetsInput;
+	detectedHz = null;
+	hider = new Hider();
+	hiddenRows = /* @__PURE__ */ new Map();
+	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();
+		this.ownsTheme = !options.theme;
+		this.theme = options.theme ?? new HudTheme();
+		this.theme.setOverride(this.settings.theme);
+		this.mode = options.mode ?? "full";
+		this.minIntervalMs = 1e3 / (options.refreshHz ?? 10);
+		this.budgetsInput = options.budgets;
+		this.budgets = resolveBudgets(options.budgets);
+		this.element = document.createElement("div");
+		this.element.className = "perf-monitor";
+		this.applyModeClass();
+		this.resizeObserver = new ResizeObserver(() => this.resizeCanvases());
+		this.build();
+		this.applyInfoClass();
+		this.rebuildHud();
+		this.onThemeChanged();
+		this.unsubscribe = this.settings.subscribe(() => this.onSelectionChanged());
+		this.unsubscribeTheme = this.theme.subscribe(() => this.onThemeChanged());
+	}
+	start() {
+		if (this.rafId === null) this.rafId = requestAnimationFrame(this.frame);
+	}
+	stop() {
+		if (this.rafId !== null) {
+			cancelAnimationFrame(this.rafId);
+			this.rafId = null;
+		}
+	}
+	setMode(mode) {
+		if (mode === this.mode) return;
+		this.mode = mode;
+		this.applyModeClass();
+		this.resizeCanvases();
+	}
+	getMode() {
+		return this.mode;
+	}
+	/** Replace the budgets; `false` turns them all off. Applies on the next paint. */
+	setBudgets(budgets) {
+		this.budgetsInput = budgets;
+		this.budgets = resolveBudgets(budgets, this.detectedHz);
+		this.applyBudgetTitles();
+	}
+	dispose() {
+		this.stop();
+		this.showAllHidden();
+		this.unsubscribe();
+		this.unsubscribeTheme();
+		if (this.ownsTheme) this.theme.dispose();
+		this.resizeObserver.disconnect();
+		this.element.remove();
+	}
+	frame = (now) => {
+		this.rafId = requestAnimationFrame(this.frame);
+		if (now - this.lastPaintAt < this.minIntervalMs) return;
+		this.lastPaintAt = now;
+		this.render();
+	};
+	render() {
+		const sample = this.monitor.getSample();
+		const stats = this.monitor.getFrameStats();
+		this.followRefresh(stats.refreshHz);
+		if (this.mode === "compact") {
+			this.renderHud(sample, stats);
+			if (this.settings.info) this.renderFooter();
+			return;
+		}
+		for (const config of TIMINGS) this.paintGraph(config, sample, this.graphValueEls.get(config.metric), this.graphCanvases.get(config.metric), "unavailable");
+		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();
+		const hidden = [...this.hiddenRows.values()].map((row) => this.hiddenCostRow(row));
+		if (!cost) {
+			this.costsListEl.replaceChildren(...hidden, this.costsNote("No scene rendered yet."));
+			return;
+		}
+		const entries = (this.costGroup === "meshes" ? cost.meshes : cost.materials).filter((entry) => !this.hiddenRows.has(entry.key));
+		if (this.costSort === "triangles") entries.sort((a, b) => b.triangles - a.triangles || b.calls - a.calls);
+		if (entries.length === 0 && hidden.length === 0) {
+			this.costsListEl.replaceChildren(this.costsNote("Nothing drawn."));
+			return;
+		}
+		const rows = entries.slice(0, COSTS_ROWS).map((entry) => {
+			const row = this.costRowShell(entry);
+			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(calls, triangles, this.eyeButton(entry, false));
+			return row;
+		});
+		this.costsListEl.replaceChildren(...hidden, ...rows);
+	}
+	/** Name button (logs the objects) in a row; the caller appends the value cells and the eye. */
+	costRowShell(entry) {
+		const row = document.createElement("div");
+		row.className = "perf-monitor__cost";
+		const name = document.createElement("button");
+		name.type = "button";
+		name.className = "perf-monitor__cost-name";
+		name.title = costTitle(entry);
+		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);
+		}
+		name.addEventListener("click", () => {
+			console.log(`three-meter: ${entry.label}`, entry.objects);
+		});
+		row.append(name);
+		return row;
+	}
+	/** A hidden row: what hiding it saved, measured from the timing history. */
+	hiddenCostRow(hidden) {
+		const row = this.costRowShell(hidden.entry);
+		row.classList.add("is-hidden");
+		const saved = document.createElement("span");
+		saved.className = "perf-monitor__cost-saved";
+		const label = hidden.metric.toUpperCase();
+		if (performance.now() - hidden.hiddenAt < MEASURE_SETTLE_MS) saved.textContent = "measuring…";
+		else {
+			const now = meanOfLast(this.monitor.getHistory(hidden.metric), MEASURE_FRAMES);
+			const delta = hidden.baseline - now;
+			saved.textContent = `${delta >= 0 ? "−" : "+"}${Math.abs(delta).toFixed(1)} ms ${label}`;
+			saved.title = `${label} time went from ${hidden.baseline.toFixed(1)} ms to ${now.toFixed(1)} ms with this hidden, averaged over ${MEASURE_FRAMES} frames each side.`;
+		}
+		row.append(saved, this.eyeButton(hidden.entry, true));
+		return row;
+	}
+	eyeButton(entry, hidden) {
+		const eye = document.createElement("button");
+		eye.type = "button";
+		eye.className = "perf-monitor__cost-eye";
+		eye.setAttribute("aria-pressed", String(hidden));
+		const label = hidden ? `Show ${entry.label} again` : `Hide ${entry.label} to measure its cost`;
+		eye.title = label;
+		eye.setAttribute("aria-label", label);
+		eye.append(createIcon(hidden ? "eyeOff" : "eye", "perf-monitor__icon"));
+		eye.addEventListener("click", () => hidden ? this.showRow(entry.key) : this.hideRow(entry));
+		return eye;
+	}
+	hideRow(entry) {
+		const metric = this.monitor.getSample().gpu.available ? "gpu" : "cpu";
+		this.hiddenRows.set(entry.key, {
+			baseline: meanOfLast(this.monitor.getHistory(metric), MEASURE_FRAMES),
+			entry,
+			hiddenAt: performance.now(),
+			metric
+		});
+		const all = this.monitor.getObjectsForKey(entry.key);
+		this.hider.hide(entry.key, all.length > 0 ? all : entry.objects);
+		this.renderCosts();
+	}
+	showRow(key) {
+		this.hider.show(key);
+		this.hiddenRows.delete(key);
+		this.renderCosts();
+	}
+	/** Everything hidden goes back: on closing top costs and on dispose. */
+	showAllHidden() {
+		this.hider.restoreAll();
+		this.hiddenRows.clear();
+	}
+	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();
+		const three = environment.three ? `three r${environment.three}` : "";
+		const backend = backendLabel(environment);
+		const gpu = environment.gpu ?? "";
+		const key = `${three}\n${backend}\n${gpu}`;
+		if (key === this.lastEnvironmentKey) return;
+		this.lastEnvironmentKey = key;
+		this.footerThreeEl.textContent = three;
+		this.footerBackendEl.textContent = backend;
+		this.footerBackendEl.hidden = backend === "";
+		this.footerBackendEl.title = environment.fallback ? "WebGPURenderer couldn't get WebGPU and fell back to WebGL2" : "";
+		this.footerBackendEl.classList.toggle("is-fallback", environment.fallback);
+		this.footerGpuEl.textContent = gpu;
+		this.footerGpuEl.title = gpu;
+		this.footerHardwareEl.hidden = backend === "" && gpu === "";
+	}
+	/** Budgets follow the detected refresh rate unless `targetFps` was given. */
+	followRefresh(hz) {
+		if (hz === this.detectedHz) return;
+		this.detectedHz = hz;
+		this.budgets = resolveBudgets(this.budgetsInput, hz);
+		this.applyBudgetTitles();
+	}
+	renderHud(sample, stats) {
+		for (const [key, element] of this.hudNumberEls) {
+			const config = NUMBER_BY_KEY.get(key);
+			if (config) this.paintNumber(config, element, sample, stats);
+		}
+		for (const [metric, graph] of this.hudGraphs) {
+			const config = TIMINGS.find((timing) => timing.metric === metric);
+			this.paintGraph(config, sample, graph.valueEl, graph, "—");
+		}
+	}
+	paintNumber(config, element, sample, stats) {
+		const value = config.value(sample, stats, this.budgets.frameMs);
+		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}` : ""}`;
+	}
+	build() {
+		const hud = document.createElement("div");
+		hud.className = "perf-monitor__hud";
+		this.hudGraphsEl = document.createElement("div");
+		this.hudGraphsEl.className = "perf-monitor__hud-graphs";
+		this.hudGridEl = document.createElement("div");
+		this.hudGridEl.className = "perf-monitor__hud-grid";
+		hud.append(this.hudGraphsEl, this.hudGridEl);
+		const options = document.createElement("div");
+		options.className = "perf-monitor__section perf-monitor__options";
+		const themeRow = document.createElement("div");
+		themeRow.className = "perf-monitor__row perf-monitor__row--static";
+		const themeLabel = document.createElement("span");
+		themeLabel.className = "perf-monitor__label";
+		themeLabel.textContent = "theme";
+		const segment = document.createElement("div");
+		segment.className = "perf-monitor__segment";
+		segment.setAttribute("role", "radiogroup");
+		segment.setAttribute("aria-label", "Panel theme");
+		for (const option of THEME_OPTIONS) {
+			const radio = document.createElement("button");
+			radio.type = "button";
+			radio.className = "perf-monitor__segment-option";
+			radio.setAttribute("role", "radio");
+			radio.setAttribute("aria-checked", "false");
+			radio.setAttribute("aria-label", option.label);
+			radio.title = option.label;
+			radio.append(createIcon(option.icon, "perf-monitor__icon"));
+			radio.addEventListener("click", () => this.settings.setTheme(option.mode));
+			this.themeRadios.set(option.mode, radio);
+			segment.append(radio);
+		}
+		themeRow.append(createIcon("contrast", "perf-monitor__icon"), themeLabel, segment);
+		const explainRow = document.createElement("label");
+		explainRow.className = "perf-monitor__row";
+		const explainCheckbox = this.buildCheckbox(false, "Explain each metric", (on) => this.element.classList.toggle("perf-monitor--explain", on));
+		const explainLabel = document.createElement("span");
+		explainLabel.className = "perf-monitor__label";
+		explainLabel.textContent = "explain metrics";
+		explainRow.append(createIcon("help", "perf-monitor__icon"), explainLabel, explainCheckbox);
+		options.append(themeRow, explainRow, this.buildReportRow());
+		const graphs = document.createElement("div");
+		graphs.className = "perf-monitor__graphs";
+		for (const config of TIMINGS) {
+			const graph = document.createElement("div");
+			graph.className = "perf-monitor__graph";
+			const canvas = document.createElement("canvas");
+			canvas.className = "perf-monitor__canvas";
+			const overlay = document.createElement("label");
+			overlay.className = "perf-monitor__graph-overlay perf-monitor__graph-overlay--toggle";
+			const head = document.createElement("span");
+			head.className = "perf-monitor__graph-head";
+			const checkbox = this.buildCheckbox(this.settings.isGraphEnabled(config.metric), `Show ${config.label} graph in HUD`, (on) => this.settings.setGraphEnabled(config.metric, on));
+			this.graphCheckboxes.set(config.metric, checkbox);
+			const label = document.createElement("span");
+			label.className = "perf-monitor__graph-label";
+			label.textContent = config.label;
+			label.title = METRIC_HELP[config.metric] ?? "";
+			const value = document.createElement("span");
+			value.className = "perf-monitor__graph-value";
+			value.textContent = "—";
+			this.graphValueEls.set(config.metric, value);
+			const tail = document.createElement("span");
+			tail.className = "perf-monitor__graph-head";
+			tail.append(value, checkbox);
+			head.append(createIcon(config.icon, "perf-monitor__icon"), label);
+			overlay.append(head, tail);
+			graph.append(canvas, overlay);
+			graphs.append(graph);
+			const ctx = canvas.getContext("2d");
+			if (ctx) {
+				this.graphCanvases.set(config.metric, {
+					canvas,
+					ctx,
+					height: 0,
+					width: 0
+				});
+				this.resizeObserver.observe(graph);
+			}
+		}
+		const stats = document.createElement("div");
+		stats.className = "perf-monitor__section";
+		for (const config of NUMBERS) {
+			const rowEl = document.createElement("label");
+			rowEl.className = "perf-monitor__row";
+			const checkbox = this.buildCheckbox(this.settings.isNumberEnabled(config.key), `Show ${config.label} in HUD`, (on) => this.settings.setNumberEnabled(config.key, on));
+			this.statCheckboxes.set(config.key, checkbox);
+			const help = METRIC_HELP[config.key] ?? "";
+			const label = document.createElement("span");
+			label.className = "perf-monitor__label";
+			label.textContent = config.label;
+			label.title = help;
+			const value = document.createElement("span");
+			value.className = "perf-monitor__value";
+			value.textContent = "—";
+			this.statValueEls.set(config.key, value);
+			const hint = document.createElement("span");
+			hint.className = "perf-monitor__hint";
+			hint.textContent = help;
+			rowEl.append(createIcon(config.icon, "perf-monitor__icon"), label, value, checkbox, hint);
+			stats.append(rowEl);
+		}
+		const footer = document.createElement("div");
+		footer.className = "perf-monitor__footer";
+		this.infoCheckbox = this.buildCheckbox(this.settings.info, "Show version and environment in HUD", (on) => this.settings.setInfo(on));
+		const footerBody = document.createElement("div");
+		footerBody.className = "perf-monitor__footer-body";
+		const softwareRow = document.createElement("div");
+		softwareRow.className = "perf-monitor__footer-row";
+		const release = document.createElement("a");
+		release.className = "perf-monitor__link";
+		release.href = RELEASE_URL;
+		release.target = "_blank";
+		release.rel = "noopener noreferrer";
+		release.title = `Release notes for v${version}`;
+		release.textContent = `three-meter v${version}`;
+		this.footerThreeEl = document.createElement("span");
+		softwareRow.append(release, this.footerThreeEl);
+		this.footerHardwareEl = document.createElement("div");
+		this.footerHardwareEl.className = "perf-monitor__footer-row";
+		this.footerHardwareEl.hidden = true;
+		this.footerBackendEl = document.createElement("span");
+		this.footerBackendEl.className = "perf-monitor__badge";
+		this.footerGpuEl = document.createElement("span");
+		this.footerGpuEl.className = "perf-monitor__footer-gpu";
+		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, this.buildCosts(), footer);
+	}
+	rebuildHud() {
+		const { selection } = this.settings;
+		for (const graph of this.hudGraphs.values()) this.resizeObserver.unobserve(graph.canvas.parentElement ?? graph.canvas);
+		this.hudGraphs.clear();
+		this.hudNumberEls.clear();
+		this.hudGraphsEl.replaceChildren();
+		this.hudGridEl.replaceChildren();
+		for (const config of TIMINGS) {
+			if (!selection.graphs.has(config.metric)) continue;
+			const row = document.createElement("div");
+			row.className = "perf-monitor__hud-graph";
+			const canvas = document.createElement("canvas");
+			canvas.className = "perf-monitor__canvas";
+			const overlay = document.createElement("div");
+			overlay.className = "perf-monitor__graph-overlay";
+			const label = document.createElement("span");
+			label.className = "perf-monitor__graph-label";
+			label.textContent = config.label;
+			label.title = METRIC_HELP[config.metric] ?? "";
+			const head = document.createElement("span");
+			head.className = "perf-monitor__graph-head";
+			head.append(createIcon(config.icon, "perf-monitor__icon"), label);
+			const value = document.createElement("span");
+			value.className = "perf-monitor__graph-value";
+			value.textContent = "—";
+			overlay.append(head, value);
+			row.append(canvas, overlay);
+			this.hudGraphsEl.append(row);
+			const ctx = canvas.getContext("2d");
+			if (ctx) {
+				this.hudGraphs.set(config.metric, {
+					canvas,
+					ctx,
+					height: 0,
+					valueEl: value,
+					width: 0
+				});
+				this.resizeObserver.observe(row);
+			}
+		}
+		for (const config of NUMBERS) {
+			if (!selection.numbers.has(config.key)) continue;
+			const item = document.createElement("div");
+			item.className = "perf-monitor__hud-item";
+			const label = document.createElement("span");
+			label.className = "perf-monitor__hud-label";
+			label.title = METRIC_HELP[config.key] ?? "";
+			label.append(createIcon(config.icon, "perf-monitor__icon"), config.label);
+			const value = document.createElement("span");
+			value.className = "perf-monitor__hud-value";
+			value.textContent = "—";
+			item.append(label, value);
+			this.hudGridEl.append(item);
+			this.hudNumberEls.set(config.key, value);
+		}
+		this.applyBudgetTitles();
+		this.resizeCanvases();
+	}
+	onSelectionChanged() {
+		for (const [metric, checkbox] of this.graphCheckboxes) checkbox.checked = this.settings.isGraphEnabled(metric);
+		for (const [key, checkbox] of this.statCheckboxes) checkbox.checked = this.settings.isNumberEnabled(key);
+		this.infoCheckbox.checked = this.settings.info;
+		this.applyInfoClass();
+		this.theme.setOverride(this.settings.theme);
+		this.rebuildHud();
+	}
+	/** Repaint the palette and mark the radio matching what applies (pick, else consumer mode). */
+	onThemeChanged() {
+		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.showAllHidden();
+			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);
+		}
+		head.append(document.createElement("span"));
+		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";
+		const label = document.createElement("span");
+		label.className = "perf-monitor__label";
+		label.textContent = "report";
+		const button = document.createElement("button");
+		button.type = "button";
+		button.className = "perf-monitor__button";
+		button.title = "Copy versions, GPU and current metrics as Markdown for a bug report";
+		button.textContent = "copy";
+		let resetTimer = 0;
+		const flash = (text) => {
+			button.textContent = text;
+			window.clearTimeout(resetTimer);
+			resetTimer = window.setTimeout(() => {
+				button.textContent = "copy";
+			}, COPY_FEEDBACK_MS);
+		};
+		button.addEventListener("click", () => {
+			copyText(formatReport(this.monitor)).then((copied) => flash(copied ? "copied" : "failed"));
+		});
+		row.append(createIcon("clipboard", "perf-monitor__icon"), label, button);
+		return row;
+	}
+	buildCheckbox(checked, title, onChange) {
+		const checkbox = document.createElement("input");
+		checkbox.type = "checkbox";
+		checkbox.className = "perf-monitor__checkbox";
+		checkbox.checked = checked;
+		checkbox.title = title;
+		checkbox.setAttribute("aria-label", title);
+		checkbox.addEventListener("change", () => onChange(checkbox.checked));
+		return checkbox;
+	}
+	applyInfoClass() {
+		this.element.classList.toggle("perf-monitor--info", this.settings.info);
+	}
+	applyModeClass() {
+		this.element.classList.toggle("perf-monitor--compact", this.mode === "compact");
+		this.element.classList.toggle("perf-monitor--full", this.mode === "full");
+	}
+	resizeCanvases() {
+		const dpr = window.devicePixelRatio || 1;
+		const sizeAll = (graphs) => {
+			for (const graph of graphs) {
+				const { canvas, ctx } = graph;
+				const width = canvas.clientWidth;
+				const height = canvas.clientHeight;
+				if (width === 0 || height === 0) continue;
+				canvas.width = Math.round(width * dpr);
+				canvas.height = Math.round(height * dpr);
+				ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+				graph.width = width;
+				graph.height = height;
+			}
+		};
+		sizeAll(this.graphCanvases.values());
+		sizeAll(this.hudGraphs.values());
+	}
 };
 //#endregion
 //#region src/ui/mount-perf-hud.ts
-const TOUCH_LINGER_MS = 2500;
-const disc = (label, className, icon) => {
-	const button = document.createElement("button");
-	button.type = "button";
-	button.className = `perf-hud__disc ${className}`.trim();
-	button.setAttribute("aria-label", label);
-	button.title = label;
-	button.append(createIcon(icon, "perf-hud__icon"));
-	return button;
-};
 const mountPerfHud = (monitor, options = {}) => {
 	const storageKey = options.storageKey === void 0 ? DEFAULT_STORAGE_KEY : options.storageKey;
 	const settings = options.settings ?? new HudSettings({ storageKey });
 	const theme = new HudTheme(options.theme ?? "system");
-	const parent = options.parent ?? document.body;
-	if (options.injectStyles ?? true) injectStyles(parent.ownerDocument);
-	const host = document.createElement("div");
-	host.className = "perf-hud";
-	host.dataset.edge = "left";
-	host.setAttribute("aria-label", options.label ?? "Performance");
-	const hotspot = document.createElement("div");
-	hotspot.className = "perf-hud__hotspot";
-	hotspot.setAttribute("aria-hidden", "true");
-	const tools = document.createElement("div");
-	tools.className = "perf-hud__tools";
-	const grip = disc("Drag performance panel", "perf-hud__drag", "grip");
-	const toggle = disc("Toggle full performance metrics", "", "sliders");
-	const dim = disc("Dim the panel when the pointer leaves", "perf-hud__dim", "blend");
-	dim.addEventListener("click", () => settings.setDim(!settings.dim));
-	tools.append(grip, toggle, dim);
 	const view = new PerformanceView({
 		budgets: options.budgets,
 		mode: options.mode ?? "compact",
@@ -2153,74 +2543,39 @@ const mountPerfHud = (monitor, options = {}) => {
 		settings,
 		theme
 	});
-	host.append(hotspot, tools, view.element);
-	parent.append(host);
+	const panel = mountDevPanel({
+		brand: "three-meter",
+		content: view.element,
+		defaultPlacement: options.defaultPlacement,
+		dim: {
+			get: () => settings.dim,
+			set: (on) => settings.setDim(on),
+			subscribe: (listener) => settings.subscribe(listener)
+		},
+		injectStyles: options.injectStyles,
+		label: options.label ?? "Performance",
+		onToggle: () => setMode(view.getMode() === "compact" ? "full" : "compact"),
+		parent: options.parent,
+		storageKey,
+		theme,
+		toggleLabel: "Toggle full performance metrics"
+	});
+	const host = panel.element;
 	const applyMode = () => {
 		host.classList.toggle("perf-hud--full", view.getMode() === "full");
 	};
-	const applyDim = () => {
-		host.classList.toggle("perf-hud--dim", settings.dim);
-		dim.setAttribute("aria-pressed", String(settings.dim));
-		dim.title = `Dim on leave: ${settings.dim ? "on" : "off"}`;
-	};
-	applyMode();
-	applyDim();
-	applyTheme(host, theme);
-	const unsubscribe = settings.subscribe(applyDim);
-	const unsubscribeTheme = theme.subscribe(() => applyTheme(host, theme));
-	const dock = dockPanel(host, {
-		defaultPlacement: options.defaultPlacement,
-		handle: grip,
-		storageKey
-	});
 	const setMode = (mode) => {
 		view.setMode(mode);
 		applyMode();
-		requestAnimationFrame(() => dock.refresh());
-	};
-	toggle.addEventListener("click", () => {
-		setMode(view.getMode() === "compact" ? "full" : "compact");
-	});
-	let hideTimer = 0;
-	const sleep = () => {
-		if (host.classList.contains("is-dragging")) return;
-		host.classList.remove("is-awake");
-	};
-	const wake = (linger) => {
-		host.classList.add("is-awake");
-		window.clearTimeout(hideTimer);
-		if (linger) hideTimer = window.setTimeout(sleep, TOUCH_LINGER_MS);
-	};
-	const onEnter = () => {
-		wake(false);
-	};
-	const onLeave = (event) => {
-		if (host.contains(event.relatedTarget)) return;
-		if (event.pointerType === "touch" || event.pointerType === "pen") {
-			wake(true);
-			return;
-		}
-		sleep();
-	};
-	const onDown = (event) => {
-		wake(event.pointerType !== "mouse");
+		panel.refresh();
 	};
-	host.addEventListener("pointerenter", onEnter);
-	host.addEventListener("pointerleave", onLeave);
-	host.addEventListener("pointerdown", onDown);
+	applyMode();
 	view.start();
 	return {
 		dispose: () => {
-			window.clearTimeout(hideTimer);
-			host.removeEventListener("pointerenter", onEnter);
-			host.removeEventListener("pointerleave", onLeave);
-			host.removeEventListener("pointerdown", onDown);
-			unsubscribe();
-			unsubscribeTheme();
-			dock.dispose();
+			panel.dispose();
 			view.dispose();
 			theme.dispose();
-			host.remove();
 		},
 		element: host,
 		getMode: () => view.getMode(),
@@ -2234,6 +2589,6 @@ const mountPerfHud = (monitor, options = {}) => {
 	};
 };
 //#endregion
-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 };
+export { PERF_HUD_STYLES as a, DEFAULT_STORAGE_KEY as c, THEME_MODES as d, isThemeMode as f, mountDevPanel as i, HudSettings as l, PerformanceView as n, injectStyles as o, resolveBudgets as p, formatReport as r, dockPanel as s, mountPerfHud as t, HudTheme as u };
 
-//# sourceMappingURL=mount-perf-hud-BL84ddLm.js.map
+//# sourceMappingURL=mount-perf-hud-DZKJ1L3J.js.map