@bloopjs/web 0.0.48 → 0.0.49

package/dist/mod.js

@@ -1,4 +1,3 @@
-// ../bloop/dist/mod.js
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -9,8 +8,20 @@ var __export = (target, all) => {
       set: (newValue) => all[name] = () => newValue
     });
 };
+
+// ../bloop/dist/mod.js
+var __defProp2 = Object.defineProperty;
+var __export2 = (target, all) => {
+  for (var name in all)
+    __defProp2(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
 var exports_util = {};
-__export(exports_util, {
+__export2(exports_util, {
   unwrap: () => unwrap,
   toHexString: () => toHexString,
   logPerSecond: () => logPerSecond,
@@ -56,7 +67,7 @@ function unwrap(value, message) {
   return value;
 }
 var exports_engine = {};
-__export(exports_engine, {
+__export2(exports_engine, {
   mouseButtonToMouseButtonCode: () => mouseButtonToMouseButtonCode,
   mouseButtonCodeToMouseButton: () => mouseButtonCodeToMouseButton,
   keyToKeyCode: () => keyToKeyCode,
@@ -86,10 +97,10 @@ __export(exports_engine, {
   EVENTS_OFFSET: () => EVENTS_OFFSET,
   DEFAULT_WASM_URL: () => DEFAULT_WASM_URL
 });
-var __defProp2 = Object.defineProperty;
-var __export2 = (target, all) => {
+var __defProp22 = Object.defineProperty;
+var __export22 = (target, all) => {
   for (var name in all)
-    __defProp2(target, name, {
+    __defProp22(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
@@ -97,7 +108,7 @@ var __export2 = (target, all) => {
     });
 };
 var exports_enums = {};
-__export2(exports_enums, {
+__export22(exports_enums, {
   MouseButton: () => MouseButton,
   Key: () => Key,
   InputSource: () => InputSource,
@@ -1382,7 +1393,7 @@ async function mount(opts) {
     console.error(`Failed to fetch wasm at ${opts.wasmUrl ?? DEFAULT_WASM_URL}`, e);
     throw e;
   });
-  const memory = new WebAssembly.Memory({ initial: 30, maximum: 1000 });
+  const memory = new WebAssembly.Memory({ initial: 236, maximum: 1000 });
   const wasmInstantiatedSource = await WebAssembly.instantiate(bytes, {
     env: {
       memory,
@@ -3357,6 +3368,1710 @@ function joinRoom(brokerUrl, _roomId, cbs) {
   }
 }
 
+// src/debugui/mod.ts
+var exports_mod = {};
+__export(exports_mod, {
+  updatePeer: () => updatePeer,
+  setRemoteId: () => setRemoteId,
+  setLocalId: () => setLocalId,
+  resetState: () => resetState,
+  removePeer: () => removePeer,
+  debugState: () => debugState,
+  clearLogs: () => clearLogs,
+  addPeer: () => addPeer,
+  addLog: () => addLog,
+  DebugUi: () => DebugUi
+});
+
+// ../../node_modules/preact/dist/preact.module.js
+var n;
+var l;
+var u;
+var t;
+var i;
+var r;
+var o;
+var e;
+var f;
+var c;
+var s;
+var a;
+var h;
+var p = {};
+var v = [];
+var y = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+var w = Array.isArray;
+function d(n2, l2) {
+  for (var u2 in l2)
+    n2[u2] = l2[u2];
+  return n2;
+}
+function g(n2) {
+  n2 && n2.parentNode && n2.parentNode.removeChild(n2);
+}
+function _(l2, u2, t2) {
+  var i2, r2, o2, e2 = {};
+  for (o2 in u2)
+    o2 == "key" ? i2 = u2[o2] : o2 == "ref" ? r2 = u2[o2] : e2[o2] = u2[o2];
+  if (arguments.length > 2 && (e2.children = arguments.length > 3 ? n.call(arguments, 2) : t2), typeof l2 == "function" && l2.defaultProps != null)
+    for (o2 in l2.defaultProps)
+      e2[o2] === undefined && (e2[o2] = l2.defaultProps[o2]);
+  return m(l2, e2, i2, r2, null);
+}
+function m(n2, t2, i2, r2, o2) {
+  var e2 = { type: n2, props: t2, key: i2, ref: r2, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: undefined, __v: o2 == null ? ++u : o2, __i: -1, __u: 0 };
+  return o2 == null && l.vnode != null && l.vnode(e2), e2;
+}
+function k(n2) {
+  return n2.children;
+}
+function x(n2, l2) {
+  this.props = n2, this.context = l2;
+}
+function S(n2, l2) {
+  if (l2 == null)
+    return n2.__ ? S(n2.__, n2.__i + 1) : null;
+  for (var u2;l2 < n2.__k.length; l2++)
+    if ((u2 = n2.__k[l2]) != null && u2.__e != null)
+      return u2.__e;
+  return typeof n2.type == "function" ? S(n2) : null;
+}
+function C(n2) {
+  var l2, u2;
+  if ((n2 = n2.__) != null && n2.__c != null) {
+    for (n2.__e = n2.__c.base = null, l2 = 0;l2 < n2.__k.length; l2++)
+      if ((u2 = n2.__k[l2]) != null && u2.__e != null) {
+        n2.__e = n2.__c.base = u2.__e;
+        break;
+      }
+    return C(n2);
+  }
+}
+function M(n2) {
+  (!n2.__d && (n2.__d = true) && i.push(n2) && !$.__r++ || r != l.debounceRendering) && ((r = l.debounceRendering) || o)($);
+}
+function $() {
+  for (var n2, u2, t2, r2, o2, f2, c2, s2 = 1;i.length; )
+    i.length > s2 && i.sort(e), n2 = i.shift(), s2 = i.length, n2.__d && (t2 = undefined, r2 = undefined, o2 = (r2 = (u2 = n2).__v).__e, f2 = [], c2 = [], u2.__P && ((t2 = d({}, r2)).__v = r2.__v + 1, l.vnode && l.vnode(t2), O(u2.__P, t2, r2, u2.__n, u2.__P.namespaceURI, 32 & r2.__u ? [o2] : null, f2, o2 == null ? S(r2) : o2, !!(32 & r2.__u), c2), t2.__v = r2.__v, t2.__.__k[t2.__i] = t2, N(f2, t2, c2), r2.__e = r2.__ = null, t2.__e != o2 && C(t2)));
+  $.__r = 0;
+}
+function I(n2, l2, u2, t2, i2, r2, o2, e2, f2, c2, s2) {
+  var a2, h2, y2, w2, d2, g2, _2, m2 = t2 && t2.__k || v, b = l2.length;
+  for (f2 = P(u2, l2, m2, f2, b), a2 = 0;a2 < b; a2++)
+    (y2 = u2.__k[a2]) != null && (h2 = y2.__i == -1 ? p : m2[y2.__i] || p, y2.__i = a2, g2 = O(n2, y2, h2, i2, r2, o2, e2, f2, c2, s2), w2 = y2.__e, y2.ref && h2.ref != y2.ref && (h2.ref && B(h2.ref, null, y2), s2.push(y2.ref, y2.__c || w2, y2)), d2 == null && w2 != null && (d2 = w2), (_2 = !!(4 & y2.__u)) || h2.__k === y2.__k ? f2 = A(y2, f2, n2, _2) : typeof y2.type == "function" && g2 !== undefined ? f2 = g2 : w2 && (f2 = w2.nextSibling), y2.__u &= -7);
+  return u2.__e = d2, f2;
+}
+function P(n2, l2, u2, t2, i2) {
+  var r2, o2, e2, f2, c2, s2 = u2.length, a2 = s2, h2 = 0;
+  for (n2.__k = new Array(i2), r2 = 0;r2 < i2; r2++)
+    (o2 = l2[r2]) != null && typeof o2 != "boolean" && typeof o2 != "function" ? (typeof o2 == "string" || typeof o2 == "number" || typeof o2 == "bigint" || o2.constructor == String ? o2 = n2.__k[r2] = m(null, o2, null, null, null) : w(o2) ? o2 = n2.__k[r2] = m(k, { children: o2 }, null, null, null) : o2.constructor == null && o2.__b > 0 ? o2 = n2.__k[r2] = m(o2.type, o2.props, o2.key, o2.ref ? o2.ref : null, o2.__v) : n2.__k[r2] = o2, f2 = r2 + h2, o2.__ = n2, o2.__b = n2.__b + 1, (c2 = o2.__i = L(o2, u2, f2, a2)) != -1 && (a2--, (e2 = u2[c2]) && (e2.__u |= 2)), e2 == null || e2.__v == null ? (c2 == -1 && (i2 > s2 ? h2-- : i2 < s2 && h2++), typeof o2.type != "function" && (o2.__u |= 4)) : c2 != f2 && (c2 == f2 - 1 ? h2-- : c2 == f2 + 1 ? h2++ : (c2 > f2 ? h2-- : h2++, o2.__u |= 4))) : n2.__k[r2] = null;
+  if (a2)
+    for (r2 = 0;r2 < s2; r2++)
+      (e2 = u2[r2]) != null && (2 & e2.__u) == 0 && (e2.__e == t2 && (t2 = S(e2)), D(e2, e2));
+  return t2;
+}
+function A(n2, l2, u2, t2) {
+  var i2, r2;
+  if (typeof n2.type == "function") {
+    for (i2 = n2.__k, r2 = 0;i2 && r2 < i2.length; r2++)
+      i2[r2] && (i2[r2].__ = n2, l2 = A(i2[r2], l2, u2, t2));
+    return l2;
+  }
+  n2.__e != l2 && (t2 && (l2 && n2.type && !l2.parentNode && (l2 = S(n2)), u2.insertBefore(n2.__e, l2 || null)), l2 = n2.__e);
+  do {
+    l2 = l2 && l2.nextSibling;
+  } while (l2 != null && l2.nodeType == 8);
+  return l2;
+}
+function L(n2, l2, u2, t2) {
+  var i2, r2, o2, e2 = n2.key, f2 = n2.type, c2 = l2[u2], s2 = c2 != null && (2 & c2.__u) == 0;
+  if (c2 === null && e2 == null || s2 && e2 == c2.key && f2 == c2.type)
+    return u2;
+  if (t2 > (s2 ? 1 : 0)) {
+    for (i2 = u2 - 1, r2 = u2 + 1;i2 >= 0 || r2 < l2.length; )
+      if ((c2 = l2[o2 = i2 >= 0 ? i2-- : r2++]) != null && (2 & c2.__u) == 0 && e2 == c2.key && f2 == c2.type)
+        return o2;
+  }
+  return -1;
+}
+function T(n2, l2, u2) {
+  l2[0] == "-" ? n2.setProperty(l2, u2 == null ? "" : u2) : n2[l2] = u2 == null ? "" : typeof u2 != "number" || y.test(l2) ? u2 : u2 + "px";
+}
+function j(n2, l2, u2, t2, i2) {
+  var r2, o2;
+  n:
+    if (l2 == "style")
+      if (typeof u2 == "string")
+        n2.style.cssText = u2;
+      else {
+        if (typeof t2 == "string" && (n2.style.cssText = t2 = ""), t2)
+          for (l2 in t2)
+            u2 && l2 in u2 || T(n2.style, l2, "");
+        if (u2)
+          for (l2 in u2)
+            t2 && u2[l2] == t2[l2] || T(n2.style, l2, u2[l2]);
+      }
+    else if (l2[0] == "o" && l2[1] == "n")
+      r2 = l2 != (l2 = l2.replace(f, "$1")), o2 = l2.toLowerCase(), l2 = o2 in n2 || l2 == "onFocusOut" || l2 == "onFocusIn" ? o2.slice(2) : l2.slice(2), n2.l || (n2.l = {}), n2.l[l2 + r2] = u2, u2 ? t2 ? u2.u = t2.u : (u2.u = c, n2.addEventListener(l2, r2 ? a : s, r2)) : n2.removeEventListener(l2, r2 ? a : s, r2);
+    else {
+      if (i2 == "http://www.w3.org/2000/svg")
+        l2 = l2.replace(/xlink(H|:h)/, "h").replace(/sName$/, "s");
+      else if (l2 != "width" && l2 != "height" && l2 != "href" && l2 != "list" && l2 != "form" && l2 != "tabIndex" && l2 != "download" && l2 != "rowSpan" && l2 != "colSpan" && l2 != "role" && l2 != "popover" && l2 in n2)
+        try {
+          n2[l2] = u2 == null ? "" : u2;
+          break n;
+        } catch (n3) {}
+      typeof u2 == "function" || (u2 == null || u2 === false && l2[4] != "-" ? n2.removeAttribute(l2) : n2.setAttribute(l2, l2 == "popover" && u2 == 1 ? "" : u2));
+    }
+}
+function F(n2) {
+  return function(u2) {
+    if (this.l) {
+      var t2 = this.l[u2.type + n2];
+      if (u2.t == null)
+        u2.t = c++;
+      else if (u2.t < t2.u)
+        return;
+      return t2(l.event ? l.event(u2) : u2);
+    }
+  };
+}
+function O(n2, u2, t2, i2, r2, o2, e2, f2, c2, s2) {
+  var a2, h2, p2, v2, y2, _2, m2, b, S2, C2, M2, $2, P2, A2, H, L2, T2, j2 = u2.type;
+  if (u2.constructor != null)
+    return null;
+  128 & t2.__u && (c2 = !!(32 & t2.__u), o2 = [f2 = u2.__e = t2.__e]), (a2 = l.__b) && a2(u2);
+  n:
+    if (typeof j2 == "function")
+      try {
+        if (b = u2.props, S2 = "prototype" in j2 && j2.prototype.render, C2 = (a2 = j2.contextType) && i2[a2.__c], M2 = a2 ? C2 ? C2.props.value : a2.__ : i2, t2.__c ? m2 = (h2 = u2.__c = t2.__c).__ = h2.__E : (S2 ? u2.__c = h2 = new j2(b, M2) : (u2.__c = h2 = new x(b, M2), h2.constructor = j2, h2.render = E), C2 && C2.sub(h2), h2.state || (h2.state = {}), h2.__n = i2, p2 = h2.__d = true, h2.__h = [], h2._sb = []), S2 && h2.__s == null && (h2.__s = h2.state), S2 && j2.getDerivedStateFromProps != null && (h2.__s == h2.state && (h2.__s = d({}, h2.__s)), d(h2.__s, j2.getDerivedStateFromProps(b, h2.__s))), v2 = h2.props, y2 = h2.state, h2.__v = u2, p2)
+          S2 && j2.getDerivedStateFromProps == null && h2.componentWillMount != null && h2.componentWillMount(), S2 && h2.componentDidMount != null && h2.__h.push(h2.componentDidMount);
+        else {
+          if (S2 && j2.getDerivedStateFromProps == null && b !== v2 && h2.componentWillReceiveProps != null && h2.componentWillReceiveProps(b, M2), u2.__v == t2.__v || !h2.__e && h2.shouldComponentUpdate != null && h2.shouldComponentUpdate(b, h2.__s, M2) === false) {
+            for (u2.__v != t2.__v && (h2.props = b, h2.state = h2.__s, h2.__d = false), u2.__e = t2.__e, u2.__k = t2.__k, u2.__k.some(function(n3) {
+              n3 && (n3.__ = u2);
+            }), $2 = 0;$2 < h2._sb.length; $2++)
+              h2.__h.push(h2._sb[$2]);
+            h2._sb = [], h2.__h.length && e2.push(h2);
+            break n;
+          }
+          h2.componentWillUpdate != null && h2.componentWillUpdate(b, h2.__s, M2), S2 && h2.componentDidUpdate != null && h2.__h.push(function() {
+            h2.componentDidUpdate(v2, y2, _2);
+          });
+        }
+        if (h2.context = M2, h2.props = b, h2.__P = n2, h2.__e = false, P2 = l.__r, A2 = 0, S2) {
+          for (h2.state = h2.__s, h2.__d = false, P2 && P2(u2), a2 = h2.render(h2.props, h2.state, h2.context), H = 0;H < h2._sb.length; H++)
+            h2.__h.push(h2._sb[H]);
+          h2._sb = [];
+        } else
+          do {
+            h2.__d = false, P2 && P2(u2), a2 = h2.render(h2.props, h2.state, h2.context), h2.state = h2.__s;
+          } while (h2.__d && ++A2 < 25);
+        h2.state = h2.__s, h2.getChildContext != null && (i2 = d(d({}, i2), h2.getChildContext())), S2 && !p2 && h2.getSnapshotBeforeUpdate != null && (_2 = h2.getSnapshotBeforeUpdate(v2, y2)), L2 = a2, a2 != null && a2.type === k && a2.key == null && (L2 = V(a2.props.children)), f2 = I(n2, w(L2) ? L2 : [L2], u2, t2, i2, r2, o2, e2, f2, c2, s2), h2.base = u2.__e, u2.__u &= -161, h2.__h.length && e2.push(h2), m2 && (h2.__E = h2.__ = null);
+      } catch (n3) {
+        if (u2.__v = null, c2 || o2 != null)
+          if (n3.then) {
+            for (u2.__u |= c2 ? 160 : 128;f2 && f2.nodeType == 8 && f2.nextSibling; )
+              f2 = f2.nextSibling;
+            o2[o2.indexOf(f2)] = null, u2.__e = f2;
+          } else {
+            for (T2 = o2.length;T2--; )
+              g(o2[T2]);
+            z(u2);
+          }
+        else
+          u2.__e = t2.__e, u2.__k = t2.__k, n3.then || z(u2);
+        l.__e(n3, u2, t2);
+      }
+    else
+      o2 == null && u2.__v == t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : f2 = u2.__e = q(t2.__e, u2, t2, i2, r2, o2, e2, c2, s2);
+  return (a2 = l.diffed) && a2(u2), 128 & u2.__u ? undefined : f2;
+}
+function z(n2) {
+  n2 && n2.__c && (n2.__c.__e = true), n2 && n2.__k && n2.__k.forEach(z);
+}
+function N(n2, u2, t2) {
+  for (var i2 = 0;i2 < t2.length; i2++)
+    B(t2[i2], t2[++i2], t2[++i2]);
+  l.__c && l.__c(u2, n2), n2.some(function(u3) {
+    try {
+      n2 = u3.__h, u3.__h = [], n2.some(function(n3) {
+        n3.call(u3);
+      });
+    } catch (n3) {
+      l.__e(n3, u3.__v);
+    }
+  });
+}
+function V(n2) {
+  return typeof n2 != "object" || n2 == null || n2.__b && n2.__b > 0 ? n2 : w(n2) ? n2.map(V) : d({}, n2);
+}
+function q(u2, t2, i2, r2, o2, e2, f2, c2, s2) {
+  var a2, h2, v2, y2, d2, _2, m2, b = i2.props || p, k2 = t2.props, x2 = t2.type;
+  if (x2 == "svg" ? o2 = "http://www.w3.org/2000/svg" : x2 == "math" ? o2 = "http://www.w3.org/1998/Math/MathML" : o2 || (o2 = "http://www.w3.org/1999/xhtml"), e2 != null) {
+    for (a2 = 0;a2 < e2.length; a2++)
+      if ((d2 = e2[a2]) && "setAttribute" in d2 == !!x2 && (x2 ? d2.localName == x2 : d2.nodeType == 3)) {
+        u2 = d2, e2[a2] = null;
+        break;
+      }
+  }
+  if (u2 == null) {
+    if (x2 == null)
+      return document.createTextNode(k2);
+    u2 = document.createElementNS(o2, x2, k2.is && k2), c2 && (l.__m && l.__m(t2, e2), c2 = false), e2 = null;
+  }
+  if (x2 == null)
+    b === k2 || c2 && u2.data == k2 || (u2.data = k2);
+  else {
+    if (e2 = e2 && n.call(u2.childNodes), !c2 && e2 != null)
+      for (b = {}, a2 = 0;a2 < u2.attributes.length; a2++)
+        b[(d2 = u2.attributes[a2]).name] = d2.value;
+    for (a2 in b)
+      if (d2 = b[a2], a2 == "children")
+        ;
+      else if (a2 == "dangerouslySetInnerHTML")
+        v2 = d2;
+      else if (!(a2 in k2)) {
+        if (a2 == "value" && "defaultValue" in k2 || a2 == "checked" && "defaultChecked" in k2)
+          continue;
+        j(u2, a2, null, d2, o2);
+      }
+    for (a2 in k2)
+      d2 = k2[a2], a2 == "children" ? y2 = d2 : a2 == "dangerouslySetInnerHTML" ? h2 = d2 : a2 == "value" ? _2 = d2 : a2 == "checked" ? m2 = d2 : c2 && typeof d2 != "function" || b[a2] === d2 || j(u2, a2, d2, b[a2], o2);
+    if (h2)
+      c2 || v2 && (h2.__html == v2.__html || h2.__html == u2.innerHTML) || (u2.innerHTML = h2.__html), t2.__k = [];
+    else if (v2 && (u2.innerHTML = ""), I(t2.type == "template" ? u2.content : u2, w(y2) ? y2 : [y2], t2, i2, r2, x2 == "foreignObject" ? "http://www.w3.org/1999/xhtml" : o2, e2, f2, e2 ? e2[0] : i2.__k && S(i2, 0), c2, s2), e2 != null)
+      for (a2 = e2.length;a2--; )
+        g(e2[a2]);
+    c2 || (a2 = "value", x2 == "progress" && _2 == null ? u2.removeAttribute("value") : _2 != null && (_2 !== u2[a2] || x2 == "progress" && !_2 || x2 == "option" && _2 != b[a2]) && j(u2, a2, _2, b[a2], o2), a2 = "checked", m2 != null && m2 != u2[a2] && j(u2, a2, m2, b[a2], o2));
+  }
+  return u2;
+}
+function B(n2, u2, t2) {
+  try {
+    if (typeof n2 == "function") {
+      var i2 = typeof n2.__u == "function";
+      i2 && n2.__u(), i2 && u2 == null || (n2.__u = n2(u2));
+    } else
+      n2.current = u2;
+  } catch (n3) {
+    l.__e(n3, t2);
+  }
+}
+function D(n2, u2, t2) {
+  var i2, r2;
+  if (l.unmount && l.unmount(n2), (i2 = n2.ref) && (i2.current && i2.current != n2.__e || B(i2, null, u2)), (i2 = n2.__c) != null) {
+    if (i2.componentWillUnmount)
+      try {
+        i2.componentWillUnmount();
+      } catch (n3) {
+        l.__e(n3, u2);
+      }
+    i2.base = i2.__P = null;
+  }
+  if (i2 = n2.__k)
+    for (r2 = 0;r2 < i2.length; r2++)
+      i2[r2] && D(i2[r2], u2, t2 || typeof n2.type != "function");
+  t2 || g(n2.__e), n2.__c = n2.__ = n2.__e = undefined;
+}
+function E(n2, l2, u2) {
+  return this.constructor(n2, u2);
+}
+function G(u2, t2, i2) {
+  var r2, o2, e2, f2;
+  t2 == document && (t2 = document.documentElement), l.__ && l.__(u2, t2), o2 = (r2 = typeof i2 == "function") ? null : i2 && i2.__k || t2.__k, e2 = [], f2 = [], O(t2, u2 = (!r2 && i2 || t2).__k = _(k, null, [u2]), o2 || p, p, t2.namespaceURI, !r2 && i2 ? [i2] : o2 ? null : t2.firstChild ? n.call(t2.childNodes) : null, e2, !r2 && i2 ? i2 : o2 ? o2.__e : t2.firstChild, r2, f2), N(e2, u2, f2);
+}
+n = v.slice, l = { __e: function(n2, l2, u2, t2) {
+  for (var i2, r2, o2;l2 = l2.__; )
+    if ((i2 = l2.__c) && !i2.__)
+      try {
+        if ((r2 = i2.constructor) && r2.getDerivedStateFromError != null && (i2.setState(r2.getDerivedStateFromError(n2)), o2 = i2.__d), i2.componentDidCatch != null && (i2.componentDidCatch(n2, t2 || {}), o2 = i2.__d), o2)
+          return i2.__E = i2;
+      } catch (l3) {
+        n2 = l3;
+      }
+  throw n2;
+} }, u = 0, t = function(n2) {
+  return n2 != null && n2.constructor == null;
+}, x.prototype.setState = function(n2, l2) {
+  var u2;
+  u2 = this.__s != null && this.__s != this.state ? this.__s : this.__s = d({}, this.state), typeof n2 == "function" && (n2 = n2(d({}, u2), this.props)), n2 && d(u2, n2), n2 != null && this.__v && (l2 && this._sb.push(l2), M(this));
+}, x.prototype.forceUpdate = function(n2) {
+  this.__v && (this.__e = true, n2 && this.__h.push(n2), M(this));
+}, x.prototype.render = k, i = [], o = typeof Promise == "function" ? Promise.prototype.then.bind(Promise.resolve()) : setTimeout, e = function(n2, l2) {
+  return n2.__v.__b - l2.__v.__b;
+}, $.__r = 0, f = /(PointerCapture)$|Capture$/i, c = 0, s = F(false), a = F(true), h = 0;
+
+// ../../node_modules/preact/hooks/dist/hooks.module.js
+var t2;
+var r2;
+var u2;
+var i2;
+var o2 = 0;
+var f2 = [];
+var c2 = l;
+var e2 = c2.__b;
+var a2 = c2.__r;
+var v2 = c2.diffed;
+var l2 = c2.__c;
+var m2 = c2.unmount;
+var s2 = c2.__;
+function p2(n2, t3) {
+  c2.__h && c2.__h(r2, n2, o2 || t3), o2 = 0;
+  var u3 = r2.__H || (r2.__H = { __: [], __h: [] });
+  return n2 >= u3.__.length && u3.__.push({}), u3.__[n2];
+}
+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));
+}
+function A2(n2) {
+  return o2 = 5, T2(function() {
+    return { current: n2 };
+  }, []);
+}
+function T2(n2, r3) {
+  var u3 = p2(t2++, 7);
+  return C2(u3.__H, r3) && (u3.__ = n2(), u3.__H = r3, u3.__h = n2), u3.__;
+}
+function q2(n2, t3) {
+  return o2 = 8, T2(function() {
+    return n2;
+  }, t3);
+}
+function j2() {
+  for (var n2;n2 = f2.shift(); )
+    if (n2.__P && n2.__H)
+      try {
+        n2.__H.__h.forEach(z2), n2.__H.__h.forEach(B2), n2.__H.__h = [];
+      } catch (t3) {
+        n2.__H.__h = [], c2.__e(t3, n2.__v);
+      }
+}
+c2.__b = function(n2) {
+  r2 = null, e2 && e2(n2);
+}, c2.__ = function(n2, t3) {
+  n2 && t3.__k && t3.__k.__m && (n2.__m = t3.__k.__m), s2 && s2(n2, t3);
+}, c2.__r = function(n2) {
+  a2 && a2(n2), t2 = 0;
+  var i3 = (r2 = n2.__c).__H;
+  i3 && (u2 === r2 ? (i3.__h = [], r2.__h = [], i3.__.forEach(function(n3) {
+    n3.__N && (n3.__ = n3.__N), n3.u = n3.__N = undefined;
+  })) : (i3.__h.forEach(z2), i3.__h.forEach(B2), i3.__h = [], t2 = 0)), u2 = r2;
+}, c2.diffed = function(n2) {
+  v2 && v2(n2);
+  var t3 = n2.__c;
+  t3 && t3.__H && (t3.__H.__h.length && (f2.push(t3) !== 1 && i2 === c2.requestAnimationFrame || ((i2 = c2.requestAnimationFrame) || w2)(j2)), t3.__H.__.forEach(function(n3) {
+    n3.u && (n3.__H = n3.u), n3.u = undefined;
+  })), u2 = r2 = null;
+}, c2.__c = function(n2, t3) {
+  t3.some(function(n3) {
+    try {
+      n3.__h.forEach(z2), n3.__h = n3.__h.filter(function(n4) {
+        return !n4.__ || B2(n4);
+      });
+    } catch (r3) {
+      t3.some(function(n4) {
+        n4.__h && (n4.__h = []);
+      }), t3 = [], c2.__e(r3, n3.__v);
+    }
+  }), l2 && l2(n2, t3);
+}, c2.unmount = function(n2) {
+  m2 && m2(n2);
+  var t3, r3 = n2.__c;
+  r3 && r3.__H && (r3.__H.__.forEach(function(n3) {
+    try {
+      z2(n3);
+    } catch (n4) {
+      t3 = n4;
+    }
+  }), r3.__H = undefined, t3 && c2.__e(t3, r3.__v));
+};
+var k2 = typeof requestAnimationFrame == "function";
+function w2(n2) {
+  var t3, r3 = function() {
+    clearTimeout(u3), k2 && cancelAnimationFrame(t3), setTimeout(n2);
+  }, u3 = setTimeout(r3, 35);
+  k2 && (t3 = requestAnimationFrame(r3));
+}
+function z2(n2) {
+  var t3 = r2, u3 = n2.__c;
+  typeof u3 == "function" && (n2.__c = undefined, u3()), r2 = t3;
+}
+function B2(n2) {
+  var t3 = r2;
+  n2.__c = n2.__(), r2 = t3;
+}
+function C2(n2, t3) {
+  return !n2 || n2.length !== t3.length || t3.some(function(t4, r3) {
+    return t4 !== n2[r3];
+  });
+}
+
+// ../../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;
+      f3++;
+      while (r3 !== undefined) {
+        var o3 = r3.o;
+        r3.o = undefined;
+        r3.f &= -3;
+        if (!(8 & r3.f) && c3(r3))
+          try {
+            r3.c();
+          } catch (r4) {
+            if (!t4) {
+              i4 = r4;
+              t4 = true;
+            }
+          }
+        r3 = o3;
+      }
+    }
+    f3 = 0;
+    s3--;
+    if (t4)
+      throw i4;
+  } else
+    s3--;
+}
+var o3 = undefined;
+function n2(i4) {
+  var t4 = o3;
+  o3 = undefined;
+  try {
+    return i4();
+  } finally {
+    o3 = t4;
+  }
+}
+var h2 = undefined;
+var s3 = 0;
+var f3 = 0;
+var v3 = 0;
+function e3(i4) {
+  if (o3 !== undefined) {
+    var t4 = i4.n;
+    if (t4 === undefined || t4.t !== o3) {
+      t4 = { i: 0, S: i4, p: o3.s, n: undefined, t: o3, e: undefined, x: undefined, r: t4 };
+      if (o3.s !== undefined)
+        o3.s.n = t4;
+      o3.s = t4;
+      i4.n = t4;
+      if (32 & o3.f)
+        i4.S(t4);
+      return t4;
+    } else if (t4.i === -1) {
+      t4.i = 0;
+      if (t4.n !== undefined) {
+        t4.n.p = t4.p;
+        if (t4.p !== undefined)
+          t4.p.n = t4.n;
+        t4.p = o3.s;
+        t4.n = undefined;
+        o3.s.n = t4;
+        o3.s = t4;
+      }
+      return t4;
+    }
+  }
+}
+function u3(i4, t4) {
+  this.v = i4;
+  this.i = 0;
+  this.n = undefined;
+  this.t = undefined;
+  this.W = t4 == null ? undefined : t4.watched;
+  this.Z = t4 == null ? undefined : t4.unwatched;
+  this.name = t4 == null ? undefined : t4.name;
+}
+u3.prototype.brand = i3;
+u3.prototype.h = function() {
+  return true;
+};
+u3.prototype.S = function(i4) {
+  var t4 = this, r3 = this.t;
+  if (r3 !== i4 && i4.e === undefined) {
+    i4.x = r3;
+    this.t = i4;
+    if (r3 !== undefined)
+      r3.e = i4;
+    else
+      n2(function() {
+        var i5;
+        (i5 = t4.W) == null || i5.call(t4);
+      });
+  }
+};
+u3.prototype.U = function(i4) {
+  var t4 = this;
+  if (this.t !== undefined) {
+    var { e: r3, x: o4 } = i4;
+    if (r3 !== undefined) {
+      r3.x = o4;
+      i4.e = undefined;
+    }
+    if (o4 !== undefined) {
+      o4.e = r3;
+      i4.x = undefined;
+    }
+    if (i4 === this.t) {
+      this.t = o4;
+      if (o4 === undefined)
+        n2(function() {
+          var i5;
+          (i5 = t4.Z) == null || i5.call(t4);
+        });
+    }
+  }
+};
+u3.prototype.subscribe = function(i4) {
+  var t4 = this;
+  return E2(function() {
+    var r3 = t4.value, n3 = o3;
+    o3 = undefined;
+    try {
+      i4(r3);
+    } finally {
+      o3 = n3;
+    }
+  }, { name: "sub" });
+};
+u3.prototype.valueOf = function() {
+  return this.value;
+};
+u3.prototype.toString = function() {
+  return this.value + "";
+};
+u3.prototype.toJSON = function() {
+  return this.value;
+};
+u3.prototype.peek = function() {
+  var i4 = o3;
+  o3 = undefined;
+  try {
+    return this.value;
+  } finally {
+    o3 = i4;
+  }
+};
+Object.defineProperty(u3.prototype, "value", { get: function() {
+  var i4 = e3(this);
+  if (i4 !== undefined)
+    i4.i = this.i;
+  return this.v;
+}, set: function(i4) {
+  if (i4 !== this.v) {
+    if (f3 > 100)
+      throw new Error("Cycle detected");
+    this.v = i4;
+    this.i++;
+    v3++;
+    s3++;
+    try {
+      for (var r3 = this.t;r3 !== undefined; r3 = r3.x)
+        r3.t.N();
+    } finally {
+      t3();
+    }
+  }
+} });
+function d2(i4, t4) {
+  return new u3(i4, t4);
+}
+function c3(i4) {
+  for (var t4 = i4.s;t4 !== undefined; t4 = t4.n)
+    if (t4.S.i !== t4.i || !t4.S.h() || t4.S.i !== t4.i)
+      return true;
+  return false;
+}
+function a3(i4) {
+  for (var t4 = i4.s;t4 !== undefined; t4 = t4.n) {
+    var r3 = t4.S.n;
+    if (r3 !== undefined)
+      t4.r = r3;
+    t4.S.n = t4;
+    t4.i = -1;
+    if (t4.n === undefined) {
+      i4.s = t4;
+      break;
+    }
+  }
+}
+function l3(i4) {
+  var t4 = i4.s, r3 = undefined;
+  while (t4 !== undefined) {
+    var o4 = t4.p;
+    if (t4.i === -1) {
+      t4.S.U(t4);
+      if (o4 !== undefined)
+        o4.n = t4.n;
+      if (t4.n !== undefined)
+        t4.n.p = o4;
+    } else
+      r3 = t4;
+    t4.S.n = t4.r;
+    if (t4.r !== undefined)
+      t4.r = undefined;
+    t4 = o4;
+  }
+  i4.s = r3;
+}
+function y3(i4, t4) {
+  u3.call(this, undefined);
+  this.x = i4;
+  this.s = undefined;
+  this.g = v3 - 1;
+  this.f = 4;
+  this.W = t4 == null ? undefined : t4.watched;
+  this.Z = t4 == null ? undefined : t4.unwatched;
+  this.name = t4 == null ? undefined : t4.name;
+}
+y3.prototype = new u3;
+y3.prototype.h = function() {
+  this.f &= -3;
+  if (1 & this.f)
+    return false;
+  if ((36 & this.f) == 32)
+    return true;
+  this.f &= -5;
+  if (this.g === v3)
+    return true;
+  this.g = v3;
+  this.f |= 1;
+  if (this.i > 0 && !c3(this)) {
+    this.f &= -2;
+    return true;
+  }
+  var i4 = o3;
+  try {
+    a3(this);
+    o3 = this;
+    var t4 = this.x();
+    if (16 & this.f || this.v !== t4 || this.i === 0) {
+      this.v = t4;
+      this.f &= -17;
+      this.i++;
+    }
+  } catch (i5) {
+    this.v = i5;
+    this.f |= 16;
+    this.i++;
+  }
+  o3 = i4;
+  l3(this);
+  this.f &= -2;
+  return true;
+};
+y3.prototype.S = function(i4) {
+  if (this.t === undefined) {
+    this.f |= 36;
+    for (var t4 = this.s;t4 !== undefined; t4 = t4.n)
+      t4.S.S(t4);
+  }
+  u3.prototype.S.call(this, i4);
+};
+y3.prototype.U = function(i4) {
+  if (this.t !== undefined) {
+    u3.prototype.U.call(this, i4);
+    if (this.t === undefined) {
+      this.f &= -33;
+      for (var t4 = this.s;t4 !== undefined; t4 = t4.n)
+        t4.S.U(t4);
+    }
+  }
+};
+y3.prototype.N = function() {
+  if (!(2 & this.f)) {
+    this.f |= 6;
+    for (var i4 = this.t;i4 !== undefined; i4 = i4.x)
+      i4.t.N();
+  }
+};
+Object.defineProperty(y3.prototype, "value", { get: function() {
+  if (1 & this.f)
+    throw new Error("Cycle detected");
+  var i4 = e3(this);
+  this.h();
+  if (i4 !== undefined)
+    i4.i = this.i;
+  if (16 & this.f)
+    throw this.v;
+  return this.v;
+} });
+function w3(i4, t4) {
+  return new y3(i4, t4);
+}
+function _2(i4) {
+  var r3 = i4.u;
+  i4.u = undefined;
+  if (typeof r3 == "function") {
+    s3++;
+    var n3 = o3;
+    o3 = undefined;
+    try {
+      r3();
+    } catch (t4) {
+      i4.f &= -2;
+      i4.f |= 8;
+      b(i4);
+      throw t4;
+    } finally {
+      o3 = n3;
+      t3();
+    }
+  }
+}
+function b(i4) {
+  for (var t4 = i4.s;t4 !== undefined; t4 = t4.n)
+    t4.S.U(t4);
+  i4.x = undefined;
+  i4.s = undefined;
+  _2(i4);
+}
+function g2(i4) {
+  if (o3 !== this)
+    throw new Error("Out-of-order effect");
+  l3(this);
+  o3 = i4;
+  this.f &= -2;
+  if (8 & this.f)
+    b(this);
+  t3();
+}
+function p3(i4, t4) {
+  this.x = i4;
+  this.u = undefined;
+  this.s = undefined;
+  this.o = undefined;
+  this.f = 32;
+  this.name = t4 == null ? undefined : t4.name;
+}
+p3.prototype.c = function() {
+  var i4 = this.S();
+  try {
+    if (8 & this.f)
+      return;
+    if (this.x === undefined)
+      return;
+    var t4 = this.x();
+    if (typeof t4 == "function")
+      this.u = t4;
+  } finally {
+    i4();
+  }
+};
+p3.prototype.S = function() {
+  if (1 & this.f)
+    throw new Error("Cycle detected");
+  this.f |= 1;
+  this.f &= -9;
+  _2(this);
+  a3(this);
+  s3++;
+  var i4 = o3;
+  o3 = this;
+  return g2.bind(this, i4);
+};
+p3.prototype.N = function() {
+  if (!(2 & this.f)) {
+    this.f |= 2;
+    this.o = h2;
+    h2 = this;
+  }
+};
+p3.prototype.d = function() {
+  this.f |= 8;
+  if (!(1 & this.f))
+    b(this);
+};
+p3.prototype.dispose = function() {
+  this.d();
+};
+function E2(i4, t4) {
+  var r3 = new p3(i4, t4);
+  try {
+    r3.c();
+  } catch (i5) {
+    r3.d();
+    throw i5;
+  }
+  var o4 = r3.d.bind(r3);
+  o4[Symbol.dispose] = o4;
+  return o4;
+}
+
+// ../../node_modules/@preact/signals/dist/signals.module.js
+var v4;
+var s4;
+function l4(i4, n3) {
+  l[i4] = n3.bind(null, l[i4] || function() {});
+}
+function d3(i4) {
+  if (s4)
+    s4();
+  s4 = i4 && i4.S();
+}
+function h3(i4) {
+  var r4 = this, f4 = i4.data, o4 = useSignal(f4);
+  o4.value = f4;
+  var e4 = T2(function() {
+    var i5 = r4.__v;
+    while (i5 = i5.__)
+      if (i5.__c) {
+        i5.__c.__$f |= 4;
+        break;
+      }
+    r4.__$u.c = function() {
+      var i6, t4 = r4.__$u.S(), f5 = e4.value;
+      t4();
+      if (t(f5) || ((i6 = r4.base) == null ? undefined : i6.nodeType) !== 3) {
+        r4.__$f |= 1;
+        r4.setState({});
+      } else
+        r4.base.data = f5;
+    };
+    return w3(function() {
+      var i6 = o4.value.value;
+      return i6 === 0 ? 0 : i6 === true ? "" : i6 || "";
+    });
+  }, []);
+  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() {
+  return { data: this };
+} }, __b: { configurable: true, value: 1 } });
+l4("__b", function(i4, r4) {
+  if (typeof r4.type == "string") {
+    var n3, t4 = r4.props;
+    for (var f4 in t4)
+      if (f4 !== "children") {
+        var o4 = t4[f4];
+        if (o4 instanceof u3) {
+          if (!n3)
+            r4.__np = n3 = {};
+          n3[f4] = o4;
+          t4[f4] = o4.peek();
+        }
+      }
+  }
+  i4(r4);
+});
+l4("__r", function(i4, r4) {
+  d3();
+  var n3, t4 = r4.__c;
+  if (t4) {
+    t4.__$f &= -2;
+    if ((n3 = t4.__$u) === undefined)
+      t4.__$u = n3 = function(i5) {
+        var r5;
+        E2(function() {
+          r5 = this;
+        });
+        r5.c = function() {
+          t4.__$f |= 1;
+          t4.setState({});
+        };
+        return r5;
+      }();
+  }
+  v4 = t4;
+  d3(n3);
+  i4(r4);
+});
+l4("__e", function(i4, r4, n3, t4) {
+  d3();
+  v4 = undefined;
+  i4(r4, n3, t4);
+});
+l4("diffed", function(i4, r4) {
+  d3();
+  v4 = undefined;
+  var n3;
+  if (typeof r4.type == "string" && (n3 = r4.__e)) {
+    var { __np: t4, props: f4 } = r4;
+    if (t4) {
+      var o4 = n3.U;
+      if (o4)
+        for (var e4 in o4) {
+          var u4 = o4[e4];
+          if (u4 !== undefined && !(e4 in t4)) {
+            u4.d();
+            o4[e4] = undefined;
+          }
+        }
+      else
+        n3.U = o4 = {};
+      for (var a4 in t4) {
+        var c4 = o4[a4], s5 = t4[a4];
+        if (c4 === undefined) {
+          c4 = p4(n3, a4, s5, f4);
+          o4[a4] = c4;
+        } else
+          c4.o(s5, f4);
+      }
+    }
+  }
+  i4(r4);
+});
+function p4(i4, r4, n3, t4) {
+  var f4 = r4 in i4 && i4.ownerSVGElement === undefined, o4 = d2(n3);
+  return { o: function(i5, r5) {
+    o4.value = i5;
+    t4 = r5;
+  }, d: E2(function() {
+    var n4 = o4.value.value;
+    if (t4[r4] !== n4) {
+      t4[r4] = n4;
+      if (f4)
+        i4[r4] = n4;
+      else if (n4)
+        i4.setAttribute(r4, n4);
+      else
+        i4.removeAttribute(r4);
+    }
+  }) };
+}
+l4("unmount", function(i4, r4) {
+  if (typeof r4.type == "string") {
+    var n3 = r4.__e;
+    if (n3) {
+      var t4 = n3.U;
+      if (t4) {
+        n3.U = undefined;
+        for (var f4 in t4) {
+          var o4 = t4[f4];
+          if (o4)
+            o4.d();
+        }
+      }
+    }
+  } else {
+    var e4 = r4.__c;
+    if (e4) {
+      var u4 = e4.__$u;
+      if (u4) {
+        e4.__$u = undefined;
+        u4.d();
+      }
+    }
+  }
+  i4(r4);
+});
+l4("__h", function(i4, r4, n3, t4) {
+  if (t4 < 3 || t4 === 9)
+    r4.__$f |= 2;
+  i4(r4, n3, t4);
+});
+x.prototype.shouldComponentUpdate = function(i4, r4) {
+  var n3 = this.__$u, t4 = n3 && n3.s !== undefined;
+  for (var f4 in r4)
+    return true;
+  if (this.__f || typeof this.u == "boolean" && this.u === true) {
+    if (!(t4 || 2 & this.__$f || 4 & this.__$f))
+      return true;
+    if (1 & this.__$f)
+      return true;
+  } else {
+    if (!(t4 || 4 & this.__$f))
+      return true;
+    if (3 & this.__$f)
+      return true;
+  }
+  for (var o4 in i4)
+    if (o4 !== "__source" && i4[o4] !== this.props[o4])
+      return true;
+  for (var e4 in this.props)
+    if (!(e4 in i4))
+      return true;
+  return false;
+};
+function useSignal(i4) {
+  return T2(function() {
+    return d2(i4);
+  }, []);
+}
+function useSignalEffect(i4) {
+  var r4 = A2(i4);
+  r4.current = i4;
+  y2(function() {
+    return E2(function() {
+      return r4.current();
+    });
+  }, []);
+}
+
+// src/debugui/state.ts
+var isVisible = d2(false);
+var netStatus = d2({
+  ourId: null,
+  remoteId: null,
+  rtt: null,
+  peers: []
+});
+var logs = d2([]);
+var debugState = {
+  isVisible,
+  netStatus,
+  logs,
+  peer: w3(() => netStatus.value.peers[0] ?? null),
+  advantage: w3(() => {
+    const peer = netStatus.value.peers[0];
+    return peer ? peer.seq - peer.ack : null;
+  })
+};
+function addLog(log) {
+  debugState.logs.value = [...debugState.logs.value, log];
+}
+function updatePeer(id, updates) {
+  const peers = [...debugState.netStatus.value.peers];
+  const idx = peers.findIndex((p5) => p5.id === id);
+  const existing = peers[idx];
+  if (idx >= 0 && existing) {
+    peers[idx] = {
+      id: updates.id ?? existing.id,
+      nickname: updates.nickname ?? existing.nickname,
+      ack: updates.ack ?? existing.ack,
+      seq: updates.seq ?? existing.seq,
+      lastPacketTime: updates.lastPacketTime ?? existing.lastPacketTime
+    };
+    debugState.netStatus.value = {
+      ...debugState.netStatus.value,
+      peers
+    };
+  }
+}
+function addPeer(peer) {
+  debugState.netStatus.value = {
+    ...debugState.netStatus.value,
+    peers: [...debugState.netStatus.value.peers, peer]
+  };
+}
+function removePeer(id) {
+  debugState.netStatus.value = {
+    ...debugState.netStatus.value,
+    peers: debugState.netStatus.value.peers.filter((p5) => p5.id !== id)
+  };
+}
+function setLocalId(id) {
+  debugState.netStatus.value = {
+    ...debugState.netStatus.value,
+    ourId: id
+  };
+}
+function setRemoteId(id) {
+  debugState.netStatus.value = {
+    ...debugState.netStatus.value,
+    remoteId: id
+  };
+}
+function clearLogs() {
+  debugState.logs.value = [];
+}
+function resetState() {
+  debugState.isVisible.value = false;
+  debugState.logs.value = [];
+  debugState.netStatus.value = {
+    ourId: null,
+    remoteId: null,
+    rtt: null,
+    peers: []
+  };
+}
+// ../../node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js
+var f4 = 0;
+function u4(e4, t4, n3, o4, i4, u5) {
+  t4 || (t4 = {});
+  var a4, c4, p5 = t4;
+  if ("ref" in p5)
+    for (c4 in p5 = {}, t4)
+      c4 == "ref" ? a4 = t4[c4] : p5[c4] = t4[c4];
+  var l5 = { type: e4, props: p5, key: n3, ref: a4, __k: null, __: null, __b: 0, __e: null, __c: null, constructor: undefined, __v: --f4, __i: -1, __u: 0, __source: i4, __self: u5 };
+  if (typeof e4 == "function" && (a4 = e4.defaultProps))
+    for (c4 in a4)
+      p5[c4] === undefined && (p5[c4] = a4[c4]);
+  return l.vnode && l.vnode(l5), l5;
+}
+
+// src/debugui/components/Stats.tsx
+function Stats() {
+  const peer = debugState.peer.value;
+  const netStatus2 = debugState.netStatus.value;
+  const lastPacketTime = useSignal(null);
+  useSignalEffect(() => {
+    const p5 = debugState.peer.value;
+    if (!p5) {
+      lastPacketTime.value = null;
+      return;
+    }
+    const update = () => {
+      lastPacketTime.value = (performance.now() - p5.lastPacketTime).toFixed(0);
+    };
+    update();
+    const id = setInterval(update, 100);
+    return () => clearInterval(id);
+  });
+  if (!peer) {
+    return /* @__PURE__ */ u4("div", {
+      className: "stats-panel",
+      children: [
+        /* @__PURE__ */ u4("h3", {
+          children: "Network Stats"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ u4("p", {
+          children: "No peer connected"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ u4("div", {
+    className: "stats-panel",
+    children: [
+      /* @__PURE__ */ u4("h3", {
+        children: [
+          "Network Stats - ",
+          peer.nickname
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ u4("table", {
+        children: /* @__PURE__ */ u4("tbody", {
+          children: [
+            /* @__PURE__ */ u4("tr", {
+              children: [
+                /* @__PURE__ */ u4("td", {
+                  children: "Our Peer ID"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u4("td", {
+                  children: netStatus2.ourId
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u4("tr", {
+              children: [
+                /* @__PURE__ */ u4("td", {
+                  children: "Remote Peer ID"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u4("td", {
+                  children: netStatus2.remoteId
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u4("tr", {
+              children: [
+                /* @__PURE__ */ u4("td", {
+                  children: "Advantage"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u4("td", {
+                  children: peer.seq - peer.ack
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u4("tr", {
+              children: [
+                /* @__PURE__ */ u4("td", {
+                  children: "Current Seq"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u4("td", {
+                  children: peer.seq
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u4("tr", {
+              children: [
+                /* @__PURE__ */ u4("td", {
+                  children: "Current Ack"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u4("td", {
+                  children: peer.ack
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u4("tr", {
+              children: [
+                /* @__PURE__ */ u4("td", {
+                  children: "Time since last packet"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ u4("td", {
+                  children: [
+                    lastPacketTime.value,
+                    "ms"
+                  ]
+                }, undefined, true, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/debugui/hooks/useAutoScroll.ts
+function useAutoScroll(threshold = 80) {
+  const containerRef = A2(null);
+  const autoScrollRef = A2(true);
+  const onScroll = q2(() => {
+    const el = containerRef.current;
+    if (!el)
+      return;
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    autoScrollRef.current = distanceFromBottom < threshold;
+  }, [threshold]);
+  const scrollToBottom = q2(() => {
+    const el = containerRef.current;
+    if (!el)
+      return;
+    requestAnimationFrame(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+  }, []);
+  const onContentUpdated = q2(() => {
+    if (autoScrollRef.current) {
+      scrollToBottom();
+    }
+  }, [scrollToBottom]);
+  y2(() => {
+    const el = containerRef.current;
+    if (el) {
+      el.addEventListener("scroll", onScroll);
+      return () => el.removeEventListener("scroll", onScroll);
+    }
+  }, [onScroll]);
+  const setRef = q2((el) => {
+    if (containerRef.current) {
+      containerRef.current.removeEventListener("scroll", onScroll);
+    }
+    containerRef.current = el;
+    if (el) {
+      el.addEventListener("scroll", onScroll);
+    }
+  }, [onScroll]);
+  return {
+    containerRef: setRef,
+    onContentUpdated,
+    scrollToBottom
+  };
+}
+
+// src/debugui/components/Logs.tsx
+function formatTimestamp(ms) {
+  const date = new Date(ms);
+  const hours = date.getHours() % 12;
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const seconds = date.getSeconds().toString().padStart(2, "0");
+  const millis = date.getMilliseconds().toString().padStart(3, "0");
+  return `${hours}:${minutes}:${seconds}.${millis}`;
+}
+function Logs() {
+  const { containerRef, onContentUpdated } = useAutoScroll(80);
+  const logs2 = debugState.logs.value;
+  useSignalEffect(() => {
+    const _3 = debugState.logs.value.length;
+    onContentUpdated();
+  });
+  return /* @__PURE__ */ u4("ul", {
+    className: "logs-list",
+    ref: containerRef,
+    children: logs2.map((log, index) => /* @__PURE__ */ u4(LogEntry, {
+      log
+    }, index, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function LogEntry({ log }) {
+  return /* @__PURE__ */ u4("li", {
+    className: `log ${log.source}`,
+    children: /* @__PURE__ */ u4("div", {
+      className: "contents",
+      children: [
+        /* @__PURE__ */ u4("h3", {
+          className: log.source,
+          children: [
+            /* @__PURE__ */ u4("span", {
+              className: "source",
+              children: [
+                log.source,
+                " | "
+              ]
+            }, undefined, true, undefined, this),
+            log.match_frame != null ? /* @__PURE__ */ u4("span", {
+              className: "frame-number",
+              children: [
+                "m",
+                log.match_frame,
+                " | "
+              ]
+            }, undefined, true, undefined, this) : /* @__PURE__ */ u4("span", {
+              className: "frame-number",
+              children: [
+                "f",
+                log.frame_number,
+                " | "
+              ]
+            }, undefined, true, undefined, this),
+            /* @__PURE__ */ u4("span", {
+              className: "timestamp",
+              children: formatTimestamp(log.timestamp)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ u4("div", {
+          className: "content",
+          children: [
+            log.label && /* @__PURE__ */ u4("p", {
+              children: log.label
+            }, undefined, false, undefined, this),
+            log.json && /* @__PURE__ */ u4("pre", {
+              className: "json",
+              children: JSON.stringify(log.json, null, 2)
+            }, undefined, false, undefined, this),
+            log.packet && /* @__PURE__ */ u4("div", {
+              children: [
+                log.packet.size,
+                " bytes"
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/debugui/components/DebugToggle.tsx
+function DebugToggle({ hotkey = "Escape" }) {
+  const isVisible2 = debugState.isVisible.value;
+  const toggle = () => {
+    debugState.isVisible.value = !debugState.isVisible.value;
+  };
+  return /* @__PURE__ */ u4("button", {
+    className: "debug-toggle",
+    onClick: toggle,
+    onMouseDown: (e4) => e4.stopPropagation(),
+    onMouseUp: (e4) => e4.stopPropagation(),
+    title: isVisible2 ? `Hide debug (${hotkey})` : `Show debug (${hotkey})`,
+    children: isVisible2 ? "✕" : "⚙"
+  }, undefined, false, undefined, this);
+}
+
+// src/debugui/components/Root.tsx
+function Root({ canvas, hotkey = "Escape" }) {
+  const isVisible2 = debugState.isVisible.value;
+  return /* @__PURE__ */ u4(k, {
+    children: [
+      isVisible2 ? /* @__PURE__ */ u4("main", {
+        className: "layout",
+        children: [
+          /* @__PURE__ */ u4("section", {
+            className: "game",
+            children: /* @__PURE__ */ u4(GameCanvas, {
+              canvas
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ u4("section", {
+            className: "stats",
+            children: /* @__PURE__ */ u4(Stats, {}, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ u4("section", {
+            className: "logs",
+            children: /* @__PURE__ */ u4(Logs, {}, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : /* @__PURE__ */ u4("main", {
+        className: "fullscreen",
+        children: /* @__PURE__ */ u4(GameCanvas, {
+          canvas
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ u4(DebugToggle, {
+        hotkey
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function GameCanvas({ canvas }) {
+  const containerRef = A2(null);
+  y2(() => {
+    const container = containerRef.current;
+    if (container && !container.contains(canvas)) {
+      container.appendChild(canvas);
+    }
+    return () => {};
+  }, [canvas]);
+  return /* @__PURE__ */ u4("div", {
+    className: "canvas-container",
+    ref: containerRef
+  }, undefined, false, undefined, this);
+}
+
+// src/debugui/styles.ts
+var styles = `
+/* Reset for shadow DOM */
+* {
+  box-sizing: border-box;
+}
+
+/* Layout */
+.fullscreen {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.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;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+}
+
+.game {
+  grid-area: game;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.stats {
+  grid-area: stats;
+  background-color: #f0f0f0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.logs {
+  grid-area: logs;
+  background-color: #f0f0f0;
+  padding: 1rem;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Canvas container */
+.canvas-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.canvas-container canvas {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Debug toggle button */
+.debug-toggle {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.debug-toggle:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+/* Stats panel */
+.stats-panel {
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  padding: 12px;
+  border-radius: 8px;
+  font-family: monospace;
+  font-size: 14px;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.stats-panel h3 {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stats-panel table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.stats-panel tr {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.stats-panel tr:last-child {
+  border-bottom: none;
+}
+
+.stats-panel td {
+  padding: 4px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-panel td:first-child {
+  opacity: 0.7;
+  width: 60%;
+}
+
+.stats-panel td:last-child {
+  text-align: right;
+  font-weight: 600;
+  width: 40%;
+}
+
+.stats-panel p {
+  margin: 0;
+  opacity: 0.7;
+}
+
+/* Logs panel */
+.logs-list {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+}
+
+.logs-list li {
+  margin: 0 0 24px 0;
+  list-style: none;
+}
+
+.logs-list h3 {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+}
+
+.logs-list .ws {
+  color: darkolivegreen;
+}
+
+.logs-list .webrtc {
+  color: darkmagenta;
+}
+
+.logs-list .rollback {
+  color: darkblue;
+}
+
+.logs-list .local {
+  color: #333;
+}
+
+.logs-list .content {
+  font-size: 16px;
+}
+
+.logs-list p {
+  margin: 4px 0;
+}
+
+.logs-list pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  background-color: oldlace;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px inset lavender;
+}
+`;
+
+// src/debugui/DebugUi.ts
+class DebugUi {
+  #host;
+  #shadow;
+  #canvas;
+  #mountPoint;
+  #cleanup = null;
+  #hotkey;
+  constructor(options = {}) {
+    this.#hotkey = options.hotkey ?? "Escape";
+    const container = options.container ?? document.body;
+    const initiallyVisible = options.initiallyVisible ?? new URLSearchParams(window.location.search).has("debug");
+    this.#host = document.createElement("bloop-debug-ui");
+    this.#host.style.cssText = "display:block;width:100%;height:100%;position:absolute;top:0;left:0;";
+    this.#shadow = this.#host.attachShadow({ mode: "open" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = styles;
+    this.#shadow.appendChild(styleEl);
+    this.#mountPoint = document.createElement("div");
+    this.#mountPoint.id = "debug-root";
+    this.#mountPoint.style.cssText = "width:100%;height:100%;";
+    this.#shadow.appendChild(this.#mountPoint);
+    debugState.isVisible.value = initiallyVisible;
+    this.#canvas = document.createElement("canvas");
+    this.#render();
+    container.appendChild(this.#host);
+    this.#cleanup = this.#setupHotkey();
+    debugState.isVisible.subscribe(() => {
+      this.#render();
+    });
+  }
+  #render() {
+    G(Root({ canvas: this.#canvas, hotkey: this.#hotkey }), this.#mountPoint);
+  }
+  #setupHotkey() {
+    const handler = (e4) => {
+      if (e4.key === this.#hotkey) {
+        debugState.isVisible.value = !debugState.isVisible.value;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }
+  get canvas() {
+    return this.#canvas;
+  }
+  get state() {
+    return debugState;
+  }
+  get isVisible() {
+    return debugState.isVisible.value;
+  }
+  set isVisible(value) {
+    debugState.isVisible.value = value;
+  }
+  unmount() {
+    this.#cleanup?.();
+    G(null, this.#mountPoint);
+    this.#host.remove();
+  }
+}
 // src/App.ts
 var DEFAULT_BROKER_URL = "wss://webrtc-divine-glade-8064.fly.dev/ws";
 async function start(opts) {
@@ -3368,7 +5083,8 @@ async function start(opts) {
     });
     opts.sim = sim;
   }
-  const app = new App(opts.sim, opts.game, opts.brokerUrl ?? DEFAULT_BROKER_URL);
+  const debugOpts = opts.debugUi ? typeof opts.debugUi === "boolean" ? {} : opts.debugUi : undefined;
+  const app = new App(opts.sim, opts.game, opts.brokerUrl ?? DEFAULT_BROKER_URL, debugOpts);
   return app;
 }
 
@@ -3379,10 +5095,14 @@ class App {
   #rafHandle = null;
   #unsubscribe = null;
   #now = performance.now();
-  constructor(sim, game, brokerUrl) {
+  #debugUi = null;
+  constructor(sim, game, brokerUrl, debugUiOpts) {
     this.#sim = sim;
     this.game = game;
     this.brokerUrl = brokerUrl;
+    if (debugUiOpts) {
+      this.#initDebugUi(debugUiOpts);
+    }
     this.game.hooks.beforeFrame = (frame) => {
       logger.frameNumber = this.#sim.time.frame;
       logger.matchFrame = this.#sim.wasm.get_match_frame();
@@ -3396,6 +5116,18 @@ class App {
   set sim(sim) {
     this.#sim = sim;
   }
+  #initDebugUi(opts = {}) {
+    if (this.#debugUi)
+      return this.#debugUi;
+    this.#debugUi = new DebugUi(opts);
+    return this.#debugUi;
+  }
+  get debugUi() {
+    return this.#debugUi;
+  }
+  get canvas() {
+    return this.#debugUi?.canvas ?? null;
+  }
   joinRoom(roomId, callbacks) {
     joinRoom(this.brokerUrl, roomId, callbacks);
   }
@@ -3469,8 +5201,8 @@ class App {
       if (!this.sim.isPaused) {
         try {
           this.afterFrame.notify(this.sim.time.frame);
-        } catch (e) {
-          console.error("Error in afterFrame listeners:", e);
+        } catch (e4) {
+          console.error("Error in afterFrame listeners:", e4);
         }
       }
       this.#now = performance.now();
@@ -3498,6 +5230,7 @@ class App {
     this.sim.unmount();
     this.beforeFrame.unsubscribeAll();
     this.afterFrame.unsubscribeAll();
+    this.#debugUi?.unmount();
   }
   async acceptHmr(module, opts) {
     const game = module.game ?? module;
@@ -3545,8 +5278,9 @@ export {
   start,
   logger,
   PacketType,
+  exports_mod as Debug,
   App
 };
 
-//# debugId=9F8E122AB076111B64756E2164756E21
+//# debugId=12B4CFB64532934564756E2164756E21
 //# sourceMappingURL=mod.js.map