@downdraft/engine 0.2.0 → 0.3.1

package/modules/devtools/src/init.ts

@@ -5,10 +5,10 @@
 //   1. Creating an IDevToolsDataRenderer adapter
 //   2. Instantiating DevToolsDataBridge (or BaseSceneInspector)
 //   3. Calling init()
-//   4. Wiring sim stats provider, panel extensions, overlay toggles, etc.
+//   4. Wiring sim stats provider, debug overlay provider, etc.
 //
-// Also merges globally-registered panels/feeds/commands from the `devtools`
-// singleton (registered by plugins via ctx.devtools.registerPanel() etc.)
+// Also merges globally-registered feeds/commands from the `devtools`
+// singleton (registered by plugins via ctx.devtools.registerDataFeed() etc.)
 // and from worker manifests (via syncWorkerManifests).
 //
 // Returns the bridge instance for games that need post-init calls
@@ -24,8 +24,6 @@ import type {
     IAssetResolver,
     IDebugModeProvider,
     IDebugOverlayProvider,
-    IDevToolsOverlayToggle,
-    IDevToolsPanelExtension,
     IDevToolsRenderer,
     IPerformanceMetricsProvider,
     ISimStatsProvider,
@@ -33,10 +31,6 @@ import type {
 import { syncWorkerManifests, type WorkerSyncEntry } from "./worker-sync";
 
 export interface InitDevToolsOptions {
-  // --- Panel extensions & toggles (game-declared) ---
-  panels?: IDevToolsPanelExtension[];
-  overlayToggles?: IDevToolsOverlayToggle[];
-
   // --- Providers (game-specific) ---
   simStatsProvider?: ISimStatsProvider & { start?: () => void; stop?: () => void };
   debugOverlayProvider?: IDebugOverlayProvider;
@@ -67,7 +61,7 @@ export interface InitDevToolsOptions {
 
 /**
  * Initialize DevTools with one call. Creates the bridge, wires all providers,
-  merges globally-registered panels/feeds/commands, syncs worker manifests,
+ * merges globally-registered feeds/commands, syncs worker manifests,
  * and exposes the API on window.__sceneInspector.
  *
  * Returns the bridge instance.
@@ -81,20 +75,7 @@ export async function initDevTools(renderer: any, options: InitDevToolsOptions =
     || !!options.bridgeClass
     || isSceneRenderer(renderer);
 
-  // 3. Register game-declared panels/toggles into the global registry
-  //    (these merge with plugin-registered ones)
-  if (options.panels) {
-    options.panels.forEach((panel) => {
-      devtools.registerPanel(panel);
-    });
-  }
-  if (options.overlayToggles) {
-    options.overlayToggles.forEach((toggle) => {
-      devtools.registerOverlayToggle(toggle);
-    });
-  }
-
-  // 4. Sync worker manifests (fetches panels/feeds/commands from sim workers)
+  // 4. Sync worker manifests (fetches feeds/commands from sim workers)
   if (options.workerHosts && options.workerHosts.length > 0) {
     await syncWorkerManifests(options.workerHosts);
   }
@@ -136,10 +117,8 @@ export async function initDevTools(renderer: any, options: InitDevToolsOptions =
     wirePerformanceMetricsProvider(bridge, options.performanceMetricsProvider);
   }
 
-  // 7. Merge globally-registered panels/toggles/feeds/commands into the bridge
-  //    The bridge's getPanelExtensions()/getOverlayToggles() already returns
-  //    game-declared ones; we augment the __sceneInspector API with
-  //    plugin-registered data feeds and commands.
+  // 7. Merge globally-registered feeds/commands/SAB stats into the bridge —
+  //    augments the __sceneInspector API with plugin-registered methods.
   mergeGlobalRegistrations(bridge);
 
   // 8. Initialize the profiling system (if enabled)
@@ -193,10 +172,9 @@ function wirePerformanceMetricsProvider(bridge: DevToolsDataBridge, provider: an
 }
 
 /**
- * Merge globally-registered panels, data feeds, and commands from the `devtools`
+ * Merge globally-registered data feeds and commands from the `devtools`
  * singleton into the bridge's __sceneInspector API.
  *
- * - Panels: merged into getPanelExtensions() (game panels + plugin panels)
  * - Data feeds: added as methods on __sceneInspector (called synchronously)
  * - Commands: added as methods on __sceneInspector (forwarded to worker or called directly)
  * - SAB stats: added as methods on __sceneInspector (read from SAB)
@@ -204,27 +182,6 @@ function wirePerformanceMetricsProvider(bridge: DevToolsDataBridge, provider: an
 function mergeGlobalRegistrations(bridge: DevToolsDataBridge): void {
   const manifest = devtools.getManifest();
 
-  // Augment getPanelExtensions to merge global registry panels
-  const originalGetPanels = (bridge as any).getPanelExtensions?.bind(bridge);
-  (bridge as any).getPanelExtensions = (): IDevToolsPanelExtension[] => {
-    const gamePanels = originalGetPanels?.() ?? [];
-    // Merge: game panels take precedence on id collisions
-    const merged = new Map<string, IDevToolsPanelExtension>();
-    manifest.panels.forEach((p) => { merged.set(p.id, p);; });
-    gamePanels.forEach((p: any) => { merged.set(p.id, p);; });
-    return Array.from(merged.values()).sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
-  };
-
-  // Augment getOverlayToggles to merge global registry toggles
-  const originalGetToggles = (bridge as any).getOverlayToggles?.bind(bridge);
-  (bridge as any).getOverlayToggles = (): IDevToolsOverlayToggle[] => {
-    const gameToggles = originalGetToggles?.() ?? [];
-    const merged = new Map<string, IDevToolsOverlayToggle>();
-    manifest.toggles.forEach((t) => { merged.set(t.id, t);; });
-    gameToggles.forEach((t: any) => { merged.set(t.id, t);; });
-    return Array.from(merged.values());
-  };
-
   // Add data feed methods to the __sceneInspector API
   // These are called synchronously by the panel via callInspector()
   const api = (window as any).__sceneInspector;

package/modules/devtools/src/scene-inspector.ts

@@ -44,8 +44,6 @@ export abstract class BaseSceneInspector extends DevToolsDataBridge {
     return null;
   }
 
-  // getPanelExtensions() and getOverlayToggles() inherited from DevToolsDataBridge.
-
   // --- Init ---
 
   init(renderer: IDevToolsRenderer): void {
@@ -568,9 +566,7 @@ export abstract class BaseSceneInspector extends DevToolsDataBridge {
       const cosX = Math.cos(angleX), sinX = Math.sin(angleX);
 
       const THUMB_SIZE = 192;
-      const canvas = document.createElement("canvas");
-      canvas.width = THUMB_SIZE;
-      canvas.height = THUMB_SIZE;
+      const canvas = new OffscreenCanvas(THUMB_SIZE, THUMB_SIZE);
       const ctx = canvas.getContext("2d");
       if (!ctx) return null;
 
@@ -617,7 +613,7 @@ export abstract class BaseSceneInspector extends DevToolsDataBridge {
         }
       }
 
-      const dataUrl = canvas.toDataURL("image/png");
+      const dataUrl = (canvas as unknown as { toDataURL(type?: string): string }).toDataURL("image/png");
       this.evictThumbnailCache();
       this.thumbnailCache.set(path, dataUrl);
       return dataUrl;

package/modules/devtools/src/types.ts

@@ -69,7 +69,9 @@ export interface IAssetResolver {
   getTextureUrl(uri: string): string | null;
 }
 
-/** Optional debug overlay toggles — games that support chunk grid / velocity arrows implement this. */
+/** Optional debug draw toggles — games with GPU-side debug overlays
+ *  (chunk grid, velocity arrows) implement this. Drives the game's own
+ *  debug rendering, not a DOM overlay. */
 export interface IDebugOverlayProvider {
   setShowChunkGrid(show: boolean): void;
   getShowChunkGrid(): boolean;
@@ -91,73 +93,7 @@ export interface IPerformanceMetricsProvider {
   getPerformanceMetrics(): any;
 }
 
-/** Game-specific tab provider — games register custom DevTools tabs via this interface. */
-export interface IGameDevToolsProvider {
-  getTabs(): GameDevToolsTab[];
-}
-
-export interface GameDevToolsTab {
-  id: string;
-  label: string;
-  onActivate(container: HTMLElement): void;
-  onDeactivate(): void;
-}
-
-/**
- * Game-specific DevTools panel extension.
- * Games declare tabs with HTML content, CSS, and a JS script that runs
- * in the DevTools panel context. The script receives DevToolsPanel helpers
- * and returns lifecycle callbacks.
- */
-export interface IDevToolsPanelExtension {
-  /** Unique id for this extension (e.g. "debug-info", "game-panel"). */
-  id: string;
-  /** Tab label shown in the tab bar. */
-  tabLabel: string;
-  /** Tab tooltip. */
-  tabTooltip?: string;
-  /** Order/priority for tab placement. Core tabs: 0-100, game tabs: 100+. Default: 100. */
-  order?: number;
-  /** __sceneInspector methods that must exist for this tab to be shown. */
-  requiredMethods?: string[];
-  /** HTML content for the panel body (inserted into a container div). */
-  html: string;
-  /** CSS to inject into the panel document. */
-  css?: string;
-  /**
-   * JS to eval in the panel context. Receives a DevToolsPanelHelpers object
-   * and returns { onActivate?, onDeactivate?, onRefresh?, onDestroy? }.
-   */
-  script?: string;
-}
-
-/**
- * Game-specific overlay toggle for the overlays dropdown menu.
- */
-export interface IDevToolsOverlayToggle {
-  /** Unique id (e.g. "chunk-grid", "vel-arrows"). */
-  id: string;
-  /** Label shown next to the checkbox. */
-  label: string;
-  /** __sceneInspector methods that must exist for this toggle to be shown. */
-  requiredMethods?: string[];
-  /**
-   * JS to eval in the panel context. Receives DevToolsPanelHelpers.
-   * Should set up a checkbox listener on #chk-{id} that calls callInspector.
-   */
-  script?: string;
-}
-
-// --- Debug Overlay Data Providers ---
-
-/** Provides entity data for the 2D debug overlay (chunk grid + velocity arrows). */
-export interface IDebugOverlayData {
-  getEntityCount(): number;
-  getEntityPosition(i: number): { x: number; y: number; z: number } | null;
-  getEntityVelocity(i: number): { x: number; y: number; z: number } | null;
-  getPlayerPosition(): { x: number; z: number } | null;
-  getChunkGridConfig(): { chunkSize: number; chunksVisible: number };
-}
+// --- Debug Raycast Providers ---
 
 /** Provides camera state for debug overlays. */
 export interface IDebugCamera {
@@ -170,8 +106,6 @@ export interface IDebugCamera {
   far: number;
 }
 
-// --- Debug Raycast Providers ---
-
 /** Result of a raycast against entities. */
 export interface IRaycastResult {
   entityIndex: number;
@@ -196,23 +130,6 @@ export interface IRaycastProvider {
   ): IRaycastResult | null;
 }
 
-// --- Label Overlay Providers ---
-
-/** A single label entry for the HTML label overlay. */
-export interface ILabelEntry {
-  key: string;
-  text: string;
-  color: string;
-  x: number;
-  y: number;
-  z: number;
-}
-
-/** Provides label data for the HTML label overlay. */
-export interface ILabelProvider {
-  getLabels(): ILabelEntry[];
-}
-
 // --- Scene Sync Providers ---
 
 /** Entity snapshot for scene store sync. */
@@ -251,7 +168,6 @@ export interface IGameDevToolsExtension {
   debugOverlayProvider?: IDebugOverlayProvider;
   debugModeProvider?: IDebugModeProvider;
   performanceMetricsProvider?: IPerformanceMetricsProvider;
-  tabProvider?: IGameDevToolsProvider;
 }
 
 // --- Sim Stats & Controls ---
@@ -274,8 +190,7 @@ export interface ISimStats {
 
 /**
  * Provides sim stats and control methods for the DevTools "Sim" tab.
- * Any sim-driven game (2D or 3D) can implement this; the reusable
- * `createSimStatsPanelExtension()` factory renders the tab.
+ * Any sim-driven game (2D or 3D) can implement this.
  */
 export interface ISimStatsProvider {
   getSimStats(): ISimStats;

package/modules/devtools/src/worker-sync.ts

@@ -1,16 +1,14 @@
 // ============================================================================
 // Renderer-side worker manifest sync — fetches the devtools manifest from
-// one or more sim workers via worker RPC, then wires the worker-registered panels,
-// data feeds, and commands into the renderer-side __sceneInspector API.
+// one or more sim workers via worker RPC, then wires the worker-registered
+// data feeds and commands into the renderer-side __sceneInspector API.
 //
 // Data feeds from workers are read from the devtools SAB (zero-copy).
 // Commands are forwarded via worker RPC.
-// Panel declarations are merged into the global registry.
 // ============================================================================
 
 import { createLogger } from "@downdraft/engine/util/logger";
-import { _devtoolsImpl, devtools, type DevToolsManifest } from "./api";
-import type { IDevToolsPanelExtension } from "./types";
+import { _devtoolsImpl, type DevToolsManifest } from "./api";
 
 const log = createLogger("info");
 
@@ -79,14 +77,6 @@ async function syncOneWorker(entry: WorkerSyncEntry): Promise<void> {
     }
   }
 
-  // Register panels (namespaced by prefix to avoid collisions)
-  manifest.panels.forEach((panel) => {
-    const namespaced: IDevToolsPanelExtension = prefix
-      ? { ...panel, id: `${prefix}:${panel.id}` }
-      : panel;
-    devtools.registerPanel(namespaced);
-  });
-
   // Register data feed readers — these read from the SAB synchronously
   // We register them as main-realm data feeds that read from the worker SAB
   if (sab) {

package/modules/html-ui/src/doc-backend.ts

@@ -76,6 +76,19 @@ interface DocState {
   gpuTex: { ptr: number | bigint; tex: unknown; w: number; h: number } | null;
   stats: { frames: number; resolveMs: number; paintMs: number; diffMs: number; bytes: number };
   statsLast: number;
+  /** smoothWheel (PanelSpec): wheel deltas accumulate here and drain as
+   *  eased per-tick steps in pump() instead of each event repainting an
+   *  instant jump. Deltas/positions stay in doc CSS px (scale applied at
+   *  dispatch); DOM sign convention (+y = scroll down). */
+  smoothWheel: boolean;
+  wheelRx: number;
+  wheelRy: number;
+  wheelX: number;
+  wheelY: number;
+  wheelMods?: string[];
+  /** performance.now() of the last step — the ease is dt-based so the curve
+   *  holds regardless of pump cadence. */
+  wheelT: number;
 }
 
 // Bound-buffer header (u32 indices) — mirrors BoundBuf layout in lib.rs.
@@ -211,9 +224,32 @@ export function createDocCore(emit: (m: WorkerToUi) => void, gpuHooks?: DocGpuHo
     }
   }
 
+  // Smooth-wheel ease: fraction of the remainder applied per elapsed ms.
+  // τ≈45ms → ~30% per 16ms tick, ~95% drained in ~135ms — snappy but
+  // animated. A 1/MAX_TICKS floor bounds any backlog at ~320ms of drain —
+  // a fast wheel can't make scroll trail input indefinitely. Dispatching
+  // real wheel events keeps Blitz's hit-testing, scroll chaining, scrollbar
+  // reveal, and scroll DOM events intact.
+  const WHEEL_TAU_MS = 45;
+  const WHEEL_MAX_TICKS = 20;
+  function stepWheel(s: DocState, now: number): void {
+    const dt = Math.min(50, Math.max(1, now - s.wheelT));
+    s.wheelT = now;
+    const f = Math.max(1 - Math.exp(-dt / WHEEL_TAU_MS), 1 / WHEEL_MAX_TICKS);
+    // Snap the tail: a step below ~¾px/axis applies the whole residue instead
+    // of asymptoting through invisible sub-pixel repaints.
+    const dx = Math.abs(s.wheelRx) * f < 0.75 ? s.wheelRx : s.wheelRx * f;
+    const dy = Math.abs(s.wheelRy) * f < 0.75 ? s.wheelRy : s.wheelRy * f;
+    s.wheelRx -= dx;
+    s.wheelRy -= dy;
+    const k = s.scale;
+    s.doc.wheel(s.wheelX * k, s.wheelY * k, dx * k, dy * k, s.wheelMods);
+  }
+
   function pump() {
     const now = performance.now();
     for (const [id, s] of docs.entries()) {
+      if (s.smoothWheel && (s.wheelRx !== 0 || s.wheelRy !== 0)) stepWheel(s, now);
       const events = s.doc.pollEvents();
       if (events.length) emit({ type: "events", id, events });
       if (!s.doc.pending()) continue;
@@ -284,6 +320,8 @@ export function createDocCore(emit: (m: WorkerToUi) => void, gpuHooks?: DocGpuHo
             doc, scale: m.scale, cssW: m.cssW, cssH: m.cssH,
             maxFps: m.maxFps ?? 0, lastFrame: -1e9,
             sab: null, sabU32: null, sabDisabled: false, gpuTex: null,
+            smoothWheel: m.smoothWheel === true,
+            wheelRx: 0, wheelRy: 0, wheelX: 0, wheelY: 0, wheelT: 0,
             stats: freshStats(), statsLast: 0,
           };
           docs.set(m.id, s);
@@ -295,9 +333,16 @@ export function createDocCore(emit: (m: WorkerToUi) => void, gpuHooks?: DocGpuHo
           if (s) s.maxFps = m.maxFps;
           break;
         }
-        case "setHtml":
+        case "setHtml": {
           if (/float\s*:/.test(m.html)) emit({ type: "error", id: m.id, message: "CSS float hangs Blitz layout — use flex instead" });
-          docs.get(m.id)?.doc.setHtml(m.html); break;
+          const s = docs.get(m.id);
+          if (!s) break;
+          // Drop any in-flight smooth-wheel drain — its remainder belongs to
+          // the document being replaced.
+          s.wheelRx = s.wheelRy = 0;
+          s.doc.setHtml(m.html);
+          break;
+        }
         case "resize": {
           const s = docs.get(m.id);
           if (s) {
@@ -403,9 +448,27 @@ export function createDocCore(emit: (m: WorkerToUi) => void, gpuHooks?: DocGpuHo
           const k = s.scale;
           switch (msg.kind) {
             case "move": s.doc.pointerMove(msg.x * k, msg.y * k, msg.mods); break;
-            case "down": s.doc.pointerDown(msg.x * k, msg.y * k, msg.button, msg.mods); break;
+            case "down":
+              // A press interrupts any in-flight wheel scroll (mirrors
+              // Blitz's interrupt_animation semantics for user input).
+              s.wheelRx = 0; s.wheelRy = 0;
+              s.doc.pointerDown(msg.x * k, msg.y * k, msg.button, msg.mods);
+              break;
             case "up": s.doc.pointerUp(msg.x * k, msg.y * k, msg.button, msg.mods); break;
-            case "wheel": s.doc.wheel(msg.x * k, msg.y * k, msg.deltaX * k, msg.deltaY * k, msg.mods); break;
+            case "wheel":
+              if (s.smoothWheel) {
+                // A fresh gesture back-dates wheelT so the first pump tick
+                // applies a full ~16ms step immediately — no dead frame.
+                if (s.wheelRx === 0 && s.wheelRy === 0) s.wheelT = performance.now() - 16;
+                s.wheelRx += msg.deltaX;
+                s.wheelRy += msg.deltaY;
+                s.wheelX = msg.x;
+                s.wheelY = msg.y;
+                s.wheelMods = msg.mods;
+              } else {
+                s.doc.wheel(msg.x * k, msg.y * k, msg.deltaX * k, msg.deltaY * k, msg.mods);
+              }
+              break;
             case "key": s.doc.key(msg.down, msg.key, msg.code, msg.text, msg.mods); break;
           }
           break;

package/modules/html-ui/src/host.ts

@@ -10,6 +10,7 @@ import type { OsrDomEvent } from "@downdraft/engine/libraries/blitz-ui/native-os
 import type { InputEventControl, RendererInputBus } from "@downdraft/engine/module/renderer-module";
 import { getHostCapabilities, getNativeHost } from "@downdraft/engine/platform/runtime";
 import { createLogger } from "@downdraft/engine/util/logger";
+import { untrackedTimeout } from "@downdraft/engine/util/session-timer";
 import { PanelBlitPass } from "./composite";
 import { createLocalBackend, createWorkerBackend, type DocBackend } from "./doc-backend";
 import type { DocInputMsg, DocMutation, NavNodeInfo, UiPointerMsg, WorkerToUi } from "./protocol";
@@ -40,6 +41,10 @@ export interface PanelSpec {
   zoom?: number;
   /** Raster-rate cap for animating docs (0 = uncapped). Static docs repaint on demand regardless. */
   maxFps?: number;
+  /** Ease wheel deltas out at frame cadence instead of applying each detent
+   *  as an instant jump — scrolling animates smoothly and repaints stay at
+   *  one per pump tick regardless of input rate. Default false. */
+  smoothWheel?: boolean;
   /** Initial markup (or `vdom` rendered beforehand by the caller). */
   html: string;
   /** When false the panel never receives pointer input and `panelAt` skips
@@ -306,7 +311,7 @@ export class HtmlUiHost {
     this.order.push(id);
     // Doc viewport scale = raster px per CSS px = scale * zoom; layout size
     // is rect/zoom CSS px so the raster still covers rect*scale texture px.
-    this.send({ type: "create", id, cssW: spec.rect.w / zoom, cssH: spec.docH ?? spec.rect.h / zoom, scale: scale * zoom, html: spec.html, maxFps: spec.maxFps });
+    this.send({ type: "create", id, cssW: spec.rect.w / zoom, cssH: spec.docH ?? spec.rect.h / zoom, scale: scale * zoom, html: spec.html, maxFps: spec.maxFps, smoothWheel: spec.smoothWheel });
     // GPU-direct: create the panel texture eagerly so the worker's texBind
     // lands before its first upload — the host knows raster dims at mount.
     if (this.gpuReady) this.bindPanelTex(panel);
@@ -470,6 +475,9 @@ export class HtmlUiHost {
    *  `incrementalDom` is false until then, and forever on old cdylibs). */
   get docCaps(): { incrementalDom: boolean } { return this.caps; }
 
+  /** Which doc backend is live — "worker" (raster off-thread) or "local". */
+  get backendKind(): "worker" | "local" { return this.backend.kind; }
+
   /** Compositor surface for GameRenderer's end-of-frame UI pass. */
   get compositor(): { hasContent(): boolean; render(pass: GPURenderPassEncoder, w: number, h: number): void } {
     return {
@@ -511,7 +519,7 @@ export class HtmlUiHost {
       this.terminating = true;
       this.send({ type: "gpuDetach" });
       const backend = this.backend;
-      setTimeout(() => {
+      untrackedTimeout(() => {
         if (!this.gpuDetachAcked) backend.dispose();
         this.destroyRetired();
       }, 150);
@@ -912,7 +920,7 @@ export class HtmlUiHost {
         || (p.postedBindPtr !== null && BigInt(ptr) === p.postedBindPtr));
     if (borrowed) {
       const key = BigInt(ptr);
-      const timer = setTimeout(() => {
+      const timer = untrackedTimeout(() => {
         if (this.retiredTex.delete(key)) t.destroy();
       }, 1000);
       this.retiredTex.set(key, { tex: t, timer });

package/modules/html-ui/src/protocol.ts

@@ -52,7 +52,7 @@ export interface NavNodeInfo {
 
 /** Host → backend */
 export type UiToWorker =
-  | { type: "create"; id: string; cssW: number; cssH: number; scale: number; html: string; maxFps?: number }
+  | { type: "create"; id: string; cssW: number; cssH: number; scale: number; html: string; maxFps?: number; smoothWheel?: boolean }
   | { type: "fps"; id: string; maxFps: number }
   | { type: "setHtml"; id: string; html: string }
   | { type: "resize"; id: string; cssW: number; cssH: number; scale: number }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@downdraft/engine",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/knackstedt/downdraft.git",
@@ -844,13 +844,12 @@
   },
   "dependencies": {
     "@bokuweb/zstd-wasm": "^0.0.27",
+    "@dimforge/rapier3d-compat": "^0.19.3",
     "@gltf-transform/core": "^4.4.2",
     "@gltf-transform/extensions": "^4.4.2",
     "@gltf-transform/functions": "^4.4.2",
     "@h00w/basis-universal-transcoder": "^2.1.0",
-    "@jitl/quickjs-singlefile-browser-release-sync": "^0.32.0",
     "acorn": "^8.15.0",
-    "buffer": "^6.0.3",
     "comment-json": "^5.0.0",
     "dns-packet": "^5.6.1",
     "draco3dgltf": "^1.5.7",
@@ -859,13 +858,13 @@
     "ktx2-encoder": "^0.6.0",
     "meshoptimizer": "^1.2.0",
     "quickjs-emscripten": "^0.32.0",
+    "recast-navigation": "^0.43.1",
     "wgpu-matrix": "^3.4.2",
     "xxh3-ts": "^2.0.1",
-    "xxhash-wasm": "^0.4.2",
     "zustand": "^5.0.2"
   },
   "peerDependencies": {
-    "@downdraft/platform-native": "^0.2.0"
+    "@downdraft/platform-native": "^0.3.1"
   },
   "peerDependenciesMeta": {
     "@downdraft/platform-native": {

package/test/src/vision-test.ts

@@ -251,14 +251,12 @@ export class VisionTest {
     height: number,
   ): Promise<string> {
     const data = await this.captureTexture(texture, width, height);
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
+    const canvas = new OffscreenCanvas(width, height);
     const ctx = canvas.getContext("2d")!;
     const imageData = ctx.createImageData(width, height);
     imageData.data.set(data);
     ctx.putImageData(imageData, 0, 0);
-    return canvas.toDataURL("image/png");
+    return (canvas as unknown as { toDataURL(type?: string): string }).toDataURL("image/png");
   }
 
   destroy(): void {

package/core/src/render/sab-canvas-overlay.ts

@@ -1,122 +0,0 @@
-// ============================================================================
-// SabCanvasOverlay — DOM <canvas> overlay backed by a SharedArrayBuffer bitmap
-//
-// Generalized from overburden's MapCanvas. Provides the generic shell:
-//   - A visible <canvas> fixed-positioned over the game canvas
-//     (pointer-events: none, configurable z-index, hidden while opacity <= 0).
-//   - An offscreen "bitmap" canvas at a fixed data resolution that is repainted
-//     only when a SAB sequence counter changes (via getSeq + redrawBitmap).
-//   - Per-frame window resize tracking and opacity control.
-//
-// The game supplies the compositing + drawing logic via callbacks; the overlay
-// owns all DOM plumbing.
-// ============================================================================
-
-export interface SabCanvasOverlayOptions {
-  /** DOM id for the visible canvas. Default: "sab-canvas-overlay" */
-  id?: string;
-  /** CSS z-index. Default: 55 (above the game surface, below DOM overlays) */
-  zIndex?: number;
-  /** Offscreen bitmap resolution. If omitted, no bitmap canvas is created. */
-  bitmapWidth?: number;
-  bitmapHeight?: number;
-  /** CSS image-rendering for the visible canvas. Default: "pixelated" */
-  imageRendering?: "pixelated" | "auto";
-  /**
-   * Monotonic sequence number for the backing data (e.g. a SAB seq counter).
-   * The bitmap is repainted only when this value changes. Omit to repaint
-   * every visible frame.
-   */
-  getSeq?: () => number;
-  /**
-   * Repaint the offscreen bitmap canvas. Called only when getSeq() reports
-   * a new value (requires bitmapWidth/bitmapHeight).
-   */
-  redrawBitmap?: (ctx: CanvasRenderingContext2D, bitmapW: number, bitmapH: number) => void;
-  /**
-   * Draw the visible canvas each visible frame, after the bitmap has been
-   * refreshed. `bitmap` is the offscreen bitmap canvas (or null when no
-   * bitmap was configured).
-   */
-  draw: (ctx: CanvasRenderingContext2D, bitmap: HTMLCanvasElement | null, w: number, h: number) => void;
-}
-
-export class SabCanvasOverlay {
-  readonly canvas: HTMLCanvasElement;
-  protected ctx: CanvasRenderingContext2D;
-  /** Offscreen bitmap canvas (fixed data resolution). Null when unconfigured. */
-  readonly bitmapCanvas: HTMLCanvasElement | null = null;
-  protected bitmapCtx: CanvasRenderingContext2D | null = null;
-  private opts: SabCanvasOverlayOptions;
-  private lastSeq = -1;
-
-  constructor(opts: SabCanvasOverlayOptions) {
-    this.opts = opts;
-
-    this.canvas = document.createElement("canvas");
-    this.canvas.id = opts.id ?? "sab-canvas-overlay";
-    this.canvas.style.position = "fixed";
-    this.canvas.style.top = "0";
-    this.canvas.style.left = "0";
-    this.canvas.style.width = "100%";
-    this.canvas.style.height = "100%";
-    this.canvas.style.pointerEvents = "none";
-    this.canvas.style.zIndex = String(opts.zIndex ?? 55);
-    this.canvas.style.display = "none"; // hidden until opacity > 0
-    this.canvas.style.imageRendering = opts.imageRendering ?? "pixelated";
-    this.ctx = this.canvas.getContext("2d")!;
-
-    if (opts.bitmapWidth !== undefined && opts.bitmapHeight !== undefined) {
-      this.bitmapCanvas = document.createElement("canvas");
-      this.bitmapCanvas.width = opts.bitmapWidth;
-      this.bitmapCanvas.height = opts.bitmapHeight;
-      this.bitmapCtx = this.bitmapCanvas.getContext("2d")!;
-    }
-  }
-
-  /** Attach the canvas to the DOM (call once during init). */
-  mount(parent: HTMLElement = document.body): void {
-    parent.appendChild(this.canvas);
-  }
-
-  /**
-   * Per-frame update. Call from the render loop.
-   * Hides the canvas while `opacity <= 0`; otherwise resizes the canvas to the
-   * window, repaints the bitmap when the seq counter advanced, and invokes
-   * the draw callback.
-   */
-  update(opacity: number): void {
-    if (opacity <= 0) {
-      this.canvas.style.display = "none";
-      return;
-    }
-    this.canvas.style.display = "block";
-    this.canvas.style.opacity = String(opacity);
-
-    // Resize the visible canvas to match the window if needed.
-    const w = window.innerWidth;
-    const h = window.innerHeight;
-    if (this.canvas.width !== w || this.canvas.height !== h) {
-      this.canvas.width = w;
-      this.canvas.height = h;
-    }
-
-    // Repaint the bitmap if the backing data has a new seq value.
-    const seq = this.opts.getSeq?.();
-    if (this.bitmapCtx && (seq === undefined || seq !== this.lastSeq)) {
-      if (seq !== undefined) this.lastSeq = seq;
-      this.opts.redrawBitmap?.(this.bitmapCtx, this.bitmapCanvas!.width, this.bitmapCanvas!.height);
-    }
-
-    this.opts.draw(this.ctx, this.bitmapCanvas, w, h);
-  }
-
-  /** Mark the bitmap stale so it repaints on the next visible frame. */
-  invalidate(): void {
-    this.lastSeq = -1;
-  }
-
-  dispose(): void {
-    this.canvas.remove();
-  }
-}