@downdraft/engine 0.3.0 → 0.4.0-alpha.0

package/dist/app/src/renderer/bootstrap.js

@@ -132,15 +132,11 @@ export async function bootstrapGame(opts) {
             return;
         const { initDevTools } = devtoolsMod;
         const simStatsProvider = opts.devtools.createSimStatsProvider?.(renderer);
-        const panels = typeof opts.devtools.panels === "function"
-            ? opts.devtools.panels(renderer)
-            : opts.devtools.panels ?? [];
         const workerHosts = typeof opts.devtools.workerHosts === "function"
             ? opts.devtools.workerHosts(renderer)
             : opts.devtools.workerHosts;
         const devtoolsBridge = await importOrDead(initDevTools(renderer, {
             simStatsProvider,
-            panels,
             sceneInspector: opts.devtools.sceneInspector,
             bridgeClass: opts.devtools.bridgeClass,
             workerHosts,

package/dist/app/src/renderer/feature-log.js

@@ -82,22 +82,13 @@ export function collectRendererFeatureLog(opts) {
             data.mem = `${nav.deviceMemory}G`;
     }
     catch { /* navigator unavailable */ }
-    // --- SharedArrayBuffer + crossOriginIsolated (browser isolation only —
-    // there is no origin model on the native host) ---
+    // --- SharedArrayBuffer ---
     try {
         data.sab = typeof SharedArrayBuffer !== "undefined" ? 1 : 0;
     }
     catch {
         data.sab = 0;
     }
-    if (getHostCapabilities().hasDom) {
-        try {
-            data.coi = self.crossOriginIsolated ? 1 : 0;
-        }
-        catch {
-            data.coi = 0;
-        }
-    }
     // --- Worker load status (best-effort; na = not checked) ---
     data.wk = "na";
     // --- Active plugins ---

package/dist/app/src/renderer/mcp-harness.js

@@ -90,17 +90,14 @@ export function createMcpHarness(opts) {
 // These utilities are used by multiple games' MCP automation harnesses.
 // Games import them instead of duplicating the implementation.
 /** Convert a Blob to a base64 string (without the data: prefix). */
-export function blobToBase64(blob) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            const result = reader.result;
-            const base64 = result.split(",")[1];
-            resolve(base64 ?? "");
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-    });
+export async function blobToBase64(blob) {
+    const bytes = new Uint8Array(await blob.arrayBuffer());
+    let bin = "";
+    const CHUNK = 0x8000;
+    for (let i = 0; i < bytes.length; i += CHUNK) {
+        bin += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+    }
+    return btoa(bin);
 }
 /** MCP result helper: wrap data as a JSON content array. */
 export function jsonResult(data) {

package/dist/app/src/renderer/standard-automation-tools.js

@@ -25,7 +25,7 @@
 //     }),
 //   });
 // ============================================================================
-import { getHostCapabilities, KEY } from "@downdraft/engine";
+import { KEY } from "@downdraft/engine";
 import { createLogger } from "@downdraft/engine/util/logger";
 import { downdraft } from "./index.js";
 import { blobToBase64, createMcpHarness, errorResult, jsonResult } from "./mcp-harness.js";
@@ -290,21 +290,13 @@ export function createStandardAutomationTools(ctx) {
                 const rect = surface.getBoundingClientRect();
                 const clientX = rect.left + x;
                 const clientY = rect.top + y;
-                const hasDom = getHostCapabilities().hasDom;
-                // DOM hosts hit-test the topmost element (mimics a real user click
-                // through UI overlays). On native there is no DOM tree — the surface
-                // itself is the input target.
-                const target = hasDom
-                    ? (document.elementFromPoint(clientX, clientY) ?? surface)
-                    : surface;
-                // MiniEventTarget (native event polyfill) has no capture/bubble —
-                // mirror real propagation by also dispatching on window. In a real
-                // DOM this would double-fire, so only do it under the polyfill.
-                const isNativeDom = !hasDom;
+                // There is no DOM tree — the surface itself is the input target.
+                const target = surface;
+                // MiniEventTarget (native event target) has no capture/bubble —
+                // mirror DOM propagation by also dispatching on window.
                 const fire = (ev) => {
                     target.dispatchEvent(ev);
-                    if (isNativeDom)
-                        window.dispatchEvent?.(ev);
+                    window.dispatchEvent?.(ev);
                 };
                 if (type === "wheel") {
                     const deltaX = params.deltaX ?? 0;
@@ -487,130 +479,6 @@ export function createStandardAutomationTools(ctx) {
             handler: () => jsonResult(ctx.getUiState()),
         });
     }
-    // ── get_element_bounds ──
-    if (want("get_element_bounds")) {
-        tools.push({
-            def: {
-                name: "get_element_bounds",
-                description: "Get the bounding box of a DOM element matching a CSS selector. Returns {x, y, width, height, top, left, bottom, right} or found:false.",
-                inputSchema: {
-                    type: "object",
-                    properties: { selector: { type: "string", description: "CSS selector" } },
-                    required: ["selector"],
-                },
-            },
-            handler: (params) => {
-                const selector = params.selector;
-                try {
-                    const el = document.querySelector(selector);
-                    if (!el)
-                        return jsonResult({ found: false, selector });
-                    const rect = el.getBoundingClientRect();
-                    return jsonResult({
-                        found: true, selector,
-                        x: rect.x, y: rect.y, width: rect.width, height: rect.height,
-                        top: rect.top, left: rect.left, bottom: rect.bottom, right: rect.right,
-                    });
-                }
-                catch (e) {
-                    return errorResult(`Failed to query selector "${selector}": ${e.message}`);
-                }
-            },
-        });
-    }
-    // ── inspect_dom ──
-    if (want("inspect_dom")) {
-        tools.push({
-            def: {
-                name: "inspect_dom",
-                description: "Inspect the main thread's DOM for debugging CSS/layout issues. 'stylesheets' lists all <style>/<link> tags; 'element' gets details for a selector.",
-                inputSchema: {
-                    type: "object",
-                    properties: {
-                        action: { type: "string", enum: ["stylesheets", "element"] },
-                        selector: { type: "string", description: "CSS selector (for action='element')" },
-                    },
-                    required: ["action"],
-                },
-            },
-            handler: (params) => {
-                if (!getHostCapabilities().hasDom) {
-                    return errorResult("inspect_dom requires a real DOM — the native host's document is a canvas-compat facade, not a DOM tree");
-                }
-                const action = params.action;
-                if (action === "stylesheets") {
-                    const styles = Array.from(document.querySelectorAll("style, link[rel='stylesheet']")).map((el) => {
-                        const tag = el.tagName.toLowerCase();
-                        if (tag === "style") {
-                            const text = el.textContent ?? "";
-                            return { tag, length: text.length, preview: text.slice(0, 200) };
-                        }
-                        return { tag, href: el.href };
-                    });
-                    return jsonResult({ stylesheets: styles, count: styles.length });
-                }
-                if (action === "element" && params.selector) {
-                    const el = document.querySelector(params.selector);
-                    if (!el)
-                        return jsonResult({ found: false, selector: params.selector });
-                    const cs = getComputedStyle(el);
-                    return jsonResult({
-                        found: true,
-                        selector: params.selector,
-                        tagName: el.tagName,
-                        className: el.className,
-                        id: el.id,
-                        style: {
-                            width: cs.width, height: cs.height,
-                            maxWidth: cs.maxWidth, maxHeight: cs.maxHeight,
-                            display: cs.display, position: cs.position,
-                            top: cs.top, left: cs.left, overflow: cs.overflow,
-                        },
-                        bounds: el.getBoundingClientRect().toJSON(),
-                        childCount: el.children.length,
-                    });
-                }
-                return errorResult("Invalid action or missing selector");
-            },
-        });
-    }
-    // ── get_element_style ──
-    if (want("get_element_style")) {
-        tools.push({
-            def: {
-                name: "get_element_style",
-                description: "Get computed style of a DOM element matching a CSS selector. Pass properties[] to read specific CSS properties.",
-                inputSchema: {
-                    type: "object",
-                    properties: {
-                        selector: { type: "string", description: "CSS selector" },
-                        properties: { type: "array", items: { type: "string" }, description: "CSS properties to read" },
-                    },
-                    required: ["selector"],
-                },
-            },
-            handler: (params) => {
-                if (!getHostCapabilities().hasDom) {
-                    return errorResult("get_element_style requires a real DOM — no computed styles on the native host");
-                }
-                const selector = params.selector;
-                const props = params.properties ?? [];
-                try {
-                    const el = document.querySelector(selector);
-                    if (!el)
-                        return jsonResult({ found: false, selector });
-                    const cs = getComputedStyle(el);
-                    const result = { found: true, selector };
-                    props.forEach((p) => { result[p] = cs.getPropertyValue(p); ; });
-                    result._className = el.className;
-                    return jsonResult(result);
-                }
-                catch (e) {
-                    return errorResult(`Failed to query style for "${selector}": ${e.message}`);
-                }
-            },
-        });
-    }
     // ── inspectable_list / inspectable_get / inspectable_set ──
     const inspectables = ctx.inspectables;
     if (want("inspectable_list") && inspectables) {

package/dist/core/src/module/host.js

@@ -23,15 +23,15 @@ export class ModuleHost {
     }
     /**
      * Inject the DevTools API. Called by the game bootstrap after
-     * `initDevTools()` so plugins can self-register debug panels via
-     * `ctx.devtools.registerPanel(...)` during their `register()` lifecycle.
+     * `initDevTools()` so plugins can self-register data feeds via
+     * `ctx.devtools.registerDataFeed(...)` during their `register()` lifecycle.
      */
     setDevToolsAPI(api) {
         this._devtools = api;
     }
     get devtools() {
         // Return the injected API, or a no-op stub if not set (so plugins that
-        // call ctx.devtools.registerPanel() don't crash if devtools isn't wired).
+        // call ctx.devtools.register*() don't crash if devtools isn't wired).
         return this._devtools ?? NoopDevToolsAPI;
     }
     getRegistry() {
@@ -439,10 +439,7 @@ export class ModuleHost {
     }
 }
 // No-op DevTools API stub — used when setDevToolsAPI() hasn't been called.
-// Plugins that call ctx.devtools.registerPanel() will silently no-op.
 const NoopDevToolsAPI = {
-    registerPanel: () => { },
-    registerOverlayToggle: () => { },
     registerDataFeed: () => { },
     registerCommand: () => { },
     registerSABStat: () => { },

package/dist/core/src/render/canvas-resize-watcher.js

@@ -1,20 +1,13 @@
 export class CanvasResizeWatcher {
     canvas;
     handler;
-    observer = null;
     dpr = 1;
     onSurfaceResize = () => this.resize();
     constructor(canvas, handler) {
         this.canvas = canvas;
         this.handler = handler;
         this.dpr = (typeof window !== "undefined" ? window.devicePixelRatio : 0) || 1;
-        // DOM hosts: element box changes fire ResizeObserver. Native surfaces
-        // aren't Elements — they push a "resize" event instead. Both paths feed
-        // the same resize() so either host drives layout updates.
-        if (typeof ResizeObserver !== "undefined") {
-            this.observer = new ResizeObserver(() => this.resize());
-            this.observer.observe(canvas);
-        }
+        // Native surfaces push a "resize" event when the backing store changes.
         canvas.addEventListener("resize", this.onSurfaceResize);
         this.resize();
     }
@@ -29,8 +22,6 @@ export class CanvasResizeWatcher {
         return this.dpr;
     }
     destroy() {
-        this.observer?.disconnect();
-        this.observer = null;
         this.canvas.removeEventListener("resize", this.onSurfaceResize);
     }
 }

package/dist/core/src/render/game-renderer.js

@@ -6,7 +6,7 @@
 // logic through callback hooks.
 // ============================================================================
 import { UIInputRouter } from "../input/ui-router.js";
-import { getHostCapabilities, getNativeHost } from "../platform/runtime.js";
+import { getNativeHost } from "../platform/runtime.js";
 import { TelemetryCollector } from "../telemetry/collector.js";
 import { GPUProfiler } from "../telemetry/gpu-profiler.js";
 import { GPUResourceTracker } from "../telemetry/gpu-resource-tracker.js";
@@ -405,17 +405,15 @@ export class GameRenderer {
      */
     setResolutionScale(scale) {
         this.resolutionScale = Math.max(0.25, Math.min(1, scale));
-        if (!getHostCapabilities().hasDom) {
-            // On the native host the swapchain extent must equal the window's
-            // real size — wgpu compares the configured size against the surface's
-            // currentExtent at acquire time and returns Outdated forever when
-            // they differ. Shrinking canvas.width/height would also corrupt
-            // clientWidth (UI layout + input coords). Resolution scaling needs
-            // an offscreen-render + upscale path to work here; for now it is a
-            // no-op rather than a brick.
-            if (this.resolutionScale < 1) {
-                log.warn("game-renderer", "resolutionScale is not supported on the native surface (swapchain must match the window size) — ignoring");
-            }
+        // On the native host the swapchain extent must equal the window's
+        // real size — wgpu compares the configured size against the surface's
+        // currentExtent at acquire time and returns Outdated forever when
+        // they differ. Shrinking canvas.width/height would also corrupt
+        // clientWidth (UI layout + input coords). Resolution scaling needs
+        // an offscreen-render + upscale path to work here; for now it is a
+        // no-op rather than a brick.
+        if (this.resolutionScale < 1) {
+            log.warn("game-renderer", "resolutionScale is not supported on the native surface (swapchain must match the window size) — ignoring");
         }
         if (this.lastCssW > 0)
             this.onResize(this.lastCssW, this.lastCssH, this.lastRawDpr);
@@ -431,7 +429,7 @@ export class GameRenderer {
         // performance knob when fill rate is a concern. On native the
         // swapchain is window-sized (see setResolutionScale) so the scale is
         // never applied to the backing store.
-        const cappedDpr = dpr * (getHostCapabilities().hasDom ? this.resolutionScale : 1);
+        const cappedDpr = dpr;
         this.dpr = cappedDpr;
         const w = Math.round(cssWidth * cappedDpr);
         const h = Math.round(cssHeight * cappedDpr);
@@ -777,11 +775,12 @@ export class GameRenderer {
             // final image (skip on GPU error to avoid cascade). This must run AFTER
             // afterFrame — 2D games (viewportCount=0) do their custom rendering in
             // the afterFrame callback, so drawing UI earlier would put it underneath
-            // their clear pass.
+            // their clear pass. The texture comes from peek: a frame the game
+            // skipped must not be started just to draw UI on a blank swapchain.
             if (!gpuError && this.device && this.context) {
                 const compositors = this.uiCompositorOrder.filter((c) => c.hasContent());
                 const uiCanvasView = compositors.length > 0
-                    ? this.getSurfaceTexture()?.createView()
+                    ? this.getFrameSurfaceTexture()?.createView()
                     : undefined;
                 if (uiCanvasView) {
                     const uiEncoder = this.device.createCommandEncoder();
@@ -793,7 +792,10 @@ export class GameRenderer {
                                 storeOp: "store",
                             }],
                     });
-                    compositors.forEach((c) => { c.render(uiPass, this.canvas.width, this.canvas.height); });
+                    // Panel rects are CSS px — pass the CSS surface size so
+                    // rect/surface maps correctly on HiDPI displays (canvas.width is
+                    // physical px; identical where scaleFactor=1).
+                    compositors.forEach((c) => { c.render(uiPass, this.canvas.clientWidth, this.canvas.clientHeight); });
                     uiPass.end();
                     // "preUi" slot — worker passes ordered ahead of the UI-composite
                     // buffer inside the end-of-frame submit.
@@ -853,6 +855,29 @@ export class GameRenderer {
             return null;
         }
     }
+    /**
+     * The surface texture already acquired for the in-flight frame, or null
+     * when nothing has acquired one yet. End-of-frame overlays (the UI
+     * composite) use this so they join a frame rather than start one: on
+     * hosts with frame retention (native), acquiring here would fabricate a
+     * frame the game deliberately skipped (dirty-tracking) and present the
+     * overlay over a blank swapchain image — a full-screen flash. Falls
+     * back to acquiring on contexts without peek (DOM semantics:
+     * getCurrentTexture is idempotent within a frame and present is
+     * implicit, so there is nothing to defeat).
+     */
+    getFrameSurfaceTexture() {
+        const peek = this.context?.peekCurrentTexture;
+        if (typeof peek === "function") {
+            try {
+                return peek.call(this.context) ?? null;
+            }
+            catch {
+                return null;
+            }
+        }
+        return this.getSurfaceTexture();
+    }
     renderViewport(viewportIdx, dt, offscreen) {
         if (!this.device || !this.context)
             return null;
@@ -1101,7 +1126,7 @@ export class GameRenderer {
         const compositors = this.uiCompositorOrder.filter((c) => c.hasContent());
         if (compositors.length === 0 || !this.device || !this.context)
             return;
-        const canvasView = this.getSurfaceTexture()?.createView();
+        const canvasView = this.getFrameSurfaceTexture()?.createView();
         if (!canvasView)
             return;
         const uiEncoder = this.device.createCommandEncoder();
@@ -1113,7 +1138,8 @@ export class GameRenderer {
                     storeOp: "store",
                 }],
         });
-        compositors.forEach((c) => { c.render(uiPass, this.canvas.width, this.canvas.height); });
+        // Panel rects are CSS px — see the main UI composite block above.
+        compositors.forEach((c) => { c.render(uiPass, this.canvas.clientWidth, this.canvas.clientHeight); });
         uiPass.end();
         this.device.queue.submit([uiEncoder.finish()]);
     }

package/dist/core/src/render/index.js

@@ -57,7 +57,6 @@ export { PipelineCache } from "./pipeline.js";
 export { RenderPass } from "./render-pass.js";
 export { RendererInputBusImpl } from "./renderer-input-bus.js";
 export { RendererModuleHost } from "./renderer-module-host.js";
-export { SabCanvasOverlay } from "./sab-canvas-overlay.js";
 export { clearShaderValidationDedup, createValidatedShaderModule, createValidatedShaderModuleAsync, installShaderValidationGuard } from "./shader-validator.js";
 export { CSM_SHADER_CHUNK, POINT_SHADOW_SHADER_CHUNK, SPOT_SHADOW_SHADER_CHUNK } from "./shaders/shadow-chunks.js";
 export { SkyboxRenderer } from "./skybox.js";

package/dist/core/src/render/input-manager.js

@@ -58,9 +58,9 @@ export class InputManager {
                     this.tryLockPointer();
                 }
             }));
-            add(document, "pointerlockchange", (() => {
+            add(this.canvas, "pointerlockchange", (() => {
                 const wasLocked = this.pointerLocked;
-                this.pointerLocked = document.pointerLockElement === this.canvas;
+                this.pointerLocked = this.canvas.pointerLocked === true;
                 if (this.pointerLocked) {
                     this.pointerLockRetryCount = 0;
                     if (this.pointerLockRetryTimer) {
@@ -76,7 +76,7 @@ export class InputManager {
                     this.mouseDelta.dy = 0;
                 }
             }));
-            add(document, "pointerlockerror", (() => {
+            add(this.canvas, "pointerlockerror", (() => {
                 // No action needed — tryLockPointer's fallback timer will retry.
             }));
         }
@@ -150,10 +150,10 @@ export class InputManager {
                 e.preventDefault();
             }
         }), { passive: false });
-        // Use document-level mouseleave: a sibling canvas stacked above (e.g.
-        // sandjongg's tile canvas) would otherwise trigger the canvas's own
-        // mouseleave and break UI hover/pressed state.
-        add(document, "mouseleave", (() => {
+        // Window-level mouseleave: a second interactive canvas stacked above
+        // (e.g. sandjongg's tile canvas) would otherwise trigger the canvas's
+        // own mouseleave and break UI hover/pressed state.
+        add(window, "mouseleave", (() => {
             this.uiInputRouter?.handlePointerLeave();
         }));
         add(this.canvas, "contextmenu", ((e) => {

package/dist/core/src/render/renderer-module-host.js

@@ -50,8 +50,8 @@ export class RendererModuleHost {
         this.inputBus = new RendererInputBusImpl(canvas);
     }
     /**
-     * Inject the DevTools API so renderer plugins can self-register debug
-     * panels via `ctx.devtools.registerPanel(...)` during their `register()`.
+     * Inject the DevTools API so renderer plugins can self-register data
+     * feeds via `ctx.devtools.registerDataFeed(...)` during their `register()`.
      */
     setDevToolsAPI(api) {
         this._devtools = api;
@@ -531,8 +531,6 @@ export class RendererModuleHost {
 }
 // No-op DevTools API stub — used when setDevToolsAPI() hasn't been called.
 const NoopRendererDevToolsAPI = {
-    registerPanel: () => { },
-    registerOverlayToggle: () => { },
     registerDataFeed: () => { },
     registerCommand: () => { },
     registerSABStat: () => { },

package/dist/core/src/ui-font-scale.js

@@ -13,46 +13,13 @@
 // ============================================================================
 let cachedSystemScale = null;
 /**
- * Detect the system/browser default font size and return a scale factor
- * relative to 16px (the browser default). Always returns >= 1.0.
- *
- * Example: if the user set their browser default font to 20px, this returns
- * 1.25. If the browser default is 16px (normal), this returns 1.0.
- *
- * Must be called on the main thread (requires `document`).
+ * Detect the system default font size and return a scale factor relative to
+ * 16px. On the native host there is no CSS engine and no system font-size
+ * preference to measure — always 1.
  */
 export function detectSystemFontScale() {
-    if (cachedSystemScale !== null)
-        return cachedSystemScale;
-    // On the native host the document is a canvas-compat facade — there is no
-    // CSS engine and no getComputedStyle, so there is no "system font size"
-    // to measure. Always 1.
-    if (typeof document === "undefined" || !document.body || typeof getComputedStyle !== "function") {
-        cachedSystemScale = 1;
-        return 1;
-    }
-    const el = document.createElement("div");
-    el.style.fontSize = "1rem";
-    el.style.position = "absolute";
-    el.style.visibility = "hidden";
-    el.style.lineHeight = "0";
-    el.style.margin = "0";
-    el.style.padding = "0";
-    document.body.appendChild(el);
-    let scale = 1;
-    try {
-        const size = parseFloat(getComputedStyle(el).fontSize);
-        // 16px is the browser default. Only scale up (never down).
-        scale = size > 0 ? Math.max(1, size / 16) : 1;
-    }
-    catch {
-        scale = 1;
-    }
-    finally {
-        document.body.removeChild(el);
-    }
-    cachedSystemScale = scale;
-    return scale;
+    cachedSystemScale = 1;
+    return 1;
 }
 /**
  * Cached accessor for the system font scale. After the first call to

package/dist/core/src/worker/rpc.js

@@ -55,6 +55,54 @@ export function getWorkerHost() {
         },
     };
 }
+// --- Event channel stats ---
+// Cheap counters the DOWNDRAFT_EVENT_STATS logger (and QA tooling) read to
+// verify batching is actually engaging: emitted events vs postMessage posts
+// on the worker side, messages vs delivered events on the host side.
+const eventChannelStats = {
+    /** Worker side: emit() calls. */
+    emitted: 0,
+    /** Worker side: postMessage calls carrying events (batch or single). */
+    posts: 0,
+    /** Host side: messages received carrying events. */
+    messages: 0,
+    /** Host side: events delivered to listeners. */
+    events: 0,
+    /** Host side: largest observed __eventBatch. */
+    maxBatch: 0,
+};
+export function getEventChannelStats() {
+    return eventChannelStats;
+}
+function envFlag(name) {
+    try {
+        return (globalThis.process?.env?.[name] === "1");
+    }
+    catch {
+        return false;
+    }
+}
+let statsLoggerStarted = false;
+function startEventStatsLogger() {
+    if (statsLoggerStarted || !envFlag("DOWNDRAFT_EVENT_STATS"))
+        return;
+    statsLoggerStarted = true;
+    let prev = { emitted: 0, posts: 0, messages: 0, events: 0 };
+    const t = setInterval(() => {
+        const s = eventChannelStats;
+        const d = {
+            emitted: s.emitted - prev.emitted,
+            posts: s.posts - prev.posts,
+            messages: s.messages - prev.messages,
+            events: s.events - prev.events,
+        };
+        prev = { emitted: s.emitted, posts: s.posts, messages: s.messages, events: s.events };
+        if (d.emitted || d.posts || d.messages || d.events) {
+            log.info("rpc-events", `5s Δ emitted=${d.emitted} posts=${d.posts} msgs=${d.messages} events=${d.events} maxBatch=${s.maxBatch}`);
+        }
+    }, 5000);
+    t.unref?.();
+}
 function isRpcRequest(msg) {
     return msg && msg.__rpc === true && typeof msg.method === "string";
 }
@@ -88,8 +136,11 @@ export function expose(api, options) {
 }
 export function exposeEvents(host) {
     const h = host ?? getWorkerHost();
+    startEventStatsLogger();
     return {
         emit: (kind, data) => {
+            eventChannelStats.emitted++;
+            eventChannelStats.posts++;
             h.postToHost({ __event: true, kind, data });
         },
     };
@@ -105,17 +156,20 @@ export function exposeEvents(host) {
  */
 export function exposeBatchedEvents(host) {
     const h = host ?? getWorkerHost();
+    startEventStatsLogger();
     let queue = [];
     let flushScheduled = false;
     const flush = () => {
         flushScheduled = false;
         if (queue.length === 0)
             return;
+        eventChannelStats.posts++;
         h.postToHost({ __eventBatch: true, events: queue });
         queue = [];
     };
     return {
         emit: (kind, data) => {
+            eventChannelStats.emitted++;
             queue.push({ kind, data });
             if (!flushScheduled) {
                 flushScheduled = true;
@@ -127,6 +181,7 @@ export function exposeBatchedEvents(host) {
 }
 const DEFAULT_TIMEOUT_MS = 30_000;
 export function wrap(worker, options) {
+    startEventStatsLogger();
     const timeoutMs = options?.timeoutMs ?? DEFAULT_TIMEOUT_MS;
     // A worker nobody terminates must not pin the runtime after the host's
     // window closes — in-flight RPCs still hold the loop via their timeout.
@@ -151,6 +206,10 @@ export function wrap(worker, options) {
         }
         if (isEventMessage(msg) || isEventBatchMessage(msg)) {
             const events = isEventBatchMessage(msg) ? msg.events : [msg];
+            eventChannelStats.messages++;
+            eventChannelStats.events += events.length;
+            if (events.length > eventChannelStats.maxBatch)
+                eventChannelStats.maxBatch = events.length;
             for (const ev of events) {
                 for (const cb of eventListeners.values()) {
                     try {

package/dist/libraries/blitz-ui/src/native-module.js

@@ -116,7 +116,14 @@ export function createBlitzUiNativeModule(options) {
                 const device = ctx.getDevice();
                 const view = ensureTexture(device);
                 const context = ctx.getSurface().getContext("webgpu");
-                const targetTex = context?.getCurrentTexture();
+                // Join the in-flight frame, never start one: on a frame the
+                // game skipped (dirty-tracking), acquiring the surface here
+                // would present the UI blit over a blank swapchain image.
+                const peek = context
+                    ?.peekCurrentTexture;
+                const targetTex = typeof peek === "function"
+                    ? peek.call(context)
+                    : context?.getCurrentTexture() ?? null;
                 const target = targetTex?.createView();
                 if (!view || !target || !targetTex)
                     return;