@bloopjs/web 0.0.105 → 0.0.107

package/dist/App.d.ts

@@ -18,6 +18,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;
 };
 /** Start a bloop game on the web */
 export declare function start(opts: StartOptions): Promise<App>;

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EACV,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,KAAK,GAAG,EACT,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQhE,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAI1B,MAAM,MAAM,YAAY,GAAG;IACzB,4BAA4B;IAC5B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,yEAAyE;IACzE,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,sDAAsD;IACtD,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,qFAAqF;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wFAAwF;IACxF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IACnC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B,8EAA8E;IAC9E,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAIF,oCAAoC;AACpC,wBAAsB,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CA0C5D;AAED;;;;;;GAMG;AACH,qBAAa,GAAG;;IAEd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;gBAUzB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,EAChB,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,cAAc;IAuB9B,uDAAuD;IACvD,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,EAEf;IAeD,+BAA+B;IAC/B,IAAI,OAAO,IAAI,OAAO,GAAG,IAAI,CAE5B;IAED,gEAAgE;IAChE,IAAI,MAAM,IAAI,iBAAiB,GAAG,IAAI,CAErC;IAED,6CAA6C;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,GAAG,IAAI;IAIrD,6BAA6B;IAC7B,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI;IAc3D,sDAAsD;IACtD,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAA8B;IAC5E,qDAAqD;IACrD,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAA8B;IAC3E,qCAAqC;IACrC,KAAK,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAgC;IAExE,gEAAgE;IAChE,SAAS,IAAI,IAAI;IA2QjB,kDAAkD;IAClD,OAAO,IAAI,IAAI;IAUf;;;;;;;;;;;;OAYG;IACG,SAAS,CACb,MAAM,EAAE,GAAG,EACX,IAAI,CAAC,EAAE,YAAY,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,GACzC,OAAO,CAAC,IAAI,CAAC;CAuBjB;AAED,iBAAS,cAAc,CAAC,CAAC,SAAS,GAAG,EAAE,KAAK;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,KAAK,aAAa,CAAC;IAC7D,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,cAAc,EAAE,aAAa,CAAC;CAC/B,CAuBA;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC"}

package/dist/debugui/DebugUi.d.ts

@@ -6,6 +6,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 declare class DebugUi {
     #private;

package/dist/debugui/DebugUi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DebugUi.d.ts","sourceRoot":"","sources":["../../src/debugui/DebugUi.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,UAAU,EAAc,MAAM,YAAY,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB,CAAC;AAEF,qBAAa,OAAO;;gBAQN,OAAO,GAAE,cAAmB;IAgExC,4CAA4C;IAC5C,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IAED,mDAAmD;IACnD,IAAI,KAAK,IAAI,UAAU,CAEtB;IAED,mDAAmD;IACnD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,OAAO,IAAI,IAAI;CAKhB"}
+{"version":3,"file":"DebugUi.d.ts","sourceRoot":"","sources":["../../src/debugui/DebugUi.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,UAAU,EAAc,MAAM,YAAY,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,qBAAa,OAAO;;gBAQN,OAAO,GAAE,cAAmB;IAgExC,4CAA4C;IAC5C,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IAED,mDAAmD;IACnD,IAAI,KAAK,IAAI,UAAU,CAEtB;IAED,mDAAmD;IACnD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,OAAO,IAAI,IAAI;CAKhB"}

package/dist/debugui/components/Root.d.ts

@@ -1,7 +1,6 @@
 type RootProps = {
-    canvas: HTMLCanvasElement;
     hotkey?: string;
 };
-export declare function Root({ canvas, hotkey }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ hotkey }: RootProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Root.d.ts.map

package/dist/debugui/components/Root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/Root.tsx"],"names":[],"mappings":"AASA,KAAK,SAAS,GAAG;IACf,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,MAAiB,EAAE,EAAE,SAAS,2CAwC5D"}
+{"version":3,"file":"Root.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/Root.tsx"],"names":[],"mappings":"AAQA,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,MAAiB,EAAE,EAAE,SAAS,2CAwCpD"}

package/dist/mod.js

@@ -1504,7 +1504,7 @@ function readTapeHeader(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.105/wasm/bloop.wasm");
+var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.107/wasm/bloop.wasm");
 var MAX_ROLLBACK_FRAMES = 500;
 var TIME_CTX_OFFSET = 0;
 var INPUT_CTX_OFFSET = TIME_CTX_OFFSET + 4;
@@ -3390,7 +3390,7 @@ function readTapeHeader2(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.105/wasm/bloop.wasm");
+var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.107/wasm/bloop.wasm");
 var TIME_CTX_OFFSET2 = 0;
 var INPUT_CTX_OFFSET2 = TIME_CTX_OFFSET2 + 4;
 var EVENTS_OFFSET2 = INPUT_CTX_OFFSET2 + 4;
@@ -5623,16 +5623,14 @@ function BottomBar() {
 }
 
 // src/debugui/components/Root.tsx
-function Root({ canvas, hotkey = "Escape" }) {
+function Root({ hotkey = "Escape" }) {
   const layoutMode2 = debugState.layoutMode.value;
   if (layoutMode2 === "off") {
     return /* @__PURE__ */ u4(k, {
       children: [
         /* @__PURE__ */ u4("main", {
           className: "fullscreen",
-          children: /* @__PURE__ */ u4(GameCanvas, {
-            canvas
-          }, undefined, false, undefined, this)
+          children: /* @__PURE__ */ u4(CanvasSlot, {}, undefined, false, undefined, this)
         }, undefined, false, undefined, this),
         /* @__PURE__ */ u4(DebugToggle, {
           hotkey
@@ -5643,9 +5641,7 @@ function Root({ canvas, hotkey = "Escape" }) {
   if (layoutMode2 === "letterboxed") {
     return /* @__PURE__ */ u4(k, {
       children: [
-        /* @__PURE__ */ u4(LetterboxedLayout, {
-          canvas
-        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u4(LetterboxedLayout, {}, undefined, false, undefined, this),
         /* @__PURE__ */ u4(DebugToggle, {
           hotkey
         }, undefined, false, undefined, this)
@@ -5659,9 +5655,7 @@ function Root({ canvas, hotkey = "Escape" }) {
         children: [
           /* @__PURE__ */ u4("section", {
             className: "game",
-            children: /* @__PURE__ */ u4(GameCanvas, {
-              canvas
-            }, undefined, false, undefined, this)
+            children: /* @__PURE__ */ u4(CanvasSlot, {}, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           /* @__PURE__ */ u4("section", {
             className: "stats",
@@ -5679,7 +5673,7 @@ function Root({ canvas, hotkey = "Escape" }) {
     ]
   }, undefined, true, undefined, this);
 }
-function LetterboxedLayout({ canvas }) {
+function LetterboxedLayout() {
   const isOnline = debugState.netStatus.value.peers.length > 0;
   const advantage = debugState.advantage.value ?? 0;
   const frameTime2 = debugState.frameTime.value;
@@ -5711,9 +5705,7 @@ function LetterboxedLayout({ canvas }) {
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4("div", {
         className: gameClassName,
-        children: /* @__PURE__ */ u4(GameCanvas, {
-          canvas
-        }, undefined, false, undefined, this)
+        children: /* @__PURE__ */ u4(CanvasSlot, {}, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4(VerticalBar, {
         value: rightValue,
@@ -5725,18 +5717,10 @@ function LetterboxedLayout({ canvas }) {
     ]
   }, undefined, true, undefined, this);
 }
-function GameCanvas({ canvas }) {
-  const containerRef = A2(null);
-  y2(() => {
-    const container = containerRef.current;
-    if (container && !container.contains(canvas)) {
-      container.appendChild(canvas);
-    }
-    return () => {};
-  }, [canvas]);
+function CanvasSlot() {
   return /* @__PURE__ */ u4("div", {
     className: "canvas-container",
-    ref: containerRef
+    children: /* @__PURE__ */ u4("slot", {}, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 
@@ -6577,7 +6561,8 @@ class DebugUi {
     this.#mountPoint.style.cssText = "width:100%;height:100%;";
     this.#shadow.appendChild(this.#mountPoint);
     debugState.layoutMode.value = initiallyVisible ? "letterboxed" : "off";
-    this.#canvas = document.createElement("canvas");
+    this.#canvas = options.canvas ?? document.createElement("canvas");
+    this.#host.appendChild(this.#canvas);
     this.#render();
     container.appendChild(this.#host);
     this.#cleanup = this.#setupHotkey();
@@ -6586,7 +6571,7 @@ class DebugUi {
     });
   }
   #render() {
-    G(Root({ canvas: this.#canvas, hotkey: this.#hotkey }), this.#mountPoint);
+    G(Root({ hotkey: this.#hotkey }), this.#mountPoint);
   }
   #setupHotkey() {
     const handler = (e4) => {
@@ -7542,7 +7527,7 @@ async function start(opts) {
     });
     opts.sim = sim;
   }
-  const debugOpts = opts.debugUi ? typeof opts.debugUi === "boolean" ? { initiallyVisible: true } : opts.debugUi : undefined;
+  const debugOpts = opts.debugUi ? typeof opts.debugUi === "boolean" ? { 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, opts.game, opts.brokerUrl ?? DEFAULT_BROKER_URL, debugOpts);
   if (typeof window !== "undefined" && new URLSearchParams(window.location.search).has("e2e")) {
     window.__BLOOP_APP__ = app;
@@ -7892,5 +7877,5 @@ export {
   App
 };
 
-//# debugId=0BC38D81E8CCB55464756E2164756E21
+//# debugId=7B9494D52075E71364756E2164756E21
 //# sourceMappingURL=mod.js.map