@zkmake/three-meter 0.11.5 → 0.12.0

package/README.md

@@ -182,6 +182,18 @@ hud.setBudgets({ gpu: null }); // null drops a default; false drops them all
 
 `PerfHud` takes the same `budgets` prop and applies changes live.
 
+An app that keeps its budgets in one file with [three-audit](../three-audit)'s `defineBudgets`
+passes that file as is. The HUD applies its `frame`: `fps` as `targetFps`, `calls` and
+`triangles`. The same file holds the per-part budgets its tests and the `three-audit` CLI check.
+
+```ts
+import budgets from "./budgets.ts"; // defineBudgets({ frame: { fps: 60, calls: 150, … }, parts })
+
+mountPerfHud(monitor, { budgets });
+```
+
+three-meter reads the file's shape (`AppBudgets`) and doesn't depend on three-audit.
+
 ## Top costs
 
 The HUD tells you there are 400 draw calls; **top costs** tells you which objects they come from.

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import { a as GpuTiming, c as RenderBackend, d as Sample, f as SceneCost, i as FrameStats, l as RenderCounts, n as CostEntry, o as PerfRenderer, p as TimingMetric, r as Environment, s as PerformanceMonitorOptions, t as PerformanceMonitor, u as ResourceCounts } from "./performance-monitor-BoY_-GTt.js";
-//#region src/core/ring-buffer.d.ts
+import { a as GpuTiming, c as RenderBackend, d as Sample, f as SceneCost, i as FrameStats, l as RenderCounts, n as CostEntry, o as PerfRenderer, p as TimingMetric, r as Environment, s as PerformanceMonitorOptions, t as PerformanceMonitor, u as ResourceCounts } from "./performance-monitor-CrYmNIdv.js";
 /**
  * Fixed-capacity numeric ring buffer. Backs the per-frame timing history the
  * view reads to draw sparklines. Push is O(1); `toArray()` returns values in
@@ -16,8 +15,6 @@ declare class RingBuffer {
   toArray(): number[];
   clear(): void;
 }
-//#endregion
-//#region src/core/wrap-animation-loop.d.ts
 type AnimationLoop<Args extends unknown[]> = (...args: Args) => void;
 /**
  * Wrap a `renderer.setAnimationLoop` callback so each tick is one frame:
@@ -31,6 +28,5 @@ type AnimationLoop<Args extends unknown[]> = (...args: Args) => void;
  * ```
  */
 declare function wrapAnimationLoop<Args extends unknown[]>(monitor: PerformanceMonitor, loop: AnimationLoop<Args>): AnimationLoop<Args>;
-//#endregion
 export { type CostEntry, type Environment, type FrameStats, type GpuTiming, type PerfRenderer, PerformanceMonitor, type PerformanceMonitorOptions, type RenderBackend, type RenderCounts, type ResourceCounts, RingBuffer, type Sample, type SceneCost, type TimingMetric, wrapAnimationLoop };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,5 +1,5 @@
-import { n as RingBuffer, t as PerformanceMonitor } from "./performance-monitor-BqnoiLEs.js";
-//#region src/core/wrap-animation-loop.ts
+import { n as RingBuffer, t as PerformanceMonitor } from "./performance-monitor-CKAI0-Dp.js";
+// src/core/wrap-animation-loop.ts
 /**
 * Wrap a `renderer.setAnimationLoop` callback so each tick is one frame:
 * `begin()` before your code, `end()` after it returns. CPU time is your
@@ -21,7 +21,6 @@ function wrapAnimationLoop(monitor, loop) {
 		}
 	};
 }
-//#endregion
 export { PerformanceMonitor, RingBuffer, wrapAnimationLoop };
 
 //# sourceMappingURL=index.js.map

package/dist/{mount-perf-hud-Cu7Jjwmm.js → mount-perf-hud-CJju0oTc.js}

@@ -1,12 +1,22 @@
-//#region src/ui/budgets.ts
+// src/ui/budgets.ts
 const DEFAULT_TARGET_FPS = 60;
 const FLOORS = /* @__PURE__ */ new Set([
 	"fps",
 	"headroom",
 	"low"
 ]);
+const isAppBudgets = (budgets) => "frame" in budgets;
+/** An app's frame budget as the HUD's: only the limits it sets, so the rest keep their defaults. */
+const fromApp = ({ frame }) => {
+	const budgets = {};
+	if (frame.fps !== void 0) budgets.targetFps = frame.fps;
+	if (frame.calls !== void 0) budgets.calls = frame.calls;
+	if (frame.triangles !== void 0) budgets.triangles = frame.triangles;
+	return budgets;
+};
 /** `detectedHz` is the monitor's refresh reading; an explicit `targetFps` wins over it. */
-const resolveBudgets = (budgets, detectedHz = null) => {
+const resolveBudgets = (input, detectedHz = null) => {
+	const budgets = input && isAppBudgets(input) ? fromApp(input) : input;
 	const targetFps = budgets && budgets.targetFps || detectedHz || DEFAULT_TARGET_FPS;
 	const frameMs = 1e3 / targetFps;
 	if (budgets === false) return {
@@ -38,8 +48,7 @@ const isOverBudget = (resolved, key, value) => {
 	if (limit === void 0 || value === null) return false;
 	return isFloor(key) ? value < limit : value > limit;
 };
-//#endregion
-//#region src/ui/theme.ts
+// src/ui/theme.ts
 const THEME_MODES = [
 	"dark",
 	"light",
@@ -125,8 +134,7 @@ var HudTheme = class {
 const applyTheme = (element, theme) => {
 	element.dataset.theme = theme.resolved;
 };
-//#endregion
-//#region src/ui/hud-settings.ts
+// src/ui/hud-settings.ts
 const DEFAULT_STORAGE_KEY = "three-meter";
 const DEFAULT_DIM = false;
 const DEFAULT_INFO = false;
@@ -242,8 +250,7 @@ var HudSettings = class {
 		for (const listener of this.listeners) listener();
 	}
 };
-//#endregion
-//#region src/ui/dock-panel.ts
+// src/ui/dock-panel.ts
 /**
 * Dock a fixed-position panel to a screen edge. Dragging the handle snaps it
 * to the nearest edge on drop; the edge and the offset along it persist under
@@ -458,8 +465,7 @@ const dockPanel = (element, options = {}) => {
 		refresh: apply
 	};
 };
-//#endregion
-//#region src/ui/icons.ts
+// src/ui/icons.ts
 const ICON_MARKUP = {
 	eye: "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
 	eyeOff: "<path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\"/><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\"/><path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\"/><path d=\"m2 2 20 20\"/>",
@@ -503,8 +509,7 @@ const createIcon = (name, className) => {
 	svg.innerHTML = ICON_MARKUP[name];
 	return svg;
 };
-//#endregion
-//#region src/ui/styles.ts
+// src/ui/styles.ts
 /**
 * The HUD stylesheet as a string, so the package works without a bundler and
 * injects itself once per document. `.perf-monitor` is the metrics card,
@@ -1245,8 +1250,7 @@ const injectStyles = (target = document) => {
 	style.textContent = PERF_HUD_STYLES;
 	target.head.append(style);
 };
-//#endregion
-//#region src/ui/dev-panel.ts
+// src/ui/dev-panel.ts
 /**
 * The frame every zkmake dev panel shares, so they look and handle alike: a fixed host docked to a
 * screen edge, a card with a brand label on top and the panel's content under it, and three discs
@@ -1294,6 +1298,7 @@ const mountDevPanel = (options) => {
 	const host = document.createElement("div");
 	host.className = "perf-hud";
 	host.dataset.edge = "left";
+	host.setAttribute("role", "group");
 	host.setAttribute("aria-label", options.label);
 	const hotspot = document.createElement("div");
 	hotspot.className = "perf-hud__hotspot";
@@ -1393,12 +1398,10 @@ const mountDevPanel = (options) => {
 		}
 	};
 };
-//#endregion
-//#region package.json
+// package.json
 var name = "@zkmake/three-meter";
-var version = "0.11.5";
-//#endregion
-//#region src/ui/clipboard.ts
+var version = "0.12.0";
+// src/ui/clipboard.ts
 /**
 * Copy text from a click handler. The async Clipboard API needs a secure
 * context and the `clipboard-write` permission; a dev server opened over a LAN
@@ -1432,8 +1435,7 @@ const copyText = async (text) => {
 		return copyWithSelection(text);
 	}
 };
-//#endregion
-//#region src/ui/format.ts
+// src/ui/format.ts
 /**
 * Number formatting for the card. Counts stay exact with thousands separators
 * while they fit the compact grid's 6ch value column (`99,999`), then switch
@@ -1447,8 +1449,7 @@ const compact = new Intl.NumberFormat("en-US", {
 	notation: "compact"
 });
 const formatCount = (value) => Math.abs(value) < COMPACT_FROM ? exact.format(value) : compact.format(value);
-//#endregion
-//#region src/ui/hider.ts
+// src/ui/hider.ts
 var Hider = class {
 	groups = /* @__PURE__ */ new Map();
 	/** Each hidden object's `visible` from before the first group hid it. */
@@ -1486,8 +1487,7 @@ var Hider = class {
 		return false;
 	}
 };
-//#endregion
-//#region src/ui/metric-help.ts
+// src/ui/metric-help.ts
 /**
 * One plain-language line per metric: what it is, and what a bad reading
 * means. Shown as the label's tooltip and, with "explain metrics" on, under
@@ -1511,8 +1511,7 @@ const METRIC_HELP = {
 	textures: "Textures held in GPU memory. Should level off; a steady climb is a leak, so dispose() what you remove.",
 	triangles: "Triangles drawn this frame. Mostly GPU cost: use lower-poly models or level of detail to cut it."
 };
-//#endregion
-//#region src/ui/report.ts
+// src/ui/report.ts
 /**
 * A plain-text snapshot of the monitor for bug reports: versions, backend and
 * GPU, the current sample, stutter stats, the scene's top meshes and the page. Fenced as a `text`
@@ -1594,8 +1593,7 @@ const formatReport = (monitor) => renderReport({
 	sample: monitor.getSample(),
 	stats: monitor.getFrameStats()
 });
-//#endregion
-//#region src/ui/sparkline.ts
+// src/ui/sparkline.ts
 function drawSparkline(ctx, width, height, values, style, guide) {
 	ctx.clearRect(0, 0, width, height);
 	if (values.length < 2) return;
@@ -1627,8 +1625,7 @@ function drawSparkline(ctx, width, height, values, style, guide) {
 		ctx.restore();
 	}
 }
-//#endregion
-//#region src/ui/performance-view.ts
+// src/ui/performance-view.ts
 const TIMINGS = [
 	{
 		format: (value) => Math.round(value).toString(),
@@ -2496,8 +2493,7 @@ var PerformanceView = class {
 		sizeAll(this.hudGraphs.values());
 	}
 };
-//#endregion
-//#region src/ui/mount-perf-hud.ts
+// src/ui/mount-perf-hud.ts
 const mountPerfHud = (monitor, options = {}) => {
 	const storageKey = options.storageKey === void 0 ? DEFAULT_STORAGE_KEY : options.storageKey;
 	const settings = options.settings ?? new HudSettings({ storageKey });
@@ -2555,7 +2551,6 @@ const mountPerfHud = (monitor, options = {}) => {
 		view
 	};
 };
-//#endregion
 export { PERF_HUD_STYLES as a, DEFAULT_STORAGE_KEY as c, THEME_MODES as d, isThemeMode as f, mountDevPanel as i, HudSettings as l, PerformanceView as n, injectStyles as o, resolveBudgets as p, formatReport as r, dockPanel as s, mountPerfHud as t, HudTheme as u };
 
-//# sourceMappingURL=mount-perf-hud-Cu7Jjwmm.js.map
+//# sourceMappingURL=mount-perf-hud-CJju0oTc.js.map