@rohal12/spindle 0.52.2 → 0.52.4

package/dist/pkg/headless.js

@@ -4,6 +4,7 @@ import { useSyncExternalStore } from "preact/compat";
 import { createStore } from "zustand/vanilla";
 import { immer } from "zustand/middleware/immer";
 import { Immer, applyPatches, current, enableMapSet, enablePatches, freeze, isDraft, produceWithPatches } from "immer";
+import { shallow } from "zustand/vanilla/shallow";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 import { micromark } from "micromark";
 import { gfmTable, gfmTableHtml } from "micromark-extension-gfm-table";
@@ -485,13 +486,13 @@ function scanRegex(src, start, cache) {
 	};
 	let i = start + 1;
 	while (i < src.length) {
+		const lineEnd = regexLineEnd(src, i);
+		if (lineEnd !== -1) return done(lineEnd, false);
 		const c = src.charAt(i);
 		if (c === "\\") {
-			if (LINE_TERMINATOR_RE.test(src.charAt(i + 1))) return done(i + 1, false);
 			i += 2;
 			continue;
 		}
-		if (LINE_TERMINATOR_RE.test(c)) return done(i, false);
 		if (c === "[") {
 			i = scanRegexClass(src, i, cache);
 			if (src.charAt(i) !== "]") return done(i, false);
@@ -522,16 +523,17 @@ function scanRegexClass(src, open, cache) {
 	const opens = [open];
 	let i = open + 1;
 	while (i < src.length) {
+		const lineEnd = regexLineEnd(src, i);
+		if (lineEnd !== -1) {
+			i = lineEnd;
+			break;
+		}
 		const c = src.charAt(i);
 		if (c === "\\") {
-			if (LINE_TERMINATOR_RE.test(src.charAt(i + 1))) {
-				i++;
-				break;
-			}
 			i += 2;
 			continue;
 		}
-		if (c === "]" || LINE_TERMINATOR_RE.test(c)) break;
+		if (c === "]") break;
 		if (c === "[" && cache) opens.push(i);
 		i++;
 	}
@@ -540,6 +542,16 @@ function scanRegexClass(src, open, cache) {
 	return i;
 }
 /**
+* Index of the line break at `i`, escaped (`\` then a line break) or not,
+* where a regex literal or class ends unterminated; -1 if there is none.
+*/
+function regexLineEnd(src, i) {
+	const c = src.charAt(i);
+	if (LINE_TERMINATOR_RE.test(c)) return i;
+	if (c === "\\" && LINE_TERMINATOR_RE.test(src.charAt(i + 1))) return i + 1;
+	return -1;
+}
+/**
 * The next index from `from` on where `find` matches (-1 for none), for
 * searches from increasing positions: a search from within the stretch the
 * last one covered has the same answer.
@@ -1489,8 +1501,7 @@ function splitSigilTemplate(template) {
 		}
 		text += template.slice(i, brace);
 		i = brace + 1;
-		const sigil = template[i];
-		const end = sigil === "$" || sigil === "_" || sigil === "@" || sigil === "%" ? scanBalancedBrace(template, i, memo) : -1;
+		const end = isSigil(template[i]) ? scanBalancedBrace(template, i, memo) : -1;
 		if (end === -1) {
 			text += "{";
 			continue;
@@ -1506,6 +1517,26 @@ function splitSigilTemplate(template) {
 }
 //#endregion
 //#region src/markup/tokenizer.ts
+/** Variable sigils: story ($), temporary (_), local (@), transient (%). */
+var SIGIL_SCOPES = {
+	$: "variable",
+	_: "temporary",
+	"@": "local",
+	"%": "transient"
+};
+/** The sigil of each variable scope. */
+var SCOPE_SIGILS = Object.fromEntries(Object.entries(SIGIL_SCOPES).map(([sigil, scope]) => [scope, sigil]));
+var SIGIL_CHARS = new Set(Object.keys(SIGIL_SCOPES));
+/** Whether `c` is a variable sigil. */
+function isSigil(c) {
+	return c !== void 0 && SIGIL_CHARS.has(c);
+}
+/** Copy the selectors set in `from` onto `target`, and return it. */
+function withSelectors(target, from) {
+	if (from.className) target.className = from.className;
+	if (from.id) target.id = from.id;
+	return target;
+}
 /** 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. */
@@ -1525,13 +1556,6 @@ var HTML_VOID_TAGS = new Set([
 	"track",
 	"wbr"
 ]);
-/** Variable sigils: story ($), temporary (_), local (@), transient (%). */
-var SIGIL_CHARS = new Set([
-	"$",
-	"_",
-	"@",
-	"%"
-]);
 /**
 * Characters other than a sigil that open an expression after `{`:
 * `{(Math.max($a, 0))}`, `{!$done}`. Other characters that can start an
@@ -1542,25 +1566,32 @@ var EXPRESSION_START = new Set(["(", "!"]);
 /** Macros whose body is JavaScript source, kept verbatim instead of tokenized. */
 var RAW_BODY_MACROS = new Set(["do"]);
 /**
+* Link separators, in the order they are tried, and whether the target
+* comes first: display|target, display->target, target<-display.
+*/
+var LINK_SEPARATORS = [
+	["|", false],
+	["->", false],
+	["<-", true]
+];
+/**
 * Parse a Twine link interior into display and target.
 * Supports: display|target, display->target, target<-display, plain
 */
 function parseLink(inner) {
-	const pipeIdx = inner.indexOf("|");
-	if (pipeIdx !== -1) return {
-		display: inner.slice(0, pipeIdx).trim(),
-		target: inner.slice(pipeIdx + 1).trim()
-	};
-	const arrowIdx = inner.indexOf("->");
-	if (arrowIdx !== -1) return {
-		display: inner.slice(0, arrowIdx).trim(),
-		target: inner.slice(arrowIdx + 2).trim()
-	};
-	const revIdx = inner.indexOf("<-");
-	if (revIdx !== -1) return {
-		target: inner.slice(0, revIdx).trim(),
-		display: inner.slice(revIdx + 2).trim()
-	};
+	for (const [separator, targetFirst] of LINK_SEPARATORS) {
+		const idx = inner.indexOf(separator);
+		if (idx === -1) continue;
+		const before = inner.slice(0, idx).trim();
+		const after = inner.slice(idx + separator.length).trim();
+		return targetFirst ? {
+			display: after,
+			target: before
+		} : {
+			display: before,
+			target: after
+		};
+	}
 	const trimmed = inner.trim();
 	return {
 		display: trimmed,
@@ -1591,8 +1622,10 @@ function parseMacroContent(content) {
 }
 /**
 * Parse CSS selectors: .foo.bar#baz → { className: "foo bar", id: "baz" }
-* Scans .[a-zA-Z0-9_-]+ and #[a-zA-Z0-9_-]+ segments in any order.
-* Returns space-joined class string, last id wins, and position after last segment.
+* Scans .[a-zA-Z0-9_-]+ and #[a-zA-Z0-9_-]+ segments in any order, and one
+* space after them. Returns space-joined class string, last id wins (each
+* left out if empty), and the position after them: `startIdx` if there are
+* none.
 */
 function parseSelectors(input, startIdx) {
 	const classes = [];
@@ -1605,7 +1638,7 @@ function parseSelectors(input, startIdx) {
 		while (i < input.length) if (/[a-zA-Z0-9_-]/.test(input[i])) {
 			name += input[i];
 			i++;
-		} else if (input[i] === "{" && SIGIL_CHARS.has(input[i + 1])) {
+		} else if (input[i] === "{" && isSigil(input[i + 1])) {
 			const braceStart = i;
 			i += 2;
 			while (i < input.length && /[\w.]/.test(input[i])) i++;
@@ -1620,10 +1653,13 @@ function parseSelectors(input, startIdx) {
 		if (name) if (prefix === ".") classes.push(name);
 		else id = name;
 	}
+	if (i > startIdx && input[i] === " ") i++;
 	return {
-		className: classes.join(" "),
-		id,
-		endIdx: i
+		selectors: withSelectors({}, {
+			className: classes.join(" "),
+			id
+		}),
+		end: i
 	};
 }
 /**
@@ -1738,7 +1774,7 @@ function scanQuotedValue(input, j, quote, code, memo) {
 			continue;
 		}
 		if (input[j] === "{") {
-			const closeIdx = !code ? scanBlockClose(input, j, memo) : SIGIL_CHARS.has(input[j + 1]) ? scanBalancedBrace(input, j + 1, memo) : -1;
+			const closeIdx = !code ? scanBlockClose(input, j, memo) : isSigil(input[j + 1]) ? scanBalancedBrace(input, j + 1, memo) : -1;
 			if (closeIdx !== -1) {
 				j = closeIdx + 1;
 				checkpoint = true;
@@ -1814,12 +1850,7 @@ function scanMacroClose(input, contentStart, memo) {
 * code from just past the {. Returns -1 if it is unclosed.
 */
 function scanBlockClose(input, open, memo) {
-	let at = open + 1;
-	const c = input[at];
-	if (c === "." || c === "#") {
-		at = parseSelectors(input, at).endIdx;
-		if (input[at] === " ") at++;
-	}
+	const at = parseSelectors(input, open + 1).end;
 	const first = input[at];
 	if (first !== void 0 && (first === "/" || /[a-zA-Z]/.test(first))) return scanMacroClose(input, at, memo);
 	return scanBalancedBrace(input, at, memo);
@@ -2011,13 +2042,22 @@ function tokenize(input, options = {}) {
 	const memo = createScanMemo();
 	let i = 0;
 	let textStart = 0;
+	/** Push a text token for the text not yet tokenized before `end`. */
 	function flushText(end) {
-		if (end > textStart) tokens.push({
-			type: "text",
-			value: input.slice(textStart, end),
-			start: textStart,
-			end
-		});
+		if (end > textStart) {
+			tokens.push({
+				type: "text",
+				value: input.slice(textStart, end),
+				start: textStart,
+				end
+			});
+			textStart = end;
+		}
+	}
+	/** Push `token` and go on after it. */
+	function emit(token) {
+		tokens.push(token);
+		i = textStart = token.end;
 	}
 	/**
 	* After an opening raw-body macro ({do}), emit everything up to its
@@ -2059,34 +2099,66 @@ function tokenize(input, options = {}) {
 		atRe.lastIndex = closeStart;
 		const closeEnd = closeStart + atRe.exec(input)[0].length;
 		flushText(closeStart);
-		tokens.push({
+		emit({
 			type: "macro",
 			...parseMacroContent(input.slice(closeStart + 1, closeEnd - 1)),
 			start: closeStart,
 			end: closeEnd
 		});
-		i = closeEnd;
-		textStart = closeEnd;
 	}
 	/**
 	* Push an expression token for the `{…}` block opened at `start` whose
-	* expression starts at `exprStart`, flushing the text before it first
-	* when `flush`. Returns false, consuming nothing, if the block is unclosed.
+	* expression starts at `exprStart`, flushing the text before it first.
+	* Returns false, consuming nothing, if the block is unclosed.
 	*/
-	function pushExpression(exprStart, start, flush, className, id) {
+	function pushExpression(exprStart, start, selectors) {
 		const closeIdx = scanBalancedBrace(input, exprStart, memo);
 		if (closeIdx === -1) return false;
-		if (flush) flushText(start);
-		const token = {
+		flushText(start);
+		emit(withSelectors({
 			type: "expression",
 			expression: input.slice(exprStart, closeIdx),
 			start,
 			end: closeIdx + 1
-		};
-		if (className) token.className = className;
-		if (id) token.id = id;
-		tokens.push(token);
-		i = textStart = closeIdx + 1;
+		}, selectors));
+		return true;
+	}
+	/**
+	* Push a variable token for the `{…}` block opened at `start` whose sigil
+	* is at `sigilAt`: `{$name}`, `{_name.field.subfield}`. Anything else
+	* after the name makes the block an expression from the sigil on
+	* (`{$expr[...]}`). Returns false, consuming nothing, if it is unclosed.
+	*/
+	function pushVariable(sigilAt, start, selectors) {
+		let nameEnd = sigilAt + 1;
+		while (nameEnd < input.length && /[\w.]/.test(input[nameEnd])) nameEnd++;
+		if (input[nameEnd] !== "}") return pushExpression(sigilAt, start, selectors);
+		emit(withSelectors({
+			type: "variable",
+			name: input.slice(sigilAt + 1, nameEnd),
+			scope: SIGIL_SCOPES[input[sigilAt]],
+			start,
+			end: nameEnd + 1
+		}, selectors));
+		return true;
+	}
+	/**
+	* Push a macro token for the `{…}` block opened at `start` whose content
+	* (name, then arguments) starts at `contentStart`, then consume the body
+	* of a raw-body macro. Returns false, consuming nothing, if the block is
+	* unclosed.
+	*/
+	function pushMacro(contentStart, start, selectors) {
+		const closeIdx = scanMacroClose(input, contentStart, memo);
+		if (closeIdx === -1) return false;
+		const token = withSelectors({
+			type: "macro",
+			...parseMacroContent(input.slice(contentStart, closeIdx)),
+			start,
+			end: closeIdx + 1
+		}, selectors);
+		emit(token);
+		consumeRawBody(token.name, token.isClose);
 		return true;
 	}
 	while (i < input.length) {
@@ -2110,14 +2182,12 @@ function tokenize(input, options = {}) {
 			}
 			if ((next === "{" || next === "}") && (k - i) % 2 === 1) {
 				flushText(k - 1);
-				tokens.push({
+				emit({
 					type: "text",
 					value: next,
 					start: k - 1,
 					end: k + 1
 				});
-				i = k + 1;
-				textStart = i;
 				continue;
 			}
 			i = k;
@@ -2126,413 +2196,36 @@ function tokenize(input, options = {}) {
 		if (!textMode && input[i] === "[" && input[i + 1] === "[") {
 			flushText(i);
 			const start = i;
-			i += 2;
-			let className;
-			let id;
-			if (input[i] === "." || input[i] === "#") {
-				const parsed = parseSelectors(input, i);
-				className = parsed.className || void 0;
-				id = parsed.id || void 0;
-				i = parsed.endIdx;
-				if (input[i] === " ") i++;
-			}
-			const innerStart = i;
+			const { selectors, end: innerStart } = parseSelectors(input, i + 2);
 			const closeIdx = scanLinkClose(input, innerStart, memo);
 			if (closeIdx === -1) {
 				i = start + 2;
-				textStart = start;
 				continue;
 			}
-			const inner = input.slice(innerStart, closeIdx);
-			i = closeIdx + 2;
-			const { display, target } = parseLink(inner);
-			const linkToken = {
+			emit(withSelectors({
 				type: "link",
-				display,
-				target,
+				...parseLink(input.slice(innerStart, closeIdx)),
 				start,
-				end: i
-			};
-			if (className) linkToken.className = className;
-			if (id) linkToken.id = id;
-			tokens.push(linkToken);
-			textStart = i;
+				end: closeIdx + 2
+			}, selectors));
 			continue;
 		}
 		if (input[i] === "{") {
 			const start = i;
-			let nextChar = input[i + 1];
-			let className;
-			let id;
-			if (nextChar === "." || nextChar === "#") {
-				flushText(i);
-				const parsed = parseSelectors(input, i + 1);
-				className = parsed.className || void 0;
-				id = parsed.id || void 0;
-				let afterSelectors = parsed.endIdx;
-				if (input[afterSelectors] === " ") afterSelectors++;
-				const charAfter = input[afterSelectors];
-				if (charAfter === "$") {
-					i = afterSelectors + 1;
-					const nameStart = i;
-					while (i < input.length && /[\w.]/.test(input[i])) i++;
-					const name = input.slice(nameStart, i);
-					if (input[i] === "}") {
-						i++;
-						const token = {
-							type: "variable",
-							name,
-							scope: "variable",
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					const closeIdx$ = scanBalancedBrace(input, nameStart - 1, memo);
-					if (closeIdx$ !== -1) {
-						const expression = input.slice(afterSelectors, closeIdx$);
-						i = closeIdx$ + 1;
-						const token = {
-							type: "expression",
-							expression,
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					i = start + 1;
-					textStart = start;
-					continue;
-				}
-				if (charAfter === "_") {
-					i = afterSelectors + 1;
-					const nameStart = i;
-					while (i < input.length && /[\w.]/.test(input[i])) i++;
-					const name = input.slice(nameStart, i);
-					if (input[i] === "}") {
-						i++;
-						const token = {
-							type: "variable",
-							name,
-							scope: "temporary",
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					const closeIdx_ = scanBalancedBrace(input, nameStart - 1, memo);
-					if (closeIdx_ !== -1) {
-						const expression = input.slice(afterSelectors, closeIdx_);
-						i = closeIdx_ + 1;
-						const token = {
-							type: "expression",
-							expression,
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					i = start + 1;
-					textStart = start;
-					continue;
-				}
-				if (charAfter === "@") {
-					i = afterSelectors + 1;
-					const nameStart = i;
-					while (i < input.length && /[\w.]/.test(input[i])) i++;
-					const name = input.slice(nameStart, i);
-					if (input[i] === "}") {
-						i++;
-						const token = {
-							type: "variable",
-							name,
-							scope: "local",
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					const closeIdx_at = scanBalancedBrace(input, nameStart - 1, memo);
-					if (closeIdx_at !== -1) {
-						const expression = input.slice(afterSelectors, closeIdx_at);
-						i = closeIdx_at + 1;
-						const token = {
-							type: "expression",
-							expression,
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					i = start + 1;
-					textStart = start;
-					continue;
-				}
-				if (charAfter === "%") {
-					i = afterSelectors + 1;
-					const nameStart = i;
-					while (i < input.length && /[\w.]/.test(input[i])) i++;
-					const name = input.slice(nameStart, i);
-					if (input[i] === "}") {
-						i++;
-						const token = {
-							type: "variable",
-							name,
-							scope: "transient",
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					const closeIdx_pct = scanBalancedBrace(input, nameStart - 1, memo);
-					if (closeIdx_pct !== -1) {
-						const expression = input.slice(afterSelectors, closeIdx_pct);
-						i = closeIdx_pct + 1;
-						const token = {
-							type: "expression",
-							expression,
-							start,
-							end: i
-						};
-						if (className) token.className = className;
-						if (id) token.id = id;
-						tokens.push(token);
-						textStart = i;
-						continue;
-					}
-					i = start + 1;
-					textStart = start;
-					continue;
-				}
-				if (EXPRESSION_START.has(charAfter) && pushExpression(afterSelectors, start, false, className, id)) continue;
-				if (charAfter !== void 0 && /[a-zA-Z]/.test(charAfter)) {
-					const contentStart = afterSelectors;
-					const closeIdx = scanMacroClose(input, contentStart, memo);
-					if (closeIdx === -1) {
-						i = start + 1;
-						textStart = start;
-						continue;
-					}
-					const content = input.slice(contentStart, closeIdx);
-					i = closeIdx + 1;
-					const { name, rawArgs, isClose } = parseMacroContent(content);
-					const token = {
-						type: "macro",
-						name,
-						rawArgs,
-						isClose,
-						start,
-						end: i
-					};
-					if (className) token.className = className;
-					if (id) token.id = id;
-					tokens.push(token);
-					textStart = i;
-					consumeRawBody(name, isClose);
-					continue;
-				}
-				i = start + 1;
-				textStart = start;
-				continue;
+			const { selectors, end: at } = parseSelectors(input, i + 1);
+			const prefixed = at > i + 1;
+			if (prefixed) flushText(start);
+			const c = input[at];
+			if (isSigil(c)) {
+				flushText(start);
+				if (pushVariable(at, start, selectors)) continue;
+			} else if (EXPRESSION_START.has(c)) {
+				if (pushExpression(at, start, selectors)) continue;
+			} else if (c !== void 0 && (/[a-zA-Z]/.test(c) || c === "/" && !prefixed)) {
+				flushText(start);
+				if (pushMacro(at, start, selectors)) continue;
 			}
-			if (nextChar === "$") {
-				flushText(i);
-				i += 2;
-				const nameStart = i;
-				while (i < input.length && /[\w.]/.test(input[i])) i++;
-				const name = input.slice(nameStart, i);
-				if (input[i] === "}") {
-					i++;
-					tokens.push({
-						type: "variable",
-						name,
-						scope: "variable",
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				const closeIdx = scanBalancedBrace(input, nameStart - 1, memo);
-				if (closeIdx !== -1) {
-					const expression = input.slice(start + 1, closeIdx);
-					i = closeIdx + 1;
-					tokens.push({
-						type: "expression",
-						expression,
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				i = start + 1;
-				textStart = start;
-				continue;
-			}
-			if (nextChar === "_") {
-				flushText(i);
-				i += 2;
-				const nameStart = i;
-				while (i < input.length && /[\w.]/.test(input[i])) i++;
-				const name = input.slice(nameStart, i);
-				if (input[i] === "}") {
-					i++;
-					tokens.push({
-						type: "variable",
-						name,
-						scope: "temporary",
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				const closeIdx = scanBalancedBrace(input, nameStart - 1, memo);
-				if (closeIdx !== -1) {
-					const expression = input.slice(start + 1, closeIdx);
-					i = closeIdx + 1;
-					tokens.push({
-						type: "expression",
-						expression,
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				i = start + 1;
-				textStart = start;
-				continue;
-			}
-			if (nextChar === "@") {
-				flushText(i);
-				i += 2;
-				const nameStart = i;
-				while (i < input.length && /[\w.]/.test(input[i])) i++;
-				const name = input.slice(nameStart, i);
-				if (input[i] === "}") {
-					i++;
-					tokens.push({
-						type: "variable",
-						name,
-						scope: "local",
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				const closeIdx = scanBalancedBrace(input, nameStart - 1, memo);
-				if (closeIdx !== -1) {
-					const expression = input.slice(start + 1, closeIdx);
-					i = closeIdx + 1;
-					tokens.push({
-						type: "expression",
-						expression,
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				i = start + 1;
-				textStart = start;
-				continue;
-			}
-			if (nextChar === "%") {
-				flushText(i);
-				i += 2;
-				const nameStart = i;
-				while (i < input.length && /[\w.]/.test(input[i])) i++;
-				const name = input.slice(nameStart, i);
-				if (input[i] === "}") {
-					i++;
-					tokens.push({
-						type: "variable",
-						name,
-						scope: "transient",
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				const closeIdx = scanBalancedBrace(input, nameStart - 1, memo);
-				if (closeIdx !== -1) {
-					const expression = input.slice(start + 1, closeIdx);
-					i = closeIdx + 1;
-					tokens.push({
-						type: "expression",
-						expression,
-						start,
-						end: i
-					});
-					textStart = i;
-					continue;
-				}
-				i = start + 1;
-				textStart = start;
-				continue;
-			}
-			if (EXPRESSION_START.has(nextChar)) {
-				if (pushExpression(i + 1, start, true)) continue;
-				i++;
-				continue;
-			}
-			if (nextChar !== void 0 && (nextChar === "/" || /[a-zA-Z]/.test(nextChar))) {
-				flushText(i);
-				const contentStart = i + 1;
-				const closeIdx = scanMacroClose(input, contentStart, memo);
-				if (closeIdx === -1) {
-					i = start + 1;
-					textStart = start;
-					continue;
-				}
-				const content = input.slice(contentStart, closeIdx);
-				i = closeIdx + 1;
-				const { name, rawArgs, isClose } = parseMacroContent(content);
-				tokens.push({
-					type: "macro",
-					name,
-					rawArgs,
-					isClose,
-					start,
-					end: i
-				});
-				textStart = i;
-				consumeRawBody(name, isClose);
-				continue;
-			}
-			i++;
+			i = start + 1;
 			continue;
 		}
 		if (!textMode && input[i] === "<") {
@@ -2550,11 +2243,10 @@ function tokenize(input, options = {}) {
 					j++;
 					flushText(start);
 					if (HTML_VOID_TAGS.has(tagLower)) {
-						textStart = j;
-						i = j;
+						i = textStart = j;
 						continue;
 					}
-					tokens.push({
+					emit({
 						type: "html",
 						tag,
 						attributes: {},
@@ -2563,8 +2255,6 @@ function tokenize(input, options = {}) {
 						start,
 						end: j
 					});
-					textStart = j;
-					i = j;
 					continue;
 				}
 			} else {
@@ -2578,7 +2268,7 @@ function tokenize(input, options = {}) {
 				if (input[j] === ">") {
 					j++;
 					flushText(start);
-					tokens.push({
+					emit({
 						type: "html",
 						tag,
 						attributes: parseHtmlAttributes(input, attrsStart, memo).attributes,
@@ -2587,8 +2277,6 @@ function tokenize(input, options = {}) {
 						start,
 						end: j
 					});
-					textStart = j;
-					i = j;
 					continue;
 				}
 			}
@@ -2644,6 +2332,21 @@ var BRANCHING_BLOCK_MACROS = new Set([
 function quoteArg(value) {
 	return `"${value.replace(/[\\"]/g, "\\$&")}"`;
 }
+/** A new branch for the macro token opening it, with its selectors. */
+function newBranch(token) {
+	return withSelectors({
+		rawArgs: token.rawArgs,
+		children: []
+	}, token);
+}
+/** The name of a macro or HTML element. */
+function tagName(tagged) {
+	return tagged.type === "html" ? tagged.tag : tagged.name;
+}
+/** The tag closing a macro or HTML element, as written in markup. */
+function closerOf(tagged) {
+	return tagged.type === "html" ? `</${tagged.tag}>` : `{/${tagged.name}}`;
+}
 /**
 * Build an AST from a token array. Block macros are nested into trees
 * using a stack. Throws on unclosed or mismatched macros.
@@ -2657,6 +2360,18 @@ function buildAST(tokens) {
 		if (top.type === "macro" && top.branches && top.branches.length > 0) return top.branches[top.branches.length - 1].children;
 		return top.children;
 	}
+	/**
+	* Pop the node on top of the stack, which the closing `token` (`</b>`,
+	* `{/if}`) must close. Names match ignoring case.
+	*/
+	function close(token) {
+		const found = closerOf(token);
+		if (stack.length === 0) throw new Error(`Unexpected closing ${found} (at character ${token.start})`);
+		const top = stack[stack.length - 1];
+		if (top.node.type !== token.type || tagName(top.node).toLowerCase() !== tagName(token).toLowerCase()) throw new Error(`Expected ${closerOf(top.node)} but found ${found} (at character ${token.start})`);
+		stack.pop();
+		current().push(top.node);
+	}
 	for (const token of tokens) switch (token.type) {
 		case "text":
 			current().push({
@@ -2665,133 +2380,72 @@ function buildAST(tokens) {
 			});
 			break;
 		case "link": {
-			const macroNode = {
+			const rawArgs = `${quoteArg(token.display)} ${quoteArg(token.target)}`;
+			current().push(withSelectors({
 				type: "macro",
 				name: "link",
-				rawArgs: `${quoteArg(token.display)} ${quoteArg(token.target)}`,
+				rawArgs,
 				children: []
-			};
-			if (token.className) macroNode.className = token.className;
-			if (token.id) macroNode.id = token.id;
-			current().push(macroNode);
+			}, token));
 			break;
 		}
-		case "variable": {
-			const varNode = {
+		case "variable":
+			current().push(withSelectors({
 				type: "variable",
 				name: token.name,
 				scope: token.scope
-			};
-			if (token.className) varNode.className = token.className;
-			if (token.id) varNode.id = token.id;
-			current().push(varNode);
+			}, token));
 			break;
-		}
-		case "expression": {
-			const exprNode = {
+		case "expression":
+			current().push(withSelectors({
 				type: "expression",
 				expression: token.expression
-			};
-			if (token.className) exprNode.className = token.className;
-			if (token.id) exprNode.id = token.id;
-			current().push(exprNode);
+			}, token));
 			break;
-		}
 		case "html": {
-			if (token.isSelfClose) {
-				current().push({
-					type: "html",
-					tag: token.tag,
-					attributes: token.attributes,
-					children: []
-				});
-				break;
-			}
-			if (token.isClose) {
-				if (stack.length === 0) throw new Error(`Unexpected closing </${token.tag}> (at character ${token.start})`);
-				const top = stack[stack.length - 1];
-				if (top.node.type !== "html" || top.node.tag.toLowerCase() !== token.tag.toLowerCase()) {
-					const expected = top.node.type === "html" ? `</${top.node.tag}>` : `{/${top.node.name}}`;
-					throw new Error(`Expected ${expected} but found </${token.tag}> (at character ${token.start})`);
-				}
-				stack.pop();
-				current().push(top.node);
-				break;
-			}
 			const htmlNode = {
 				type: "html",
 				tag: token.tag,
 				attributes: token.attributes,
 				children: []
 			};
-			stack.push({
+			if (token.isSelfClose) current().push(htmlNode);
+			else if (token.isClose) close(token);
+			else stack.push({
 				node: htmlNode,
 				start: token.start
 			});
 			break;
 		}
 		case "macro": {
-			const name = token.name.toLowerCase();
 			if (token.isClose) {
-				if (stack.length === 0) throw new Error(`Unexpected closing {/${token.name}} (at character ${token.start})`);
-				const top = stack[stack.length - 1];
-				if (top.node.type !== "macro" || top.node.name !== name) {
-					const expected = top.node.type === "macro" ? `{/${top.node.name}}` : `</${top.node.tag}>`;
-					throw new Error(`Expected ${expected} but found {/${token.name}} (at character ${token.start})`);
-				}
-				stack.pop();
-				current().push(top.node);
+				close(token);
 				break;
 			}
+			const name = token.name.toLowerCase();
 			const expectedParent = Object.prototype.hasOwnProperty.call(BRANCH_PARENT, name) ? BRANCH_PARENT[name] : void 0;
 			if (expectedParent) {
 				const topNode = stack.length > 0 ? stack[stack.length - 1].node : null;
 				if (!topNode || topNode.type !== "macro" || topNode.name !== expectedParent) throw new Error(`{${token.name}} without matching {${expectedParent}} (at character ${token.start})`);
-				const branch = {
-					rawArgs: token.rawArgs,
-					children: []
-				};
-				if (token.className) branch.className = token.className;
-				if (token.id) branch.id = token.id;
-				topNode.branches.push(branch);
+				topNode.branches.push(newBranch(token));
 				break;
 			}
-			if (BLOCK_MACROS.has(name)) {
-				const node = {
-					type: "macro",
-					name,
-					rawArgs: token.rawArgs,
-					children: []
-				};
-				if (BRANCHING_BLOCK_MACROS.has(name)) {
-					const firstBranch = {
-						rawArgs: token.rawArgs,
-						children: []
-					};
-					if (token.className) firstBranch.className = token.className;
-					if (token.id) firstBranch.id = token.id;
-					node.branches = [firstBranch];
-				} else {
-					if (token.className) node.className = token.className;
-					if (token.id) node.id = token.id;
-				}
-				stack.push({
-					node,
-					start: token.start
-				});
+			const node = {
+				type: "macro",
+				name,
+				rawArgs: token.rawArgs,
+				children: []
+			};
+			if (!BLOCK_MACROS.has(name)) {
+				current().push(withSelectors(node, token));
 				break;
 			}
-			{
-				const macroNode = {
-					type: "macro",
-					name,
-					rawArgs: token.rawArgs,
-					children: []
-				};
-				if (token.className) macroNode.className = token.className;
-				if (token.id) macroNode.id = token.id;
-				current().push(macroNode);
-			}
+			if (BRANCHING_BLOCK_MACROS.has(name)) node.branches = [newBranch(token)];
+			else withSelectors(node, token);
+			stack.push({
+				node,
+				start: token.start
+			});
 			break;
 		}
 		default: throw new Error(`Unknown token type: ${token.type}`);
@@ -2804,15 +2458,28 @@ function buildAST(tokens) {
 	return root;
 }
 //#endregion
+//#region src/hooks/use-story-fields.ts
+/**
+* Story state fields `keys`, re-rendering when any of them changes (as one
+* useStoryStore() selector per field would). The result keeps its identity
+* while the fields don't change, as the store's snapshot must.
+*/
+function useStoryFields(...keys) {
+	const prev = useRef();
+	return useStoryStore((s) => {
+		const next = {};
+		for (const key of keys) next[key] = s[key];
+		return shallow(prev.current, next) ? prev.current : prev.current = next;
+	});
+}
+//#endregion
 //#region src/hooks/use-merged-locals.ts
 /**
 * Return store variables, temporary, locals from context, and transient.
 * All four dicts use unprefixed keys suitable for evaluate/execute.
 */
 function useMergedLocals() {
-	const variables = useStoryStore((s) => s.variables);
-	const temporary = useStoryStore((s) => s.temporary);
-	const transient = useStoryStore((s) => s.transient);
+	const { variables, temporary, transient } = useStoryFields("variables", "temporary", "transient");
 	const localsValues = useContext(LocalsValuesContext);
 	return useMemo(() => {
 		return [
@@ -2957,21 +2624,38 @@ function getPRNGPull() {
 /** The variable name no namespace can hold. */
 var RESERVED_NAME = "__proto__";
 /**
-* Throw a TypeError if `name` (without its sigil) cannot be a variable
-* name. `label` is the name as the author wrote it (e.g. `$__proto__`).
+* Why `name` (without its sigil) cannot be a variable name, or undefined if
+* it can. `label` is the name as the author wrote it (e.g. `$__proto__`).
 */
+function variableNameError(name, label = name) {
+	return name === "__proto__" ? `"${label}" cannot be used as a variable name (${RESERVED_NAME} is reserved)` : void 0;
+}
+/** Throw a TypeError if `name` cannot be a variable name. */
 function checkVariableName(name, label = name) {
-	if (name === "__proto__") throw new TypeError(`spindle: "${label}" cannot be used as a variable name (${RESERVED_NAME} is reserved)`);
+	const error = variableNameError(name, label);
+	if (error) throw new TypeError(`spindle: ${error}`);
 }
-/** A namespace with no prototype holding the own entries of `sources`. */
-function createNamespace(...sources) {
-	const ns = Object.create(null);
+/** Whether `obj` holds `key` as an own property. */
+var hasOwn$2 = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
+/** `ns[key]` if `ns` holds it as an own property, else undefined. */
+var ownValue = (ns, key) => ns && hasOwn$2(ns, key) ? ns[key] : void 0;
+/**
+* A record with no prototype holding the own entries of `sources`, or only
+* those whose value passes `keep`.
+*/
+function ownEntries(sources, keep = () => true) {
+	const record = Object.create(null);
 	for (const source of sources) {
 		if (!source) continue;
-		for (const key of Object.keys(source)) ns[key] = source[key];
+		for (const key of Object.keys(source)) {
+			const value = source[key];
+			if (keep(value)) record[key] = value;
+		}
 	}
-	return ns;
+	return record;
 }
+/** A namespace with no prototype holding the own entries of `sources`. */
+var createNamespace = (...sources) => ownEntries(sources);
 /** Whether `value` is an object with no prototype. */
 var isNamespace = (value) => Object.getPrototypeOf(value) === null;
 /** `ns` itself if it has no prototype, else a namespace copy of it. */
@@ -2984,15 +2668,14 @@ function withEntry(ns, key, value) {
 }
 /** An empty namespace that cannot change. */
 var EMPTY_NAMESPACE = Object.freeze(createNamespace());
-/** `ns[key]` if `ns` holds it as an own property, else undefined. */
-var ownValue = (ns, key) => Object.prototype.hasOwnProperty.call(ns, key) ? ns[key] : void 0;
-//#endregion
-//#region src/utils/counts.ts
+/** The names whose own entries differ between `a` and `b`, `a`'s first. */
+function changedNames(a, b) {
+	return [...new Set([...Object.keys(a), ...Object.keys(b)])].filter((name) => ownValue(a, name) !== ownValue(b, name));
+}
 var isCount = (value) => typeof value === "number" && Number.isInteger(value) && value >= 0;
 /** The count of `name` in `counts`: its own entry, or 0. */
 function countOf(counts, name) {
-	if (!counts || !Object.prototype.hasOwnProperty.call(counts, name)) return 0;
-	const value = counts[name];
+	const value = ownValue(counts, name);
 	return isCount(value) ? value : 0;
 }
 /**
@@ -3002,11 +2685,7 @@ function countOf(counts, name) {
 * more than counting in place.
 */
 function createCounts(source, name) {
-	const counts = Object.create(null);
-	if (source) for (const key of Object.keys(source)) {
-		const value = source[key];
-		if (isCount(value)) counts[key] = value;
-	}
+	const counts = ownEntries([source], isCount);
 	if (name !== void 0) counts[name] = countOf(source, name) + 1;
 	return counts;
 }
@@ -3045,7 +2724,8 @@ function transform(expr, goal = "expression") {
 			result += text;
 		},
 		variable(sigil, name) {
-			if (name === "__proto__") throw new SyntaxError(`spindle: "${sigil}${name}" cannot be used as a variable name (${RESERVED_NAME} is reserved)`);
+			const error = variableNameError(name, sigil + name);
+			if (error) throw new SyntaxError(`spindle: ${error}`);
 			if (IDENT_END_RE.test(result.slice(-2))) result += " ";
 			result += `${NAMESPACES$1[sigil]}["${name}"]`;
 		}
@@ -3068,41 +2748,50 @@ function getOrCompile(key, body) {
 	}
 	return fn;
 }
+/** The passage being shown. */
+function currentPassage() {
+	const s = useStoryStore.getState();
+	return s.storyData?.passages.get(s.currentPassage);
+}
+/** The passage shown before the current one in history. */
+function previousPassage() {
+	const s = useStoryStore.getState();
+	if (s.historyIndex <= 0) return void 0;
+	const prevName = s.history[s.historyIndex - 1]?.passage;
+	return prevName ? s.storyData?.passages.get(prevName) : void 0;
+}
+/**
+* visited()/rendered() and their has-forms, counting in the counters
+* `counts()` returns. A missing name means the current passage.
+*/
+function countQueries(counts) {
+	const count = (name) => countOf(counts(), name ?? useStoryStore.getState().currentPassage);
+	return {
+		count,
+		has: (name) => count(name) > 0,
+		any: (...names) => names.some((n) => count(n) > 0),
+		all: (...names) => names.every((n) => count(n) > 0)
+	};
+}
 var cachedFns = null;
 var cachedVisitCounts = null;
 var cachedRenderCounts = null;
 function buildExpressionFns() {
 	const { visitCounts, renderCounts } = useStoryStore.getState();
 	if (cachedFns && cachedVisitCounts === visitCounts && cachedRenderCounts === renderCounts) return cachedFns;
-	const visited = (name) => countOf(visitCounts, name ?? useStoryStore.getState().currentPassage);
-	const hasVisited = (name) => visited(name) > 0;
-	const hasVisitedAny = (...names) => names.some((n) => visited(n) > 0);
-	const hasVisitedAll = (...names) => names.every((n) => visited(n) > 0);
-	const rendered = (name) => countOf(renderCounts, name ?? useStoryStore.getState().currentPassage);
-	const hasRendered = (name) => rendered(name) > 0;
-	const hasRenderedAny = (...names) => names.some((n) => rendered(n) > 0);
-	const hasRenderedAll = (...names) => names.every((n) => rendered(n) > 0);
-	const currentPassage = () => {
-		const s = useStoryStore.getState();
-		return s.storyData?.passages.get(s.currentPassage);
-	};
-	const previousPassage = () => {
-		const s = useStoryStore.getState();
-		if (s.historyIndex <= 0) return void 0;
-		const prevName = s.history[s.historyIndex - 1]?.passage;
-		return prevName ? s.storyData?.passages.get(prevName) : void 0;
-	};
+	const visits = countQueries(() => visitCounts);
+	const renders = countQueries(() => renderCounts);
 	cachedFns = {
 		currentPassage,
 		previousPassage,
-		visited,
-		hasVisited,
-		hasVisitedAny,
-		hasVisitedAll,
-		rendered,
-		hasRendered,
-		hasRenderedAny,
-		hasRenderedAll,
+		visited: visits.count,
+		hasVisited: visits.has,
+		hasVisitedAny: visits.any,
+		hasVisitedAll: visits.all,
+		rendered: renders.count,
+		hasRendered: renders.has,
+		hasRenderedAny: renders.any,
+		hasRenderedAll: renders.all,
 		random,
 		randomInt
 	};
@@ -3427,12 +3116,6 @@ var MAX_DEPTH = 100;
 function display(value) {
 	return value == null ? "" : String(value);
 }
-var KIND_SIGILS = {
-	variable: "$",
-	temporary: "_",
-	local: "@",
-	transient: "%"
-};
 /**
 * The value of a variable reference (`name` without its sigil, with an
 * optional dot path), as `{$name}` shows it in passage text (see
@@ -3442,7 +3125,7 @@ var KIND_SIGILS = {
 function resolveVariable(scope, kind, name) {
 	const parts = name.split(".");
 	const root = parts[0];
-	checkVariableName(root, KIND_SIGILS[kind] + root);
+	checkVariableName(root, SCOPE_SIGILS[kind] + root);
 	let value = ownValue(kind === "variable" ? scope.variables : kind === "temporary" ? scope.temporary : kind === "transient" ? scope.transient : scope.locals, root);
 	for (let i = 1; i < parts.length; i++) {
 		if (value == null) return void 0;
@@ -3492,7 +3175,7 @@ var TextEvaluator = class {
 			return display(resolveVariable(scope, kind, name));
 		} catch (error) {
 			this.errors.push({
-				macro: KIND_SIGILS[kind] + name,
+				macro: SCOPE_SIGILS[kind] + name,
 				error
 			});
 			return "";
@@ -3600,12 +3283,6 @@ function interpolateText(template, scope) {
 	};
 	return renderText(parsed.nodes, scope);
 }
-var SIGIL_KINDS = {
-	$: "variable",
-	_: "temporary",
-	"@": "local",
-	"%": "transient"
-};
 /**
 * Resolve the sigil references in the value of a code attribute (see
 * isCodeAttribute): `{$x}`, `{_x.y}`, `{$n + 1}`. Everything else, other
@@ -3618,7 +3295,7 @@ function interpolateCode(template, scope, decode) {
 	for (const part of splitSigilTemplate(template)) if ("text" in part) text += decode ? decode(part.text) : part.text;
 	else if ("verbatim" in part) text += part.verbatim;
 	else if (/^[$_@%][\w.]+$/.test(part.expr)) {
-		const kind = SIGIL_KINDS[part.expr[0]];
+		const kind = SIGIL_SCOPES[part.expr[0]];
 		try {
 			text += display(resolveVariable(scope, kind, part.expr.slice(1)));
 		} catch (error) {
@@ -3700,6 +3377,11 @@ var SIGILS = {
 	local: "@",
 	transient: "%"
 };
+var STORE_NAMESPACES = {
+	variable: "variables",
+	temporary: "temporary",
+	transient: "transient"
+};
 function VarDisplay({ name, scope, className, id }) {
 	const resolve = useInterpolate();
 	className = resolve(className);
@@ -3707,10 +3389,11 @@ function VarDisplay({ name, scope, className, id }) {
 	const localsValues = useContext(LocalsValuesContext);
 	const parts = name.split(".");
 	const root = parts[0];
-	const storeValue = useStoryStore((s) => scope === "variable" ? ownValue(s.variables, root) : scope === "temporary" ? ownValue(s.temporary, root) : scope === "transient" ? ownValue(s.transient, root) : void 0);
-	if (root === "__proto__") return /* @__PURE__ */ jsx("span", {
+	const storeValue = useStoryStore((s) => scope === "local" ? void 0 : ownValue(s[STORE_NAMESPACES[scope]], root));
+	const nameError = variableNameError(root, SIGILS[scope] + root);
+	if (nameError) return /* @__PURE__ */ jsx("span", {
 		class: "error",
-		children: `{${SIGILS[scope]}${name} error: "${SIGILS[scope]}${root}" cannot be used as a variable name (${RESERVED_NAME} is reserved)}`
+		children: `{${SIGILS[scope]}${name} error: ${nameError}}`
 	});
 	let value;
 	if (scope === "local") value = ownValue(localsValues, root);
@@ -3737,10 +3420,7 @@ function ExprDisplay({ expression, className, id }) {
 	const resolve = useInterpolate();
 	className = resolve(className);
 	id = resolve(id);
-	const localsValues = useContext(LocalsValuesContext);
-	const variables = useStoryStore((s) => s.variables);
-	const temporary = useStoryStore((s) => s.temporary);
-	const transient = useStoryStore((s) => s.transient);
+	const [variables, temporary, localsValues, transient] = useMergedLocals();
 	let display;
 	try {
 		const value = evaluate(expression, variables, temporary, localsValues, transient);
@@ -5049,10 +4729,14 @@ function on(event, cb) {
 		set.delete(cb);
 	};
 }
-function emit(event, ...args) {
+/** Call `call` with each listener of `event`. */
+function forEachListener(event, call) {
 	const set = listeners.get(event);
 	if (!set) return;
-	for (const cb of [...set]) cb(...args);
+	for (const cb of [...set]) call(cb);
+}
+function emit(event, ...args) {
+	forEachListener(event, (cb) => cb(...args));
 }
 /**
 * Emit an event from inside a render commit (layout effect). A throwing
@@ -5060,13 +4744,13 @@ function emit(event, ...args) {
 * 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);
-	}
+	forEachListener(event, (cb) => {
+		try {
+			cb(...args);
+		} catch (err) {
+			console.error(`spindle: Error in ${event} handler:`, err);
+		}
+	});
 }
 //#endregion
 //#region src/saves/save-manager.ts
@@ -5784,7 +5468,6 @@ function initializeStory(session) {
 }
 //#endregion
 //#region src/utils/object-path.ts
-var hasOwn$2 = (obj, key) => Object.prototype.hasOwnProperty.call(obj, key);
 /**
 * Traverse dot-path segments on an object and return the nested value.
 * Members of Object.prototype (`constructor`, `toString`, `__proto__`, ...)
@@ -7638,9 +7321,7 @@ function TriggerDialogHost() {
 //#endregion
 //#region src/components/App.tsx
 function App() {
-	const storyData = useStoryStore((s) => s.storyData);
-	const currentPassage = useStoryStore((s) => s.currentPassage);
-	const nobr = useStoryStore((s) => s.nobr);
+	const { storyData, currentPassage, nobr } = useStoryFields("storyData", "currentPassage", "nobr");
 	useEffect(() => {
 		const onKeyDown = (e) => {
 			const { quickSaveKey, quickLoadKey, save, load } = useStoryStore.getState();
@@ -7759,45 +7440,47 @@ function loadFromStorage() {
 		}
 	} catch {}
 }
+/** Register a setting, starting from its default unless it has a value. */
+function define(name, def) {
+	definitions.set(name, def);
+	if (!hasOwn$2(values, name)) values[name] = def.config.default;
+	loadFromStorage();
+}
+/** The value of setting `name` if it has the type of `fallback`, else that. */
+function valueOf(name, fallback) {
+	const v = ownValue(values, name);
+	return typeof v === typeof fallback ? v : fallback;
+}
 var settings = {
 	addToggle(name, config) {
-		definitions.set(name, {
+		define(name, {
 			type: "toggle",
 			config
 		});
-		if (!Object.prototype.hasOwnProperty.call(values, name)) values[name] = config.default;
-		loadFromStorage();
 	},
 	addList(name, config) {
-		definitions.set(name, {
+		define(name, {
 			type: "list",
 			config
 		});
-		if (!Object.prototype.hasOwnProperty.call(values, name)) values[name] = config.default;
-		loadFromStorage();
 	},
 	addRange(name, config) {
-		definitions.set(name, {
+		define(name, {
 			type: "range",
 			config
 		});
-		if (!Object.prototype.hasOwnProperty.call(values, name)) values[name] = config.default;
-		loadFromStorage();
 	},
 	get(name) {
 		return ownValue(values, name);
 	},
 	getToggle(name) {
-		const v = ownValue(values, name);
-		return typeof v === "boolean" ? v : false;
+		return valueOf(name, false);
 	},
 	getList(name) {
-		const v = ownValue(values, name);
-		return typeof v === "string" ? v : "";
+		return valueOf(name, "");
 	},
 	getRange(name) {
-		const v = ownValue(values, name);
-		return typeof v === "number" ? v : 0;
+		return valueOf(name, 0);
 	},
 	set(name, value) {
 		values[name] = value;
@@ -8096,26 +7779,17 @@ function ensureVariableChangedSubscription() {
 	let prevTrans = useStoryStore.getState().transient;
 	useStoryStore.subscribe((state) => {
 		const changed = {};
-		let hasChanges = false;
-		const allVarKeys = new Set([...Object.keys(prevVars), ...Object.keys(state.variables)]);
-		for (const key of allVarKeys) if (state.variables[key] !== prevVars[key]) {
-			changed[key] = {
-				from: prevVars[key],
-				to: state.variables[key]
+		const collect = (prev, next, prefix) => {
+			for (const key of changedNames(prev, next)) changed[prefix + key] = {
+				from: ownValue(prev, key),
+				to: ownValue(next, key)
 			};
-			hasChanges = true;
-		}
-		const allTransKeys = new Set([...Object.keys(prevTrans), ...Object.keys(state.transient)]);
-		for (const key of allTransKeys) if (state.transient[key] !== prevTrans[key]) {
-			changed[`%${key}`] = {
-				from: prevTrans[key],
-				to: state.transient[key]
-			};
-			hasChanges = true;
-		}
+		};
+		collect(prevVars, state.variables, "");
+		collect(prevTrans, state.transient, "%");
 		prevVars = state.variables;
 		prevTrans = state.transient;
-		if (hasChanges) emit("variableChanged", changed);
+		if (Object.keys(changed).length > 0) emit("variableChanged", changed);
 	});
 }
 var declaredVariables = null;
@@ -8160,13 +7834,15 @@ function setOne(draft, name, value) {
 	else namespace[key] = value;
 }
 function createStoryAPI() {
+	const visits = countQueries(() => useStoryStore.getState().visitCounts);
+	const renders = countQueries(() => useStoryStore.getState().renderCounts);
 	return {
 		get(name) {
 			const { isTransient, key } = parseName(name);
 			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];
+			const value = key.includes(".") ? getByPath(namespace, key.split(".")) : ownValue(namespace, key);
 			return scope ? frozenCopy(value) : value;
 		},
 		set(nameOrVars, value) {
@@ -8215,46 +7891,16 @@ function createStoryAPI() {
 		importSave(data, slot) {
 			return useStoryStore.getState().importSave(data, slot);
 		},
-		visited(name) {
-			const state = useStoryStore.getState();
-			return countOf(state.visitCounts, name ?? state.currentPassage);
-		},
-		hasVisited(name) {
-			return this.visited(name) > 0;
-		},
-		hasVisitedAny(...names) {
-			const { visitCounts } = useStoryStore.getState();
-			return names.some((n) => countOf(visitCounts, n) > 0);
-		},
-		hasVisitedAll(...names) {
-			const { visitCounts } = useStoryStore.getState();
-			return names.every((n) => countOf(visitCounts, n) > 0);
-		},
-		rendered(name) {
-			const state = useStoryStore.getState();
-			return countOf(state.renderCounts, name ?? state.currentPassage);
-		},
-		hasRendered(name) {
-			return this.rendered(name) > 0;
-		},
-		hasRenderedAny(...names) {
-			const { renderCounts } = useStoryStore.getState();
-			return names.some((n) => countOf(renderCounts, n) > 0);
-		},
-		hasRenderedAll(...names) {
-			const { renderCounts } = useStoryStore.getState();
-			return names.every((n) => countOf(renderCounts, n) > 0);
-		},
-		currentPassage() {
-			const state = useStoryStore.getState();
-			return state.storyData?.passages.get(state.currentPassage);
-		},
-		previousPassage() {
-			const state = useStoryStore.getState();
-			if (state.historyIndex <= 0) return void 0;
-			const prevName = state.history[state.historyIndex - 1]?.passage;
-			return prevName ? state.storyData?.passages.get(prevName) : void 0;
-		},
+		visited: visits.count,
+		hasVisited: visits.has,
+		hasVisitedAny: visits.any,
+		hasVisitedAll: visits.all,
+		rendered: renders.count,
+		hasRendered: renders.has,
+		hasRenderedAny: renders.any,
+		hasRenderedAll: renders.all,
+		currentPassage,
+		previousPassage,
 		get title() {
 			return useStoryStore.getState().storyData?.name || "";
 		},
@@ -8492,7 +8138,8 @@ function parseStoryVariables(content, sigil = "$") {
 		const match = line.match(DECLARATION_RE);
 		if (!match) throw new Error(`${passageName}: Invalid declaration: "${line}". Expected: ${sigil}name = value`);
 		const [, name, expr] = match;
-		if (name === "__proto__") throw new Error(`${passageName}: "${sigil}${name}" cannot be used as a variable name (${RESERVED_NAME} is reserved)`);
+		const nameError = variableNameError(name, sigil + name);
+		if (nameError) throw new Error(`${passageName}: ${nameError}`);
 		let value;
 		try {
 			value = new Function("return (" + expr + ")")();
@@ -8535,7 +8182,8 @@ function extractForLocals(content) {
 function validateRef(ref, schema, forLocals) {
 	const parts = ref.split(".");
 	const rootName = parts[0];
-	if (rootName === "__proto__") return `"$${rootName}" cannot be used as a variable name (${RESERVED_NAME} is reserved)`;
+	const nameError = variableNameError(rootName, "$" + rootName);
+	if (nameError) return nameError;
 	if (forLocals.has(rootName)) return null;
 	const rootSchema = schema.get(rootName);
 	if (!rootSchema) return `Undeclared variable: $${ref}`;
@@ -8713,6 +8361,56 @@ function astContainsChildren(nodes) {
 	return false;
 }
 //#endregion
+//#region src/components/macros/Widget.tsx
+/**
+* Read the arguments of a {widget} definition: its name (quotes dropped)
+* and its parameters, the words after it that start with one of the
+* characters of `sigils`.
+*/
+function parseWidgetDef(rawArgs, sigils = "@") {
+	const [first, ...rest] = rawArgs.trim().split(/\s+/);
+	return {
+		name: first.replace(/["']/g, ""),
+		params: rest.filter((word) => sigils.includes(word[0]))
+	};
+}
+defineMacro({
+	name: "widget",
+	block: true,
+	render({ rawArgs, children = [] }, ctx) {
+		let parsed;
+		let error;
+		try {
+			const def = parseWidgetDef(rawArgs);
+			for (const param of def.params) checkVariableName(param.slice(1), param);
+			parsed = def;
+		} catch (err) {
+			error = err;
+		}
+		const { name, params } = parsed ?? {
+			name: "",
+			params: []
+		};
+		const childrenKey = JSON.stringify(children);
+		const paramsKey = params.join(",");
+		ctx.hooks.useLayoutEffect(() => {
+			if (!parsed) return;
+			const isBlock = astContainsChildren(children);
+			registerWidget(name, children, params, isBlock);
+			if (isBlock) registerBlockMacro(name);
+		}, [
+			name,
+			childrenKey,
+			paramsKey
+		]);
+		if (error) return /* @__PURE__ */ jsx(MacroError, {
+			macro: "widget",
+			error
+		});
+		return null;
+	}
+});
+//#endregion
 //#region src/components/macros/Set.tsx
 defineMacro({
 	name: "set",
@@ -9159,7 +8857,7 @@ defineMacro({
 function liveLocalsView(getValues) {
 	return new Proxy(createNamespace(), {
 		get: (_, key) => typeof key === "string" ? ownValue(getValues(), key) : void 0,
-		has: (_, key) => typeof key === "string" && Object.prototype.hasOwnProperty.call(getValues(), key),
+		has: (_, key) => typeof key === "string" && hasOwn$2(getValues(), key),
 		ownKeys: () => Reflect.ownKeys(getValues()),
 		getOwnPropertyDescriptor: (_, key) => {
 			const desc = Object.getOwnPropertyDescriptor(getValues(), key);
@@ -9507,52 +9205,6 @@ defineMacro({
 	}
 });
 //#endregion
-//#region src/components/macros/Widget.tsx
-function parseWidgetDef(rawArgs) {
-	const tokens = rawArgs.trim().split(/\s+/);
-	const name = tokens[0].replace(/["']/g, "");
-	const params = tokens.slice(1).filter((t) => t.startsWith("@"));
-	for (const param of params) checkVariableName(param.slice(1), param);
-	return {
-		name,
-		params
-	};
-}
-defineMacro({
-	name: "widget",
-	block: true,
-	render({ rawArgs, children = [] }, ctx) {
-		let parsed;
-		let error;
-		try {
-			parsed = parseWidgetDef(rawArgs);
-		} catch (err) {
-			error = err;
-		}
-		const { name, params } = parsed ?? {
-			name: "",
-			params: []
-		};
-		const childrenKey = JSON.stringify(children);
-		const paramsKey = params.join(",");
-		ctx.hooks.useLayoutEffect(() => {
-			if (!parsed) return;
-			const isBlock = astContainsChildren(children);
-			registerWidget(name, children, params, isBlock);
-			if (isBlock) registerBlockMacro(name);
-		}, [
-			name,
-			childrenKey,
-			paramsKey
-		]);
-		if (error) return /* @__PURE__ */ jsx(MacroError, {
-			macro: "widget",
-			error
-		});
-		return null;
-	}
-});
-//#endregion
 //#region src/components/macros/StoryTitle.tsx
 defineMacro({
 	name: "story-title",
@@ -9631,10 +9283,13 @@ defineMenubarAction({
 	name: "quicksave",
 	label: "QuickSave",
 	actionType: "save",
-	setup: () => ({
-		perform: useStoryStore((s) => s.save),
-		title: hotkeyTitle("Quick Save", useStoryStore((s) => s.quickSaveKey))
-	})
+	setup: () => {
+		const { save, quickSaveKey } = useStoryFields("save", "quickSaveKey");
+		return {
+			perform: save,
+			title: hotkeyTitle("Quick Save", quickSaveKey)
+		};
+	}
 });
 defineMenubarAction({
 	name: "quickload",
@@ -9642,14 +9297,11 @@ defineMenubarAction({
 	actionType: "load",
 	confirm: "Load saved game? Current progress will be lost.",
 	setup: () => {
-		const load = useStoryStore((s) => s.load);
-		const hasSave = useStoryStore((s) => s.hasSave);
-		const key = useStoryStore((s) => s.quickLoadKey);
-		useStoryStore((s) => s.knownSaves);
+		const { load, hasSave, quickLoadKey } = useStoryFields("load", "hasSave", "quickLoadKey", "knownSaves");
 		return {
 			perform: () => load(),
 			disabled: !hasSave(),
-			title: hotkeyTitle("Quick Load", key)
+			title: hotkeyTitle("Quick Load", quickLoadKey)
 		};
 	}
 });
@@ -9737,10 +9389,7 @@ function SaveManagerContent() {
 	const renameInputRef = useRef(null);
 	const fileInputRef = useRef(null);
 	const closeDialog = useContext(DialogCloseContext);
-	const storyData = useStoryStore((s) => s.storyData);
-	const playthroughId = useStoryStore((s) => s.playthroughId);
-	const beginSave = useStoryStore((s) => s.beginSave);
-	const loadFromPayload = useStoryStore((s) => s.loadFromPayload);
+	const { storyData, playthroughId, beginSave, loadFromPayload } = useStoryFields("storyData", "playthroughId", "beginSave", "loadFromPayload");
 	const ifid = storyData?.ifid ?? "";
 	const refresh = useCallback(async () => {
 		if (!ifid) return;
@@ -10680,10 +10329,7 @@ defineMacro({
 	name: "passage",
 	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 { currentPassage, navigationId, storyData, renderDeferred } = useStoryFields("currentPassage", "navigationId", "storyData", "renderDeferred");
 		const [displayed, setDisplayed] = useState({
 			passage: currentPassage,
 			id: navigationId
@@ -11004,9 +10650,7 @@ function boot() {
 	for (const [, passage] of storyData.passages) if (passage.tags.includes("widget")) {
 		const widgetAST = buildAST(tokenize(passage.content));
 		for (const node of widgetAST) if (node.type === "macro" && node.name === "widget" && node.rawArgs) {
-			const tokens2 = node.rawArgs.trim().split(/\s+/);
-			const widgetName = tokens2[0].replace(/["']/g, "");
-			const params = tokens2.slice(1).filter((t) => t.startsWith("$") || t.startsWith("_") || t.startsWith("@"));
+			const { name: widgetName, params } = parseWidgetDef(node.rawArgs, "$_@");
 			const children = node.children;
 			const isBlock = astContainsChildren(children);
 			try {