@rohal12/spindle 0.52.7 → 0.52.9

package/dist/pkg/headless.js

@@ -52,6 +52,19 @@ var hasOwn = (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(ns, key) ? ns[key] : void 0;
 /**
+* Set an own enumerable property. A "__proto__" key is defined as an own
+* property (as JSON.parse does) instead of replacing the prototype.
+*/
+function setOwn(target, key, value) {
+	if (key === "__proto__") Object.defineProperty(target, key, {
+		value,
+		enumerable: true,
+		writable: true,
+		configurable: true
+	});
+	else target[key] = value;
+}
+/**
 * A record with no prototype holding the own entries of `sources`, or only
 * those whose value passes `keep`.
 */
@@ -102,441 +115,96 @@ function createCounts(source, name) {
 	return counts;
 }
 //#endregion
-//#region src/utils/object-path.ts
-/**
-* Traverse dot-path segments on an object and return the nested value.
-* Members of Object.prototype (`constructor`, `toString`, `__proto__`, ...)
-* are not story state: unless an object holds one as its own property, it
-* reads as missing, as setByPath() treats it. Other inherited properties
-* (class getters, `size` of a Map) are read.
-*/
-function getByPath(obj, segments) {
-	let current = obj;
-	for (const seg of segments) {
-		if (current == null || typeof current !== "object") return void 0;
-		if (seg in Object.prototype && !hasOwn(current, seg)) return void 0;
-		current = current[seg];
-	}
-	return current;
-}
-/** Array indices ("0", "1", …) and "length": the keys an array holds. */
-var isArrayKey = (key) => key === "length" || /^(0|[1-9]\d*)$/.test(key);
-/**
-* Built-ins whose content is not their properties: a property written into
-* one would be dropped by clones and saves (and by Immer, for Map and Set).
-*/
-var builtinName = (value) => value instanceof Map ? "a Map" : value instanceof Set ? "a Set" : value instanceof Date ? "a Date" : value instanceof RegExp ? "a RegExp" : void 0;
-/**
-* Shallow copy that keeps the prototype, so a registered class instance
-* stays an instance of its class (with the same own keys deepClone copies).
-*/
-function shallowCopy(value) {
-	const copy = Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value));
-	for (const key of Object.keys(value)) Object.defineProperty(copy, key, {
-		value: value[key],
-		enumerable: true,
-		writable: true,
-		configurable: true
-	});
-	return copy;
-}
-/**
-* Set a value at dot-path `segments` below `root`.
-*
-* When `root` is an Immer draft, objects Immer does not draft (registered
-* class instances and everything below them) are copied on the way down and
-* the copy is assigned to its parent, so the write produces new references
-* up to the root. Writing into such an object directly would mutate the
-* instance shared with the previous state and with history, and subscribers
-* would see no change. Outside a draft (a private working copy) the path is
-* written in place.
-*
-* The path goes through own properties of plain objects, class instances
-* and arrays (by index); anything else throws a TypeError rather than
-* writing where no clone or save would see it: an inherited property such
-* as a method counts as missing, and Map, Set, Date and RegExp values and
-* other keys of arrays are refused, as is a "__proto__" segment.
-*/
-function setByPath(root, segments, value, options = {}) {
-	const parent = walkToParent(root, segments, options.createMissing ?? false);
-	parent[segments[segments.length - 1]] = value;
+//#region src/class-registry.ts
+var registry$1 = /* @__PURE__ */ new Map();
+var ctorToName = /* @__PURE__ */ new Map();
+function registerClass(name, ctor) {
+	registry$1.set(name, ctor);
+	ctorToName.set(ctor, name);
 }
 /**
-* Delete the property at dot-path `segments` below `root`, copying
-* undrafted objects on the way down like setByPath(). Does nothing when an
-* intermediate is missing or not an object, or the property is absent (or
-* only inherited).
+* The registered name of the class `value` is an instance of, or undefined.
+* Looks the constructor up on the prototype, so an own property named
+* "constructor" (plain data) cannot hide or fake the class.
 */
-function deleteByPath(root, segments) {
-	const last = segments[segments.length - 1];
-	checkSegments(segments);
-	let holder = root;
-	for (const seg of segments.slice(0, -1)) {
-		if (holder == null || typeof holder !== "object" || !hasOwn(holder, seg)) return;
-		holder = holder[seg];
-	}
-	if (holder == null || typeof holder !== "object" || !hasOwn(holder, last)) return;
-	const parent = walkToParent(root, segments, false);
-	delete parent[last];
-}
-/** Refuse a segment that would reach a prototype instead of story state. */
-function checkSegments(segments) {
-	if (segments.includes("__proto__")) throw new TypeError(`spindle: Cannot use "__proto__" in a variable path ("${segments.join(".")}")`);
+function registeredClassName(value) {
+	const proto = Object.getPrototypeOf(value);
+	return proto === null ? void 0 : ctorToName.get(proto.constructor);
 }
-/** Throw unless `holder` can take `key` as story state (see setByPath). */
-function checkHolder(holder, key, segments, depth) {
-	const kind = builtinName(holder) ?? (Array.isArray(holder) && !isArrayKey(key) ? "an array" : "");
-	if (kind) throw new TypeError(`spindle: Cannot set property "${key}" on ${kind} (at "${segments.slice(0, depth).join(".")}")`);
+var CLASS_TAG = "__spindle_class__";
+var DATA_TAG = "__spindle_data__";
+/** A tagged value, as serialize() writes and deserialize() reads it. */
+var tagged = (name, data) => ({
+	[CLASS_TAG]: name,
+	[DATA_TAG]: data
+});
+/** Numbers JSON text cannot hold (it writes null for them, and 0 for -0). */
+var SPECIAL_NUMBERS = {
+	NaN: NaN,
+	Infinity: Infinity,
+	"-Infinity": -Infinity,
+	"-0": -0
+};
+function specialNumberName(value) {
+	if (Number.isNaN(value)) return "NaN";
+	if (value === Infinity) return "Infinity";
+	if (value === -Infinity) return "-Infinity";
+	if (Object.is(value, -0)) return "-0";
 }
 /**
-* Walk to the object holding the last of `segments`, copying undrafted
-* objects when `root` is an Immer draft (see setByPath). A missing or
-* non-object intermediate is replaced by a plain object when
-* `createMissing` is set, and throws a TypeError otherwise.
+* Turn a story value into data that survives JSON text (saves, exports,
+* the session) and that deserialize() restores. Date, RegExp, Map, Set and
+* registered class instances become tagged objects, and so do the values
+* JSON text would drop or change: undefined (also array holes), NaN,
+* ±Infinity, -0, bigint, invalid dates, and plain objects with a key named
+* like the class tag. Throws on circular references and on a property
+* named "__proto__", which story state cannot hold.
 */
-function walkToParent(root, segments, createMissing) {
-	checkSegments(segments);
-	const copyOnWrite = isDraft(root);
-	let current = root;
-	for (let i = 0; i < segments.length - 1; i++) {
-		const seg = segments[i];
-		checkHolder(current, seg, segments, i);
-		let next = hasOwn(current, seg) ? current[seg] : void 0;
-		if (next == null || typeof next !== "object") {
-			if (!createMissing) throw new TypeError(`spindle: Cannot set property "${segments[i + 1]}" on ${next === null ? "null" : typeof next} (at "${segments.slice(0, i + 1).join(".")}")`);
-			next = {};
-			current[seg] = next;
-		} else if (copyOnWrite && !isDraft(next) && !builtinName(next)) {
-			next = shallowCopy(next);
-			current[seg] = next;
+function serialize(value) {
+	const seen = /* @__PURE__ */ new Set();
+	function ser(val) {
+		if (val === void 0) return tagged("__Undefined__", {});
+		if (typeof val === "number") {
+			const name = specialNumberName(val);
+			return name === void 0 ? val : tagged("__Number__", { value: name });
 		}
-		current = next;
-	}
-	checkHolder(current, segments[segments.length - 1], segments, segments.length - 1);
-	return current;
-}
-//#endregion
-//#region src/structural.ts
-/**
-* Set an own enumerable property. A "__proto__" key is defined as an own
-* property (as JSON.parse does) instead of replacing the prototype.
-*/
-function setOwn(target, key, value) {
-	if (key === "__proto__") Object.defineProperty(target, key, {
-		value,
-		enumerable: true,
-		writable: true,
-		configurable: true
-	});
-	else target[key] = value;
-}
-function isPlainObject(value) {
-	if (typeof value !== "object" || value === null) return false;
-	const proto = Object.getPrototypeOf(value);
-	return proto === Object.prototype || proto === null;
-}
-function deepClone(value, options = {}) {
-	const seen = /* @__PURE__ */ new Map();
-	function clone(val) {
+		if (typeof val === "bigint") return tagged("__BigInt__", { value: val.toString() });
 		if (val === null || typeof val !== "object") return val;
-		const obj = val;
-		if (seen.has(obj)) return seen.get(obj);
-		if (val instanceof Date) return new Date(val.getTime());
-		if (val instanceof RegExp) return new RegExp(val.source, val.flags);
-		if (Array.isArray(val)) {
-			const arr = [];
-			seen.set(obj, arr);
-			for (let i = 0; i < val.length; i++) arr[i] = clone(val[i]);
-			return arr;
+		if (seen.has(val)) throw new Error("spindle: Cannot serialize circular references");
+		seen.add(val);
+		try {
+			return serObject(val);
+		} finally {
+			seen.delete(val);
 		}
-		if (val instanceof Map) {
-			const copy = /* @__PURE__ */ new Map();
-			seen.set(obj, copy);
-			for (const [k, v] of val) copy.set(clone(k), clone(v));
-			return copy;
+	}
+	function serKeys(obj) {
+		const data = {};
+		for (const key of Object.keys(obj)) {
+			if (key === "__proto__") throw new Error("spindle: Cannot save a property named \"__proto__\"");
+			data[key] = ser(obj[key]);
 		}
-		if (val instanceof Set) {
-			const copy = /* @__PURE__ */ new Set();
-			seen.set(obj, copy);
-			for (const v of val) copy.add(clone(v));
-			return copy;
+		return data;
+	}
+	function serObject(val) {
+		if (val instanceof Date) return tagged("__Date__", { iso: !Number.isNaN(val.getTime()) ? val.toISOString() : null });
+		if (val instanceof RegExp) return tagged("__RegExp__", {
+			source: val.source,
+			flags: val.flags
+		});
+		if (Array.isArray(val)) {
+			const result = [];
+			for (let i = 0; i < val.length; i++) result.push(ser(val[i]));
+			return result;
 		}
-		const keepsProto = registeredClassName(obj) !== void 0 || isPlainObject(val);
-		if (!keepsProto && options.keepUnregistered) return val;
-		const copy = keepsProto ? Object.create(Object.getPrototypeOf(obj)) : {};
-		seen.set(obj, copy);
-		for (const key of Object.keys(obj)) setOwn(copy, key, clone(obj[key]));
-		return copy;
+		if (val instanceof Map) return tagged("__Map__", { entries: [...val].map(([k, v]) => [ser(k), ser(v)]) });
+		if (val instanceof Set) return tagged("__Set__", { entries: [...val].map((v) => ser(v)) });
+		const name = registeredClassName(val);
+		if (name !== void 0) return tagged(name, serKeys(val));
+		const data = serKeys(val);
+		return hasOwn(val, CLASS_TAG) ? tagged("__Object__", data) : data;
 	}
-	return clone(value);
-}
-/**
-* Structural equality over the value types deepClone() supports: primitives,
-* arrays, plain objects, class instances, Date, RegExp, Map and Set (nested
-* at any depth). Map and Set entries are compared in insertion order. Arrays
-* are compared by length and index, so a hole equals an undefined element
-* (deepClone() and save/load turn holes into undefined elements).
-*/
-function deepEqual(a, b) {
-	return equal(a, b, /* @__PURE__ */ new Map());
-}
-/**
-* `assumed` holds the pairs already being compared: meeting one again (a
-* cycle) assumes it equal. Every object may pair with several others, since
-* cycles of different lengths can still unfold to the same value.
-*/
-function equal(a, b, assumed) {
-	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;
-	const pairs = assumed.get(a);
-	if (pairs?.has(b)) return true;
-	if (pairs) pairs.add(b);
-	else assumed.set(a, new Set([b]));
-	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
-	if (a instanceof RegExp) return String(a) === String(b);
-	if (a instanceof Map || a instanceof Set) {
-		const bc = b;
-		if (a.size !== bc.size) return false;
-		const ai = a.entries();
-		const bi = bc.entries();
-		for (let x = ai.next(), y = bi.next(); !x.done; x = ai.next(), y = bi.next()) if (!equal(x.value, y.value, assumed)) return false;
-		return true;
-	}
-	if (Array.isArray(a)) {
-		const bc = b;
-		if (a.length !== bc.length) return false;
-		for (let i = 0; i < a.length; i++) if (!equal(a[i], bc[i], assumed)) return false;
-		return true;
-	}
-	const ao = a;
-	const bo = b;
-	const keys = Object.keys(ao);
-	if (keys.length !== Object.keys(bo).length) return false;
-	for (const key of keys) if (!hasOwn(bo, key) || !equal(ao[key], bo[key], assumed)) return false;
-	return true;
-}
-/**
-* Objects merged property by property: plain objects and (registered)
-* class instances. Arrays, Map, Set, Date and RegExp are values that are
-* replaced as a whole, since their elements have no stable identity to
-* merge by (a shift moves every index).
-*/
-function isMergeable(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Map) && !(value instanceof Set) && !(value instanceof Date) && !(value instanceof RegExp);
-}
-/**
-* Whether changes between `a` and `b` merge key by key: both are objects of
-* one class (see isMergeable), or, with `arrays`, both are arrays.
-*/
-function mergesWith(a, b, arrays) {
-	if (arrays && (Array.isArray(a) || Array.isArray(b))) return Array.isArray(a) && Array.isArray(b);
-	return isMergeable(a) && isMergeable(b) && Object.getPrototypeOf(a) === Object.getPrototypeOf(b);
-}
-/**
-* The keys at which `after` differs from `before`, two values that merge
-* (see mergesWith): keys added, deleted, or holding another value. Store
-* updates are immutable, so a value that kept its identity is no change,
-* and one rebuilt with equal content (mutation code commits whole values)
-* is none either. Values that merge are reported as 'nested', to be
-* compared key by key; they may still be equal. With `arrays`, arrays
-* merge too: elements at the indices both hold are compared, and the
-* elements one has beyond the other's length are added or deleted.
-*/
-function keyChanges(before, after, arrays) {
-	const changes = [];
-	const compare = (key, b, a) => {
-		if (Object.is(b, a)) return;
-		if (mergesWith(b, a, arrays)) changes.push({
-			key,
-			kind: "nested",
-			before: b,
-			after: a
-		});
-		else if (!deepEqual(b, a)) changes.push({
-			key,
-			kind: "changed",
-			after: a
-		});
-	};
-	if (Array.isArray(after)) {
-		const b = before;
-		const a = after;
-		for (let i = 0; i < Math.min(b.length, a.length); i++) compare(String(i), b[i], a[i]);
-		for (let i = b.length; i < a.length; i++) changes.push({
-			key: String(i),
-			kind: "added",
-			after: a[i]
-		});
-		for (let i = a.length; i < b.length; i++) changes.push({
-			key: String(i),
-			kind: "deleted"
-		});
-		return changes;
-	}
-	for (const key of Object.keys(after)) if (hasOwn(before, key)) compare(key, before[key], after[key]);
-	else changes.push({
-		key,
-		kind: "added",
-		after: after[key]
-	});
-	for (const key of Object.keys(before)) if (!hasOwn(after, key)) changes.push({
-		key,
-		kind: "deleted"
-	});
-	return changes;
-}
-/**
-* The property paths where `after` differs from `before`, two objects of
-* one class: objects that merge (see isMergeable) are compared property by
-* property, any other value as a whole.
-*/
-function diffPaths(before, after) {
-	const changes = [];
-	const ancestors = /* @__PURE__ */ new Set();
-	(function walk(b, a, path) {
-		if (ancestors.has(a)) return;
-		ancestors.add(a);
-		for (const change of keyChanges(b, a, false)) {
-			const at = [...path, change.key];
-			if (change.kind === "nested") walk(change.before, change.after, at);
-			else changes.push(change.kind === "deleted" ? {
-				path: at,
-				deleted: true
-			} : {
-				path: at,
-				deleted: false,
-				value: change.after
-			});
-		}
-		ancestors.delete(a);
-	})(before, after, []);
-	return changes;
-}
-/** Whether `target` already holds what `change` would write. */
-function isApplied(target, change) {
-	const parent = getByPath(target, change.path.slice(0, -1));
-	if (parent === null || typeof parent !== "object") return change.deleted;
-	const key = change.path[change.path.length - 1];
-	if (!hasOwn(parent, key)) return change.deleted;
-	return !change.deleted && deepEqual(parent[key], change.value);
-}
-function applyChange(target, change) {
-	if (change.deleted) deleteByPath(target, change.path);
-	else setByPath(target, change.path, change.value);
-}
-/**
-* Write how `after` differs from `before` (see keyChanges; arrays merge by
-* index) into `target`, another version of the same object or array.
-* Values that changed are written whole, as deep copies; for values that
-* merge, `mergeNested` may merge them into `target` instead, returning
-* whether it did. Into an array, elements removed from the end are removed
-* at the same indices and elements added are appended, and changes at
-* indices `target` lacks are dropped: where `target` was resized, its
-* indices do not line up with `before`'s.
-*/
-function mergeKeys(target, before, after, mergeNested) {
-	const list = Array.isArray(target) ? target : void 0;
-	for (const change of keyChanges(before, after, true)) {
-		const { key } = change;
-		if (change.kind === "deleted") if (list) list.length = Math.min(list.length, Number(key));
-		else delete target[key];
-		else if (list && change.kind === "added") list.push(deepClone(change.after));
-		else if (list && Number(key) >= list.length) continue;
-		else if (change.kind !== "nested" || !(mergeNested?.(key, change.before, change.after) || deepEqual(change.before, change.after))) target[key] = deepClone(change.after);
-	}
-}
-//#endregion
-//#region src/class-registry.ts
-var registry$1 = /* @__PURE__ */ new Map();
-var ctorToName = /* @__PURE__ */ new Map();
-function registerClass(name, ctor) {
-	registry$1.set(name, ctor);
-	ctorToName.set(ctor, name);
-}
-/**
-* The registered name of the class `value` is an instance of, or undefined.
-* Looks the constructor up on the prototype, so an own property named
-* "constructor" (plain data) cannot hide or fake the class.
-*/
-function registeredClassName(value) {
-	const proto = Object.getPrototypeOf(value);
-	return proto === null ? void 0 : ctorToName.get(proto.constructor);
-}
-var CLASS_TAG = "__spindle_class__";
-var DATA_TAG = "__spindle_data__";
-/** A tagged value, as serialize() writes and deserialize() reads it. */
-var tagged = (name, data) => ({
-	[CLASS_TAG]: name,
-	[DATA_TAG]: data
-});
-/** Numbers JSON text cannot hold (it writes null for them, and 0 for -0). */
-var SPECIAL_NUMBERS = {
-	NaN: NaN,
-	Infinity: Infinity,
-	"-Infinity": -Infinity,
-	"-0": -0
-};
-function specialNumberName(value) {
-	if (Number.isNaN(value)) return "NaN";
-	if (value === Infinity) return "Infinity";
-	if (value === -Infinity) return "-Infinity";
-	if (Object.is(value, -0)) return "-0";
-}
-/**
-* Turn a story value into data that survives JSON text (saves, exports,
-* the session) and that deserialize() restores. Date, RegExp, Map, Set and
-* registered class instances become tagged objects, and so do the values
-* JSON text would drop or change: undefined (also array holes), NaN,
-* ±Infinity, -0, bigint, invalid dates, and plain objects with a key named
-* like the class tag. Throws on circular references and on a property
-* named "__proto__", which story state cannot hold.
-*/
-function serialize(value) {
-	const seen = /* @__PURE__ */ new Set();
-	function ser(val) {
-		if (val === void 0) return tagged("__Undefined__", {});
-		if (typeof val === "number") {
-			const name = specialNumberName(val);
-			return name === void 0 ? val : tagged("__Number__", { value: name });
-		}
-		if (typeof val === "bigint") return tagged("__BigInt__", { value: val.toString() });
-		if (val === null || typeof val !== "object") return val;
-		if (seen.has(val)) throw new Error("spindle: Cannot serialize circular references");
-		seen.add(val);
-		try {
-			return serObject(val);
-		} finally {
-			seen.delete(val);
-		}
-	}
-	function serKeys(obj) {
-		const data = {};
-		for (const key of Object.keys(obj)) {
-			if (key === "__proto__") throw new Error("spindle: Cannot save a property named \"__proto__\"");
-			data[key] = ser(obj[key]);
-		}
-		return data;
-	}
-	function serObject(val) {
-		if (val instanceof Date) return tagged("__Date__", { iso: !Number.isNaN(val.getTime()) ? val.toISOString() : null });
-		if (val instanceof RegExp) return tagged("__RegExp__", {
-			source: val.source,
-			flags: val.flags
-		});
-		if (Array.isArray(val)) {
-			const result = [];
-			for (let i = 0; i < val.length; i++) result.push(ser(val[i]));
-			return result;
-		}
-		if (val instanceof Map) return tagged("__Map__", { entries: [...val].map(([k, v]) => [ser(k), ser(v)]) });
-		if (val instanceof Set) return tagged("__Set__", { entries: [...val].map((v) => ser(v)) });
-		const name = registeredClassName(val);
-		if (name !== void 0) return tagged(name, serKeys(val));
-		const data = serKeys(val);
-		return hasOwn(val, CLASS_TAG) ? tagged("__Object__", data) : data;
-	}
-	return ser(value);
+	return ser(value);
 }
 function deserialize(value) {
 	function deserKeys(target, data) {
@@ -2624,9 +2292,46 @@ function tokenize(input, options = {}) {
 	return tokens;
 }
 //#endregion
+//#region src/utils/macro-names.ts
+/**
+* Macro and widget names are case-insensitive: `{StatusBar}` invokes the
+* widget defined as `statusbar`. A NameMap keys its entries by the lowercased
+* name.
+*/
+var NameMap = class extends Map {
+	get(name) {
+		return super.get(name.toLowerCase());
+	}
+	set(name, value) {
+		return super.set(name.toLowerCase(), value);
+	}
+	has(name) {
+		return super.has(name.toLowerCase());
+	}
+	delete(name) {
+		return super.delete(name.toLowerCase());
+	}
+};
+/** A set of macro or widget names (see NameMap). */
+var NameSet = class {
+	constructor(names = []) {
+		this.names = new NameMap();
+		for (const name of names) this.add(name);
+	}
+	add(name) {
+		this.names.set(name, true);
+	}
+	has(name) {
+		return this.names.has(name);
+	}
+	delete(name) {
+		this.names.delete(name);
+	}
+};
+//#endregion
 //#region src/markup/ast.ts
 /** Macros that require a closing tag and can contain children */
-var BLOCK_MACROS = new Set([
+var BLOCK_MACROS = new NameSet([
 	"if",
 	"for",
 	"do",
@@ -2644,7 +2349,7 @@ var BLOCK_MACROS = new Set([
 ]);
 /** Register a custom macro as a block macro so the AST builder nests children. */
 function registerBlockMacro(name) {
-	BLOCK_MACROS.add(name.toLowerCase());
+	BLOCK_MACROS.add(name);
 }
 /** Map from branch macro name → required parent macro name */
 var BRANCH_PARENT = {
@@ -3038,15 +2743,15 @@ function countQueries(counts) {
 		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 visits = countQueries(() => visitCounts);
-	const renders = countQueries(() => renderCounts);
-	cachedFns = {
+/**
+* The history functions of passage code and the story API: the current and
+* previous passage, and visited()/rendered() with their has-forms, counting
+* in the counters `visitCounts()` and `renderCounts()` return.
+*/
+function historyQueries(visitCounts, renderCounts) {
+	const visits = countQueries(visitCounts);
+	const renders = countQueries(renderCounts);
+	return {
 		currentPassage,
 		previousPassage,
 		visited: visits.count,
@@ -3056,7 +2761,17 @@ function buildExpressionFns() {
 		rendered: renders.count,
 		hasRendered: renders.has,
 		hasRenderedAny: renders.any,
-		hasRenderedAll: renders.all,
+		hasRenderedAll: renders.all
+	};
+}
+var cachedFns = null;
+var cachedVisitCounts = null;
+var cachedRenderCounts = null;
+function buildExpressionFns() {
+	const { visitCounts, renderCounts } = useStoryStore.getState();
+	if (cachedFns && cachedVisitCounts === visitCounts && cachedRenderCounts === renderCounts) return cachedFns;
+	cachedFns = {
+		...historyQueries(() => visitCounts, () => renderCounts),
 		random,
 		randomInt
 	};
@@ -3077,57 +2792,61 @@ function namespaceArg(ns) {
 	Object.setPrototypeOf(ns, null);
 	return ns;
 }
+/** Run compiled code in `namespaces`. */
+function run(fn, ...[variables, temporary, locals = EMPTY_NAMESPACE, transient = EMPTY_NAMESPACE]) {
+	return fn(namespaceArg(variables), namespaceArg(temporary), namespaceArg(locals), buildExpressionFns(), namespaceArg(transient));
+}
 /**
 * Evaluate an expression and return its value.
 * e.g. evaluate("$health + 10", variables, temporary) → number
 */
-function evaluate(expr, variables, temporary, locals = EMPTY_NAMESPACE, transient = EMPTY_NAMESPACE) {
+function evaluate(expr, ...namespaces) {
 	const body = `return (${transform(expr)}\n);`;
-	return getOrCompile(body, body)(namespaceArg(variables), namespaceArg(temporary), namespaceArg(locals), buildExpressionFns(), namespaceArg(transient));
+	return run(getOrCompile(body, body), ...namespaces);
 }
 /**
 * Execute statements (no return value).
 * e.g. execute("$health = 100; $name = 'Hero'", variables, temporary)
 */
-function execute(code, variables, temporary, locals = EMPTY_NAMESPACE, transient = EMPTY_NAMESPACE) {
+function execute(code, ...namespaces) {
 	const transformed = transform(code, "statements");
-	getOrCompile("exec:" + transformed, transformed)(namespaceArg(variables), namespaceArg(temporary), namespaceArg(locals), buildExpressionFns(), namespaceArg(transient));
+	run(getOrCompile("exec:" + transformed, transformed), ...namespaces);
 }
 //#endregion
 //#region src/registry.ts
-var registry = /* @__PURE__ */ new Map();
+var registry = new NameMap();
 function registerMacro(name, component) {
-	registry.set(name.toLowerCase(), component);
+	registry.set(name, component);
 }
 function getMacro(name) {
-	return registry.get(name.toLowerCase());
+	return registry.get(name);
 }
-var textRegistry = /* @__PURE__ */ new Map();
+var textRegistry = new NameMap();
 /** Register (or, with undefined, remove) the text form of a macro. */
 function registerMacroText(name, text) {
-	if (text) textRegistry.set(name.toLowerCase(), text);
-	else textRegistry.delete(name.toLowerCase());
+	if (text) textRegistry.set(name, text);
+	else textRegistry.delete(name);
 }
 function getMacroText(name) {
-	return textRegistry.get(name.toLowerCase());
+	return textRegistry.get(name);
 }
-var subMacros = /* @__PURE__ */ new Set();
+var subMacros = new NameSet();
 function registerSubMacro(name) {
-	subMacros.add(name.toLowerCase());
+	subMacros.add(name);
 }
 function isSubMacro(name) {
-	return subMacros.has(name.toLowerCase());
+	return subMacros.has(name);
 }
-var metadataRegistry = /* @__PURE__ */ new Map();
+var metadataRegistry = new NameMap();
 function registerMacroMetadata(name, metadata) {
-	metadataRegistry.set(name.toLowerCase(), metadata);
+	metadataRegistry.set(name, metadata);
 }
 function getMacroRegistry() {
 	return Array.from(metadataRegistry.values());
 }
 //#endregion
 //#region src/widgets/widget-registry.ts
-var widgets = /* @__PURE__ */ new Map();
+var widgets = new NameMap();
 /**
 * Register a widget. Its `@` parameters become locals of its body, so one
 * that no namespace can hold (`@__proto__`) throws a TypeError and the
@@ -3136,14 +2855,14 @@ var widgets = /* @__PURE__ */ new Map();
 function registerWidget(name, bodyAST, params, isBlock = false) {
 	const filteredParams = params.filter((p) => p !== "@children");
 	for (const param of filteredParams) if (param.startsWith("@")) checkVariableName(param.slice(1), param);
-	widgets.set(name.toLowerCase(), {
+	widgets.set(name, {
 		body: bodyAST,
 		params: filteredParams,
 		isBlock
 	});
 }
 function getWidget(name) {
-	return widgets.get(name.toLowerCase());
+	return widgets.get(name);
 }
 //#endregion
 //#region src/components/macros/arg-utils.ts
@@ -3310,6 +3029,23 @@ function splitArgs(raw) {
 	return args;
 }
 //#endregion
+//#region src/components/macros/display.ts
+/** The text a value is shown as: nothing for null and undefined. */
+function display(value) {
+	return value == null ? "" : String(value);
+}
+/**
+* `content` in a `<span>` carrying `className` and `id`, or in a fragment if
+* it has neither.
+*/
+function wrapContent(className, id, content) {
+	if (className || id) return h("span", {
+		id,
+		class: className
+	}, content);
+	return h(Fragment, null, content);
+}
+//#endregion
 //#region src/interpolation.ts
 /**
 * Text-only markup: HTML attribute values, image alt text and link titles,
@@ -3378,9 +3114,6 @@ function mapTextNodes(nodes, fn) {
 }
 /** Deep enough for any real nesting; stops a widget that includes itself. */
 var MAX_DEPTH = 100;
-function display(value) {
-	return value == null ? "" : String(value);
-}
 /**
 * The value of a variable reference (`name` without its sigil, with an
 * optional dot path), as `{$name}` shows it in passage text (see
@@ -3398,6 +3131,10 @@ function resolveVariable(scope, kind, name) {
 	}
 	return value;
 }
+/** Evaluate an expression in `scope`. */
+function evaluateIn(expr, scope) {
+	return evaluate(expr, scope.variables, scope.temporary, scope.locals, scope.transient);
+}
 var TextEvaluator = class {
 	constructor() {
 		this.errors = [];
@@ -3407,9 +3144,6 @@ var TextEvaluator = class {
 		for (const node of nodes) text += this.node(node, scope, depth);
 		return text;
 	}
-	evaluate(expr, scope) {
-		return evaluate(expr, scope.variables, scope.temporary, scope.locals, scope.transient);
-	}
 	node(node, scope, depth) {
 		switch (node.type) {
 			case "text": return node.value;
@@ -3421,7 +3155,7 @@ var TextEvaluator = class {
 				}
 				return this.variable(node.scope, node.name, scope);
 			case "expression": try {
-				return display(this.evaluate(node.expression, scope));
+				return display(evaluateIn(node.expression, scope));
 			} catch (error) {
 				this.errors.push({
 					macro: "expression",
@@ -3471,7 +3205,7 @@ var TextEvaluator = class {
 					let value;
 					const expr = argExprs[i];
 					if (expr !== void 0) try {
-						value = this.evaluate(expr, scope);
+						value = evaluateIn(expr, scope);
 					} catch {
 						value = void 0;
 					}
@@ -3493,7 +3227,7 @@ var TextEvaluator = class {
 			return "";
 		}
 		const ctx = {
-			evaluate: (expr) => this.evaluate(expr, scope),
+			evaluate: (expr) => evaluateIn(expr, scope),
 			renderText: (nodes, locals) => this.nested(node.name, nodes, scope, depth, locals ? { locals: withLocals(scope.locals, locals) } : {})
 		};
 		try {
@@ -3570,7 +3304,7 @@ function interpolateCode(template, scope, decode) {
 			});
 		}
 	} else try {
-		text += display(evaluate(part.expr, scope.variables, scope.temporary, scope.locals, scope.transient));
+		text += display(evaluateIn(part.expr, scope));
 	} catch (error) {
 		errors.push({
 			macro: "expression",
@@ -3636,29 +3370,26 @@ function useInterpolate() {
 }
 //#endregion
 //#region src/components/macros/VarDisplay.tsx
-var SIGILS = {
-	variable: "$",
-	temporary: "_",
-	local: "@",
-	transient: "%"
-};
 var STORE_NAMESPACES = {
 	variable: "variables",
 	temporary: "temporary",
 	transient: "transient"
 };
-function VarDisplay({ name, scope, className, id }) {
+/** A `{$name}` (`{_name}`, `{@name}`, `{%name}`) variable display. */
+function VarDisplay({ node }) {
+	const { name, scope } = node;
 	const resolve = useInterpolate();
-	className = resolve(className);
-	id = resolve(id);
+	const className = resolve(node.className);
+	const id = resolve(node.id);
 	const localsValues = useContext(LocalsValuesContext);
 	const parts = name.split(".");
 	const root = parts[0];
 	const storeValue = useStoryStore((s) => scope === "local" ? void 0 : ownValue(s[STORE_NAMESPACES[scope]], root));
-	const nameError = variableNameError(root, SIGILS[scope] + root);
+	const sigil = SCOPE_SIGILS[scope];
+	const nameError = variableNameError(root, sigil + root);
 	if (nameError) return /* @__PURE__ */ jsx("span", {
 		class: "error",
-		children: `{${SIGILS[scope]}${name} error: ${nameError}}`
+		children: `{${sigil}${name} error: ${nameError}}`
 	});
 	let value;
 	if (scope === "local") value = ownValue(localsValues, root);
@@ -3671,34 +3402,24 @@ function VarDisplay({ name, scope, className, id }) {
 		const part = parts[i];
 		value = value[part];
 	}
-	const display = value == null ? "" : String(value);
-	if (className || id) return /* @__PURE__ */ jsx("span", {
-		id,
-		class: className,
-		children: display
-	});
-	return /* @__PURE__ */ jsx(Fragment$1, { children: display });
+	return wrapContent(className, id, display(value));
 }
 //#endregion
 //#region src/components/macros/ExprDisplay.tsx
-function ExprDisplay({ expression, className, id }) {
+/** An expression display: `{$hp + 1}`. */
+function ExprDisplay({ node }) {
+	const { expression } = node;
 	const resolve = useInterpolate();
-	className = resolve(className);
-	id = resolve(id);
+	const className = resolve(node.className);
+	const id = resolve(node.id);
 	const [variables, temporary, localsValues, transient] = useMergedLocals();
-	let display;
+	let text;
 	try {
-		const value = evaluate(expression, variables, temporary, localsValues, transient);
-		display = value == null ? "" : String(value);
+		text = display(evaluate(expression, variables, temporary, localsValues, transient));
 	} catch {
-		display = `{error: ${expression}}`;
+		text = `{error: ${expression}}`;
 	}
-	if (className || id) return /* @__PURE__ */ jsx("span", {
-		id,
-		class: className,
-		children: display
-	});
-	return /* @__PURE__ */ jsx(Fragment$1, { children: display });
+	return wrapContent(className, id, text);
 }
 //#endregion
 //#region src/hooks/use-render-options.ts
@@ -4046,6 +3767,7 @@ var RawTextContext = createContext(false);
 * no live form properties, so they are set as written (see splitAttributes).
 */
 var SvgContext = createContext(false);
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 /** Elements whose content is literal text, not markdown. */
 var PREFORMATTED_ELEMENTS = new Set(["pre", "textarea"]);
 var WidgetChildrenContext = createContext(null);
@@ -4090,20 +3812,42 @@ function expandPlaceholderText(text, ph) {
 	return splitPlaceholderText(text, ph).map((part) => typeof part === "number" ? ph.components[part] : part);
 }
 /**
-* An element whose attributes contain placeholders (a variable in image alt
-* text or a link title). Each such attribute is evaluated as text against
-* the store and locals, so it follows its variables as the component would.
+* An element of markdown output whose attributes contain placeholders (a
+* variable in image alt text or a link title). Each such attribute is
+* evaluated as text against the store and locals, so it follows its
+* variables as the component would.
 */
-function PlaceholderAttributes({ tag, props, attributes, children }) {
+function PlaceholderAttributes({ tag, attributes, placeholders, svg, children }) {
 	const scope = useTextScope();
-	const resolved = { ...props };
 	const errors = [];
-	for (const [name, nodes] of Object.entries(attributes)) {
+	const { props, direct } = splitAttributes(attributes.map(([name, value, written]) => {
+		const nodes = placeholders[name];
+		if (!nodes) return [
+			name,
+			value,
+			written
+		];
 		const result = renderText(nodes, scope);
-		resolved[name] = result.text;
 		for (const error of result.errors) errors.push([name, error]);
-	}
-	return withAttributeErrors(errors, h(tag, resolved, ...children));
+		return [
+			name,
+			result.text,
+			written
+		];
+	}), svg);
+	const ref = useDirectAttributes(direct);
+	return withAttributeErrors(errors, h(tag, ref ? {
+		...props,
+		ref
+	} : props, ...children));
+}
+/** An element of markdown output with attributes to set directly. */
+function DirectAttributes({ tag, props, direct, children }) {
+	const ref = useDirectAttributes(direct);
+	return h(tag, {
+		...props,
+		ref
+	}, ...children);
 }
 /**
 * Show the errors met in an element's attributes in front of it, the way a
@@ -4125,16 +3869,29 @@ function placeholderIndex(node, ph) {
 	return parseInt(value.slice(prefix.length), 10);
 }
 /**
+* Parse HTML into nodes without side effects. The content of a `<template>`
+* belongs to a document with no browsing context, so parsing it fetches no
+* images and media, runs no inline event handlers (`<img onerror>`) and
+* constructs no custom elements. A detached `<div>` belongs to the page's
+* document, which does all of these while parsing.
+*/
+function parseHtmlInert(html) {
+	const template = document.createElement("template");
+	template.innerHTML = html;
+	return template.content;
+}
+/**
 * Convert an HTML string (from micromark) to Preact VNodes,
 * replacing placeholder elements with pre-rendered components.
 * With `unwrapParagraphs` (nobr or inline content), top-level <p> wrappers are
 * replaced by their children.
 */
 function htmlToPreact(html, ph, unwrapParagraphs = false) {
-	const temp = document.createElement("div");
-	temp.innerHTML = html.trim();
-	if (unwrapParagraphs) for (const p of Array.from(temp.querySelectorAll(":scope > p"))) p.replaceWith(...Array.from(p.childNodes));
-	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(temp.childNodes).map((child, i) => convertDomNode(child, i, ph)) });
+	const content = parseHtmlInert(html.trim());
+	if (unwrapParagraphs) {
+		for (const child of Array.from(content.childNodes)) if (child.nodeType === Node.ELEMENT_NODE && child.nodeName === "P") child.replaceWith(...Array.from(child.childNodes));
+	}
+	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from(content.childNodes).map((child, i) => convertDomNode(child, i, ph)) });
 }
 function convertDomNode(node, key, ph) {
 	if (node.nodeType === Node.TEXT_NODE) {
@@ -4148,25 +3905,36 @@ function convertDomNode(node, key, ph) {
 		const tag = el.localName;
 		const idx = placeholderIndex(el, ph);
 		if (idx !== -1) return ph.components[idx];
-		const props = {};
-		let withPlaceholders;
-		for (const attr of Array.from(el.attributes)) {
-			const parts = splitPlaceholderText(attr.value, ph);
-			if (parts.every((part) => typeof part === "string")) {
-				props[attr.name] = attr.value;
-				continue;
-			}
-			withPlaceholders ??= {};
-			withPlaceholders[attr.name] = parts.map((part) => typeof part === "string" ? {
+		const svg = el.namespaceURI === SVG_NAMESPACE;
+		const attributes = [];
+		let placeholders;
+		for (const { name, value } of Array.from(el.attributes)) {
+			attributes.push([
+				name,
+				value,
+				value
+			]);
+			const parts = splitPlaceholderText(value, ph);
+			if (parts.every((part) => typeof part === "string")) continue;
+			placeholders ??= {};
+			placeholders[name] = parts.map((part) => typeof part === "string" ? {
 				type: "text",
 				value: part
 			} : ph.nodes[part]);
 		}
 		const children = Array.from(el.childNodes).map((child, i) => convertDomNode(child, i, ph));
-		if (withPlaceholders) return /* @__PURE__ */ jsx(PlaceholderAttributes, {
+		if (placeholders) return /* @__PURE__ */ jsx(PlaceholderAttributes, {
+			tag,
+			attributes,
+			placeholders,
+			svg,
+			children
+		}, key);
+		const { props, direct } = splitAttributes(attributes, svg);
+		if (direct.length > 0) return /* @__PURE__ */ jsx(DirectAttributes, {
 			tag,
 			props,
-			attributes: withPlaceholders,
+			direct,
 			children
 		}, key);
 		return h(tag, {
@@ -4281,9 +4049,7 @@ function setRawAttribute(el, name, value) {
 		el.setAttribute(name, value);
 		return;
 	}
-	const template = document.createElement("template");
-	template.innerHTML = `<i ${name}=""></i>`;
-	const parsed = template.content.firstChild.attributes[0];
+	const parsed = parseHtmlInert(`<i ${name}=""></i>`).firstChild.attributes[0];
 	if (!parsed) return;
 	const attr = parsed.cloneNode();
 	attr.value = value;
@@ -4321,6 +4087,23 @@ function splitAttributes(attributes, svg) {
 		direct
 	};
 }
+/**
+* Set the attributes `splitAttributes` leaves to set directly on the element
+* given the returned ref (none if there are none), and remove them again
+* when they change.
+*/
+function useDirectAttributes(direct) {
+	const elementRef = useRef(null);
+	useLayoutEffect(() => {
+		const el = elementRef.current;
+		if (!el || direct.length === 0) return;
+		for (const [name, value] of direct) setRawAttribute(el, name, value);
+		return () => {
+			for (const [name] of direct) el.removeAttribute(name);
+		};
+	}, [JSON.stringify(direct)]);
+	return direct.length > 0 ? elementRef : void 0;
+}
 var decodedAttributeText = /* @__PURE__ */ new Map();
 /**
 * Decode character references (`&amp;`, `&#123;`) in attribute text the way
@@ -4330,9 +4113,7 @@ function decodeAttributeText(text) {
 	if (!text.includes("&")) return text;
 	let decoded = decodedAttributeText.get(text);
 	if (decoded === void 0) {
-		const template = document.createElement("template");
-		template.innerHTML = `<i title="${text.replace(/"/g, "&quot;")}"></i>`;
-		decoded = template.content.firstChild.getAttribute("title") ?? text;
+		decoded = parseHtmlInert(`<i title="${text.replace(/"/g, "&quot;")}"></i>`).firstChild.getAttribute("title") ?? text;
 		decodedAttributeText.set(text, decoded);
 	}
 	return decoded;
@@ -4397,16 +4178,8 @@ function HtmlNodeRenderer({ node }) {
 		resolveAttributeValue(k, v, scope, errors),
 		v
 	]), inSvg || isSvgRoot);
-	const elementRef = useRef(null);
-	useLayoutEffect(() => {
-		const el = elementRef.current;
-		if (!el || direct.length === 0) return;
-		for (const [name, value] of direct) setRawAttribute(el, name, value);
-		return () => {
-			for (const [name] of direct) el.removeAttribute(name);
-		};
-	}, [JSON.stringify(direct)]);
-	if (direct.length > 0) props.ref = elementRef;
+	const ref = useDirectAttributes(direct);
+	if (ref) props.ref = ref;
 	const isInline = INLINE_ELEMENTS.has(tag);
 	let children = void 0;
 	if (node.children.length > 0) if (inRaw || isRawRoot) children = renderInlineNodes(node.children);
@@ -4433,17 +4206,9 @@ function HtmlNodeRenderer({ node }) {
 }
 function ChildrenSlot() {
 	const childrenAST = useContext(WidgetChildrenContext);
-	const nobr = useContext(NobrContext);
-	const inline = useContext(InlineContext);
-	const raw = useContext(RawTextContext);
-	const locals = useContext(LocalsValuesContext);
+	const renderOptions = useRenderOptions();
 	if (!childrenAST || childrenAST.length === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: renderNodes(childrenAST, {
-		nobr,
-		locals,
-		inline,
-		raw
-	}) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: renderNodes(childrenAST, renderOptions) });
 }
 /**
 * Stable per-node keys. Keying rendered children by AST node identity (not
@@ -4493,17 +4258,8 @@ function renderSingleNode(node) {
 	switch (node.type) {
 		case "variable":
 			if (node.scope === "local" && node.name === "children") return /* @__PURE__ */ jsx(ChildrenSlot, {}, key);
-			return /* @__PURE__ */ jsx(VarDisplay, {
-				name: node.name,
-				scope: node.scope,
-				className: node.className,
-				id: node.id
-			}, key);
-		case "expression": return /* @__PURE__ */ jsx(ExprDisplay, {
-			expression: node.expression,
-			className: node.className,
-			id: node.id
-		}, key);
+			return /* @__PURE__ */ jsx(VarDisplay, { node }, key);
+		case "expression": return /* @__PURE__ */ jsx(ExprDisplay, { node }, key);
 		case "macro": return renderMacro(node, key);
 		case "html": return /* @__PURE__ */ jsx(HtmlNodeRenderer, { node }, key);
 		default: return node;
@@ -4784,6 +4540,24 @@ function createLocalStorageBackend() {
 }
 var IDB_DB_NAME = "spindle";
 var IDB_DB_VERSION = 1;
+/** Each object store's key path, and the key path of each of its indexes. */
+var IDB_STORES = {
+	saves: {
+		keyPath: "meta.id",
+		indexes: {
+			ifid: "meta.ifid",
+			playthroughId: "meta.playthroughId"
+		}
+	},
+	playthroughs: {
+		keyPath: "id",
+		indexes: { ifid: "ifid" }
+	},
+	meta: {
+		keyPath: "key",
+		indexes: {}
+	}
+};
 function createIDBBackend() {
 	let dbPromise = null;
 	function openDB() {
@@ -4792,13 +4566,11 @@ function createIDBBackend() {
 			const req = indexedDB.open(IDB_DB_NAME, IDB_DB_VERSION);
 			req.onupgradeneeded = () => {
 				const db = req.result;
-				if (!db.objectStoreNames.contains("saves")) {
-					const savesStore = db.createObjectStore("saves", { keyPath: "meta.id" });
-					savesStore.createIndex("ifid", "meta.ifid", { unique: false });
-					savesStore.createIndex("playthroughId", "meta.playthroughId", { unique: false });
+				for (const [name, { keyPath, indexes }] of Object.entries(IDB_STORES)) {
+					if (db.objectStoreNames.contains(name)) continue;
+					const store = db.createObjectStore(name, { keyPath });
+					for (const [index, path] of Object.entries(indexes)) store.createIndex(index, path, { unique: false });
 				}
-				if (!db.objectStoreNames.contains("playthroughs")) db.createObjectStore("playthroughs", { keyPath: "id" }).createIndex("ifid", "ifid", { unique: false });
-				if (!db.objectStoreNames.contains("meta")) db.createObjectStore("meta", { keyPath: "key" });
 			};
 			req.onsuccess = () => resolve(req.result);
 			req.onerror = () => reject(req.error);
@@ -4849,57 +4621,389 @@ function createIDBBackend() {
 			req.onsuccess = () => resolve();
 			req.onerror = () => reject(req.error);
 		});
-	});
-}
-var _backend = null;
-async function detectBackend() {
-	if (typeof indexedDB !== "undefined") try {
-		await new Promise((resolve, reject) => {
-			const req = indexedDB.open("__spindle_probe__", 1);
-			req.onsuccess = () => {
-				req.result.close();
-				indexedDB.deleteDatabase("__spindle_probe__");
-				resolve();
-			};
-			req.onerror = () => reject(req.error);
+	});
+}
+var _backend = null;
+async function detectBackend() {
+	if (typeof indexedDB !== "undefined") try {
+		await new Promise((resolve, reject) => {
+			const req = indexedDB.open("__spindle_probe__", 1);
+			req.onsuccess = () => {
+				req.result.close();
+				indexedDB.deleteDatabase("__spindle_probe__");
+				resolve();
+			};
+			req.onerror = () => reject(req.error);
+		});
+		return createIDBBackend();
+	} catch {}
+	if (typeof localStorage !== "undefined") try {
+		const probeKey = "__spindle_probe__";
+		localStorage.setItem(probeKey, "1");
+		const val = localStorage.getItem(probeKey);
+		localStorage.removeItem(probeKey);
+		if (val === "1") return createLocalStorageBackend();
+	} catch {}
+	return createMemoryBackend();
+}
+/**
+* Detection in flight. Concurrent first callers share it so they all get the
+* same backend (the memory fallback makes a new, empty store per detection).
+*/
+var _backendPromise = null;
+function getBackend() {
+	if (_backend) return Promise.resolve(_backend);
+	if (!_backendPromise) {
+		const pending = detectBackend().then((backend) => {
+			if (_backendPromise === pending) _backend = backend;
+			return backend;
+		});
+		_backendPromise = pending;
+	}
+	return _backendPromise;
+}
+function resetBackend() {
+	_backend = null;
+	_backendPromise = null;
+}
+/**
+* Synchronous accessor for the current backend type.
+* Returns 'memory' if the backend hasn't been detected yet.
+*/
+function getBackendType() {
+	return _backend?.type ?? "memory";
+}
+//#endregion
+//#region src/utils/object-path.ts
+/**
+* Traverse dot-path segments on an object and return the nested value.
+* Members of Object.prototype (`constructor`, `toString`, `__proto__`, ...)
+* are not story state: unless an object holds one as its own property, it
+* reads as missing, as setByPath() treats it. Other inherited properties
+* (class getters, `size` of a Map) are read.
+*/
+function getByPath(obj, segments) {
+	let current = obj;
+	for (const seg of segments) {
+		if (current == null || typeof current !== "object") return void 0;
+		if (seg in Object.prototype && !hasOwn(current, seg)) return void 0;
+		current = current[seg];
+	}
+	return current;
+}
+/** Array indices ("0", "1", …) and "length": the keys an array holds. */
+var isArrayKey = (key) => key === "length" || /^(0|[1-9]\d*)$/.test(key);
+/**
+* Built-ins whose content is not their properties: a property written into
+* one would be dropped by clones and saves (and by Immer, for Map and Set).
+*/
+var builtinName = (value) => value instanceof Map ? "a Map" : value instanceof Set ? "a Set" : value instanceof Date ? "a Date" : value instanceof RegExp ? "a RegExp" : void 0;
+/**
+* Shallow copy that keeps the prototype, so a registered class instance
+* stays an instance of its class (with the same own keys deepClone copies).
+*/
+function shallowCopy(value) {
+	const copy = Array.isArray(value) ? [] : Object.create(Object.getPrototypeOf(value));
+	for (const key of Object.keys(value)) Object.defineProperty(copy, key, {
+		value: value[key],
+		enumerable: true,
+		writable: true,
+		configurable: true
+	});
+	return copy;
+}
+/**
+* Set a value at dot-path `segments` below `root`.
+*
+* When `root` is an Immer draft, objects Immer does not draft (registered
+* class instances and everything below them) are copied on the way down and
+* the copy is assigned to its parent, so the write produces new references
+* up to the root. Writing into such an object directly would mutate the
+* instance shared with the previous state and with history, and subscribers
+* would see no change. Outside a draft (a private working copy) the path is
+* written in place.
+*
+* The path goes through own properties of plain objects, class instances
+* and arrays (by index); anything else throws a TypeError rather than
+* writing where no clone or save would see it: an inherited property such
+* as a method counts as missing, and Map, Set, Date and RegExp values and
+* other keys of arrays are refused, as is a "__proto__" segment.
+*/
+function setByPath(root, segments, value, options = {}) {
+	const parent = walkToParent(root, segments, options.createMissing ?? false);
+	parent[segments[segments.length - 1]] = value;
+}
+/**
+* Delete the property at dot-path `segments` below `root`, copying
+* undrafted objects on the way down like setByPath(). Does nothing when an
+* intermediate is missing or not an object, or the property is absent (or
+* only inherited).
+*/
+function deleteByPath(root, segments) {
+	const last = segments[segments.length - 1];
+	checkSegments(segments);
+	let holder = root;
+	for (const seg of segments.slice(0, -1)) {
+		if (holder == null || typeof holder !== "object" || !hasOwn(holder, seg)) return;
+		holder = holder[seg];
+	}
+	if (holder == null || typeof holder !== "object" || !hasOwn(holder, last)) return;
+	const parent = walkToParent(root, segments, false);
+	delete parent[last];
+}
+/** Refuse a segment that would reach a prototype instead of story state. */
+function checkSegments(segments) {
+	if (segments.includes("__proto__")) throw new TypeError(`spindle: Cannot use "__proto__" in a variable path ("${segments.join(".")}")`);
+}
+/** Throw unless `holder` can take `key` as story state (see setByPath). */
+function checkHolder(holder, key, segments, depth) {
+	const kind = builtinName(holder) ?? (Array.isArray(holder) && !isArrayKey(key) ? "an array" : "");
+	if (kind) throw new TypeError(`spindle: Cannot set property "${key}" on ${kind} (at "${segments.slice(0, depth).join(".")}")`);
+}
+/**
+* Walk to the object holding the last of `segments`, copying undrafted
+* objects when `root` is an Immer draft (see setByPath). A missing or
+* non-object intermediate is replaced by a plain object when
+* `createMissing` is set, and throws a TypeError otherwise.
+*/
+function walkToParent(root, segments, createMissing) {
+	checkSegments(segments);
+	const copyOnWrite = isDraft(root);
+	let current = root;
+	for (let i = 0; i < segments.length - 1; i++) {
+		const seg = segments[i];
+		checkHolder(current, seg, segments, i);
+		let next = hasOwn(current, seg) ? current[seg] : void 0;
+		if (next == null || typeof next !== "object") {
+			if (!createMissing) throw new TypeError(`spindle: Cannot set property "${segments[i + 1]}" on ${next === null ? "null" : typeof next} (at "${segments.slice(0, i + 1).join(".")}")`);
+			next = {};
+			current[seg] = next;
+		} else if (copyOnWrite && !isDraft(next) && !builtinName(next)) {
+			next = shallowCopy(next);
+			current[seg] = next;
+		}
+		current = next;
+	}
+	checkHolder(current, segments[segments.length - 1], segments, segments.length - 1);
+	return current;
+}
+//#endregion
+//#region src/structural.ts
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+function deepClone(value, options = {}) {
+	const seen = /* @__PURE__ */ new Map();
+	function clone(val) {
+		if (val === null || typeof val !== "object") return val;
+		const obj = val;
+		if (seen.has(obj)) return seen.get(obj);
+		if (val instanceof Date) return new Date(val.getTime());
+		if (val instanceof RegExp) return new RegExp(val.source, val.flags);
+		if (Array.isArray(val)) {
+			const arr = [];
+			seen.set(obj, arr);
+			for (let i = 0; i < val.length; i++) arr[i] = clone(val[i]);
+			return arr;
+		}
+		if (val instanceof Map) {
+			const copy = /* @__PURE__ */ new Map();
+			seen.set(obj, copy);
+			for (const [k, v] of val) copy.set(clone(k), clone(v));
+			return copy;
+		}
+		if (val instanceof Set) {
+			const copy = /* @__PURE__ */ new Set();
+			seen.set(obj, copy);
+			for (const v of val) copy.add(clone(v));
+			return copy;
+		}
+		const keepsProto = registeredClassName(obj) !== void 0 || isPlainObject(val);
+		if (!keepsProto && options.keepUnregistered) return val;
+		const copy = keepsProto ? Object.create(Object.getPrototypeOf(obj)) : {};
+		seen.set(obj, copy);
+		for (const key of Object.keys(obj)) setOwn(copy, key, clone(obj[key]));
+		return copy;
+	}
+	return clone(value);
+}
+/**
+* Structural equality over the value types deepClone() supports: primitives,
+* arrays, plain objects, class instances, Date, RegExp, Map and Set (nested
+* at any depth). Map and Set entries are compared in insertion order. Arrays
+* are compared by length and index, so a hole equals an undefined element
+* (deepClone() and save/load turn holes into undefined elements).
+*/
+function deepEqual(a, b) {
+	return equal(a, b, /* @__PURE__ */ new Map());
+}
+/**
+* `assumed` holds the pairs already being compared: meeting one again (a
+* cycle) assumes it equal. Every object may pair with several others, since
+* cycles of different lengths can still unfold to the same value.
+*/
+function equal(a, b, assumed) {
+	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;
+	const pairs = assumed.get(a);
+	if (pairs?.has(b)) return true;
+	if (pairs) pairs.add(b);
+	else assumed.set(a, new Set([b]));
+	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
+	if (a instanceof RegExp) return String(a) === String(b);
+	if (a instanceof Map || a instanceof Set) {
+		const bc = b;
+		if (a.size !== bc.size) return false;
+		const ai = a.entries();
+		const bi = bc.entries();
+		for (let x = ai.next(), y = bi.next(); !x.done; x = ai.next(), y = bi.next()) if (!equal(x.value, y.value, assumed)) return false;
+		return true;
+	}
+	if (Array.isArray(a)) {
+		const bc = b;
+		if (a.length !== bc.length) return false;
+		for (let i = 0; i < a.length; i++) if (!equal(a[i], bc[i], assumed)) return false;
+		return true;
+	}
+	const ao = a;
+	const bo = b;
+	const keys = Object.keys(ao);
+	if (keys.length !== Object.keys(bo).length) return false;
+	for (const key of keys) if (!hasOwn(bo, key) || !equal(ao[key], bo[key], assumed)) return false;
+	return true;
+}
+/**
+* Objects merged property by property: plain objects and (registered)
+* class instances. Arrays, Map, Set, Date and RegExp are values that are
+* replaced as a whole, since their elements have no stable identity to
+* merge by (a shift moves every index).
+*/
+function isMergeable(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Map) && !(value instanceof Set) && !(value instanceof Date) && !(value instanceof RegExp);
+}
+/**
+* Whether changes between `a` and `b` merge key by key: both are objects of
+* one class (see isMergeable), or, with `arrays`, both are arrays.
+*/
+function mergesWith(a, b, arrays) {
+	if (arrays && (Array.isArray(a) || Array.isArray(b))) return Array.isArray(a) && Array.isArray(b);
+	return isMergeable(a) && isMergeable(b) && Object.getPrototypeOf(a) === Object.getPrototypeOf(b);
+}
+/**
+* The keys at which `after` differs from `before`, two values that merge
+* (see mergesWith): keys added, deleted, or holding another value. Store
+* updates are immutable, so a value that kept its identity is no change,
+* and one rebuilt with equal content (mutation code commits whole values)
+* is none either. Values that merge are reported as 'nested', to be
+* compared key by key; they may still be equal. With `arrays`, arrays
+* merge too: elements at the indices both hold are compared, and the
+* elements one has beyond the other's length are added or deleted.
+*/
+function keyChanges(before, after, arrays) {
+	const changes = [];
+	const compare = (key, b, a) => {
+		if (Object.is(b, a)) return;
+		if (mergesWith(b, a, arrays)) changes.push({
+			key,
+			kind: "nested",
+			before: b,
+			after: a
+		});
+		else if (!deepEqual(b, a)) changes.push({
+			key,
+			kind: "changed",
+			after: a
+		});
+	};
+	if (Array.isArray(after)) {
+		const b = before;
+		const a = after;
+		for (let i = 0; i < Math.min(b.length, a.length); i++) compare(String(i), b[i], a[i]);
+		for (let i = b.length; i < a.length; i++) changes.push({
+			key: String(i),
+			kind: "added",
+			after: a[i]
+		});
+		for (let i = a.length; i < b.length; i++) changes.push({
+			key: String(i),
+			kind: "deleted"
 		});
-		return createIDBBackend();
-	} catch {}
-	if (typeof localStorage !== "undefined") try {
-		const probeKey = "__spindle_probe__";
-		localStorage.setItem(probeKey, "1");
-		const val = localStorage.getItem(probeKey);
-		localStorage.removeItem(probeKey);
-		if (val === "1") return createLocalStorageBackend();
-	} catch {}
-	return createMemoryBackend();
+		return changes;
+	}
+	for (const key of Object.keys(after)) if (hasOwn(before, key)) compare(key, before[key], after[key]);
+	else changes.push({
+		key,
+		kind: "added",
+		after: after[key]
+	});
+	for (const key of Object.keys(before)) if (!hasOwn(after, key)) changes.push({
+		key,
+		kind: "deleted"
+	});
+	return changes;
 }
 /**
-* Detection in flight. Concurrent first callers share it so they all get the
-* same backend (the memory fallback makes a new, empty store per detection).
+* The property paths where `after` differs from `before`, two objects of
+* one class: objects that merge (see isMergeable) are compared property by
+* property, any other value as a whole.
 */
-var _backendPromise = null;
-function getBackend() {
-	if (_backend) return Promise.resolve(_backend);
-	if (!_backendPromise) {
-		const pending = detectBackend().then((backend) => {
-			if (_backendPromise === pending) _backend = backend;
-			return backend;
-		});
-		_backendPromise = pending;
-	}
-	return _backendPromise;
+function diffPaths(before, after) {
+	const changes = [];
+	const ancestors = /* @__PURE__ */ new Set();
+	(function walk(b, a, path) {
+		if (ancestors.has(a)) return;
+		ancestors.add(a);
+		for (const change of keyChanges(b, a, false)) {
+			const at = [...path, change.key];
+			if (change.kind === "nested") walk(change.before, change.after, at);
+			else changes.push(change.kind === "deleted" ? {
+				path: at,
+				deleted: true
+			} : {
+				path: at,
+				deleted: false,
+				value: change.after
+			});
+		}
+		ancestors.delete(a);
+	})(before, after, []);
+	return changes;
 }
-function resetBackend() {
-	_backend = null;
-	_backendPromise = null;
+/** Whether `target` already holds what `change` would write. */
+function isApplied(target, change) {
+	const parent = getByPath(target, change.path.slice(0, -1));
+	if (parent === null || typeof parent !== "object") return change.deleted;
+	const key = change.path[change.path.length - 1];
+	if (!hasOwn(parent, key)) return change.deleted;
+	return !change.deleted && deepEqual(parent[key], change.value);
+}
+function applyChange(target, change) {
+	if (change.deleted) deleteByPath(target, change.path);
+	else setByPath(target, change.path, change.value);
 }
 /**
-* Synchronous accessor for the current backend type.
-* Returns 'memory' if the backend hasn't been detected yet.
+* Write how `after` differs from `before` (see keyChanges; arrays merge by
+* index) into `target`, another version of the same object or array.
+* Values that changed are written whole, as deep copies; for values that
+* merge, `mergeNested` may merge them into `target` instead, returning
+* whether it did. Into an array, elements removed from the end are removed
+* at the same indices and elements added are appended, and changes at
+* indices `target` lacks are dropped: where `target` was resized, its
+* indices do not line up with `before`'s.
 */
-function getBackendType() {
-	return _backend?.type ?? "memory";
+function mergeKeys(target, before, after, mergeNested) {
+	const list = Array.isArray(target) ? target : void 0;
+	for (const change of keyChanges(before, after, true)) {
+		const { key } = change;
+		if (change.kind === "deleted") if (list) list.length = Math.min(list.length, Number(key));
+		else delete target[key];
+		else if (list && change.kind === "added") list.push(deepClone(change.after));
+		else if (list && Number(key) >= list.length) continue;
+		else if (change.kind !== "nested" || !(mergeNested?.(key, change.before, change.after) || deepEqual(change.before, change.after))) target[key] = deepClone(change.after);
+	}
 }
 //#endregion
 //#region src/event-emitter.ts
@@ -5002,6 +5106,10 @@ function inOrder(op) {
 function queued(op) {
 	return (...args) => inOrder(() => op(...args));
 }
+/** An operation passing the save `saveId`, if it is stored, to `read`. */
+var readingSave = (read) => queued(async (saveId) => read(await (await getBackend()).getSave(saveId)));
+/** An operation passing the save a slot holds, if any, to `read`. */
+var readingSlot = (read) => queued(async (ifid, slot) => read(await slotRecord(ifid, slot)));
 /**
 * Store a new playthrough and make it the story's current one. Pass `id` when
 * the caller has already switched to the playthrough (restart() does, so
@@ -5202,7 +5310,7 @@ function deserializePayload(payload) {
 }
 /** The live payload of a stored save, if there is one. */
 var livePayload = (record) => record && deserializePayload(record.payload);
-queued(async (saveId) => livePayload(await (await getBackend()).getSave(saveId)));
+readingSave(livePayload);
 /**
 * Delete a save record. If the default slot or a named slot holds it, that
 * slot is cleared as well (pointer and slot index), as `deleteSlotSave` would.
@@ -5358,7 +5466,7 @@ queued(hasQuickSaveNow);
 async function hasQuickSaveNow(ifid, slot) {
 	return await slotRecord(ifid, slot) !== void 0;
 }
-queued(async (ifid, slot) => livePayload(await slotRecord(ifid, slot)));
+readingSlot(livePayload);
 /**
 * Read the save held in a slot (the default slot when `slot` is omitted) for
 * the running game to load, and make its playthrough the story's current one
@@ -5454,7 +5562,7 @@ function toExport(record) {
 		save: record
 	};
 }
-var exportSave = queued(async (saveId) => toExport(await (await getBackend()).getSave(saveId)));
+var exportSave = readingSave(toExport);
 /**
 * Validate an export against the running story and build the record to store:
 * a fresh save ID, and the playthrough record created if it doesn't exist yet.
@@ -5482,7 +5590,7 @@ function importSave(data, ifid) {
 * Export the save held in a slot (default autosave slot when `slot` is omitted).
 * Returns undefined if the slot is empty.
 */
-var exportSlotSave = queued(async (ifid, slot) => toExport(await slotRecord(ifid, slot)));
+var exportSlotSave = readingSlot(toExport);
 /**
 * Import an exported save into a slot (default autosave slot when `slot` is
 * omitted), replacing any save already in that slot. Applies the same
@@ -7046,7 +7154,8 @@ var useStoryStore = create()(storyStore((set, get) => ({
 //#region src/components/StoryInterface.tsx
 var DEFAULT_MARKUP = "<header class=\"story-menubar\">{story-title}{back}{forward}{restart}{quicksave}{quickload}{saves}{settings}</header>\n{passage}";
 function StoryInterface() {
-	const overridePassage = useStoryStore((s) => s.storyData)?.passages.get("StoryInterface");
+	const { storyData } = useStoryFields("storyData");
+	const overridePassage = storyData?.passages.get("StoryInterface");
 	const markup = overridePassage !== void 0 ? overridePassage.content : DEFAULT_MARKUP;
 	const nobr = overridePassage?.tags.includes("nobr") ?? false;
 	const rendered = useMemo(() => {
@@ -7146,7 +7255,7 @@ function PassageDialog({ passageName, fallbackMarkup, panelClass, onClose, dismi
 	const onCloseRef = useRef(onClose);
 	onCloseRef.current = onClose;
 	const stableOnClose = useCallback(() => onCloseRef.current(), []);
-	const storyData = useStoryStore((s) => s.storyData);
+	const { storyData } = useStoryFields("storyData");
 	const passage = passageName ? storyData?.passages.get(passageName) : void 0;
 	const markup = passage?.content ?? fallbackMarkup;
 	const nobr = passage?.tags.includes("nobr") ?? false;
@@ -7278,19 +7387,92 @@ function App() {
 }
 //#endregion
 //#region src/parser.ts
+var HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
+/** HTML elements written without content or end tag, as innerHTML does. */
+var VOID_ELEMENTS = new Set([
+	"area",
+	"base",
+	"basefont",
+	"bgsound",
+	"br",
+	"col",
+	"embed",
+	"frame",
+	"hr",
+	"img",
+	"input",
+	"keygen",
+	"link",
+	"meta",
+	"param",
+	"source",
+	"track",
+	"wbr"
+]);
+/**
+* The passage markup in the nodes of passage data.
+*
+* A compiler that HTML-escapes passage text (Twine, Tweego) leaves a text
+* node whose text is the markup; a no-break space in it is U+00A0, which
+* innerHTML writes as `&nbsp;`. One that doesn't escape it leaves the
+* browser's parse of it, whose elements are written back as markup here.
+* innerHTML did that too, but its escaping can't be undone: a `"` in an
+* attribute value is written `&quot;`, and decoding that ends the value
+* early, while text it leaves unescaped (in `<style>`, comments) would be
+* decoded wrongly.
+*/
+function passageMarkup(parent) {
+	let markup = "";
+	for (const node of Array.from(parent.childNodes)) if (node.nodeType === Node.TEXT_NODE) markup += node.data;
+	else if (node.nodeType === Node.COMMENT_NODE) markup += `<!--${node.data}-->`;
+	else if (node.nodeType === Node.ELEMENT_NODE) markup += elementMarkup(node);
+	return markup;
+}
+/** An element of passage data as markup (see passageMarkup). */
+function elementMarkup(el) {
+	const name = el.localName;
+	let markup = `<${name}`;
+	for (const attr of Array.from(el.attributes)) markup += ` ${attr.name}=${quoteAttribute(attr.name, attr.value)}`;
+	markup += ">";
+	if (el.namespaceURI === HTML_NAMESPACE && VOID_ELEMENTS.has(name)) return markup;
+	const content = name === "template" ? el.content : el;
+	return `${markup}${passageMarkup(content)}</${name}>`;
+}
+/**
+* An attribute value quoted so that the passage tokenizer reads it back:
+* in double quotes, else single ones, else with the double quotes in its
+* text written as `&quot;`, which rendering decodes. Quotes inside markup in
+* the value (`{print "a"}`) are code, and don't end it.
+*/
+function quoteAttribute(name, value) {
+	const code = isCodeAttribute(name);
+	const probe = code ? "on" : "a";
+	const readsBack = (quoted) => {
+		const tokens = tokenize(`<i ${probe}=${quoted}>`);
+		const tag = tokens[0];
+		return tokens.length === 1 && tag?.type === "html" && tag.attributes[probe] === quoted.slice(1, -1);
+	};
+	return [`"${value}"`, `'${value}'`].find(readsBack) ?? `"${escapeTextQuotes(value, code)}"`;
+}
 /**
-* Decode the HTML entities that browsers use when serializing innerHTML.
-* &amp; is decoded last to avoid double-decoding (e.g. &amp;lt; → &lt;, not <).
+* `value` with the double quotes in its text written as `&quot;`, but not
+* those in markup (`{print "a"}`) or, in a code attribute, in sigil
+* references (see splitSigilTemplate), which are code.
 */
-function decodeHtmlEntities(html) {
-	return html.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&#39;/g, "'").replace(/&amp;/g, "&");
+function escapeTextQuotes(value, code) {
+	const escape = (text) => text.replace(/"/g, "&quot;");
+	if (code) return splitSigilTemplate(value).map((part) => "text" in part ? escape(part.text) : "expr" in part ? `{${part.expr}}` : part.verbatim).join("");
+	return tokenize(value, { text: true }).map((token) => {
+		const source = value.slice(token.start, token.end);
+		return token.type === "text" ? escape(source) : source;
+	}).join("");
 }
 /**
 * Parse <tw-storydata> and all <tw-passagedata> elements from the DOM.
 *
-* Uses innerHTML + entity decoding instead of textContent so that HTML
-* tags inside passage markup (e.g. <div> inside {button}) are preserved
-* regardless of whether the compiler HTML-encoded them.
+* Passage content is read with passageMarkup instead of textContent, so
+* that HTML tags inside passage markup (e.g. <div> inside {button}) are
+* preserved whether or not the compiler HTML-encoded them.
 */
 function parseStoryData() {
 	const storyEl = document.querySelector("tw-storydata");
@@ -7308,7 +7490,7 @@ function parseStoryData() {
 		const pid = parseInt(el.getAttribute("pid") || "0", 10);
 		const passageName = el.getAttribute("name") || "";
 		const tags = (el.getAttribute("tags") || "").split(/\s+/).filter((t) => t.length > 0);
-		const content = decodeHtmlEntities(el.innerHTML);
+		const content = passageMarkup(el);
 		const metadata = {};
 		const skipAttrs = new Set([
 			"pid",
@@ -7428,6 +7610,14 @@ var settings = {
 };
 //#endregion
 //#region src/action-registry.ts
+/** The fields of a StoryAction that are left out when unset. */
+var OPTIONAL_ACTION_FIELDS = [
+	"target",
+	"variable",
+	"options",
+	"value",
+	"disabled"
+];
 /**
 * The registrations holding each ID, oldest first; the newest is the one
 * listed. Generated IDs don't collide, but author IDs can, and one control's
@@ -7510,11 +7700,7 @@ function useAction(opts) {
 			label: opts.label,
 			perform: (...args) => performRef.current(...args)
 		};
-		if (opts.target !== void 0) action.target = opts.target;
-		if (opts.variable !== void 0) action.variable = opts.variable;
-		if (opts.options !== void 0) action.options = opts.options;
-		if (opts.value !== void 0) action.value = opts.value;
-		if (opts.disabled !== void 0) action.disabled = opts.disabled;
+		for (const field of OPTIONAL_ACTION_FIELDS) if (opts[field] !== void 0) Object.assign(action, { [field]: opts[field] });
 		return action;
 	};
 	const registration = useRef(null);
@@ -7729,6 +7915,12 @@ function readGroup(params, src, args) {
 	const rest = positional[restIndex];
 	args[rest.name] = from < to ? read(rest, text.slice(spans[from][0], spans[to - 1][1])) : unset(rest);
 }
+/** The duration a timing macro ({repeat}, {type}, {timed}/{next}) waits. */
+var DELAY_PARAMETER = {
+	name: "delay",
+	type: "delay",
+	required: true
+};
 /** Read `rawArgs` into the declared `parameters` (see above). */
 function parseMacroArgs(rawArgs, parameters) {
 	const args = {};
@@ -7782,15 +7974,19 @@ function parseVarArgs(rawArgs) {
 		placeholder
 	};
 }
+/** The parameters of an `{option}` sub-macro: its value. */
+var OPTION_PARAMETERS = [{
+	name: "value",
+	type: "string"
+}];
 /**
-* Walk AST children to find {option} macro nodes, returning their rawArgs as values.
+* Walk AST children to find {option} macro nodes, returning their values.
 */
 function extractOptions(children) {
 	const options = [];
 	for (const node of children) if (node.type === "macro" && node.name === "option") {
-		const raw = node.rawArgs.trim();
-		const stripped = readWholeQuoted(raw) ?? raw.replace(/^(["'])(.+)\1$/s, "$2");
-		options.push(stripped);
+		const { value } = parseMacroArgs(node.rawArgs, OPTION_PARAMETERS);
+		options.push(value ?? node.rawArgs.trim().replace(/^(["'])(.+)\1$/s, "$2"));
 	}
 	return options;
 }
@@ -7844,13 +8040,7 @@ function defineMacro(config, source = "builtin") {
 			mutate: (code) => executeMutation(code, getValues(), update),
 			update,
 			getValues,
-			wrap: (content) => {
-				if (className || id) return h("span", {
-					id,
-					class: className
-				}, content);
-				return h(Fragment, null, content);
-			}
+			wrap: (content) => wrapContent(className, id, content)
 		};
 		if (config.merged) {
 			ctx.merged = useMergedLocals();
@@ -7981,9 +8171,11 @@ function setOne(draft, name, value) {
 	if (key.includes(".")) setByPath(namespace, key.split("."), value);
 	else namespace[key] = value;
 }
+/** A method calling the store action `name`, as the store holds it then. */
+function storeAction(name) {
+	return ((...args) => useStoryStore.getState()[name](...args));
+}
 function createStoryAPI() {
-	const visits = countQueries(() => useStoryStore.getState().visitCounts);
-	const renders = countQueries(() => useStoryStore.getState().renderCounts);
 	return {
 		get(name) {
 			const { isTransient, key } = parseName(name);
@@ -8003,52 +8195,19 @@ function createStoryAPI() {
 				for (const [k, v] of entries) setOne(draft, k, v);
 			});
 		},
-		goto(passageName) {
-			useStoryStore.getState().navigate(passageName);
-		},
-		back() {
-			useStoryStore.getState().goBack();
-		},
-		forward() {
-			useStoryStore.getState().goForward();
-		},
-		restart() {
-			useStoryStore.getState().restart();
-		},
-		save(slot, custom) {
-			return useStoryStore.getState().save(slot, custom);
-		},
-		load(slot) {
-			return useStoryStore.getState().load(slot);
-		},
-		hasSave(slot) {
-			return useStoryStore.getState().hasSave(slot);
-		},
-		getSaveInfo(slot) {
-			return useStoryStore.getState().getSaveInfo(slot);
-		},
-		listSaves() {
-			return useStoryStore.getState().listSaves();
-		},
-		deleteSave(slot) {
-			return useStoryStore.getState().deleteSave(slot);
-		},
-		exportSave(slot) {
-			return useStoryStore.getState().exportSave(slot);
-		},
-		importSave(data, slot) {
-			return useStoryStore.getState().importSave(data, slot);
-		},
-		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,
+		goto: storeAction("navigate"),
+		back: storeAction("goBack"),
+		forward: storeAction("goForward"),
+		restart: storeAction("restart"),
+		save: storeAction("save"),
+		load: storeAction("load"),
+		hasSave: storeAction("hasSave"),
+		getSaveInfo: storeAction("getSaveInfo"),
+		listSaves: storeAction("listSaves"),
+		deleteSave: storeAction("deleteSave"),
+		exportSave: storeAction("exportSave"),
+		importSave: storeAction("importSave"),
+		...historyQueries(() => useStoryStore.getState().visitCounts, () => useStoryStore.getState().renderCounts),
 		get title() {
 			return useStoryStore.getState().storyData?.name || "";
 		},
@@ -8094,15 +8253,9 @@ function createStoryAPI() {
 					estimateSupported: false
 				};
 			},
-			clearGameData() {
-				return useStoryStore.getState().clearGameData();
-			},
-			clearAllData() {
-				return useStoryStore.getState().clearAllData();
-			},
-			deletePlaythrough(playthroughId) {
-				return useStoryStore.getState().deletePlaythrough(playthroughId);
-			},
+			clearGameData: storeAction("clearGameData"),
+			clearAllData: storeAction("clearAllData"),
+			deletePlaythrough: storeAction("deletePlaythrough"),
 			get backend() {
 				return getBackendType();
 			}
@@ -8510,26 +8663,51 @@ function astContainsChildren(nodes) {
 }
 //#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+/);
+/** A {widget} definition's name, then its `@` parameters. */
+var WIDGET_PARAMETERS = [{
+	name: "name",
+	type: "text",
+	required: true
+}, {
+	name: "parameters",
+	type: "expression"
+}];
+/**
+* The widget a {widget} definition's arguments declare: its name and its
+* parameters, the words after it that start with `@` (docs/widgets.md).
+* Other words, such as `$name`, are not parameters.
+*/
+function widgetDef({ name = "", parameters = "" }) {
 	return {
-		name: first.replace(/["']/g, ""),
-		params: rest.filter((word) => sigils.includes(word[0]))
+		name,
+		params: parameters.split(/\s+/).filter((word) => word.startsWith("@"))
 	};
 }
+/** Read the arguments of a {widget} definition (see widgetDef). */
+function parseWidgetDef(rawArgs) {
+	return widgetDef(parseMacroArgs(rawArgs, WIDGET_PARAMETERS));
+}
+/**
+* Register the widget a definition declares, with its body. Widgets whose
+* body renders {@children} take a closing tag, so they are registered as
+* block macros too: passages parsed later nest their content. A parameter
+* that no namespace can hold throws (see registerWidget), registering
+* nothing.
+*/
+function registerWidgetDef({ name, params }, body) {
+	const isBlock = astContainsChildren(body);
+	registerWidget(name, body, params, isBlock);
+	if (isBlock) registerBlockMacro(name);
+}
 defineMacro({
 	name: "widget",
 	block: true,
-	render({ rawArgs, children = [] }, ctx) {
+	parameters: WIDGET_PARAMETERS,
+	render({ children = [] }, ctx) {
 		let parsed;
 		let error;
 		try {
-			const def = parseWidgetDef(rawArgs);
+			const def = widgetDef(ctx.args);
 			for (const param of def.params) checkVariableName(param.slice(1), param);
 			parsed = def;
 		} catch (err) {
@@ -8542,10 +8720,7 @@ defineMacro({
 		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);
+			if (parsed) registerWidgetDef(parsed, children);
 		}, [
 			name,
 			childrenKey,
@@ -8584,9 +8759,7 @@ defineMacro({
 	merged: true,
 	render({ rawArgs }, ctx) {
 		try {
-			const result = ctx.evaluate(rawArgs);
-			const display = result == null ? "" : String(result);
-			return ctx.wrap(display);
+			return ctx.wrap(display(ctx.evaluate(rawArgs)));
 		} catch (err) {
 			return /* @__PURE__ */ jsx(MacroError, {
 				macro: "print",
@@ -8595,8 +8768,7 @@ defineMacro({
 		}
 	},
 	text({ rawArgs }, ctx) {
-		const result = ctx.evaluate(rawArgs);
-		return result == null ? "" : String(result);
+		return display(ctx.evaluate(rawArgs));
 	}
 });
 //#endregion
@@ -8766,40 +8938,50 @@ defineMacro({
 	}
 });
 //#endregion
+//#region src/components/macros/branches.ts
+/**
+* The branch a conditional block ({if}, {switch}) shows: the first of
+* `branches` whose argument `matches`, else the last bare one ({else},
+* {default}), else null. Throws what `matches` throws.
+*/
+function selectBranch(branches, matches) {
+	let fallback = null;
+	for (const branch of branches) if (branch.rawArgs === "") fallback = branch;
+	else if (matches(branch.rawArgs)) return branch;
+	return fallback;
+}
+//#endregion
 //#region src/components/macros/If.tsx
+/**
+* The {if}/{elseif}/{else} branch whose condition holds, else the {else}
+* branch, else null: the chain ends at its first bare branch. Throws what a
+* condition throws.
+*/
+function selectIfBranch(branches, evaluate) {
+	const end = branches.findIndex((branch) => branch.rawArgs === "");
+	return selectBranch(end < 0 ? branches : branches.slice(0, end + 1), (expr) => Boolean(evaluate(expr)));
+}
 defineMacro({
 	name: "if",
 	block: true,
 	interpolate: true,
 	merged: true,
 	render({ branches = [] }, ctx) {
-		function renderBranch(branch) {
-			const children = ctx.renderNodes(branch.children);
-			const cls = ctx.resolve(branch.className);
-			const branchId = ctx.resolve(branch.id);
-			if (cls || branchId) return /* @__PURE__ */ jsx("span", {
-				id: branchId,
-				class: cls,
-				children
+		let branch;
+		try {
+			branch = selectIfBranch(branches, ctx.evaluate);
+		} catch (err) {
+			return /* @__PURE__ */ jsx(MacroError, {
+				macro: "if",
+				error: err
 			});
-			return /* @__PURE__ */ jsx(Fragment$1, { children });
-		}
-		for (const branch of branches) {
-			if (branch.rawArgs === "") return renderBranch(branch);
-			try {
-				if (ctx.evaluate(branch.rawArgs)) return renderBranch(branch);
-			} catch (err) {
-				return /* @__PURE__ */ jsx(MacroError, {
-					macro: "if",
-					error: err
-				});
-			}
 		}
-		return null;
+		if (!branch) return null;
+		return wrapContent(ctx.resolve(branch.className), ctx.resolve(branch.id), ctx.renderNodes(branch.children));
 	},
 	text({ branches = [] }, ctx) {
-		for (const branch of branches) if (branch.rawArgs === "" || ctx.evaluate(branch.rawArgs)) return ctx.renderText(branch.children);
-		return "";
+		const branch = selectIfBranch(branches, ctx.evaluate);
+		return branch ? ctx.renderText(branch.children) : "";
 	}
 });
 //#endregion
@@ -8995,11 +9177,7 @@ defineMacro({
 	name: "repeat",
 	block: true,
 	interpolate: true,
-	parameters: [{
-		name: "delay",
-		type: "delay",
-		required: true
-	}],
+	parameters: [DELAY_PARAMETER],
 	render({ children = [] }, ctx) {
 		const { useState, useEffect, useCallback } = ctx.hooks;
 		const delay = ctx.args.delay ?? 0;
@@ -9166,14 +9344,8 @@ defineMacro({
 * The first {case} branch whose value equals `value`, else the {default}
 * branch, else null. Throws what a case expression throws.
 */
-function selectBranch(value, branches, evaluate) {
-	let defaultBranch = null;
-	for (let i = 1; i < branches.length; i++) {
-		const branch = branches[i];
-		if (branch.rawArgs === "") defaultBranch = branch;
-		else if (value === evaluate(branch.rawArgs)) return branch;
-	}
-	return defaultBranch;
+function selectCase(value, branches, evaluate) {
+	return selectBranch(branches.slice(1), (expr) => value === evaluate(expr));
 }
 defineMacro({
 	name: "switch",
@@ -9196,7 +9368,7 @@ defineMacro({
 		}
 		let branch;
 		try {
-			branch = selectBranch(switchValue, branches, ctx.evaluate);
+			branch = selectCase(switchValue, branches, ctx.evaluate);
 		} catch (err) {
 			return /* @__PURE__ */ jsx(MacroError, {
 				macro: "case",
@@ -9206,21 +9378,24 @@ defineMacro({
 		return branch && /* @__PURE__ */ jsx(Fragment$1, { children: ctx.renderNodes(branch.children) });
 	},
 	text({ rawArgs, branches = [] }, ctx) {
-		const branch = selectBranch(ctx.evaluate(rawArgs), branches, ctx.evaluate);
+		const branch = selectCase(ctx.evaluate(rawArgs), branches, ctx.evaluate);
 		return branch ? ctx.renderText(branch.children) : "";
 	}
 });
 //#endregion
 //#region src/components/macros/Timed.tsx
+/** The parameters of {timed} and of each {next}: the delay before it shows. */
+var TIMED_PARAMETERS = [DELAY_PARAMETER];
 defineMacro({
 	name: "timed",
 	subMacros: ["next"],
 	interpolate: true,
+	parameters: TIMED_PARAMETERS,
 	render({ branches = [] }, ctx) {
 		const { useState, useEffect, useMemo } = ctx.hooks;
 		const sections = useMemo(() => {
 			return branches.map((branch) => ({
-				delay: branch.rawArgs ? parseDelay(branch.rawArgs) : 0,
+				delay: parseMacroArgs(branch.rawArgs, TIMED_PARAMETERS).delay ?? 0,
 				nodes: branch.children,
 				className: branch.className,
 				id: branch.id
@@ -9238,15 +9413,7 @@ defineMacro({
 		}, [visibleIndex, sections]);
 		if (visibleIndex < 0) return ctx.wrap(null);
 		const section = sections[visibleIndex];
-		const content = ctx.renderNodes(section.nodes);
-		const sectionClass = ctx.resolve(section.className);
-		const sectionId = ctx.resolve(section.id);
-		const inner = sectionClass || sectionId ? /* @__PURE__ */ jsx("span", {
-			id: sectionId,
-			class: sectionClass,
-			children: content
-		}) : content;
-		return ctx.wrap(inner);
+		return ctx.wrap(wrapContent(ctx.resolve(section.className), ctx.resolve(section.id), ctx.renderNodes(section.nodes)));
 	}
 });
 //#endregion
@@ -9267,11 +9434,7 @@ defineMacro({
 	name: "type",
 	block: true,
 	interpolate: true,
-	parameters: [{
-		name: "delay",
-		type: "delay",
-		required: true
-	}],
+	parameters: [DELAY_PARAMETER],
 	render({ children = [] }, ctx) {
 		const { useState, useEffect, useRef } = ctx.hooks;
 		const speed = ctx.args.delay ?? 0;
@@ -9886,7 +10049,7 @@ defineMacro({
 		required: true
 	}],
 	render(_props, ctx) {
-		const storyData = useStoryStore((s) => s.storyData);
+		const { storyData } = useStoryFields("storyData");
 		const { inline } = ctx.args;
 		const passageName = evaluatePassageName(ctx.args.passage, ctx.evaluate);
 		const passage = storyData?.passages.get(passageName);
@@ -9953,6 +10116,26 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/input-macro.ts
+/** The story variable a `storeVar` macro binds: its first parameter. */
+var VARIABLE_PARAMETER = {
+	name: "variable",
+	type: "variable",
+	required: true
+};
+/**
+* Register the automation action of a macro bound to a story variable: keyed
+* by the variable (or `key`), with the variable's value unless `action`
+* gives another.
+*/
+function useVariableAction(ctx, action) {
+	return ctx.useAction({
+		key: `$${ctx.varName}`,
+		authorId: ctx.id,
+		variable: ctx.varName,
+		value: ctx.value,
+		...action
+	});
+}
 /**
 * Define a text input macro, `{name $var "placeholder"}`: an `<input>` of
 * `type` (or, without one, a `<textarea>`) bound to the story variable.
@@ -9964,30 +10147,22 @@ function defineInputMacro(name, type, toValue = (input) => input !== void 0 ? St
 	defineMacro({
 		name,
 		storeVar: true,
-		parameters: [{
-			name: "variable",
-			type: "variable",
-			required: true
-		}, {
+		parameters: [VARIABLE_PARAMETER, {
 			name: "placeholder",
 			type: "string"
 		}],
 		render(_props, ctx) {
 			const placeholder = ctx.args.placeholder ?? "";
-			ctx.useAction({
+			useVariableAction(ctx, {
 				type: name,
-				key: `$${ctx.varName}`,
-				authorId: ctx.id,
 				label: placeholder || ctx.varName,
-				variable: ctx.varName,
-				value: ctx.value,
 				perform: (v) => ctx.setValue(toValue(v))
 			});
 			return h(type ? "input" : "textarea", {
 				type,
 				id: ctx.id,
 				class: ctx.cls,
-				value: ctx.value == null ? "" : String(ctx.value),
+				value: display(ctx.value),
 				placeholder,
 				onInput: (e) => ctx.setValue(toValue(e.target.value))
 			});
@@ -10008,22 +10183,15 @@ defineInputMacro("textarea");
 defineMacro({
 	name: "checkbox",
 	storeVar: true,
-	parameters: [{
-		name: "variable",
-		type: "variable",
-		required: true
-	}, {
+	parameters: [VARIABLE_PARAMETER, {
 		name: "label",
 		type: "text"
 	}],
 	render(_props, ctx) {
 		const label = ctx.args.label ?? "";
-		ctx.useAction({
+		useVariableAction(ctx, {
 			type: "checkbox",
-			key: `$${ctx.varName}`,
-			authorId: ctx.id,
 			label: label || ctx.varName || "",
-			variable: ctx.varName,
 			value: !!ctx.value,
 			perform: (v) => ctx.setValue(v !== void 0 ? !!v : !ctx.value)
 		});
@@ -10044,11 +10212,7 @@ defineMacro({
 	name: "radiobutton",
 	storeVar: true,
 	parameters: [
-		{
-			name: "variable",
-			type: "variable",
-			required: true
-		},
+		VARIABLE_PARAMETER,
 		{
 			name: "value",
 			type: "text",
@@ -10062,13 +10226,10 @@ defineMacro({
 	render(_props, ctx) {
 		const radioValue = ctx.args.value ?? "";
 		const label = ctx.args.label ?? "";
-		ctx.useAction({
+		useVariableAction(ctx, {
 			type: "radiobutton",
 			key: `$${ctx.varName}:${radioValue}`,
-			authorId: ctx.id,
 			label: label || radioValue,
-			variable: ctx.varName,
-			value: ctx.value,
 			perform: () => ctx.setValue(radioValue)
 		});
 		return /* @__PURE__ */ jsxs("label", {
@@ -10089,21 +10250,13 @@ defineMacro({
 	name: "listbox",
 	subMacros: ["option"],
 	storeVar: true,
-	parameters: [{
-		name: "variable",
-		type: "variable",
-		required: true
-	}],
+	parameters: [VARIABLE_PARAMETER],
 	render({ children = [] }, ctx) {
 		const options = ctx.extractOptions(children);
-		ctx.useAction({
+		useVariableAction(ctx, {
 			type: "listbox",
-			key: `$${ctx.varName}`,
-			authorId: ctx.id,
 			label: ctx.varName,
-			variable: ctx.varName,
 			options,
-			value: ctx.value,
 			perform: (v) => {
 				if (v !== void 0) ctx.setValue(String(v));
 			}
@@ -10111,7 +10264,7 @@ defineMacro({
 		return /* @__PURE__ */ jsx("select", {
 			id: ctx.id,
 			class: ctx.cls,
-			value: ctx.value == null ? "" : String(ctx.value),
+			value: display(ctx.value),
 			onChange: (e) => ctx.setValue(e.target.value),
 			children: options.map((opt) => /* @__PURE__ */ jsx("option", {
 				value: opt,
@@ -10126,11 +10279,7 @@ defineMacro({
 	name: "cycle",
 	block: true,
 	storeVar: true,
-	parameters: [{
-		name: "variable",
-		type: "variable",
-		required: true
-	}],
+	parameters: [VARIABLE_PARAMETER],
 	render({ children = [] }, ctx) {
 		const options = ctx.extractOptions(children);
 		const handleClick = () => {
@@ -10139,14 +10288,10 @@ defineMacro({
 			const nextIndex = (options.indexOf(String(current)) + 1) % options.length;
 			ctx.setValue(options[nextIndex]);
 		};
-		ctx.useAction({
+		useVariableAction(ctx, {
 			type: "cycle",
-			key: `$${ctx.varName}`,
-			authorId: ctx.id,
 			label: ctx.value == null ? options[0] || "" : String(ctx.value),
-			variable: ctx.varName,
 			options,
-			value: ctx.value,
 			perform: (v) => {
 				if (v !== void 0) ctx.setValue(v);
 				else handleClick();
@@ -10192,6 +10337,20 @@ function parsePassage(passage) {
 function renderPassageContent(passage) {
 	return renderNodes(parsePassage(passage), passage.tags.includes("nobr") ? { nobr: true } : void 0);
 }
+/**
+* The content of a special passage shown with every passage (PassageHeader,
+* PassageFooter, PassageDone), or null. One that fails to render is logged
+* and left out, so it can't take the passage down with it.
+*/
+function renderSpecialPassage(passage) {
+	if (!passage) return null;
+	try {
+		return renderPassageContent(passage);
+	} catch (err) {
+		console.error(`spindle: Error in ${passage.name}:`, err);
+		return null;
+	}
+}
 var CODE_PASSAGES = new Set([
 	"PassageReady",
 	"PassageHeader",
@@ -10199,7 +10358,7 @@ var CODE_PASSAGES = new Set([
 	"PassageDone"
 ]);
 function Passage({ passage, dataTransition, navigationId }) {
-	const storyData = useStoryStore((s) => s.storyData);
+	const { storyData } = useStoryFields("storyData");
 	const isCodePassage = CODE_PASSAGES.has(passage.name);
 	const [doneReady, setDoneReady] = useState(false);
 	const content = useMemo(() => {
@@ -10219,40 +10378,17 @@ function Passage({ passage, dataTransition, navigationId }) {
 			});
 		}
 	}, [passage.content, passage.name]);
-	const headerPassage = isCodePassage ? void 0 : storyData?.passages.get("PassageHeader");
-	const footerPassage = isCodePassage ? void 0 : storyData?.passages.get("PassageFooter");
-	const donePassage = isCodePassage ? void 0 : storyData?.passages.get("PassageDone");
-	const headerContent = useMemo(() => {
-		if (!headerPassage) return null;
-		try {
-			return renderPassageContent(headerPassage);
-		} catch (err) {
-			console.error("spindle: Error in PassageHeader:", err);
-			return null;
-		}
-	}, [headerPassage?.content]);
-	const footerContent = useMemo(() => {
-		if (!footerPassage) return null;
-		try {
-			return renderPassageContent(footerPassage);
-		} catch (err) {
-			console.error("spindle: Error in PassageFooter:", err);
-			return null;
-		}
-	}, [footerPassage?.content]);
+	const special = (name) => isCodePassage ? void 0 : storyData?.passages.get(name);
+	const headerPassage = special("PassageHeader");
+	const footerPassage = special("PassageFooter");
+	const donePassage = special("PassageDone");
+	const headerContent = useMemo(() => renderSpecialPassage(headerPassage), [headerPassage?.content]);
+	const footerContent = useMemo(() => renderSpecialPassage(footerPassage), [footerPassage?.content]);
 	useEffect(() => {
 		if (donePassage) setDoneReady(true);
 		return () => setDoneReady(false);
 	}, [passage.name]);
-	const doneContent = useMemo(() => {
-		if (!doneReady || !donePassage) return null;
-		try {
-			return renderPassageContent(donePassage);
-		} catch (err) {
-			console.error("spindle: Error in PassageDone:", err);
-			return null;
-		}
-	}, [doneReady, donePassage?.content]);
+	const doneContent = useMemo(() => doneReady ? renderSpecialPassage(donePassage) : null, [doneReady, donePassage?.content]);
 	const elRef = useRef(null);
 	useLayoutEffect(() => {
 		if (navigationId !== void 0) markPassageRendered(navigationId);
@@ -10653,16 +10789,12 @@ 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 { name: widgetName, params } = parseWidgetDef(node.rawArgs, "$_@");
-			const children = node.children;
-			const isBlock = astContainsChildren(children);
+			const def = parseWidgetDef(node.rawArgs);
 			try {
-				registerWidget(widgetName, children, params, isBlock);
+				registerWidgetDef(def, node.children);
 			} catch (err) {
-				console.error(`spindle: widget "${widgetName}" in passage "${passage.name}" was not registered: ${errorMessage(err)}`);
-				continue;
+				console.error(`spindle: widget "${def.name}" in passage "${passage.name}" was not registered: ${errorMessage(err)}`);
 			}
-			if (isBlock) registerBlockMacro(widgetName);
 		}
 	}
 	let prevNavigationId = useStoryStore.getState().navigationId;