@bloopjs/web 0.0.57 → 0.0.59

package/dist/App.d.ts

@@ -45,6 +45,8 @@ export declare class App {
     beforeFrame: ReturnType<typeof createListener>;
     /** Event listeners for after a frame is processed */
     afterFrame: ReturnType<typeof createListener>;
+    /** Event listeners for HMR events */
+    onHmr: ReturnType<typeof createListener>;
     /** Subscribe to the browser events and start the render loop */
     subscribe(): void;
     /** Clean up wasm resources and event listeners */
@@ -58,10 +60,13 @@ export declare class App {
      * import.meta.hot?.accept("./game", async (newModule) => {
      *   await app.acceptHmr(newModule?.game, {
      *   wasmUrl: monorepoWasmUrl,
+     *   files: ["./game"],
      * });
      * ```
      */
-    acceptHmr(module: any, opts?: Partial<MountOpts>): Promise<void>;
+    acceptHmr(module: any, opts?: Partial<MountOpts> & {
+        files?: string[];
+    }): Promise<void>;
 }
 declare function createListener<T extends any[]>(): {
     subscribe: (callback: (...args: T) => void) => UnsubscribeFn;
@@ -69,5 +74,8 @@ declare function createListener<T extends any[]>(): {
     unsubscribeAll: UnsubscribeFn;
 };
 export type UnsubscribeFn = () => void;
+export type HmrEvent = {
+    files: string[];
+};
 export {};
 //# sourceMappingURL=App.d.ts.map

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,SAAS,EAAS,KAAK,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAG7E,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGhE,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,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,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;CACpC,CAAC;AAIF,oCAAoC;AACpC,wBAAsB,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAwB5D;AAED;;;;;;GAMG;AACH,qBAAa,GAAG;;IAEd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;gBAQzB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,EAChB,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,cAAc;IAmB9B,uDAAuD;IACvD,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,EAEf;IASD,+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,sDAAsD;IACtD,WAAW,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAA8B;IAC5E,qDAAqD;IACrD,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAA8B;IAE3E,gEAAgE;IAChE,SAAS,IAAI,IAAI;IAyIjB,kDAAkD;IAClD,OAAO,IAAI,IAAI;IAQf;;;;;;;;;;;OAWG;IACG,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;CAoBvE;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"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,SAAS,EAAS,KAAK,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAG7E,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGhE,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,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,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;CACpC,CAAC;AAIF,oCAAoC;AACpC,wBAAsB,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAwB5D;AAED;;;;;;GAMG;AACH,qBAAa,GAAG;;IAEd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;gBAQzB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,EAChB,SAAS,EAAE,MAAM,EACjB,WAAW,CAAC,EAAE,cAAc;IAmB9B,uDAAuD;IACvD,IAAI,GAAG,IAAI,GAAG,CAEb;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,GAAG,EAEf;IASD,+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,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;IAyIjB,kDAAkD;IAClD,OAAO,IAAI,IAAI;IASf;;;;;;;;;;;;OAYG;IACG,SAAS,CACb,MAAM,EAAE,GAAG,EACX,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAE,GAC/C,OAAO,CAAC,IAAI,CAAC;CAwBjB;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/state.d.ts

@@ -26,10 +26,13 @@ export type DebugState = {
     frameTime: Signal<number>;
     snapshotSize: Signal<number>;
     frameNumber: Signal<number>;
+    hmrFlash: Signal<boolean>;
 };
 export declare const debugState: DebugState;
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
 export declare function cycleLayout(): void;
+/** Trigger HMR flash (only when debug UI is visible) */
+export declare function triggerHmrFlash(): void;
 export declare function addLog(log: Log): void;
 export declare function updatePeer(id: string, updates: Partial<Peer>): void;
 export declare function addPeer(peer: Peer): void;

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

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/debugui/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,aAAa,GAAG,MAAM,CAAC;AAExD,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC/B,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;IACpB,IAAI,EAAE,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClC,SAAS,EAAE,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAEzC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;CAC7B,CAAC;AAeF,eAAO,MAAM,UAAU,EAAE,UA2BxB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,WAAW,IAAI,IAAI,CASlC;AAED,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAErC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAiBnE;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAKxC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK3C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK3C;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK5C;AAED,wBAAgB,SAAS,IAAI,IAAI,CAEhC;AAED,wBAAgB,UAAU,IAAI,IAAI,CAajC"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/debugui/state.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,MAAM,EAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC;AAEjC,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,aAAa,GAAG,MAAM,CAAC;AAExD,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,GAAG,EAAE,WAAW,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC/B,SAAS,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;IACpB,IAAI,EAAE,cAAc,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClC,SAAS,EAAE,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAEzC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAE5B,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CAC3B,CAAC;AAgBF,eAAO,MAAM,UAAU,EAAE,UA8BxB,CAAC;AAEF,oEAAoE;AACpE,wBAAgB,WAAW,IAAI,IAAI,CASlC;AAID,wDAAwD;AACxD,wBAAgB,eAAe,IAAI,IAAI,CAatC;AAiBD,wBAAgB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAErC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAiBnE;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAKxC;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK3C;AAED,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK3C;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAK5C;AAED,wBAAgB,SAAS,IAAI,IAAI,CAEhC;AAED,wBAAgB,UAAU,IAAI,IAAI,CAcjC"}

package/dist/debugui/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const styles = "\n/* Reset for shadow DOM */\n* {\n  box-sizing: border-box;\n}\n\n/* Layout */\n.fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n\n.fullscreen .canvas-container {\n  width: 100%;\n  height: 100%;\n}\n\n.fullscreen canvas {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.layout {\n  display: grid;\n  grid-template-areas:\n    \"game stats\"\n    \"logs logs\";\n  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);\n  grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  padding: 1rem;\n}\n\n/* Letterboxed layout - using equal vw/vh percentages keeps game at viewport aspect ratio */\n.layout-letterboxed {\n  display: grid;\n  grid-template-areas:\n    \"top-bar top-bar top-bar\"\n    \"left-bar game right-bar\"\n    \"bottom-bar bottom-bar bottom-bar\";\n  grid-template-columns: 2vw 1fr 2vw;\n  grid-template-rows: 2vh 1fr 2vh;\n  width: 100vw;\n  height: 100vh;\n  background: #1a1a1a;\n  overflow: hidden;\n  overscroll-behavior: none;\n}\n\n.top-bar {\n  grid-area: top-bar;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: #111;\n  color: #aaa;\n  font-family: monospace;\n  font-size: 12px;\n  padding: 0;\n}\n\n.top-bar-side-label {\n  width: 2vw;\n  text-align: center;\n  font-size: 9px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n}\n\n.top-bar-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 24px;\n  flex: 1;\n}\n\n.top-bar-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.top-bar-label {\n  opacity: 0.6;\n}\n\n.top-bar-value {\n  color: #fff;\n  font-weight: 500;\n}\n\n.left-bar {\n  grid-area: left-bar;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  background: #111;\n  padding: 4px 0;\n}\n\n.right-bar {\n  grid-area: right-bar;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  background: #111;\n  padding: 4px 0;\n}\n\n.vertical-bar {\n  width: 12px;\n  flex: 1;\n  background: #333;\n  border-radius: 2px;\n  position: relative;\n  overflow: hidden;\n}\n\n.vertical-bar-fill {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: #4a9eff;\n  border-radius: 2px;\n  transition: height 0.1s ease-out;\n}\n\n\n.bottom-bar {\n  grid-area: bottom-bar;\n  display: flex;\n  align-items: center;\n  background: #111;\n  padding: 0 8px;\n  gap: 8px;\n}\n\n.playbar-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.playbar-btn {\n  width: 1.5vh;\n  height: 1.5vh;\n  min-width: 18px;\n  min-height: 18px;\n  border: none;\n  background: transparent;\n  color: #888;\n  font-size: 10px;\n  cursor: pointer;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, color 0.15s;\n  position: relative;\n}\n\n.playbar-btn:hover {\n  background: #333;\n  color: #fff;\n}\n\n.playbar-btn:hover .tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.tooltip {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #222;\n  color: #ccc;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 10px;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s;\n  pointer-events: none;\n  z-index: 10;\n}\n\n.tooltip-left {\n  left: 0;\n  transform: none;\n}\n\n.tooltip kbd {\n  background: #444;\n  padding: 1px 4px;\n  border-radius: 2px;\n  margin-left: 4px;\n  font-family: monospace;\n}\n\n.seek-bar {\n  flex: 1;\n  height: 16px;\n  background: #222;\n  border-radius: 4px;\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n.seek-bar-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  background: linear-gradient(to right, #4a2070, #7b3fa0);\n  border-radius: 4px;\n  transition: width 0.1s ease-out;\n}\n\n.seek-bar-position {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: #fff;\n}\n\n.letterboxed-game {\n  grid-area: game;\n  overflow: hidden;\n}\n\n.letterboxed-game .canvas-container {\n  width: 100%;\n  height: 100%;\n}\n\n.letterboxed-game canvas {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.game {\n  grid-area: game;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.stats {\n  grid-area: stats;\n  background-color: #f0f0f0;\n  padding: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.logs {\n  grid-area: logs;\n  background-color: #f0f0f0;\n  padding: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n/* Canvas container */\n.canvas-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.canvas-container canvas {\n  max-width: 100%;\n  max-height: 100%;\n}\n\n/* Debug toggle button */\n.debug-toggle {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  font-size: 18px;\n  cursor: pointer;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s;\n}\n\n.debug-toggle:hover {\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Stats panel */\n.stats-panel {\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  padding: 12px;\n  border-radius: 8px;\n  font-family: monospace;\n  font-size: 14px;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.stats-panel h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.stats-panel table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n.stats-panel tr {\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.stats-panel tr:last-child {\n  border-bottom: none;\n}\n\n.stats-panel td {\n  padding: 4px 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.stats-panel td:first-child {\n  opacity: 0.7;\n  width: 60%;\n}\n\n.stats-panel td:last-child {\n  text-align: right;\n  font-weight: 600;\n  width: 40%;\n}\n\n.stats-panel p {\n  margin: 0;\n  opacity: 0.7;\n}\n\n/* Logs panel */\n.logs-list {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  margin: 0;\n  padding: 0;\n}\n\n.logs-list li {\n  margin: 0 0 24px 0;\n  list-style: none;\n}\n\n.logs-list h3 {\n  font-size: 16px;\n  font-weight: 500;\n  margin: 0;\n}\n\n.logs-list .ws {\n  color: darkolivegreen;\n}\n\n.logs-list .webrtc {\n  color: darkmagenta;\n}\n\n.logs-list .rollback {\n  color: darkblue;\n}\n\n.logs-list .local {\n  color: #333;\n}\n\n.logs-list .content {\n  font-size: 16px;\n}\n\n.logs-list p {\n  margin: 4px 0;\n}\n\n.logs-list pre {\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background-color: oldlace;\n  padding: 8px;\n  border-radius: 4px;\n  border: 1px inset lavender;\n}\n";
+export declare const styles = "\n/* Reset for shadow DOM */\n* {\n  box-sizing: border-box;\n}\n\n/* Layout */\n.fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n}\n\n.fullscreen .canvas-container {\n  width: 100%;\n  height: 100%;\n}\n\n.fullscreen canvas {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.layout {\n  display: grid;\n  grid-template-areas:\n    \"game stats\"\n    \"logs logs\";\n  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);\n  grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);\n  gap: 1rem;\n  width: 100%;\n  height: 100%;\n  padding: 1rem;\n}\n\n/* Letterboxed layout - using equal vw/vh percentages keeps game at viewport aspect ratio */\n.layout-letterboxed {\n  display: grid;\n  grid-template-areas:\n    \"top-bar top-bar top-bar\"\n    \"left-bar game right-bar\"\n    \"bottom-bar bottom-bar bottom-bar\";\n  grid-template-columns: 2vw 1fr 2vw;\n  grid-template-rows: 2vh 1fr 2vh;\n  width: 100vw;\n  height: 100vh;\n  background: #1a1a1a;\n  overflow: hidden;\n  overscroll-behavior: none;\n}\n\n.top-bar {\n  grid-area: top-bar;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: #111;\n  color: #aaa;\n  font-family: monospace;\n  font-size: 12px;\n  padding: 0;\n}\n\n.top-bar-side-label {\n  width: 2vw;\n  text-align: center;\n  font-size: 9px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n}\n\n.top-bar-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 24px;\n  flex: 1;\n}\n\n.top-bar-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.top-bar-label {\n  opacity: 0.6;\n}\n\n.top-bar-value {\n  color: #fff;\n  font-weight: 500;\n}\n\n.left-bar {\n  grid-area: left-bar;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  background: #111;\n  padding: 4px 0;\n}\n\n.right-bar {\n  grid-area: right-bar;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  background: #111;\n  padding: 4px 0;\n}\n\n.vertical-bar {\n  width: 12px;\n  flex: 1;\n  background: #333;\n  border-radius: 2px;\n  position: relative;\n  overflow: hidden;\n}\n\n.vertical-bar-fill {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: #4a9eff;\n  border-radius: 2px;\n  transition: height 0.1s ease-out;\n}\n\n\n.bottom-bar {\n  grid-area: bottom-bar;\n  display: flex;\n  align-items: center;\n  background: #111;\n  padding: 0 8px;\n  gap: 8px;\n}\n\n.playbar-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.playbar-btn {\n  width: 1.5vh;\n  height: 1.5vh;\n  min-width: 18px;\n  min-height: 18px;\n  border: none;\n  background: transparent;\n  color: #888;\n  font-size: 10px;\n  cursor: pointer;\n  border-radius: 2px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s, color 0.15s;\n  position: relative;\n}\n\n.playbar-btn:hover {\n  background: #333;\n  color: #fff;\n}\n\n.playbar-btn:hover .tooltip {\n  opacity: 1;\n  visibility: visible;\n}\n\n.tooltip {\n  position: absolute;\n  bottom: calc(100% + 4px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: #222;\n  color: #ccc;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 10px;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.15s;\n  pointer-events: none;\n  z-index: 10;\n}\n\n.tooltip-left {\n  left: 0;\n  transform: none;\n}\n\n.tooltip kbd {\n  background: #444;\n  padding: 1px 4px;\n  border-radius: 2px;\n  margin-left: 4px;\n  font-family: monospace;\n}\n\n.seek-bar {\n  flex: 1;\n  height: 16px;\n  background: #222;\n  border-radius: 4px;\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n.seek-bar-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  background: linear-gradient(to right, #4a2070, #7b3fa0);\n  border-radius: 4px;\n  transition: width 0.1s ease-out;\n}\n\n.seek-bar-position {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: #fff;\n}\n\n.letterboxed-game {\n  grid-area: game;\n  overflow: hidden;\n}\n\n.letterboxed-game .canvas-container {\n  width: 100%;\n  height: 100%;\n}\n\n.letterboxed-game canvas {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.letterboxed-game {\n  position: relative;\n}\n\n.letterboxed-game.hmr-flash::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  animation: hmr-pulse 0.3s ease-out forwards;\n}\n\n@keyframes hmr-pulse {\n  0% { box-shadow: inset 0 0 0 36px #7b3fa0; }\n  100% { box-shadow: inset 0 0 0 0 #7b3fa0; }\n}\n\n.game {\n  grid-area: game;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.stats {\n  grid-area: stats;\n  background-color: #f0f0f0;\n  padding: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.logs {\n  grid-area: logs;\n  background-color: #f0f0f0;\n  padding: 1rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n/* Canvas container */\n.canvas-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.canvas-container canvas {\n  max-width: 100%;\n  max-height: 100%;\n}\n\n/* Debug toggle button */\n.debug-toggle {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background-color: rgba(0, 0, 0, 0.5);\n  color: white;\n  font-size: 18px;\n  cursor: pointer;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background-color 0.2s;\n}\n\n.debug-toggle:hover {\n  background-color: rgba(0, 0, 0, 0.7);\n}\n\n/* Stats panel */\n.stats-panel {\n  background: rgba(0, 0, 0, 0.7);\n  color: white;\n  padding: 12px;\n  border-radius: 8px;\n  font-family: monospace;\n  font-size: 14px;\n  max-width: 100%;\n  overflow: hidden;\n}\n\n.stats-panel h3 {\n  margin: 0 0 8px 0;\n  font-size: 14px;\n  font-weight: 600;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.stats-panel table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n.stats-panel tr {\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.stats-panel tr:last-child {\n  border-bottom: none;\n}\n\n.stats-panel td {\n  padding: 4px 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.stats-panel td:first-child {\n  opacity: 0.7;\n  width: 60%;\n}\n\n.stats-panel td:last-child {\n  text-align: right;\n  font-weight: 600;\n  width: 40%;\n}\n\n.stats-panel p {\n  margin: 0;\n  opacity: 0.7;\n}\n\n/* Logs panel */\n.logs-list {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  margin: 0;\n  padding: 0;\n}\n\n.logs-list li {\n  margin: 0 0 24px 0;\n  list-style: none;\n}\n\n.logs-list h3 {\n  font-size: 16px;\n  font-weight: 500;\n  margin: 0;\n}\n\n.logs-list .ws {\n  color: darkolivegreen;\n}\n\n.logs-list .webrtc {\n  color: darkmagenta;\n}\n\n.logs-list .rollback {\n  color: darkblue;\n}\n\n.logs-list .local {\n  color: #333;\n}\n\n.logs-list .content {\n  font-size: 16px;\n}\n\n.logs-list p {\n  margin: 4px 0;\n}\n\n.logs-list pre {\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n  background-color: oldlace;\n  padding: 8px;\n  border-radius: 4px;\n  border: 1px inset lavender;\n}\n";
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,s8NA6alB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,6xOA8blB,CAAC"}

package/dist/mod.js

@@ -3435,6 +3435,7 @@ function joinRoom(brokerUrl, _roomId, cbs) {
 var exports_mod = {};
 __export(exports_mod, {
   updatePeer: () => updatePeer,
+  triggerHmrFlash: () => triggerHmrFlash,
   setRemoteId: () => setRemoteId,
   setLocalId: () => setLocalId,
   resetState: () => resetState,
@@ -4484,6 +4485,7 @@ var fps = d2(0);
 var frameTime = d2(0);
 var snapshotSize = d2(0);
 var frameNumber = d2(0);
+var hmrFlash = d2(false);
 var debugState = {
   layoutMode,
   isVisible: w3(() => layoutMode.value !== "off"),
@@ -4497,7 +4499,8 @@ var debugState = {
   fps,
   frameTime,
   snapshotSize,
-  frameNumber
+  frameNumber,
+  hmrFlash
 };
 function cycleLayout() {
   const current = layoutMode.value;
@@ -4509,6 +4512,32 @@ function cycleLayout() {
     layoutMode.value = "off";
   }
 }
+var hmrFlashQueued = false;
+function triggerHmrFlash() {
+  if (!debugState.isVisible.value)
+    return;
+  if (!document.hasFocus()) {
+    if (!hmrFlashQueued) {
+      hmrFlashQueued = true;
+      window.addEventListener("focus", onWindowFocus);
+    }
+    return;
+  }
+  doFlash();
+}
+function onWindowFocus() {
+  if (hmrFlashQueued) {
+    hmrFlashQueued = false;
+    window.removeEventListener("focus", onWindowFocus);
+    doFlash();
+  }
+}
+function doFlash() {
+  debugState.hmrFlash.value = true;
+  setTimeout(() => {
+    debugState.hmrFlash.value = false;
+  }, 300);
+}
 function addLog(log) {
   debugState.logs.value = [...debugState.logs.value, log];
 }
@@ -4570,6 +4599,7 @@ function resetState() {
   debugState.frameTime.value = 0;
   debugState.snapshotSize.value = 0;
   debugState.frameNumber.value = 0;
+  debugState.hmrFlash.value = false;
 }
 // ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
 var f4 = 0;
@@ -5112,6 +5142,7 @@ function LetterboxedLayout({ canvas }) {
   const advantage = debugState.advantage.value ?? 0;
   const frameTime2 = debugState.frameTime.value;
   const snapshotSize2 = debugState.snapshotSize.value;
+  const hmrFlash2 = debugState.hmrFlash.value;
   const leftValue = isOnline ? Math.abs(advantage) : frameTime2;
   const leftMax = isOnline ? 10 : 16.67;
   const leftLabel = isOnline ? "ADV" : "MS";
@@ -5119,6 +5150,7 @@ function LetterboxedLayout({ canvas }) {
   const rightValue = isOnline ? 0 : snapshotSize2;
   const rightMax = isOnline ? 10 : 1e4;
   const rightLabel = isOnline ? "RB" : "KB";
+  const gameClassName = hmrFlash2 ? "letterboxed-game hmr-flash" : "letterboxed-game";
   return /* @__PURE__ */ u4("main", {
     className: "layout-letterboxed",
     children: [
@@ -5133,7 +5165,7 @@ function LetterboxedLayout({ canvas }) {
         color: leftColor
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4("div", {
-        className: "letterboxed-game",
+        className: gameClassName,
         children: /* @__PURE__ */ u4(GameCanvas, {
           canvas
         }, undefined, false, undefined, this)
@@ -5425,6 +5457,23 @@ var styles = `
   display: block;
 }
 
+.letterboxed-game {
+  position: relative;
+}
+
+.letterboxed-game.hmr-flash::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  animation: hmr-pulse 0.3s ease-out forwards;
+}
+
+@keyframes hmr-pulse {
+  0% { box-shadow: inset 0 0 0 36px #7b3fa0; }
+  100% { box-shadow: inset 0 0 0 0 #7b3fa0; }
+}
+
 .game {
   grid-area: game;
   border-radius: 8px;
@@ -5720,6 +5769,7 @@ class App {
   }
   beforeFrame = createListener();
   afterFrame = createListener();
+  onHmr = createListener();
   subscribe() {
     const handleKeydown = (event) => {
       this.sim.emit.keydown(event.code);
@@ -5838,6 +5888,7 @@ class App {
     this.sim.unmount();
     this.beforeFrame.unsubscribeAll();
     this.afterFrame.unsubscribeAll();
+    this.onHmr.unsubscribeAll();
     this.#debugUi?.unmount();
   }
   async acceptHmr(module, opts) {
@@ -5855,6 +5906,8 @@ class App {
     this.sim.unmount();
     this.sim = sim;
     this.game = game;
+    triggerHmrFlash();
+    this.onHmr.notify({ files: opts?.files ?? [] });
   }
 }
 function createListener() {
@@ -6011,5 +6064,5 @@ export {
   App
 };
 
-//# debugId=97C22D9653CE8DB864756E2164756E21
+//# debugId=0239438F2F65EFC064756E2164756E21
 //# sourceMappingURL=mod.js.map