@bloopjs/web 0.0.106 → 0.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloopjs/web",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "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.107",
+    "@bloopjs/engine": "0.0.107",
     "@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,11 @@ 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");
+
+    // Append canvas to host element (light DOM) for slot projection
+    this.#host.appendChild(this.#canvas);
 
     // Render Preact app
     this.#render();
@@ -68,10 +73,7 @@ export class DebugUi {
   }
 
   #render(): void {
-    render(
-      Root({ canvas: this.#canvas, hotkey: this.#hotkey }),
-      this.#mountPoint,
-    );
+    render(Root({ hotkey: this.#hotkey }), this.#mountPoint);
   }
 
   #setupHotkey(): () => void {

package/src/debugui/components/Root.tsx

@@ -1,4 +1,3 @@
-import { useRef, useEffect } from "preact/hooks";
 import { debugState } from "../state.ts";
 import { Stats } from "./Stats.tsx";
 import { Logs } from "./Logs.tsx";
@@ -8,18 +7,17 @@ import { VerticalBar } from "./VerticalBar.tsx";
 import { BottomBar } from "./BottomBar.tsx";
 
 type RootProps = {
-  canvas: HTMLCanvasElement;
   hotkey?: string;
 };
 
-export function Root({ canvas, hotkey = "Escape" }: RootProps) {
+export function Root({ hotkey = "Escape" }: RootProps) {
   const layoutMode = debugState.layoutMode.value;
 
   if (layoutMode === "off") {
     return (
       <>
         <main className="fullscreen">
-          <GameCanvas canvas={canvas} />
+          <CanvasSlot />
         </main>
         <DebugToggle hotkey={hotkey} />
       </>
@@ -29,7 +27,7 @@ export function Root({ canvas, hotkey = "Escape" }: RootProps) {
   if (layoutMode === "letterboxed") {
     return (
       <>
-        <LetterboxedLayout canvas={canvas} />
+        <LetterboxedLayout />
         <DebugToggle hotkey={hotkey} />
       </>
     );
@@ -40,7 +38,7 @@ export function Root({ canvas, hotkey = "Escape" }: RootProps) {
     <>
       <main className="layout">
         <section className="game">
-          <GameCanvas canvas={canvas} />
+          <CanvasSlot />
         </section>
         <section className="stats">
           <Stats />
@@ -54,7 +52,7 @@ export function Root({ canvas, hotkey = "Escape" }: RootProps) {
   );
 }
 
-function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
+function LetterboxedLayout() {
   const isOnline = debugState.netStatus.value.peers.length > 0;
   const advantage = debugState.advantage.value ?? 0;
   const frameTime = debugState.frameTime.value;
@@ -100,7 +98,7 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
         displayValue={leftDisplayValue}
       />
       <div className={gameClassName}>
-        <GameCanvas canvas={canvas} />
+        <CanvasSlot />
       </div>
       <VerticalBar
         value={rightValue}
@@ -113,19 +111,10 @@ function LetterboxedLayout({ canvas }: { canvas: HTMLCanvasElement }) {
   );
 }
 
-function GameCanvas({ canvas }: { canvas: HTMLCanvasElement }) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    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} />;
+function CanvasSlot() {
+  return (
+    <div className="canvas-container">
+      <slot />
+    </div>
+  );
 }