@bloopjs/web 0.0.91 → 0.0.92

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,4CA6FxB"}
+{"version":3,"file":"BottomBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/BottomBar.tsx"],"names":[],"mappings":"AAiFA,wBAAgB,SAAS,4CAuGxB"}

package/dist/debugui/state.d.ts

@@ -41,6 +41,7 @@ export type DebugState = {
     onSeek: Signal<((position: number) => void) | null>;
     onLoadTape: Signal<((bytes: Uint8Array, fileName: string) => void) | null>;
     onReplayLastTape: Signal<(() => void) | null>;
+    onSaveTape: Signal<(() => void) | null>;
     lastTapeName: Signal<string | null>;
     isLoadDialogOpen: Signal<boolean>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/debugui/state.ts"],"names":[],"mappings":"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"}
+{"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"}

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  outline: 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\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/* 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";
 //# 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,oqRAkhBlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,itXA6qBlB,CAAC"}

package/dist/mod.js

@@ -1432,7 +1432,7 @@ function readTapeHeader(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.91/wasm/bloop.wasm");
+var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.92/wasm/bloop.wasm");
 var MAX_ROLLBACK_FRAMES = 500;
 var TIME_CTX_OFFSET = 0;
 var INPUT_CTX_OFFSET = TIME_CTX_OFFSET + 4;
@@ -3273,7 +3273,7 @@ function readTapeHeader2(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.91/wasm/bloop.wasm");
+var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.92/wasm/bloop.wasm");
 var TIME_CTX_OFFSET2 = 0;
 var INPUT_CTX_OFFSET2 = TIME_CTX_OFFSET2 + 4;
 var EVENTS_OFFSET2 = INPUT_CTX_OFFSET2 + 4;
@@ -4394,6 +4394,7 @@ var onJumpForward = d3(null);
 var onSeek = d3(null);
 var onLoadTape = d3(null);
 var onReplayLastTape = d3(null);
+var onSaveTape = d3(null);
 var lastTapeName = d3(null);
 var isLoadDialogOpen = d3(false);
 var debugState = {
@@ -4424,6 +4425,7 @@ var debugState = {
   onSeek,
   onLoadTape,
   onReplayLastTape,
+  onSaveTape,
   lastTapeName,
   isLoadDialogOpen
 };
@@ -4634,6 +4636,18 @@ function wireTapeLoadHandlers(app) {
       debugState.isLoadDialogOpen.value = false;
     }
   };
+  debugState.onSaveTape.value = () => {
+    if (!app.sim.hasHistory)
+      return;
+    const tape = app.sim.saveTape();
+    const blob = new Blob([tape], { type: "application/octet-stream" });
+    const url = URL.createObjectURL(blob);
+    const a4 = document.createElement("a");
+    a4.href = url;
+    a4.download = `tape-${Date.now()}.bloop`;
+    a4.click();
+    URL.revokeObjectURL(url);
+  };
   checkForSavedTape();
 }
 // ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
@@ -5187,6 +5201,9 @@ function BottomBar() {
   const handleLoadTapeClick = q2(() => {
     debugState.isLoadDialogOpen.value = true;
   }, []);
+  const handleSaveTapeClick = q2(() => {
+    debugState.onSaveTape.value?.();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "bottom-bar",
     children: [
@@ -5194,7 +5211,7 @@ function BottomBar() {
         className: "playbar-controls",
         children: [
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn jump-back",
             ...jumpBackRepeat,
             children: [
               "<<",
@@ -5210,7 +5227,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn step-back",
             ...stepBackRepeat,
             children: [
               "<",
@@ -5226,7 +5243,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn play-pause",
             onClick: handlePlayPause,
             children: [
               isPlaying2 ? "||" : ">",
@@ -5243,7 +5260,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn step-forward",
             ...stepForwardRepeat,
             children: [
               ">",
@@ -5259,7 +5276,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn jump-forward",
             ...jumpForwardRepeat,
             children: [
               ">>",
@@ -5274,6 +5291,22 @@ function BottomBar() {
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
+          /* @__PURE__ */ u4("button", {
+            className: "playbar-btn save-tape-btn",
+            onClick: handleSaveTapeClick,
+            children: [
+              "Save",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip",
+                children: [
+                  "Save tape ",
+                  /* @__PURE__ */ u4("kbd", {
+                    children: "Cmd+S"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
             className: "playbar-btn load-tape-btn",
             onClick: handleLoadTapeClick,
@@ -5427,10 +5460,26 @@ var styles = `
   box-sizing: border-box;
 }
 
+/* Mobile-first CSS variables */
+:host {
+  --bar-size: 10vw;
+  --bar-size-h: 10vh;
+  --bar-size-h: 10dvh;
+}
+
+/* Desktop overrides */
+@media (min-width: 769px) {
+  :host {
+    --bar-size: 2vw;
+    --bar-size-h: 2vh;
+  }
+}
+
 /* Layout */
 .fullscreen {
   width: 100vw;
   height: 100vh;
+  height: 100dvh;
   margin: 0;
   padding: 0;
   overflow: hidden;
@@ -5447,17 +5496,96 @@ var styles = `
   display: block;
 }
 
+/* Mobile-first: vertical scroll layout */
 .layout {
-  display: grid;
-  grid-template-areas:
-    "game stats"
-    "logs logs";
-  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
-  grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);
-  gap: 1rem;
+  /* Use fixed position on mobile to escape parent overflow:hidden */
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+  padding: 0;
+  gap: 0;
+  background: #1a1a1a;
+}
+
+.layout .game {
+  /* Use dvh with vh fallback for mobile Safari address bar */
+  height: 100vh;
+  height: 100dvh;
+  width: 100%;
+  flex-shrink: 0;
+  /* Mobile: no border radius, fullscreen game */
+  border-radius: 0;
+}
+
+/* Mobile: stretch canvas to fill game area */
+.layout .game .canvas-container {
   width: 100%;
   height: 100%;
+}
+
+.layout .game .canvas-container canvas {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  display: block;
+}
+
+.layout .stats,
+.layout .logs {
+  width: 100%;
+  min-height: 50vh;
+  min-height: 50dvh;
   padding: 1rem;
+  flex-shrink: 0;
+}
+
+/* Desktop: 2x2 grid layout */
+@media (min-width: 769px) {
+  .layout {
+    position: static;
+    display: grid;
+    grid-template-areas:
+      "game stats"
+      "logs logs";
+    grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
+    grid-template-rows: calc(50% - 0.5rem) calc(50% - 0.5rem);
+    gap: 1rem;
+    padding: 1rem;
+    height: 100%;
+    overflow: hidden;
+    -webkit-overflow-scrolling: auto;
+    overscroll-behavior-y: auto;
+  }
+
+  .layout .game {
+    height: auto;
+    flex-shrink: initial;
+    border-radius: 8px;
+  }
+
+  /* Desktop: restore centered canvas with constraints */
+  .layout .game .canvas-container canvas {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .layout .stats,
+  .layout .logs {
+    min-height: auto;
+    padding: 1rem;
+    flex-shrink: initial;
+  }
 }
 
 /* Letterboxed layout - using equal vw/vh percentages keeps game at viewport aspect ratio */
@@ -5467,10 +5595,12 @@ var styles = `
     "top-bar top-bar top-bar"
     "left-bar game right-bar"
     "bottom-bar bottom-bar bottom-bar";
-  grid-template-columns: 2vw 1fr 2vw;
-  grid-template-rows: 2vh 1fr 2vh;
+  grid-template-columns: var(--bar-size) 1fr var(--bar-size);
+  grid-template-rows: var(--bar-size-h) 1fr var(--bar-size-h);
   width: 100vw;
+  /* Use dvh with vh fallback for mobile Safari address bar */
   height: 100vh;
+  height: 100dvh;
   background: #1a1a1a;
   overflow: hidden;
   overscroll-behavior: none;
@@ -5489,7 +5619,7 @@ var styles = `
 }
 
 .top-bar-side-label {
-  width: 2vw;
+  width: var(--bar-size);
   text-align: center;
   font-size: 9px;
   text-transform: uppercase;
@@ -5497,6 +5627,17 @@ var styles = `
   color: #666;
 }
 
+/* Mobile: larger top bar text */
+@media (max-width: 768px) {
+  .top-bar-side-label {
+    font-size: 12px;
+  }
+
+  .top-bar {
+    font-size: 14px;
+  }
+}
+
 .top-bar-center {
   display: flex;
   align-items: center;
@@ -5565,8 +5706,17 @@ var styles = `
   display: flex;
   align-items: center;
   background: #111;
-  padding: 0 8px;
-  gap: 8px;
+  /* Mobile-first: more padding */
+  padding: 0 16px;
+  gap: 12px;
+}
+
+/* Desktop: tighter padding */
+@media (min-width: 769px) {
+  .bottom-bar {
+    padding: 0 8px;
+    gap: 8px;
+  }
 }
 
 .playbar-controls {
@@ -5576,16 +5726,35 @@ var styles = `
   flex-shrink: 0;
 }
 
+/* Mobile-first: hide step/jump buttons */
+.playbar-btn.jump-back,
+.playbar-btn.step-back,
+.playbar-btn.step-forward,
+.playbar-btn.jump-forward {
+  display: none;
+}
+
+/* Desktop: show all controls */
+@media (min-width: 769px) {
+  .playbar-btn.jump-back,
+  .playbar-btn.step-back,
+  .playbar-btn.step-forward,
+  .playbar-btn.jump-forward {
+    display: flex;
+  }
+}
+
 .playbar-btn {
-  width: 1.5vh;
-  height: 1.5vh;
-  min-width: 18px;
-  min-height: 18px;
+  /* Mobile-first: larger buttons */
+  width: 4vh;
+  height: 4vh;
+  min-width: 32px;
+  min-height: 32px;
   border: none;
   outline: none;
   background: transparent;
   color: #888;
-  font-size: 10px;
+  font-size: 16px;
   cursor: pointer;
   border-radius: 2px;
   display: flex;
@@ -5595,6 +5764,17 @@ var styles = `
   position: relative;
 }
 
+/* Desktop: smaller buttons */
+@media (min-width: 769px) {
+  .playbar-btn {
+    width: 1.5vh;
+    height: 1.5vh;
+    min-width: 18px;
+    min-height: 18px;
+    font-size: 10px;
+  }
+}
+
 .playbar-btn:hover {
   background: #333;
   color: #fff;
@@ -5638,7 +5818,8 @@ var styles = `
 
 .seek-bar {
   flex: 1;
-  height: 16px;
+  /* Mobile-first: larger seek bar */
+  height: 32px;
   background: #222;
   border-radius: 4px;
   position: relative;
@@ -5646,6 +5827,13 @@ var styles = `
   overflow: hidden;
 }
 
+/* Desktop: smaller seek bar */
+@media (min-width: 769px) {
+  .seek-bar {
+    height: 16px;
+  }
+}
+
 .seek-bar-fill {
   position: absolute;
   top: 0;
@@ -7262,5 +7450,5 @@ export {
   App
 };
 
-//# debugId=3429E07BC69AE66A64756E2164756E21
+//# debugId=B02D4DB9DDB2D5FC64756E2164756E21
 //# sourceMappingURL=mod.js.map