@rohal12/spindle 0.50.0 → 0.50.1

package/dist/pkg/headless.js

@@ -43,13 +43,25 @@ function isSavePayload(value) {
 //#region src/markup/tokenizer.ts
 /** Tag name must start with a letter (covers standard and custom elements). */
 var VALID_TAG_START = /[a-zA-Z]/;
+/** HTML void elements: never have children or a closing tag. */
 var HTML_VOID_TAGS = new Set([
+	"area",
+	"base",
 	"br",
 	"col",
+	"embed",
 	"hr",
 	"img",
+	"input",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
 	"wbr"
 ]);
+/** Macros whose body is JavaScript source, kept verbatim instead of tokenized. */
+var RAW_BODY_MACROS = new Set(["do"]);
 /**
 * Parse a Twine link interior into display and target.
 * Supports: display|target, display->target, target<-display, plain
@@ -154,11 +166,14 @@ function parseHtmlAttributes(input, j) {
 				const quote = input[j];
 				j++;
 				const valStart = j;
-				let braceDepth = 0;
 				while (j < input.length) {
-					if (input[j] === "{") braceDepth++;
-					else if (input[j] === "}") braceDepth--;
-					else if (input[j] === quote && braceDepth <= 0) break;
+					if (input[j] === "{") {
+						const closeIdx = scanBalancedBrace(input, j + 1);
+						if (closeIdx !== -1) {
+							j = closeIdx + 1;
+							continue;
+						}
+					} else if (input[j] === quote) break;
 					j++;
 				}
 				attributes[attrName] = input.slice(valStart, j);
@@ -176,17 +191,74 @@ function parseHtmlAttributes(input, j) {
 	};
 }
 /**
+* Skip a '…' or "…" string literal opening at i.
+* Returns the index just past the closing quote, or -1 if the string is
+* not closed on the same line (JS strings can't span lines unescaped).
+*/
+function skipQuoted(input, i) {
+	const quote = input[i];
+	let j = i + 1;
+	while (j < input.length) {
+		const c = input[j];
+		if (c === "\\") j += 2;
+		else if (c === quote) return j + 1;
+		else if (c === "\n") return -1;
+		else j++;
+	}
+	return -1;
+}
+/**
+* Skip a `…` template literal opening at i, including ${…} parts.
+* Returns the index just past the closing backtick, or -1 if unclosed.
+*/
+function skipTemplate(input, i) {
+	let j = i + 1;
+	while (j < input.length) {
+		const c = input[j];
+		if (c === "\\") j += 2;
+		else if (c === "`") return j + 1;
+		else if (c === "$" && input[j + 1] === "{") {
+			const closeIdx = scanBalancedBrace(input, j + 2);
+			if (closeIdx === -1) return -1;
+			j = closeIdx + 1;
+		} else j++;
+	}
+	return -1;
+}
+/**
+* A quote directly after a letter/digit is an apostrophe (don't), not a
+* string; after a backslash it is an escaped attribute delimiter (\").
+*/
+var NON_STRING_QUOTE_PREFIX = /[\p{L}\p{N}_\\]/u;
+/**
 * Scan for the balanced closing } starting at position i (just past the {).
+* Braces inside string and template literals are ignored. A quote that
+* can't start a string (apostrophe, escaped, unterminated) counts as text.
 * Returns the index of the closing } or -1 if unbalanced.
 */
 function scanBalancedBrace(input, i) {
 	let depth = 1;
-	while (i < input.length && depth > 0) {
-		if (input[i] === "{") depth++;
-		else if (input[i] === "}") depth--;
-		if (depth > 0) i++;
+	while (i < input.length) {
+		const c = input[i];
+		if (c === "{") depth++;
+		else if (c === "}") {
+			if (--depth === 0) return i;
+		} else if ((c === "\"" || c === "'") && !(i > 0 && NON_STRING_QUOTE_PREFIX.test(input[i - 1]))) {
+			const end = skipQuoted(input, i);
+			if (end !== -1) {
+				i = end;
+				continue;
+			}
+		} else if (c === "`") {
+			const end = skipTemplate(input, i);
+			if (end !== -1) {
+				i = end;
+				continue;
+			}
+		}
+		i++;
 	}
-	return depth === 0 ? i : -1;
+	return -1;
 }
 /**
 * Single-pass tokenizer for Twine passage content.
@@ -204,6 +276,31 @@ function tokenize(input) {
 			end
 		});
 	}
+	/**
+	* After an opening raw-body macro ({do}), emit everything up to the
+	* first {/name} as a single text token so JavaScript source is not
+	* parsed as markup. A literal "{/do}" inside the code would end it early.
+	* Without a closer, nothing is consumed and the AST builder reports it.
+	*/
+	function consumeRawBody(name, isClose) {
+		const lower = name.toLowerCase();
+		if (isClose || !RAW_BODY_MACROS.has(lower)) return;
+		const closeRe = new RegExp(`\\{/${lower}\\s*\\}`, "gi");
+		closeRe.lastIndex = i;
+		const m = closeRe.exec(input);
+		if (!m) return;
+		const closeStart = m.index;
+		const closeEnd = closeStart + m[0].length;
+		flushText(closeStart);
+		tokens.push({
+			type: "macro",
+			...parseMacroContent(input.slice(closeStart + 1, closeEnd - 1)),
+			start: closeStart,
+			end: closeEnd
+		});
+		i = closeEnd;
+		textStart = closeEnd;
+	}
 	while (i < input.length) {
 		if (input[i] === "\\" && (input[i + 1] === "{" || input[i + 1] === "}")) {
 			flushText(i);
@@ -435,21 +532,15 @@ function tokenize(input) {
 					continue;
 				}
 				if (charAfter !== void 0 && /[a-zA-Z]/.test(charAfter)) {
-					i = afterSelectors;
-					let depth = 1;
-					const contentStart = i;
-					while (i < input.length && depth > 0) {
-						if (input[i] === "{") depth++;
-						else if (input[i] === "}") depth--;
-						if (depth > 0) i++;
-					}
-					if (depth !== 0) {
+					const contentStart = afterSelectors;
+					const closeIdx = scanBalancedBrace(input, contentStart);
+					if (closeIdx === -1) {
 						i = start + 1;
 						textStart = start;
 						continue;
 					}
-					const content = input.slice(contentStart, i);
-					i++;
+					const content = input.slice(contentStart, closeIdx);
+					i = closeIdx + 1;
 					const { name, rawArgs, isClose } = parseMacroContent(content);
 					const token = {
 						type: "macro",
@@ -463,6 +554,7 @@ function tokenize(input) {
 					if (id) token.id = id;
 					tokens.push(token);
 					textStart = i;
+					consumeRawBody(name, isClose);
 					continue;
 				}
 				i = start + 1;
@@ -611,21 +703,15 @@ function tokenize(input) {
 			}
 			if (nextChar !== void 0 && (nextChar === "/" || /[a-zA-Z]/.test(nextChar))) {
 				flushText(i);
-				i++;
-				let depth = 1;
-				const contentStart = i;
-				while (i < input.length && depth > 0) {
-					if (input[i] === "{") depth++;
-					else if (input[i] === "}") depth--;
-					if (depth > 0) i++;
-				}
-				if (depth !== 0) {
+				const contentStart = i + 1;
+				const closeIdx = scanBalancedBrace(input, contentStart);
+				if (closeIdx === -1) {
 					i = start + 1;
 					textStart = start;
 					continue;
 				}
-				const content = input.slice(contentStart, i);
-				i++;
+				const content = input.slice(contentStart, closeIdx);
+				i = closeIdx + 1;
 				const { name, rawArgs, isClose } = parseMacroContent(content);
 				tokens.push({
 					type: "macro",
@@ -636,6 +722,7 @@ function tokenize(input) {
 					end: i
 				});
 				textStart = i;
+				consumeRawBody(name, isClose);
 				continue;
 			}
 			i++;
@@ -655,6 +742,11 @@ function tokenize(input) {
 				if (input[j] === ">") {
 					j++;
 					flushText(start);
+					if (HTML_VOID_TAGS.has(tagLower)) {
+						textStart = j;
+						i = j;
+						continue;
+					}
 					tokens.push({
 						type: "html",
 						tag,
@@ -1302,14 +1394,8 @@ function interpolate(template, variables, temporary, locals, transient = {}) {
 			result += "{";
 			continue;
 		}
-		let depth = 1;
-		let j = i;
-		while (j < template.length && depth > 0) {
-			j++;
-			if (template[j] === "{") depth++;
-			else if (template[j] === "}") depth--;
-		}
-		if (depth !== 0) {
+		const j = scanBalancedBrace(template, i);
+		if (j === -1) {
 			result += "{";
 			continue;
 		}
@@ -1515,6 +1601,10 @@ function WidgetBody({ body, parentValues, ownKeys }) {
 	valuesRef.current = localState;
 	const getValues = useCallback(() => valuesRef.current, []);
 	const update = useCallback((key, value) => {
+		valuesRef.current = {
+			...valuesRef.current,
+			[key]: value
+		};
 		setLocalMutations((prev) => ({
 			...prev,
 			[key]: value
@@ -1705,13 +1795,48 @@ var INLINE_ELEMENTS = new Set([
 	"var",
 	"wbr"
 ]);
+/**
+* HTML boolean attributes. Their presence means "on", but a parsed bare or
+* `=""` attribute has the value '', which Preact would assign to the DOM
+* property as a falsy value — so present ones are passed as `true` (#177).
+*/
+var BOOLEAN_ATTRIBUTES = new Set([
+	"allowfullscreen",
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]);
+function isPresentBooleanAttribute(name, value) {
+	return value === "" && BOOLEAN_ATTRIBUTES.has(name.toLowerCase());
+}
 function HtmlNodeRenderer({ node }) {
 	const resolve = useInterpolate();
 	const nobr = useContext(NobrContext);
 	const locals = useContext(LocalsValuesContext);
 	const inSvg = useContext(SvgContext);
 	const attrs = {};
-	for (const [k, v] of Object.entries(node.attributes)) attrs[k] = resolve(v) ?? v;
+	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, {
@@ -1735,6 +1860,23 @@ function ChildrenSlot() {
 		locals
 	}) });
 }
+/**
+* Stable per-node keys. Keying rendered children by AST node identity (not
+* by position) makes Preact remount components when different content
+* occupies the same slot — e.g. when an {if}/{switch} branch or an included
+* passage changes — so mount-only macros like {set} and {do} run for the new
+* content, while re-rendering the same AST keeps existing instances (#175).
+*/
+var nodeKeys = /* @__PURE__ */ new WeakMap();
+var nextNodeKey = 0;
+function nodeKey(node) {
+	let key = nodeKeys.get(node);
+	if (key === void 0) {
+		key = `n${nextNodeKey++}`;
+		nodeKeys.set(node, key);
+	}
+	return key;
+}
 function renderMacro(node, key) {
 	if (isSubMacro(node.name)) return null;
 	const widget = getWidget(node.name);
@@ -1760,9 +1902,10 @@ function renderMacro(node, key) {
 /**
 * Render a non-text AST node to a Preact element.
 */
-function renderSingleNode(node, key) {
+function renderSingleNode(node) {
+	if (node.type === "text") return node.value;
+	const key = nodeKey(node);
 	switch (node.type) {
-		case "text": return node.value;
 		case "variable":
 			if (node.scope === "local" && node.name === "children") return /* @__PURE__ */ jsx(ChildrenSlot, {}, key);
 			return /* @__PURE__ */ jsx(VarDisplay, {
@@ -1788,7 +1931,7 @@ function renderSingleNode(node, key) {
 */
 function renderInlineNodes(nodes) {
 	if (nodes.length === 0) return null;
-	return nodes.map((node, i) => renderSingleNode(node, i));
+	return nodes.map((node) => renderSingleNode(node));
 }
 function hasUnclosedBacktick(s) {
 	let count = 0;
@@ -1814,8 +1957,10 @@ function getVariableTextValue(node, locals) {
 * Characters/patterns that trigger CommonMark or GFM transformations.
 * Any match → fall through to the full micromark pipeline.
 * False positives (e.g. `-` used as text, not list) just use the slower path.
+* Includes character references (`&amp;`, `&#123;`) and two-space hard line
+* breaks, which micromark decodes / turns into <br> (#171).
 */
-var MARKDOWN_SYNTAX_RE = /[*_`#|~\[>\\\-+=]|!\[|\d+\./;
+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>$/;
@@ -1847,7 +1992,7 @@ function buildPlainTextVnodes(combined, components, nobr) {
 */
 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, i) => renderSingleNode(node, i));
+	if (!nodes.some((n) => n.type === "text" && (n.value.trim() !== "" || /\n\s*\n/.test(n.value)))) return nodes.map((node) => renderSingleNode(node));
 	const components = [];
 	let combined = "";
 	const locals = options?.locals ?? {};
@@ -1857,7 +2002,7 @@ function renderNodes(nodes, options) {
 		else if (node.type === "variable" && hasUnclosedBacktick(combined)) combined += getVariableTextValue(node, locals);
 		else {
 			const phIdx = components.length;
-			components.push(renderSingleNode(node, i));
+			components.push(renderSingleNode(node));
 			combined += `<span data-tw="${phIdx}"></span>`;
 		}
 	}
@@ -2374,6 +2519,7 @@ function deserialize(value) {
 			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 = {};
@@ -2383,6 +2529,54 @@ function deserialize(value) {
 	return deser(value);
 }
 //#endregion
+//#region src/event-emitter.ts
+var VALID_EVENTS = new Set([
+	"storyinit",
+	"beforerestart",
+	"actionsChanged",
+	"variableChanged",
+	"beforesave",
+	"aftersave",
+	"beforeload",
+	"afterload",
+	"beforenavigate",
+	"afternavigate",
+	"passagerender",
+	"dialogrender"
+]);
+var listeners = /* @__PURE__ */ new Map();
+function on(event, cb) {
+	if (!VALID_EVENTS.has(event)) throw new Error(`spindle: Unknown event "${event}".`);
+	let set = listeners.get(event);
+	if (!set) {
+		set = /* @__PURE__ */ new Set();
+		listeners.set(event, set);
+	}
+	set.add(cb);
+	return () => {
+		set.delete(cb);
+	};
+}
+function emit(event, ...args) {
+	const set = listeners.get(event);
+	if (!set) return;
+	for (const cb of [...set]) cb(...args);
+}
+/**
+* Emit an event from inside a render commit (layout effect). A throwing
+* handler is logged instead of propagating into Preact and breaking the
+* render; the remaining handlers still run.
+*/
+function emitFromRender(event, ...args) {
+	const set = listeners.get(event);
+	if (!set) return;
+	for (const cb of [...set]) try {
+		cb(...args);
+	} catch (err) {
+		console.error(`spindle: Error in ${event} handler:`, err);
+	}
+}
+//#endregion
 //#region src/saves/save-manager.ts
 var titleGenerator = null;
 var saveTitlePassageContent = null;
@@ -2429,6 +2623,19 @@ async function startNewPlaythrough(ifid) {
 async function getCurrentPlaythroughId(ifid) {
 	return (await getBackend()).getMeta(`currentPlaythroughId.${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.
+*/
+function saveWithHooks(slot, custom, getPayload, write) {
+	emit("beforesave", slot, custom);
+	return write(getPayload()).then((result) => {
+		emit("aftersave", slot);
+		return result;
+	});
+}
 async function createSave(ifid, playthroughId, payload, custom = {}) {
 	const now = (/* @__PURE__ */ new Date()).toISOString();
 	const meta = {
@@ -2481,16 +2688,25 @@ async function overwriteSave(saveId, payload, custom) {
 	await backend.putSave(updated);
 	return updated;
 }
+/**
+* Turn a stored (serialized) payload into a live one, restoring class
+* instances and built-ins. Returns a new payload; the stored one is left
+* untouched. Payloads handed to the store's `loadFromPayload()` must be live.
+*/
+function deserializePayload(payload) {
+	return {
+		...payload,
+		variables: deserialize(payload.variables),
+		history: payload.history.map((m) => ({
+			...m,
+			variables: deserialize(m.variables)
+		}))
+	};
+}
 async function loadSave(saveId) {
 	const record = await (await getBackend()).getSave(saveId);
 	if (!record) return void 0;
-	const payload = record.payload;
-	payload.variables = deserialize(payload.variables);
-	payload.history = payload.history.map((m) => ({
-		...m,
-		variables: deserialize(m.variables)
-	}));
-	return payload;
+	return deserializePayload(record.payload);
 }
 async function deleteSaveById(saveId) {
 	await (await getBackend()).deleteSave(saveId);
@@ -2545,20 +2761,51 @@ async function getSavesGrouped(ifid) {
 var AUTOSAVE_KEY_PREFIX = "autosave.";
 var SLOT_KEY_PREFIX = "slot.";
 var SLOT_INDEX_KEY_PREFIX = "slotIndex.";
+/**
+* Whether `slot` names a slot. The default (autosave) slot is addressed by
+* omitting `slot` or by `''`, the identifier its SaveInfo reports.
+*/
+function isNamedSlot(slot) {
+	return slot != null && slot !== "";
+}
 function slotMetaKey(ifid, slot) {
-	return slot != null ? `${SLOT_KEY_PREFIX}${slot}.${ifid}` : `${AUTOSAVE_KEY_PREFIX}${ifid}`;
+	return isNamedSlot(slot) ? `${SLOT_KEY_PREFIX}${slot}.${ifid}` : `${AUTOSAVE_KEY_PREFIX}${ifid}`;
+}
+/** Tail of the queue that serializes slot index updates. */
+var slotIndexQueue = Promise.resolve();
+/**
+* Read-modify-write the per-story slot index. Updates are queued so that
+* concurrent saves, imports and deletes can't overwrite each other's change.
+*/
+function updateSlotIndex(ifid, update) {
+	const run = slotIndexQueue.then(async () => {
+		const backend = await getBackend();
+		const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
+		const existing = await backend.getMeta(indexKey) ?? [];
+		const updated = update(existing);
+		if (updated !== existing) await backend.setMeta(indexKey, updated);
+	});
+	slotIndexQueue = run.catch(() => {});
+	return run;
 }
 /** Record a named slot in the per-story slot index (no-op for the default slot). */
-async function addToSlotIndex(ifid, slot) {
-	if (slot == null) return;
-	const backend = await getBackend();
+function addToSlotIndex(ifid, slot) {
+	if (!isNamedSlot(slot)) return Promise.resolve();
+	return updateSlotIndex(ifid, (slots) => slots.includes(slot) ? slots : [...slots, slot]);
+}
+/** Remove a named slot from the per-story slot index (no-op for the default slot). */
+function removeFromSlotIndex(ifid, slot) {
+	if (!isNamedSlot(slot)) return Promise.resolve();
+	return updateSlotIndex(ifid, (slots) => slots.filter((s) => s !== slot));
+}
+/** Named slots in the per-story slot index. */
+async function getIndexedSlots(ifid) {
 	const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-	const existing = await backend.getMeta(indexKey) ?? [];
-	if (!existing.includes(slot)) await backend.setMeta(indexKey, [...existing, slot]);
+	return (await (await getBackend()).getMeta(indexKey) ?? []).filter(isNamedSlot);
 }
 function toSaveInfo(record, slot) {
 	return {
-		slot: slot ?? "",
+		slot: isNamedSlot(slot) ? slot : "",
 		title: record.meta.title,
 		passage: record.meta.passage,
 		createdAt: record.meta.createdAt,
@@ -2575,8 +2822,8 @@ async function quickSave(ifid, playthroughId, payload, slot, custom) {
 		if (updated) return updated;
 	}
 	const record = await createSave(ifid, playthroughId, payload, {
-		isAutosave: !slot,
-		...slot != null ? { slot } : {},
+		isAutosave: !isNamedSlot(slot),
+		...isNamedSlot(slot) ? { slot } : {},
 		...custom
 	});
 	await backend.setMeta(metaKey, record.meta.id);
@@ -2603,9 +2850,7 @@ async function loadQuickSave(ifid, slot) {
 async function populateKnownSaves(ifid) {
 	const result = {};
 	if (await hasQuickSave(ifid)) result[""] = true;
-	const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-	const slots = await (await getBackend()).getMeta(indexKey) ?? [];
-	for (const slot of slots) if (await hasQuickSave(ifid, slot)) result[slot] = true;
+	for (const slot of await getIndexedSlots(ifid)) if (await hasQuickSave(ifid, slot)) result[slot] = true;
 	return result;
 }
 /**
@@ -2628,9 +2873,7 @@ async function listSlotSaves(ifid) {
 	const result = [];
 	const defaultInfo = await getSlotSaveInfo(ifid);
 	if (defaultInfo) result.push(defaultInfo);
-	const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-	const slots = await (await getBackend()).getMeta(indexKey) ?? [];
-	for (const slot of slots) {
+	for (const slot of await getIndexedSlots(ifid)) {
 		const info = await getSlotSaveInfo(ifid, slot);
 		if (info) result.push(info);
 	}
@@ -2646,11 +2889,7 @@ async function deleteSlotSave(ifid, slot) {
 	if (!existingId) return;
 	await backend.deleteSave(existingId);
 	await backend.deleteMeta(metaKey);
-	if (slot != null) {
-		const indexKey = `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-		const updated = (await backend.getMeta(indexKey) ?? []).filter((s) => s !== slot);
-		await backend.setMeta(indexKey, updated);
-	}
+	await removeFromSlotIndex(ifid, slot);
 }
 var SESSION_KEY_PREFIX = "spindle.session.";
 /**
@@ -2668,13 +2907,7 @@ function loadSession(ifid) {
 		if (!raw) return void 0;
 		const parsed = JSON.parse(raw);
 		if (!isSavePayload(parsed)) return void 0;
-		const payload = parsed;
-		payload.variables = deserialize(payload.variables);
-		payload.history = payload.history.map((m) => ({
-			...m,
-			variables: deserialize(m.variables)
-		}));
-		return payload;
+		return deserializePayload(parsed);
 	} catch {
 		return;
 	}
@@ -2742,8 +2975,8 @@ async function importSlotSave(data, ifid, slot) {
 	const { slot: _exportedSlot, ...custom } = record.meta.custom ?? {};
 	record.meta.custom = {
 		...custom,
-		isAutosave: !slot,
-		...slot != null ? { slot } : {}
+		isAutosave: !isNamedSlot(slot),
+		...isNamedSlot(slot) ? { slot } : {}
 	};
 	const backend = await getBackend();
 	const metaKey = slotMetaKey(ifid, slot);
@@ -2807,12 +3040,26 @@ async function deletePlaythroughData(ifid, playthroughId) {
 }
 //#endregion
 //#region src/story-init.ts
+/** Hidden container holding the currently mounted StoryInit tree. */
+var storyInitContainer = null;
+/**
+* Unmount the current StoryInit tree (running its effect cleanups, e.g.
+* pending {timed}/{repeat} timers) and remove its container.
+*/
+function unmountStoryInit() {
+	if (!storyInitContainer) return;
+	render(null, storyInitContainer);
+	storyInitContainer.remove();
+	storyInitContainer = null;
+}
 /**
 * Execute the StoryInit passage: tokenize, parse, and render all macros
 * into a detached DOM node so their side effects fire through the normal
 * Preact pipeline. This is macro-agnostic — any macro works in StoryInit.
+* Re-executing (on restart) first unmounts the previous StoryInit tree.
 */
 function executeStoryInit() {
+	unmountStoryInit();
 	const state = useStoryStore.getState();
 	if (!state.storyData) return;
 	const storyInit = state.storyData.passages.get("StoryInit");
@@ -2821,58 +3068,67 @@ function executeStoryInit() {
 		const container = document.createElement("div");
 		container.style.display = "none";
 		document.body.appendChild(container);
+		storyInitContainer = container;
 		render(h(() => renderNodes(ast), null), container);
+		recordStoryInitState();
 	}
 	const saveTitlePassage = state.storyData.passages.get("SaveTitle");
 	if (saveTitlePassage) setSaveTitlePassage(saveTitlePassage.content);
 }
 //#endregion
-//#region src/event-emitter.ts
-var VALID_EVENTS = new Set([
-	"storyinit",
-	"beforerestart",
-	"actionsChanged",
-	"variableChanged",
-	"beforesave",
-	"aftersave",
-	"beforeload",
-	"afterload",
-	"beforenavigate",
-	"afternavigate",
-	"passagerender",
-	"dialogrender"
-]);
-var listeners = /* @__PURE__ */ new Map();
-function on(event, cb) {
-	if (!VALID_EVENTS.has(event)) throw new Error(`spindle: Unknown event "${event}".`);
-	let set = listeners.get(event);
-	if (!set) {
-		set = /* @__PURE__ */ new Set();
-		listeners.set(event, set);
+//#region src/execute-mutation.ts
+/**
+* Structural equality for a deepClone() copy against its source. Lets
+* executeMutation write back only the variables the code actually changed,
+* so untouched clones don't overwrite updates made during execution
+* (e.g. Story.set called from inside {do}).
+*/
+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 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;
 	}
-	set.add(cb);
-	return () => {
-		set.delete(cb);
-	};
-}
-function emit(event, ...args) {
-	const set = listeners.get(event);
-	if (!set) return;
-	for (const cb of [...set]) cb(...args);
+	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;
 }
 /**
-* Emit an event from inside a render commit (layout effect). A throwing
-* handler is logged instead of propagating into Preact and breaking the
-* render; the remaining handlers still run.
+* 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.
 */
-function emitFromRender(event, ...args) {
-	const set = listeners.get(event);
-	if (!set) return;
-	for (const cb of [...set]) try {
-		cb(...args);
-	} catch (err) {
-		console.error(`spindle: Error in ${event} handler:`, err);
-	}
+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 executeMutation(code, mergedLocals, scopeUpdate) {
+	const state = useStoryStore.getState();
+	const vars = deepClone(state.variables);
+	const temps = deepClone(state.temporary);
+	const trans = deepClone(state.transient);
+	const localsClone = { ...mergedLocals };
+	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);
+	});
+	for (const key of Object.keys(localsClone)) if (localsClone[key] !== mergedLocals[key]) scopeUpdate(key, localsClone[key]);
+	for (const key of Object.keys(mergedLocals)) if (!(key in localsClone)) scopeUpdate(key, void 0);
 }
 //#endregion
 //#region src/triggers.ts
@@ -2890,7 +3146,7 @@ function evalCondition(condition) {
 		return false;
 	}
 }
-function addTrigger(condition, callbackOrOptions) {
+function registerTrigger(condition, callbackOrOptions, macroKey) {
 	const id = nextId++;
 	const isCallback = typeof callbackOrOptions === "function";
 	const options = isCallback ? void 0 : callbackOrOptions;
@@ -2902,7 +3158,8 @@ function addTrigger(condition, callbackOrOptions) {
 		callback,
 		options,
 		lastResult: evalCondition(condition),
-		priority: options?.priority ?? 0
+		priority: options?.priority ?? 0,
+		macroKey
 	};
 	triggers.push(trigger);
 	triggers.sort((a, b) => b.priority - a.priority);
@@ -2910,6 +3167,22 @@ function addTrigger(condition, callbackOrOptions) {
 		triggers = triggers.filter((t) => t.id !== id);
 	};
 }
+function addTrigger(condition, callbackOrOptions) {
+	return registerTrigger(condition, callbackOrOptions);
+}
+/**
+* Register the watcher of a {watch} macro. Watchers outlive the passage
+* that declared them, and that passage mounts its macros again on every
+* visit (and on re-renders that remount them), so an identical watcher
+* (same condition and options) that is still registered is kept instead
+* of being added a second time.
+*/
+function addMacroTrigger(condition, options) {
+	const sortedOptions = Object.fromEntries(Object.entries(options).sort(([a], [b]) => a < b ? -1 : 1));
+	const macroKey = JSON.stringify([condition, sortedOptions]);
+	if (triggers.some((t) => t.macroKey === macroKey)) return;
+	registerTrigger(condition, options, macroKey);
+}
 function removeTrigger(name) {
 	triggers = triggers.filter((t) => t.name !== name);
 }
@@ -2920,9 +3193,10 @@ function fireTrigger(trigger) {
 		return;
 	}
 	if (!options) return;
-	if (options.run) {
-		const state = useStoryStore.getState();
-		execute(options.run, state.variables, state.temporary);
+	if (options.run) try {
+		executeMutation(options.run, {}, () => {});
+	} catch (err) {
+		console.error(`spindle: Error in watch run action for "${trigger.condition}":`, err);
 	}
 	if (options.dialog) {
 		dialogQueue.push({ passageName: options.dialog });
@@ -2931,30 +3205,77 @@ function fireTrigger(trigger) {
 	if (options.goto) useStoryStore.getState().navigate(options.goto);
 }
 var MAX_RECHECK_DEPTH = 10;
+function runCheckLoop() {
+	for (let depth = 0; depth < MAX_RECHECK_DEPTH; depth++) {
+		let anyFired = false;
+		const current = [...triggers];
+		for (const trigger of current) {
+			if (!triggers.includes(trigger)) continue;
+			const result = evalCondition(trigger.condition);
+			const wasFalse = !trigger.lastResult;
+			trigger.lastResult = result;
+			if (result && wasFalse) {
+				anyFired = true;
+				if (trigger.options?.once) triggers = triggers.filter((t) => t.id !== trigger.id);
+				fireTrigger(trigger);
+			}
+		}
+		if (!anyFired) break;
+	}
+}
 function checkTriggers() {
 	if (checking) return;
 	checking = true;
 	try {
-		for (let depth = 0; depth < MAX_RECHECK_DEPTH; depth++) {
-			let anyFired = false;
-			const current = [...triggers];
-			for (const trigger of current) {
-				if (!triggers.includes(trigger)) continue;
-				const result = evalCondition(trigger.condition);
-				const wasFalse = !trigger.lastResult;
-				trigger.lastResult = result;
-				if (result && wasFalse) {
-					anyFired = true;
-					if (trigger.options?.once) triggers = triggers.filter((t) => t.id !== trigger.id);
-					fireTrigger(trigger);
-				}
-			}
-			if (!anyFired) break;
-		}
+		runCheckLoop();
 	} finally {
 		checking = false;
 	}
 }
+/** Number of live connectTriggersToStore() subscriptions. */
+var connections = 0;
+/**
+* Check watchers against a navigation that navigate() has just completed.
+* Called by the store before it records the entered moment, so run actions
+* become part of that moment. Runs even when the navigation itself came
+* from a watcher (a check already in progress), since that check started
+* before the navigation and cannot see it.
+*/
+function checkTriggersOnNavigation() {
+	if (connections === 0) return;
+	const wasChecking = checking;
+	checking = true;
+	try {
+		runCheckLoop();
+	} finally {
+		checking = wasChecking;
+	}
+}
+/**
+* Re-evaluate watchers whenever a namespace their conditions can read
+* ($variables, _temporary, %transient) changes. Navigation is left to the
+* store: navigate() checks watchers once the new moment is complete
+* (checkTriggersOnNavigation), while history traversal and loads
+* reinitialize watcher state instead of firing.
+*/
+function connectTriggersToStore() {
+	let prev = useStoryStore.getState();
+	connections++;
+	const unsubscribe = useStoryStore.subscribe((state) => {
+		const before = prev;
+		prev = state;
+		if (state.navigationId !== before.navigationId) return;
+		if (state.variables === before.variables && state.temporary === before.temporary && state.transient === before.transient) return;
+		checkTriggers();
+	});
+	let connected = true;
+	return () => {
+		if (!connected) return;
+		connected = false;
+		connections--;
+		unsubscribe();
+	};
+}
 function reinitTriggerState() {
 	for (const trigger of triggers) trigger.lastResult = evalCondition(trigger.condition);
 }
@@ -3047,6 +3368,15 @@ function computeVarPatches(prev, curr) {
 		inverse: clonePatches(inverse)
 	};
 }
+/**
+* Replace the variable snapshot recorded for the newest history moment
+* (e.g. with changes made by watchers reacting to the navigation into it).
+*/
+function rerecordNewestMoment(vars) {
+	const last = patchEntries.length - 1;
+	if (last < 0) variableBase = vars;
+	else patchEntries[last] = computeVarPatches(reconstructVarsAt(last), vars);
+}
 /** Reconstruct variables at a given history moment by replaying patches. */
 function reconstructVarsAt(index) {
 	let vars = variableBase;
@@ -3070,15 +3400,12 @@ function persistSession(get) {
 		let vars = variableBase;
 		for (let i = 0; i < history.length; i++) {
 			if (i > 0) vars = applyPatches(vars, patchEntries[i - 1].forward);
-			if (i >= serializedHistory.length) {
-				const v = i === history.length - 1 ? variables : vars;
-				serializedHistory[i] = {
-					passage: history[i].passage,
-					variables: serialize(v),
-					timestamp: history[i].timestamp,
-					prng: history[i].prng
-				};
-			}
+			if (i >= serializedHistory.length) serializedHistory[i] = {
+				passage: history[i].passage,
+				variables: serialize(vars),
+				timestamp: history[i].timestamp,
+				prng: history[i].prng
+			};
 		}
 	}
 	saveSession(storyData.ifid, {
@@ -3091,6 +3418,10 @@ function persistSession(get) {
 		prng: snapshotPRNG()
 	});
 }
+/** True while navigate() lets watchers react to the moment it entered. */
+var navigationTriggerPhase = false;
+/** Navigations requested during the trigger phase, run once it is over. */
+var deferredNavigations = [];
 /** Reset all module-level state (called on init, restart, loadFromPayload). */
 function resetModuleState(base) {
 	variableBase = base;
@@ -3098,6 +3429,24 @@ function resetModuleState(base) {
 	lastNavigationVars = base;
 	serializedHistory = [];
 }
+/**
+* Record the state StoryInit left behind as the start moment: its variable
+* snapshot (the history base) and PRNG state. Called by executeStoryInit()
+* after the StoryInit passage has rendered; init()/restart() record the
+* start moment before StoryInit runs. A no-op once the story has moved on.
+*/
+function recordStoryInitState() {
+	const { history, historyIndex, variables } = useStoryStore.getState();
+	if (history.length !== 1 || historyIndex !== 0) return;
+	variableBase = variables;
+	patchEntries = [];
+	lastNavigationVars = variables;
+	serializedHistory = [];
+	const prng = snapshotPRNG();
+	useStoryStore.setState((state) => {
+		state.history[0].prng = prng;
+	});
+}
 var runtimeUnsubs = [];
 var inRuntimePhase = false;
 /**
@@ -3121,6 +3470,20 @@ function cleanupRuntimeHandlers() {
 function normalizeHotkey(key) {
 	return typeof key === "string" && key !== "" ? key : null;
 }
+/**
+* The history moment whose entry snapshot a load restores: the moment at
+* `historyIndex`, provided it is in range and belongs to the saved passage.
+* Otherwise (malformed or foreign payloads) the load falls back to the
+* payload's live variables.
+*/
+function loadedEntryMoment(payload) {
+	const { history, historyIndex } = payload;
+	if (!Number.isInteger(historyIndex)) return void 0;
+	const moment = history[historyIndex];
+	if (!moment || moment.passage !== payload.passage) return void 0;
+	if (typeof moment.variables !== "object" || moment.variables === null) return;
+	return moment;
+}
 /** Restore or reset PRNG from a history moment's snapshot. */
 function restorePRNGFromMoment(moment) {
 	if (moment?.prng) restorePRNG(moment.prng.seed, moment.prng.pull);
@@ -3129,6 +3492,7 @@ function restorePRNGFromMoment(moment) {
 var useStoryStore = create()(immer((set, get) => ({
 	storyData: null,
 	currentPassage: "",
+	navigationId: 0,
 	variables: {},
 	variableDefaults: {},
 	transient: {},
@@ -3172,6 +3536,7 @@ var useStoryStore = create()(immer((set, get) => ({
 		set((state) => {
 			state.storyData = storyData;
 			state.currentPassage = startPassage.name;
+			state.navigationId++;
 			state.variables = initialVars;
 			state.variableDefaults = variableDefaults;
 			state.transient = deepClone(transientDefaults);
@@ -3205,7 +3570,11 @@ var useStoryStore = create()(immer((set, get) => ({
 		}).catch((err) => console.error("spindle: failed to init save system", err));
 	},
 	navigate: (passageName) => {
-		const { storyData, variables: currVars } = get();
+		if (navigationTriggerPhase) {
+			deferredNavigations.push(passageName);
+			return;
+		}
+		const { storyData } = get();
 		if (!storyData) return;
 		if (SPECIAL_PASSAGES.has(passageName)) {
 			console.error(`spindle: Cannot navigate to special passage "${passageName}".`);
@@ -3217,12 +3586,14 @@ var useStoryStore = create()(immer((set, get) => ({
 		}
 		const previousPassage = get().currentPassage;
 		emit("beforenavigate", passageName);
-		const patchEntry = computeVarPatches(lastNavigationVars, currVars);
+		const patchEntry = computeVarPatches(lastNavigationVars, get().variables);
 		set((state) => {
 			state.temporary = {};
 			state.currentPassage = passageName;
+			state.navigationId++;
 			state.history = state.history.slice(0, state.historyIndex + 1);
 			patchEntries.length = state.historyIndex;
+			if (serializedHistory.length > state.historyIndex + 1) serializedHistory.length = state.historyIndex + 1;
 			patchEntries.push(patchEntry);
 			state.history.push({
 				passage: passageName,
@@ -3240,41 +3611,61 @@ var useStoryStore = create()(immer((set, get) => ({
 			state.visitCounts[passageName] = (state.visitCounts[passageName] ?? 0) + 1;
 			state.renderCounts[passageName] = (state.renderCounts[passageName] ?? 0) + 1;
 		});
+		const enteredVars = get().variables;
+		navigationTriggerPhase = true;
+		try {
+			checkTriggersOnNavigation();
+		} finally {
+			navigationTriggerPhase = false;
+		}
+		const deferred = deferredNavigations;
+		deferredNavigations = [];
+		if (get().variables !== enteredVars) rerecordNewestMoment(get().variables);
+		const prng = snapshotPRNG();
+		const recorded = get().history[get().historyIndex].prng;
+		if (prng?.seed !== recorded?.seed || prng?.pull !== recorded?.pull) set((state) => {
+			state.history[state.historyIndex].prng = prng;
+		});
 		lastNavigationVars = get().variables;
 		persistSession(get);
 		emit("afternavigate", passageName, previousPassage);
+		for (const next of deferred) get().navigate(next);
 	},
 	goBack: () => {
-		const { historyIndex, variables } = get();
+		const { historyIndex } = get();
 		if (historyIndex <= 0) return;
 		const previousPassage = get().currentPassage;
 		const targetPassage = get().history[historyIndex - 1].passage;
 		emit("beforenavigate", targetPassage);
-		const restoredVars = deepClone(applyPatches(variables, patchEntries[historyIndex - 1].inverse));
+		const restoredVars = deepClone(reconstructVarsAt(historyIndex - 1));
 		set((state) => {
 			state.historyIndex--;
 			state.currentPassage = state.history[state.historyIndex].passage;
+			state.navigationId++;
 			state.variables = restoredVars;
 			state.temporary = {};
 		});
+		reinitTriggerState();
 		lastNavigationVars = get().variables;
 		restorePRNGFromMoment(get().history[get().historyIndex]);
 		persistSession(get);
 		emit("afternavigate", targetPassage, previousPassage);
 	},
 	goForward: () => {
-		const { historyIndex, history: hist, variables } = get();
+		const { historyIndex, history: hist } = get();
 		if (historyIndex >= hist.length - 1) return;
 		const previousPassage = get().currentPassage;
 		const targetPassage = hist[historyIndex + 1].passage;
 		emit("beforenavigate", targetPassage);
-		const restoredVars = deepClone(applyPatches(variables, patchEntries[historyIndex].forward));
+		const restoredVars = deepClone(reconstructVarsAt(historyIndex + 1));
 		set((state) => {
 			state.historyIndex++;
 			state.currentPassage = state.history[state.historyIndex].passage;
+			state.navigationId++;
 			state.variables = restoredVars;
 			state.temporary = {};
 		});
+		reinitTriggerState();
 		lastNavigationVars = get().variables;
 		restorePRNGFromMoment(get().history[get().historyIndex]);
 		persistSession(get);
@@ -3310,6 +3701,11 @@ var useStoryStore = create()(immer((set, get) => ({
 			delete state.transient[name];
 		});
 	},
+	updateVariables: (recipe) => {
+		set((state) => {
+			recipe(state);
+		});
+	},
 	trackRender: (passageName) => {
 		set((state) => {
 			state.renderCounts[passageName] = (state.renderCounts[passageName] ?? 0) + 1;
@@ -3332,6 +3728,7 @@ var useStoryStore = create()(immer((set, get) => ({
 		resetModuleState(deepClone(initialVars));
 		set((state) => {
 			state.currentPassage = startPassage.name;
+			state.navigationId++;
 			state.variables = initialVars;
 			state.transient = deepClone(transientDefaults);
 			state.temporary = {};
@@ -3358,19 +3755,17 @@ var useStoryStore = create()(immer((set, get) => ({
 	save: (slot, custom) => {
 		const { storyData, playthroughId } = get();
 		if (!storyData) return;
-		emit("beforesave", slot, custom);
-		const payload = get().getSavePayload();
-		set((state) => {
-			state.saveError = null;
-		});
-		quickSave(storyData.ifid, playthroughId, payload, slot, custom).then(() => {
+		saveWithHooks(slot, custom, () => get().getSavePayload(), async (payload) => {
+			set((state) => {
+				state.saveError = null;
+			});
+			await quickSave(storyData.ifid, playthroughId, payload, slot, custom);
 			set((state) => {
 				state.knownSaves = {
 					...state.knownSaves,
 					[slot ?? ""]: true
 				};
 			});
-			emit("aftersave", slot);
 		}).catch((err) => {
 			console.error("spindle: failed to save", err);
 			set((state) => {
@@ -3386,7 +3781,7 @@ var useStoryStore = create()(immer((set, get) => ({
 		});
 		loadQuickSave(storyData.ifid, slot).then((payload) => {
 			if (!payload) return;
-			get().loadFromPayload(payload);
+			get().loadFromPayload(payload, slot);
 		}).catch((err) => {
 			console.error("spindle: failed to load save", err);
 			set((state) => {
@@ -3499,26 +3894,33 @@ var useStoryStore = create()(immer((set, get) => ({
 			prng: snapshotPRNG()
 		};
 	},
-	loadFromPayload: (payload) => {
+	loadFromPayload: (payload, slot) => {
 		if (payload.history.length === 0) {
 			console.warn("loadFromPayload: rejecting payload with empty history");
 			return;
 		}
-		emit("beforeload", void 0);
-		const base = deserialize(payload.history[0]?.variables ?? {});
+		emit("beforeload", slot);
+		const entry = loadedEntryMoment(payload);
+		const base = deepClone(payload.history[0]?.variables ?? {});
 		const newPatchEntries = [];
 		let prevVars = base;
 		for (let i = 1; i < payload.history.length; i++) {
-			const currVars = deserialize(payload.history[i].variables);
+			const currVars = deepClone(payload.history[i].variables);
 			newPatchEntries.push(computeVarPatches(prevVars, currVars));
 			prevVars = currVars;
 		}
 		variableBase = deepClone(base);
 		patchEntries = newPatchEntries;
-		serializedHistory = [];
+		serializedHistory = payload.history.map((m) => ({
+			passage: m.passage,
+			variables: serialize(m.variables),
+			timestamp: m.timestamp,
+			prng: m.prng
+		}));
 		set((state) => {
 			state.currentPassage = payload.passage;
-			state.variables = deserialize(payload.variables);
+			state.navigationId++;
+			state.variables = deepClone(entry?.variables ?? payload.variables);
 			state.history = payload.history.map((m) => ({
 				passage: m.passage,
 				timestamp: m.timestamp,
@@ -3530,10 +3932,13 @@ var useStoryStore = create()(immer((set, get) => ({
 			state.temporary = {};
 			state.transient = deepClone(get().transientDefaults);
 		});
-		lastNavigationVars = get().variables;
-		if (payload.prng) restorePRNG(payload.prng.seed, payload.prng.pull);
+		reinitTriggerState();
+		lastNavigationVars = reconstructVarsAt(get().historyIndex);
+		const prng = entry?.prng !== void 0 ? entry.prng : payload.prng;
+		if (prng) restorePRNG(prng.seed, prng.pull);
 		else resetPRNG();
-		emit("afterload", void 0);
+		persistSession(get);
+		emit("afterload", slot);
 	},
 	getHistoryVariables: (index) => {
 		return deepClone(reconstructVarsAt(index));
@@ -3873,6 +4278,7 @@ function parseStoryData() {
 var definitions = /* @__PURE__ */ new Map();
 var values = {};
 var storageLoaded = false;
+var unsubscribeStoryData = null;
 function storageKey() {
 	return `spindle.${useStoryStore.getState().storyData?.ifid || "unknown"}.settings`;
 }
@@ -3881,6 +4287,15 @@ function persist() {
 }
 function loadFromStorage() {
 	if (storageLoaded) return;
+	if (!useStoryStore.getState().storyData?.ifid) {
+		if (!unsubscribeStoryData) unsubscribeStoryData = useStoryStore.subscribe((state) => {
+			if (!state.storyData?.ifid) return;
+			unsubscribeStoryData?.();
+			unsubscribeStoryData = null;
+			loadFromStorage();
+		});
+		return;
+	}
 	storageLoaded = true;
 	try {
 		const raw = localStorage.getItem(storageKey());
@@ -3948,24 +4363,6 @@ var settings = {
 	}
 };
 //#endregion
-//#region src/execute-mutation.ts
-function executeMutation(code, mergedLocals, scopeUpdate) {
-	const state = useStoryStore.getState();
-	const vars = deepClone(state.variables);
-	const temps = deepClone(state.temporary);
-	const trans = deepClone(state.transient);
-	const localsClone = { ...mergedLocals };
-	execute(code, vars, temps, localsClone, trans);
-	for (const key of Object.keys(vars)) if (vars[key] !== state.variables[key]) state.setVariable(key, vars[key]);
-	for (const key of Object.keys(temps)) if (temps[key] !== state.temporary[key]) state.setTemporary(key, temps[key]);
-	for (const key of Object.keys(trans)) if (trans[key] !== state.transient[key]) state.setTransient(key, trans[key]);
-	for (const key of Object.keys(localsClone)) if (localsClone[key] !== mergedLocals[key]) scopeUpdate(key, localsClone[key]);
-	for (const key of Object.keys(state.variables)) if (!(key in vars)) state.deleteVariable(key);
-	for (const key of Object.keys(state.temporary)) if (!(key in temps)) state.deleteTemporary(key);
-	for (const key of Object.keys(state.transient)) if (!(key in trans)) state.deleteTransient(key);
-	for (const key of Object.keys(mergedLocals)) if (!(key in localsClone)) scopeUpdate(key, void 0);
-}
-//#endregion
 //#region src/action-registry.ts
 var actions = /* @__PURE__ */ new Map();
 var idCounters = /* @__PURE__ */ new Map();
@@ -4304,19 +4701,12 @@ function warnIfUndeclared(isTransient, key) {
 	warnedUndeclared.add(label);
 	console.warn(`spindle: Story.set() wrote ${label}, which is not declared in ${isTransient ? "StoryTransients" : "StoryVariables"}. Passages cannot reference it; check the name or declare it.`);
 }
-/** Set a single variable, resolving dot-paths if present. */
-function setOne(name, value) {
+/** Set a single variable on an Immer draft, resolving dot-paths if present. */
+function setOne(draft, name, value) {
 	const { isTransient, key } = parseName(name);
-	const namespace = isTransient ? "transient" : "variables";
-	warnIfUndeclared(isTransient, key);
-	if (key.includes(".")) useStoryStore.setState((state) => {
-		setByPath(state[namespace], key, value);
-	});
-	else {
-		const state = useStoryStore.getState();
-		if (isTransient) state.setTransient(key, value);
-		else state.setVariable(key, value);
-	}
+	const namespace = isTransient ? draft.transient : draft.variables;
+	if (key.includes(".")) setByPath(namespace, key, value);
+	else namespace[key] = value;
 }
 function createStoryAPI() {
 	return {
@@ -4326,8 +4716,15 @@ function createStoryAPI() {
 			return key.includes(".") ? getByPath(store, key) : store[key];
 		},
 		set(nameOrVars, value) {
-			if (typeof nameOrVars === "string") setOne(nameOrVars, value);
-			else for (const [k, v] of Object.entries(nameOrVars)) setOne(k, v);
+			const names = typeof nameOrVars === "string" ? [nameOrVars] : Object.keys(nameOrVars);
+			for (const name of names) {
+				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);
+			});
 		},
 		goto(passageName) {
 			useStoryStore.getState().navigate(passageName);
@@ -4616,6 +5013,10 @@ function declarationRegex(sigil) {
 	return new RegExp(`^${escaped}(\\w+)\\s*=\\s*(.+)$`);
 }
 var VAR_REF_RE = /\$(\w+(?:\.\w+)*)/g;
+/** `{` followed by a sigil starts an interpolation block inside literal text. */
+var INTERP_START_RE = /^[$_@%]\w/;
+/** Quoted first argument of an input macro naming a story variable. */
+var QUOTED_VAR_ARG_RE = /^["']\$(\w+(?:\.\w+)*)["']?$/;
 var FOR_LOCAL_RE = /\{for\s+@(\w+)(?:\s*,\s*@(\w+))?\s+of\b/g;
 var VALID_VAR_TYPES = new Set([
 	"number",
@@ -4707,21 +5108,155 @@ function validateRef(ref, schema, forLocals) {
 	return null;
 }
 /**
+* Built-in input macros whose first argument names the bound story variable,
+* quoted or not (e.g. `{textbox "$name"}`).
+*/
+var BUILTIN_STORE_VAR_MACROS = [
+	"checkbox",
+	"cycle",
+	"listbox",
+	"numberbox",
+	"radiobutton",
+	"textarea",
+	"textbox"
+];
+/** Report every `$var.path` in a code segment free of strings/comments. */
+function scanRefs(segment, onRef) {
+	for (const match of segment.matchAll(VAR_REF_RE)) onRef(match[1]);
+}
+/** Index of the quote closing the string opened at `start` (or the end). */
+function findClosingQuote(code, start) {
+	const quote = code[start];
+	let i = start + 1;
+	while (i < code.length && code[i] !== quote) i += code[i] === "\\" ? 2 : 1;
+	return Math.min(i, code.length);
+}
+/**
+* Scan literal text (string contents, HTML attribute values) for `{$…}`
+* interpolation blocks, which interpolating macros and HTML attributes
+* resolve at runtime. A bare `$word` in literal text is not a reference.
+*/
+function scanInterpolations(text, onRef) {
+	let i = text.indexOf("{");
+	while (i !== -1) {
+		const next = INTERP_START_RE.test(text.slice(i + 1, i + 3)) ? scanCode(text, i + 1, onRef, true) : i + 1;
+		i = text.indexOf("{", next);
+	}
+}
+/**
+* Scan a template literal starting just after its opening backtick: literal
+* parts are text, `${…}` parts are code. Returns the index just past the
+* closing backtick.
+*/
+function scanTemplate(code, start, onRef) {
+	let i = start;
+	let textStart = start;
+	while (i < code.length) {
+		const ch = code[i];
+		if (ch === "\\") i += 2;
+		else if (ch === "`") {
+			scanInterpolations(code.slice(textStart, i), onRef);
+			return i + 1;
+		} else if (ch === "$" && code[i + 1] === "{") {
+			scanInterpolations(code.slice(textStart, i), onRef);
+			i = textStart = scanCode(code, i + 2, onRef, true);
+		} else i++;
+	}
+	scanInterpolations(code.slice(textStart), onRef);
+	return code.length;
+}
+/**
+* Report `$var` references in JavaScript code. Like the string-aware
+* expression transformer, sigils inside string literals are left alone while
+* template-literal `${…}` parts are code; comments are skipped too. When
+* `nested`, stops at the `}` closing the enclosing block and returns the index
+* just past it.
+*/
+function scanCode(code, start, onRef, nested = false) {
+	let i = start;
+	let segStart = start;
+	let depth = 0;
+	while (i < code.length) {
+		const ch = code[i];
+		const next = code[i + 1];
+		const isComment = ch === "/" && (next === "/" || next === "*");
+		if (ch === "\"" || ch === "'" || ch === "`" || isComment) {
+			scanRefs(code.slice(segStart, i), onRef);
+			if (ch === "`") i = scanTemplate(code, i + 1, onRef);
+			else if (isComment) {
+				const close = code.indexOf(next === "/" ? "\n" : "*/", i + 2);
+				i = close === -1 ? code.length : next === "/" ? close : close + 2;
+			} else {
+				const close = findClosingQuote(code, i);
+				scanInterpolations(code.slice(i + 1, close), onRef);
+				i = Math.min(close + 1, code.length);
+			}
+			segStart = i;
+			continue;
+		}
+		if (nested && ch === "{") depth++;
+		else if (nested && ch === "}" && depth-- === 0) {
+			scanRefs(code.slice(segStart, i), onRef);
+			return i + 1;
+		}
+		i++;
+	}
+	scanRefs(code.slice(segStart), onRef);
+	return code.length;
+}
+/**
+* Report the `$var` references a passage evaluates at runtime: `{$var}`
+* displays, `{$expr}` expressions, macro arguments and `{do}` bodies (as
+* code), quoted variable names bound by input macros, and `{$…}`
+* interpolations in HTML attributes. Prose is literal text and not scanned.
+*/
+function collectPassageRefs(content, storeVarMacros, onRef) {
+	const tokens = tokenize(content);
+	for (let t = 0; t < tokens.length; t++) {
+		const token = tokens[t];
+		if (token.type === "variable") {
+			if (token.scope === "variable" && token.name) onRef(token.name);
+		} else if (token.type === "expression") scanCode(token.expression, 0, onRef);
+		else if (token.type === "html") for (const value of Object.values(token.attributes)) scanInterpolations(value, onRef);
+		else if (token.type === "macro" && !token.isClose) {
+			scanCode(token.rawArgs, 0, onRef);
+			if (storeVarMacros.has(token.name.toLowerCase())) {
+				const first = token.rawArgs.trim().split(/\s+/)[0] ?? "";
+				const quoted = QUOTED_VAR_ARG_RE.exec(first);
+				if (quoted) onRef(quoted[1]);
+			}
+			if (token.name === "do") {
+				let close = t + 1;
+				while (close < tokens.length) {
+					const c = tokens[close];
+					if (c.type === "macro" && c.isClose && c.name === "do") break;
+					close++;
+				}
+				if (close < tokens.length) {
+					scanCode(content.slice(token.end, tokens[close].start), 0, onRef);
+					t = close;
+				}
+			}
+		}
+	}
+}
+/**
 * Scan all passages for $var references, check against schema.
 * Returns list of error messages (empty = valid).
+*
+* `storeVarMacros` lists the input macros whose first argument names a bound
+* variable; it defaults to the built-in ones.
 */
-function validatePassages(passages, schema) {
+function validatePassages(passages, schema, storeVarMacros = BUILTIN_STORE_VAR_MACROS) {
 	const errors = [];
+	const storeVarSet = new Set(Array.from(storeVarMacros, (m) => m.toLowerCase()));
 	for (const [name, passage] of passages) {
 		if (name === "StoryVariables" || name === "StoryTransients") continue;
 		const forLocals = extractForLocals(passage.content);
-		let match;
-		VAR_REF_RE.lastIndex = 0;
-		while ((match = VAR_REF_RE.exec(passage.content)) !== null) {
-			const ref = match[1];
+		collectPassageRefs(passage.content, storeVarSet, (ref) => {
 			const error = validateRef(ref, schema, forLocals);
 			if (error) errors.push(`Passage "${name}": ${error}`);
-		}
+		});
 	}
 	return errors;
 }
@@ -5051,6 +5586,10 @@ function ForIteration({ parentValues, itemVar, itemValue, indexVar, indexValue,
 	valuesRef.current = localState;
 	const getValues = useCallback(() => valuesRef.current, []);
 	const update = useCallback((key, value) => {
+		valuesRef.current = {
+			...valuesRef.current,
+			[key]: value
+		};
 		setLocalMutations((prev) => ({
 			...prev,
 			[key]: value
@@ -5132,6 +5671,30 @@ defineMacro({
 	}
 });
 //#endregion
+//#region src/utils/live-locals.ts
+/**
+* Read-only view of a locals scope that always reflects its current values.
+*
+* Used as the LocalsValuesContext value for one-shot detached renders
+* ({button}/{link} bodies). Those trees are unmounted right after rendering,
+* so the owning scope's re-render never reaches them; reading through
+* getValues() lets a macro see a local assigned earlier in the same body.
+*/
+function liveLocalsView(getValues) {
+	return new Proxy({}, {
+		get: (_, key) => typeof key === "string" ? getValues()[key] : void 0,
+		has: (_, key) => key in getValues(),
+		ownKeys: () => Reflect.ownKeys(getValues()),
+		getOwnPropertyDescriptor: (_, key) => {
+			const desc = Object.getOwnPropertyDescriptor(getValues(), key);
+			return desc ? {
+				...desc,
+				configurable: true
+			} : void 0;
+		}
+	});
+}
+//#endregion
 //#region src/components/macros/Button.tsx
 defineMacro({
 	name: "button",
@@ -5145,7 +5708,7 @@ defineMacro({
 			render(h(NobrContext.Provider, { value: nobr }, h(LocalsUpdateContext.Provider, { value: {
 				update: ctx.update,
 				getValues: ctx.getValues
-			} }, h(LocalsValuesContext.Provider, { value: ctx.getValues() }, renderNodes(children)))), container);
+			} }, h(LocalsValuesContext.Provider, { value: liveLocalsView(ctx.getValues) }, renderNodes(children)))), container);
 			render(null, container);
 		};
 		ctx.useAction({
@@ -5188,7 +5751,7 @@ function renderChildrenDetached(children, getValues, update, nobr) {
 	render(h(NobrContext.Provider, { value: nobr }, h(LocalsUpdateContext.Provider, { value: {
 		update,
 		getValues
-	} }, h(LocalsValuesContext.Provider, { value: getValues() }, renderNodes(children)))), container);
+	} }, h(LocalsValuesContext.Provider, { value: liveLocalsView(getValues) }, renderNodes(children)))), container);
 	render(null, container);
 }
 defineMacro({
@@ -5662,7 +6225,7 @@ function SaveManagerContent() {
 	const handleNewSave = async () => {
 		if (!ifid || !playthroughId) return;
 		try {
-			await createSave(ifid, playthroughId, getSavePayload());
+			await saveWithHooks(void 0, void 0, getSavePayload, (payload) => createSave(ifid, playthroughId, payload));
 			showStatus("Save created");
 			await refresh();
 		} catch {
@@ -5671,7 +6234,9 @@ function SaveManagerContent() {
 	};
 	const handleOverwrite = async (saveId) => {
 		try {
-			await overwriteSave(saveId, getSavePayload());
+			await saveWithHooks(void 0, void 0, getSavePayload, async (payload) => {
+				if (!await overwriteSave(saveId, payload)) throw new Error("Save not found");
+			});
 			showStatus("Save overwritten");
 			await refresh();
 		} catch {
@@ -5680,7 +6245,7 @@ function SaveManagerContent() {
 	};
 	const handleLoad = async (save) => {
 		try {
-			loadFromPayload(save.payload);
+			loadFromPayload(deserializePayload(save.payload));
 			showStatus("Game loaded");
 			if (closeDialog) setTimeout(closeDialog, 500);
 		} catch {
@@ -5969,7 +6534,6 @@ defineMacro({
 	merged: true,
 	render({ rawArgs }, ctx) {
 		const storyData = useStoryStore((s) => s.storyData);
-		if (!storyData) return null;
 		const inline = /\binline\b/.test(rawArgs);
 		const nameExpr = rawArgs.replace(/\binline\b/, "").trim();
 		let passageName;
@@ -5979,14 +6543,15 @@ defineMacro({
 		} catch {
 			passageName = nameExpr.replace(/^["']|["']$/g, "");
 		}
-		const passage = storyData.passages.get(passageName);
+		const passage = storyData?.passages.get(passageName);
+		const ast = ctx.hooks.useMemo(() => passage ? buildAST(tokenize(passage.content)) : null, [passage]);
+		if (!storyData) return null;
 		if (passage) useStoryStore.getState().trackRender(passageName);
-		if (!passage) return /* @__PURE__ */ jsx("span", {
+		if (!passage || !ast) return /* @__PURE__ */ jsx("span", {
 			class: "error",
 			children: `{include${ctx.sourceLocation()}: passage "${passageName}" not found}`
 		});
 		const nobr = passage.tags.includes("nobr");
-		const ast = buildAST(tokenize(passage.content));
 		const content = inline ? ctx.renderInlineNodes(ast) : ctx.renderNodes(ast, nobr ? { nobr: true } : void 0);
 		if (nobr) return ctx.wrap(ctx.h(NobrContext.Provider, { value: true }, content));
 		return ctx.wrap(content);
@@ -6269,8 +6834,25 @@ defineMacro({
 });
 //#endregion
 //#region src/components/Passage.tsx
+/**
+* Parsed AST per passage. The renderer keys children by AST node identity,
+* so re-rendering a passage (e.g. PassageReady on every PassageDisplay
+* render) must reuse its AST — a fresh parse would remount every macro in
+* it and re-run its {set}/{do} side effects (#175).
+*/
+var astCache = /* @__PURE__ */ new WeakMap();
+function parsePassage(passage) {
+	const cached = astCache.get(passage);
+	if (cached && cached.content === passage.content) return cached.ast;
+	const ast = buildAST(tokenize(passage.content));
+	astCache.set(passage, {
+		content: passage.content,
+		ast
+	});
+	return ast;
+}
 function renderPassageContent(passage) {
-	return renderNodes(buildAST(tokenize(passage.content)), passage.tags.includes("nobr") ? { nobr: true } : void 0);
+	return renderNodes(parsePassage(passage), passage.tags.includes("nobr") ? { nobr: true } : void 0);
 }
 var CODE_PASSAGES = new Set([
 	"PassageReady",
@@ -6461,9 +7043,18 @@ defineMacro({
 	interpolate: true,
 	render(_props, ctx) {
 		const currentPassage = useStoryStore((s) => s.currentPassage);
+		const navigationId = useStoryStore((s) => s.navigationId);
 		const storyData = useStoryStore((s) => s.storyData);
 		const renderDeferred = useStoryStore((s) => s.renderDeferred);
-		const [displayedPassage, setDisplayedPassage] = useState(currentPassage);
+		const [displayed, setDisplayed] = useState({
+			passage: currentPassage,
+			id: navigationId
+		});
+		const displayedPassage = displayed.passage;
+		const setDisplayedPassage = (passage) => setDisplayed({
+			passage,
+			id: navigationId
+		});
 		const resolvedTypeRef = useRef("fade");
 		const prevHistoryLenRef = useRef(0);
 		const containerRef = useRef(null);
@@ -6483,7 +7074,7 @@ defineMacro({
 			const isFirstLoad = !displayedPassage;
 			const isRestart = history.length === 1 && historyIndex === 0 && prevLen > 1;
 			const isLoad = history.length > 1 && historyIndex === history.length - 1 && prevLen > 1 && Math.abs(history.length - prevLen) > 1;
-			if (currentPassage === displayedPassage) return;
+			if (navigationId === displayed.id) return;
 			cancelTransition();
 			const targetPassage = storyData?.passages.get(currentPassage);
 			if (!targetPassage) {
@@ -6553,7 +7144,7 @@ defineMacro({
 				return;
 			}
 			setDisplayedPassage(currentPassage);
-		}, [currentPassage]);
+		}, [navigationId]);
 		const effectivePassage = renderDeferred ? storyData?.passages.get("StoryLoading") ?? null : displayedPassage ? storyData?.passages.get(displayedPassage) : null;
 		if (!effectivePassage && displayedPassage && !renderDeferred) return /* @__PURE__ */ jsxs("div", {
 			class: "error",
@@ -6570,13 +7161,13 @@ defineMacro({
 			children: [!renderDeferred && readyPassage && /* @__PURE__ */ jsx("div", {
 				hidden: true,
 				children: renderPassageContent(readyPassage)
-			}, `ready-${currentPassage}`), /* @__PURE__ */ jsx("div", {
+			}, `ready-${navigationId}`), /* @__PURE__ */ jsx("div", {
 				class: "passage-container",
 				ref: containerRef,
 				children: effectivePassage && /* @__PURE__ */ jsx(Passage, {
 					passage: effectivePassage,
 					dataTransition: renderDeferred ? "none" : resolvedTypeRef.current
-				}, renderDeferred ? "loading" : displayedPassage)
+				}, renderDeferred ? "loading" : `nav-${displayed.id}`)
 			})]
 		});
 	}
@@ -6623,7 +7214,7 @@ defineMacro({
 		const registered = hooks.useRef(false);
 		if (!registered.current) {
 			registered.current = true;
-			addTrigger(condition, options);
+			addMacroTrigger(condition, options);
 		}
 		return null;
 	}
@@ -6697,7 +7288,8 @@ function boot() {
 		throw new Error(`spindle: ${msg}`);
 	}
 	const schema = parseStoryVariables(storyVarsPassage.content);
-	const errors = validatePassages(storyData.passages, schema);
+	const storeVarMacros = getMacroRegistry().filter((m) => m.storeVar).map((m) => m.name);
+	const errors = validatePassages(storyData.passages, schema, storeVarMacros);
 	let transientDefaults = {};
 	const storyTransientsPassage = storyData.passages.get("StoryTransients");
 	if (storyTransientsPassage) {
@@ -6740,21 +7332,14 @@ function boot() {
 			if (isBlock) registerBlockMacro(widgetName);
 		}
 	}
-	let prevPassage = "";
+	let prevNavigationId = useStoryStore.getState().navigationId;
 	useStoryStore.subscribe((state) => {
-		if (state.currentPassage !== prevPassage) {
-			prevPassage = state.currentPassage;
+		if (state.navigationId !== prevNavigationId) {
+			prevNavigationId = state.navigationId;
 			resetIdCounters();
 		}
 	});
-	let prevVars = useStoryStore.getState().variables;
-	let prevHistoryIndex = useStoryStore.getState().historyIndex;
-	useStoryStore.subscribe((state) => {
-		if (state.variables !== prevVars) if (state.historyIndex === prevHistoryIndex) checkTriggers();
-		else reinitTriggerState();
-		prevVars = state.variables;
-		prevHistoryIndex = state.historyIndex;
-	});
+	connectTriggersToStore();
 	const storyInterfacePassage = storyData.passages.get("StoryInterface");
 	if (storyInterfacePassage && !storyInterfacePassage.content.includes("{passage}")) console.warn("spindle: StoryInterface passage does not contain {passage}. The current passage will not be displayed.");
 	const root = document.getElementById("root");