@rohal12/spindle 0.52.7 → 0.52.8

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,351 +115,6 @@ 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;
-}
-/**
-* 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
-/**
-* 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 (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 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();
@@ -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
@@ -4433,17 +4154,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 +4206,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 +4488,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 +4514,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);
@@ -4875,31 +4595,363 @@ async function detectBackend() {
 	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).
+* 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.
 */
-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;
+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
 		});
-		_backendPromise = pending;
+		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;
 	}
-	return _backendPromise;
+	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;
 }
-function resetBackend() {
-	_backend = null;
-	_backendPromise = null;
+/**
+* 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);
 }
 /**
-* 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 +5054,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 +5258,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 +5414,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 +5510,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 +5538,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 +7102,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 +7203,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;
@@ -7428,6 +7485,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 +7575,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 +7790,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 +7849,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 +7915,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 +8046,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 +8070,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 +8128,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 +8538,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 +8595,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 +8634,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 +8643,7 @@ defineMacro({
 		}
 	},
 	text({ rawArgs }, ctx) {
-		const result = ctx.evaluate(rawArgs);
-		return result == null ? "" : String(result);
+		return display(ctx.evaluate(rawArgs));
 	}
 });
 //#endregion
@@ -8766,40 +8813,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 +9052,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 +9219,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 +9243,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 +9253,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 +9288,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 +9309,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 +9924,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 +9991,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 +10022,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 +10058,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 +10087,7 @@ defineMacro({
 	name: "radiobutton",
 	storeVar: true,
 	parameters: [
-		{
-			name: "variable",
-			type: "variable",
-			required: true
-		},
+		VARIABLE_PARAMETER,
 		{
 			name: "value",
 			type: "text",
@@ -10062,13 +10101,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 +10125,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 +10139,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 +10154,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 +10163,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 +10212,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 +10233,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 +10253,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 +10664,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;