@zkmake/three-meter 0.1.0

package/dist/mount-perf-hud-CduRNym5.js

@@ -0,0 +1,1176 @@
+//#region src/ui/hud-settings.ts
+const DEFAULT_STORAGE_KEY = "three-meter";
+const DEFAULT_DIM = false;
+const DEFAULT_NUMBERS = [
+	"fps",
+	"calls",
+	"cpu",
+	"gpu"
+];
+const DEFAULT_GRAPHS = [];
+const TIMING_METRICS = /* @__PURE__ */ new Set([
+	"fps",
+	"cpu",
+	"gpu"
+]);
+const isTimingMetric = (value) => TIMING_METRICS.has(value);
+var HudSettings = class {
+	storageKey;
+	defaults;
+	listeners = /* @__PURE__ */ new Set();
+	state;
+	constructor(options = {}) {
+		this.storageKey = options.storageKey === void 0 ? DEFAULT_STORAGE_KEY : options.storageKey;
+		this.defaults = {
+			dim: options.defaults?.dim ?? DEFAULT_DIM,
+			graphs: options.defaults?.graphs ?? DEFAULT_GRAPHS,
+			numbers: options.defaults?.numbers ?? DEFAULT_NUMBERS
+		};
+		this.state = this.load();
+	}
+	get selection() {
+		return this.state;
+	}
+	get dim() {
+		return this.state.dim;
+	}
+	setDim(enabled) {
+		this.state.dim = enabled;
+		this.persistAndNotify();
+	}
+	isNumberEnabled(key) {
+		return this.state.numbers.has(key);
+	}
+	isGraphEnabled(metric) {
+		return this.state.graphs.has(metric);
+	}
+	setNumberEnabled(key, enabled) {
+		if (enabled) this.state.numbers.add(key);
+		else this.state.numbers.delete(key);
+		this.persistAndNotify();
+	}
+	setGraphEnabled(metric, enabled) {
+		if (enabled) this.state.graphs.add(metric);
+		else this.state.graphs.delete(metric);
+		this.persistAndNotify();
+	}
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+	load() {
+		const fallback = () => ({
+			dim: this.defaults.dim,
+			graphs: new Set(this.defaults.graphs),
+			numbers: new Set(this.defaults.numbers)
+		});
+		if (this.storageKey === null) return fallback();
+		try {
+			const raw = localStorage.getItem(this.storageKey);
+			if (!raw) return fallback();
+			const parsed = JSON.parse(raw);
+			return {
+				dim: parsed.dim ?? this.defaults.dim,
+				graphs: new Set((parsed.graphs ?? this.defaults.graphs).filter(isTimingMetric)),
+				numbers: new Set(parsed.numbers ?? this.defaults.numbers)
+			};
+		} catch {
+			return fallback();
+		}
+	}
+	persistAndNotify() {
+		if (this.storageKey !== null) try {
+			localStorage.setItem(this.storageKey, JSON.stringify({
+				dim: this.state.dim,
+				graphs: [...this.state.graphs],
+				numbers: [...this.state.numbers]
+			}));
+		} catch {}
+		for (const listener of this.listeners) listener();
+	}
+};
+//#endregion
+//#region src/ui/dock-panel.ts
+/**
+* Dock a fixed-position panel to a screen edge. Dragging the handle snaps it
+* to the nearest edge on drop; the edge and the offset along it persist under
+* `<storageKey>:placement`. A stored box whose centre sits outside the current
+* viewport is re-docked to whichever edge that box is closest to.
+*/
+const INSET = 10;
+/** Room for the stacked control discs on the inward side of the panel. */
+const SIDE_CLEARANCE = 26;
+const EDGES = [
+	"left",
+	"right",
+	"top",
+	"bottom"
+];
+const viewportBox = () => ({
+	height: window.innerHeight,
+	left: 0,
+	top: 0,
+	width: window.innerWidth
+});
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const panelBox = (element) => {
+	const rect = element.getBoundingClientRect();
+	return {
+		height: rect.height || element.offsetHeight,
+		left: rect.left,
+		top: rect.top,
+		width: rect.width || element.offsetWidth
+	};
+};
+const clampAlong = (edge, along, view, panel) => {
+	if (edge === "left" || edge === "right") return clamp(along, INSET, Math.max(INSET, view.height - panel.height - INSET));
+	return clamp(along, INSET, Math.max(INSET, view.width - panel.width - INSET - SIDE_CLEARANCE));
+};
+const ghostBox = (placement, panel, view) => {
+	switch (placement.edge) {
+		case "left": return {
+			height: panel.height,
+			left: INSET,
+			top: placement.along,
+			width: panel.width
+		};
+		case "right": return {
+			height: panel.height,
+			left: view.width - INSET - panel.width,
+			top: placement.along,
+			width: panel.width
+		};
+		case "top": return {
+			height: panel.height,
+			left: placement.along,
+			top: INSET,
+			width: panel.width
+		};
+		case "bottom": return {
+			height: panel.height,
+			left: placement.along,
+			top: view.height - INSET - panel.height,
+			width: panel.width
+		};
+	}
+};
+const centerOutside = (box, view) => {
+	const x = box.left + box.width / 2;
+	const y = box.top + box.height / 2;
+	return x < 0 || y < 0 || x > view.width || y > view.height;
+};
+const snapBoxToEdge = (box, view) => {
+	const distances = {
+		bottom: view.height - (box.top + box.height),
+		left: box.left,
+		right: view.width - (box.left + box.width),
+		top: box.top
+	};
+	let edge = "left";
+	let nearest = Number.POSITIVE_INFINITY;
+	for (const next of EDGES) if (distances[next] < nearest) {
+		nearest = distances[next];
+		edge = next;
+	}
+	const along = edge === "left" || edge === "right" ? box.top : box.left;
+	return {
+		along: Math.round(clampAlong(edge, along, view, box)),
+		edge
+	};
+};
+const initialPlacement = (preset, view, panel) => {
+	const { edge } = preset;
+	const vertical = edge === "left" || edge === "right";
+	const span = vertical ? view.height : view.width;
+	const size = vertical ? panel.height : panel.width;
+	const along = preset.align === "start" ? 0 : preset.align === "end" ? span - size : (span - size) / 2;
+	return {
+		along: Math.round(clampAlong(edge, along, view, panel)),
+		edge
+	};
+};
+const isEdge = (value) => typeof value === "string" && EDGES.includes(value);
+const readPlacement = (key) => {
+	if (key === null) return null;
+	try {
+		const raw = localStorage.getItem(key);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		if (typeof parsed.along !== "number" || !Number.isFinite(parsed.along) || !isEdge(parsed.edge)) return null;
+		return {
+			along: parsed.along,
+			edge: parsed.edge
+		};
+	} catch {
+		return null;
+	}
+};
+const writePlacement = (key, placement) => {
+	if (key === null) return;
+	try {
+		localStorage.setItem(key, JSON.stringify(placement));
+	} catch {}
+};
+const resolvePlacement = (stored, preset, panel, view) => {
+	if (!stored) return initialPlacement(preset, view, panel);
+	const ghost = ghostBox(stored, panel, view);
+	if (centerOutside(ghost, view)) return snapBoxToEdge(ghost, view);
+	return {
+		along: Math.round(clampAlong(stored.edge, stored.along, view, panel)),
+		edge: stored.edge
+	};
+};
+const paintPlacement = (element, placement) => {
+	element.dataset.edge = placement.edge;
+	element.style.left = "";
+	element.style.right = "";
+	element.style.top = "";
+	element.style.bottom = "";
+	element.style.transform = "";
+	switch (placement.edge) {
+		case "left":
+			element.style.left = `${INSET}px`;
+			element.style.top = `${placement.along}px`;
+			break;
+		case "right":
+			element.style.right = `${INSET}px`;
+			element.style.top = `${placement.along}px`;
+			break;
+		case "top":
+			element.style.top = `${INSET}px`;
+			element.style.left = `${placement.along}px`;
+			break;
+		case "bottom":
+			element.style.bottom = `${INSET}px`;
+			element.style.left = `${placement.along}px`;
+	}
+};
+/**
+* Dock `element` from storage (or the left centre), re-dock on resize, and
+* snap to the nearest edge when the handle drops.
+*/
+const dockPanel = (element, options = {}) => {
+	const baseKey = options.storageKey === void 0 ? DEFAULT_STORAGE_KEY : options.storageKey;
+	const key = baseKey === null ? null : `${baseKey}:placement`;
+	const handle = options.handle ?? null;
+	const preset = options.defaultPlacement ?? { edge: "left" };
+	const apply = () => {
+		const stored = readPlacement(key);
+		const view = viewportBox();
+		if (element.classList.contains("is-dragging")) return stored ?? initialPlacement(preset, view, panelBox(element));
+		const panel = panelBox(element);
+		if (panel.width === 0 || panel.height === 0) return stored ?? initialPlacement(preset, view, panel);
+		const next = resolvePlacement(stored, preset, panel, view);
+		paintPlacement(element, next);
+		if (!stored || stored.edge !== next.edge || stored.along !== next.along) writePlacement(key, next);
+		return next;
+	};
+	apply();
+	requestAnimationFrame(apply);
+	const onResize = () => apply();
+	window.addEventListener("resize", onResize);
+	const resizeObserver = new ResizeObserver(() => apply());
+	resizeObserver.observe(element);
+	const disposeBase = () => {
+		window.removeEventListener("resize", onResize);
+		resizeObserver.disconnect();
+	};
+	if (!handle) return {
+		dispose: disposeBase,
+		refresh: apply
+	};
+	let pointerId = null;
+	let originX = 0;
+	let originY = 0;
+	let grabX = 0;
+	let grabY = 0;
+	let dragging = false;
+	const finish = (event) => {
+		if (pointerId !== event.pointerId) return;
+		if (dragging) {
+			const next = snapBoxToEdge(panelBox(element), viewportBox());
+			paintPlacement(element, next);
+			writePlacement(key, next);
+		}
+		dragging = false;
+		pointerId = null;
+		element.classList.remove("is-dragging");
+		try {
+			handle.releasePointerCapture(event.pointerId);
+		} catch {}
+	};
+	const onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		const box = panelBox(element);
+		pointerId = event.pointerId;
+		originX = event.clientX;
+		originY = event.clientY;
+		grabX = event.clientX - box.left;
+		grabY = event.clientY - box.top;
+		dragging = false;
+		handle.setPointerCapture(event.pointerId);
+	};
+	const onPointerMove = (event) => {
+		if (pointerId !== event.pointerId) return;
+		const dx = event.clientX - originX;
+		const dy = event.clientY - originY;
+		if (!dragging && dx * dx + dy * dy < 16) return;
+		dragging = true;
+		element.classList.add("is-dragging");
+		element.style.right = "";
+		element.style.bottom = "";
+		element.style.transform = "";
+		element.style.left = `${event.clientX - grabX}px`;
+		element.style.top = `${event.clientY - grabY}px`;
+	};
+	handle.addEventListener("pointerdown", onPointerDown);
+	handle.addEventListener("pointermove", onPointerMove);
+	handle.addEventListener("pointerup", finish);
+	handle.addEventListener("pointercancel", finish);
+	return {
+		dispose: () => {
+			disposeBase();
+			handle.removeEventListener("pointerdown", onPointerDown);
+			handle.removeEventListener("pointermove", onPointerMove);
+			handle.removeEventListener("pointerup", finish);
+			handle.removeEventListener("pointercancel", finish);
+		},
+		refresh: apply
+	};
+};
+//#endregion
+//#region src/ui/icons.ts
+const ICON_MARKUP = {
+	blend: "<circle cx=\"9\" cy=\"9\" r=\"7\"/><circle cx=\"15\" cy=\"15\" r=\"7\"/>",
+	grip: "<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/><circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>",
+	sliders: "<line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\"/><line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\"/><line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\"/><line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\"/><line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\"/><line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\"/>"
+};
+const createIcon = (name, className) => {
+	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	svg.setAttribute("viewBox", "0 0 24 24");
+	svg.setAttribute("fill", "none");
+	svg.setAttribute("stroke", "currentColor");
+	svg.setAttribute("stroke-width", "2");
+	svg.setAttribute("stroke-linecap", "round");
+	svg.setAttribute("stroke-linejoin", "round");
+	svg.setAttribute("aria-hidden", "true");
+	svg.setAttribute("class", className);
+	svg.innerHTML = ICON_MARKUP[name];
+	return svg;
+};
+//#endregion
+//#region src/ui/sparkline.ts
+function drawSparkline(ctx, width, height, values, style) {
+	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();
+}
+//#endregion
+//#region src/ui/performance-view.ts
+const TIMINGS = [
+	{
+		format: (value) => Math.round(value).toString(),
+		label: "FPS",
+		metric: "fps",
+		style: {
+			fill: "rgba(74, 222, 128, 0.15)",
+			stroke: "#4ade80"
+		},
+		unit: ""
+	},
+	{
+		format: (value) => value.toFixed(1),
+		label: "CPU",
+		metric: "cpu",
+		style: {
+			fill: "rgba(96, 165, 250, 0.15)",
+			stroke: "#60a5fa"
+		},
+		unit: "ms"
+	},
+	{
+		format: (value) => value.toFixed(1),
+		label: "GPU",
+		metric: "gpu",
+		style: {
+			fill: "rgba(244, 114, 182, 0.15)",
+			stroke: "#f472b6"
+		},
+		unit: "ms"
+	}
+];
+const formatCount = (value) => value.toLocaleString("en-US");
+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 NUMBERS = [
+	{
+		key: "fps",
+		label: "FPS",
+		read: (sample) => Math.round(sample.fps).toString()
+	},
+	{
+		key: "calls",
+		label: "Calls",
+		read: (sample) => formatCount(sample.render.calls)
+	},
+	{
+		key: "cpu",
+		label: "CPU",
+		read: (sample) => sample.cpu.toFixed(1)
+	},
+	{
+		key: "gpu",
+		label: "GPU",
+		read: (sample) => sample.gpu.available ? sample.gpu.ms.toFixed(1) : "—"
+	},
+	{
+		key: "triangles",
+		label: "Triangles",
+		read: (sample) => formatCount(sample.render.triangles)
+	},
+	{
+		key: "lines",
+		label: "Lines",
+		read: (sample) => formatCount(sample.render.lines)
+	},
+	{
+		key: "points",
+		label: "Points",
+		read: (sample) => formatCount(sample.render.points)
+	},
+	{
+		key: "passes",
+		label: "Render passes",
+		read: (sample) => formatCount(sample.render.passes)
+	},
+	{
+		key: "geometries",
+		label: "Geometries",
+		read: (sample) => formatCount(sample.resources.geometries)
+	},
+	{
+		key: "textures",
+		label: "Textures",
+		read: (sample) => formatCount(sample.resources.textures)
+	},
+	{
+		key: "shaders",
+		label: "Shaders",
+		read: (sample) => formatCount(sample.resources.programs)
+	}
+];
+/**
+* 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;
+	monitor;
+	minIntervalMs;
+	mode;
+	graphValueEls = /* @__PURE__ */ new Map();
+	graphCanvases = /* @__PURE__ */ new Map();
+	graphCheckboxes = /* @__PURE__ */ new Map();
+	statValueEls = /* @__PURE__ */ new Map();
+	statCheckboxes = /* @__PURE__ */ new Map();
+	dimCheckbox;
+	hudGraphsEl;
+	hudGridEl;
+	hudGraphs = /* @__PURE__ */ new Map();
+	hudNumberEls = /* @__PURE__ */ new Map();
+	rafId = null;
+	lastPaintAt = 0;
+	resizeObserver;
+	unsubscribe;
+	constructor(options) {
+		this.monitor = options.monitor;
+		this.settings = options.settings ?? new HudSettings();
+		this.mode = options.mode ?? "full";
+		this.minIntervalMs = 1e3 / (options.refreshHz ?? 10);
+		this.element = document.createElement("div");
+		this.element.className = "perf-monitor";
+		this.applyModeClass();
+		this.resizeObserver = new ResizeObserver(() => this.resizeCanvases());
+		this.build();
+		this.rebuildHud();
+		this.unsubscribe = this.settings.subscribe(() => this.onSelectionChanged());
+	}
+	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;
+	}
+	dispose() {
+		this.stop();
+		this.unsubscribe();
+		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);
+			return;
+		}
+		for (const config of TIMINGS) {
+			const available = isTimingAvailable(sample, config.metric);
+			const valueEl = this.graphValueEls.get(config.metric);
+			valueEl.textContent = available ? this.formatTiming(config, readTiming(sample, config.metric)) : "unavailable";
+			const graph = this.graphCanvases.get(config.metric);
+			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(config.metric) : [], config.style);
+		}
+		for (const config of NUMBERS) this.statValueEls.get(config.key).textContent = config.read(sample);
+	}
+	renderHud(sample) {
+		for (const [key, element] of this.hudNumberEls) {
+			const config = NUMBERS.find((number) => number.key === key);
+			if (config) element.textContent = config.read(sample);
+		}
+		for (const [metric, graph] of this.hudGraphs) {
+			const config = TIMINGS.find((timing) => timing.metric === metric);
+			const available = isTimingAvailable(sample, metric);
+			graph.valueEl.textContent = available ? this.formatTiming(config, readTiming(sample, metric)) : "—";
+			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(metric) : [], config.style);
+		}
+	}
+	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 dimRow = document.createElement("label");
+		dimRow.className = "perf-monitor__row";
+		this.dimCheckbox = this.buildCheckbox(this.settings.dim, "Dim the performance panel when the pointer leaves", (on) => this.settings.setDim(on));
+		const dimLabel = document.createElement("span");
+		dimLabel.className = "perf-monitor__label";
+		dimLabel.textContent = "dim on leave";
+		dimRow.append(this.dimCheckbox, createIcon("blend", "perf-monitor__icon"), dimLabel);
+		options.append(dimRow);
+		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("div");
+			overlay.className = "perf-monitor__graph-overlay";
+			const head = document.createElement("label");
+			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;
+			const value = document.createElement("span");
+			value.className = "perf-monitor__graph-value";
+			value.textContent = "—";
+			this.graphValueEls.set(config.metric, value);
+			head.append(checkbox, label);
+			overlay.append(head, value);
+			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 label = document.createElement("span");
+			label.className = "perf-monitor__label";
+			label.textContent = config.label;
+			const value = document.createElement("span");
+			value.className = "perf-monitor__value";
+			value.textContent = "—";
+			this.statValueEls.set(config.key, value);
+			rowEl.append(checkbox, label, value);
+			stats.append(rowEl);
+		}
+		this.element.append(hud, options, graphs, stats);
+	}
+	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;
+			const value = document.createElement("span");
+			value.className = "perf-monitor__graph-value";
+			value.textContent = "—";
+			overlay.append(label, 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.textContent = 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.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.dimCheckbox.checked = this.settings.dim;
+		this.rebuildHud();
+	}
+	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;
+	}
+	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.
+*/
+const STYLE_ATTRIBUTE = "data-three-meter";
+const PERF_HUD_STYLES = `
+.perf-monitor {
+  --perf-bg: #16181d;
+  --perf-fg: #e6e8eb;
+  --perf-muted: #8b909a;
+  --perf-row: rgba(255, 255, 255, 0.04);
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--perf-fg);
+}
+
+.perf-monitor__graphs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.perf-monitor__graph {
+  position: relative;
+  height: 40px;
+  background: var(--perf-row);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.perf-monitor__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.perf-monitor__graph-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  pointer-events: none;
+}
+
+.perf-monitor__graph-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.perf-monitor__graph-overlay .perf-monitor__graph-head {
+  pointer-events: auto;
+}
+
+.perf-monitor__graph-label {
+  color: var(--perf-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 10px;
+}
+
+.perf-monitor__graph-value {
+  min-width: 6ch;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+}
+
+.perf-monitor__section {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.perf-monitor__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.perf-monitor__row:nth-child(even) {
+  background: var(--perf-row);
+}
+
+.perf-monitor__label {
+  flex: 1;
+  color: var(--perf-muted);
+}
+
+.perf-monitor__icon {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  color: var(--perf-muted);
+}
+
+.perf-monitor__options {
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.perf-monitor__checkbox {
+  flex: none;
+  margin: 0;
+  width: 12px;
+  height: 12px;
+  accent-color: #60a5fa;
+  cursor: pointer;
+}
+
+.perf-monitor__value {
+  min-width: 7ch;
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+}
+
+.perf-monitor__hud {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 2px;
+}
+
+.perf-monitor__hud-graphs {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.perf-monitor__hud-graphs:empty {
+  display: none;
+}
+
+.perf-monitor__hud-graph {
+  position: relative;
+  height: 28px;
+  background: var(--perf-row);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.perf-monitor__hud-grid {
+  display: grid;
+  grid-template-columns: auto 6ch auto 6ch;
+  align-items: baseline;
+  gap: 2px 8px;
+}
+
+.perf-monitor__hud-grid:empty {
+  display: none;
+}
+
+.perf-monitor__hud-item {
+  display: contents;
+}
+
+.perf-monitor__hud-label {
+  color: var(--perf-muted);
+  font-size: 10px;
+}
+
+.perf-monitor__hud-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+}
+
+.perf-monitor--full .perf-monitor__hud {
+  display: none;
+}
+
+.perf-monitor--compact .perf-monitor__graphs,
+.perf-monitor--compact .perf-monitor__section {
+  display: none;
+}
+
+.perf-monitor--compact {
+  padding: 4px 8px;
+}
+
+.perf-hud {
+  position: fixed;
+  z-index: 9999;
+  /* Safari resolves width:100% canvases against the viewport on a fixed
+     host with auto width. Shrink-wrap so expand stays a card, not the window. */
+  width: max-content;
+  max-width: min(20rem, calc(100vw - 48px));
+  overflow: visible;
+  background: transparent;
+  pointer-events: none;
+  user-select: none;
+  touch-action: none;
+}
+
+.perf-hud--full > .perf-monitor {
+  width: 16rem;
+  max-width: 100%;
+}
+
+.perf-hud > .perf-monitor {
+  position: relative;
+  z-index: 1;
+  max-height: 70vh;
+  overflow: auto;
+  background: rgba(22, 24, 29, 0.85);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+  backdrop-filter: blur(2px);
+  pointer-events: auto;
+  transition: opacity 0.25s ease;
+}
+
+.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {
+  opacity: 0.32;
+}
+
+.perf-hud__hotspot {
+  position: absolute;
+  z-index: 0;
+  inset: -20px;
+  pointer-events: auto;
+}
+
+.perf-hud:not([data-edge="right"]) .perf-hud__hotspot {
+  right: -46px;
+}
+
+.perf-hud[data-edge="right"] .perf-hud__hotspot {
+  left: -46px;
+}
+
+.perf-hud__tools {
+  position: absolute;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+
+.perf-hud.is-awake .perf-hud__tools,
+.perf-hud.is-dragging .perf-hud__tools {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Inward side: right by default, left when docked to the right edge. */
+.perf-hud:not([data-edge="right"]) .perf-hud__tools {
+  left: calc(100% + 6px);
+}
+
+.perf-hud[data-edge="right"] .perf-hud__tools {
+  right: calc(100% + 6px);
+}
+
+.perf-hud__disc {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgba(22, 24, 29, 0.85);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+  color: #c5c8ce;
+  cursor: pointer;
+  backdrop-filter: blur(2px);
+}
+
+.perf-hud__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.perf-hud__drag {
+  cursor: grab;
+}
+
+.perf-hud.is-dragging .perf-hud__drag {
+  cursor: grabbing;
+}
+
+.perf-hud__disc:hover,
+.perf-hud__disc:focus-visible,
+.perf-hud__disc[aria-pressed="true"] {
+  color: #e6e8eb;
+  outline: 1px solid rgba(96, 165, 250, 0.6);
+  outline-offset: 1px;
+}
+`;
+/**
+* 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/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.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 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");
+	tools.append(grip, toggle);
+	const view = new PerformanceView({
+		mode: options.mode ?? "compact",
+		monitor,
+		refreshHz: options.refreshHz,
+		settings
+	});
+	host.append(hotspot, tools, view.element);
+	parent.append(host);
+	const applyMode = () => {
+		host.classList.toggle("perf-hud--full", view.getMode() === "full");
+	};
+	const applyDim = () => {
+		host.classList.toggle("perf-hud--dim", settings.dim);
+	};
+	applyMode();
+	applyDim();
+	const unsubscribe = settings.subscribe(applyDim);
+	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");
+	};
+	host.addEventListener("pointerenter", onEnter);
+	host.addEventListener("pointerleave", onLeave);
+	host.addEventListener("pointerdown", onDown);
+	view.start();
+	return {
+		dispose: () => {
+			window.clearTimeout(hideTimer);
+			host.removeEventListener("pointerenter", onEnter);
+			host.removeEventListener("pointerleave", onLeave);
+			host.removeEventListener("pointerdown", onDown);
+			unsubscribe();
+			dock.dispose();
+			view.dispose();
+			host.remove();
+		},
+		element: host,
+		getMode: () => view.getMode(),
+		setMode,
+		settings,
+		view
+	};
+};
+//#endregion
+export { dockPanel as a, PerformanceView as i, PERF_HUD_STYLES as n, DEFAULT_STORAGE_KEY as o, injectStyles as r, HudSettings as s, mountPerfHud as t };
+
+//# sourceMappingURL=mount-perf-hud-CduRNym5.js.map