@zkmake/three-meter 0.1.0

package/dist/performance-monitor-qswCj9Nl.js

@@ -0,0 +1,263 @@
+//#region src/core/gpu-timer.ts
+var GpuTimer = class GpuTimer {
+	lastMs = 0;
+	webgpu;
+	webgpuInFlight = false;
+	gl;
+	ext;
+	free = [];
+	pending = [];
+	active = null;
+	constructor(webgpu, gl, ext, poolSize) {
+		this.webgpu = webgpu;
+		this.gl = gl;
+		this.ext = ext;
+		if (!gl) return;
+		for (let index = 0; index < poolSize; index += 1) {
+			const query = gl.createQuery();
+			if (query) this.free.push(query);
+		}
+	}
+	static create(renderer, poolSize) {
+		if (renderer.backend?.trackTimestamp && renderer.resolveTimestampsAsync) return new GpuTimer(renderer, null, null, poolSize);
+		const context = renderer.getContext?.();
+		if (!(context instanceof WebGL2RenderingContext)) return null;
+		const ext = context.getExtension("EXT_disjoint_timer_query_webgl2");
+		return ext ? new GpuTimer(null, context, ext, poolSize) : null;
+	}
+	begin() {
+		if (this.webgpu || !this.gl || !this.ext) return;
+		const query = this.free.pop();
+		if (!query) {
+			this.active = null;
+			return;
+		}
+		this.active = query;
+		this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, query);
+	}
+	end() {
+		if (this.webgpu || !this.gl || !this.ext || !this.active) return;
+		this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+		this.pending.push(this.active);
+		this.active = null;
+	}
+	poll() {
+		if (this.webgpu) {
+			this.pollWebgpu();
+			return;
+		}
+		this.pollWebgl();
+	}
+	getMs() {
+		return this.lastMs;
+	}
+	dispose() {
+		if (this.gl && this.ext && this.active) {
+			this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);
+			this.active = null;
+		}
+		if (this.gl) {
+			for (const query of this.free) this.gl.deleteQuery(query);
+			for (const query of this.pending) this.gl.deleteQuery(query);
+		}
+		this.free.length = 0;
+		this.pending.length = 0;
+	}
+	pollWebgpu() {
+		const resolve = this.webgpu?.resolveTimestampsAsync;
+		if (!resolve || this.webgpuInFlight) return;
+		this.webgpuInFlight = true;
+		resolve.call(this.webgpu, "render").then((ms) => {
+			if (typeof ms === "number" && Number.isFinite(ms)) this.lastMs = ms;
+			this.webgpuInFlight = false;
+		}).catch(() => {
+			this.webgpuInFlight = false;
+		});
+	}
+	pollWebgl() {
+		if (!this.gl || !this.ext) return;
+		if (this.gl.getParameter(this.ext.GPU_DISJOINT_EXT)) {
+			while (this.pending.length > 0) this.free.push(this.pending.shift());
+			return;
+		}
+		while (this.pending.length > 0) {
+			const query = this.pending[0];
+			if (!this.gl.getQueryParameter(query, this.gl.QUERY_RESULT_AVAILABLE)) break;
+			this.pending.shift();
+			const ns = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT);
+			this.lastMs = ns / 1e6;
+			this.free.push(query);
+		}
+	}
+};
+//#endregion
+//#region src/core/ring-buffer.ts
+/**
+* Fixed-capacity numeric ring buffer. Backs the per-frame timing history the
+* view reads to draw sparklines. Push is O(1); `toArray()` returns values in
+* chronological (oldest → newest) order.
+*/
+var RingBuffer = class {
+	data;
+	capacity;
+	head = 0;
+	count = 0;
+	constructor(capacity) {
+		this.capacity = capacity;
+		this.data = new Float32Array(capacity);
+	}
+	push(value) {
+		this.data[this.head] = value;
+		this.head = (this.head + 1) % this.capacity;
+		if (this.count < this.capacity) this.count += 1;
+	}
+	/** Values oldest → newest. Length grows up to capacity as samples accumulate. */
+	toArray() {
+		const out = Array.from({ length: this.count });
+		const start = (this.head - this.count + this.capacity) % this.capacity;
+		for (let index = 0; index < this.count; index += 1) out[index] = this.data[(start + index) % this.capacity];
+		return out;
+	}
+	clear() {
+		this.head = 0;
+		this.count = 0;
+	}
+};
+//#endregion
+//#region src/core/performance-monitor.ts
+const DEFAULT_GPU_POOL_SIZE = 5;
+/** One monitor per renderer: a second would stack the `render` patch and double-count passes. */
+const ATTACHED = /* @__PURE__ */ new WeakSet();
+const DEFAULT_HISTORY_SIZE = 120;
+const FPS_SMOOTHING = .1;
+const frameCalls = (info) => info.render.drawCalls ?? info.render.calls;
+const programCount = (info) => info.memory.programs ?? info.programs?.length ?? 0;
+/**
+* Collector of three.js frame metrics. Bracket each frame with {@link begin}/
+* {@link end}, or let {@link wrapAnimationLoop} or the R3F `PerfSampler` do it.
+* Works on WebGPURenderer (drawCalls, memory.programs, timestamp queries) and
+* on a WebGL renderer (calls, programs[], timer-query ext).
+*
+* While attached, `renderer.info.autoReset` is off and `info` is reset in
+* {@link begin}; host code that reads `renderer.info` mid-frame sees this
+* frame's counts only. {@link dispose} restores both.
+*/
+var PerformanceMonitor = class {
+	renderer;
+	gpuTimer;
+	originalRender;
+	renderPasses = 0;
+	fpsHistory;
+	cpuHistory;
+	gpuHistory;
+	cpuStart = 0;
+	lastBeginAt = null;
+	frameFps = 0;
+	smoothedFps = 0;
+	sample;
+	constructor(options) {
+		const { renderer, trackGPU = true, gpuQueryPoolSize = DEFAULT_GPU_POOL_SIZE, historySize = DEFAULT_HISTORY_SIZE } = options;
+		if (ATTACHED.has(renderer)) throw new Error("three-meter: a PerformanceMonitor is already attached to this renderer. dispose() it first.");
+		ATTACHED.add(renderer);
+		this.renderer = renderer;
+		renderer.info.autoReset = false;
+		this.originalRender = renderer.render;
+		renderer.render = (...args) => {
+			this.renderPasses += 1;
+			return this.originalRender.apply(renderer, args);
+		};
+		this.gpuTimer = trackGPU ? GpuTimer.create(renderer, gpuQueryPoolSize) : null;
+		this.fpsHistory = new RingBuffer(historySize);
+		this.cpuHistory = new RingBuffer(historySize);
+		this.gpuHistory = new RingBuffer(historySize);
+		this.sample = this.buildEmptySample();
+	}
+	begin() {
+		const now = performance.now();
+		if (this.lastBeginAt !== null) {
+			const frameMs = now - this.lastBeginAt;
+			this.frameFps = frameMs > 0 ? 1e3 / frameMs : 0;
+		}
+		this.lastBeginAt = now;
+		this.cpuStart = now;
+		this.renderPasses = 0;
+		this.renderer.info.reset();
+		this.gpuTimer?.begin();
+	}
+	end() {
+		const cpu = performance.now() - this.cpuStart;
+		this.gpuTimer?.end();
+		this.gpuTimer?.poll();
+		const gpuMs = this.gpuTimer?.getMs() ?? 0;
+		this.smoothedFps = this.smoothedFps === 0 ? this.frameFps : this.smoothedFps + (this.frameFps - this.smoothedFps) * FPS_SMOOTHING;
+		this.fpsHistory.push(this.frameFps);
+		this.cpuHistory.push(cpu);
+		this.gpuHistory.push(gpuMs);
+		const info = this.renderer.info;
+		this.sample = Object.freeze({
+			cpu,
+			fps: this.smoothedFps,
+			gpu: {
+				available: this.gpuTimer !== null,
+				ms: gpuMs
+			},
+			render: {
+				calls: frameCalls(info),
+				lines: info.render.lines,
+				passes: this.renderPasses,
+				points: info.render.points,
+				triangles: info.render.triangles
+			},
+			resources: {
+				geometries: info.memory.geometries,
+				programs: programCount(info),
+				textures: info.memory.textures
+			}
+		});
+	}
+	getSample() {
+		return this.sample;
+	}
+	getHistory(metric) {
+		switch (metric) {
+			case "fps": return this.fpsHistory.toArray();
+			case "cpu": return this.cpuHistory.toArray();
+			case "gpu": return this.gpuHistory.toArray();
+		}
+	}
+	dispose() {
+		ATTACHED.delete(this.renderer);
+		this.renderer.info.autoReset = true;
+		this.renderer.render = this.originalRender;
+		this.gpuTimer?.dispose();
+		this.fpsHistory.clear();
+		this.cpuHistory.clear();
+		this.gpuHistory.clear();
+	}
+	buildEmptySample() {
+		return Object.freeze({
+			cpu: 0,
+			fps: 0,
+			gpu: {
+				available: this.gpuTimer !== null,
+				ms: 0
+			},
+			render: {
+				calls: 0,
+				lines: 0,
+				passes: 0,
+				points: 0,
+				triangles: 0
+			},
+			resources: {
+				geometries: 0,
+				programs: 0,
+				textures: 0
+			}
+		});
+	}
+};
+//#endregion
+export { RingBuffer as n, PerformanceMonitor as t };
+
+//# sourceMappingURL=performance-monitor-qswCj9Nl.js.map

package/dist/performance-monitor-qswCj9Nl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance-monitor-qswCj9Nl.js","names":[],"sources":["../src/core/gpu-timer.ts","../src/core/ring-buffer.ts","../src/core/performance-monitor.ts"],"sourcesContent":["/**\n * Real GPU frame timing.\n *\n * WebGPU: Three's `trackTimestamp` + `resolveTimestampsAsync` (ms, a frame or\n * two late). Never calls `getExtension`: that is what remounted the canvas.\n *\n * WebGL2 fallback (Safari without WebGPU, or a forced GL backend):\n * `EXT_disjoint_timer_query_webgl2`, same pool-of-queries pattern as the\n * platform-typing monitor.\n */\nimport type { PerfRenderer } from \"./types.ts\";\n\ntype DisjointTimerQueryExt = {\n  readonly GPU_DISJOINT_EXT: number;\n  readonly TIME_ELAPSED_EXT: number;\n};\n\nclass GpuTimer {\n  private lastMs = 0;\n  private readonly webgpu: PerfRenderer | null;\n  private webgpuInFlight = false;\n  private readonly gl: WebGL2RenderingContext | null;\n  private readonly ext: DisjointTimerQueryExt | null;\n  private readonly free: WebGLQuery[] = [];\n  private readonly pending: WebGLQuery[] = [];\n  private active: WebGLQuery | null = null;\n\n  private constructor(\n    webgpu: PerfRenderer | null,\n    gl: WebGL2RenderingContext | null,\n    ext: DisjointTimerQueryExt | null,\n    poolSize: number,\n  ) {\n    this.webgpu = webgpu;\n    this.gl = gl;\n    this.ext = ext;\n\n    if (!gl) {\n      return;\n    }\n\n    for (let index = 0; index < poolSize; index += 1) {\n      const query = gl.createQuery();\n\n      if (query) {\n        this.free.push(query);\n      }\n    }\n  }\n\n  static create(renderer: PerfRenderer, poolSize: number): GpuTimer | null {\n    const backend = renderer.backend as { trackTimestamp?: boolean } | undefined;\n\n    if (backend?.trackTimestamp && renderer.resolveTimestampsAsync) {\n      return new GpuTimer(renderer, null, null, poolSize);\n    }\n\n    const context = renderer.getContext?.();\n\n    if (!(context instanceof WebGL2RenderingContext)) {\n      return null;\n    }\n\n    const ext = context.getExtension(\n      \"EXT_disjoint_timer_query_webgl2\",\n    ) as DisjointTimerQueryExt | null;\n\n    return ext ? new GpuTimer(null, context, ext, poolSize) : null;\n  }\n\n  begin() {\n    if (this.webgpu || !this.gl || !this.ext) {\n      return;\n    }\n\n    const query = this.free.pop();\n\n    if (!query) {\n      this.active = null;\n\n      return;\n    }\n\n    this.active = query;\n    this.gl.beginQuery(this.ext.TIME_ELAPSED_EXT, query);\n  }\n\n  end() {\n    if (this.webgpu || !this.gl || !this.ext || !this.active) {\n      return;\n    }\n\n    this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);\n    this.pending.push(this.active);\n    this.active = null;\n  }\n\n  poll() {\n    if (this.webgpu) {\n      this.pollWebgpu();\n\n      return;\n    }\n\n    this.pollWebgl();\n  }\n\n  getMs() {\n    return this.lastMs;\n  }\n\n  dispose() {\n    if (this.gl && this.ext && this.active) {\n      this.gl.endQuery(this.ext.TIME_ELAPSED_EXT);\n      this.active = null;\n    }\n\n    if (this.gl) {\n      for (const query of this.free) {\n        this.gl.deleteQuery(query);\n      }\n\n      for (const query of this.pending) {\n        this.gl.deleteQuery(query);\n      }\n    }\n\n    this.free.length = 0;\n    this.pending.length = 0;\n  }\n\n  private pollWebgpu() {\n    const resolve = this.webgpu?.resolveTimestampsAsync;\n\n    if (!resolve || this.webgpuInFlight) {\n      return;\n    }\n\n    this.webgpuInFlight = true;\n\n    void resolve\n      .call(this.webgpu, \"render\")\n      .then((ms) => {\n        if (typeof ms === \"number\" && Number.isFinite(ms)) {\n          this.lastMs = ms;\n        }\n\n        this.webgpuInFlight = false;\n      })\n      .catch(() => {\n        this.webgpuInFlight = false;\n      });\n  }\n\n  private pollWebgl() {\n    if (!this.gl || !this.ext) {\n      return;\n    }\n\n    const disjoint = this.gl.getParameter(this.ext.GPU_DISJOINT_EXT) as boolean;\n\n    if (disjoint) {\n      while (this.pending.length > 0) {\n        this.free.push(this.pending.shift()!);\n      }\n\n      return;\n    }\n\n    while (this.pending.length > 0) {\n      const query = this.pending[0]!;\n      const ready = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT_AVAILABLE) as boolean;\n\n      if (!ready) {\n        break;\n      }\n\n      this.pending.shift();\n      const ns = this.gl.getQueryParameter(query, this.gl.QUERY_RESULT) as number;\n      this.lastMs = ns / 1e6;\n      this.free.push(query);\n    }\n  }\n}\n\nexport { GpuTimer };\n","/**\n * Fixed-capacity numeric ring buffer. Backs the per-frame timing history the\n * view reads to draw sparklines. Push is O(1); `toArray()` returns values in\n * chronological (oldest → newest) order.\n */\nclass RingBuffer {\n  private readonly data: Float32Array;\n  private readonly capacity: number;\n  private head = 0;\n  private count = 0;\n\n  constructor(capacity: number) {\n    this.capacity = capacity;\n    this.data = new Float32Array(capacity);\n  }\n\n  push(value: number) {\n    this.data[this.head] = value;\n    this.head = (this.head + 1) % this.capacity;\n\n    if (this.count < this.capacity) {\n      this.count += 1;\n    }\n  }\n\n  /** Values oldest → newest. Length grows up to capacity as samples accumulate. */\n  toArray(): number[] {\n    const out = Array.from<number>({ length: this.count });\n    const start = (this.head - this.count + this.capacity) % this.capacity;\n\n    for (let index = 0; index < this.count; index += 1) {\n      out[index] = this.data[(start + index) % this.capacity]!;\n    }\n\n    return out;\n  }\n\n  clear() {\n    this.head = 0;\n    this.count = 0;\n  }\n}\n\nexport { RingBuffer };\n","import { GpuTimer } from \"./gpu-timer.ts\";\nimport { RingBuffer } from \"./ring-buffer.ts\";\nimport type { PerfRenderer, PerformanceMonitorOptions, Sample, TimingMetric } from \"./types.ts\";\n\nconst DEFAULT_GPU_POOL_SIZE = 5;\n/** One monitor per renderer: a second would stack the `render` patch and double-count passes. */\nconst ATTACHED = new WeakSet<PerfRenderer>();\nconst DEFAULT_HISTORY_SIZE = 120;\nconst FPS_SMOOTHING = 0.1;\n\nconst frameCalls = (info: PerfRenderer[\"info\"]) => info.render.drawCalls ?? info.render.calls;\n\nconst programCount = (info: PerfRenderer[\"info\"]) =>\n  info.memory.programs ?? info.programs?.length ?? 0;\n\n/**\n * Collector of three.js frame metrics. Bracket each frame with {@link begin}/\n * {@link end}, or let {@link wrapAnimationLoop} or the R3F `PerfSampler` do it.\n * Works on WebGPURenderer (drawCalls, memory.programs, timestamp queries) and\n * on a WebGL renderer (calls, programs[], timer-query ext).\n *\n * While attached, `renderer.info.autoReset` is off and `info` is reset in\n * {@link begin}; host code that reads `renderer.info` mid-frame sees this\n * frame's counts only. {@link dispose} restores both.\n */\nclass PerformanceMonitor {\n  private readonly renderer: PerfRenderer;\n  private readonly gpuTimer: GpuTimer | null;\n  private readonly originalRender: PerfRenderer[\"render\"];\n  private renderPasses = 0;\n  private readonly fpsHistory: RingBuffer;\n  private readonly cpuHistory: RingBuffer;\n  private readonly gpuHistory: RingBuffer;\n  private cpuStart = 0;\n  private lastBeginAt: number | null = null;\n  private frameFps = 0;\n  private smoothedFps = 0;\n  private sample: Sample;\n\n  constructor(options: PerformanceMonitorOptions) {\n    const {\n      renderer,\n      trackGPU = true,\n      gpuQueryPoolSize = DEFAULT_GPU_POOL_SIZE,\n      historySize = DEFAULT_HISTORY_SIZE,\n    } = options;\n\n    if (ATTACHED.has(renderer)) {\n      throw new Error(\n        \"three-meter: a PerformanceMonitor is already attached to this renderer. dispose() it first.\",\n      );\n    }\n\n    ATTACHED.add(renderer);\n    this.renderer = renderer;\n    renderer.info.autoReset = false;\n    this.originalRender = renderer.render;\n\n    renderer.render = (...args: never[]) => {\n      this.renderPasses += 1;\n\n      return this.originalRender.apply(renderer, args);\n    };\n\n    this.gpuTimer = trackGPU ? GpuTimer.create(renderer, gpuQueryPoolSize) : null;\n    this.fpsHistory = new RingBuffer(historySize);\n    this.cpuHistory = new RingBuffer(historySize);\n    this.gpuHistory = new RingBuffer(historySize);\n    this.sample = this.buildEmptySample();\n  }\n\n  begin() {\n    const now = performance.now();\n\n    if (this.lastBeginAt !== null) {\n      const frameMs = now - this.lastBeginAt;\n      this.frameFps = frameMs > 0 ? 1000 / frameMs : 0;\n    }\n\n    this.lastBeginAt = now;\n    this.cpuStart = now;\n    this.renderPasses = 0;\n    this.renderer.info.reset();\n    this.gpuTimer?.begin();\n  }\n\n  end() {\n    const now = performance.now();\n    const cpu = now - this.cpuStart;\n\n    this.gpuTimer?.end();\n    this.gpuTimer?.poll();\n\n    const gpuMs = this.gpuTimer?.getMs() ?? 0;\n\n    this.smoothedFps =\n      this.smoothedFps === 0\n        ? this.frameFps\n        : this.smoothedFps + (this.frameFps - this.smoothedFps) * FPS_SMOOTHING;\n\n    this.fpsHistory.push(this.frameFps);\n    this.cpuHistory.push(cpu);\n    this.gpuHistory.push(gpuMs);\n\n    const info = this.renderer.info;\n\n    this.sample = Object.freeze({\n      cpu,\n      fps: this.smoothedFps,\n      gpu: { available: this.gpuTimer !== null, ms: gpuMs },\n      render: {\n        calls: frameCalls(info),\n        lines: info.render.lines,\n        passes: this.renderPasses,\n        points: info.render.points,\n        triangles: info.render.triangles,\n      },\n      resources: {\n        geometries: info.memory.geometries,\n        programs: programCount(info),\n        textures: info.memory.textures,\n      },\n    });\n  }\n\n  getSample(): Sample {\n    return this.sample;\n  }\n\n  getHistory(metric: TimingMetric): readonly number[] {\n    switch (metric) {\n      case \"fps\":\n        return this.fpsHistory.toArray();\n      case \"cpu\":\n        return this.cpuHistory.toArray();\n      case \"gpu\":\n        return this.gpuHistory.toArray();\n    }\n  }\n\n  dispose() {\n    ATTACHED.delete(this.renderer);\n    this.renderer.info.autoReset = true;\n    this.renderer.render = this.originalRender;\n    this.gpuTimer?.dispose();\n    this.fpsHistory.clear();\n    this.cpuHistory.clear();\n    this.gpuHistory.clear();\n  }\n\n  private buildEmptySample(): Sample {\n    return Object.freeze({\n      cpu: 0,\n      fps: 0,\n      gpu: { available: this.gpuTimer !== null, ms: 0 },\n      render: { calls: 0, lines: 0, passes: 0, points: 0, triangles: 0 },\n      resources: { geometries: 0, programs: 0, textures: 0 },\n    });\n  }\n}\n\nexport { PerformanceMonitor };\n"],"mappings":"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"}

package/dist/react.d.ts

@@ -0,0 +1,39 @@
+import { i as PerformanceMonitorOptions, t as PerformanceMonitor } from "./performance-monitor-WGLWbxOZ.js";
+import { t as MountPerfHudOptions } from "./mount-perf-hud-Dw8KNQTt.js";
+//#region src/react/monitor-store.d.ts
+type MonitorListener = (monitor: PerformanceMonitor | null) => void;
+type PerfMonitorStore = {
+  get: () => PerformanceMonitor | null;
+  set: (monitor: PerformanceMonitor | null) => void;
+  subscribe: (listener: MonitorListener) => () => void;
+};
+declare const createPerfMonitorStore: () => PerfMonitorStore;
+declare const defaultPerfMonitorStore: PerfMonitorStore;
+//#endregion
+//#region src/react/perf-hud.d.ts
+type PerfHudProps = Omit<MountPerfHudOptions, "settings"> & {
+  /** Must match the `PerfSampler`'s. Default: the shared store. */
+  store?: PerfMonitorStore;
+};
+/**
+ * DOM overlay. Render it *outside* `<Canvas>`, or Fiber would treat its markup
+ * as three objects. Mounts the dockable HUD whenever a `PerfSampler` has
+ * published a monitor and tears it down when that sampler unmounts.
+ */
+declare function PerfHud({ defaultPlacement, injectStyles, label, mode, parent, refreshHz, storageKey, store }: PerfHudProps): null;
+//#endregion
+//#region src/react/perf-sampler.d.ts
+type PerfSamplerProps = Omit<PerformanceMonitorOptions, "renderer"> & {
+  /** Where the monitor is published for `PerfHud`. Default: the shared store. */
+  store?: PerfMonitorStore;
+};
+/**
+ * In-canvas collector. Renders nothing. Fiber runs every `useFrame` before
+ * `gl.render`, so the previous frame is closed here and the next one opens, and
+ * GPU queries then span the render that just ran. The monitor is created in
+ * an effect so StrictMode's double mount attaches and detaches cleanly.
+ */
+declare function PerfSampler({ gpuQueryPoolSize, historySize, store, trackGPU }: PerfSamplerProps): null;
+//#endregion
+export { PerfHud, type PerfHudProps, type PerfMonitorStore, PerfSampler, type PerfSamplerProps, createPerfMonitorStore, defaultPerfMonitorStore };
+//# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -0,0 +1,114 @@
+import { t as PerformanceMonitor } from "./performance-monitor-qswCj9Nl.js";
+import { t as mountPerfHud } from "./mount-perf-hud-CduRNym5.js";
+import { useEffect, useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+//#region src/react/monitor-store.ts
+const createPerfMonitorStore = () => {
+	let current = null;
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		get: () => current,
+		set: (monitor) => {
+			current = monitor;
+			for (const listener of listeners) listener(monitor);
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		}
+	};
+};
+const defaultPerfMonitorStore = createPerfMonitorStore();
+//#endregion
+//#region src/react/perf-hud.tsx
+/**
+* DOM overlay. Render it *outside* `<Canvas>`, or Fiber would treat its markup
+* as three objects. Mounts the dockable HUD whenever a `PerfSampler` has
+* published a monitor and tears it down when that sampler unmounts.
+*/
+function PerfHud({ defaultPlacement, injectStyles, label, mode, parent, refreshHz, storageKey, store }) {
+	const source = store ?? defaultPerfMonitorStore;
+	useEffect(() => {
+		let dispose = null;
+		const attach = (monitor) => {
+			dispose?.();
+			dispose = null;
+			if (!monitor) return;
+			dispose = mountPerfHud(monitor, {
+				defaultPlacement,
+				injectStyles,
+				label,
+				mode,
+				parent,
+				refreshHz,
+				storageKey
+			}).dispose;
+		};
+		const unsubscribe = source.subscribe(attach);
+		attach(source.get());
+		return () => {
+			unsubscribe();
+			dispose?.();
+		};
+	}, [
+		defaultPlacement,
+		injectStyles,
+		label,
+		mode,
+		parent,
+		refreshHz,
+		source,
+		storageKey
+	]);
+	return null;
+}
+//#endregion
+//#region src/react/perf-sampler.tsx
+/**
+* In-canvas collector. Renders nothing. Fiber runs every `useFrame` before
+* `gl.render`, so the previous frame is closed here and the next one opens, and
+* GPU queries then span the render that just ran. The monitor is created in
+* an effect so StrictMode's double mount attaches and detaches cleanly.
+*/
+function PerfSampler({ gpuQueryPoolSize, historySize, store, trackGPU }) {
+	const renderer = useThree((state) => state.gl);
+	const monitorRef = useRef(null);
+	const startedRef = useRef(false);
+	const target = store ?? defaultPerfMonitorStore;
+	useEffect(() => {
+		const monitor = new PerformanceMonitor({
+			gpuQueryPoolSize,
+			historySize,
+			renderer,
+			trackGPU
+		});
+		monitorRef.current = monitor;
+		startedRef.current = false;
+		target.set(monitor);
+		return () => {
+			target.set(null);
+			monitorRef.current = null;
+			monitor.dispose();
+		};
+	}, [
+		gpuQueryPoolSize,
+		historySize,
+		renderer,
+		target,
+		trackGPU
+	]);
+	useFrame(() => {
+		const monitor = monitorRef.current;
+		if (!monitor) return;
+		if (startedRef.current) monitor.end();
+		startedRef.current = true;
+		monitor.begin();
+	});
+	return null;
+}
+//#endregion
+export { PerfHud, PerfSampler, createPerfMonitorStore, defaultPerfMonitorStore };
+
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":[],"sources":["../src/react/monitor-store.ts","../src/react/perf-hud.tsx","../src/react/perf-sampler.tsx"],"sourcesContent":["/**\n * Hands the in-canvas monitor to the DOM-side HUD. A React context can't do\n * it: R3F's `<Canvas>` is its own reconciler root, so a provider outside it\n * isn't visible inside without a bridge. A tiny external store crosses that\n * boundary for free. One default store; pass your own to both components to\n * run two canvases on one page.\n */\nimport type { PerformanceMonitor } from \"../core/performance-monitor.ts\";\n\ntype MonitorListener = (monitor: PerformanceMonitor | null) => void;\n\ntype PerfMonitorStore = {\n  get: () => PerformanceMonitor | null;\n  set: (monitor: PerformanceMonitor | null) => void;\n  subscribe: (listener: MonitorListener) => () => void;\n};\n\nconst createPerfMonitorStore = (): PerfMonitorStore => {\n  let current: PerformanceMonitor | null = null;\n  const listeners = new Set<MonitorListener>();\n\n  return {\n    get: () => current,\n    set: (monitor) => {\n      current = monitor;\n\n      for (const listener of listeners) {\n        listener(monitor);\n      }\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n};\n\nconst defaultPerfMonitorStore = createPerfMonitorStore();\n\nexport { createPerfMonitorStore, defaultPerfMonitorStore };\nexport type { PerfMonitorStore };\n","import { useEffect } from \"react\";\n\nimport { mountPerfHud, type MountPerfHudOptions } from \"../ui/mount-perf-hud.ts\";\nimport { defaultPerfMonitorStore, type PerfMonitorStore } from \"./monitor-store.ts\";\n\ntype PerfHudProps = Omit<MountPerfHudOptions, \"settings\"> & {\n  /** Must match the `PerfSampler`'s. Default: the shared store. */\n  store?: PerfMonitorStore;\n};\n\n/**\n * DOM overlay. Render it *outside* `<Canvas>`, or Fiber would treat its markup\n * as three objects. Mounts the dockable HUD whenever a `PerfSampler` has\n * published a monitor and tears it down when that sampler unmounts.\n */\nfunction PerfHud({\n  defaultPlacement,\n  injectStyles,\n  label,\n  mode,\n  parent,\n  refreshHz,\n  storageKey,\n  store,\n}: PerfHudProps) {\n  const source = store ?? defaultPerfMonitorStore;\n\n  useEffect(() => {\n    let dispose: (() => void) | null = null;\n\n    const attach = (monitor: ReturnType<PerfMonitorStore[\"get\"]>) => {\n      dispose?.();\n      dispose = null;\n\n      if (!monitor) {\n        return;\n      }\n\n      dispose = mountPerfHud(monitor, {\n        defaultPlacement,\n        injectStyles,\n        label,\n        mode,\n        parent,\n        refreshHz,\n        storageKey,\n      }).dispose;\n    };\n\n    const unsubscribe = source.subscribe(attach);\n    attach(source.get());\n\n    return () => {\n      unsubscribe();\n      dispose?.();\n    };\n  }, [defaultPlacement, injectStyles, label, mode, parent, refreshHz, source, storageKey]);\n\n  return null;\n}\n\nexport { PerfHud };\nexport type { PerfHudProps };\n","import { useFrame, useThree } from \"@react-three/fiber\";\nimport { useEffect, useRef } from \"react\";\n\nimport { PerformanceMonitor } from \"../core/performance-monitor.ts\";\nimport type { PerformanceMonitorOptions, PerfRenderer } from \"../core/types.ts\";\nimport { defaultPerfMonitorStore, type PerfMonitorStore } from \"./monitor-store.ts\";\n\ntype PerfSamplerProps = Omit<PerformanceMonitorOptions, \"renderer\"> & {\n  /** Where the monitor is published for `PerfHud`. Default: the shared store. */\n  store?: PerfMonitorStore;\n};\n\n/**\n * In-canvas collector. Renders nothing. Fiber runs every `useFrame` before\n * `gl.render`, so the previous frame is closed here and the next one opens, and\n * GPU queries then span the render that just ran. The monitor is created in\n * an effect so StrictMode's double mount attaches and detaches cleanly.\n */\nfunction PerfSampler({ gpuQueryPoolSize, historySize, store, trackGPU }: PerfSamplerProps) {\n  const renderer = useThree((state) => state.gl);\n  const monitorRef = useRef<PerformanceMonitor | null>(null);\n  const startedRef = useRef(false);\n  const target = store ?? defaultPerfMonitorStore;\n\n  useEffect(() => {\n    const monitor = new PerformanceMonitor({\n      gpuQueryPoolSize,\n      historySize,\n      renderer: renderer as unknown as PerfRenderer,\n      trackGPU,\n    });\n    monitorRef.current = monitor;\n    startedRef.current = false;\n    target.set(monitor);\n\n    return () => {\n      target.set(null);\n      monitorRef.current = null;\n      monitor.dispose();\n    };\n  }, [gpuQueryPoolSize, historySize, renderer, target, trackGPU]);\n\n  useFrame(() => {\n    const monitor = monitorRef.current;\n\n    if (!monitor) {\n      return;\n    }\n\n    if (startedRef.current) {\n      monitor.end();\n    }\n\n    startedRef.current = true;\n    monitor.begin();\n  });\n\n  return null;\n}\n\nexport { PerfSampler };\nexport type { PerfSamplerProps };\n"],"mappings":";;;;;AAiBA,MAAM,+BAAiD;CACrD,IAAI,UAAqC;CACzC,MAAM,4BAAY,IAAI,IAAqB;CAE3C,OAAO;EACL,WAAW;EACX,MAAM,YAAY;GAChB,UAAU;GAEV,KAAK,MAAM,YAAY,WACrB,SAAS,OAAO;EAEpB;EACA,YAAY,aAAa;GACvB,UAAU,IAAI,QAAQ;GAEtB,aAAa;IACX,UAAU,OAAO,QAAQ;GAC3B;EACF;CACF;AACF;AAEA,MAAM,0BAA0B,uBAAuB;;;;;;;;ACzBvD,SAAS,QAAQ,EACf,kBACA,cACA,OACA,MACA,QACA,WACA,YACA,SACe;CACf,MAAM,SAAS,SAAS;CAExB,gBAAgB;EACd,IAAI,UAA+B;EAEnC,MAAM,UAAU,YAAiD;GAC/D,UAAU;GACV,UAAU;GAEV,IAAI,CAAC,SACH;GAGF,UAAU,aAAa,SAAS;IAC9B;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,CAAC;EACL;EAEA,MAAM,cAAc,OAAO,UAAU,MAAM;EAC3C,OAAO,OAAO,IAAI,CAAC;EAEnB,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;CACF,GAAG;EAAC;EAAkB;EAAc;EAAO;EAAM;EAAQ;EAAW;EAAQ;CAAU,CAAC;CAEvF,OAAO;AACT;;;;;;;;;ACzCA,SAAS,YAAY,EAAE,kBAAkB,aAAa,OAAO,YAA8B;CACzF,MAAM,WAAW,UAAU,UAAU,MAAM,EAAE;CAC7C,MAAM,aAAa,OAAkC,IAAI;CACzD,MAAM,aAAa,OAAO,KAAK;CAC/B,MAAM,SAAS,SAAS;CAExB,gBAAgB;EACd,MAAM,UAAU,IAAI,mBAAmB;GACrC;GACA;GACU;GACV;EACF,CAAC;EACD,WAAW,UAAU;EACrB,WAAW,UAAU;EACrB,OAAO,IAAI,OAAO;EAElB,aAAa;GACX,OAAO,IAAI,IAAI;GACf,WAAW,UAAU;GACrB,QAAQ,QAAQ;EAClB;CACF,GAAG;EAAC;EAAkB;EAAa;EAAU;EAAQ;CAAQ,CAAC;CAE9D,eAAe;EACb,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,SACH;EAGF,IAAI,WAAW,SACb,QAAQ,IAAI;EAGd,WAAW,UAAU;EACrB,QAAQ,MAAM;CAChB,CAAC;CAED,OAAO;AACT"}