@rohal12/spindle 0.51.2 → 0.51.4

package/dist/pkg/headless.js

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, u
 import { useSyncExternalStore } from "preact/compat";
 import { createStore } from "zustand/vanilla";
 import { immer } from "zustand/middleware/immer";
-import { applyPatches, enablePatches, produceWithPatches } from "immer";
+import { applyPatches, current, enablePatches, freeze, isDraft, produceWithPatches } from "immer";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 import { micromark } from "micromark";
 import { gfmTable, gfmTableHtml } from "micromark-extension-gfm-table";
@@ -31,6 +31,242 @@ function create() {
 	return (initializer) => bindPreact(createStore()(initializer));
 }
 //#endregion
+//#region src/class-registry.ts
+var registry$1 = /* @__PURE__ */ new Map();
+var ctorToName = /* @__PURE__ */ new Map();
+function registerClass(name, ctor) {
+	registry$1.set(name, ctor);
+	ctorToName.set(ctor, name);
+}
+function getClassName(ctor) {
+	return ctorToName.get(ctor);
+}
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+function deepClone(value, options = {}) {
+	const seen = /* @__PURE__ */ new Map();
+	function clone(val) {
+		if (val === null || typeof val !== "object") return val;
+		const obj = val;
+		if (seen.has(obj)) return seen.get(obj);
+		if (val instanceof Date) return new Date(val.getTime());
+		if (val instanceof RegExp) return new RegExp(val.source, val.flags);
+		if (Array.isArray(val)) {
+			const arr = [];
+			seen.set(obj, arr);
+			for (let i = 0; i < val.length; i++) arr[i] = clone(val[i]);
+			return arr;
+		}
+		if (val instanceof Map) {
+			const copy = /* @__PURE__ */ new Map();
+			seen.set(obj, copy);
+			for (const [k, v] of val) copy.set(clone(k), clone(v));
+			return copy;
+		}
+		if (val instanceof Set) {
+			const copy = /* @__PURE__ */ new Set();
+			seen.set(obj, copy);
+			for (const v of val) copy.add(clone(v));
+			return copy;
+		}
+		const ctor = obj.constructor;
+		if (ctorToName.get(ctor) !== void 0) {
+			const copy = Object.create(Object.getPrototypeOf(obj));
+			seen.set(obj, copy);
+			for (const key of Object.keys(obj)) copy[key] = clone(obj[key]);
+			return copy;
+		}
+		if (!isPlainObject(val) && options.keepUnregistered) return val;
+		if (isPlainObject(val) || typeof val === "object") {
+			const copy = {};
+			seen.set(obj, copy);
+			for (const key of Object.keys(obj)) copy[key] = clone(obj[key]);
+			return copy;
+		}
+		return val;
+	}
+	return clone(value);
+}
+/**
+* Structural equality over the value types deepClone() supports: primitives,
+* arrays, plain objects, class instances, Date, RegExp, Map and Set (nested
+* at any depth). Map and Set entries are compared in insertion order.
+*/
+function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
+	if (Object.is(a, b)) return true;
+	if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;
+	if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
+	if (seen.get(a) === b) return true;
+	seen.set(a, b);
+	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
+	if (a instanceof RegExp) return String(a) === String(b);
+	if (a instanceof Map || a instanceof Set) {
+		const bc = b;
+		if (a.size !== bc.size) return false;
+		const ai = a.entries();
+		const bi = bc.entries();
+		for (let x = ai.next(), y = bi.next(); !x.done; x = ai.next(), y = bi.next()) if (!deepEqual(x.value, y.value, seen)) return false;
+		return true;
+	}
+	const ao = a;
+	const bo = b;
+	const keys = Object.keys(ao);
+	if (keys.length !== Object.keys(bo).length) return false;
+	for (const key of keys) if (!(key in bo) || !deepEqual(ao[key], bo[key], seen)) return false;
+	return true;
+}
+var CLASS_TAG = "__spindle_class__";
+var DATA_TAG = "__spindle_data__";
+function serialize(value) {
+	const seen = /* @__PURE__ */ new Set();
+	function ser(val) {
+		if (val === null || typeof val !== "object") return val;
+		const obj = val;
+		if (seen.has(obj)) throw new Error("spindle: Cannot serialize circular references");
+		seen.add(obj);
+		if (val instanceof Date) {
+			seen.delete(obj);
+			return {
+				[CLASS_TAG]: "__Date__",
+				[DATA_TAG]: { iso: val.toISOString() }
+			};
+		}
+		if (val instanceof RegExp) {
+			seen.delete(obj);
+			return {
+				[CLASS_TAG]: "__RegExp__",
+				[DATA_TAG]: {
+					source: val.source,
+					flags: val.flags
+				}
+			};
+		}
+		if (Array.isArray(val)) {
+			const result = val.map((item) => ser(item));
+			seen.delete(obj);
+			return result;
+		}
+		if (val instanceof Map) {
+			const entries = [...val].map(([k, v]) => [ser(k), ser(v)]);
+			seen.delete(obj);
+			return {
+				[CLASS_TAG]: "__Map__",
+				[DATA_TAG]: { entries }
+			};
+		}
+		if (val instanceof Set) {
+			const entries = [...val].map((v) => ser(v));
+			seen.delete(obj);
+			return {
+				[CLASS_TAG]: "__Set__",
+				[DATA_TAG]: { entries }
+			};
+		}
+		const ctor = obj.constructor;
+		const name = ctorToName.get(ctor);
+		if (name !== void 0) {
+			const data = {};
+			for (const key of Object.keys(obj)) data[key] = ser(obj[key]);
+			seen.delete(obj);
+			return {
+				[CLASS_TAG]: name,
+				[DATA_TAG]: data
+			};
+		}
+		const result = {};
+		for (const key of Object.keys(obj)) result[key] = ser(obj[key]);
+		seen.delete(obj);
+		return result;
+	}
+	return ser(value);
+}
+function deserialize(value) {
+	function deser(val) {
+		if (val === null || typeof val !== "object") return val;
+		if (Array.isArray(val)) return val.map((item) => deser(item));
+		const obj = val;
+		if (CLASS_TAG in obj && DATA_TAG in obj) {
+			const name = obj[CLASS_TAG];
+			const data = obj[DATA_TAG];
+			if (name === "__Date__") return new Date(data.iso);
+			if (name === "__RegExp__") return new RegExp(data.source, data.flags);
+			if (name === "__Map__") {
+				const entries = data.entries;
+				return new Map(entries.map(([k, v]) => [deser(k), deser(v)]));
+			}
+			if (name === "__Set__") {
+				const entries = data.entries;
+				return new Set(entries.map((v) => deser(v)));
+			}
+			const ctor = registry$1.get(name);
+			if (!ctor) {
+				console.warn(`spindle: Class "${name}" not registered. Falling back to plain object.`);
+				const plain = {};
+				for (const key of Object.keys(data)) plain[key] = deser(data[key]);
+				return plain;
+			}
+			const instance = Object.create(ctor.prototype);
+			for (const key of Object.keys(data)) instance[key] = deser(data[key]);
+			return instance;
+		}
+		if (val instanceof Date || val instanceof RegExp || val instanceof Map || val instanceof Set) return val;
+		const ctor = obj.constructor;
+		if (ctorToName.has(ctor)) return val;
+		const result = {};
+		for (const key of Object.keys(obj)) result[key] = deser(obj[key]);
+		return result;
+	}
+	return deser(value);
+}
+function isDataRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+/**
+* Whether `value` is serialized data that deserialize() can restore: every
+* tagged value has the shape serialize() writes for its tag (a valid ISO
+* date, a compilable RegExp, Map entries as `[key, value]` pairs, Set
+* entries as an array, class data as an object), at any depth. Use it on
+* data from outside the running story, such as an imported save, before
+* storing it. Tags of unregistered classes pass; they load as plain objects.
+*/
+function isDeserializable(value) {
+	const path = /* @__PURE__ */ new Set();
+	function check(val) {
+		if (val === null || typeof val !== "object") return true;
+		if (path.has(val)) return false;
+		path.add(val);
+		const ok = checkObject(val);
+		path.delete(val);
+		return ok;
+	}
+	function checkObject(val) {
+		if (Array.isArray(val)) return val.every(check);
+		const obj = val;
+		if (!(CLASS_TAG in obj && DATA_TAG in obj)) return Object.keys(obj).every((key) => check(obj[key]));
+		const name = obj[CLASS_TAG];
+		const data = obj[DATA_TAG];
+		if (typeof name !== "string" || !isDataRecord(data)) return false;
+		switch (name) {
+			case "__Date__": return typeof data.iso === "string" && !Number.isNaN(new Date(data.iso).getTime());
+			case "__RegExp__":
+				if (typeof data.source !== "string" || typeof data.flags !== "string") return false;
+				try {
+					new RegExp(data.source, data.flags);
+					return true;
+				} catch {
+					return false;
+				}
+			case "__Map__": return Array.isArray(data.entries) && data.entries.every((entry) => Array.isArray(entry) && entry.length === 2 && check(entry[0]) && check(entry[1]));
+			case "__Set__": return Array.isArray(data.entries) && data.entries.every(check);
+			default: return Object.keys(data).every((key) => check(data[key]));
+		}
+	}
+	return check(value);
+}
+//#endregion
 //#region src/saves/types.ts
 function isSaveExport(value) {
 	if (typeof value !== "object" || value === null) return false;
@@ -57,19 +293,25 @@ function isOptionalPRNGSnapshot(value) {
 	if (value == null) return true;
 	return isRecord(value) && typeof value.seed === "string" && typeof value.pull === "number" && Number.isInteger(value.pull) && value.pull >= 0;
 }
+/** A variable container whose values deserialize() can restore. */
+function isSerializedVariables(value) {
+	return isRecord(value) && isDeserializable(value);
+}
 function isSaveHistoryMoment(value) {
-	return isRecord(value) && typeof value.passage === "string" && isRecord(value.variables) && typeof value.timestamp === "number" && isOptionalPRNGSnapshot(value.prng);
+	return isRecord(value) && typeof value.passage === "string" && isSerializedVariables(value.variables) && typeof value.timestamp === "number" && isOptionalPRNGSnapshot(value.prng);
 }
 /**
 * Full check of a payload from outside the running story (an imported save):
-* every history moment is well formed, and `historyIndex` is an integer that
-* points at a moment of the payload's passage. Anything that passes can be
-* stored and later loaded.
+* every history moment is well formed, `historyIndex` is an integer that
+* points at a moment of the payload's passage, and the encoded values (Map,
+* Set, Date, RegExp, class instances) in the live variables and every
+* moment's variables have the shape deserialize() expects. Anything that
+* passes can be stored and later loaded.
 */
 function isImportablePayload(value) {
 	if (!isRecord(value)) return false;
 	if (typeof value.passage !== "string") return false;
-	if (!isRecord(value.variables)) return false;
+	if (!isSerializedVariables(value.variables)) return false;
 	const { history, historyIndex } = value;
 	if (!Array.isArray(history) || history.length === 0) return false;
 	if (!history.every(isSaveHistoryMoment)) return false;
@@ -209,8 +451,11 @@ function parseHtmlAttributes(input, j) {
 		while (j < input.length && /[a-zA-Z0-9_\-:@]/.test(input[j])) j++;
 		const attrName = input.slice(attrStart, j);
 		if (!attrName) break;
-		if (input[j] === "=") {
-			j++;
+		let eqIdx = j;
+		while (eqIdx < input.length && /\s/.test(input[eqIdx])) eqIdx++;
+		if (input[eqIdx] === "=") {
+			j = eqIdx + 1;
+			while (j < input.length && /\s/.test(input[j])) j++;
 			if (input[j] === "\"" || input[j] === "'") {
 				const quote = input[j];
 				j++;
@@ -351,16 +596,23 @@ function tokenize(input) {
 		textStart = closeEnd;
 	}
 	while (i < input.length) {
-		if (input[i] === "\\" && (input[i + 1] === "{" || input[i + 1] === "}")) {
-			flushText(i);
-			tokens.push({
-				type: "text",
-				value: input[i + 1],
-				start: i,
-				end: i + 2
-			});
-			i += 2;
-			textStart = i;
+		if (input[i] === "\\") {
+			let k = i + 1;
+			while (input[k] === "\\") k++;
+			const next = input[k];
+			if ((next === "{" || next === "}") && (k - i) % 2 === 1) {
+				flushText(k - 1);
+				tokens.push({
+					type: "text",
+					value: next,
+					start: k - 1,
+					end: k + 1
+				});
+				i = k + 1;
+				textStart = i;
+				continue;
+			}
+			i = k;
 			continue;
 		}
 		if (input[i] === "[" && input[i + 1] === "[") {
@@ -1166,22 +1418,16 @@ function getPRNGPull() {
 	return currentPull;
 }
 //#endregion
-//#region src/expression.ts
-var FN_CACHE_MAX = 500;
-var fnCache = /* @__PURE__ */ new Map();
-/**
-* Transform expression: $var → variables["var"], _var → temporary["var"],
-* @var → locals["var"]
-* Only transforms when sigils appear as a word boundary (not inside strings naively,
-* but authors already have full JS access so this is acceptable).
-* `%var` → transient["var"] is handled by `transform` itself, because `%` is
-* also the modulo operator and only an operand position makes it a sigil.
-*/
-var VAR_RE = /\$(\w+)/g;
-var TEMP_RE = /(?<![.\w])_(\w+)/g;
-var LOCAL_RE = /@(\w+)/g;
+//#region src/js-lexer.ts
 /** Transient name after `%`: an identifier, so `%3` is never a reference. */
 var TRANS_NAME_RE = /[A-Za-z_]\w*/y;
+/**
+* The rest of an assignment target and its operator after a transient name:
+* ` = 1`, `.a.b += 2`, but not `== 1` or `=> 1`.
+*/
+var ASSIGNMENT_RE = /(?:\s*\.\s*[A-Za-z_$][\w$]*)*\s*(?:\*\*|<<|>>>?|&&|\|\||\?\?|[-+*/%&|^])?=(?![=>])/y;
+/** Flags after the closing `/` of a regex literal. */
+var REGEX_FLAGS_RE = /\w*/y;
 /** Characters of identifiers, numbers and sigil variable references. */
 var WORD_CHAR_RE = /[\w$@]/;
 var SPACE_RE = /\s/;
@@ -1209,50 +1455,138 @@ var HEADER_KEYWORDS = new Set([
 	"while",
 	"with"
 ]);
-function transformSegment(segment) {
-	return segment.replace(VAR_RE, "variables[\"$1\"]").replace(TEMP_RE, "temporary[\"$1\"]").replace(LOCAL_RE, "locals[\"$1\"]");
+/**
+* Scan the `"…"` or `'…'` string literal opening at `start`. `end` is the
+* index just past its closing quote, or `src.length` when it is unterminated
+* (`closed` false). A backslash escapes the character after it, so a quote
+* after an even run of backslashes closes the string and one after an odd
+* run does not.
+*/
+function scanStringLiteral(src, start) {
+	const quote = src.charAt(start);
+	let i = start + 1;
+	while (i < src.length) {
+		const c = src.charAt(i);
+		if (c === "\\") i += 2;
+		else if (c === quote) return {
+			end: i + 1,
+			closed: true
+		};
+		else i++;
+	}
+	return {
+		end: src.length,
+		closed: false
+	};
+}
+/** Index just past the regex literal (with flags) opening at `start`. */
+function skipRegex(src, start) {
+	let inClass = false;
+	let i = start + 1;
+	while (i < src.length) {
+		const c = src.charAt(i);
+		if (c === "\\") {
+			i += 2;
+			continue;
+		}
+		if (c === "\n") return i;
+		if (inClass) {
+			if (c === "]") inClass = false;
+		} else if (c === "[") inClass = true;
+		else if (c === "/") {
+			REGEX_FLAGS_RE.lastIndex = i + 1;
+			return i + 1 + (REGEX_FLAGS_RE.exec(src)?.[0].length ?? 0);
+		}
+		i++;
+	}
+	return src.length;
+}
+/** Index just past the comment opening at `start` (`//` or `/*`). */
+function skipComment(src, start) {
+	if (src.charAt(start + 1) === "/") {
+		const end = src.indexOf("\n", start);
+		return end < 0 ? src.length : end;
+	}
+	const end = src.indexOf("*/", start + 2);
+	return end < 0 ? src.length : end + 2;
 }
 /**
-* String-aware expression transformer. Walks the expression character by
-* character so that variable sigils ($, _, @, %) inside string literals are
-* left untouched while code — including expressions inside template-literal
-* `${…}` interpolations — is transformed.
-*
-* It also tracks whether the next token is an operand or an operator, so that
-* `%name` in operand position is a transient reference while `%` after an
-* operand — `($n)%3`, `$a[i] %2`, `$a%$b` — stays the modulo operator.
+* Lex the template literal opening at `start` (a backtick): its backticks,
+* text and escapes are reported as literal text and the code of its `${…}`
+* interpolations through `lexJs` one nesting level deeper. Returns the index
+* just past the closing backtick, or `src.length` if it is unterminated.
 */
-function transform(expr) {
-	let result = "";
-	let code = "";
-	let i = 0;
+function lexTemplate(src, start, handlers = {}, nesting = 0) {
+	const literal = (text, index) => handlers.literal?.(text, index, nesting);
+	literal("`", start);
+	let i = start + 1;
+	while (i < src.length) {
+		const c = src.charAt(i);
+		if (c === "\\") {
+			literal(src.slice(i, i + 2), i);
+			i += 2;
+		} else if (c === "`") {
+			literal(c, i);
+			return i + 1;
+		} else if (c === "$" && src.charAt(i + 1) === "{") {
+			literal("${", i);
+			i = lexJs(src, handlers, i + 2, nesting + 1);
+			if (i < src.length) {
+				literal("}", i);
+				i++;
+			}
+		} else {
+			literal(c, i);
+			i++;
+		}
+	}
+	return Math.min(i, src.length);
+}
+/**
+* Walk `src` from `start`, reporting code characters, literal text and
+* transient references to `handlers` in source order. Every character of the
+* scanned range is reported exactly once (a transient reference covers its
+* `%` and name). Returns the index where scanning stopped: `src.length`, or
+* — for an interpolation (`nesting > 0`) — the index of the `}` closing it.
+*/
+function lexJs(src, handlers, start = 0, nesting = 0) {
+	const interpolation = nesting > 0;
+	let i = start;
 	let operandNext = true;
 	let word = "";
 	let afterDot = false;
 	let afterHeaderKeyword = false;
 	let lastPunct = "";
+	let lineBreak = false;
+	let braceDepth = 0;
 	const parenIsHeader = [];
-	function flushCode() {
-		if (code) {
-			result += transformSegment(code);
-			code = "";
-		}
-	}
+	const code = (ch, index) => handlers.code?.(ch, index, nesting);
+	const literal = (text, index) => handlers.literal?.(text, index, nesting);
 	function endWord() {
 		if (!word) return;
 		operandNext = !afterDot && OPERAND_KEYWORDS.has(word);
 		afterHeaderKeyword = !afterDot && HEADER_KEYWORDS.has(word);
 		afterDot = false;
 		lastPunct = "";
+		lineBreak = false;
 		word = "";
 	}
-	/** A string or template literal, or a transient reference, just ended. */
+	/** A string, template or regex literal, or a transient reference, ended. */
 	function endOperand() {
 		endWord();
 		operandNext = false;
 		afterHeaderKeyword = false;
 		afterDot = false;
 		lastPunct = "";
+		lineBreak = false;
+	}
+	/** Track an operator token: `operandNext` tells what may follow it. */
+	function endPunct(punct, nextIsOperand) {
+		operandNext = nextIsOperand;
+		afterDot = punct === ".";
+		afterHeaderKeyword = false;
+		lastPunct = punct;
+		lineBreak = false;
 	}
 	function trackCode(c) {
 		if (WORD_CHAR_RE.test(c)) {
@@ -1260,151 +1594,123 @@ function transform(expr) {
 			return;
 		}
 		endWord();
-		if (c === "\n") operandNext = true;
+		if (c === "\n") lineBreak = true;
 		if (SPACE_RE.test(c)) return;
 		if (c === "(") parenIsHeader.push(afterHeaderKeyword);
-		if (c === ")") operandNext = parenIsHeader.pop() ?? false;
-		else if (c === ".") operandNext = lastPunct === ".";
-		else operandNext = c !== "]";
-		afterDot = c === ".";
-		afterHeaderKeyword = false;
-		lastPunct = c;
-	}
-	while (i < expr.length) {
-		const ch = expr.charAt(i);
+		if (c === "{") braceDepth++;
+		if (c === "}") braceDepth--;
+		if (c === ")") endPunct(c, parenIsHeader.pop() ?? false);
+		else if (c === ".") endPunct(c, lastPunct === ".");
+		else endPunct(c, c !== "]");
+	}
+	while (i < src.length) {
+		const ch = src.charAt(i);
 		if (ch === "\"" || ch === "'") {
-			flushCode();
-			const quote = ch;
-			let str = quote;
-			i++;
-			while (i < expr.length) {
-				const c = expr.charAt(i);
-				if (c === "\\" && i + 1 < expr.length) {
-					str += c + expr.charAt(i + 1);
-					i += 2;
-				} else if (c === quote) {
-					str += quote;
-					i++;
-					break;
-				} else {
-					str += c;
-					i++;
-				}
-			}
-			result += str;
+			const { end } = scanStringLiteral(src, i);
+			literal(src.slice(i, end), i);
+			i = end;
 			endOperand();
 			continue;
 		}
 		if (ch === "`") {
-			flushCode();
-			result += "`";
-			i++;
-			while (i < expr.length) {
-				const c = expr.charAt(i);
-				if (c === "\\" && i + 1 < expr.length) {
-					result += c + expr.charAt(i + 1);
-					i += 2;
-				} else if (c === "$" && expr.charAt(i + 1) === "{") {
-					result += "${";
-					i += 2;
-					let depth = 1;
-					let inner = "";
-					while (i < expr.length && depth > 0) {
-						const ic = expr.charAt(i);
-						if (ic === "{") {
-							depth++;
-							inner += ic;
-						} else if (ic === "}") {
-							depth--;
-							if (depth === 0) break;
-							inner += ic;
-						} else if (ic === "\\" && i + 1 < expr.length) {
-							inner += ic + expr.charAt(i + 1);
-							i++;
-						} else if (ic === "\"" || ic === "'") {
-							inner += ic;
-							i++;
-							while (i < expr.length) {
-								const sc = expr.charAt(i);
-								if (sc === "\\" && i + 1 < expr.length) {
-									inner += sc + expr.charAt(i + 1);
-									i += 2;
-								} else if (sc === ic) {
-									inner += sc;
-									i++;
-									break;
-								} else {
-									inner += sc;
-									i++;
-								}
-							}
-							continue;
-						} else if (ic === "`") {
-							inner += ic;
-							i++;
-							while (i < expr.length) {
-								const tc = expr.charAt(i);
-								if (tc === "\\" && i + 1 < expr.length) {
-									inner += tc + expr.charAt(i + 1);
-									i += 2;
-								} else if (tc === "$" && expr.charAt(i + 1) === "{") {
-									inner += "${";
-									i += 2;
-									let nestedDepth = 1;
-									while (i < expr.length && nestedDepth > 0) {
-										const nc = expr.charAt(i);
-										if (nc === "{") nestedDepth++;
-										else if (nc === "}") nestedDepth--;
-										if (nestedDepth > 0) inner += nc;
-										i++;
-									}
-									inner += "}";
-								} else if (tc === "`") {
-									inner += tc;
-									i++;
-									break;
-								} else {
-									inner += tc;
-									i++;
-								}
-							}
-							continue;
-						} else inner += ic;
-						i++;
-					}
-					result += transform(inner);
-					if (i < expr.length && expr.charAt(i) === "}") {
-						result += "}";
-						i++;
-					}
-				} else if (c === "`") {
-					result += "`";
-					i++;
-					break;
-				} else {
-					result += c;
-					i++;
-				}
-			}
+			i = lexTemplate(src, i, handlers, nesting);
 			endOperand();
 			continue;
 		}
+		if (ch === "/") {
+			endWord();
+			const next = src.charAt(i + 1);
+			if (next === "/" || next === "*") {
+				const end = skipComment(src, i);
+				const comment = src.slice(i, end);
+				literal(comment, i);
+				if (comment.includes("\n")) lineBreak = true;
+				i = end;
+				continue;
+			}
+			if (operandNext) {
+				const end = skipRegex(src, i);
+				literal(src.slice(i, end), i);
+				i = end;
+				endOperand();
+				continue;
+			}
+		}
 		if (ch === "%") {
 			endWord();
 			TRANS_NAME_RE.lastIndex = i + 1;
-			const name = operandNext ? TRANS_NAME_RE.exec(expr)?.[0] : void 0;
+			const name = TRANS_NAME_RE.exec(src)?.[0];
 			if (name) {
-				flushCode();
-				result += `transient["${name}"]`;
-				i += 1 + name.length;
-				endOperand();
-				continue;
+				ASSIGNMENT_RE.lastIndex = i + 1 + name.length;
+				if (operandNext || lineBreak && ASSIGNMENT_RE.test(src)) {
+					handlers.transient?.(name, i, nesting);
+					i += 1 + name.length;
+					endOperand();
+					continue;
+				}
 			}
 		}
+		if ((ch === "+" || ch === "-") && src.charAt(i + 1) === ch) {
+			endWord();
+			const postfix = !operandNext && !lineBreak;
+			code(ch, i);
+			code(ch, i + 1);
+			i += 2;
+			endPunct(ch, !postfix);
+			continue;
+		}
+		if (ch === "}" && interpolation && braceDepth === 0) break;
 		trackCode(ch);
-		code += ch;
+		code(ch, i);
 		i++;
 	}
+	return i;
+}
+//#endregion
+//#region src/expression.ts
+var FN_CACHE_MAX = 500;
+var fnCache = /* @__PURE__ */ new Map();
+/**
+* Transform expression: $var → variables["var"], _var → temporary["var"],
+* @var → locals["var"], %var → transient["var"].
+* Only transforms when sigils appear as a word boundary, and only in code:
+* string, template and regex literal text and comments are left untouched.
+* `%var` is recognised by the lexer (`lexJs`), because `%` is also the modulo
+* operator and only an operand position makes it a sigil.
+*/
+var VAR_RE = /\$(\w+)/g;
+var TEMP_RE = /(?<![.\w])_(\w+)/g;
+var LOCAL_RE = /@(\w+)/g;
+function transformSegment(segment) {
+	return segment.replace(VAR_RE, "variables[\"$1\"]").replace(TEMP_RE, "temporary[\"$1\"]").replace(LOCAL_RE, "locals[\"$1\"]");
+}
+/**
+* Rewrite sigil references in `expr`. The lexer passes literal text and
+* comments through untouched; each run of code between them (including the
+* code of template-literal `${…}` interpolations) is transformed as a whole.
+*/
+function transform(expr) {
+	let result = "";
+	let code = "";
+	function flushCode() {
+		if (code) {
+			result += transformSegment(code);
+			code = "";
+		}
+	}
+	lexJs(expr, {
+		code(ch) {
+			code += ch;
+		},
+		literal(text) {
+			flushCode();
+			result += text;
+		},
+		transient(name) {
+			flushCode();
+			result += `transient["${name}"]`;
+		}
+	});
 	flushCode();
 	return result;
 }
@@ -1471,7 +1777,7 @@ function buildExpressionFns() {
 * e.g. evaluate("$health + 10", variables, temporary) → number
 */
 function evaluate(expr, variables, temporary, locals = {}, transient = {}) {
-	const body = `return (${transform(expr)});`;
+	const body = `return (${transform(expr)}\n);`;
 	return getOrCompile(body, body)(variables, temporary, locals, buildExpressionFns(), transient);
 }
 /**
@@ -1617,6 +1923,96 @@ function ExprDisplay({ expression, className, id }) {
 	return /* @__PURE__ */ jsx(Fragment$1, { children: display });
 }
 //#endregion
+//#region src/components/macros/arg-utils.ts
+/**
+* Shared helpers for macros that split or read their raw argument text by
+* hand. Their lexical model is the expression lexer's (`js-lexer.ts`):
+* string, template and regex literals and comments are opaque (a backslash
+* inside a literal escapes the character after it, and `${…}` parts of a
+* template are code), `/` opens a regex only where an operand is expected,
+* and `(`/`[`/`{` nest.
+*/
+/** True for a whitespace character. */
+function isWhitespace(ch) {
+	return /\s/.test(ch);
+}
+function isOpener(ch) {
+	return ch === "(" || ch === "[" || ch === "{";
+}
+function isCloser(ch) {
+	return ch === ")" || ch === "]" || ch === "}";
+}
+/**
+* Undo the escapes allowed in a literal quoted macro argument: `\"`, `\'`
+* and `\\` become `"`, `'` and `\`. Other backslash sequences (`\n`, `\d`)
+* are kept as written, so code and regex text inside the string survive.
+*/
+function unescapeQuoted(body) {
+	return body.replace(/\\(["'\\])/g, "$1");
+}
+/**
+* Read the `"…"` or `'…'` string whose opening quote is at `start`.
+* Returns its unescaped value and the index just past the closing quote, or
+* `null` if there is no such quote at `start` or the string is unterminated.
+*/
+function readQuoted(src, start) {
+	const quote = src[start];
+	if (quote !== "\"" && quote !== "'") return null;
+	const { end, closed } = scanStringLiteral(src, start);
+	if (!closed) return null;
+	return {
+		value: unescapeQuoted(src.slice(start + 1, end - 1)),
+		end
+	};
+}
+/**
+* The unescaped value of `src` when it is exactly one `"…"` or `'…'` string
+* (as with `readQuoted`), otherwise `null`.
+*/
+function readWholeQuoted(src) {
+	const quoted = readQuoted(src, 0);
+	return quoted && quoted.end === src.length ? quoted.value : null;
+}
+/**
+* Strip an optional quote from each end of an unquoted-or-loosely-quoted
+* argument (`"Red`, `Red'`), leaving at least one character. This is the
+* lenient fallback for labels that are not one well-formed quoted string.
+*/
+function stripLooseQuotes(src) {
+	return /^["']?(.+?)["']?$/.exec(src)?.[1] ?? src;
+}
+/**
+* Indices of the characters in `src` that satisfy `isSeparator` and sit at
+* depth 0: in code outside string, template and regex literals and comments,
+* and outside `()`, `[]` and `{}` pairs.
+*/
+function topLevelIndices(src, isSeparator) {
+	const indices = [];
+	let depth = 0;
+	lexJs(src, { code(ch, i, nesting) {
+		if (nesting > 0) return;
+		if (isOpener(ch)) depth++;
+		else if (isCloser(ch)) depth--;
+		else if (depth === 0 && isSeparator(ch)) indices.push(i);
+	} });
+	return indices;
+}
+/**
+* Split `src` at every depth-0 separator (see `topLevelIndices`). Segments
+* are returned as written, untrimmed, and empty segments are kept, so
+* `n` separators always give `n + 1` segments.
+*/
+function splitTopLevel(src, isSeparator) {
+	const segments = [];
+	let from = 0;
+	for (const i of topLevelIndices(src, isSeparator)) {
+		segments.push(src.slice(from, i));
+		from = i + 1;
+	}
+	segments.push(src.slice(from));
+	return segments;
+}
+//#endregion
 //#region src/components/macros/WidgetInvocation.tsx
 /**
 * Check whether a whitespace-delimited token looks like a standalone value
@@ -1634,47 +2030,13 @@ function isStandaloneValue(token) {
 	return false;
 }
 /**
-* Try to split a raw string on whitespace at depth 0 (respecting quotes,
-* parentheses, brackets, and braces). Each resulting token must pass
-* `isStandaloneValue()` or the split is rejected and `null` is returned.
+* Try to split a raw string on whitespace at depth 0 (respecting strings,
+* template literals, parentheses, brackets, and braces). Each resulting token
+* must pass `isStandaloneValue()` or the split is rejected and `null` is
+* returned.
 */
 function trySplitOnWhitespace(raw) {
-	const args = [];
-	let current = "";
-	let depth = 0;
-	let inString = null;
-	for (let i = 0; i < raw.length; i++) {
-		const ch = raw[i];
-		if (inString) {
-			current += ch;
-			if (ch === inString && raw[i - 1] !== "\\") inString = null;
-			continue;
-		}
-		if (ch === "\"" || ch === "'" || ch === "`") {
-			inString = ch;
-			current += ch;
-			continue;
-		}
-		if (ch === "(" || ch === "[" || ch === "{") {
-			depth++;
-			current += ch;
-			continue;
-		}
-		if (ch === ")" || ch === "]" || ch === "}") {
-			depth--;
-			current += ch;
-			continue;
-		}
-		if (/\s/.test(ch) && depth === 0) {
-			if (current) {
-				args.push(current);
-				current = "";
-			}
-			continue;
-		}
-		current += ch;
-	}
-	if (current) args.push(current);
+	const args = splitTopLevel(raw, isWhitespace).filter(Boolean);
 	if (args.length < 2) return null;
 	for (const arg of args) if (!isStandaloneValue(arg)) return null;
 	return args;
@@ -1685,43 +2047,9 @@ function trySplitOnWhitespace(raw) {
 * string literals separated by whitespace (e.g. `"Label" "target"`).
 */
 function splitArgs(raw) {
-	const args = [];
-	let current = "";
-	let depth = 0;
-	let inString = null;
-	let hasComma = false;
-	for (let i = 0; i < raw.length; i++) {
-		const ch = raw[i];
-		if (inString) {
-			current += ch;
-			if (ch === inString && raw[i - 1] !== "\\") inString = null;
-			continue;
-		}
-		if (ch === "\"" || ch === "'" || ch === "`") {
-			inString = ch;
-			current += ch;
-			continue;
-		}
-		if (ch === "(" || ch === "[" || ch === "{") {
-			depth++;
-			current += ch;
-			continue;
-		}
-		if (ch === ")" || ch === "]" || ch === "}") {
-			depth--;
-			current += ch;
-			continue;
-		}
-		if (ch === "," && depth === 0) {
-			hasComma = true;
-			args.push(current.trim());
-			current = "";
-			continue;
-		}
-		current += ch;
-	}
-	const last = current.trim();
-	if (last) args.push(last);
+	const args = splitTopLevel(raw, (ch) => ch === ",").map((a) => a.trim());
+	const hasComma = args.length > 1;
+	if (args[args.length - 1] === "") args.pop();
 	if (!hasComma && args.length === 1) {
 		const split = trySplitOnWhitespace(args[0]);
 		if (split) return split;
@@ -1730,6 +2058,7 @@ function splitArgs(raw) {
 }
 function WidgetBody({ body, parentValues, ownKeys }) {
 	const nobr = useContext(NobrContext);
+	const inline = useContext(InlineContext);
 	const [localMutations, setLocalMutations] = useState({});
 	const localState = useMemo(() => ({
 		...parentValues,
@@ -1763,6 +2092,7 @@ function WidgetBody({ body, parentValues, ownKeys }) {
 			value: localState,
 			children: renderNodes(body, {
 				nobr,
+				inline,
 				locals: localState
 			})
 		})
@@ -1771,12 +2101,14 @@ function WidgetBody({ body, parentValues, ownKeys }) {
 function WidgetInvocation({ body, params, rawArgs, invocationChildren }) {
 	const parentValues = useContext(LocalsValuesContext);
 	const nobr = useContext(NobrContext);
+	const inline = useContext(InlineContext);
 	const [mergedVars, mergedTemps, mergedLocals, mergedTrans] = useMergedLocals();
 	const childrenValue = invocationChildren?.length ? invocationChildren : null;
 	if (params.length === 0) return /* @__PURE__ */ jsx(WidgetChildrenContext.Provider, {
 		value: childrenValue,
 		children: renderNodes(body, {
 			nobr,
+			inline,
 			locals: parentValues
 		})
 	});
@@ -1822,12 +2154,12 @@ function getWidget(name) {
 }
 //#endregion
 //#region src/registry.ts
-var registry$1 = /* @__PURE__ */ new Map();
+var registry = /* @__PURE__ */ new Map();
 function registerMacro(name, component) {
-	registry$1.set(name.toLowerCase(), component);
+	registry.set(name.toLowerCase(), component);
 }
 function getMacro(name) {
-	return registry$1.get(name.toLowerCase());
+	return registry.get(name.toLowerCase());
 }
 var subMacros = /* @__PURE__ */ new Set();
 function registerSubMacro(name) {
@@ -1877,28 +2209,82 @@ var defaultUpdater = {
 var LocalsValuesContext = createContext({});
 var LocalsUpdateContext = createContext(defaultUpdater);
 var NobrContext = createContext(false);
+/**
+* True while rendering inside an inline HTML element (e.g. `<span>`), where
+* block-level markdown and `<p>` wrappers would produce invalid HTML (#220).
+* Macro and widget bodies read it so their content stays inline too.
+*/
+var InlineContext = createContext(false);
 var SvgContext = createContext(false);
 var WidgetChildrenContext = createContext(null);
+function placeholderHtml(nonce, index) {
+	return `<span data-tw="${nonce}:${index}"></span>`;
+}
+/**
+* A placeholder as text. micromark escapes placeholders in code (a code span
+* of any backtick length, or a fenced code block), so they reach the DOM as
+* literal text and are swapped for the live component there, keeping it
+* subscribed (#223). Letting micromark decide what is code keeps this exact,
+* with no CommonMark re-implementation to drift from it. Also consumes an
+* ESCAPE_GUARD in front of the placeholder.
+*/
+var PLACEHOLDER_TEXT_RE = /(?:(?<=\\)\uE000)?<span data-tw="([0-9a-z]+):(\d+)"><\/span>/g;
+/**
+* Emitted between author text ending in a backslash and a placeholder, so
+* the backslash cannot escape the placeholder's `<` and leak it as text. A
+* backslash before a non-punctuation character stays literal in CommonMark,
+* matching what the author wrote. Removed again when converting text nodes.
+*/
+var ESCAPE_GUARD = "";
+/** Split text into literal parts and the components its placeholders name. */
+function expandPlaceholderText(text, ph) {
+	if (!text.includes("<span data-tw=\"")) return [text];
+	const parts = [];
+	let last = 0;
+	for (const m of text.matchAll(PLACEHOLDER_TEXT_RE)) {
+		if (m[1] !== ph.nonce) continue;
+		if (m.index > last) parts.push(text.slice(last, m.index));
+		parts.push(ph.components[parseInt(m[2], 10)]);
+		last = m.index + m[0].length;
+	}
+	if (last < text.length) parts.push(text.slice(last));
+	return parts;
+}
+/** The component index of a placeholder element of this call, or -1. */
+function placeholderIndex(node, ph) {
+	if (node == null || node.nodeType !== Node.ELEMENT_NODE) return -1;
+	const value = node.getAttribute("data-tw");
+	const prefix = `${ph.nonce}:`;
+	if (value == null || !value.startsWith(prefix)) return -1;
+	return parseInt(value.slice(prefix.length), 10);
+}
 /**
 * Convert an HTML string (from micromark) to Preact VNodes,
-* replacing <span data-tw="N"> placeholder elements with pre-rendered components.
+* replacing placeholder elements with pre-rendered components.
+* With `unwrapParagraphs` (nobr or inline content), top-level <p> wrappers are
+* replaced by their children.
 */
-function htmlToPreact(html, components, nobr = false) {
+function htmlToPreact(html, ph, unwrapParagraphs = false) {
 	const temp = document.createElement("div");
 	temp.innerHTML = html.trim();
-	if (nobr) for (const p of Array.from(temp.querySelectorAll(":scope > p"))) p.replaceWith(...Array.from(p.childNodes));
-	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(temp.childNodes).map((child, i) => convertDomNode(child, i, components)) });
+	if (unwrapParagraphs) for (const p of Array.from(temp.querySelectorAll(":scope > p"))) p.replaceWith(...Array.from(p.childNodes));
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(temp.childNodes).map((child, i) => convertDomNode(child, i, ph)) });
 }
-function convertDomNode(node, key, components) {
-	if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+function convertDomNode(node, key, ph) {
+	if (node.nodeType === Node.TEXT_NODE) {
+		let text = node.textContent ?? "";
+		if (text.endsWith(`\\${ESCAPE_GUARD}`) && placeholderIndex(node.nextSibling, ph) !== -1) text = text.slice(0, -1);
+		const parts = expandPlaceholderText(text, ph);
+		return parts.length === 1 ? parts[0] : parts;
+	}
 	if (node.nodeType === Node.ELEMENT_NODE) {
 		const el = node;
 		const tag = el.localName;
-		const twIdx = el.getAttribute("data-tw");
-		if (twIdx != null) return components[parseInt(twIdx, 10)];
+		const idx = placeholderIndex(el, ph);
+		if (idx !== -1) return ph.components[idx];
 		const props = { key };
 		for (const attr of Array.from(el.attributes)) props[attr.name] = attr.value;
-		return h(tag, props, ...Array.from(el.childNodes).map((child, i) => convertDomNode(child, i, components)));
+		return h(tag, props, ...Array.from(el.childNodes).map((child, i) => convertDomNode(child, i, ph)));
 	}
 	return null;
 }
@@ -1978,15 +2364,24 @@ function HtmlNodeRenderer({ node }) {
 	const nobr = useContext(NobrContext);
 	const locals = useContext(LocalsValuesContext);
 	const inSvg = useContext(SvgContext);
+	const parentInline = useContext(InlineContext);
 	const attrs = {};
 	for (const [k, v] of Object.entries(node.attributes)) attrs[k] = isPresentBooleanAttribute(k, v) ? true : resolve(v) ?? v;
 	const isSvgRoot = node.tag.toLowerCase() === "svg";
 	const isInline = INLINE_ELEMENTS.has(node.tag.toLowerCase());
-	const children = node.children.length > 0 ? inSvg || isSvgRoot ? renderInlineNodes(node.children) : renderNodes(node.children, {
-		nobr,
-		locals,
-		inline: isInline
-	}) : void 0;
+	let children = void 0;
+	if (node.children.length > 0) if (inSvg || isSvgRoot) children = renderInlineNodes(node.children);
+	else {
+		children = renderNodes(node.children, {
+			nobr,
+			locals,
+			inline: isInline
+		});
+		if (isInline !== parentInline) children = /* @__PURE__ */ jsx(InlineContext.Provider, {
+			value: isInline,
+			children
+		});
+	}
 	const element = h(node.tag, attrs, children);
 	return isSvgRoot ? /* @__PURE__ */ jsx(SvgContext.Provider, {
 		value: true,
@@ -1996,11 +2391,13 @@ function HtmlNodeRenderer({ node }) {
 function ChildrenSlot() {
 	const childrenAST = useContext(WidgetChildrenContext);
 	const nobr = useContext(NobrContext);
+	const inline = useContext(InlineContext);
 	const locals = useContext(LocalsValuesContext);
 	if (!childrenAST || childrenAST.length === 0) return null;
 	return /* @__PURE__ */ jsx(Fragment$1, { children: renderNodes(childrenAST, {
 		nobr,
-		locals
+		locals,
+		inline
 	}) });
 }
 /**
@@ -2076,26 +2473,6 @@ function renderInlineNodes(nodes) {
 	if (nodes.length === 0) return null;
 	return nodes.map((node) => renderSingleNode(node));
 }
-function hasUnclosedBacktick(s) {
-	let count = 0;
-	for (let i = 0; i < s.length; i++) if (s[i] === "`") count++;
-	return count % 2 === 1;
-}
-function getVariableTextValue(node, locals) {
-	const state = useStoryStore.getState();
-	const parts = node.name.split(".");
-	const root = parts[0];
-	let value;
-	if (node.scope === "variable") value = state.variables[root];
-	else if (node.scope === "temporary") value = state.temporary[root];
-	else if (node.scope === "transient") value = state.transient[root];
-	else value = locals[root];
-	for (let i = 1; i < parts.length; i++) {
-		if (value == null) return "";
-		value = value[parts[i]];
-	}
-	return value == null ? "" : String(value);
-}
 /**
 * Characters/patterns that trigger CommonMark or GFM transformations.
 * Any match → fall through to the full micromark pipeline.
@@ -2105,53 +2482,53 @@ function getVariableTextValue(node, locals) {
 */
 var MARKDOWN_SYNTAX_RE = /[*_`#|~\[>\\\-+=]|!\[|\d+\.|&#?[a-zA-Z0-9]+;| {2}\n/;
 var BLANK_LINE_RE = /\n\s*\n/;
-var PLACEHOLDER_SPLIT_RE = /(<span data-tw="\d+"><\/span>)/;
-var PLACEHOLDER_IDX_RE = /^<span data-tw="(\d+)"><\/span>$/;
-var PLACEHOLDER_STRIP_RE = /<span data-tw="\d+"><\/span>/g;
+var PLACEHOLDER_STRIP_RE = /<span data-tw="[0-9a-z]+:\d+"><\/span>/g;
 /**
 * Build Preact vnodes from a combined string that contains only plain text
-* and <span data-tw="N"></span> placeholders. No micromark, no innerHTML.
+* and placeholders. No micromark, no innerHTML.
 */
-function buildPlainTextVnodes(combined, components, nobr) {
-	const parts = combined.split(PLACEHOLDER_SPLIT_RE);
-	const children = [];
-	for (const part of parts) {
-		const m = PLACEHOLDER_IDX_RE.exec(part);
-		if (m) children.push(components[parseInt(m[1], 10)]);
-		else if (part) children.push(part);
-	}
-	return nobr ? /* @__PURE__ */ jsx(Fragment$1, { children }) : h("p", null, ...children);
+function buildPlainTextVnodes(combined, ph, unwrapParagraphs) {
+	const children = expandPlaceholderText(combined, ph).filter((part) => part !== "");
+	return unwrapParagraphs ? /* @__PURE__ */ jsx(Fragment$1, { children }) : h("p", null, ...children);
 }
 /**
 * Render AST nodes with full CommonMark markdown support.
 *
-* Combines all nodes into a single markdown document, using <tw-N> placeholder
-* elements for non-text nodes (variables, macros, links, HTML). This allows
+* Combines all nodes into a single markdown document, using placeholder
+* elements (see Placeholders) for non-text nodes (variables, macros, links,
+* HTML). This allows
 * markdown syntax to span across Twine tokens — e.g., markdown tables can
 * contain {$variables} and {macros} in their cells.
 *
 * After micromark processes the combined string, the HTML is parsed back into
 * Preact VNodes with placeholders replaced by the real rendered components.
+* Placeholders that micromark escaped as code text are swapped back too (see
+* PLACEHOLDER_TEXT_RE), so variables in code stay live components.
 */
 function renderNodes(nodes, options) {
 	if (nodes.length === 0) return null;
 	if (!nodes.some((n) => n.type === "text" && (n.value.trim() !== "" || /\n\s*\n/.test(n.value)))) return nodes.map((node) => renderSingleNode(node));
 	const components = [];
+	const ph = {
+		nonce: Math.random().toString(36).slice(2, 10) || "0",
+		components
+	};
 	let combined = "";
-	const locals = options?.locals ?? {};
 	for (let i = 0; i < nodes.length; i++) {
 		const node = nodes[i];
-		if (node.type === "text") combined += node.value;
-		else if (node.type === "variable" && hasUnclosedBacktick(combined)) combined += getVariableTextValue(node, locals);
-		else {
-			const phIdx = components.length;
-			components.push(renderSingleNode(node));
-			combined += `<span data-tw="${phIdx}"></span>`;
+		if (node.type === "text") {
+			combined += node.value;
+			continue;
 		}
+		const phIdx = components.length;
+		components.push(renderSingleNode(node));
+		if (combined.endsWith("\\")) combined += ESCAPE_GUARD;
+		combined += placeholderHtml(ph.nonce, phIdx);
 	}
+	const unwrapParagraphs = !!(options?.nobr || options?.inline);
 	const textOnly = combined.replace(PLACEHOLDER_STRIP_RE, "");
-	if (!MARKDOWN_SYNTAX_RE.test(textOnly) && !BLANK_LINE_RE.test(textOnly)) return buildPlainTextVnodes(combined, components, options?.nobr);
-	return htmlToPreact(markdownToHtml(combined, { inline: options?.inline }), components, options?.nobr);
+	if (!MARKDOWN_SYNTAX_RE.test(textOnly) && !BLANK_LINE_RE.test(textOnly)) return buildPlainTextVnodes(combined, ph, unwrapParagraphs);
+	return htmlToPreact(markdownToHtml(combined, { inline: options?.inline }), ph, unwrapParagraphs);
 }
 //#endregion
 //#region src/saves/storage.ts
@@ -2269,6 +2646,8 @@ function createLocalStorageBackend() {
 		type: "localstorage",
 		async putSave(record) {
 			const id = record.meta.id;
+			const previous = lsGet(`${LS_SAVE_PREFIX}${id}`);
+			if (previous && previous.meta.playthroughId !== record.meta.playthroughId) lsIndexRemove(`${LS_IDX_SAVES_PT_PREFIX}${previous.meta.playthroughId}`, id);
 			lsSet(`${LS_SAVE_PREFIX}${id}`, record);
 			lsIndexAdd(`${LS_IDX_SAVES_PREFIX}${record.meta.ifid}`, id);
 			lsIndexAdd(`${LS_IDX_SAVES_PT_PREFIX}${record.meta.playthroughId}`, id);
@@ -2453,264 +2832,76 @@ function createIDBBackend() {
 			await idbReq((await tx("meta", "readwrite")).delete(key));
 		},
 		async deleteMetaByPrefix(prefix) {
-			const allRows = await idbReq((await tx("meta", "readwrite")).getAll());
-			for (const row of allRows) if (row.key.startsWith(prefix)) await idbReq((await tx("meta", "readwrite")).delete(row.key));
-		},
-		async deleteMetaByIfid(ifid) {
-			const allRows = await idbReq((await tx("meta", "readwrite")).getAll());
-			for (const row of allRows) if (row.key.includes(ifid)) await idbReq((await tx("meta", "readwrite")).delete(row.key));
-		},
-		async getAllMetaKeys() {
-			return (await idbReq((await tx("meta", "readonly")).getAll())).map((r) => r.key);
-		},
-		async destroy() {
-			(await openDB()).close();
-			dbPromise = null;
-			await new Promise((resolve, reject) => {
-				const req = indexedDB.deleteDatabase(IDB_DB_NAME);
-				req.onsuccess = () => resolve();
-				req.onerror = () => reject(req.error);
-			});
-		}
-	};
-}
-var _backend = null;
-async function detectBackend() {
-	if (typeof indexedDB !== "undefined") try {
-		await new Promise((resolve, reject) => {
-			const req = indexedDB.open("__spindle_probe__", 1);
-			req.onsuccess = () => {
-				req.result.close();
-				indexedDB.deleteDatabase("__spindle_probe__");
-				resolve();
-			};
-			req.onerror = () => reject(req.error);
-		});
-		return createIDBBackend();
-	} catch {}
-	if (typeof localStorage !== "undefined") try {
-		const probeKey = "__spindle_probe__";
-		localStorage.setItem(probeKey, "1");
-		const val = localStorage.getItem(probeKey);
-		localStorage.removeItem(probeKey);
-		if (val === "1") return createLocalStorageBackend();
-	} catch {}
-	return createMemoryBackend();
-}
-/**
-* Detection in flight. Concurrent first callers share it so they all get the
-* same backend (the memory fallback makes a new, empty store per detection).
-*/
-var _backendPromise = null;
-function getBackend() {
-	if (_backend) return Promise.resolve(_backend);
-	if (!_backendPromise) {
-		const pending = detectBackend().then((backend) => {
-			if (_backendPromise === pending) _backend = backend;
-			return backend;
-		});
-		_backendPromise = pending;
-	}
-	return _backendPromise;
-}
-function resetBackend() {
-	_backend = null;
-	_backendPromise = null;
-}
-/**
-* Synchronous accessor for the current backend type.
-* Returns 'memory' if the backend hasn't been detected yet.
-*/
-function getBackendType() {
-	return _backend?.type ?? "memory";
-}
-//#endregion
-//#region src/class-registry.ts
-var registry = /* @__PURE__ */ new Map();
-var ctorToName = /* @__PURE__ */ new Map();
-function registerClass(name, ctor) {
-	registry.set(name, ctor);
-	ctorToName.set(ctor, name);
-}
-function isPlainObject(value) {
-	if (typeof value !== "object" || value === null) return false;
-	const proto = Object.getPrototypeOf(value);
-	return proto === Object.prototype || proto === null;
-}
-function deepClone(value, options = {}) {
-	const seen = /* @__PURE__ */ new Map();
-	function clone(val) {
-		if (val === null || typeof val !== "object") return val;
-		const obj = val;
-		if (seen.has(obj)) return seen.get(obj);
-		if (val instanceof Date) return new Date(val.getTime());
-		if (val instanceof RegExp) return new RegExp(val.source, val.flags);
-		if (Array.isArray(val)) {
-			const arr = [];
-			seen.set(obj, arr);
-			for (let i = 0; i < val.length; i++) arr[i] = clone(val[i]);
-			return arr;
-		}
-		if (val instanceof Map) {
-			const copy = /* @__PURE__ */ new Map();
-			seen.set(obj, copy);
-			for (const [k, v] of val) copy.set(clone(k), clone(v));
-			return copy;
-		}
-		if (val instanceof Set) {
-			const copy = /* @__PURE__ */ new Set();
-			seen.set(obj, copy);
-			for (const v of val) copy.add(clone(v));
-			return copy;
-		}
-		const ctor = obj.constructor;
-		if (ctorToName.get(ctor) !== void 0) {
-			const copy = Object.create(Object.getPrototypeOf(obj));
-			seen.set(obj, copy);
-			for (const key of Object.keys(obj)) copy[key] = clone(obj[key]);
-			return copy;
-		}
-		if (!isPlainObject(val) && options.keepUnregistered) return val;
-		if (isPlainObject(val) || typeof val === "object") {
-			const copy = {};
-			seen.set(obj, copy);
-			for (const key of Object.keys(obj)) copy[key] = clone(obj[key]);
-			return copy;
-		}
-		return val;
-	}
-	return clone(value);
-}
-/**
-* Structural equality over the value types deepClone() supports: primitives,
-* arrays, plain objects, class instances, Date, RegExp, Map and Set (nested
-* at any depth). Map and Set entries are compared in insertion order.
-*/
-function deepEqual(a, b, seen = /* @__PURE__ */ new Map()) {
-	if (Object.is(a, b)) return true;
-	if (a === null || b === null || typeof a !== "object" || typeof b !== "object") return false;
-	if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
-	if (seen.get(a) === b) return true;
-	seen.set(a, b);
-	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
-	if (a instanceof RegExp) return String(a) === String(b);
-	if (a instanceof Map || a instanceof Set) {
-		const bc = b;
-		if (a.size !== bc.size) return false;
-		const ai = a.entries();
-		const bi = bc.entries();
-		for (let x = ai.next(), y = bi.next(); !x.done; x = ai.next(), y = bi.next()) if (!deepEqual(x.value, y.value, seen)) return false;
-		return true;
-	}
-	const ao = a;
-	const bo = b;
-	const keys = Object.keys(ao);
-	if (keys.length !== Object.keys(bo).length) return false;
-	for (const key of keys) if (!(key in bo) || !deepEqual(ao[key], bo[key], seen)) return false;
-	return true;
-}
-var CLASS_TAG = "__spindle_class__";
-var DATA_TAG = "__spindle_data__";
-function serialize(value) {
-	const seen = /* @__PURE__ */ new Set();
-	function ser(val) {
-		if (val === null || typeof val !== "object") return val;
-		const obj = val;
-		if (seen.has(obj)) throw new Error("spindle: Cannot serialize circular references");
-		seen.add(obj);
-		if (val instanceof Date) {
-			seen.delete(obj);
-			return {
-				[CLASS_TAG]: "__Date__",
-				[DATA_TAG]: { iso: val.toISOString() }
-			};
-		}
-		if (val instanceof RegExp) {
-			seen.delete(obj);
-			return {
-				[CLASS_TAG]: "__RegExp__",
-				[DATA_TAG]: {
-					source: val.source,
-					flags: val.flags
-				}
-			};
-		}
-		if (Array.isArray(val)) {
-			const result = val.map((item) => ser(item));
-			seen.delete(obj);
-			return result;
-		}
-		if (val instanceof Map) {
-			const entries = [...val].map(([k, v]) => [ser(k), ser(v)]);
-			seen.delete(obj);
-			return {
-				[CLASS_TAG]: "__Map__",
-				[DATA_TAG]: { entries }
-			};
-		}
-		if (val instanceof Set) {
-			const entries = [...val].map((v) => ser(v));
-			seen.delete(obj);
-			return {
-				[CLASS_TAG]: "__Set__",
-				[DATA_TAG]: { entries }
-			};
-		}
-		const ctor = obj.constructor;
-		const name = ctorToName.get(ctor);
-		if (name !== void 0) {
-			const data = {};
-			for (const key of Object.keys(obj)) data[key] = ser(obj[key]);
-			seen.delete(obj);
-			return {
-				[CLASS_TAG]: name,
-				[DATA_TAG]: data
-			};
-		}
-		const result = {};
-		for (const key of Object.keys(obj)) result[key] = ser(obj[key]);
-		seen.delete(obj);
-		return result;
-	}
-	return ser(value);
-}
-function deserialize(value) {
-	function deser(val) {
-		if (val === null || typeof val !== "object") return val;
-		if (Array.isArray(val)) return val.map((item) => deser(item));
-		const obj = val;
-		if (CLASS_TAG in obj && DATA_TAG in obj) {
-			const name = obj[CLASS_TAG];
-			const data = obj[DATA_TAG];
-			if (name === "__Date__") return new Date(data.iso);
-			if (name === "__RegExp__") return new RegExp(data.source, data.flags);
-			if (name === "__Map__") {
-				const entries = data.entries;
-				return new Map(entries.map(([k, v]) => [deser(k), deser(v)]));
-			}
-			if (name === "__Set__") {
-				const entries = data.entries;
-				return new Set(entries.map((v) => deser(v)));
-			}
-			const ctor = registry.get(name);
-			if (!ctor) {
-				console.warn(`spindle: Class "${name}" not registered. Falling back to plain object.`);
-				const plain = {};
-				for (const key of Object.keys(data)) plain[key] = deser(data[key]);
-				return plain;
-			}
-			const instance = Object.create(ctor.prototype);
-			for (const key of Object.keys(data)) instance[key] = deser(data[key]);
-			return instance;
+			const allRows = await idbReq((await tx("meta", "readwrite")).getAll());
+			for (const row of allRows) if (row.key.startsWith(prefix)) await idbReq((await tx("meta", "readwrite")).delete(row.key));
+		},
+		async deleteMetaByIfid(ifid) {
+			const allRows = await idbReq((await tx("meta", "readwrite")).getAll());
+			for (const row of allRows) if (row.key.includes(ifid)) await idbReq((await tx("meta", "readwrite")).delete(row.key));
+		},
+		async getAllMetaKeys() {
+			return (await idbReq((await tx("meta", "readonly")).getAll())).map((r) => r.key);
+		},
+		async destroy() {
+			(await openDB()).close();
+			dbPromise = null;
+			await new Promise((resolve, reject) => {
+				const req = indexedDB.deleteDatabase(IDB_DB_NAME);
+				req.onsuccess = () => resolve();
+				req.onerror = () => reject(req.error);
+			});
 		}
-		if (val instanceof Date || val instanceof RegExp || val instanceof Map || val instanceof Set) return val;
-		const ctor = obj.constructor;
-		if (ctorToName.has(ctor)) return val;
-		const result = {};
-		for (const key of Object.keys(obj)) result[key] = deser(obj[key]);
-		return result;
+	};
+}
+var _backend = null;
+async function detectBackend() {
+	if (typeof indexedDB !== "undefined") try {
+		await new Promise((resolve, reject) => {
+			const req = indexedDB.open("__spindle_probe__", 1);
+			req.onsuccess = () => {
+				req.result.close();
+				indexedDB.deleteDatabase("__spindle_probe__");
+				resolve();
+			};
+			req.onerror = () => reject(req.error);
+		});
+		return createIDBBackend();
+	} catch {}
+	if (typeof localStorage !== "undefined") try {
+		const probeKey = "__spindle_probe__";
+		localStorage.setItem(probeKey, "1");
+		const val = localStorage.getItem(probeKey);
+		localStorage.removeItem(probeKey);
+		if (val === "1") return createLocalStorageBackend();
+	} catch {}
+	return createMemoryBackend();
+}
+/**
+* Detection in flight. Concurrent first callers share it so they all get the
+* same backend (the memory fallback makes a new, empty store per detection).
+*/
+var _backendPromise = null;
+function getBackend() {
+	if (_backend) return Promise.resolve(_backend);
+	if (!_backendPromise) {
+		const pending = detectBackend().then((backend) => {
+			if (_backendPromise === pending) _backend = backend;
+			return backend;
+		});
+		_backendPromise = pending;
 	}
-	return deser(value);
+	return _backendPromise;
+}
+function resetBackend() {
+	_backend = null;
+	_backendPromise = null;
+}
+/**
+* Synchronous accessor for the current backend type.
+* Returns 'memory' if the backend hasn't been detected yet.
+*/
+function getBackendType() {
+	return _backend?.type ?? "memory";
 }
 //#endregion
 //#region src/event-emitter.ts
@@ -2790,10 +2981,14 @@ async function initSaveSystem() {
 	if (initialized) return;
 	initialized = true;
 }
-async function startNewPlaythrough(ifid) {
+/**
+* Store a new playthrough and make it the story's current one. Pass `id` when
+* the caller has already switched to the playthrough (restart() does, so
+* saves issued before this resolves are tagged with it).
+*/
+async function startNewPlaythrough(ifid, id = crypto.randomUUID()) {
 	const backend = await getBackend();
 	const num = (await backend.getPlaythroughsByIfid(ifid)).length + 1;
-	const id = crypto.randomUUID();
 	const record = {
 		id,
 		ifid,
@@ -2809,18 +3004,23 @@ async function getCurrentPlaythroughId(ifid) {
 }
 /**
 * Run a save through the `beforesave` / `aftersave` hooks. `beforesave` fires
-* before `getPayload()` captures the state, so data a hook sets is part of the
-* save; `aftersave` fires once `write` has stored it. Every user-facing save
-* path goes through here.
+* before the payload is captured, so data a hook sets is part of the save;
+* `aftersave` fires once `write` has stored it. Every user-facing save path
+* goes through here.
+*
+* `beginCapture` is called just before the hooks and returns the function
+* that captures the payload after them, so the capture can tell which
+* variables the hooks changed (the store's `beginSave`).
 *
 * The hook and capture run synchronously, but an error they throw (a failing
 * hook, an unserializable payload) rejects the returned promise like a failed
 * write rather than escaping to the caller.
 */
-function saveWithHooks(slot, custom, getPayload, write) {
+function saveWithHooks(slot, custom, beginCapture, write) {
 	try {
+		const capture = beginCapture();
 		emit("beforesave", slot, custom);
-		return write(getPayload()).then((result) => {
+		return write(capture()).then((result) => {
 			emit("aftersave", slot);
 			return result;
 		});
@@ -2854,7 +3054,22 @@ async function createSave(ifid, playthroughId, payload, custom = {}) {
 	await (await getBackend()).putSave(record);
 	return record;
 }
-async function overwriteSave(saveId, payload, custom) {
+/**
+* Replace the payload of an existing save, keeping its ID and `createdAt`.
+* Pass the current `playthroughId` when the new payload comes from the
+* running game: the save then holds that playthrough's state, so it is
+* grouped and deleted with it rather than with the playthrough that first
+* created the save.
+*
+* Metadata describing the content follows the new payload: `passage`,
+* `updatedAt` and the title. A generated title (SaveTitle passage, title
+* generator or the default "passage - time") is generated again, exactly as
+* for a fresh save, so it never names a passage or state the save no longer
+* holds. A title the player gave the save (renameSave) is kept: it names the
+* save itself rather than describing its content. `custom` is merged, as
+* before, so slot keys and metadata not passed again are kept.
+*/
+async function overwriteSave(saveId, payload, custom, playthroughId) {
 	const backend = await getBackend();
 	const existing = await backend.getSave(saveId);
 	if (!existing) return void 0;
@@ -2867,7 +3082,9 @@ async function overwriteSave(saveId, payload, custom) {
 	const updated = {
 		meta: {
 			...existing.meta,
+			...playthroughId ? { playthroughId } : {},
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			title: existing.meta.userTitle === true ? existing.meta.title : generateTitle(payload),
 			passage: payload.passage,
 			...custom != null ? { custom: {
 				...existing.meta.custom,
@@ -2929,6 +3146,7 @@ async function renameSave(saveId, newTitle) {
 		meta: {
 			...record.meta,
 			title: newTitle,
+			userTitle: true,
 			updatedAt: (/* @__PURE__ */ new Date()).toISOString()
 		}
 	};
@@ -3045,7 +3263,7 @@ function quickSave(ifid, playthroughId, payload, slot, custom) {
 		const backend = await getBackend();
 		const existingId = await backend.getMeta(metaKey);
 		if (existingId) {
-			const updated = await overwriteSave(existingId, payload, custom);
+			const updated = await overwriteSave(existingId, payload, custom, playthroughId);
 			if (updated) return updated;
 		}
 		const record = await createSave(ifid, playthroughId, payload, {
@@ -3322,28 +3540,279 @@ function initializeStory(session) {
 	if (!session) recordStoryInitState();
 }
 //#endregion
+//#region src/utils/object-path.ts
+/** Traverse dot-path segments on an object and return the nested value. */
+function getByPath(obj, segments) {
+	let current = obj;
+	for (const seg of segments) {
+		if (current == null || typeof current !== "object") return void 0;
+		current = current[seg];
+	}
+	return current;
+}
+/**
+* Shallow copy that keeps the prototype, so a registered class instance
+* stays an instance of its class (with the same own keys deepClone copies).
+*/
+function shallowCopy(value) {
+	let copy;
+	if (Array.isArray(value)) copy = [];
+	else if (value instanceof Map) copy = new Map(value);
+	else if (value instanceof Set) copy = new Set(value);
+	else if (value instanceof Date) copy = new Date(value.getTime());
+	else copy = Object.create(Object.getPrototypeOf(value));
+	return Object.assign(copy, value);
+}
+/**
+* Set a value at dot-path `segments` below `root`.
+*
+* When `root` is an Immer draft, objects Immer does not draft (registered
+* class instances and everything below them) are copied on the way down and
+* the copy is assigned to its parent, so the write produces new references
+* up to the root. Writing into such an object directly would mutate the
+* instance shared with the previous state and with history, and subscribers
+* would see no change. Outside a draft (a private working copy) the path is
+* written in place.
+*/
+function setByPath(root, segments, value, options = {}) {
+	const parent = walkToParent(root, segments, options.createMissing ?? false);
+	parent[segments[segments.length - 1]] = value;
+}
+/**
+* Delete the property at dot-path `segments` below `root`, copying
+* undrafted objects on the way down like setByPath(). Does nothing when an
+* intermediate is missing or not an object, or the property is absent.
+*/
+function deleteByPath(root, segments) {
+	const last = segments[segments.length - 1];
+	const holder = getByPath(root, segments.slice(0, -1));
+	if (holder == null || typeof holder !== "object" || !(last in holder)) return;
+	const parent = walkToParent(root, segments, false);
+	delete parent[last];
+}
+/**
+* Walk to the object holding the last of `segments`, copying undrafted
+* objects when `root` is an Immer draft (see setByPath). A missing or
+* non-object intermediate is replaced by a plain object when
+* `createMissing` is set, and throws a TypeError otherwise.
+*/
+function walkToParent(root, segments, createMissing) {
+	const copyOnWrite = isDraft(root);
+	let current = root;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const seg = segments[i];
+		let next = current[seg];
+		if (next == null || typeof next !== "object") {
+			if (!createMissing) throw new TypeError(`spindle: Cannot set property "${segments[i + 1]}" on ${next === null ? "null" : typeof next} (at "${segments.slice(0, i + 1).join(".")}")`);
+			next = {};
+			current[seg] = next;
+		} else if (copyOnWrite && !isDraft(next)) {
+			next = shallowCopy(next);
+			current[seg] = next;
+		}
+		current = next;
+	}
+	return current;
+}
+//#endregion
 //#region src/execute-mutation.ts
+var NAMESPACES = [
+	"variables",
+	"temporary",
+	"transient"
+];
+/** The mutations now executing, innermost last. */
+var activeScopes = [];
 /**
-* Write the keys `code` changed (`clone` vs the pre-execution `before`) into
-* an Immer draft of the same namespace, and delete the keys it removed.
-* Untouched keys are left alone, so updates made during execution survive.
+* The working copies of the store namespaces that the innermost executing
+* mutation reads and writes, or undefined outside of one. Story.get reads
+* them so the code sees its own pending writes.
 */
-function commitNamespace(draft, clone, before) {
-	for (const key of Object.keys(clone)) if (!deepEqual(clone[key], before[key])) draft[key] = clone[key];
-	for (const key of Object.keys(before)) if (!(key in clone)) delete draft[key];
+function getActiveMutationScope() {
+	return activeScopes[activeScopes.length - 1]?.work;
 }
-function executeMutation(code, mergedLocals, scopeUpdate) {
+var cloneValue = (value) => deepClone(value, { keepUnregistered: true });
+/**
+* A frozen copy of a value read from a working copy, matching what reads
+* from the (frozen) store return: writing to it fails instead of changing
+* the code's pending state behind its back.
+*/
+function frozenCopy(value) {
+	return freeze(cloneValue(value), true);
+}
+/**
+* Objects merged property by property: plain objects and (registered)
+* class instances. Arrays, Map, Set, Date and RegExp are values that are
+* replaced as a whole, since their elements have no stable identity to
+* merge by (a shift moves every index).
+*/
+function isMergeable(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Map) && !(value instanceof Set) && !(value instanceof Date) && !(value instanceof RegExp);
+}
+var hasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+/** Collect the property paths where `work` differs from `base`. */
+function diff(base, work, path, changes, ancestors) {
+	if (ancestors.has(work)) return;
+	ancestors.add(work);
+	for (const key of Object.keys(work)) {
+		const b = base[key];
+		const w = work[key];
+		if (!hasOwn(base, key)) changes.push({
+			path: [...path, key],
+			deleted: false,
+			value: w
+		});
+		else if (isMergeable(b) && isMergeable(w) && Object.getPrototypeOf(b) === Object.getPrototypeOf(w)) diff(b, w, [...path, key], changes, ancestors);
+		else if (!deepEqual(b, w)) changes.push({
+			path: [...path, key],
+			deleted: false,
+			value: w
+		});
+	}
+	for (const key of Object.keys(base)) if (!hasOwn(work, key)) changes.push({
+		path: [...path, key],
+		deleted: true
+	});
+	ancestors.delete(work);
+}
+/** Whether `ns` already holds what `change` would write. */
+function isApplied(ns, change) {
+	const parent = getByPath(ns, change.path.slice(0, -1));
+	if (parent === null || typeof parent !== "object") return change.deleted;
+	const key = change.path[change.path.length - 1];
+	if (!hasOwn(parent, key)) return change.deleted;
+	return !change.deleted && deepEqual(parent[key], change.value);
+}
+function applyChange(ns, change) {
+	if (change.deleted) deleteByPath(ns, change.path);
+	else setByPath(ns, change.path, change.value);
+}
+/**
+* Apply a write that reached the store while mutations execute to their
+* `work` and `base` copies (see MutationScope), so the code sees it and
+* its commit neither drops it nor reverts it. Called from inside the store
+* update that makes the write, before subscribers (watchers) run, so writes
+* those make land in the copies after this one. When a copy cannot take the
+* path (the code replaced or deleted an intermediate object), its root is
+* replaced with the store's root as written.
+*/
+function mirror(draft, ns, change, scopes = activeScopes) {
+	const root = change.path[0];
+	for (const scope of scopes) for (const copy of [scope.work[ns], scope.base[ns]]) try {
+		applyChange(copy, change.deleted ? change : {
+			...change,
+			value: cloneValue(change.value)
+		});
+	} catch {
+		const stored = draft[ns][root];
+		if (hasOwn(draft[ns], root)) copy[root] = cloneValue(isDraft(stored) ? current(stored) : stored);
+		else delete copy[root];
+	}
+}
+/**
+* Mirror a Story.set write into every executing mutation (see mirror()).
+* Call it inside the store update that writes `value` at `path` of `ns`.
+*/
+function mirrorWriteToActiveScopes(draft, ns, path, value) {
+	if (activeScopes.length === 0) return;
+	mirror(draft, ns, {
+		path,
+		deleted: false,
+		value
+	});
+}
+var cloneNamespaces = (from) => ({
+	variables: deepClone(from.variables),
+	temporary: deepClone(from.temporary),
+	transient: deepClone(from.transient)
+});
+/**
+* Commit the property paths `scope`'s code changed (work vs base) on top of
+* the current store state, so writes made elsewhere during execution to
+* other paths of the same objects survive, and hand them to the `enclosing`
+* mutations. With `keepRunning`, the code goes on running after the commit:
+* its working copy must stay its own (the store freezes what it is given),
+* and its base is moved up to the working copy so nothing commits twice.
+*/
+function commitScope(scope, enclosing, keepRunning) {
+	const changes = NAMESPACES.map((ns) => {
+		const list = [];
+		diff(scope.base[ns], scope.work[ns], [], list, /* @__PURE__ */ new Set());
+		return [ns, list];
+	});
+	if (changes.every(([, list]) => list.length === 0)) return;
+	if (keepRunning) scope.base = cloneNamespaces(scope.work);
+	const own = (value) => keepRunning ? cloneValue(value) : value;
+	const current = useStoryStore.getState();
+	current.updateVariables((draft) => {
+		for (const [ns, list] of changes) {
+			const replaced = /* @__PURE__ */ new Set();
+			for (const change of list) {
+				const root = change.path[0];
+				if (replaced.has(root) || isApplied(current[ns], change)) continue;
+				try {
+					applyChange(draft[ns], change.deleted ? change : {
+						...change,
+						value: own(change.value)
+					});
+				} catch {
+					draft[ns][root] = own(scope.work[ns][root]);
+					replaced.add(root);
+				}
+			}
+			for (const change of list) mirror(draft, ns, change, enclosing);
+		}
+	});
+}
+/**
+* Bring a suspended mutation's copies up to the store after an action
+* replaced or changed state under it (navigation clears temporaries, back
+* and restart replace variables). Roots that still match keep the objects
+* the code may hold.
+*/
+function resync(scope) {
 	const state = useStoryStore.getState();
-	const vars = deepClone(state.variables);
-	const temps = deepClone(state.temporary);
-	const trans = deepClone(state.transient);
+	for (const ns of NAMESPACES) {
+		const work = scope.work[ns];
+		const stored = state[ns];
+		for (const key of Object.keys(work)) if (!hasOwn(stored, key)) delete work[key];
+		for (const key of Object.keys(stored)) if (!hasOwn(work, key) || !deepEqual(work[key], stored[key])) work[key] = deepClone(stored[key]);
+	}
+	scope.base = cloneNamespaces(state);
+}
+/**
+* Run an action that snapshots or replaces story state (saving, navigating,
+* restarting) in program order with mutation code running now: the code's
+* writes so far are committed first, the action runs against the store with
+* no mutation active, and the code then continues from the resulting state.
+* Outside mutation code the action just runs.
+*/
+function runWithCommittedMutations(action) {
+	if (activeScopes.length === 0) return action();
+	const scopes = [...activeScopes];
+	for (let i = scopes.length - 1; i >= 0; i--) commitScope(scopes[i], scopes.slice(0, i), true);
+	const suspended = activeScopes.splice(0);
+	try {
+		return action();
+	} finally {
+		activeScopes.push(...suspended);
+		for (const scope of suspended) resync(scope);
+	}
+}
+function executeMutation(code, mergedLocals, scopeUpdate) {
+	const start = getActiveMutationScope() ?? useStoryStore.getState();
+	const scope = {
+		work: cloneNamespaces(start),
+		base: cloneNamespaces(start)
+	};
 	const localsClone = deepClone(mergedLocals, { keepUnregistered: true });
-	execute(code, vars, temps, localsClone, trans);
-	state.updateVariables((draft) => {
-		commitNamespace(draft.variables, vars, state.variables);
-		commitNamespace(draft.temporary, temps, state.temporary);
-		commitNamespace(draft.transient, trans, state.transient);
-	});
+	activeScopes.push(scope);
+	try {
+		execute(code, scope.work.variables, scope.work.temporary, localsClone, scope.work.transient);
+	} finally {
+		activeScopes.pop();
+	}
+	commitScope(scope, activeScopes, false);
 	for (const key of Object.keys(localsClone)) if (!deepEqual(localsClone[key], mergedLocals[key])) scopeUpdate(key, localsClone[key]);
 	for (const key of Object.keys(mergedLocals)) if (!(key in localsClone)) scopeUpdate(key, void 0);
 }
@@ -3419,7 +3888,10 @@ function fireTrigger(trigger) {
 		dialogQueue.push({ passageName: options.dialog });
 		dialogNotify?.();
 	}
-	if (options.goto) useStoryStore.getState().navigate(options.goto);
+	if (options.goto) {
+		const passage = options.goto;
+		runWithCommittedMutations(() => useStoryStore.getState().navigate(passage));
+	}
 }
 var MAX_RECHECK_DEPTH = 10;
 function runCheckLoop() {
@@ -3666,6 +4138,27 @@ function recordStoryInitState() {
 		state.history[0].prng = prng;
 	});
 }
+/**
+* Settles once the latest playthrough setup (init's lookup or creation, or a
+* restart's creation) is stored, with that setup's playthrough ID ('' if
+* init could not establish one). Each setup chains on the previous one, so
+* playthroughs are created and numbered in the order the game started them.
+*/
+var playthroughSetup = Promise.resolve("");
+/** Bumped by every init()/restart(); a stale init must not adopt its ID. */
+var playthroughGeneration = 0;
+/**
+* The playthrough a save issued now belongs to, once its record is stored.
+* Read synchronously at the call: restart() switches the store's
+* `playthroughId` at once, so a save issued after it (even before the new
+* playthrough is stored) belongs to the new playthrough, and a later restart
+* doesn't move it. Before init() has looked up the stored playthrough the
+* store's ID is '', and the save takes the one init establishes.
+*/
+function resolvePlaythroughId() {
+	const current = useStoryStore.getState().playthroughId;
+	return playthroughSetup.then((established) => current || established);
+}
 var runtimeUnsubs = [];
 var inRuntimePhase = false;
 /**
@@ -3703,6 +4196,22 @@ function loadedEntryMoment(payload) {
 	if (typeof moment.variables !== "object" || moment.variables === null) return;
 	return moment;
 }
+/**
+* Copy the variables that changed between `before` and `after` (the live
+* variables around the `beforesave` hooks) into the payload's snapshot of the
+* saved moment. A load restores that snapshot, the state on entering the
+* passage, and runs the passage again, so data a hook adds to a save would
+* otherwise be lost on load (#227). Only the payload's copy changes: the live
+* history keeps the recorded snapshot (#159). Store updates are immutable, so
+* a value a hook did not touch keeps its identity.
+*/
+function keepHookWrites(payload, before, after) {
+	const moment = payload.history[payload.historyIndex];
+	if (!moment) return;
+	const has = (vars, key) => Object.prototype.hasOwnProperty.call(vars, key);
+	for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) if (!has(after, key)) delete moment.variables[key];
+	else if (!has(before, key) || after[key] !== before[key]) moment.variables[key] = deepClone(after[key]);
+}
 /** Restore or reset PRNG from a history moment's snapshot. */
 function restorePRNGFromMoment(moment) {
 	if (moment?.prng) restorePRNG(moment.prng.seed, moment.prng.pull);
@@ -3764,6 +4273,7 @@ var useStoryStore = create()(immer((set, get) => ({
 		resetModuleState(deepClone(initialVars));
 		set((state) => {
 			state.storyData = storyData;
+			state.playthroughId = "";
 			state.currentPassage = startPassage.name;
 			state.navigationId++;
 			state.variables = initialVars;
@@ -3781,22 +4291,21 @@ var useStoryStore = create()(immer((set, get) => ({
 		});
 		lastNavigationVars = get().variables;
 		const ifid = storyData.ifid;
-		initSaveSystem().then(async () => {
-			const existingId = await getCurrentPlaythroughId(ifid);
-			if (existingId) set((state) => {
-				state.playthroughId = existingId;
+		const generation = ++playthroughGeneration;
+		playthroughSetup = initSaveSystem().then(async () => {
+			const id = await getCurrentPlaythroughId(ifid) ?? await startNewPlaythrough(ifid);
+			if (generation === playthroughGeneration) set((state) => {
+				state.playthroughId = id;
 			});
-			else {
-				const newId = await startNewPlaythrough(ifid);
-				set((state) => {
-					state.playthroughId = newId;
-				});
-			}
 			const saves = await populateKnownSaves(ifid);
 			if (Object.keys(saves).length > 0) set((state) => {
 				state.knownSaves = saves;
 			});
-		}).catch((err) => console.error("spindle: failed to init save system", err));
+			return id;
+		}).catch((err) => {
+			console.error("spindle: failed to init save system", err);
+			return "";
+		});
 	},
 	navigate: (passageName) => {
 		if (navigationTriggerPhase) {
@@ -3949,6 +4458,16 @@ var useStoryStore = create()(immer((set, get) => ({
 			state.renderDeferred = false;
 		});
 		emit("beforerestart");
+		const newPlaythroughId = crypto.randomUUID();
+		++playthroughGeneration;
+		set((state) => {
+			state.playthroughId = newPlaythroughId;
+		});
+		const ifid = storyData.ifid;
+		playthroughSetup = playthroughSetup.then(() => startNewPlaythrough(ifid, newPlaythroughId)).then(() => newPlaythroughId, (err) => {
+			console.error("spindle: failed to start new playthrough", err);
+			return newPlaythroughId;
+		});
 		const keepDeferred = get().renderDeferred;
 		cleanupRuntimeHandlers();
 		resetPRNG();
@@ -3976,19 +4495,16 @@ var useStoryStore = create()(immer((set, get) => ({
 		clearSession(storyData.ifid);
 		emit("storyinit");
 		recordStoryInitState();
-		startNewPlaythrough(storyData.ifid).then((newId) => {
-			set((state) => {
-				state.playthroughId = newId;
-			});
-		}).catch((err) => console.error("spindle: failed to start new playthrough", err));
 	},
 	save: (slot, custom) => {
-		const { storyData, playthroughId } = get();
+		const { storyData } = get();
 		if (!storyData) return Promise.resolve();
-		return handled(saveWithHooks(slot, custom, () => get().getSavePayload(), async (payload) => {
+		const playthrough = resolvePlaythroughId();
+		return handled(saveWithHooks(slot, custom, get().beginSave, async (payload) => {
 			set((state) => {
 				state.saveError = null;
 			});
+			const playthroughId = await playthrough;
 			await quickSave(storyData.ifid, playthroughId, payload, slot, custom);
 			set((state) => {
 				state.knownSaves = {
@@ -4127,6 +4643,14 @@ var useStoryStore = create()(immer((set, get) => ({
 			prng: snapshotPRNG()
 		};
 	},
+	beginSave: () => {
+		const before = get().variables;
+		return () => {
+			const payload = get().getSavePayload();
+			keepHookWrites(payload, before, get().variables);
+			return payload;
+		};
+	},
 	loadFromPayload: (payload, slot) => {
 		if (payload.history.length === 0) {
 			console.warn("loadFromPayload: rejecting payload with empty history");
@@ -4687,14 +5211,16 @@ function currentSourceLocation() {
 //#endregion
 //#region src/components/macros/option-utils.ts
 function parseVarArgs(rawArgs) {
-	const match = rawArgs.match(/^\s*(["']?\$[\w.]+["']?)\s*(?:["'](.*)["'])?\s*$/);
+	const match = rawArgs.match(/^\s*(["']?\$[\w.]+["']?)\s*(["'].*["'])?\s*$/);
 	if (!match) return {
 		varName: rawArgs.trim(),
 		placeholder: ""
 	};
+	const varName = match[1].replace(/["']/g, "");
+	const quoted = match[2];
 	return {
-		varName: match[1].replace(/["']/g, ""),
-		placeholder: match[2] || ""
+		varName,
+		placeholder: quoted ? readWholeQuoted(quoted) ?? quoted.slice(1, -1) : ""
 	};
 }
 /**
@@ -4703,7 +5229,8 @@ function parseVarArgs(rawArgs) {
 function extractOptions(children) {
 	const options = [];
 	for (const node of children) if (node.type === "macro" && node.name === "option") {
-		const stripped = node.rawArgs.trim().replace(/^(["'])(.+)\1$/, "$2");
+		const raw = node.rawArgs.trim();
+		const stripped = readWholeQuoted(raw) ?? raw.replace(/^(["'])(.+)\1$/, "$2");
 		options.push(stripped);
 	}
 	return options;
@@ -4723,25 +5250,6 @@ var sharedHooks = {
 	useMemo,
 	useContext
 };
-/** Traverse a dot-path on an object, returning the nested value. */
-function getByPath$1(obj, segments) {
-	let current = obj;
-	for (const seg of segments) {
-		if (current == null || typeof current !== "object") return void 0;
-		current = current[seg];
-	}
-	return current;
-}
-/** Set a nested value by dot-path segments on an (Immer draft) object. */
-function setByPath$1(obj, segments, value) {
-	let target = obj;
-	for (let i = 0; i < segments.length - 1; i++) {
-		const seg = segments[i];
-		if (target[seg] == null || typeof target[seg] !== "object") target[seg] = {};
-		target = target[seg];
-	}
-	target[segments[segments.length - 1]] = value;
-}
 function defineMacro(config, source = "builtin") {
 	function Wrapper(props) {
 		let className = props.className;
@@ -4754,9 +5262,11 @@ function defineMacro(config, source = "builtin") {
 		}
 		const { update, getValues } = useContext(LocalsUpdateContext);
 		const nobr = useContext(NobrContext);
+		const inline = useContext(InlineContext);
 		const localsValues = useContext(LocalsValuesContext);
 		const renderNodes$1 = (nodes, options) => renderNodes(nodes, {
 			nobr,
+			inline,
 			locals: localsValues,
 			...options
 		});
@@ -4796,11 +5306,11 @@ function defineMacro(config, source = "builtin") {
 			const varExpr = firstToken.replace(/["']/g, "").replace(/^\$/, "");
 			const segments = varExpr.split(".");
 			ctx.varName = varExpr;
-			ctx.value = useStoryStore((s) => getByPath$1(s.variables, segments));
-			ctx.getValue = () => getByPath$1(useStoryStore.getState().variables, segments);
+			ctx.value = useStoryStore((s) => getByPath(s.variables, segments));
+			ctx.getValue = () => getByPath(useStoryStore.getState().variables, segments);
 			ctx.setValue = (value) => {
 				useStoryStore.setState((state) => {
-					setByPath$1(state.variables, segments, value);
+					setByPath(state.variables, segments, value, { createMissing: true });
 				});
 			};
 		}
@@ -4876,27 +5386,6 @@ function ensureVariableChangedSubscription() {
 		if (hasChanges) emit("variableChanged", changed);
 	});
 }
-/** Traverse a dot-delimited path on an object and return the value. */
-function getByPath(obj, path) {
-	const segments = path.split(".");
-	let current = obj[segments[0]];
-	for (let i = 1; i < segments.length; i++) {
-		if (current == null) return void 0;
-		current = current[segments[i]];
-	}
-	return current;
-}
-/** Set a value at a dot-delimited path on an object (must be an Immer draft for mutation). */
-function setByPath(obj, path, value) {
-	const segments = path.split(".");
-	let current = obj;
-	for (let i = 0; i < segments.length - 1; i++) {
-		const next = current[segments[i]];
-		if (next == null || typeof next !== "object") throw new TypeError(`spindle: Cannot set property "${segments[i + 1]}" on ${typeof next} (at "${segments.slice(0, i + 1).join(".")}")`);
-		current = next;
-	}
-	current[segments[segments.length - 1]] = value;
-}
 var declaredVariables = null;
 var declaredTransients = null;
 var warnedUndeclared = /* @__PURE__ */ new Set();
@@ -4939,41 +5428,47 @@ function warnIfUndeclared(isTransient, key) {
 function setOne(draft, name, value) {
 	const { isTransient, key } = parseName(name);
 	const namespace = isTransient ? draft.transient : draft.variables;
-	if (key.includes(".")) setByPath(namespace, key, value);
+	if (key.includes(".")) setByPath(namespace, key.split("."), value);
 	else namespace[key] = value;
 }
 function createStoryAPI() {
 	return {
 		get(name) {
 			const { isTransient, key } = parseName(name);
-			const store = isTransient ? useStoryStore.getState().transient : useStoryStore.getState().variables;
-			return key.includes(".") ? getByPath(store, key) : store[key];
+			const scope = getActiveMutationScope();
+			const source = scope ?? useStoryStore.getState();
+			const namespace = isTransient ? source.transient : source.variables;
+			const value = key.includes(".") ? getByPath(namespace, key.split(".")) : namespace[key];
+			return scope ? frozenCopy(value) : value;
 		},
 		set(nameOrVars, value) {
-			const names = typeof nameOrVars === "string" ? [nameOrVars] : Object.keys(nameOrVars);
-			for (const name of names) {
+			const entries = typeof nameOrVars === "string" ? [[nameOrVars, value]] : Object.entries(nameOrVars);
+			for (const [name] of entries) {
 				const { isTransient, key } = parseName(name);
 				warnIfUndeclared(isTransient, key);
 			}
 			useStoryStore.getState().updateVariables((draft) => {
-				if (typeof nameOrVars === "string") setOne(draft, nameOrVars, value);
-				else for (const [k, v] of Object.entries(nameOrVars)) setOne(draft, k, v);
+				for (const [k, v] of entries) setOne(draft, k, v);
+				for (const [k, v] of entries) {
+					const { isTransient, key } = parseName(k);
+					mirrorWriteToActiveScopes(draft, isTransient ? "transient" : "variables", key.split("."), v);
+				}
 			});
 		},
 		goto(passageName) {
-			useStoryStore.getState().navigate(passageName);
+			runWithCommittedMutations(() => useStoryStore.getState().navigate(passageName));
 		},
 		back() {
-			useStoryStore.getState().goBack();
+			runWithCommittedMutations(() => useStoryStore.getState().goBack());
 		},
 		forward() {
-			useStoryStore.getState().goForward();
+			runWithCommittedMutations(() => useStoryStore.getState().goForward());
 		},
 		restart() {
-			useStoryStore.getState().restart();
+			runWithCommittedMutations(() => useStoryStore.getState().restart());
 		},
 		save(slot, custom) {
-			return useStoryStore.getState().save(slot, custom);
+			return runWithCommittedMutations(() => useStoryStore.getState().save(slot, custom));
 		},
 		load(slot) {
 			return useStoryStore.getState().load(slot);
@@ -5670,44 +6165,27 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/Meter.tsx
-function parseArgs$1(rawArgs) {
-	const trimmed = rawArgs.trim();
+/**
+* Parse `{meter currentExpr maxExpr ["label"]}`. Arguments are separated by
+* whitespace outside string and template literals and bracket pairs; a
+* trailing standalone `"…"` or `'…'` string is the label mode, with `\"`,
+* `\'` and `\\` escapes.
+*/
+function parseMeterArgs(rawArgs) {
+	const tokens = splitTopLevel(rawArgs.trim(), isWhitespace).filter(Boolean);
 	let labelMode = "";
-	let rest = trimmed;
-	const quoteMatch = rest.match(/\s+(?:"([^"]*)"|'([^']*)')$/);
-	if (quoteMatch) {
-		labelMode = quoteMatch[1] ?? quoteMatch[2] ?? "";
-		rest = rest.slice(0, quoteMatch.index ?? rest.length).trim();
-	}
-	const exprs = splitExpressions(rest);
-	if (exprs.length < 2) throw new Error("meter requires two arguments: {meter currentExpr maxExpr}");
+	const label = tokens.length >= 2 ? readWholeQuoted(tokens[tokens.length - 1]) : null;
+	if (label !== null) {
+		labelMode = label;
+		tokens.pop();
+	}
+	if (tokens.length < 2) throw new Error("meter requires two arguments: {meter currentExpr maxExpr}");
 	return {
-		currentExpr: exprs[0],
-		maxExpr: exprs.slice(1).join(" "),
+		currentExpr: tokens[0],
+		maxExpr: tokens.slice(1).join(" "),
 		labelMode
 	};
 }
-function splitExpressions(input) {
-	const result = [];
-	let current = "";
-	let depth = 0;
-	for (let i = 0; i < input.length; i++) {
-		const ch = input[i];
-		if (ch === "(" || ch === "[") {
-			depth++;
-			current += ch;
-		} else if (ch === ")" || ch === "]") {
-			depth--;
-			current += ch;
-		} else if (/\s/.test(ch) && depth === 0 && current.length > 0) {
-			result.push(current);
-			current = "";
-			while (i + 1 < input.length && /\s/.test(input[i + 1])) i++;
-		} else current += ch;
-	}
-	if (current.length > 0) result.push(current);
-	return result;
-}
 function formatLabel(current, max, labelMode) {
 	if (labelMode === "none") return null;
 	if (labelMode === "%") return `${max === 0 ? 0 : Math.round(current / max * 100)}%`;
@@ -5720,7 +6198,7 @@ defineMacro({
 	merged: true,
 	render({ rawArgs }, ctx) {
 		try {
-			const { currentExpr, maxExpr, labelMode } = parseArgs$1(rawArgs);
+			const { currentExpr, maxExpr, labelMode } = parseMeterArgs(rawArgs);
 			const current = Number(ctx.evaluate(currentExpr));
 			const max = Number(ctx.evaluate(maxExpr));
 			const pct = max === 0 ? 0 : Math.max(0, Math.min(100, current / max * 100));
@@ -5779,6 +6257,56 @@ defineMacro({
 	}
 });
 //#endregion
+//#region src/utils/stable-key.ts
+/**
+* Content-derived string key for a value, used to remount components when
+* the value's contents change (e.g. {for} iterations, #45).
+*
+* JSON-compatible values (strings, finite numbers, booleans, null, arrays and
+* plain objects of those) produce exactly their `JSON.stringify` output. Other
+* values get distinct, unambiguous markers so their contents are reflected
+* too: Map and Set entries (nested at any depth), Date, RegExp, BigInt,
+* undefined, NaN/±Infinity, symbols, functions and registered class
+* instances. Cyclic references become a back-reference marker instead of
+* throwing, and the function never throws.
+*/
+function stableKey(value) {
+	try {
+		return keyOf(value, []);
+	} catch {
+		return "<unkeyable>";
+	}
+}
+function keyOf(val, ancestors) {
+	switch (typeof val) {
+		case "string": return JSON.stringify(val);
+		case "number": return Number.isFinite(val) ? JSON.stringify(val) : String(val);
+		case "boolean": return String(val);
+		case "bigint": return `${val}n`;
+		case "undefined": return "undefined";
+		case "symbol": return val.toString();
+		case "function": return `<function ${JSON.stringify(val.name)}>`;
+	}
+	if (val === null) return "null";
+	const obj = val;
+	const depth = ancestors.indexOf(obj);
+	if (depth !== -1) return `<cycle ${ancestors.length - depth}>`;
+	if (val instanceof Date) return `Date(${val.getTime()})`;
+	if (val instanceof RegExp) return `RegExp(${String(val)})`;
+	ancestors.push(obj);
+	try {
+		if (Array.isArray(val)) return `[${val.map((v) => keyOf(v, ancestors)).join(",")}]`;
+		if (val instanceof Map) return `Map[${[...val].map(([k, v]) => `[${keyOf(k, ancestors)},${keyOf(v, ancestors)}]`).join(",")}]`;
+		if (val instanceof Set) return `Set[${[...val].map((v) => keyOf(v, ancestors)).join(",")}]`;
+		const record = obj;
+		const body = Object.keys(record).map((k) => `${JSON.stringify(k)}:${keyOf(record[k], ancestors)}`).join(",");
+		const className = getClassName(obj.constructor);
+		return className === void 0 ? `{${body}}` : `Class(${JSON.stringify(className)}){${body}}`;
+	} finally {
+		ancestors.pop();
+	}
+}
+//#endregion
 //#region src/components/macros/For.tsx
 /**
 * Parse for-loop args: "@item, @i of $list" or "@item of $list"
@@ -5837,12 +6365,14 @@ function ForIteration({ parentValues, itemVar, itemValue, indexVar, indexValue,
 		getValues
 	}), [update, getValues]);
 	const nobr = useContext(NobrContext);
+	const inline = useContext(InlineContext);
 	return /* @__PURE__ */ jsx(LocalsUpdateContext.Provider, {
 		value: updater,
 		children: /* @__PURE__ */ jsx(LocalsValuesContext.Provider, {
 			value: localState,
 			children: renderNodes(children, {
 				nobr,
+				inline,
 				locals: localState
 			})
 		})
@@ -5886,7 +6416,7 @@ defineMacro({
 			indexVar,
 			indexValue: i,
 			children
-		}, `${i}-${JSON.stringify(item)}`));
+		}, `${i}-${stableKey(item)}`));
 		return ctx.wrap(content);
 	}
 });
@@ -5938,7 +6468,8 @@ defineMacro({
 	block: true,
 	interpolate: true,
 	render({ rawArgs, children = [] }, ctx) {
-		const label = ctx.resolve?.(rawArgs.replace(/^["']|["']$/g, "")) ?? rawArgs;
+		const text = readWholeQuoted(rawArgs.trim()) ?? rawArgs.replace(/^["']|["']$/g, "");
+		const label = ctx.resolve?.(text) ?? rawArgs;
 		const nobr = useContext(NobrContext);
 		const handleClick = () => {
 			const container = document.createElement("div");
@@ -5969,7 +6500,7 @@ function parseArgs(rawArgs) {
 	const parts = [];
 	const re = /(["'])((?:\\[^]|(?!\1)[^\\])*)\1/g;
 	let m;
-	while ((m = re.exec(rawArgs)) !== null) parts.push(m[2].replace(/\\(["'\\])/g, "$1"));
+	while ((m = re.exec(rawArgs)) !== null) parts.push(unescapeQuoted(m[2]));
 	if (parts.length >= 2) return {
 		display: parts[0],
 		passage: parts[1]
@@ -6376,7 +6907,7 @@ defineMacro({
 		const [open, setOpen] = ctx.hooks.useState(false);
 		const noclose = /\bnoclose\s*$/.test(rawArgs);
 		const labelRaw = rawArgs.replace(/\bnoclose\s*$/, "").trim();
-		const label = ctx.resolve?.(labelRaw.replace(/^["']|["']$/g, "")) ?? labelRaw;
+		const label = ctx.resolve?.(readWholeQuoted(labelRaw) ?? labelRaw.replace(/^["']|["']$/g, "")) ?? labelRaw;
 		const passageName = ctx.collectText(children).trim().replace(/^["']|["']$/g, "");
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
 			id: ctx.id,
@@ -6424,7 +6955,7 @@ function SaveManagerContent() {
 	const closeDialog = useContext(DialogCloseContext);
 	const storyData = useStoryStore((s) => s.storyData);
 	const playthroughId = useStoryStore((s) => s.playthroughId);
-	const getSavePayload = useStoryStore((s) => s.getSavePayload);
+	const beginSave = useStoryStore((s) => s.beginSave);
 	const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
 	const ifid = storyData?.ifid ?? "";
 	const refresh = useCallback(async () => {
@@ -6462,9 +6993,14 @@ function SaveManagerContent() {
 		});
 	};
 	const handleNewSave = async () => {
-		if (!ifid || !playthroughId) return;
+		if (!ifid) return;
+		const playthrough = resolvePlaythroughId();
 		try {
-			await saveWithHooks(void 0, void 0, getSavePayload, (payload) => createSave(ifid, playthroughId, payload));
+			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
+				const ptId = await playthrough;
+				if (!ptId) throw new Error("No playthrough");
+				return createSave(ifid, ptId, payload);
+			});
 			showStatus("Save created");
 			await refresh();
 		} catch {
@@ -6472,9 +7008,10 @@ function SaveManagerContent() {
 		}
 	};
 	const handleOverwrite = async (saveId) => {
+		const playthrough = resolvePlaythroughId();
 		try {
-			await saveWithHooks(void 0, void 0, getSavePayload, async (payload) => {
-				if (!await overwriteSave(saveId, payload)) throw new Error("Save not found");
+			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
+				if (!await overwriteSave(saveId, payload, void 0, await playthrough || void 0)) throw new Error("Save not found");
 			});
 			showStatus("Save overwritten");
 			await refresh();
@@ -6780,27 +7317,16 @@ var FLAG = "inline";
 */
 function parseIncludeArgs(rawArgs) {
 	const trimmed = rawArgs.trim();
+	const spaces = topLevelIndices(trimmed, isWhitespace);
 	let first = null;
 	let last = null;
-	let depth = 0;
-	let inString = null;
-	for (let i = 0; i < trimmed.length; i++) {
-		const ch = trimmed[i];
-		if (inString) {
-			if (ch === "\\") i++;
-			else if (ch === inString) inString = null;
-			continue;
-		}
-		if (ch === "\"" || ch === "'" || ch === "`") inString = ch;
-		else if (ch === "(" || ch === "[" || ch === "{") depth++;
-		else if (ch === ")" || ch === "]" || ch === "}") depth--;
-		else if (depth === 0 && /\s/.test(ch)) {
-			let end = i + 1;
-			while (end < trimmed.length && /\s/.test(trimmed[end])) end++;
-			last = [i, end];
-			first ??= last;
-			i = end - 1;
-		}
+	if (spaces.length > 0) {
+		let s = 0;
+		while (s + 1 < spaces.length && spaces[s + 1] === spaces[s] + 1) s++;
+		first = [spaces[0], spaces[s] + 1];
+		let e = spaces.length - 1;
+		while (e > 0 && spaces[e - 1] === spaces[e] - 1) e--;
+		last = [spaces[e], spaces[spaces.length - 1] + 1];
 	}
 	if (last && last[1] === trimmed.length - 6 && trimmed.endsWith(FLAG)) {
 		const rest = trimmed.slice(0, last[0]);
@@ -6979,7 +7505,10 @@ defineMacro({
 //#endregion
 //#region src/components/macros/Checkbox.tsx
 function parseLabel(rawArgs) {
-	return rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+["']?(.+?)["']?\s*$/)?.[1] ?? "";
+	const match = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+(.+?)\s*$/);
+	if (!match) return "";
+	const rest = match[1];
+	return readWholeQuoted(rest) ?? stripLooseQuotes(rest);
 }
 defineMacro({
 	name: "checkbox",
@@ -7009,6 +7538,19 @@ defineMacro({
 //#endregion
 //#region src/components/macros/Radiobutton.tsx
 function parseRadioArgs(rawArgs) {
+	const head = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+/);
+	if (head) {
+		const rest = rawArgs.slice(head[0].length).trim();
+		const value = readQuoted(rest, 0);
+		if (value && (value.end === rest.length || isWhitespace(rest[value.end]))) {
+			const labelRaw = rest.slice(value.end).trim();
+			const label = readWholeQuoted(labelRaw) ?? stripLooseQuotes(labelRaw);
+			return {
+				value: value.value,
+				label
+			};
+		}
+	}
 	const match = rawArgs.match(/^\s*["']?\$?[\w.]+["']?\s+["'](.+?)["']\s+["']?(.+?)["']?\s*$/);
 	if (!match) {
 		const parts = rawArgs.trim().split(/\s+/).slice(1);
@@ -7467,43 +8009,87 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/Watch.tsx
+var WORD_RE = /\w+/y;
+var DIGITS_RE = /\d+/y;
+/** Match the sticky regex `re` at `pos`, returning the matched text. */
+function matchAt(re, src, pos) {
+	re.lastIndex = pos;
+	return re.exec(src)?.[0] ?? null;
+}
+/**
+* Parse `{watch "condition" keyword value …}`: a quoted condition followed
+* by keyword options (`goto "X"`, `dialog "X"`, `run "X"`, `name "X"`,
+* `priority N`, `once`). Quoted strings accept `\"`, `\'` and `\\` escapes.
+* Returns `null` when the arguments do not start with a quoted condition.
+*/
+function parseWatchArgs(rawArgs) {
+	const raw = rawArgs.trim();
+	const cond = readQuoted(raw, 0);
+	if (!cond) return null;
+	const options = {};
+	let i = cond.end;
+	while (i < raw.length) {
+		const key = matchAt(WORD_RE, raw, i);
+		if (!key) {
+			i = readQuoted(raw, i)?.end ?? i + 1;
+			continue;
+		}
+		i += key.length;
+		let val;
+		let j = i;
+		while (j < raw.length && isWhitespace(raw[j])) j++;
+		if (j > i) {
+			const quoted = readQuoted(raw, j);
+			const digits = quoted ? null : matchAt(DIGITS_RE, raw, j);
+			if (quoted) {
+				val = quoted.value;
+				i = quoted.end;
+			} else if (digits) {
+				val = digits;
+				i = j + digits.length;
+			}
+		}
+		switch (key) {
+			case "goto":
+				options.goto = val;
+				break;
+			case "dialog":
+				options.dialog = val;
+				break;
+			case "run":
+				options.run = val;
+				break;
+			case "name":
+				options.name = val;
+				break;
+			case "priority":
+				options.priority = val ? Number(val) : 0;
+				break;
+			case "once":
+				options.once = true;
+				break;
+		}
+	}
+	return {
+		condition: cond.value,
+		options
+	};
+}
+/**
+* Parse the watcher name of `{unwatch "name"}`: a quoted string, with the
+* same escapes as `{watch}`, or a bare name.
+*/
+function parseUnwatchName(rawArgs) {
+	const raw = rawArgs.trim();
+	return readWholeQuoted(raw) ?? raw.replace(/^['"]|['"]$/g, "");
+}
 defineMacro({
 	name: "watch",
 	render(props, ctx) {
 		const { hooks } = ctx;
-		const raw = props.rawArgs.trim();
-		const condMatch = raw.match(/^(['"])(.*?)\1\s*/);
-		if (!condMatch) return null;
-		const condition = condMatch[2];
-		const rest = raw.slice(condMatch[0].length);
-		const options = {};
-		const kwRe = /(\w+)\s+(?:"([^"]*?)"|'([^']*?)'|(\d+))|(\w+)/g;
-		let m;
-		while ((m = kwRe.exec(rest)) !== null) {
-			const key = m[1] ?? m[5];
-			const val = m[2] ?? m[3] ?? m[4];
-			if (!key) continue;
-			switch (key) {
-				case "goto":
-					options.goto = val;
-					break;
-				case "dialog":
-					options.dialog = val;
-					break;
-				case "run":
-					options.run = val;
-					break;
-				case "name":
-					options.name = val;
-					break;
-				case "priority":
-					options.priority = val ? Number(val) : 0;
-					break;
-				case "once":
-					options.once = true;
-					break;
-			}
-		}
+		const parsed = parseWatchArgs(props.rawArgs);
+		if (!parsed) return null;
+		const { condition, options } = parsed;
 		const registered = hooks.useRef(false);
 		if (!registered.current) {
 			registered.current = true;
@@ -7515,7 +8101,7 @@ defineMacro({
 defineMacro({
 	name: "unwatch",
 	render(props, ctx) {
-		const name = props.rawArgs.trim().replace(/^['"]|['"]$/g, "");
+		const name = parseUnwatchName(props.rawArgs);
 		const ran = ctx.hooks.useRef(false);
 		if (!ran.current) {
 			ran.current = true;