@bloopjs/web 0.0.89 → 0.0.91

package/dist/mod.js

@@ -77,9 +77,11 @@ __export2(exports_engine, {
   inputSourceCodeToInputSource: () => inputSourceCodeToInputSource,
   TimeContext: () => TimeContext,
   TIME_CTX_OFFSET: () => TIME_CTX_OFFSET,
+  ScreenContext: () => ScreenContext,
   SNAPSHOT_HEADER_USER_LEN_OFFSET: () => SNAPSHOT_HEADER_USER_LEN_OFFSET,
   SNAPSHOT_HEADER_LEN: () => SNAPSHOT_HEADER_LEN,
   SNAPSHOT_HEADER_ENGINE_LEN_OFFSET: () => SNAPSHOT_HEADER_ENGINE_LEN_OFFSET,
+  SCREEN_CTX_OFFSET: () => SCREEN_CTX_OFFSET,
   PlayerInputContext: () => PlayerInputContext,
   PLAYER_INPUTS_SIZE: () => PLAYER_INPUTS_SIZE,
   PLAYER_INPUTS_MOUSE_CTX_OFFSET: () => PLAYER_INPUTS_MOUSE_CTX_OFFSET,
@@ -141,6 +143,7 @@ var EventType;
   EventType2[EventType2["NetPeerAssignLocalId"] = 12] = "NetPeerAssignLocalId";
   EventType2[EventType2["NetPacketReceived"] = 13] = "NetPacketReceived";
   EventType2[EventType2["NetSessionInit"] = 14] = "NetSessionInit";
+  EventType2[EventType2["Resize"] = 15] = "Resize";
 })(EventType ||= {});
 var MouseButton;
 ((MouseButton2) => {
@@ -412,6 +415,11 @@ var NET_CTX_PEERS_OFFSET = 32;
 var NET_CTX_LAST_ROLLBACK_DEPTH_OFFSET = 128;
 var NET_CTX_TOTAL_ROLLBACKS_OFFSET = 132;
 var NET_CTX_FRAMES_RESIMULATED_OFFSET = 136;
+var SCREEN_CTX_WIDTH_OFFSET = 0;
+var SCREEN_CTX_HEIGHT_OFFSET = 4;
+var SCREEN_CTX_PHYSICAL_WIDTH_OFFSET = 8;
+var SCREEN_CTX_PHYSICAL_HEIGHT_OFFSET = 12;
+var SCREEN_CTX_PIXEL_RATIO_OFFSET = 16;
 var MOUSE_CTX_X_OFFSET = 0;
 var MOUSE_CTX_Y_OFFSET = 4;
 var MOUSE_CTX_WHEEL_X_OFFSET = 8;
@@ -1328,6 +1336,43 @@ class NetContext {
   }
 }
 
+class ScreenContext {
+  dataView;
+  constructor(dataView) {
+    this.dataView = dataView;
+  }
+  get width() {
+    if (!this.dataView) {
+      throw new Error("ScreenContext DataView is not initialized");
+    }
+    return this.dataView.getUint32(SCREEN_CTX_WIDTH_OFFSET, true);
+  }
+  get height() {
+    if (!this.dataView) {
+      throw new Error("ScreenContext DataView is not initialized");
+    }
+    return this.dataView.getUint32(SCREEN_CTX_HEIGHT_OFFSET, true);
+  }
+  get physicalWidth() {
+    if (!this.dataView) {
+      throw new Error("ScreenContext DataView is not initialized");
+    }
+    return this.dataView.getUint32(SCREEN_CTX_PHYSICAL_WIDTH_OFFSET, true);
+  }
+  get physicalHeight() {
+    if (!this.dataView) {
+      throw new Error("ScreenContext DataView is not initialized");
+    }
+    return this.dataView.getUint32(SCREEN_CTX_PHYSICAL_HEIGHT_OFFSET, true);
+  }
+  get pixelRatio() {
+    if (!this.dataView) {
+      throw new Error("ScreenContext DataView is not initialized");
+    }
+    return this.dataView.getFloat32(SCREEN_CTX_PIXEL_RATIO_OFFSET, true);
+  }
+}
+
 class TimeContext {
   dataView;
   constructor(dataView) {
@@ -1387,12 +1432,13 @@ function readTapeHeader(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.89/wasm/bloop.wasm");
+var DEFAULT_WASM_URL = new URL("https://unpkg.com/@bloopjs/engine@0.0.91/wasm/bloop.wasm");
 var MAX_ROLLBACK_FRAMES = 500;
 var TIME_CTX_OFFSET = 0;
 var INPUT_CTX_OFFSET = TIME_CTX_OFFSET + 4;
 var EVENTS_OFFSET = INPUT_CTX_OFFSET + 4;
 var NET_CTX_OFFSET = EVENTS_OFFSET + 4;
+var SCREEN_CTX_OFFSET = NET_CTX_OFFSET + 4;
 var SNAPSHOT_HEADER_LEN = 16;
 var SNAPSHOT_HEADER_USER_LEN_OFFSET = 4;
 var SNAPSHOT_HEADER_ENGINE_LEN_OFFSET = 8;
@@ -1414,6 +1460,7 @@ class Sim {
   #serialize;
   #isPaused = false;
   #net;
+  #screen;
   onTapeFull;
   constructor(wasm, memory, opts) {
     this.wasm = wasm;
@@ -1422,6 +1469,7 @@ class Sim {
     this.id = `${Math.floor(Math.random() * 1e6)}`;
     this.#serialize = opts?.serialize;
     this.#net = new NetContext;
+    this.#screen = new ScreenContext;
   }
   step(ms) {
     if (this.#isPaused) {
@@ -1534,6 +1582,12 @@ class Sim {
     }
     return this.#net;
   }
+  get screen() {
+    if (!this.#screen.dataView || this.#screen.dataView.buffer !== this.#memory.buffer) {
+      this.#screen.dataView = new DataView(this.#memory.buffer, this.wasm.get_screen_ctx());
+    }
+    return this.#screen;
+  }
   get buffer() {
     return this.#memory.buffer;
   }
@@ -1565,6 +1619,9 @@ class Sim {
     mousewheel: (x, y, peerId = 0) => {
       this.wasm.emit_mousewheel(x, y, peerId);
     },
+    resize: (width, height, physicalWidth, physicalHeight, pixelRatio) => {
+      this.wasm.emit_resize(width, height, physicalWidth, physicalHeight, pixelRatio);
+    },
     network: (type, data) => {
       switch (type) {
         case "join:ok": {
@@ -1730,6 +1787,39 @@ function calculateTapeConfig(tape) {
   return { maxEvents, maxPacketBytes };
 }
 
+class Players {
+  #inputs;
+  #net;
+  constructor(inputs, net) {
+    this.#inputs = inputs;
+    this.#net = net;
+  }
+  get(index) {
+    const players = this.#inputs.players;
+    if (index < 0 || index >= players.length) {
+      throw new RangeError(`Player index ${index} out of bounds (0-${players.length - 1})`);
+    }
+    return players[index];
+  }
+  get count() {
+    return this.#net.isInSession ? this.#net.peerCount : 1;
+  }
+  *[Symbol.iterator]() {
+    const players = this.#inputs.players;
+    const count = this.count;
+    for (let i = 0;i < count; i++) {
+      yield players[i];
+    }
+  }
+  *entries() {
+    const players = this.#inputs.players;
+    const count = this.count;
+    for (let i = 0;i < count; i++) {
+      yield [i, players[i]];
+    }
+  }
+}
+
 class Bloop {
   #systems = [];
   #context;
@@ -1742,15 +1832,16 @@ class Bloop {
       throw new Error("Bloop constructor is private. Use Bloop.create() to create a new game instance.");
     }
     const inputs = new InputContext;
+    const net = new NetContext;
+    const screen = new ScreenContext;
     this.#context = {
       bag: opts.bag ?? {},
       time: new TimeContext,
       inputs,
-      get players() {
-        return inputs.players;
-      },
+      players: new Players(inputs, net),
       rawPointer: -1,
-      net: new NetContext
+      net,
+      screen
     };
   }
   get bag() {
@@ -1798,6 +1889,7 @@ class Bloop {
       const timeCtxPtr = dv.getUint32(TIME_CTX_OFFSET, true);
       const inputCtxPtr = dv.getUint32(INPUT_CTX_OFFSET, true);
       const netCtxPtr = dv.getUint32(NET_CTX_OFFSET, true);
+      const screenCtxPtr = dv.getUint32(SCREEN_CTX_OFFSET, true);
       this.#context.rawPointer = ptr;
       if (!this.#context.inputs.hasDataView() || this.#context.inputs.dataView.buffer !== this.#engineBuffer || this.#context.inputs.dataView.byteOffset !== inputCtxPtr) {
         this.#context.inputs.dataView = new DataView(this.#engineBuffer, inputCtxPtr);
@@ -1808,6 +1900,9 @@ class Bloop {
       if (this.#context.net.dataView?.buffer !== this.#engineBuffer || this.#context.net.dataView?.byteOffset !== netCtxPtr) {
         this.#context.net.dataView = new DataView(this.#engineBuffer, netCtxPtr);
       }
+      if (this.#context.screen.dataView?.buffer !== this.#engineBuffer || this.#context.screen.dataView?.byteOffset !== screenCtxPtr) {
+        this.#context.screen.dataView = new DataView(this.#engineBuffer, screenCtxPtr);
+      }
     },
     systemsCallback: (system_handle, ptr) => {
       this.hooks.setContext(ptr);
@@ -1919,6 +2014,15 @@ class Bloop {
               };
               system.netcode?.(this.#context);
               break;
+            case exports_enums.EventType.Resize:
+              system.resize?.(attachEvent(this.#context, {
+                width: this.#context.screen.width,
+                height: this.#context.screen.height,
+                physicalWidth: this.#context.screen.physicalWidth,
+                physicalHeight: this.#context.screen.physicalHeight,
+                pixelRatio: this.#context.screen.pixelRatio
+              }));
+              break;
             default:
               break;
           }
@@ -1970,6 +2074,7 @@ var EventType2;
   EventType22[EventType22["NetPeerAssignLocalId"] = 12] = "NetPeerAssignLocalId";
   EventType22[EventType22["NetPacketReceived"] = 13] = "NetPacketReceived";
   EventType22[EventType22["NetSessionInit"] = 14] = "NetSessionInit";
+  EventType22[EventType22["Resize"] = 15] = "Resize";
 })(EventType2 ||= {});
 var MouseButton2;
 ((MouseButton22) => {
@@ -3168,15 +3273,17 @@ function readTapeHeader2(tape) {
     eventCount: view.getUint16(14, true)
   };
 }
-var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.89/wasm/bloop.wasm");
+var DEFAULT_WASM_URL2 = new URL("https://unpkg.com/@bloopjs/engine@0.0.91/wasm/bloop.wasm");
 var TIME_CTX_OFFSET2 = 0;
 var INPUT_CTX_OFFSET2 = TIME_CTX_OFFSET2 + 4;
 var EVENTS_OFFSET2 = INPUT_CTX_OFFSET2 + 4;
 var NET_CTX_OFFSET2 = EVENTS_OFFSET2 + 4;
+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,
@@ -3188,6 +3295,7 @@ __export(exports_mod, {
   debugState: () => debugState,
   cycleLayout: () => cycleLayout,
   clearLogs: () => clearLogs,
+  checkForSavedTape: () => checkForSavedTape,
   addPeer: () => addPeer,
   addLog: () => addLog,
   DebugUi: () => DebugUi
@@ -3531,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));
@@ -3617,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;
@@ -3660,7 +3810,7 @@ function n2(i4) {
     o3 = t4;
   }
 }
-var h2 = undefined;
+var h3 = undefined;
 var s3 = 0;
 var f3 = 0;
 var v3 = 0;
@@ -3791,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) {
@@ -3991,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() {
@@ -4022,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() {
@@ -4053,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) {
@@ -4074,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;
@@ -4092,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)) {
@@ -4131,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;
@@ -4204,7 +4354,7 @@ x.prototype.shouldComponentUpdate = function(i4, r4) {
 };
 function useSignal(i4) {
   return T2(function() {
-    return d2(i4);
+    return d3(i4);
   }, []);
 }
 function useSignalEffect(i4) {
@@ -4218,30 +4368,34 @@ 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 lastTapeName = d3(null);
+var isLoadDialogOpen = d3(false);
 var debugState = {
   layoutMode,
   isVisible: w3(() => layoutMode.value !== "off"),
@@ -4267,7 +4421,11 @@ var debugState = {
   onPlayPause,
   onStepForward,
   onJumpForward,
-  onSeek
+  onSeek,
+  onLoadTape,
+  onReplayLastTape,
+  lastTapeName,
+  isLoadDialogOpen
 };
 function cycleLayout() {
   const current = layoutMode.value;
@@ -4423,6 +4581,61 @@ 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;
+    }
+  };
+  checkForSavedTape();
+}
 // ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
 var f4 = 0;
 function u4(e4, t4, n3, o4, i4, u5) {
@@ -4783,6 +4996,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);
@@ -4869,6 +5184,9 @@ function BottomBar() {
     debugState.onSeek.value?.(ratio);
   }, []);
   const seekDrag = useSeekDrag(handleSeek);
+  const handleLoadTapeClick = q2(() => {
+    debugState.isLoadDialogOpen.value = true;
+  }, []);
   return /* @__PURE__ */ u4("div", {
     className: "bottom-bar",
     children: [
@@ -4955,6 +5273,17 @@ function BottomBar() {
                 ]
               }, 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),
@@ -4971,7 +5300,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);
 }
@@ -5538,6 +5868,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
@@ -6565,6 +6978,7 @@ class App {
     this.#debugUi = new DebugUi(opts);
     wirePlaybarHandlers(this);
     wireTapeDragDrop(this.#debugUi.canvas, this);
+    wireTapeLoadHandlers(this);
     return this.#debugUi;
   }
   get debugUi() {
@@ -6592,6 +7006,41 @@ class App {
   onHmr = createListener();
   subscribe() {
     const shouldEmitInputs = () => !this.sim.isReplaying;
+    let resizeObserver = null;
+    let cleanupPixelRatio = null;
+    const emitResize = () => {
+      const canvas2 = this.canvas;
+      const pixelRatio = window.devicePixelRatio || 1;
+      let width;
+      let height;
+      if (canvas2) {
+        const rect = canvas2.getBoundingClientRect();
+        width = Math.round(rect.width);
+        height = Math.round(rect.height);
+      } else {
+        width = window.innerWidth;
+        height = window.innerHeight;
+      }
+      this.sim.emit.resize(width, height, Math.round(width * pixelRatio), Math.round(height * pixelRatio), pixelRatio);
+    };
+    const canvas = this.canvas;
+    if (canvas) {
+      resizeObserver = new ResizeObserver(() => emitResize());
+      resizeObserver.observe(canvas);
+    } else {
+      window.addEventListener("resize", emitResize);
+    }
+    const updatePixelRatioListener = () => {
+      const mediaQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      const handler = () => {
+        emitResize();
+        updatePixelRatioListener();
+      };
+      mediaQuery.addEventListener("change", handler, { once: true });
+      return () => mediaQuery.removeEventListener("change", handler);
+    };
+    cleanupPixelRatio = updatePixelRatioListener();
+    emitResize();
     const handleKeydown = (event) => {
       if (shouldEmitInputs())
         this.sim.emit.keydown(event.code);
@@ -6745,6 +7194,9 @@ class App {
       window.removeEventListener("touchstart", handleTouchstart);
       window.removeEventListener("touchend", handleTouchend);
       window.removeEventListener("touchmove", handleTouchmove);
+      window.removeEventListener("resize", emitResize);
+      resizeObserver?.disconnect();
+      cleanupPixelRatio?.();
       if (this.#rafHandle != null) {
         cancelAnimationFrame(this.#rafHandle);
       }
@@ -6810,5 +7262,5 @@ export {
   App
 };
 
-//# debugId=164BA35FD7424E1864756E2164756E21
+//# debugId=3429E07BC69AE66A64756E2164756E21
 //# sourceMappingURL=mod.js.map