p2p-lockstep-kit-ui 0.1.0 → 0.1.1

package/dist/index.js

@@ -112,7 +112,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}
 	render() {
 		let { open: e } = this.#e;
-		this.className = e ? "fixed inset-0 z-50 block" : "hidden", this.innerHTML = "\n      <div data-overlay class=\"absolute inset-0 bg-[rgba(7,6,4,0.76)] backdrop-blur-sm\"></div>\n      <div class=\"relative flex min-h-full items-end justify-center p-4 sm:items-center\">\n        <section class=\"lock-panel w-full max-w-md rounded-[2rem] p-6\">\n          <div class=\"space-y-3\">\n            <p class=\"text-[0.72rem] uppercase tracking-[0.28em] text-[var(--lock-bronze-bright)]\">Action Required</p>\n            <h3 data-title class=\"lock-title text-2xl font-semibold text-[var(--lock-paper)]\"></h3>\n            <p data-description class=\"text-sm leading-6 text-[var(--lock-muted)]\"></p>\n          </div>\n\n          <div class=\"mt-6 grid gap-3 sm:grid-cols-2\">\n            <button\n              type=\"button\"\n              data-action=\"confirm\"\n              class=\"lock-primary inline-flex items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition\"\n            >\n              <span data-confirm-label></span>\n            </button>\n            <button\n              type=\"button\"\n              data-action=\"cancel\"\n              class=\"lock-secondary inline-flex items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition\"\n            >\n              <span data-cancel-label></span>\n            </button>\n          </div>\n        </section>\n      </div>\n    ", p(this, "[data-title]", this.#e.title), p(this, "[data-description]", this.#e.description), p(this, "[data-confirm-label]", this.#e.confirmLabel), p(this, "[data-cancel-label]", this.#e.cancelLabel);
+		this.className = e ? "fixed inset-0 z-50 block" : "hidden", this.innerHTML = "\n      <div data-overlay class=\"absolute inset-0 bg-[var(--lock-overlay)] backdrop-blur-sm\"></div>\n      <div class=\"relative flex min-h-full items-end justify-center p-4 sm:items-center\">\n        <section class=\"lock-panel w-full max-w-md rounded-[2rem] p-6\">\n          <div class=\"space-y-3\">\n            <p class=\"text-[0.72rem] uppercase tracking-[0.28em] text-[var(--lock-bronze-bright)]\">Action Required</p>\n            <h3 data-title class=\"lock-title text-2xl font-semibold text-[var(--lock-paper)]\"></h3>\n            <p data-description class=\"text-sm leading-6 text-[var(--lock-muted)]\"></p>\n          </div>\n\n          <div class=\"mt-6 grid gap-3 sm:grid-cols-2\">\n            <button\n              type=\"button\"\n              data-action=\"confirm\"\n              class=\"lock-primary inline-flex items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition\"\n            >\n              <span data-confirm-label></span>\n            </button>\n            <button\n              type=\"button\"\n              data-action=\"cancel\"\n              class=\"lock-secondary inline-flex items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition\"\n            >\n              <span data-cancel-label></span>\n            </button>\n          </div>\n        </section>\n      </div>\n    ", p(this, "[data-title]", this.#e.title), p(this, "[data-description]", this.#e.description), p(this, "[data-confirm-label]", this.#e.confirmLabel), p(this, "[data-cancel-label]", this.#e.cancelLabel);
 	}
 	#n = (e) => {
 		let t = e.target;
@@ -349,7 +349,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 		return i;
 	};
-})), w = /* @__PURE__ */ o(((e) => {
+})), te = /* @__PURE__ */ o(((e) => {
 	var t = y(), n = [
 		1,
 		1,
@@ -690,7 +690,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			default: return;
 		}
 	};
-})), T = /* @__PURE__ */ o(((e) => {
+})), w = /* @__PURE__ */ o(((e) => {
 	var t = new Uint8Array(512), n = new Uint8Array(256);
 	(function() {
 		let e = 1;
@@ -704,8 +704,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}, e.mul = function(e, r) {
 		return e === 0 || r === 0 ? 0 : t[n[e] + n[r]];
 	};
-})), te = /* @__PURE__ */ o(((e) => {
-	var t = T();
+})), ne = /* @__PURE__ */ o(((e) => {
+	var t = w();
 	e.mul = function(e, n) {
 		let r = new Uint8Array(e.length + n.length - 1);
 		for (let i = 0; i < e.length; i++) for (let a = 0; a < n.length; a++) r[i + a] ^= t.mul(e[i], n[a]);
@@ -725,8 +725,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		for (let i = 0; i < n; i++) r = e.mul(r, new Uint8Array([1, t.exp(i)]));
 		return r;
 	};
-})), ne = /* @__PURE__ */ o(((e, t) => {
-	var n = te();
+})), re = /* @__PURE__ */ o(((e, t) => {
+	var n = ne();
 	function r(e) {
 		this.genPoly = void 0, this.degree = e, this.degree && this.initialize(this.degree);
 	}
@@ -743,11 +743,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 		return r;
 	}, t.exports = r;
-})), E = /* @__PURE__ */ o(((e) => {
+})), T = /* @__PURE__ */ o(((e) => {
 	e.isValid = function(e) {
 		return !isNaN(e) && e >= 1 && e <= 40;
 	};
-})), D = /* @__PURE__ */ o(((e) => {
+})), E = /* @__PURE__ */ o(((e) => {
 	var t = "[0-9]+", n = "[A-Z $%*+\\-./:]+", r = "(?:[u3000-u303F]|[u3040-u309F]|[u30A0-u30FF]|[uFF00-uFFEF]|[u4E00-u9FAF]|[u2605-u2606]|[u2190-u2195]|u203B|[u2010u2015u2018u2019u2025u2026u201Cu201Du2225u2260]|[u0391-u0451]|[u00A7u00A8u00B1u00B4u00D7u00F7])+";
 	r = r.replace(/u/g, "\\u");
 	var i = "(?:(?![A-Z0-9 $%*+\\-./:]|" + r + ")(?:.|[\r\n]))+";
@@ -760,8 +760,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}, e.testAlphanumeric = function(e) {
 		return s.test(e);
 	};
-})), O = /* @__PURE__ */ o(((e) => {
-	var t = E(), n = D();
+})), D = /* @__PURE__ */ o(((e) => {
+	var t = T(), n = E();
 	e.NUMERIC = {
 		id: "Numeric",
 		bit: 1,
@@ -824,8 +824,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			return n;
 		}
 	};
-})), re = /* @__PURE__ */ o(((e) => {
-	var t = v(), n = w(), r = y(), i = O(), a = E(), o = 7973, s = t.getBCHDigit(o);
+})), ie = /* @__PURE__ */ o(((e) => {
+	var t = v(), n = te(), r = y(), i = D(), a = T(), o = 7973, s = t.getBCHDigit(o);
 	function c(t, n, r) {
 		for (let i = 1; i <= 40; i++) if (n <= e.getCapacity(i, r, t)) return i;
 	}
@@ -871,15 +871,15 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		for (; t.getBCHDigit(n) - s >= 0;) n ^= o << t.getBCHDigit(n) - s;
 		return e << 12 | n;
 	};
-})), ie = /* @__PURE__ */ o(((e) => {
+})), ae = /* @__PURE__ */ o(((e) => {
 	var t = v(), n = 1335, r = 21522, i = t.getBCHDigit(n);
 	e.getEncodedBits = function(e, a) {
 		let o = e.bit << 3 | a, s = o << 10;
 		for (; t.getBCHDigit(s) - i >= 0;) s ^= n << t.getBCHDigit(s) - i;
 		return (o << 10 | s) ^ r;
 	};
-})), ae = /* @__PURE__ */ o(((e, t) => {
-	var n = O();
+})), oe = /* @__PURE__ */ o(((e, t) => {
+	var n = D();
 	function r(e) {
 		this.mode = n.NUMERIC, this.data = e.toString();
 	}
@@ -895,8 +895,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		let i = this.data.length - t;
 		i > 0 && (n = this.data.substr(t), r = parseInt(n, 10), e.put(r, i * 3 + 1));
 	}, t.exports = r;
-})), oe = /* @__PURE__ */ o(((e, t) => {
-	var n = O(), r = /* @__PURE__ */ "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:".split("");
+})), se = /* @__PURE__ */ o(((e, t) => {
+	var n = D(), r = /* @__PURE__ */ "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:".split("");
 	function i(e) {
 		this.mode = n.ALPHANUMERIC, this.data = e;
 	}
@@ -914,8 +914,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 		this.data.length % 2 && e.put(r.indexOf(this.data[t]), 6);
 	}, t.exports = i;
-})), se = /* @__PURE__ */ o(((e, t) => {
-	var n = O();
+})), ce = /* @__PURE__ */ o(((e, t) => {
+	var n = D();
 	function r(e) {
 		this.mode = n.BYTE, typeof e == "string" ? this.data = new TextEncoder().encode(e) : this.data = new Uint8Array(e);
 	}
@@ -928,8 +928,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}, r.prototype.write = function(e) {
 		for (let t = 0, n = this.data.length; t < n; t++) e.put(this.data[t], 8);
 	}, t.exports = r;
-})), ce = /* @__PURE__ */ o(((e, t) => {
-	var n = O(), r = v();
+})), le = /* @__PURE__ */ o(((e, t) => {
+	var n = D(), r = v();
 	function i(e) {
 		this.mode = n.KANJI, this.data = e;
 	}
@@ -949,7 +949,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			n = (n >>> 8 & 255) * 192 + (n & 255), e.put(n, 13);
 		}
 	}, t.exports = i;
-})), le = /* @__PURE__ */ o(((e, t) => {
+})), ue = /* @__PURE__ */ o(((e, t) => {
 	var n = {
 		single_source_shortest_paths: function(e, t, r) {
 			var i = {}, a = {};
@@ -1002,8 +1002,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}
 	};
 	t !== void 0 && (t.exports = n);
-})), ue = /* @__PURE__ */ o(((e) => {
-	var t = O(), n = ae(), r = oe(), i = se(), a = ce(), o = D(), s = v(), c = le();
+})), de = /* @__PURE__ */ o(((e) => {
+	var t = D(), n = oe(), r = se(), i = ce(), a = le(), o = E(), s = v(), c = ue();
 	function l(e) {
 		return unescape(encodeURIComponent(e)).length;
 	}
@@ -1130,8 +1130,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}, e.rawSplit = function(t) {
 		return e.fromArray(d(t, s.isKanjiModeEnabled()));
 	};
-})), de = /* @__PURE__ */ o(((e) => {
-	var t = v(), n = y(), r = b(), i = x(), a = S(), o = C(), s = ee(), c = w(), l = ne(), u = re(), d = ie(), f = O(), p = ue();
+})), fe = /* @__PURE__ */ o(((e) => {
+	var t = v(), n = y(), r = b(), i = x(), a = S(), o = C(), s = ee(), c = te(), l = re(), u = ie(), d = ae(), f = D(), p = de();
 	function m(e, t) {
 		let n = e.size, r = o.getPositions(t);
 		for (let t = 0; t < r.length; t++) {
@@ -1157,12 +1157,12 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		let n = e.size, r = u.getEncodedBits(t), i, a, o;
 		for (let t = 0; t < 18; t++) i = Math.floor(t / 3), a = t % 3 + n - 8 - 3, o = (r >> t & 1) == 1, e.set(i, a, o, !0), e.set(a, i, o, !0);
 	}
-	function T(e, t, n) {
+	function w(e, t, n) {
 		let r = e.size, i = d.getEncodedBits(t, n), a, o;
 		for (a = 0; a < 15; a++) o = (i >> a & 1) == 1, a < 6 ? e.set(a, 8, o, !0) : a < 8 ? e.set(a + 1, 8, o, !0) : e.set(r - 15 + a, 8, o, !0), a < 8 ? e.set(8, r - a - 1, o, !0) : a < 9 ? e.set(8, 15 - a - 1 + 1, o, !0) : e.set(8, 15 - a - 1, o, !0);
 		e.set(r - 8, 8, 1, !0);
 	}
-	function te(e, t) {
+	function ne(e, t) {
 		let n = e.size, r = -1, i = n - 1, a = 7, o = 0;
 		for (let s = n - 1; s > 0; s -= 2) for (s === 6 && s--;;) {
 			for (let n = 0; n < 2; n++) if (!e.isReserved(i, s - n)) {
@@ -1175,7 +1175,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 		}
 	}
-	function E(e, n, i) {
+	function T(e, n, i) {
 		let a = new r();
 		i.forEach(function(t) {
 			a.put(t.mode.bit, 4), a.put(t.getLength(), f.getCharCountIndicator(t.mode, e)), t.write(a);
@@ -1184,9 +1184,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		for (a.getLengthInBits() + 4 <= o && a.put(0, 4); a.getLengthInBits() % 8 != 0;) a.putBit(0);
 		let s = (o - a.getLengthInBits()) / 8;
 		for (let e = 0; e < s; e++) a.put(e % 2 ? 17 : 236, 8);
-		return D(a, e, n);
+		return E(a, e, n);
 	}
-	function D(e, n, r) {
+	function E(e, n, r) {
 		let i = t.getSymbolTotalCodewords(n), a = i - c.getTotalCodewordsCount(n, r), o = c.getBlocksCount(n, r), s = o - i % o, u = Math.floor(i / o), d = Math.floor(a / o), f = d + 1, p = u - d, m = new l(p), h = 0, g = Array(o), _ = Array(o), v = 0, y = new Uint8Array(e.buffer);
 		for (let e = 0; e < o; e++) {
 			let t = e < s ? d : f;
@@ -1197,7 +1197,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		for (S = 0; S < p; S++) for (C = 0; C < o; C++) b[x++] = _[C][S];
 		return b;
 	}
-	function ae(e, n, r, a) {
+	function oe(e, n, r, a) {
 		let o;
 		if (Array.isArray(e)) o = p.fromArray(e);
 		else if (typeof e == "string") {
@@ -1212,8 +1212,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		if (!c) throw Error("The amount of data is too big to be stored in a QR Code");
 		if (!n) n = c;
 		else if (n < c) throw Error("\nThe chosen QR Code version cannot contain this amount of data.\nMinimum version required to store current data is: " + c + ".\n");
-		let l = E(n, r, o), d = new i(t.getSymbolSize(n));
-		return m(d, n), h(d), g(d, n), T(d, r, 0), n >= 7 && _(d, n), te(d, l), isNaN(a) && (a = s.getBestMask(d, T.bind(null, d, r))), s.applyMask(a, d), T(d, r, a), {
+		let l = T(n, r, o), d = new i(t.getSymbolSize(n));
+		return m(d, n), h(d), g(d, n), w(d, r, 0), n >= 7 && _(d, n), ne(d, l), isNaN(a) && (a = s.getBestMask(d, w.bind(null, d, r))), s.applyMask(a, d), w(d, r, a), {
 			modules: d,
 			version: n,
 			errorCorrectionLevel: r,
@@ -1224,9 +1224,9 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	e.create = function(e, r) {
 		if (e === void 0 || e === "") throw Error("No input text");
 		let i = n.M, a, o;
-		return r !== void 0 && (i = n.from(r.errorCorrectionLevel, n.M), a = u.from(r.version), o = s.from(r.maskPattern), r.toSJISFunc && t.setToSJISFunction(r.toSJISFunc)), ae(e, a, i, o);
+		return r !== void 0 && (i = n.from(r.errorCorrectionLevel, n.M), a = u.from(r.version), o = s.from(r.maskPattern), r.toSJISFunc && t.setToSJISFunction(r.toSJISFunc)), oe(e, a, i, o);
 	};
-})), fe = /* @__PURE__ */ o(((e) => {
+})), pe = /* @__PURE__ */ o(((e) => {
 	function t(e) {
 		if (typeof e == "number" && (e = e.toString()), typeof e != "string") throw Error("Color should be defined as hex string");
 		let t = e.slice().replace("#", "").split("");
@@ -1273,8 +1273,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			t[u++] = d.r, t[u++] = d.g, t[u++] = d.b, t[u] = d.a;
 		}
 	};
-})), pe = /* @__PURE__ */ o(((e) => {
-	var t = fe();
+})), me = /* @__PURE__ */ o(((e) => {
+	var t = pe();
 	function n(e, t, n) {
 		e.clearRect(0, 0, t.width, t.height), t.style ||= {}, t.height = n, t.width = n, t.style.height = n + "px", t.style.width = n + "px";
 	}
@@ -1296,8 +1296,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		let a = e.render(t, n, i), o = i.type || "image/png", s = i.rendererOpts || {};
 		return a.toDataURL(o, s.quality);
 	};
-})), me = /* @__PURE__ */ o(((e) => {
-	var t = fe();
+})), he = /* @__PURE__ */ o(((e) => {
+	var t = pe();
 	function n(e, t) {
 		let n = e.a / 255, r = t + "=\"" + e.hex + "\"";
 		return n < 1 ? r + " " + t + "-opacity=\"" + n.toFixed(2).slice(1) + "\"" : r;
@@ -1318,8 +1318,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		let o = t.getOptions(r), s = e.modules.size, c = e.modules.data, l = s + o.margin * 2, u = o.color.light.a ? "<path " + n(o.color.light, "fill") + " d=\"M0 0h" + l + "v" + l + "H0z\"/>" : "", d = "<path " + n(o.color.dark, "stroke") + " d=\"" + i(c, s, o.margin) + "\"/>", f = "viewBox=\"0 0 " + l + " " + l + "\"", p = "<svg xmlns=\"http://www.w3.org/2000/svg\" " + (o.width ? "width=\"" + o.width + "\" height=\"" + o.width + "\" " : "") + f + " shape-rendering=\"crispEdges\">" + u + d + "</svg>\n";
 		return typeof a == "function" && a(null, p), p;
 	};
-})), he = /* @__PURE__ */ c((/* @__PURE__ */ o(((e) => {
-	var t = _(), n = de(), r = pe(), i = me();
+})), ge = /* @__PURE__ */ c((/* @__PURE__ */ o(((e) => {
+	var t = _(), n = fe(), r = me(), i = he();
 	function a(e, r, i, a, o) {
 		let s = [].slice.call(arguments, 1), c = s.length, l = typeof s[c - 1] == "function";
 		if (!l && !t()) throw Error("Callback required as last argument");
@@ -1346,12 +1346,12 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	e.create = n.create, e.toCanvas = a.bind(null, r.render), e.toDataURL = a.bind(null, r.renderToDataURL), e.toString = a.bind(null, function(e, t, n) {
 		return i.render(e, n);
 	});
-})))(), 1), ge = {
+})))(), 1), _e = {
 	peerId: "",
 	signalUrl: "",
 	shareUrl: ""
-}, k = class extends HTMLElement {
-	#e = ge;
+}, ve = class extends HTMLElement {
+	#e = _e;
 	#t = !1;
 	connectedCallback() {
 		this.#t || (this.#t = !0, this.addEventListener("click", this.#n), this.render());
@@ -1371,7 +1371,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
       <section class="lock-panel flex h-full flex-col justify-between gap-3 rounded-[1.4rem] p-3.5 sm:gap-4 sm:rounded-[2rem] sm:p-5">
         <div class="flex items-center justify-between gap-3">
           <p class="text-[0.62rem] font-semibold uppercase tracking-[0.18em] text-[var(--lock-dim)] sm:text-[0.7rem]">Share</p>
-          <span data-share-state class="rounded-full border border-[var(--lock-border)] bg-[rgba(255,255,252,0.62)] px-2.5 py-0.5 text-[0.65rem] uppercase tracking-[0.12em] text-[var(--lock-muted)] sm:px-3 sm:py-1 sm:text-xs"></span>
+          <span data-share-state class="lock-card rounded-full border border-[var(--lock-border)] px-2.5 py-0.5 text-[0.65rem] uppercase tracking-[0.12em] text-[var(--lock-muted)] sm:px-3 sm:py-1 sm:text-xs"></span>
         </div>
 
         <div class="flex flex-1 items-center justify-center">
@@ -1398,7 +1398,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			return;
 		}
 		try {
-			await he.toCanvas(t, e, {
+			await ge.toCanvas(t, e, {
 				width: 208,
 				margin: 1,
 				color: {
@@ -1413,7 +1413,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	#n = (e) => {
 		e.target?.closest("[data-action='copy-share']") && l(this, "lockstep-copy-share", { value: this.#e.shareUrl });
 	};
-}, _e = {
+}, ye = {
+	theme: "light",
 	gameTitle: "P2P Lockstep",
 	peerId: "",
 	remotePeerId: "",
@@ -1426,11 +1427,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	readySelf: !1,
 	readyPeer: !1,
 	pendingAction: null,
-	sessionId: "default-session"
-}, A = (e) => e === "me" ? "Your turn" : e === "peer" ? "Peer turn" : "Waiting", ve = (e, t) => t === "ready" ? `${e} ready` : t === "could_start" ? e === "Me" ? "You can start" : "Peer can start" : `${e} idle`, j = (e, t) => {
+	sessionId: "default-session",
+	historyLength: 0,
+	lastStart: null,
+	lastError: ""
+}, O = (e) => e === "me" ? "Your turn" : e === "peer" ? "Peer turn" : "Waiting", k = (e, t) => t === "ready" ? `${e} ready` : t === "could_start" ? e === "Me" ? "You can start" : "Peer can start" : `${e} idle`, A = (e, t) => {
 	let n = e === "Local" ? "You" : "Peer";
 	return t === "idle" ? `${n} idle` : t === "ready" ? `${n} ready` : t === "could_start" ? `${n} can start` : `${n} ${t.replaceAll("_", " ")}`;
-}, ye = (e, t) => e || t === "connected" ? {
+}, be = (e, t) => e || t === "connected" ? {
 	label: "Live",
 	detail: "connected",
 	tone: "bg-[var(--lock-teal)]"
@@ -1458,11 +1462,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	label: "Standby",
 	detail: "not registered",
 	tone: "bg-[var(--lock-dim)]"
-}, M = class extends HTMLElement {
-	#e = _e;
+}, j = class extends HTMLElement {
+	#e = ye;
 	#t = !1;
 	connectedCallback() {
-		this.#t || (this.#t = !0, this.render());
+		this.#t || (this.#t = !0, this.addEventListener("click", this.#n), this.render());
+	}
+	disconnectedCallback() {
+		this.removeEventListener("click", this.#n);
 	}
 	set state(e) {
 		this.#e = e, this.#t && this.render();
@@ -1471,7 +1478,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		return this.#e;
 	}
 	render() {
-		let { connected: e, pendingAction: t } = this.#e, n = ye(e, this.#e.connectionState), r = ve("Me", this.#e.localState), i = ve("Peer", this.#e.remoteState), a = j("Local", this.#e.localState), o = j("Remote", this.#e.remoteState), s = `${r} / ${i}`;
+		let { connected: e, pendingAction: t } = this.#e, n = be(e, this.#e.connectionState), r = k("Me", this.#e.localState), i = k("Peer", this.#e.remoteState), a = A("Local", this.#e.localState), o = A("Remote", this.#e.remoteState), s = `${r} / ${i}`, c = this.#e.lastStart === "local" ? "You" : this.#e.lastStart === "remote" ? "Peer" : "Not started", l = `${this.#e.historyLength} move${this.#e.historyLength === 1 ? "" : "s"} / ${c}`;
 		this.className = "block", this.innerHTML = `
       <section class="lock-panel relative rounded-[1.25rem] p-2.5 text-sm text-[var(--lock-muted)] sm:rounded-[1.5rem] sm:p-3 lg:rounded-[1.75rem] lg:p-2.5">
         <div class="flex items-center gap-2 lg:hidden">
@@ -1492,66 +1499,93 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
           <details class="group shrink-0">
             <summary
               aria-label="Match details"
-              class="flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-full border border-[var(--lock-border)] bg-[rgba(255,255,252,0.7)] text-base font-semibold leading-none text-[var(--lock-muted)] transition hover:border-[var(--lock-border-strong)] hover:bg-white [&::-webkit-details-marker]:hidden"
+              class="lock-control flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-full border border-[var(--lock-border)] text-base font-semibold leading-none text-[var(--lock-muted)] transition hover:border-[var(--lock-border-strong)] [&::-webkit-details-marker]:hidden"
             >
               ...
             </summary>
-            <div class="absolute inset-x-0 top-full z-50 mt-2 max-h-[calc(100svh-6rem)] overflow-auto rounded-[1.35rem] border border-[var(--lock-border-strong)] bg-[rgba(255,255,252,0.96)] p-3.5 shadow-2xl shadow-black/15 backdrop-blur-xl lg:inset-auto lg:right-0 lg:w-[min(22rem,calc(100vw-1.5rem))]">
+            <div class="lock-surface-strong absolute inset-x-0 top-full z-50 mt-2 max-h-[calc(100svh-6rem)] overflow-auto rounded-[1.35rem] border border-[var(--lock-border-strong)] p-3.5 shadow-2xl shadow-black/15 backdrop-blur-xl lg:inset-auto lg:right-0 lg:w-[min(22rem,calc(100vw-1.5rem))]">
               <div class="grid grid-cols-2 gap-2">
-                <article class="rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.54)] p-3">
+                <article class="lock-card rounded-[1rem] border border-[var(--lock-border)] p-3">
                   <p class="text-[0.6rem] uppercase tracking-[0.18em] text-[var(--lock-dim)]">Connection</p>
                   <p data-detail-connection class="mt-1.5 text-sm font-semibold text-[var(--lock-paper)]"></p>
                 </article>
-                <article class="rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.54)] p-3">
+                <article class="lock-card rounded-[1rem] border border-[var(--lock-border)] p-3">
                   <p class="text-[0.6rem] uppercase tracking-[0.18em] text-[var(--lock-dim)]">Turn</p>
                   <p data-detail-turn class="mt-1.5 text-sm font-semibold text-[var(--lock-paper)]"></p>
                 </article>
               </div>
 
-              <div class="mt-2 rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.54)] p-3">
+              <div class="lock-card mt-2 rounded-[1rem] border border-[var(--lock-border)] p-3">
                 <p class="text-[0.6rem] uppercase tracking-[0.18em] text-[var(--lock-dim)]">Identity</p>
                 <p class="lock-mono mt-1.5 break-all text-xs text-[var(--lock-muted)]">Session: <span data-detail-session class="text-[var(--lock-paper)]"></span></p>
                 <p class="lock-mono mt-1.5 break-all text-xs text-[var(--lock-muted)]">Me: <span data-detail-peer class="text-[var(--lock-paper)]"></span></p>
                 <p class="lock-mono mt-1.5 break-all text-xs text-[var(--lock-muted)]">Peer: <span data-detail-remote class="text-[var(--lock-paper)]"></span></p>
               </div>
 
+              <div class="lock-card mt-2 rounded-[1rem] border border-[var(--lock-border)] p-3">
+                <p class="text-[0.6rem] uppercase tracking-[0.18em] text-[var(--lock-dim)]">Timeline</p>
+                <p data-detail-timeline class="mt-1.5 text-sm font-semibold text-[var(--lock-paper)]"></p>
+                ${this.#e.lastError ? "<p data-detail-error class=\"mt-1.5 break-words text-xs text-[var(--lock-rose)]\"></p>" : ""}
+              </div>
+
+              <div class="lock-card mt-2 rounded-[1rem] border border-[var(--lock-border)] p-3">
+                <p class="text-[0.6rem] uppercase tracking-[0.18em] text-[var(--lock-dim)]">Appearance</p>
+                <div class="mt-2 grid grid-cols-2 gap-2" role="group" aria-label="Color mode">
+                  <button type="button" data-theme-mode="light" class="lock-theme-option rounded-xl px-3 py-2 text-xs font-semibold" aria-label="Use day mode" aria-pressed="${this.#e.theme === "light"}">Day</button>
+                  <button type="button" data-theme-mode="dark" class="lock-theme-option rounded-xl px-3 py-2 text-xs font-semibold" aria-label="Use night mode" aria-pressed="${this.#e.theme === "dark"}">Night</button>
+                </div>
+              </div>
+
               <div class="mt-2 flex flex-wrap gap-1.5">
                 <span data-detail-ready-self class="rounded-full border border-[var(--lock-border)] px-2.5 py-1 text-[0.68rem] text-[var(--lock-muted)]"></span>
                 <span data-detail-ready-peer class="rounded-full border border-[var(--lock-border)] px-2.5 py-1 text-[0.68rem] text-[var(--lock-muted)]"></span>
                 <span data-detail-local-state class="rounded-full border border-[var(--lock-border)] px-2.5 py-1 text-[0.68rem] text-[var(--lock-muted)]"></span>
                 <span data-detail-remote-state class="rounded-full border border-[var(--lock-border)] px-2.5 py-1 text-[0.68rem] text-[var(--lock-muted)]"></span>
-                ${t ? `<span class="rounded-full border border-[var(--lock-border-strong)] bg-[rgba(201,149,67,0.14)] px-2.5 py-1 text-[0.68rem] text-[var(--lock-bronze-bright)]">Pending ${t}</span>` : ""}
+                ${t ? `<span class="rounded-full border border-[var(--lock-border-strong)] bg-[var(--lock-pending-bg)] px-2.5 py-1 text-[0.68rem] text-[var(--lock-bronze-bright)]">Pending ${t}</span>` : ""}
               </div>
             </div>
           </details>
         </div>
 
         <div class="hidden gap-2 lg:grid">
-          <article class="rounded-[1.15rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.52)] p-2.5">
+          <article class="lock-card rounded-[1.15rem] border border-[var(--lock-border)] p-2.5">
             <div class="flex items-start justify-between gap-3">
               <div class="min-w-0">
                 <p class="text-[0.62rem] uppercase tracking-[0.2em] text-[var(--lock-dim)]">Match</p>
                 <p data-title class="mt-1.5 truncate text-xl font-semibold leading-none tracking-[-0.035em] text-[var(--lock-paper)]"></p>
+                <p data-match-meta class="mt-1.5 text-xs text-[var(--lock-muted)]"></p>
+              </div>
+              <div class="flex shrink-0 items-center gap-2">
+                <span class="h-2.5 w-2.5 rounded-full ${n.tone}"></span>
+                <details class="group relative">
+                  <summary aria-label="Appearance settings" class="lock-control flex h-7 w-7 cursor-pointer list-none items-center justify-center rounded-full border border-[var(--lock-border)] text-xs font-semibold leading-none text-[var(--lock-muted)] [&::-webkit-details-marker]:hidden">...</summary>
+                  <div class="lock-surface-strong absolute right-0 z-50 mt-2 w-52 rounded-2xl border border-[var(--lock-border-strong)] p-3 shadow-xl shadow-black/15">
+                    <p class="text-[0.6rem] uppercase tracking-[0.18em] text-[var(--lock-dim)]">Appearance</p>
+                    <div class="mt-2 grid grid-cols-2 gap-2" role="group" aria-label="Color mode">
+                      <button type="button" data-theme-mode="light" class="lock-theme-option rounded-xl px-3 py-2 text-xs font-semibold" aria-label="Use day mode" aria-pressed="${this.#e.theme === "light"}">Day</button>
+                      <button type="button" data-theme-mode="dark" class="lock-theme-option rounded-xl px-3 py-2 text-xs font-semibold" aria-label="Use night mode" aria-pressed="${this.#e.theme === "dark"}">Night</button>
+                    </div>
+                  </div>
+                </details>
               </div>
-              <span class="mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full ${n.tone}"></span>
             </div>
           </article>
 
           <div class="grid grid-cols-2 gap-2">
-            <article class="rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.52)] p-2.5">
+            <article class="lock-card rounded-[1rem] border border-[var(--lock-border)] p-2.5">
               <p class="text-[0.58rem] uppercase tracking-[0.2em] text-[var(--lock-dim)]">Connection</p>
               <p class="mt-1.5 text-sm font-semibold text-[var(--lock-paper)]">${n.label}</p>
               <p data-connection-state class="mt-0.5 truncate text-xs text-[var(--lock-muted)]"></p>
             </article>
 
-            <article class="rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.52)] p-2.5">
+            <article class="lock-card rounded-[1rem] border border-[var(--lock-border)] p-2.5">
               <p class="text-[0.58rem] uppercase tracking-[0.2em] text-[var(--lock-dim)]">Turn</p>
               <p data-current-turn class="mt-1.5 text-sm font-semibold text-[var(--lock-paper)]"></p>
               <p data-turn-owner class="mt-0.5 truncate text-xs text-[var(--lock-muted)]"></p>
             </article>
           </div>
 
-          <article class="min-w-0 overflow-hidden rounded-[1.15rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.52)] p-2.5">
+          <article class="lock-card min-w-0 overflow-hidden rounded-[1.15rem] border border-[var(--lock-border)] p-2.5">
             <p class="text-[0.62rem] uppercase tracking-[0.2em] text-[var(--lock-dim)]">Identity</p>
             <div class="mt-2 grid gap-1.5 text-xs">
               <p class="grid min-w-0 grid-cols-[3.25rem_minmax(0,1fr)] items-center gap-2 text-[var(--lock-muted)]">
@@ -1569,25 +1603,31 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
             </div>
           </article>
 
-          <article class="rounded-[1.15rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.52)] p-2.5">
+          ${this.#e.lastError ? "<article class=\"rounded-[1.15rem] border border-[var(--lock-border)] bg-[var(--lock-error-bg)] p-2.5\">\n                  <p class=\"text-[0.62rem] uppercase tracking-[0.2em] text-[var(--lock-rose)]\">Last error</p>\n                  <p data-error-message class=\"mt-1.5 break-words text-xs leading-5 text-[var(--lock-paper)]\"></p>\n                </article>" : ""}
+
+          <article class="lock-card rounded-[1.15rem] border border-[var(--lock-border)] p-2.5">
             <p class="text-[0.62rem] uppercase tracking-[0.2em] text-[var(--lock-dim)]">State</p>
             <div class="mt-2 flex flex-wrap gap-1.5">
               <span data-ready-self class="rounded-full border border-[var(--lock-border)] px-2 py-0.5 text-[0.64rem] text-[var(--lock-muted)]"></span>
               <span data-ready-peer class="rounded-full border border-[var(--lock-border)] px-2 py-0.5 text-[0.64rem] text-[var(--lock-muted)]"></span>
               <span data-local-state class="rounded-full border border-[var(--lock-border)] px-2 py-0.5 text-[0.64rem] text-[var(--lock-muted)]"></span>
               <span data-remote-state class="rounded-full border border-[var(--lock-border)] px-2 py-0.5 text-[0.64rem] text-[var(--lock-muted)]"></span>
-              ${t ? `<span class="rounded-full border border-[var(--lock-border-strong)] bg-[rgba(201,149,67,0.14)] px-2 py-0.5 text-[0.64rem] text-[var(--lock-bronze-bright)]">Pending ${t}</span>` : ""}
+              ${t ? `<span class="rounded-full border border-[var(--lock-border-strong)] bg-[var(--lock-pending-bg)] px-2 py-0.5 text-[0.64rem] text-[var(--lock-bronze-bright)]">Pending ${t}</span>` : ""}
             </div>
           </article>
         </div>
       </section>
-    `, p(this, "[data-mobile-title]", this.#e.gameTitle), p(this, "[data-mobile-connection]", n.label), p(this, "[data-mobile-turn]", `#${this.#e.currentTurn} ${A(this.#e.turnOwner)}`), p(this, "[data-mobile-ready]", s), p(this, "[data-detail-connection]", n.label), p(this, "[data-detail-turn]", `#${this.#e.currentTurn} / ${A(this.#e.turnOwner)}`), p(this, "[data-detail-session]", this.#e.sessionId), p(this, "[data-detail-peer]", this.#e.peerId || "not set"), p(this, "[data-detail-remote]", this.#e.remotePeerId || "not set"), p(this, "[data-detail-ready-self]", r), p(this, "[data-detail-ready-peer]", i), p(this, "[data-detail-local-state]", a), p(this, "[data-detail-remote-state]", o), p(this, "[data-title]", this.#e.gameTitle), p(this, "[data-connection-state]", n.detail), p(this, "[data-current-turn]", `#${this.#e.currentTurn}`), p(this, "[data-turn-owner]", A(this.#e.turnOwner)), p(this, "[data-session-id]", this.#e.sessionId), p(this, "[data-peer-id]", this.#e.peerId || "Local peer ID will appear after register.")?.setAttribute("title", this.#e.peerId), p(this, "[data-remote-peer-id]", this.#e.remotePeerId || "Remote peer not connected yet.")?.setAttribute("title", this.#e.remotePeerId), p(this, "[data-ready-self]", r), p(this, "[data-ready-peer]", i), p(this, "[data-local-state]", a), p(this, "[data-remote-state]", o);
+    `, p(this, "[data-mobile-title]", this.#e.gameTitle), p(this, "[data-mobile-connection]", n.label), p(this, "[data-mobile-turn]", `#${this.#e.currentTurn} ${O(this.#e.turnOwner)}`), p(this, "[data-mobile-ready]", s), p(this, "[data-detail-connection]", n.label), p(this, "[data-detail-turn]", `#${this.#e.currentTurn} / ${O(this.#e.turnOwner)}`), p(this, "[data-detail-session]", this.#e.sessionId), p(this, "[data-detail-timeline]", l), p(this, "[data-detail-error]", this.#e.lastError), p(this, "[data-detail-peer]", this.#e.peerId || "not set"), p(this, "[data-detail-remote]", this.#e.remotePeerId || "not set"), p(this, "[data-detail-ready-self]", r), p(this, "[data-detail-ready-peer]", i), p(this, "[data-detail-local-state]", a), p(this, "[data-detail-remote-state]", o), p(this, "[data-title]", this.#e.gameTitle), p(this, "[data-match-meta]", l), p(this, "[data-error-message]", this.#e.lastError), p(this, "[data-connection-state]", n.detail), p(this, "[data-current-turn]", `#${this.#e.currentTurn}`), p(this, "[data-turn-owner]", O(this.#e.turnOwner)), p(this, "[data-session-id]", this.#e.sessionId), p(this, "[data-peer-id]", this.#e.peerId || "Local peer ID will appear after register.")?.setAttribute("title", this.#e.peerId), p(this, "[data-remote-peer-id]", this.#e.remotePeerId || "Remote peer not connected yet.")?.setAttribute("title", this.#e.remotePeerId), p(this, "[data-ready-self]", r), p(this, "[data-ready-peer]", i), p(this, "[data-local-state]", a), p(this, "[data-remote-state]", o);
 	}
-}, be = {
+	#n = (e) => {
+		let t = e.target?.closest("button[data-theme-mode]");
+		(t?.dataset.themeMode === "light" || t?.dataset.themeMode === "dark") && l(this, "lockstep-theme-change", { theme: t.dataset.themeMode });
+	};
+}, xe = {
 	open: !1,
 	message: ""
-}, N = class extends HTMLElement {
-	#e = be;
+}, M = class extends HTMLElement {
+	#e = xe;
 	#t = !1;
 	connectedCallback() {
 		this.#t || (this.#t = !0, this.render());
@@ -1602,13 +1642,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		let { open: e } = this.#e;
 		this.className = "pointer-events-none fixed inset-x-4 bottom-4 z-50 flex justify-center sm:justify-end", this.innerHTML = `
       <div
-        class="max-w-sm rounded-full border border-[var(--lock-border-strong)] bg-[rgba(255,255,252,0.96)] px-4 py-3 text-sm font-medium text-[var(--lock-paper)] shadow-lg shadow-black/15 backdrop-blur-xl transition duration-200 ${e ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"}"
+        class="lock-surface-strong max-w-sm rounded-full border border-[var(--lock-border-strong)] px-4 py-3 text-sm font-medium text-[var(--lock-paper)] shadow-lg shadow-black/15 backdrop-blur-xl transition duration-200 ${e ? "translate-y-0 opacity-100" : "translate-y-2 opacity-0"}"
       >
         <span data-message></span>
       </div>
     `, p(this, "[data-message]", this.#e.message);
 	}
-}, P = class extends HTMLElement {
+}, N = class extends HTMLElement {
 	#e = !1;
 	#t = null;
 	#n = null;
@@ -1631,18 +1671,18 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	render() {
 		this.className = "block h-full", this.innerHTML = "\n      <section class=\"relative h-full min-h-[15rem] overflow-visible rounded-[1.4rem] bg-transparent sm:min-h-[22rem] sm:rounded-[2.2rem] lg:min-h-[32rem] lg:rounded-[2rem]\">\n        <div data-board-mount class=\"relative z-10 h-full\"></div>\n        <div\n          data-placeholder\n          class=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-center px-6 text-center text-sm leading-6 text-[var(--lock-muted)]\"\n        >\n          Board host ready\n        </div>\n      </section>\n    ", this.#n = this.querySelector("[data-board-mount]");
 	}
-}, F = (e) => {
+}, P = (e) => {
 	let t = e.hash.replace(/^#/, "");
 	return new URLSearchParams(t || e.search);
-}, xe = (e, t, n) => {
+}, Se = (e, t, n) => {
 	if (!e) return "";
 	let r = new URL(n ?? window.location.href), i = new URLSearchParams();
 	return i.set("id", e), t && i.set("url", t), r.hash = i.toString(), r.toString();
-}, Se = (e) => {
+}, Ce = (e) => {
 	let t = e.trim();
 	if (!t || !t.includes("://")) return null;
 	try {
-		let e = F(new URL(t)), n = e.get("id");
+		let e = P(new URL(t)), n = e.get("id");
 		return n ? {
 			peerId: n,
 			signalUrl: e.get("url") ?? ""
@@ -1650,13 +1690,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	} catch {
 		return null;
 	}
-}, Ce = () => {
-	let e = F(new URL(window.location.href));
+}, we = () => {
+	let e = P(new URL(window.location.href));
 	return {
 		peerId: e.get("id") ?? "",
 		signalUrl: e.get("url") ?? ""
 	};
-}, we = {
+}, Te = {
+	theme: "light",
 	gameTitle: "P2P Lockstep",
 	signalUrl: "",
 	targetId: "",
@@ -1665,8 +1706,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	connectionState: "idle",
 	registering: !1,
 	connecting: !1
-}, I = class extends HTMLElement {
-	#e = we;
+}, F = class extends HTMLElement {
+	#e = Te;
 	#t = !1;
 	#n = !1;
 	connectedCallback() {
@@ -1683,26 +1724,30 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		return this.#e;
 	}
 	render() {
-		this.className = "block", this.innerHTML = "\n      <section class=\"mx-auto grid min-h-full max-w-5xl gap-3 sm:gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]\">\n        <div class=\"lock-panel rounded-[1.4rem] p-3.5 sm:rounded-[2rem] sm:p-6 lg:p-7\">\n          <div class=\"flex items-start justify-between gap-4\">\n            <div class=\"min-w-0\">\n              <p class=\"text-[0.62rem] font-semibold uppercase tracking-[0.18em] text-[var(--lock-dim)] sm:text-[0.68rem]\">Lobby</p>\n              <h1 data-game-title class=\"mt-1.5 break-words text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--lock-paper)] sm:mt-3 sm:text-5xl lg:text-6xl\"></h1>\n            </div>\n\n            <details class=\"group relative shrink-0\">\n              <summary\n                aria-label=\"Server settings\"\n                class=\"flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-full border border-[var(--lock-border)] bg-[rgba(255,255,252,0.7)] text-base font-semibold leading-none text-[var(--lock-muted)] transition hover:border-[var(--lock-border-strong)] hover:bg-white sm:h-10 sm:w-10 sm:text-lg [&::-webkit-details-marker]:hidden\"\n              >\n                ...\n              </summary>\n              <div class=\"absolute right-0 z-20 mt-2 w-[min(21rem,calc(100vw-2rem))] rounded-[1.2rem] border border-[var(--lock-border-strong)] bg-[var(--lock-surface-strong)] p-3.5 shadow-xl shadow-black/10 backdrop-blur-xl sm:mt-3 sm:rounded-[1.6rem] sm:p-4\">\n                <label class=\"block\">\n                  <span class=\"mb-2 block text-xs uppercase tracking-[0.22em] text-[var(--lock-dim)]\">Signaling server</span>\n                  <input\n                    data-field=\"signal-url\"\n                    placeholder=\"wss://host\"\n                    class=\"lock-input lock-mono w-full rounded-2xl px-4 py-3 text-sm transition\"\n                  />\n                </label>\n\n                <button\n                  type=\"button\"\n                  data-action=\"register\"\n                  class=\"lock-primary lock-disabled mt-3 inline-flex w-full items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition\"\n                >\n                  <span data-register-label></span>\n                </button>\n              </div>\n            </details>\n          </div>\n\n          <div class=\"mt-4 grid grid-cols-2 gap-2 sm:mt-7 sm:gap-4\">\n            <section class=\"rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.58)] p-3 sm:rounded-[1.4rem] sm:p-4\">\n              <p class=\"text-[0.58rem] uppercase tracking-[0.2em] text-[var(--lock-dim)] sm:text-[0.68rem]\">Server</p>\n              <div class=\"mt-2 flex items-center gap-2 sm:mt-3 sm:gap-3\">\n                <span data-status-dot class=\"h-2.5 w-2.5 rounded-full bg-slate-600\"></span>\n                <span data-connection-state class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--lock-paper)] sm:text-sm\"></span>\n              </div>\n            </section>\n\n            <section class=\"rounded-[1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.58)] p-3 sm:rounded-[1.4rem] sm:p-4\">\n              <p class=\"text-[0.58rem] uppercase tracking-[0.2em] text-[var(--lock-dim)] sm:text-[0.68rem]\">Your ID</p>\n              <p data-peer-id class=\"lock-mono mt-2 max-h-9 min-h-4 overflow-hidden break-all text-[0.68rem] leading-[1.35] text-[var(--lock-paper)] sm:mt-3 sm:max-h-none sm:text-sm\"></p>\n            </section>\n          </div>\n\n          <section class=\"mt-3 rounded-[1.1rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.58)] p-3 sm:mt-5 sm:rounded-[1.8rem] sm:p-5\">\n            <label class=\"block\">\n              <span class=\"mb-1.5 block text-xs font-semibold text-[var(--lock-muted)] sm:mb-2 sm:text-sm\">Peer ID or share link</span>\n              <input\n                data-field=\"target-id\"\n                placeholder=\"Paste peer id\"\n                class=\"lock-input lock-mono w-full rounded-xl px-3 py-3 text-sm transition sm:rounded-2xl sm:px-4 sm:py-4 sm:text-base\"\n              />\n            </label>\n\n            <button\n              type=\"button\"\n              data-action=\"connect\"\n              class=\"lock-primary lock-disabled mt-3 inline-flex w-full items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition sm:mt-4 sm:py-4\"\n            >\n              <span data-connect-label></span>\n            </button>\n          </section>\n        </div>\n\n        <p2p-lockstep-share-panel></p2p-lockstep-share-panel>\n      </section>\n    ", this.#n = !0, this.#r();
+		this.className = "block", this.innerHTML = "\n      <section class=\"mx-auto grid min-h-full max-w-5xl gap-3 sm:gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]\">\n        <div class=\"lock-panel rounded-[1.4rem] p-3.5 sm:rounded-[2rem] sm:p-6 lg:p-7\">\n          <div class=\"flex items-start justify-between gap-4\">\n            <div class=\"min-w-0\">\n              <p class=\"text-[0.62rem] font-semibold uppercase tracking-[0.18em] text-[var(--lock-dim)] sm:text-[0.68rem]\">Peer connection</p>\n              <h1 data-game-title class=\"mt-1.5 break-words text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--lock-paper)] sm:mt-3 sm:text-5xl lg:text-6xl\"></h1>\n            </div>\n\n            <details class=\"group relative shrink-0\">\n              <summary\n                aria-label=\"Server settings\"\n                class=\"lock-control flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-full border border-[var(--lock-border)] text-base font-semibold leading-none text-[var(--lock-muted)] transition hover:border-[var(--lock-border-strong)] sm:h-10 sm:w-10 sm:text-lg [&::-webkit-details-marker]:hidden\"\n              >\n                ...\n              </summary>\n              <div class=\"lock-surface-strong absolute right-0 z-20 mt-2 w-[min(21rem,calc(100vw-2rem))] rounded-[1.2rem] border border-[var(--lock-border-strong)] p-3.5 shadow-xl shadow-black/10 backdrop-blur-xl sm:mt-3 sm:rounded-[1.6rem] sm:p-4\">\n                <div class=\"lock-card mb-3 rounded-2xl border border-[var(--lock-border)] p-3\">\n                  <p class=\"text-[0.62rem] uppercase tracking-[0.2em] text-[var(--lock-dim)]\">Appearance</p>\n                  <div class=\"mt-2 grid grid-cols-2 gap-2\" role=\"group\" aria-label=\"Color mode\">\n                    <button type=\"button\" data-action=\"theme\" data-theme-mode=\"light\" class=\"lock-theme-option rounded-xl px-3 py-2 text-xs font-semibold\" aria-label=\"Use day mode\">Day</button>\n                    <button type=\"button\" data-action=\"theme\" data-theme-mode=\"dark\" class=\"lock-theme-option rounded-xl px-3 py-2 text-xs font-semibold\" aria-label=\"Use night mode\">Night</button>\n                  </div>\n                </div>\n\n                <label class=\"block\">\n                  <span class=\"mb-2 block text-xs uppercase tracking-[0.22em] text-[var(--lock-dim)]\">Signaling server</span>\n                  <input\n                    data-field=\"signal-url\"\n                    placeholder=\"wss://host\"\n                    class=\"lock-input lock-mono w-full rounded-2xl px-4 py-3 text-sm transition\"\n                  />\n                </label>\n\n                <button\n                  type=\"button\"\n                  data-action=\"register\"\n                  class=\"lock-primary lock-disabled mt-3 inline-flex w-full items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition\"\n                >\n                  <span data-register-label></span>\n                </button>\n              </div>\n            </details>\n          </div>\n\n          <div class=\"mt-4 grid grid-cols-2 gap-2 sm:mt-7 sm:gap-4\">\n            <section class=\"lock-card rounded-[1rem] border border-[var(--lock-border)] p-3 sm:rounded-[1.4rem] sm:p-4\">\n              <p class=\"text-[0.58rem] uppercase tracking-[0.2em] text-[var(--lock-dim)] sm:text-[0.68rem]\">Server</p>\n              <div class=\"mt-2 flex items-center gap-2 sm:mt-3 sm:gap-3\">\n                <span data-status-dot class=\"h-2.5 w-2.5 rounded-full bg-slate-600\"></span>\n                <span data-connection-state class=\"text-xs font-semibold uppercase tracking-[0.14em] text-[var(--lock-paper)] sm:text-sm\"></span>\n              </div>\n            </section>\n\n            <section class=\"lock-card rounded-[1rem] border border-[var(--lock-border)] p-3 sm:rounded-[1.4rem] sm:p-4\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <p class=\"text-[0.58rem] uppercase tracking-[0.2em] text-[var(--lock-dim)] sm:text-[0.68rem]\">Your ID</p>\n                <button type=\"button\" data-action=\"copy-peer\" class=\"lock-secondary lock-disabled rounded-full px-2.5 py-1 text-[0.62rem] font-semibold\" aria-label=\"Copy your peer ID\">Copy</button>\n              </div>\n              <p data-peer-id class=\"lock-mono mt-2 max-h-9 min-h-4 overflow-hidden break-all text-[0.68rem] leading-[1.35] text-[var(--lock-paper)] sm:mt-3 sm:max-h-none sm:text-sm\"></p>\n            </section>\n          </div>\n\n          <section class=\"lock-card mt-3 rounded-[1.1rem] border border-[var(--lock-border)] p-3 sm:mt-5 sm:rounded-[1.8rem] sm:p-5\">\n            <label class=\"block\">\n              <span class=\"mb-1.5 block text-xs font-semibold text-[var(--lock-muted)] sm:mb-2 sm:text-sm\">Peer ID or share link</span>\n              <input\n                data-field=\"target-id\"\n                placeholder=\"Paste peer id\"\n                class=\"lock-input lock-mono w-full rounded-xl px-3 py-3 text-sm transition sm:rounded-2xl sm:px-4 sm:py-4 sm:text-base\"\n              />\n            </label>\n\n            <button\n              type=\"button\"\n              data-action=\"connect\"\n              class=\"lock-primary lock-disabled mt-3 inline-flex w-full items-center justify-center rounded-full px-4 py-3 text-sm font-semibold transition sm:mt-4 sm:py-4\"\n            >\n              <span data-connect-label></span>\n            </button>\n          </section>\n        </div>\n\n        <p2p-lockstep-share-panel></p2p-lockstep-share-panel>\n      </section>\n    ", this.#n = !0, this.#r();
 	}
 	#r() {
 		p(this, "[data-game-title]", this.#e.gameTitle), p(this, "[data-connection-state]", this.#e.connectionState), p(this, "[data-register-label]", this.#e.registering ? "Registering..." : "Register peer"), p(this, "[data-connect-label]", this.#e.connecting ? "Connecting..." : "Connect"), p(this, "[data-peer-id]", this.#e.peerId || "Register first to get your peer ID."), m(this, "[data-field='signal-url']", this.#e.signalUrl), m(this, "[data-field='target-id']", this.#e.targetId);
 		let e = this.querySelector("[data-action='register']");
-		e && (e.disabled = this.#e.registering || !this.#e.signalUrl.trim());
+		e && (e.disabled = this.#e.registering || !this.#e.signalUrl.trim()), this.querySelectorAll("[data-theme-mode]").forEach((e) => {
+			e.setAttribute("aria-pressed", String(e.dataset.themeMode === this.#e.theme));
+		});
 		let t = this.querySelector("[data-status-dot]");
 		t && (t.className = `h-3 w-3 rounded-full ${this.#e.connectionState === "registered" || this.#e.connectionState === "connected" ? "bg-[var(--lock-teal)]" : this.#e.connectionState === "registering" || this.#e.connectionState === "connecting" ? "bg-[#c08a25]" : this.#e.connectionState === "error" || this.#e.connectionState === "offline" ? "bg-[var(--lock-rose)]" : "bg-[var(--lock-dim)]"}`);
 		let n = this.querySelector("[data-action='connect']");
 		n && (n.disabled = this.#e.connecting || !this.#e.targetId.trim());
-		let r = this.querySelector("p2p-lockstep-share-panel");
-		r && (r.state = {
+		let r = this.querySelector("[data-action='copy-peer']");
+		r && (r.disabled = !this.#e.peerId);
+		let i = this.querySelector("p2p-lockstep-share-panel");
+		i && (i.state = {
 			peerId: this.#e.peerId,
 			signalUrl: this.#e.signalUrl,
-			shareUrl: xe(this.#e.peerId, this.#e.signalUrl)
+			shareUrl: Se(this.#e.peerId, this.#e.signalUrl)
 		});
 	}
 	#i = (e) => {
 		let t = e.target?.closest("button[data-action]");
-		!t || t.disabled || (t.dataset.action === "register" && l(this, "lockstep-register", { signalUrl: this.#e.signalUrl.trim() }), t.dataset.action === "connect" && l(this, "lockstep-connect", { targetId: this.#e.targetId.trim() }));
+		!t || t.disabled || (t.dataset.action === "register" && l(this, "lockstep-register", { signalUrl: this.#e.signalUrl.trim() }), t.dataset.action === "connect" && l(this, "lockstep-connect", { targetId: this.#e.targetId.trim() }), t.dataset.action === "copy-peer" && l(this, "lockstep-copy-share", { value: this.#e.peerId }), t.dataset.action === "theme" && (t.dataset.themeMode === "light" || t.dataset.themeMode === "dark") && l(this, "lockstep-theme-change", { theme: t.dataset.themeMode }));
 	};
 	#a = (e) => {
 		let t = e.target;
@@ -1712,7 +1757,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				return;
 			}
 			if (t.dataset.field === "target-id") {
-				let e = Se(t.value);
+				let e = Ce(t.value);
 				if (e) {
 					l(this, "lockstep-share-detected", e);
 					return;
@@ -1721,7 +1766,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			}
 		}
 	};
-}, Te = {
+}, Ee = {
+	theme: "light",
 	gameTitle: "P2P Lockstep",
 	peerId: "",
 	remotePeerId: "",
@@ -1739,9 +1785,12 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	localState: "idle",
 	remoteState: "idle",
 	pendingAction: null,
-	sessionId: "default-session"
-}, L = class extends HTMLElement {
-	#e = Te;
+	sessionId: "default-session",
+	historyLength: 0,
+	lastStart: null,
+	lastError: ""
+}, De = class extends HTMLElement {
+	#e = Ee;
 	#t = !1;
 	#n = null;
 	#r = null;
@@ -1763,6 +1812,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	}
 	#a() {
 		!this.#n || !this.#r || (this.#n.state = {
+			theme: this.#e.theme,
 			gameTitle: this.#e.gameTitle,
 			peerId: this.#e.peerId,
 			remotePeerId: this.#e.remotePeerId,
@@ -1775,7 +1825,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			readySelf: this.#e.readySelf,
 			readyPeer: this.#e.readyPeer,
 			pendingAction: this.#e.pendingAction,
-			sessionId: this.#e.sessionId
+			sessionId: this.#e.sessionId,
+			historyLength: this.#e.historyLength,
+			lastStart: this.#e.lastStart,
+			lastError: this.#e.lastError
 		}, this.#r.state = {
 			connected: this.#e.connected,
 			readySelf: this.#e.readySelf,
@@ -1787,10 +1840,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			connectionState: this.#e.connectionState
 		});
 	}
-}, R = (e) => JSON.stringify(e), Ee = (e) => {
+}, I = (e) => JSON.stringify(e), Oe = (e) => {
 	if (typeof e != "string") throw TypeError("decode expects a serialized string");
 	return JSON.parse(e);
-}, De = (e) => {
+}, ke = (e) => {
 	if (typeof e != "string") return {
 		ok: !1,
 		error: /* @__PURE__ */ TypeError("decodeSafe expects a serialized string")
@@ -1806,7 +1859,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			error: e
 		};
 	}
-}, z = (e, t) => {
+}, L = (e, t) => {
 	t === void 0 ? console.log(e) : console.log(e, t);
 	let n = globalThis.__p2p_debug;
 	if (typeof n == "function") try {
@@ -1814,39 +1867,39 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	} catch {
 		n(e);
 	}
-}, Oe = class {
+}, Ae = class {
 	constructor() {
 		this.ws = null, this.peerId = null, this.ready = !1, this.signalHandlers = /* @__PURE__ */ new Set(), this.pendingRegistration = null, this.connect = (e) => new Promise((t, n) => {
-			this.ws?.close(), z("[signaling] ws connect", e), this.ws = new WebSocket(e);
+			this.ws?.close(), L("[signaling] ws connect", e), this.ws = new WebSocket(e);
 			let r = window.setTimeout(() => {
 				try {
 					this.ws?.close();
 				} catch {}
-				z("[signaling] ws open timeout"), n(/* @__PURE__ */ Error("ws open timeout"));
+				L("[signaling] ws open timeout"), n(/* @__PURE__ */ Error("ws open timeout"));
 			}, 5e3);
 			this.ws.addEventListener("open", () => {
-				this.ready = !0, this.registeredPayload = void 0, window.clearTimeout(r), z("[signaling] ws open"), t();
+				this.ready = !0, this.registeredPayload = void 0, window.clearTimeout(r), L("[signaling] ws open"), t();
 			}), this.ws.addEventListener("error", (e) => {
-				window.clearTimeout(r), z("[signaling] ws error", e), n(/* @__PURE__ */ Error("ws error"));
+				window.clearTimeout(r), L("[signaling] ws error", e), n(/* @__PURE__ */ Error("ws error"));
 			}), this.ws.addEventListener("close", (e) => {
-				this.ready = !1, this.peerId = null, this.registeredPayload = void 0, this.rejectPendingRegistration(/* @__PURE__ */ Error("ws closed")), window.clearTimeout(r), z("[signaling] ws close", {
+				this.ready = !1, this.peerId = null, this.registeredPayload = void 0, this.rejectPendingRegistration(/* @__PURE__ */ Error("ws closed")), window.clearTimeout(r), L("[signaling] ws close", {
 					code: e.code,
 					reason: e.reason
 				});
 			}), this.ws.addEventListener("message", (e) => {
-				let t = String(e.data), n = De(t);
+				let t = String(e.data), n = ke(t);
 				if (!n.ok) {
-					z("[signaling] ws message decode error", t), this.rejectPendingRegistration(/* @__PURE__ */ Error("signaling decode error"));
+					L("[signaling] ws message decode error", t), this.rejectPendingRegistration(/* @__PURE__ */ Error("signaling decode error"));
 					return;
 				}
 				let r = n.value;
-				if (z("[signaling] ws message", r), r.type === "ERROR") {
-					z("[signaling] error", r), this.rejectPendingRegistration(/* @__PURE__ */ Error("signaling error"));
+				if (L("[signaling] ws message", r), r.type === "ERROR") {
+					L("[signaling] error", r), this.rejectPendingRegistration(/* @__PURE__ */ Error("signaling error"));
 					return;
 				}
 				if ((r.type === "REGISTERED" || r.type === "RESUMED") && (this.peerId = r.to ?? null, this.registeredPayload = r.payload, this.peerId)) {
 					let e = this.resolveRegisteredPayload();
-					z("[signaling] registered", {
+					L("[signaling] registered", {
 						peerId: this.peerId,
 						resumeToken: e.resumeToken
 					}), this.resolvePendingRegistration({
@@ -1868,14 +1921,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		}), this.register = async () => {
 			this.assertConnected();
 			let e = { type: "REGISTER" };
-			z("[signaling] send REGISTER");
+			L("[signaling] send REGISTER");
 			let t = this.awaitRegistration("register");
-			this.ws?.send(R(e));
+			this.ws?.send(I(e));
 			try {
 				let e = await t;
-				return z("[signaling] register ok", e.peerId), e;
+				return L("[signaling] register ok", e.peerId), e;
 			} catch (e) {
-				throw z("[signaling] register error", e), e;
+				throw L("[signaling] register error", e), e;
 			}
 		}, this.resume = async (e) => {
 			this.assertConnected();
@@ -1886,14 +1939,14 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 					data: e
 				}
 			};
-			z("[signaling] send RESUME", e.peerId);
+			L("[signaling] send RESUME", e.peerId);
 			let n = this.awaitRegistration("resume");
-			this.ws?.send(R(t));
+			this.ws?.send(I(t));
 			try {
 				let e = await n;
-				return z("[signaling] resume ok", e.peerId), e;
+				return L("[signaling] resume ok", e.peerId), e;
 			} catch (e) {
-				throw z("[signaling] resume error", e), e;
+				throw L("[signaling] resume error", e), e;
 			}
 		}, this.relay = (e) => {
 			if (!this.ws || !this.ready) return;
@@ -1906,7 +1959,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				to: e.to,
 				payload: t
 			};
-			this.ws.send(R(n));
+			this.ws.send(I(n));
 		};
 	}
 	onSignal(e) {
@@ -1935,7 +1988,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				resolve: t,
 				reject: n,
 				timeoutId: window.setTimeout(() => {
-					this.pendingRegistration = null, z(`[signaling] ${e} timeout`), n(/* @__PURE__ */ Error(`${e} timeout`));
+					this.pendingRegistration = null, L(`[signaling] ${e} timeout`), n(/* @__PURE__ */ Error(`${e} timeout`));
 				}, 5e3)
 			};
 		});
@@ -1951,7 +2004,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	emitSignal(e) {
 		for (let t of [...this.signalHandlers]) t(e);
 	}
-}, ke = [
+}, je = [
 	{
 		from: "passive",
 		event: "CONNECT",
@@ -1982,10 +2035,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		event: "CONNECT",
 		to: "requesting"
 	}
-], Ae = (e, t) => {
-	let n = ke.find((n) => n.from === e && n.event === t);
+], Me = (e, t) => {
+	let n = je.find((n) => n.from === e && n.event === t);
 	return n ? n.to : e;
-}, je = [
+}, Ne = [
 	{
 		from: "idle",
 		event: "REQUEST",
@@ -2031,10 +2084,10 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		event: "STOP",
 		to: "idle"
 	}
-], Me = (e, t) => {
-	let n = je.find((n) => n.from === e && n.event === t);
+], Pe = (e, t) => {
+	let n = Ne.find((n) => n.from === e && n.event === t);
 	return n ? n.to : e;
-}, Ne = class {
+}, Fe = class {
 	constructor(e, t, n, r, i, a, o) {
 		this.dc = null, this.pendingSends = [], this.remoteId = null, this.requestedId = null, this.state = "passive", this.localStream = null, this.remoteStream = null, this.onRemoteStreamHandler = null, this.senders = [], this.mediaState = "idle", this.negotiating = !1, this.renegotiateQueued = !1, this.onStateChangeHandler = null, this.onMediaChangeHandler = null, this.handleConnectionStateChange = () => {
 			if (this.pc.connectionState === "connected") {
@@ -2116,7 +2169,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				}
 			}[e.type]();
 		}, this.dispatch = (e) => {
-			let t = Ae(this.state, e);
+			let t = Me(this.state, e);
 			if (this.setPeerState(t)) {
 				if (t === "requesting" && e === "CONNECT") {
 					this.requestedId &&= (this.remoteId = this.requestedId, null), this.runTask(this.startOffer(), "startOffer");
@@ -2166,7 +2219,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				this.remoteStream = null, this.onRemoteStreamHandler?.(null);
 			}
 		}, this.isMediaReady = () => this.dc?.readyState === "open", this.dispatchMedia = (e) => {
-			let t = Me(this.mediaState, e);
+			let t = Pe(this.mediaState, e);
 			if (!this.setMediaState(t)) {
 				e === "REQUEST" && t === "starting" && this.attemptActivateMedia();
 				return;
@@ -2214,17 +2267,17 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			console.error(`[rtc-peer] ${t} failed`, e), this.dispatchMedia("DISCONNECT"), this.dispatch("DISCONNECT");
 		});
 	}
-}, B = "p2p-lockstep-kit:signal-session", Pe = () => {
+}, R = "p2p-lockstep-kit:signal-session", Ie = 600 * 1e3, Le = () => {
 	if (typeof window > "u") return null;
 	try {
 		return window.localStorage;
 	} catch {
 		return null;
 	}
-}, Fe = () => {
-	let e = Pe();
+}, Re = () => {
+	let e = Le();
 	if (!e) return null;
-	let t = e.getItem(B);
+	let t = e.getItem(R);
 	if (!t) return null;
 	try {
 		let e = JSON.parse(t);
@@ -2232,41 +2285,42 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	} catch {
 		return null;
 	}
-}, Ie = (e) => {
-	let t = Pe();
+}, ze = (e) => {
+	let t = Le();
 	if (t) {
 		if (!e) {
-			t.removeItem(B);
+			t.removeItem(R);
 			return;
 		}
-		t.setItem(B, JSON.stringify(e));
+		t.setItem(R, JSON.stringify(e));
 	}
-}, Le = () => {
-	Ie(null);
-}, Re = class {
-	constructor(e = new Oe()) {
+}, Be = () => {
+	ze(null);
+}, Ve = (e, t = Ie) => Date.now() - e.updatedAt > t, He = class {
+	constructor(e = new Ae()) {
 		this.peer = null, this.onMessageHandler = null, this.onRemoteStreamHandler = null, this.pendingMediaStream = null, this.onStateChangeHandler = null, this.onMediaChangeHandler = null, this.getLocalPeerId = () => this.peer?.getPeerId() ?? null, this.getRemotePeerId = () => this.peer?.getRemoteId() ?? null, this.peerState = () => this.peer?.getPeerState() ?? "passive", this.mediaState = () => this.peer?.getMediaState() ?? "idle", this.signaling = e;
 	}
 	async register(e) {
 		this.peer?.dispose(), this.peer = null, await this.signaling.connect(e);
-		let t = Fe(), n = null;
-		if (t) try {
+		let t = Re(), n = null;
+		if (t && Ve(t)) Be();
+		else if (t) try {
 			n = await this.signaling.resume({
 				peerId: t.peerId,
 				resumeToken: t.resumeToken
 			});
 		} catch {
-			Le();
+			Be();
 		}
-		n ||= await this.signaling.register(), n.resumeToken && Ie({
+		n ||= await this.signaling.register(), n.resumeToken && ze({
 			peerId: n.peerId,
 			resumeToken: n.resumeToken,
 			updatedAt: Date.now()
 		});
 		let r = new RTCPeerConnection({ iceServers: n.iceServers });
-		return this.peer = new Ne(n.peerId, r, this.signaling, (e) => {
+		return this.peer = new Fe(n.peerId, r, this.signaling, (e) => {
 			try {
-				let t = Ee(String(e));
+				let t = Oe(String(e));
 				this.onMessageHandler?.(t);
 			} catch {
 				this.onMessageHandler?.(e);
@@ -2283,7 +2337,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		this.peer && await this.peer.connect(e);
 	}
 	send(e) {
-		let t = R(e);
+		let t = I(e);
 		this.peer?.send(t);
 	}
 	disconnect() {
@@ -2307,19 +2361,19 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	onMediaChange(e) {
 		this.onMediaChangeHandler = e, e(this.peer?.getMediaState() ?? "idle");
 	}
-}, V = (e) => (t, n) => {
+}, z = (e) => (t, n) => {
 	let r = e === "debug" ? console.info : console[e];
 	if (n !== void 0) {
 		r(t, n);
 		return;
 	}
 	r(t);
-}, H = {
-	debug: V("debug"),
-	info: V("info"),
-	warn: V("warn"),
-	error: V("error")
-}, ze = (e) => {
+}, B = {
+	debug: z("debug"),
+	info: z("info"),
+	warn: z("warn"),
+	error: z("error")
+}, Ue = (e) => {
 	if (typeof e != "string") return {
 		ok: !1,
 		error: /* @__PURE__ */ TypeError("decodeSafe expects a serialized string")
@@ -2335,11 +2389,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			error: e
 		};
 	}
-}, Be = (e) => {
+}, We = (e) => {
 	if (typeof e != "string") return !e || typeof e != "object" ? null : e;
-	let t = ze(e);
+	let t = Ue(e);
 	return !t.ok || !t.value || typeof t.value != "object" ? null : t.value;
-}, Ve = class {
+}, Ge = class {
 	handlers = {};
 	processingQueue = Promise.resolve();
 	emit(e, t, n = "local") {
@@ -2350,11 +2404,11 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		});
 	}
 	register(e, t) {
-		this.handlers[e] = t, H.debug(`[session:bus] registered ${e}`);
+		this.handlers[e] = t, B.debug(`[session:bus] registered ${e}`);
 	}
 	dispatch(e) {
 		this.processingQueue = this.processingQueue.then(async () => {
-			H.debug(`[session:bus] dispatch ${e.type}`, {
+			B.debug(`[session:bus] dispatch ${e.type}`, {
 				from: e.from,
 				payload: e.payload,
 				turn: e.turn,
@@ -2363,16 +2417,16 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			let t = this.handlers[e.type];
 			if (t) {
 				try {
-					await t(e), H.debug(`[session:bus] handled ${e.type}`, { from: e.from });
+					await t(e), B.debug(`[session:bus] handled ${e.type}`, { from: e.from });
 				} catch (t) {
 					console.error(`[CommandBus] Error in ${e.type}:`, t);
 				}
 				return;
 			}
-			H.debug(`[session:bus] no handler for ${e.type}`, { from: e.from });
+			B.debug(`[session:bus] no handler for ${e.type}`, { from: e.from });
 		});
 	}
-}, U = [
+}, V = [
 	{
 		from: "idle",
 		event: "READY",
@@ -2613,13 +2667,13 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		event: "ONLINE",
 		to: "syncing"
 	}
-], He = (e, t, n) => {
-	if (n) return U.find((r) => r.from === e && r.event === t && r.to === n) ? n : e;
+], Ke = (e, t, n) => {
+	if (n) return V.find((r) => r.from === e && r.event === t && r.to === n) ? n : e;
 	{
-		let n = U.find((n) => n.from === e && n.event === t);
+		let n = V.find((n) => n.from === e && n.event === t);
 		return n ? n.to : e;
 	}
-}, Ue = (e, t, n) => n ? !!U.find((r) => r.from === e && r.event === t && r.to === n) : !!U.find((n) => n.from === e && n.event === t), W = class {
+}, qe = (e, t, n) => n ? !!V.find((r) => r.from === e && r.event === t && r.to === n) : !!V.find((n) => n.from === e && n.event === t), H = class {
 	state;
 	constructor(e = "idle") {
 		this.state = e;
@@ -2628,19 +2682,19 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		return this.state;
 	}
 	hasNextState(e, t) {
-		return Ue(this.state, e, t);
+		return qe(this.state, e, t);
 	}
 	dispatch(e, t) {
-		this.state = He(this.state, e, t);
+		this.state = Ke(this.state, e, t);
 	}
-}, We = class {
+}, Je = class {
 	validateMove() {
 		return { valid: !0 };
 	}
 	checkWin() {
 		return null;
 	}
-}, Ge = class {
+}, Ye = class {
 	observers = /* @__PURE__ */ new Set();
 	subscribe(e) {
 		this.observers.add(e);
@@ -2669,7 +2723,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			console.error("[StateObserver]", e);
 		}
 	}
-}, Ke = class {
+}, Xe = class {
 	observers = /* @__PURE__ */ new Set();
 	currentSnapshot = null;
 	subscribe(e) {
@@ -2717,7 +2771,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		return this.observers.size;
 	}
 };
-function qe(e, t = !1) {
+function Ze(e, t = !1) {
 	return {
 		localState: e.getState("local"),
 		remoteState: e.getState("remote"),
@@ -2728,7 +2782,7 @@ function qe(e, t = !1) {
 		connected: t
 	};
 }
-var Je = class {
+var Qe = class {
 	lastNotificationTime = 0;
 	notificationThrottleMs = 0;
 	constructor(e, t, n = () => !1) {
@@ -2738,8 +2792,8 @@ var Je = class {
 		let e = Date.now();
 		if (this.lastNotificationTime + this.notificationThrottleMs > e) return;
 		this.lastNotificationTime = e;
-		let t = qe(this.stateRef, this.getConnected());
-		H.debug("[session:observer] state snapshot", {
+		let t = Ze(this.stateRef, this.getConnected());
+		B.debug("[session:observer] state snapshot", {
 			local: t.localState,
 			remote: t.remoteState,
 			turn: t.turn,
@@ -2757,9 +2811,9 @@ var Je = class {
 	emitEvent(e) {
 		this.uiObserver.notifyGameEvent(e);
 	}
-}, Ye = class {
-	local = new W("idle");
-	remote = new W("idle");
+}, $e = class {
+	local = new H("idle");
+	remote = new H("idle");
 	localId = null;
 	remoteId = null;
 	history = [];
@@ -2767,10 +2821,10 @@ var Je = class {
 	pendingUndoCount = null;
 	resumeTurn = null;
 	lastStart = null;
-	gamePlugin = new We();
-	stateObserverManager = new Ge();
+	gamePlugin = new Je();
+	stateObserverManager = new Ye();
 	constructor(e, t) {
-		e && (this.localId = e), t && (this.remoteId = t), H.debug("[session:state] created", {
+		e && (this.localId = e), t && (this.remoteId = t), B.debug("[session:state] created", {
 			localId: e,
 			remoteId: t
 		});
@@ -2785,7 +2839,7 @@ var Je = class {
 		return this.remoteId;
 	}
 	setremoteId(e) {
-		this.remoteId = e, H.debug("[session:state] remote id set", { remoteId: e });
+		this.remoteId = e, B.debug("[session:state] remote id set", { remoteId: e });
 	}
 	getState(e) {
 		return this.getPlayerFsm(e).getState();
@@ -2797,7 +2851,7 @@ var Je = class {
 		return this.history.slice();
 	}
 	replaceHistory(e) {
-		H.debug("[session:history] replace", { count: e.length }), this.clearHistory(), e.forEach((e) => {
+		B.debug("[session:history] replace", { count: e.length }), this.clearHistory(), e.forEach((e) => {
 			this.pushHistory({
 				turn: e.turn,
 				player: e.player,
@@ -2807,10 +2861,10 @@ var Je = class {
 	}
 	clearHistory() {
 		let e = this.history.length;
-		this.history.splice(0, this.history.length), H.debug("[session:history] clear", { count: e }), this.notifyHistoryChanged();
+		this.history.splice(0, this.history.length), B.debug("[session:history] clear", { count: e }), this.notifyHistoryChanged();
 	}
 	pushHistory(e) {
-		this.history.push(e), H.debug("[session:history] push", {
+		this.history.push(e), B.debug("[session:history] push", {
 			turn: e.turn,
 			player: e.player,
 			move: e.move,
@@ -2819,7 +2873,7 @@ var Je = class {
 	}
 	popHistory() {
 		let e = this.history.pop() ?? null;
-		return e && (H.debug("[session:history] pop", {
+		return e && (B.debug("[session:history] pop", {
 			turn: e.turn,
 			player: e.player,
 			move: e.move,
@@ -2833,7 +2887,7 @@ var Je = class {
 		let r = this.getState(e);
 		this.getPlayerFsm(e).dispatch(t, n);
 		let i = this.getState(e);
-		H.debug(`[session:fsm] ${e} ${t}`, {
+		B.debug(`[session:fsm] ${e} ${t}`, {
 			from: r,
 			to: i,
 			requested: n,
@@ -2845,7 +2899,7 @@ var Je = class {
 		}), this.notifyStateChanged();
 	}
 	setPendingAction(e) {
-		H.debug("[session:state] pending action set", {
+		B.debug("[session:state] pending action set", {
 			from: this.pendingAction,
 			to: e
 		}), this.pendingAction = e;
@@ -2854,7 +2908,7 @@ var Je = class {
 		return this.pendingAction;
 	}
 	setPendingUndoCount(e) {
-		H.debug("[session:state] pending undo count set", {
+		B.debug("[session:state] pending undo count set", {
 			from: this.pendingUndoCount,
 			to: e
 		}), this.pendingUndoCount = e;
@@ -2863,7 +2917,7 @@ var Je = class {
 		return this.pendingUndoCount;
 	}
 	setLastStart(e) {
-		H.debug("[session:state] last start set", {
+		B.debug("[session:state] last start set", {
 			from: this.lastStart,
 			to: e
 		}), this.lastStart = e;
@@ -2872,7 +2926,7 @@ var Je = class {
 		return this.lastStart;
 	}
 	setResumeTurn(e) {
-		H.debug("[session:state] resume turn set", {
+		B.debug("[session:state] resume turn set", {
 			from: this.resumeTurn,
 			to: e
 		}), this.resumeTurn = e;
@@ -2884,7 +2938,7 @@ var Je = class {
 		return e === "local" ? this.local : this.remote;
 	}
 	notifyStateChanged() {
-		H.debug("[session:state] notify state changed", {
+		B.debug("[session:state] notify state changed", {
 			local: this.getState("local"),
 			remote: this.getState("remote"),
 			turn: this.getTurnCount(),
@@ -2893,21 +2947,21 @@ var Je = class {
 		}), this.stateObserverManager.notifyStateChanged();
 	}
 	notifyHistoryChanged() {
-		H.debug("[session:state] notify history changed", {
+		B.debug("[session:state] notify history changed", {
 			turn: this.getTurnCount(),
 			history: this.history.length,
 			pending: this.pendingAction
 		}), this.stateObserverManager.notifyHistoryChanged();
 	}
 	notifyGameReset() {
-		H.debug("[session:state] notify game reset"), this.stateObserverManager.notifyGameReset();
+		B.debug("[session:state] notify game reset"), this.stateObserverManager.notifyGameReset();
 	}
 	dispatchPair(e, t, n, r) {
 		let i = {
 			local: this.local.getState(),
 			remote: this.remote.getState()
 		};
-		this.local.dispatch(e, t), this.remote.dispatch(n, r), H.debug("[session:fsm] pair dispatch", {
+		this.local.dispatch(e, t), this.remote.dispatch(n, r), B.debug("[session:fsm] pair dispatch", {
 			before: i,
 			after: {
 				local: this.local.getState(),
@@ -2924,32 +2978,32 @@ var Je = class {
 	}
 	gameSnapshot = null;
 	saveGameSnapshot(e) {
-		this.gameSnapshot = e, H.debug("[session:state] game snapshot saved", { snapshot: e });
+		this.gameSnapshot = e, B.debug("[session:state] game snapshot saved", { snapshot: e });
 	}
 	getGameSnapshot() {
 		return this.gameSnapshot;
 	}
 	clearGameSnapshot() {
-		this.gameSnapshot = null, H.debug("[session:state] game snapshot cleared");
+		this.gameSnapshot = null, B.debug("[session:state] game snapshot cleared");
 	}
 	hasPendingAction() {
 		return this.pendingAction !== null;
 	}
 	clearPendingStates() {
-		H.debug("[session:state] pending states cleared", {
+		B.debug("[session:state] pending states cleared", {
 			pending: this.pendingAction,
 			pendingUndoCount: this.pendingUndoCount,
 			resumeTurn: this.resumeTurn
 		}), this.pendingAction = null, this.pendingUndoCount = null, this.resumeTurn = null, this.notifyStateChanged();
 	}
 	initializeUndoRequest(e, t) {
-		this.pendingAction = "undo", this.pendingUndoCount = e, this.resumeTurn = t, H.debug("[session:state] undo request initialized", {
+		this.pendingAction = "undo", this.pendingUndoCount = e, this.resumeTurn = t, B.debug("[session:state] undo request initialized", {
 			undoCount: e,
 			resumeTurn: t
 		});
 	}
 	initializeRestartRequest(e) {
-		this.pendingAction = "restart", this.resumeTurn = e, H.debug("[session:state] restart request initialized", { resumeTurn: e });
+		this.pendingAction = "restart", this.resumeTurn = e, B.debug("[session:state] restart request initialized", { resumeTurn: e });
 	}
 	isPendingUndo() {
 		return this.pendingAction === "undo";
@@ -2958,20 +3012,20 @@ var Je = class {
 		return this.pendingAction === "restart";
 	}
 	applyUndo(e = 1) {
-		H.debug("[session:history] apply undo", { count: e });
+		B.debug("[session:history] apply undo", { count: e });
 		for (let t = 0; t < e; t++) this.popHistory();
 	}
 	resetGame() {
-		H.debug("[session:state] reset game", {
+		B.debug("[session:state] reset game", {
 			local: this.getState("local"),
 			remote: this.getState("remote"),
 			history: this.history.length,
 			lastStart: this.lastStart,
 			pending: this.pendingAction
-		}), this.clearHistory(), this.local = new W("idle"), this.remote = new W("idle"), this.lastStart = null, this.pendingAction = null, this.pendingUndoCount = null, this.resumeTurn = null, this.notifyGameReset(), this.notifyStateChanged();
+		}), this.clearHistory(), this.local = new H("idle"), this.remote = new H("idle"), this.lastStart = null, this.pendingAction = null, this.pendingUndoCount = null, this.resumeTurn = null, this.notifyGameReset(), this.notifyStateChanged();
 	}
 	recordStartPlayer(e) {
-		this.lastStart = e, H.debug("[session:state] start player recorded", { player: e });
+		this.lastStart = e, B.debug("[session:state] start player recorded", { player: e });
 	}
 	getLastMove() {
 		return this.history.length > 0 ? this.history[this.history.length - 1] : null;
@@ -2993,7 +3047,7 @@ var Je = class {
 			remote: this.remote.getState(),
 			lastStart: this.lastStart
 		};
-		e === "local" ? (this.local.dispatch("START", "turn"), this.remote.dispatch("START", "remote_turn"), this.lastStart = "local") : (this.local.dispatch("START", "remote_turn"), this.remote.dispatch("START", "turn"), this.lastStart = "remote"), H.debug("[session:fsm] start dispatch", {
+		e === "local" ? (this.local.dispatch("START", "turn"), this.remote.dispatch("START", "remote_turn"), this.lastStart = "local") : (this.local.dispatch("START", "remote_turn"), this.remote.dispatch("START", "turn"), this.lastStart = "remote"), B.debug("[session:fsm] start dispatch", {
 			before: t,
 			firstPlayer: e,
 			after: {
@@ -3007,7 +3061,7 @@ var Je = class {
 		e === "local" ? this.dispatchPair("SYNC_COMPLETE", "turn", "SYNC_COMPLETE", "remote_turn") : this.dispatchPair("SYNC_COMPLETE", "remote_turn", "SYNC_COMPLETE", "turn"), this.resumeTurn = null;
 	}
 	setGamePlugin(e) {
-		this.gamePlugin = e, H.debug("[session:plugin] game plugin set", {
+		this.gamePlugin = e, B.debug("[session:plugin] game plugin set", {
 			hasInitialize: !!e.initialize,
 			hasCleanup: !!e.cleanup
 		}), e.initialize && e.initialize();
@@ -3017,7 +3071,7 @@ var Je = class {
 	}
 	validateMove(e) {
 		let t = this.buildGameState(), n = this.gamePlugin.validateMove(e, t);
-		return H.debug("[session:plugin] validate move", {
+		return B.debug("[session:plugin] validate move", {
 			move: e,
 			result: n,
 			local: t.localState,
@@ -3028,14 +3082,14 @@ var Je = class {
 	}
 	checkWin() {
 		let e = this.buildGameState(), t = this.gamePlugin.checkWin(e, this.getHistory());
-		return H.debug("[session:plugin] check win", {
+		return B.debug("[session:plugin] check win", {
 			winner: t,
 			turn: e.turn,
 			history: e.history.length
 		}), t;
 	}
 	cleanupGame() {
-		this.gamePlugin.cleanup && this.gamePlugin.cleanup(), H.debug("[session:plugin] cleanup game");
+		this.gamePlugin.cleanup && this.gamePlugin.cleanup(), B.debug("[session:plugin] cleanup game");
 	}
 	buildGameState() {
 		return {
@@ -3046,7 +3100,7 @@ var Je = class {
 			lastStart: this.getLastStart()
 		};
 	}
-}, Xe = class {
+}, et = class {
 	localPeerId;
 	remotePeerId;
 	isConnected = !1;
@@ -3054,7 +3108,7 @@ var Je = class {
 	mediaStateListener = () => {};
 	constructor(e, t, n) {
 		this.client = e, this.bus = t, this.localPeerId = n ?? null, this.remotePeerId = null, this.client.onMessage((e) => {
-			let t = Be(e);
+			let t = We(e);
 			!t || typeof t != "object" || !t.type || this.bus.dispatch({
 				...t,
 				type: t.type,
@@ -3097,7 +3151,7 @@ var Je = class {
 	onMediaStateChange(e) {
 		this.mediaStateListener = e;
 	}
-}, Ze = (e, t, n) => new Xe(e, t, n), Qe = class {
+}, tt = (e, t, n) => new et(e, t, n), nt = class {
 	state;
 	bus;
 	net;
@@ -3117,14 +3171,14 @@ var Je = class {
 	getSid() {
 		return this.sid;
 	}
-}, G = null, $e = (e, t, n, r) => {
-	G = new Qe(e, t, n, r);
-}, K = () => {
-	if (!G) throw Error("[SessionContext] Not initialized. Call initializeContext() first.");
-	return G;
-}, q = () => K().getState(), J = () => K().getBus(), et = () => K().getSid(), Y = (e) => K().getNet().send(e), tt = (e) => {
-	let t = q(), n = J(), r = et();
-	if (H.debug("[session:ready] received", {
+}, U = null, rt = (e, t, n, r) => {
+	U = new nt(e, t, n, r);
+}, W = () => {
+	if (!U) throw Error("[SessionContext] Not initialized. Call initializeContext() first.");
+	return U;
+}, G = () => W().getState(), K = () => W().getBus(), it = () => W().getSid(), q = (e) => W().getNet().send(e), at = (e) => {
+	let t = G(), n = K(), r = it();
+	if (B.debug("[session:ready] received", {
 		from: e.from,
 		sid: e.sid,
 		localSid: r,
@@ -3135,10 +3189,10 @@ var Je = class {
 			console.warn("[Ready] Cannot dispatch READY from current state", { state: t.getState("local") });
 			return;
 		}
-		t.dispatch("local", "READY"), t.dispatch("remote", "REMOTE_READY"), Y({
+		t.dispatch("local", "READY"), t.dispatch("remote", "REMOTE_READY"), q({
 			type: "READY",
 			sid: r
-		}), H.debug("[session:ready] local toggled", {
+		}), B.debug("[session:ready] local toggled", {
 			local: t.getState("local"),
 			remote: t.getState("remote")
 		});
@@ -3156,13 +3210,13 @@ var Je = class {
 		console.warn("[Ready] Cannot dispatch READY for remote peer", { state: t.getState("remote") });
 		return;
 	}
-	t.dispatch("remote", "READY"), t.dispatch("local", "REMOTE_READY"), H.debug("[session:ready] remote toggled", {
+	t.dispatch("remote", "READY"), t.dispatch("local", "REMOTE_READY"), B.debug("[session:ready] remote toggled", {
 		local: t.getState("local"),
 		remote: t.getState("remote")
 	});
-}, nt = (e) => e ? e === "local" ? "remote" : "local" : Math.random() < .5 ? "local" : "remote", rt = (e) => {
-	let t = q();
-	if (H.debug("[session:start] received", {
+}, ot = (e) => e ? e === "local" ? "remote" : "local" : Math.random() < .5 ? "local" : "remote", st = (e) => {
+	let t = G();
+	if (B.debug("[session:start] received", {
 		from: e.from,
 		payload: e.payload,
 		local: t.getState("local"),
@@ -3176,11 +3230,11 @@ var Je = class {
 			});
 			return;
 		}
-		let e = nt(t.getLastStart()), n = e === "local" ? "turn" : "remote_turn", r = e === "local" ? "remote_turn" : "turn";
-		t.getHistory().length > 0 && (t.clearHistory(), H.debug("[session:start] cleared previous match history")), t.setLastStart(e), t.dispatch("local", "START", n), t.dispatch("remote", "REMOTE_START", r), Y({
+		let e = ot(t.getLastStart()), n = e === "local" ? "turn" : "remote_turn", r = e === "local" ? "remote_turn" : "turn";
+		t.getHistory().length > 0 && (t.clearHistory(), B.debug("[session:start] cleared previous match history")), t.setLastStart(e), t.dispatch("local", "START", n), t.dispatch("remote", "REMOTE_START", r), q({
 			type: "START",
 			payload: { starter: e === "local" ? "sender" : "receiver" }
-		}), H.debug("[session:start] local started", { nextStarter: e });
+		}), B.debug("[session:start] local started", { nextStarter: e });
 		return;
 	}
 	let n = e.payload?.starter;
@@ -3196,10 +3250,10 @@ var Je = class {
 		return;
 	}
 	let r = n === "sender" ? "remote" : "local", i = r === "local" ? "turn" : "remote_turn", a = r === "local" ? "remote_turn" : "turn";
-	t.getHistory().length > 0 && (t.clearHistory(), H.debug("[session:start] cleared previous match history")), t.setLastStart(r), t.dispatch("local", "REMOTE_START", i), t.dispatch("remote", "START", a), H.debug("[session:start] remote started", { starter: r });
-}, it = (e) => {
-	let t = q(), n = e.payload;
-	if (H.debug("[session:move] received", {
+	t.getHistory().length > 0 && (t.clearHistory(), B.debug("[session:start] cleared previous match history")), t.setLastStart(r), t.dispatch("local", "REMOTE_START", i), t.dispatch("remote", "START", a), B.debug("[session:start] remote started", { starter: r });
+}, ct = (e) => {
+	let t = G(), n = e.payload;
+	if (B.debug("[session:move] received", {
 		from: e.from,
 		payload: n,
 		local: t.getState("local"),
@@ -3225,20 +3279,20 @@ var Je = class {
 			turn: r,
 			player: "local",
 			move: n
-		}), Y({
+		}), q({
 			type: "MOVE",
 			turn: r,
 			payload: n
-		}), H.debug("[session:move] local move sent", {
+		}), B.debug("[session:move] local move sent", {
 			turn: r,
 			payload: n
 		});
 		let i = t.checkWin();
 		if (i) {
-			H.debug("[session:move] game over detected", {
+			B.debug("[session:move] game over detected", {
 				winner: i,
 				turn: r
-			}), t.dispatch("local", "GAME_OVER"), t.dispatch("remote", "GAME_OVER"), t.cleanupGame(), H.debug("[session:move] local game over applied", {
+			}), t.dispatch("local", "GAME_OVER"), t.dispatch("remote", "GAME_OVER"), t.cleanupGame(), B.debug("[session:move] local game over applied", {
 				winner: i,
 				turn: r
 			});
@@ -3267,23 +3321,23 @@ var Je = class {
 	});
 	let a = t.checkWin();
 	if (a) {
-		H.debug("[session:move] game over detected", {
+		B.debug("[session:move] game over detected", {
 			winner: a,
 			turn: i
-		}), t.dispatch("local", "GAME_OVER"), t.dispatch("remote", "GAME_OVER"), t.cleanupGame(), H.debug("[session:move] remote game over applied", {
+		}), t.dispatch("local", "GAME_OVER"), t.dispatch("remote", "GAME_OVER"), t.cleanupGame(), B.debug("[session:move] remote game over applied", {
 			winner: a,
 			turn: i
 		});
 		return;
 	}
-	H.debug("[session:move] remote move applied", {
+	B.debug("[session:move] remote move applied", {
 		turn: i,
 		payload: n
 	});
-}, at = (e) => e === "undo" || e === "restart", ot = (e) => {
+}, lt = (e) => e === "undo" || e === "restart", ut = (e) => {
 	if (e.type !== "APPROVE" && e.type !== "REJECT") return;
-	let t = q(), n = e.payload, r = t.getPendingAction(), i = r ?? (e.from === "local" && e.type === "REJECT" && at(n?.action) ? n.action : null);
-	if (H.debug("[session:request] received", {
+	let t = G(), n = e.payload, r = t.getPendingAction(), i = r ?? (e.from === "local" && e.type === "REJECT" && lt(n?.action) ? n.action : null);
+	if (B.debug("[session:request] received", {
 		type: e.type,
 		from: e.from,
 		action: i,
@@ -3303,13 +3357,13 @@ var Je = class {
 	}
 	if (e.from === "local") {
 		if (!r && e.type === "REJECT") {
-			Y({
+			q({
 				type: "REJECT",
 				payload: {
 					action: i,
 					reason: n?.reason ?? "rejected"
 				}
-			}), H.debug("[session:request] local auto rejected", {
+			}), B.debug("[session:request] local auto rejected", {
 				action: i,
 				reason: n?.reason
 			});
@@ -3320,23 +3374,23 @@ var Je = class {
 				console.warn("[Request] Cannot APPROVE from current state");
 				return;
 			}
-			t.dispatchApprove(), i === "undo" ? t.applyUndo(t.getPendingUndoCount() ?? 1) : i === "restart" && t.resetGame(), Y({
+			t.dispatchApprove(), i === "undo" ? t.applyUndo(t.getPendingUndoCount() ?? 1) : i === "restart" && t.resetGame(), q({
 				type: "APPROVE",
 				payload: { action: i }
-			}), t.clearPendingStates(), H.debug("[session:request] local approved", { action: i });
+			}), t.clearPendingStates(), B.debug("[session:request] local approved", { action: i });
 			return;
 		}
 		if (!t.canAction("local", "REJECT")) {
 			console.warn("[Request] Cannot REJECT from current state");
 			return;
 		}
-		t.dispatchReject(), Y({
+		t.dispatchReject(), q({
 			type: "REJECT",
 			payload: {
 				action: i,
 				reason: n?.reason ?? "rejected"
 			}
-		}), t.clearPendingStates(), H.debug("[session:request] local rejected", { action: i });
+		}), t.clearPendingStates(), B.debug("[session:request] local rejected", { action: i });
 		return;
 	}
 	if (e.type === "APPROVE") {
@@ -3344,58 +3398,58 @@ var Je = class {
 			console.warn("[Request] Cannot APPROVE from current state (remote approved)");
 			return;
 		}
-		t.dispatchApprove(), i === "undo" ? t.applyUndo(t.getPendingUndoCount() ?? 1) : i === "restart" && t.resetGame(), t.clearPendingStates(), H.debug("[session:request] remote approved", { action: i });
+		t.dispatchApprove(), i === "undo" ? t.applyUndo(t.getPendingUndoCount() ?? 1) : i === "restart" && t.resetGame(), t.clearPendingStates(), B.debug("[session:request] remote approved", { action: i });
 		return;
 	}
 	if (!t.canAction("local", "REJECT")) {
 		console.warn("[Request] Cannot REJECT from current state (remote rejected)"), t.clearPendingStates();
 		return;
 	}
-	t.dispatchReject(), t.clearPendingStates(), H.debug("[session:request] remote rejected", { action: i });
-}, st = (e) => e === "local" ? "remote" : "local", ct = () => {
-	let e = q();
+	t.dispatchReject(), t.clearPendingStates(), B.debug("[session:request] remote rejected", { action: i });
+}, dt = (e) => e === "local" ? "remote" : "local", ft = () => {
+	let e = G();
 	return e.getResumeTurn() ?? (e.getState("local") === "turn" ? "local" : "remote");
-}, lt = () => {
-	let e = q(), t = ct();
+}, pt = () => {
+	let e = G(), t = ft();
 	return {
 		history: e.getHistory(),
 		lastStart: e.getLastStart(),
 		turn: t,
 		resumeTurn: e.getResumeTurn()
 	};
-}, ut = () => {
-	let e = q();
+}, mt = () => {
+	let e = G();
 	return e.getState("local") === "syncing" || e.getState("remote") === "syncing" || e.getState("remote") === "offline" || e.getResumeTurn() !== null;
-}, dt = () => {
-	let e = q();
+}, ht = () => {
+	let e = G();
 	if (e.getState("local") !== "syncing") {
-		if (!e.canAction("local", "SYNC")) return H.debug("[session:sync] local cannot enter sync", { local: e.getState("local") }), !1;
+		if (!e.canAction("local", "SYNC")) return B.debug("[session:sync] local cannot enter sync", { local: e.getState("local") }), !1;
 		e.dispatch("local", "SYNC", "syncing");
 	}
 	if (e.getState("remote") === "offline") {
-		if (!e.canAction("remote", "ONLINE")) return H.debug("[session:sync] offline remote cannot enter sync", { remote: e.getState("remote") }), !1;
+		if (!e.canAction("remote", "ONLINE")) return B.debug("[session:sync] offline remote cannot enter sync", { remote: e.getState("remote") }), !1;
 		e.dispatch("remote", "ONLINE", "syncing");
 	} else if (e.getState("remote") !== "syncing") {
-		if (!e.canAction("remote", "SYNC")) return H.debug("[session:sync] remote cannot enter sync", { remote: e.getState("remote") }), !1;
+		if (!e.canAction("remote", "SYNC")) return B.debug("[session:sync] remote cannot enter sync", { remote: e.getState("remote") }), !1;
 		e.dispatch("remote", "SYNC", "syncing");
 	}
 	return e.getState("local") === "syncing" && e.getState("remote") === "syncing";
-}, X = (e, t) => {
-	let n = q(), r = t ? st : (e) => e;
+}, J = (e, t) => {
+	let n = G(), r = t ? dt : (e) => e;
 	e.history && e.history.length > 0 ? n.replaceHistory(e.history.map((e) => ({
 		...e,
 		player: r(e.player)
 	}))) : n.clearHistory(), e.lastStart ? n.setLastStart(r(e.lastStart)) : n.setLastStart(null);
-	let i = e.resumeTurn ? r(e.resumeTurn) : e.turn ? r(e.turn) : ct();
-	H.debug("[session:sync] state restored", {
+	let i = e.resumeTurn ? r(e.resumeTurn) : e.turn ? r(e.turn) : ft();
+	B.debug("[session:sync] state restored", {
 		historyLength: n.getHistory().length,
 		lastStart: n.getLastStart(),
 		nextTurnPlayer: i,
 		mapped: t
-	}), dt() && n.dispatchSyncComplete(i);
-}, ft = (e) => {
-	let t = q();
-	if (H.debug("[session:sync] received", {
+	}), ht() && n.dispatchSyncComplete(i);
+}, gt = (e) => {
+	let t = G();
+	if (B.debug("[session:sync] received", {
 		type: e.type,
 		from: e.from,
 		payload: e.payload,
@@ -3409,37 +3463,37 @@ var Je = class {
 				console.warn("[Sync] Cannot SYNC from current state");
 				return;
 			}
-			t.getState("local") !== "syncing" && t.dispatch("local", "SYNC", "syncing"), t.getState("remote") !== "syncing" && t.dispatch("remote", "SYNC", "syncing"), Y({
+			t.getState("local") !== "syncing" && t.dispatch("local", "SYNC", "syncing"), t.getState("remote") !== "syncing" && t.dispatch("remote", "SYNC", "syncing"), q({
 				type: "SYNC_REQUEST",
 				from: "",
 				payload: e.payload
-			}), H.debug("[session:sync] request sent");
+			}), B.debug("[session:sync] request sent");
 			return;
 		}
-		let n = lt();
-		Y({
+		let n = pt();
+		q({
 			type: "SYNC_STATE",
 			from: "",
 			payload: n
-		}), H.debug("[session:sync] state sent", n), ut() && X(n, !1);
+		}), B.debug("[session:sync] state sent", n), mt() && J(n, !1);
 		return;
 	}
 	if (e.type === "SYNC_STATE") {
 		if (e.from === "local") {
-			let e = lt();
-			Y({
+			let e = pt();
+			q({
 				type: "SYNC_STATE",
 				from: "",
 				payload: e
-			}), H.debug("[session:sync] state pushed", e), ut() && X(e, !1);
+			}), B.debug("[session:sync] state pushed", e), mt() && J(e, !1);
 			return;
 		}
-		X(e.payload || {}, !0);
+		J(e.payload || {}, !0);
 	}
-}, pt = (e) => {
+}, _t = (e) => {
 	if (e.type !== "UNDO") return;
-	let t = q(), n = J();
-	if (H.debug("[session:undo] received", {
+	let t = G(), n = K();
+	if (B.debug("[session:undo] received", {
 		from: e.from,
 		local: t.getState("local"),
 		remote: t.getState("remote"),
@@ -3456,10 +3510,10 @@ var Je = class {
 			console.warn("[Undo] Not enough history to undo", { count: n });
 			return;
 		}
-		t.initializeUndoRequest(n, r), t.dispatch("local", "UNDO"), t.dispatch("remote", "REMOTE_UNDO"), Y({
+		t.initializeUndoRequest(n, r), t.dispatch("local", "UNDO"), t.dispatch("remote", "REMOTE_UNDO"), q({
 			type: "UNDO",
 			payload: { count: n }
-		}), H.debug("[session:undo] local requested", { undoCount: n });
+		}), B.debug("[session:undo] local requested", { undoCount: n });
 		return;
 	}
 	if (t.hasPendingAction()) {
@@ -3492,14 +3546,14 @@ var Je = class {
 		return;
 	}
 	let a = t.getState("local") === "turn" ? "local" : "remote";
-	t.initializeUndoRequest(i, a), t.dispatch("local", "REMOTE_UNDO"), t.dispatch("remote", "UNDO"), H.debug("[session:undo] remote requested", {
+	t.initializeUndoRequest(i, a), t.dispatch("local", "REMOTE_UNDO"), t.dispatch("remote", "UNDO"), B.debug("[session:undo] remote requested", {
 		count: i,
 		resumePlayer: a
 	});
-}, mt = (e) => {
+}, vt = (e) => {
 	if (e.type !== "RESTART") return;
-	let t = q(), n = J();
-	if (H.debug("[session:restart] received", {
+	let t = G(), n = K();
+	if (B.debug("[session:restart] received", {
 		from: e.from,
 		local: t.getState("local"),
 		remote: t.getState("remote"),
@@ -3512,7 +3566,7 @@ var Je = class {
 			return;
 		}
 		let e = t.getState("local") === "turn" ? "local" : "remote";
-		t.initializeRestartRequest(e), t.dispatch("local", "RESTART"), t.dispatch("remote", "REMOTE_RESTART"), Y({ type: "RESTART" }), H.debug("[session:restart] local requested", { resumePlayer: e });
+		t.initializeRestartRequest(e), t.dispatch("local", "RESTART"), t.dispatch("remote", "REMOTE_RESTART"), q({ type: "RESTART" }), B.debug("[session:restart] local requested", { resumePlayer: e });
 		return;
 	}
 	if (t.hasPendingAction()) {
@@ -3530,11 +3584,11 @@ var Je = class {
 		return;
 	}
 	let r = t.getState("local") === "turn" ? "local" : "remote";
-	t.initializeRestartRequest(r), t.dispatch("local", "REMOTE_RESTART"), t.dispatch("remote", "RESTART"), H.debug("[session:restart] remote requested", { resumePlayer: r });
-}, Z = (e) => {
+	t.initializeRestartRequest(r), t.dispatch("local", "REMOTE_RESTART"), t.dispatch("remote", "RESTART"), B.debug("[session:restart] remote requested", { resumePlayer: r });
+}, yt = (e) => {
 	if (e.type !== "OFFLINE" && e.type !== "ONLINE") return;
-	let t = q(), n = J();
-	if (H.debug("[session:connection] received", {
+	let t = G(), n = K();
+	if (B.debug("[session:connection] received", {
 		type: e.type,
 		from: e.from,
 		local: t.getState("local"),
@@ -3551,21 +3605,21 @@ var Je = class {
 			return;
 		}
 		let e = t.getResumeTurn() ?? (t.getState("local") === "turn" ? "local" : "remote");
-		t.setResumeTurn(e), t.dispatch("remote", "OFFLINE", "offline"), H.debug("[session:connection] remote offline", { currentTurn: e });
+		t.setResumeTurn(e), t.dispatch("remote", "OFFLINE", "offline"), B.debug("[session:connection] remote offline", { currentTurn: e });
 		return;
 	}
 	if (t.getState("remote") !== "offline") {
-		H.debug("[session:connection] ignored online while remote is not offline", { remote: t.getState("remote") });
+		B.debug("[session:connection] ignored online while remote is not offline", { remote: t.getState("remote") });
 		return;
 	}
 	if (!t.canAction("remote", "ONLINE")) {
 		console.warn("[Offline] Cannot transition to ONLINE from current state");
 		return;
 	}
-	t.dispatch("remote", "ONLINE", "syncing"), n.emit("SYNC_STATE", void 0, "local"), H.debug("[session:connection] remote online, sync state pushed");
-}, ht = (e) => {
-	e.register("READY", tt), e.register("START", rt), e.register("MOVE", it), e.register("UNDO", pt), e.register("RESTART", mt), e.register("SYNC_REQUEST", ft), e.register("SYNC_STATE", ft), e.register("OFFLINE", Z), e.register("ONLINE", Z), e.register("APPROVE", ot), e.register("REJECT", ot);
-}, gt = class {
+	t.dispatch("remote", "ONLINE", "syncing"), n.emit("SYNC_STATE", void 0, "local"), B.debug("[session:connection] remote online, sync state pushed");
+}, bt = (e) => {
+	e.register("READY", at), e.register("START", st), e.register("MOVE", ct), e.register("UNDO", _t), e.register("RESTART", vt), e.register("SYNC_REQUEST", gt), e.register("SYNC_STATE", gt), e.register("OFFLINE", yt), e.register("ONLINE", yt), e.register("APPROVE", ut), e.register("REJECT", ut);
+}, xt = class {
 	constructor(e) {
 		this.bus = e;
 	}
@@ -3590,15 +3644,12 @@ var Je = class {
 	reject() {
 		this.bus.emit("REJECT");
 	}
-	rejoin(e) {
-		this.bus.emit("REJOIN", { sid: e });
-	}
-}, _t = (e, t) => {
-	let n = new Ve(), r = new Ye(null, null), i = new Ke(), a = Ze(e, n, null), o = new Je(r, i, () => a.getIsConnected());
-	r.subscribeStateObserver(o), $e(r, n, a, t), ht(n);
-	let s = new gt(n);
+}, St = (e, t) => {
+	let n = new Ge(), r = new $e(null, null), i = new Xe(), a = tt(e, n, null), o = new Qe(r, i, () => a.getIsConnected());
+	r.subscribeStateObserver(o), rt(r, n, a, t), bt(n);
+	let s = new xt(n);
 	return a.onConnectionChange((e) => {
-		i.notifyConnectionChange(e), i.notifyStateChange(qe(r, e));
+		i.notifyConnectionChange(e), i.notifyStateChange(Ze(r, e));
 	}), {
 		bus: n,
 		state: r,
@@ -3607,8 +3658,9 @@ var Je = class {
 		actions: s,
 		send: a.send.bind(a)
 	};
-}, vt = "wss://signal.jiahengli.xyz", yt = (e) => ({
-	screen: "lobby",
+}, Ct = "wss://signal.jiahengli.xyz", Y = (e) => ({
+	screen: "pairing",
+	theme: e?.theme || "light",
 	gameTitle: e?.gameTitle || "P2P Lockstep",
 	sessionId: e?.sessionId || "default-session",
 	signalUrl: e?.signalUrl || "wss://signal.jiahengli.xyz",
@@ -3634,54 +3686,70 @@ var Je = class {
 	historyLength: 0,
 	lastStart: null,
 	lastError: ""
-}), Q = {
+}), wt = "p2p-lockstep-theme", X = (e) => e === "light" || e === "dark", Tt = () => {
+	try {
+		let e = window.localStorage.getItem(wt);
+		return X(e) ? e : null;
+	} catch {
+		return null;
+	}
+}, Et = (e) => {
+	try {
+		window.localStorage.setItem(wt, e);
+	} catch {}
+}, Z = {
 	open: !1,
 	title: "",
 	description: "",
 	confirmLabel: "Approve",
 	cancelLabel: "Reject"
-}, bt = {
+}, Dt = {
 	open: !1,
 	message: ""
-}, xt = [
+}, Ot = [
 	"turn",
 	"remote_turn",
 	"approving",
 	"waiting_approval",
 	"syncing"
-], St = class extends HTMLElement {
+], kt = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"game-title",
 			"session-id",
-			"signal-url"
+			"signal-url",
+			"theme"
 		];
 	}
 	#e = !1;
-	#t = yt();
-	#n = Q;
-	#r = bt;
+	#t = Y();
+	#n = Z;
+	#r = Dt;
 	#i = null;
 	#a = null;
 	#o = null;
 	#s = null;
-	#c = new Re();
+	#c = new He();
 	#l = null;
 	#u = null;
 	#d = null;
 	#f = null;
 	connectedCallback() {
-		this.#e || (this.#e = !0, this.#t = yt({
+		if (this.#e) return;
+		this.#e = !0;
+		let e = X(this.getAttribute("theme")) ? this.getAttribute("theme") : "light", t = Tt() ?? e;
+		this.#t = Y({
 			gameTitle: this.getAttribute("game-title") ?? void 0,
 			sessionId: this.getAttribute("session-id") ?? void 0,
-			signalUrl: this.getAttribute("signal-url") ?? void 0
-		}), this.render(), this.addEventListener("lockstep-register", this.#C), this.addEventListener("lockstep-connect", this.#w), this.addEventListener("lockstep-signal-change", this.#T), this.addEventListener("lockstep-target-change", this.#E), this.addEventListener("lockstep-share-detected", this.#D), this.addEventListener("lockstep-copy-share", this.#O), this.addEventListener("lockstep-ready", this.#k), this.addEventListener("lockstep-start", this.#A), this.addEventListener("lockstep-undo", this.#j), this.addEventListener("lockstep-restart", this.#M), this.addEventListener("lockstep-dialog-confirm", this.#N), this.addEventListener("lockstep-dialog-cancel", this.#P), this.#p(), this.#m());
+			signalUrl: this.getAttribute("signal-url") ?? void 0,
+			theme: t
+		}), this.getAttribute("theme") !== t && this.setAttribute("theme", t), this.render(), this.addEventListener("lockstep-register", this.#C), this.addEventListener("lockstep-connect", this.#w), this.addEventListener("lockstep-signal-change", this.#T), this.addEventListener("lockstep-target-change", this.#E), this.addEventListener("lockstep-share-detected", this.#D), this.addEventListener("lockstep-copy-share", this.#O), this.addEventListener("lockstep-theme-change", this.#k), this.addEventListener("lockstep-ready", this.#A), this.addEventListener("lockstep-start", this.#j), this.addEventListener("lockstep-undo", this.#M), this.addEventListener("lockstep-restart", this.#N), this.addEventListener("lockstep-dialog-confirm", this.#P), this.addEventListener("lockstep-dialog-cancel", this.#F), this.#p(), this.#m();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("lockstep-register", this.#C), this.removeEventListener("lockstep-connect", this.#w), this.removeEventListener("lockstep-signal-change", this.#T), this.removeEventListener("lockstep-target-change", this.#E), this.removeEventListener("lockstep-share-detected", this.#D), this.removeEventListener("lockstep-copy-share", this.#O), this.removeEventListener("lockstep-ready", this.#k), this.removeEventListener("lockstep-start", this.#A), this.removeEventListener("lockstep-undo", this.#j), this.removeEventListener("lockstep-restart", this.#M), this.removeEventListener("lockstep-dialog-confirm", this.#N), this.removeEventListener("lockstep-dialog-cancel", this.#P), this.#d &&= (window.clearTimeout(this.#d), null), this.#c.disconnect();
+		this.removeEventListener("lockstep-register", this.#C), this.removeEventListener("lockstep-connect", this.#w), this.removeEventListener("lockstep-signal-change", this.#T), this.removeEventListener("lockstep-target-change", this.#E), this.removeEventListener("lockstep-share-detected", this.#D), this.removeEventListener("lockstep-copy-share", this.#O), this.removeEventListener("lockstep-theme-change", this.#k), this.removeEventListener("lockstep-ready", this.#A), this.removeEventListener("lockstep-start", this.#j), this.removeEventListener("lockstep-undo", this.#M), this.removeEventListener("lockstep-restart", this.#N), this.removeEventListener("lockstep-dialog-confirm", this.#P), this.removeEventListener("lockstep-dialog-cancel", this.#F), this.#d &&= (window.clearTimeout(this.#d), null), this.#c.disconnect();
 	}
 	attributeChangedCallback(e, t, n) {
-		this.#e && (e === "game-title" && n && this.#y({ gameTitle: n }), e === "session-id" && n && this.#y({ sessionId: n }), e === "signal-url" && n && this.#y({ signalUrl: n }));
+		this.#e && (e === "game-title" && n && this.#y({ gameTitle: n }), e === "session-id" && n && this.#y({ sessionId: n }), e === "signal-url" && n && this.#y({ signalUrl: n }), e === "theme" && X(n) && this.#y({ theme: n }));
 	}
 	getRuntime() {
 		return this.#u;
@@ -3691,24 +3759,24 @@ var Je = class {
 	}
 	render() {
 		this.className = "block min-h-svh bg-[var(--lock-bg-deep)] text-[var(--lock-paper)]", this.innerHTML = `
-      <div class="relative min-h-svh overflow-hidden bg-[radial-gradient(circle_at_18%_8%,rgba(255,255,255,0.85),transparent_28%),linear-gradient(145deg,var(--lock-bg),var(--lock-bg-deep))]">
-        <div class="pointer-events-none absolute inset-0 hidden opacity-[0.45] sm:block bg-[linear-gradient(rgba(28,28,26,0.035)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,26,0.03)_1px,transparent_1px)] bg-[size:3.25rem_3.25rem]"></div>
+      <div class="lock-app-bg relative min-h-svh overflow-hidden">
+        <div class="lock-grid-bg pointer-events-none absolute inset-0 hidden opacity-[0.45] sm:block"></div>
 
         <main class="relative mx-auto flex min-h-svh max-w-7xl flex-col px-3 py-3 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
-          <header class="lock-enter mb-5 hidden flex-wrap items-center justify-between gap-4 rounded-[1.25rem] border border-[var(--lock-border)] bg-[rgba(255,255,252,0.72)] px-4 py-3 shadow-sm backdrop-blur-xl sm:flex">
+          <header class="lock-panel lock-enter mb-5 hidden flex-wrap items-center justify-between gap-4 rounded-[1.25rem] px-4 py-3 sm:flex">
             <div class="flex items-center gap-3">
               <div>
-                <p class="text-sm font-semibold text-[var(--lock-paper)]">P2P Lockstep</p>
-                <p class="text-xs text-[var(--lock-muted)]">private match console</p>
+                <p class="text-sm font-semibold text-[var(--lock-paper)]">${this.#t.gameTitle}</p>
+                <p class="text-xs text-[var(--lock-muted)]">direct peer match</p>
               </div>
             </div>
-            <div data-shell-connection-state class="rounded-full border border-[var(--lock-border)] bg-[rgba(255,255,252,0.78)] px-3 py-1 text-xs uppercase tracking-[0.16em] text-[var(--lock-muted)]">
+            <div data-shell-connection-state class="lock-control rounded-full border px-3 py-1 text-xs uppercase tracking-[0.16em] text-[var(--lock-muted)]">
               ${this.#t.connectionState}
             </div>
           </header>
 
           <div class="flex-1 lock-enter">
-            <p2p-lockstep-lobby-page ${this.#t.screen === "lobby" ? "" : "hidden"}></p2p-lockstep-lobby-page>
+            <p2p-lockstep-pairing-page ${this.#t.screen === "pairing" ? "" : "hidden"}></p2p-lockstep-pairing-page>
             <p2p-lockstep-game-page ${this.#t.screen === "game" ? "" : "hidden"}></p2p-lockstep-game-page>
           </div>
         </main>
@@ -3716,10 +3784,10 @@ var Je = class {
         <p2p-lockstep-confirm-dialog></p2p-lockstep-confirm-dialog>
         <p2p-lockstep-toast-message></p2p-lockstep-toast-message>
       </div>
-    `, this.#i = this.querySelector("p2p-lockstep-lobby-page"), this.#a = this.querySelector("p2p-lockstep-game-page"), this.#o = this.querySelector("p2p-lockstep-confirm-dialog"), this.#s = this.querySelector("p2p-lockstep-toast-message"), this.#b();
+    `, this.#i = this.querySelector("p2p-lockstep-pairing-page"), this.#a = this.querySelector("p2p-lockstep-game-page"), this.#o = this.querySelector("p2p-lockstep-confirm-dialog"), this.#s = this.querySelector("p2p-lockstep-toast-message"), this.#b();
 	}
 	#p() {
-		this.#l = _t(this.#c, this.#t.sessionId), this.#u = {
+		this.#l = St(this.#c, this.#t.sessionId), this.#u = {
 			setGamePlugin: (e) => this.#l?.state.setGamePlugin(e),
 			actions: { move: (e) => this.#l?.actions.move(e) },
 			observer: {
@@ -3748,7 +3816,7 @@ var Je = class {
 		});
 	}
 	async #m() {
-		let e = Ce();
+		let e = we();
 		e.signalUrl && this.#y({ signalUrl: e.signalUrl }), e.peerId && this.#y({ targetId: e.peerId }), this.#t.signalUrl && (await this.#h(this.#t.signalUrl, !0), e.peerId && await this.#g(e.peerId, !0));
 	}
 	async #h(e, t = !1) {
@@ -3787,7 +3855,8 @@ var Je = class {
 				remotePeerId: n,
 				connecting: !0,
 				connectionState: "connecting",
-				screen: "game"
+				screen: "game",
+				lastError: ""
 			}), this.#l?.net.setPeerIds({
 				local: this.#t.peerId || null,
 				remote: n
@@ -3804,7 +3873,7 @@ var Je = class {
 		}
 	}
 	#_(e) {
-		let t = e.connected, n = e.localState === "ready", r = e.remoteState === "ready", i = t && e.localState === "idle", a = t && e.localState === "could_start", o = t && (e.localState === "turn" || e.localState === "remote_turn") && !e.pendingAction && e.history.length > 0, s = t && (e.localState === "turn" || e.localState === "remote_turn") && !e.pendingAction, c = xt.includes(e.localState) || e.localState === "offline" && e.lastStart !== null, l = e.localState === "turn" ? "me" : e.localState === "remote_turn" ? "peer" : null;
+		let t = e.connected, n = e.localState === "ready", r = e.remoteState === "ready", i = t && e.localState === "idle", a = t && e.localState === "could_start", o = t && (e.localState === "turn" || e.localState === "remote_turn") && !e.pendingAction && e.history.length > 0, s = t && (e.localState === "turn" || e.localState === "remote_turn") && !e.pendingAction, c = Ot.includes(e.localState) || e.localState === "offline" && e.lastStart !== null, l = e.localState === "turn" ? "me" : e.localState === "remote_turn" ? "peer" : null;
 		this.#y({
 			readySelf: n,
 			readyPeer: r,
@@ -3829,7 +3898,7 @@ var Je = class {
 			description: e.pendingAction === "undo" ? "Your peer wants to roll the match back. Approve the undo or reject it and keep the current board." : "Your peer wants to restart the match. Approve to reset the board shell or reject to continue.",
 			confirmLabel: "Approve",
 			cancelLabel: "Reject"
-		} : this.#n.open && (this.#n = Q), this.#b();
+		} : this.#n.open && (this.#n = Z), this.#b();
 	}
 	#v(e) {
 		let t = this.#t.screen === "game", n = this.#c.peerState(), r = this.#c.getRemotePeerId() ?? this.#t.remotePeerId, i = this.#c.getLocalPeerId() ?? this.#t.peerId, a = e || n === "requesting" || t, o = n === "connected" ? "connected" : n === "requesting" ? "connecting" : t ? "offline" : i ? "registered" : "idle";
@@ -3839,7 +3908,7 @@ var Je = class {
 			connected: e,
 			connecting: n === "requesting",
 			connectionState: o,
-			screen: a ? "game" : "lobby"
+			screen: a ? "game" : "pairing"
 		}), e ? this.#x("Peer connected. Game page is live.") : n === "requesting" && !t ? this.#x("Peer connection request received.") : t && i && this.#x("Peer disconnected. Waiting for reconnect.");
 	}
 	#y(e) {
@@ -3851,9 +3920,10 @@ var Je = class {
 	#b() {
 		let e = this.#i, t = this.#a, n = this.#o, r = this.#s;
 		if (!e || !t || !n || !r) return;
-		e.toggleAttribute("hidden", this.#t.screen !== "lobby"), t.toggleAttribute("hidden", this.#t.screen !== "game");
+		e.toggleAttribute("hidden", this.#t.screen !== "pairing"), t.toggleAttribute("hidden", this.#t.screen !== "game");
 		let i = this.querySelector("[data-shell-connection-state]");
 		i && (i.textContent = this.#t.connectionState), e.state = {
+			theme: this.#t.theme,
 			gameTitle: this.#t.gameTitle,
 			signalUrl: this.#t.signalUrl,
 			targetId: this.#t.targetId,
@@ -3863,6 +3933,7 @@ var Je = class {
 			registering: this.#t.registering,
 			connecting: this.#t.connecting
 		}, t.state = {
+			theme: this.#t.theme,
 			gameTitle: this.#t.gameTitle,
 			peerId: this.#t.peerId,
 			remotePeerId: this.#t.remotePeerId,
@@ -3880,7 +3951,10 @@ var Je = class {
 			localState: this.#t.localState,
 			remoteState: this.#t.remoteState,
 			pendingAction: this.#t.pendingAction,
-			sessionId: this.#t.sessionId
+			sessionId: this.#t.sessionId,
+			historyLength: this.#t.historyLength,
+			lastStart: this.#t.lastStart,
+			lastError: this.#t.lastError
 		}, n.state = this.#n, r.state = this.#r;
 	}
 	#x(e) {
@@ -3888,18 +3962,18 @@ var Je = class {
 			open: !0,
 			message: e
 		}, this.#b(), this.#d = window.setTimeout(() => {
-			this.#r = bt, this.#b(), this.#d = null;
+			this.#r = Dt, this.#b(), this.#d = null;
 		}, 2200));
 	}
 	async #S(e) {
 		if (e) {
 			try {
 				if (navigator.clipboard?.writeText) {
-					await navigator.clipboard.writeText(e), this.#x("Share link copied.");
+					await navigator.clipboard.writeText(e), this.#x("Copied to clipboard.");
 					return;
 				}
 			} catch {}
-			window.prompt("Copy share link", e);
+			window.prompt("Copy value", e);
 		}
 	}
 	#C = (e) => {
@@ -3923,31 +3997,36 @@ var Je = class {
 	#O = (e) => {
 		this.#S(e.detail.value);
 	};
-	#k = () => {
-		this.#l?.actions.ready(), this.#x(this.#t.readySelf ? "Ready state cleared." : "Ready state sent.");
+	#k = (e) => {
+		if (!X(e.detail.theme) || e.detail.theme === this.#t.theme) return;
+		let t = e.detail.theme;
+		Et(t), this.setAttribute("theme", t), this.#x(`${t === "dark" ? "Night" : "Day"} mode enabled.`);
 	};
 	#A = () => {
-		this.#l?.actions.start(), this.#x("Start request sent.");
+		this.#l?.actions.ready(), this.#x(this.#t.readySelf ? "Ready state cleared." : "Ready state sent.");
 	};
 	#j = () => {
-		this.#l?.actions.undo(), this.#x("Undo request sent.");
+		this.#l?.actions.start(), this.#x("Start request sent.");
 	};
 	#M = () => {
-		this.#l?.actions.restart(), this.#x("Restart request sent.");
+		this.#l?.actions.undo(), this.#x("Undo request sent.");
 	};
 	#N = () => {
-		this.#l?.actions.approve(), this.#n = Q, this.#b(), this.#x("Request approved.");
+		this.#l?.actions.restart(), this.#x("Restart request sent.");
 	};
 	#P = () => {
-		this.#l?.actions.reject(), this.#n = Q, this.#b(), this.#x("Request rejected.");
+		this.#l?.actions.approve(), this.#n = Z, this.#b(), this.#x("Request approved.");
+	};
+	#F = () => {
+		this.#l?.actions.reject(), this.#n = Z, this.#b(), this.#x("Request rejected.");
 	};
-}, $ = (e, t) => {
+}, Q = (e, t) => {
 	customElements.get(e) || customElements.define(e, t);
-}, Ct = () => {
-	$("p2p-lockstep-share-panel", k), $("p2p-lockstep-status-panel", M), $("p2p-lockstep-action-bar", d), $("p2p-lockstep-confirm-dialog", g), $("p2p-lockstep-toast-message", N), $("p2p-lockstep-board-host", P), $("p2p-lockstep-lobby-page", I), $("p2p-lockstep-game-page", L), $("p2p-lockstep-app", St);
+}, $ = () => {
+	Q("p2p-lockstep-share-panel", ve), Q("p2p-lockstep-status-panel", j), Q("p2p-lockstep-action-bar", d), Q("p2p-lockstep-confirm-dialog", g), Q("p2p-lockstep-toast-message", M), Q("p2p-lockstep-board-host", N), Q("p2p-lockstep-pairing-page", F), Q("p2p-lockstep-game-page", De), Q("p2p-lockstep-app", kt);
 };
-Ct();
+$();
 //#endregion
-export { vt as DEFAULT_SIGNAL_URL, d as P2PLockstepActionBarElement, St as P2PLockstepAppElement, P as P2PLockstepBoardHostElement, g as P2PLockstepConfirmDialogElement, L as P2PLockstepGamePageElement, I as P2PLockstepLobbyPageElement, k as P2PLockstepSharePanelElement, M as P2PLockstepStatusPanelElement, N as P2PLockstepToastMessageElement, Ct as defineP2PLockstepUi };
+export { Ct as DEFAULT_SIGNAL_URL, d as P2PLockstepActionBarElement, kt as P2PLockstepAppElement, N as P2PLockstepBoardHostElement, g as P2PLockstepConfirmDialogElement, De as P2PLockstepGamePageElement, F as P2PLockstepPairingPageElement, ve as P2PLockstepSharePanelElement, j as P2PLockstepStatusPanelElement, M as P2PLockstepToastMessageElement, $ as defineP2PLockstepUi };
 
 //# sourceMappingURL=index.js.map