@adatechnology/game-test-room 0.2.0 → 0.3.0

package/dist/index.js

@@ -4,7 +4,7 @@ import { createDestructionRenderer, specFromObject3D } from "@adatechnology/game
 import { createArsenal, DEFAULT_LOADOUT } from "@adatechnology/game-weapons";
 import { createFluids, createItemUse, ITEM_USES, resolveStrings as resolveFluidStrings } from "@adatechnology/game-fluids";
 import { createFluidRenderer } from "@adatechnology/game-fluids-three";
-import { checkAnimation, checkDestructible, checkSpec } from "@adatechnology/game-contracts";
+import { checkAnimation, checkBench, checkDestructible, checkSpec } from "@adatechnology/game-contracts";
 
 // src/items.ts
 import { buildFrame } from "@adatechnology/game-destruction";
@@ -219,6 +219,21 @@ var en = {
     "ui.animations": "Animations",
     "ui.animations_aim": "Aim at an item or hold it to see its animations.",
     "ui.animations_none": "This item brings no animations.",
+    "mod.bench_ok": "{name}: bench ok ({controls} controls, {layers} layers, {metrics} metrics)",
+    "mod.bench_fail": "{name}: bench broken: {problems}",
+    "mod.metric_failed": '{name}: metric "{metric}" threw and shows n/a: {error}',
+    "mod.listener_failed": "{name}: a bench listener threw: {error}",
+    "ui.bench": "Bench",
+    "ui.layers": "Layers",
+    "ui.metrics": "Counters",
+    "metric.fps": "FPS",
+    "metric.frame_ms": "ms/frame",
+    "metric.draw_calls": "Draw calls",
+    "metric.triangles": "Triangles",
+    "metric.objects": "Objects",
+    "metric.fragments": "Fragments",
+    "metric.particles": "Particles",
+    "metric.decals": "Decals",
     "act.spawn": "Spawned {name} at x {x} \xB7 z {z}",
     "act.clear": "Cleared the room",
     "act.reset": "Repaired every object",
@@ -511,6 +526,21 @@ var ptBR = {
     "ui.animations": "Anima\xE7\xF5es",
     "ui.animations_aim": "Mire num item ou segure-o para ver as anima\xE7\xF5es.",
     "ui.animations_none": "Este item n\xE3o traz anima\xE7\xF5es.",
+    "mod.bench_ok": "{name}: bancada ok ({controls} controles, {layers} camadas, {metrics} contadores)",
+    "mod.bench_fail": "{name}: bancada quebrada: {problems}",
+    "mod.metric_failed": '{name}: o contador "{metric}" lan\xE7ou erro e mostra n/a: {error}',
+    "mod.listener_failed": "{name}: um ouvinte da bancada lan\xE7ou erro: {error}",
+    "ui.bench": "Bancada",
+    "ui.layers": "Camadas",
+    "ui.metrics": "Contadores",
+    "metric.fps": "FPS",
+    "metric.frame_ms": "ms/quadro",
+    "metric.draw_calls": "Chamadas de desenho",
+    "metric.triangles": "Tri\xE2ngulos",
+    "metric.objects": "Objetos",
+    "metric.fragments": "Fragmentos",
+    "metric.particles": "Part\xEDculas",
+    "metric.decals": "Decalques",
     "act.spawn": "Criou {name} em x {x} \xB7 z {z}",
     "act.clear": "Limpou a sala",
     "act.reset": "Consertou todos os objetos",
@@ -1122,6 +1152,154 @@ function createArena(THREE, size, scene) {
   };
 }
 
+// src/bench.ts
+var snap = (control, value) => {
+  const clamped = Math.min(control.max, Math.max(control.min, value));
+  if (!control.step) return clamped;
+  const stepped = control.min + Math.round((clamped - control.min) / control.step) * control.step;
+  return Number(Math.min(control.max, stepped).toFixed(10));
+};
+function fitValue(control, value) {
+  if (control.kind === "number") return typeof value === "number" && Number.isFinite(value) ? snap(control, value) : void 0;
+  if (control.kind === "boolean") return typeof value === "boolean" ? value : void 0;
+  if (control.kind === "choice") return typeof value === "string" && control.options.some((option) => option.id === value) ? value : void 0;
+  return void 0;
+}
+var fromText = (control, text) => {
+  if (control.kind === "number") return text.trim() === "" ? Number.NaN : Number(text);
+  if (control.kind === "boolean") return text === "1" ? true : text === "0" ? false : void 0;
+  return text;
+};
+var toText = (value) => typeof value === "boolean" ? value ? "1" : "0" : String(value);
+function encodeBenchState(controls, layers) {
+  const pairs = [];
+  for (const control of controls) if (control.value !== void 0) pairs.push(`${control.id}=${encodeURIComponent(toText(control.value))}`);
+  for (const layer of layers) pairs.push(`${layer.id}=${layer.on ? "1" : "0"}`);
+  return pairs.join(";");
+}
+function decodeBenchState(encoded, controls, layers) {
+  const out = /* @__PURE__ */ new Map();
+  for (const pair of encoded.split(";")) {
+    const at = pair.indexOf("=");
+    if (at <= 0) continue;
+    const id = pair.slice(0, at);
+    let text;
+    try {
+      text = decodeURIComponent(pair.slice(at + 1));
+    } catch {
+      continue;
+    }
+    const control = controls.find((c) => c.id === id);
+    if (control) {
+      const value = fitValue(control, fromText(control, text));
+      if (value !== void 0) out.set(id, value);
+      continue;
+    }
+    if (layers.some((layer) => layer.id === id) && (text === "1" || text === "0")) out.set(id, text === "1");
+  }
+  return out;
+}
+function createBenchStore(module, locale, onListenerError) {
+  const declared = { controls: module.controls?.(locale) ?? [], layers: module.layers?.(locale) ?? [], metrics: module.metrics?.(locale) ?? [] };
+  const controls = declared.controls.map((control) => ({ ...control, disabled: false }));
+  const values = /* @__PURE__ */ new Map();
+  for (const control of controls) if (control.kind !== "action") values.set(control.id, control.default);
+  const layers = new Map(declared.layers.map((layer) => [layer.id, layer.default !== false]));
+  const listeners = /* @__PURE__ */ new Set();
+  const watchers = /* @__PURE__ */ new Set();
+  const emit = (change) => {
+    for (const listener of listeners) {
+      try {
+        listener(change);
+      } catch (error) {
+        onListenerError?.(error);
+      }
+    }
+  };
+  const changed = () => {
+    for (const watcher of watchers) watcher();
+  };
+  const controlOf = (id) => controls.find((control) => control.id === id);
+  const store = {
+    moduleId: module.id,
+    metrics: declared.metrics,
+    declared,
+    controls: () => controls.map((control) => ({ ...control, value: values.get(control.id) })),
+    layers: () => declared.layers.map((layer) => ({ ...layer, on: layers.get(layer.id) === true })),
+    value: (id) => values.get(id),
+    layer: (id) => layers.get(id) === true,
+    set(id, value) {
+      const control = controlOf(id);
+      if (!control || control.disabled) return false;
+      const fitted = fitValue(control, value);
+      if (fitted === void 0) return false;
+      values.set(id, fitted);
+      emit({ kind: "control", id, value: fitted });
+      changed();
+      return true;
+    },
+    setLayer(id, on) {
+      if (!layers.has(id)) return false;
+      layers.set(id, on);
+      emit({ kind: "layer", id, on });
+      changed();
+      return true;
+    },
+    act(id) {
+      const control = controlOf(id);
+      if (!control || control.kind !== "action" || control.disabled) return false;
+      emit({ kind: "action", id });
+      return true;
+    },
+    encode: () => encodeBenchState(store.controls(), store.layers()),
+    onChange(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    watch(listener) {
+      watchers.add(listener);
+      return () => watchers.delete(listener);
+    },
+    patch(id, patch) {
+      const index = controls.findIndex((control2) => control2.id === id);
+      if (index < 0) return;
+      let control = controls[index];
+      if (patch.hidden !== void 0) control = { ...control, hidden: patch.hidden };
+      if (patch.disabled !== void 0) control = { ...control, disabled: patch.disabled };
+      if (patch.options && control.kind === "choice" && patch.options.length > 0) {
+        control = { ...control, options: [...patch.options] };
+        const offered = control.options;
+        if (!offered.some((option) => option.id === values.get(id))) values.set(id, offered[0].id);
+      }
+      controls[index] = control;
+      if (patch.value !== void 0) {
+        const fitted = fitValue(control, patch.value);
+        if (fitted !== void 0) values.set(id, fitted);
+      }
+      changed();
+    },
+    sendInitial() {
+      for (const control of controls) {
+        const value = values.get(control.id);
+        if (value !== void 0) emit({ kind: "control", id: control.id, value });
+      }
+      for (const layer of declared.layers) emit({ kind: "layer", id: layer.id, on: layers.get(layer.id) === true });
+      changed();
+    },
+    restore(encoded) {
+      for (const [id, value] of decodeBenchState(encoded, controls, declared.layers)) {
+        if (typeof value === "boolean" && layers.has(id)) layers.set(id, value);
+        else values.set(id, value);
+      }
+    },
+    dispose() {
+      listeners.clear();
+      watchers.clear();
+    }
+  };
+  return store;
+}
+
 // src/log.ts
 var MAX_ENTRIES = 5e3;
 var pad = (n, w = 2) => String(n).padStart(w, "0");
@@ -1250,6 +1428,56 @@ function createLog(options = {}) {
   return log;
 }
 
+// src/metrics.ts
+var ROOM_METRICS = ["fps", "frame_ms", "draw_calls", "triangles", "objects", "fragments", "particles", "decals"];
+var WINDOW_S = 0.5;
+function createRoomMetrics(sources) {
+  const wanted = new Set(sources.ids);
+  const gl = sources.gl;
+  let windowS = 0;
+  let frames = 0;
+  let fps;
+  let frameMs;
+  let calls;
+  let triangles;
+  let ownsRender = false;
+  return {
+    frame(dt) {
+      frames++;
+      windowS += dt;
+      if (windowS < WINDOW_S) return;
+      fps = frames / windowS;
+      frameMs = windowS / frames * 1e3;
+      frames = 0;
+      windowS = 0;
+    },
+    rendered() {
+      ownsRender = true;
+      calls = gl.info?.render?.calls;
+      triangles = gl.info?.render?.triangles;
+    },
+    sample() {
+      const out = {};
+      const put = (id, value) => {
+        if (wanted.has(id) && value !== void 0) out[id] = value;
+      };
+      put("fps", fps);
+      put("frame_ms", frameMs);
+      const render = ownsRender ? { calls, triangles } : gl.info?.render;
+      put("draw_calls", render?.calls);
+      put("triangles", render?.triangles);
+      if (!["objects", "fragments", "particles", "decals"].some((id) => wanted.has(id))) return out;
+      const destruction = sources.destruction.stats();
+      const fluids = sources.fluids.stats();
+      put("objects", destruction.pieces);
+      put("fragments", destruction.fragments);
+      put("particles", destruction.particles + fluids.particles);
+      put("decals", destruction.decals + fluids.stains);
+      return out;
+    }
+  };
+}
+
 // src/narrate.ts
 var SKIP_DAMAGE = /* @__PURE__ */ new Set(["fire", "heat"]);
 function createNarrator(c) {
@@ -2320,6 +2548,209 @@ function scenariosFor(locale = "en") {
 }
 var SCENARIOS = scenariosFor("en");
 
+// src/bench-panel.ts
+var SEGMENTED_MAX = 4;
+var mk = (tag, cls, text) => {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  if (text !== void 0) e.textContent = text;
+  return e;
+};
+var shapeOf = (view) => JSON.stringify([view.title, view.controls.map((c) => ({ ...c, value: void 0 })), view.layers.map((l) => [l.id, l.name])]);
+function createBenchPanel(o) {
+  const { t } = o;
+  const element = mk("div", "tr-panel tr-bench");
+  element.style.display = "none";
+  element.addEventListener("keydown", (e) => e.stopPropagation());
+  const roomLine = mk("div", "sub tr-bench-room");
+  const body = mk("div");
+  const metricTitle = mk("div", "sub", t("ui.metrics"));
+  metricTitle.style.display = "none";
+  const metricList = mk("dl", "tr-metrics");
+  element.append(mk("h3", void 0, t("ui.bench")), roomLine, body, metricTitle, metricList);
+  let shape = "";
+  let hasRoom = false;
+  let hasBench = false;
+  const refreshers = [];
+  const metricNodes = /* @__PURE__ */ new Map();
+  let metricKey = "";
+  const syncDisplay = () => {
+    element.style.display = hasRoom || hasBench ? "" : "none";
+  };
+  const numberControl = (control) => {
+    const wrap = mk("label", "tr-ctl");
+    const input = mk("input");
+    input.type = "range";
+    input.min = String(control.min);
+    input.max = String(control.max);
+    input.step = control.step ? String(control.step) : "any";
+    input.disabled = control.disabled;
+    const reading = mk("output");
+    input.oninput = () => o.onControl(control.id, Number(input.value));
+    wrap.append(mk("span", void 0, control.name), input, reading);
+    refreshers.push((view) => {
+      const value = view.controls.find((c) => c.id === control.id)?.value;
+      if (typeof value !== "number") return;
+      if (Number(input.value) !== value) input.value = String(value);
+      reading.textContent = `${o.num(value, control.step && control.step >= 1 ? 0 : 2)}${control.unit ? ` ${control.unit}` : ""}`;
+    });
+    return wrap;
+  };
+  const booleanControl = (control) => {
+    const wrap = mk("label", "tr-ctl");
+    const box2 = mk("input");
+    box2.type = "checkbox";
+    box2.disabled = control.disabled;
+    box2.onchange = () => o.onControl(control.id, box2.checked);
+    wrap.append(box2, document.createTextNode(` ${control.name}`));
+    refreshers.push((view) => {
+      box2.checked = view.controls.find((c) => c.id === control.id)?.value === true;
+    });
+    return wrap;
+  };
+  const choiceControl = (control) => {
+    const wrap = mk("div", "tr-ctl");
+    wrap.appendChild(mk("span", void 0, control.name));
+    if (control.options.length <= SEGMENTED_MAX) {
+      const group = mk("div", "tr-seg");
+      group.setAttribute("role", "group");
+      const buttons = control.options.map((option) => {
+        const b = mk("button", "tr-btn", option.name);
+        b.type = "button";
+        b.disabled = control.disabled;
+        b.onclick = () => o.onControl(control.id, option.id);
+        group.appendChild(b);
+        return { b, id: option.id };
+      });
+      wrap.appendChild(group);
+      refreshers.push((view) => {
+        const value = view.controls.find((c) => c.id === control.id)?.value;
+        for (const { b, id } of buttons) {
+          b.setAttribute("aria-pressed", String(id === value));
+          b.classList.toggle("on", id === value);
+        }
+      });
+      return wrap;
+    }
+    const select = mk("select");
+    select.disabled = control.disabled;
+    for (const option of control.options) {
+      const op = mk("option", void 0, option.name);
+      op.value = option.id;
+      select.appendChild(op);
+    }
+    select.onchange = () => o.onControl(control.id, select.value);
+    wrap.appendChild(select);
+    refreshers.push((view) => {
+      const value = view.controls.find((c) => c.id === control.id)?.value;
+      if (typeof value === "string") select.value = value;
+    });
+    return wrap;
+  };
+  const actionControl = (control) => {
+    const b = mk("button", "tr-btn", control.name);
+    b.type = "button";
+    b.disabled = control.disabled;
+    b.onclick = () => o.onAction(control.id);
+    return b;
+  };
+  const controlElement = (control) => {
+    const el = control.kind === "number" ? numberControl(control) : control.kind === "boolean" ? booleanControl(control) : control.kind === "choice" ? choiceControl(control) : actionControl(control);
+    if (control.hint) el.title = control.hint;
+    return el;
+  };
+  const layerList = (layers) => {
+    const wrap = mk("div", "tr-layers");
+    wrap.appendChild(mk("div", "sub", t("ui.layers")));
+    for (const layer of layers) {
+      const label = mk("label", "tr-ctl");
+      const box2 = mk("input");
+      box2.type = "checkbox";
+      box2.onchange = () => o.onLayer(layer.id, box2.checked);
+      label.append(box2, document.createTextNode(` ${layer.name}`));
+      wrap.appendChild(label);
+      refreshers.push((view) => {
+        box2.checked = view.layers.find((l) => l.id === layer.id)?.on === true;
+      });
+    }
+    return wrap;
+  };
+  const rebuild = (view) => {
+    body.textContent = "";
+    refreshers.length = 0;
+    body.appendChild(mk("div", "sub", view.title));
+    const list = mk("div", "tr-ctls");
+    for (const control of view.controls) if (!control.hidden) list.appendChild(controlElement(control));
+    body.appendChild(list);
+    if (view.layers.length) body.appendChild(layerList(view.layers));
+  };
+  const renderMetrics = (rows) => {
+    metricList.textContent = "";
+    metricNodes.clear();
+    metricTitle.style.display = rows.length ? "" : "none";
+    for (const row of rows) {
+      const dd = mk("dd");
+      const text = mk("span", void 0, row.text);
+      dd.appendChild(text);
+      let bar = null;
+      if (row.ratio !== void 0) {
+        bar = mk("div", "tr-bar");
+        bar.appendChild(mk("i"));
+        dd.appendChild(bar);
+      }
+      metricList.append(mk("dt", void 0, row.name), dd);
+      metricNodes.set(row.id, { text, bar });
+    }
+  };
+  const fillBar = (bar, ratio) => {
+    bar.className = `tr-bar${ratio > 1 ? " bad" : ratio >= 0.8 ? " warn" : ""}`;
+    const fill = bar.firstElementChild;
+    fill.style.width = `${Math.round(Math.max(0, Math.min(1, ratio)) * 100)}%`;
+  };
+  return {
+    element,
+    show(view) {
+      hasBench = view !== null;
+      syncDisplay();
+      if (!view) {
+        shape = "";
+        body.textContent = "";
+        refreshers.length = 0;
+        renderMetrics([]);
+        metricKey = "";
+        return;
+      }
+      const next = shapeOf(view);
+      if (next !== shape) {
+        shape = next;
+        rebuild(view);
+      }
+      for (const refresh of refreshers) refresh(view);
+    },
+    metrics(rows) {
+      hasRoom = rows.room.length > 0;
+      syncDisplay();
+      roomLine.textContent = rows.room.map((row) => `${row.name} ${row.text}`).join(" \xB7 ");
+      const key = rows.module.map((row) => `${row.id}:${row.ratio !== void 0}`).join("|");
+      if (key !== metricKey) {
+        metricKey = key;
+        renderMetrics(rows.module);
+      }
+      for (const row of rows.module) {
+        const node = metricNodes.get(row.id);
+        if (!node) continue;
+        node.text.textContent = row.text;
+        if (node.bar && row.ratio !== void 0) fillBar(node.bar, row.ratio);
+      }
+    },
+    get visible() {
+      if (element.style.display === "none") return false;
+      const parent = element.parentElement;
+      return !parent || getComputedStyle(parent).display !== "none";
+    }
+  };
+}
+
 // src/ui.ts
 var CSS = `
 .tr-root{position:absolute;inset:0;pointer-events:none;font:12px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#e8eaee;overflow:hidden}
@@ -2372,6 +2803,13 @@ var CSS = `
 .tr-cat{flex:0 1 auto;max-height:40%}
 .tr-anim{flex:0 0 auto;max-height:18%}
 .tr-anim .list{display:flex;flex-wrap:wrap;gap:4px}.tr-anim .sub{color:#9aa3b2;margin-bottom:4px}
+.tr-bench{flex:0 1 auto;max-height:34%}
+.tr-bench .sub{color:#9aa3b2;margin-bottom:4px}
+.tr-ctls{display:flex;flex-direction:column;gap:5px}
+.tr-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.tr-ctl input[type=range]{flex:1;min-width:90px}.tr-ctl output{min-width:48px;text-align:right;color:#cfd3da}
+.tr-seg{display:inline-flex;flex-wrap:wrap;gap:2px}
+.tr-layers{margin-top:6px;display:flex;flex-direction:column;gap:2px}
+.tr-metrics{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:6px 0 0}.tr-metrics dt{color:#9aa3b2}.tr-metrics dd{margin:0}
 .tr-tests{flex:1 1 auto;min-height:100px}
 .tr-tests .list{display:flex;flex-direction:column;gap:3px;margin-top:6px}.tr-tests .list .tr-btn{text-align:left}
 .tr-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center}
@@ -2380,7 +2818,7 @@ var CSS = `
 @media (max-width:980px){.tr-left,.tr-right{display:none}.tr-root.open .tr-left,.tr-root.open .tr-right{display:flex}.tr-toggle{display:block;pointer-events:auto}.tr-root.open .tr-toggle{right:min(310px,34vw)}.tr-left{width:min(400px,46vw)}.tr-help{display:none}}
 `;
 var fold = (text) => text.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
-var mk = (tag, cls, text) => {
+var mk2 = (tag, cls, text) => {
   const e = document.createElement(tag);
   if (cls) e.className = cls;
   if (text !== void 0) e.textContent = text;
@@ -2388,42 +2826,42 @@ var mk = (tag, cls, text) => {
 };
 function createUi(o) {
   const { t } = o;
-  const style = mk("style");
+  const style = mk2("style");
   style.textContent = CSS;
-  const root = mk("div", "tr-root");
+  const root = mk2("div", "tr-root");
   const pos = getComputedStyle?.(o.container)?.position;
   if (!pos || pos === "static") o.container.style.position = "relative";
   root.appendChild(style);
   o.container.appendChild(root);
-  const cross = mk("div", "tr-cross");
-  cross.appendChild(mk("i"));
-  const top = mk("div", "tr-top");
-  const toolBox = mk("div", "tr-tool");
-  const status = mk("div", "tr-status");
-  const prog = mk("div", "tr-prog");
-  const progLabel = mk("b");
-  const progBar = mk("div", "tr-bar");
-  const progFill = mk("i");
+  const cross = mk2("div", "tr-cross");
+  cross.appendChild(mk2("i"));
+  const top = mk2("div", "tr-top");
+  const toolBox = mk2("div", "tr-tool");
+  const status = mk2("div", "tr-status");
+  const prog = mk2("div", "tr-prog");
+  const progLabel = mk2("b");
+  const progBar = mk2("div", "tr-bar");
+  const progFill = mk2("i");
   progBar.appendChild(progFill);
   prog.append(progLabel, progBar);
   top.append(toolBox, status, prog);
-  const bottom = mk("div", "tr-bottom");
-  const held = mk("div", "tr-held");
-  const hotbar = mk("div", "tr-hotbar");
+  const bottom = mk2("div", "tr-bottom");
+  const held = mk2("div", "tr-held");
+  const hotbar = mk2("div", "tr-hotbar");
   bottom.append(held, hotbar);
-  const help = mk("div", "tr-help");
+  const help = mk2("div", "tr-help");
   help.textContent = t("ui.help");
-  const left = mk("div", "tr-left");
-  const insp = mk("div", "tr-panel tr-insp");
-  const logPanel = mk("div", "tr-panel tr-log");
+  const left = mk2("div", "tr-left");
+  const insp = mk2("div", "tr-panel tr-insp");
+  const logPanel = mk2("div", "tr-panel tr-log");
   left.append(insp, logPanel);
-  const logTitle = mk("h3", void 0, t("ui.log"));
-  const logBar = mk("div", "tr-logbar");
-  const logBody = mk("div", "tr-logbody");
+  const logTitle = mk2("h3", void 0, t("ui.log"));
+  const logBar = mk2("div", "tr-logbar");
+  const logBody = mk2("div", "tr-logbody");
   const filters = { action: true, event: true, check: true };
   const filterBtns = [];
   for (const ch of ["action", "event", "check"]) {
-    const b = mk("button", "tr-btn on", t(`ui.filter.${ch}`));
+    const b = mk2("button", "tr-btn on", t(`ui.filter.${ch}`));
     b.type = "button";
     b.onclick = () => {
       filters[ch] = !filters[ch];
@@ -2434,8 +2872,8 @@ function createUi(o) {
     logBar.appendChild(b);
   }
   let autoscroll = true;
-  const asLabel = mk("label");
-  const asBox = mk("input");
+  const asLabel = mk2("label");
+  const asBox = mk2("input");
   asBox.type = "checkbox";
   asBox.checked = true;
   asBox.onchange = () => {
@@ -2444,7 +2882,7 @@ function createUi(o) {
   asLabel.append(asBox, document.createTextNode(" " + t("ui.autoscroll")));
   logBar.appendChild(asLabel);
   const logBtn = (label, fn) => {
-    const b = mk("button", "tr-btn", label);
+    const b = mk2("button", "tr-btn", label);
     b.type = "button";
     b.onclick = fn;
     logBar.appendChild(b);
@@ -2452,7 +2890,7 @@ function createUi(o) {
   logBtn(t("ui.copy_json"), () => {
     const text = o.log.toJSON();
     const select = () => {
-      const ta = mk("textarea");
+      const ta = mk2("textarea");
       ta.value = text;
       ta.setAttribute("readonly", "");
       ta.style.cssText = "position:fixed;left:8px;bottom:8px;width:min(480px,80vw);height:120px;z-index:99999";
@@ -2486,12 +2924,12 @@ function createUi(o) {
   const fill = (n, e) => {
     n.className = lineClass(e);
     n.textContent = "";
-    const tm = mk("time", void 0, fmtTime(e.t));
+    const tm = mk2("time", void 0, fmtTime(e.t));
     n.append(tm, document.createTextNode(e.text));
   };
   const addNode = (e) => {
     if (!filters[e.channel]) return;
-    const n = mk("div");
+    const n = mk2("div");
     fill(n, e);
     nodes.set(e.seq, n);
     logBody.appendChild(n);
@@ -2513,17 +2951,18 @@ function createUi(o) {
       if (n) fill(n, e);
     } else addNode(e);
   });
-  const right = mk("div", "tr-right");
-  const cat = mk("div", "tr-panel tr-cat");
-  const anim = mk("div", "tr-panel tr-anim");
-  const tests = mk("div", "tr-panel tr-tests");
-  right.append(cat, anim, tests);
-  cat.appendChild(mk("h3", void 0, t("ui.catalog")));
-  const itemSearch = mk("input", "tr-search");
+  const right = mk2("div", "tr-right");
+  const cat = mk2("div", "tr-panel tr-cat");
+  const anim = mk2("div", "tr-panel tr-anim");
+  const tests = mk2("div", "tr-panel tr-tests");
+  const benchPanel = createBenchPanel({ t, num: (n, d) => num(n, d), onControl: o.onControl, onLayer: o.onLayer, onAction: o.onAction });
+  right.append(cat, anim, benchPanel.element, tests);
+  cat.appendChild(mk2("h3", void 0, t("ui.catalog")));
+  const itemSearch = mk2("input", "tr-search");
   itemSearch.type = "search";
   itemSearch.placeholder = t("ui.search_items");
-  const tabs = mk("div", "tr-tabs");
-  const items = mk("div", "tr-items");
+  const tabs = mk2("div", "tr-tabs");
+  const items = mk2("div", "tr-items");
   cat.append(itemSearch, tabs, items);
   let activeGroup = "";
   const visibleItems = () => {
@@ -2535,17 +2974,17 @@ function createUi(o) {
     items.textContent = "";
     const searching = itemSearch.value.trim() !== "";
     const found = visibleItems();
-    if (!found.length) items.appendChild(mk("div", "tr-empty", t("ui.no_results")));
+    if (!found.length) items.appendChild(mk2("div", "tr-empty", t("ui.no_results")));
     for (const { item: it, group } of found) {
-      const wrap = mk("div", "tr-item");
-      const b = mk("button", "tr-btn", it.name);
-      if (searching) b.appendChild(mk("small", void 0, group));
+      const wrap = mk2("div", "tr-item");
+      const b = mk2("button", "tr-btn", it.name);
+      if (searching) b.appendChild(mk2("small", void 0, group));
       b.type = "button";
       b.title = it.note ?? it.name;
       b.onclick = () => o.onSpawn(it.id);
       wrap.appendChild(b);
       if (it.weapon) {
-        const w = mk("button", "tr-btn", "\u2694");
+        const w = mk2("button", "tr-btn", "\u2694");
         w.type = "button";
         w.title = t("ui.equip");
         w.onclick = () => o.onEquip(it.id);
@@ -2559,7 +2998,7 @@ function createUi(o) {
     const groupNames = [...o.groups().keys()];
     if (!groupNames.includes(activeGroup)) activeGroup = groupNames[0] ?? "";
     for (const g of groupNames) {
-      const b = mk("button", g === activeGroup ? "tr-btn on" : "tr-btn", g);
+      const b = mk2("button", g === activeGroup ? "tr-btn on" : "tr-btn", g);
       b.type = "button";
       b.onclick = () => {
         activeGroup = g;
@@ -2572,9 +3011,9 @@ function createUi(o) {
   renderTabs();
   itemSearch.oninput = renderItems;
   for (const box2 of [itemSearch]) box2.addEventListener("keydown", (e) => e.stopPropagation());
-  const controls = mk("div", "tr-row");
+  const controls = mk2("div", "tr-row");
   const ctl = (label, fn) => {
-    const b = mk("button", "tr-btn", label);
+    const b = mk2("button", "tr-btn", label);
     b.type = "button";
     b.onclick = () => fn(b);
     controls.appendChild(b);
@@ -2595,29 +3034,29 @@ function createUi(o) {
     o.onFast(fast);
   });
   const tapBtn = ctl(t("ui.tap"), () => o.onTap());
-  const qSel = mk("select");
+  const qSel = mk2("select");
   for (const q of ["low", "medium", "high"]) {
-    const op = mk("option", void 0, t(`ui.quality.${q}`));
+    const op = mk2("option", void 0, t(`ui.quality.${q}`));
     op.value = q;
     qSel.appendChild(op);
   }
   qSel.value = o.quality;
   qSel.onchange = () => o.onQuality(qSel.value);
-  const qLabel = mk("label", void 0, t("ui.quality") + " ");
+  const qLabel = mk2("label", void 0, t("ui.quality") + " ");
   qLabel.appendChild(qSel);
   controls.appendChild(qLabel);
-  const count = mk("span");
+  const count = mk2("span");
   controls.appendChild(count);
   cat.appendChild(controls);
-  tests.appendChild(mk("h3", void 0, t("ui.tests")));
-  const runAll = mk("button", "tr-btn", t("ui.run_all"));
+  tests.appendChild(mk2("h3", void 0, t("ui.tests")));
+  const runAll = mk2("button", "tr-btn", t("ui.run_all"));
   runAll.type = "button";
-  const summary = mk("div", "tr-summary");
-  const testSearch = mk("input", "tr-search");
+  const summary = mk2("div", "tr-summary");
+  const testSearch = mk2("input", "tr-search");
   testSearch.type = "search";
   testSearch.placeholder = t("ui.search_tests");
   testSearch.addEventListener("keydown", (e) => e.stopPropagation());
-  const list = mk("div", "list");
+  const list = mk2("div", "list");
   tests.append(runAll, summary, testSearch, list);
   testSearch.oninput = () => {
     const term = fold(testSearch.value.trim());
@@ -2640,7 +3079,7 @@ function createUi(o) {
     list.textContent = "";
     scBtns.clear();
     for (const s of o.scenarios()) {
-      const b = mk("button", "tr-btn", s.name);
+      const b = mk2("button", "tr-btn", s.name);
       b.type = "button";
       b.onclick = async () => {
         if (busy) return;
@@ -2666,7 +3105,7 @@ function createUi(o) {
       busy = false;
     }
   };
-  const toggle = mk("button", "tr-btn tr-toggle", t("ui.panel"));
+  const toggle = mk2("button", "tr-btn tr-toggle", t("ui.panel"));
   toggle.type = "button";
   const togglePanels = () => {
     root.classList.toggle("open");
@@ -2675,15 +3114,15 @@ function createUi(o) {
   toggle.onclick = togglePanels;
   root.append(cross, top, bottom, help, left, right, toggle);
   const bar = (value, max, cls) => {
-    const b = mk("div", `tr-bar ${cls}`);
-    const i = mk("i");
+    const b = mk2("div", `tr-bar ${cls}`);
+    const i = mk2("i");
     i.style.width = `${Math.max(0, Math.min(100, value / Math.max(1e-9, max) * 100))}%`;
     b.appendChild(i);
     return b;
   };
   const row = (k, v) => {
-    const r = mk("div", "r");
-    r.append(mk("span", void 0, k), mk("span", void 0, v));
+    const r = mk2("div", "r");
+    r.append(mk2("span", void 0, k), mk2("span", void 0, v));
     return r;
   };
   const num = (n, d = 1) => {
@@ -2692,12 +3131,12 @@ function createUi(o) {
   };
   const renderInspector = (i) => {
     insp.textContent = "";
-    insp.appendChild(mk("h3", void 0, t("ui.inspector")));
+    insp.appendChild(mk2("h3", void 0, t("ui.inspector")));
     if (!i) {
-      insp.appendChild(mk("div", void 0, t("ui.aim_at_something")));
+      insp.appendChild(mk2("div", void 0, t("ui.aim_at_something")));
       return;
     }
-    insp.appendChild(mk("div", "t", `${i.object} \u203A ${i.part}`));
+    insp.appendChild(mk2("div", "t", `${i.object} \u203A ${i.part}`));
     insp.appendChild(row(t("ins.material"), i.material));
     insp.appendChild(row(t("ins.status"), i.status + (i.burning ? ` \xB7 ${t("ins.burning")}` : "")));
     insp.appendChild(row(t("ins.hp"), `${num(i.hp, 0)} / ${num(i.maxHp, 0)}`));
@@ -2716,30 +3155,30 @@ function createUi(o) {
       insp.appendChild(bar(Math.min(i.stress, 1.2), 1.2, i.stress > 1 ? "bad" : i.stress > 0.7 ? "warn" : "hp"));
     }
     if (i.joints.length) {
-      insp.appendChild(mk("div", void 0, t("ins.joints") + ":"));
+      insp.appendChild(mk2("div", void 0, t("ins.joints") + ":"));
       for (const j of i.joints) {
         const tools = j.tools.length ? j.tools.join(", ") : t("tool.none");
-        insp.appendChild(mk("div", void 0, `\u2022 ${j.kind} (${j.id})${j.open ? ` \xB7 ${t("ins.open")}` : ` \u2192 ${tools}`}`));
+        insp.appendChild(mk2("div", void 0, `\u2022 ${j.kind} (${j.id})${j.open ? ` \xB7 ${t("ins.open")}` : ` \u2192 ${tools}`}`));
       }
     }
-    if (i.note) insp.appendChild(mk("div", void 0, i.note));
+    if (i.note) insp.appendChild(mk2("div", void 0, i.note));
   };
   let lastAnim = "";
   const renderAnimations = (a) => {
     anim.textContent = "";
-    anim.appendChild(mk("h3", void 0, t("ui.animations")));
+    anim.appendChild(mk2("h3", void 0, t("ui.animations")));
     if (!a) {
-      anim.appendChild(mk("div", "sub", t("ui.animations_aim")));
+      anim.appendChild(mk2("div", "sub", t("ui.animations_aim")));
       return;
     }
-    anim.appendChild(mk("div", "sub", a.name));
+    anim.appendChild(mk2("div", "sub", a.name));
     if (a.clips.length === 0) {
-      anim.appendChild(mk("div", "sub", t("ui.animations_none")));
+      anim.appendChild(mk2("div", "sub", t("ui.animations_none")));
       return;
     }
-    const l = mk("div", "list");
+    const l = mk2("div", "list");
     for (const c of a.clips) {
-      const b = mk("button", a.playing === c.id ? "tr-btn on" : "tr-btn", `\u25B6 ${t(`anim.${c.id}`) === `anim.${c.id}` ? c.id : t(`anim.${c.id}`)} (${num(c.duration, 1)} s)`);
+      const b = mk2("button", a.playing === c.id ? "tr-btn on" : "tr-btn", `\u25B6 ${t(`anim.${c.id}`) === `anim.${c.id}` ? c.id : t(`anim.${c.id}`)} (${num(c.duration, 1)} s)`);
       b.type = "button";
       b.onclick = () => o.onPlay(a.objectId, c.id);
       l.appendChild(b);
@@ -2756,7 +3195,7 @@ function createUi(o) {
     hud(s) {
       toolBox.textContent = "";
       toolBox.append(document.createTextNode(s.toolName));
-      if (s.ammo) toolBox.append(mk("small", void 0, s.ammo));
+      if (s.ammo) toolBox.append(mk2("small", void 0, s.ammo));
       if (s.status) status.textContent = s.status;
       else if (!toastTimer) status.textContent = "";
       if (s.progress) {
@@ -2777,7 +3216,7 @@ function createUi(o) {
         ];
         if (s.held.weapon) keys.push(["H", t("hud.equip", { weapon: s.held.weapon })]);
         for (const [k, label] of keys) {
-          held.append(mk("kbd", void 0, k), document.createTextNode(` ${label}  `));
+          held.append(mk2("kbd", void 0, k), document.createTextNode(` ${label}  `));
         }
       } else held.style.display = "none";
       const key = s.slots.join("|") + s.page;
@@ -2787,9 +3226,9 @@ function createUi(o) {
         slotsEl.length = 0;
         hudPage = s.page - 1;
         s.slots.forEach((name, i) => {
-          const b = mk("button", "tr-slot");
+          const b = mk2("button", "tr-slot");
           b.type = "button";
-          b.append(mk("b", void 0, String((i + 1) % 10)), document.createTextNode(name));
+          b.append(mk2("b", void 0, String((i + 1) % 10)), document.createTextNode(name));
           b.title = name;
           b.onclick = () => o.onTool(hudPage * 10 + i);
           hotbar.appendChild(b);
@@ -2827,6 +3266,11 @@ function createUi(o) {
       renderTabs();
     },
     togglePanels,
+    bench: benchPanel.show,
+    metrics: benchPanel.metrics,
+    get benchVisible() {
+      return benchPanel.visible;
+    },
     dispose() {
       offLog();
       if (toastTimer) clearTimeout(toastTimer);
@@ -2839,6 +3283,7 @@ function createUi(o) {
 
 // src/room.ts
 var FIXED_DT = 1 / 60;
+var METRICS_INTERVAL_S = 0.25;
 var v3 = (v) => [v.x, v.y, v.z];
 var dist3 = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
 function createTestRoom(options) {
@@ -3470,7 +3915,7 @@ function createTestRoom(options) {
       }
     });
     player.kick(recoil[0], recoil[1]);
-    emitHost({ type: "shot", weapon: toolId, shots: shots.length, recoil });
+    emitHost({ type: "shot", weapon: toolId, shots: shots.length, recoil, rounds: shots.filter((s) => s.pellet === 0).length, mode: tool.mode });
     const f = first;
     const d = f ? num(f.distance, 1) : "";
     let text;
@@ -3652,6 +4097,7 @@ function createTestRoom(options) {
   const detonate = (p, at, impact) => {
     const w = toolName(p.weapon);
     const results = world.explode(at, p.energy, p.radius, "player");
+    renderer.explode(at, p.energy, p.radius);
     action("explode", t("act.explode", { weapon: w, energy: num(p.energy, 0), radius: num(p.radius, 1), n: results.length }), { data: { weapon: p.weapon, energyJ: p.energy, radius: p.radius, point: at } });
     if (p.fire) {
       fluids.splash("fuel", [at[0], Math.max(at[1], groundAt(at[0], at[2])), at[2]], 0.5);
@@ -3995,9 +4441,12 @@ function createTestRoom(options) {
           say(t("hud.reloading"));
         }
         break;
-      case "KeyQ":
-        tool.cycleMode();
+      case "KeyQ": {
+        const before = tool.mode;
+        const mode = tool.cycleMode();
+        if (mode !== before) emitHost({ type: "mode", weapon: toolId, mode });
         break;
+      }
       case "KeyZ":
         tiltKey = 1;
         break;
@@ -4085,6 +4534,10 @@ function createTestRoom(options) {
   let timeScale = 1;
   let fastForward = false;
   let hudAcc = 1;
+  let metricsAcc = 0;
+  let ownsLoop = false;
+  const roomMetricIds = options.metrics === false ? [] : options.metrics ?? ROOM_METRICS;
+  const roomMetrics = createRoomMetrics({ gl, destruction: renderer, fluids: fluidView, ids: roomMetricIds });
   let qualityName = quality;
   const syncContainers = (sdt) => {
     for (const e of entries.values()) {
@@ -4148,6 +4601,7 @@ function createTestRoom(options) {
     flush();
   };
   const update = (dt) => {
+    if (!ownsLoop) roomMetrics.frame(dt);
     player.update(dt);
     if (tiltKey || heldTilt > 0) {
       heldTilt = Math.max(0, Math.min(2.4, heldTilt + (tiltKey ? 2.2 : -3) * dt));
@@ -4166,6 +4620,11 @@ function createTestRoom(options) {
       hudAcc = 0;
       ui.hud(hudState());
     }
+    metricsAcc += dt;
+    if (metricsAcc >= METRICS_INTERVAL_S && ui) {
+      metricsAcc = 0;
+      if (ui.benchVisible) ui.metrics(metricRows());
+    }
   };
   const hudState = () => {
     const page = Math.floor(toolIndex / 10);
@@ -4281,7 +4740,57 @@ function createTestRoom(options) {
     log.add({ channel: "check", type: ok ? "pass" : "fail", text: `${ok ? "\u2713" : "\u2717"} ${text}`, itemId, data: { ok, ...data } });
   };
   const modules = /* @__PURE__ */ new Map();
-  const detachers = [];
+  const detachers = /* @__PURE__ */ new Map();
+  const benches = /* @__PURE__ */ new Map();
+  let activeBench = null;
+  const lastBench = () => [...benches.keys()].pop() ?? null;
+  const benchView = () => {
+    const store = activeBench ? benches.get(activeBench) : void 0;
+    if (!store) return null;
+    return { title: modules.get(store.moduleId)?.name ?? store.moduleId, controls: store.controls(), layers: store.layers() };
+  };
+  const METRIC_UNAVAILABLE = "n/a";
+  const metricText = (value, digits, unit) => typeof value === "number" ? `${num(value, digits)}${unit ? ` ${unit}` : ""}` : value ?? METRIC_UNAVAILABLE;
+  const reportedFailures = /* @__PURE__ */ new Set();
+  const reportOnce = (key, text) => {
+    if (reportedFailures.has(key)) return;
+    reportedFailures.add(key);
+    host.log(text);
+  };
+  const failureText = (error) => error instanceof Error ? error.message : String(error);
+  const moduleMetrics = () => {
+    const store = activeBench ? benches.get(activeBench) : void 0;
+    const out = {};
+    for (const metric of store?.metrics ?? []) {
+      try {
+        out[metric.id] = metric.read();
+      } catch (error) {
+        out[metric.id] = METRIC_UNAVAILABLE;
+        reportOnce(`${store?.moduleId}:metric:${metric.id}`, t("mod.metric_failed", { name: modules.get(store?.moduleId ?? "")?.name ?? "", metric: metric.id, error: failureText(error) }));
+      }
+    }
+    return out;
+  };
+  const metricRows = () => {
+    const sampled = roomMetrics.sample();
+    const room2 = roomMetricIds.flatMap((id) => {
+      const value = sampled[id];
+      return value === void 0 ? [] : [{ id, name: t(`metric.${id}`), text: num(value, id === "frame_ms" ? 1 : 0) }];
+    });
+    const values = moduleMetrics();
+    const declared = (activeBench ? benches.get(activeBench)?.metrics : void 0) ?? [];
+    const module = declared.map((metric) => {
+      const value = values[metric.id];
+      const ratio = metric.max && typeof value === "number" ? value / metric.max : void 0;
+      return { id: metric.id, name: metric.name, text: metricText(value, metric.digits ?? 0, metric.unit), ...ratio === void 0 ? {} : { ratio } };
+    });
+    return { room: room2, module };
+  };
+  const showBench = () => {
+    if (!ui) return;
+    ui.bench(benchView());
+    ui.metrics(metricRows());
+  };
   const hostListeners = /* @__PURE__ */ new Set();
   const frameListeners = /* @__PURE__ */ new Set();
   let reloadingSeen = false;
@@ -4297,7 +4806,7 @@ function createTestRoom(options) {
     camera,
     locale,
     groundAt,
-    tool: () => ({ weapon: toolId, category: tool.def.category, ammo: tool.ammo, capacity: tool.capacity, reserve: tool.reserve, reloading: tool.reloading }),
+    tool: () => ({ weapon: toolId, category: tool.def.category, ammo: tool.ammo, capacity: tool.capacity, reserve: tool.reserve, reloading: tool.reloading, mode: tool.mode }),
     on(listener) {
       hostListeners.add(listener);
       return () => hostListeners.delete(listener);
@@ -4310,6 +4819,23 @@ function createTestRoom(options) {
       action("module_note", text, { data });
     }
   };
+  const lendBench = (store) => ({
+    value: store.value,
+    layer: store.layer,
+    onChange: store.onChange,
+    patch: store.patch,
+    look: (eye, target) => room.look(eye, target)
+  });
+  const checkModuleBench = (mod, fail) => {
+    const store = createBenchStore(mod, locale, (error) => reportOnce(`${mod.id}:listener`, t("mod.listener_failed", { name: mod.name, error: failureText(error) })));
+    const { controls, layers, metrics } = store.declared;
+    if (controls.length + layers.length + metrics.length === 0) return null;
+    const r = checkBench(store.declared);
+    const text = r.ok ? t("mod.bench_ok", { name: mod.name, controls: controls.length, layers: layers.length, metrics: metrics.length }) : t("mod.bench_fail", { name: mod.name, problems: r.problems.join("; ") });
+    moduleCheck(r.ok, text, { module: mod.id, check: "bench", problems: r.problems });
+    for (const p of r.problems) fail(`bench: ${p}`);
+    return r.ok ? store : null;
+  };
   const loadModule = (mod) => {
     const report = { module: mod.id, items: [], scenarios: [], ok: true, problems: [] };
     const fail = (problem) => {
@@ -4374,8 +4900,29 @@ function createTestRoom(options) {
       report.scenarios.push(sc.id);
     }
     action("module", t("act.module_loaded", { name: mod.name, items: report.items.length, scenarios: report.scenarios.length, result: t(report.ok ? "mod.all_ok" : "mod.some_failed") }), { data: { module: mod.id, items: report.items, scenarios: report.scenarios, ok: report.ok } });
+    const bench = checkModuleBench(mod, fail);
+    detachers.get(mod.id)?.();
+    detachers.delete(mod.id);
+    const previous = benches.get(mod.id);
+    const kept = previous?.encode();
+    previous?.dispose();
+    benches.delete(mod.id);
+    for (const key of [...reportedFailures]) if (key.startsWith(`${mod.id}:`)) reportedFailures.delete(key);
     modules.set(mod.id, mod);
-    if (mod.attach) detachers.push(mod.attach(host));
+    if (bench) {
+      const seed = options.bench?.state?.[mod.id];
+      const restored = kept ?? (typeof seed === "string" ? seed : void 0);
+      if (restored !== void 0) bench.restore(restored);
+      benches.set(mod.id, bench);
+      bench.watch(() => {
+        options.bench?.onChange?.(mod.id, bench.encode());
+        if (activeBench === mod.id) ui?.bench(benchView());
+      });
+      if (!activeBench || !benches.has(activeBench)) activeBench = mod.id;
+    } else if (activeBench === mod.id) activeBench = lastBench();
+    if (mod.attach) detachers.set(mod.id, mod.attach(bench ? { ...host, bench: lendBench(bench) } : host));
+    bench?.sendInitial();
+    showBench();
     ui?.refresh();
     return report;
   };
@@ -4454,6 +5001,8 @@ function createTestRoom(options) {
     const mod = [...modules.values()].find((m) => m.id === area || m.group === area);
     const label = mod?.group ?? S.groups[area] ?? area;
     ui?.showGroup(label);
+    activeBench = mod && benches.has(mod.id) ? mod.id : lastBench();
+    showBench();
     const layout = mod?.area?.(locale);
     if (layout) return layArea(layout);
     const items = catalog.filter((item) => item.group === label);
@@ -4545,8 +5094,18 @@ function createTestRoom(options) {
     loadModule,
     animations: animationsOf,
     playAnimation,
+    bench(moduleId) {
+      const id = moduleId ?? activeBench;
+      return (id ? benches.get(id) : void 0) ?? null;
+    },
+    metrics() {
+      return { room: roomMetrics.sample(), module: moduleMetrics() };
+    },
     dispose() {
-      for (const detach of detachers.splice(0)) detach();
+      for (const detach of detachers.values()) detach();
+      detachers.clear();
+      for (const store of benches.values()) store.dispose();
+      benches.clear();
       cancelAnimationFrame?.(raf);
       window.removeEventListener("resize", onResize);
       player.dispose();
@@ -4617,19 +5176,33 @@ function createTestRoom(options) {
       onPlay: (objectId, clipId) => {
         playAnimation(clipId, objectId);
       },
-      onResize: resize
+      onResize: resize,
+      onControl: (id, value) => {
+        if (activeBench) benches.get(activeBench)?.set(id, value);
+      },
+      onLayer: (id, on) => {
+        if (activeBench) benches.get(activeBench)?.setLayer(id, on);
+      },
+      onAction: (id) => {
+        if (activeBench) benches.get(activeBench)?.act(id);
+      }
     });
     ui.hud(hudState());
+    showBench();
   }
   let raf = 0;
   if (ownRenderer && typeof requestAnimationFrame === "function") {
     let last = performance.now();
+    ownsLoop = true;
     const loop = (now) => {
       raf = requestAnimationFrame(loop);
-      const dt = Math.min(0.05, (now - last) / 1e3);
+      const realDelta = (now - last) / 1e3;
+      roomMetrics.frame(realDelta);
+      const dt = Math.min(0.05, realDelta);
       last = now;
       if (!scenarioRunning) update(dt);
       gl.render(scene, camera);
+      roomMetrics.rendered();
     };
     raf = requestAnimationFrame(loop);
   }
@@ -4651,7 +5224,9 @@ export {
   buildFromSpec,
   createLog,
   createTestRoom,
+  decodeBenchState,
   demoItems,
+  encodeBenchState,
   locales,
   makeScenarios,
   resolveStrings,