@bloopjs/web 0.0.102 → 0.0.103

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

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

@@ -1 +1 @@
-{"version":3,"file":"LoadTapeDialog.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/LoadTapeDialog.tsx"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,4CA4G7B"}
+{"version":3,"file":"LoadTapeDialog.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/LoadTapeDialog.tsx"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,4CAsI7B"}

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

@@ -1 +1 @@
-{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/TopBar.tsx"],"names":[],"mappings":"AAEA,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,WAAW,2CA4B5D"}
+{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/TopBar.tsx"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,WAAW,2CAqC5D"}

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

@@ -3,7 +3,8 @@ type VerticalBarProps = {
     max: number;
     side: "left" | "right";
     color?: string;
+    displayValue?: string;
 };
-export declare function VerticalBar({ value, max, side, color, }: VerticalBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function VerticalBar({ value, max, side, color, displayValue, }: VerticalBarProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=VerticalBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/VerticalBar.tsx"],"names":[],"mappings":"AAAA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,KAAiB,GAClB,EAAE,gBAAgB,2CAalB"}
+{"version":3,"file":"VerticalBar.d.ts","sourceRoot":"","sources":["../../../src/debugui/components/VerticalBar.tsx"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,IAAI,EACJ,KAAiB,EACjB,YAAY,GACb,EAAE,gBAAgB,2CAyBlB"}

package/dist/debugui/state.d.ts

@@ -43,9 +43,12 @@ export type DebugState = {
     onSeek: Signal<((position: number) => void) | null>;
     onLoadTape: Signal<((bytes: Uint8Array, fileName: string) => void) | null>;
     onReplayLastTape: Signal<(() => void) | null>;
+    onReplayLastSaved: Signal<(() => void) | null>;
     onSaveTape: Signal<(() => void) | null>;
     lastTapeName: Signal<string | null>;
+    lastSavedTapeName: Signal<string | null>;
     isLoadDialogOpen: Signal<boolean>;
+    onToggleRecording: Signal<(() => void) | null>;
 };
 export declare const debugState: DebugState;
 /** Cycle through layout modes: off -> letterboxed -> full -> off */
@@ -64,7 +67,7 @@ export declare function resetState(): void;
 export declare function wirePlaybarHandlers(app: App): void;
 /** Set up drag-and-drop tape loading on a canvas element */
 export declare function wireTapeDragDrop(canvas: HTMLCanvasElement, app: App): void;
-/** Check for saved tape and update lastTapeName signal */
+/** Check for saved tapes and update signals */
 export declare function checkForSavedTape(): Promise<void>;
 /** Wire up tape loading handlers */
 export declare function wireTapeLoadHandlers(app: App): void;

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":"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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/* 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";
+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  user-select: none;\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  user-select: none;\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  user-select: none;\n}\n\n.vertical-bar {\n  width: 12px;\n  flex: 1;\n  background: #333;\n  border-radius: 2px;\n  position: relative;\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.vertical-bar-popover {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: #222;\n  color: #ccc;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-family: monospace;\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.vertical-bar-popover.left {\n  left: calc(100% + 8px);\n}\n\n.vertical-bar-popover.right {\n  right: calc(100% + 8px);\n}\n\n.vertical-bar:hover .vertical-bar-popover {\n  opacity: 1;\n  visibility: visible;\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  user-select: none;\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/* Record button */\n.record-btn {\n  color: #666;\n}\n\n.record-btn.recording {\n  color: #ff4444;\n}\n\n.record-btn.recording svg {\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/* Desktop: show REC label when recording */\n@media (min-width: 769px) {\n  .record-btn.recording {\n    width: auto;\n    padding: 0 6px;\n    gap: 4px;\n    background: rgba(255, 68, 68, 0.15);\n    border-radius: 3px;\n  }\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  user-select: none;\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,43aAmwBlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/debugui/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,klcA2yBlB,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.102/wasm/bloop.wasm");
+var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.103/wasm/bloop.wasm");
 var MAX_ROLLBACK_FRAMES = 500;
 var TIME_CTX_OFFSET = 0;
 var INPUT_CTX_OFFSET = TIME_CTX_OFFSET + 4;
@@ -1556,6 +1556,9 @@ class Sim {
       throw new Error(`failed to start recording, error code=${result}`);
     }
   }
+  stopRecording() {
+    this.wasm.stop_recording();
+  }
   saveTape() {
     const tapeLen = this.wasm.get_tape_len();
     const tapePtr = this.wasm.get_tape_ptr();
@@ -3321,7 +3324,7 @@ function readTapeHeader2(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.102/wasm/bloop.wasm");
+var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.103/wasm/bloop.wasm");
 var TIME_CTX_OFFSET2 = 0;
 var INPUT_CTX_OFFSET2 = TIME_CTX_OFFSET2 + 4;
 var EVENTS_OFFSET2 = INPUT_CTX_OFFSET2 + 4;
@@ -4444,9 +4447,12 @@ var onJumpForward = d3(null);
 var onSeek = d3(null);
 var onLoadTape = d3(null);
 var onReplayLastTape = d3(null);
+var onReplayLastSaved = d3(null);
 var onSaveTape = d3(null);
 var lastTapeName = d3(null);
+var lastSavedTapeName = d3(null);
 var isLoadDialogOpen = d3(false);
+var onToggleRecording = d3(null);
 var debugState = {
   layoutMode,
   isVisible: w3(() => layoutMode.value !== "off"),
@@ -4477,9 +4483,12 @@ var debugState = {
   onSeek,
   onLoadTape,
   onReplayLastTape,
+  onReplayLastSaved,
   onSaveTape,
   lastTapeName,
-  isLoadDialogOpen
+  lastSavedTapeName,
+  isLoadDialogOpen,
+  onToggleRecording
 };
 function cycleLayout() {
   const current = layoutMode.value;
@@ -4615,12 +4624,20 @@ function wirePlaybarHandlers(app) {
   };
   debugState.onSeek.value = (ratio) => {
     if (app.sim.hasHistory) {
+      app.sim.pause();
       const startFrame = debugState.tapeStartFrame.value;
       const frameCount = debugState.tapeFrameCount.value;
       const targetFrame = startFrame + Math.floor(ratio * frameCount);
       app.sim.seek(targetFrame);
     }
   };
+  debugState.onToggleRecording.value = () => {
+    if (app.sim.isRecording) {
+      app.sim.stopRecording();
+    } else {
+      app.sim.record();
+    }
+  };
 }
 function wireTapeDragDrop(canvas, app) {
   canvas.addEventListener("dragover", (e4) => {
@@ -4639,7 +4656,8 @@ function wireTapeDragDrop(canvas, app) {
 }
 var TAPE_DB_NAME = "bloop-debug";
 var TAPE_STORE_NAME = "tapes";
-var TAPE_KEY = "last";
+var TAPE_KEY_LOADED = "last-loaded";
+var TAPE_KEY_SAVED = "last-saved";
 function openTapeDB() {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open(TAPE_DB_NAME, 1);
@@ -4650,21 +4668,21 @@ function openTapeDB() {
     };
   });
 }
-async function saveTapeToStorage(bytes, fileName) {
+async function saveTapeToStorage(bytes, fileName, key = TAPE_KEY_LOADED) {
   const db = await openTapeDB();
   return new Promise((resolve, reject) => {
     const tx = db.transaction(TAPE_STORE_NAME, "readwrite");
-    tx.objectStore(TAPE_STORE_NAME).put({ bytes, fileName }, TAPE_KEY);
+    tx.objectStore(TAPE_STORE_NAME).put({ bytes, fileName }, key);
     tx.oncomplete = () => resolve();
     tx.onerror = () => reject(tx.error);
   });
 }
-async function loadTapeFromStorage() {
+async function loadTapeFromStorage(key = TAPE_KEY_LOADED) {
   try {
     const db = await openTapeDB();
     return new Promise((resolve, reject) => {
       const tx = db.transaction(TAPE_STORE_NAME, "readonly");
-      const request = tx.objectStore(TAPE_STORE_NAME).get(TAPE_KEY);
+      const request = tx.objectStore(TAPE_STORE_NAME).get(key);
       request.onsuccess = () => resolve(request.result ?? null);
       request.onerror = () => reject(request.error);
     });
@@ -4673,32 +4691,46 @@ async function loadTapeFromStorage() {
   }
 }
 async function checkForSavedTape() {
-  const saved = await loadTapeFromStorage();
-  debugState.lastTapeName.value = saved?.fileName ?? null;
+  const [loaded, saved] = await Promise.all([
+    loadTapeFromStorage(TAPE_KEY_LOADED),
+    loadTapeFromStorage(TAPE_KEY_SAVED)
+  ]);
+  debugState.lastTapeName.value = loaded?.fileName ?? null;
+  debugState.lastSavedTapeName.value = saved?.fileName ?? null;
 }
 function wireTapeLoadHandlers(app) {
   debugState.onLoadTape.value = async (bytes, fileName) => {
     app.loadTape(bytes);
-    await saveTapeToStorage(bytes, fileName);
+    await saveTapeToStorage(bytes, fileName, TAPE_KEY_LOADED);
     debugState.lastTapeName.value = fileName;
     debugState.isLoadDialogOpen.value = false;
   };
   debugState.onReplayLastTape.value = async () => {
-    const saved = await loadTapeFromStorage();
+    const saved = await loadTapeFromStorage(TAPE_KEY_LOADED);
+    if (saved) {
+      app.loadTape(saved.bytes);
+      debugState.isLoadDialogOpen.value = false;
+    }
+  };
+  debugState.onReplayLastSaved.value = async () => {
+    const saved = await loadTapeFromStorage(TAPE_KEY_SAVED);
     if (saved) {
       app.loadTape(saved.bytes);
       debugState.isLoadDialogOpen.value = false;
     }
   };
-  debugState.onSaveTape.value = () => {
+  debugState.onSaveTape.value = async () => {
     if (!app.sim.hasHistory)
       return;
     const tape = app.sim.saveTape();
+    const fileName = `tape-${Date.now()}.bloop`;
+    await saveTapeToStorage(tape, fileName, TAPE_KEY_SAVED);
+    debugState.lastSavedTapeName.value = fileName;
     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.download = fileName;
     a4.click();
     URL.revokeObjectURL(url);
   };
@@ -4982,8 +5014,14 @@ function TopBar({ leftLabel, rightLabel }) {
   const frameNumber2 = debugState.frameNumber.value;
   const rtt = debugState.netStatus.value.rtt;
   const isOnline = debugState.netStatus.value.peers.length > 0;
+  const stopPropagation = q2((e4) => {
+    e4.stopPropagation();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "top-bar",
+    onMouseDown: stopPropagation,
+    onMouseUp: stopPropagation,
+    onClick: stopPropagation,
     children: [
       /* @__PURE__ */ u4("span", {
         className: "top-bar-side-label",
@@ -5049,18 +5087,31 @@ function VerticalBar({
   value,
   max,
   side,
-  color = "#4a9eff"
+  color = "#4a9eff",
+  displayValue
 }) {
   const percentage = max > 0 ? Math.min(100, value / max * 100) : 0;
+  const stopPropagation = q2((e4) => {
+    e4.stopPropagation();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: `${side}-bar`,
+    onMouseDown: stopPropagation,
+    onMouseUp: stopPropagation,
+    onClick: stopPropagation,
     children: /* @__PURE__ */ u4("div", {
       className: "vertical-bar",
-      children: /* @__PURE__ */ u4("div", {
-        className: "vertical-bar-fill",
-        style: { height: `${percentage}%`, background: color }
-      }, undefined, false, undefined, this)
-    }, undefined, false, undefined, this)
+      children: [
+        /* @__PURE__ */ u4("div", {
+          className: "vertical-bar-fill",
+          style: { height: `${percentage}%`, background: color }
+        }, undefined, false, undefined, this),
+        displayValue && /* @__PURE__ */ u4("span", {
+          className: `vertical-bar-popover ${side}`,
+          children: displayValue
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
   }, undefined, false, undefined, this);
 }
 
@@ -5070,7 +5121,6 @@ function LoadTapeDialog() {
   const fileInputRef = A2(null);
   const [isDragOver, setIsDragOver] = d2(false);
   const isOpen = debugState.isLoadDialogOpen.value;
-  const lastTapeName2 = debugState.lastTapeName.value;
   y2(() => {
     const dialog = dialogRef.current;
     if (!dialog)
@@ -5121,11 +5171,20 @@ function LoadTapeDialog() {
   const handleReplayLast = q2(() => {
     debugState.onReplayLastTape.value?.();
   }, []);
+  const handleReplayLastSaved = q2(() => {
+    debugState.onReplayLastSaved.value?.();
+  }, []);
+  const handleDialogClick = q2((e4) => {
+    if (e4.target === e4.currentTarget) {
+      debugState.isLoadDialogOpen.value = false;
+    }
+  }, []);
   return /* @__PURE__ */ u4("dialog", {
     ref: dialogRef,
     className: "load-tape-dialog",
     onClose: handleClose,
-    children: /* @__PURE__ */ u4("div", {
+    onClick: handleDialogClick,
+    children: isOpen && /* @__PURE__ */ u4("div", {
       className: "load-tape-dialog-content",
       children: [
         /* @__PURE__ */ u4("h3", {
@@ -5153,12 +5212,17 @@ function LoadTapeDialog() {
           className: "hidden-file-input",
           onChange: handleFileInputChange
         }, undefined, false, undefined, this),
-        lastTapeName2 && /* @__PURE__ */ u4("button", {
+        debugState.lastSavedTapeName.value && /* @__PURE__ */ u4("button", {
+          className: "replay-last-btn",
+          onClick: handleReplayLastSaved,
+          children: "Replay last saved tape"
+        }, undefined, false, undefined, this),
+        debugState.lastTapeName.value && /* @__PURE__ */ u4("button", {
           className: "replay-last-btn",
           onClick: handleReplayLast,
           children: [
-            "Replay last: ",
-            lastTapeName2
+            "Replay last loaded: ",
+            debugState.lastTapeName.value
           ]
         }, undefined, true, undefined, this)
       ]
@@ -5169,6 +5233,14 @@ function LoadTapeDialog() {
 // src/debugui/components/BottomBar.tsx
 var iconProps = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "currentColor" };
 var Icons = {
+  record: /* @__PURE__ */ u4("svg", {
+    ...iconProps,
+    children: /* @__PURE__ */ u4("circle", {
+      cx: "12",
+      cy: "12",
+      r: "8"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this),
   jumpBack: /* @__PURE__ */ u4("svg", {
     ...iconProps,
     children: /* @__PURE__ */ u4("path", {
@@ -5311,22 +5383,33 @@ function BottomBar() {
   const handleSaveTapeClick = q2(() => {
     debugState.onSaveTape.value?.();
   }, []);
+  const handleToggleRecording = q2(() => {
+    debugState.onToggleRecording.value?.();
+  }, []);
+  const stopPropagation = q2((e4) => {
+    e4.stopPropagation();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "bottom-bar",
+    onMouseDown: stopPropagation,
+    onMouseUp: stopPropagation,
+    onClick: stopPropagation,
     children: [
       /* @__PURE__ */ u4("div", {
         className: "playbar-controls",
         children: [
-          isRecording2 && /* @__PURE__ */ u4("span", {
-            className: "recording-indicator",
-            title: "Recording",
+          /* @__PURE__ */ u4("button", {
+            className: `playbar-btn record-btn ${isRecording2 ? "recording" : ""}`,
+            onClick: handleToggleRecording,
             children: [
-              /* @__PURE__ */ u4("span", {
-                className: "recording-dot"
+              Icons.record,
+              isRecording2 && /* @__PURE__ */ u4("span", {
+                className: "btn-label",
+                children: "REC"
               }, undefined, false, undefined, this),
               /* @__PURE__ */ u4("span", {
-                className: "recording-label",
-                children: "REC"
+                className: "tooltip tooltip-left",
+                children: isRecording2 ? "Stop recording" : "Start recording"
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
@@ -5537,11 +5620,13 @@ function LetterboxedLayout({ canvas }) {
   const hmrFlash2 = debugState.hmrFlash.value;
   const leftValue = isOnline ? Math.abs(advantage) : frameTime2;
   const leftMax = isOnline ? 10 : 16.67;
-  const leftLabel = isOnline ? "ADV" : "MS";
+  const leftLabel = isOnline ? "adv" : "time";
   const leftColor = isOnline ? advantage >= 0 ? "#4a9eff" : "#ff4a4a" : frameTime2 > 16.67 ? "#ff4a4a" : "#4aff4a";
+  const leftDisplayValue = isOnline ? `${advantage >= 0 ? "+" : ""}${advantage} frames` : `${frameTime2.toFixed(1)}ms`;
   const rightValue = isOnline ? 0 : snapshotSize2;
   const rightMax = isOnline ? 10 : 1e4;
-  const rightLabel = isOnline ? "RB" : "KB";
+  const rightLabel = isOnline ? "rb" : "size";
+  const rightDisplayValue = isOnline ? "0 frames" : snapshotSize2 >= 1000 ? `${(snapshotSize2 / 1000).toFixed(1)}kb` : `${snapshotSize2}b`;
   const gameClassName = hmrFlash2 ? "letterboxed-game hmr-flash" : "letterboxed-game";
   return /* @__PURE__ */ u4("main", {
     className: "layout-letterboxed",
@@ -5554,7 +5639,8 @@ function LetterboxedLayout({ canvas }) {
         value: leftValue,
         max: leftMax,
         side: "left",
-        color: leftColor
+        color: leftColor,
+        displayValue: leftDisplayValue
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4("div", {
         className: gameClassName,
@@ -5565,7 +5651,8 @@ function LetterboxedLayout({ canvas }) {
       /* @__PURE__ */ u4(VerticalBar, {
         value: rightValue,
         max: rightMax,
-        side: "right"
+        side: "right",
+        displayValue: rightDisplayValue
       }, undefined, false, undefined, this),
       /* @__PURE__ */ u4(BottomBar, {}, undefined, false, undefined, this)
     ]
@@ -5749,6 +5836,7 @@ var styles = `
   font-family: monospace;
   font-size: 12px;
   padding: 0;
+  user-select: none;
 }
 
 .top-bar-side-label {
@@ -5802,6 +5890,7 @@ var styles = `
   justify-content: flex-end;
   background: #111;
   padding: 4px 0;
+  user-select: none;
 }
 
 .right-bar {
@@ -5812,6 +5901,7 @@ var styles = `
   justify-content: flex-end;
   background: #111;
   padding: 4px 0;
+  user-select: none;
 }
 
 .vertical-bar {
@@ -5820,7 +5910,6 @@ var styles = `
   background: #333;
   border-radius: 2px;
   position: relative;
-  overflow: hidden;
 }
 
 .vertical-bar-fill {
@@ -5833,6 +5922,37 @@ var styles = `
   transition: height 0.1s ease-out;
 }
 
+.vertical-bar-popover {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: #222;
+  color: #ccc;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-family: monospace;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.vertical-bar-popover.left {
+  left: calc(100% + 8px);
+}
+
+.vertical-bar-popover.right {
+  right: calc(100% + 8px);
+}
+
+.vertical-bar:hover .vertical-bar-popover {
+  opacity: 1;
+  visibility: visible;
+}
+
 
 .bottom-bar {
   grid-area: bottom-bar;
@@ -5842,6 +5962,7 @@ var styles = `
   /* Mobile-first: more padding */
   padding: 0 16px;
   gap: 12px;
+  user-select: none;
 }
 
 /* Desktop: tighter padding */
@@ -5859,22 +5980,16 @@ var styles = `
   flex-shrink: 0;
 }
 
-/* Recording indicator - mobile: just the dot */
-.recording-indicator {
-  display: flex;
-  align-items: center;
-  margin-right: 4px;
+/* Record button */
+.record-btn {
+  color: #666;
 }
 
-.recording-indicator .recording-label {
-  display: none;
+.record-btn.recording {
+  color: #ff4444;
 }
 
-.recording-dot {
-  width: 10px;
-  height: 10px;
-  background: #ff4444;
-  border-radius: 50%;
+.record-btn.recording svg {
   animation: recording-pulse 1s ease-in-out infinite;
 }
 
@@ -5883,6 +5998,17 @@ var styles = `
   50% { opacity: 0.4; }
 }
 
+/* Desktop: show REC label when recording */
+@media (min-width: 769px) {
+  .record-btn.recording {
+    width: auto;
+    padding: 0 6px;
+    gap: 4px;
+    background: rgba(255, 68, 68, 0.15);
+    border-radius: 3px;
+  }
+}
+
 /* Replay indicator - mobile: hidden */
 .replay-indicator {
   display: none;
@@ -6044,6 +6170,7 @@ var styles = `
   position: relative;
   cursor: pointer;
   overflow: hidden;
+  user-select: none;
 }
 
 /* Desktop: smaller seek bar */
@@ -7698,5 +7825,5 @@ export {
   App
 };
 
-//# debugId=BE2C82666F521FFC64756E2164756E21
+//# debugId=A1466E71356AC5F764756E2164756E21
 //# sourceMappingURL=mod.js.map