@puzzmo/sdk 0.0.7 → 1.0.1

package/dist/createSimulator-9IxV0l3_.js

@@ -0,0 +1,2749 @@
+import { n as e, t } from "./objectSpread2-CJo2CZQ6.js";
+const n = [
+	{
+		name: "Puzzmo (light)",
+		type: "light",
+		key: "#FFAAAC",
+		keyFG: "#000000",
+		keyStrong: "#F7868B",
+		keyLight: "#FFD2D3",
+		g_key: "#FFAAAC",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		player: "#5DBAFC",
+		playerFG: "#000000",
+		playerLight: "#9EDDFF",
+		alt1: "#98B389",
+		alt2: "#FAC16C",
+		alt3: "#D298FF",
+		fg: "#000000",
+		error: "#FF3C3C",
+		alwaysDark: "#1B1D29",
+		alwaysLight: "#FFFFFF",
+		g_bg: "#FFFFFF",
+		g_bgAlt: "#EBEBEB",
+		g_bgDark: "#D6D6D6",
+		g_textDark: "#1B1B28",
+		g_textLight: "#FFFFFF",
+		g_blank: "#000000",
+		g_unsolved: "#C2C2C2",
+		g_outline: "#1B1D29",
+		a_bg: "#F2F2F2",
+		a_bgAlt: "#ECECEC",
+		a_puzmo: "#FFC000",
+		a_headerText: "#000000",
+		a_table: "#F9F9F9",
+		a_tableAlt: "#F6F4F4",
+		a_inlineTag: "#D9D9D9",
+		a_anchor: "#1F97EE",
+		a_infoBG: "#FFFFFF"
+	},
+	{
+		name: "Puzzmo (dark)",
+		type: "dark",
+		key: "#FFAAAC",
+		keyFG: "#000000",
+		keyStrong: "#F7868B",
+		keyLight: "#FFD2D3",
+		g_key: "#FFAAAC",
+		player: "#5DBAFC",
+		playerFG: "#000000",
+		playerLight: "#9EDDFF",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		alt1: "#98B389",
+		alt2: "#FAC16C",
+		alt3: "#D298FF",
+		error: "#FF3C3C",
+		fg: "#ECECEC",
+		alwaysDark: "#1B1D29",
+		alwaysLight: "#FFFFFF",
+		g_bg: "#374351",
+		g_bgAlt: "#333D49",
+		g_bgDark: "#2C2F33",
+		g_textDark: "#F2F2F2",
+		g_textLight: "#20180E",
+		g_blank: "#000000",
+		g_unsolved: "#747474",
+		g_outline: "#646464",
+		a_bg: "#141620",
+		a_bgAlt: "#202433",
+		a_puzmo: "#FFC000",
+		a_headerText: "#A1BAD4",
+		a_table: "#303246",
+		a_tableAlt: "#393b52",
+		a_inlineTag: "#ECECEC",
+		a_anchor: "#1F97EE",
+		a_infoBG: "#282C3A"
+	},
+	{
+		name: "Foshay",
+		type: "light",
+		key: "#98B389",
+		keyFG: "#313540",
+		keyStrong: "#87BD69",
+		keyLight: "#809B77",
+		g_key: "#98B389",
+		player: "#3EC0E5",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		playerFG: "#292B35",
+		playerLight: "#A8B5D6",
+		alt1: "#D87DA4",
+		alt2: "#E3A54F",
+		alt3: "#D298FF",
+		error: "#FF3C3C",
+		fg: "#292B35",
+		alwaysDark: "#292B35",
+		alwaysLight: "#D1DBF2",
+		g_bg: "#949EBA",
+		g_bgAlt: "#8891AB",
+		g_bgDark: "#7B839B",
+		g_textDark: "#292B35",
+		g_textLight: "#FFFFFF",
+		g_blank: "#292B35",
+		g_unsolved: "#B6B7BA",
+		g_outline: "#676F83",
+		a_bg: "#828CA3",
+		a_bgAlt: "#7F889F",
+		a_puzmo: "#FFC000",
+		a_headerText: "#292B35",
+		a_table: "#7A8399",
+		a_tableAlt: "#767E94",
+		a_inlineTag: "#ECECEC",
+		a_anchor: "#56C9E9",
+		a_infoBG: "#767F95"
+	},
+	{
+		name: "Bright white",
+		type: "light",
+		key: "#67ced2",
+		keyFG: "#000000",
+		keyStrong: "#26a0a5",
+		keyLight: "#ade6e9",
+		g_key: "#67ced2",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		player: "#5DBAFC",
+		playerFG: "#000000",
+		playerLight: "#9EDDFF",
+		alt1: "#d26767",
+		alt2: "#fac16c",
+		alt3: "#7580bd",
+		fg: "#000000",
+		error: "#FF3C3C",
+		alwaysDark: "#111111",
+		alwaysLight: "#FFFFFF",
+		g_bg: "#f6f6f6",
+		g_bgAlt: "#F4F4F4",
+		g_bgDark: "#D6D6D6",
+		g_textDark: "#1B1B28",
+		g_textLight: "#FFFFFF",
+		g_blank: "#000000",
+		g_unsolved: "#C2C2C2",
+		g_outline: "#1B1D29",
+		a_bg: "#FFFFFF",
+		a_bgAlt: "#f8fbfc",
+		a_puzmo: "#FFC000",
+		a_headerText: "#000000",
+		a_table: "#EDEDED",
+		a_tableAlt: "#DBDBDB",
+		a_inlineTag: "#D9D9D9",
+		a_anchor: "#1F97EE",
+		a_infoBG: "#f6f6f6"
+	},
+	{
+		name: "Submersible",
+		type: "dark",
+		key: "#CD6DC6",
+		keyFG: "#031698",
+		keyStrong: "#FF7ABC",
+		keyLight: "#B467CB",
+		g_key: "#CD6DC6",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		player: "#4AB1D1",
+		playerFG: "#071D47",
+		playerLight: "#3C99D7",
+		alt1: "#8BA964",
+		alt2: "#C69A58",
+		alt3: "#7644B5",
+		fg: "#FFEBFF",
+		error: "#FF3C3C",
+		alwaysDark: "#031698",
+		alwaysLight: "#FFEBFF",
+		g_bg: "#043BED",
+		g_bgAlt: "#0A31CC",
+		g_bgDark: "#0E2DA8",
+		g_textDark: "#031698",
+		g_textLight: "#FFEBFF",
+		g_blank: "#031698",
+		g_unsolved: "#3662F1",
+		g_outline: "#031698",
+		a_bg: "#043BED",
+		a_bgAlt: "#0A31CC",
+		a_puzmo: "#FFC000",
+		a_headerText: "#FFEBFF",
+		a_table: "#043BED",
+		a_tableAlt: "#0A31CC",
+		a_inlineTag: "#FF7ABC",
+		a_anchor: "#FF7ABC",
+		a_infoBG: "#0A31CC"
+	},
+	{
+		name: "Hot Dog (beta)",
+		type: "light",
+		key: "#FFFF00",
+		keyFG: "#000000",
+		keyStrong: "#FFE600",
+		keyLight: "#FFEC44",
+		g_key: "#FFFF00",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		player: "#FF7A00",
+		playerFG: "#000000",
+		playerLight: "#FFA450",
+		alt1: "#3ABC5E",
+		alt2: "#5C3ABC",
+		alt3: "#BC3AAF",
+		fg: "#000000",
+		error: "#FF3C3C",
+		alwaysDark: "#1B1D29",
+		alwaysLight: "#FFFFFF",
+		g_bg: "#EBFF00",
+		g_bgAlt: "#EBEBEB",
+		g_bgDark: "#D6D6D6",
+		g_textDark: "#1B1B28",
+		g_textLight: "#FFFFFF",
+		g_blank: "#000000",
+		g_unsolved: "#C2C2C2",
+		g_outline: "#1B1D29",
+		a_bg: "#FF0000",
+		a_bgAlt: "#E50000",
+		a_puzmo: "#FFC000",
+		a_headerText: "#FFFFFF",
+		a_table: "#E50000",
+		a_tableAlt: "#FF2525",
+		a_inlineTag: "#000000",
+		a_anchor: "#000000",
+		a_infoBG: "#C6C6C6"
+	},
+	{
+		name: "Outlook Hayesy (beta)",
+		type: "light",
+		key: "#DAB98C",
+		keyFG: "#000000",
+		keyStrong: "#B99368",
+		keyLight: "#DAB98C",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		g_key: "#DAB98C",
+		player: "#5DBAFC",
+		playerFG: "#000000",
+		playerLight: "#9EDDFF",
+		alt1: "#5EC386",
+		alt2: "#5E93C3",
+		alt3: "#C35E5E",
+		fg: "#000000",
+		error: "#FF3C3C",
+		alwaysDark: "#5E390F",
+		alwaysLight: "#FFF3E4",
+		g_bg: "#FFFFFF",
+		g_bgAlt: "#EBEBEB",
+		g_bgDark: "#D6D6D6",
+		g_textDark: "#1B1B28",
+		g_textLight: "#FFFFFF",
+		g_blank: "#000000",
+		g_unsolved: "#C2C2C2",
+		g_outline: "#1B1D29",
+		a_bg: "#FEF5E8",
+		a_bgAlt: "#ffffff",
+		a_puzmo: "#FAC7CE",
+		a_headerText: "#000000",
+		a_table: "#FAE8D3",
+		a_tableAlt: "#EED7BC",
+		a_inlineTag: "#D9D9D9",
+		a_anchor: "#B99368",
+		a_infoBG: "#FFFFFF"
+	},
+	{
+		name: "Console (beta)",
+		type: "dark",
+		key: "#957df9",
+		keyFG: "#000000",
+		keyStrong: "#590FF5",
+		keyLight: "#590FF5",
+		subBrand: "#FFC000",
+		subBrandFG: "#000000",
+		g_key: "#FFFF00",
+		player: "#ffffff",
+		playerFG: "#000000",
+		playerLight: "#9EDDFF",
+		alt1: "#590ff5",
+		alt2: "#00e200",
+		alt3: "#ff8a02",
+		fg: "#00e200",
+		error: "#FF3C3C",
+		alwaysDark: "#1B1D29",
+		alwaysLight: "#00e200",
+		g_bg: "#101428",
+		g_bgAlt: "#101428",
+		g_bgDark: "#00e200",
+		g_textDark: "#00e200",
+		g_textLight: "#590ff5",
+		g_blank: "#00e200",
+		g_unsolved: "#0000ff",
+		g_outline: "#00e200",
+		a_bg: "#000000",
+		a_bgAlt: "#112211",
+		a_puzmo: "#ffffff",
+		a_headerText: "#00e200",
+		a_table: "#000000",
+		a_tableAlt: "#002200",
+		a_inlineTag: "#D9D9D9",
+		a_anchor: "#957df9",
+		a_infoBG: "#001900"
+	}
+];
+var r = {
+	collapsed: "simulator-collapsed",
+	tab: "simulator-tab",
+	theme: "simulator-theme",
+	fixtureCategory: "simulator-fixture-category",
+	fixturePuzzle: "simulator-fixture-puzzle",
+	renderHost: "simulator-render-host",
+	renderContext: "simulator-render-context"
+};
+function i() {
+	let e = localStorage.getItem(r.theme);
+	if (e) {
+		let t = n.find((t) => t.name === e);
+		if (t) return t;
+	}
+	return n[0];
+}
+function a(e) {
+	var t;
+	let n = localStorage.getItem(r.tab);
+	return n && e.includes(n) ? n : (t = e[0]) == null ? "ctrl" : t;
+}
+function o(e) {
+	let t = localStorage.getItem(r.collapsed);
+	return t === null ? e : t === "true";
+}
+function s() {
+	let e = localStorage.getItem(r.renderHost);
+	return e && [
+		"game",
+		"app",
+		"opengraph"
+	].includes(e) ? e : "game";
+}
+function c() {
+	let e = localStorage.getItem(r.renderContext);
+	if (e && [
+		"preview",
+		"share",
+		"completed",
+		"timeline"
+	].includes(e)) return e;
+}
+function l(e, t, n) {
+	var l, u;
+	let d = localStorage.getItem(r.fixtureCategory), f = localStorage.getItem(r.fixturePuzzle);
+	return {
+		isCollapsed: o((l = e.collapsed) == null ? !0 : l),
+		isPaused: !1,
+		hasStarted: !1,
+		activeTab: a(n),
+		puzzleData: null,
+		originalPuzzle: "",
+		currentInputStr: "",
+		completionData: null,
+		selectedTheme: i(),
+		selectedCategory: d && t.includes(d) ? d : (u = t[0]) == null ? null : u,
+		selectedPuzzle: f == null ? null : f,
+		renderHost: s(),
+		renderContext: c()
+	};
+}
+function u(e) {
+	localStorage.setItem(r.collapsed, String(e));
+}
+function d(e) {
+	localStorage.setItem(r.tab, e);
+}
+function f(e) {
+	localStorage.setItem(r.theme, e);
+}
+function p(e) {
+	localStorage.setItem(r.fixtureCategory, e);
+}
+function m(e) {
+	localStorage.setItem(r.fixturePuzzle, e);
+}
+function h() {
+	localStorage.removeItem(r.fixturePuzzle);
+}
+function g(e) {
+	e ? localStorage.setItem(r.renderHost, e) : localStorage.removeItem(r.renderHost);
+}
+function _(e) {
+	e ? localStorage.setItem(r.renderContext, e) : localStorage.removeItem(r.renderContext);
+}
+function ee(e) {
+	let t = [];
+	return {
+		log(n, r, i) {
+			let a = {
+				type: n,
+				data: r,
+				time: (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+					hour12: !1,
+					hour: "2-digit",
+					minute: "2-digit",
+					second: "2-digit"
+				}),
+				direction: i
+			};
+			t.push(a), t.length > 100 && t.shift(), e == null || e(a);
+		},
+		clear() {
+			t.length = 0;
+		},
+		getLog() {
+			return t;
+		}
+	};
+}
+function te(e, t, n) {
+	console.log("Simulator sending:", e, t), n == null || n.log(e, t, "out"), window.postMessage({
+		type: e,
+		data: t
+	}, "*");
+}
+function ne(e, t) {
+	let n = (n) => {
+		var r, i, a;
+		if (!(!(n == null || (r = n.data) == null) && r.type)) return;
+		let o = n.data.type, s = (i = (a = n.data.data) == null ? n.data.json : a) == null ? {} : i;
+		["TIMER_TICK", "TIMER_SYNC"].includes(o) || t == null || t.log(o, s, "in"), e(o, s);
+	};
+	return window.addEventListener("message", n), () => window.removeEventListener("message", n);
+}
+/**
+* Parse fixture imports into a structured format: { category: { filename: data } }
+*/
+function v(e) {
+	let t = /* @__PURE__ */ new Map();
+	console.log("Simulator: Parsing fixtures", Object.keys(e));
+	for (let [o, s] of Object.entries(e)) {
+		var n, r, i, a;
+		let e = o.split("/"), c = (n = (r = e.pop()) == null ? void 0 : r.replace(".json", "")) == null ? "" : n, l = (i = e.pop()) == null ? "default" : i;
+		t.has(l) || t.set(l, /* @__PURE__ */ new Map());
+		let u = (a = s.default) == null ? s : a;
+		t.get(l).set(c, u);
+	}
+	return t.forEach((e, n) => {
+		let r = new Map(Array.from(e.entries()).sort((e, t) => {
+			var n, r, i, a;
+			return parseInt((n = (r = e[0].match(/\d+/)) == null ? void 0 : r[0]) == null ? "0" : n) - parseInt((i = (a = t[0].match(/\d+/)) == null ? void 0 : a[0]) == null ? "0" : i);
+		}));
+		t.set(n, r);
+	}), t;
+}
+/**
+* Render fixture selector HTML
+*/
+function y(e, t) {
+	return e.length === 0 ? "" : `
+    <div class="simulator-fixtures">
+      <div class="simulator-field">
+        <label class="simulator-label">Category</label>
+        <select class="simulator-select" id="simulator-fixture-category">
+          ${e.map((e) => `<option value="${e}" ${e === t ? "selected" : ""}>${e}</option>`).join("")}
+        </select>
+      </div>
+      <div class="simulator-field">
+        <label class="simulator-label">Puzzle</label>
+        <select class="simulator-select" id="simulator-fixture-puzzle"></select>
+      </div>
+    </div>
+  `;
+}
+/**
+* Update puzzle select options based on selected category
+*/
+function b(e, t, n, r) {
+	let i = t.get(n);
+	if (!i) return null;
+	let a = Array.from(i.keys()), o = r;
+	if (!r || !i.has(r)) {
+		var s;
+		o = (s = a[0]) == null ? null : s;
+	}
+	return e.innerHTML = a.map((e) => `<option value="${e}" ${e === o ? "selected" : ""}>${e}</option>`).join(""), o;
+}
+/**
+* Get puzzle data from fixtures
+*/
+function x(e, t, n) {
+	var r, i;
+	return !t || !n || (r = (i = e.get(t)) == null ? void 0 : i.get(n)) == null ? null : r;
+}
+function re() {
+	return {
+		id: "ctrl",
+		label: "Ctrl",
+		render() {
+			return "\n        <div id=\"simulator-fixtures-container\"></div>\n        <div id=\"simulator-status\">\n          <span class=\"indicator waiting\"></span>\n          <span class=\"text\">Waiting for READY...</span>\n        </div>\n        <div class=\"simulator-row\">\n          <button class=\"simulator-btn primary\" id=\"simulator-start\" disabled>Start</button>\n          <button class=\"simulator-btn\" id=\"simulator-pause\" disabled>Pause</button>\n        </div>\n        <div class=\"simulator-row\">\n          <button class=\"simulator-btn danger\" id=\"simulator-retry\" disabled>Retry</button>\n        </div>\n      ";
+		},
+		bind(e) {
+			let t = e.getElement("#simulator-start"), n = e.getElement("#simulator-pause"), r = e.getElement("#simulator-retry"), i = e.getElement("#simulator-fixtures-container");
+			if (console.log("Simulator: CtrlView.bind called", {
+				hasFixtures: !!e.fixtures,
+				categories: e.fixtureCategories,
+				selectedCategory: e.state.selectedCategory,
+				selectedPuzzle: e.state.selectedPuzzle
+			}), e.fixtures && e.fixtureCategories.length > 0 && i) {
+				i.innerHTML = y(e.fixtureCategories, e.state.selectedCategory);
+				let t = e.getElement("#simulator-fixture-category"), n = e.getElement("#simulator-fixture-puzzle");
+				if (t && n && e.state.selectedCategory) {
+					e.state.selectedPuzzle = b(n, e.fixtures, e.state.selectedCategory, e.state.selectedPuzzle);
+					let r = x(e.fixtures, e.state.selectedCategory, e.state.selectedPuzzle);
+					console.log("Simulator: Loading fixture puzzle", {
+						category: e.state.selectedCategory,
+						puzzle: e.state.selectedPuzzle,
+						hasPuzzleData: !!r
+					}), r && (e.state.puzzleData = r, e.state.originalPuzzle = JSON.stringify(r, null, 2), e.state.selectedCategory && p(e.state.selectedCategory), e.state.selectedPuzzle && m(e.state.selectedPuzzle)), t.addEventListener("change", () => {
+						console.log("Simulator: Category changed, reloading...", t.value), p(t.value), h(), window.location.reload();
+					}), n.addEventListener("change", () => {
+						console.log("Simulator: Puzzle changed, reloading...", n.value), m(n.value), window.location.reload();
+					});
+				}
+			}
+			t == null || t.addEventListener("click", () => {
+				e.state.isPaused ? (e.sendToGame("RESUME_GAME", {}), e.state.isPaused = !1, n && (n.textContent = "Pause"), e.updateStatus("Running", "ready")) : (e.sendToGame("START_GAME", void 0), e.state.hasStarted = !0, n && (n.disabled = !1), t && (t.textContent = "Resume"), e.updateStatus("Running", "ready"));
+			}), n == null || n.addEventListener("click", () => {
+				e.state.isPaused ? (e.sendToGame("RESUME_GAME", {}), e.state.isPaused = !1, n.textContent = "Pause", e.updateStatus("Running", "ready")) : (e.sendToGame("PAUSE_GAME", {}), e.state.isPaused = !0, n.textContent = "Resume", e.updateStatus("Paused", "paused"));
+			}), r == null || r.addEventListener("click", () => {
+				e.sendToGame("RETRY_PUZZLE", {}), e.state.hasStarted = !1, e.state.isPaused = !1, n && (n.disabled = !0, n.textContent = "Pause"), t && (t.textContent = "Start"), e.updateStatus("Ready to retry", "ready");
+			});
+		},
+		onMessage(e, t, n) {
+			let r = n.getElement("#simulator-start"), i = n.getElement("#simulator-pause"), a = n.getElement("#simulator-retry");
+			e === "READY_GAME_LOADED" && (r && (r.disabled = !1), a && (a.disabled = !1), n.updateStatus("Ready", "ready")), e === "GAME_COMPLETED" && (n.state.hasStarted = !1, i && (i.disabled = !0), r && (r.disabled = !0), n.updateStatus("Completed!", "ready"));
+		}
+	};
+}
+var S = "simulator-saved-states";
+/**
+* Find thumbnail function on globalThis (looks for functions ending in "Thumbnail")
+*/
+function ie() {
+	let e = globalThis;
+	for (let t of Object.keys(e)) if (t.endsWith("Thumbnail") && typeof e[t] == "function") return {
+		name: t,
+		fn: e[t]
+	};
+	return null;
+}
+/**
+* Generate a small thumbnail SVG for a given input string
+*/
+function C(e, t) {
+	let n = ie();
+	if (!n) return "";
+	try {
+		let r = e.state.puzzleData ? JSON.stringify(e.state.puzzleData) : "", i = {
+			viewerIsOwner: !0,
+			theme: e.state.selectedTheme,
+			strict: !0,
+			renderHost: "game"
+		};
+		return n.fn(r, t, i);
+	} catch (e) {
+		return "";
+	}
+}
+var w = [];
+function T(e, t = 8) {
+	let n = 14 * t + 8 + 4;
+	e.style.height = "auto";
+	let r = Math.min(Math.max(e.scrollHeight, 40), n);
+	e.style.height = `${r}px`;
+}
+function ae() {
+	let e = "", t = "";
+	return {
+		id: "data",
+		label: "Data",
+		render() {
+			return "\n        <div class=\"data-view-container\">\n          <div class=\"data-subtabs\">\n            <button class=\"data-subtab active\" data-subtab=\"edit\">Edit</button>\n            <button class=\"data-subtab\" data-subtab=\"history\">History</button>\n            <button class=\"data-subtab\" data-subtab=\"saves\">Saves</button>\n          </div>\n\n          <div class=\"data-subtab-content active\" id=\"data-subtab-edit\">\n            <div class=\"simulator-field\">\n              <label class=\"simulator-label\">Puzzle String</label>\n              <textarea class=\"simulator-textarea auto-resize\" id=\"simulator-puzzle\" placeholder=\"Loading...\"></textarea>\n              <div class=\"simulator-row\">\n                <button class=\"simulator-btn subtle\" id=\"simulator-puzzle-reset\">Reset</button>\n                <button class=\"simulator-btn primary\" id=\"simulator-puzzle-apply\" disabled>Apply</button>\n              </div>\n            </div>\n            <div class=\"simulator-divider\"></div>\n            <div class=\"simulator-field\">\n              <label class=\"simulator-label\">Input String</label>\n              <textarea class=\"simulator-textarea auto-resize\" id=\"simulator-input\" placeholder=\"No input yet...\"></textarea>\n              <div class=\"simulator-row\">\n                <button class=\"simulator-btn subtle\" id=\"simulator-input-reset\">Reset</button>\n                <button class=\"simulator-btn primary\" id=\"simulator-input-apply\" disabled>Apply</button>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"data-subtab-content\" id=\"data-subtab-history\">\n            <div class=\"history-header\">\n              <span class=\"simulator-label\">Input String Timeline</span>\n              <button class=\"simulator-btn tiny\" id=\"simulator-history-clear\">Clear</button>\n            </div>\n            <div class=\"history-list\" id=\"simulator-history-list\">\n              <div class=\"simulator-empty\">No history yet</div>\n            </div>\n          </div>\n\n          <div class=\"data-subtab-content\" id=\"data-subtab-saves\">\n            <div class=\"save-new\">\n              <input type=\"text\" class=\"simulator-input\" id=\"simulator-save-name\" placeholder=\"Save name...\" />\n              <button class=\"simulator-btn primary\" id=\"simulator-save-btn\">Save</button>\n            </div>\n            <div class=\"simulator-divider\"></div>\n            <div class=\"saves-list\" id=\"simulator-saves-list\">\n              <div class=\"simulator-empty\">No saved states</div>\n            </div>\n          </div>\n        </div>\n      ";
+		},
+		bind(n) {
+			let r = n.getElement(".data-subtabs");
+			r == null || r.querySelectorAll(".data-subtab").forEach((e) => {
+				e.addEventListener("click", () => {
+					let t = e.getAttribute("data-subtab");
+					if (!t) return;
+					r.querySelectorAll(".data-subtab").forEach((e) => e.classList.remove("active")), e.classList.add("active");
+					let i = n.getElement(".data-view-container");
+					i == null || i.querySelectorAll(".data-subtab-content").forEach((e) => {
+						e.classList.toggle("active", e.id === `data-subtab-${t}`);
+					}), t === "edit" ? A(n) : t === "history" ? D(n) : t === "saves" && O(n);
+				});
+			});
+			let i = n.getElement("#simulator-puzzle"), a = n.getElement("#simulator-input"), o = n.getElement("#simulator-puzzle-reset"), s = n.getElement("#simulator-puzzle-apply"), c = n.getElement("#simulator-input-reset"), l = n.getElement("#simulator-input-apply"), u = n.getElement("#simulator-start"), d = n.getElement("#simulator-pause");
+			setTimeout(() => {
+				i && n.state.originalPuzzle && (i.value = n.state.originalPuzzle, e = n.state.originalPuzzle, T(i)), a && n.state.currentInputStr && (a.value = n.state.currentInputStr, t = n.state.currentInputStr, T(a));
+			}, 0), i == null || i.addEventListener("input", () => {
+				T(i);
+				let t = i.value !== e;
+				s && (s.disabled = !t);
+			}), a == null || a.addEventListener("input", () => {
+				T(a);
+				let e = a.value !== t;
+				l && (l.disabled = !e);
+			}), o == null || o.addEventListener("click", () => {
+				i && (i.value = n.state.originalPuzzle, e = n.state.originalPuzzle, T(i), s && (s.disabled = !0));
+			}), s == null || s.addEventListener("click", () => {
+				if (i) try {
+					let t = JSON.parse(i.value);
+					n.state.puzzleData = t, n.state.originalPuzzle = i.value, e = i.value, n.sendToGame("RETRY_PUZZLE", {}), n.state.hasStarted = !1, n.state.isPaused = !1, d && (d.disabled = !0, d.textContent = "Pause"), u && (u.textContent = "Start"), n.updateStatus("Puzzle updated", "ready"), s.disabled = !0;
+				} catch (e) {
+					console.error("Simulator: Invalid puzzle JSON", e), n.updateStatus("Invalid JSON", "paused");
+				}
+			}), c == null || c.addEventListener("click", () => {
+				a && (a.value = t, T(a), l && (l.disabled = !0));
+			}), l == null || l.addEventListener("click", () => {
+				a && (n.state.currentInputStr = a.value, t = a.value, console.log("Simulator: Input string updated (game restart required to apply)"), n.updateStatus("Input stored", "ready"), l.disabled = !0);
+			});
+			let f = n.getElement("#simulator-history-clear");
+			f == null || f.addEventListener("click", () => {
+				w = [], D(n);
+			});
+			let p = n.getElement("#simulator-save-name"), m = n.getElement("#simulator-save-btn");
+			m == null || m.addEventListener("click", () => {
+				if (!p || !p.value.trim()) return;
+				let e = E(), t = {
+					name: p.value.trim(),
+					puzzleStr: n.state.originalPuzzle,
+					inputStr: n.state.currentInputStr,
+					timestamp: Date.now()
+				};
+				e.push(t), localStorage.setItem(S, JSON.stringify(e)), p.value = "", O(n);
+			}), O(n);
+		},
+		onActivate(n) {
+			e = n.state.originalPuzzle, t = n.state.currentInputStr, A(n), D(n);
+		},
+		onMessage(e, n, r) {
+			var i, a;
+			let o = r.getElement("#simulator-input"), s = r.getElement("#simulator-input-apply"), c = (i = n == null || (a = n.input) == null ? void 0 : a.boardState) == null ? n == null ? void 0 : n.boardState : i;
+			if (e === "UPLOAD_NEW_GAME_STATE" && c) {
+				if (r.state.currentInputStr = c, w.length === 0 || w[w.length - 1].value !== c) {
+					w.push({
+						value: c,
+						timestamp: Date.now()
+					}), w.length > 100 && (w = w.slice(-100));
+					let e = r.getElement("#data-subtab-history");
+					e != null && e.classList.contains("active") && D(r);
+				}
+				o && (o.value = r.state.currentInputStr, t = r.state.currentInputStr, T(o), s && (s.disabled = !0));
+			}
+		}
+	};
+}
+function E() {
+	try {
+		let e = localStorage.getItem(S);
+		return e ? JSON.parse(e) : [];
+	} catch (e) {
+		return [];
+	}
+}
+function D(e) {
+	let t = e.getElement("#simulator-history-list");
+	if (t) {
+		if (t.style.setProperty("--history-thumb-bg", e.state.selectedTheme.a_bg), w.length === 0) {
+			t.innerHTML = "<div class=\"simulator-empty\">No history yet</div>";
+			return;
+		}
+		t.innerHTML = [...w].reverse().map((t, n) => {
+			let r = w.length - 1 - n, i = new Date(t.timestamp).toLocaleTimeString(), a = t.value.length > 60 ? t.value.slice(0, 60) + "..." : t.value;
+			return `
+        <div class="history-item" data-history-idx="${r}">
+          <div class="history-item-thumb">${C(e, t.value)}</div>
+          <div class="history-item-content">
+            <div class="history-item-header">
+              <span class="history-item-num">#${r + 1}</span>
+              <span class="history-item-time">${i}</span>
+              <button class="simulator-btn tiny history-restore-btn" data-history-idx="${r}">Restore</button>
+            </div>
+            <div class="history-item-preview">${k(a)}</div>
+          </div>
+        </div>
+      `;
+		}).join(""), t.querySelectorAll(".history-restore-btn").forEach((t) => {
+			t.addEventListener("click", (t) => {
+				let n = parseInt(t.target.getAttribute("data-history-idx") || "0"), r = w[n];
+				if (r) {
+					e.state.currentInputStr = r.value;
+					let t = e.getElement("#simulator-input");
+					t && (t.value = r.value, T(t)), e.updateStatus("Input restored from history", "ready");
+					let n = e.getElement(".data-subtab[data-subtab=\"edit\"]");
+					n == null || n.click();
+				}
+			});
+		});
+	}
+}
+function O(e) {
+	let t = e.getElement("#simulator-saves-list");
+	if (!t) return;
+	let n = E();
+	if (n.length === 0) {
+		t.innerHTML = "<div class=\"simulator-empty\">No saved states</div>";
+		return;
+	}
+	t.innerHTML = [...n].reverse().map((e, t) => {
+		let r = n.length - 1 - t, i = new Date(e.timestamp).toLocaleDateString(), a = new Date(e.timestamp).toLocaleTimeString();
+		return `
+        <div class="save-item">
+          <div class="save-item-header">
+            <span class="save-item-name">${k(e.name)}</span>
+            <span class="save-item-time">${i} ${a}</span>
+          </div>
+          <div class="save-item-actions">
+            <button class="simulator-btn tiny save-load-btn" data-save-idx="${r}">Load</button>
+            <button class="simulator-btn tiny danger save-delete-btn" data-save-idx="${r}">Delete</button>
+          </div>
+        </div>
+      `;
+	}).join(""), t.querySelectorAll(".save-load-btn").forEach((t) => {
+		t.addEventListener("click", (t) => {
+			let r = n[parseInt(t.target.getAttribute("data-save-idx") || "0")];
+			if (r) {
+				try {
+					e.state.puzzleData = JSON.parse(r.puzzleStr), e.state.originalPuzzle = r.puzzleStr;
+				} catch (t) {
+					e.state.originalPuzzle = r.puzzleStr;
+				}
+				e.state.currentInputStr = r.inputStr;
+				let t = e.getElement("#simulator-puzzle"), n = e.getElement("#simulator-input");
+				t && (t.value = r.puzzleStr, T(t)), n && (n.value = r.inputStr, T(n)), e.updateStatus(`Loaded: ${r.name}`, "ready");
+				let i = e.getElement(".data-subtab[data-subtab=\"edit\"]");
+				i == null || i.click();
+			}
+		});
+	}), t.querySelectorAll(".save-delete-btn").forEach((t) => {
+		t.addEventListener("click", (t) => {
+			let r = parseInt(t.target.getAttribute("data-save-idx") || "0"), i = n.filter((e, t) => t !== r);
+			localStorage.setItem(S, JSON.stringify(i)), O(e);
+		});
+	});
+}
+function k(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function A(e) {
+	let t = e.getElement("#simulator-puzzle"), n = e.getElement("#simulator-input"), r = e.getElement("#simulator-puzzle-apply"), i = e.getElement("#simulator-input-apply");
+	t && e.state.originalPuzzle && (t.value = e.state.originalPuzzle, T(t), r && (r.disabled = !0)), n && (n.value = e.state.currentInputStr, T(n), i && (i.disabled = !0));
+}
+function j(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function oe() {
+	let e = 0;
+	return {
+		id: "msgs",
+		label: "Msgs",
+		render() {
+			return "\n        <div class=\"msgs-view-container\">\n          <div class=\"msgs-header\">\n            <span class=\"simulator-label\">Message Log</span>\n            <button class=\"simulator-btn tiny\" id=\"simulator-msgs-clear\">Clear</button>\n          </div>\n          <div id=\"simulator-msgs-log\"></div>\n        </div>\n      ";
+		},
+		bind(t) {
+			let n = t.getElement("#simulator-msgs-clear");
+			n == null || n.addEventListener("click", () => {
+				let n = t.getElement("#simulator-msgs-log");
+				n && (n.innerHTML = ""), e = 0, t.updateBadge("msgs", 0);
+			});
+		},
+		addLogEntry(t, n) {
+			let r = n.getElement("#simulator-msgs-log");
+			if (!r) return;
+			e++, n.updateBadge("msgs", e);
+			let i = document.createElement("div");
+			i.className = `simulator-msg ${t.direction}`;
+			let a = t.data === void 0 ? "" : JSON.stringify(t.data, null, 2);
+			i.innerHTML = `
+        <div class="simulator-msg-header">
+          <span class="simulator-msg-type">${t.direction === "out" ? "→" : "←"} ${t.type}</span>
+          <span class="simulator-msg-time">${t.time}</span>
+        </div>
+        ${a ? `<div class="simulator-msg-data">${j(a)}</div>` : ""}
+      `;
+			let o = i.querySelector(".simulator-msg-data");
+			for (o && o.addEventListener("click", () => {
+				r.querySelectorAll(".simulator-msg.expanded").forEach((e) => {
+					e !== i && e.classList.remove("expanded");
+				}), i.classList.toggle("expanded");
+			}), r.insertBefore(i, r.firstChild); r.children.length > 50;) r.removeChild(r.lastChild);
+		}
+	};
+}
+function se() {
+	return {
+		id: "done",
+		label: "Done",
+		render() {
+			return "\n        <div id=\"simulator-done-empty\" class=\"simulator-empty\">Game not completed yet</div>\n        <div id=\"simulator-done-content\" style=\"display:none;\">\n          <div class=\"simulator-field\">\n            <label class=\"simulator-label\">Completion Text</label>\n            <div id=\"simulator-done-text\" class=\"simulator-value\"></div>\n          </div>\n          <div class=\"simulator-divider\"></div>\n          <div class=\"simulator-field\">\n            <label class=\"simulator-label\">Board State</label>\n            <textarea class=\"simulator-textarea\" id=\"simulator-done-input\" rows=\"2\" readonly></textarea>\n          </div>\n          <div class=\"simulator-divider\"></div>\n          <div class=\"simulator-field\">\n            <label class=\"simulator-label\">Deeds</label>\n            <div id=\"simulator-done-deeds\" class=\"simulator-deeds\"></div>\n          </div>\n          <div class=\"simulator-divider\"></div>\n          <div class=\"simulator-field\">\n            <label class=\"simulator-label\">Raw Data</label>\n            <textarea class=\"simulator-textarea\" id=\"simulator-done-raw\" rows=\"4\" readonly></textarea>\n          </div>\n        </div>\n      ";
+		},
+		bind(e) {},
+		onMessage(e, t, n) {
+			var r, i;
+			if (e !== "GAME_COMPLETED") return;
+			n.state.completionData = t;
+			let a = n.getElement("#simulator-done-empty"), o = n.getElement("#simulator-done-content"), s = n.getElement("#simulator-done-text"), c = n.getElement("#simulator-done-input"), l = n.getElement("#simulator-done-deeds"), u = n.getElement("#simulator-done-raw");
+			a && (a.style.display = "none"), o && (o.style.display = "block");
+			let d = ((r = t.input) == null ? void 0 : r.completionText) || t.completionText || "(no completion text)";
+			s && (s.textContent = d);
+			let f = ((i = t.input) == null ? void 0 : i.boardState) || t.boardState || n.state.currentInputStr || "";
+			if (c && (c.value = f), l) {
+				var p;
+				l.innerHTML = "";
+				let e = ((p = t.config) == null ? void 0 : p.deeds) || t.deeds;
+				e && Array.isArray(e) ? e.forEach((e) => {
+					let t = document.createElement("div");
+					t.className = "simulator-deed", t.innerHTML = `
+              <span class="simulator-deed-name">${e.id}</span>
+              <span class="simulator-deed-value">${e.value}</span>
+            `, l.appendChild(t);
+				}) : l.innerHTML = "<div class=\"simulator-empty\">No deeds</div>";
+			}
+			u && (u.value = JSON.stringify(t, null, 2)), n.setCollapsed(!1), n.switchTab("done");
+		}
+	};
+}
+function ce() {
+	let e = [], t = () => (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", { hour12: !1 }), n = (e) => {
+		let { checkpointName: t, augConfig: n, time: r } = e, i = n == null ? void 0 : n.deeds;
+		return `
+      <div class="checkpoint-item">
+        <div class="checkpoint-header">
+          <span class="checkpoint-name">${t}</span>
+          <span class="checkpoint-time">${r}</span>
+        </div>
+        ${i && i.length > 0 ? `<div class="simulator-deeds">
+            ${i.map((e) => `<div class="simulator-deed"><span class="simulator-deed-name">${e.id}</span><span class="simulator-deed-value">${e.value}</span></div>`).join("")}
+          </div>` : ""}
+      </div>
+    `;
+	}, r = () => e.length === 0 ? "<div class=\"simulator-empty\">No checkpoints received yet</div>" : e.map((e) => n(e)).join("");
+	return {
+		id: "checkpoints",
+		label: "Chkpt",
+		render() {
+			return `
+        <div class="checkpoints-view-container">
+          <div class="checkpoints-header">
+            <span class="simulator-label">Checkpoints</span>
+            <button class="simulator-btn subtle small" id="simulator-checkpoints-clear">Clear</button>
+          </div>
+          <div id="simulator-checkpoints-list" class="checkpoints-list">
+            ${r()}
+          </div>
+        </div>
+      `;
+		},
+		bind(t) {
+			let n = t.getElement("#simulator-checkpoints-clear"), i = t.getElement("#simulator-checkpoints-list");
+			n == null || n.addEventListener("click", () => {
+				e = [], i && (i.innerHTML = r()), t.updateBadge("checkpoints", 0);
+			});
+		},
+		onMessage(n, i, a) {
+			if (n !== "HIT_CHECKPOINT") return;
+			let o = {
+				checkpointName: i.checkpointName,
+				augConfig: i.augConfig,
+				time: t()
+			};
+			e.push(o), a.updateBadge("checkpoints", e.length);
+			let s = a.getElement("#simulator-checkpoints-list");
+			s && (s.innerHTML = r(), s.scrollTop = s.scrollHeight);
+		}
+	};
+}
+/**
+* Find thumbnail function on globalThis (looks for functions ending in "Thumbnail")
+*/
+function M() {
+	let e = globalThis;
+	for (let t of Object.keys(e)) if (t.endsWith("Thumbnail") && typeof e[t] == "function") return {
+		name: t,
+		fn: e[t]
+	};
+	return null;
+}
+function le() {
+	return {
+		id: "thumb",
+		label: "Thumb",
+		render() {
+			return "\n        <div class=\"thumb-view-container\">\n          <div class=\"thumb-header\">\n            <span class=\"simulator-label\">Thumbnail Preview</span>\n            <button class=\"simulator-btn tiny\" id=\"simulator-thumb-refresh\">Refresh</button>\n          </div>\n          <div id=\"simulator-thumb-preview\">\n            <span class=\"simulator-empty\">No thumbnail function found</span>\n          </div>\n          <div id=\"simulator-thumb-fn\"></div>\n          <div class=\"simulator-divider\"></div>\n          <div class=\"simulator-field\">\n            <label class=\"simulator-label\">Render Host</label>\n            <select class=\"simulator-select\" id=\"simulator-render-host-select\">\n              <option value=\"game\">game</option>\n              <option value=\"app\">app</option>\n              <option value=\"opengraph\">opengraph</option>\n            </select>\n          </div>\n          <div class=\"simulator-field\" id=\"simulator-render-context-field\" style=\"display: none;\">\n            <label class=\"simulator-label\">Render Context</label>\n            <select class=\"simulator-select\" id=\"simulator-render-context-select\">\n              <option value=\"preview\">preview</option>\n              <option value=\"share\">share</option>\n              <option value=\"completed\">completed</option>\n              <option value=\"timeline\">timeline</option>\n            </select>\n          </div>\n        </div>\n      ";
+		},
+		bind(e) {
+			let t = e.getElement("#simulator-thumb-refresh");
+			t == null || t.addEventListener("click", () => e.updateThumbnail());
+			let n = e.getElement("#simulator-render-host-select"), r = e.getElement("#simulator-render-context-select"), i = e.getElement("#simulator-render-context-field"), a = () => {
+				i && (i.style.display = e.state.renderHost === "opengraph" ? "block" : "none");
+			};
+			n && (e.state.renderHost || (e.state.renderHost = "game", g(e.state.renderHost)), n.value = e.state.renderHost || "game", n.addEventListener("change", () => {
+				e.state.renderHost = n.value, g(e.state.renderHost), a(), e.updateThumbnail();
+			})), r && (e.state.renderContext || (e.state.renderContext = "preview", _(e.state.renderContext)), r.value = e.state.renderContext || "preview", r.addEventListener("change", () => {
+				e.state.renderContext = r.value, _(e.state.renderContext), e.updateThumbnail();
+			})), a();
+		},
+		onActivate(e) {
+			setTimeout(() => e.updateThumbnail(), 0);
+		},
+		updatePreview: (e) => {
+			let t = e.getElement("#simulator-thumb-preview"), n = e.getElement("#simulator-thumb-fn");
+			t == null || t.style.setProperty("--sim-thumb-bg", e.state.selectedTheme.g_bg);
+			let r = M();
+			if (!r) {
+				t && (t.innerHTML = "<span class=\"simulator-empty\">No thumbnail function found</span>"), n && (n.textContent = "");
+				return;
+			}
+			n && (n.textContent = `Using: ${r.name}()`);
+			try {
+				let n = e.state.puzzleData ? JSON.stringify(e.state.puzzleData) : "", i = {
+					viewerIsOwner: !0,
+					theme: e.state.selectedTheme,
+					strict: !0,
+					renderHost: e.state.renderHost,
+					renderContext: e.state.renderContext
+				}, a = r.fn(n, e.state.currentInputStr, i);
+				t && (t.innerHTML = a);
+			} catch (e) {
+				console.error("Simulator: Thumbnail error", e), t && (t.innerHTML = `<span class="simulator-empty">Error: ${e}</span>`);
+			}
+		}
+	};
+}
+/**
+* Generate theme preview HTML showing key colors
+*/
+function N(e) {
+	let t = [
+		e.key,
+		e.subBrand,
+		e.player,
+		e.alt1,
+		e.alt2,
+		e.alt3
+	].map((e) => `<div class="simulator-theme-preview-cell" style="background: ${e}"></div>`).join("");
+	return `<div class="simulator-theme-preview" style="background: ${e.g_bg}">${t}</div>`;
+}
+function ue() {
+	return {
+		id: "theme",
+		label: "Theme",
+		render() {
+			return "\n        <div class=\"theme-view-container\">\n          <div class=\"theme-header\">\n            <span class=\"simulator-label\">Select Theme</span>\n          </div>\n          <div id=\"simulator-themes\" class=\"simulator-themes\"></div>\n        </div>\n      ";
+		},
+		bind(e) {
+			let t = e.getElement("#simulator-themes");
+			t && n.forEach((n) => {
+				let r = document.createElement("div");
+				r.className = `simulator-theme-item${n.name === e.state.selectedTheme.name ? " selected" : ""}`, r.innerHTML = `
+          ${N(n)}
+          <div class="simulator-theme-name">${n.name}</div>
+          <div class="simulator-theme-type">${n.type}</div>
+        `, r.addEventListener("click", () => {
+					console.log("Simulator: Theme changed, reloading...", n.name), f(n.name), window.location.reload();
+				}), t.appendChild(r);
+			});
+		}
+	};
+}
+var P = "puzzmo_sim_api_mode", F = "http://localhost:8911", I = "https://api.puzzmo.com", L = () => localStorage.getItem(P) === "dev" ? "dev" : "prod", R = (e) => {
+	localStorage.setItem(P, e);
+}, z = null, B = function() {
+	var t = e(function* () {
+		if (z !== null) return z;
+		try {
+			let e = new AbortController(), t = setTimeout(() => e.abort(), 1e3), n = yield fetch(`${F}/healthz`, { signal: e.signal });
+			return clearTimeout(t), z = n.ok, z;
+		} catch (e) {
+			return z = !1, !1;
+		}
+	});
+	return function() {
+		return t.apply(this, arguments);
+	};
+}(), V = () => ({
+	apiURL: L() === "dev" ? F : I,
+	clientID: "protosdk:oauthclient",
+	redirectUri: `${window.location.origin}/oauth/callback`
+}), H = () => {
+	let e = new Uint8Array(32);
+	return crypto.getRandomValues(e), Array.from(e, (e) => e.toString(16).padStart(2, "0")).join("");
+}, U = "puzzmo_sim_oauth_token", W = "puzzmo_sim_oauth_refresh_token", G = (e) => localStorage.setItem(U, e), de = (e) => localStorage.setItem(W, e), K = () => {
+	let e = localStorage.getItem(U);
+	return console.log("[AuthView] getAccessToken:", {
+		TOKEN_KEY: U,
+		token: e ? `${e.substring(0, 20)}...` : null
+	}), e;
+}, q = () => localStorage.getItem(W), J = () => {
+	localStorage.removeItem(U), localStorage.removeItem(W);
+}, fe = () => {
+	let e = V(), t = H();
+	sessionStorage.setItem("oauth_state", t), sessionStorage.setItem("oauth_return_url", window.location.href);
+	let n = new URL(`${e.apiURL}/oauth/auth`);
+	n.searchParams.set("client_id", e.clientID), n.searchParams.set("response_type", "code"), n.searchParams.set("redirect_uri", e.redirectUri), n.searchParams.set("state", t), window.location.href = n.toString();
+}, pe = (e) => {
+	try {
+		let t = e.split(".");
+		if (t.length !== 3) return !0;
+		let n = JSON.parse(atob(t[1])).exp;
+		return n ? Date.now() >= n * 1e3 - 300 * 1e3 : !0;
+	} catch (e) {
+		return !0;
+	}
+}, me = function() {
+	var t = e(function* () {
+		let e = q();
+		if (!e) return console.log("[AuthView] No refresh token available"), !1;
+		let t = V();
+		try {
+			let n = new URLSearchParams({
+				grant_type: "refresh_token",
+				refresh_token: e,
+				client_id: t.clientID
+			}), r = yield fetch(`${t.apiURL}/oauth/token`, {
+				method: "POST",
+				headers: { "Content-Type": "application/x-www-form-urlencoded" },
+				body: n.toString()
+			});
+			if (!r.ok) return console.error("[AuthView] Failed to refresh token:", r.statusText), !1;
+			let i = yield r.json(), a = i.access_token || i.accessToken;
+			if (!a) return console.error("[AuthView] No access token in refresh response"), !1;
+			G(a);
+			let o = i.refresh_token || i.refreshToken;
+			return o && de(o), console.log("[AuthView] Successfully refreshed access token"), !0;
+		} catch (e) {
+			return console.error("[AuthView] Error refreshing token:", e), !1;
+		}
+	});
+	return function() {
+		return t.apply(this, arguments);
+	};
+}(), he = function() {
+	var t = e(function* (e, t) {
+		let n = V(), r = sessionStorage.getItem("oauth_state");
+		if (!r || r !== t) return console.error("OAuth state mismatch - possible CSRF attack"), null;
+		sessionStorage.removeItem("oauth_state");
+		try {
+			let t = new URLSearchParams({
+				grant_type: "authorization_code",
+				code: e,
+				client_id: n.clientID,
+				redirect_uri: n.redirectUri
+			}), r = yield fetch(`${n.apiURL}/oauth/token`, {
+				method: "POST",
+				headers: { "Content-Type": "application/x-www-form-urlencoded" },
+				body: t.toString()
+			});
+			return r.ok ? yield r.json() : (console.error("Failed to exchange code for token:", r.statusText), null);
+		} catch (e) {
+			return console.error("Error exchanging code for token:", e), null;
+		}
+	});
+	return function(e, n) {
+		return t.apply(this, arguments);
+	};
+}(), ge = function() {
+	var t = e(function* (e, t = {}) {
+		let n = V(), r = K();
+		if (!r) throw Error("Not authenticated");
+		if (pe(r)) if (console.log("[AuthView] Access token expired, attempting refresh..."), yield me()) {
+			if (r = K(), !r) throw Error("Token refresh succeeded but no token available");
+		} else throw J(), Error("Session expired. Please log in again.");
+		let i = yield fetch(`${n.apiURL}/graphql`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${r}`,
+				"auth-provider": "custom"
+			},
+			body: JSON.stringify({
+				query: e,
+				variables: t
+			})
+		});
+		if (!i.ok) throw Error(`API request failed: ${i.statusText}`);
+		return i.json();
+	});
+	return function(e) {
+		return t.apply(this, arguments);
+	};
+}(), _e = (e) => {
+	try {
+		console.log("[AuthView] decodeJWT input:", e);
+		let t = e.split(".");
+		if (console.log("[AuthView] JWT parts:", t.length), t.length !== 3) return null;
+		let n = JSON.parse(atob(t[1]));
+		return console.log("[AuthView] JWT payload:", n), n;
+	} catch (e) {
+		return console.error("[AuthView] decodeJWT error:", e), null;
+	}
+};
+function ve() {
+	let t = !1;
+	return {
+		id: "auth",
+		label: "Auth",
+		render() {
+			let e = K(), t = !!e, n = L(), r = n === "dev" ? F : I, i = `<button class="simulator-btn tiny" id="auth-dev-toggle" style="display: none;">${n === "dev" ? "Using Dev" : "Dev"}</button>`;
+			if (t) {
+				let t = _e(e), n = t != null && t.exp ? (/* @__PURE__ */ new Date(t.exp * 1e3)).toLocaleString() : "Unknown", a = !!q(), o = a ? _e(q()) : null, s = o != null && o.exp ? (/* @__PURE__ */ new Date(o.exp * 1e3)).toLocaleString() : null;
+				return console.log({ decoded: t }), `
+          <div class="simulator-section">
+            <div class="simulator-section-title auth-title-row">
+              <span>Puzzmo Authentication</span>
+              ${i}
+              <button class="simulator-btn danger tiny" id="auth-logout">Logout</button>
+            </div>
+            <div id="auth-status" class="auth-status authenticated">
+              <span class="indicator ready"></span>
+              <span>Authenticated</span>
+            </div>
+            <div id="auth-user-info" class="auth-user-info">
+              <div>User ID: <code>${(t == null ? void 0 : t.userID) || (t == null ? void 0 : t.sub) || "Unknown"}</code></div>
+              <div>API: <code>${r}</code></div>
+              <div>Access expires: <code>${n}</code></div>
+              ${a ? `<div>Refresh expires: <code>${s || "Unknown"}</code></div>` : "<div class=\"auth-warning\">No refresh token</div>"}
+            </div>
+            ${a ? "<button class=\"simulator-btn secondary tiny\" id=\"auth-refresh\">Refresh Now</button>" : ""}
+          </div>
+          <div class="simulator-section">
+            <div class="simulator-section-title">Test API Request</div>
+            <div class="simulator-row">
+              <button class="simulator-btn primary" id="auth-test-api">Fetch Current User</button>
+            </div>
+            <div id="auth-api-result" class="auth-api-result"></div>
+          </div>
+        `;
+			}
+			return `
+        <div class="simulator-section">
+          <div class="simulator-section-title auth-title-row">
+            <span>Puzzmo Authentication</span>
+            ${i}
+          </div>
+          <div id="auth-status" class="auth-status">
+            <span class="indicator waiting"></span>
+            <span>Not authenticated</span>
+          </div>
+          <p class="auth-description">
+            Login with your Puzzmo account to make authenticated API requests.
+            ${n === "dev" ? `<br><strong>Using local dev server:</strong> ${F}` : ""}
+          </p>
+          <div class="simulator-row">
+            <button class="simulator-btn primary" id="auth-login">Login with Puzzmo</button>
+          </div>
+          <div id="auth-error" class="auth-error"></div>
+        </div>
+      `;
+		},
+		bind(n) {
+			let r = n.getElement("#auth-login"), i = n.getElement("#auth-logout"), a = n.getElement("#auth-refresh"), o = n.getElement("#auth-test-api"), s = n.getElement("#auth-api-result"), c = n.getElement("#auth-dev-toggle");
+			t ? z && c && (c.style.display = "", L() === "dev" && c.classList.add("active")) : (t = !0, B().then((e) => {
+				e && c && (c.style.display = "", L() === "dev" && c.classList.add("active"));
+			})), c == null || c.addEventListener("click", () => {
+				R(L() === "dev" ? "prod" : "dev"), J(), window.location.reload();
+			}), r == null || r.addEventListener("click", () => {
+				fe();
+			}), i == null || i.addEventListener("click", () => {
+				J(), window.location.reload();
+			}), a == null || a.addEventListener("click", e(function* () {
+				a.disabled = !0, a.textContent = "Refreshing...", (yield me()) ? window.location.reload() : (a.textContent = "Refresh Failed", a.disabled = !1);
+			})), o == null || o.addEventListener("click", e(function* () {
+				if (s) {
+					s.innerHTML = "<div class=\"loading\">Loading...</div>";
+					try {
+						let t = yield ge("\n            query {\n              currentUser {\n                id\n                username\n                usernameID\n                name\n              }\n            }\n          ");
+						if (t.errors) {
+							var e;
+							s.innerHTML = `<div class="error">Error: ${((e = t.errors[0]) == null ? void 0 : e.message) || "Unknown error"}</div>`;
+						} else s.innerHTML = `<pre>${JSON.stringify(t.data, null, 2)}</pre>`;
+					} catch (e) {
+						s.innerHTML = `<div class="error">Error: ${e instanceof Error ? e.message : "Unknown error"}</div>`;
+					}
+				}
+			}));
+		},
+		onActivate(t) {
+			return e(function* () {
+				let e = new URLSearchParams(window.location.search), n = e.get("code"), r = e.get("state"), i = e.get("error");
+				if (i) {
+					let e = t.getElement("#auth-error");
+					e && (e.innerHTML = `<div class="error">OAuth error: ${i}</div>`), window.history.replaceState({}, "", window.location.pathname);
+					return;
+				}
+				if (n && r) {
+					let e = t.getElement("#auth-status");
+					e && (e.innerHTML = "<span class=\"indicator waiting\"></span><span>Exchanging code...</span>");
+					let i = yield he(n, r);
+					if (window.history.replaceState({}, "", window.location.pathname), i) {
+						let e = i.access_token || i.accessToken;
+						if (e) {
+							G(e);
+							let t = i.refresh_token || i.refreshToken;
+							t && de(t);
+						}
+						window.location.reload();
+					} else {
+						let e = t.getElement("#auth-error");
+						e && (e.innerHTML = "<div class=\"error\">Failed to exchange code for token</div>");
+					}
+				}
+			})();
+		}
+	};
+}
+var ye = "puzzmo_sim_api_mode", be = "http://localhost:8911", xe = "https://api.puzzmo.com", Y = "puzzmo_sim_oauth_token", X = "puzzmo_sim_oauth_refresh_token", Se = () => localStorage.getItem(ye) === "dev" ? "dev" : "prod", Z = () => localStorage.getItem(Y), Ce = () => localStorage.getItem(X), we = (e) => localStorage.setItem(Y, e), Te = (e) => localStorage.setItem(X, e), Ee = () => {
+	localStorage.removeItem(Y), localStorage.removeItem(X);
+}, De = (e) => {
+	try {
+		let t = e.split(".");
+		if (t.length !== 3) return !0;
+		let n = JSON.parse(atob(t[1])).exp;
+		return n ? Date.now() >= n * 1e3 - 300 * 1e3 : !0;
+	} catch (e) {
+		return !0;
+	}
+}, Oe = function() {
+	var t = e(function* () {
+		let e = Ce();
+		if (!e) return !1;
+		let t = Se() === "dev" ? be : xe;
+		try {
+			let n = new URLSearchParams({
+				grant_type: "refresh_token",
+				refresh_token: e,
+				client_id: "protosdk:oauthclient"
+			}), r = yield fetch(`${t}/oauth/token`, {
+				method: "POST",
+				headers: { "Content-Type": "application/x-www-form-urlencoded" },
+				body: n.toString()
+			});
+			if (!r.ok) return !1;
+			let i = yield r.json(), a = i.access_token || i.accessToken;
+			if (!a) return !1;
+			we(a);
+			let o = i.refresh_token || i.refreshToken;
+			return o && Te(o), !0;
+		} catch (e) {
+			return !1;
+		}
+	});
+	return function() {
+		return t.apply(this, arguments);
+	};
+}(), ke = function() {
+	var t = e(function* (e, t = {}) {
+		let n = Se() === "dev" ? be : xe, r = Z();
+		if (!r) throw Error("Not authenticated");
+		if (De(r)) if (yield Oe()) {
+			if (r = Z(), !r) throw Error("Token refresh succeeded but no token available");
+		} else throw Ee(), Error("Session expired. Please log in again.");
+		let i = yield fetch(`${n}/graphql`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${r}`,
+				"auth-provider": "custom"
+			},
+			body: JSON.stringify({
+				query: e,
+				variables: t
+			})
+		});
+		if (!i.ok) throw Error(`API request failed: ${i.statusText}`);
+		return i.json();
+	});
+	return function(e) {
+		return t.apply(this, arguments);
+	};
+}(), Ae = "\n  query GameFeaturesQuery($slug: ID!) {\n    game(id: $slug) {\n      id\n      slug\n      displayName\n      featuresArr\n      gameFeatures {\n        slug\n        title\n        features {\n          featureID\n          title\n          isEnabled\n        }\n      }\n    }\n  }\n", je = "\n  mutation ToggleFeatureMutation($gameSlug: ID!, $input: UpdateGameInput!) {\n    updateGame(id: $gameSlug, input: $input) {\n      id\n      featuresArr\n      gameFeatures {\n        slug\n        title\n        features {\n          featureID\n          title\n          isEnabled\n        }\n      }\n    }\n  }\n", Me = (e, t) => {
+	let n = t - 1, r = Math.floor(n / 31), i = n % 31, a = [...e];
+	for (; a.length <= r;) a.push(0);
+	return a[r] = a[r] ^ 1 << i, a;
+};
+const Q = () => !!Z();
+function Ne() {
+	let n = null, r = !1, i = null, a = function() {
+		var t = e(function* (e) {
+			r = !0, i = null;
+			try {
+				var t;
+				let r = yield ke(Ae, { slug: e });
+				if (r.errors) {
+					var a;
+					i = ((a = r.errors[0]) == null ? void 0 : a.message) || "Unknown error", n = null;
+				} else (t = r.data) != null && t.game ? n = r.data.game : (i = "Game not found", n = null);
+			} catch (e) {
+				i = e instanceof Error ? e.message : "Unknown error", n = null;
+			} finally {
+				r = !1;
+			}
+		});
+		return function(e) {
+			return t.apply(this, arguments);
+		};
+	}(), o = function() {
+		var r = e(function* (e) {
+			if (!n) return;
+			let r = Me(n.featuresArr, e);
+			try {
+				var i;
+				let e = yield ke(je, {
+					gameSlug: n.slug,
+					input: { featuresArr: r }
+				});
+				if (e.errors) {
+					var a;
+					console.error("Failed to toggle feature:", (a = e.errors[0]) == null ? void 0 : a.message);
+				} else (i = e.data) != null && i.updateGame && (n = t(t({}, n), {}, {
+					featuresArr: e.data.updateGame.featuresArr,
+					gameFeatures: e.data.updateGame.gameFeatures
+				}));
+			} catch (e) {
+				console.error("Failed to toggle feature:", e);
+			}
+		});
+		return function(e) {
+			return r.apply(this, arguments);
+		};
+	}(), s = () => {
+		if (r) return "<div class=\"features-loading\">Loading features...</div>";
+		if (i) return `<div class="features-error">${i}</div>`;
+		if (!n) return "<div class=\"features-empty\">Enter your game slug above to load features</div>";
+		let e = n.gameFeatures.map((e) => {
+			let t = e.features.map((e) => {
+				let t = e.isEnabled ? "enabled" : "disabled", n = e.isEnabled ? "✓" : "✗";
+				return `
+              <div class="feature-item ${t}" data-feature-id="${e.featureID}">
+                <span class="feature-status">${n}</span>
+                <span class="feature-title">${e.title}</span>
+              </div>
+            `;
+			}).join("");
+			return `
+          <div class="feature-group">
+            <div class="feature-group-title">${e.title}</div>
+            <div class="feature-group-items">${t}</div>
+          </div>
+        `;
+		}).join("");
+		return `
+      <div class="features-game-name">${n.displayName}</div>
+      ${e}
+    `;
+	};
+	return {
+		id: "features",
+		label: "Features",
+		render() {
+			return Q() ? `
+        <div class="features-view-container">
+          <div class="simulator-section">
+            <div class="simulator-section-title">Game Features</div>
+            <div class="features-slug-input">
+              <input type="text" class="simulator-input" id="features-game-slug" placeholder="Game slug (e.g. crossword)" />
+              <button class="simulator-btn primary" id="features-load-btn">Load</button>
+            </div>
+          </div>
+          <div class="simulator-divider"></div>
+          <div id="features-content" class="features-content">
+            ${s()}
+          </div>
+        </div>
+      ` : "\n          <div class=\"features-view-container\">\n            <div class=\"simulator-section\">\n              <div class=\"simulator-section-title\">Game Features</div>\n              <div class=\"features-auth-required\">\n                <p>You must be logged in to view and edit game features.</p>\n                <p>Go to the <strong>Auth</strong> tab to log in with your Puzzmo account.</p>\n              </div>\n            </div>\n          </div>\n        ";
+		},
+		bind(t) {
+			let r = t.getElement("#features-load-btn"), i = t.getElement("#features-game-slug"), c = t.getElement("#features-content"), l = () => {
+				c && (c.innerHTML = s(), u());
+			}, u = () => {
+				var n;
+				let r = (n = t.getElement("#features-content")) == null ? void 0 : n.querySelectorAll(".feature-item");
+				r == null || r.forEach((t) => {
+					t.addEventListener("click", e(function* () {
+						let e = parseInt(t.getAttribute("data-feature-id") || "0");
+						e > 0 && (t.classList.add("updating"), yield o(e), l());
+					}));
+				});
+			}, d = function() {
+				var t = e(function* (e) {
+					e && (r && (r.disabled = !0, r.textContent = "Loading..."), yield a(e), l(), r && (r.disabled = !1, r.textContent = "Load"));
+				});
+				return function(e) {
+					return t.apply(this, arguments);
+				};
+			}();
+			r == null || r.addEventListener("click", e(function* () {
+				let e = i == null ? void 0 : i.value.trim();
+				e && (yield d(e));
+			})), i == null || i.addEventListener("keypress", (e) => {
+				e.key === "Enter" && (r == null || r.click());
+			}), console.log("[FeaturesView] bind called, ctx.gameSlug:", t.gameSlug, "slugInput:", i), t.gameSlug && i && (i.value = t.gameSlug, Q() && !n && d(t.gameSlug)), u();
+		},
+		onActivate(e) {
+			let t = e.getElement("#simulator-tab-features");
+			t && (t.innerHTML = this.render(), this.bind(e));
+		}
+	};
+}
+var Pe = "./sample-puzzle.json", $ = null;
+/**
+* Creates the Simulator UI and message handling.
+* If called multiple times, updates the existing instance with new settings (e.g., fixtures).
+*/
+function Fe(t = {}) {
+	var n, r, i;
+	if (console.log("[Simulator] createSimulator called with config:", {
+		slug: t.slug,
+		hasFixtures: !!t.fixtures
+	}), $) return t.fixtures && (console.log("[Simulator] Instance already exists, updating fixtures"), $.updateFixtures(t.fixtures)), $;
+	let a = (n = t.puzzlePath) == null ? Pe : n, o = (r = t.autoStart) == null ? !0 : r, s = t.fixtures ? v(t.fixtures) : null, c = s ? Array.from(s.keys()).sort() : [], f = oe(), p = le(), m = [
+		re(),
+		ae(),
+		f,
+		se(),
+		ce(),
+		p,
+		ue(),
+		ve(),
+		Ne()
+	], h = m.map((e) => e.id), g = l(t, c, h), _ = {
+		pause: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><rect x=\"1\" y=\"1\" width=\"3\" height=\"8\"/><rect x=\"6\" y=\"1\" width=\"3\" height=\"8\"/></svg>",
+		play: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><polygon points=\"2,1 9,5 2,9\"/></svg>",
+		retry: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><path d=\"M5 1C2.8 1 1 2.8 1 5s1.8 4 4 4c1.8 0 3.3-1.2 3.8-2.8H7.5c-.4.9-1.3 1.5-2.5 1.5-1.5 0-2.7-1.2-2.7-2.7S3.5 2.3 5 2.3c.7 0 1.4.3 1.9.8L5.5 4.5H9V1L7.6 2.4C6.9 1.5 5.9 1 5 1z\"/></svg>",
+		cog: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><path d=\"M9.5 5.8l-.8-.5c0-.2.1-.5.1-.8s0-.5-.1-.8l.8-.5c.1-.1.2-.2.1-.4l-.8-1.4c-.1-.1-.2-.2-.4-.1l-1 .3c-.3-.3-.7-.5-1.1-.6L6.1.2C6.1.1 6 0 5.8 0H4.2c-.2 0-.3.1-.3.2l-.2 1c-.4.1-.7.3-1.1.6l-1-.3c-.2 0-.3 0-.4.1l-.8 1.4c-.1.2 0 .3.1.4l.8.5c0 .2-.1.5-.1.8s0 .5.1.8l-.8.5c-.1.1-.2.2-.1.4l.8 1.4c.1.1.2.2.4.1l1-.3c.3.3.7.5 1.1.6l.2 1c0 .1.1.2.3.2h1.6c.2 0 .3-.1.3-.2l.2-1c.4-.1.7-.3 1.1-.6l1 .3c.2 0 .3 0 .4-.1l.8-1.4c.1-.2 0-.3-.1-.4zM5 6.5c-.8 0-1.5-.7-1.5-1.5S4.2 3.5 5 3.5 6.5 4.2 6.5 5 5.8 6.5 5 6.5z\"/></svg>",
+		minimize: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><rect x=\"1\" y=\"4\" width=\"8\" height=\"2\"/></svg>",
+		expand: "<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"currentColor\"><polygon points=\"1,1 7,4 1,7\"/></svg>"
+	}, y = document.createElement("div");
+	y.id = "simulator", y.innerHTML = `
+    <style>
+  :root {
+    --sim-bg: #1a1a2e;
+    --sim-bg-alt: #16213e;
+    --sim-panel: #0f0f1a;
+    --sim-border: #3a3a5c;
+    --sim-border-light: #5a5a8c;
+    --sim-accent: #ffd700;
+    --sim-accent-hover: #ffed4a;
+    --sim-text: #e8e8e8;
+    --sim-text-dim: #888899;
+    --sim-success: #4ade80;
+    --sim-error: #f87171;
+    --sim-warning: #fbbf24;
+    --sim-blue: #60a5fa;
+  }
+  #simulator {
+    position: fixed;
+    bottom: 4px;
+    left: 4px;
+    z-index: 999999;
+    font: 11px/1.4 "Menlo", "Monaco", "Consolas", monospace;
+    user-select: none;
+  }
+  #simulator-panel {
+    background: var(--sim-panel);
+    border: 2px solid var(--sim-border);
+    border-radius: 4px;
+    color: var(--sim-text);
+    width: 420px;
+    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
+  }
+  #simulator-panel.collapsed {
+    width: auto;
+  }
+  #simulator-header {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    background: var(--sim-bg);
+    border-bottom: 2px solid var(--sim-border);
+    gap: 0;
+  }
+  #simulator-panel.collapsed #simulator-header {
+    border-bottom: none;
+    cursor: pointer;
+  }
+  #simulator-panel.collapsed #simulator-header:hover {
+    background: var(--sim-bg-alt);
+  }
+  .header-sep {
+    color: var(--sim-border-light);
+    margin: 0 8px;
+    opacity: 0.6;
+  }
+  .header-spacer {
+    flex: 1;
+  }
+  #simulator-title {
+    color: var(--sim-accent);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 10px;
+    font-weight: bold;
+  }
+  #simulator-header-controls {
+    display: flex;
+    gap: 2px;
+  }
+  .header-icon-btn {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: 2px;
+    color: var(--sim-text);
+    cursor: pointer;
+    padding: 0;
+  }
+  .header-icon-btn:hover:not(:disabled) {
+    background: var(--sim-border);
+    color: var(--sim-accent);
+  }
+  .header-icon-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+  .header-icon-btn.active {
+    background: var(--sim-accent);
+    color: var(--sim-panel);
+  }
+  #simulator-header-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 9px;
+    color: var(--sim-text-dim);
+  }
+  #simulator-header-indicator {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--sim-text-dim);
+    flex-shrink: 0;
+  }
+  #simulator-header-indicator.ready {
+    background: var(--sim-success);
+    box-shadow: 0 0 4px var(--sim-success);
+  }
+  #simulator-header-indicator.waiting {
+    background: var(--sim-warning);
+    box-shadow: 0 0 4px var(--sim-warning);
+  }
+  #simulator-header-indicator.paused {
+    background: var(--sim-error);
+    box-shadow: 0 0 4px var(--sim-error);
+  }
+  #simulator-timer {
+    font-size: 11px;
+    color: var(--sim-text);
+    font-family: "Menlo", monospace;
+    font-weight: bold;
+    font-variant-numeric: tabular-nums;
+    min-width: 38px;
+  }
+  #simulator-timer .penalty {
+    color: var(--sim-error);
+    margin-left: 2px;
+  }
+  /* Collapsed state - show minimal bar */
+  #simulator-panel.collapsed .header-sep,
+  #simulator-panel.collapsed #simulator-header-controls,
+  #simulator-panel.collapsed #simulator-header-status,
+  #simulator-panel.collapsed #simulator-header-settings,
+  #simulator-panel.collapsed #simulator-toggle {
+    display: none;
+  }
+  #simulator-panel.collapsed #simulator-title {
+    cursor: pointer;
+  }
+  #simulator-panel.collapsed #simulator-timer {
+    margin-left: 8px;
+  }
+  #simulator-body {
+    display: flex;
+    flex-direction: row;
+  }
+  #simulator-panel.collapsed #simulator-body {
+    display: none;
+  }
+  #simulator-tabs {
+    display: flex;
+    flex-direction: column;
+    background: var(--sim-bg);
+    padding: 4px;
+    gap: 2px;
+    border-right: 2px solid var(--sim-border);
+  }
+  .simulator-tab {
+    padding: 2px 3px;
+    background: var(--sim-bg-alt);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    color: var(--sim-text-dim);
+    cursor: pointer;
+    font: inherit;
+    text-transform: uppercase;
+    font-size: 9px;
+    font-weight: bold;
+    letter-spacing: 0.5px;
+    min-height: 0;
+  }
+  .simulator-tab:hover {
+    color: var(--sim-text);
+    background: var(--sim-border);
+  }
+  .simulator-tab.active {
+    color: var(--sim-panel);
+    background: var(--sim-accent);
+    border-color: var(--sim-accent);
+  }
+  .simulator-tab {
+    position: relative;
+  }
+  .simulator-tab-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 14px;
+    height: 14px;
+    padding: 0 3px;
+    background: var(--sim-blue);
+    color: #fff;
+    font-size: 8px;
+    font-weight: bold;
+    border-radius: 7px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
+    line-height: 1;
+    text-align: center;
+    box-sizing: border-box;
+  }
+  .simulator-tab-badge:empty {
+    display: none;
+  }
+  #simulator-content {
+    padding: 6px;
+    background: var(--sim-panel);
+    height: 500px;
+    flex: 1;
+    overflow-y: auto;
+  }
+  #simulator-content.hidden {
+    display: none;
+  }
+  #simulator-content::-webkit-scrollbar {
+    width: 8px;
+  }
+  #simulator-content::-webkit-scrollbar-track {
+    background: var(--sim-bg);
+  }
+  #simulator-content::-webkit-scrollbar-thumb {
+    background: var(--sim-border);
+    border-radius: 2px;
+  }
+  .simulator-btn {
+    padding: 4px 8px;
+    background: var(--sim-bg-alt);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    color: var(--sim-text);
+    font: inherit;
+    font-size: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+  }
+  .simulator-btn:hover {
+    background: var(--sim-border);
+    border-color: var(--sim-border-light);
+  }
+  .simulator-btn:active {
+    transform: translate(1px, 1px);
+  }
+  .simulator-btn.primary {
+    background: var(--sim-accent);
+    border-color: var(--sim-accent);
+    color: var(--sim-panel);
+  }
+  .simulator-btn.primary:hover {
+    background: var(--sim-accent-hover);
+    border-color: var(--sim-accent-hover);
+  }
+  .simulator-btn.danger {
+    background: var(--sim-error);
+    border-color: var(--sim-error);
+    color: #fff;
+  }
+  .simulator-btn.danger:hover {
+    background: #ef4444;
+    border-color: #ef4444;
+  }
+  .simulator-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    transform: none;
+  }
+  .simulator-btn.subtle {
+    background: transparent;
+    border-color: transparent;
+    color: var(--sim-text-dim);
+  }
+  .simulator-btn.subtle:hover:not(:disabled) {
+    background: var(--sim-bg-alt);
+    border-color: var(--sim-border);
+    color: var(--sim-text);
+  }
+  #simulator-status {
+    font-size: 10px;
+    color: var(--sim-text-dim);
+    padding: 4px 0 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  #simulator-status .indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    background: var(--sim-text-dim);
+  }
+  #simulator-status .indicator.ready {
+    background: var(--sim-success);
+    box-shadow: 0 0 6px var(--sim-success);
+  }
+  #simulator-status .indicator.waiting {
+    background: var(--sim-warning);
+    box-shadow: 0 0 6px var(--sim-warning);
+  }
+  #simulator-status .indicator.paused {
+    background: var(--sim-error);
+    box-shadow: 0 0 6px var(--sim-error);
+  }
+  .simulator-row {
+    display: flex;
+    gap: 4px;
+    margin-top: 4px;
+  }
+  .simulator-row .simulator-btn {
+    flex: 1;
+  }
+  .simulator-divider {
+    height: 2px;
+    background: var(--sim-border);
+    margin: 8px 0;
+  }
+  .simulator-field {
+    margin-bottom: 6px;
+  }
+  .simulator-select {
+    width: 100%;
+    padding: 4px 6px;
+    background: var(--sim-bg);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    color: var(--sim-text);
+    font: inherit;
+    font-size: 10px;
+    cursor: pointer;
+  }
+  .simulator-select:focus {
+    outline: none;
+    border-color: var(--sim-accent);
+  }
+  .simulator-select option {
+    background: var(--sim-bg);
+    color: var(--sim-text);
+  }
+  .simulator-fixtures {
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid var(--sim-border);
+  }
+  .simulator-label {
+    display: block;
+    color: var(--sim-accent);
+    text-transform: uppercase;
+    font-size: 9px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin-bottom: 4px;
+  }
+  .simulator-textarea {
+    width: 100%;
+    min-height: 40px;
+    background: var(--sim-bg);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    color: var(--sim-text);
+    font: 10px/1.4 "Menlo", monospace;
+    padding: 4px;
+    resize: none;
+    box-sizing: border-box;
+    overflow-y: auto;
+  }
+  .simulator-textarea.auto-resize {
+    resize: none;
+    overflow-y: auto;
+  }
+  .simulator-textarea:focus {
+    outline: none;
+    border-color: var(--sim-accent);
+  }
+  .simulator-input {
+    width: 100%;
+    background: var(--sim-bg);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    color: var(--sim-text);
+    font: 10px/1.4 "Menlo", monospace;
+    padding: 4px 6px;
+    box-sizing: border-box;
+  }
+  .simulator-input:focus {
+    outline: none;
+    border-color: var(--sim-accent);
+  }
+  .simulator-input::placeholder {
+    color: var(--sim-text-dim);
+  }
+  .simulator-tab-content {
+    display: none;
+  }
+  .simulator-tab-content.active {
+    display: block;
+  }
+  .msgs-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  .msgs-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+    flex-shrink: 0;
+  }
+  #simulator-msgs-log {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    overflow-y: auto;
+  }
+  .simulator-msg {
+    padding: 3px 4px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    font-size: 10px;
+  }
+  .simulator-msg.out {
+    border-left: 2px solid var(--sim-accent);
+  }
+  .simulator-msg.in {
+    border-left: 2px solid var(--sim-blue);
+  }
+  .simulator-msg-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2px;
+  }
+  .simulator-msg-type {
+    font-weight: bold;
+    color: var(--sim-text);
+  }
+  .simulator-msg.out .simulator-msg-type {
+    color: var(--sim-accent);
+  }
+  .simulator-msg.in .simulator-msg-type {
+    color: var(--sim-blue);
+  }
+  .simulator-msg-time {
+    color: var(--sim-text-dim);
+    font-size: 9px;
+  }
+  .simulator-msg-data {
+    color: var(--sim-text-dim);
+    font-size: 9px;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 60px;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 2px;
+    padding: 2px 4px;
+    background: var(--sim-bg-alt);
+  }
+  .simulator-msg-data:hover {
+    background: var(--sim-border);
+  }
+  .simulator-msg.expanded {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .simulator-msg.expanded .simulator-msg-data {
+    max-height: none;
+    flex: 1;
+    overflow-y: auto;
+  }
+  .simulator-empty {
+    color: var(--sim-text-dim);
+    font-size: 10px;
+    text-align: center;
+    padding: 20px;
+  }
+  .simulator-value {
+    color: var(--sim-text);
+    font-size: 10px;
+    padding: 4px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+  }
+  .simulator-deeds {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .simulator-deed {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 4px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    font-size: 10px;
+  }
+  .simulator-deed-name {
+    color: var(--sim-text);
+  }
+  .simulator-deed-value {
+    color: var(--sim-accent);
+    font-weight: bold;
+  }
+  .thumb-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  .thumb-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+    flex-shrink: 0;
+  }
+  #simulator-thumb-preview {
+    background: var(--sim-thumb-bg, transparent);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  #simulator-thumb-preview svg {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  #simulator-thumb-fn {
+    font-size: 10px;
+    color: var(--sim-text-dim);
+    margin-top: 4px;
+  }
+  .theme-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  .theme-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+    flex-shrink: 0;
+  }
+  .simulator-themes {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    overflow-y: auto;
+  }
+  .simulator-theme-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    background: var(--sim-bg);
+    border: 2px solid var(--sim-border);
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .simulator-theme-item:hover {
+    border-color: var(--sim-border-light);
+  }
+  .simulator-theme-item.selected {
+    border-color: var(--sim-accent);
+    background: var(--sim-bg-alt);
+  }
+  .simulator-theme-preview {
+    width: 48px;
+    height: 32px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    gap: 1px;
+    border-radius: 2px;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .simulator-theme-preview-cell {
+    width: 100%;
+    height: 100%;
+  }
+  .simulator-theme-name {
+    font-size: 10px;
+    color: var(--sim-text);
+    flex: 1;
+  }
+  .simulator-theme-type {
+    font-size: 9px;
+    color: var(--sim-text-dim);
+    text-transform: uppercase;
+  }
+  /* Auth tab styles */
+  .simulator-section {
+    margin-bottom: 12px;
+  }
+  .simulator-section-title {
+    color: var(--sim-accent);
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin-bottom: 6px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--sim-border);
+  }
+  .auth-header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+  }
+  .auth-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 10px;
+    color: var(--sim-text-dim);
+    padding: 4px 0;
+  }
+  .auth-status.authenticated {
+    color: var(--sim-success);
+  }
+  .simulator-btn.small {
+    padding: 2px 6px;
+    font-size: 9px;
+  }
+  .simulator-btn.tiny {
+    padding: 3px 2px;
+    font-size: 8px;
+    border-width: 1px;
+    line-height: 1;
+    min-height: 0;
+    height: auto;
+  }
+  .auth-title-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .auth-title-row > span:first-child {
+    flex: 1;
+  }
+  .auth-title-row .simulator-btn.active {
+    background: var(--sim-accent);
+    color: black;
+  }
+  .auth-description {
+    font-size: 10px;
+    color: var(--sim-text-dim);
+    margin: 6px 0;
+    line-height: 1.4;
+  }
+  .auth-user-info {
+    font-size: 10px;
+    color: var(--sim-text-dim);
+    padding: 6px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    margin-bottom: 8px;
+  }
+  .auth-user-info div {
+    margin-bottom: 4px;
+  }
+  .auth-user-info div:last-child {
+    margin-bottom: 0;
+  }
+  .auth-user-info code {
+    color: var(--sim-text);
+    background: var(--sim-bg-alt);
+    padding: 1px 4px;
+    border-radius: 2px;
+  }
+  .auth-warning {
+    color: var(--sim-warning);
+    font-style: italic;
+  }
+  .auth-error {
+    margin-top: 8px;
+  }
+  .auth-error .error,
+  .auth-api-result .error {
+    color: var(--sim-error);
+    font-size: 10px;
+    padding: 6px;
+    background: rgba(248, 113, 113, 0.1);
+    border: 1px solid var(--sim-error);
+    border-radius: 2px;
+  }
+  .auth-api-result {
+    margin-top: 8px;
+  }
+  .auth-api-result pre {
+    font-size: 9px;
+    color: var(--sim-text);
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    padding: 6px;
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-all;
+    max-height: 150px;
+    overflow-y: auto;
+  }
+  .auth-api-result .loading {
+    font-size: 10px;
+    color: var(--sim-text-dim);
+    padding: 6px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+  }
+  /* Data view styles */
+  .data-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  .data-subtabs {
+    display: flex;
+    gap: 2px;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+  }
+  .data-subtab {
+    padding: 4px 10px;
+    background: var(--sim-bg-alt);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    color: var(--sim-text-dim);
+    cursor: pointer;
+    font: inherit;
+    font-size: 9px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .data-subtab:hover {
+    color: var(--sim-text);
+    background: var(--sim-border);
+  }
+  .data-subtab.active {
+    color: var(--sim-panel);
+    background: var(--sim-accent);
+    border-color: var(--sim-accent);
+  }
+  .data-subtab-content {
+    display: none;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .data-subtab-content.active {
+    display: flex;
+    flex-direction: column;
+  }
+  /* History tab styles */
+  .history-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+    flex-shrink: 0;
+  }
+  .history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    overflow-y: auto;
+  }
+  .history-item {
+    padding: 6px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+  .history-item:hover {
+    border-color: var(--sim-border-light);
+  }
+  .history-item-thumb {
+    width: 80px;
+    height: 80px;
+    flex-shrink: 0;
+    background: var(--history-thumb-bg, var(--sim-bg-alt));
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+  .history-item-thumb svg {
+    width: 100%;
+    height: 100%;
+  }
+  .history-item-thumb:empty {
+    display: none;
+  }
+  .history-item-content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .history-item-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .history-item-num {
+    color: var(--sim-accent);
+    font-weight: bold;
+    font-size: 9px;
+  }
+  .history-item-time {
+    color: var(--sim-text-dim);
+    font-size: 9px;
+    flex: 1;
+  }
+  .history-item-preview {
+    font-size: 9px;
+    color: var(--sim-text);
+    word-break: break-all;
+    line-height: 1.3;
+    background: var(--sim-bg-alt);
+    padding: 3px 4px;
+    border-radius: 2px;
+    flex: 1;
+    overflow: hidden;
+  }
+  /* Saves tab styles */
+  .save-new {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+  }
+  .save-new .simulator-input {
+    flex: 1;
+  }
+  .saves-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    overflow-y: auto;
+  }
+  .save-item {
+    padding: 6px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+  }
+  .save-item:hover {
+    border-color: var(--sim-border-light);
+  }
+  .save-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+  .save-item-name {
+    color: var(--sim-text);
+    font-weight: bold;
+    font-size: 10px;
+  }
+  .save-item-time {
+    color: var(--sim-text-dim);
+    font-size: 9px;
+  }
+  .save-item-actions {
+    display: flex;
+    gap: 4px;
+  }
+  /* Features view styles */
+  .features-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  .features-slug-input {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+  .features-slug-input .simulator-input {
+    flex: 1;
+  }
+  .features-content {
+    flex: 1;
+    overflow-y: auto;
+  }
+  .features-loading {
+    color: var(--sim-text-dim);
+    font-size: 10px;
+    text-align: center;
+    padding: 20px;
+  }
+  .features-error {
+    color: var(--sim-error);
+    font-size: 10px;
+    padding: 8px;
+    background: rgba(248, 113, 113, 0.1);
+    border: 1px solid var(--sim-error);
+    border-radius: 2px;
+  }
+  .features-empty {
+    color: var(--sim-text-dim);
+    font-size: 10px;
+    text-align: center;
+    padding: 20px;
+  }
+  .features-auth-required {
+    color: var(--sim-text-dim);
+    font-size: 10px;
+    padding: 12px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    line-height: 1.5;
+  }
+  .features-auth-required p {
+    margin: 0 0 8px 0;
+  }
+  .features-auth-required p:last-child {
+    margin-bottom: 0;
+  }
+  .features-game-name {
+    color: var(--sim-accent);
+    font-size: 11px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid var(--sim-border);
+  }
+  .feature-group {
+    margin-bottom: 12px;
+  }
+  .feature-group-title {
+    color: var(--sim-text);
+    font-size: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+    padding-bottom: 2px;
+    border-bottom: 1px solid var(--sim-border);
+  }
+  .feature-group-items {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .feature-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 6px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  .feature-item:hover {
+    border-color: var(--sim-border-light);
+    background: var(--sim-bg-alt);
+  }
+  .feature-item.updating {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .feature-status {
+    font-size: 14px;
+    width: 18px;
+    text-align: center;
+    flex-shrink: 0;
+  }
+  .feature-item.enabled .feature-status {
+    color: var(--sim-success);
+  }
+  .feature-item.disabled .feature-status {
+    color: var(--sim-error);
+    opacity: 0.5;
+  }
+  .feature-title {
+    font-size: 10px;
+    color: var(--sim-text);
+    flex: 1;
+  }
+  .feature-item.disabled .feature-title {
+    color: var(--sim-text-dim);
+  }
+  /* Checkpoints view styles */
+  .checkpoints-view-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+  }
+  .checkpoints-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 6px;
+    flex-shrink: 0;
+  }
+  .checkpoints-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+    overflow-y: auto;
+  }
+  .checkpoint-item {
+    padding: 6px;
+    background: var(--sim-bg);
+    border: 1px solid var(--sim-border);
+    border-left: 3px solid var(--sim-accent);
+    border-radius: 2px;
+  }
+  .checkpoint-item:hover {
+    border-color: var(--sim-border-light);
+    border-left-color: var(--sim-accent);
+  }
+  .checkpoint-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .checkpoint-item .simulator-deeds {
+    margin-top: 4px;
+  }
+  .checkpoint-name {
+    color: var(--sim-accent);
+    font-weight: bold;
+    font-size: 10px;
+  }
+  .checkpoint-time {
+    color: var(--sim-text-dim);
+    font-size: 9px;
+  }
+</style>
+    <div id="simulator-panel" class="${g.isCollapsed ? "collapsed" : ""}">
+      <div id="simulator-header">
+        <span id="simulator-title">PUZZMO SIMULATOR</span>
+        <span class="header-sep">|</span>
+        <div id="simulator-timer">--:--</div>
+        <span class="header-sep">|</span>
+        <div id="simulator-header-controls">
+          <button id="simulator-header-pause" class="header-icon-btn" title="Pause" disabled>${_.pause}</button>
+          <button id="simulator-header-retry" class="header-icon-btn" title="Retry" disabled>${_.retry}</button>
+        </div>
+        <span class="header-sep">|</span>
+        <div id="simulator-header-status">
+          <span id="simulator-header-indicator" class="waiting"></span>
+          <span id="simulator-header-status-text">Waiting...</span>
+        </div>
+        <span class="header-spacer"></span>
+        <button id="simulator-header-settings" class="header-icon-btn" title="Settings">${_.cog}</button>
+        <button id="simulator-toggle" class="header-icon-btn" title="Minimize">${_.minimize}</button>
+      </div>
+      <div id="simulator-body">
+        <div id="simulator-tabs">
+          ${m.filter((e) => e.id !== "auth").map((e) => `<button class="simulator-tab" data-tab="${e.id}">${e.label}<span class="simulator-tab-badge" data-badge="${e.id}"></span></button>`).join("")}
+        </div>
+        <div id="simulator-content" class="hidden">
+          ${m.map((e) => `<div id="simulator-tab-${e.id}" class="simulator-tab-content">${e.render()}</div>`).join("")}
+        </div>
+      </div>
+    </div>
+  `, document.body.appendChild(y);
+	let b = y.querySelector("#simulator-panel"), x = y.querySelector("#simulator-header"), S = y.querySelector("#simulator-header-indicator"), ie = y.querySelector("#simulator-header-status-text"), C = y.querySelector("#simulator-header-pause"), w = y.querySelector("#simulator-header-retry"), T = y.querySelector("#simulator-header-settings"), E = y.querySelector("#simulator-toggle"), D = y.querySelector("#simulator-timer"), O = y.querySelector("#simulator-tabs"), k = y.querySelector("#simulator-content"), A = (e) => y.querySelector(e), j = (e) => {
+		C.innerHTML = e ? _.play : _.pause, C.title = e ? "Resume" : "Pause";
+	}, M = (e, t) => {
+		let n = A("#simulator-status .text"), r = A("#simulator-status .indicator");
+		n && (n.textContent = e), r && (r.className = `indicator ${t}`), S.className = t, ie.textContent = e;
+	}, N = (e, t) => {
+		t && t !== "0" ? D.innerHTML = `${e}<span class="penalty">+${t}</span>` : D.textContent = e;
+	}, P = (e) => {
+		var t;
+		g.activeTab = e, k.classList.remove("hidden"), d(e), O.querySelectorAll(".simulator-tab").forEach((t) => {
+			t.classList.toggle("active", t.getAttribute("data-tab") === e);
+		}), y.querySelectorAll(".simulator-tab-content").forEach((t) => {
+			t.classList.toggle("active", t.id === `simulator-tab-${e}`);
+		}), T.classList.toggle("active", e === "auth");
+		let n = m.find((t) => t.id === e);
+		n == null || (t = n.onActivate) == null || t.call(n, V);
+	}, F = (e) => {
+		g.isCollapsed = e, b.classList.toggle("collapsed", e), u(e), e ? (k.classList.add("hidden"), O.querySelectorAll(".simulator-tab").forEach((e) => e.classList.remove("active"))) : P(g.activeTab);
+	}, I = () => {
+		p.updatePreview(V);
+	}, L = function() {
+		var t = e(function* () {
+			if (g.puzzleData) return g.puzzleData;
+			try {
+				let e = yield fetch(a);
+				if (!e.ok) throw Error(`Failed to load puzzle from ${a}`);
+				g.puzzleData = yield e.json(), console.log("Simulator: Puzzle loaded", g.puzzleData), g.originalPuzzle = JSON.stringify(g.puzzleData, null, 2);
+				let t = A("#simulator-puzzle");
+				return t && (t.value = g.originalPuzzle), g.activeTab === "thumb" && I(), g.puzzleData;
+			} catch (e) {
+				throw console.error("Simulator: Failed to load puzzle", e), e;
+			}
+		});
+		return function() {
+			return t.apply(this, arguments);
+		};
+	}(), R = ee((e) => {
+		f.addLogEntry(e, V);
+	}), z = (e, t) => {
+		te(e, t, R);
+	}, B = (e, t) => {
+		let n = y.querySelector(`[data-badge="${e}"]`);
+		n && (n.textContent = t && t > 0 ? String(t) : "");
+	}, V = {
+		state: g,
+		getElement: A,
+		sendToGame: z,
+		logMessage: R.log,
+		loadPuzzle: L,
+		updateStatus: M,
+		updateTimer: N,
+		setCollapsed: F,
+		switchTab: P,
+		updateThumbnail: I,
+		updateBadge: B,
+		fixtures: s,
+		fixtureCategories: c,
+		gameSlug: (i = t.slug) == null ? null : i
+	};
+	console.log("[Simulator] Context created with gameSlug:", V.gameSlug), m.forEach((e) => e.bind(V)), O.querySelectorAll(".simulator-tab").forEach((e) => {
+		e.addEventListener("click", () => {
+			let t = e.getAttribute("data-tab");
+			P(t), B(t, 0);
+		});
+	}), E.addEventListener("click", (e) => {
+		e.stopPropagation(), F(!0);
+	}), C.addEventListener("click", (e) => {
+		e.stopPropagation(), g.isPaused ? (z("RESUME_GAME", {}), g.isPaused = !1, j(!1), M("Running", "ready")) : (z("PAUSE_GAME", {}), g.isPaused = !0, j(!0), M("Paused", "paused"));
+		let t = A("#simulator-pause");
+		t && (t.textContent = g.isPaused ? "Resume" : "Pause");
+	}), w.addEventListener("click", (e) => {
+		e.stopPropagation(), z("RETRY_PUZZLE", {}), g.hasStarted = !1, g.isPaused = !1, j(!1), C.disabled = !0, M("Ready to retry", "ready");
+		let t = A("#simulator-pause"), n = A("#simulator-start");
+		t && (t.disabled = !0, t.textContent = "Pause"), n && (n.textContent = "Start");
+	}), T.addEventListener("click", (e) => {
+		e.stopPropagation(), g.isCollapsed && F(!1), P("auth");
+	}), x.addEventListener("click", (e) => {
+		g.isCollapsed && e.target !== E && F(!1);
+	}), g.isCollapsed || P(g.activeTab);
+	let H = new URLSearchParams(window.location.search);
+	(H.has("code") || H.has("error")) && (F(!1), P("auth"));
+	let U = (e) => ({
+		userState: {
+			gameSettings: {},
+			id: "simulator-user",
+			nakamaLogin: "simulator",
+			ownerID: "simulator-owner"
+		},
+		currentUser: null,
+		startOrFindGameplay: { gamePlayed: {
+			additionalTimeAddedSecs: 0,
+			boardState: g.currentInputStr,
+			cheatsUsed: 0,
+			combinedTimeSecs: 0,
+			completed: !1,
+			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+			elapsedTimeSecs: 0,
+			hintsUsed: 0,
+			id: `simulator-gameplay-${Date.now()}`,
+			metric1: 0,
+			metric2: 0,
+			metric3: 0,
+			metric4: 0,
+			metricStrings: [],
+			ownerID: "simulator-owner",
+			pointsAwarded: 0,
+			resetsUsed: 0,
+			slug: "simulator-game",
+			viewerOwnsPuzzle: !0,
+			puzzle: {
+				id: "simulator-puzzle",
+				name: "Proto Jig Puzzle",
+				puzzle: JSON.stringify(e),
+				seriesNumber: 1,
+				game: {
+					assetsPath: "./assets/",
+					assetsSha: "",
+					displayName: "Proto Game",
+					exposedGlobalFunction: "startGame",
+					jsPath: "",
+					slug: "proto-game"
+				}
+			}
+		} },
+		theme: g.selectedTheme,
+		hostFlags: [],
+		hostContext: [],
+		appRuntimeContract: "1.0"
+	}), W = function() {
+		var t = e(function* () {
+			M("Loading puzzle...", "waiting");
+			try {
+				let e = U(yield L());
+				M("Sending READY_DATA...", "waiting"), z("READY_DATA", e), M("Waiting for game to load...", "waiting");
+			} catch (e) {
+				M(`Error: ${e}`, "paused");
+			}
+		});
+		return function() {
+			return t.apply(this, arguments);
+		};
+	}(), G = () => {
+		console.log("Simulator: Game loaded, ready to start"), w.disabled = !1, m.forEach((e) => {
+			var t;
+			return (t = e.onMessage) == null ? void 0 : t.call(e, "READY_GAME_LOADED", void 0, V);
+		}), o && !g.hasStarted && setTimeout(() => {
+			let e = A("#simulator-start");
+			e == null || e.click(), C.disabled = !1, g.hasStarted = !0, M("Running", "ready");
+		}, 100);
+	};
+	return ne((e, t) => {
+		var n, r;
+		if (e === "READY") {
+			console.log("Simulator: Received READY from game"), W();
+			return;
+		}
+		if (e === "INITIALIZE_SETTINGS") {
+			console.log("Simulator: Game initialized settings", t);
+			return;
+		}
+		if (e === "READY_GAME_LOADED") {
+			G();
+			return;
+		}
+		if (e === "TIMER_TICK") {
+			if (t != null && t.display) {
+				let [e, n] = t.display;
+				N(e, n);
+			}
+			return;
+		}
+		if (e === "TIMER_SYNC") return;
+		if (e === "SHOW_GAME_COMPLETE_SCREEN") {
+			console.log("Simulator: Show completion screen", t);
+			return;
+		}
+		if (e === "SIDEBAR_UPDATE") {
+			console.log("Simulator: Sidebar update", t);
+			return;
+		}
+		m.forEach((n) => {
+			var r;
+			return (r = n.onMessage) == null ? void 0 : r.call(n, e, t, V);
+		});
+		let i = (n = t == null || (r = t.input) == null ? void 0 : r.boardState) == null ? t == null ? void 0 : t.boardState : n;
+		e === "UPLOAD_NEW_GAME_STATE" && i && (g.currentInputStr = i, g.activeTab === "thumb" && I(), console.log("Simulator: Game state uploaded", t)), e === "GAME_COMPLETED" && (console.log("Simulator: Game completed!", t), C.disabled = !0, g.hasStarted = !1, M("Completed!", "ready"));
+	}, R), console.log("Simulator initialized"), $ = {
+		updateFixtures: (e) => {
+			s = v(e), c = Array.from(s.keys()).sort(), V.fixtures = s, V.fixtureCategories = c;
+			let t = localStorage.getItem("simulator-fixture-category");
+			if (!g.selectedCategory || !c.includes(g.selectedCategory)) {
+				var n;
+				g.selectedCategory = t && c.includes(t) ? t : (n = c[0]) == null ? null : n;
+			}
+			let r = m.find((e) => e.id === "ctrl");
+			r == null || r.bind(V), console.log("Simulator: Fixtures updated", {
+				categories: c,
+				selectedCategory: g.selectedCategory
+			});
+		},
+		sendToGame: z,
+		loadPuzzle: L
+	}, $;
+}
+export { Fe as t };
+
+//# sourceMappingURL=createSimulator-9IxV0l3_.js.map