@bloopjs/web 0.0.106 → 0.0.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.106",
+  "version": "0.0.108",
   "author": "Neil Sarkar",
   "type": "module",
   "repository": {
@@ -37,8 +37,8 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@bloopjs/bloop": "0.0.106",
-    "@bloopjs/engine": "0.0.106",
+    "@bloopjs/bloop": "0.0.108",
+    "@bloopjs/engine": "0.0.108",
     "@preact/signals": "^1.3.1",
     "partysocket": "^1.1.6",
     "preact": "^10.25.4"

package/src/App.ts

@@ -39,6 +39,8 @@ export type StartOptions = {
   debugUi?: boolean | DebugUiOptions;
   /** Tape recording options */
   tape?: MountOptions["tape"];
+  /** External canvas element to use (preserves user CSS via slot projection) */
+  canvas?: HTMLCanvasElement;
 };
 
 const DEFAULT_BROKER_URL = "wss://webrtc-divine-glade-8064.fly.dev/ws";
@@ -55,9 +57,11 @@ export async function start(opts: StartOptions): Promise<App> {
 
   const debugOpts = opts.debugUi
     ? typeof opts.debugUi === "boolean"
-      ? { initiallyVisible: true }
-      : opts.debugUi
-    : undefined;
+      ? { initiallyVisible: true, canvas: opts.canvas }
+      : { ...opts.debugUi, canvas: opts.canvas ?? opts.debugUi.canvas }
+    : opts.canvas
+      ? { canvas: opts.canvas }
+      : undefined;
 
   const app = new App(
     opts.sim,

package/src/debugui/DebugUi.ts

@@ -10,6 +10,8 @@ export type DebugUiOptions = {
   initiallyVisible?: boolean;
   /** Container element to mount to (default: document.body) */
   container?: HTMLElement;
+  /** External canvas element to use (preserves user CSS via slot projection) */
+  canvas?: HTMLCanvasElement;
 };
 
 export class DebugUi {
@@ -49,8 +51,8 @@ export class DebugUi {
     // Initialize state
     debugState.layoutMode.value = initiallyVisible ? "letterboxed" : "off";
 
-    // Create canvas element (game renders here)
-    this.#canvas = document.createElement("canvas");
+    // Use provided canvas or create new one
+    this.#canvas = options.canvas ?? document.createElement("canvas");
 
     // Render Preact app
     this.#render();
@@ -68,10 +70,7 @@ export class DebugUi {
   }
 
   #render(): void {
-    render(
-      Root({ canvas: this.#canvas, hotkey: this.#hotkey }),
-      this.#mountPoint,
-    );
+    render(Root({ canvas: this.#canvas, hotkey: this.#hotkey }), this.#mountPoint);
   }
 
   #setupHotkey(): () => void {

package/src/debugui/components/Root.tsx

@@ -121,10 +121,6 @@ function GameCanvas({ canvas }: { canvas: HTMLCanvasElement }) {
     if (container && !container.contains(canvas)) {
       container.appendChild(canvas);
     }
-
-    return () => {
-      // Don't remove canvas on cleanup - it may need to persist
-    };
   }, [canvas]);
 
   return <div className="canvas-container" ref={containerRef} />;