@zkmake/three-meter 0.1.1 → 0.3.0

package/dist/{mount-perf-hud-CduRNym5.js → mount-perf-hud-CZNSZVYn.js}

@@ -1,3 +1,90 @@
+//#region src/ui/theme.ts
+const THEME_MODES = [
+	"dark",
+	"light",
+	"system"
+];
+const DARK_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+const isThemeMode = (value) => typeof value === "string" && THEME_MODES.includes(value);
+var HudTheme = class {
+	current;
+	userPick = null;
+	listeners = /* @__PURE__ */ new Set();
+	media = null;
+	onSchemeChange = () => this.notify();
+	constructor(mode = "system") {
+		this.current = mode;
+		this.watch();
+	}
+	/** What the consumer asked for. */
+	get mode() {
+		return this.current;
+	}
+	/** What the person using the HUD picked in the panel, or `null` for no pick. */
+	get override() {
+		return this.userPick;
+	}
+	/** The layer that applies: the user's pick if there is one, else the consumer's mode. */
+	get effective() {
+		return this.userPick ?? this.current;
+	}
+	/**
+	* `dark` or `light`, with `system` resolved against the OS preference.
+	* Where `matchMedia` is missing, `system` falls back to `dark`, the HUD's
+	* original palette.
+	*/
+	get resolved() {
+		const effective = this.effective;
+		if (effective !== "system") return effective;
+		if (!this.media) return "dark";
+		return this.media.matches ? "dark" : "light";
+	}
+	setMode(mode) {
+		if (mode === this.current) return;
+		this.current = mode;
+		this.watch();
+		this.notify();
+	}
+	setOverride(mode) {
+		if (mode === this.userPick) return;
+		this.userPick = mode;
+		this.watch();
+		this.notify();
+	}
+	/** Fires on `setMode`, `setOverride` and, in `system`, whenever the OS preference flips. */
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+	/** Stop tracking the OS preference and drop every subscriber. */
+	dispose() {
+		this.unwatch();
+		this.listeners.clear();
+	}
+	watch() {
+		if (this.effective !== "system") {
+			this.unwatch();
+			return;
+		}
+		if (this.media || typeof matchMedia !== "function") return;
+		this.media = matchMedia(DARK_SCHEME_QUERY);
+		this.media.addEventListener("change", this.onSchemeChange);
+	}
+	unwatch() {
+		this.media?.removeEventListener("change", this.onSchemeChange);
+		this.media = null;
+	}
+	notify() {
+		for (const listener of this.listeners) listener();
+	}
+};
+/** Paint the resolved theme onto an element for the stylesheet to key off. */
+const applyTheme = (element, theme) => {
+	element.dataset.theme = theme.resolved;
+};
+//#endregion
 //#region src/ui/hud-settings.ts
 const DEFAULT_STORAGE_KEY = "three-meter";
 const DEFAULT_DIM = false;
@@ -38,6 +125,14 @@ var HudSettings = class {
 		this.state.dim = enabled;
 		this.persistAndNotify();
 	}
+	/** The user's pick in the panel; `null` means none, so the consumer's option applies. */
+	get theme() {
+		return this.state.theme;
+	}
+	setTheme(mode) {
+		this.state.theme = mode;
+		this.persistAndNotify();
+	}
 	isNumberEnabled(key) {
 		return this.state.numbers.has(key);
 	}
@@ -64,7 +159,8 @@ var HudSettings = class {
 		const fallback = () => ({
 			dim: this.defaults.dim,
 			graphs: new Set(this.defaults.graphs),
-			numbers: new Set(this.defaults.numbers)
+			numbers: new Set(this.defaults.numbers),
+			theme: null
 		});
 		if (this.storageKey === null) return fallback();
 		try {
@@ -74,7 +170,8 @@ var HudSettings = class {
 			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)
+				numbers: new Set(parsed.numbers ?? this.defaults.numbers),
+				theme: isThemeMode(parsed.theme) ? parsed.theme : null
 			};
 		} catch {
 			return fallback();
@@ -85,7 +182,8 @@ var HudSettings = class {
 			localStorage.setItem(this.storageKey, JSON.stringify({
 				dim: this.state.dim,
 				graphs: [...this.state.graphs],
-				numbers: [...this.state.numbers]
+				numbers: [...this.state.numbers],
+				theme: this.state.theme ?? void 0
 			}));
 		} catch {}
 		for (const listener of this.listeners) listener();
@@ -344,7 +442,11 @@ const dockPanel = (element, options = {}) => {
 //#region src/ui/icons.ts
 const ICON_MARKUP = {
 	blend: "<circle cx=\"9\" cy=\"9\" r=\"7\"/><circle cx=\"15\" cy=\"15\" r=\"7\"/>",
+	contrast: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 18a6 6 0 0 0 0-12v12z\"/>",
 	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\"/>",
+	monitor: "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/>",
+	moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>",
+	sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/><path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/><path d=\"M2 12h2\"/><path d=\"M20 12h2\"/><path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>",
 	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) => {
@@ -390,8 +492,14 @@ const TIMINGS = [
 		label: "FPS",
 		metric: "fps",
 		style: {
-			fill: "rgba(74, 222, 128, 0.15)",
-			stroke: "#4ade80"
+			dark: {
+				fill: "rgba(74, 222, 128, 0.15)",
+				stroke: "#4ade80"
+			},
+			light: {
+				fill: "rgba(22, 163, 74, 0.12)",
+				stroke: "#16a34a"
+			}
 		},
 		unit: ""
 	},
@@ -400,8 +508,14 @@ const TIMINGS = [
 		label: "CPU",
 		metric: "cpu",
 		style: {
-			fill: "rgba(96, 165, 250, 0.15)",
-			stroke: "#60a5fa"
+			dark: {
+				fill: "rgba(96, 165, 250, 0.15)",
+				stroke: "#60a5fa"
+			},
+			light: {
+				fill: "rgba(37, 99, 235, 0.12)",
+				stroke: "#2563eb"
+			}
 		},
 		unit: "ms"
 	},
@@ -410,12 +524,35 @@ const TIMINGS = [
 		label: "GPU",
 		metric: "gpu",
 		style: {
-			fill: "rgba(244, 114, 182, 0.15)",
-			stroke: "#f472b6"
+			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"
+	}
+];
 const formatCount = (value) => value.toLocaleString("en-US");
 const readTiming = (sample, metric) => {
 	switch (metric) {
@@ -491,6 +628,9 @@ const NUMBERS = [
 var PerformanceView = class {
 	element;
 	settings;
+	theme;
+	ownsTheme;
+	unsubscribeTheme;
 	monitor;
 	minIntervalMs;
 	mode;
@@ -500,6 +640,7 @@ var PerformanceView = class {
 	statValueEls = /* @__PURE__ */ new Map();
 	statCheckboxes = /* @__PURE__ */ new Map();
 	dimCheckbox;
+	themeRadios = /* @__PURE__ */ new Map();
 	hudGraphsEl;
 	hudGridEl;
 	hudGraphs = /* @__PURE__ */ new Map();
@@ -511,6 +652,9 @@ var PerformanceView = class {
 	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.element = document.createElement("div");
@@ -519,7 +663,9 @@ var PerformanceView = class {
 		this.resizeObserver = new ResizeObserver(() => this.resizeCanvases());
 		this.build();
 		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);
@@ -542,6 +688,8 @@ var PerformanceView = class {
 	dispose() {
 		this.stop();
 		this.unsubscribe();
+		this.unsubscribeTheme();
+		if (this.ownsTheme) this.theme.dispose();
 		this.resizeObserver.disconnect();
 		this.element.remove();
 	}
@@ -562,7 +710,7 @@ var PerformanceView = class {
 			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);
+			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(config.metric) : [], config.style[this.theme.resolved]);
 		}
 		for (const config of NUMBERS) this.statValueEls.get(config.key).textContent = config.read(sample);
 	}
@@ -575,7 +723,7 @@ var PerformanceView = class {
 			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);
+			drawSparkline(graph.ctx, graph.width, graph.height, available ? this.monitor.getHistory(metric) : [], config.style[this.theme.resolved]);
 		}
 	}
 	formatTiming(config, value) {
@@ -591,14 +739,37 @@ var PerformanceView = class {
 		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 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);
+		dimRow.append(createIcon("blend", "perf-monitor__icon"), dimLabel, this.dimCheckbox);
+		options.append(themeRow, dimRow);
 		const graphs = document.createElement("div");
 		graphs.className = "perf-monitor__graphs";
 		for (const config of TIMINGS) {
@@ -709,8 +880,14 @@ var PerformanceView = class {
 		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.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));
+	}
 	buildCheckbox(checked, title, onChange) {
 		const checkbox = document.createElement("input");
 		checkbox.type = "checkbox";
@@ -751,15 +928,42 @@ var PerformanceView = class {
 * 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: #16181d;
+  --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-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+
+  color-scheme: dark;
+}
+
+.perf-hud[data-theme="light"],
+.perf-monitor[data-theme="light"] {
+  --perf-bg: rgba(250, 250, 252, 0.88);
+  --perf-fg: #1a1c21;
+  --perf-fg-dim: #4b5058;
+  --perf-muted: #6b7079;
+  --perf-row: rgba(0, 0, 0, 0.05);
+  --perf-border: rgba(0, 0, 0, 0.12);
+  --perf-accent: #2563eb;
+  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
 
+  color-scheme: light;
+}
+
+.perf-monitor {
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -858,7 +1062,55 @@ const PERF_HUD_STYLES = `
 
 .perf-monitor__options {
   padding-bottom: 8px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  border-bottom: 1px solid var(--perf-border);
+}
+
+.perf-monitor__row--static {
+  cursor: default;
+}
+
+/* Light / system / dark, as a small segmented radio group. */
+.perf-monitor__segment {
+  display: inline-flex;
+  flex: none;
+  gap: 1px;
+  padding: 1px;
+  border-radius: 4px;
+  background: var(--perf-row);
+}
+
+.perf-monitor__segment-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--perf-muted);
+  cursor: pointer;
+}
+
+.perf-monitor__segment-option:hover {
+  color: var(--perf-fg);
+}
+
+.perf-monitor__segment-option[aria-checked="true"] {
+  color: var(--perf-fg);
+  background: var(--perf-border);
+}
+
+.perf-monitor__segment-option:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: 1px;
+}
+
+.perf-monitor__segment-option .perf-monitor__icon {
+  width: 11px;
+  height: 11px;
+  color: inherit;
 }
 
 .perf-monitor__checkbox {
@@ -866,7 +1118,7 @@ const PERF_HUD_STYLES = `
   margin: 0;
   width: 12px;
   height: 12px;
-  accent-color: #60a5fa;
+  accent-color: var(--perf-accent);
   cursor: pointer;
 }
 
@@ -964,9 +1216,9 @@ const PERF_HUD_STYLES = `
   z-index: 1;
   max-height: 70vh;
   overflow: auto;
-  background: rgba(22, 24, 29, 0.85);
+  background: var(--perf-bg);
   border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+  box-shadow: var(--perf-shadow);
   backdrop-filter: blur(2px);
   pointer-events: auto;
   transition: opacity 0.25s ease;
@@ -1027,9 +1279,9 @@ const PERF_HUD_STYLES = `
   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;
+  background: var(--perf-bg);
+  box-shadow: var(--perf-shadow);
+  color: var(--perf-fg-dim);
   cursor: pointer;
   backdrop-filter: blur(2px);
 }
@@ -1050,8 +1302,8 @@ const PERF_HUD_STYLES = `
 .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);
+  color: var(--perf-fg);
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
   outline-offset: 1px;
 }
 `;
@@ -1080,6 +1332,7 @@ const disc = (label, className, icon) => {
 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");
@@ -1098,7 +1351,8 @@ const mountPerfHud = (monitor, options = {}) => {
 		mode: options.mode ?? "compact",
 		monitor,
 		refreshHz: options.refreshHz,
-		settings
+		settings,
+		theme
 	});
 	host.append(hotspot, tools, view.element);
 	parent.append(host);
@@ -1110,7 +1364,9 @@ const mountPerfHud = (monitor, options = {}) => {
 	};
 	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,
@@ -1159,18 +1415,23 @@ const mountPerfHud = (monitor, options = {}) => {
 			host.removeEventListener("pointerleave", onLeave);
 			host.removeEventListener("pointerdown", onDown);
 			unsubscribe();
+			unsubscribeTheme();
 			dock.dispose();
 			view.dispose();
+			theme.dispose();
 			host.remove();
 		},
 		element: host,
 		getMode: () => view.getMode(),
 		setMode,
+		getTheme: () => theme.mode,
+		setTheme: (mode) => theme.setMode(mode),
 		settings,
+		theme,
 		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 };
+export { dockPanel as a, HudTheme as c, PerformanceView as i, THEME_MODES as l, PERF_HUD_STYLES as n, DEFAULT_STORAGE_KEY as o, injectStyles as r, HudSettings as s, mountPerfHud as t, isThemeMode as u };
 
-//# sourceMappingURL=mount-perf-hud-CduRNym5.js.map
+//# sourceMappingURL=mount-perf-hud-CZNSZVYn.js.map