@bloopjs/web 0.0.96 → 0.0.98

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;CAC7B,CAAC;AAIF,oCAAoC;AACpC,wBAAsB,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAuB5D;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.map

@@ -1 +1 @@
-{"version":3,"file":"DebugUi.d.ts","sourceRoot":"","sources":["../../src/debugui/DebugUi.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAA2B,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;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"}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/BottomBar.tsx"],"names":[],"mappings":"AAiFA,wBAAgB,SAAS,4CAuGxB"}
+{"version":3,"file":"BottomBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/BottomBar.tsx"],"names":[],"mappings":"AA+HA,wBAAgB,SAAS,4CAsHxB"}

package/dist/debugui/state.d.ts

@@ -29,6 +29,8 @@ export type DebugState = {
     frameNumber: Signal<number>;
     hmrFlash: Signal<boolean>;
     isPlaying: Signal<boolean>;
+    isRecording: Signal<boolean>;
+    isReplaying: Signal<boolean>;
     tapeUtilization: Signal<number>;
     playheadPosition: Signal<number>;
     tapeStartFrame: Signal<number>;

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,QAAQ,CAAC;AAClC,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;IAE1B,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACjC,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAE/B,UAAU,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IACxC,UAAU,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IACxC,WAAW,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IACzC,aAAa,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3C,aAAa,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3C,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAEpD,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3E,gBAAgB,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9C,UAAU,EAAE,MAAM,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpC,gBAAgB,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAsCF,eAAO,MAAM,UAAU,EAAE,UAoDxB,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,CAqBjC;AAED,0DAA0D;AAC1D,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CAqClD;AAED,4DAA4D;AAC5D,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,CAc1E;AAgDD,0DAA0D;AAC1D,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC,CAGvD;AAED,oCAAoC;AACpC,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI,CA8BnD"}
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/debugui/state.ts"],"names":[],"mappings":"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"}

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/* Mobile-first CSS variables */\n:host {\n  --bar-size: 10vw;\n  --bar-size-h: 10vh;\n  --bar-size-h: 10dvh;\n}\n\n/* Desktop overrides */\n@media (min-width: 769px) {\n  :host {\n    --bar-size: 2vw;\n    --bar-size-h: 2vh;\n  }\n}\n\n/* Layout */\n.fullscreen {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\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/* Mobile-first: vertical scroll layout */\n.layout {\n  /* Use fixed position on mobile to escape parent overflow:hidden */\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior-y: contain;\n  padding: 0;\n  gap: 0;\n  background: #1a1a1a;\n}\n\n.layout .game {\n  /* Use dvh with vh fallback for mobile Safari address bar */\n  height: 100vh;\n  height: 100dvh;\n  width: 100%;\n  flex-shrink: 0;\n  /* Mobile: no border radius, fullscreen game */\n  border-radius: 0;\n}\n\n/* Mobile: stretch canvas to fill game area */\n.layout .game .canvas-container {\n  width: 100%;\n  height: 100%;\n}\n\n.layout .game .canvas-container canvas {\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  display: block;\n}\n\n.layout .stats,\n.layout .logs {\n  width: 100%;\n  min-height: 50vh;\n  min-height: 50dvh;\n  padding: 1rem;\n  flex-shrink: 0;\n}\n\n/* Desktop: 2x2 grid layout */\n@media (min-width: 769px) {\n  .layout {\n    position: static;\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    padding: 1rem;\n    height: 100%;\n    overflow: hidden;\n    -webkit-overflow-scrolling: auto;\n    overscroll-behavior-y: auto;\n  }\n\n  .layout .game {\n    height: auto;\n    flex-shrink: initial;\n    border-radius: 8px;\n  }\n\n  /* Desktop: restore centered canvas with constraints */\n  .layout .game .canvas-container canvas {\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  .layout .stats,\n  .layout .logs {\n    min-height: auto;\n    padding: 1rem;\n    flex-shrink: initial;\n  }\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: var(--bar-size) 1fr var(--bar-size);\n  grid-template-rows: var(--bar-size-h) 1fr var(--bar-size-h);\n  width: 100vw;\n  /* Use dvh with vh fallback for mobile Safari address bar */\n  height: 100vh;\n  height: 100dvh;\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: var(--bar-size);\n  text-align: center;\n  font-size: 9px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n}\n\n/* Mobile: larger top bar text */\n@media (max-width: 768px) {\n  .top-bar-side-label {\n    font-size: 12px;\n  }\n\n  .top-bar {\n    font-size: 14px;\n  }\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  /* Mobile-first: more padding */\n  padding: 0 16px;\n  gap: 12px;\n}\n\n/* Desktop: tighter padding */\n@media (min-width: 769px) {\n  .bottom-bar {\n    padding: 0 8px;\n    gap: 8px;\n  }\n}\n\n.playbar-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n/* Mobile-first: hide step/jump buttons */\n.playbar-btn.jump-back,\n.playbar-btn.step-back,\n.playbar-btn.step-forward,\n.playbar-btn.jump-forward {\n  display: none;\n}\n\n/* Desktop: show all controls */\n@media (min-width: 769px) {\n  .playbar-btn.jump-back,\n  .playbar-btn.step-back,\n  .playbar-btn.step-forward,\n  .playbar-btn.jump-forward {\n    display: flex;\n  }\n}\n\n.playbar-btn {\n  /* Mobile-first: larger buttons */\n  width: 4vh;\n  height: 4vh;\n  min-width: 32px;\n  min-height: 32px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: #888;\n  font-size: 16px;\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/* Desktop: smaller buttons */\n@media (min-width: 769px) {\n  .playbar-btn {\n    width: 1.5vh;\n    height: 1.5vh;\n    min-width: 18px;\n    min-height: 18px;\n    font-size: 10px;\n  }\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  /* Mobile-first: larger seek bar */\n  height: 32px;\n  background: #222;\n  border-radius: 4px;\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n/* Desktop: smaller seek bar */\n@media (min-width: 769px) {\n  .seek-bar {\n    height: 16px;\n  }\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\n/* Load Tape Dialog */\n.load-tape-dialog {\n  background: #1a1a1a;\n  border: 1px solid #333;\n  border-radius: 8px;\n  padding: 0;\n  color: #ccc;\n  font-family: monospace;\n  max-width: 320px;\n  width: 90vw;\n}\n\n.load-tape-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.7);\n}\n\n.load-tape-dialog-content {\n  padding: 16px;\n}\n\n.load-tape-dialog h3 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n}\n\n.drop-zone {\n  border: 2px dashed #444;\n  border-radius: 8px;\n  padding: 32px 16px;\n  text-align: center;\n  cursor: pointer;\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.drop-zone:hover {\n  border-color: #666;\n  background: #222;\n}\n\n.drop-zone.drag-over {\n  border-color: #7b3fa0;\n  background: rgba(123, 63, 160, 0.1);\n}\n\n.drop-zone-text {\n  color: #888;\n  font-size: 12px;\n  line-height: 1.5;\n}\n\n.hidden-file-input {\n  display: none;\n}\n\n.replay-last-btn {\n  width: 100%;\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: #333;\n  border: none;\n  border-radius: 4px;\n  color: #ccc;\n  font-family: monospace;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.replay-last-btn:hover {\n  background: #444;\n  color: #fff;\n}\n\n.load-tape-btn {\n  margin-left: 4px;\n}\n";
+export declare const styles = "\n/* Reset for shadow DOM */\n* {\n  box-sizing: border-box;\n}\n\n/* Mobile-first CSS variables */\n:host {\n  --bar-size: 10vw;\n  --bar-size-h: 10vh;\n  --bar-size-h: 10dvh;\n}\n\n/* Desktop overrides */\n@media (min-width: 769px) {\n  :host {\n    --bar-size: 2vw;\n    --bar-size-h: 2vh;\n  }\n}\n\n/* Layout */\n.fullscreen {\n  width: 100vw;\n  height: 100vh;\n  height: 100dvh;\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/* Mobile-first: vertical scroll layout */\n.layout {\n  /* Use fixed position on mobile to escape parent overflow:hidden */\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior-y: contain;\n  padding: 0;\n  gap: 0;\n  background: #1a1a1a;\n}\n\n.layout .game {\n  /* Use dvh with vh fallback for mobile Safari address bar */\n  height: 100vh;\n  height: 100dvh;\n  width: 100%;\n  flex-shrink: 0;\n  /* Mobile: no border radius, fullscreen game */\n  border-radius: 0;\n}\n\n/* Mobile: stretch canvas to fill game area */\n.layout .game .canvas-container {\n  width: 100%;\n  height: 100%;\n}\n\n.layout .game .canvas-container canvas {\n  width: 100%;\n  height: 100%;\n  max-width: none;\n  max-height: none;\n  display: block;\n}\n\n.layout .stats,\n.layout .logs {\n  width: 100%;\n  min-height: 50vh;\n  min-height: 50dvh;\n  padding: 1rem;\n  flex-shrink: 0;\n}\n\n/* Desktop: 2x2 grid layout */\n@media (min-width: 769px) {\n  .layout {\n    position: static;\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    padding: 1rem;\n    height: 100%;\n    overflow: hidden;\n    -webkit-overflow-scrolling: auto;\n    overscroll-behavior-y: auto;\n  }\n\n  .layout .game {\n    height: auto;\n    flex-shrink: initial;\n    border-radius: 8px;\n  }\n\n  /* Desktop: restore centered canvas with constraints */\n  .layout .game .canvas-container canvas {\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  .layout .stats,\n  .layout .logs {\n    min-height: auto;\n    padding: 1rem;\n    flex-shrink: initial;\n  }\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: var(--bar-size) 1fr var(--bar-size);\n  grid-template-rows: var(--bar-size-h) 1fr var(--bar-size-h);\n  width: 100vw;\n  /* Use dvh with vh fallback for mobile Safari address bar */\n  height: 100vh;\n  height: 100dvh;\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: var(--bar-size);\n  text-align: center;\n  font-size: 9px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n}\n\n/* Mobile: larger top bar text */\n@media (max-width: 768px) {\n  .top-bar-side-label {\n    font-size: 12px;\n  }\n\n  .top-bar {\n    font-size: 14px;\n  }\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  /* Mobile-first: more padding */\n  padding: 0 16px;\n  gap: 12px;\n}\n\n/* Desktop: tighter padding */\n@media (min-width: 769px) {\n  .bottom-bar {\n    padding: 0 8px;\n    gap: 8px;\n  }\n}\n\n.playbar-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n/* Recording indicator - mobile: just the dot */\n.recording-indicator {\n  display: flex;\n  align-items: center;\n  margin-right: 4px;\n}\n\n.recording-indicator .recording-label {\n  display: none;\n}\n\n.recording-dot {\n  width: 10px;\n  height: 10px;\n  background: #ff4444;\n  border-radius: 50%;\n  animation: recording-pulse 1s ease-in-out infinite;\n}\n\n@keyframes recording-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* Replay indicator - mobile: hidden */\n.replay-indicator {\n  display: none;\n}\n\n/* Desktop: full indicators with text */\n@media (min-width: 769px) {\n  .recording-indicator {\n    gap: 4px;\n    padding: 2px 6px;\n    background: rgba(255, 0, 0, 0.2);\n    border: 1px solid #ff4444;\n    border-radius: 3px;\n  }\n\n  .recording-indicator .recording-label {\n    display: inline;\n    color: #ff4444;\n    font-size: 10px;\n    font-weight: bold;\n    font-family: monospace;\n  }\n\n  .recording-dot {\n    width: 8px;\n    height: 8px;\n  }\n\n  .replay-indicator {\n    display: flex;\n    align-items: center;\n    padding: 2px 6px;\n    background: rgba(100, 100, 255, 0.2);\n    border: 1px solid #6666ff;\n    border-radius: 3px;\n    color: #6666ff;\n    font-size: 10px;\n    font-weight: bold;\n    font-family: monospace;\n    margin-right: 4px;\n  }\n}\n\n/* Mobile-first: hide step/jump buttons */\n.playbar-btn.jump-back,\n.playbar-btn.step-back,\n.playbar-btn.step-forward,\n.playbar-btn.jump-forward {\n  display: none;\n}\n\n/* Desktop: show all controls */\n@media (min-width: 769px) {\n  .playbar-btn.jump-back,\n  .playbar-btn.step-back,\n  .playbar-btn.step-forward,\n  .playbar-btn.jump-forward {\n    display: flex;\n  }\n}\n\n.playbar-btn {\n  /* Mobile-first: larger buttons */\n  width: 4vh;\n  height: 4vh;\n  min-width: 32px;\n  min-height: 32px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: #888;\n  font-size: 16px;\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/* Desktop: sized to match indicators */\n@media (min-width: 769px) {\n  .playbar-btn {\n    width: 24px;\n    height: 24px;\n    min-width: 24px;\n    min-height: 24px;\n  }\n\n  /* Save/Load buttons need room for icon + text */\n  .playbar-btn.save-tape-btn,\n  .playbar-btn.load-tape-btn {\n    width: auto;\n    padding: 0 6px;\n    gap: 4px;\n  }\n}\n\n/* Mobile-first: hide button text labels, show only icons */\n.btn-label {\n  display: none;\n}\n\n/* Desktop: show button text labels */\n@media (min-width: 769px) {\n  .btn-label {\n    display: inline;\n  }\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  /* Mobile-first: larger seek bar */\n  height: 32px;\n  background: #222;\n  border-radius: 4px;\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n}\n\n/* Desktop: smaller seek bar */\n@media (min-width: 769px) {\n  .seek-bar {\n    height: 16px;\n  }\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\n/* Load Tape Dialog */\n.load-tape-dialog {\n  background: #1a1a1a;\n  border: 1px solid #333;\n  border-radius: 8px;\n  padding: 0;\n  color: #ccc;\n  font-family: monospace;\n  max-width: 320px;\n  width: 90vw;\n}\n\n.load-tape-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.7);\n}\n\n.load-tape-dialog-content {\n  padding: 16px;\n}\n\n.load-tape-dialog h3 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n}\n\n.drop-zone {\n  border: 2px dashed #444;\n  border-radius: 8px;\n  padding: 32px 16px;\n  text-align: center;\n  cursor: pointer;\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.drop-zone:hover {\n  border-color: #666;\n  background: #222;\n}\n\n.drop-zone.drag-over {\n  border-color: #7b3fa0;\n  background: rgba(123, 63, 160, 0.1);\n}\n\n.drop-zone-text {\n  color: #888;\n  font-size: 12px;\n  line-height: 1.5;\n}\n\n.hidden-file-input {\n  display: none;\n}\n\n.replay-last-btn {\n  width: 100%;\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: #333;\n  border: none;\n  border-radius: 4px;\n  color: #ccc;\n  font-family: monospace;\n  font-size: 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.replay-last-btn:hover {\n  background: #444;\n  color: #fff;\n}\n\n.load-tape-btn {\n  margin-left: 4px;\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,itXA6qBlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,43aAmwBlB,CAAC"}

package/dist/mod.js

@@ -1450,7 +1450,7 @@ function readTapeHeader(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.96/wasm/bloop.wasm");
+var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.98/wasm/bloop.wasm");
 var MAX_ROLLBACK_FRAMES = 500;
 var TIME_CTX_OFFSET = 0;
 var INPUT_CTX_OFFSET = TIME_CTX_OFFSET + 4;
@@ -3308,7 +3308,7 @@ function readTapeHeader2(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.96/wasm/bloop.wasm");
+var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.98/wasm/bloop.wasm");
 var TIME_CTX_OFFSET2 = 0;
 var INPUT_CTX_OFFSET2 = TIME_CTX_OFFSET2 + 4;
 var EVENTS_OFFSET2 = INPUT_CTX_OFFSET2 + 4;
@@ -4417,6 +4417,8 @@ var snapshotSize = d3(0);
 var frameNumber = d3(0);
 var hmrFlash = d3(false);
 var isPlaying = d3(true);
+var isRecording = d3(false);
+var isReplaying = d3(false);
 var tapeUtilization = d3(0);
 var playheadPosition = d3(0);
 var tapeStartFrame = d3(0);
@@ -4448,6 +4450,8 @@ var debugState = {
   frameNumber,
   hmrFlash,
   isPlaying,
+  isRecording,
+  isReplaying,
   tapeUtilization,
   playheadPosition,
   tapeStartFrame,
@@ -4563,6 +4567,8 @@ function resetState() {
   debugState.frameNumber.value = 0;
   debugState.hmrFlash.value = false;
   debugState.isPlaying.value = true;
+  debugState.isRecording.value = false;
+  debugState.isReplaying.value = false;
   debugState.tapeUtilization.value = 0;
   debugState.playheadPosition.value = 0;
   debugState.tapeStartFrame.value = 0;
@@ -5148,6 +5154,57 @@ function LoadTapeDialog() {
 }
 
 // src/debugui/components/BottomBar.tsx
+var iconProps = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor" };
+var Icons = {
+  jumpBack: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  stepBack: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M6 6h2v12H6zm3.5 6l8.5 6V6z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  play: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M8 5v14l11-7z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  pause: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  stepForward: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  jumpForward: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  save: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
+  load: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("path", {
+      d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this)
+};
 function useRepeatOnHold(action) {
   const rafId = A2(null);
   const timeoutId = A2(null);
@@ -5208,6 +5265,8 @@ function useSeekDrag(onSeek2) {
 }
 function BottomBar() {
   const isPlaying2 = debugState.isPlaying.value;
+  const isRecording2 = debugState.isRecording.value;
+  const isReplaying2 = debugState.isReplaying.value;
   const tapeUtilization2 = debugState.tapeUtilization.value;
   const playheadPosition2 = debugState.playheadPosition.value;
   const handleJumpBack = q2(() => {
@@ -5245,11 +5304,29 @@ function BottomBar() {
       /* @__PURE__ */ u4("div", {
         className: "playbar-controls",
         children: [
+          isRecording2 && /* @__PURE__ */ u4("span", {
+            className: "recording-indicator",
+            title: "Recording",
+            children: [
+              /* @__PURE__ */ u4("span", {
+                className: "recording-dot"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ u4("span", {
+                className: "recording-label",
+                children: "REC"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          isReplaying2 && /* @__PURE__ */ u4("span", {
+            className: "replay-indicator",
+            title: "Replaying tape",
+            children: "REPLAY"
+          }, undefined, false, undefined, this),
           /* @__PURE__ */ u4("button", {
             className: "playbar-btn jump-back",
             ...jumpBackRepeat,
             children: [
-              "<<",
+              Icons.jumpBack,
               /* @__PURE__ */ u4("span", {
                 className: "tooltip tooltip-left",
                 children: [
@@ -5265,7 +5342,7 @@ function BottomBar() {
             className: "playbar-btn step-back",
             ...stepBackRepeat,
             children: [
-              "<",
+              Icons.stepBack,
               /* @__PURE__ */ u4("span", {
                 className: "tooltip",
                 children: [
@@ -5281,7 +5358,7 @@ function BottomBar() {
             className: "playbar-btn play-pause",
             onClick: handlePlayPause,
             children: [
-              isPlaying2 ? "||" : ">",
+              isPlaying2 ? Icons.pause : Icons.play,
               /* @__PURE__ */ u4("span", {
                 className: "tooltip",
                 children: [
@@ -5298,7 +5375,7 @@ function BottomBar() {
             className: "playbar-btn step-forward",
             ...stepForwardRepeat,
             children: [
-              ">",
+              Icons.stepForward,
               /* @__PURE__ */ u4("span", {
                 className: "tooltip",
                 children: [
@@ -5314,7 +5391,7 @@ function BottomBar() {
             className: "playbar-btn jump-forward",
             ...jumpForwardRepeat,
             children: [
-              ">>",
+              Icons.jumpForward,
               /* @__PURE__ */ u4("span", {
                 className: "tooltip",
                 children: [
@@ -5330,7 +5407,11 @@ function BottomBar() {
             className: "playbar-btn save-tape-btn",
             onClick: handleSaveTapeClick,
             children: [
-              "Save",
+              Icons.save,
+              /* @__PURE__ */ u4("span", {
+                className: "btn-label",
+                children: "Save"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ u4("span", {
                 className: "tooltip",
                 children: [
@@ -5346,7 +5427,11 @@ function BottomBar() {
             className: "playbar-btn load-tape-btn",
             onClick: handleLoadTapeClick,
             children: [
-              "Load",
+              Icons.load,
+              /* @__PURE__ */ u4("span", {
+                className: "btn-label",
+                children: "Load"
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ u4("span", {
                 className: "tooltip",
                 children: "Load tape"
@@ -5761,6 +5846,73 @@ var styles = `
   flex-shrink: 0;
 }
 
+/* Recording indicator - mobile: just the dot */
+.recording-indicator {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+
+.recording-indicator .recording-label {
+  display: none;
+}
+
+.recording-dot {
+  width: 10px;
+  height: 10px;
+  background: #ff4444;
+  border-radius: 50%;
+  animation: recording-pulse 1s ease-in-out infinite;
+}
+
+@keyframes recording-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* Replay indicator - mobile: hidden */
+.replay-indicator {
+  display: none;
+}
+
+/* Desktop: full indicators with text */
+@media (min-width: 769px) {
+  .recording-indicator {
+    gap: 4px;
+    padding: 2px 6px;
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid #ff4444;
+    border-radius: 3px;
+  }
+
+  .recording-indicator .recording-label {
+    display: inline;
+    color: #ff4444;
+    font-size: 10px;
+    font-weight: bold;
+    font-family: monospace;
+  }
+
+  .recording-dot {
+    width: 8px;
+    height: 8px;
+  }
+
+  .replay-indicator {
+    display: flex;
+    align-items: center;
+    padding: 2px 6px;
+    background: rgba(100, 100, 255, 0.2);
+    border: 1px solid #6666ff;
+    border-radius: 3px;
+    color: #6666ff;
+    font-size: 10px;
+    font-weight: bold;
+    font-family: monospace;
+    margin-right: 4px;
+  }
+}
+
 /* Mobile-first: hide step/jump buttons */
 .playbar-btn.jump-back,
 .playbar-btn.step-back,
@@ -5799,14 +5951,33 @@ var styles = `
   position: relative;
 }
 
-/* Desktop: smaller buttons */
+/* Desktop: sized to match indicators */
 @media (min-width: 769px) {
   .playbar-btn {
-    width: 1.5vh;
-    height: 1.5vh;
-    min-width: 18px;
-    min-height: 18px;
-    font-size: 10px;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  /* Save/Load buttons need room for icon + text */
+  .playbar-btn.save-tape-btn,
+  .playbar-btn.load-tape-btn {
+    width: auto;
+    padding: 0 6px;
+    gap: 4px;
+  }
+}
+
+/* Mobile-first: hide button text labels, show only icons */
+.btn-label {
+  display: none;
+}
+
+/* Desktop: show button text labels */
+@media (min-width: 769px) {
+  .btn-label {
+    display: inline;
   }
 }
 
@@ -7028,6 +7199,8 @@ var actual = {
 };
 async function reconcile(app, signal) {
   app.beforeFrame.subscribe((_frame) => {
+    if (app.sim.isReplaying)
+      return;
     if (!app.game.context.net.isInSession) {
       return;
     }
@@ -7042,6 +7215,10 @@ async function reconcile(app, signal) {
     addLog(log);
   };
   while (!signal.aborted) {
+    if (app.sim.isReplaying) {
+      await sleep(150);
+      continue;
+    }
     const { net } = app.game.context;
     if (net.wantsRoomCode && actual.roomCode !== net.wantsRoomCode) {
       console.log("[netcode] wants a room code", {
@@ -7253,6 +7430,13 @@ class App {
     } else {
       window.addEventListener("resize", emitResize);
     }
+    const toCanvasCoords = (clientX, clientY) => {
+      if (canvas) {
+        const rect = canvas.getBoundingClientRect();
+        return { x: clientX - rect.left, y: clientY - rect.top };
+      }
+      return { x: clientX, y: clientY };
+    };
     const updatePixelRatioListener = () => {
       const mediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
       const handler = () => {
@@ -7275,8 +7459,10 @@ class App {
     };
     window.addEventListener("keyup", handleKeyup);
     const handleMousemove = (event) => {
-      if (shouldEmitInputs())
-        this.sim.emit.mousemove(event.clientX, event.clientY);
+      if (shouldEmitInputs()) {
+        const { x: x2, y: y4 } = toCanvasCoords(event.clientX, event.clientY);
+        this.sim.emit.mousemove(x2, y4);
+      }
     };
     window.addEventListener("mousemove", handleMousemove);
     const handleMousedown = (event) => {
@@ -7299,7 +7485,8 @@ class App {
         return;
       const touch = event.touches[0];
       if (touch) {
-        this.sim.emit.mousemove(touch.clientX, touch.clientY);
+        const { x: x2, y: y4 } = toCanvasCoords(touch.clientX, touch.clientY);
+        this.sim.emit.mousemove(x2, y4);
         this.sim.emit.mousedown("Left");
       }
     };
@@ -7314,7 +7501,8 @@ class App {
         return;
       const touch = event.touches[0];
       if (touch) {
-        this.sim.emit.mousemove(touch.clientX, touch.clientY);
+        const { x: x2, y: y4 } = toCanvasCoords(touch.clientX, touch.clientY);
+        this.sim.emit.mousemove(x2, y4);
       }
     };
     window.addEventListener("touchmove", handleTouchmove);
@@ -7385,6 +7573,8 @@ class App {
         }
       }
       debugState.isPlaying.value = !this.sim.isPaused;
+      debugState.isRecording.value = this.sim.isRecording;
+      debugState.isReplaying.value = this.sim.isReplaying;
       if (this.sim.hasHistory && debugState.tapeFrameCount.value > 0) {
         const currentFrame = this.sim.time.frame;
         const startFrame = debugState.tapeStartFrame.value;
@@ -7485,5 +7675,5 @@ export {
   App
 };
 
-//# debugId=29BC9A3A0F18708064756E2164756E21
+//# debugId=42A08D0FB8399EAE64756E2164756E21
 //# sourceMappingURL=mod.js.map