@bloopjs/web 0.0.90 → 0.0.92

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.90/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.90/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;
@@ -3283,6 +3283,7 @@ var SCREEN_CTX_OFFSET2 = NET_CTX_OFFSET2 + 4;
 // src/debugui/mod.ts
 var exports_mod = {};
 __export(exports_mod, {
+  wireTapeLoadHandlers: () => wireTapeLoadHandlers,
   wireTapeDragDrop: () => wireTapeDragDrop,
   wirePlaybarHandlers: () => wirePlaybarHandlers,
   updatePeer: () => updatePeer,
@@ -3294,6 +3295,7 @@ __export(exports_mod, {
   debugState: () => debugState,
   cycleLayout: () => cycleLayout,
   clearLogs: () => clearLogs,
+  checkForSavedTape: () => checkForSavedTape,
   addPeer: () => addPeer,
   addLog: () => addLog,
   DebugUi: () => DebugUi
@@ -3637,6 +3639,45 @@ function p2(n2, t3) {
   var u3 = r2.__H || (r2.__H = { __: [], __h: [] });
   return n2 >= u3.__.length && u3.__.push({}), u3.__[n2];
 }
+function d2(n2) {
+  return o2 = 1, h2(D2, n2);
+}
+function h2(n2, u3, i3) {
+  var o3 = p2(t2++, 2);
+  if (o3.t = n2, !o3.__c && (o3.__ = [i3 ? i3(u3) : D2(undefined, u3), function(n3) {
+    var t3 = o3.__N ? o3.__N[0] : o3.__[0], r3 = o3.t(t3, n3);
+    t3 !== r3 && (o3.__N = [r3, o3.__[1]], o3.__c.setState({}));
+  }], o3.__c = r2, !r2.__f)) {
+    var f3 = function(n3, t3, r3) {
+      if (!o3.__c.__H)
+        return true;
+      var u4 = o3.__c.__H.__.filter(function(n4) {
+        return !!n4.__c;
+      });
+      if (u4.every(function(n4) {
+        return !n4.__N;
+      }))
+        return !c3 || c3.call(this, n3, t3, r3);
+      var i4 = o3.__c.props !== n3;
+      return u4.forEach(function(n4) {
+        if (n4.__N) {
+          var t4 = n4.__[0];
+          n4.__ = n4.__N, n4.__N = undefined, t4 !== n4.__[0] && (i4 = true);
+        }
+      }), c3 && c3.call(this, n3, t3, r3) || i4;
+    };
+    r2.__f = true;
+    var { shouldComponentUpdate: c3, componentWillUpdate: e3 } = r2;
+    r2.componentWillUpdate = function(n3, t3, r3) {
+      if (this.__e) {
+        var u4 = c3;
+        c3 = undefined, f3(n3, t3, r3), c3 = u4;
+      }
+      e3 && e3.call(this, n3, t3, r3);
+    }, r2.shouldComponentUpdate = f3;
+  }
+  return o3.__N || o3.__;
+}
 function y2(n2, u3) {
   var i3 = p2(t2++, 3);
   !c2.__s && C2(i3.__H, u3) && (i3.__ = n2, i3.u = u3, r2.__H.__h.push(i3));
@@ -3723,15 +3764,18 @@ function C2(n2, t3) {
     return t4 !== n2[r3];
   });
 }
+function D2(n2, t3) {
+  return typeof t3 == "function" ? t3(n2) : t3;
+}
 
 // ../../node_modules/@preact/signals-core/dist/signals-core.module.js
 var i3 = Symbol.for("preact-signals");
 function t3() {
   if (!(s3 > 1)) {
     var i4, t4 = false;
-    while (h2 !== undefined) {
-      var r3 = h2;
-      h2 = undefined;
+    while (h3 !== undefined) {
+      var r3 = h3;
+      h3 = undefined;
       f3++;
       while (r3 !== undefined) {
         var o3 = r3.o;
@@ -3766,7 +3810,7 @@ function n2(i4) {
     o3 = t4;
   }
 }
-var h2 = undefined;
+var h3 = undefined;
 var s3 = 0;
 var f3 = 0;
 var v3 = 0;
@@ -3897,7 +3941,7 @@ Object.defineProperty(u3.prototype, "value", { get: function() {
     }
   }
 } });
-function d2(i4, t4) {
+function d3(i4, t4) {
   return new u3(i4, t4);
 }
 function c3(i4) {
@@ -4097,8 +4141,8 @@ p3.prototype.S = function() {
 p3.prototype.N = function() {
   if (!(2 & this.f)) {
     this.f |= 2;
-    this.o = h2;
-    h2 = this;
+    this.o = h3;
+    h3 = this;
   }
 };
 p3.prototype.d = function() {
@@ -4128,12 +4172,12 @@ var s4;
 function l4(i4, n3) {
   l[i4] = n3.bind(null, l[i4] || function() {});
 }
-function d3(i4) {
+function d4(i4) {
   if (s4)
     s4();
   s4 = i4 && i4.S();
 }
-function h3(i4) {
+function h4(i4) {
   var r4 = this, f4 = i4.data, o4 = useSignal(f4);
   o4.value = f4;
   var e4 = T2(function() {
@@ -4159,8 +4203,8 @@ function h3(i4) {
   }, []);
   return e4.value;
 }
-h3.displayName = "_st";
-Object.defineProperties(u3.prototype, { constructor: { configurable: true, value: undefined }, type: { configurable: true, value: h3 }, props: { configurable: true, get: function() {
+h4.displayName = "_st";
+Object.defineProperties(u3.prototype, { constructor: { configurable: true, value: undefined }, type: { configurable: true, value: h4 }, props: { configurable: true, get: function() {
   return { data: this };
 } }, __b: { configurable: true, value: 1 } });
 l4("__b", function(i4, r4) {
@@ -4180,7 +4224,7 @@ l4("__b", function(i4, r4) {
   i4(r4);
 });
 l4("__r", function(i4, r4) {
-  d3();
+  d4();
   var n3, t4 = r4.__c;
   if (t4) {
     t4.__$f &= -2;
@@ -4198,16 +4242,16 @@ l4("__r", function(i4, r4) {
       }();
   }
   v4 = t4;
-  d3(n3);
+  d4(n3);
   i4(r4);
 });
 l4("__e", function(i4, r4, n3, t4) {
-  d3();
+  d4();
   v4 = undefined;
   i4(r4, n3, t4);
 });
 l4("diffed", function(i4, r4) {
-  d3();
+  d4();
   v4 = undefined;
   var n3;
   if (typeof r4.type == "string" && (n3 = r4.__e)) {
@@ -4237,7 +4281,7 @@ l4("diffed", function(i4, r4) {
   i4(r4);
 });
 function p4(i4, r4, n3, t4) {
-  var f4 = r4 in i4 && i4.ownerSVGElement === undefined, o4 = d2(n3);
+  var f4 = r4 in i4 && i4.ownerSVGElement === undefined, o4 = d3(n3);
   return { o: function(i5, r5) {
     o4.value = i5;
     t4 = r5;
@@ -4310,7 +4354,7 @@ x.prototype.shouldComponentUpdate = function(i4, r4) {
 };
 function useSignal(i4) {
   return T2(function() {
-    return d2(i4);
+    return d3(i4);
   }, []);
 }
 function useSignalEffect(i4) {
@@ -4324,30 +4368,35 @@ function useSignalEffect(i4) {
 }
 
 // src/debugui/state.ts
-var layoutMode = d2("off");
-var netStatus = d2({
+var layoutMode = d3("off");
+var netStatus = d3({
   ourId: null,
   remoteId: null,
   rtt: null,
   peers: []
 });
-var logs = d2([]);
-var fps = d2(0);
-var frameTime = d2(0);
-var snapshotSize = d2(0);
-var frameNumber = d2(0);
-var hmrFlash = d2(false);
-var isPlaying = d2(true);
-var tapeUtilization = d2(0);
-var playheadPosition = d2(0);
-var tapeStartFrame = d2(0);
-var tapeFrameCount = d2(0);
-var onJumpBack = d2(null);
-var onStepBack = d2(null);
-var onPlayPause = d2(null);
-var onStepForward = d2(null);
-var onJumpForward = d2(null);
-var onSeek = d2(null);
+var logs = d3([]);
+var fps = d3(0);
+var frameTime = d3(0);
+var snapshotSize = d3(0);
+var frameNumber = d3(0);
+var hmrFlash = d3(false);
+var isPlaying = d3(true);
+var tapeUtilization = d3(0);
+var playheadPosition = d3(0);
+var tapeStartFrame = d3(0);
+var tapeFrameCount = d3(0);
+var onJumpBack = d3(null);
+var onStepBack = d3(null);
+var onPlayPause = d3(null);
+var onStepForward = d3(null);
+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 = {
   layoutMode,
   isVisible: w3(() => layoutMode.value !== "off"),
@@ -4373,7 +4422,12 @@ var debugState = {
   onPlayPause,
   onStepForward,
   onJumpForward,
-  onSeek
+  onSeek,
+  onLoadTape,
+  onReplayLastTape,
+  onSaveTape,
+  lastTapeName,
+  isLoadDialogOpen
 };
 function cycleLayout() {
   const current = layoutMode.value;
@@ -4529,6 +4583,73 @@ function wireTapeDragDrop(canvas, app) {
     app.loadTape(bytes);
   });
 }
+var TAPE_DB_NAME = "bloop-debug";
+var TAPE_STORE_NAME = "tapes";
+var TAPE_KEY = "last";
+function openTapeDB() {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(TAPE_DB_NAME, 1);
+    request.onerror = () => reject(request.error);
+    request.onsuccess = () => resolve(request.result);
+    request.onupgradeneeded = () => {
+      request.result.createObjectStore(TAPE_STORE_NAME);
+    };
+  });
+}
+async function saveTapeToStorage(bytes, fileName) {
+  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.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function loadTapeFromStorage() {
+  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);
+      request.onsuccess = () => resolve(request.result ?? null);
+      request.onerror = () => reject(request.error);
+    });
+  } catch {
+    return null;
+  }
+}
+async function checkForSavedTape() {
+  const saved = await loadTapeFromStorage();
+  debugState.lastTapeName.value = saved?.fileName ?? null;
+}
+function wireTapeLoadHandlers(app) {
+  debugState.onLoadTape.value = async (bytes, fileName) => {
+    app.loadTape(bytes);
+    await saveTapeToStorage(bytes, fileName);
+    debugState.lastTapeName.value = fileName;
+    debugState.isLoadDialogOpen.value = false;
+  };
+  debugState.onReplayLastTape.value = async () => {
+    const saved = await loadTapeFromStorage();
+    if (saved) {
+      app.loadTape(saved.bytes);
+      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
 var f4 = 0;
 function u4(e4, t4, n3, o4, i4, u5) {
@@ -4889,6 +5010,108 @@ function VerticalBar({
   }, undefined, false, undefined, this);
 }
 
+// src/debugui/components/LoadTapeDialog.tsx
+function LoadTapeDialog() {
+  const dialogRef = A2(null);
+  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)
+      return;
+    if (isOpen && !dialog.open) {
+      dialog.showModal();
+    } else if (!isOpen && dialog.open) {
+      dialog.close();
+    }
+  }, [isOpen]);
+  const handleClose = q2(() => {
+    debugState.isLoadDialogOpen.value = false;
+  }, []);
+  const handleFileSelect = q2(async (file) => {
+    if (!file.name.endsWith(".bloop"))
+      return;
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    debugState.onLoadTape.value?.(bytes, file.name);
+  }, []);
+  const handleDropZoneClick = q2(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileInputChange = q2((e4) => {
+    const input = e4.currentTarget;
+    const file = input.files?.[0];
+    if (file) {
+      handleFileSelect(file);
+      input.value = "";
+    }
+  }, [handleFileSelect]);
+  const handleDragOver = q2((e4) => {
+    e4.preventDefault();
+    if (e4.dataTransfer)
+      e4.dataTransfer.dropEffect = "copy";
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = q2(() => {
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = q2((e4) => {
+    e4.preventDefault();
+    setIsDragOver(false);
+    const file = e4.dataTransfer?.files[0];
+    if (file) {
+      handleFileSelect(file);
+    }
+  }, [handleFileSelect]);
+  const handleReplayLast = q2(() => {
+    debugState.onReplayLastTape.value?.();
+  }, []);
+  return /* @__PURE__ */ u4("dialog", {
+    ref: dialogRef,
+    className: "load-tape-dialog",
+    onClose: handleClose,
+    children: /* @__PURE__ */ u4("div", {
+      className: "load-tape-dialog-content",
+      children: [
+        /* @__PURE__ */ u4("h3", {
+          children: "Load Tape"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u4("div", {
+          className: `drop-zone ${isDragOver ? "drag-over" : ""}`,
+          onClick: handleDropZoneClick,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: /* @__PURE__ */ u4("span", {
+            className: "drop-zone-text",
+            children: [
+              "Drop .bloop file here",
+              /* @__PURE__ */ u4("br", {}, undefined, false, undefined, this),
+              "or click to browse"
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u4("input", {
+          ref: fileInputRef,
+          type: "file",
+          accept: ".bloop",
+          className: "hidden-file-input",
+          onChange: handleFileInputChange
+        }, undefined, false, undefined, this),
+        lastTapeName2 && /* @__PURE__ */ u4("button", {
+          className: "replay-last-btn",
+          onClick: handleReplayLast,
+          children: [
+            "Replay last: ",
+            lastTapeName2
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
 // src/debugui/components/BottomBar.tsx
 function useRepeatOnHold(action) {
   const rafId = A2(null);
@@ -4975,6 +5198,12 @@ function BottomBar() {
     debugState.onSeek.value?.(ratio);
   }, []);
   const seekDrag = useSeekDrag(handleSeek);
+  const handleLoadTapeClick = q2(() => {
+    debugState.isLoadDialogOpen.value = true;
+  }, []);
+  const handleSaveTapeClick = q2(() => {
+    debugState.onSaveTape.value?.();
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "bottom-bar",
     children: [
@@ -4982,7 +5211,7 @@ function BottomBar() {
         className: "playbar-controls",
         children: [
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn jump-back",
             ...jumpBackRepeat,
             children: [
               "<<",
@@ -4998,7 +5227,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn step-back",
             ...stepBackRepeat,
             children: [
               "<",
@@ -5014,7 +5243,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn play-pause",
             onClick: handlePlayPause,
             children: [
               isPlaying2 ? "||" : ">",
@@ -5031,7 +5260,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn step-forward",
             ...stepForwardRepeat,
             children: [
               ">",
@@ -5047,7 +5276,7 @@ function BottomBar() {
             ]
           }, undefined, true, undefined, this),
           /* @__PURE__ */ u4("button", {
-            className: "playbar-btn",
+            className: "playbar-btn jump-forward",
             ...jumpForwardRepeat,
             children: [
               ">>",
@@ -5061,6 +5290,33 @@ 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,
+            children: [
+              "Load",
+              /* @__PURE__ */ u4("span", {
+                className: "tooltip",
+                children: "Load tape"
+              }, undefined, false, undefined, this)
+            ]
           }, undefined, true, undefined, this)
         ]
       }, undefined, true, undefined, this),
@@ -5077,7 +5333,8 @@ function BottomBar() {
             style: { left: `${playheadPosition2 * tapeUtilization2 * 100}%` }
           }, undefined, false, undefined, this)
         ]
-      }, undefined, true, undefined, this)
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u4(LoadTapeDialog, {}, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
@@ -5203,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;
@@ -5223,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 */
@@ -5243,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;
@@ -5265,7 +5619,7 @@ var styles = `
 }
 
 .top-bar-side-label {
-  width: 2vw;
+  width: var(--bar-size);
   text-align: center;
   font-size: 9px;
   text-transform: uppercase;
@@ -5273,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;
@@ -5341,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 {
@@ -5352,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;
@@ -5371,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;
@@ -5414,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;
@@ -5422,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;
@@ -5644,6 +6056,89 @@ var styles = `
   border-radius: 4px;
   border: 1px inset lavender;
 }
+
+/* Load Tape Dialog */
+.load-tape-dialog {
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  padding: 0;
+  color: #ccc;
+  font-family: monospace;
+  max-width: 320px;
+  width: 90vw;
+}
+
+.load-tape-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.load-tape-dialog-content {
+  padding: 16px;
+}
+
+.load-tape-dialog h3 {
+  margin: 0 0 16px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.drop-zone {
+  border: 2px dashed #444;
+  border-radius: 8px;
+  padding: 32px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.drop-zone:hover {
+  border-color: #666;
+  background: #222;
+}
+
+.drop-zone.drag-over {
+  border-color: #7b3fa0;
+  background: rgba(123, 63, 160, 0.1);
+}
+
+.drop-zone-text {
+  color: #888;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.hidden-file-input {
+  display: none;
+}
+
+.replay-last-btn {
+  width: 100%;
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: #333;
+  border: none;
+  border-radius: 4px;
+  color: #ccc;
+  font-family: monospace;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.replay-last-btn:hover {
+  background: #444;
+  color: #fff;
+}
+
+.load-tape-btn {
+  margin-left: 4px;
+}
 `;
 
 // src/debugui/DebugUi.ts
@@ -6671,6 +7166,7 @@ class App {
     this.#debugUi = new DebugUi(opts);
     wirePlaybarHandlers(this);
     wireTapeDragDrop(this.#debugUi.canvas, this);
+    wireTapeLoadHandlers(this);
     return this.#debugUi;
   }
   get debugUi() {
@@ -6954,5 +7450,5 @@ export {
   App
 };
 
-//# debugId=669ECA7E8ACBF62064756E2164756E21
+//# debugId=B02D4DB9DDB2D5FC64756E2164756E21
 //# sourceMappingURL=mod.js.map