@zkmake/three-meter 0.3.2 → 0.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"performance-monitor-yxsxs57v.js","names":[],"sources":["../src/core/environment.ts","../src/core/frame-stats.ts","../src/core/gpu-timer.ts","../src/core/ring-buffer.ts","../src/core/performance-monitor.ts"],"sourcesContent":["/**\n * What the monitor is running on: three revision, rendering backend, GPU.\n * Read from the renderer and the page, never from an import of three.\n *\n * `WebGPURenderer` settles its backend in `init()`, so until then the backend\n * reads `null`; callers poll and the monitor caches once it is known.\n */\nimport type { Environment, PerfRenderer, RenderBackend } from \"./types.ts\";\n\ntype BackendShape = {\n  device?: { adapterInfo?: AdapterInfoShape } | null;\n  gl?: unknown;\n  isWebGLBackend?: boolean;\n  isWebGPUBackend?: boolean;\n  parameters?: { forceWebGL?: boolean };\n};\n\ntype AdapterInfoShape = {\n  architecture?: string;\n  description?: string;\n  device?: string;\n  vendor?: string;\n};\n\ntype DebugRendererInfoExt = { readonly UNMASKED_RENDERER_WEBGL: number };\n\n/** three sets `window.__THREE__` to its revision on import (and warns on a second copy). */\nconst readThreeRevision = (): string | null => {\n  const revision = (globalThis as { __THREE__?: unknown }).__THREE__;\n\n  return typeof revision === \"string\" && revision !== \"\" ? revision : null;\n};\n\n/**\n * Trim a WebGL renderer string to the part a person recognises. Chrome wraps\n * it in ANGLE, e.g. `ANGLE (NVIDIA, NVIDIA GeForce RTX 4070 (0x00002786)\n * Direct3D11 vs_5_0 ps_5_0, D3D11)` or `ANGLE (Apple, ANGLE Metal Renderer:\n * Apple M3 Pro, Unspecified Version)`.\n */\nconst cleanGpuName = (raw: string): string => {\n  let name = raw.trim();\n  const angle = /^ANGLE \\((.*)\\)$/.exec(name);\n\n  if (angle) {\n    const parts = angle[1]!.split(\", \");\n    name = parts[1] ?? parts[0]!;\n  }\n\n  return name\n    .replace(/^ANGLE [\\w ]+ Renderer: /, \"\")\n    .replace(/ \\(0x[0-9a-f]+\\)/i, \"\")\n    .replace(/ (Direct3D\\d*|OpenGL|Vulkan|Metal)\\b.*$/, \"\")\n    .trim();\n};\n\nconst webglGpuName = (gl: WebGLRenderingContext | WebGL2RenderingContext): string | null => {\n  // Firefox deprecates the extension but already returns the unmasked name from RENDERER.\n  const ext = gl.getExtension(\"WEBGL_debug_renderer_info\") as DebugRendererInfoExt | null;\n  const raw = gl.getParameter(ext ? ext.UNMASKED_RENDERER_WEBGL : gl.RENDERER) as unknown;\n\n  return typeof raw === \"string\" && raw !== \"\" && raw !== \"WebKit WebGL\" ? cleanGpuName(raw) : null;\n};\n\n/** WebGPU reports vendors lowercase (`apple`, `nvidia`). */\nconst VENDOR_NAMES: Record<string, string> = {\n  amd: \"AMD\",\n  apple: \"Apple\",\n  arm: \"Arm\",\n  intel: \"Intel\",\n  nvidia: \"NVIDIA\",\n  qualcomm: \"Qualcomm\",\n};\n\n/**\n * `GPUDevice.adapterInfo`. Chrome leaves `description` empty to limit\n * fingerprinting, so this is usually vendor + architecture: `Apple metal-3`.\n */\nconst webgpuGpuName = (info: AdapterInfoShape | undefined): string | null => {\n  if (!info) {\n    return null;\n  }\n\n  if (info.description) {\n    return info.description;\n  }\n\n  const vendor = info.vendor ? (VENDOR_NAMES[info.vendor] ?? info.vendor) : \"\";\n  const name = [vendor, info.architecture].filter(Boolean).join(\" \");\n\n  return name === \"\" ? null : name;\n};\n\nconst isWebglContext = (value: unknown): value is WebGLRenderingContext | WebGL2RenderingContext =>\n  (typeof WebGL2RenderingContext !== \"undefined\" && value instanceof WebGL2RenderingContext) ||\n  (typeof WebGLRenderingContext !== \"undefined\" && value instanceof WebGLRenderingContext);\n\nconst webglBackend = (gl: WebGLRenderingContext | WebGL2RenderingContext): RenderBackend =>\n  typeof WebGL2RenderingContext !== \"undefined\" && gl instanceof WebGL2RenderingContext\n    ? \"webgl2\"\n    : \"webgl\";\n\nconst readEnvironment = (renderer: PerfRenderer): Environment => {\n  const three = readThreeRevision();\n  const backend = renderer.backend as BackendShape | undefined;\n\n  // WebGPURenderer. Read the backend's own fields: `getContext()` before\n  // `init()` is what the GPU timer learned not to touch.\n  if (backend) {\n    if (backend.isWebGPUBackend) {\n      const device = backend.device;\n\n      return device\n        ? { backend: \"webgpu\", fallback: false, gpu: webgpuGpuName(device.adapterInfo), three }\n        : { backend: null, fallback: false, gpu: null, three };\n    }\n\n    if (backend.isWebGLBackend && isWebglContext(backend.gl)) {\n      return {\n        backend: webglBackend(backend.gl),\n        fallback: backend.parameters?.forceWebGL !== true,\n        gpu: webglGpuName(backend.gl),\n        three,\n      };\n    }\n\n    return { backend: null, fallback: false, gpu: null, three };\n  }\n\n  // WebGLRenderer.\n  const context = renderer.getContext?.();\n\n  return isWebglContext(context)\n    ? { backend: webglBackend(context), fallback: false, gpu: webglGpuName(context), three }\n    : { backend: null, fallback: false, gpu: null, three };\n};\n\nexport { cleanGpuName, readEnvironment };\n","/**\n * Stutter statistics over a window of frame intervals. Average FPS hides a\n * hitch every few seconds; these don't. Stalls (hidden tab, breakpoint) never\n * reach the window, so they don't count as hitches.\n */\nimport type { FrameStats } from \"./types.ts\";\n\n/** A frame over this multiple of the window's median interval is a hitch. */\nconst HITCH_FACTOR = 2;\n\nconst EMPTY: FrameStats = Object.freeze({ frames: 0, hitches: 0, lowFps: 0, p99Ms: 0 });\n\nconst computeFrameStats = (intervals: readonly number[]): FrameStats => {\n  const frames = intervals.length;\n\n  if (frames === 0) {\n    return EMPTY;\n  }\n\n  const sorted = [...intervals].sort((a, b) => a - b);\n  // Nearest rank: the smallest interval at or above 99% of frames.\n  const p99Ms = sorted[Math.ceil(frames * 0.99) - 1]!;\n\n  // 1% low: the mean rate across the slowest 1% of frames (at least one frame).\n  const slowest = Math.max(1, Math.ceil(frames * 0.01));\n  let slowSum = 0;\n\n  for (let index = frames - slowest; index < frames; index += 1) {\n    slowSum += sorted[index]!;\n  }\n\n  const middle = frames >> 1;\n  const median = frames % 2 === 0 ? (sorted[middle - 1]! + sorted[middle]!) / 2 : sorted[middle]!;\n  const threshold = median * HITCH_FACTOR;\n  let hitches = 0;\n\n  for (const interval of intervals) {\n    if (interval > threshold) {\n      hitches += 1;\n    }\n  }\n\n  return Object.freeze({ frames, hitches, lowFps: 1000 / (slowSum / slowest), p99Ms });\n};\n\nexport { computeFrameStats, HITCH_FACTOR };\n","/**\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 { readEnvironment } from \"./environment.ts\";\nimport { computeFrameStats } from \"./frame-stats.ts\";\nimport { GpuTimer } from \"./gpu-timer.ts\";\nimport { RingBuffer } from \"./ring-buffer.ts\";\nimport type {\n  Environment,\n  FrameStats,\n  PerfRenderer,\n  PerformanceMonitorOptions,\n  Sample,\n  TimingMetric,\n} 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 DEFAULT_FRAME_STATS_SIZE = 1000;\nconst FPS_SMOOTHING = 0.1;\n/**\n * A frame interval past this is a stall (hidden tab, breakpoint, laptop lid),\n * not a slow frame. It is left out of FPS so one gap doesn't flatten the\n * graph's scale for the whole history window.\n */\nconst STALL_MS = 1000;\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 *\n * CPU time runs from {@link begin} to the return of the frame's last\n * `render()` call, which the `render` patch stamps. So it holds even when\n * {@link end} is only reached on the next tick, as in the R3F sampler: it is\n * the JS work of the frame, not the interval to the next one.\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 lastRenderEndAt: number | null = null;\n  private readonly fpsHistory: RingBuffer;\n  private readonly cpuHistory: RingBuffer;\n  private readonly gpuHistory: RingBuffer;\n  private readonly frameIntervals: RingBuffer;\n  private frameStats: FrameStats | null = null;\n  private cpuStart = 0;\n  private lastBeginAt: number | null = null;\n  private frameFps = 0;\n  private smoothedFps = 0;\n  private sample: Sample;\n  private environment: Environment | null = null;\n\n  constructor(options: PerformanceMonitorOptions) {\n    const {\n      renderer,\n      trackGPU = true,\n      gpuQueryPoolSize = DEFAULT_GPU_POOL_SIZE,\n      historySize = DEFAULT_HISTORY_SIZE,\n      frameStatsSize = DEFAULT_FRAME_STATS_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      try {\n        return this.originalRender.apply(renderer, args);\n      } finally {\n        this.lastRenderEndAt = performance.now();\n      }\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.frameIntervals = new RingBuffer(frameStatsSize);\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\n      // A stall keeps the previous reading rather than logging a near-zero frame.\n      if (frameMs > 0 && frameMs <= STALL_MS) {\n        this.frameFps = 1000 / frameMs;\n        this.frameIntervals.push(frameMs);\n        this.frameStats = null;\n      }\n    }\n\n    this.lastBeginAt = now;\n    this.cpuStart = now;\n    this.lastRenderEndAt = null;\n    this.renderPasses = 0;\n    this.renderer.info.reset();\n    this.gpuTimer?.begin();\n  }\n\n  end() {\n    const now = performance.now();\n    // Without a render this frame there is nothing better than \"until end()\".\n    const cpu = (this.lastRenderEndAt ?? 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  /** 1% low, p99 frame time and hitches. Computed on read, cached until the next frame. */\n  getFrameStats(): FrameStats {\n    this.frameStats ??= computeFrameStats(this.frameIntervals.toArray());\n\n    return this.frameStats;\n  }\n\n  /**\n   * three revision, backend and GPU name. Cached once the backend is known;\n   * before `WebGPURenderer.init()` settles it, `backend` is `null` and the\n   * next call reads again.\n   */\n  getEnvironment(): Environment {\n    if (this.environment) {\n      return this.environment;\n    }\n\n    const environment = Object.freeze(readEnvironment(this.renderer));\n\n    if (environment.backend !== null) {\n      this.environment = environment;\n    }\n\n    return environment;\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    this.frameIntervals.clear();\n    this.frameStats = null;\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

@@ -1,5 +1,5 @@
-import { i as PerformanceMonitorOptions, t as PerformanceMonitor } from "./performance-monitor-CdaU8Dsv.js";
-import { t as MountPerfHudOptions } from "./mount-perf-hud-FmunHhel.js";
+import { o as PerformanceMonitorOptions, t as PerformanceMonitor } from "./performance-monitor-CBN05_BC.js";
+import { t as MountPerfHudOptions } from "./mount-perf-hud-CmINOH3T.js";
 //#region src/react/monitor-store.d.ts
 type MonitorListener = (monitor: PerformanceMonitor | null) => void;
 type PerfMonitorStore = {
@@ -38,7 +38,7 @@ type PerfSamplerProps = Omit<PerformanceMonitorOptions, "renderer"> & {
  * 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;
+declare function PerfSampler({ frameStatsSize, 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

@@ -1,5 +1,5 @@
-import { t as PerformanceMonitor } from "./performance-monitor-D_v7W312.js";
-import { t as mountPerfHud } from "./mount-perf-hud-CX9DrxjA.js";
+import { t as PerformanceMonitor } from "./performance-monitor-yxsxs57v.js";
+import { t as mountPerfHud } from "./mount-perf-hud-BLs1jkwM.js";
 import { useEffect, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 //#region src/react/monitor-store.ts
@@ -98,13 +98,14 @@ function PerfHud({ defaultPlacement, injectStyles, label, mode, parent, refreshH
 * 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 }) {
+function PerfSampler({ frameStatsSize, 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({
+			frameStatsSize,
 			gpuQueryPoolSize,
 			historySize,
 			renderer,
@@ -119,6 +120,7 @@ function PerfSampler({ gpuQueryPoolSize, historySize, store, trackGPU }) {
 			monitor.dispose();
 		};
 	}, [
+		frameStatsSize,
 		gpuQueryPoolSize,
 		historySize,
 		renderer,

package/dist/react.js.map

@@ -1 +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, useRef } from \"react\";\n\nimport {\n  mountPerfHud,\n  type MountPerfHudOptions,\n  type PerfHudHandle,\n} 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 *\n * `theme`, `mode` and `label` apply live through the handle. `defaultPlacement`\n * is compared by value, so an inline `{{ edge: \"right\" }}` literal is fine.\n * The remaining props (`storageKey`, `parent`, `refreshHz`, `injectStyles`,\n * `store`) remount the HUD when they change.\n */\nfunction PerfHud({\n  defaultPlacement,\n  injectStyles,\n  label,\n  mode,\n  parent,\n  refreshHz,\n  storageKey,\n  store,\n  theme,\n}: PerfHudProps) {\n  const source = store ?? defaultPerfMonitorStore;\n  const handleRef = useRef<PerfHudHandle | null>(null);\n  // The mount effect reads these through refs so changing them never remounts;\n  // the live effects below keep the refs current and push changes to the handle.\n  const themeRef = useRef(theme);\n  const modeRef = useRef(mode);\n  const labelRef = useRef(label);\n  // Primitives, so an inline `{{ edge: \"right\" }}` literal doesn't remount each render.\n  const placementEdge = defaultPlacement?.edge;\n  const placementAlign = defaultPlacement?.align;\n\n  useEffect(() => {\n    const attach = (monitor: ReturnType<PerfMonitorStore[\"get\"]>) => {\n      handleRef.current?.dispose();\n      handleRef.current = null;\n\n      if (!monitor) {\n        return;\n      }\n\n      handleRef.current = mountPerfHud(monitor, {\n        defaultPlacement: placementEdge\n          ? { align: placementAlign, edge: placementEdge }\n          : undefined,\n        injectStyles,\n        label: labelRef.current,\n        mode: modeRef.current,\n        parent,\n        refreshHz,\n        storageKey,\n        theme: themeRef.current,\n      });\n    };\n\n    const unsubscribe = source.subscribe(attach);\n    attach(source.get());\n\n    return () => {\n      unsubscribe();\n      handleRef.current?.dispose();\n      handleRef.current = null;\n    };\n  }, [injectStyles, parent, placementAlign, placementEdge, refreshHz, source, storageKey]);\n\n  useEffect(() => {\n    themeRef.current = theme;\n    handleRef.current?.setTheme(theme ?? \"system\");\n  }, [theme]);\n\n  useEffect(() => {\n    modeRef.current = mode;\n    handleRef.current?.setMode(mode ?? \"compact\");\n  }, [mode]);\n\n  useEffect(() => {\n    labelRef.current = label;\n    handleRef.current?.element.setAttribute(\"aria-label\", label ?? \"Performance\");\n  }, [label]);\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;;;;;;;;;;;;;AChBvD,SAAS,QAAQ,EACf,kBACA,cACA,OACA,MACA,QACA,WACA,YACA,OACA,SACe;CACf,MAAM,SAAS,SAAS;CACxB,MAAM,YAAY,OAA6B,IAAI;CAGnD,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAO,KAAK;CAE7B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,iBAAiB,kBAAkB;CAEzC,gBAAgB;EACd,MAAM,UAAU,YAAiD;GAC/D,UAAU,SAAS,QAAQ;GAC3B,UAAU,UAAU;GAEpB,IAAI,CAAC,SACH;GAGF,UAAU,UAAU,aAAa,SAAS;IACxC,kBAAkB,gBACd;KAAE,OAAO;KAAgB,MAAM;IAAc,IAC7C,KAAA;IACJ;IACA,OAAO,SAAS;IAChB,MAAM,QAAQ;IACd;IACA;IACA;IACA,OAAO,SAAS;GAClB,CAAC;EACH;EAEA,MAAM,cAAc,OAAO,UAAU,MAAM;EAC3C,OAAO,OAAO,IAAI,CAAC;EAEnB,aAAa;GACX,YAAY;GACZ,UAAU,SAAS,QAAQ;GAC3B,UAAU,UAAU;EACtB;CACF,GAAG;EAAC;EAAc;EAAQ;EAAgB;EAAe;EAAW;EAAQ;CAAU,CAAC;CAEvF,gBAAgB;EACd,SAAS,UAAU;EACnB,UAAU,SAAS,SAAS,SAAS,QAAQ;CAC/C,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,QAAQ,UAAU;EAClB,UAAU,SAAS,QAAQ,QAAQ,SAAS;CAC9C,GAAG,CAAC,IAAI,CAAC;CAET,gBAAgB;EACd,SAAS,UAAU;EACnB,UAAU,SAAS,QAAQ,aAAa,cAAc,SAAS,aAAa;CAC9E,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;AACT;;;;;;;;;AC7EA,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"}
+{"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, useRef } from \"react\";\n\nimport {\n  mountPerfHud,\n  type MountPerfHudOptions,\n  type PerfHudHandle,\n} 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 *\n * `theme`, `mode` and `label` apply live through the handle. `defaultPlacement`\n * is compared by value, so an inline `{{ edge: \"right\" }}` literal is fine.\n * The remaining props (`storageKey`, `parent`, `refreshHz`, `injectStyles`,\n * `store`) remount the HUD when they change.\n */\nfunction PerfHud({\n  defaultPlacement,\n  injectStyles,\n  label,\n  mode,\n  parent,\n  refreshHz,\n  storageKey,\n  store,\n  theme,\n}: PerfHudProps) {\n  const source = store ?? defaultPerfMonitorStore;\n  const handleRef = useRef<PerfHudHandle | null>(null);\n  // The mount effect reads these through refs so changing them never remounts;\n  // the live effects below keep the refs current and push changes to the handle.\n  const themeRef = useRef(theme);\n  const modeRef = useRef(mode);\n  const labelRef = useRef(label);\n  // Primitives, so an inline `{{ edge: \"right\" }}` literal doesn't remount each render.\n  const placementEdge = defaultPlacement?.edge;\n  const placementAlign = defaultPlacement?.align;\n\n  useEffect(() => {\n    const attach = (monitor: ReturnType<PerfMonitorStore[\"get\"]>) => {\n      handleRef.current?.dispose();\n      handleRef.current = null;\n\n      if (!monitor) {\n        return;\n      }\n\n      handleRef.current = mountPerfHud(monitor, {\n        defaultPlacement: placementEdge\n          ? { align: placementAlign, edge: placementEdge }\n          : undefined,\n        injectStyles,\n        label: labelRef.current,\n        mode: modeRef.current,\n        parent,\n        refreshHz,\n        storageKey,\n        theme: themeRef.current,\n      });\n    };\n\n    const unsubscribe = source.subscribe(attach);\n    attach(source.get());\n\n    return () => {\n      unsubscribe();\n      handleRef.current?.dispose();\n      handleRef.current = null;\n    };\n  }, [injectStyles, parent, placementAlign, placementEdge, refreshHz, source, storageKey]);\n\n  useEffect(() => {\n    themeRef.current = theme;\n    handleRef.current?.setTheme(theme ?? \"system\");\n  }, [theme]);\n\n  useEffect(() => {\n    modeRef.current = mode;\n    handleRef.current?.setMode(mode ?? \"compact\");\n  }, [mode]);\n\n  useEffect(() => {\n    labelRef.current = label;\n    handleRef.current?.element.setAttribute(\"aria-label\", label ?? \"Performance\");\n  }, [label]);\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({\n  frameStatsSize,\n  gpuQueryPoolSize,\n  historySize,\n  store,\n  trackGPU,\n}: 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      frameStatsSize,\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  }, [frameStatsSize, 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;;;;;;;;;;;;;AChBvD,SAAS,QAAQ,EACf,kBACA,cACA,OACA,MACA,QACA,WACA,YACA,OACA,SACe;CACf,MAAM,SAAS,SAAS;CACxB,MAAM,YAAY,OAA6B,IAAI;CAGnD,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAO,KAAK;CAE7B,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,iBAAiB,kBAAkB;CAEzC,gBAAgB;EACd,MAAM,UAAU,YAAiD;GAC/D,UAAU,SAAS,QAAQ;GAC3B,UAAU,UAAU;GAEpB,IAAI,CAAC,SACH;GAGF,UAAU,UAAU,aAAa,SAAS;IACxC,kBAAkB,gBACd;KAAE,OAAO;KAAgB,MAAM;IAAc,IAC7C,KAAA;IACJ;IACA,OAAO,SAAS;IAChB,MAAM,QAAQ;IACd;IACA;IACA;IACA,OAAO,SAAS;GAClB,CAAC;EACH;EAEA,MAAM,cAAc,OAAO,UAAU,MAAM;EAC3C,OAAO,OAAO,IAAI,CAAC;EAEnB,aAAa;GACX,YAAY;GACZ,UAAU,SAAS,QAAQ;GAC3B,UAAU,UAAU;EACtB;CACF,GAAG;EAAC;EAAc;EAAQ;EAAgB;EAAe;EAAW;EAAQ;CAAU,CAAC;CAEvF,gBAAgB;EACd,SAAS,UAAU;EACnB,UAAU,SAAS,SAAS,SAAS,QAAQ;CAC/C,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,QAAQ,UAAU;EAClB,UAAU,SAAS,QAAQ,QAAQ,SAAS;CAC9C,GAAG,CAAC,IAAI,CAAC;CAET,gBAAgB;EACd,SAAS,UAAU;EACnB,UAAU,SAAS,QAAQ,aAAa,cAAc,SAAS,aAAa;CAC9E,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;AACT;;;;;;;;;AC7EA,SAAS,YAAY,EACnB,gBACA,kBACA,aACA,OACA,YACmB;CACnB,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;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;EAAgB;EAAkB;EAAa;EAAU;EAAQ;CAAQ,CAAC;CAE9E,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"}

package/dist/styles.css

@@ -176,6 +176,27 @@
   color: inherit;
 }
 
+.perf-monitor__button {
+  flex: none;
+  min-width: 7ch;
+  padding: 0 6px;
+  border: 1px solid var(--perf-border);
+  border-radius: 3px;
+  background: var(--perf-row);
+  color: var(--perf-fg-dim);
+  font: inherit;
+  cursor: pointer;
+}
+
+.perf-monitor__button:hover {
+  color: var(--perf-fg);
+}
+
+.perf-monitor__button:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: 1px;
+}
+
 .perf-monitor__checkbox {
   flex: none;
   margin: 0;
@@ -242,15 +263,90 @@
   text-align: right;
 }
 
+.perf-monitor__footer {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 8px 6px 0;
+  border-top: 1px solid var(--perf-border);
+  color: var(--perf-muted);
+  font-size: 10px;
+}
+
+.perf-monitor__footer-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.perf-monitor__footer-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.perf-monitor__footer-row[hidden],
+.perf-monitor__badge[hidden] {
+  display: none;
+}
+
+.perf-monitor__footer-gpu {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--perf-fg-dim);
+}
+
+.perf-monitor__badge {
+  flex: none;
+  padding: 0 5px;
+  border: 1px solid var(--perf-border);
+  border-radius: 3px;
+  color: var(--perf-fg-dim);
+  letter-spacing: 0.04em;
+}
+
+.perf-monitor__badge.is-fallback {
+  border-color: #f59e0b;
+  color: #f59e0b;
+}
+
+.perf-monitor[data-theme="light"] .perf-monitor__badge.is-fallback {
+  border-color: #d97706;
+  color: #b45309;
+}
+
+.perf-monitor__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.perf-monitor__link:hover,
+.perf-monitor__link:focus-visible {
+  color: var(--perf-accent);
+  text-decoration: underline;
+}
+
 .perf-monitor--full .perf-monitor__hud {
   display: none;
 }
 
 .perf-monitor--compact .perf-monitor__graphs,
-.perf-monitor--compact .perf-monitor__section {
+.perf-monitor--compact .perf-monitor__section,
+.perf-monitor--compact:not(.perf-monitor--info) .perf-monitor__footer,
+.perf-monitor--compact .perf-monitor__footer > .perf-monitor__checkbox {
   display: none;
 }
 
+.perf-monitor--compact .perf-monitor__footer {
+  padding: 6px 2px 2px;
+}
+
 .perf-monitor--compact {
   padding: 4px 8px;
 }

package/dist/ui.d.ts

@@ -1,11 +1,16 @@
-import { C as dockPanel, S as ScreenEdge, _ as DefaultPlacement, a as PerformanceViewMode, b as DockPanelOptions, c as HudDefaults, d as HudSettingsOptions, f as HudTheme, g as isThemeMode, h as ThemeMode, i as PerformanceView, l as HudSelection, m as THEME_MODES, n as PerfHudHandle, o as PerformanceViewOptions, p as ResolvedTheme, r as mountPerfHud, s as DEFAULT_STORAGE_KEY, t as MountPerfHudOptions, u as HudSettings, v as DockAlign, x as Placement, y as DockHandle } from "./mount-perf-hud-FmunHhel.js";
+import { t as PerformanceMonitor } from "./performance-monitor-CBN05_BC.js";
+import { C as dockPanel, S as ScreenEdge, _ as DefaultPlacement, a as PerformanceViewMode, b as DockPanelOptions, c as HudDefaults, d as HudSettingsOptions, f as HudTheme, g as isThemeMode, h as ThemeMode, i as PerformanceView, l as HudSelection, m as THEME_MODES, n as PerfHudHandle, o as PerformanceViewOptions, p as ResolvedTheme, r as mountPerfHud, s as DEFAULT_STORAGE_KEY, t as MountPerfHudOptions, u as HudSettings, v as DockAlign, x as Placement, y as DockHandle } from "./mount-perf-hud-CmINOH3T.js";
+//#region src/ui/report.d.ts
+/** The report for `monitor` right now, as Markdown ready to paste into an issue. */
+declare const formatReport: (monitor: PerformanceMonitor) => string;
+//#endregion
 //#region src/ui/styles.d.ts
-declare const PERF_HUD_STYLES = "\n.perf-hud,\n.perf-monitor {\n  --perf-bg: rgba(22, 24, 29, 0.85);\n  --perf-fg: #e6e8eb;\n  --perf-fg-dim: #c5c8ce;\n  --perf-muted: #8b909a;\n  --perf-row: rgba(255, 255, 255, 0.04);\n  --perf-border: rgba(255, 255, 255, 0.12);\n  --perf-accent: #60a5fa;\n  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);\n\n  color-scheme: dark;\n}\n\n.perf-hud[data-theme=\"light\"],\n.perf-monitor[data-theme=\"light\"] {\n  --perf-bg: rgba(250, 250, 252, 0.88);\n  --perf-fg: #1a1c21;\n  --perf-fg-dim: #4b5058;\n  --perf-muted: #6b7079;\n  --perf-row: rgba(0, 0, 0, 0.05);\n  --perf-border: rgba(0, 0, 0, 0.12);\n  --perf-accent: #2563eb;\n  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\n\n  color-scheme: light;\n}\n\n.perf-monitor {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 8px;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--perf-fg);\n}\n\n.perf-monitor__graphs {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.perf-monitor__graph {\n  position: relative;\n  height: 40px;\n  background: var(--perf-row);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.perf-monitor__canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.perf-monitor__graph-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 8px;\n  pointer-events: none;\n}\n\n.perf-monitor__graph-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.perf-monitor__graph-overlay .perf-monitor__graph-head {\n  pointer-events: auto;\n}\n\n.perf-monitor__graph-label {\n  color: var(--perf-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  font-size: 10px;\n}\n\n.perf-monitor__graph-value {\n  min-width: 6ch;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.perf-monitor__row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 6px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.perf-monitor__row:nth-child(even) {\n  background: var(--perf-row);\n}\n\n.perf-monitor__label {\n  flex: 1;\n  color: var(--perf-muted);\n}\n\n.perf-monitor__icon {\n  flex: none;\n  width: 12px;\n  height: 12px;\n  color: var(--perf-muted);\n}\n\n.perf-monitor__options {\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--perf-border);\n}\n\n.perf-monitor__row--static {\n  cursor: default;\n}\n\n/* Light / system / dark, as a small segmented radio group. */\n.perf-monitor__segment {\n  display: inline-flex;\n  flex: none;\n  gap: 1px;\n  padding: 1px;\n  border-radius: 4px;\n  background: var(--perf-row);\n}\n\n.perf-monitor__segment-option {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: var(--perf-muted);\n  cursor: pointer;\n}\n\n.perf-monitor__segment-option:hover {\n  color: var(--perf-fg);\n}\n\n.perf-monitor__segment-option[aria-checked=\"true\"] {\n  color: var(--perf-fg);\n  background: var(--perf-border);\n}\n\n.perf-monitor__segment-option:focus-visible {\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n\n.perf-monitor__segment-option .perf-monitor__icon {\n  width: 11px;\n  height: 11px;\n  color: inherit;\n}\n\n.perf-monitor__checkbox {\n  flex: none;\n  margin: 0;\n  width: 12px;\n  height: 12px;\n  accent-color: var(--perf-accent);\n  cursor: pointer;\n}\n\n.perf-monitor__value {\n  min-width: 7ch;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__hud {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 2px;\n}\n\n.perf-monitor__hud-graphs {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.perf-monitor__hud-graphs:empty {\n  display: none;\n}\n\n.perf-monitor__hud-graph {\n  position: relative;\n  height: 28px;\n  background: var(--perf-row);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.perf-monitor__hud-grid {\n  display: grid;\n  grid-template-columns: auto 6ch auto 6ch;\n  align-items: baseline;\n  gap: 2px 8px;\n}\n\n.perf-monitor__hud-grid:empty {\n  display: none;\n}\n\n.perf-monitor__hud-item {\n  display: contents;\n}\n\n.perf-monitor__hud-label {\n  color: var(--perf-muted);\n  font-size: 10px;\n}\n\n.perf-monitor__hud-value {\n  font-weight: 600;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor--full .perf-monitor__hud {\n  display: none;\n}\n\n.perf-monitor--compact .perf-monitor__graphs,\n.perf-monitor--compact .perf-monitor__section {\n  display: none;\n}\n\n.perf-monitor--compact {\n  padding: 4px 8px;\n}\n\n.perf-hud {\n  position: fixed;\n  z-index: 9999;\n  /* Safari resolves width:100% canvases against the viewport on a fixed\n     host with auto width. Shrink-wrap so expand stays a card, not the window. */\n  width: max-content;\n  max-width: min(20rem, calc(100vw - 48px));\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  user-select: none;\n  touch-action: none;\n}\n\n.perf-hud--full > .perf-monitor {\n  width: 16rem;\n  max-width: 100%;\n}\n\n.perf-hud > .perf-monitor {\n  position: relative;\n  z-index: 1;\n  max-height: 70vh;\n  overflow: auto;\n  background: var(--perf-bg);\n  border-radius: 6px;\n  box-shadow: var(--perf-shadow);\n  backdrop-filter: blur(2px);\n  pointer-events: auto;\n  transition: opacity 0.25s ease;\n}\n\n.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {\n  opacity: 0.32;\n}\n\n.perf-hud__hotspot {\n  position: absolute;\n  z-index: 0;\n  inset: -20px;\n  pointer-events: auto;\n}\n\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__hotspot {\n  right: -46px;\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__hotspot {\n  left: -46px;\n}\n\n.perf-hud__tools {\n  position: absolute;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.15s ease;\n}\n\n.perf-hud.is-awake .perf-hud__tools,\n.perf-hud.is-dragging .perf-hud__tools {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Inward side: right by default, left when docked to the right edge. */\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__tools {\n  left: calc(100% + 6px);\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__tools {\n  right: calc(100% + 6px);\n}\n\n.perf-hud__disc {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  background: var(--perf-bg);\n  box-shadow: var(--perf-shadow);\n  color: var(--perf-fg-dim);\n  cursor: pointer;\n  backdrop-filter: blur(2px);\n}\n\n.perf-hud__icon {\n  width: 12px;\n  height: 12px;\n}\n\n.perf-hud__drag {\n  cursor: grab;\n}\n\n.perf-hud.is-dragging .perf-hud__drag {\n  cursor: grabbing;\n}\n\n.perf-hud__disc:hover,\n.perf-hud__disc:focus-visible,\n.perf-hud__disc[aria-pressed=\"true\"] {\n  color: var(--perf-fg);\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n";
+declare const PERF_HUD_STYLES = "\n.perf-hud,\n.perf-monitor {\n  --perf-bg: rgba(22, 24, 29, 0.85);\n  --perf-fg: #e6e8eb;\n  --perf-fg-dim: #c5c8ce;\n  --perf-muted: #8b909a;\n  --perf-row: rgba(255, 255, 255, 0.04);\n  --perf-border: rgba(255, 255, 255, 0.12);\n  --perf-accent: #60a5fa;\n  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);\n\n  color-scheme: dark;\n}\n\n.perf-hud[data-theme=\"light\"],\n.perf-monitor[data-theme=\"light\"] {\n  --perf-bg: rgba(250, 250, 252, 0.88);\n  --perf-fg: #1a1c21;\n  --perf-fg-dim: #4b5058;\n  --perf-muted: #6b7079;\n  --perf-row: rgba(0, 0, 0, 0.05);\n  --perf-border: rgba(0, 0, 0, 0.12);\n  --perf-accent: #2563eb;\n  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\n\n  color-scheme: light;\n}\n\n.perf-monitor {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 8px;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--perf-fg);\n}\n\n.perf-monitor__graphs {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.perf-monitor__graph {\n  position: relative;\n  height: 40px;\n  background: var(--perf-row);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.perf-monitor__canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.perf-monitor__graph-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 8px;\n  pointer-events: none;\n}\n\n.perf-monitor__graph-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.perf-monitor__graph-overlay .perf-monitor__graph-head {\n  pointer-events: auto;\n}\n\n.perf-monitor__graph-label {\n  color: var(--perf-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  font-size: 10px;\n}\n\n.perf-monitor__graph-value {\n  min-width: 6ch;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.perf-monitor__row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 6px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.perf-monitor__row:nth-child(even) {\n  background: var(--perf-row);\n}\n\n.perf-monitor__label {\n  flex: 1;\n  color: var(--perf-muted);\n}\n\n.perf-monitor__icon {\n  flex: none;\n  width: 12px;\n  height: 12px;\n  color: var(--perf-muted);\n}\n\n.perf-monitor__options {\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--perf-border);\n}\n\n.perf-monitor__row--static {\n  cursor: default;\n}\n\n/* Light / system / dark, as a small segmented radio group. */\n.perf-monitor__segment {\n  display: inline-flex;\n  flex: none;\n  gap: 1px;\n  padding: 1px;\n  border-radius: 4px;\n  background: var(--perf-row);\n}\n\n.perf-monitor__segment-option {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: var(--perf-muted);\n  cursor: pointer;\n}\n\n.perf-monitor__segment-option:hover {\n  color: var(--perf-fg);\n}\n\n.perf-monitor__segment-option[aria-checked=\"true\"] {\n  color: var(--perf-fg);\n  background: var(--perf-border);\n}\n\n.perf-monitor__segment-option:focus-visible {\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n\n.perf-monitor__segment-option .perf-monitor__icon {\n  width: 11px;\n  height: 11px;\n  color: inherit;\n}\n\n.perf-monitor__button {\n  flex: none;\n  min-width: 7ch;\n  padding: 0 6px;\n  border: 1px solid var(--perf-border);\n  border-radius: 3px;\n  background: var(--perf-row);\n  color: var(--perf-fg-dim);\n  font: inherit;\n  cursor: pointer;\n}\n\n.perf-monitor__button:hover {\n  color: var(--perf-fg);\n}\n\n.perf-monitor__button:focus-visible {\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n\n.perf-monitor__checkbox {\n  flex: none;\n  margin: 0;\n  width: 12px;\n  height: 12px;\n  accent-color: var(--perf-accent);\n  cursor: pointer;\n}\n\n.perf-monitor__value {\n  min-width: 7ch;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__hud {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 2px;\n}\n\n.perf-monitor__hud-graphs {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.perf-monitor__hud-graphs:empty {\n  display: none;\n}\n\n.perf-monitor__hud-graph {\n  position: relative;\n  height: 28px;\n  background: var(--perf-row);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.perf-monitor__hud-grid {\n  display: grid;\n  grid-template-columns: auto 6ch auto 6ch;\n  align-items: baseline;\n  gap: 2px 8px;\n}\n\n.perf-monitor__hud-grid:empty {\n  display: none;\n}\n\n.perf-monitor__hud-item {\n  display: contents;\n}\n\n.perf-monitor__hud-label {\n  color: var(--perf-muted);\n  font-size: 10px;\n}\n\n.perf-monitor__hud-value {\n  font-weight: 600;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__footer {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  padding: 8px 6px 0;\n  border-top: 1px solid var(--perf-border);\n  color: var(--perf-muted);\n  font-size: 10px;\n}\n\n.perf-monitor__footer-body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.perf-monitor__footer-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  min-width: 0;\n}\n\n.perf-monitor__footer-row[hidden],\n.perf-monitor__badge[hidden] {\n  display: none;\n}\n\n.perf-monitor__footer-gpu {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--perf-fg-dim);\n}\n\n.perf-monitor__badge {\n  flex: none;\n  padding: 0 5px;\n  border: 1px solid var(--perf-border);\n  border-radius: 3px;\n  color: var(--perf-fg-dim);\n  letter-spacing: 0.04em;\n}\n\n.perf-monitor__badge.is-fallback {\n  border-color: #f59e0b;\n  color: #f59e0b;\n}\n\n.perf-monitor[data-theme=\"light\"] .perf-monitor__badge.is-fallback {\n  border-color: #d97706;\n  color: #b45309;\n}\n\n.perf-monitor__link {\n  color: inherit;\n  text-decoration: none;\n}\n\n.perf-monitor__link:hover,\n.perf-monitor__link:focus-visible {\n  color: var(--perf-accent);\n  text-decoration: underline;\n}\n\n.perf-monitor--full .perf-monitor__hud {\n  display: none;\n}\n\n.perf-monitor--compact .perf-monitor__graphs,\n.perf-monitor--compact .perf-monitor__section,\n.perf-monitor--compact:not(.perf-monitor--info) .perf-monitor__footer,\n.perf-monitor--compact .perf-monitor__footer > .perf-monitor__checkbox {\n  display: none;\n}\n\n.perf-monitor--compact .perf-monitor__footer {\n  padding: 6px 2px 2px;\n}\n\n.perf-monitor--compact {\n  padding: 4px 8px;\n}\n\n.perf-hud {\n  position: fixed;\n  z-index: 9999;\n  /* Safari resolves width:100% canvases against the viewport on a fixed\n     host with auto width. Shrink-wrap so expand stays a card, not the window. */\n  width: max-content;\n  max-width: min(20rem, calc(100vw - 48px));\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  user-select: none;\n  touch-action: none;\n}\n\n.perf-hud--full > .perf-monitor {\n  width: 16rem;\n  max-width: 100%;\n}\n\n.perf-hud > .perf-monitor {\n  position: relative;\n  z-index: 1;\n  max-height: 70vh;\n  overflow: auto;\n  background: var(--perf-bg);\n  border-radius: 6px;\n  box-shadow: var(--perf-shadow);\n  backdrop-filter: blur(2px);\n  pointer-events: auto;\n  transition: opacity 0.25s ease;\n}\n\n.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {\n  opacity: 0.32;\n}\n\n.perf-hud__hotspot {\n  position: absolute;\n  z-index: 0;\n  inset: -20px;\n  pointer-events: auto;\n}\n\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__hotspot {\n  right: -46px;\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__hotspot {\n  left: -46px;\n}\n\n.perf-hud__tools {\n  position: absolute;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.15s ease;\n}\n\n.perf-hud.is-awake .perf-hud__tools,\n.perf-hud.is-dragging .perf-hud__tools {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Inward side: right by default, left when docked to the right edge. */\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__tools {\n  left: calc(100% + 6px);\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__tools {\n  right: calc(100% + 6px);\n}\n\n.perf-hud__disc {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  background: var(--perf-bg);\n  box-shadow: var(--perf-shadow);\n  color: var(--perf-fg-dim);\n  cursor: pointer;\n  backdrop-filter: blur(2px);\n}\n\n.perf-hud__icon {\n  width: 12px;\n  height: 12px;\n}\n\n.perf-hud__drag {\n  cursor: grab;\n}\n\n.perf-hud.is-dragging .perf-hud__drag {\n  cursor: grabbing;\n}\n\n.perf-hud__disc:hover,\n.perf-hud__disc:focus-visible,\n.perf-hud__disc[aria-pressed=\"true\"] {\n  color: var(--perf-fg);\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n";
 /**
  * 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.
  */
 declare const injectStyles: (target?: Document) => void;
 //#endregion
-export { DEFAULT_STORAGE_KEY, type DefaultPlacement, type DockAlign, type DockHandle, type DockPanelOptions, type HudDefaults, type HudSelection, HudSettings, type HudSettingsOptions, HudTheme, type MountPerfHudOptions, PERF_HUD_STYLES, type PerfHudHandle, PerformanceView, type PerformanceViewMode, type PerformanceViewOptions, type Placement, type ResolvedTheme, type ScreenEdge, THEME_MODES, type ThemeMode, dockPanel, injectStyles, isThemeMode, mountPerfHud };
+export { DEFAULT_STORAGE_KEY, type DefaultPlacement, type DockAlign, type DockHandle, type DockPanelOptions, type HudDefaults, type HudSelection, HudSettings, type HudSettingsOptions, HudTheme, type MountPerfHudOptions, PERF_HUD_STYLES, type PerfHudHandle, PerformanceView, type PerformanceViewMode, type PerformanceViewOptions, type Placement, type ResolvedTheme, type ScreenEdge, THEME_MODES, type ThemeMode, dockPanel, formatReport, injectStyles, isThemeMode, mountPerfHud };
 //# sourceMappingURL=ui.d.ts.map

package/dist/ui.js

@@ -1,2 +1,2 @@
-import { a as dockPanel, c as HudTheme, i as PerformanceView, l as THEME_MODES, n as PERF_HUD_STYLES, o as DEFAULT_STORAGE_KEY, r as injectStyles, s as HudSettings, t as mountPerfHud, u as isThemeMode } from "./mount-perf-hud-CX9DrxjA.js";
-export { DEFAULT_STORAGE_KEY, HudSettings, HudTheme, PERF_HUD_STYLES, PerformanceView, THEME_MODES, dockPanel, injectStyles, isThemeMode, mountPerfHud };
+import { a as formatReport, c as HudSettings, d as isThemeMode, i as PerformanceView, l as HudTheme, n as PERF_HUD_STYLES, o as dockPanel, r as injectStyles, s as DEFAULT_STORAGE_KEY, t as mountPerfHud, u as THEME_MODES } from "./mount-perf-hud-BLs1jkwM.js";
+export { DEFAULT_STORAGE_KEY, HudSettings, HudTheme, PERF_HUD_STYLES, PerformanceView, THEME_MODES, dockPanel, formatReport, injectStyles, isThemeMode, mountPerfHud };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zkmake/three-meter",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Zero-dependency three.js frame metrics (FPS, CPU, GPU, draw calls) with a dockable HUD. Vanilla three and React Three Fiber adapters.",
   "keywords": [
     "devtools",

package/dist/mount-perf-hud-CX9DrxjA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mount-perf-hud-CX9DrxjA.js","names":[],"sources":["../src/ui/theme.ts","../src/ui/hud-settings.ts","../src/ui/dock-panel.ts","../src/ui/icons.ts","../src/ui/format.ts","../src/ui/sparkline.ts","../src/ui/performance-view.ts","../src/ui/styles.ts","../src/ui/mount-perf-hud.ts"],"sourcesContent":["/**\n * Dark, light, or follow the OS. One instance per HUD: the floating host and\n * the card inside it both paint `resolved` onto `data-theme`, and the\n * stylesheet picks the palette from that attribute.\n *\n * Two layers. `mode` is what the consumer asked for (the `theme` option,\n * `setTheme`). `override` is what the person using the HUD picked in the\n * panel, kept in `HudSettings`; it wins while set. `effective` is whichever\n * applies, and `system` there tracks `prefers-color-scheme` for as long as\n * the instance lives.\n */\ntype ThemeMode = \"dark\" | \"light\" | \"system\";\ntype ResolvedTheme = Exclude<ThemeMode, \"system\">;\n\nconst THEME_MODES: readonly ThemeMode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isThemeMode = (value: unknown): value is ThemeMode =>\n  typeof value === \"string\" && (THEME_MODES as readonly string[]).includes(value);\n\nclass HudTheme {\n  private current: ThemeMode;\n  private userPick: ThemeMode | null = null;\n  private readonly listeners = new Set<() => void>();\n  private media: MediaQueryList | null = null;\n  private readonly onSchemeChange = () => this.notify();\n\n  constructor(mode: ThemeMode = \"system\") {\n    this.current = mode;\n    this.watch();\n  }\n\n  /** What the consumer asked for. */\n  get mode(): ThemeMode {\n    return this.current;\n  }\n\n  /** What the person using the HUD picked in the panel, or `null` for no pick. */\n  get override(): ThemeMode | null {\n    return this.userPick;\n  }\n\n  /** The layer that applies: the user's pick if there is one, else the consumer's mode. */\n  get effective(): ThemeMode {\n    return this.userPick ?? this.current;\n  }\n\n  /**\n   * `dark` or `light`, with `system` resolved against the OS preference.\n   * Where `matchMedia` is missing, `system` falls back to `dark`, the HUD's\n   * original palette.\n   */\n  get resolved(): ResolvedTheme {\n    const effective = this.effective;\n\n    if (effective !== \"system\") {\n      return effective;\n    }\n\n    if (!this.media) {\n      return \"dark\";\n    }\n\n    return this.media.matches ? \"dark\" : \"light\";\n  }\n\n  setMode(mode: ThemeMode) {\n    if (mode === this.current) {\n      return;\n    }\n\n    this.current = mode;\n    this.watch();\n    this.notify();\n  }\n\n  setOverride(mode: ThemeMode | null) {\n    if (mode === this.userPick) {\n      return;\n    }\n\n    this.userPick = mode;\n    this.watch();\n    this.notify();\n  }\n\n  /** Fires on `setMode`, `setOverride` and, in `system`, whenever the OS preference flips. */\n  subscribe(listener: () => void) {\n    this.listeners.add(listener);\n\n    return () => {\n      this.listeners.delete(listener);\n    };\n  }\n\n  /** Stop tracking the OS preference and drop every subscriber. */\n  dispose() {\n    this.unwatch();\n    this.listeners.clear();\n  }\n\n  private watch() {\n    if (this.effective !== \"system\") {\n      this.unwatch();\n\n      return;\n    }\n\n    if (this.media || typeof matchMedia !== \"function\") {\n      return;\n    }\n\n    this.media = matchMedia(DARK_SCHEME_QUERY);\n    this.media.addEventListener(\"change\", this.onSchemeChange);\n  }\n\n  private unwatch() {\n    this.media?.removeEventListener(\"change\", this.onSchemeChange);\n    this.media = null;\n  }\n\n  private notify() {\n    for (const listener of this.listeners) {\n      listener();\n    }\n  }\n}\n\n/** Paint the resolved theme onto an element for the stylesheet to key off. */\nconst applyTheme = (element: HTMLElement, theme: HudTheme) => {\n  element.dataset.theme = theme.resolved;\n};\n\nexport { applyTheme, HudTheme, isThemeMode, THEME_MODES };\nexport type { ResolvedTheme, ThemeMode };\n","/**\n * Which metrics the compact HUD shows, the dim-on-leave toggle, and the theme\n * the person using the HUD picked in the panel (`null` until they pick one,\n * so the consumer's `theme` option applies). One instance per HUD; the\n * full-mode controls and the compact card stay in sync through it. Persists\n * to `localStorage` under `storageKey` (pass `null` to keep it in memory only).\n */\nimport type { TimingMetric } from \"../core/types.ts\";\nimport { isThemeMode, type ThemeMode } from \"./theme.ts\";\n\ntype HudSelection = {\n  dim: boolean;\n  graphs: ReadonlySet<TimingMetric>;\n  numbers: ReadonlySet<string>;\n  theme: ThemeMode | null;\n};\n\ntype HudDefaults = {\n  dim?: boolean;\n  graphs?: readonly TimingMetric[];\n  numbers?: readonly string[];\n};\n\ntype HudSettingsOptions = {\n  /** localStorage key. Default `three-meter`; `null` disables persistence. */\n  storageKey?: string | null;\n  /** What a first visit shows. */\n  defaults?: HudDefaults;\n};\n\ntype MutableSelection = {\n  dim: boolean;\n  graphs: Set<TimingMetric>;\n  numbers: Set<string>;\n  theme: ThemeMode | null;\n};\n\nconst DEFAULT_STORAGE_KEY = \"three-meter\";\nconst DEFAULT_DIM = false;\nconst DEFAULT_NUMBERS: readonly string[] = [\"fps\", \"calls\", \"cpu\", \"gpu\"];\nconst DEFAULT_GRAPHS: readonly TimingMetric[] = [];\nconst TIMING_METRICS = new Set<TimingMetric>([\"fps\", \"cpu\", \"gpu\"]);\n\nconst isTimingMetric = (value: string): value is TimingMetric =>\n  TIMING_METRICS.has(value as TimingMetric);\n\nclass HudSettings {\n  private readonly storageKey: string | null;\n  private readonly defaults: Required<HudDefaults>;\n  private readonly listeners = new Set<() => void>();\n  private readonly state: MutableSelection;\n\n  constructor(options: HudSettingsOptions = {}) {\n    this.storageKey = options.storageKey === undefined ? DEFAULT_STORAGE_KEY : options.storageKey;\n    this.defaults = {\n      dim: options.defaults?.dim ?? DEFAULT_DIM,\n      graphs: options.defaults?.graphs ?? DEFAULT_GRAPHS,\n      numbers: options.defaults?.numbers ?? DEFAULT_NUMBERS,\n    };\n    this.state = this.load();\n  }\n\n  get selection(): HudSelection {\n    return this.state;\n  }\n\n  get dim() {\n    return this.state.dim;\n  }\n\n  setDim(enabled: boolean) {\n    this.state.dim = enabled;\n    this.persistAndNotify();\n  }\n\n  /** The user's pick in the panel; `null` means none, so the consumer's option applies. */\n  get theme() {\n    return this.state.theme;\n  }\n\n  setTheme(mode: ThemeMode | null) {\n    this.state.theme = mode;\n    this.persistAndNotify();\n  }\n\n  isNumberEnabled(key: string) {\n    return this.state.numbers.has(key);\n  }\n\n  isGraphEnabled(metric: TimingMetric) {\n    return this.state.graphs.has(metric);\n  }\n\n  setNumberEnabled(key: string, enabled: boolean) {\n    if (enabled) {\n      this.state.numbers.add(key);\n    } else {\n      this.state.numbers.delete(key);\n    }\n\n    this.persistAndNotify();\n  }\n\n  setGraphEnabled(metric: TimingMetric, enabled: boolean) {\n    if (enabled) {\n      this.state.graphs.add(metric);\n    } else {\n      this.state.graphs.delete(metric);\n    }\n\n    this.persistAndNotify();\n  }\n\n  subscribe(listener: () => void) {\n    this.listeners.add(listener);\n\n    return () => {\n      this.listeners.delete(listener);\n    };\n  }\n\n  private load(): MutableSelection {\n    const fallback = (): MutableSelection => ({\n      dim: this.defaults.dim,\n      graphs: new Set(this.defaults.graphs),\n      numbers: new Set(this.defaults.numbers),\n      theme: null,\n    });\n\n    if (this.storageKey === null) {\n      return fallback();\n    }\n\n    try {\n      const raw = localStorage.getItem(this.storageKey);\n\n      if (!raw) {\n        return fallback();\n      }\n\n      const parsed = JSON.parse(raw) as {\n        dim?: boolean;\n        graphs?: string[];\n        numbers?: string[];\n        theme?: unknown;\n      };\n\n      return {\n        dim: parsed.dim ?? this.defaults.dim,\n        graphs: new Set((parsed.graphs ?? this.defaults.graphs).filter(isTimingMetric)),\n        numbers: new Set(parsed.numbers ?? this.defaults.numbers),\n        theme: isThemeMode(parsed.theme) ? parsed.theme : null,\n      };\n    } catch {\n      // Malformed or unavailable storage → defaults.\n      return fallback();\n    }\n  }\n\n  private persistAndNotify() {\n    if (this.storageKey !== null) {\n      try {\n        localStorage.setItem(\n          this.storageKey,\n          JSON.stringify({\n            dim: this.state.dim,\n            graphs: [...this.state.graphs],\n            numbers: [...this.state.numbers],\n            // Omitted while null: JSON.stringify drops undefined.\n            theme: this.state.theme ?? undefined,\n          }),\n        );\n      } catch {\n        // In-memory selection still drives the live views.\n      }\n    }\n\n    for (const listener of this.listeners) {\n      listener();\n    }\n  }\n}\n\nexport { DEFAULT_STORAGE_KEY, HudSettings };\nexport type { HudDefaults, HudSelection, HudSettingsOptions };\n","/**\n * Dock a fixed-position panel to a screen edge. Dragging the handle snaps it\n * to the nearest edge on drop; the edge and the offset along it persist under\n * `<storageKey>:placement`. A stored box whose centre sits outside the current\n * viewport is re-docked to whichever edge that box is closest to.\n */\nimport { DEFAULT_STORAGE_KEY } from \"./hud-settings.ts\";\n\nconst INSET = 10;\n/** Room for the stacked control discs on the inward side of the panel. */\nconst SIDE_CLEARANCE = 26;\nconst DRAG_THRESHOLD = 4;\nconst EDGES = [\"left\", \"right\", \"top\", \"bottom\"] as const;\n\ntype ScreenEdge = (typeof EDGES)[number];\n\ntype Placement = {\n  /** Top (left/right) or left (top/bottom) of the host, in CSS pixels. */\n  along: number;\n  edge: ScreenEdge;\n};\n\ntype Box = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\ntype DockAlign = \"start\" | \"center\" | \"end\";\n\ntype DefaultPlacement = {\n  edge: ScreenEdge;\n  /** Where along that edge on a first visit. Default `center`. */\n  align?: DockAlign;\n};\n\ntype DockPanelOptions = {\n  /** The drag grip. Without one the panel still docks and re-docks on resize. */\n  handle?: HTMLElement | null;\n  /** First-visit position, before anything is stored. Default left edge, centred. */\n  defaultPlacement?: DefaultPlacement;\n  /** Shares the HUD's key; `null` disables persistence. Default `three-meter`. */\n  storageKey?: string | null;\n};\n\ntype DockHandle = {\n  /** Re-resolve against the current viewport and panel size (after a mode change, say). */\n  refresh: () => Placement;\n  dispose: () => void;\n};\n\nconst viewportBox = (): Box => ({\n  height: window.innerHeight,\n  left: 0,\n  top: 0,\n  width: window.innerWidth,\n});\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst panelBox = (element: HTMLElement): Box => {\n  const rect = element.getBoundingClientRect();\n\n  return {\n    height: rect.height || element.offsetHeight,\n    left: rect.left,\n    top: rect.top,\n    width: rect.width || element.offsetWidth,\n  };\n};\n\nconst clampAlong = (edge: ScreenEdge, along: number, view: Box, panel: Box) => {\n  if (edge === \"left\" || edge === \"right\") {\n    return clamp(along, INSET, Math.max(INSET, view.height - panel.height - INSET));\n  }\n\n  // Tools sit on the right (inward) unless the panel is on the right edge.\n  return clamp(along, INSET, Math.max(INSET, view.width - panel.width - INSET - SIDE_CLEARANCE));\n};\n\nconst ghostBox = (placement: Placement, panel: Box, view: Box): Box => {\n  switch (placement.edge) {\n    case \"left\":\n      return { height: panel.height, left: INSET, top: placement.along, width: panel.width };\n    case \"right\":\n      return {\n        height: panel.height,\n        left: view.width - INSET - panel.width,\n        top: placement.along,\n        width: panel.width,\n      };\n    case \"top\":\n      return { height: panel.height, left: placement.along, top: INSET, width: panel.width };\n    case \"bottom\":\n      return {\n        height: panel.height,\n        left: placement.along,\n        top: view.height - INSET - panel.height,\n        width: panel.width,\n      };\n  }\n};\n\nconst centerOutside = (box: Box, view: Box) => {\n  const x = box.left + box.width / 2;\n  const y = box.top + box.height / 2;\n\n  return x < 0 || y < 0 || x > view.width || y > view.height;\n};\n\nconst snapBoxToEdge = (box: Box, view: Box): Placement => {\n  const distances: Record<ScreenEdge, number> = {\n    bottom: view.height - (box.top + box.height),\n    left: box.left,\n    right: view.width - (box.left + box.width),\n    top: box.top,\n  };\n\n  let edge: ScreenEdge = \"left\";\n  let nearest = Number.POSITIVE_INFINITY;\n\n  for (const next of EDGES) {\n    if (distances[next] < nearest) {\n      nearest = distances[next];\n      edge = next;\n    }\n  }\n\n  const along = edge === \"left\" || edge === \"right\" ? box.top : box.left;\n\n  return { along: Math.round(clampAlong(edge, along, view, box)), edge };\n};\n\nconst initialPlacement = (preset: DefaultPlacement, view: Box, panel: Box): Placement => {\n  const { edge } = preset;\n  const vertical = edge === \"left\" || edge === \"right\";\n  const span = vertical ? view.height : view.width;\n  const size = vertical ? panel.height : panel.width;\n  const along =\n    preset.align === \"start\" ? 0 : preset.align === \"end\" ? span - size : (span - size) / 2;\n\n  return { along: Math.round(clampAlong(edge, along, view, panel)), edge };\n};\n\nconst isEdge = (value: unknown): value is ScreenEdge =>\n  typeof value === \"string\" && (EDGES as readonly string[]).includes(value);\n\nconst readPlacement = (key: string | null): Placement | null => {\n  if (key === null) {\n    return null;\n  }\n\n  try {\n    const raw = localStorage.getItem(key);\n\n    if (!raw) {\n      return null;\n    }\n\n    const parsed = JSON.parse(raw) as { along?: unknown; edge?: unknown };\n\n    if (\n      typeof parsed.along !== \"number\" ||\n      !Number.isFinite(parsed.along) ||\n      !isEdge(parsed.edge)\n    ) {\n      return null;\n    }\n\n    return { along: parsed.along, edge: parsed.edge };\n  } catch {\n    return null;\n  }\n};\n\nconst writePlacement = (key: string | null, placement: Placement) => {\n  if (key === null) {\n    return;\n  }\n\n  try {\n    localStorage.setItem(key, JSON.stringify(placement));\n  } catch {\n    // Best-effort; the live dock still applies.\n  }\n};\n\nconst resolvePlacement = (\n  stored: Placement | null,\n  preset: DefaultPlacement,\n  panel: Box,\n  view: Box,\n): Placement => {\n  if (!stored) {\n    return initialPlacement(preset, view, panel);\n  }\n\n  const ghost = ghostBox(stored, panel, view);\n\n  if (centerOutside(ghost, view)) {\n    return snapBoxToEdge(ghost, view);\n  }\n\n  return {\n    along: Math.round(clampAlong(stored.edge, stored.along, view, panel)),\n    edge: stored.edge,\n  };\n};\n\nconst paintPlacement = (element: HTMLElement, placement: Placement) => {\n  element.dataset.edge = placement.edge;\n  element.style.left = \"\";\n  element.style.right = \"\";\n  element.style.top = \"\";\n  element.style.bottom = \"\";\n  element.style.transform = \"\";\n\n  switch (placement.edge) {\n    case \"left\":\n      element.style.left = `${INSET}px`;\n      element.style.top = `${placement.along}px`;\n      break;\n    case \"right\":\n      element.style.right = `${INSET}px`;\n      element.style.top = `${placement.along}px`;\n      break;\n    case \"top\":\n      element.style.top = `${INSET}px`;\n      element.style.left = `${placement.along}px`;\n      break;\n    case \"bottom\":\n      element.style.bottom = `${INSET}px`;\n      element.style.left = `${placement.along}px`;\n      break;\n  }\n};\n\n/**\n * Dock `element` from storage (or the left centre), re-dock on resize, and\n * snap to the nearest edge when the handle drops.\n */\nconst dockPanel = (element: HTMLElement, options: DockPanelOptions = {}): DockHandle => {\n  const baseKey = options.storageKey === undefined ? DEFAULT_STORAGE_KEY : options.storageKey;\n  const key = baseKey === null ? null : `${baseKey}:placement`;\n  const handle = options.handle ?? null;\n  const preset = options.defaultPlacement ?? { edge: \"left\" };\n\n  const apply = (): Placement => {\n    const stored = readPlacement(key);\n    const view = viewportBox();\n\n    if (element.classList.contains(\"is-dragging\")) {\n      return stored ?? initialPlacement(preset, view, panelBox(element));\n    }\n\n    const panel = panelBox(element);\n\n    if (panel.width === 0 || panel.height === 0) {\n      return stored ?? initialPlacement(preset, view, panel);\n    }\n\n    const next = resolvePlacement(stored, preset, panel, view);\n    paintPlacement(element, next);\n\n    if (!stored || stored.edge !== next.edge || stored.along !== next.along) {\n      writePlacement(key, next);\n    }\n\n    return next;\n  };\n\n  apply();\n  requestAnimationFrame(apply);\n\n  const onResize = () => apply();\n  window.addEventListener(\"resize\", onResize);\n\n  const resizeObserver = new ResizeObserver(() => apply());\n  resizeObserver.observe(element);\n\n  const disposeBase = () => {\n    window.removeEventListener(\"resize\", onResize);\n    resizeObserver.disconnect();\n  };\n\n  if (!handle) {\n    return { dispose: disposeBase, refresh: apply };\n  }\n\n  let pointerId: number | null = null;\n  let originX = 0;\n  let originY = 0;\n  let grabX = 0;\n  let grabY = 0;\n  let dragging = false;\n\n  const finish = (event: PointerEvent) => {\n    if (pointerId !== event.pointerId) {\n      return;\n    }\n\n    if (dragging) {\n      const next = snapBoxToEdge(panelBox(element), viewportBox());\n      paintPlacement(element, next);\n      writePlacement(key, next);\n    }\n\n    dragging = false;\n    pointerId = null;\n    element.classList.remove(\"is-dragging\");\n\n    try {\n      handle.releasePointerCapture(event.pointerId);\n    } catch {\n      // Capture was never set.\n    }\n  };\n\n  const onPointerDown = (event: PointerEvent) => {\n    if (event.button !== 0) {\n      return;\n    }\n\n    const box = panelBox(element);\n    pointerId = event.pointerId;\n    originX = event.clientX;\n    originY = event.clientY;\n    grabX = event.clientX - box.left;\n    grabY = event.clientY - box.top;\n    dragging = false;\n    handle.setPointerCapture(event.pointerId);\n  };\n\n  const onPointerMove = (event: PointerEvent) => {\n    if (pointerId !== event.pointerId) {\n      return;\n    }\n\n    const dx = event.clientX - originX;\n    const dy = event.clientY - originY;\n\n    if (!dragging && dx * dx + dy * dy < DRAG_THRESHOLD * DRAG_THRESHOLD) {\n      return;\n    }\n\n    dragging = true;\n    element.classList.add(\"is-dragging\");\n    element.style.right = \"\";\n    element.style.bottom = \"\";\n    element.style.transform = \"\";\n    element.style.left = `${event.clientX - grabX}px`;\n    element.style.top = `${event.clientY - grabY}px`;\n  };\n\n  handle.addEventListener(\"pointerdown\", onPointerDown);\n  handle.addEventListener(\"pointermove\", onPointerMove);\n  handle.addEventListener(\"pointerup\", finish);\n  handle.addEventListener(\"pointercancel\", finish);\n\n  return {\n    dispose: () => {\n      disposeBase();\n      handle.removeEventListener(\"pointerdown\", onPointerDown);\n      handle.removeEventListener(\"pointermove\", onPointerMove);\n      handle.removeEventListener(\"pointerup\", finish);\n      handle.removeEventListener(\"pointercancel\", finish);\n    },\n    refresh: apply,\n  };\n};\n\nexport { dockPanel };\nexport type { DefaultPlacement, DockAlign, DockHandle, DockPanelOptions, Placement, ScreenEdge };\n","/**\n * The Lucide marks the HUD chrome uses, inlined so the package carries no\n * icon dependency. The markup is static, so nothing user-supplied reaches it.\n */\ntype IconName = \"blend\" | \"contrast\" | \"grip\" | \"monitor\" | \"moon\" | \"sliders\" | \"sun\";\n\nconst ICON_MARKUP: Record<IconName, string> = {\n  blend: '<circle cx=\"9\" cy=\"9\" r=\"7\"/><circle cx=\"15\" cy=\"15\" r=\"7\"/>',\n  contrast: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 18a6 6 0 0 0 0-12v12z\"/>',\n  grip:\n    '<circle cx=\"9\" cy=\"12\" r=\"1\"/><circle cx=\"9\" cy=\"5\" r=\"1\"/><circle cx=\"9\" cy=\"19\" r=\"1\"/>' +\n    '<circle cx=\"15\" cy=\"12\" r=\"1\"/><circle cx=\"15\" cy=\"5\" r=\"1\"/><circle cx=\"15\" cy=\"19\" r=\"1\"/>',\n  monitor:\n    '<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/>' +\n    '<line x1=\"8\" x2=\"16\" y1=\"21\" y2=\"21\"/><line x1=\"12\" x2=\"12\" y1=\"17\" y2=\"21\"/>',\n  moon: '<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>',\n  sun:\n    '<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2\"/><path d=\"M12 20v2\"/>' +\n    '<path d=\"m4.93 4.93 1.41 1.41\"/><path d=\"m17.66 17.66 1.41 1.41\"/>' +\n    '<path d=\"M2 12h2\"/><path d=\"M20 12h2\"/>' +\n    '<path d=\"m6.34 17.66-1.41 1.41\"/><path d=\"m19.07 4.93-1.41 1.41\"/>',\n  sliders:\n    '<line x1=\"21\" x2=\"14\" y1=\"4\" y2=\"4\"/><line x1=\"10\" x2=\"3\" y1=\"4\" y2=\"4\"/>' +\n    '<line x1=\"21\" x2=\"12\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"3\" y1=\"12\" y2=\"12\"/>' +\n    '<line x1=\"21\" x2=\"16\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"3\" y1=\"20\" y2=\"20\"/>' +\n    '<line x1=\"14\" x2=\"14\" y1=\"2\" y2=\"6\"/><line x1=\"8\" x2=\"8\" y1=\"10\" y2=\"14\"/>' +\n    '<line x1=\"16\" x2=\"16\" y1=\"18\" y2=\"22\"/>',\n};\n\nconst createIcon = (name: IconName, className: string) => {\n  const svg = document.createElementNS(\"http://www.w3.org/2000/svg\", \"svg\");\n  svg.setAttribute(\"viewBox\", \"0 0 24 24\");\n  svg.setAttribute(\"fill\", \"none\");\n  svg.setAttribute(\"stroke\", \"currentColor\");\n  svg.setAttribute(\"stroke-width\", \"2\");\n  svg.setAttribute(\"stroke-linecap\", \"round\");\n  svg.setAttribute(\"stroke-linejoin\", \"round\");\n  svg.setAttribute(\"aria-hidden\", \"true\");\n  svg.setAttribute(\"class\", className);\n  svg.innerHTML = ICON_MARKUP[name];\n\n  return svg;\n};\n\nexport { createIcon };\nexport type { IconName };\n","/**\n * Number formatting for the card. Counts stay exact with thousands separators\n * while they fit the compact grid's 6ch value column (`99,999`), then switch\n * to compact notation (`250K`, `1.4M`, `12.3M`, `1.2B`) so a triangle count in\n * the millions can't run into the neighbouring label.\n */\nconst COMPACT_FROM = 100_000;\n\nconst exact = new Intl.NumberFormat(\"en-US\");\nconst compact = new Intl.NumberFormat(\"en-US\", {\n  maximumFractionDigits: 1,\n  notation: \"compact\",\n});\n\nconst formatCount = (value: number) =>\n  Math.abs(value) < COMPACT_FROM ? exact.format(value) : compact.format(value);\n\nexport { formatCount };\n","/**\n * Minimal canvas sparkline. The caller owns the canvas, its size, and any\n * device-pixel-ratio transform; this just paints a filled line series in\n * logical (CSS) pixel coordinates.\n */\ntype SparklineStyle = {\n  fill: string;\n  stroke: string;\n};\n\nfunction drawSparkline(\n  ctx: CanvasRenderingContext2D,\n  width: number,\n  height: number,\n  values: readonly number[],\n  style: SparklineStyle,\n) {\n  ctx.clearRect(0, 0, width, height);\n\n  if (values.length < 2) {\n    return;\n  }\n\n  let max = 0;\n\n  for (const value of values) {\n    if (value > max) {\n      max = value;\n    }\n  }\n\n  const range = max * 1.1 || 1;\n  const stepX = width / (values.length - 1);\n  const toY = (value: number) => height - (value / range) * height;\n\n  ctx.beginPath();\n  ctx.moveTo(0, toY(values[0]!));\n\n  for (let index = 1; index < values.length; index += 1) {\n    ctx.lineTo(index * stepX, toY(values[index]!));\n  }\n\n  ctx.lineWidth = 1;\n  ctx.strokeStyle = style.stroke;\n  ctx.stroke();\n\n  ctx.lineTo(width, height);\n  ctx.lineTo(0, height);\n  ctx.closePath();\n  ctx.fillStyle = style.fill;\n  ctx.fill();\n}\n\nexport { drawSparkline };\nexport type { SparklineStyle };\n","import type { PerformanceMonitor } from \"../core/performance-monitor.ts\";\nimport type { Sample, TimingMetric } from \"../core/types.ts\";\nimport { formatCount } from \"./format.ts\";\nimport { HudSettings } from \"./hud-settings.ts\";\nimport { createIcon } from \"./icons.ts\";\nimport { drawSparkline, type SparklineStyle } from \"./sparkline.ts\";\nimport { applyTheme, HudTheme, type ResolvedTheme, type ThemeMode } from \"./theme.ts\";\n\ntype PerformanceViewMode = \"full\" | \"compact\";\n\ntype PerformanceViewOptions = {\n  monitor: PerformanceMonitor;\n  /** `full` is the checkbox list; `compact` the card it configures. Default `full`. */\n  mode?: PerformanceViewMode;\n  /** Repaint rate. Default 10. */\n  refreshHz?: number;\n  /** Share one between views to keep them in sync; a fresh instance otherwise. */\n  settings?: HudSettings;\n  /**\n   * Share the host's so the card and its chrome switch together. Otherwise a\n   * fresh `system` instance is created and disposed with the view.\n   */\n  theme?: HudTheme;\n};\n\ntype TimingConfig = {\n  format: (value: number) => string;\n  label: string;\n  metric: TimingMetric;\n  /** Canvas can't read CSS custom properties, so the sparkline palette lives here per theme. */\n  style: Record<ResolvedTheme, SparklineStyle>;\n  unit: string;\n};\n\ntype NumberConfig = {\n  key: string;\n  label: string;\n  read: (sample: Sample) => string;\n};\n\nconst TIMINGS: TimingConfig[] = [\n  {\n    format: (value) => Math.round(value).toString(),\n    label: \"FPS\",\n    metric: \"fps\",\n    style: {\n      dark: { fill: \"rgba(74, 222, 128, 0.15)\", stroke: \"#4ade80\" },\n      light: { fill: \"rgba(22, 163, 74, 0.12)\", stroke: \"#16a34a\" },\n    },\n    unit: \"\",\n  },\n  {\n    format: (value) => value.toFixed(1),\n    label: \"CPU\",\n    metric: \"cpu\",\n    style: {\n      dark: { fill: \"rgba(96, 165, 250, 0.15)\", stroke: \"#60a5fa\" },\n      light: { fill: \"rgba(37, 99, 235, 0.12)\", stroke: \"#2563eb\" },\n    },\n    unit: \"ms\",\n  },\n  {\n    format: (value) => value.toFixed(1),\n    label: \"GPU\",\n    metric: \"gpu\",\n    style: {\n      dark: { fill: \"rgba(244, 114, 182, 0.15)\", stroke: \"#f472b6\" },\n      light: { fill: \"rgba(219, 39, 119, 0.12)\", stroke: \"#db2777\" },\n    },\n    unit: \"ms\",\n  },\n];\n\nconst THEME_OPTIONS: { icon: \"sun\" | \"monitor\" | \"moon\"; label: string; mode: ThemeMode }[] = [\n  { icon: \"sun\", label: \"Light theme\", mode: \"light\" },\n  { icon: \"monitor\", label: \"Match the system theme\", mode: \"system\" },\n  { icon: \"moon\", label: \"Dark theme\", mode: \"dark\" },\n];\n\nconst readTiming = (sample: Sample, metric: TimingMetric) => {\n  switch (metric) {\n    case \"fps\":\n      return sample.fps;\n    case \"cpu\":\n      return sample.cpu;\n    case \"gpu\":\n      return sample.gpu.ms;\n  }\n};\n\nconst isTimingAvailable = (sample: Sample, metric: TimingMetric) =>\n  metric !== \"gpu\" || sample.gpu.available;\n\nconst NUMBERS: NumberConfig[] = [\n  { key: \"fps\", label: \"FPS\", read: (sample) => Math.round(sample.fps).toString() },\n  { key: \"calls\", label: \"Calls\", read: (sample) => formatCount(sample.render.calls) },\n  { key: \"cpu\", label: \"CPU\", read: (sample) => sample.cpu.toFixed(1) },\n  {\n    key: \"gpu\",\n    label: \"GPU\",\n    read: (sample) => (sample.gpu.available ? sample.gpu.ms.toFixed(1) : \"—\"),\n  },\n  {\n    key: \"triangles\",\n    label: \"Triangles\",\n    read: (sample) => formatCount(sample.render.triangles),\n  },\n  { key: \"lines\", label: \"Lines\", read: (sample) => formatCount(sample.render.lines) },\n  { key: \"points\", label: \"Points\", read: (sample) => formatCount(sample.render.points) },\n  {\n    key: \"passes\",\n    label: \"Render passes\",\n    read: (sample) => formatCount(sample.render.passes),\n  },\n  {\n    key: \"geometries\",\n    label: \"Geometries\",\n    read: (sample) => formatCount(sample.resources.geometries),\n  },\n  {\n    key: \"textures\",\n    label: \"Textures\",\n    read: (sample) => formatCount(sample.resources.textures),\n  },\n  {\n    key: \"shaders\",\n    label: \"Shaders\",\n    read: (sample) => formatCount(sample.resources.programs),\n  },\n];\n\ntype GraphCanvas = {\n  canvas: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n  height: number;\n  width: number;\n};\n\ntype HudGraph = GraphCanvas & {\n  valueEl: HTMLElement;\n};\n\n/**\n * Host-agnostic widget that paints {@link Sample}s. Mount {@link element}\n * anywhere; the view drives its own throttled repaint. Compact is the floating\n * HUD; full is the checkbox list that chooses what compact shows. Styles are\n * not injected here. Call `injectStyles()` or use `mountPerfHud`.\n */\nclass PerformanceView {\n  readonly element: HTMLDivElement;\n  readonly settings: HudSettings;\n  readonly theme: HudTheme;\n\n  private readonly ownsTheme: boolean;\n  private readonly unsubscribeTheme: () => void;\n  private readonly monitor: PerformanceMonitor;\n  private readonly minIntervalMs: number;\n  private mode: PerformanceViewMode;\n  private readonly graphValueEls = new Map<TimingMetric, HTMLElement>();\n  private readonly graphCanvases = new Map<TimingMetric, GraphCanvas>();\n  private readonly graphCheckboxes = new Map<TimingMetric, HTMLInputElement>();\n  private readonly statValueEls = new Map<string, HTMLElement>();\n  private readonly statCheckboxes = new Map<string, HTMLInputElement>();\n  private dimCheckbox!: HTMLInputElement;\n  private readonly themeRadios = new Map<ThemeMode, HTMLButtonElement>();\n  private hudGraphsEl!: HTMLElement;\n  private hudGridEl!: HTMLElement;\n  private readonly hudGraphs = new Map<TimingMetric, HudGraph>();\n  private readonly hudNumberEls = new Map<string, HTMLElement>();\n  private rafId: number | null = null;\n  private lastPaintAt = 0;\n  private readonly resizeObserver: ResizeObserver;\n  private readonly unsubscribe: () => void;\n\n  constructor(options: PerformanceViewOptions) {\n    this.monitor = options.monitor;\n    this.settings = options.settings ?? new HudSettings();\n    this.ownsTheme = !options.theme;\n    this.theme = options.theme ?? new HudTheme();\n    // The panel's pick, restored from storage, sits on top of the consumer's mode.\n    this.theme.setOverride(this.settings.theme);\n    this.mode = options.mode ?? \"full\";\n    this.minIntervalMs = 1000 / (options.refreshHz ?? 10);\n    this.element = document.createElement(\"div\");\n    this.element.className = \"perf-monitor\";\n    this.applyModeClass();\n    this.resizeObserver = new ResizeObserver(() => this.resizeCanvases());\n    this.build();\n    this.rebuildHud();\n    this.onThemeChanged();\n    this.unsubscribe = this.settings.subscribe(() => this.onSelectionChanged());\n    this.unsubscribeTheme = this.theme.subscribe(() => this.onThemeChanged());\n  }\n\n  start() {\n    if (this.rafId === null) {\n      this.rafId = requestAnimationFrame(this.frame);\n    }\n  }\n\n  stop() {\n    if (this.rafId !== null) {\n      cancelAnimationFrame(this.rafId);\n      this.rafId = null;\n    }\n  }\n\n  setMode(mode: PerformanceViewMode) {\n    if (mode === this.mode) {\n      return;\n    }\n\n    this.mode = mode;\n    this.applyModeClass();\n    this.resizeCanvases();\n  }\n\n  getMode() {\n    return this.mode;\n  }\n\n  dispose() {\n    this.stop();\n    this.unsubscribe();\n    this.unsubscribeTheme();\n\n    if (this.ownsTheme) {\n      this.theme.dispose();\n    }\n\n    this.resizeObserver.disconnect();\n    this.element.remove();\n  }\n\n  private frame = (now: number) => {\n    this.rafId = requestAnimationFrame(this.frame);\n\n    if (now - this.lastPaintAt < this.minIntervalMs) {\n      return;\n    }\n\n    this.lastPaintAt = now;\n    this.render();\n  };\n\n  private render() {\n    const sample = this.monitor.getSample();\n\n    if (this.mode === \"compact\") {\n      this.renderHud(sample);\n\n      return;\n    }\n\n    for (const config of TIMINGS) {\n      const available = isTimingAvailable(sample, config.metric);\n      const valueEl = this.graphValueEls.get(config.metric)!;\n      valueEl.textContent = available\n        ? this.formatTiming(config, readTiming(sample, config.metric))\n        : \"unavailable\";\n\n      const graph = this.graphCanvases.get(config.metric)!;\n      drawSparkline(\n        graph.ctx,\n        graph.width,\n        graph.height,\n        available ? this.monitor.getHistory(config.metric) : [],\n        config.style[this.theme.resolved],\n      );\n    }\n\n    for (const config of NUMBERS) {\n      this.statValueEls.get(config.key)!.textContent = config.read(sample);\n    }\n  }\n\n  private renderHud(sample: Sample) {\n    for (const [key, element] of this.hudNumberEls) {\n      const config = NUMBERS.find((number) => number.key === key);\n\n      if (config) {\n        element.textContent = config.read(sample);\n      }\n    }\n\n    for (const [metric, graph] of this.hudGraphs) {\n      const config = TIMINGS.find((timing) => timing.metric === metric)!;\n      const available = isTimingAvailable(sample, metric);\n\n      graph.valueEl.textContent = available\n        ? this.formatTiming(config, readTiming(sample, metric))\n        : \"—\";\n\n      drawSparkline(\n        graph.ctx,\n        graph.width,\n        graph.height,\n        available ? this.monitor.getHistory(metric) : [],\n        config.style[this.theme.resolved],\n      );\n    }\n  }\n\n  private formatTiming(config: TimingConfig, value: number) {\n    return `${config.format(value)}${config.unit ? ` ${config.unit}` : \"\"}`;\n  }\n\n  private build() {\n    const hud = document.createElement(\"div\");\n    hud.className = \"perf-monitor__hud\";\n    this.hudGraphsEl = document.createElement(\"div\");\n    this.hudGraphsEl.className = \"perf-monitor__hud-graphs\";\n    this.hudGridEl = document.createElement(\"div\");\n    this.hudGridEl.className = \"perf-monitor__hud-grid\";\n    hud.append(this.hudGraphsEl, this.hudGridEl);\n\n    // Option rows read icon, label, control; the stat rows below keep the\n    // checkbox first, so the two groups scan differently on purpose.\n    const options = document.createElement(\"div\");\n    options.className = \"perf-monitor__section perf-monitor__options\";\n\n    const themeRow = document.createElement(\"div\");\n    themeRow.className = \"perf-monitor__row perf-monitor__row--static\";\n\n    const themeLabel = document.createElement(\"span\");\n    themeLabel.className = \"perf-monitor__label\";\n    themeLabel.textContent = \"theme\";\n\n    const segment = document.createElement(\"div\");\n    segment.className = \"perf-monitor__segment\";\n    segment.setAttribute(\"role\", \"radiogroup\");\n    segment.setAttribute(\"aria-label\", \"Panel theme\");\n\n    for (const option of THEME_OPTIONS) {\n      const radio = document.createElement(\"button\");\n      radio.type = \"button\";\n      radio.className = \"perf-monitor__segment-option\";\n      radio.setAttribute(\"role\", \"radio\");\n      radio.setAttribute(\"aria-checked\", \"false\");\n      radio.setAttribute(\"aria-label\", option.label);\n      radio.title = option.label;\n      radio.append(createIcon(option.icon, \"perf-monitor__icon\"));\n      radio.addEventListener(\"click\", () => this.settings.setTheme(option.mode));\n      this.themeRadios.set(option.mode, radio);\n      segment.append(radio);\n    }\n\n    themeRow.append(createIcon(\"contrast\", \"perf-monitor__icon\"), themeLabel, segment);\n\n    const dimRow = document.createElement(\"label\");\n    dimRow.className = \"perf-monitor__row\";\n\n    this.dimCheckbox = this.buildCheckbox(\n      this.settings.dim,\n      \"Dim the performance panel when the pointer leaves\",\n      (on) => this.settings.setDim(on),\n    );\n\n    const dimLabel = document.createElement(\"span\");\n    dimLabel.className = \"perf-monitor__label\";\n    dimLabel.textContent = \"dim on leave\";\n\n    dimRow.append(createIcon(\"blend\", \"perf-monitor__icon\"), dimLabel, this.dimCheckbox);\n    options.append(themeRow, dimRow);\n\n    const graphs = document.createElement(\"div\");\n    graphs.className = \"perf-monitor__graphs\";\n\n    for (const config of TIMINGS) {\n      const graph = document.createElement(\"div\");\n      graph.className = \"perf-monitor__graph\";\n\n      const canvas = document.createElement(\"canvas\");\n      canvas.className = \"perf-monitor__canvas\";\n\n      const overlay = document.createElement(\"div\");\n      overlay.className = \"perf-monitor__graph-overlay\";\n\n      const head = document.createElement(\"label\");\n      head.className = \"perf-monitor__graph-head\";\n\n      const checkbox = this.buildCheckbox(\n        this.settings.isGraphEnabled(config.metric),\n        `Show ${config.label} graph in HUD`,\n        (on) => this.settings.setGraphEnabled(config.metric, on),\n      );\n      this.graphCheckboxes.set(config.metric, checkbox);\n\n      const label = document.createElement(\"span\");\n      label.className = \"perf-monitor__graph-label\";\n      label.textContent = config.label;\n\n      const value = document.createElement(\"span\");\n      value.className = \"perf-monitor__graph-value\";\n      value.textContent = \"—\";\n      this.graphValueEls.set(config.metric, value);\n\n      head.append(checkbox, label);\n      overlay.append(head, value);\n      graph.append(canvas, overlay);\n      graphs.append(graph);\n\n      const ctx = canvas.getContext(\"2d\");\n\n      if (ctx) {\n        this.graphCanvases.set(config.metric, { canvas, ctx, height: 0, width: 0 });\n        this.resizeObserver.observe(graph);\n      }\n    }\n\n    const stats = document.createElement(\"div\");\n    stats.className = \"perf-monitor__section\";\n\n    for (const config of NUMBERS) {\n      const rowEl = document.createElement(\"label\");\n      rowEl.className = \"perf-monitor__row\";\n\n      const checkbox = this.buildCheckbox(\n        this.settings.isNumberEnabled(config.key),\n        `Show ${config.label} in HUD`,\n        (on) => this.settings.setNumberEnabled(config.key, on),\n      );\n      this.statCheckboxes.set(config.key, checkbox);\n\n      const label = document.createElement(\"span\");\n      label.className = \"perf-monitor__label\";\n      label.textContent = config.label;\n\n      const value = document.createElement(\"span\");\n      value.className = \"perf-monitor__value\";\n      value.textContent = \"—\";\n      this.statValueEls.set(config.key, value);\n\n      rowEl.append(checkbox, label, value);\n      stats.append(rowEl);\n    }\n\n    this.element.append(hud, options, graphs, stats);\n  }\n\n  private rebuildHud() {\n    const { selection } = this.settings;\n\n    for (const graph of this.hudGraphs.values()) {\n      this.resizeObserver.unobserve(graph.canvas.parentElement ?? graph.canvas);\n    }\n\n    this.hudGraphs.clear();\n    this.hudNumberEls.clear();\n    this.hudGraphsEl.replaceChildren();\n    this.hudGridEl.replaceChildren();\n\n    for (const config of TIMINGS) {\n      if (!selection.graphs.has(config.metric)) {\n        continue;\n      }\n\n      const row = document.createElement(\"div\");\n      row.className = \"perf-monitor__hud-graph\";\n\n      const canvas = document.createElement(\"canvas\");\n      canvas.className = \"perf-monitor__canvas\";\n\n      const overlay = document.createElement(\"div\");\n      overlay.className = \"perf-monitor__graph-overlay\";\n\n      const label = document.createElement(\"span\");\n      label.className = \"perf-monitor__graph-label\";\n      label.textContent = config.label;\n\n      const value = document.createElement(\"span\");\n      value.className = \"perf-monitor__graph-value\";\n      value.textContent = \"—\";\n\n      overlay.append(label, value);\n      row.append(canvas, overlay);\n      this.hudGraphsEl.append(row);\n\n      const ctx = canvas.getContext(\"2d\");\n\n      if (ctx) {\n        this.hudGraphs.set(config.metric, { canvas, ctx, height: 0, valueEl: value, width: 0 });\n        this.resizeObserver.observe(row);\n      }\n    }\n\n    for (const config of NUMBERS) {\n      if (!selection.numbers.has(config.key)) {\n        continue;\n      }\n\n      const item = document.createElement(\"div\");\n      item.className = \"perf-monitor__hud-item\";\n\n      const label = document.createElement(\"span\");\n      label.className = \"perf-monitor__hud-label\";\n      label.textContent = config.label;\n\n      const value = document.createElement(\"span\");\n      value.className = \"perf-monitor__hud-value\";\n      value.textContent = \"—\";\n\n      item.append(label, value);\n      this.hudGridEl.append(item);\n      this.hudNumberEls.set(config.key, value);\n    }\n\n    this.resizeCanvases();\n  }\n\n  private onSelectionChanged() {\n    for (const [metric, checkbox] of this.graphCheckboxes) {\n      checkbox.checked = this.settings.isGraphEnabled(metric);\n    }\n\n    for (const [key, checkbox] of this.statCheckboxes) {\n      checkbox.checked = this.settings.isNumberEnabled(key);\n    }\n\n    this.dimCheckbox.checked = this.settings.dim;\n    this.theme.setOverride(this.settings.theme);\n    this.rebuildHud();\n  }\n\n  /** Repaint the palette and mark the radio matching what applies (pick, else consumer mode). */\n  private onThemeChanged() {\n    applyTheme(this.element, this.theme);\n\n    for (const [mode, radio] of this.themeRadios) {\n      radio.setAttribute(\"aria-checked\", String(mode === this.theme.effective));\n    }\n  }\n\n  private buildCheckbox(checked: boolean, title: string, onChange: (enabled: boolean) => void) {\n    const checkbox = document.createElement(\"input\");\n    checkbox.type = \"checkbox\";\n    checkbox.className = \"perf-monitor__checkbox\";\n    checkbox.checked = checked;\n    checkbox.title = title;\n    checkbox.setAttribute(\"aria-label\", title);\n    checkbox.addEventListener(\"change\", () => onChange(checkbox.checked));\n\n    return checkbox;\n  }\n\n  private applyModeClass() {\n    this.element.classList.toggle(\"perf-monitor--compact\", this.mode === \"compact\");\n    this.element.classList.toggle(\"perf-monitor--full\", this.mode === \"full\");\n  }\n\n  private resizeCanvases() {\n    const dpr = window.devicePixelRatio || 1;\n\n    const sizeAll = (graphs: Iterable<GraphCanvas>) => {\n      for (const graph of graphs) {\n        const { canvas, ctx } = graph;\n        const width = canvas.clientWidth;\n        const height = canvas.clientHeight;\n\n        if (width === 0 || height === 0) {\n          continue;\n        }\n\n        canvas.width = Math.round(width * dpr);\n        canvas.height = Math.round(height * dpr);\n        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n        graph.width = width;\n        graph.height = height;\n      }\n    };\n\n    sizeAll(this.graphCanvases.values());\n    sizeAll(this.hudGraphs.values());\n  }\n}\n\nexport { PerformanceView };\nexport type { PerformanceViewMode, PerformanceViewOptions };\n","/**\n * The HUD stylesheet as a string, so the package works without a bundler and\n * injects itself once per document. `.perf-monitor` is the metrics card,\n * `.perf-hud` the floating host around it. Both namespaced so a host page can\n * override safely; the `--perf-*` custom properties are the theming surface.\n *\n * Both elements carry `data-theme=\"dark\" | \"light\"` (see `HudTheme`) and each\n * resolves its own tokens from it, so the card also themes when mounted on\n * its own, outside a `.perf-hud`.\n */\nconst STYLE_ATTRIBUTE = \"data-three-meter\";\n\nconst PERF_HUD_STYLES = `\n.perf-hud,\n.perf-monitor {\n  --perf-bg: rgba(22, 24, 29, 0.85);\n  --perf-fg: #e6e8eb;\n  --perf-fg-dim: #c5c8ce;\n  --perf-muted: #8b909a;\n  --perf-row: rgba(255, 255, 255, 0.04);\n  --perf-border: rgba(255, 255, 255, 0.12);\n  --perf-accent: #60a5fa;\n  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);\n\n  color-scheme: dark;\n}\n\n.perf-hud[data-theme=\"light\"],\n.perf-monitor[data-theme=\"light\"] {\n  --perf-bg: rgba(250, 250, 252, 0.88);\n  --perf-fg: #1a1c21;\n  --perf-fg-dim: #4b5058;\n  --perf-muted: #6b7079;\n  --perf-row: rgba(0, 0, 0, 0.05);\n  --perf-border: rgba(0, 0, 0, 0.12);\n  --perf-accent: #2563eb;\n  --perf-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);\n\n  color-scheme: light;\n}\n\n.perf-monitor {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 8px;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n  font-size: 11px;\n  line-height: 1.4;\n  color: var(--perf-fg);\n}\n\n.perf-monitor__graphs {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.perf-monitor__graph {\n  position: relative;\n  height: 40px;\n  background: var(--perf-row);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.perf-monitor__canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.perf-monitor__graph-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 8px;\n  pointer-events: none;\n}\n\n.perf-monitor__graph-head {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n}\n\n.perf-monitor__graph-overlay .perf-monitor__graph-head {\n  pointer-events: auto;\n}\n\n.perf-monitor__graph-label {\n  color: var(--perf-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  font-size: 10px;\n}\n\n.perf-monitor__graph-value {\n  min-width: 6ch;\n  font-weight: 600;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__section {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.perf-monitor__row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 2px 6px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.perf-monitor__row:nth-child(even) {\n  background: var(--perf-row);\n}\n\n.perf-monitor__label {\n  flex: 1;\n  color: var(--perf-muted);\n}\n\n.perf-monitor__icon {\n  flex: none;\n  width: 12px;\n  height: 12px;\n  color: var(--perf-muted);\n}\n\n.perf-monitor__options {\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--perf-border);\n}\n\n.perf-monitor__row--static {\n  cursor: default;\n}\n\n/* Light / system / dark, as a small segmented radio group. */\n.perf-monitor__segment {\n  display: inline-flex;\n  flex: none;\n  gap: 1px;\n  padding: 1px;\n  border-radius: 4px;\n  background: var(--perf-row);\n}\n\n.perf-monitor__segment-option {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 16px;\n  padding: 0;\n  border: 0;\n  border-radius: 3px;\n  background: transparent;\n  color: var(--perf-muted);\n  cursor: pointer;\n}\n\n.perf-monitor__segment-option:hover {\n  color: var(--perf-fg);\n}\n\n.perf-monitor__segment-option[aria-checked=\"true\"] {\n  color: var(--perf-fg);\n  background: var(--perf-border);\n}\n\n.perf-monitor__segment-option:focus-visible {\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n\n.perf-monitor__segment-option .perf-monitor__icon {\n  width: 11px;\n  height: 11px;\n  color: inherit;\n}\n\n.perf-monitor__checkbox {\n  flex: none;\n  margin: 0;\n  width: 12px;\n  height: 12px;\n  accent-color: var(--perf-accent);\n  cursor: pointer;\n}\n\n.perf-monitor__value {\n  min-width: 7ch;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor__hud {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 2px;\n}\n\n.perf-monitor__hud-graphs {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.perf-monitor__hud-graphs:empty {\n  display: none;\n}\n\n.perf-monitor__hud-graph {\n  position: relative;\n  height: 28px;\n  background: var(--perf-row);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.perf-monitor__hud-grid {\n  display: grid;\n  grid-template-columns: auto 6ch auto 6ch;\n  align-items: baseline;\n  gap: 2px 8px;\n}\n\n.perf-monitor__hud-grid:empty {\n  display: none;\n}\n\n.perf-monitor__hud-item {\n  display: contents;\n}\n\n.perf-monitor__hud-label {\n  color: var(--perf-muted);\n  font-size: 10px;\n}\n\n.perf-monitor__hud-value {\n  font-weight: 600;\n  font-variant-numeric: tabular-nums lining-nums;\n  text-align: right;\n}\n\n.perf-monitor--full .perf-monitor__hud {\n  display: none;\n}\n\n.perf-monitor--compact .perf-monitor__graphs,\n.perf-monitor--compact .perf-monitor__section {\n  display: none;\n}\n\n.perf-monitor--compact {\n  padding: 4px 8px;\n}\n\n.perf-hud {\n  position: fixed;\n  z-index: 9999;\n  /* Safari resolves width:100% canvases against the viewport on a fixed\n     host with auto width. Shrink-wrap so expand stays a card, not the window. */\n  width: max-content;\n  max-width: min(20rem, calc(100vw - 48px));\n  overflow: visible;\n  background: transparent;\n  pointer-events: none;\n  user-select: none;\n  touch-action: none;\n}\n\n.perf-hud--full > .perf-monitor {\n  width: 16rem;\n  max-width: 100%;\n}\n\n.perf-hud > .perf-monitor {\n  position: relative;\n  z-index: 1;\n  max-height: 70vh;\n  overflow: auto;\n  background: var(--perf-bg);\n  border-radius: 6px;\n  box-shadow: var(--perf-shadow);\n  backdrop-filter: blur(2px);\n  pointer-events: auto;\n  transition: opacity 0.25s ease;\n}\n\n.perf-hud--dim:not(.is-awake):not(.is-dragging) > .perf-monitor {\n  opacity: 0.32;\n}\n\n.perf-hud__hotspot {\n  position: absolute;\n  z-index: 0;\n  inset: -20px;\n  pointer-events: auto;\n}\n\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__hotspot {\n  right: -46px;\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__hotspot {\n  left: -46px;\n}\n\n.perf-hud__tools {\n  position: absolute;\n  top: 0;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.15s ease;\n}\n\n.perf-hud.is-awake .perf-hud__tools,\n.perf-hud.is-dragging .perf-hud__tools {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Inward side: right by default, left when docked to the right edge. */\n.perf-hud:not([data-edge=\"right\"]) .perf-hud__tools {\n  left: calc(100% + 6px);\n}\n\n.perf-hud[data-edge=\"right\"] .perf-hud__tools {\n  right: calc(100% + 6px);\n}\n\n.perf-hud__disc {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  background: var(--perf-bg);\n  box-shadow: var(--perf-shadow);\n  color: var(--perf-fg-dim);\n  cursor: pointer;\n  backdrop-filter: blur(2px);\n}\n\n.perf-hud__icon {\n  width: 12px;\n  height: 12px;\n}\n\n.perf-hud__drag {\n  cursor: grab;\n}\n\n.perf-hud.is-dragging .perf-hud__drag {\n  cursor: grabbing;\n}\n\n.perf-hud__disc:hover,\n.perf-hud__disc:focus-visible,\n.perf-hud__disc[aria-pressed=\"true\"] {\n  color: var(--perf-fg);\n  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);\n  outline-offset: 1px;\n}\n`;\n\n/**\n * Append the stylesheet to `target`'s head, once. Call before mounting a view\n * by hand; {@link mountPerfHud} does it for you unless told not to.\n */\nconst injectStyles = (target: Document = document) => {\n  if (target.head.querySelector(`style[${STYLE_ATTRIBUTE}]`)) {\n    return;\n  }\n\n  const style = target.createElement(\"style\");\n  style.setAttribute(STYLE_ATTRIBUTE, \"\");\n  style.textContent = PERF_HUD_STYLES;\n  target.head.append(style);\n};\n\nexport { injectStyles, PERF_HUD_STYLES };\n","/**\n * The floating HUD: a fixed host docked to a screen edge, the metrics card\n * inside it, and two discs on the inward side (drag grip, compact/full toggle)\n * that stay hidden until the pointer is near or someone taps. Dim-on-leave\n * comes from the settings; the palette from `theme`. This is what the React\n * `PerfHud` wraps; a vanilla three app calls it directly.\n */\nimport type { PerformanceMonitor } from \"../core/performance-monitor.ts\";\nimport { type DefaultPlacement, dockPanel } from \"./dock-panel.ts\";\nimport { DEFAULT_STORAGE_KEY, HudSettings } from \"./hud-settings.ts\";\nimport { createIcon } from \"./icons.ts\";\nimport { PerformanceView, type PerformanceViewMode } from \"./performance-view.ts\";\nimport { injectStyles } from \"./styles.ts\";\nimport { applyTheme, HudTheme, type ThemeMode } from \"./theme.ts\";\n\nconst TOUCH_LINGER_MS = 2500;\n\ntype MountPerfHudOptions = {\n  /** Start compact (the card) or full (the checkbox list). Default `compact`. */\n  mode?: PerformanceViewMode;\n  /**\n   * `dark`, `light`, or `system` to follow the OS preference. Default\n   * `system`. Change it later with the handle's `setTheme`. A pick made in\n   * the panel's own theme row (kept in `settings`) sits on top of this.\n   */\n  theme?: ThemeMode;\n  /** localStorage key for the selection and the dock. `null` disables persistence. */\n  storageKey?: string | null;\n  /** Bring your own; otherwise one is created from `storageKey`. */\n  settings?: HudSettings;\n  /** Where the card sits on a first visit. Default left edge, centred. */\n  defaultPlacement?: DefaultPlacement;\n  /** Where the host element goes. Default `document.body`. */\n  parent?: HTMLElement;\n  /** Append the stylesheet to the document once. Default true. */\n  injectStyles?: boolean;\n  /** Repaint rate. Default 10. */\n  refreshHz?: number;\n  /** Accessible name of the panel. Default `Performance`. */\n  label?: string;\n};\n\ntype PerfHudHandle = {\n  element: HTMLDivElement;\n  view: PerformanceView;\n  settings: HudSettings;\n  /**\n   * `mode` is the consumer layer, `override` the panel's pick, `effective`\n   * whichever applies, `resolved` the `dark` / `light` on screen. Subscribe\n   * for changes, including the OS preference moving under `system`.\n   */\n  theme: HudTheme;\n  getMode: () => PerformanceViewMode;\n  setMode: (mode: PerformanceViewMode) => void;\n  /** The consumer layer. The panel's pick, if any, is `settings.theme`. */\n  getTheme: () => ThemeMode;\n  /** Sets the consumer layer; a pick made in the panel still wins until `settings.setTheme(null)`. */\n  setTheme: (mode: ThemeMode) => void;\n  dispose: () => void;\n};\n\nconst disc = (label: string, className: string, icon: \"grip\" | \"sliders\") => {\n  const button = document.createElement(\"button\");\n  button.type = \"button\";\n  button.className = `perf-hud__disc ${className}`.trim();\n  button.setAttribute(\"aria-label\", label);\n  button.append(createIcon(icon, \"perf-hud__icon\"));\n\n  return button;\n};\n\nconst mountPerfHud = (\n  monitor: PerformanceMonitor,\n  options: MountPerfHudOptions = {},\n): PerfHudHandle => {\n  const storageKey = options.storageKey === undefined ? DEFAULT_STORAGE_KEY : options.storageKey;\n  const settings = options.settings ?? new HudSettings({ storageKey });\n  const theme = new HudTheme(options.theme ?? \"system\");\n  const parent = options.parent ?? document.body;\n\n  if (options.injectStyles ?? true) {\n    injectStyles(parent.ownerDocument);\n  }\n\n  const host = document.createElement(\"div\");\n  host.className = \"perf-hud\";\n  host.dataset.edge = \"left\";\n  host.setAttribute(\"aria-label\", options.label ?? \"Performance\");\n\n  const hotspot = document.createElement(\"div\");\n  hotspot.className = \"perf-hud__hotspot\";\n  hotspot.setAttribute(\"aria-hidden\", \"true\");\n\n  const tools = document.createElement(\"div\");\n  tools.className = \"perf-hud__tools\";\n  const grip = disc(\"Drag performance panel\", \"perf-hud__drag\", \"grip\");\n  const toggle = disc(\"Toggle full performance metrics\", \"\", \"sliders\");\n  tools.append(grip, toggle);\n\n  const view = new PerformanceView({\n    mode: options.mode ?? \"compact\",\n    monitor,\n    refreshHz: options.refreshHz,\n    settings,\n    theme,\n  });\n\n  host.append(hotspot, tools, view.element);\n  parent.append(host);\n\n  const applyMode = () => {\n    host.classList.toggle(\"perf-hud--full\", view.getMode() === \"full\");\n  };\n\n  const applyDim = () => {\n    host.classList.toggle(\"perf-hud--dim\", settings.dim);\n  };\n\n  applyMode();\n  applyDim();\n  // After the view: constructing it restores the panel's stored theme pick.\n  applyTheme(host, theme);\n  const unsubscribe = settings.subscribe(applyDim);\n  const unsubscribeTheme = theme.subscribe(() => applyTheme(host, theme));\n  const dock = dockPanel(host, {\n    defaultPlacement: options.defaultPlacement,\n    handle: grip,\n    storageKey,\n  });\n\n  const setMode = (mode: PerformanceViewMode) => {\n    view.setMode(mode);\n    applyMode();\n    requestAnimationFrame(() => dock.refresh());\n  };\n\n  toggle.addEventListener(\"click\", () => {\n    setMode(view.getMode() === \"compact\" ? \"full\" : \"compact\");\n  });\n\n  // Wake on approach, sleep on leave; a touch lingers so the discs can be tapped.\n  let hideTimer = 0;\n\n  const sleep = () => {\n    if (host.classList.contains(\"is-dragging\")) {\n      return;\n    }\n\n    host.classList.remove(\"is-awake\");\n  };\n\n  const wake = (linger: boolean) => {\n    host.classList.add(\"is-awake\");\n    window.clearTimeout(hideTimer);\n\n    if (linger) {\n      hideTimer = window.setTimeout(sleep, TOUCH_LINGER_MS);\n    }\n  };\n\n  const onEnter = () => {\n    wake(false);\n  };\n\n  const onLeave = (event: PointerEvent) => {\n    if (host.contains(event.relatedTarget as Node | null)) {\n      return;\n    }\n\n    if (event.pointerType === \"touch\" || event.pointerType === \"pen\") {\n      wake(true);\n\n      return;\n    }\n\n    sleep();\n  };\n\n  const onDown = (event: PointerEvent) => {\n    wake(event.pointerType !== \"mouse\");\n  };\n\n  host.addEventListener(\"pointerenter\", onEnter);\n  host.addEventListener(\"pointerleave\", onLeave);\n  host.addEventListener(\"pointerdown\", onDown);\n\n  view.start();\n\n  return {\n    dispose: () => {\n      window.clearTimeout(hideTimer);\n      host.removeEventListener(\"pointerenter\", onEnter);\n      host.removeEventListener(\"pointerleave\", onLeave);\n      host.removeEventListener(\"pointerdown\", onDown);\n      unsubscribe();\n      unsubscribeTheme();\n      dock.dispose();\n      view.dispose();\n      theme.dispose();\n      host.remove();\n    },\n    element: host,\n    getMode: () => view.getMode(),\n    setMode,\n    getTheme: () => theme.mode,\n    setTheme: (mode: ThemeMode) => theme.setMode(mode),\n    settings,\n    theme,\n    view,\n  };\n};\n\nexport { mountPerfHud };\nexport type { MountPerfHudOptions, PerfHudHandle };\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"performance-monitor-D_v7W312.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/**\n * A frame interval past this is a stall (hidden tab, breakpoint, laptop lid),\n * not a slow frame. It is left out of FPS so one gap doesn't flatten the\n * graph's scale for the whole history window.\n */\nconst STALL_MS = 1000;\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 *\n * CPU time runs from {@link begin} to the return of the frame's last\n * `render()` call, which the `render` patch stamps. So it holds even when\n * {@link end} is only reached on the next tick, as in the R3F sampler: it is\n * the JS work of the frame, not the interval to the next one.\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 lastRenderEndAt: number | null = null;\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      try {\n        return this.originalRender.apply(renderer, args);\n      } finally {\n        this.lastRenderEndAt = performance.now();\n      }\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\n      // A stall keeps the previous reading rather than logging a near-zero frame.\n      if (frameMs > 0 && frameMs <= STALL_MS) {\n        this.frameFps = 1000 / frameMs;\n      }\n    }\n\n    this.lastBeginAt = now;\n    this.cpuStart = now;\n    this.lastRenderEndAt = null;\n    this.renderPasses = 0;\n    this.renderer.info.reset();\n    this.gpuTimer?.begin();\n  }\n\n  end() {\n    const now = performance.now();\n    // Without a render this frame there is nothing better than \"until end()\".\n    const cpu = (this.lastRenderEndAt ?? 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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"}